Commit aa310d61a7440bb71ae00ea2f54e8b1f0f35ba39
1 parent
2fe1115d8a
Exists in
master
and in
3 other branches
added functionality of global payment and change icons
Showing
36 changed files
with
217 additions
and
130 deletions
Show diff stats
src/api/menu.js
| 1 | const adminMenu = [ | 1 | const adminMenu = [ |
| 2 | // { header: 'Apps' }, | 2 | // { header: 'Apps' }, |
| 3 | { | 3 | { |
| 4 | title: 'Dashboard', | 4 | title: 'Dashboard', |
| 5 | // group: 'apps', | 5 | // group: 'apps', |
| 6 | name: 'Dashboard', | 6 | name: 'Dashboard', |
| 7 | icon: '/static/icon/dashboard.png', | 7 | icon: '/static/icon/dashboard.png', |
| 8 | }, | 8 | }, |
| 9 | { | 9 | { |
| 10 | title: 'Class', | 10 | title: 'Class', |
| 11 | // group: 'apps', | 11 | // group: 'apps', |
| 12 | name: 'Class', | 12 | name: 'Class', |
| 13 | icon: '/static/icon/class.png', | 13 | icon: '/static/icon/class.png', |
| 14 | }, | 14 | }, |
| 15 | { | 15 | { |
| 16 | title: 'Section', | 16 | title: 'Section', |
| 17 | // group: 'apps', | 17 | // group: 'apps', |
| 18 | name: 'Section', | 18 | name: 'Section', |
| 19 | icon: '/static/icon/section.png', | 19 | icon: '/static/icon/section.png', |
| 20 | }, | 20 | }, |
| 21 | { | 21 | { |
| 22 | title: 'Subjects', | 22 | title: 'Subjects', |
| 23 | name: 'Subject', | 23 | name: 'Subject', |
| 24 | icon: '/static/icon/subject.png', | 24 | icon: '/static/icon/subject.png', |
| 25 | }, | 25 | }, |
| 26 | { | 26 | { |
| 27 | title: 'Parents', | 27 | title: 'Parents', |
| 28 | // group: 'apps', | 28 | // group: 'apps', |
| 29 | name: 'Parents', | 29 | name: 'Parents', |
| 30 | icon: '/static/icon/parents.png', | 30 | icon: '/static/icon/parents.png', |
| 31 | }, | 31 | }, |
| 32 | { | 32 | { |
| 33 | title: 'Teachers', | 33 | title: 'Teachers', |
| 34 | // group: '', | 34 | // group: '', |
| 35 | name: 'Teachers', | 35 | name: 'Teachers', |
| 36 | icon: '/static/icon/teacher.png', | 36 | icon: '/static/icon/teacher.png', |
| 37 | }, | 37 | }, |
| 38 | { | 38 | { |
| 39 | title: 'Students', | 39 | title: 'Students', |
| 40 | // group: 'apps', | 40 | // group: 'apps', |
| 41 | name: 'Students', | 41 | name: 'Students', |
| 42 | icon: '/static/icon/student.png', | 42 | icon: '/static/icon/student.png', |
| 43 | }, | 43 | }, |
| 44 | { | 44 | { |
| 45 | title: 'User', | 45 | title: 'User', |
| 46 | name: 'User', | 46 | name: 'User', |
| 47 | icon: '/static/icon/users.png', | 47 | icon: '/static/icon/users.png', |
| 48 | }, | 48 | }, |
| 49 | { | 49 | { |
| 50 | title: 'Attendance', | 50 | title: 'Attendance', |
| 51 | group: 'Attendance', | 51 | group: 'Attendance', |
| 52 | component: 'Attendance', | 52 | component: 'Attendance', |
| 53 | icon: '/static/icon/attendence.png', | 53 | icon: '/static/icon/attendence.png', |
| 54 | items: [ | 54 | items: [ |
| 55 | { name: 'StudentAttendence', title: 'Student Attendance', component: 'Student Attendence', action: '', }, | 55 | { name: 'StudentAttendence', title: 'Student Attendance', component: 'Student Attendence', action: '', }, |
| 56 | { name: 'TeacherAttendence', title: 'Teacher Attendance', component: 'Teacher Attendence', action: '', } | 56 | { name: 'TeacherAttendence', title: 'Teacher Attendance', component: 'Teacher Attendence', action: '', } |
| 57 | // { name: 'userAttendence', title: 'User Attendance', component: 'userAttendence', action: '', }, | 57 | // { name: 'userAttendence', title: 'User Attendance', component: 'userAttendence', action: '', }, |
| 58 | ] | 58 | ] |
| 59 | }, | 59 | }, |
| 60 | { | 60 | { |
| 61 | title: 'Exam', | 61 | title: 'Exam', |
| 62 | group: 'Exam', | 62 | group: 'Exam', |
| 63 | component: 'Exam', | 63 | component: 'Exam', |
| 64 | icon: '/static/icon/exam.png', | 64 | icon: '/static/icon/exam.png', |
| 65 | items: [ | 65 | items: [ |
| 66 | { name: 'Exam', title: 'Exam', component: 'Exam', action: '', }, | 66 | { name: 'Exam', title: 'Exam', component: 'Exam', action: '', }, |
| 67 | { name: 'ExamSchedule', title: 'Exam Schedule', component: 'Exam Schedule', action: '', }, | 67 | { name: 'ExamSchedule', title: 'Exam Schedule', component: 'Exam Schedule', action: '', }, |
| 68 | { name: 'Grade', title: 'Grade', component: 'Grade', action: '', }, | 68 | { name: 'Grade', title: 'Grade', component: 'Grade', action: '', }, |
| 69 | // { name: 'userAttendence', title: 'User Attendance', component: 'userAttendence', action: '', }, | 69 | // { name: 'userAttendence', title: 'User Attendance', component: 'userAttendence', action: '', }, |
| 70 | ] | 70 | ] |
| 71 | }, | 71 | }, |
| 72 | { | 72 | { |
| 73 | title: 'Marks', | 73 | title: 'Marks', |
| 74 | group: 'Mark', | 74 | group: 'Mark', |
| 75 | component: 'Mark', | 75 | component: 'Mark', |
| 76 | icon: '/static/icon/marks.png', | 76 | icon: '/static/icon/marks.png', |
| 77 | items: [ | 77 | items: [ |
| 78 | { name: 'Mark', title: 'Mark', component: 'Mark', action: '', }, | 78 | { name: 'Mark', title: 'Mark', component: 'Mark', action: '', }, |
| 79 | { name: 'MarkDistribution', title: 'Mark Distribution', component: 'Mark Distribution', action: '', }, | 79 | { name: 'MarkDistribution', title: 'Mark Distribution', component: 'Mark Distribution', action: '', }, |
| 80 | { name: 'Promotion', title: 'promotion', component: 'Promotion', action: '', }, | 80 | { name: 'Promotion', title: 'promotion', component: 'Promotion', action: '', }, |
| 81 | // { name: 'userAttendence', title: 'User Attendance', component: 'userAttendence', action: '', }, | 81 | // { name: 'userAttendence', title: 'User Attendance', component: 'userAttendence', action: '', }, |
| 82 | ] | 82 | ] |
| 83 | }, | 83 | }, |
| 84 | { | 84 | { |
| 85 | title: 'Administrator', | 85 | title: 'Administrator', |
| 86 | group: 'Administrator', | 86 | group: 'Administrator', |
| 87 | component: 'Administrator', | 87 | component: 'Administrator', |
| 88 | icon: '/static/icon/adminstrator.png', | 88 | icon: '/static/icon/adminstrator.png', |
| 89 | items: [ | 89 | items: [ |
| 90 | { name: 'AcademicYear', title: 'Academic Year', component: 'Academic Year', action: '', }, | 90 | { name: 'AcademicYear', title: 'Academic Year', component: 'Academic Year', action: '', }, |
| 91 | // { name: 'systemAdmin', title: 'System Admin', component: 'systemAdmin', action: '', }, | 91 | // { name: 'systemAdmin', title: 'System Admin', component: 'systemAdmin', action: '', }, |
| 92 | { name: 'resetPassword', title: 'Reset Password', component: 'Reset Password', action: '', }, | 92 | { name: 'resetPassword', title: 'Reset Password', component: 'Reset Password', action: '', }, |
| 93 | { name: 'Role', title: 'Role', component: 'Role', action: '', }, | 93 | { name: 'Role', title: 'Role', component: 'Role', action: '', }, |
| 94 | { name: 'BulkImport', title: 'Bulk Import', component: 'Bulk Import', action: '', }, | 94 | { name: 'BulkImport', title: 'Bulk Import', component: 'Bulk Import', action: '', }, |
| 95 | 95 | ||
| 96 | ] | 96 | ] |
| 97 | }, | 97 | }, |
| 98 | { | 98 | { |
| 99 | title: 'Notice Board', | 99 | title: 'Notice Board', |
| 100 | name: 'Notice Board', | 100 | name: 'Notice Board', |
| 101 | icon: '/static/icon/notice board.png', | 101 | icon: '/static/icon/notice board.png', |
| 102 | }, | 102 | }, |
| 103 | { | 103 | { |
| 104 | title: 'News', | 104 | title: 'News', |
| 105 | name: 'News', | 105 | name: 'News', |
| 106 | icon: '/static/icon/news.png', | 106 | icon: '/static/icon/news.png', |
| 107 | }, | 107 | }, |
| 108 | // { | 108 | // { |
| 109 | // title: 'Reminder', | 109 | // title: 'Reminder', |
| 110 | // name: 'reminder', | 110 | // name: 'reminder', |
| 111 | // icon: 'alarm_add', | 111 | // icon: 'alarm_add', |
| 112 | // }, | 112 | // }, |
| 113 | { | 113 | { |
| 114 | title: 'Time Table', | 114 | title: 'Time Table', |
| 115 | name: 'Time Table', | 115 | name: 'Time Table', |
| 116 | icon: '/static/icon/time table.png', | 116 | icon: '/static/icon/time table.png', |
| 117 | }, | 117 | }, |
| 118 | { | 118 | { |
| 119 | title: 'Library', | 119 | title: 'Library', |
| 120 | group: 'Library', | 120 | group: 'Library', |
| 121 | component: 'Library', | 121 | component: 'Library', |
| 122 | icon: '/static/icon/library.png', | 122 | icon: '/static/icon/library.png', |
| 123 | items: [ | 123 | items: [ |
| 124 | { name: 'LibraryMember', title: ' Library Member', component: 'Library Member', action: '', }, | 124 | { name: 'LibraryMember', title: ' Library Member', component: 'Library Member', action: '', }, |
| 125 | { name: 'Books', title: 'Books', component: 'Books', action: '', }, | 125 | { name: 'Books', title: 'Books', component: 'Books', action: '', }, |
| 126 | { name: 'Issue', title: ' Issue', component: 'Issue', action: '', }, | 126 | { name: 'Issue', title: ' Issue', component: 'Issue', action: '', }, |
| 127 | { name: 'E-Books', title: 'E-Books', component: 'E-Books', action: '', } | 127 | { name: 'E-Books', title: 'E-Books', component: 'E-Books', action: '', } |
| 128 | 128 | ||
| 129 | ] | 129 | ] |
| 130 | }, | 130 | }, |
| 131 | { | 131 | { |
| 132 | title: 'Report', | 132 | title: 'Report', |
| 133 | group: 'Report', | 133 | group: 'Report', |
| 134 | component: 'Report', | 134 | component: 'Report', |
| 135 | icon: '/static/icon/reports.png', | 135 | icon: '/static/icon/reports.png', |
| 136 | items: [ | 136 | items: [ |
| 137 | { name: 'studentReport', title: 'Student Report', component: 'Student Report', action: '', }, | 137 | { name: 'studentReport', title: 'Student Report', component: 'Student Report', action: '', }, |
| 138 | { name: 'ProgressCardReport', title: 'Progress Card Report', component: 'Progress Card Report', action: '', } | 138 | { name: 'ProgressCardReport', title: 'Progress Card Report', component: 'Progress Card Report', action: '', } |
| 139 | ] | 139 | ] |
| 140 | }, | 140 | }, |
| 141 | { | 141 | { |
| 142 | title: 'Notification', | 142 | title: 'Notification', |
| 143 | name: 'Notification', | 143 | name: 'Notification', |
| 144 | icon: '/static/icon/notification.png', | 144 | icon: '/static/icon/notification.png', |
| 145 | }, | 145 | }, |
| 146 | { | 146 | { |
| 147 | title: 'Social Media', | 147 | title: 'Social Media', |
| 148 | name: 'Social Media', | 148 | name: 'Social Media', |
| 149 | icon: '/static/icon/dashboard icons-35.png', | 149 | icon: '/static/icon/events.png', |
| 150 | }, | 150 | }, |
| 151 | { | 151 | { |
| 152 | title: 'Gallery', | 152 | title: 'Gallery', |
| 153 | name: 'Gallery', | 153 | name: 'Gallery', |
| 154 | icon: '/static/icon/gallery.png', | 154 | icon: '/static/icon/gallery.png', |
| 155 | }, | 155 | }, |
| 156 | { | 156 | { |
| 157 | title: 'Event', | 157 | title: 'Event', |
| 158 | name: 'Event', | 158 | name: 'Event', |
| 159 | icon: '/static/icon/events.png', | 159 | icon: '/static/icon/events.png', |
| 160 | }, | 160 | }, |
| 161 | { | 161 | { |
| 162 | title: 'Account', | 162 | title: 'Account', |
| 163 | group: 'Account', | 163 | group: 'Account', |
| 164 | component: 'Account', | 164 | component: 'Account', |
| 165 | icon: '/static/icon/accounts.png', | 165 | icon: '/static/icon/accounts.png', |
| 166 | items: [ | 166 | items: [ |
| 167 | { name: 'feeTypes', title: 'Fee Types', component: 'Fee Types', action: '', }, | 167 | { name: 'feeTypes', title: 'Fee Types', component: 'Fee Types', action: '', }, |
| 168 | { name: 'Invoice', title: 'Invoice', component: 'Invoice', action: '', }, | 168 | { name: 'Invoice', title: 'Invoice', component: 'Invoice', action: '', }, |
| 169 | { name: 'PaymentHistory', title: 'Payment History', component: 'Payment History', action: '', }, | 169 | { name: 'PaymentHistory', title: 'Payment History', component: 'Payment History', action: '', }, |
| 170 | { name: 'Expense', title: 'Expense', component: 'Expense', action: '', }, | 170 | { name: 'Expense', title: 'Expense', component: 'Expense', action: '', }, |
| 171 | { name: 'Income', title: 'Income', component: 'Income', action: '', }, | 171 | { name: 'Income', title: 'Income', component: 'Income', action: '', }, |
| 172 | { name: 'GlobalPayment', title: 'Global Payment', component: 'Global Payment', action: '', } | 172 | { name: 'GlobalPayment', title: 'Global Payment', component: 'Global Payment', action: '', } |
| 173 | ] | 173 | ] |
| 174 | }, | 174 | }, |
| 175 | { | 175 | { |
| 176 | title: 'Holiday', | 176 | title: 'Holiday', |
| 177 | name: 'Holiday', | 177 | name: 'Holiday', |
| 178 | icon: '/static/icon/holiday.png', | 178 | icon: '/static/icon/holiday.png', |
| 179 | }, | 179 | }, |
| 180 | { | 180 | { |
| 181 | title: 'General Setting', | 181 | title: 'General Setting', |
| 182 | name: 'General Setting', | 182 | name: 'General Setting', |
| 183 | icon: '/static/icon/settings.png', | 183 | icon: '/static/icon/settings.png', |
| 184 | } | 184 | } |
| 185 | ]; | 185 | ]; |
| 186 | 186 | ||
| 187 | const libraryMenu = [{ | 187 | const libraryMenu = [{ |
| 188 | title: 'Library', | 188 | title: 'Library', |
| 189 | group: 'Library', | 189 | group: 'Library', |
| 190 | component: 'Library', | 190 | component: 'Library', |
| 191 | icon: '/static/schoolIcons/Library.png', | 191 | icon: '/static/schoolIcons/Library.png', |
| 192 | items: [ | 192 | items: [ |
| 193 | { name: 'libraryMember', title: ' Library Member', component: 'libraryMember', action: '', }, | 193 | { name: 'libraryMember', title: ' Library Member', component: 'libraryMember', action: '', }, |
| 194 | { name: 'Books', title: 'Books', component: 'Books', action: '', }, | 194 | { name: 'Books', title: 'Books', component: 'Books', action: '', }, |
| 195 | { name: 'Issue', title: ' Issue', component: 'Issue', action: '', }, | 195 | { name: 'Issue', title: ' Issue', component: 'Issue', action: '', }, |
| 196 | { name: 'eBooks', title: 'E-Books', component: 'eBooks', action: '', } | 196 | { name: 'eBooks', title: 'E-Books', component: 'eBooks', action: '', } |
| 197 | 197 | ||
| 198 | ] | 198 | ] |
| 199 | }]; | 199 | }]; |
| 200 | 200 | ||
| 201 | const accountMenu = [{ | 201 | const accountMenu = [{ |
| 202 | title: 'Account', | 202 | title: 'Account', |
| 203 | group: 'Account', | 203 | group: 'Account', |
| 204 | component: 'Account', | 204 | component: 'Account', |
| 205 | icon: '/static/schoolIcons/Account.png', | 205 | icon: '/static/schoolIcons/Account.png', |
| 206 | items: [ | 206 | items: [ |
| 207 | { name: 'feeTypes', title: 'Fee Types', component: 'feeTypes', action: '', }, | 207 | { name: 'feeTypes', title: 'Fee Types', component: 'feeTypes', action: '', }, |
| 208 | { name: 'Invoice', title: 'Invoice', component: 'Invoice', action: '', }, | 208 | { name: 'Invoice', title: 'Invoice', component: 'Invoice', action: '', }, |
| 209 | { name: 'paymentHistory', title: 'Payment History', component: 'paymentHistory', action: '', }, | 209 | { name: 'paymentHistory', title: 'Payment History', component: 'paymentHistory', action: '', }, |
| 210 | { name: 'Expense', title: 'Expense', component: 'Expense', action: '', }, | 210 | { name: 'Expense', title: 'Expense', component: 'Expense', action: '', }, |
| 211 | { name: 'Income', title: 'Income', component: 'Income', action: '', }, | 211 | { name: 'Income', title: 'Income', component: 'Income', action: '', }, |
| 212 | { name: 'GlobalPayment', title: 'Global Payment', component: 'GlobalPayment', action: '', } | 212 | { name: 'GlobalPayment', title: 'Global Payment', component: 'GlobalPayment', action: '', } |
| 213 | ] | 213 | ] |
| 214 | }]; | 214 | }]; |
| 215 | 215 | ||
| 216 | const schoolMenu = [ | 216 | const schoolMenu = [ |
| 217 | // { header: 'Apps' }, | 217 | // { header: 'Apps' }, |
| 218 | { | 218 | { |
| 219 | title: 'School', | 219 | title: 'School', |
| 220 | // group: 'apps', | 220 | // group: 'apps', |
| 221 | path: '/school', | 221 | path: '/school', |
| 222 | icon: '/static/schoolIcons/Dashboard.png', | 222 | icon: '/static/schoolIcons/Dashboard.png', |
| 223 | } | 223 | } |
| 224 | ]; | 224 | ]; |
| 225 | 225 | ||
| 226 | // reorder menu | 226 | // reorder menu |
| 227 | // Menu.forEach((item) => { | 227 | // Menu.forEach((item) => { |
| 228 | // if (item.items) { | 228 | // if (item.items) { |
| 229 | // item.items.sort((x, y) => { | 229 | // item.items.sort((x, y) => { |
| 230 | // let textA = x.title.toUpperCase(); | 230 | // let textA = x.title.toUpperCase(); |
| 231 | // let textB = y.title.toUpperCase(); | 231 | // let textB = y.title.toUpperCase(); |
| 232 | // return (textA < textB) ? -1 : (textA > textB) ? 1 : 0; | 232 | // return (textA < textB) ? -1 : (textA > textB) ? 1 : 0; |
| 233 | // }); | 233 | // }); |
| 234 | // } | 234 | // } |
| 235 | // }); | 235 | // }); |
| 236 | 236 | ||
| 237 | export default { adminMenu, schoolMenu, libraryMenu, accountMenu }; | 237 | export default { adminMenu, schoolMenu, libraryMenu, accountMenu }; |
src/components/pageHeader/AppToolbar.vue
| 1 | <template> | 1 | <template> |
| 2 | <v-toolbar flat class="white pt-2" fixed app> | 2 | <v-toolbar flat class="white pt-2" fixed app> |
| 3 | <v-toolbar-title> | 3 | <v-toolbar-title> |
| 4 | <v-toolbar-side-icon @click.stop="handleDrawerToggle" class="hide darkBlue-color"></v-toolbar-side-icon> | 4 | <v-toolbar-side-icon @click.stop="handleDrawerToggle" class="hide darkBlue-color"></v-toolbar-side-icon> |
| 5 | </v-toolbar-title> | 5 | </v-toolbar-title> |
| 6 | <!-- ****** SEARCH ALL EXISTING STUDENTS ****** --> | 6 | <!-- ****** SEARCH ALL EXISTING STUDENTS ****** --> |
| 7 | <v-flex xs12 class="white"> | 7 | <v-flex xs12 class="white"> |
| 8 | <!-- <v-text-field | 8 | <!-- <v-text-field |
| 9 | flat | 9 | flat |
| 10 | append-icon="search" | 10 | append-icon="search" |
| 11 | label="Seacrh" | 11 | label="Seacrh" |
| 12 | class="pl-3" | 12 | class="pl-3" |
| 13 | color="white" | 13 | color="white" |
| 14 | @input.native="emitSearch" | 14 | @input.native="emitSearch" |
| 15 | type="text" | 15 | type="text" |
| 16 | dark | 16 | dark |
| 17 | ></v-text-field>--> | 17 | ></v-text-field>--> |
| 18 | <v-toolbar-title class="header-route-name pl-2">{{ $route.name }}</v-toolbar-title> | 18 | <v-toolbar-title class="header-route-name pl-2">{{ $route.name }}</v-toolbar-title> |
| 19 | </v-flex> | 19 | </v-flex> |
| 20 | <v-spacer></v-spacer> | 20 | <v-spacer></v-spacer> |
| 21 | <v-toolbar-items class="hidden-sm-and-down"> | 21 | <v-toolbar-items class="hidden-sm-and-down"> |
| 22 | <v-icon class="header-icon">notifications_none</v-icon> | 22 | <v-icon class="header-icon">notifications_none</v-icon> |
| 23 | </v-toolbar-items> | 23 | </v-toolbar-items> |
| 24 | <v-menu offset-y origin="center center" :nudge-bottom="10" transition="scale-transition"> | 24 | <v-menu offset-y origin="center center" :nudge-bottom="10" transition="scale-transition"> |
| 25 | <v-btn icon large flat slot="activator"> | 25 | <v-btn icon large flat slot="activator"> |
| 26 | <v-avatar size="26"> | 26 | <v-avatar size="26"> |
| 27 | <img src="/static/icon/dashboard icons-48.png" alt="icon" /> | 27 | <img src="/static/icon/setting1.png" alt="icon" /> |
| 28 | </v-avatar> | 28 | </v-avatar> |
| 29 | </v-btn> | 29 | </v-btn> |
| 30 | <v-list class="pa-0"> | 30 | <v-list class="pa-0"> |
| 31 | <v-list-tile | 31 | <v-list-tile |
| 32 | v-for="(item,index) in items" | 32 | v-for="(item,index) in items" |
| 33 | :to="!item.href ? { name: item.name } : null" | 33 | :to="!item.href ? { name: item.name } : null" |
| 34 | :href="item.href" | 34 | :href="item.href" |
| 35 | @click="item.click" | 35 | @click="item.click" |
| 36 | ripple="ripple" | 36 | ripple="ripple" |
| 37 | :disabled="item.disabled" | 37 | :disabled="item.disabled" |
| 38 | :target="item.target" | 38 | :target="item.target" |
| 39 | rel="noopener" | 39 | rel="noopener" |
| 40 | :key="index" | 40 | :key="index" |
| 41 | > | 41 | > |
| 42 | <v-list-tile-action v-if="item.icon"> | 42 | <v-list-tile-action v-if="item.icon"> |
| 43 | <v-icon class="iconSize">{{ item.icon }}</v-icon> | 43 | <v-icon class="iconSize">{{ item.icon }}</v-icon> |
| 44 | </v-list-tile-action> | 44 | </v-list-tile-action> |
| 45 | <v-list-tile-content> | 45 | <v-list-tile-content> |
| 46 | <v-list-tile-title>{{ item.title }}</v-list-tile-title> | 46 | <v-list-tile-title>{{ item.title }}</v-list-tile-title> |
| 47 | </v-list-tile-content> | 47 | </v-list-tile-content> |
| 48 | </v-list-tile> | 48 | </v-list-tile> |
| 49 | </v-list> | 49 | </v-list> |
| 50 | </v-menu> | 50 | </v-menu> |
| 51 | </v-toolbar> | 51 | </v-toolbar> |
| 52 | </template> | 52 | </template> |
| 53 | <script> | 53 | <script> |
| 54 | import http from "@/Services/http.js"; | 54 | import http from "@/Services/http.js"; |
| 55 | 55 | ||
| 56 | export default { | 56 | export default { |
| 57 | name: "app-toolbar", | 57 | name: "app-toolbar", |
| 58 | data: () => ({ | 58 | data: () => ({ |
| 59 | userName: "", | 59 | userName: "", |
| 60 | search: "", | 60 | search: "", |
| 61 | userData: {}, | 61 | userData: {}, |
| 62 | items: [ | 62 | items: [ |
| 63 | { | 63 | { |
| 64 | icon: "account_circle", | 64 | icon: "account_circle", |
| 65 | href: "/resetPassword", | 65 | href: "/resetPassword", |
| 66 | title: "Change Password", | 66 | title: "Change Password", |
| 67 | click: e => { | 67 | click: e => { |
| 68 | console.log(e); | 68 | console.log(e); |
| 69 | } | 69 | } |
| 70 | }, | 70 | }, |
| 71 | // { | 71 | // { |
| 72 | // icon: 'settings', | 72 | // icon: 'settings', |
| 73 | // href: '#', | 73 | // href: '#', |
| 74 | // title: 'Settings', | 74 | // title: 'Settings', |
| 75 | // click: (e) => { | 75 | // click: (e) => { |
| 76 | // console.log(e); | 76 | // console.log(e); |
| 77 | // } | 77 | // } |
| 78 | // }, | 78 | // }, |
| 79 | { | 79 | { |
| 80 | icon: "lock", | 80 | icon: "lock", |
| 81 | href: "#", | 81 | href: "#", |
| 82 | title: "Logout", | 82 | title: "Logout", |
| 83 | click: e => { | 83 | click: e => { |
| 84 | window.getApp.$emit("APP_LOGOUT"); | 84 | window.getApp.$emit("APP_LOGOUT"); |
| 85 | } | 85 | } |
| 86 | } | 86 | } |
| 87 | ] | 87 | ] |
| 88 | }), | 88 | }), |
| 89 | computed: { | 89 | computed: { |
| 90 | toolbarColor() { | 90 | toolbarColor() { |
| 91 | return this.$vuetify.options.extra.mainNav; | 91 | return this.$vuetify.options.extra.mainNav; |
| 92 | } | 92 | } |
| 93 | }, | 93 | }, |
| 94 | mounted() { | 94 | mounted() { |
| 95 | this.getUserData(); | 95 | this.getUserData(); |
| 96 | }, | 96 | }, |
| 97 | methods: { | 97 | methods: { |
| 98 | // emitSearch(ev) { | 98 | // emitSearch(ev) { |
| 99 | // this.$root.$emit("app:search", ev.target.value); | 99 | // this.$root.$emit("app:search", ev.target.value); |
| 100 | // }, | 100 | // }, |
| 101 | handleDrawerToggle() { | 101 | handleDrawerToggle() { |
| 102 | window.getApp.$emit("APP_DRAWER_TOGGLED"); | 102 | window.getApp.$emit("APP_DRAWER_TOGGLED"); |
| 103 | }, | 103 | }, |
| 104 | handleFullScreen() { | 104 | handleFullScreen() { |
| 105 | Util.toggleFullScreen(); | 105 | Util.toggleFullScreen(); |
| 106 | }, | 106 | }, |
| 107 | getUserData() { | 107 | getUserData() { |
| 108 | http() | 108 | http() |
| 109 | .get("/getParticularUserDetail") | 109 | .get("/getParticularUserDetail") |
| 110 | .then(response => { | 110 | .then(response => { |
| 111 | this.userData = response.data.data; | 111 | this.userData = response.data.data; |
| 112 | }) | 112 | }) |
| 113 | .catch(error => { | 113 | .catch(error => { |
| 114 | }); | 114 | }); |
| 115 | } | 115 | } |
| 116 | } | 116 | } |
| 117 | }; | 117 | }; |
| 118 | </script> | 118 | </script> |
| 119 | <style> | 119 | <style> |
| 120 | .v-icon { | 120 | .v-icon { |
| 121 | font-size: 30px; | 121 | font-size: 30px; |
| 122 | } | 122 | } |
| 123 | .fixcolors { | 123 | .fixcolors { |
| 124 | background: #444b54 !important; | 124 | background: #444b54 !important; |
| 125 | } | 125 | } |
| 126 | 126 | ||
| 127 | @media screen and (min-width: 1270px) { | 127 | @media screen and (min-width: 1270px) { |
| 128 | .hide { | 128 | .hide { |
| 129 | display: none; | 129 | display: none; |
| 130 | } | 130 | } |
| 131 | /* } | 131 | /* } |
| 132 | @media screen and (max-width: 962px) { | 132 | @media screen and (max-width: 962px) { |
| 133 | .imglogo{ | 133 | .imglogo{ |
| 134 | position: absolute; | 134 | position: absolute; |
| 135 | top: 13px; | 135 | top: 13px; |
| 136 | left: 13px !important; | 136 | left: 13px !important; |
| 137 | width: 70px; | 137 | width: 70px; |
| 138 | height: 24px; | 138 | height: 24px; |
| 139 | } */ | 139 | } */ |
| 140 | } | 140 | } |
| 141 | @media screen and (max-width: 420px) { | 141 | @media screen and (max-width: 420px) { |
| 142 | .v-list__tile { | 142 | .v-list__tile { |
| 143 | font-size: 14px; | 143 | font-size: 14px; |
| 144 | padding: 0 10px; | 144 | padding: 0 10px; |
| 145 | } | 145 | } |
| 146 | .name { | 146 | .name { |
| 147 | font-size: 15px; | 147 | font-size: 15px; |
| 148 | } | 148 | } |
| 149 | } | 149 | } |
| 150 | </style> | 150 | </style> |
| 151 | 151 |
src/pages/Account/expense.vue
| 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 :src="editedItem.fileUrl" v-else-if="editedItem.fileUrl && !imageUrl" style="border-radius:50%; width:150px"/> | 21 | <img :src="editedItem.fileUrl" v-else-if="editedItem.fileUrl && !imageUrl" style="border-radius:50%; width:150px"/> |
| 22 | <img | 22 | <img |
| 23 | v-if="imageUrl" | 23 | v-if="imageUrl" |
| 24 | :src="imageUrl" | 24 | :src="imageUrl" |
| 25 | height="150" | 25 | height="150" |
| 26 | style="border-radius:50%; width:150px" | 26 | style="border-radius:50%; width:150px" |
| 27 | /> | 27 | /> |
| 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 xs7 class="ml-3"> | 43 | <v-flex xs7 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 xs7 class="ml-3"> | 61 | <v-flex xs7 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 xs7 class="ml-3"> | 93 | <v-flex xs7 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 wrap> | 100 | <v-layout wrap> |
| 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 xs7 class="ml-3"> | 105 | <v-flex xs7 class="ml-3"> |
| 106 | <v-text-field | 106 | <v-text-field |
| 107 | label="Select Image" | 107 | label="Select Image" |
| 108 | @click="pickFile" | 108 | @click="pickFile" |
| 109 | v-model="imageName" | 109 | v-model="imageName" |
| 110 | append-icon="attach_file" | 110 | append-icon="attach_file" |
| 111 | ></v-text-field> | 111 | ></v-text-field> |
| 112 | </v-flex> | 112 | </v-flex> |
| 113 | </v-layout> | 113 | </v-layout> |
| 114 | </v-flex> | 114 | </v-flex> |
| 115 | <v-flex xs12> | 115 | <v-flex xs12> |
| 116 | <v-layout> | 116 | <v-layout> |
| 117 | <v-flex xs4 class="pt-4 subheading"> | 117 | <v-flex xs4 class="pt-4 subheading"> |
| 118 | <label class="right">Note:</label> | 118 | <label class="right">Note:</label> |
| 119 | </v-flex> | 119 | </v-flex> |
| 120 | <v-flex xs7 class="ml-3"> | 120 | <v-flex xs7 class="ml-3"> |
| 121 | <v-textarea | 121 | <v-textarea |
| 122 | name="input-7-1" | 122 | name="input-7-1" |
| 123 | v-model="editedItem.note" | 123 | v-model="editedItem.note" |
| 124 | placeholder="fill your Note" | 124 | placeholder="fill your Note" |
| 125 | type="text" | 125 | type="text" |
| 126 | :rules="noteRules" | 126 | :rules="noteRules" |
| 127 | multi-line | 127 | multi-line |
| 128 | required | 128 | required |
| 129 | ></v-textarea> | 129 | ></v-textarea> |
| 130 | </v-flex> | 130 | </v-flex> |
| 131 | </v-layout> | 131 | </v-layout> |
| 132 | </v-flex> | 132 | </v-flex> |
| 133 | </v-layout> | 133 | </v-layout> |
| 134 | <v-layout> | 134 | <v-layout> |
| 135 | <v-flex xs12 sm12> | 135 | <v-flex xs12 sm12> |
| 136 | <v-card-actions> | 136 | <v-card-actions> |
| 137 | <v-spacer></v-spacer> | 137 | <v-spacer></v-spacer> |
| 138 | <v-btn round dark :loading="loading" @click="save" class="add-button">Save</v-btn> | 138 | <v-btn round dark :loading="loading" @click="save" class="add-button">Save</v-btn> |
| 139 | </v-card-actions> | 139 | </v-card-actions> |
| 140 | </v-flex> | 140 | </v-flex> |
| 141 | </v-layout> | 141 | </v-layout> |
| 142 | </v-card-text> | 142 | </v-card-text> |
| 143 | </v-card> | 143 | </v-card> |
| 144 | </v-dialog> | 144 | </v-dialog> |
| 145 | 145 | ||
| 146 | <!-- ****** PROFILE VIEW EXPENSE DETAILS ****** --> | 146 | <!-- ****** PROFILE VIEW EXPENSE DETAILS ****** --> |
| 147 | 147 | ||
| 148 | <v-dialog v-model="viewExpenseDialog" max-width="600px" scrollable> | 148 | <v-dialog v-model="viewExpenseDialog" max-width="600px" scrollable> |
| 149 | <v-card flat class="card-style pa-3" dark> | 149 | <v-card flat class="card-style pa-3" dark> |
| 150 | <v-layout> | 150 | <v-layout> |
| 151 | <v-flex xs12> | 151 | <v-flex xs12> |
| 152 | <label class="title text-xs-center">View Expense</label> | 152 | <label class="title text-xs-center">View Expense</label> |
| 153 | <v-icon size="24" class="right" @click="viewExpenseDialog = false">cancel</v-icon> | 153 | <v-icon size="24" class="right" @click="viewExpenseDialog = false">cancel</v-icon> |
| 154 | </v-flex> | 154 | </v-flex> |
| 155 | </v-layout> | 155 | </v-layout> |
| 156 | <v-card-text> | 156 | <v-card-text> |
| 157 | <v-container grid-list-md> | 157 | <v-container grid-list-md> |
| 158 | <v-layout wrap> | 158 | <v-layout wrap> |
| 159 | <v-flex> | 159 | <v-flex> |
| 160 | <v-flex align-center justify-center layout text-xs-center> | 160 | <v-flex align-center justify-center layout text-xs-center> |
| 161 | <v-avatar size="160px"> | 161 | <v-avatar size="160px"> |
| 162 | <img src="/static/icon/user.png" v-if="!editedItem.fileUrl" /> | 162 | <img src="/static/icon/user.png" v-if="!editedItem.fileUrl" /> |
| 163 | <img :src="editedItem.fileUrl" v-else-if="editedItem.fileUrl" /> | 163 | <img :src="editedItem.fileUrl" v-else-if="editedItem.fileUrl" /> |
| 164 | </v-avatar> | 164 | </v-avatar> |
| 165 | </v-flex> | 165 | </v-flex> |
| 166 | <v-layout> | 166 | <v-layout> |
| 167 | <v-flex xs5 sm6> | 167 | <v-flex xs5 sm6> |
| 168 | <h5 class="right my-1"> | 168 | <h5 class="right my-1"> |
| 169 | <b>Name:</b> | 169 | <b>Name:</b> |
| 170 | </h5> | 170 | </h5> |
| 171 | </v-flex> | 171 | </v-flex> |
| 172 | <v-flex sm6 xs8> | 172 | <v-flex sm6 xs8> |
| 173 | <h5 class="my-1">{{ editedItem.name }}</h5> | 173 | <h5 class="my-1">{{ editedItem.name }}</h5> |
| 174 | </v-flex> | 174 | </v-flex> |
| 175 | </v-layout> | 175 | </v-layout> |
| 176 | <v-layout> | 176 | <v-layout> |
| 177 | <v-flex xs5 sm6> | 177 | <v-flex xs5 sm6> |
| 178 | <h5 class="right my-1"> | 178 | <h5 class="right my-1"> |
| 179 | <b>Amount:</b> | 179 | <b>Amount:</b> |
| 180 | </h5> | 180 | </h5> |
| 181 | </v-flex> | 181 | </v-flex> |
| 182 | <v-flex sm6 xs8> | 182 | <v-flex sm6 xs8> |
| 183 | <h5 class="my-1">{{ editedItem.amount }}</h5> | 183 | <h5 class="my-1">{{ editedItem.amount }}</h5> |
| 184 | </v-flex> | 184 | </v-flex> |
| 185 | </v-layout> | 185 | </v-layout> |
| 186 | <v-layout> | 186 | <v-layout> |
| 187 | <v-flex xs5 sm6> | 187 | <v-flex xs5 sm6> |
| 188 | <h5 class="right my-1"> | 188 | <h5 class="right my-1"> |
| 189 | <b>Date:</b> | 189 | <b>Date:</b> |
| 190 | </h5> | 190 | </h5> |
| 191 | </v-flex> | 191 | </v-flex> |
| 192 | <v-flex sm6 xs8> | 192 | <v-flex sm6 xs8> |
| 193 | <h5 class="my-1">{{ dates(editedItem.date) }}</h5> | 193 | <h5 class="my-1">{{ dates(editedItem.date) }}</h5> |
| 194 | </v-flex> | 194 | </v-flex> |
| 195 | </v-layout> | 195 | </v-layout> |
| 196 | <v-layout> | 196 | <v-layout> |
| 197 | <v-flex xs5 sm6> | 197 | <v-flex xs5 sm6> |
| 198 | <h5 class="right my-1"> | 198 | <h5 class="right my-1"> |
| 199 | <b>Note:</b> | 199 | <b>Note:</b> |
| 200 | </h5> | 200 | </h5> |
| 201 | </v-flex> | 201 | </v-flex> |
| 202 | <v-flex sm6 xs8> | 202 | <v-flex sm6 xs8> |
| 203 | <h5 class="my-1">{{ editedItem.note }}</h5> | 203 | <h5 class="my-1">{{ editedItem.note }}</h5> |
| 204 | </v-flex> | 204 | </v-flex> |
| 205 | </v-layout> | 205 | </v-layout> |
| 206 | </v-flex> | 206 | </v-flex> |
| 207 | </v-layout> | 207 | </v-layout> |
| 208 | </v-container> | 208 | </v-container> |
| 209 | </v-card-text> | 209 | </v-card-text> |
| 210 | </v-card> | 210 | </v-card> |
| 211 | </v-dialog> | 211 | </v-dialog> |
| 212 | <!-- ****** EXPENSE TABLE ****** --> | 212 | <!-- ****** EXPENSE TABLE ****** --> |
| 213 | <v-toolbar color="transparent" flat> | 213 | <v-toolbar color="transparent" flat> |
| 214 | <v-btn | 214 | <v-btn |
| 215 | fab | 215 | fab |
| 216 | dark | 216 | dark |
| 217 | class="open-dialog-button hidden-xl-only hidden-md-only hidden-lg-only" | 217 | class="open-dialog-button hidden-xl-only hidden-md-only hidden-lg-only" |
| 218 | small | 218 | small |
| 219 | @click="addExpenseDialog = true" | 219 | @click="addExpenseDialog = true" |
| 220 | > | 220 | > |
| 221 | <v-icon dark>add</v-icon> | 221 | <v-icon dark>add</v-icon> |
| 222 | </v-btn> | 222 | </v-btn> |
| 223 | <v-btn | 223 | <v-btn |
| 224 | round | 224 | round |
| 225 | class="open-dialog-button hidden-sm-only hidden-xs-only" | 225 | class="open-dialog-button hidden-sm-only hidden-xs-only" |
| 226 | dark | 226 | dark |
| 227 | @click="addExpenseDialog = true" | 227 | @click="addExpenseDialog = true" |
| 228 | > | 228 | > |
| 229 | <v-icon class="white--text pr-1" size="20">add</v-icon>Add Expense | 229 | <v-icon class="white--text pr-1" size="20">add</v-icon>Add Expense |
| 230 | </v-btn> | 230 | </v-btn> |
| 231 | <v-spacer></v-spacer> | 231 | <v-spacer></v-spacer> |
| 232 | <v-card-title class="body-1" v-show="show"> | 232 | <v-card-title class="body-1" v-show="show"> |
| 233 | <v-btn icon large flat @click="displaySearch"> | 233 | <v-btn icon large flat @click="displaySearch"> |
| 234 | <v-avatar size="27"> | 234 | <v-avatar size="27"> |
| 235 | <img src="/static/icon/dashboard icons-49.png" alt="icon" /> | 235 | <img src="/static/icon/search.png" alt="icon" /> |
| 236 | </v-avatar> | 236 | </v-avatar> |
| 237 | </v-btn> | 237 | </v-btn> |
| 238 | </v-card-title> | 238 | </v-card-title> |
| 239 | <v-flex xs8 sm8 md3 lg2 v-show="showSearch"> | 239 | <v-flex xs8 sm8 md3 lg2 v-show="showSearch"> |
| 240 | <v-layout> | 240 | <v-layout> |
| 241 | <v-text-field v-model="search" label="Search" prepend-inner-icon="search" color="primary"></v-text-field> | 241 | <v-text-field v-model="search" label="Search" prepend-inner-icon="search" color="primary"></v-text-field> |
| 242 | <v-icon @click="closeSearch" color="error">close</v-icon> | 242 | <v-icon @click="closeSearch" color="error">close</v-icon> |
| 243 | </v-layout> | 243 | </v-layout> |
| 244 | </v-flex> | 244 | </v-flex> |
| 245 | </v-toolbar> | 245 | </v-toolbar> |
| 246 | <v-data-table | 246 | <v-data-table |
| 247 | :headers="headers" | 247 | :headers="headers" |
| 248 | :items="expenseList" | 248 | :items="expenseList" |
| 249 | :pagination.sync="pagination" | 249 | :pagination.sync="pagination" |
| 250 | :search="search" | 250 | :search="search" |
| 251 | > | 251 | > |
| 252 | <template slot="items" slot-scope="props"> | 252 | <template slot="items" slot-scope="props"> |
| 253 | <tr class="tr"> | 253 | <tr class="tr"> |
| 254 | <td class="td td-row">{{ props.index + 1}}</td> | 254 | <td class="td td-row">{{ props.index + 1}}</td> |
| 255 | <td class="text-xs-center td td-row"> | 255 | <td class="text-xs-center td td-row"> |
| 256 | <v-avatar> | 256 | <v-avatar> |
| 257 | <img :src="props.item.fileUrl" v-if="props.item.fileUrl" /> | 257 | <img :src="props.item.fileUrl" v-if="props.item.fileUrl" /> |
| 258 | <img src="/static/icon/user.png" v-else-if="!props.item.fileUrl" /> | 258 | <img src="/static/icon/user.png" v-else-if="!props.item.fileUrl" /> |
| 259 | </v-avatar> | 259 | </v-avatar> |
| 260 | </td> | 260 | </td> |
| 261 | <td class="text-xs-center td td-row">{{ props.item.name}}</td> | 261 | <td class="text-xs-center td td-row">{{ props.item.name}}</td> |
| 262 | <td class="text-xs-center td td-row">{{ dates(props.item.date) }}</td> | 262 | <td class="text-xs-center td td-row">{{ dates(props.item.date) }}</td> |
| 263 | <td class="text-xs-center td td-row">{{ props.item.user }}</td> | 263 | <td class="text-xs-center td td-row">{{ props.item.user }}</td> |
| 264 | <td class="text-xs-center td td-row">{{ props.item.amount }}</td> | 264 | <td class="text-xs-center td td-row">{{ props.item.amount }}</td> |
| 265 | <td class="text-xs-center td td-row">{{ props.item.note }}</td> | 265 | <td class="text-xs-center td td-row">{{ props.item.note }}</td> |
| 266 | <td class="text-xs-center td td-row"> | 266 | <td class="text-xs-center td td-row"> |
| 267 | <span> | 267 | <span> |
| 268 | <v-tooltip top> | 268 | <v-tooltip top> |
| 269 | <img | 269 | <img |
| 270 | slot="activator" | 270 | slot="activator" |
| 271 | style="cursor:pointer; width:25px; height:25px; " | 271 | style="cursor:pointer; width:25px; height:25px; " |
| 272 | class="mr-3" | 272 | class="mr-3" |
| 273 | @click="profile(props.item)" | 273 | @click="profile(props.item)" |
| 274 | src="/static/icon/dashboard icons-47.png" | 274 | src="/static/icon/view.png" |
| 275 | /> | 275 | /> |
| 276 | <span>View</span> | 276 | <span>View</span> |
| 277 | </v-tooltip> | 277 | </v-tooltip> |
| 278 | <v-tooltip top> | 278 | <v-tooltip top> |
| 279 | <img | 279 | <img |
| 280 | slot="activator" | 280 | slot="activator" |
| 281 | style="cursor:pointer; width:20px; height:18px; " | 281 | style="cursor:pointer; width:20px; height:18px; " |
| 282 | class="mr-3" | 282 | class="mr-3" |
| 283 | @click="editItem(props.item)" | 283 | @click="editItem(props.item)" |
| 284 | src="/static/icon/dashboard icons-50.png" | 284 | src="/static/icon/edit.png" |
| 285 | /> | 285 | /> |
| 286 | <span>Edit</span> | 286 | <span>Edit</span> |
| 287 | </v-tooltip> | 287 | </v-tooltip> |
| 288 | <v-tooltip top> | 288 | <v-tooltip top> |
| 289 | <img | 289 | <img |
| 290 | slot="activator" | 290 | slot="activator" |
| 291 | style="cursor:pointer; width:20px; height:20px; " | 291 | style="cursor:pointer; width:20px; height:20px; " |
| 292 | @click="deleteItem(props.item)" | 292 | @click="deleteItem(props.item)" |
| 293 | src="/static/icon/dashboard icons-51.png" | 293 | src="/static/icon/delete.png" |
| 294 | /> | 294 | /> |
| 295 | <span>Delete</span> | 295 | <span>Delete</span> |
| 296 | </v-tooltip> | 296 | </v-tooltip> |
| 297 | </span> | 297 | </span> |
| 298 | </td> | 298 | </td> |
| 299 | </tr> | 299 | </tr> |
| 300 | </template> | 300 | </template> |
| 301 | <v-alert | 301 | <v-alert |
| 302 | slot="no-results" | 302 | slot="no-results" |
| 303 | :value="true" | 303 | :value="true" |
| 304 | color="error" | 304 | color="error" |
| 305 | icon="warning" | 305 | icon="warning" |
| 306 | >Your search for "{{ search }}" found no results.</v-alert> | 306 | >Your search for "{{ search }}" found no results.</v-alert> |
| 307 | </v-data-table> | 307 | </v-data-table> |
| 308 | 308 | ||
| 309 | <!-- ****** Add Expense Data ****** --> | 309 | <!-- ****** Add Expense Data ****** --> |
| 310 | <v-dialog v-model="addExpenseDialog" max-width="600px"> | 310 | <v-dialog v-model="addExpenseDialog" max-width="600px"> |
| 311 | <v-card flat class="card-style pa-2" dark> | 311 | <v-card flat class="card-style pa-2" dark> |
| 312 | <v-layout> | 312 | <v-layout> |
| 313 | <v-flex xs12> | 313 | <v-flex xs12> |
| 314 | <label class="title text-xs-center">Add Class</label> | 314 | <label class="title text-xs-center">Add Class</label> |
| 315 | <v-icon size="24" class="right" @click="addExpenseDialog = false">cancel</v-icon> | 315 | <v-icon size="24" class="right" @click="addExpenseDialog = false">cancel</v-icon> |
| 316 | </v-flex> | 316 | </v-flex> |
| 317 | </v-layout> | 317 | </v-layout> |
| 318 | <v-flex xs12 sm12> | 318 | <v-flex xs12 sm12> |
| 319 | <v-form ref="form" v-model="valid" lazy-validation> | 319 | <v-form ref="form" v-model="valid" lazy-validation> |
| 320 | <v-container fluid> | 320 | <v-container fluid> |
| 321 | <v-layout> | 321 | <v-layout> |
| 322 | <v-flex xs12 class="text-xs-center text-sm-center text-md-center text-lg-center"> | 322 | <v-flex xs12 class="text-xs-center text-sm-center text-md-center text-lg-center"> |
| 323 | <v-avatar size="80px"> | 323 | <v-avatar size="80px"> |
| 324 | <img src="/static/icon/user.png" v-if="!imageUrl" /> | 324 | <img src="/static/icon/user.png" v-if="!imageUrl" /> |
| 325 | </v-avatar> | 325 | </v-avatar> |
| 326 | <img | 326 | <img |
| 327 | :src="imageUrl" | 327 | :src="imageUrl" |
| 328 | height="150" | 328 | height="150" |
| 329 | v-if="imageUrl" | 329 | v-if="imageUrl" |
| 330 | style="border-radius:50%; width:150px" | 330 | style="border-radius:50%; width:150px" |
| 331 | /> | 331 | /> |
| 332 | </v-flex> | 332 | </v-flex> |
| 333 | </v-layout> | 333 | </v-layout> |
| 334 | <v-layout> | 334 | <v-layout> |
| 335 | <v-flex xs12 sm12> | 335 | <v-flex xs12 sm12> |
| 336 | <v-layout> | 336 | <v-layout> |
| 337 | <v-flex xs4 class="pt-4 subheading"> | 337 | <v-flex xs4 class="pt-4 subheading"> |
| 338 | <label class="right">Name:</label> | 338 | <label class="right">Name:</label> |
| 339 | </v-flex> | 339 | </v-flex> |
| 340 | <v-flex xs8 sm6 class="ml-3"> | 340 | <v-flex xs8 sm6 class="ml-3"> |
| 341 | <v-text-field | 341 | <v-text-field |
| 342 | v-model="addExpense.name" | 342 | v-model="addExpense.name" |
| 343 | placeholder="fill your full Name" | 343 | placeholder="fill your full Name" |
| 344 | name="name" | 344 | name="name" |
| 345 | type="text" | 345 | type="text" |
| 346 | :rules="nameRules" | 346 | :rules="nameRules" |
| 347 | required | 347 | required |
| 348 | ></v-text-field> | 348 | ></v-text-field> |
| 349 | </v-flex> | 349 | </v-flex> |
| 350 | </v-layout> | 350 | </v-layout> |
| 351 | </v-flex> | 351 | </v-flex> |
| 352 | </v-layout> | 352 | </v-layout> |
| 353 | <v-layout> | 353 | <v-layout> |
| 354 | <v-flex xs12 sm12> | 354 | <v-flex xs12 sm12> |
| 355 | <v-layout> | 355 | <v-layout> |
| 356 | <v-flex xs4 class="pt-4 subheading"> | 356 | <v-flex xs4 class="pt-4 subheading"> |
| 357 | <label class="right">Amount:</label> | 357 | <label class="right">Amount:</label> |
| 358 | </v-flex> | 358 | </v-flex> |
| 359 | <v-flex xs8 sm6 class="ml-3"> | 359 | <v-flex xs8 sm6 class="ml-3"> |
| 360 | <v-text-field | 360 | <v-text-field |
| 361 | v-model="addExpense.amount" | 361 | v-model="addExpense.amount" |
| 362 | placeholder="fill your Amount" | 362 | placeholder="fill your Amount" |
| 363 | name="name" | 363 | name="name" |
| 364 | type="text" | 364 | type="text" |
| 365 | :rules="amountRules" | 365 | :rules="amountRules" |
| 366 | required | 366 | required |
| 367 | ></v-text-field> | 367 | ></v-text-field> |
| 368 | </v-flex> | 368 | </v-flex> |
| 369 | </v-layout> | 369 | </v-layout> |
| 370 | </v-flex> | 370 | </v-flex> |
| 371 | </v-layout> | 371 | </v-layout> |
| 372 | <v-layout> | 372 | <v-layout> |
| 373 | <v-flex xs12 sm12> | 373 | <v-flex xs12 sm12> |
| 374 | <v-layout> | 374 | <v-layout> |
| 375 | <v-flex xs4 class="pt-4 subheading"> | 375 | <v-flex xs4 class="pt-4 subheading"> |
| 376 | <label class="right">Date</label> | 376 | <label class="right">Date</label> |
| 377 | </v-flex> | 377 | </v-flex> |
| 378 | <v-flex xs8 sm6 class="ml-3"> | 378 | <v-flex xs8 sm6 class="ml-3"> |
| 379 | <v-menu | 379 | <v-menu |
| 380 | ref="menu1" | 380 | ref="menu1" |
| 381 | :close-on-content-click="false" | 381 | :close-on-content-click="false" |
| 382 | v-model="menu1" | 382 | v-model="menu1" |
| 383 | :nudge-right="40" | 383 | :nudge-right="40" |
| 384 | lazy | 384 | lazy |
| 385 | transition="scale-transition" | 385 | transition="scale-transition" |
| 386 | offset-y | 386 | offset-y |
| 387 | full-width | 387 | full-width |
| 388 | min-width="290px" | 388 | min-width="290px" |
| 389 | > | 389 | > |
| 390 | <v-text-field | 390 | <v-text-field |
| 391 | slot="activator" | 391 | slot="activator" |
| 392 | :rules="joinDateRules" | 392 | :rules="joinDateRules" |
| 393 | v-model="addExpense.date" | 393 | v-model="addExpense.date" |
| 394 | placeholder="Select date" | 394 | placeholder="Select date" |
| 395 | ></v-text-field> | 395 | ></v-text-field> |
| 396 | <v-date-picker | 396 | <v-date-picker |
| 397 | ref="picker" | 397 | ref="picker" |
| 398 | v-model="addExpense.date" | 398 | v-model="addExpense.date" |
| 399 | @input="$refs.menu1.save(addExpense.date)" | 399 | @input="$refs.menu1.save(addExpense.date)" |
| 400 | ></v-date-picker> | 400 | ></v-date-picker> |
| 401 | </v-menu> | 401 | </v-menu> |
| 402 | </v-flex> | 402 | </v-flex> |
| 403 | </v-layout> | 403 | </v-layout> |
| 404 | </v-flex> | 404 | </v-flex> |
| 405 | </v-layout> | 405 | </v-layout> |
| 406 | <v-layout> | 406 | <v-layout> |
| 407 | <v-flex xs12 sm12> | 407 | <v-flex xs12 sm12> |
| 408 | <v-layout> | 408 | <v-layout> |
| 409 | <v-flex xs4 class="pt-4 subheading"> | 409 | <v-flex xs4 class="pt-4 subheading"> |
| 410 | <label class="right">File:</label> | 410 | <label class="right">File:</label> |
| 411 | </v-flex> | 411 | </v-flex> |
| 412 | <v-flex xs8 sm6 class="ml-3"> | 412 | <v-flex xs8 sm6 class="ml-3"> |
| 413 | <v-text-field | 413 | <v-text-field |
| 414 | label="Select file" | 414 | label="Select file" |
| 415 | @click="pickFile" | 415 | @click="pickFile" |
| 416 | v-model="imageName" | 416 | v-model="imageName" |
| 417 | append-icon="attach_file" | 417 | append-icon="attach_file" |
| 418 | ></v-text-field> | 418 | ></v-text-field> |
| 419 | <input | 419 | <input |
| 420 | type="file" | 420 | type="file" |
| 421 | style="display:none" | 421 | style="display:none" |
| 422 | ref="image" | 422 | ref="image" |
| 423 | accept="image/*" | 423 | accept="image/*" |
| 424 | @change="onFilePicked" | 424 | @change="onFilePicked" |
| 425 | /> | 425 | /> |
| 426 | </v-flex> | 426 | </v-flex> |
| 427 | </v-layout> | 427 | </v-layout> |
| 428 | </v-flex> | 428 | </v-flex> |
| 429 | </v-layout> | 429 | </v-layout> |
| 430 | <v-layout> | 430 | <v-layout> |
| 431 | <v-flex xs12 sm12> | 431 | <v-flex xs12 sm12> |
| 432 | <v-layout> | 432 | <v-layout> |
| 433 | <v-flex xs4 class="pt-4 subheading"> | 433 | <v-flex xs4 class="pt-4 subheading"> |
| 434 | <label class="right">Note:</label> | 434 | <label class="right">Note:</label> |
| 435 | </v-flex> | 435 | </v-flex> |
| 436 | <v-flex xs8 sm6 class="ml-3"> | 436 | <v-flex xs8 sm6 class="ml-3"> |
| 437 | <v-textarea | 437 | <v-textarea |
| 438 | name="input-7-1" | 438 | name="input-7-1" |
| 439 | v-model="addExpense.note" | 439 | v-model="addExpense.note" |
| 440 | placeholder="fill your Note" | 440 | placeholder="fill your Note" |
| 441 | type="text" | 441 | type="text" |
| 442 | :rules="noteRules" | 442 | :rules="noteRules" |
| 443 | multi-line | 443 | multi-line |
| 444 | required | 444 | required |
| 445 | ></v-textarea> | 445 | ></v-textarea> |
| 446 | </v-flex> | 446 | </v-flex> |
| 447 | </v-layout> | 447 | </v-layout> |
| 448 | </v-flex> | 448 | </v-flex> |
| 449 | </v-layout> | 449 | </v-layout> |
| 450 | <v-layout> | 450 | <v-layout> |
| 451 | <v-flex xs11> | 451 | <v-flex xs11> |
| 452 | <v-layout> | 452 | <v-layout> |
| 453 | <v-spacer></v-spacer> | 453 | <v-spacer></v-spacer> |
| 454 | <v-btn @click="clear" round dark class="clear-button">clear</v-btn> | 454 | <v-btn @click="clear" round dark class="clear-button">clear</v-btn> |
| 455 | <v-btn @click="submit" round dark :loading="loading" class="add-button">Add</v-btn> | 455 | <v-btn @click="submit" round dark :loading="loading" class="add-button">Add</v-btn> |
| 456 | </v-layout> | 456 | </v-layout> |
| 457 | </v-flex> | 457 | </v-flex> |
| 458 | </v-layout> | 458 | </v-layout> |
| 459 | </v-container> | 459 | </v-container> |
| 460 | </v-form> | 460 | </v-form> |
| 461 | </v-flex> | 461 | </v-flex> |
| 462 | </v-card> | 462 | </v-card> |
| 463 | </v-dialog> | 463 | </v-dialog> |
| 464 | <div class="loader" v-if="showLoader"> | 464 | <div class="loader" v-if="showLoader"> |
| 465 | <v-progress-circular indeterminate color="white"></v-progress-circular> | 465 | <v-progress-circular indeterminate color="white"></v-progress-circular> |
| 466 | </div> | 466 | </div> |
| 467 | <v-snackbar | 467 | <v-snackbar |
| 468 | :timeout="timeout" | 468 | :timeout="timeout" |
| 469 | :top="y === 'top'" | 469 | :top="y === 'top'" |
| 470 | :right="x === 'right'" | 470 | :right="x === 'right'" |
| 471 | :vertical="mode === 'vertical'" | 471 | :vertical="mode === 'vertical'" |
| 472 | v-model="snackbar" | 472 | v-model="snackbar" |
| 473 | :color="color" | 473 | :color="color" |
| 474 | >{{ text }}</v-snackbar> | 474 | >{{ text }}</v-snackbar> |
| 475 | </v-container> | 475 | </v-container> |
| 476 | </template> | 476 | </template> |
| 477 | 477 | ||
| 478 | <script> | 478 | <script> |
| 479 | import http from "@/Services/http.js"; | 479 | import http from "@/Services/http.js"; |
| 480 | import moment from "moment"; | 480 | import moment from "moment"; |
| 481 | 481 | ||
| 482 | export default { | 482 | export default { |
| 483 | data: () => ({ | 483 | data: () => ({ |
| 484 | component: "report-generate", | 484 | component: "report-generate", |
| 485 | snackbar: false, | 485 | snackbar: false, |
| 486 | y: "top", | 486 | y: "top", |
| 487 | x: "right", | 487 | x: "right", |
| 488 | mode: "", | 488 | mode: "", |
| 489 | timeout: 5000, | 489 | timeout: 5000, |
| 490 | text: "", | 490 | text: "", |
| 491 | color: "", | 491 | color: "", |
| 492 | showLoader: false, | 492 | showLoader: false, |
| 493 | loading: false, | 493 | loading: false, |
| 494 | date: null, | 494 | date: null, |
| 495 | search: "", | 495 | search: "", |
| 496 | menu: false, | 496 | menu: false, |
| 497 | menu1: false, | 497 | menu1: false, |
| 498 | menu2: false, | 498 | menu2: false, |
| 499 | menu3: false, | 499 | menu3: false, |
| 500 | editExpenseDialog: false, | 500 | editExpenseDialog: false, |
| 501 | viewExpenseDialog: false, | 501 | viewExpenseDialog: false, |
| 502 | valid: true, | 502 | valid: true, |
| 503 | show: true, | 503 | show: true, |
| 504 | addExpenseDialog: false, | 504 | addExpenseDialog: false, |
| 505 | showSearch: false, | 505 | showSearch: false, |
| 506 | pagination: { | 506 | pagination: { |
| 507 | rowsPerPage: 10 | 507 | rowsPerPage: 10 |
| 508 | }, | 508 | }, |
| 509 | imageData: {}, | 509 | imageData: {}, |
| 510 | token: "", | 510 | token: "", |
| 511 | imageName: "", | 511 | imageName: "", |
| 512 | imageUrl: "", | 512 | imageUrl: "", |
| 513 | imageFile: "", | 513 | imageFile: "", |
| 514 | nameRules: [v => !!v || " Full Name is required"], | 514 | nameRules: [v => !!v || " Full Name is required"], |
| 515 | amountRules: [v => !!v || "Amount is required"], | 515 | amountRules: [v => !!v || "Amount is required"], |
| 516 | noteRules: [v => !!v || "Note Name is required"], | 516 | noteRules: [v => !!v || "Note Name is required"], |
| 517 | joinDateRules: [v => !!v || "Date is required"], | 517 | joinDateRules: [v => !!v || "Date is required"], |
| 518 | errorMessages: "", | 518 | errorMessages: "", |
| 519 | headers: [ | 519 | headers: [ |
| 520 | { | 520 | { |
| 521 | text: "No", | 521 | text: "No", |
| 522 | align: "center", | 522 | align: "center", |
| 523 | sortable: false, | 523 | sortable: false, |
| 524 | value: "No" | 524 | value: "No" |
| 525 | }, | 525 | }, |
| 526 | { | 526 | { |
| 527 | text: "Profile Pic", | 527 | text: "Profile Pic", |
| 528 | value: "profilePicUrl", | 528 | value: "profilePicUrl", |
| 529 | sortable: false, | 529 | sortable: false, |
| 530 | align: "center" | 530 | align: "center" |
| 531 | }, | 531 | }, |
| 532 | { text: "Name", value: "name", sortable: false, align: "center" }, | 532 | { text: "Name", value: "name", sortable: false, align: "center" }, |
| 533 | { text: "Date", value: "date", sortable: false, align: "center" }, | 533 | { text: "Date", value: "date", sortable: false, align: "center" }, |
| 534 | { text: "User", value: "user", sortable: false, align: "center" }, | 534 | { text: "User", value: "user", sortable: false, align: "center" }, |
| 535 | { text: "Amount", value: "amount", sortable: false, align: "center" }, | 535 | { text: "Amount", value: "amount", sortable: false, align: "center" }, |
| 536 | { text: "Note", value: "note", sortable: false, align: "center" }, | 536 | { text: "Note", value: "note", sortable: false, align: "center" }, |
| 537 | { text: "Action", value: "", sortable: false, align: "center" } | 537 | { text: "Action", value: "", sortable: false, align: "center" } |
| 538 | ], | 538 | ], |
| 539 | expenseList: [], | 539 | expenseList: [], |
| 540 | editedIndex: -1, | 540 | editedIndex: -1, |
| 541 | upload: "", | 541 | upload: "", |
| 542 | editedItem: { | 542 | editedItem: { |
| 543 | role: "TEACHER", | 543 | role: "TEACHER", |
| 544 | name: "", | 544 | name: "", |
| 545 | email: "", | 545 | email: "", |
| 546 | date: null, | 546 | date: null, |
| 547 | city: "", | 547 | city: "", |
| 548 | pincode: "", | 548 | pincode: "", |
| 549 | country: "", | 549 | country: "", |
| 550 | permanentAddress: "", | 550 | permanentAddress: "", |
| 551 | presentAddress: "", | 551 | presentAddress: "", |
| 552 | mobileNo: "", | 552 | mobileNo: "", |
| 553 | state: "", | 553 | state: "", |
| 554 | joinDate: null | 554 | joinDate: null |
| 555 | }, | 555 | }, |
| 556 | addExpense: {} | 556 | addExpense: {} |
| 557 | }), | 557 | }), |
| 558 | watch: { | 558 | watch: { |
| 559 | menu(val) { | 559 | menu(val) { |
| 560 | val && this.$nextTick(() => (this.$refs.picker.activePicker = "YEAR")); | 560 | val && this.$nextTick(() => (this.$refs.picker.activePicker = "YEAR")); |
| 561 | }, | 561 | }, |
| 562 | menu1(val) { | 562 | menu1(val) { |
| 563 | val && this.$nextTick(() => (this.$refs.picker.activePicker = "YEAR")); | 563 | val && this.$nextTick(() => (this.$refs.picker.activePicker = "YEAR")); |
| 564 | } | 564 | } |
| 565 | }, | 565 | }, |
| 566 | methods: { | 566 | methods: { |
| 567 | save(date) { | 567 | save(date) { |
| 568 | this.$refs.menu.save(date); | 568 | this.$refs.menu.save(date); |
| 569 | }, | 569 | }, |
| 570 | save(date) { | 570 | save(date) { |
| 571 | this.$refs.menu1.save(date); | 571 | this.$refs.menu1.save(date); |
| 572 | }, | 572 | }, |
| 573 | pickFile() { | 573 | pickFile() { |
| 574 | this.$refs.image.click(); | 574 | this.$refs.image.click(); |
| 575 | }, | 575 | }, |
| 576 | dates: function(date) { | 576 | dates: function(date) { |
| 577 | return moment(date).format("MMMM DD, YYYY"); | 577 | return moment(date).format("MMMM DD, YYYY"); |
| 578 | }, | 578 | }, |
| 579 | onFilePicked(e) { | 579 | onFilePicked(e) { |
| 580 | // console.log(e) | 580 | // console.log(e) |
| 581 | const files = e.target.files; | 581 | const files = e.target.files; |
| 582 | this.upload = e.target.files[0]; | 582 | this.upload = e.target.files[0]; |
| 583 | console.log("imageData-upload========>", this.upload); | 583 | console.log("imageData-upload========>", this.upload); |
| 584 | if (files[0] !== undefined) { | 584 | if (files[0] !== undefined) { |
| 585 | this.imageName = files[0].name; | 585 | this.imageName = files[0].name; |
| 586 | if (this.imageName.lastIndexOf(".") <= 0) { | 586 | if (this.imageName.lastIndexOf(".") <= 0) { |
| 587 | return; | 587 | return; |
| 588 | } | 588 | } |
| 589 | const fr = new FileReader(); | 589 | const fr = new FileReader(); |
| 590 | fr.readAsDataURL(files[0]); | 590 | fr.readAsDataURL(files[0]); |
| 591 | fr.addEventListener("load", () => { | 591 | fr.addEventListener("load", () => { |
| 592 | this.imageUrl = fr.result; | 592 | this.imageUrl = fr.result; |
| 593 | this.imageFile = files[0]; // this is an image file that can be sent to server... | 593 | this.imageFile = files[0]; // this is an image file that can be sent to server... |
| 594 | // this.imageData.imageUrl = URL.createObjectURL(this.imageFile); | 594 | // this.imageData.imageUrl = URL.createObjectURL(this.imageFile); |
| 595 | // console.log("upload=======>", this.imageData.imageUrl); | 595 | // console.log("upload=======>", this.imageData.imageUrl); |
| 596 | console.log("imageFile", this.imageUrl); | 596 | console.log("imageFile", this.imageUrl); |
| 597 | }); | 597 | }); |
| 598 | } else { | 598 | } else { |
| 599 | this.imageName = ""; | 599 | this.imageName = ""; |
| 600 | this.imageFile = ""; | 600 | this.imageFile = ""; |
| 601 | this.imageUrl = ""; | 601 | this.imageUrl = ""; |
| 602 | } | 602 | } |
| 603 | }, | 603 | }, |
| 604 | getExpenseList() { | 604 | getExpenseList() { |
| 605 | http() | 605 | http() |
| 606 | .get("/getExpensesList", { | 606 | .get("/getExpensesList", { |
| 607 | params: { schoolId: this.$store.state.schoolId }, | 607 | params: { schoolId: this.$store.state.schoolId }, |
| 608 | headers: { Authorization: "Bearer " + this.token } | 608 | headers: { Authorization: "Bearer " + this.token } |
| 609 | }) | 609 | }) |
| 610 | .then(response => { | 610 | .then(response => { |
| 611 | this.expenseList = response.data.data; | 611 | this.expenseList = response.data.data; |
| 612 | this.showLoader = false; | 612 | this.showLoader = false; |
| 613 | // console.log("getTeacherList=====>",this.expenseList) | 613 | // console.log("getTeacherList=====>",this.expenseList) |
| 614 | }) | 614 | }) |
| 615 | .catch(error => { | 615 | .catch(error => { |
| 616 | this.showLoader = false; | 616 | this.showLoader = false; |
| 617 | // if (error.response.status === 401) { | 617 | // if (error.response.status === 401) { |
| 618 | // this.$router.replace({ path: "/" }); | 618 | // this.$router.replace({ path: "/" }); |
| 619 | // this.$store.dispatch("setToken", null); | 619 | // this.$store.dispatch("setToken", null); |
| 620 | // this.$store.dispatch("Id", null); | 620 | // this.$store.dispatch("Id", null); |
| 621 | // } | 621 | // } |
| 622 | }); | 622 | }); |
| 623 | }, | 623 | }, |
| 624 | editItem(item) { | 624 | editItem(item) { |
| 625 | this.editedIndex = this.expenseList.indexOf(item); | 625 | this.editedIndex = this.expenseList.indexOf(item); |
| 626 | this.editedItem = Object.assign({}, item); | 626 | this.editedItem = Object.assign({}, item); |
| 627 | this.editedItem.date = | 627 | this.editedItem.date = |
| 628 | this.editedItem.date != undefined | 628 | this.editedItem.date != undefined |
| 629 | ? (this.editedItem.date = this.editedItem.date.substring(0, 10)) | 629 | ? (this.editedItem.date = this.editedItem.date.substring(0, 10)) |
| 630 | : (this.editedItem.date = ""); | 630 | : (this.editedItem.date = ""); |
| 631 | 631 | ||
| 632 | this.editExpenseDialog = true; | 632 | this.editExpenseDialog = true; |
| 633 | }, | 633 | }, |
| 634 | profile(item) { | 634 | profile(item) { |
| 635 | this.editedIndex = this.expenseList.indexOf(item); | 635 | this.editedIndex = this.expenseList.indexOf(item); |
| 636 | this.editedItem = Object.assign({}, item); | 636 | this.editedItem = Object.assign({}, item); |
| 637 | this.viewExpenseDialog = true; | 637 | this.viewExpenseDialog = true; |
| 638 | }, | 638 | }, |
| 639 | deleteItem(item) { | 639 | deleteItem(item) { |
| 640 | let deleteExpense = { | 640 | let deleteExpense = { |
| 641 | expenseId: item._id | 641 | expenseId: item._id |
| 642 | }; | 642 | }; |
| 643 | // console.log("deleteUers",deleteTeachers) | 643 | // console.log("deleteUers",deleteTeachers) |
| 644 | http() | 644 | http() |
| 645 | .delete( | 645 | .delete( |
| 646 | "/deleteExpense", | 646 | "/deleteExpense", |
| 647 | confirm("Are you sure you want to delete this?") && { | 647 | confirm("Are you sure you want to delete this?") && { |
| 648 | params: deleteExpense | 648 | params: deleteExpense |
| 649 | } | 649 | } |
| 650 | ) | 650 | ) |
| 651 | .then(response => { | 651 | .then(response => { |
| 652 | // console.log("deleteUers",deleteTeachers) | 652 | // console.log("deleteUers",deleteTeachers) |
| 653 | this.snackbar = true; | 653 | this.snackbar = true; |
| 654 | this.text = response.data.message; | 654 | this.text = response.data.message; |
| 655 | this.color = "green"; | 655 | this.color = "green"; |
| 656 | this.getExpenseList(); | 656 | this.getExpenseList(); |
| 657 | }) | 657 | }) |
| 658 | .catch(error => { | 658 | .catch(error => { |
| 659 | this.snackbar = true; | 659 | this.snackbar = true; |
| 660 | this.text = error.response.data.message; | 660 | this.text = error.response.data.message; |
| 661 | this.color = "error"; | 661 | this.color = "error"; |
| 662 | }); | 662 | }); |
| 663 | }, | 663 | }, |
| 664 | close() { | 664 | close() { |
| 665 | this.editExpenseDialog = false; | 665 | this.editExpenseDialog = false; |
| 666 | }, | 666 | }, |
| 667 | submit() { | 667 | submit() { |
| 668 | if (this.$refs.form.validate()) { | 668 | if (this.$refs.form.validate()) { |
| 669 | if (this.imageUrl) { | 669 | if (this.imageUrl) { |
| 670 | var str = this.imageUrl; | 670 | var str = this.imageUrl; |
| 671 | const [baseUrl, imageUrl] = str.split(/,/); | 671 | const [baseUrl, imageUrl] = str.split(/,/); |
| 672 | this.addExpense.upload = imageUrl; | 672 | this.addExpense.upload = imageUrl; |
| 673 | } | 673 | } |
| 674 | this.loading = true; | 674 | this.loading = true; |
| 675 | // this.addExpense = this.$store.state.schoolId; | 675 | // this.addExpense = this.$store.state.schoolId; |
| 676 | http() | 676 | http() |
| 677 | .post("/createExpense", this.addExpense) | 677 | .post("/createExpense", this.addExpense) |
| 678 | .then(response => { | 678 | .then(response => { |
| 679 | this.getExpenseList(); | 679 | this.getExpenseList(); |
| 680 | this.snackbar = true; | 680 | this.snackbar = true; |
| 681 | this.text = response.data.message; | 681 | this.text = response.data.message; |
| 682 | this.color = "green"; | 682 | this.color = "green"; |
| 683 | this.clear(); | 683 | this.clear(); |
| 684 | this.imageUrl = ""; | 684 | this.imageUrl = ""; |
| 685 | this.loading = false; | 685 | this.loading = false; |
| 686 | this.addExpenseDialog = false; | 686 | this.addExpenseDialog = false; |
| 687 | }) | 687 | }) |
| 688 | .catch(error => { | 688 | .catch(error => { |
| 689 | // console.log(error); | 689 | // console.log(error); |
| 690 | this.snackbar = true; | 690 | this.snackbar = true; |
| 691 | this.color = "error"; | 691 | this.color = "error"; |
| 692 | this.text = error.response.data.message; | 692 | this.text = error.response.data.message; |
| 693 | this.loading = false; | 693 | this.loading = false; |
| 694 | }); | 694 | }); |
| 695 | } | 695 | } |
| 696 | }, | 696 | }, |
| 697 | clear() { | 697 | clear() { |
| 698 | this.$refs.form.reset(); | 698 | this.$refs.form.reset(); |
| 699 | }, | 699 | }, |
| 700 | save() { | 700 | save() { |
| 701 | this.loading = true; | 701 | this.loading = true; |
| 702 | this.editedItem.expenseId = this.editedItem._id; | 702 | this.editedItem.expenseId = this.editedItem._id; |
| 703 | if (this.imageUrl) { | 703 | if (this.imageUrl) { |
| 704 | var str = this.imageUrl; | 704 | var str = this.imageUrl; |
| 705 | const [baseUrl, imageUrl] = str.split(/,/); | 705 | const [baseUrl, imageUrl] = str.split(/,/); |
| 706 | this.editedItem.upload = imageUrl; | 706 | this.editedItem.upload = imageUrl; |
| 707 | } | 707 | } |
| 708 | http() | 708 | http() |
| 709 | .put("/updateExpense", this.editedItem) | 709 | .put("/updateExpense", this.editedItem) |
| 710 | .then(response => { | 710 | .then(response => { |
| 711 | this.snackbar = true; | 711 | this.snackbar = true; |
| 712 | this.text = response.data.message; | 712 | this.text = response.data.message; |
| 713 | this.color = "green"; | 713 | this.color = "green"; |
| 714 | this.loading = false; | 714 | this.loading = false; |
| 715 | this.getExpenseList(); | 715 | this.getExpenseList(); |
| 716 | this.close(); | 716 | this.close(); |
| 717 | }) | 717 | }) |
| 718 | .catch(error => { | 718 | .catch(error => { |
| 719 | this.snackbar = true; | 719 | this.snackbar = true; |
| 720 | this.text = error.response.data.message; | 720 | this.text = error.response.data.message; |
| 721 | this.color = "error"; | 721 | this.color = "error"; |
| 722 | }); | 722 | }); |
| 723 | }, | 723 | }, |
| 724 | displaySearch() { | 724 | displaySearch() { |
| 725 | (this.show = false), (this.showSearch = true); | 725 | (this.show = false), (this.showSearch = true); |
| 726 | }, | 726 | }, |
| 727 | closeSearch() { | 727 | closeSearch() { |
| 728 | this.showSearch = false; | 728 | this.showSearch = false; |
| 729 | this.show = true; | 729 | this.show = true; |
| 730 | this.search = ""; | 730 | this.search = ""; |
| 731 | } | 731 | } |
| 732 | }, | 732 | }, |
| 733 | mounted() { | 733 | mounted() { |
| 734 | this.token = this.$store.state.token; | 734 | this.token = this.$store.state.token; |
| 735 | this.getExpenseList(); | 735 | this.getExpenseList(); |
| 736 | } | 736 | } |
| 737 | }; | 737 | }; |
| 738 | </script> | 738 | </script> |
src/pages/Account/feeTypes.vue
| 1 | <template> | 1 | <template> |
| 2 | <v-container fluid class="body-color"> | 2 | <v-container fluid class="body-color"> |
| 3 | <!-- ****** EDIT SECTION ****** --> | 3 | <!-- ****** EDIT SECTION ****** --> |
| 4 | <v-dialog v-model="editFeeTypeDialog" max-width="600px"> | 4 | <v-dialog v-model="editFeeTypeDialog" max-width="600px"> |
| 5 | <v-card flat class="card-style pa-2" dark> | 5 | <v-card flat class="card-style pa-2" dark> |
| 6 | <v-layout> | 6 | <v-layout> |
| 7 | <v-flex xs12> | 7 | <v-flex xs12> |
| 8 | <label class="title text-xs-center">Edit Fee Type</label> | 8 | <label class="title text-xs-center">Edit Fee Type</label> |
| 9 | <v-icon size="24" class="right" @click="editFeeTypeDialog = false">cancel</v-icon> | 9 | <v-icon size="24" class="right" @click="editFeeTypeDialog = 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-layout wrap justify-center> | 13 | <v-layout wrap justify-center> |
| 14 | <v-flex xs12 sm11> | 14 | <v-flex xs12 sm11> |
| 15 | <v-layout> | 15 | <v-layout> |
| 16 | <v-flex xs4 class="pt-4 subheading"> | 16 | <v-flex xs4 class="pt-4 subheading"> |
| 17 | <label class="right">Fee Type:</label> | 17 | <label class="right">Fee Type:</label> |
| 18 | </v-flex> | 18 | </v-flex> |
| 19 | <v-flex xs8> | 19 | <v-flex xs8> |
| 20 | <v-text-field | 20 | <v-text-field |
| 21 | class="ml-3" | 21 | class="ml-3" |
| 22 | v-model="editedItem.feeType" | 22 | v-model="editedItem.feeType" |
| 23 | placeholder="fill your Fee Type" | 23 | placeholder="fill your Fee Type" |
| 24 | required | 24 | required |
| 25 | ></v-text-field> | 25 | ></v-text-field> |
| 26 | </v-flex> | 26 | </v-flex> |
| 27 | </v-layout> | 27 | </v-layout> |
| 28 | <v-layout> | 28 | <v-layout> |
| 29 | <v-flex xs4 class="pt-4 subheading"> | 29 | <v-flex xs4 class="pt-4 subheading"> |
| 30 | <label class="right">Note:</label> | 30 | <label class="right">Note:</label> |
| 31 | </v-flex> | 31 | </v-flex> |
| 32 | <v-flex xs8> | 32 | <v-flex xs8> |
| 33 | <v-textarea | 33 | <v-textarea |
| 34 | name="input-7-1" | 34 | name="input-7-1" |
| 35 | class="ml-3" | 35 | class="ml-3" |
| 36 | v-model="editedItem.note" | 36 | v-model="editedItem.note" |
| 37 | placeholder="fill your Note" | 37 | placeholder="fill your Note" |
| 38 | multi-line | 38 | multi-line |
| 39 | required | 39 | required |
| 40 | ></v-textarea> | 40 | ></v-textarea> |
| 41 | </v-flex> | 41 | </v-flex> |
| 42 | </v-layout> | 42 | </v-layout> |
| 43 | <v-card-actions class="hidden-xs-only hidden-sm-only "> | 43 | <v-card-actions class="hidden-xs-only hidden-sm-only "> |
| 44 | <v-spacer></v-spacer> | 44 | <v-spacer></v-spacer> |
| 45 | <v-btn round dark @click="save" class="add-button">Save</v-btn> | 45 | <v-btn round dark @click="save" class="add-button">Save</v-btn> |
| 46 | </v-card-actions> | 46 | </v-card-actions> |
| 47 | <v-card-actions class="hidden-md-only hidden-lg-only hidden-xl-only"> | 47 | <v-card-actions class="hidden-md-only hidden-lg-only hidden-xl-only"> |
| 48 | <v-spacer></v-spacer> | 48 | <v-spacer></v-spacer> |
| 49 | <v-btn round dark @click="save" class="add-button">Save</v-btn> | 49 | <v-btn round dark @click="save" class="add-button">Save</v-btn> |
| 50 | <v-spacer></v-spacer> | 50 | <v-spacer></v-spacer> |
| 51 | </v-card-actions> | 51 | </v-card-actions> |
| 52 | </v-flex> | 52 | </v-flex> |
| 53 | </v-layout> | 53 | </v-layout> |
| 54 | </v-container> | 54 | </v-container> |
| 55 | </v-card> | 55 | </v-card> |
| 56 | </v-dialog> | 56 | </v-dialog> |
| 57 | 57 | ||
| 58 | <!-- ****** PROFILE VIEW FEE TYPE DATA ****** --> | 58 | <!-- ****** PROFILE VIEW FEE TYPE DATA ****** --> |
| 59 | 59 | ||
| 60 | <v-dialog v-model="viewFeeTypeDialog" max-width="400px"> | 60 | <v-dialog v-model="viewFeeTypeDialog" max-width="400px"> |
| 61 | <v-card flat class="card-style pa-3" dark> | 61 | <v-card flat class="card-style pa-3" dark> |
| 62 | <v-layout> | 62 | <v-layout> |
| 63 | <v-flex xs12> | 63 | <v-flex xs12> |
| 64 | <label class="title text-xs-center">View Fee Type</label> | 64 | <label class="title text-xs-center">View Fee Type</label> |
| 65 | <v-icon size="24" class="right" @click="viewFeeTypeDialog = false">cancel</v-icon> | 65 | <v-icon size="24" class="right" @click="viewFeeTypeDialog = false">cancel</v-icon> |
| 66 | </v-flex> | 66 | </v-flex> |
| 67 | </v-layout> | 67 | </v-layout> |
| 68 | <v-container grid-list-md> | 68 | <v-container grid-list-md> |
| 69 | <v-layout wrap> | 69 | <v-layout wrap> |
| 70 | <v-flex> | 70 | <v-flex> |
| 71 | <v-layout> | 71 | <v-layout> |
| 72 | <v-flex xs5 sm6> | 72 | <v-flex xs5 sm6> |
| 73 | <h5 class="right my-1"> | 73 | <h5 class="right my-1"> |
| 74 | <b>Fee Type:</b> | 74 | <b>Fee Type:</b> |
| 75 | </h5> | 75 | </h5> |
| 76 | </v-flex> | 76 | </v-flex> |
| 77 | <v-flex sm6 xs8> | 77 | <v-flex sm6 xs8> |
| 78 | <h5 class="my-1">{{ editedItem.feeType }}</h5> | 78 | <h5 class="my-1">{{ editedItem.feeType }}</h5> |
| 79 | </v-flex> | 79 | </v-flex> |
| 80 | </v-layout> | 80 | </v-layout> |
| 81 | <v-layout> | 81 | <v-layout> |
| 82 | <v-flex xs5 sm6> | 82 | <v-flex xs5 sm6> |
| 83 | <h5 class="right my-1"> | 83 | <h5 class="right my-1"> |
| 84 | <b>Note:</b> | 84 | <b>Note:</b> |
| 85 | </h5> | 85 | </h5> |
| 86 | </v-flex> | 86 | </v-flex> |
| 87 | <v-flex sm6 xs8> | 87 | <v-flex sm6 xs8> |
| 88 | <h5 class="my-1">{{ editedItem.note }}</h5> | 88 | <h5 class="my-1">{{ editedItem.note }}</h5> |
| 89 | </v-flex> | 89 | </v-flex> |
| 90 | </v-layout> | 90 | </v-layout> |
| 91 | </v-flex> | 91 | </v-flex> |
| 92 | </v-layout> | 92 | </v-layout> |
| 93 | </v-container> | 93 | </v-container> |
| 94 | </v-card> | 94 | </v-card> |
| 95 | </v-dialog> | 95 | </v-dialog> |
| 96 | 96 | ||
| 97 | <!-- ****** EXISTING-FEETYPE TABLE ****** --> | 97 | <!-- ****** EXISTING-FEETYPE TABLE ****** --> |
| 98 | <v-toolbar color="transparent" flat> | 98 | <v-toolbar color="transparent" flat> |
| 99 | <v-btn | 99 | <v-btn |
| 100 | fab | 100 | fab |
| 101 | dark | 101 | dark |
| 102 | class="open-dialog-button hidden-xl-only hidden-md-only hidden-lg-only" | 102 | class="open-dialog-button hidden-xl-only hidden-md-only hidden-lg-only" |
| 103 | small | 103 | small |
| 104 | @click="addFeeTypeDialog = true" | 104 | @click="addFeeTypeDialog = true" |
| 105 | > | 105 | > |
| 106 | <v-icon dark>add</v-icon> | 106 | <v-icon dark>add</v-icon> |
| 107 | </v-btn> | 107 | </v-btn> |
| 108 | <v-btn | 108 | <v-btn |
| 109 | round | 109 | round |
| 110 | class="open-dialog-button hidden-sm-only hidden-xs-only" | 110 | class="open-dialog-button hidden-sm-only hidden-xs-only" |
| 111 | dark | 111 | dark |
| 112 | @click="addFeeTypeDialog = true" | 112 | @click="addFeeTypeDialog = true" |
| 113 | > | 113 | > |
| 114 | <v-icon class="white--text pr-1" size="20">add</v-icon>Add Fee Type | 114 | <v-icon class="white--text pr-1" size="20">add</v-icon>Add Fee Type |
| 115 | </v-btn> | 115 | </v-btn> |
| 116 | <v-spacer></v-spacer> | 116 | <v-spacer></v-spacer> |
| 117 | <v-card-title class="body-1" v-show="show"> | 117 | <v-card-title class="body-1" v-show="show"> |
| 118 | <v-btn icon large flat @click="displaySearch"> | 118 | <v-btn icon large flat @click="displaySearch"> |
| 119 | <v-avatar size="27"> | 119 | <v-avatar size="27"> |
| 120 | <img src="/static/icon/dashboard icons-49.png" alt="icon" /> | 120 | <img src="/static/icon/search.png" alt="icon" /> |
| 121 | </v-avatar> | 121 | </v-avatar> |
| 122 | </v-btn> | 122 | </v-btn> |
| 123 | </v-card-title> | 123 | </v-card-title> |
| 124 | <v-flex xs8 sm8 md3 lg2 v-show="showSearch"> | 124 | <v-flex xs8 sm8 md3 lg2 v-show="showSearch"> |
| 125 | <v-layout> | 125 | <v-layout> |
| 126 | <v-text-field v-model="search" label="Search" prepend-inner-icon="search" color="primary"></v-text-field> | 126 | <v-text-field v-model="search" label="Search" prepend-inner-icon="search" color="primary"></v-text-field> |
| 127 | <v-icon @click="closeSearch" color="error">close</v-icon> | 127 | <v-icon @click="closeSearch" color="error">close</v-icon> |
| 128 | </v-layout> | 128 | </v-layout> |
| 129 | </v-flex> | 129 | </v-flex> |
| 130 | </v-toolbar> | 130 | </v-toolbar> |
| 131 | <v-data-table | 131 | <v-data-table |
| 132 | :headers="headers" | 132 | :headers="headers" |
| 133 | :items="feeTypeList" | 133 | :items="feeTypeList" |
| 134 | :pagination.sync="pagination" | 134 | :pagination.sync="pagination" |
| 135 | :search="search" | 135 | :search="search" |
| 136 | > | 136 | > |
| 137 | <template slot="items" slot-scope="props"> | 137 | <template slot="items" slot-scope="props"> |
| 138 | <tr class="tr"> | 138 | <tr class="tr"> |
| 139 | <td class="td td-row">{{ props.index + 1}}</td> | 139 | <td class="td td-row">{{ props.index + 1}}</td> |
| 140 | <td class="text-xs-center td td-row">{{ props.item.feeType }}</td> | 140 | <td class="text-xs-center td td-row">{{ props.item.feeType }}</td> |
| 141 | <td class="text-xs-center td td-row">{{ props.item.note }}</td> | 141 | <td class="text-xs-center td td-row">{{ props.item.note }}</td> |
| 142 | <!-- <td id="td" class="text-xs-center">{{ props.item.session}}</td> --> | 142 | <!-- <td id="td" class="text-xs-center">{{ props.item.session}}</td> --> |
| 143 | 143 | ||
| 144 | <td class="text-xs-center td td-row"> | 144 | <td class="text-xs-center td td-row"> |
| 145 | <!-- <span> --> | 145 | <!-- <span> --> |
| 146 | <v-tooltip top> | 146 | <v-tooltip top> |
| 147 | <img | 147 | <img |
| 148 | slot="activator" | 148 | slot="activator" |
| 149 | style="cursor:pointer; width:25px; height:25px; " | 149 | style="cursor:pointer; width:25px; height:25px; " |
| 150 | class="mr-3" | 150 | class="mr-3" |
| 151 | @click="profile(props.item)" | 151 | @click="profile(props.item)" |
| 152 | src="/static/icon/dashboard icons-47.png" | 152 | src="/static/icon/view.png" |
| 153 | /> | 153 | /> |
| 154 | <span>View</span> | 154 | <span>View</span> |
| 155 | </v-tooltip> | 155 | </v-tooltip> |
| 156 | <v-tooltip top> | 156 | <v-tooltip top> |
| 157 | <img | 157 | <img |
| 158 | slot="activator" | 158 | slot="activator" |
| 159 | style="cursor:pointer; width:20px; height:18px; " | 159 | style="cursor:pointer; width:20px; height:18px; " |
| 160 | class="mr-3" | 160 | class="mr-3" |
| 161 | @click="editItem(props.item)" | 161 | @click="editItem(props.item)" |
| 162 | src="/static/icon/dashboard icons-50.png" | 162 | src="/static/icon/edit.png" |
| 163 | /> | 163 | /> |
| 164 | <span>Edit</span> | 164 | <span>Edit</span> |
| 165 | </v-tooltip> | 165 | </v-tooltip> |
| 166 | <v-tooltip top> | 166 | <v-tooltip top> |
| 167 | <img | 167 | <img |
| 168 | slot="activator" | 168 | slot="activator" |
| 169 | style="cursor:pointer; width:20px; height:20px; " | 169 | style="cursor:pointer; width:20px; height:20px; " |
| 170 | @click="deleteItem(props.item)" | 170 | @click="deleteItem(props.item)" |
| 171 | class="mr-3" | 171 | class="mr-3" |
| 172 | src="/static/icon/dashboard icons-51.png" | 172 | src="/static/icon/delete.png" |
| 173 | /> | 173 | /> |
| 174 | <span>Delete</span> | 174 | <span>Delete</span> |
| 175 | </v-tooltip> | 175 | </v-tooltip> |
| 176 | <!-- </span> --> | 176 | <!-- </span> --> |
| 177 | </td> | 177 | </td> |
| 178 | </tr> | 178 | </tr> |
| 179 | </template> | 179 | </template> |
| 180 | <v-alert | 180 | <v-alert |
| 181 | slot="no-results" | 181 | slot="no-results" |
| 182 | :value="true" | 182 | :value="true" |
| 183 | color="error" | 183 | color="error" |
| 184 | icon="warning" | 184 | icon="warning" |
| 185 | >Your search for "{{ search }}" found no results.</v-alert> | 185 | >Your search for "{{ search }}" found no results.</v-alert> |
| 186 | </v-data-table> | 186 | </v-data-table> |
| 187 | 187 | ||
| 188 | <!-- ****** ADD Fee Type ****** --> | 188 | <!-- ****** ADD Fee Type ****** --> |
| 189 | <v-dialog v-model="addFeeTypeDialog" max-width="500px"> | 189 | <v-dialog v-model="addFeeTypeDialog" max-width="500px"> |
| 190 | <v-card flat class="card-style pa-2" dark> | 190 | <v-card flat class="card-style pa-2" dark> |
| 191 | <v-layout> | 191 | <v-layout> |
| 192 | <v-flex xs12> | 192 | <v-flex xs12> |
| 193 | <label class="title text-xs-center">Add Fee Type</label> | 193 | <label class="title text-xs-center">Add Fee Type</label> |
| 194 | <v-icon size="24" class="right" @click="addFeeTypeDialog = false">cancel</v-icon> | 194 | <v-icon size="24" class="right" @click="addFeeTypeDialog = false">cancel</v-icon> |
| 195 | </v-flex> | 195 | </v-flex> |
| 196 | </v-layout> | 196 | </v-layout> |
| 197 | <v-container fluid fill-height> | 197 | <v-container fluid fill-height> |
| 198 | <v-layout align-center> | 198 | <v-layout align-center> |
| 199 | <v-flex xs12 class="mt-4"> | 199 | <v-flex xs12 class="mt-4"> |
| 200 | <v-form ref="form" v-model="valid" lazy-validation> | 200 | <v-form ref="form" v-model="valid" lazy-validation> |
| 201 | <v-layout> | 201 | <v-layout> |
| 202 | <v-flex xs4 class="pt-4 subheading"> | 202 | <v-flex xs4 class="pt-4 subheading"> |
| 203 | <label class="right">Fee Type:</label> | 203 | <label class="right">Fee Type:</label> |
| 204 | </v-flex> | 204 | </v-flex> |
| 205 | <v-flex xs7 class="ml-3"> | 205 | <v-flex xs7 class="ml-3"> |
| 206 | <v-text-field | 206 | <v-text-field |
| 207 | v-model="feeTypeData.feeType" | 207 | v-model="feeTypeData.feeType" |
| 208 | placeholder="fill your Fee Type" | 208 | placeholder="fill your Fee Type" |
| 209 | type="text" | 209 | type="text" |
| 210 | :rules="feetTypeRules" | 210 | :rules="feetTypeRules" |
| 211 | required | 211 | required |
| 212 | ></v-text-field> | 212 | ></v-text-field> |
| 213 | </v-flex> | 213 | </v-flex> |
| 214 | </v-layout> | 214 | </v-layout> |
| 215 | <v-layout> | 215 | <v-layout> |
| 216 | <v-flex xs4 class="pt-4 subheading"> | 216 | <v-flex xs4 class="pt-4 subheading"> |
| 217 | <label class="right">Note:</label> | 217 | <label class="right">Note:</label> |
| 218 | </v-flex> | 218 | </v-flex> |
| 219 | <v-flex xs7 class="ml-3"> | 219 | <v-flex xs7 class="ml-3"> |
| 220 | <v-textarea | 220 | <v-textarea |
| 221 | name="input-7-1" | 221 | name="input-7-1" |
| 222 | v-model="feeTypeData.note" | 222 | v-model="feeTypeData.note" |
| 223 | placeholder="fill your Note" | 223 | placeholder="fill your Note" |
| 224 | type="text" | 224 | type="text" |
| 225 | multi-line | 225 | multi-line |
| 226 | required | 226 | required |
| 227 | ></v-textarea> | 227 | ></v-textarea> |
| 228 | </v-flex> | 228 | </v-flex> |
| 229 | </v-layout> | 229 | </v-layout> |
| 230 | <!-- <v-layout> | 230 | <!-- <v-layout> |
| 231 | <v-flex xs4 class="pt-4 subheading"> | 231 | <v-flex xs4 class="pt-4 subheading"> |
| 232 | <label class="right">Monthly:</label> | 232 | <label class="right">Monthly:</label> |
| 233 | </v-flex> | 233 | </v-flex> |
| 234 | <v-flex xs6 class="ml-3"> | 234 | <v-flex xs6 class="ml-3"> |
| 235 | <v-checkbox | 235 | <v-checkbox |
| 236 | v-model="feeTypeData.monthly" | 236 | v-model="feeTypeData.monthly" |
| 237 | :rules="monthlyRules" | 237 | :rules="monthlyRules" |
| 238 | multi-line | 238 | multi-line |
| 239 | required | 239 | required |
| 240 | ></v-checkbox> | 240 | ></v-checkbox> |
| 241 | </v-flex> | 241 | </v-flex> |
| 242 | </v-layout>--> | 242 | </v-layout>--> |
| 243 | <v-layout> | 243 | <v-layout> |
| 244 | <v-flex xs12> | 244 | <v-flex xs12> |
| 245 | <v-card-actions> | 245 | <v-card-actions> |
| 246 | <v-spacer></v-spacer> | 246 | <v-spacer></v-spacer> |
| 247 | <v-btn @click="clear" round dark class="clear-button">clear</v-btn> | 247 | <v-btn @click="clear" round dark class="clear-button">clear</v-btn> |
| 248 | <v-btn @click="submit" round dark :loading="loading" class="add-button">Add</v-btn> | 248 | <v-btn @click="submit" round dark :loading="loading" class="add-button">Add</v-btn> |
| 249 | </v-card-actions> | 249 | </v-card-actions> |
| 250 | </v-flex> | 250 | </v-flex> |
| 251 | </v-layout> | 251 | </v-layout> |
| 252 | </v-form> | 252 | </v-form> |
| 253 | </v-flex> | 253 | </v-flex> |
| 254 | </v-layout> | 254 | </v-layout> |
| 255 | </v-container> | 255 | </v-container> |
| 256 | </v-card> | 256 | </v-card> |
| 257 | </v-dialog> | 257 | </v-dialog> |
| 258 | <div class="loader" v-if="showLoader"> | 258 | <div class="loader" v-if="showLoader"> |
| 259 | <v-progress-circular indeterminate color="white"></v-progress-circular> | 259 | <v-progress-circular indeterminate color="white"></v-progress-circular> |
| 260 | </div> | 260 | </div> |
| 261 | <v-snackbar | 261 | <v-snackbar |
| 262 | :timeout="timeout" | 262 | :timeout="timeout" |
| 263 | :top="y === 'top'" | 263 | :top="y === 'top'" |
| 264 | :right="x === 'right'" | 264 | :right="x === 'right'" |
| 265 | :vertical="mode === 'vertical'" | 265 | :vertical="mode === 'vertical'" |
| 266 | v-model="snackbar" | 266 | v-model="snackbar" |
| 267 | :color="color" | 267 | :color="color" |
| 268 | >{{ text }}</v-snackbar> | 268 | >{{ text }}</v-snackbar> |
| 269 | </v-container> | 269 | </v-container> |
| 270 | </template> | 270 | </template> |
| 271 | 271 | ||
| 272 | <script> | 272 | <script> |
| 273 | import http from "@/Services/http.js"; | 273 | import http from "@/Services/http.js"; |
| 274 | 274 | ||
| 275 | export default { | 275 | export default { |
| 276 | data: () => ({ | 276 | data: () => ({ |
| 277 | snackbar: false, | 277 | snackbar: false, |
| 278 | y: "top", | 278 | y: "top", |
| 279 | x: "right", | 279 | x: "right", |
| 280 | mode: "", | 280 | mode: "", |
| 281 | timeout: 5000, | 281 | timeout: 5000, |
| 282 | text: "", | 282 | text: "", |
| 283 | color: "", | 283 | color: "", |
| 284 | showLoader: false, | 284 | showLoader: false, |
| 285 | loading: false, | 285 | loading: false, |
| 286 | date: null, | 286 | date: null, |
| 287 | search: "", | 287 | search: "", |
| 288 | editFeeTypeDialog: false, | 288 | editFeeTypeDialog: false, |
| 289 | viewFeeTypeDialog: false, | 289 | viewFeeTypeDialog: false, |
| 290 | valid: true, | 290 | valid: true, |
| 291 | show: true, | 291 | show: true, |
| 292 | showSearch: false, | 292 | showSearch: false, |
| 293 | addFeeTypeDialog: false, | 293 | addFeeTypeDialog: false, |
| 294 | validEdit: true, | 294 | validEdit: true, |
| 295 | pagination: { | 295 | pagination: { |
| 296 | rowsPerPage: 10 | 296 | rowsPerPage: 10 |
| 297 | }, | 297 | }, |
| 298 | feetTypeRules: [v => !!v || " Fee Type Name is required"], | 298 | feetTypeRules: [v => !!v || " Fee Type Name is required"], |
| 299 | monthlyRules: [v => !!v || " Select Monthly"], | 299 | monthlyRules: [v => !!v || " Select Monthly"], |
| 300 | noteRules: [v => !!v || " Note is required"], | 300 | noteRules: [v => !!v || " Note is required"], |
| 301 | headers: [ | 301 | headers: [ |
| 302 | { | 302 | { |
| 303 | text: "No", | 303 | text: "No", |
| 304 | align: "", | 304 | align: "", |
| 305 | sortable: false, | 305 | sortable: false, |
| 306 | value: "No" | 306 | value: "No" |
| 307 | }, | 307 | }, |
| 308 | { | 308 | { |
| 309 | text: "fee Type", | 309 | text: "fee Type", |
| 310 | value: "feeType", | 310 | value: "feeType", |
| 311 | sortable: false, | 311 | sortable: false, |
| 312 | align: "center" | 312 | align: "center" |
| 313 | }, | 313 | }, |
| 314 | { text: "Note", value: "note", sortable: false, align: "center" }, | 314 | { text: "Note", value: "note", sortable: false, align: "center" }, |
| 315 | // { text: "Session", value: "session", sortable: false, align: "center" }, | 315 | // { text: "Session", value: "session", sortable: false, align: "center" }, |
| 316 | { text: "Action", value: "", sortable: false, align: "center" } | 316 | { text: "Action", value: "", sortable: false, align: "center" } |
| 317 | ], | 317 | ], |
| 318 | feeTypeList: [], | 318 | feeTypeList: [], |
| 319 | select: "", | 319 | select: "", |
| 320 | token: "", | 320 | token: "", |
| 321 | editedItem: {}, | 321 | editedItem: {}, |
| 322 | feeTypeData: {} | 322 | feeTypeData: {} |
| 323 | }), | 323 | }), |
| 324 | methods: { | 324 | methods: { |
| 325 | getFeeTypeList() { | 325 | getFeeTypeList() { |
| 326 | this.showLoader = true; | 326 | this.showLoader = true; |
| 327 | http() | 327 | http() |
| 328 | .get("/getFeesList", { | 328 | .get("/getFeesList", { |
| 329 | params: { schoolId: this.$store.state.schoolId }, | 329 | params: { schoolId: this.$store.state.schoolId }, |
| 330 | headers: { Authorization: "Bearer " + this.token } | 330 | headers: { Authorization: "Bearer " + this.token } |
| 331 | }) | 331 | }) |
| 332 | .then(response => { | 332 | .then(response => { |
| 333 | this.feeTypeList = response.data.data; | 333 | this.feeTypeList = response.data.data; |
| 334 | this.showLoader = false; | 334 | this.showLoader = false; |
| 335 | }) | 335 | }) |
| 336 | .catch(error => { | 336 | .catch(error => { |
| 337 | this.showLoader = false; | 337 | this.showLoader = false; |
| 338 | if (error.response.status === 401) { | 338 | if (error.response.status === 401) { |
| 339 | this.$router.replace({ path: "/" }); | 339 | this.$router.replace({ path: "/" }); |
| 340 | this.$store.dispatch("setToken", null); | 340 | this.$store.dispatch("setToken", null); |
| 341 | this.$store.dispatch("Id", null); | 341 | this.$store.dispatch("Id", null); |
| 342 | this.$store.dispatch("Role", null); | 342 | this.$store.dispatch("Role", null); |
| 343 | } | 343 | } |
| 344 | }); | 344 | }); |
| 345 | }, | 345 | }, |
| 346 | editItem(item) { | 346 | editItem(item) { |
| 347 | this.editedIndex = this.feeTypeList.indexOf(item); | 347 | this.editedIndex = this.feeTypeList.indexOf(item); |
| 348 | this.editedItem = Object.assign({}, item); | 348 | this.editedItem = Object.assign({}, item); |
| 349 | this.editFeeTypeDialog = true; | 349 | this.editFeeTypeDialog = true; |
| 350 | }, | 350 | }, |
| 351 | profile(item) { | 351 | profile(item) { |
| 352 | this.editedIndex = this.feeTypeList.indexOf(item); | 352 | this.editedIndex = this.feeTypeList.indexOf(item); |
| 353 | this.editedItem = Object.assign({}, item); | 353 | this.editedItem = Object.assign({}, item); |
| 354 | this.viewFeeTypeDialog = true; | 354 | this.viewFeeTypeDialog = true; |
| 355 | }, | 355 | }, |
| 356 | deleteItem(item) { | 356 | deleteItem(item) { |
| 357 | let deleteFeeType = { | 357 | let deleteFeeType = { |
| 358 | feeId: item._id | 358 | feeId: item._id |
| 359 | }; | 359 | }; |
| 360 | http() | 360 | http() |
| 361 | .delete( | 361 | .delete( |
| 362 | "/deleteFee", | 362 | "/deleteFee", |
| 363 | confirm("Are you sure you want to delete this?") && { | 363 | confirm("Are you sure you want to delete this?") && { |
| 364 | params: deleteFeeType | 364 | params: deleteFeeType |
| 365 | } | 365 | } |
| 366 | ) | 366 | ) |
| 367 | .then(response => { | 367 | .then(response => { |
| 368 | this.snackbar = true; | 368 | this.snackbar = true; |
| 369 | this.text = response.data.message; | 369 | this.text = response.data.message; |
| 370 | this.color = "green"; | 370 | this.color = "green"; |
| 371 | this.getFeeTypeList(); | 371 | this.getFeeTypeList(); |
| 372 | }) | 372 | }) |
| 373 | .catch(error => { | 373 | .catch(error => { |
| 374 | this.snackbar = true; | 374 | this.snackbar = true; |
| 375 | this.color = "error"; | 375 | this.color = "error"; |
| 376 | this.text = error.response.data.message; | 376 | this.text = error.response.data.message; |
| 377 | }); | 377 | }); |
| 378 | }, | 378 | }, |
| 379 | close() { | 379 | close() { |
| 380 | this.dialog = false; | 380 | this.dialog = false; |
| 381 | }, | 381 | }, |
| 382 | close1() { | 382 | close1() { |
| 383 | this.dialog1 = false; | 383 | this.dialog1 = false; |
| 384 | }, | 384 | }, |
| 385 | close2() { | 385 | close2() { |
| 386 | this.dialog2 = false; | 386 | this.dialog2 = false; |
| 387 | }, | 387 | }, |
| 388 | submit() { | 388 | submit() { |
| 389 | if (this.$refs.form.validate()) { | 389 | if (this.$refs.form.validate()) { |
| 390 | this.loading = true; | 390 | this.loading = true; |
| 391 | this.schoolId = this.$store.state.schoolId; | 391 | this.schoolId = this.$store.state.schoolId; |
| 392 | http() | 392 | http() |
| 393 | .post("/createFee", this.feeTypeData) | 393 | .post("/createFee", this.feeTypeData) |
| 394 | .then(response => { | 394 | .then(response => { |
| 395 | this.getFeeTypeList(); | 395 | this.getFeeTypeList(); |
| 396 | this.snackbar = true; | 396 | this.snackbar = true; |
| 397 | this.text = response.data.message; | 397 | this.text = response.data.message; |
| 398 | this.color = "green"; | 398 | this.color = "green"; |
| 399 | this.clear(); | 399 | this.clear(); |
| 400 | this.addFeeTypeDialog = false; | 400 | this.addFeeTypeDialog = false; |
| 401 | this.loading = false; | 401 | this.loading = false; |
| 402 | }) | 402 | }) |
| 403 | .catch(error => { | 403 | .catch(error => { |
| 404 | // console.log(error); | 404 | // console.log(error); |
| 405 | this.snackbar = true; | 405 | this.snackbar = true; |
| 406 | this.color = "error"; | 406 | this.color = "error"; |
| 407 | this.text = error.response.data.message; | 407 | this.text = error.response.data.message; |
| 408 | this.loading = false; | 408 | this.loading = false; |
| 409 | }); | 409 | }); |
| 410 | } | 410 | } |
| 411 | }, | 411 | }, |
| 412 | clear() { | 412 | clear() { |
| 413 | this.$refs.form.reset(); | 413 | this.$refs.form.reset(); |
| 414 | }, | 414 | }, |
| 415 | save() { | 415 | save() { |
| 416 | this.editedItem.feeId = this.editedItem._id; | 416 | this.editedItem.feeId = this.editedItem._id; |
| 417 | http() | 417 | http() |
| 418 | .put("/updateFee", this.editedItem) | 418 | .put("/updateFee", this.editedItem) |
| 419 | .then(response => { | 419 | .then(response => { |
| 420 | this.snackbar = true; | 420 | this.snackbar = true; |
| 421 | this.text = response.data.message; | 421 | this.text = response.data.message; |
| 422 | this.color = "green"; | 422 | this.color = "green"; |
| 423 | this.getFeeTypeList(); | 423 | this.getFeeTypeList(); |
| 424 | this.close(); | 424 | this.close(); |
| 425 | }) | 425 | }) |
| 426 | .catch(error => { | 426 | .catch(error => { |
| 427 | this.snackbar = true; | 427 | this.snackbar = true; |
| 428 | this.color = "error"; | 428 | this.color = "error"; |
| 429 | this.text = error.response.data.message; | 429 | this.text = error.response.data.message; |
| 430 | }); | 430 | }); |
| 431 | }, | 431 | }, |
| 432 | displaySearch() { | 432 | displaySearch() { |
| 433 | (this.show = false), (this.showSearch = true); | 433 | (this.show = false), (this.showSearch = true); |
| 434 | }, | 434 | }, |
| 435 | closeSearch() { | 435 | closeSearch() { |
| 436 | this.showSearch = false; | 436 | this.showSearch = false; |
| 437 | this.show = true; | 437 | this.show = true; |
| 438 | this.search = ""; | 438 | this.search = ""; |
| 439 | } | 439 | } |
| 440 | }, | 440 | }, |
| 441 | mounted() { | 441 | mounted() { |
| 442 | this.token = this.$store.state.token; | 442 | this.token = this.$store.state.token; |
| 443 | this.getFeeTypeList(); | 443 | this.getFeeTypeList(); |
| 444 | } | 444 | } |
| 445 | }; | 445 | }; |
| 446 | </script> | 446 | </script> |
src/pages/Account/globalPayment.vue
| 1 | <template> | 1 | <template> |
| 2 | <v-container fluid class="body-color"> | 2 | <v-container fluid class="body-color"> |
| 3 | <!-- ****** EXISTING GLOBAL PAYMENT TABLE ****** --> | 3 | <!-- ****** EXISTING GLOBAL PAYMENT TABLE ****** --> |
| 4 | <v-form ref="form" v-model="valid" lazy-validation> | 4 | <v-form ref="form" v-model="valid" lazy-validation> |
| 5 | <v-container fluid> | 5 | <v-container fluid> |
| 6 | <v-flex xs12 sm12 lg12> | 6 | <v-flex xs12 sm12 lg12> |
| 7 | <v-layout wrap> | 7 | <v-layout wrap> |
| 8 | <v-flex xs12 sm12 lg10> | 8 | <v-flex xs12 sm12 lg10> |
| 9 | <v-layout wrap> | 9 | <v-layout wrap> |
| 10 | <v-flex xs12 sm12 lg4> | 10 | <v-flex xs12 sm12 lg4> |
| 11 | <v-flex xs12 sm4 lg4 class="subheading"> | 11 | <v-flex xs12 sm4 lg4 class="subheading"> |
| 12 | <label class="mt-4">Class:</label> | 12 | <label class="mt-4">Class:</label> |
| 13 | </v-flex> | 13 | </v-flex> |
| 14 | <v-flex xs12 sm12 lg10> | 14 | <v-flex xs12 sm12 lg10> |
| 15 | <v-select | 15 | <v-select |
| 16 | :items="addclass" | 16 | :items="addclass" |
| 17 | label="Select Class" | 17 | label="Select Class" |
| 18 | v-model="selectStudents.selectClassId" | 18 | v-model="selectStudents.selectClassId" |
| 19 | item-text="classNum" | 19 | item-text="classNum" |
| 20 | item-value="_id" | 20 | item-value="_id" |
| 21 | name="Select Class" | 21 | name="Select Class" |
| 22 | :rules="classRules" | 22 | :rules="classRules" |
| 23 | @change="getSection()" | 23 | @change="getSection()" |
| 24 | required | 24 | required |
| 25 | ></v-select> | 25 | ></v-select> |
| 26 | </v-flex> | 26 | </v-flex> |
| 27 | </v-flex> | 27 | </v-flex> |
| 28 | <v-flex xs12 sm12 lg4> | 28 | <v-flex xs12 sm12 lg4> |
| 29 | <v-flex xs12 sm4 lg4 class="subheading"> | 29 | <v-flex xs12 sm4 lg4 class="subheading"> |
| 30 | <label class="mt-4">Section:</label> | 30 | <label class="mt-4">Section:</label> |
| 31 | </v-flex> | 31 | </v-flex> |
| 32 | <v-flex xs12 sm12 lg10 class> | 32 | <v-flex xs12 sm12 lg10 class> |
| 33 | <v-select | 33 | <v-select |
| 34 | :items="addSection" | 34 | :items="addSection" |
| 35 | label="Select Section" | 35 | label="Select Section" |
| 36 | v-model="selectStudents.selectSection" | 36 | v-model="selectStudents.selectSection" |
| 37 | item-text="name" | 37 | item-text="name" |
| 38 | item-value="_id" | 38 | item-value="_id" |
| 39 | name="Select Section" | 39 | name="Select Section" |
| 40 | :rules="sectionRules" | 40 | :rules="sectionRules" |
| 41 | @change="getStudents()" | 41 | @change="getStudents()" |
| 42 | required | 42 | required |
| 43 | ></v-select> | 43 | ></v-select> |
| 44 | </v-flex> | 44 | </v-flex> |
| 45 | </v-flex> | 45 | </v-flex> |
| 46 | <v-flex xs12 sm12 lg4> | 46 | <v-flex xs12 sm12 lg4> |
| 47 | <v-flex xs12 sm4 lg4 class="subheading"> | 47 | <v-flex xs12 sm4 lg4 class="subheading"> |
| 48 | <label class="mt-4">Student:</label> | 48 | <label class="mt-4">Student:</label> |
| 49 | </v-flex> | 49 | </v-flex> |
| 50 | <v-flex xs12 sm12 lg10 class> | 50 | <v-flex xs12 sm12 lg10 class> |
| 51 | <v-select | 51 | <v-select |
| 52 | :items="studentData" | 52 | :items="studentData" |
| 53 | label="Select Student" | 53 | label="Select Student" |
| 54 | v-model="selectStudents.selectId" | 54 | v-model="selectStudents.selectId" |
| 55 | item-text="name" | 55 | item-text="name" |
| 56 | item-value="_id" | 56 | item-value="_id" |
| 57 | :rules="studentRules" | 57 | :rules="studentRules" |
| 58 | required | 58 | required |
| 59 | ></v-select> | 59 | ></v-select> |
| 60 | </v-flex> | 60 | </v-flex> |
| 61 | </v-flex> | 61 | </v-flex> |
| 62 | </v-layout> | 62 | </v-layout> |
| 63 | </v-flex> | 63 | </v-flex> |
| 64 | <v-flex xs12 sm12 lg2> | 64 | <v-flex xs12 sm12 lg2> |
| 65 | <v-flex xs12 sm12 lg12> | 65 | <v-flex xs12 sm12 lg12> |
| 66 | <v-btn | 66 | <v-btn |
| 67 | @click="getInvoicesData()" | 67 | @click="getInvoicesData()" |
| 68 | round | 68 | round |
| 69 | dark | 69 | dark |
| 70 | :loading="loading" | 70 | :loading="loading" |
| 71 | class="right mt-4 open-dialog-button" | 71 | class="right mt-4 open-dialog-button" |
| 72 | >Search</v-btn> | 72 | >Search</v-btn> |
| 73 | </v-flex> | 73 | </v-flex> |
| 74 | </v-flex> | 74 | </v-flex> |
| 75 | </v-layout> | 75 | </v-layout> |
| 76 | </v-flex> | 76 | </v-flex> |
| 77 | </v-container> | 77 | </v-container> |
| 78 | </v-form> | 78 | </v-form> |
| 79 | <v-container fluid grid-list-md> | 79 | <v-container fluid grid-list-md> |
| 80 | <v-flex xs12> | 80 | <v-flex xs12> |
| 81 | <v-layout wrap> | 81 | <v-layout wrap> |
| 82 | <v-flex xs12 sm12 md4> | 82 | <v-flex xs12 sm12 md4> |
| 83 | <v-card | 83 | <v-card |
| 84 | flat | 84 | flat |
| 85 | class="pa-3" | 85 | class="pa-3" |
| 86 | v-for="(invoiceData,i) in studentInvoiceData" | 86 | v-for="(invoiceData,i) in studentInvoiceData" |
| 87 | :key="i" | 87 | :key="i" |
| 88 | v-if="i === 0" | 88 | v-if="i === 0" |
| 89 | > | 89 | > |
| 90 | <v-layout> | 90 | <v-layout> |
| 91 | <v-flex xs12> | 91 | <v-flex xs12> |
| 92 | <v-avatar | 92 | <v-avatar |
| 93 | size="80px" | 93 | size="80px" |
| 94 | style="margin: auto;display:block;margin-bottom:10px !important" | 94 | style="margin: auto;display:block;margin-bottom:10px !important" |
| 95 | > | 95 | > |
| 96 | <img src="/static/icon/user.png" v-if="!invoiceData.studentId.profilePicUrl" /> | 96 | <img src="/static/icon/user.png" v-if="!invoiceData.studentId.profilePicUrl" /> |
| 97 | <img | 97 | <img |
| 98 | :src="invoiceData.studentId.profilePicUrl" | 98 | :src="invoiceData.studentId.profilePicUrl" |
| 99 | v-else-if="invoiceData.studentId.profilePicUrl" | 99 | v-else-if="invoiceData.studentId.profilePicUrl" |
| 100 | /> | 100 | /> |
| 101 | </v-avatar> | 101 | </v-avatar> |
| 102 | </v-flex> | 102 | </v-flex> |
| 103 | </v-layout> | 103 | </v-layout> |
| 104 | <v-layout class="studentProfile"> | 104 | <v-layout class="studentProfile"> |
| 105 | <v-flex xs4 sm3 md3> | 105 | <v-flex xs4 sm3 md3> |
| 106 | <h4> | 106 | <h4> |
| 107 | <b>Name</b> | 107 | <b>Name</b> |
| 108 | </h4> | 108 | </h4> |
| 109 | </v-flex> | 109 | </v-flex> |
| 110 | <v-flex sm9 xs8 md9> | 110 | <v-flex sm9 xs8 md9> |
| 111 | <h4>: {{ invoiceData.studentId.name }}</h4> | 111 | <h4>: {{ invoiceData.studentId.name }}</h4> |
| 112 | </v-flex> | 112 | </v-flex> |
| 113 | </v-layout> | 113 | </v-layout> |
| 114 | <v-layout class="studentProfile"> | 114 | <v-layout class="studentProfile"> |
| 115 | <v-flex xs4 sm3 md3> | 115 | <v-flex xs4 sm3 md3> |
| 116 | <h4> | 116 | <h4> |
| 117 | <b>Class</b> | 117 | <b>Class</b> |
| 118 | </h4> | 118 | </h4> |
| 119 | </v-flex> | 119 | </v-flex> |
| 120 | <v-flex sm9 xs8 md9> | 120 | <v-flex sm9 xs8 md9> |
| 121 | <h4>: {{ invoiceData.classId.classNum }}</h4> | 121 | <h4>: {{ invoiceData.classId.classNum }}</h4> |
| 122 | </v-flex> | 122 | </v-flex> |
| 123 | </v-layout> | 123 | </v-layout> |
| 124 | <v-layout class="studentProfile"> | 124 | <v-layout class="studentProfile"> |
| 125 | <v-flex xs4 sm3 md3> | 125 | <v-flex xs4 sm3 md3> |
| 126 | <h4> | 126 | <h4> |
| 127 | <b>Roll No</b> | 127 | <b>Roll No</b> |
| 128 | </h4> | 128 | </h4> |
| 129 | </v-flex> | 129 | </v-flex> |
| 130 | <v-flex sm9 xs8 md9> | 130 | <v-flex sm9 xs8 md9> |
| 131 | <h4>: {{ invoiceData.studentId.rollNo }}</h4> | 131 | <h4>: {{ invoiceData.studentId.rollNo }}</h4> |
| 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-flex xs12 sm12 md8 v-show="showInvoiceTable"> | 136 | <v-flex xs12 sm12 md8 v-show="showInvoiceTable"> |
| 137 | <v-card> | 137 | <v-card> |
| 138 | <v-data-table | 138 | <v-data-table |
| 139 | :headers="headers" | 139 | :headers="headers" |
| 140 | :items="studentInvoiceData" | 140 | :items="studentInvoiceData" |
| 141 | :search="search" | 141 | :search="search" |
| 142 | hide-actions | 142 | hide-actions |
| 143 | > | 143 | > |
| 144 | <template slot="items" slot-scope="props"> | 144 | <template slot="items" slot-scope="props"> |
| 145 | <td id="td" class="text-xs-center">{{ props.item.invoiceNumber }}</td> | 145 | <td id="td" class="text-xs-center">{{ props.item.invoiceNumber }}</td> |
| 146 | <td id="td" class="text-xs-center">{{ props.item.totalAmount }}</td> | 146 | <td id="td" class="text-xs-center">{{ props.item.totalAmount }}</td> |
| 147 | <td id="td" class="text-xs-center">{{ props.item.totalDiscount }}</td> | 147 | <td id="td" class="text-xs-center">{{ props.item.totalDiscount }}</td> |
| 148 | <td id="td" class="text-xs-center">{{ props.item.totalSubTotal }}</td> | 148 | <td id="td" class="text-xs-center">{{ props.item.totalSubTotal }}</td> |
| 149 | <td id="td" class="text-xs-center">{{ props.item.paymentStatus}}</td> | 149 | <td id="td" class="text-xs-center">{{ props.item.paymentStatus}}</td> |
| 150 | <td id="td" class="text-xs-center">{{ dates(props.item.date) }}</td> | 150 | <td id="td" class="text-xs-center">{{ dates(props.item.date) }}</td> |
| 151 | <td class="text-xs-center"> | 151 | <td class="text-xs-center"> |
| 152 | <router-link | 152 | <router-link |
| 153 | :to="{ name:'ViewInvoice',params: { viewInvoiceId:props.item._id } }" | 153 | :to="{ name:'View Invoice',params: { viewInvoiceId:props.item._id } }" |
| 154 | > | 154 | > |
| 155 | <v-tooltip top> | 155 | <v-tooltip top> |
| 156 | <img | 156 | <img |
| 157 | slot="activator" | 157 | slot="activator" |
| 158 | style="cursor:pointer; width:25px; height:18px; " | 158 | style="cursor:pointer; width:25px; height:18px; " |
| 159 | @click="profile(props.item)" | 159 | @click="profile(props.item)" |
| 160 | src="/static/icon/eye1.png" | 160 | src="/static/icon/eye1.png" |
| 161 | /> | 161 | /> |
| 162 | <span>View</span> | 162 | <span>View</span> |
| 163 | </v-tooltip> | 163 | </v-tooltip> |
| 164 | </router-link> | 164 | </router-link> |
| 165 | </td> | 165 | </td> |
| 166 | </template> | 166 | </template> |
| 167 | <v-alert | 167 | <v-alert |
| 168 | slot="no-results" | 168 | slot="no-results" |
| 169 | :value="true" | 169 | :value="true" |
| 170 | color="error" | 170 | color="error" |
| 171 | icon="warning" | 171 | icon="warning" |
| 172 | >Your search for "{{ search }}" found no results.</v-alert> | 172 | >Your search for "{{ search }}" found no results.</v-alert> |
| 173 | </v-data-table> | 173 | </v-data-table> |
| 174 | </v-card> | 174 | </v-card> |
| 175 | </v-flex> | 175 | </v-flex> |
| 176 | </v-layout> | 176 | </v-layout> |
| 177 | </v-flex> | 177 | </v-flex> |
| 178 | <!--   --> | ||
| 179 | <v-flex xs12> | ||
| 180 | <v-layout wrap> | ||
| 181 | <v-flex xs12 sm12 md8 v-show="showInvoiceTable"> | ||
| 182 | <v-card> | ||
| 183 | <v-data-table | ||
| 184 | :headers="header" | ||
| 185 | :items="studentInvoiceData" | ||
| 186 | :search="search" | ||
| 187 | hide-actions | ||
| 188 | > | ||
| 189 | <template slot="items" slot-scope="props" > | ||
| 190 | <!-- <span v-for="feetype in props.item.feeType"> --> | ||
| 191 | <!-- <td style="width:40px">{{ index + 1 }}</td> --> | ||
| 192 | <td id="td" class="text-xs-center" v-for="feetype in props.item.feeType">{{ feetype.feeTypeName}}</td> | ||
| 193 | <td id="td" class="text-xs-center" v-for="feetype in props.item.feeType">{{ feetype.amount }}</td> | ||
| 194 | <td id="td" class="text-xs-center" v-for="feetype in props.item.feeType">{{ props.item.totalSubTotal - props.item.totalPaidAmount }}</td> | ||
| 195 | <td id="td" class="text-xs-center" v-for="feetype in props.item.feeType">{{ feetype.paidAmount }}</td> | ||
| 196 | <!-- </span> --> | ||
| 197 | </template> | ||
| 198 | <v-alert | ||
| 199 | slot="no-results" | ||
| 200 | :value="true" | ||
| 201 | color="error" | ||
| 202 | icon="warning" | ||
| 203 | >Your search for "{{ search }}" found no results.</v-alert> | ||
| 204 | </v-data-table> | ||
| 205 | </v-card> | ||
| 206 | </v-flex> | ||
| 207 | </v-layout> | ||
| 208 | </v-flex> | ||
| 178 | </v-container> | 209 | </v-container> |
| 179 | <div class="loader" v-if="showLoader"> | 210 | <div class="loader" v-if="showLoader"> |
| 180 | <v-progress-circular indeterminate color="white"></v-progress-circular> | 211 | <v-progress-circular indeterminate color="white"></v-progress-circular> |
| 181 | </div> | 212 | </div> |
| 182 | </v-container> | 213 | </v-container> |
| 183 | </template> | 214 | </template> |
| 184 | 215 | ||
| 185 | <script> | 216 | <script> |
| 186 | import http from "@/Services/http.js"; | 217 | import http from "@/Services/http.js"; |
| 187 | import moment from "moment"; | 218 | import moment from "moment"; |
| 188 | 219 | ||
| 189 | export default { | 220 | export default { |
| 190 | data: () => ({ | 221 | data: () => ({ |
| 191 | snackbar: false, | 222 | snackbar: false, |
| 192 | showInvoiceTable: false, | 223 | showInvoiceTable: false, |
| 193 | y: "top", | 224 | y: "top", |
| 194 | x: "right", | 225 | x: "right", |
| 195 | mode: "", | 226 | mode: "", |
| 196 | timeout: 3000, | 227 | timeout: 3000, |
| 197 | text: "", | 228 | text: "", |
| 198 | showLoader: false, | 229 | showLoader: false, |
| 199 | loading: false, | 230 | loading: false, |
| 200 | search: "", | 231 | search: "", |
| 201 | valid: true, | 232 | valid: true, |
| 202 | addclass: [], | 233 | addclass: [], |
| 234 | // index: '', | ||
| 235 | feeType: { | ||
| 236 | amount: "", | ||
| 237 | discount: "", | ||
| 238 | totalPaidAmount: "", | ||
| 239 | subTotal: "", | ||
| 240 | feeTypeName: "", | ||
| 241 | userData: {} | ||
| 242 | }, | ||
| 243 | feeTypeData: [], | ||
| 203 | selectStudents: {}, | 244 | selectStudents: {}, |
| 204 | addSection: [], | 245 | addSection: [], |
| 205 | classRules: [v => !!v || " Class Name is required"], | 246 | classRules: [v => !!v || " Class Name is required"], |
| 206 | sectionRules: [v => !!v || " Section Name is required"], | 247 | sectionRules: [v => !!v || " Section Name is required"], |
| 207 | studentRules: [v => !!v || "Student Name is required"], | 248 | studentRules: [v => !!v || "Student Name is required"], |
| 208 | headers: [ | 249 | headers: [ |
| 209 | { | 250 | { |
| 210 | text: "Invoice Number", | 251 | text: "Invoice Number", |
| 211 | align: "center", | 252 | align: "center", |
| 212 | sortable: false, | 253 | sortable: false, |
| 213 | value: "invoiceNumber" | 254 | value: "invoiceNumber" |
| 214 | }, | 255 | }, |
| 215 | { | 256 | { |
| 216 | text: "Total Pay", | 257 | text: "Total Pay", |
| 217 | value: "totalAmount", | 258 | value: "totalAmount", |
| 218 | sortable: false, | 259 | sortable: false, |
| 219 | align: "center" | 260 | align: "center" |
| 220 | }, | 261 | }, |
| 221 | { | 262 | { |
| 222 | text: "Weaver", | 263 | text: "Weaver", |
| 223 | value: "totalDiscount", | 264 | value: "totalDiscount", |
| 224 | sortable: false, | 265 | sortable: false, |
| 225 | align: "center" | 266 | align: "center" |
| 226 | }, | 267 | }, |
| 227 | { | 268 | { |
| 228 | text: " Total Collection", | 269 | text: " Total Collection", |
| 229 | value: "totalSubTotal", | 270 | value: "totalSubTotal", |
| 230 | sortable: false, | 271 | sortable: false, |
| 231 | align: "center" | 272 | align: "center" |
| 232 | }, | 273 | }, |
| 233 | { | 274 | { |
| 234 | text: "Clearance", | 275 | text: "Clearance", |
| 235 | value: "paymentStatus", | 276 | value: "paymentStatus", |
| 236 | sortable: false, | 277 | sortable: false, |
| 237 | align: "center" | 278 | align: "center" |
| 238 | }, | 279 | }, |
| 239 | { text: "Payment Date", value: "date", sortable: false, align: "center" }, | 280 | { text: "Payment Date", value: "date", sortable: false, align: "center" }, |
| 240 | { text: "Action", value: "", sortable: false, align: "center" } | 281 | { text: "Action", value: "", sortable: false, align: "center" } |
| 241 | ], | 282 | ], |
| 283 | |||
| 284 | header: [ | ||
| 285 | // { | ||
| 286 | // text: "#", | ||
| 287 | // align: "center", | ||
| 288 | // sortable: false | ||
| 289 | // }, | ||
| 290 | { | ||
| 291 | text: "Fees Name", | ||
| 292 | align: "center", | ||
| 293 | sortable: false, | ||
| 294 | value: "feeTypeName" | ||
| 295 | }, | ||
| 296 | { | ||
| 297 | text: "Fees Amount", | ||
| 298 | align: "center", | ||
| 299 | sortable: false, | ||
| 300 | value: "amount" | ||
| 301 | }, | ||
| 302 | { | ||
| 303 | text: "Due", | ||
| 304 | align: "center", | ||
| 305 | sortable: false | ||
| 306 | }, | ||
| 307 | { | ||
| 308 | text: "Paid Amount", | ||
| 309 | align: "center", | ||
| 310 | sortable: false, | ||
| 311 | value: "paidAmount" | ||
| 312 | } | ||
| 313 | ], | ||
| 242 | studentData: [], | 314 | studentData: [], |
| 243 | studentInvoiceData: [] | 315 | studentInvoiceData: [] |
| 244 | }), | 316 | }), |
| 245 | methods: { | 317 | methods: { |
| 246 | dates: function(date) { | 318 | dates: function(date) { |
| 247 | return moment(date).format("MMMM DD, YYYY"); | 319 | return moment(date).format("MMMM DD, YYYY"); |
| 248 | }, | 320 | }, |
| 249 | getSection() { | 321 | getSection() { |
| 250 | var token = this.$store.state.token; | 322 | var token = this.$store.state.token; |
| 251 | this.showLoader = true; | 323 | this.showLoader = true; |
| 252 | http() | 324 | http() |
| 253 | .get( | 325 | .get( |
| 254 | "/getSectionsList", | 326 | "/getSectionsList", |
| 255 | { | 327 | { |
| 256 | params: { | 328 | params: { |
| 257 | classId: this.selectStudents.selectClassId, | 329 | classId: this.selectStudents.selectClassId, |
| 258 | schoolId: this.$store.state.schoolId | 330 | schoolId: this.$store.state.schoolId |
| 259 | } | 331 | } |
| 260 | }, | 332 | }, |
| 261 | { | 333 | { |
| 262 | headers: { Authorization: "Bearer " + token } | 334 | headers: { Authorization: "Bearer " + token } |
| 263 | } | 335 | } |
| 264 | ) | 336 | ) |
| 265 | .then(response => { | 337 | .then(response => { |
| 266 | this.addSection = response.data.data; | 338 | this.addSection = response.data.data; |
| 267 | this.showLoader = false; | 339 | this.showLoader = false; |
| 268 | // console.log("getSectionsList=====>", this.addSection); | 340 | // console.log("getSectionsList=====>", this.addSection); |
| 269 | }) | 341 | }) |
| 270 | .catch(error => { | 342 | .catch(error => { |
| 271 | this.showLoader = false; | 343 | this.showLoader = false; |
| 272 | // console.log("err====>", err); | 344 | // console.log("err====>", err); |
| 273 | // this.$router.replace({ path: '/' }); | 345 | // this.$router.replace({ path: '/' }); |
| 274 | }); | 346 | }); |
| 275 | }, | 347 | }, |
| 276 | getStudents() { | 348 | getStudents() { |
| 277 | this.showLoader = true; | 349 | this.showLoader = true; |
| 278 | http() | 350 | http() |
| 279 | .get("/getStudentWithClass", { | 351 | .get("/getStudentWithClass", { |
| 280 | params: { | 352 | params: { |
| 281 | classId: this.selectStudents.selectClassId, | 353 | classId: this.selectStudents.selectClassId, |
| 282 | sectionId: this.selectStudents.selectSection, | 354 | sectionId: this.selectStudents.selectSection, |
| 283 | schoolId: this.$store.state.schoolId | 355 | schoolId: this.$store.state.schoolId |
| 284 | } | 356 | } |
| 285 | }) | 357 | }) |
| 286 | .then(response => { | 358 | .then(response => { |
| 287 | this.studentData = response.data.data; | 359 | this.studentData = response.data.data; |
| 288 | this.showLoader = false; | 360 | this.showLoader = false; |
| 289 | }) | 361 | }) |
| 290 | .catch(err => { | 362 | .catch(err => { |
| 291 | console.log("err====>", err); | 363 | console.log("err====>", err); |
| 292 | this.showLoader = false; | 364 | this.showLoader = false; |
| 293 | }); | 365 | }); |
| 294 | }, | 366 | }, |
| 295 | getInvoicesData() { | 367 | getInvoicesData() { |
| 296 | this.showLoader = true; | 368 | this.showLoader = true; |
| 297 | this.showInvoiceTable = true; | 369 | this.showInvoiceTable = true; |
| 298 | http() | 370 | http() |
| 299 | .get("/getInvoicesList", { | 371 | .get("/getInvoicesList", { |
| 300 | params: { | 372 | params: { |
| 301 | classId: this.selectStudents.selectClassId, | 373 | classId: this.selectStudents.selectClassId, |
| 302 | studentId: this.selectStudents.selectId, | 374 | studentId: this.selectStudents.selectId, |
| 303 | schoolId: this.$store.state.schoolId | 375 | schoolId: this.$store.state.schoolId |
| 304 | } | 376 | } |
| 305 | }) | 377 | }) |
| 306 | .then(response => { | 378 | .then(response => { |
| 307 | this.studentInvoiceData = response.data.data; | 379 | this.studentInvoiceData = response.data.data; |
| 308 | // console.log("this.studentInvoiceData", this.studentInvoiceData); | 380 | console.log("this.studentInvoiceData", this.studentInvoiceData); |
| 309 | this.showLoader = false; | 381 | this.showLoader = false; |
| 310 | }) | 382 | }) |
| 311 | .catch(err => { | 383 | .catch(err => { |
| 312 | console.log("err====>", err); | 384 | console.log("err====>", err); |
| 313 | this.showLoader = false; | 385 | this.showLoader = false; |
| 314 | }); | 386 | }); |
| 387 | }, | ||
| 388 | getAmmountDetails(feeTyp) { | ||
| 389 | let feeType = { | ||
| 390 | subTotal: "", | ||
| 391 | subParticularTotal: "", | ||
| 392 | paidAmount: "" | ||
| 393 | }; | ||
| 394 | // *********** SUBTOTAL *********** | ||
| 395 | feeType.subTotal = | ||
| 396 | Number(feeType.subTotal) + Number(this.feeTypeData[i].subTotal); | ||
| 397 | this.feeType.subTotal = feeType.subTotal.toFixed(2); | ||
| 398 | // *********** PAID-AMOUNT *********** | ||
| 399 | feeType.paidAmount = | ||
| 400 | Number(feeType.paidAmount) + Number(this.feeTypeData[i].paidAmount); | ||
| 401 | this.feeType.paidAmount = feeType.paidAmount.toFixed(2); | ||
| 315 | } | 402 | } |
| 316 | }, | 403 | }, |
| 317 | mounted() { | 404 | mounted() { |
| 318 | var token = this.$store.state.token; | 405 | var token = this.$store.state.token; |
| 319 | http() | 406 | http() |
| 320 | .get("/getClassesList", { | 407 | .get("/getClassesList", { |
| 321 | params: { | 408 | params: { |
| 322 | schoolId: this.$store.state.schoolId | 409 | schoolId: this.$store.state.schoolId |
| 323 | }, | 410 | }, |
| 324 | headers: { Authorization: "Bearer " + token } | 411 | headers: { Authorization: "Bearer " + token } |
| 325 | }) | 412 | }) |
| 326 | .then(response => { | 413 | .then(response => { |
| 327 | this.addclass = response.data.data; | 414 | this.addclass = response.data.data; |
| 328 | }) | 415 | }) |
| 329 | .catch(error => { | 416 | .catch(error => { |
| 330 | this.showLoader = false; | 417 | this.showLoader = false; |
| 331 | if (error.response.status === 401) { | 418 | if (error.response.status === 401) { |
| 332 | this.$router.replace({ path: "/" }); | 419 | this.$router.replace({ path: "/" }); |
| 333 | this.$store.dispatch("setToken", null); | 420 | this.$store.dispatch("setToken", null); |
| 334 | this.$store.dispatch("Id", null); | 421 | this.$store.dispatch("Id", null); |
| 335 | this.$store.dispatch("Role", null); | 422 | this.$store.dispatch("Role", null); |
| 336 | } | 423 | } |
| 337 | }); | 424 | }); |
| 338 | }, | ||
| 339 | created() { | ||
| 340 | this.$root.$on("app:search", search => { | ||
| 341 | this.search = search; | ||
| 342 | }); | ||
| 343 | }, | ||
| 344 | beforeDestroy() { | ||
| 345 | // dont forget to remove the listener | ||
| 346 | this.$root.$off("app:search"); | ||
| 347 | } | 425 | } |
| 426 | // created() { | ||
| 427 | // this.$root.$on("app:search", search => { | ||
| 428 | // this.search = search; | ||
| 429 | // }); | ||
| 430 | // }, | ||
| 431 | // beforeDestroy() { | ||
| 432 | // // dont forget to remove the listener | ||
| 433 | // this.$root.$off("app:search"); | ||
| 434 | // } |
src/pages/Account/income.vue
| 1 | <template> | 1 | <template> |
| 2 | <v-container fluid class="body-color"> | 2 | <v-container fluid class="body-color"> |
| 3 | <!-- ****** EDIT Income DETAILS ****** --> | 3 | <!-- ****** EDIT Income DETAILS ****** --> |
| 4 | <v-dialog v-model="editIncomeDialog" max-width="600px" scrollable> | 4 | <v-dialog v-model="editIncomeDialog" max-width="600px" scrollable> |
| 5 | <v-card flat class="card-style pa-2" dark> | 5 | <v-card flat class="card-style pa-2" dark> |
| 6 | <v-layout> | 6 | <v-layout> |
| 7 | <v-flex xs12> | 7 | <v-flex xs12> |
| 8 | <label class="title text-xs-center">Edit Income</label> | 8 | <label class="title text-xs-center">Edit Income</label> |
| 9 | <v-icon size="24" class="right" @click="editIncomeDialog = false">cancel</v-icon> | 9 | <v-icon size="24" class="right" @click="editIncomeDialog = false">cancel</v-icon> |
| 10 | </v-flex> | 10 | </v-flex> |
| 11 | </v-layout> | 11 | </v-layout> |
| 12 | <v-card-text> | 12 | <v-card-text> |
| 13 | <v-layout> | 13 | <v-layout> |
| 14 | <v-flex | 14 | <v-flex |
| 15 | xs12 | 15 | xs12 |
| 16 | class="text-xs-center text-sm-center text-md-center text-lg-center my-4 mr-4" | 16 | class="text-xs-center text-sm-center text-md-center text-lg-center my-4 mr-4" |
| 17 | > | 17 | > |
| 18 | <v-avatar size="160px"> | 18 | <v-avatar size="160px"> |
| 19 | <img src="/static/icon/user.png" v-if="!editedItem.fileUrl && !imageUrl" /> | 19 | <img src="/static/icon/user.png" v-if="!editedItem.fileUrl && !imageUrl" /> |
| 20 | <img :src="editedItem.fileUrl" v-else-if="editedItem.fileUrl && !imageUrl" /> | 20 | <img :src="editedItem.fileUrl" v-else-if="editedItem.fileUrl && !imageUrl" /> |
| 21 | <img | 21 | <img |
| 22 | v-if="imageUrl" | 22 | v-if="imageUrl" |
| 23 | :src="imageUrl" | 23 | :src="imageUrl" |
| 24 | height="150" | 24 | height="150" |
| 25 | style="border-radius:50%; width:200px" | 25 | style="border-radius:50%; width:200px" |
| 26 | /> | 26 | /> |
| 27 | </v-avatar> | 27 | </v-avatar> |
| 28 | <input | 28 | <input |
| 29 | type="file" | 29 | type="file" |
| 30 | style="display:none" | 30 | style="display:none" |
| 31 | ref="image" | 31 | ref="image" |
| 32 | accept="image/*" | 32 | accept="image/*" |
| 33 | @change="onFilePicked" | 33 | @change="onFilePicked" |
| 34 | /> | 34 | /> |
| 35 | </v-flex> | 35 | </v-flex> |
| 36 | </v-layout> | 36 | </v-layout> |
| 37 | <v-layout wrap> | 37 | <v-layout wrap> |
| 38 | <v-flex xs12 sm12> | 38 | <v-flex xs12 sm12> |
| 39 | <v-layout> | 39 | <v-layout> |
| 40 | <v-flex xs4 class="pt-4 subheading"> | 40 | <v-flex xs4 class="pt-4 subheading"> |
| 41 | <label class="right">Name:</label> | 41 | <label class="right">Name:</label> |
| 42 | </v-flex> | 42 | </v-flex> |
| 43 | <v-flex xs8 sm6 class="ml-3"> | 43 | <v-flex xs8 sm6 class="ml-3"> |
| 44 | <v-text-field | 44 | <v-text-field |
| 45 | v-model="editedItem.name" | 45 | v-model="editedItem.name" |
| 46 | placeholder="fill your full Name" | 46 | placeholder="fill your full Name" |
| 47 | name="name" | 47 | name="name" |
| 48 | type="text" | 48 | type="text" |
| 49 | required | 49 | required |
| 50 | ></v-text-field> | 50 | ></v-text-field> |
| 51 | </v-flex> | 51 | </v-flex> |
| 52 | </v-layout> | 52 | </v-layout> |
| 53 | </v-flex> | 53 | </v-flex> |
| 54 | </v-layout> | 54 | </v-layout> |
| 55 | <v-layout wrap> | 55 | <v-layout wrap> |
| 56 | <v-flex xs12> | 56 | <v-flex xs12> |
| 57 | <v-layout> | 57 | <v-layout> |
| 58 | <v-flex xs4 class="pt-4 subheading"> | 58 | <v-flex xs4 class="pt-4 subheading"> |
| 59 | <label class="right">Date:</label> | 59 | <label class="right">Date:</label> |
| 60 | </v-flex> | 60 | </v-flex> |
| 61 | <v-flex xs8 sm6 class="ml-3"> | 61 | <v-flex xs8 sm6 class="ml-3"> |
| 62 | <v-menu | 62 | <v-menu |
| 63 | ref="menu" | 63 | ref="menu" |
| 64 | :close-on-content-click="false" | 64 | :close-on-content-click="false" |
| 65 | v-model="menu3" | 65 | v-model="menu3" |
| 66 | :nudge-right="40" | 66 | :nudge-right="40" |
| 67 | lazy | 67 | lazy |
| 68 | transition="scale-transition" | 68 | transition="scale-transition" |
| 69 | offset-y | 69 | offset-y |
| 70 | full-width | 70 | full-width |
| 71 | min-width="290px" | 71 | min-width="290px" |
| 72 | > | 72 | > |
| 73 | <v-text-field | 73 | <v-text-field |
| 74 | slot="activator" | 74 | slot="activator" |
| 75 | v-model="editedItem.date" | 75 | v-model="editedItem.date" |
| 76 | placeholder="Select date" | 76 | placeholder="Select date" |
| 77 | ></v-text-field> | 77 | ></v-text-field> |
| 78 | <v-date-picker | 78 | <v-date-picker |
| 79 | ref="picker" | 79 | ref="picker" |
| 80 | v-model="editedItem.date" | 80 | v-model="editedItem.date" |
| 81 | @input="$refs.menu.save(editedItem.date)" | 81 | @input="$refs.menu.save(editedItem.date)" |
| 82 | ></v-date-picker> | 82 | ></v-date-picker> |
| 83 | </v-menu> | 83 | </v-menu> |
| 84 | </v-flex> | 84 | </v-flex> |
| 85 | </v-layout> | 85 | </v-layout> |
| 86 | </v-flex> | 86 | </v-flex> |
| 87 | <v-layout wrap> | 87 | <v-layout wrap> |
| 88 | <v-flex xs12 sm12> | 88 | <v-flex xs12 sm12> |
| 89 | <v-layout> | 89 | <v-layout> |
| 90 | <v-flex xs4 class="pt-4 subheading"> | 90 | <v-flex xs4 class="pt-4 subheading"> |
| 91 | <label class="right">Amount:</label> | 91 | <label class="right">Amount:</label> |
| 92 | </v-flex> | 92 | </v-flex> |
| 93 | <v-flex xs8 sm6 class="ml-3"> | 93 | <v-flex xs8 sm6 class="ml-3"> |
| 94 | <v-text-field v-model="editedItem.amount" required></v-text-field> | 94 | <v-text-field v-model="editedItem.amount" required></v-text-field> |
| 95 | </v-flex> | 95 | </v-flex> |
| 96 | </v-layout> | 96 | </v-layout> |
| 97 | </v-flex> | 97 | </v-flex> |
| 98 | </v-layout> | 98 | </v-layout> |
| 99 | <v-flex xs12> | 99 | <v-flex xs12> |
| 100 | <v-layout> | 100 | <v-layout> |
| 101 | <v-flex xs4 class="pt-4 subheading"> | 101 | <v-flex xs4 class="pt-4 subheading"> |
| 102 | <label class="right hidden-xs-only hidden-sm-only">Uplaod Image:</label> | 102 | <label class="right hidden-xs-only hidden-sm-only">Uplaod Image:</label> |
| 103 | <label class="right hidden-lg-only hidden-md-only hidden-xl-only">Uplaod:</label> | 103 | <label class="right hidden-lg-only hidden-md-only hidden-xl-only">Uplaod:</label> |
| 104 | </v-flex> | 104 | </v-flex> |
| 105 | <v-flex xs8 sm6 class="ml-3"> | 105 | <v-flex xs8 sm6 class="ml-3"> |
| 106 | <v-text-field | 106 | <v-text-field |
| 107 | label="Select Image" | 107 | label="Select Image" |
| 108 | @click="pickFile" | 108 | @click="pickFile" |
| 109 | v-model="imageName" | 109 | v-model="imageName" |
| 110 | append-icon="attach_file" | 110 | append-icon="attach_file" |
| 111 | ></v-text-field> | 111 | ></v-text-field> |
| 112 | </v-flex> | 112 | </v-flex> |
| 113 | </v-layout> | 113 | </v-layout> |
| 114 | </v-flex> | 114 | </v-flex> |
| 115 | <v-flex xs12> | 115 | <v-flex xs12> |
| 116 | <v-layout> | 116 | <v-layout> |
| 117 | <v-flex xs4 class="pt-4 subheading"> | 117 | <v-flex xs4 class="pt-4 subheading"> |
| 118 | <label class="right">Note:</label> | 118 | <label class="right">Note:</label> |
| 119 | </v-flex> | 119 | </v-flex> |
| 120 | <v-flex xs8 sm6 class="ml-3"> | 120 | <v-flex xs8 sm6 class="ml-3"> |
| 121 | <v-textarea | 121 | <v-textarea |
| 122 | name="input-7-1" | 122 | name="input-7-1" |
| 123 | v-model="editedItem.note" | 123 | v-model="editedItem.note" |
| 124 | placeholder="fill your Note" | 124 | placeholder="fill your Note" |
| 125 | type="text" | 125 | type="text" |
| 126 | :rules="noteRules" | 126 | :rules="noteRules" |
| 127 | multi-line | 127 | multi-line |
| 128 | required | 128 | required |
| 129 | ></v-textarea> | 129 | ></v-textarea> |
| 130 | </v-flex> | 130 | </v-flex> |
| 131 | </v-layout> | 131 | </v-layout> |
| 132 | </v-flex> | 132 | </v-flex> |
| 133 | </v-layout> | 133 | </v-layout> |
| 134 | <v-layout> | 134 | <v-layout> |
| 135 | <v-flex xs12 > | 135 | <v-flex xs12 > |
| 136 | <v-card-actions> | 136 | <v-card-actions> |
| 137 | <v-spacer></v-spacer> | 137 | <v-spacer></v-spacer> |
| 138 | <v-btn round dark :loading="loading" @click="save" class="add-button">Save</v-btn> | 138 | <v-btn round dark :loading="loading" @click="save" class="add-button">Save</v-btn> |
| 139 | <v-spacer></v-spacer> | 139 | <v-spacer></v-spacer> |
| 140 | </v-card-actions> | 140 | </v-card-actions> |
| 141 | </v-flex> | 141 | </v-flex> |
| 142 | </v-layout> | 142 | </v-layout> |
| 143 | </v-card-text> | 143 | </v-card-text> |
| 144 | </v-card> | 144 | </v-card> |
| 145 | </v-dialog> | 145 | </v-dialog> |
| 146 | 146 | ||
| 147 | <!-- ****** PROFILE VIEW INCOME DETAILS ****** --> | 147 | <!-- ****** PROFILE VIEW INCOME DETAILS ****** --> |
| 148 | <v-dialog v-model="profileIncomeDialog" max-width="400px"> | 148 | <v-dialog v-model="profileIncomeDialog" max-width="400px"> |
| 149 | <v-card flat class="card-style pa-3" dark> | 149 | <v-card flat class="card-style pa-3" dark> |
| 150 | <v-layout> | 150 | <v-layout> |
| 151 | <v-flex xs12> | 151 | <v-flex xs12> |
| 152 | <label class="title text-xs-center">View Income</label> | 152 | <label class="title text-xs-center">View Income</label> |
| 153 | <v-icon size="24" class="right" @click="profileIncomeDialog = false">cancel</v-icon> | 153 | <v-icon size="24" class="right" @click="profileIncomeDialog = false">cancel</v-icon> |
| 154 | </v-flex> | 154 | </v-flex> |
| 155 | </v-layout> | 155 | </v-layout> |
| 156 | <v-card-text> | 156 | <v-card-text> |
| 157 | <v-container grid-list-md> | 157 | <v-container grid-list-md> |
| 158 | <v-layout wrap> | 158 | <v-layout wrap> |
| 159 | <v-flex> | 159 | <v-flex> |
| 160 | <v-flex align-center justify-center layout text-xs-center> | 160 | <v-flex align-center justify-center layout text-xs-center> |
| 161 | <v-avatar size="80px" v-if="!editedItem.fileUrl"> | 161 | <v-avatar size="80px" v-if="!editedItem.fileUrl"> |
| 162 | <img src="/static/icon/user.png" /> | 162 | <img src="/static/icon/user.png" /> |
| 163 | </v-avatar> | 163 | </v-avatar> |
| 164 | <img :src="editedItem.fileUrl" v-else-if="editedItem.fileUrl" width="150" /> | 164 | <img :src="editedItem.fileUrl" v-else-if="editedItem.fileUrl" width="150" /> |
| 165 | </v-flex> | 165 | </v-flex> |
| 166 | <v-layout> | 166 | <v-layout> |
| 167 | <v-flex xs5 sm6> | 167 | <v-flex xs5 sm6> |
| 168 | <h5 class="right my-1"> | 168 | <h5 class="right my-1"> |
| 169 | <b>Name:</b> | 169 | <b>Name:</b> |
| 170 | </h5> | 170 | </h5> |
| 171 | </v-flex> | 171 | </v-flex> |
| 172 | <v-flex sm6 xs8> | 172 | <v-flex sm6 xs8> |
| 173 | <h5 class="my-1">{{ editedItem.name }}</h5> | 173 | <h5 class="my-1">{{ editedItem.name }}</h5> |
| 174 | </v-flex> | 174 | </v-flex> |
| 175 | </v-layout> | 175 | </v-layout> |
| 176 | <v-layout> | 176 | <v-layout> |
| 177 | <v-flex xs5 sm6> | 177 | <v-flex xs5 sm6> |
| 178 | <h5 class="right my-1"> | 178 | <h5 class="right my-1"> |
| 179 | <b>Amount:</b> | 179 | <b>Amount:</b> |
| 180 | </h5> | 180 | </h5> |
| 181 | </v-flex> | 181 | </v-flex> |
| 182 | <v-flex sm6 xs8> | 182 | <v-flex sm6 xs8> |
| 183 | <h5 class="my-1">{{ editedItem.amount }}</h5> | 183 | <h5 class="my-1">{{ editedItem.amount }}</h5> |
| 184 | </v-flex> | 184 | </v-flex> |
| 185 | </v-layout> | 185 | </v-layout> |
| 186 | <v-layout> | 186 | <v-layout> |
| 187 | <v-flex xs5 sm6> | 187 | <v-flex xs5 sm6> |
| 188 | <h5 class="right my-1"> | 188 | <h5 class="right my-1"> |
| 189 | <b>Date:</b> | 189 | <b>Date:</b> |
| 190 | </h5> | 190 | </h5> |
| 191 | </v-flex> | 191 | </v-flex> |
| 192 | <v-flex sm6 xs8> | 192 | <v-flex sm6 xs8> |
| 193 | <h5 class="my-1">{{ dates(editedItem.date) }}</h5> | 193 | <h5 class="my-1">{{ dates(editedItem.date) }}</h5> |
| 194 | </v-flex> | 194 | </v-flex> |
| 195 | </v-layout> | 195 | </v-layout> |
| 196 | <v-layout> | 196 | <v-layout> |
| 197 | <v-flex xs5 sm6> | 197 | <v-flex xs5 sm6> |
| 198 | <h5 class="right my-1"> | 198 | <h5 class="right my-1"> |
| 199 | <b>Note:</b> | 199 | <b>Note:</b> |
| 200 | </h5> | 200 | </h5> |
| 201 | </v-flex> | 201 | </v-flex> |
| 202 | <v-flex sm6 xs8> | 202 | <v-flex sm6 xs8> |
| 203 | <h5 class="my-1">{{ editedItem.note }}</h5> | 203 | <h5 class="my-1">{{ editedItem.note }}</h5> |
| 204 | </v-flex> | 204 | </v-flex> |
| 205 | </v-layout> | 205 | </v-layout> |
| 206 | </v-flex> | 206 | </v-flex> |
| 207 | </v-layout> | 207 | </v-layout> |
| 208 | </v-container> | 208 | </v-container> |
| 209 | </v-card-text> | 209 | </v-card-text> |
| 210 | </v-card> | 210 | </v-card> |
| 211 | </v-dialog> | 211 | </v-dialog> |
| 212 | <!-- ****** EXISTING-EXPENSE TABLE DATA****** --> | 212 | <!-- ****** EXISTING-EXPENSE TABLE DATA****** --> |
| 213 | 213 | ||
| 214 | <v-toolbar color="transparent" flat> | 214 | <v-toolbar color="transparent" flat> |
| 215 | <v-btn | 215 | <v-btn |
| 216 | fab | 216 | fab |
| 217 | dark | 217 | dark |
| 218 | class="open-dialog-button hidden-xl-only hidden-md-only hidden-lg-only" | 218 | class="open-dialog-button hidden-xl-only hidden-md-only hidden-lg-only" |
| 219 | small | 219 | small |
| 220 | @click="addIncomeDialog = true" | 220 | @click="addIncomeDialog = true" |
| 221 | > | 221 | > |
| 222 | <v-icon dark>add</v-icon> | 222 | <v-icon dark>add</v-icon> |
| 223 | </v-btn> | 223 | </v-btn> |
| 224 | <v-btn | 224 | <v-btn |
| 225 | round | 225 | round |
| 226 | class="open-dialog-button hidden-sm-only hidden-xs-only" | 226 | class="open-dialog-button hidden-sm-only hidden-xs-only" |
| 227 | dark | 227 | dark |
| 228 | @click="addIncomeDialog = true" | 228 | @click="addIncomeDialog = true" |
| 229 | > | 229 | > |
| 230 | <v-icon class="white--text pr-1" size="20">add</v-icon>Add Income | 230 | <v-icon class="white--text pr-1" size="20">add</v-icon>Add Income |
| 231 | </v-btn> | 231 | </v-btn> |
| 232 | <v-spacer></v-spacer> | 232 | <v-spacer></v-spacer> |
| 233 | <v-card-title class="body-1" v-show="show"> | 233 | <v-card-title class="body-1" v-show="show"> |
| 234 | <v-btn icon large flat @click="displaySearch"> | 234 | <v-btn icon large flat @click="displaySearch"> |
| 235 | <v-avatar size="27"> | 235 | <v-avatar size="27"> |
| 236 | <img src="/static/icon/dashboard icons-49.png" alt="icon" /> | 236 | <img src="/static/icon/search.png" alt="icon" /> |
| 237 | </v-avatar> | 237 | </v-avatar> |
| 238 | </v-btn> | 238 | </v-btn> |
| 239 | </v-card-title> | 239 | </v-card-title> |
| 240 | <v-flex xs8 sm8 md3 lg2 v-show="showSearch"> | 240 | <v-flex xs8 sm8 md3 lg2 v-show="showSearch"> |
| 241 | <v-layout> | 241 | <v-layout> |
| 242 | <v-text-field v-model="search" label="Search" prepend-inner-icon="search" color="primary"></v-text-field> | 242 | <v-text-field v-model="search" label="Search" prepend-inner-icon="search" color="primary"></v-text-field> |
| 243 | <v-icon @click="closeSearch" color="error">close</v-icon> | 243 | <v-icon @click="closeSearch" color="error">close</v-icon> |
| 244 | </v-layout> | 244 | </v-layout> |
| 245 | </v-flex> | 245 | </v-flex> |
| 246 | </v-toolbar> | 246 | </v-toolbar> |
| 247 | <v-data-table | 247 | <v-data-table |
| 248 | :headers="headers" | 248 | :headers="headers" |
| 249 | :items="incomeList" | 249 | :items="incomeList" |
| 250 | :pagination.sync="pagination" | 250 | :pagination.sync="pagination" |
| 251 | :search="search" | 251 | :search="search" |
| 252 | > | 252 | > |
| 253 | <template slot="items" slot-scope="props"> | 253 | <template slot="items" slot-scope="props"> |
| 254 | <tr class="tr"> | 254 | <tr class="tr"> |
| 255 | <td class="text-xs-center td td-row">{{ props.index + 1}}</td> | 255 | <td class="text-xs-center td td-row">{{ props.index + 1}}</td> |
| 256 | <td class="text-xs-center td td-row"> | 256 | <td class="text-xs-center td td-row"> |
| 257 | <v-avatar class="40"> | 257 | <v-avatar class="40"> |
| 258 | <img :src="props.item.fileUrl" v-if="props.item.fileUrl" /> | 258 | <img :src="props.item.fileUrl" v-if="props.item.fileUrl" /> |
| 259 | <img src="/static/icon/user.png" v-else-if="!props.item.fileUrl" /> | 259 | <img src="/static/icon/user.png" v-else-if="!props.item.fileUrl" /> |
| 260 | </v-avatar> | 260 | </v-avatar> |
| 261 | </td> | 261 | </td> |
| 262 | <td class="text-xs-center td td-row">{{ props.item.name}}</td> | 262 | <td class="text-xs-center td td-row">{{ props.item.name}}</td> |
| 263 | <td class="text-xs-center td td-row">{{ dates(props.item.date) }}</td> | 263 | <td class="text-xs-center td td-row">{{ dates(props.item.date) }}</td> |
| 264 | <td class="text-xs-center td td-row">{{ props.item.user }}</td> | 264 | <td class="text-xs-center td td-row">{{ props.item.user }}</td> |
| 265 | <td class="text-xs-center td td-row">{{ props.item.amount }}</td> | 265 | <td class="text-xs-center td td-row">{{ props.item.amount }}</td> |
| 266 | <td class="text-xs-center td td-row">{{ props.item.note }}</td> | 266 | <td class="text-xs-center td td-row">{{ props.item.note }}</td> |
| 267 | <td class="text-xs-center td td-row"> | 267 | <td class="text-xs-center td td-row"> |
| 268 | <span> | 268 | <span> |
| 269 | <v-tooltip top> | 269 | <v-tooltip top> |
| 270 | <img | 270 | <img |
| 271 | slot="activator" | 271 | slot="activator" |
| 272 | style="cursor:pointer; width:25px; height:25px; " | 272 | style="cursor:pointer; width:25px; height:25px; " |
| 273 | class="mr-3" | 273 | class="mr-3" |
| 274 | @click="profile(props.item)" | 274 | @click="profile(props.item)" |
| 275 | src="/static/icon/dashboard icons-47.png" | 275 | src="/static/icon/view.png" |
| 276 | /> | 276 | /> |
| 277 | <span>View</span> | 277 | <span>View</span> |
| 278 | </v-tooltip> | 278 | </v-tooltip> |
| 279 | <v-tooltip top> | 279 | <v-tooltip top> |
| 280 | <img | 280 | <img |
| 281 | slot="activator" | 281 | slot="activator" |
| 282 | style="cursor:pointer; width:20px; height:18px; " | 282 | style="cursor:pointer; width:20px; height:18px; " |
| 283 | class="mr-3" | 283 | class="mr-3" |
| 284 | @click="editItem(props.item)" | 284 | @click="editItem(props.item)" |
| 285 | src="/static/icon/dashboard icons-50.png" | 285 | src="/static/icon/edit.png" |
| 286 | /> | 286 | /> |
| 287 | <span>Edit</span> | 287 | <span>Edit</span> |
| 288 | </v-tooltip> | 288 | </v-tooltip> |
| 289 | <v-tooltip top> | 289 | <v-tooltip top> |
| 290 | <img | 290 | <img |
| 291 | slot="activator" | 291 | slot="activator" |
| 292 | style="cursor:pointer; width:20px; height:20px; " | 292 | style="cursor:pointer; width:20px; height:20px; " |
| 293 | @click="deleteItem(props.item)" | 293 | @click="deleteItem(props.item)" |
| 294 | src="/static/icon/dashboard icons-51.png" | 294 | src="/static/icon/delete.png" |
| 295 | /> | 295 | /> |
| 296 | <span>Delete</span> | 296 | <span>Delete</span> |
| 297 | </v-tooltip> | 297 | </v-tooltip> |
| 298 | </span> | 298 | </span> |
| 299 | </td> | 299 | </td> |
| 300 | </tr> | 300 | </tr> |
| 301 | </template> | 301 | </template> |
| 302 | <v-alert | 302 | <v-alert |
| 303 | slot="no-results" | 303 | slot="no-results" |
| 304 | :value="true" | 304 | :value="true" |
| 305 | color="error" | 305 | color="error" |
| 306 | icon="warning" | 306 | icon="warning" |
| 307 | >Your search for "{{ search }}" found no results.</v-alert> | 307 | >Your search for "{{ search }}" found no results.</v-alert> |
| 308 | </v-data-table> | 308 | </v-data-table> |
| 309 | 309 | ||
| 310 | <!-- ****** Add Income Data****** --> | 310 | <!-- ****** Add Income Data****** --> |
| 311 | <v-dialog v-model="addIncomeDialog" max-width="600px"> | 311 | <v-dialog v-model="addIncomeDialog" max-width="600px"> |
| 312 | <v-card flat class="card-style pa-2" dark> | 312 | <v-card flat class="card-style pa-2" dark> |
| 313 | <v-layout> | 313 | <v-layout> |
| 314 | <v-flex xs12> | 314 | <v-flex xs12> |
| 315 | <label class="title text-xs-center">Add Income</label> | 315 | <label class="title text-xs-center">Add Income</label> |
| 316 | <v-icon size="24" class="right" @click="addIncomeDialog = false">cancel</v-icon> | 316 | <v-icon size="24" class="right" @click="addIncomeDialog = false">cancel</v-icon> |
| 317 | </v-flex> | 317 | </v-flex> |
| 318 | </v-layout> | 318 | </v-layout> |
| 319 | <v-form ref="form" v-model="valid" lazy-validation> | 319 | <v-form ref="form" v-model="valid" lazy-validation> |
| 320 | <v-container fluid> | 320 | <v-container fluid> |
| 321 | <v-layout> | 321 | <v-layout> |
| 322 | <v-flex xs12 class="text-xs-center text-sm-center text-md-center text-lg-center"> | 322 | <v-flex xs12 class="text-xs-center text-sm-center text-md-center text-lg-center"> |
| 323 | <v-avatar size="80px"> | 323 | <v-avatar size="80px"> |
| 324 | <img src="/static/icon/user.png" v-if="!imageUrl" /> | 324 | <img src="/static/icon/user.png" v-if="!imageUrl" /> |
| 325 | </v-avatar> | 325 | </v-avatar> |
| 326 | <img | 326 | <img |
| 327 | :src="imageUrl" | 327 | :src="imageUrl" |
| 328 | height="150" | 328 | height="150" |
| 329 | v-if="imageUrl" | 329 | v-if="imageUrl" |
| 330 | style="border-radius:50%; width:200px" | 330 | style="border-radius:50%; width:200px" |
| 331 | /> | 331 | /> |
| 332 | </v-flex> | 332 | </v-flex> |
| 333 | </v-layout> | 333 | </v-layout> |
| 334 | <v-layout> | 334 | <v-layout> |
| 335 | <v-flex xs12 sm12> | 335 | <v-flex xs12 sm12> |
| 336 | <v-layout> | 336 | <v-layout> |
| 337 | <v-flex xs4 class="pt-4 subheading"> | 337 | <v-flex xs4 class="pt-4 subheading"> |
| 338 | <label class="right">Name:</label> | 338 | <label class="right">Name:</label> |
| 339 | </v-flex> | 339 | </v-flex> |
| 340 | <v-flex xs8 sm6 class="ml-3"> | 340 | <v-flex xs8 sm6 class="ml-3"> |
| 341 | <v-text-field | 341 | <v-text-field |
| 342 | v-model="addIncome.name" | 342 | v-model="addIncome.name" |
| 343 | placeholder="fill your full Name" | 343 | placeholder="fill your full Name" |
| 344 | name="name" | 344 | name="name" |
| 345 | type="text" | 345 | type="text" |
| 346 | :rules="nameRules" | 346 | :rules="nameRules" |
| 347 | required | 347 | required |
| 348 | ></v-text-field> | 348 | ></v-text-field> |
| 349 | </v-flex> | 349 | </v-flex> |
| 350 | </v-layout> | 350 | </v-layout> |
| 351 | </v-flex> | 351 | </v-flex> |
| 352 | </v-layout> | 352 | </v-layout> |
| 353 | <v-layout> | 353 | <v-layout> |
| 354 | <v-flex xs12 sm12> | 354 | <v-flex xs12 sm12> |
| 355 | <v-layout> | 355 | <v-layout> |
| 356 | <v-flex xs4 class="pt-4 subheading"> | 356 | <v-flex xs4 class="pt-4 subheading"> |
| 357 | <label class="right">Amount:</label> | 357 | <label class="right">Amount:</label> |
| 358 | </v-flex> | 358 | </v-flex> |
| 359 | <v-flex xs8 sm6 class="ml-3"> | 359 | <v-flex xs8 sm6 class="ml-3"> |
| 360 | <v-text-field | 360 | <v-text-field |
| 361 | v-model="addIncome.amount" | 361 | v-model="addIncome.amount" |
| 362 | placeholder="fill your Amount" | 362 | placeholder="fill your Amount" |
| 363 | name="name" | 363 | name="name" |
| 364 | type="text" | 364 | type="text" |
| 365 | :rules="amountRules" | 365 | :rules="amountRules" |
| 366 | required | 366 | required |
| 367 | ></v-text-field> | 367 | ></v-text-field> |
| 368 | </v-flex> | 368 | </v-flex> |
| 369 | </v-layout> | 369 | </v-layout> |
| 370 | </v-flex> | 370 | </v-flex> |
| 371 | </v-layout> | 371 | </v-layout> |
| 372 | <v-layout> | 372 | <v-layout> |
| 373 | <v-flex xs12 sm12> | 373 | <v-flex xs12 sm12> |
| 374 | <v-layout> | 374 | <v-layout> |
| 375 | <v-flex xs4 class="pt-4 subheading"> | 375 | <v-flex xs4 class="pt-4 subheading"> |
| 376 | <label class="right">Date</label> | 376 | <label class="right">Date</label> |
| 377 | </v-flex> | 377 | </v-flex> |
| 378 | <v-flex xs8 sm6 class="ml-3"> | 378 | <v-flex xs8 sm6 class="ml-3"> |
| 379 | <v-menu | 379 | <v-menu |
| 380 | ref="menu1" | 380 | ref="menu1" |
| 381 | :close-on-content-click="false" | 381 | :close-on-content-click="false" |
| 382 | v-model="menu1" | 382 | v-model="menu1" |
| 383 | :nudge-right="40" | 383 | :nudge-right="40" |
| 384 | lazy | 384 | lazy |
| 385 | transition="scale-transition" | 385 | transition="scale-transition" |
| 386 | offset-y | 386 | offset-y |
| 387 | full-width | 387 | full-width |
| 388 | min-width="290px" | 388 | min-width="290px" |
| 389 | > | 389 | > |
| 390 | <v-text-field | 390 | <v-text-field |
| 391 | slot="activator" | 391 | slot="activator" |
| 392 | :rules="joinDateRules" | 392 | :rules="joinDateRules" |
| 393 | v-model="addIncome.date" | 393 | v-model="addIncome.date" |
| 394 | placeholder="Select date" | 394 | placeholder="Select date" |
| 395 | ></v-text-field> | 395 | ></v-text-field> |
| 396 | <v-date-picker | 396 | <v-date-picker |
| 397 | ref="picker" | 397 | ref="picker" |
| 398 | v-model="addIncome.date" | 398 | v-model="addIncome.date" |
| 399 | @input="$refs.menu1.save(addIncome.date)" | 399 | @input="$refs.menu1.save(addIncome.date)" |
| 400 | ></v-date-picker> | 400 | ></v-date-picker> |
| 401 | </v-menu> | 401 | </v-menu> |
| 402 | </v-flex> | 402 | </v-flex> |
| 403 | </v-layout> | 403 | </v-layout> |
| 404 | </v-flex> | 404 | </v-flex> |
| 405 | </v-layout> | 405 | </v-layout> |
| 406 | <v-layout> | 406 | <v-layout> |
| 407 | <v-flex xs12 sm12> | 407 | <v-flex xs12 sm12> |
| 408 | <v-layout> | 408 | <v-layout> |
| 409 | <v-flex xs4 class="pt-4 subheading"> | 409 | <v-flex xs4 class="pt-4 subheading"> |
| 410 | <label class="right">File:</label> | 410 | <label class="right">File:</label> |
| 411 | </v-flex> | 411 | </v-flex> |
| 412 | <v-flex xs8 sm6 class="ml-3"> | 412 | <v-flex xs8 sm6 class="ml-3"> |
| 413 | <v-text-field | 413 | <v-text-field |
| 414 | label="Select file" | 414 | label="Select file" |
| 415 | @click="pickFile" | 415 | @click="pickFile" |
| 416 | v-model="imageName" | 416 | v-model="imageName" |
| 417 | append-icon="attach_file" | 417 | append-icon="attach_file" |
| 418 | ></v-text-field> | 418 | ></v-text-field> |
| 419 | <input | 419 | <input |
| 420 | type="file" | 420 | type="file" |
| 421 | style="display:none" | 421 | style="display:none" |
| 422 | ref="image" | 422 | ref="image" |
| 423 | accept="image/*" | 423 | accept="image/*" |
| 424 | @change="onFilePicked" | 424 | @change="onFilePicked" |
| 425 | /> | 425 | /> |
| 426 | </v-flex> | 426 | </v-flex> |
| 427 | </v-layout> | 427 | </v-layout> |
| 428 | </v-flex> | 428 | </v-flex> |
| 429 | </v-layout> | 429 | </v-layout> |
| 430 | <v-layout> | 430 | <v-layout> |
| 431 | <v-flex xs12 sm12> | 431 | <v-flex xs12 sm12> |
| 432 | <v-layout> | 432 | <v-layout> |
| 433 | <v-flex xs4 class="pt-4 subheading"> | 433 | <v-flex xs4 class="pt-4 subheading"> |
| 434 | <label class="right">Note:</label> | 434 | <label class="right">Note:</label> |
| 435 | </v-flex> | 435 | </v-flex> |
| 436 | <v-flex xs8 sm6 class="ml-3"> | 436 | <v-flex xs8 sm6 class="ml-3"> |
| 437 | <v-textarea | 437 | <v-textarea |
| 438 | name="input-7-1" | 438 | name="input-7-1" |
| 439 | v-model="addIncome.note" | 439 | v-model="addIncome.note" |
| 440 | placeholder="fill your Note" | 440 | placeholder="fill your Note" |
| 441 | type="text" | 441 | type="text" |
| 442 | :rules="noteRules" | 442 | :rules="noteRules" |
| 443 | multi-line | 443 | multi-line |
| 444 | required | 444 | required |
| 445 | ></v-textarea> | 445 | ></v-textarea> |
| 446 | </v-flex> | 446 | </v-flex> |
| 447 | </v-layout> | 447 | </v-layout> |
| 448 | </v-flex> | 448 | </v-flex> |
| 449 | </v-layout> | 449 | </v-layout> |
| 450 | <v-layout> | 450 | <v-layout> |
| 451 | <v-flex xs12 sm11> | 451 | <v-flex xs12 sm11> |
| 452 | <v-layout> | 452 | <v-layout> |
| 453 | <v-spacer></v-spacer> | 453 | <v-spacer></v-spacer> |
| 454 | <v-btn @click="clear" round class="clear-button" dark>clear</v-btn> | 454 | <v-btn @click="clear" round class="clear-button" dark>clear</v-btn> |
| 455 | <v-btn @click="submit" round dark :loading="loading" class="add-button">Add</v-btn> | 455 | <v-btn @click="submit" round dark :loading="loading" class="add-button">Add</v-btn> |
| 456 | </v-layout> | 456 | </v-layout> |
| 457 | </v-flex> | 457 | </v-flex> |
| 458 | </v-layout> | 458 | </v-layout> |
| 459 | </v-container> | 459 | </v-container> |
| 460 | </v-form> | 460 | </v-form> |
| 461 | </v-card> | 461 | </v-card> |
| 462 | </v-dialog> | 462 | </v-dialog> |
| 463 | <div class="loader" v-if="showLoader"> | 463 | <div class="loader" v-if="showLoader"> |
| 464 | <v-progress-circular indeterminate color="white"></v-progress-circular> | 464 | <v-progress-circular indeterminate color="white"></v-progress-circular> |
| 465 | </div> | 465 | </div> |
| 466 | </v-container> | 466 | </v-container> |
| 467 | </template> | 467 | </template> |
| 468 | 468 | ||
| 469 | <script> | 469 | <script> |
| 470 | import http from "@/Services/http.js"; | 470 | import http from "@/Services/http.js"; |
| 471 | import Util from "@/util"; | 471 | import Util from "@/util"; |
| 472 | import moment from "moment"; | 472 | import moment from "moment"; |
| 473 | 473 | ||
| 474 | export default { | 474 | export default { |
| 475 | data: () => ({ | 475 | data: () => ({ |
| 476 | component: "report-generate", | 476 | component: "report-generate", |
| 477 | snackbar: false, | 477 | snackbar: false, |
| 478 | y: "top", | 478 | y: "top", |
| 479 | x: "right", | 479 | x: "right", |
| 480 | mode: "", | 480 | mode: "", |
| 481 | timeout: 3000, | 481 | timeout: 3000, |
| 482 | text: "", | 482 | text: "", |
| 483 | show: true, | 483 | show: true, |
| 484 | showSearch: false, | 484 | showSearch: false, |
| 485 | showLoader: false, | 485 | showLoader: false, |
| 486 | loading: false, | 486 | loading: false, |
| 487 | date: null, | 487 | date: null, |
| 488 | search: "", | 488 | search: "", |
| 489 | addIncomeDialog: false, | 489 | addIncomeDialog: false, |
| 490 | menu: false, | 490 | menu: false, |
| 491 | menu1: false, | 491 | menu1: false, |
| 492 | menu2: false, | 492 | menu2: false, |
| 493 | menu3: false, | 493 | menu3: false, |
| 494 | editIncomeDialog: false, | 494 | editIncomeDialog: false, |
| 495 | profileIncomeDialog: false, | 495 | profileIncomeDialog: false, |
| 496 | valid: true, | 496 | valid: true, |
| 497 | pagination: { | 497 | pagination: { |
| 498 | rowsPerPage: 10 | 498 | rowsPerPage: 10 |
| 499 | }, | 499 | }, |
| 500 | imageData: {}, | 500 | imageData: {}, |
| 501 | imageName: "", | 501 | imageName: "", |
| 502 | imageUrl: "", | 502 | imageUrl: "", |
| 503 | imageFile: "", | 503 | imageFile: "", |
| 504 | nameRules: [v => !!v || " Full Name is required"], | 504 | nameRules: [v => !!v || " Full Name is required"], |
| 505 | amountRules: [v => !!v || "Amount is required"], | 505 | amountRules: [v => !!v || "Amount is required"], |
| 506 | noteRules: [v => !!v || "Note Name is required"], | 506 | noteRules: [v => !!v || "Note Name is required"], |
| 507 | joinDateRules: [v => !!v || "Date is required"], | 507 | joinDateRules: [v => !!v || "Date is required"], |
| 508 | errorMessages: "", | 508 | errorMessages: "", |
| 509 | headers: [ | 509 | headers: [ |
| 510 | { | 510 | { |
| 511 | text: "No", | 511 | text: "No", |
| 512 | align: "", | 512 | align: "", |
| 513 | sortable: false, | 513 | sortable: false, |
| 514 | value: "No" | 514 | value: "No" |
| 515 | }, | 515 | }, |
| 516 | { | 516 | { |
| 517 | text: "Profile Pic", | 517 | text: "Profile Pic", |
| 518 | value: "profilePicUrl", | 518 | value: "profilePicUrl", |
| 519 | sortable: false, | 519 | sortable: false, |
| 520 | align: "center" | 520 | align: "center" |
| 521 | }, | 521 | }, |
| 522 | { text: "Name", value: "name", sortable: false, align: "center" }, | 522 | { text: "Name", value: "name", sortable: false, align: "center" }, |
| 523 | { text: "Date", value: "date", sortable: false, align: "center" }, | 523 | { text: "Date", value: "date", sortable: false, align: "center" }, |
| 524 | { text: "User", value: "user", sortable: false, align: "center" }, | 524 | { text: "User", value: "user", sortable: false, align: "center" }, |
| 525 | { text: "Amount", value: "amount", sortable: false, align: "center" }, | 525 | { text: "Amount", value: "amount", sortable: false, align: "center" }, |
| 526 | { text: "Note", value: "note", sortable: false, align: "center" }, | 526 | { text: "Note", value: "note", sortable: false, align: "center" }, |
| 527 | { text: "Action", value: "", sortable: false, align: "center" } | 527 | { text: "Action", value: "", sortable: false, align: "center" } |
| 528 | ], | 528 | ], |
| 529 | incomeList: [], | 529 | incomeList: [], |
| 530 | editedIndex: -1, | 530 | editedIndex: -1, |
| 531 | upload: "", | 531 | upload: "", |
| 532 | editedItem: {}, | 532 | editedItem: {}, |
| 533 | addIncome: {} | 533 | addIncome: {} |
| 534 | }), | 534 | }), |
| 535 | watch: { | 535 | watch: { |
| 536 | menu(val) { | 536 | menu(val) { |
| 537 | val && this.$nextTick(() => (this.$refs.picker.activePicker = "YEAR")); | 537 | val && this.$nextTick(() => (this.$refs.picker.activePicker = "YEAR")); |
| 538 | }, | 538 | }, |
| 539 | menu1(val) { | 539 | menu1(val) { |
| 540 | val && this.$nextTick(() => (this.$refs.picker.activePicker = "YEAR")); | 540 | val && this.$nextTick(() => (this.$refs.picker.activePicker = "YEAR")); |
| 541 | } | 541 | } |
| 542 | }, | 542 | }, |
| 543 | methods: { | 543 | methods: { |
| 544 | save(date) { | 544 | save(date) { |
| 545 | this.$refs.menu.save(date); | 545 | this.$refs.menu.save(date); |
| 546 | }, | 546 | }, |
| 547 | save(date) { | 547 | save(date) { |
| 548 | this.$refs.menu1.save(date); | 548 | this.$refs.menu1.save(date); |
| 549 | }, | 549 | }, |
| 550 | pickFile() { | 550 | pickFile() { |
| 551 | this.$refs.image.click(); | 551 | this.$refs.image.click(); |
| 552 | }, | 552 | }, |
| 553 | onFilePicked(e) { | 553 | onFilePicked(e) { |
| 554 | // console.log(e) | 554 | // console.log(e) |
| 555 | const files = e.target.files; | 555 | const files = e.target.files; |
| 556 | this.upload = e.target.files[0]; | 556 | this.upload = e.target.files[0]; |
| 557 | console.log("imageData-upload========>", this.upload); | 557 | console.log("imageData-upload========>", this.upload); |
| 558 | if (files[0] !== undefined) { | 558 | if (files[0] !== undefined) { |
| 559 | this.imageName = files[0].name; | 559 | this.imageName = files[0].name; |
| 560 | if (this.imageName.lastIndexOf(".") <= 0) { | 560 | if (this.imageName.lastIndexOf(".") <= 0) { |
| 561 | return; | 561 | return; |
| 562 | } | 562 | } |
| 563 | const fr = new FileReader(); | 563 | const fr = new FileReader(); |
| 564 | fr.readAsDataURL(files[0]); | 564 | fr.readAsDataURL(files[0]); |
| 565 | fr.addEventListener("load", () => { | 565 | fr.addEventListener("load", () => { |
| 566 | this.imageUrl = fr.result; | 566 | this.imageUrl = fr.result; |
| 567 | this.imageFile = files[0]; // this is an image file that can be sent to server... | 567 | this.imageFile = files[0]; // this is an image file that can be sent to server... |
| 568 | // this.imageData.imageUrl = URL.createObjectURL(this.imageFile); | 568 | // this.imageData.imageUrl = URL.createObjectURL(this.imageFile); |
| 569 | // console.log("upload=======>", this.imageData.imageUrl); | 569 | // console.log("upload=======>", this.imageData.imageUrl); |
| 570 | console.log("imageFile", this.imageUrl); | 570 | console.log("imageFile", this.imageUrl); |
| 571 | }); | 571 | }); |
| 572 | } else { | 572 | } else { |
| 573 | this.imageName = ""; | 573 | this.imageName = ""; |
| 574 | this.imageFile = ""; | 574 | this.imageFile = ""; |
| 575 | this.imageUrl = ""; | 575 | this.imageUrl = ""; |
| 576 | } | 576 | } |
| 577 | }, | 577 | }, |
| 578 | dates: function(date) { | 578 | dates: function(date) { |
| 579 | return moment(date).format("MMMM DD, YYYY"); | 579 | return moment(date).format("MMMM DD, YYYY"); |
| 580 | }, | 580 | }, |
| 581 | getIncomeList() { | 581 | getIncomeList() { |
| 582 | this.showLoader = true; | 582 | this.showLoader = true; |
| 583 | var token = this.$store.state.token; | 583 | var token = this.$store.state.token; |
| 584 | http() | 584 | http() |
| 585 | .get("/getIncomesList", { | 585 | .get("/getIncomesList", { |
| 586 | params: { schoolId: this.$store.state.schoolId }, | 586 | params: { schoolId: this.$store.state.schoolId }, |
| 587 | headers: { Authorization: "Bearer " + token } | 587 | headers: { Authorization: "Bearer " + token } |
| 588 | }) | 588 | }) |
| 589 | .then(response => { | 589 | .then(response => { |
| 590 | this.incomeList = response.data.data; | 590 | this.incomeList = response.data.data; |
| 591 | this.showLoader = false; | 591 | this.showLoader = false; |
| 592 | // console.log("getTeacherList=====>",this.incomeList) | 592 | // console.log("getTeacherList=====>",this.incomeList) |
| 593 | }) | 593 | }) |
| 594 | .catch(error => { | 594 | .catch(error => { |
| 595 | this.showLoader = false; | 595 | this.showLoader = false; |
| 596 | if (error.response.status === 401) { | 596 | if (error.response.status === 401) { |
| 597 | this.$router.replace({ path: "/" }); | 597 | this.$router.replace({ path: "/" }); |
| 598 | this.$store.dispatch("setToken", null); | 598 | this.$store.dispatch("setToken", null); |
| 599 | this.$store.dispatch("Id", null); | 599 | this.$store.dispatch("Id", null); |
| 600 | } | 600 | } |
| 601 | }); | 601 | }); |
| 602 | }, | 602 | }, |
| 603 | editItem(item) { | 603 | editItem(item) { |
| 604 | this.editedIndex = this.incomeList.indexOf(item); | 604 | this.editedIndex = this.incomeList.indexOf(item); |
| 605 | this.editedItem = Object.assign({}, item); | 605 | this.editedItem = Object.assign({}, item); |
| 606 | this.editedItem.date = | 606 | this.editedItem.date = |
| 607 | this.editedItem.date != undefined | 607 | this.editedItem.date != undefined |
| 608 | ? (this.editedItem.date = this.editedItem.date.substring(0, 10)) | 608 | ? (this.editedItem.date = this.editedItem.date.substring(0, 10)) |
| 609 | : (this.editedItem.date = ""); | 609 | : (this.editedItem.date = ""); |
| 610 | 610 | ||
| 611 | this.editIncomeDialog = true; | 611 | this.editIncomeDialog = true; |
| 612 | }, | 612 | }, |
| 613 | profile(item) { | 613 | profile(item) { |
| 614 | this.editedIndex = this.incomeList.indexOf(item); | 614 | this.editedIndex = this.incomeList.indexOf(item); |
| 615 | this.editedItem = Object.assign({}, item); | 615 | this.editedItem = Object.assign({}, item); |
| 616 | this.profileIncomeDialog = true; | 616 | this.profileIncomeDialog = true; |
| 617 | }, | 617 | }, |
| 618 | deleteItem(item) { | 618 | deleteItem(item) { |
| 619 | let deleteIncome = { | 619 | let deleteIncome = { |
| 620 | incomeId: item._id | 620 | incomeId: item._id |
| 621 | }; | 621 | }; |
| 622 | http() | 622 | http() |
| 623 | .delete( | 623 | .delete( |
| 624 | "/deleteIncome", | 624 | "/deleteIncome", |
| 625 | confirm("Are you sure you want to delete this?") && { | 625 | confirm("Are you sure you want to delete this?") && { |
| 626 | params: deleteIncome | 626 | params: deleteIncome |
| 627 | } | 627 | } |
| 628 | ) | 628 | ) |
| 629 | .then(response => { | 629 | .then(response => { |
| 630 | // console.log("deleteUers",deleteTeachers) | 630 | // console.log("deleteUers",deleteTeachers) |
| 631 | if ((this.snackbar = true)) { | 631 | if ((this.snackbar = true)) { |
| 632 | this.text = "Successfully delete Existing Income"; | 632 | this.text = "Successfully delete Existing Income"; |
| 633 | } | 633 | } |
| 634 | this.getIncomeList(); | 634 | this.getIncomeList(); |
| 635 | }) | 635 | }) |
| 636 | .catch(error => { | 636 | .catch(error => { |
| 637 | console.log(error); | 637 | console.log(error); |
| 638 | }); | 638 | }); |
| 639 | }, | 639 | }, |
| 640 | close() { | 640 | close() { |
| 641 | this.editIncomeDialog = false; | 641 | this.editIncomeDialog = false; |
| 642 | }, | 642 | }, |
| 643 | close1() { | 643 | close1() { |
| 644 | this.dialog1 = false; | 644 | this.dialog1 = false; |
| 645 | }, | 645 | }, |
| 646 | submit() { | 646 | submit() { |
| 647 | if (this.$refs.form.validate()) { | 647 | if (this.$refs.form.validate()) { |
| 648 | if (this.imageUrl) { | 648 | if (this.imageUrl) { |
| 649 | var str = this.imageUrl; | 649 | var str = this.imageUrl; |
| 650 | const [baseUrl, imageUrl] = str.split(/,/); | 650 | const [baseUrl, imageUrl] = str.split(/,/); |
| 651 | this.addIncome.upload = imageUrl; | 651 | this.addIncome.upload = imageUrl; |
| 652 | } | 652 | } |
| 653 | this.loading = true; | 653 | this.loading = true; |
| 654 | // this.addIncome = this.$store.state.schoolId; | 654 | // this.addIncome = this.$store.state.schoolId; |
| 655 | http() | 655 | http() |
| 656 | .post("/createIncome", this.addIncome) | 656 | .post("/createIncome", this.addIncome) |
| 657 | .then(response => { | 657 | .then(response => { |
| 658 | this.getIncomeList(); | 658 | this.getIncomeList(); |
| 659 | this.snackbar = true; | 659 | this.snackbar = true; |
| 660 | this.text = response.data.message; | 660 | this.text = response.data.message; |
| 661 | this.color = "green"; | 661 | this.color = "green"; |
| 662 | this.addIncomeDialog = false; | 662 | this.addIncomeDialog = false; |
| 663 | this.clear(); | 663 | this.clear(); |
| 664 | this.loading = false; | 664 | this.loading = false; |
| 665 | }) | 665 | }) |
| 666 | .catch(error => { | 666 | .catch(error => { |
| 667 | // console.log(error); | 667 | // console.log(error); |
| 668 | this.loading = false; | 668 | this.loading = false; |
| 669 | this.snackbar = true; | 669 | this.snackbar = true; |
| 670 | this.color = "error"; | 670 | this.color = "error"; |
| 671 | this.text = error.response.data.message; | 671 | this.text = error.response.data.message; |
| 672 | }); | 672 | }); |
| 673 | } | 673 | } |
| 674 | }, | 674 | }, |
| 675 | clear() { | 675 | clear() { |
| 676 | this.$refs.form.reset(); | 676 | this.$refs.form.reset(); |
| 677 | }, | 677 | }, |
| 678 | save() { | 678 | save() { |
| 679 | this.loading = true; | 679 | this.loading = true; |
| 680 | this.editedItem.incomeId = this.editedItem._id; | 680 | this.editedItem.incomeId = this.editedItem._id; |
| 681 | if (this.imageUrl) { | 681 | if (this.imageUrl) { |
| 682 | var str = this.imageUrl; | 682 | var str = this.imageUrl; |
| 683 | const [baseUrl, imageUrl] = str.split(/,/); | 683 | const [baseUrl, imageUrl] = str.split(/,/); |
| 684 | this.editedItem.upload = imageUrl; | 684 | this.editedItem.upload = imageUrl; |
| 685 | } | 685 | } |
| 686 | http() | 686 | http() |
| 687 | .put("/updateIncome", this.editedItem) | 687 | .put("/updateIncome", this.editedItem) |
| 688 | .then(response => { | 688 | .then(response => { |
| 689 | this.snackbar = true; | 689 | this.snackbar = true; |
| 690 | this.text = response.data.message; | 690 | this.text = response.data.message; |
| 691 | this.color = "green"; | 691 | this.color = "green"; |
| 692 | this.loading = false; | 692 | this.loading = false; |
| 693 | this.getIncomeList(); | 693 | this.getIncomeList(); |
| 694 | this.close(); | 694 | this.close(); |
| 695 | }) | 695 | }) |
| 696 | .catch(error => { | 696 | .catch(error => { |
| 697 | this.loading = false; | 697 | this.loading = false; |
| 698 | this.snackbar = true; | 698 | this.snackbar = true; |
| 699 | this.color = "error"; | 699 | this.color = "error"; |
| 700 | this.loading = false; | 700 | this.loading = false; |
| 701 | }); | 701 | }); |
| 702 | }, | 702 | }, |
| 703 | 703 | ||
| 704 | displaySearch() { | 704 | displaySearch() { |
| 705 | (this.show = false), (this.showSearch = true); | 705 | (this.show = false), (this.showSearch = true); |
| 706 | }, | 706 | }, |
| 707 | closeSearch() { | 707 | closeSearch() { |
| 708 | this.showSearch = false; | 708 | this.showSearch = false; |
| 709 | this.show = true; | 709 | this.show = true; |
| 710 | this.search = ""; | 710 | this.search = ""; |
| 711 | } | 711 | } |
| 712 | }, | 712 | }, |
| 713 | mounted() { | 713 | mounted() { |
| 714 | this.getIncomeList(); | 714 | this.getIncomeList(); |
| 715 | } | 715 | } |
| 716 | }; | 716 | }; |
| 717 | </script> | 717 | </script> |
src/pages/Account/invoice.vue
| 1 | <template> | 1 | <template> |
| 2 | <v-container fluid class="body-color"> | 2 | <v-container fluid class="body-color"> |
| 3 | <!-- ****** PROFILE VIEW SECTION DATA ****** --> | 3 | <!-- ****** PROFILE VIEW SECTION DATA ****** --> |
| 4 | <!-- <v-dialog v-model="dialog1" max-width="600px"> | 4 | <!-- <v-dialog v-model="dialog1" max-width="600px"> |
| 5 | <v-card> | 5 | <v-card> |
| 6 | <v-flex align-center justify-center layout text-xs-center> | 6 | <v-flex align-center justify-center layout text-xs-center> |
| 7 | <v-avatar size="50px" style="position:absolute; top:20px;"> | 7 | <v-avatar size="50px" style="position:absolute; top:20px;"> |
| 8 | <img src="/static/icon/user.png" /> | 8 | <img src="/static/icon/user.png" /> |
| 9 | </v-avatar> | 9 | </v-avatar> |
| 10 | </v-flex> | 10 | </v-flex> |
| 11 | <v-card-text> | 11 | <v-card-text> |
| 12 | <v-container grid-list-md> | 12 | <v-container grid-list-md> |
| 13 | <v-layout wrap> | 13 | <v-layout wrap> |
| 14 | <v-flex> | 14 | <v-flex> |
| 15 | <br /> | 15 | <br /> |
| 16 | <br /> | 16 | <br /> |
| 17 | <v-layout> | 17 | <v-layout> |
| 18 | <v-flex xs5 sm6> | 18 | <v-flex xs5 sm6> |
| 19 | <h5 class="right my-1"> | 19 | <h5 class="right my-1"> |
| 20 | <b>Class Name:</b> | 20 | <b>Class Name:</b> |
| 21 | </h5> | 21 | </h5> |
| 22 | </v-flex> | 22 | </v-flex> |
| 23 | <v-flex sm6 xs8> | 23 | <v-flex sm6 xs8> |
| 24 | </v-flex> | 24 | </v-flex> |
| 25 | </v-layout> | 25 | </v-layout> |
| 26 | <v-layout> | 26 | <v-layout> |
| 27 | <v-flex xs5 sm6> | 27 | <v-flex xs5 sm6> |
| 28 | <h5 class="right my-1"> | 28 | <h5 class="right my-1"> |
| 29 | <b>Name:</b> | 29 | <b>Name:</b> |
| 30 | </h5> | 30 | </h5> |
| 31 | </v-flex> | 31 | </v-flex> |
| 32 | <v-flex sm6 xs8> | 32 | <v-flex sm6 xs8> |
| 33 | <h5 class="my-1">{{ editedItem.name }}</h5> | 33 | <h5 class="my-1">{{ editedItem.name }}</h5> |
| 34 | </v-flex> | 34 | </v-flex> |
| 35 | </v-layout> | 35 | </v-layout> |
| 36 | <v-layout> | 36 | <v-layout> |
| 37 | <v-flex xs5 sm6> | 37 | <v-flex xs5 sm6> |
| 38 | <h5 class="right my-1"> | 38 | <h5 class="right my-1"> |
| 39 | <b>Class Incharge:</b> | 39 | <b>Class Incharge:</b> |
| 40 | </h5> | 40 | </h5> |
| 41 | </v-flex> | 41 | </v-flex> |
| 42 | <v-flex sm6 xs8> | 42 | <v-flex sm6 xs8> |
| 43 | <h5 class="my-1">{{ editedItem.name }}</h5> | 43 | <h5 class="my-1">{{ editedItem.name }}</h5> |
| 44 | </v-flex> | 44 | </v-flex> |
| 45 | </v-layout> | 45 | </v-layout> |
| 46 | <v-layout> | 46 | <v-layout> |
| 47 | <v-flex xs5 sm6> | 47 | <v-flex xs5 sm6> |
| 48 | <h5 class="right my-1"> | 48 | <h5 class="right my-1"> |
| 49 | <b>Session:</b> | 49 | <b>Session:</b> |
| 50 | </h5> | 50 | </h5> |
| 51 | </v-flex> | 51 | </v-flex> |
| 52 | <v-flex sm6 xs8> | 52 | <v-flex sm6 xs8> |
| 53 | <h5 class="my-1">{{ editedItem.paymentStatus }}</h5> | 53 | <h5 class="my-1">{{ editedItem.paymentStatus }}</h5> |
| 54 | </v-flex> | 54 | </v-flex> |
| 55 | </v-layout> | 55 | </v-layout> |
| 56 | </v-flex> | 56 | </v-flex> |
| 57 | </v-layout> | 57 | </v-layout> |
| 58 | </v-container> | 58 | </v-container> |
| 59 | </v-card-text> | 59 | </v-card-text> |
| 60 | </v-card> | 60 | </v-card> |
| 61 | </v-dialog>--> | 61 | </v-dialog>--> |
| 62 | <!-- ****** Invoice Table ****** --> | 62 | <!-- ****** Invoice Table ****** --> |
| 63 | 63 | ||
| 64 | <v-toolbar color="transparent" flat> | 64 | <v-toolbar color="transparent" flat> |
| 65 | <v-btn | 65 | <v-btn |
| 66 | fab | 66 | fab |
| 67 | dark | 67 | dark |
| 68 | class="open-dialog-button hidden-xl-only hidden-md-only hidden-lg-only" | 68 | class="open-dialog-button hidden-xl-only hidden-md-only hidden-lg-only" |
| 69 | small | 69 | small |
| 70 | @click="addInvoiceDialog = true" | 70 | @click="addInvoiceDialog = true" |
| 71 | > | 71 | > |
| 72 | <v-icon dark>add</v-icon> | 72 | <v-icon dark>add</v-icon> |
| 73 | </v-btn> | 73 | </v-btn> |
| 74 | <v-btn | 74 | <v-btn |
| 75 | round | 75 | round |
| 76 | class="open-dialog-button hidden-sm-only hidden-xs-only" | 76 | class="open-dialog-button hidden-sm-only hidden-xs-only" |
| 77 | dark | 77 | dark |
| 78 | @click="addInvoiceDialog = true" | 78 | @click="addInvoiceDialog = true" |
| 79 | > | 79 | > |
| 80 | <v-icon class="white--text pr-1" size="20">add</v-icon>Add Invoice | 80 | <v-icon class="white--text pr-1" size="20">add</v-icon>Add Invoice |
| 81 | </v-btn> | 81 | </v-btn> |
| 82 | <v-spacer></v-spacer> | 82 | <v-spacer></v-spacer> |
| 83 | <v-card-title class="body-1" v-show="show"> | 83 | <v-card-title class="body-1" v-show="show"> |
| 84 | <v-btn icon large flat @click="displaySearch"> | 84 | <v-btn icon large flat @click="displaySearch"> |
| 85 | <v-avatar size="27"> | 85 | <v-avatar size="27"> |
| 86 | <img src="/static/icon/dashboard icons-49.png" alt="icon" /> | 86 | <img src="/static/icon/search.png" alt="icon" /> |
| 87 | </v-avatar> | 87 | </v-avatar> |
| 88 | </v-btn> | 88 | </v-btn> |
| 89 | </v-card-title> | 89 | </v-card-title> |
| 90 | <v-flex xs8 sm8 md3 lg2 v-show="showSearch"> | 90 | <v-flex xs8 sm8 md3 lg2 v-show="showSearch"> |
| 91 | <v-layout> | 91 | <v-layout> |
| 92 | <v-text-field v-model="search" label="Search" prepend-inner-icon="search" color="primary"></v-text-field> | 92 | <v-text-field v-model="search" label="Search" prepend-inner-icon="search" color="primary"></v-text-field> |
| 93 | <v-icon @click="closeSearch" color="error">close</v-icon> | 93 | <v-icon @click="closeSearch" color="error">close</v-icon> |
| 94 | </v-layout> | 94 | </v-layout> |
| 95 | </v-flex> | 95 | </v-flex> |
| 96 | </v-toolbar> | 96 | </v-toolbar> |
| 97 | <v-data-table | 97 | <v-data-table |
| 98 | :headers="headers" | 98 | :headers="headers" |
| 99 | :items="invoiceList" | 99 | :items="invoiceList" |
| 100 | :pagination.sync="pagination" | 100 | :pagination.sync="pagination" |
| 101 | :search="search" | 101 | :search="search" |
| 102 | > | 102 | > |
| 103 | <template slot="items" slot-scope="props"> | 103 | <template slot="items" slot-scope="props"> |
| 104 | <tr class="tr"> | 104 | <tr class="tr"> |
| 105 | <td class="td td-row">{{ props.index + 1 }}</td> | 105 | <td class="td td-row">{{ props.index + 1 }}</td> |
| 106 | <td class="text-xs-center td td-row">{{ props.item.studentId.name }}</td> | 106 | <td class="text-xs-center td td-row">{{ props.item.studentId.name }}</td> |
| 107 | <td class="text-xs-center td td-row">{{ props.item.classId.classNum }}</td> | 107 | <td class="text-xs-center td td-row">{{ props.item.classId.classNum }}</td> |
| 108 | <td class="text-xs-center td td-row">{{ props.item.totalAmount }}</td> | 108 | <td class="text-xs-center td td-row">{{ props.item.totalAmount }}</td> |
| 109 | <td | 109 | <td |
| 110 | class="text-xs-center td td-row" | 110 | class="text-xs-center td td-row" |
| 111 | >{{ props.item.totalAmount - props.item.totalSubTotal }}</td> | 111 | >{{ props.item.totalAmount - props.item.totalSubTotal }}</td> |
| 112 | <td | 112 | <td |
| 113 | class="text-xs-center td td-row" | 113 | class="text-xs-center td td-row" |
| 114 | >{{ props.item.totalPaidAmount ? props.item.totalPaidAmount : 0}}</td> | 114 | >{{ props.item.totalPaidAmount ? props.item.totalPaidAmount : 0}}</td> |
| 115 | <td | 115 | <td |
| 116 | class="text-xs-center td td-row" | 116 | class="text-xs-center td td-row" |
| 117 | >{{ props.item.totalPaidAmount ? props.item.totalSubTotal - props.item.totalPaidAmount : props.item.totalSubTotal }}</td> | 117 | >{{ props.item.totalPaidAmount ? props.item.totalSubTotal - props.item.totalPaidAmount : props.item.totalSubTotal }}</td> |
| 118 | <td class="text-xs-center td td-row" v-if="props.item.paymentStatus === 'NOT_PAID'"> | 118 | <td class="text-xs-center td td-row" v-if="props.item.paymentStatus === 'NOT_PAID'"> |
| 119 | <span | 119 | <span |
| 120 | class="red lighten-1 py-1 px-2 white--text paymentStatus" | 120 | class="red lighten-1 py-1 px-2 white--text paymentStatus" |
| 121 | >{{ props.item.paymentStatus }}</span> | 121 | >{{ props.item.paymentStatus }}</span> |
| 122 | </td> | 122 | </td> |
| 123 | <td class="text-xs-center td td-row" v-if="props.item.paymentStatus === 'FULLY_PAID'"> | 123 | <td class="text-xs-center td td-row" v-if="props.item.paymentStatus === 'FULLY_PAID'"> |
| 124 | <span | 124 | <span |
| 125 | class="green lighten-1 py-1 px-2 white--text paymentStatus" | 125 | class="green lighten-1 py-1 px-2 white--text paymentStatus" |
| 126 | >{{ props.item.paymentStatus }}</span> | 126 | >{{ props.item.paymentStatus }}</span> |
| 127 | </td> | 127 | </td> |
| 128 | <td class="text-xs-center td td-row" v-if="props.item.paymentStatus === 'PARTIALLY_PAID'"> | 128 | <td class="text-xs-center td td-row" v-if="props.item.paymentStatus === 'PARTIALLY_PAID'"> |
| 129 | <span | 129 | <span |
| 130 | class="yellow darken-3 py-1 px-2 white--text paymentStatus" | 130 | class="yellow darken-3 py-1 px-2 white--text paymentStatus" |
| 131 | >{{ props.item.paymentStatus }}</span> | 131 | >{{ props.item.paymentStatus }}</span> |
| 132 | </td> | 132 | </td> |
| 133 | <td class="text-xs-center td td-row">{{ dates(props.item.date) }}</td> | 133 | <td class="text-xs-center td td-row">{{ dates(props.item.date) }}</td> |
| 134 | <td class="text-xs-center td td-row"> | 134 | <td class="text-xs-center td td-row"> |
| 135 | <router-link :to="{ name:'ViewInvoice',params: { viewInvoiceId:props.item._id } }"> | 135 | <router-link :to="{ name:'View Invoice',params: { viewInvoiceId:props.item._id } }"> |
| 136 | <v-tooltip top> | 136 | <v-tooltip top> |
| 137 | <img | 137 | <img |
| 138 | slot="activator" | 138 | slot="activator" |
| 139 | style="cursor:pointer; width:25px; height:25px; " | 139 | style="cursor:pointer; width:25px; height:25px; " |
| 140 | class="mr-3" | 140 | class="mr-3" |
| 141 | src="/static/icon/dashboard icons-47.png" | 141 | src="/static/icon/view.png" |
| 142 | /> | 142 | /> |
| 143 | <span>View</span> | 143 | <span>View</span> |
| 144 | </v-tooltip> | 144 | </v-tooltip> |
| 145 | </router-link> | 145 | </router-link> |
| 146 | <span v-if="props.item.paymentStatus === 'NOT_PAID'"> | 146 | <span v-if="props.item.paymentStatus === 'NOT_PAID'"> |
| 147 | <router-link :to="{ name:'EditInvoice',params: { invoiceid:props.item._id }}" exact> | 147 | <router-link :to="{ name:'EditInvoice',params: { invoiceid:props.item._id }}" exact> |
| 148 | <v-tooltip top> | 148 | <v-tooltip top> |
| 149 | <img | 149 | <img |
| 150 | slot="activator" | 150 | slot="activator" |
| 151 | style="cursor:pointer; width:20px; height:18px; " | 151 | style="cursor:pointer; width:20px; height:18px; " |
| 152 | class="mr-3" | 152 | class="mr-3" |
| 153 | src="/static/icon/dashboard icons-50.png" | 153 | src="/static/icon/edit.png" |
| 154 | /> | 154 | /> |
| 155 | <span>Edit</span> | 155 | <span>Edit</span> |
| 156 | </v-tooltip> | 156 | </v-tooltip> |
| 157 | </router-link> | 157 | </router-link> |
| 158 | <v-tooltip top> | 158 | <v-tooltip top> |
| 159 | <img | 159 | <img |
| 160 | slot="activator" | 160 | slot="activator" |
| 161 | style="cursor:pointer;width:20px; height:20px; " | 161 | style="cursor:pointer;width:20px; height:20px; " |
| 162 | class="mr-3" | 162 | class="mr-3" |
| 163 | @click="deleteItem(props.item)" | 163 | @click="deleteItem(props.item)" |
| 164 | src="/static/icon/dashboard icons-51.png" | 164 | src="/static/icon/delete.png" |
| 165 | /> | 165 | /> |
| 166 | <span>Delete</span> | 166 | <span>Delete</span> |
| 167 | </v-tooltip> | 167 | </v-tooltip> |
| 168 | </span> | 168 | </span> |
| 169 | </td> | 169 | </td> |
| 170 | </tr> | 170 | </tr> |
| 171 | </template> | 171 | </template> |
| 172 | <v-alert | 172 | <v-alert |
| 173 | slot="no-results" | 173 | slot="no-results" |
| 174 | :value="true" | 174 | :value="true" |
| 175 | color="error" | 175 | color="error" |
| 176 | icon="warning" | 176 | icon="warning" |
| 177 | >Your search for "{{ search }}" found no results.</v-alert> | 177 | >Your search for "{{ search }}" found no results.</v-alert> |
| 178 | </v-data-table> | 178 | </v-data-table> |
| 179 | <!-- ****** ADD INVOICE ****** --> | 179 | <!-- ****** ADD INVOICE ****** --> |
| 180 | <v-dialog v-model="addInvoiceDialog" max-width> | 180 | <v-dialog v-model="addInvoiceDialog" max-width> |
| 181 | <v-card flat class="text-xs-center white--text"> | 181 | <v-card flat class="text-xs-center white--text"> |
| 182 | <v-layout> | 182 | <v-layout> |
| 183 | <v-flex xs12 class="card-styles pa-2"> | 183 | <v-flex xs12 class="card-styles pa-2"> |
| 184 | <label class="title text-xs-center ">Add Invoice</label> | 184 | <label class="title text-xs-center ">Add Invoice</label> |
| 185 | <v-icon size="24" class="right white--text" @click="addInvoiceDialog = false">cancel</v-icon> | 185 | <v-icon size="24" class="right white--text" @click="addInvoiceDialog = false">cancel</v-icon> |
| 186 | </v-flex> | 186 | </v-flex> |
| 187 | </v-layout> | 187 | </v-layout> |
| 188 | <v-flex xs12 sm12> | 188 | <v-flex xs12 sm12> |
| 189 | <v-container fluid grid-list-md> | 189 | <v-container fluid grid-list-md> |
| 190 | <v-layout wrap> | 190 | <v-layout wrap> |
| 191 | <v-flex xs12 sm12 md5> | 191 | <v-flex xs12 sm12 md5> |
| 192 | <v-card flat> | 192 | <v-card flat> |
| 193 | <v-toolbar dark class="card-styles" flat> | 193 | <v-toolbar dark class="card-styles" flat> |
| 194 | <v-spacer></v-spacer> | 194 | <v-spacer></v-spacer> |
| 195 | <h3>Invoice</h3> | 195 | <h3>Invoice</h3> |
| 196 | <v-spacer></v-spacer> | 196 | <v-spacer></v-spacer> |
| 197 | </v-toolbar> | 197 | </v-toolbar> |
| 198 | <v-form ref="form" v-model="valid" lazy-validation class="py-4"> | 198 | <v-form ref="form" v-model="valid" lazy-validation class="py-4"> |
| 199 | <v-layout> | 199 | <v-layout> |
| 200 | <v-flex xs4 class="pt-4 subheading"> | 200 | <v-flex xs4 class="pt-4 subheading"> |
| 201 | <label class="right hidden-xs-only hidden-sm-only">Select Class:</label> | 201 | <label class="right hidden-xs-only hidden-sm-only">Select Class:</label> |
| 202 | <label class="right hidden-lg-only hidden-md-only hidden-xl-only">Class:</label> | 202 | <label class="right hidden-lg-only hidden-md-only hidden-xl-only">Class:</label> |
| 203 | </v-flex> | 203 | </v-flex> |
| 204 | <v-flex xs6 class="ml-3"> | 204 | <v-flex xs6 class="ml-3"> |
| 205 | <v-select | 205 | <v-select |
| 206 | :items="addclass" | 206 | :items="addclass" |
| 207 | label="Select Class" | 207 | label="Select Class" |
| 208 | v-model="invoiceData.classNum" | 208 | v-model="invoiceData.classNum" |
| 209 | item-text="classNum" | 209 | item-text="classNum" |
| 210 | item-value="_id" | 210 | item-value="_id" |
| 211 | @change="getAllStudents()" | 211 | @change="getAllStudents()" |
| 212 | :rules="classRules" | 212 | :rules="classRules" |
| 213 | required | 213 | required |
| 214 | ></v-select> | 214 | ></v-select> |
| 215 | </v-flex> | 215 | </v-flex> |
| 216 | </v-layout> | 216 | </v-layout> |
| 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 hidden-xs-only hidden-sm-only">Select Student:</label> | 219 | <label class="right hidden-xs-only hidden-sm-only">Select Student:</label> |
| 220 | <label class="right hidden-lg-only hidden-md-only hidden-xl-only">Student:</label> | 220 | <label class="right hidden-lg-only hidden-md-only hidden-xl-only">Student:</label> |
| 221 | </v-flex> | 221 | </v-flex> |
| 222 | <v-flex xs6 class="ml-3"> | 222 | <v-flex xs6 class="ml-3"> |
| 223 | <v-select | 223 | <v-select |
| 224 | :items="studentList" | 224 | :items="studentList" |
| 225 | label="Select Student" | 225 | label="Select Student" |
| 226 | v-model="invoiceData.studentId" | 226 | v-model="invoiceData.studentId" |
| 227 | item-text="name" | 227 | item-text="name" |
| 228 | item-value="_id" | 228 | item-value="_id" |
| 229 | :rules="inchargeRules" | 229 | :rules="inchargeRules" |
| 230 | @change="selectAllStudent()" | 230 | @change="selectAllStudent()" |
| 231 | required | 231 | required |
| 232 | ></v-select> | 232 | ></v-select> |
| 233 | </v-flex> | 233 | </v-flex> |
| 234 | </v-layout> | 234 | </v-layout> |
| 235 | <v-layout> | 235 | <v-layout> |
| 236 | <v-flex xs4 class="pt-4 subheading"> | 236 | <v-flex xs4 class="pt-4 subheading"> |
| 237 | <label class="right">Date:</label> | 237 | <label class="right">Date:</label> |
| 238 | </v-flex> | 238 | </v-flex> |
| 239 | <v-flex xs6 class="ml-3"> | 239 | <v-flex xs6 class="ml-3"> |
| 240 | <v-menu | 240 | <v-menu |
| 241 | ref="menu1" | 241 | ref="menu1" |
| 242 | :close-on-content-click="false" | 242 | :close-on-content-click="false" |
| 243 | v-model="menu1" | 243 | v-model="menu1" |
| 244 | :nudge-right="40" | 244 | :nudge-right="40" |
| 245 | lazy | 245 | lazy |
| 246 | :return-value.sync="invoiceData.date" | 246 | :return-value.sync="invoiceData.date" |
| 247 | transition="scale-transition" | 247 | transition="scale-transition" |
| 248 | offset-y | 248 | offset-y |
| 249 | full-width | 249 | full-width |
| 250 | min-width="290px" | 250 | min-width="290px" |
| 251 | > | 251 | > |
| 252 | <v-text-field | 252 | <v-text-field |
| 253 | slot="activator" | 253 | slot="activator" |
| 254 | :rules="dateRules" | 254 | :rules="dateRules" |
| 255 | v-model="invoiceData.date" | 255 | v-model="invoiceData.date" |
| 256 | placeholder="Select date" | 256 | placeholder="Select date" |
| 257 | ></v-text-field> | 257 | ></v-text-field> |
| 258 | <v-date-picker | 258 | <v-date-picker |
| 259 | v-model="invoiceData.date" | 259 | v-model="invoiceData.date" |
| 260 | @input="$refs.menu1.save(invoiceData.date)" | 260 | @input="$refs.menu1.save(invoiceData.date)" |
| 261 | ></v-date-picker> | 261 | ></v-date-picker> |
| 262 | </v-menu> | 262 | </v-menu> |
| 263 | </v-flex> | 263 | </v-flex> |
| 264 | </v-layout> | 264 | </v-layout> |
| 265 | <v-layout> | 265 | <v-layout> |
| 266 | <v-flex xs4 class="pt-4 subheading"> | 266 | <v-flex xs4 class="pt-4 subheading"> |
| 267 | <label class="right hidden-xs-only hidden-sm-only">Payment Status:</label> | 267 | <label class="right hidden-xs-only hidden-sm-only">Payment Status:</label> |
| 268 | <label class="right hidden-lg-only hidden-md-only hidden-xl-only">Payment:</label> | 268 | <label class="right hidden-lg-only hidden-md-only hidden-xl-only">Payment:</label> |
| 269 | </v-flex> | 269 | </v-flex> |
| 270 | <v-flex xs6 class="ml-3"> | 270 | <v-flex xs6 class="ml-3"> |
| 271 | <v-select | 271 | <v-select |
| 272 | :items="paymentStatus" | 272 | :items="paymentStatus" |
| 273 | v-model="invoiceData.paymentStatus" | 273 | v-model="invoiceData.paymentStatus" |
| 274 | item-text="name" | 274 | item-text="name" |
| 275 | item-value="value" | 275 | item-value="value" |
| 276 | label="Select Payment Status" | 276 | label="Select Payment Status" |
| 277 | @change="getPayMethodList" | 277 | @change="getPayMethodList" |
| 278 | :rules="paymentStatusRules" | 278 | :rules="paymentStatusRules" |
| 279 | required | 279 | required |
| 280 | ></v-select> | 280 | ></v-select> |
| 281 | </v-flex> | 281 | </v-flex> |
| 282 | </v-layout> | 282 | </v-layout> |
| 283 | <v-layout v-show="showPayMethods"> | 283 | <v-layout v-show="showPayMethods"> |
| 284 | <v-flex xs4 class="pt-4 subheading"> | 284 | <v-flex xs4 class="pt-4 subheading"> |
| 285 | <label class="right">Payment Method:</label> | 285 | <label class="right">Payment Method:</label> |
| 286 | </v-flex> | 286 | </v-flex> |
| 287 | <v-flex xs6 class="ml-3"> | 287 | <v-flex xs6 class="ml-3"> |
| 288 | <v-select | 288 | <v-select |
| 289 | :items="paymentMethods" | 289 | :items="paymentMethods" |
| 290 | v-model="invoiceData.paymentMethod" | 290 | v-model="invoiceData.paymentMethod" |
| 291 | label="Select Payment Method" | 291 | label="Select Payment Method" |
| 292 | required | 292 | required |
| 293 | ></v-select> | 293 | ></v-select> |
| 294 | </v-flex> | 294 | </v-flex> |
| 295 | </v-layout> | 295 | </v-layout> |
| 296 | <v-layout> | 296 | <v-layout> |
| 297 | <v-flex xs12 sm11> | 297 | <v-flex xs12 sm11> |
| 298 | <v-card-actions> | 298 | <v-card-actions> |
| 299 | <v-spacer></v-spacer> | 299 | <v-spacer></v-spacer> |
| 300 | <v-btn @click="clear" round dark class="clear-button">clear</v-btn> | 300 | <v-btn @click="clear" round dark class="clear-button">clear</v-btn> |
| 301 | <v-btn @click="submit" round dark :loading="loading" class="add-button">Add</v-btn> | 301 | <v-btn @click="submit" round dark :loading="loading" class="add-button">Add</v-btn> |
| 302 | </v-card-actions> | 302 | </v-card-actions> |
| 303 | </v-flex> | 303 | </v-flex> |
| 304 | </v-layout> | 304 | </v-layout> |
| 305 | </v-form> | 305 | </v-form> |
| 306 | </v-card> | 306 | </v-card> |
| 307 | </v-flex> | 307 | </v-flex> |
| 308 | <v-flex xs12 sm12 md7> | 308 | <v-flex xs12 sm12 md7> |
| 309 | <v-card> | 309 | <v-card> |
| 310 | <v-toolbar dark class="card-styles " flat> | 310 | <v-toolbar dark class="card-styles " flat> |
| 311 | <v-spacer></v-spacer> | 311 | <v-spacer></v-spacer> |
| 312 | <h3>Fee Type List</h3> | 312 | <h3>Fee Type List</h3> |
| 313 | <v-spacer></v-spacer> | 313 | <v-spacer></v-spacer> |
| 314 | </v-toolbar> | 314 | </v-toolbar> |
| 315 | <v-layout> | 315 | <v-layout> |
| 316 | <v-flex xs4 sm2 class="mt-4 hidden-xs-only hidden-sm-only"> | 316 | <v-flex xs4 sm2 class="mt-4 hidden-xs-only hidden-sm-only"> |
| 317 | <label class="right title ">Fee Type:</label> | 317 | <label class="right title ">Fee Type:</label> |
| 318 | </v-flex> | 318 | </v-flex> |
| 319 | <v-flex xs8 sm4> | 319 | <v-flex xs8 sm4> |
| 320 | <v-select | 320 | <v-select |
| 321 | :items="feeTypes" | 321 | :items="feeTypes" |
| 322 | v-model="feeType.feeTypeName" | 322 | v-model="feeType.feeTypeName" |
| 323 | item-text="feeType" | 323 | item-text="feeType" |
| 324 | item-value="feeType" | 324 | item-value="feeType" |
| 325 | label="Select Fee Type" | 325 | label="Select Fee Type" |
| 326 | ></v-select> | 326 | ></v-select> |
| 327 | </v-flex> | 327 | </v-flex> |
| 328 | <v-flex xs4 sm6> | 328 | <v-flex xs4 sm6> |
| 329 | <v-btn color="open-dialog-button" round dark class="right mt-3" @click="selectFeeType">ADD</v-btn> | 329 | <v-btn color="open-dialog-button" round dark class="right mt-3" @click="selectFeeType">ADD</v-btn> |
| 330 | </v-flex> | 330 | </v-flex> |
| 331 | </v-layout> | 331 | </v-layout> |
| 332 | <table class="feeTypeTable tableRsponsive"> | 332 | <table class="feeTypeTable tableRsponsive"> |
| 333 | <tr class="info white--text"> | 333 | <tr class="info white--text"> |
| 334 | <th>#</th> | 334 | <th>#</th> |
| 335 | <th>Fee Type</th> | 335 | <th>Fee Type</th> |
| 336 | <th>Amount</th> | 336 | <th>Amount</th> |
| 337 | <th>Discount(%)</th> | 337 | <th>Discount(%)</th> |
| 338 | <th>Subtotal</th> | 338 | <th>Subtotal</th> |
| 339 | <th>Paid Amount</th> | 339 | <th>Paid Amount</th> |
| 340 | <th>Action</th> | 340 | <th>Action</th> |
| 341 | </tr> | 341 | </tr> |
| 342 | <tr | 342 | <tr |
| 343 | v-show="showFeeType" | 343 | v-show="showFeeType" |
| 344 | v-for="(feeType, index) in feeTypeData" | 344 | v-for="(feeType, index) in feeTypeData" |
| 345 | :key="index" | 345 | :key="index" |
| 346 | v-on:keyup="getAmmountDetails(feeType)" | 346 | v-on:keyup="getAmmountDetails(feeType)" |
| 347 | > | 347 | > |
| 348 | <td style="width:40px" class="tdFeeType">{{ index + 1 }}</td> | 348 | <td style="width:40px" class="tdFeeType">{{ index + 1 }}</td> |
| 349 | <td style="width:120px" class="tdFeeType">{{ feeType.feeTypeName }}</td> | 349 | <td style="width:120px" class="tdFeeType">{{ feeType.feeTypeName }}</td> |
| 350 | <td class="tdFeeType"> | 350 | <td class="tdFeeType"> |
| 351 | <v-text-field | 351 | <v-text-field |
| 352 | placeholder="fill your Amount" | 352 | placeholder="fill your Amount" |
| 353 | v-model="feeType.amount" | 353 | v-model="feeType.amount" |
| 354 | type="number" | 354 | type="number" |
| 355 | ></v-text-field> | 355 | ></v-text-field> |
| 356 | </td> | 356 | </td> |
| 357 | <td class="tdFeeType"> | 357 | <td class="tdFeeType"> |
| 358 | <v-text-field | 358 | <v-text-field |
| 359 | placeholder="fill your Discount" | 359 | placeholder="fill your Discount" |
| 360 | v-model="feeType.discount" | 360 | v-model="feeType.discount" |
| 361 | type="number" | 361 | type="number" |
| 362 | ></v-text-field> | 362 | ></v-text-field> |
| 363 | </td> | 363 | </td> |
| 364 | <td class="tdFeeType">{{ feeType.subTotal }}</td> | 364 | <td class="tdFeeType">{{ feeType.subTotal }}</td> |
| 365 | <td class="tdFeeType" v-if="invoiceData.paymentStatus === 'NOT_PAID'"> | 365 | <td class="tdFeeType" v-if="invoiceData.paymentStatus === 'NOT_PAID'"> |
| 366 | <v-text-field | 366 | <v-text-field |
| 367 | placeholder="fill your Paid Amount" | 367 | placeholder="fill your Paid Amount" |
| 368 | v-model="feeType.paidAmount" | 368 | v-model="feeType.paidAmount" |
| 369 | type="number" | 369 | type="number" |
| 370 | :disabled="disabled" | 370 | :disabled="disabled" |
| 371 | ></v-text-field> | 371 | ></v-text-field> |
| 372 | </td> | 372 | </td> |
| 373 | <td class="tdFeeType" v-if="invoiceData.paymentStatus == ''"> | 373 | <td class="tdFeeType" v-if="invoiceData.paymentStatus == ''"> |
| 374 | <v-text-field | 374 | <v-text-field |
| 375 | placeholder="fill your Paid Amount" | 375 | placeholder="fill your Paid Amount" |
| 376 | v-model="feeType.paidAmount" | 376 | v-model="feeType.paidAmount" |
| 377 | type="number" | 377 | type="number" |
| 378 | :disabled="disabled" | 378 | :disabled="disabled" |
| 379 | ></v-text-field> | 379 | ></v-text-field> |
| 380 | </td> | 380 | </td> |
| 381 | <td | 381 | <td |
| 382 | class="tdFeeType" | 382 | class="tdFeeType" |
| 383 | v-if="invoiceData.paymentStatus != 'NOT_PAID' && invoiceData.paymentStatus != ''" | 383 | v-if="invoiceData.paymentStatus != 'NOT_PAID' && invoiceData.paymentStatus != ''" |
| 384 | > | 384 | > |
| 385 | <v-text-field | 385 | <v-text-field |
| 386 | placeholder="fill your Paid Amount" | 386 | placeholder="fill your Paid Amount" |
| 387 | v-model="feeType.paidAmount" | 387 | v-model="feeType.paidAmount" |
| 388 | type="number" | 388 | type="number" |
| 389 | ></v-text-field> | 389 | ></v-text-field> |
| 390 | </td> | 390 | </td> |
| 391 | <td class="tdFeeType"> | 391 | <td class="tdFeeType"> |
| 392 | <v-icon color="error" @click="deleteSelectFee(index)">delete</v-icon> | 392 | <v-icon color="error" @click="deleteSelectFee(index)">delete</v-icon> |
| 393 | </td> | 393 | </td> |
| 394 | </tr> | 394 | </tr> |
| 395 | <tfoot> | 395 | <tfoot> |
| 396 | <tr> | 396 | <tr> |
| 397 | <td colspan="2" class="tdFeeType">Total:</td> | 397 | <td colspan="2" class="tdFeeType">Total:</td> |
| 398 | <td class="tdFeeType">{{ feeType.amount }}</td> | 398 | <td class="tdFeeType">{{ feeType.amount }}</td> |
| 399 | <td class="tdFeeType">{{ feeType.discount }}</td> | 399 | <td class="tdFeeType">{{ feeType.discount }}</td> |
| 400 | <td class="tdFeeType">{{ feeType.subTotal }}</td> | 400 | <td class="tdFeeType">{{ feeType.subTotal }}</td> |
| 401 | <td class="tdFeeType">{{ feeType.paidAmount }}</td> | 401 | <td class="tdFeeType">{{ feeType.paidAmount }}</td> |
| 402 | </tr> | 402 | </tr> |
| 403 | </tfoot> | 403 | </tfoot> |
| 404 | </table> | 404 | </table> |
| 405 | </v-card> | 405 | </v-card> |
| 406 | </v-flex> | 406 | </v-flex> |
| 407 | </v-layout> | 407 | </v-layout> |
| 408 | </v-container> | 408 | </v-container> |
| 409 | </v-flex> | 409 | </v-flex> |
| 410 | </v-card> | 410 | </v-card> |
| 411 | </v-dialog> | 411 | </v-dialog> |
| 412 | <div class="loader" v-if="showLoader"> | 412 | <div class="loader" v-if="showLoader"> |
| 413 | <v-progress-circular indeterminate color="white"></v-progress-circular> | 413 | <v-progress-circular indeterminate color="white"></v-progress-circular> |
| 414 | </div> | 414 | </div> |
| 415 | </v-container> | 415 | </v-container> |
| 416 | </template> | 416 | </template> |
| 417 | 417 | ||
| 418 | <script> | 418 | <script> |
| 419 | import http from "@/Services/http.js"; | 419 | import http from "@/Services/http.js"; |
| 420 | import moment from "moment"; | 420 | import moment from "moment"; |
| 421 | 421 | ||
| 422 | export default { | 422 | export default { |
| 423 | data: () => ({ | 423 | data: () => ({ |
| 424 | snackbar: false, | 424 | snackbar: false, |
| 425 | showPayMethods: false, | 425 | showPayMethods: false, |
| 426 | y: "top", | 426 | y: "top", |
| 427 | x: "right", | 427 | x: "right", |
| 428 | mode: "", | 428 | mode: "", |
| 429 | timeout: 5000, | 429 | timeout: 5000, |
| 430 | text: "", | 430 | text: "", |
| 431 | color: "", | 431 | color: "", |
| 432 | show: true, | 432 | show: true, |
| 433 | showSearch: false, | 433 | showSearch: false, |
| 434 | showLoader: false, | 434 | showLoader: false, |
| 435 | loading: false, | 435 | loading: false, |
| 436 | date: null, | 436 | date: null, |
| 437 | search: "", | 437 | search: "", |
| 438 | dialog: false, | 438 | dialog: false, |
| 439 | dialog1: false, | 439 | dialog1: false, |
| 440 | valid: true, | 440 | valid: true, |
| 441 | validEdit: true, | 441 | validEdit: true, |
| 442 | isActive: true, | 442 | isActive: true, |
| 443 | newActive: false, | 443 | newActive: false, |
| 444 | showFeeType: false, | 444 | showFeeType: false, |
| 445 | addInvoiceDialog: false, | 445 | addInvoiceDialog: false, |
| 446 | disabled: true, | 446 | disabled: true, |
| 447 | details: [], | 447 | details: [], |
| 448 | feeTypes: [], | 448 | feeTypes: [], |
| 449 | menu1: false, | 449 | menu1: false, |
| 450 | paymentMethods: ["Cash", "Cheque"], | 450 | paymentMethods: ["Cash", "Cheque"], |
| 451 | feeType: { | 451 | feeType: { |
| 452 | amount: "0.00", | 452 | amount: "0.00", |
| 453 | discount: "0.00", | 453 | discount: "0.00", |
| 454 | paidAmount: 0.0, | 454 | paidAmount: 0.0, |
| 455 | subTotal: "0.00", | 455 | subTotal: "0.00", |
| 456 | feeTypeName: "" | 456 | feeTypeName: "" |
| 457 | }, | 457 | }, |
| 458 | feeTypeData: [], | 458 | feeTypeData: [], |
| 459 | pagination: { | 459 | pagination: { |
| 460 | rowsPerPage: 10 | 460 | rowsPerPage: 10 |
| 461 | }, | 461 | }, |
| 462 | classRules: [v => !!v || " Class Name is required"], | 462 | classRules: [v => !!v || " Class Name is required"], |
| 463 | inchargeRules: [v => !!v || "Student Name is required"], | 463 | inchargeRules: [v => !!v || "Student Name is required"], |
| 464 | dateRules: [v => !!v || " Date is required"], | 464 | dateRules: [v => !!v || " Date is required"], |
| 465 | paymentStatusRules: [v => !!v || "Payment Status is required"], | 465 | paymentStatusRules: [v => !!v || "Payment Status is required"], |
| 466 | paymentMethodsRules: [v => !!v || "payment Method is required"], | 466 | paymentMethodsRules: [v => !!v || "payment Method is required"], |
| 467 | headers: [ | 467 | headers: [ |
| 468 | { | 468 | { |
| 469 | text: "No", | 469 | text: "No", |
| 470 | align: "", | 470 | align: "", |
| 471 | sortable: false, | 471 | sortable: false, |
| 472 | value: "No" | 472 | value: "No" |
| 473 | }, | 473 | }, |
| 474 | { | 474 | { |
| 475 | text: "Student", | 475 | text: "Student", |
| 476 | value: "student", | 476 | value: "student", |
| 477 | sortable: false, | 477 | sortable: false, |
| 478 | align: "center" | 478 | align: "center" |
| 479 | }, | 479 | }, |
| 480 | { text: "Class", value: "class", sortable: false, align: "center" }, | 480 | { text: "Class", value: "class", sortable: false, align: "center" }, |
| 481 | { text: "Total", value: "subtotal", sortable: false, align: "center" }, | 481 | { text: "Total", value: "subtotal", sortable: false, align: "center" }, |
| 482 | { text: "Discount", value: "discount", sortable: false, align: "center" }, | 482 | { text: "Discount", value: "discount", sortable: false, align: "center" }, |
| 483 | { | 483 | { |
| 484 | text: "Paid Amount", | 484 | text: "Paid Amount", |
| 485 | value: "paidAmount", | 485 | value: "paidAmount", |
| 486 | sortable: false, | 486 | sortable: false, |
| 487 | align: "center" | 487 | align: "center" |
| 488 | }, | 488 | }, |
| 489 | { | 489 | { |
| 490 | text: "Balance", | 490 | text: "Balance", |
| 491 | value: "Balance", | 491 | value: "Balance", |
| 492 | sortable: false, | 492 | sortable: false, |
| 493 | align: "center" | 493 | align: "center" |
| 494 | }, | 494 | }, |
| 495 | { | 495 | { |
| 496 | text: "Status", | 496 | text: "Status", |
| 497 | value: "paymentStatus", | 497 | value: "paymentStatus", |
| 498 | sortable: false, | 498 | sortable: false, |
| 499 | align: "center" | 499 | align: "center" |
| 500 | }, | 500 | }, |
| 501 | { | 501 | { |
| 502 | text: "Date", | 502 | text: "Date", |
| 503 | value: "date", | 503 | value: "date", |
| 504 | sortable: false, | 504 | sortable: false, |
| 505 | align: "center" | 505 | align: "center" |
| 506 | }, | 506 | }, |
| 507 | { text: "Action", value: "", sortable: false, align: "center" } | 507 | { text: "Action", value: "", sortable: false, align: "center" } |
| 508 | ], | 508 | ], |
| 509 | invoiceList: [], | 509 | invoiceList: [], |
| 510 | token: "", | 510 | token: "", |
| 511 | editedItem: {}, | 511 | editedItem: {}, |
| 512 | invoiceData: { | 512 | invoiceData: { |
| 513 | paymentStatus: "", | 513 | paymentStatus: "", |
| 514 | students: [] | 514 | students: [] |
| 515 | }, | 515 | }, |
| 516 | addclass: [], | 516 | addclass: [], |
| 517 | studentList: [], | 517 | studentList: [], |
| 518 | paymentStatus: [ | 518 | paymentStatus: [ |
| 519 | { | 519 | { |
| 520 | name: "Not Paid", | 520 | name: "Not Paid", |
| 521 | value: "NOT_PAID" | 521 | value: "NOT_PAID" |
| 522 | }, | 522 | }, |
| 523 | { | 523 | { |
| 524 | name: "Partially Paid", | 524 | name: "Partially Paid", |
| 525 | value: "PARTIALLY_PAID" | 525 | value: "PARTIALLY_PAID" |
| 526 | }, | 526 | }, |
| 527 | { | 527 | { |
| 528 | name: "Fully Paid", | 528 | name: "Fully Paid", |
| 529 | value: "FULLY_PAID" | 529 | value: "FULLY_PAID" |
| 530 | } | 530 | } |
| 531 | ] | 531 | ] |
| 532 | }), | 532 | }), |
| 533 | methods: { | 533 | methods: { |
| 534 | save(date) { | 534 | save(date) { |
| 535 | this.$refs.menu1.save(date); | 535 | this.$refs.menu1.save(date); |
| 536 | }, | 536 | }, |
| 537 | dates: function(date) { | 537 | dates: function(date) { |
| 538 | return moment(date).format("MMMM DD, YYYY"); | 538 | return moment(date).format("MMMM DD, YYYY"); |
| 539 | }, | 539 | }, |
| 540 | // profile(item) { | 540 | // profile(item) { |
| 541 | // this.editedIndex = this.InvoiceList.indexOf(item); | 541 | // this.editedIndex = this.InvoiceList.indexOf(item); |
| 542 | // this.editedItem = Object.assign({}, item); | 542 | // this.editedItem = Object.assign({}, item); |
| 543 | // this.dialog1 = true; | 543 | // this.dialog1 = true; |
| 544 | // }, | 544 | // }, |
| 545 | deleteItem(item) { | 545 | deleteItem(item) { |
| 546 | let deleteInvoice = { | 546 | let deleteInvoice = { |
| 547 | invoiceId: item._id | 547 | invoiceId: item._id |
| 548 | }; | 548 | }; |
| 549 | http() | 549 | http() |
| 550 | .delete( | 550 | .delete( |
| 551 | "/deleteInvoice", | 551 | "/deleteInvoice", |
| 552 | confirm("Are you sure you want to delete this?") && { | 552 | confirm("Are you sure you want to delete this?") && { |
| 553 | params: deleteInvoice | 553 | params: deleteInvoice |
| 554 | } | 554 | } |
| 555 | ) | 555 | ) |
| 556 | .then(response => { | 556 | .then(response => { |
| 557 | this.snackbar = true; | 557 | this.snackbar = true; |
| 558 | this.text = "Successfully delete Existing Invoice"; | 558 | this.text = "Successfully delete Existing Invoice"; |
| 559 | this.color = "green"; | 559 | this.color = "green"; |
| 560 | this.getInvoiceList(); | 560 | this.getInvoiceList(); |
| 561 | }) | 561 | }) |
| 562 | .catch(error => { | 562 | .catch(error => { |
| 563 | // console.log(error); | 563 | // console.log(error); |
| 564 | }); | 564 | }); |
| 565 | }, | 565 | }, |
| 566 | close() { | 566 | close() { |
| 567 | this.dialog = false; | 567 | this.dialog = false; |
| 568 | }, | 568 | }, |
| 569 | // totalAmount() { | 569 | // totalAmount() { |
| 570 | // // console.log("this.feeType.paidAmount ", this.feeType.paidAmount); | 570 | // // console.log("this.feeType.paidAmount ", this.feeType.paidAmount); |
| 571 | // // console.log( | 571 | // // console.log( |
| 572 | // // "this.feeType.subTotalAAAAAAAAAAAAAAA ", | 572 | // // "this.feeType.subTotalAAAAAAAAAAAAAAA ", |
| 573 | // // this.feeType.subTotal | 573 | // // this.feeType.subTotal |
| 574 | // // ); | 574 | // // ); |
| 575 | 575 | ||
| 576 | // if (this.feeType.paidAmount < this.feeType.subTotal) { | 576 | // if (this.feeType.paidAmount < this.feeType.subTotal) { |
| 577 | // console.log("this.feeType.subTotalBBBBBBBBBBB ", this.feeType.subTotal); | 577 | // console.log("this.feeType.subTotalBBBBBBBBBBB ", this.feeType.subTotal); |
| 578 | 578 | ||
| 579 | // this.feeType.paidAmount = this.feeType.subTotal; | 579 | // this.feeType.paidAmount = this.feeType.subTotal; |
| 580 | // console.log( | 580 | // console.log( |
| 581 | // "this.feeType.paidAmount BBBBBBBBBBB", | 581 | // "this.feeType.paidAmount BBBBBBBBBBB", |
| 582 | // this.feeType.paidAmount | 582 | // this.feeType.paidAmount |
| 583 | // ); | 583 | // ); |
| 584 | // } | 584 | // } |
| 585 | // }, | 585 | // }, |
| 586 | submit() { | 586 | submit() { |
| 587 | let feeTypeId = ""; | 587 | let feeTypeId = ""; |
| 588 | for (let i = 0; i < this.feeTypes.length; i++) { | 588 | for (let i = 0; i < this.feeTypes.length; i++) { |
| 589 | if (this.feeTypes[i].feeType === this.feeType.feeTypeName) { | 589 | if (this.feeTypes[i].feeType === this.feeType.feeTypeName) { |
| 590 | feeTypeId = this.feeTypes[i]._id; | 590 | feeTypeId = this.feeTypes[i]._id; |
| 591 | } | 591 | } |
| 592 | } | 592 | } |
| 593 | if (this.$refs.form.validate()) { | 593 | if (this.$refs.form.validate()) { |
| 594 | let invoiceData = { | 594 | let invoiceData = { |
| 595 | classId: this.invoiceData.classNum, | 595 | classId: this.invoiceData.classNum, |
| 596 | students: this.invoiceData.students, | 596 | students: this.invoiceData.students, |
| 597 | date: this.invoiceData.date, | 597 | date: this.invoiceData.date, |
| 598 | paymentStatus: this.invoiceData.paymentStatus, | 598 | paymentStatus: this.invoiceData.paymentStatus, |
| 599 | paymentMethod: this.invoiceData.paymentMethod, | 599 | paymentMethod: this.invoiceData.paymentMethod, |
| 600 | feeType: this.feeTypeData, | 600 | feeType: this.feeTypeData, |
| 601 | totalAmount: this.feeType.amount, | 601 | totalAmount: this.feeType.amount, |
| 602 | totalDiscount: this.feeType.discount, | 602 | totalDiscount: this.feeType.discount, |
| 603 | totalSubTotal: this.feeType.subTotal, | 603 | totalSubTotal: this.feeType.subTotal, |
| 604 | totalPaidAmount: this.feeType.paidAmount | 604 | totalPaidAmount: this.feeType.paidAmount |
| 605 | }; | 605 | }; |
| 606 | if (invoiceData.paymentStatus == "NOT_PAID") { | 606 | if (invoiceData.paymentStatus == "NOT_PAID") { |
| 607 | delete invoiceData.totalPaidAmount; | 607 | delete invoiceData.totalPaidAmount; |
| 608 | } | 608 | } |
| 609 | http() | 609 | http() |
| 610 | .post("/createInvoice", invoiceData) | 610 | .post("/createInvoice", invoiceData) |
| 611 | .then(response => { | 611 | .then(response => { |
| 612 | this.getInvoiceList(); | 612 | this.getInvoiceList(); |
| 613 | this.snackbar = true; | 613 | this.snackbar = true; |
| 614 | this.text = "New Invoice added successfully"; | 614 | this.text = "New Invoice added successfully"; |
| 615 | this.color = "green"; | 615 | this.color = "green"; |
| 616 | this.clear(); | 616 | this.clear(); |
| 617 | this.feeTypeData = []; | 617 | this.feeTypeData = []; |
| 618 | if (this.feeTypeData.length == 0) { | 618 | if (this.feeTypeData.length == 0) { |
| 619 | this.feeType = { | 619 | this.feeType = { |
| 620 | amount: "0.00", | 620 | amount: "0.00", |
| 621 | discount: "0.00", | 621 | discount: "0.00", |
| 622 | paidAmount: "0.00", | 622 | paidAmount: "0.00", |
| 623 | subTotal: "0.00", | 623 | subTotal: "0.00", |
| 624 | feeTypeList: "" | 624 | feeTypeList: "" |
| 625 | }; | 625 | }; |
| 626 | } | 626 | } |
| 627 | this.loading = false; | 627 | this.loading = false; |
| 628 | this.addInvoiceDialog = false; | 628 | this.addInvoiceDialog = false; |
| 629 | }) | 629 | }) |
| 630 | .catch(error => { | 630 | .catch(error => { |
| 631 | this.snackbar = true; | 631 | this.snackbar = true; |
| 632 | this.text = error.response.data.errors[0].messages[0]; | 632 | this.text = error.response.data.errors[0].messages[0]; |
| 633 | this.color = "error"; | 633 | this.color = "error"; |
| 634 | this.loading = false; | 634 | this.loading = false; |
| 635 | }); | 635 | }); |
| 636 | } | 636 | } |
| 637 | }, | 637 | }, |
| 638 | clear() { | 638 | clear() { |
| 639 | this.$refs.form.reset(); | 639 | this.$refs.form.reset(); |
| 640 | }, | 640 | }, |
| 641 | getInvoiceList() { | 641 | getInvoiceList() { |
| 642 | this.showLoader = true; | 642 | this.showLoader = true; |
| 643 | http() | 643 | http() |
| 644 | .get("/getInvoicesList", { | 644 | .get("/getInvoicesList", { |
| 645 | params: { schoolId: this.$store.state.schoolId }, | 645 | params: { schoolId: this.$store.state.schoolId }, |
| 646 | headers: { Authorization: "Bearer " + this.token } | 646 | headers: { Authorization: "Bearer " + this.token } |
| 647 | }) | 647 | }) |
| 648 | .then(response => { | 648 | .then(response => { |
| 649 | this.invoiceList = response.data.data; | 649 | this.invoiceList = response.data.data; |
| 650 | this.showLoader = false; | 650 | this.showLoader = false; |
| 651 | }) | 651 | }) |
| 652 | .catch(error => { | 652 | .catch(error => { |
| 653 | // console.log("err====>", err); | 653 | // console.log("err====>", err); |
| 654 | this.showLoader = false; | 654 | this.showLoader = false; |
| 655 | if (error.response.status === 401) { | 655 | if (error.response.status === 401) { |
| 656 | this.$router.replace({ path: "/" }); | 656 | this.$router.replace({ path: "/" }); |
| 657 | this.$store.dispatch("setToken", null); | 657 | this.$store.dispatch("setToken", null); |
| 658 | this.$store.dispatch("Id", null); | 658 | this.$store.dispatch("Id", null); |
| 659 | } | 659 | } |
| 660 | }); | 660 | }); |
| 661 | }, | 661 | }, |
| 662 | selectFeeType() { | 662 | selectFeeType() { |
| 663 | this.showFeeType = true; | 663 | this.showFeeType = true; |
| 664 | this.feeTypeData.push({ feeTypeName: this.feeType.feeTypeName }); | 664 | this.feeTypeData.push({ feeTypeName: this.feeType.feeTypeName }); |
| 665 | }, | 665 | }, |
| 666 | deleteSelectFee: function(index) { | 666 | deleteSelectFee: function(index) { |
| 667 | this.feeTypeData.splice(index, 1); | 667 | this.feeTypeData.splice(index, 1); |
| 668 | for (let i = 0; i < this.feeTypeData.length; i++) { | 668 | for (let i = 0; i < this.feeTypeData.length; i++) { |
| 669 | this.feeType = this.feeTypeData[i]; | 669 | this.feeType = this.feeTypeData[i]; |
| 670 | } | 670 | } |
| 671 | if (this.feeTypeData.length == 0) { | 671 | if (this.feeTypeData.length == 0) { |
| 672 | this.feeType = { | 672 | this.feeType = { |
| 673 | amount: "0.00", | 673 | amount: "0.00", |
| 674 | discount: "0.00", | 674 | discount: "0.00", |
| 675 | paidAmount: "0.00", | 675 | paidAmount: "0.00", |
| 676 | subTotal: "0.00", | 676 | subTotal: "0.00", |
| 677 | feeTypeName: "" | 677 | feeTypeName: "" |
| 678 | }; | 678 | }; |
| 679 | } | 679 | } |
| 680 | }, | 680 | }, |
| 681 | getAllClasses() { | 681 | getAllClasses() { |
| 682 | http() | 682 | http() |
| 683 | .get("/getClassesList", { | 683 | .get("/getClassesList", { |
| 684 | params: { schoolId: this.$store.state.schoolId }, | 684 | params: { schoolId: this.$store.state.schoolId }, |
| 685 | headers: { Authorization: "Bearer " + this.token } | 685 | headers: { Authorization: "Bearer " + this.token } |
| 686 | }) | 686 | }) |
| 687 | .then(response => { | 687 | .then(response => { |
| 688 | this.addclass = response.data.data; | 688 | this.addclass = response.data.data; |
| 689 | }) | 689 | }) |
| 690 | .catch(err => { | 690 | .catch(err => { |
| 691 | // console.log("err====>", err); | 691 | // console.log("err====>", err); |
| 692 | // this.$router.replace({ path: "/" }); | 692 | // this.$router.replace({ path: "/" }); |
| 693 | }); | 693 | }); |
| 694 | }, | 694 | }, |
| 695 | getAllStudents() { | 695 | getAllStudents() { |
| 696 | this.showLoader = true; | 696 | this.showLoader = true; |
| 697 | http() | 697 | http() |
| 698 | .get("/getStudentsList", { | 698 | .get("/getStudentsList", { |
| 699 | params: { | 699 | params: { |
| 700 | classId: this.invoiceData.classNum, | 700 | classId: this.invoiceData.classNum, |
| 701 | schoolId: this.$store.state.schoolId | 701 | schoolId: this.$store.state.schoolId |
| 702 | }, | 702 | }, |
| 703 | headers: { Authorization: "Bearer " + this.token } | 703 | headers: { Authorization: "Bearer " + this.token } |
| 704 | }) | 704 | }) |
| 705 | .then(response => { | 705 | .then(response => { |
| 706 | response.data.data.unshift({ | 706 | response.data.data.unshift({ |
| 707 | name: "Select All", | 707 | name: "Select All", |
| 708 | _id: "Select All" | 708 | _id: "Select All" |
| 709 | }); | 709 | }); |
| 710 | this.studentList = response.data.data; | 710 | this.studentList = response.data.data; |
| 711 | this.showLoader = false; | 711 | this.showLoader = false; |
| 712 | }) | 712 | }) |
| 713 | .catch(err => { | 713 | .catch(err => { |
| 714 | this.showLoader = false; | 714 | this.showLoader = false; |
| 715 | // console.log("err====>", err); | 715 | // console.log("err====>", err); |
| 716 | // this.$router.replace({ path: "/" }); | 716 | // this.$router.replace({ path: "/" }); |
| 717 | }); | 717 | }); |
| 718 | }, | 718 | }, |
| 719 | getfeeType() { | 719 | getfeeType() { |
| 720 | http() | 720 | http() |
| 721 | .get("/getFeesList", { | 721 | .get("/getFeesList", { |
| 722 | params: { | 722 | params: { |
| 723 | schoolId: this.$store.state.schoolId | 723 | schoolId: this.$store.state.schoolId |
| 724 | }, | 724 | }, |
| 725 | headers: { Authorization: "Bearer " + this.token } | 725 | headers: { Authorization: "Bearer " + this.token } |
| 726 | }) | 726 | }) |
| 727 | .then(response => { | 727 | .then(response => { |
| 728 | this.feeTypes = response.data.data; | 728 | this.feeTypes = response.data.data; |
| 729 | }) | 729 | }) |
| 730 | .catch(err => { | 730 | .catch(err => { |
| 731 | // console.log("err====>", err); | 731 | // console.log("err====>", err); |
| 732 | // this.$router.replace({ path: "/" }); | 732 | // this.$router.replace({ path: "/" }); |
| 733 | }); | 733 | }); |
| 734 | }, | 734 | }, |
| 735 | getAmmountDetails(feeTyp) { | 735 | getAmmountDetails(feeTyp) { |
| 736 | let feeType = { | 736 | let feeType = { |
| 737 | amount: "", | 737 | amount: "", |
| 738 | discount: "", | 738 | discount: "", |
| 739 | subTotal: "", | 739 | subTotal: "", |
| 740 | subParticularTotal: "", | 740 | subParticularTotal: "", |
| 741 | paidAmount: "" | 741 | paidAmount: "" |
| 742 | }; | 742 | }; |
| 743 | for (let i = 0; i < this.feeTypeData.length; i++) { | 743 | for (let i = 0; i < this.feeTypeData.length; i++) { |
| 744 | // *********** AMOUNT *********** | 744 | // *********** AMOUNT *********** |
| 745 | 745 | ||
| 746 | feeType.amount = | 746 | feeType.amount = |
| 747 | Number(feeType.amount) + Number(this.feeTypeData[i].amount); | 747 | Number(feeType.amount) + Number(this.feeTypeData[i].amount); |
| 748 | // console.log("feeType.amount ", feeType.amount); | 748 | // console.log("feeType.amount ", feeType.amount); |
| 749 | this.feeType.amount = feeType.amount; | 749 | this.feeType.amount = feeType.amount; |
| 750 | this.feeType.subTotal = feeType.amount; | 750 | this.feeType.subTotal = feeType.amount; |
| 751 | this.feeTypeData[i].subTotal = this.feeTypeData[i].amount; | 751 | this.feeTypeData[i].subTotal = this.feeTypeData[i].amount; |
| 752 | 752 | ||
| 753 | // *********** DISCOUNT *********** | 753 | // *********** DISCOUNT *********** |
| 754 | 754 | ||
| 755 | if (this.feeTypeData[i].discount) { | 755 | if (this.feeTypeData[i].discount) { |
| 756 | feeType.discount = | 756 | feeType.discount = |
| 757 | Number(feeType.discount) + Number(this.feeTypeData[i].discount); | 757 | Number(feeType.discount) + Number(this.feeTypeData[i].discount); |
| 758 | // console.log("feeType.discount", feeType.discount); | 758 | // console.log("feeType.discount", feeType.discount); |
| 759 | this.feeType.discount = feeType.discount; | 759 | this.feeType.discount = feeType.discount; |
| 760 | feeType.subParticularTotal = | 760 | feeType.subParticularTotal = |
| 761 | this.feeTypeData[i].amount - | 761 | this.feeTypeData[i].amount - |
| 762 | (this.feeTypeData[i].amount * this.feeTypeData[i].discount) / 100; | 762 | (this.feeTypeData[i].amount * this.feeTypeData[i].discount) / 100; |
| 763 | this.feeTypeData[i].subTotal = feeType.subParticularTotal.toFixed(2); | 763 | this.feeTypeData[i].subTotal = feeType.subParticularTotal.toFixed(2); |
| 764 | } | 764 | } |
| 765 | 765 | ||
| 766 | // *********** SUBTOTAL *********** | 766 | // *********** SUBTOTAL *********** |
| 767 | 767 | ||
| 768 | feeType.subTotal = | 768 | feeType.subTotal = |
| 769 | Number(feeType.subTotal) + Number(this.feeTypeData[i].subTotal); | 769 | Number(feeType.subTotal) + Number(this.feeTypeData[i].subTotal); |
| 770 | this.feeType.subTotal = feeType.subTotal.toFixed(2); | 770 | this.feeType.subTotal = feeType.subTotal.toFixed(2); |
| 771 | 771 | ||
| 772 | // *********** PAID-AMOUNT *********** | 772 | // *********** PAID-AMOUNT *********** |
| 773 | 773 | ||
| 774 | feeType.paidAmount = | 774 | feeType.paidAmount = |
| 775 | Number(feeType.paidAmount) + Number(this.feeTypeData[i].paidAmount); | 775 | Number(feeType.paidAmount) + Number(this.feeTypeData[i].paidAmount); |
| 776 | this.feeType.paidAmount = feeType.paidAmount.toFixed(2); | 776 | this.feeType.paidAmount = feeType.paidAmount.toFixed(2); |
| 777 | 777 | ||
| 778 | // if paid Amount fill large of subtotal value so this condition are fixed filled subtotal value. | 778 | // if paid Amount fill large of subtotal value so this condition are fixed filled subtotal value. |
| 779 | if (feeType.paidAmount > feeType.subTotal) { | 779 | if (feeType.paidAmount > feeType.subTotal) { |
| 780 | this.feeTypeData[i].paidAmount = this.feeTypeData[i].subTotal; | 780 | this.feeTypeData[i].paidAmount = this.feeTypeData[i].subTotal; |
| 781 | this.feeType.paidAmount = feeType.subTotal; | 781 | this.feeType.paidAmount = feeType.subTotal; |
| 782 | } | 782 | } |
| 783 | } | 783 | } |
| 784 | }, | 784 | }, |
| 785 | getPayMethodList() { | 785 | getPayMethodList() { |
| 786 | if (this.invoiceData.paymentStatus == "PARTIALLY_PAID") { | 786 | if (this.invoiceData.paymentStatus == "PARTIALLY_PAID") { |
| 787 | this.showPayMethods = true; | 787 | this.showPayMethods = true; |
| 788 | } else if (this.invoiceData.paymentStatus == "FULLY_PAID") { | 788 | } else if (this.invoiceData.paymentStatus == "FULLY_PAID") { |
| 789 | this.showPayMethods = true; | 789 | this.showPayMethods = true; |
| 790 | } else { | 790 | } else { |
| 791 | this.showPayMethods = false; | 791 | this.showPayMethods = false; |
| 792 | } | 792 | } |
| 793 | }, | 793 | }, |
| 794 | selectAllStudent() { | 794 | selectAllStudent() { |
| 795 | console.log("this.studentId", this.invoiceData.studentId); | 795 | console.log("this.studentId", this.invoiceData.studentId); |
| 796 | this.invoiceData.students = []; | 796 | this.invoiceData.students = []; |
| 797 | if (this.invoiceData.studentId === "Select All") { | 797 | if (this.invoiceData.studentId === "Select All") { |
| 798 | for (let i = 1; i < this.studentList.length; i++) { | 798 | for (let i = 1; i < this.studentList.length; i++) { |
| 799 | this.invoiceData.students.push(this.studentList[i]._id); | 799 | this.invoiceData.students.push(this.studentList[i]._id); |
| 800 | console.log("data", this.invoiceData.students); | 800 | console.log("data", this.invoiceData.students); |
| 801 | // data.push(this.studentList[i]._id); | 801 | // data.push(this.studentList[i]._id); |
| 802 | // console.log("data", data); | 802 | // console.log("data", data); |
| 803 | } | 803 | } |
| 804 | } else { | 804 | } else { |
| 805 | this.invoiceData.students.push(this.invoiceData.studentId); | 805 | this.invoiceData.students.push(this.invoiceData.studentId); |
| 806 | } | 806 | } |
| 807 | }, | 807 | }, |
| 808 | displaySearch() { | 808 | displaySearch() { |
| 809 | (this.show = false), (this.showSearch = true); | 809 | (this.show = false), (this.showSearch = true); |
| 810 | }, | 810 | }, |
| 811 | closeSearch() { | 811 | closeSearch() { |
| 812 | this.showSearch = false; | 812 | this.showSearch = false; |
| 813 | this.show = true; | 813 | this.show = true; |
| 814 | this.search = ""; | 814 | this.search = ""; |
| 815 | } | 815 | } |
| 816 | }, | 816 | }, |
| 817 | mounted() { | 817 | mounted() { |
| 818 | this.token = this.$store.state.token; | 818 | this.token = this.$store.state.token; |
| 819 | this.getInvoiceList(); | 819 | this.getInvoiceList(); |
| 820 | this.getAllClasses(); | 820 | this.getAllClasses(); |
| 821 | this.getfeeType(); | 821 | this.getfeeType(); |
| 822 | } | 822 | } |
| 823 | }; | 823 | }; |
| 824 | </script> | 824 | </script> |
| 825 | 825 | ||
| 826 | 826 | ||
| 827 | <style scoped> | 827 | <style scoped> |
| 828 | table { | 828 | table { |
| 829 | border-collapse: collapse; | 829 | border-collapse: collapse; |
| 830 | border: 1px solid #e2e7eb; | 830 | border: 1px solid #e2e7eb; |
| 831 | } | 831 | } |
| 832 | 832 | ||
| 833 | th, | 833 | th, |
| 834 | .tdFeeType { | 834 | .tdFeeType { |
| 835 | border: 1px solid #e2e7eb; | 835 | border: 1px solid #e2e7eb; |
| 836 | padding: 10px; | 836 | padding: 10px; |
| 837 | text-align: center; | 837 | text-align: center; |
| 838 | } | 838 | } |
| 839 | table.feeTypeTable { | 839 | table.feeTypeTable { |
| 840 | table-layout: auto !important; | 840 | table-layout: auto !important; |
| 841 | width: 100% !important; | 841 | width: 100% !important; |
| 842 | } | 842 | } |
| 843 | </style> | 843 | </style> |
src/pages/Account/paymentHistory.vue
| 1 | <template> | 1 | <template> |
| 2 | <v-container fluid class="body-color"> | 2 | <v-container fluid class="body-color"> |
| 3 | <!-- ****** PAYMENT HOISTORY TABLE ****** --> | 3 | <!-- ****** PAYMENT HOISTORY TABLE ****** --> |
| 4 | <v-toolbar color="transparent" flat> | 4 | <v-toolbar color="transparent" flat> |
| 5 | <v-spacer></v-spacer> | 5 | <v-spacer></v-spacer> |
| 6 | <v-card-title class="body-1" v-show="show"> | 6 | <v-card-title class="body-1" v-show="show"> |
| 7 | <v-btn icon large flat @click="displaySearch"> | 7 | <v-btn icon large flat @click="displaySearch"> |
| 8 | <v-avatar size="27"> | 8 | <v-avatar size="27"> |
| 9 | <img src="/static/icon/dashboard icons-49.png" alt="icon" /> | 9 | <img src="/static/icon/search.png" alt="icon" /> |
| 10 | </v-avatar> | 10 | </v-avatar> |
| 11 | </v-btn> | 11 | </v-btn> |
| 12 | </v-card-title> | 12 | </v-card-title> |
| 13 | <v-flex xs8 sm8 md3 lg2 v-show="showSearch"> | 13 | <v-flex xs8 sm8 md3 lg2 v-show="showSearch"> |
| 14 | <v-layout> | 14 | <v-layout> |
| 15 | <v-text-field v-model="search" label="Search" prepend-inner-icon="search" color="primary"></v-text-field> | 15 | <v-text-field v-model="search" label="Search" prepend-inner-icon="search" color="primary"></v-text-field> |
| 16 | <v-icon @click="closeSearch" color="error">close</v-icon> | 16 | <v-icon @click="closeSearch" color="error">close</v-icon> |
| 17 | </v-layout> | 17 | </v-layout> |
| 18 | </v-flex> | 18 | </v-flex> |
| 19 | </v-toolbar> | 19 | </v-toolbar> |
| 20 | <v-data-table | 20 | <v-data-table |
| 21 | :headers="headers" | 21 | :headers="headers" |
| 22 | :items="paymentHistory" | 22 | :items="paymentHistory" |
| 23 | :pagination.sync="pagination" | 23 | :pagination.sync="pagination" |
| 24 | :search="search" | 24 | :search="search" |
| 25 | > | 25 | > |
| 26 | <template slot="items" slot-scope="props"> | 26 | <template slot="items" slot-scope="props"> |
| 27 | <tr class="tr"> | 27 | <tr class="tr"> |
| 28 | <td class="td td-row ">{{ props.index + 1 }}</td> | 28 | <td class="td td-row ">{{ props.index + 1 }}</td> |
| 29 | <td class="td td-row text-xs-center">{{ props.item.studentId.name }}</td> | 29 | <td class="td td-row text-xs-center">{{ props.item.studentId.name }}</td> |
| 30 | <td class="td td-row text-xs-center">{{ props.item.classId.classNum }}</td> | 30 | <td class="td td-row text-xs-center">{{ props.item.classId.classNum }}</td> |
| 31 | <td class="td td-row text-xs-center">{{ props.item.feeType[0].feeTypeName }}</td> | 31 | <td class="td td-row text-xs-center">{{ props.item.feeType[0].feeTypeName }}</td> |
| 32 | <td class="td td-row text-xs-center">{{ props.item.paymentMethod }}</td> | 32 | <td class="td td-row text-xs-center">{{ props.item.paymentMethod }}</td> |
| 33 | <td class="td td-row text-xs-center">{{ props.item.totalPaidAmount }}</td> | 33 | <td class="td td-row text-xs-center">{{ props.item.totalPaidAmount }}</td> |
| 34 | <td class="td td-row text-xs-center">{{ dates(props.item.date) }}</td> | 34 | <td class="td td-row text-xs-center">{{ dates(props.item.date) }}</td> |
| 35 | <!-- <td class="text-xs-center"> | 35 | <!-- <td class="text-xs-center"> |
| 36 | <span> | 36 | <span> |
| 37 | <v-tooltip top> | 37 | <v-tooltip top> |
| 38 | <img | 38 | <img |
| 39 | slot="activator" | 39 | slot="activator" |
| 40 | style="cursor:pointer; width:20px; height:18px; " | 40 | style="cursor:pointer; width:20px; height:18px; " |
| 41 | class="mr-5" | 41 | class="mr-5" |
| 42 | @click="editItem(props.item)" | 42 | @click="editItem(props.item)" |
| 43 | src="/static/icon/edit1.png" | 43 | src="/static/icon/edit1.png" |
| 44 | /> | 44 | /> |
| 45 | <span>Edit</span> | 45 | <span>Edit</span> |
| 46 | </v-tooltip> | 46 | </v-tooltip> |
| 47 | <v-tooltip top> | 47 | <v-tooltip top> |
| 48 | <img | 48 | <img |
| 49 | slot="activator" | 49 | slot="activator" |
| 50 | style="cursor:pointer;width:20px; height:20px; " | 50 | style="cursor:pointer;width:20px; height:20px; " |
| 51 | class="mr-5" | 51 | class="mr-5" |
| 52 | @click="deleteItem(props.item)" | 52 | @click="deleteItem(props.item)" |
| 53 | src="/static/icon/delete1.png" | 53 | src="/static/icon/delete1.png" |
| 54 | /> | 54 | /> |
| 55 | <span>Delete</span> | 55 | <span>Delete</span> |
| 56 | </v-tooltip> | 56 | </v-tooltip> |
| 57 | </span> | 57 | </span> |
| 58 | </td>--> | 58 | </td>--> |
| 59 | </tr> | 59 | </tr> |
| 60 | </template> | 60 | </template> |
| 61 | <v-alert | 61 | <v-alert |
| 62 | slot="no-results" | 62 | slot="no-results" |
| 63 | :value="true" | 63 | :value="true" |
| 64 | color="error" | 64 | color="error" |
| 65 | icon="warning" | 65 | icon="warning" |
| 66 | >Your search for "{{ search }}" found no results.</v-alert> | 66 | >Your search for "{{ search }}" found no results.</v-alert> |
| 67 | </v-data-table> | 67 | </v-data-table> |
| 68 | <div class="loader" v-if="showLoader"> | 68 | <div class="loader" v-if="showLoader"> |
| 69 | <v-progress-circular indeterminate color="white"></v-progress-circular> | 69 | <v-progress-circular indeterminate color="white"></v-progress-circular> |
| 70 | </div> | 70 | </div> |
| 71 | </v-container> | 71 | </v-container> |
| 72 | </template> | 72 | </template> |
| 73 | 73 | ||
| 74 | <script> | 74 | <script> |
| 75 | import http from "@/Services/http.js"; | 75 | import http from "@/Services/http.js"; |
| 76 | import moment from "moment"; | 76 | import moment from "moment"; |
| 77 | 77 | ||
| 78 | export default { | 78 | export default { |
| 79 | data: () => ({ | 79 | data: () => ({ |
| 80 | showLoader: false, | 80 | showLoader: false, |
| 81 | search: "", | 81 | search: "", |
| 82 | show: true, | 82 | show: true, |
| 83 | showSearch: false, | 83 | showSearch: false, |
| 84 | pagination: { | 84 | pagination: { |
| 85 | rowsPerPage: 10 | 85 | rowsPerPage: 10 |
| 86 | }, | 86 | }, |
| 87 | headers: [ | 87 | headers: [ |
| 88 | { | 88 | { |
| 89 | text: "No", | 89 | text: "No", |
| 90 | align: "", | 90 | align: "", |
| 91 | sortable: false, | 91 | sortable: false, |
| 92 | value: "No" | 92 | value: "No" |
| 93 | }, | 93 | }, |
| 94 | { | 94 | { |
| 95 | text: "Student", | 95 | text: "Student", |
| 96 | value: "student", | 96 | value: "student", |
| 97 | sortable: false, | 97 | sortable: false, |
| 98 | align: "center" | 98 | align: "center" |
| 99 | }, | 99 | }, |
| 100 | { text: "Class", value: "class", sortable: false, align: "center" }, | 100 | { text: "Class", value: "class", sortable: false, align: "center" }, |
| 101 | { | 101 | { |
| 102 | text: "Fee Type", | 102 | text: "Fee Type", |
| 103 | value: "feeTypeName", | 103 | value: "feeTypeName", |
| 104 | sortable: false, | 104 | sortable: false, |
| 105 | align: "center" | 105 | align: "center" |
| 106 | }, | 106 | }, |
| 107 | { | 107 | { |
| 108 | text: "Method", | 108 | text: "Method", |
| 109 | value: "paymentMethod", | 109 | value: "paymentMethod", |
| 110 | sortable: false, | 110 | sortable: false, |
| 111 | align: "center" | 111 | align: "center" |
| 112 | }, | 112 | }, |
| 113 | { | 113 | { |
| 114 | text: "Paid Amount", | 114 | text: "Paid Amount", |
| 115 | value: "totalPaidAmount", | 115 | value: "totalPaidAmount", |
| 116 | sortable: false, | 116 | sortable: false, |
| 117 | align: "center" | 117 | align: "center" |
| 118 | }, | 118 | }, |
| 119 | { | 119 | { |
| 120 | text: "Date", | 120 | text: "Date", |
| 121 | value: "date", | 121 | value: "date", |
| 122 | sortable: false, | 122 | sortable: false, |
| 123 | align: "center" | 123 | align: "center" |
| 124 | } | 124 | } |
| 125 | // { text: "Action", value: "", sortable: false, align: "center" } | 125 | // { text: "Action", value: "", sortable: false, align: "center" } |
| 126 | ], | 126 | ], |
| 127 | paymentHistory: [], | 127 | paymentHistory: [], |
| 128 | addPaymentHistoryDialog: "" | 128 | addPaymentHistoryDialog: "" |
| 129 | }), | 129 | }), |
| 130 | methods: { | 130 | methods: { |
| 131 | dates: function(date) { | 131 | dates: function(date) { |
| 132 | return moment(date).format("MMMM DD, YYYY"); | 132 | return moment(date).format("MMMM DD, YYYY"); |
| 133 | }, | 133 | }, |
| 134 | getPaymentHistory() { | 134 | getPaymentHistory() { |
| 135 | this.showLoader = true; | 135 | this.showLoader = true; |
| 136 | var token = this.$store.state.token; | 136 | var token = this.$store.state.token; |
| 137 | http() | 137 | http() |
| 138 | .get("/getInvoicesList", { | 138 | .get("/getInvoicesList", { |
| 139 | params: { | 139 | params: { |
| 140 | paymentStatus: "FULLY_PAID", | 140 | paymentStatus: "FULLY_PAID", |
| 141 | schoolId: this.$store.state.schoolId | 141 | schoolId: this.$store.state.schoolId |
| 142 | }, | 142 | }, |
| 143 | headers: { Authorization: "Bearer " + token } | 143 | headers: { Authorization: "Bearer " + token } |
| 144 | }) | 144 | }) |
| 145 | .then(response => { | 145 | .then(response => { |
| 146 | this.paymentHistory = response.data.data; | 146 | this.paymentHistory = response.data.data; |
| 147 | this.showLoader = false; | 147 | this.showLoader = false; |
| 148 | }) | 148 | }) |
| 149 | .catch(error => { | 149 | .catch(error => { |
| 150 | this.showLoader = false; | 150 | this.showLoader = false; |
| 151 | if (error.response.status === 401) { | 151 | if (error.response.status === 401) { |
| 152 | this.$router.replace({ path: "/" }); | 152 | this.$router.replace({ path: "/" }); |
| 153 | this.$store.dispatch("setToken", null); | 153 | this.$store.dispatch("setToken", null); |
| 154 | this.$store.dispatch("Id", null); | 154 | this.$store.dispatch("Id", null); |
| 155 | this.$store.dispatch("Role", null); | 155 | this.$store.dispatch("Role", null); |
| 156 | } | 156 | } |
| 157 | }); | 157 | }); |
| 158 | }, | 158 | }, |
| 159 | displaySearch() { | 159 | displaySearch() { |
| 160 | (this.show = false), (this.showSearch = true); | 160 | (this.show = false), (this.showSearch = true); |
| 161 | }, | 161 | }, |
| 162 | closeSearch() { | 162 | closeSearch() { |
| 163 | this.showSearch = false; | 163 | this.showSearch = false; |
| 164 | this.show = true; | 164 | this.show = true; |
| 165 | this.search = ""; | 165 | this.search = ""; |
| 166 | } | 166 | } |
| 167 | // getRole() { | 167 | // getRole() { |
| 168 | // this.showLoader = true; | 168 | // this.showLoader = true; |
| 169 | // var token = this.$store.state.token; | 169 | // var token = this.$store.state.token; |
| 170 | // http() | 170 | // http() |
| 171 | // .get("/getRolesList", { | 171 | // .get("/getRolesList", { |
| 172 | // headers: { Authorization: "Bearer " + token } | 172 | // headers: { Authorization: "Bearer " + token } |
| 173 | // }) | 173 | // }) |
| 174 | // .then(response => { | 174 | // .then(response => { |
| 175 | // this.userRole = response.data.data; | 175 | // this.userRole = response.data.data; |
| 176 | // this.showLoader = false; | 176 | // this.showLoader = false; |
| 177 | // // console.log("UserList=====>",this.desserts) | 177 | // // console.log("UserList=====>",this.desserts) |
| 178 | // }) | 178 | // }) |
| 179 | // .catch(error => { | 179 | // .catch(error => { |
| 180 | // this.showLoader = false; | 180 | // this.showLoader = false; |
| 181 | // if (error.response.status === 401) { | 181 | // if (error.response.status === 401) { |
| 182 | // this.$router.replace({ path: "/" }); | 182 | // this.$router.replace({ path: "/" }); |
| 183 | // this.$store.dispatch("setToken", null); | 183 | // this.$store.dispatch("setToken", null); |
| 184 | // this.$store.dispatch("Id", null); | 184 | // this.$store.dispatch("Id", null); |
| 185 | // } | 185 | // } |
| 186 | // }); | 186 | // }); |
| 187 | // } | 187 | // } |
| 188 | }, | 188 | }, |
| 189 | mounted() { | 189 | mounted() { |
| 190 | this.getPaymentHistory(); | 190 | this.getPaymentHistory(); |
| 191 | // this.getRole(); | 191 | // this.getRole(); |
| 192 | } | 192 | } |
| 193 | }; | 193 | }; |
| 194 | </script> | 194 | </script> |
src/pages/Administrator/academicYear.vue
| 1 | <template> | 1 | <template> |
| 2 | <v-container fluid class="body-color"> | 2 | <v-container fluid class="body-color"> |
| 3 | <!-- ****** EDIT ACADEMIC YEAR ****** --> | 3 | <!-- ****** EDIT ACADEMIC YEAR ****** --> |
| 4 | <v-dialog v-model="editAcademinYearDialog" max-width="600px"> | 4 | <v-dialog v-model="editAcademinYearDialog" max-width="600px"> |
| 5 | <v-card flat class="card-style pa-2" dark> | 5 | <v-card flat class="card-style pa-2" dark> |
| 6 | <v-layout> | 6 | <v-layout> |
| 7 | <v-flex xs12> | 7 | <v-flex xs12> |
| 8 | <label class="title text-xs-center">Edit Academin Year</label> | 8 | <label class="title text-xs-center">Edit Academin Year</label> |
| 9 | <v-icon size="24" class="right" @click="editAcademinYearDialog = false">cancel</v-icon> | 9 | <v-icon size="24" class="right" @click="editAcademinYearDialog = 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-flex xs12 sm12> | 13 | <v-flex xs12 sm12> |
| 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">Year:</label> | 16 | <label class="right">Year:</label> |
| 17 | </v-flex> | 17 | </v-flex> |
| 18 | <v-flex xs8 sm7 class="ml-3"> | 18 | <v-flex xs8 sm7 class="ml-3"> |
| 19 | <v-text-field | 19 | <v-text-field |
| 20 | v-model="editedItem.year" | 20 | v-model="editedItem.year" |
| 21 | placeholder="fill your Title" | 21 | placeholder="fill your Title" |
| 22 | name="name" | 22 | name="name" |
| 23 | type="text" | 23 | type="text" |
| 24 | ></v-text-field> | 24 | ></v-text-field> |
| 25 | </v-flex> | 25 | </v-flex> |
| 26 | </v-layout> | 26 | </v-layout> |
| 27 | </v-flex> | 27 | </v-flex> |
| 28 | <v-flex xs12 sm12> | 28 | <v-flex xs12 sm12> |
| 29 | <v-layout> | 29 | <v-layout> |
| 30 | <v-flex xs4 class="pt-4 subheading"> | 30 | <v-flex xs4 class="pt-4 subheading"> |
| 31 | <label class="right">Year Title:</label> | 31 | <label class="right">Year Title:</label> |
| 32 | </v-flex> | 32 | </v-flex> |
| 33 | <v-flex xs8 sm7 class="ml-3"> | 33 | <v-flex xs8 sm7 class="ml-3"> |
| 34 | <v-text-field | 34 | <v-text-field |
| 35 | v-model="editedItem.yearTitle" | 35 | v-model="editedItem.yearTitle" |
| 36 | placeholder="fill your Year Title" | 36 | placeholder="fill your Year Title" |
| 37 | name="name" | 37 | name="name" |
| 38 | type="text" | 38 | type="text" |
| 39 | ></v-text-field> | 39 | ></v-text-field> |
| 40 | </v-flex> | 40 | </v-flex> |
| 41 | </v-layout> | 41 | </v-layout> |
| 42 | </v-flex> | 42 | </v-flex> |
| 43 | <v-flex xs12 sm12> | 43 | <v-flex xs12 sm12> |
| 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 hidden-xs-only hidden-sm-only">Starting Date:</label> | 46 | <label class="right hidden-xs-only hidden-sm-only">Starting Date:</label> |
| 47 | <label class="right hidden-md-only hidden-lg-only hidden-xl-only">StartingDate:</label> | 47 | <label class="right hidden-md-only hidden-lg-only hidden-xl-only">StartingDate:</label> |
| 48 | </v-flex> | 48 | </v-flex> |
| 49 | <v-flex xs8 sm7 class="ml-3"> | 49 | <v-flex xs8 sm7 class="ml-3"> |
| 50 | <v-menu | 50 | <v-menu |
| 51 | ref="menu" | 51 | ref="menu" |
| 52 | :close-on-content-click="false" | 52 | :close-on-content-click="false" |
| 53 | v-model="menu" | 53 | v-model="menu" |
| 54 | :nudge-right="40" | 54 | :nudge-right="40" |
| 55 | lazy | 55 | lazy |
| 56 | transition="scale-transition" | 56 | transition="scale-transition" |
| 57 | offset-y | 57 | offset-y |
| 58 | full-width | 58 | full-width |
| 59 | min-width="290px" | 59 | min-width="290px" |
| 60 | > | 60 | > |
| 61 | <v-text-field | 61 | <v-text-field |
| 62 | slot="activator" | 62 | slot="activator" |
| 63 | v-model="editedItem.startingDate" | 63 | v-model="editedItem.startingDate" |
| 64 | placeholder="Select date" | 64 | placeholder="Select date" |
| 65 | ></v-text-field> | 65 | ></v-text-field> |
| 66 | <v-date-picker | 66 | <v-date-picker |
| 67 | color="info" | 67 | color="info" |
| 68 | ref="picker" | 68 | ref="picker" |
| 69 | v-model="editedItem.startingDate" | 69 | v-model="editedItem.startingDate" |
| 70 | @input="$refs.menu.save(editedItem.startingDate)" | 70 | @input="$refs.menu.save(editedItem.startingDate)" |
| 71 | ></v-date-picker> | 71 | ></v-date-picker> |
| 72 | </v-menu> | 72 | </v-menu> |
| 73 | </v-flex> | 73 | </v-flex> |
| 74 | </v-layout> | 74 | </v-layout> |
| 75 | </v-flex> | 75 | </v-flex> |
| 76 | <v-flex xs12 sm12> | 76 | <v-flex xs12 sm12> |
| 77 | <v-layout> | 77 | <v-layout> |
| 78 | <v-flex xs4 class="pt-4 subheading"> | 78 | <v-flex xs4 class="pt-4 subheading"> |
| 79 | <label class="right hidden-xs-only hidden-sm-only">Ending Date:</label> | 79 | <label class="right hidden-xs-only hidden-sm-only">Ending Date:</label> |
| 80 | <label class="right hidden-md-only hidden-lg-only hidden-xl-only">EndingDate:</label> | 80 | <label class="right hidden-md-only hidden-lg-only hidden-xl-only">EndingDate:</label> |
| 81 | </v-flex> | 81 | </v-flex> |
| 82 | <v-flex xs8 sm7 class="ml-3"> | 82 | <v-flex xs8 sm7 class="ml-3"> |
| 83 | <v-menu | 83 | <v-menu |
| 84 | ref="menuEndDate" | 84 | ref="menuEndDate" |
| 85 | :close-on-content-click="false" | 85 | :close-on-content-click="false" |
| 86 | v-model="menuEndDate" | 86 | v-model="menuEndDate" |
| 87 | :nudge-right="40" | 87 | :nudge-right="40" |
| 88 | lazy | 88 | lazy |
| 89 | transition="scale-transition" | 89 | transition="scale-transition" |
| 90 | offset-y | 90 | offset-y |
| 91 | full-width | 91 | full-width |
| 92 | min-width="290px" | 92 | min-width="290px" |
| 93 | > | 93 | > |
| 94 | <v-text-field | 94 | <v-text-field |
| 95 | slot="activator" | 95 | slot="activator" |
| 96 | v-model="editedItem.endingDate" | 96 | v-model="editedItem.endingDate" |
| 97 | placeholder="Select date" | 97 | placeholder="Select date" |
| 98 | ></v-text-field> | 98 | ></v-text-field> |
| 99 | <v-date-picker | 99 | <v-date-picker |
| 100 | color="info" | 100 | color="info" |
| 101 | ref="picker" | 101 | ref="picker" |
| 102 | v-model="editedItem.endingDate" | 102 | v-model="editedItem.endingDate" |
| 103 | @input="$refs.menuEndDate.save(editedItem.endingDate)" | 103 | @input="$refs.menuEndDate.save(editedItem.endingDate)" |
| 104 | ></v-date-picker> | 104 | ></v-date-picker> |
| 105 | </v-menu> | 105 | </v-menu> |
| 106 | </v-flex> | 106 | </v-flex> |
| 107 | </v-layout> | 107 | </v-layout> |
| 108 | </v-flex> | 108 | </v-flex> |
| 109 | <v-layout> | 109 | <v-layout> |
| 110 | <v-flex xs12> | 110 | <v-flex xs12> |
| 111 | <v-card-actions class="hidden-xs-only hidden-sm-only"> | 111 | <v-card-actions class="hidden-xs-only hidden-sm-only"> |
| 112 | <v-spacer></v-spacer> | 112 | <v-spacer></v-spacer> |
| 113 | <v-btn round dark @click="save" class="add-button">Save</v-btn> | 113 | <v-btn round dark @click="save" class="add-button">Save</v-btn> |
| 114 | <v-spacer></v-spacer> | 114 | <v-spacer></v-spacer> |
| 115 | </v-card-actions> | 115 | </v-card-actions> |
| 116 | <v-card-actions class="hidden-md-only hidden-lg-only hidden-xl-only"> | 116 | <v-card-actions class="hidden-md-only hidden-lg-only hidden-xl-only"> |
| 117 | <v-spacer></v-spacer> | 117 | <v-spacer></v-spacer> |
| 118 | <v-btn round dark @click="save" class="add-button">Save</v-btn> | 118 | <v-btn round dark @click="save" class="add-button">Save</v-btn> |
| 119 | <v-spacer></v-spacer> | 119 | <v-spacer></v-spacer> |
| 120 | </v-card-actions> | 120 | </v-card-actions> |
| 121 | </v-flex> | 121 | </v-flex> |
| 122 | </v-layout> | 122 | </v-layout> |
| 123 | </v-container> | 123 | </v-container> |
| 124 | </v-card> | 124 | </v-card> |
| 125 | </v-dialog> | 125 | </v-dialog> |
| 126 | <!-- ****** PROFILE ACADEMIC YEAR DEATILS ****** --> | 126 | <!-- ****** PROFILE ACADEMIC YEAR DEATILS ****** --> |
| 127 | <v-dialog v-model="viewAcademinYearDialog" max-width="500px"> | 127 | <v-dialog v-model="viewAcademinYearDialog" max-width="500px"> |
| 128 | <v-card flat class="card-style pa-3" dark> | 128 | <v-card flat class="card-style pa-3" dark> |
| 129 | <v-layout> | 129 | <v-layout> |
| 130 | <v-flex xs12> | 130 | <v-flex xs12> |
| 131 | <label class="title text-xs-center">View Academin Year</label> | 131 | <label class="title text-xs-center">View Academin Year</label> |
| 132 | <v-icon size="24" class="right" @click="viewAcademinYearDialog = false">cancel</v-icon> | 132 | <v-icon size="24" class="right" @click="viewAcademinYearDialog = false">cancel</v-icon> |
| 133 | </v-flex> | 133 | </v-flex> |
| 134 | </v-layout> | 134 | </v-layout> |
| 135 | <v-card-text> | 135 | <v-card-text> |
| 136 | <v-container grid-list-md> | 136 | <v-container grid-list-md> |
| 137 | <v-layout wrap> | 137 | <v-layout wrap> |
| 138 | <v-flex> | 138 | <v-flex> |
| 139 | <v-layout> | 139 | <v-layout> |
| 140 | <v-flex xs5 sm6> | 140 | <v-flex xs5 sm6> |
| 141 | <h5 class="right my-1"> | 141 | <h5 class="right my-1"> |
| 142 | <b>Title:</b> | 142 | <b>Title:</b> |
| 143 | </h5> | 143 | </h5> |
| 144 | </v-flex> | 144 | </v-flex> |
| 145 | <v-flex sm6 xs7> | 145 | <v-flex sm6 xs7> |
| 146 | <h5 class="my-1">{{ editedItem.year }}</h5> | 146 | <h5 class="my-1">{{ editedItem.year }}</h5> |
| 147 | </v-flex> | 147 | </v-flex> |
| 148 | </v-layout> | 148 | </v-layout> |
| 149 | <v-layout> | 149 | <v-layout> |
| 150 | <v-flex xs5 sm6> | 150 | <v-flex xs5 sm6> |
| 151 | <h5 class="right my-1"> | 151 | <h5 class="right my-1"> |
| 152 | <b>Year Title:</b> | 152 | <b>Year Title:</b> |
| 153 | </h5> | 153 | </h5> |
| 154 | </v-flex> | 154 | </v-flex> |
| 155 | <v-flex sm6 xs7> | 155 | <v-flex sm6 xs7> |
| 156 | <h5 class="my-1">{{ editedItem.yearTitle }}</h5> | 156 | <h5 class="my-1">{{ editedItem.yearTitle }}</h5> |
| 157 | </v-flex> | 157 | </v-flex> |
| 158 | </v-layout> | 158 | </v-layout> |
| 159 | <v-layout> | 159 | <v-layout> |
| 160 | <v-flex xs5 sm6> | 160 | <v-flex xs5 sm6> |
| 161 | <h5 class="right my-1 hidden-xs-only hidden-sm-only"> | 161 | <h5 class="right my-1 hidden-xs-only hidden-sm-only"> |
| 162 | <b>Starting Date:</b> | 162 | <b>Starting Date:</b> |
| 163 | </h5> | 163 | </h5> |
| 164 | <h5 class="right my-1 hidden-md-only hidden-lg-only hidden-xl-only"> | 164 | <h5 class="right my-1 hidden-md-only hidden-lg-only hidden-xl-only"> |
| 165 | <b>StartingDate:</b> | 165 | <b>StartingDate:</b> |
| 166 | </h5> | 166 | </h5> |
| 167 | </v-flex> | 167 | </v-flex> |
| 168 | <v-flex sm6 xs7> | 168 | <v-flex sm6 xs7> |
| 169 | <h5 class="my-1">{{dates(editedItem.startingDate)}}</h5> | 169 | <h5 class="my-1">{{dates(editedItem.startingDate)}}</h5> |
| 170 | </v-flex> | 170 | </v-flex> |
| 171 | </v-layout> | 171 | </v-layout> |
| 172 | <v-layout> | 172 | <v-layout> |
| 173 | <v-flex xs5 sm6> | 173 | <v-flex xs5 sm6> |
| 174 | <h5 class="right my-1 hidden-xs-only hidden-sm-only"> | 174 | <h5 class="right my-1 hidden-xs-only hidden-sm-only"> |
| 175 | <b>Ending Date:</b> | 175 | <b>Ending Date:</b> |
| 176 | </h5> | 176 | </h5> |
| 177 | <h5 class="right my-1 hidden-md-only hidden-lg-only hidden-xl-only"> | 177 | <h5 class="right my-1 hidden-md-only hidden-lg-only hidden-xl-only"> |
| 178 | <b>EndingDate:</b> | 178 | <b>EndingDate:</b> |
| 179 | </h5> | 179 | </h5> |
| 180 | </v-flex> | 180 | </v-flex> |
| 181 | <v-flex sm6 xs7> | 181 | <v-flex sm6 xs7> |
| 182 | <h5 class="my-1">{{dates(editedItem.endingDate)}}</h5> | 182 | <h5 class="my-1">{{dates(editedItem.endingDate)}}</h5> |
| 183 | </v-flex> | 183 | </v-flex> |
| 184 | </v-layout> | 184 | </v-layout> |
| 185 | </v-flex> | 185 | </v-flex> |
| 186 | </v-layout> | 186 | </v-layout> |
| 187 | </v-container> | 187 | </v-container> |
| 188 | </v-card-text> | 188 | </v-card-text> |
| 189 | </v-card> | 189 | </v-card> |
| 190 | </v-dialog> | 190 | </v-dialog> |
| 191 | <!-- ****** EXISTING ACADEMIC YEAR TABLE ****** --> | 191 | <!-- ****** EXISTING ACADEMIC YEAR TABLE ****** --> |
| 192 | <v-toolbar color="transparent" flat> | 192 | <v-toolbar color="transparent" flat> |
| 193 | <v-btn | 193 | <v-btn |
| 194 | fab | 194 | fab |
| 195 | dark | 195 | dark |
| 196 | class="open-dialog-button hidden-xl-only hidden-md-only hidden-lg-only" | 196 | class="open-dialog-button hidden-xl-only hidden-md-only hidden-lg-only" |
| 197 | small | 197 | small |
| 198 | @click="addAcademicYearDialog = true" | 198 | @click="addAcademicYearDialog = true" |
| 199 | > | 199 | > |
| 200 | <v-icon dark>add</v-icon> | 200 | <v-icon dark>add</v-icon> |
| 201 | </v-btn> | 201 | </v-btn> |
| 202 | <v-btn | 202 | <v-btn |
| 203 | round | 203 | round |
| 204 | class="open-dialog-button hidden-sm-only hidden-xs-only" | 204 | class="open-dialog-button hidden-sm-only hidden-xs-only" |
| 205 | dark | 205 | dark |
| 206 | @click="addAcademicYearDialog = true" | 206 | @click="addAcademicYearDialog = true" |
| 207 | > | 207 | > |
| 208 | <v-icon class="white--text pr-1" size="20">add</v-icon>Add Academic Year | 208 | <v-icon class="white--text pr-1" size="20">add</v-icon>Add Academic Year |
| 209 | </v-btn> | 209 | </v-btn> |
| 210 | <v-spacer></v-spacer> | 210 | <v-spacer></v-spacer> |
| 211 | <v-card-title class="body-1" v-show="show"> | 211 | <v-card-title class="body-1" v-show="show"> |
| 212 | <v-btn icon large flat @click="displaySearch"> | 212 | <v-btn icon large flat @click="displaySearch"> |
| 213 | <v-avatar size="27"> | 213 | <v-avatar size="27"> |
| 214 | <img src="/static/icon/dashboard icons-49.png" alt="icon" /> | 214 | <img src="/static/icon/search.png" alt="icon" /> |
| 215 | </v-avatar> | 215 | </v-avatar> |
| 216 | </v-btn> | 216 | </v-btn> |
| 217 | </v-card-title> | 217 | </v-card-title> |
| 218 | <v-flex xs8 sm8 md3 lg2 v-show="showSearch"> | 218 | <v-flex xs8 sm8 md3 lg2 v-show="showSearch"> |
| 219 | <v-layout> | 219 | <v-layout> |
| 220 | <v-text-field v-model="search" label="Search" prepend-inner-icon="search" color="primary"></v-text-field> | 220 | <v-text-field v-model="search" label="Search" prepend-inner-icon="search" color="primary"></v-text-field> |
| 221 | <v-icon @click="closeSearch" color="error">close</v-icon> | 221 | <v-icon @click="closeSearch" color="error">close</v-icon> |
| 222 | </v-layout> | 222 | </v-layout> |
| 223 | </v-flex> | 223 | </v-flex> |
| 224 | </v-toolbar> | 224 | </v-toolbar> |
| 225 | <v-data-table | 225 | <v-data-table |
| 226 | :headers="headers" | 226 | :headers="headers" |
| 227 | :items="getAcademicYearList" | 227 | :items="getAcademicYearList" |
| 228 | :pagination.sync="pagination" | 228 | :pagination.sync="pagination" |
| 229 | :search="search" | 229 | :search="search" |
| 230 | > | 230 | > |
| 231 | <template slot="items" slot-scope="props"> | 231 | <template slot="items" slot-scope="props"> |
| 232 | <tr class="tr"> | 232 | <tr class="tr"> |
| 233 | <td class="td td-row">{{ props.index + 1}}</td> | 233 | <td class="td td-row">{{ props.index + 1}}</td> |
| 234 | <td class="td td-row text-xs-center">{{ props.item.year}}</td> | 234 | <td class="td td-row text-xs-center">{{ props.item.year}}</td> |
| 235 | <td class="td td-row text-xs-center">{{ props.item.yearTitle}}</td> | 235 | <td class="td td-row text-xs-center">{{ props.item.yearTitle}}</td> |
| 236 | <td class="td td-row text-xs-center">{{ dates(props.item.startingDate)}}</td> | 236 | <td class="td td-row text-xs-center">{{ dates(props.item.startingDate)}}</td> |
| 237 | <td class="td td-row text-xs-center">{{ dates(props.item.endingDate)}}</td> | 237 | <td class="td td-row text-xs-center">{{ dates(props.item.endingDate)}}</td> |
| 238 | <td class="td td-row text-xs-center"> | 238 | <td class="td td-row text-xs-center"> |
| 239 | <span> | 239 | <span> |
| 240 | <v-tooltip top> | 240 | <v-tooltip top> |
| 241 | <img | 241 | <img |
| 242 | slot="activator" | 242 | slot="activator" |
| 243 | style="cursor:pointer; width:25px; height:25px; " | 243 | style="cursor:pointer; width:25px; height:25px; " |
| 244 | class="mr-3" | 244 | class="mr-3" |
| 245 | @click="profile(props.item)" | 245 | @click="profile(props.item)" |
| 246 | src="/static/icon/dashboard icons-47.png" | 246 | src="/static/icon/view.png" |
| 247 | /> | 247 | /> |
| 248 | <span>View</span> | 248 | <span>View</span> |
| 249 | </v-tooltip> | 249 | </v-tooltip> |
| 250 | <v-tooltip top> | 250 | <v-tooltip top> |
| 251 | <img | 251 | <img |
| 252 | slot="activator" | 252 | slot="activator" |
| 253 | style="cursor:pointer; width:20px; height:18px; " | 253 | style="cursor:pointer; width:20px; height:18px; " |
| 254 | class="mr-3" | 254 | class="mr-3" |
| 255 | @click="editItem(props.item)" | 255 | @click="editItem(props.item)" |
| 256 | src="/static/icon/dashboard icons-50.png" | 256 | src="/static/icon/edit.png" |
| 257 | /> | 257 | /> |
| 258 | <span>Edit</span> | 258 | <span>Edit</span> |
| 259 | </v-tooltip> | 259 | </v-tooltip> |
| 260 | <v-tooltip top> | 260 | <v-tooltip top> |
| 261 | <img | 261 | <img |
| 262 | slot="activator" | 262 | slot="activator" |
| 263 | style="cursor:pointer; width:20px; height:20px; " | 263 | style="cursor:pointer; width:20px; height:20px; " |
| 264 | @click="deleteItem(props.item)" | 264 | @click="deleteItem(props.item)" |
| 265 | class="mr-3" | 265 | class="mr-3" |
| 266 | src="/static/icon/dashboard icons-51.png" | 266 | src="/static/icon/delete.png" |
| 267 | /> | 267 | /> |
| 268 | <span>Delete</span> | 268 | <span>Delete</span> |
| 269 | </v-tooltip> | 269 | </v-tooltip> |
| 270 | </span> | 270 | </span> |
| 271 | </td> | 271 | </td> |
| 272 | </tr> | 272 | </tr> |
| 273 | </template> | 273 | </template> |
| 274 | <v-alert | 274 | <v-alert |
| 275 | slot="no-results" | 275 | slot="no-results" |
| 276 | :value="true" | 276 | :value="true" |
| 277 | color="error" | 277 | color="error" |
| 278 | icon="warning" | 278 | icon="warning" |
| 279 | >Your search for "{{ search }}" found no results.</v-alert> | 279 | >Your search for "{{ search }}" found no results.</v-alert> |
| 280 | </v-data-table> | 280 | </v-data-table> |
| 281 | <!-- ****** ADD ACADEMIC YEAR ****** --> | 281 | <!-- ****** ADD ACADEMIC YEAR ****** --> |
| 282 | <v-dialog v-model="addAcademicYearDialog" max-width="600px"> | 282 | <v-dialog v-model="addAcademicYearDialog" max-width="600px"> |
| 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">Add Academic Year</label> | 286 | <label class="title text-xs-center">Add Academic Year</label> |
| 287 | <v-icon size="24" class="right" @click="addAcademicYearDialog = false">cancel</v-icon> | 287 | <v-icon size="24" class="right" @click="addAcademicYearDialog = false">cancel</v-icon> |
| 288 | </v-flex> | 288 | </v-flex> |
| 289 | </v-layout> | 289 | </v-layout> |
| 290 | <v-form ref="form" v-model="valid" lazy-validation> | 290 | <v-form ref="form" v-model="valid" lazy-validation> |
| 291 | <v-container fluid> | 291 | <v-container fluid> |
| 292 | <v-flex xs12> | 292 | <v-flex xs12> |
| 293 | <v-layout> | 293 | <v-layout> |
| 294 | <v-flex xs5 sm4 class="pt-4 subheading"> | 294 | <v-flex xs5 sm4 class="pt-4 subheading"> |
| 295 | <label class="right">Year:</label> | 295 | <label class="right">Year:</label> |
| 296 | </v-flex> | 296 | </v-flex> |
| 297 | <v-flex xs7 class="ml-3"> | 297 | <v-flex xs7 class="ml-3"> |
| 298 | <v-text-field | 298 | <v-text-field |
| 299 | v-model="addAcademicYear.year" | 299 | v-model="addAcademicYear.year" |
| 300 | placeholder="fill Year (2019-2020)" | 300 | placeholder="fill Year (2019-2020)" |
| 301 | type="text" | 301 | type="text" |
| 302 | :rules="yearRules" | 302 | :rules="yearRules" |
| 303 | required | 303 | required |
| 304 | ></v-text-field> | 304 | ></v-text-field> |
| 305 | </v-flex> | 305 | </v-flex> |
| 306 | </v-layout> | 306 | </v-layout> |
| 307 | </v-flex> | 307 | </v-flex> |
| 308 | <v-flex xs12> | 308 | <v-flex xs12> |
| 309 | <v-layout> | 309 | <v-layout> |
| 310 | <v-flex xs5 sm4 class="pt-4 subheading"> | 310 | <v-flex xs5 sm4 class="pt-4 subheading"> |
| 311 | <label class="right">Year Title:</label> | 311 | <label class="right">Year Title:</label> |
| 312 | </v-flex> | 312 | </v-flex> |
| 313 | <v-flex xs7 class="ml-3"> | 313 | <v-flex xs7 class="ml-3"> |
| 314 | <v-text-field | 314 | <v-text-field |
| 315 | placeholder="fill your Year Title" | 315 | placeholder="fill your Year Title" |
| 316 | :rules="yearTitleRules" | 316 | :rules="yearTitleRules" |
| 317 | v-model="addAcademicYear.yearTitle" | 317 | v-model="addAcademicYear.yearTitle" |
| 318 | type="text" | 318 | type="text" |
| 319 | required | 319 | required |
| 320 | ></v-text-field> | 320 | ></v-text-field> |
| 321 | </v-flex> | 321 | </v-flex> |
| 322 | </v-layout> | 322 | </v-layout> |
| 323 | </v-flex> | 323 | </v-flex> |
| 324 | <v-flex xs12> | 324 | <v-flex xs12> |
| 325 | <v-layout> | 325 | <v-layout> |
| 326 | <v-flex xs5 sm4 class="pt-4 subheading"> | 326 | <v-flex xs5 sm4 class="pt-4 subheading"> |
| 327 | <label class="right hidden-xs-only hidden-sm-only">Starting Date:</label> | 327 | <label class="right hidden-xs-only hidden-sm-only">Starting Date:</label> |
| 328 | <label class="right hidden-md-only hidden-lg-only hidden-xl-only">StartingDate:</label> | 328 | <label class="right hidden-md-only hidden-lg-only hidden-xl-only">StartingDate:</label> |
| 329 | </v-flex> | 329 | </v-flex> |
| 330 | <v-flex xs7 class="ml-3"> | 330 | <v-flex xs7 class="ml-3"> |
| 331 | <v-menu | 331 | <v-menu |
| 332 | ref="menuStart" | 332 | ref="menuStart" |
| 333 | :close-on-content-click="false" | 333 | :close-on-content-click="false" |
| 334 | v-model="menuStart" | 334 | v-model="menuStart" |
| 335 | :nudge-right="40" | 335 | :nudge-right="40" |
| 336 | :return-value.sync="addAcademicYear.startingDate" | 336 | :return-value.sync="addAcademicYear.startingDate" |
| 337 | app | 337 | app |
| 338 | lazy | 338 | lazy |
| 339 | transition="scale-transition" | 339 | transition="scale-transition" |
| 340 | offset-y | 340 | offset-y |
| 341 | full-width | 341 | full-width |
| 342 | min-width="290px" | 342 | min-width="290px" |
| 343 | > | 343 | > |
| 344 | <v-text-field | 344 | <v-text-field |
| 345 | slot="activator" | 345 | slot="activator" |
| 346 | :rules="startDateRules" | 346 | :rules="startDateRules" |
| 347 | v-model="addAcademicYear.startingDate" | 347 | v-model="addAcademicYear.startingDate" |
| 348 | append-icon="event" | 348 | append-icon="event" |
| 349 | placeholder="Select starting date" | 349 | placeholder="Select starting date" |
| 350 | ></v-text-field> | 350 | ></v-text-field> |
| 351 | <v-date-picker | 351 | <v-date-picker |
| 352 | color="info" | 352 | color="info" |
| 353 | v-model="addAcademicYear.startingDate" | 353 | v-model="addAcademicYear.startingDate" |
| 354 | @input="$refs.menuStart.save(addAcademicYear.startingDate)" | 354 | @input="$refs.menuStart.save(addAcademicYear.startingDate)" |
| 355 | ></v-date-picker> | 355 | ></v-date-picker> |
| 356 | </v-menu> | 356 | </v-menu> |
| 357 | </v-flex> | 357 | </v-flex> |
| 358 | </v-layout> | 358 | </v-layout> |
| 359 | </v-flex> | 359 | </v-flex> |
| 360 | <v-flex xs12> | 360 | <v-flex xs12> |
| 361 | <v-layout> | 361 | <v-layout> |
| 362 | <v-flex xs5 sm4 class="pt-4 subheading"> | 362 | <v-flex xs5 sm4 class="pt-4 subheading"> |
| 363 | <label class="right">Ending Date:</label> | 363 | <label class="right">Ending Date:</label> |
| 364 | </v-flex> | 364 | </v-flex> |
| 365 | <v-flex xs7 class="ml-3"> | 365 | <v-flex xs7 class="ml-3"> |
| 366 | <v-menu | 366 | <v-menu |
| 367 | ref="menu1" | 367 | ref="menu1" |
| 368 | :close-on-content-click="false" | 368 | :close-on-content-click="false" |
| 369 | v-model="menu1" | 369 | v-model="menu1" |
| 370 | :nudge-right="40" | 370 | :nudge-right="40" |
| 371 | :return-value.sync="addAcademicYear.endingDate" | 371 | :return-value.sync="addAcademicYear.endingDate" |
| 372 | app | 372 | app |
| 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 | min-width="290px" | 377 | min-width="290px" |
| 378 | > | 378 | > |
| 379 | <v-text-field | 379 | <v-text-field |
| 380 | slot="activator" | 380 | slot="activator" |
| 381 | :rules="endDateRules" | 381 | :rules="endDateRules" |
| 382 | v-model="addAcademicYear.endingDate" | 382 | v-model="addAcademicYear.endingDate" |
| 383 | append-icon="event" | 383 | append-icon="event" |
| 384 | placeholder="Select ending date" | 384 | placeholder="Select ending date" |
| 385 | ></v-text-field> | 385 | ></v-text-field> |
| 386 | <v-date-picker | 386 | <v-date-picker |
| 387 | color="info" | 387 | color="info" |
| 388 | v-model="addAcademicYear.endingDate" | 388 | v-model="addAcademicYear.endingDate" |
| 389 | @input="$refs.menu1.save(addAcademicYear.endingDate)" | 389 | @input="$refs.menu1.save(addAcademicYear.endingDate)" |
| 390 | ></v-date-picker> | 390 | ></v-date-picker> |
| 391 | </v-menu> | 391 | </v-menu> |
| 392 | </v-flex> | 392 | </v-flex> |
| 393 | </v-layout> | 393 | </v-layout> |
| 394 | </v-flex> | 394 | </v-flex> |
| 395 | <v-layout> | 395 | <v-layout> |
| 396 | <v-flex xs12> | 396 | <v-flex xs12> |
| 397 | <v-layout> | 397 | <v-layout> |
| 398 | <v-spacer></v-spacer> | 398 | <v-spacer></v-spacer> |
| 399 | <v-btn @click="clear" round dark class="clear-button">clear</v-btn> | 399 | <v-btn @click="clear" round dark class="clear-button">clear</v-btn> |
| 400 | <v-btn @click="submit" round dark :loading="loading" class="add-button">Add</v-btn> | 400 | <v-btn @click="submit" round dark :loading="loading" class="add-button">Add</v-btn> |
| 401 | </v-layout> | 401 | </v-layout> |
| 402 | </v-flex> | 402 | </v-flex> |
| 403 | </v-layout> | 403 | </v-layout> |
| 404 | </v-container> | 404 | </v-container> |
| 405 | </v-form> | 405 | </v-form> |
| 406 | </v-card> | 406 | </v-card> |
| 407 | </v-dialog> | 407 | </v-dialog> |
| 408 | <div class="loader" v-if="showLoader"> | 408 | <div class="loader" v-if="showLoader"> |
| 409 | <v-progress-circular indeterminate color="white"></v-progress-circular> | 409 | <v-progress-circular indeterminate color="white"></v-progress-circular> |
| 410 | </div> | 410 | </div> |
| 411 | <v-snackbar | 411 | <v-snackbar |
| 412 | :timeout="timeout" | 412 | :timeout="timeout" |
| 413 | :top="y === 'top'" | 413 | :top="y === 'top'" |
| 414 | :right="x === 'right'" | 414 | :right="x === 'right'" |
| 415 | :vertical="mode === 'vertical'" | 415 | :vertical="mode === 'vertical'" |
| 416 | v-model="snackbar" | 416 | v-model="snackbar" |
| 417 | :color="color" | 417 | :color="color" |
| 418 | >{{ text }}</v-snackbar> | 418 | >{{ text }}</v-snackbar> |
| 419 | </v-container> | 419 | </v-container> |
| 420 | </template> | 420 | </template> |
| 421 | 421 | ||
| 422 | <script> | 422 | <script> |
| 423 | import http from "@/Services/http.js"; | 423 | import http from "@/Services/http.js"; |
| 424 | import Util from "@/util"; | 424 | import Util from "@/util"; |
| 425 | import moment from "moment"; | 425 | import moment from "moment"; |
| 426 | 426 | ||
| 427 | export default { | 427 | export default { |
| 428 | data: () => ({ | 428 | data: () => ({ |
| 429 | snackbar: false, | 429 | snackbar: false, |
| 430 | y: "top", | 430 | y: "top", |
| 431 | x: "right", | 431 | x: "right", |
| 432 | mode: "", | 432 | mode: "", |
| 433 | timeout: 5000, | 433 | timeout: 5000, |
| 434 | text: "", | 434 | text: "", |
| 435 | color: "", | 435 | color: "", |
| 436 | loading: false, | 436 | loading: false, |
| 437 | date: null, | 437 | date: null, |
| 438 | show: true, | 438 | show: true, |
| 439 | showSearch: false, | 439 | showSearch: false, |
| 440 | search: "", | 440 | search: "", |
| 441 | showLoader: false, | 441 | showLoader: false, |
| 442 | addAcademicYearDialog: false, | 442 | addAcademicYearDialog: false, |
| 443 | editAcademinYearDialog: false, | 443 | editAcademinYearDialog: false, |
| 444 | viewAcademinYearDialog: false, | 444 | viewAcademinYearDialog: false, |
| 445 | valid: true, | 445 | valid: true, |
| 446 | pagination: { | 446 | pagination: { |
| 447 | rowsPerPage: 10 | 447 | rowsPerPage: 10 |
| 448 | }, | 448 | }, |
| 449 | date: null, | 449 | date: null, |
| 450 | menu1: false, | 450 | menu1: false, |
| 451 | menu: false, | 451 | menu: false, |
| 452 | menuStart: false, | 452 | menuStart: false, |
| 453 | menuEndDate: false, | 453 | menuEndDate: false, |
| 454 | yearRules: [v => !!v || "Year is required"], | 454 | yearRules: [v => !!v || "Year is required"], |
| 455 | yearTitleRules: [v => !!v || "Year Title is required"], | 455 | yearTitleRules: [v => !!v || "Year Title is required"], |
| 456 | startDateRules: [v => !!v || "startDate is required"], | 456 | startDateRules: [v => !!v || "startDate is required"], |
| 457 | endDateRules: [v => !!v || "endDate is required"], | 457 | endDateRules: [v => !!v || "endDate is required"], |
| 458 | headers: [ | 458 | headers: [ |
| 459 | { | 459 | { |
| 460 | text: "No", | 460 | text: "No", |
| 461 | align: "center", | 461 | align: "center", |
| 462 | sortable: false, | 462 | sortable: false, |
| 463 | value: "No" | 463 | value: "No" |
| 464 | }, | 464 | }, |
| 465 | { text: "Year", value: "year", sortable: false, align: "center" }, | 465 | { text: "Year", value: "year", sortable: false, align: "center" }, |
| 466 | { | 466 | { |
| 467 | text: "Year Title", | 467 | text: "Year Title", |
| 468 | value: "yearTitle", | 468 | value: "yearTitle", |
| 469 | sortable: false, | 469 | sortable: false, |
| 470 | align: "center" | 470 | align: "center" |
| 471 | }, | 471 | }, |
| 472 | 472 | ||
| 473 | { | 473 | { |
| 474 | text: "Starting Date", | 474 | text: "Starting Date", |
| 475 | value: "startingDate", | 475 | value: "startingDate", |
| 476 | sortable: false, | 476 | sortable: false, |
| 477 | align: "center" | 477 | align: "center" |
| 478 | }, | 478 | }, |
| 479 | { | 479 | { |
| 480 | text: "Ending Date", | 480 | text: "Ending Date", |
| 481 | value: "endingDate", | 481 | value: "endingDate", |
| 482 | sortable: false, | 482 | sortable: false, |
| 483 | align: "center" | 483 | align: "center" |
| 484 | }, | 484 | }, |
| 485 | { text: "Action", value: "", sortable: false, align: "center" } | 485 | { text: "Action", value: "", sortable: false, align: "center" } |
| 486 | ], | 486 | ], |
| 487 | getAcademicYearList: [], | 487 | getAcademicYearList: [], |
| 488 | editedIndex: -1, | 488 | editedIndex: -1, |
| 489 | addAcademicYear: {}, | 489 | addAcademicYear: {}, |
| 490 | editedItem: {}, | 490 | editedItem: {}, |
| 491 | token: "" | 491 | token: "" |
| 492 | }), | 492 | }), |
| 493 | methods: { | 493 | methods: { |
| 494 | dates: function(date) { | 494 | dates: function(date) { |
| 495 | return moment(date).format("MMMM DD, YYYY"); | 495 | return moment(date).format("MMMM DD, YYYY"); |
| 496 | }, | 496 | }, |
| 497 | getAcademicYear() { | 497 | getAcademicYear() { |
| 498 | this.showLoader = true; | 498 | this.showLoader = true; |
| 499 | http() | 499 | http() |
| 500 | .get("/getAcademicsList", { | 500 | .get("/getAcademicsList", { |
| 501 | headers: { Authorization: "Bearer " + this.token } | 501 | headers: { Authorization: "Bearer " + this.token } |
| 502 | }) | 502 | }) |
| 503 | .then(response => { | 503 | .then(response => { |
| 504 | this.getAcademicYearList = response.data.data; | 504 | this.getAcademicYearList = response.data.data; |
| 505 | this.showLoader = false; | 505 | this.showLoader = false; |
| 506 | }) | 506 | }) |
| 507 | .catch(error => { | 507 | .catch(error => { |
| 508 | this.showLoader = false; | 508 | this.showLoader = false; |
| 509 | if (error.response.status === 401) { | 509 | if (error.response.status === 401) { |
| 510 | this.$router.replace({ path: "/" }); | 510 | this.$router.replace({ path: "/" }); |
| 511 | this.$store.dispatch("setToken", null); | 511 | this.$store.dispatch("setToken", null); |
| 512 | this.$store.dispatch("Id", null); | 512 | this.$store.dispatch("Id", null); |
| 513 | } | 513 | } |
| 514 | }); | 514 | }); |
| 515 | }, | 515 | }, |
| 516 | editItem(item) { | 516 | editItem(item) { |
| 517 | this.editedIndex = this.getAcademicYearList.indexOf(item); | 517 | this.editedIndex = this.getAcademicYearList.indexOf(item); |
| 518 | this.editedItem = Object.assign({}, item); | 518 | this.editedItem = Object.assign({}, item); |
| 519 | this.editedItem.schoolEventId = item._id; | 519 | this.editedItem.schoolEventId = item._id; |
| 520 | this.editAcademinYearDialog = true; | 520 | this.editAcademinYearDialog = true; |
| 521 | }, | 521 | }, |
| 522 | profile(item) { | 522 | profile(item) { |
| 523 | this.editedIndex = this.getAcademicYearList.indexOf(item); | 523 | this.editedIndex = this.getAcademicYearList.indexOf(item); |
| 524 | this.editedItem = Object.assign({}, item); | 524 | this.editedItem = Object.assign({}, item); |
| 525 | this.viewAcademinYearDialog = true; | 525 | this.viewAcademinYearDialog = true; |
| 526 | }, | 526 | }, |
| 527 | 527 | ||
| 528 | deleteItem(item) { | 528 | deleteItem(item) { |
| 529 | let deleteAcademic = { | 529 | let deleteAcademic = { |
| 530 | academicId: item._id | 530 | academicId: item._id |
| 531 | }; | 531 | }; |
| 532 | http() | 532 | http() |
| 533 | .delete( | 533 | .delete( |
| 534 | "/deleteAcademic", | 534 | "/deleteAcademic", |
| 535 | confirm("Are you sure you want to delete this?") && { | 535 | confirm("Are you sure you want to delete this?") && { |
| 536 | params: deleteAcademic | 536 | params: deleteAcademic |
| 537 | } | 537 | } |
| 538 | ) | 538 | ) |
| 539 | .then(response => { | 539 | .then(response => { |
| 540 | this.snackbar = true; | 540 | this.snackbar = true; |
| 541 | this.text = response.data.message; | 541 | this.text = response.data.message; |
| 542 | this.color = "green"; | 542 | this.color = "green"; |
| 543 | this.getAcademicYear(); | 543 | this.getAcademicYear(); |
| 544 | }) | 544 | }) |
| 545 | .catch(error => { | 545 | .catch(error => { |
| 546 | this.snackbar = true; | 546 | this.snackbar = true; |
| 547 | this.text = error.response.data.message; | 547 | this.text = error.response.data.message; |
| 548 | this.color = "error"; | 548 | this.color = "error"; |
| 549 | }); | 549 | }); |
| 550 | }, | 550 | }, |
| 551 | close() { | 551 | close() { |
| 552 | this.editAcademinYearDialog = false; | 552 | this.editAcademinYearDialog = false; |
| 553 | }, | 553 | }, |
| 554 | submit() { | 554 | submit() { |
| 555 | if (this.$refs.form.validate()) { | 555 | if (this.$refs.form.validate()) { |
| 556 | this.loading = true; | 556 | this.loading = true; |
| 557 | http() | 557 | http() |
| 558 | .post("/createAcademic", this.addAcademicYear) | 558 | .post("/createAcademic", this.addAcademicYear) |
| 559 | .then(response => { | 559 | .then(response => { |
| 560 | this.snackbar = true; | 560 | this.snackbar = true; |
| 561 | this.text = response.data.message; | 561 | this.text = response.data.message; |
| 562 | this.color = "green"; | 562 | this.color = "green"; |
| 563 | this.getAcademicYear(); | 563 | this.getAcademicYear(); |
| 564 | this.clear(); | 564 | this.clear(); |
| 565 | this.loading = false; | 565 | this.loading = false; |
| 566 | this.addAcademicYearDialog = false; | 566 | this.addAcademicYearDialog = false; |
| 567 | }) | 567 | }) |
| 568 | .catch(error => { | 568 | .catch(error => { |
| 569 | this.snackbar = true; | 569 | this.snackbar = true; |
| 570 | this.text = error.response.data.message; | 570 | this.text = error.response.data.message; |
| 571 | this.color = "error"; | 571 | this.color = "error"; |
| 572 | this.loading = false; | 572 | this.loading = false; |
| 573 | }); | 573 | }); |
| 574 | } | 574 | } |
| 575 | }, | 575 | }, |
| 576 | clear() { | 576 | clear() { |
| 577 | this.$refs.form.reset(); | 577 | this.$refs.form.reset(); |
| 578 | }, | 578 | }, |
| 579 | save() { | 579 | save() { |
| 580 | this.editedItem.academicId = this.editedItem._id; | 580 | this.editedItem.academicId = this.editedItem._id; |
| 581 | http() | 581 | http() |
| 582 | .put("/updateAcademic", this.editedItem, { | 582 | .put("/updateAcademic", this.editedItem, { |
| 583 | headers: { Authorization: "Bearer " + this.token } | 583 | headers: { Authorization: "Bearer " + this.token } |
| 584 | }) | 584 | }) |
| 585 | .then(response => { | 585 | .then(response => { |
| 586 | this.snackbar = true; | 586 | this.snackbar = true; |
| 587 | this.text = response.data.message; | 587 | this.text = response.data.message; |
| 588 | this.color = "green"; | 588 | this.color = "green"; |
| 589 | this.getAcademicYear(); | 589 | this.getAcademicYear(); |
| 590 | this.close(); | 590 | this.close(); |
| 591 | }) | 591 | }) |
| 592 | .catch(error => { | 592 | .catch(error => { |
| 593 | this.snackbar = true; | 593 | this.snackbar = true; |
| 594 | this.text = error.response.data.message; | 594 | this.text = error.response.data.message; |
| 595 | this.color = "error"; | 595 | this.color = "error"; |
| 596 | }); | 596 | }); |
| 597 | }, | 597 | }, |
| 598 | displaySearch() { | 598 | displaySearch() { |
| 599 | (this.show = false), (this.showSearch = true); | 599 | (this.show = false), (this.showSearch = true); |
| 600 | }, | 600 | }, |
| 601 | closeSearch() { | 601 | closeSearch() { |
| 602 | this.showSearch = false; | 602 | this.showSearch = false; |
| 603 | this.show = true; | 603 | this.show = true; |
| 604 | this.search = ""; | 604 | this.search = ""; |
| 605 | } | 605 | } |
| 606 | }, | 606 | }, |
| 607 | mounted() { | 607 | mounted() { |
| 608 | this.token = this.$store.state.token; | 608 | this.token = this.$store.state.token; |
| 609 | this.getAcademicYear(); | 609 | this.getAcademicYear(); |
| 610 | } | 610 | } |
| 611 | }; | 611 | }; |
| 612 | </script> | 612 | </script> |
src/pages/Administrator/role.vue
| 1 | <template> | 1 | <template> |
| 2 | <v-container fluid class="body-color"> | 2 | <v-container fluid class="body-color"> |
| 3 | <!-- ****** EDITS Role Distribution ****** --> | 3 | <!-- ****** EDITS Role Distribution ****** --> |
| 4 | <v-dialog v-model="editRoleDialog" max-width="400px"> | 4 | <v-dialog v-model="editRoleDialog" 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 Role</label> | 8 | <label class="title text-xs-center">Edit Role</label> |
| 9 | <v-icon size="24" class="right" @click="editRoleDialog = false">cancel</v-icon> | 9 | <v-icon size="24" class="right" @click="editRoleDialog = false">cancel</v-icon> |
| 10 | </v-flex> | 10 | </v-flex> |
| 11 | </v-layout> | 11 | </v-layout> |
| 12 | <v-form ref="form"> | 12 | <v-form ref="form"> |
| 13 | <v-container fluid> | 13 | <v-container fluid> |
| 14 | <v-flex xs12 sm12> | 14 | <v-flex xs12 sm12> |
| 15 | <v-layout> | 15 | <v-layout> |
| 16 | <v-flex xs3 class="pt-4 subheading"> | 16 | <v-flex xs3 class="pt-4 subheading"> |
| 17 | <label class="right">Role:</label> | 17 | <label class="right">Role:</label> |
| 18 | </v-flex> | 18 | </v-flex> |
| 19 | <v-flex xs8 sm7 class="ml-3"> | 19 | <v-flex xs8 sm7 class="ml-3"> |
| 20 | <v-text-field v-model="editedItem.name" placeholder="fill your Role"></v-text-field> | 20 | <v-text-field v-model="editedItem.name" placeholder="fill your Role"></v-text-field> |
| 21 | </v-flex> | 21 | </v-flex> |
| 22 | </v-layout> | 22 | </v-layout> |
| 23 | </v-flex> | 23 | </v-flex> |
| 24 | <v-layout> | 24 | <v-layout> |
| 25 | <v-flex xs12> | 25 | <v-flex xs12> |
| 26 | <v-layout> | 26 | <v-layout> |
| 27 | <v-spacer></v-spacer> | 27 | <v-spacer></v-spacer> |
| 28 | <v-btn round dark @click="save" class="add-button">Save</v-btn> | 28 | <v-btn round dark @click="save" class="add-button">Save</v-btn> |
| 29 | <v-spacer></v-spacer> | 29 | <v-spacer></v-spacer> |
| 30 | </v-layout> | 30 | </v-layout> |
| 31 | </v-flex> | 31 | </v-flex> |
| 32 | </v-layout> | 32 | </v-layout> |
| 33 | </v-container> | 33 | </v-container> |
| 34 | </v-form> | 34 | </v-form> |
| 35 | </v-card> | 35 | </v-card> |
| 36 | </v-dialog> | 36 | </v-dialog> |
| 37 | <!-- ****** ROLE TABLE ****** --> | 37 | <!-- ****** ROLE TABLE ****** --> |
| 38 | 38 | ||
| 39 | <v-toolbar color="transparent" flat> | 39 | <v-toolbar color="transparent" flat> |
| 40 | <v-btn | 40 | <v-btn |
| 41 | fab | 41 | fab |
| 42 | dark | 42 | dark |
| 43 | class="open-dialog-button hidden-xl-only hidden-md-only hidden-lg-only" | 43 | class="open-dialog-button hidden-xl-only hidden-md-only hidden-lg-only" |
| 44 | small | 44 | small |
| 45 | @click="addRoleDialog = true" | 45 | @click="addRoleDialog = true" |
| 46 | > | 46 | > |
| 47 | <v-icon dark>add</v-icon> | 47 | <v-icon dark>add</v-icon> |
| 48 | </v-btn> | 48 | </v-btn> |
| 49 | <v-btn | 49 | <v-btn |
| 50 | round | 50 | round |
| 51 | class="open-dialog-button hidden-sm-only hidden-xs-only" | 51 | class="open-dialog-button hidden-sm-only hidden-xs-only" |
| 52 | dark | 52 | dark |
| 53 | @click="addRoleDialog = true" | 53 | @click="addRoleDialog = true" |
| 54 | > | 54 | > |
| 55 | <v-icon class="white--text pr-1" size="20">add</v-icon>Add Role | 55 | <v-icon class="white--text pr-1" size="20">add</v-icon>Add Role |
| 56 | </v-btn> | 56 | </v-btn> |
| 57 | <v-spacer></v-spacer> | 57 | <v-spacer></v-spacer> |
| 58 | <v-card-title class="body-1" v-show="show"> | 58 | <v-card-title class="body-1" v-show="show"> |
| 59 | <v-btn icon large flat @click="displaySearch"> | 59 | <v-btn icon large flat @click="displaySearch"> |
| 60 | <v-avatar size="27"> | 60 | <v-avatar size="27"> |
| 61 | <img src="/static/icon/dashboard icons-49.png" alt="icon" /> | 61 | <img src="/static/icon/search.png" alt="icon" /> |
| 62 | </v-avatar> | 62 | </v-avatar> |
| 63 | </v-btn> | 63 | </v-btn> |
| 64 | </v-card-title> | 64 | </v-card-title> |
| 65 | <v-flex xs8 sm8 md3 lg2 v-show="showSearch"> | 65 | <v-flex xs8 sm8 md3 lg2 v-show="showSearch"> |
| 66 | <v-layout> | 66 | <v-layout> |
| 67 | <v-text-field v-model="search" label="Search" prepend-inner-icon="search" color="primary"></v-text-field> | 67 | <v-text-field v-model="search" label="Search" prepend-inner-icon="search" color="primary"></v-text-field> |
| 68 | <v-icon @click="closeSearch" color="error">close</v-icon> | 68 | <v-icon @click="closeSearch" color="error">close</v-icon> |
| 69 | </v-layout> | 69 | </v-layout> |
| 70 | </v-flex> | 70 | </v-flex> |
| 71 | </v-toolbar> | 71 | </v-toolbar> |
| 72 | <v-data-table | 72 | <v-data-table |
| 73 | :headers="headers" | 73 | :headers="headers" |
| 74 | :items="getRoles" | 74 | :items="getRoles" |
| 75 | :pagination.sync="pagination" | 75 | :pagination.sync="pagination" |
| 76 | :search="search" | 76 | :search="search" |
| 77 | > | 77 | > |
| 78 | <template slot="items" slot-scope="props"> | 78 | <template slot="items" slot-scope="props"> |
| 79 | <tr class="tr"> | 79 | <tr class="tr"> |
| 80 | <td class="td td-row">{{ props.index + 1}}</td> | 80 | <td class="td td-row">{{ props.index + 1}}</td> |
| 81 | <td class="td td-row text-xs-center">{{ props.item.name}}</td> | 81 | <td class="td td-row text-xs-center">{{ props.item.name}}</td> |
| 82 | <td class="td td-row text-xs-center"> | 82 | <td class="td td-row text-xs-center"> |
| 83 | <span> | 83 | <span> |
| 84 | <v-tooltip top> | 84 | <v-tooltip top> |
| 85 | <img | 85 | <img |
| 86 | slot="activator" | 86 | slot="activator" |
| 87 | style="cursor:pointer; width:20px; height:18px; " | 87 | style="cursor:pointer; width:20px; height:18px; " |
| 88 | class="mr-3" | 88 | class="mr-3" |
| 89 | @click="editItem(props.item)" | 89 | @click="editItem(props.item)" |
| 90 | src="/static/icon/dashboard icons-50.png" | 90 | src="/static/icon/edit.png" |
| 91 | /> | 91 | /> |
| 92 | <span>Edit</span> | 92 | <span>Edit</span> |
| 93 | </v-tooltip> | 93 | </v-tooltip> |
| 94 | <v-tooltip top> | 94 | <v-tooltip top> |
| 95 | <img | 95 | <img |
| 96 | slot="activator" | 96 | slot="activator" |
| 97 | style="cursor:pointer; width:20px; height:20px; " | 97 | style="cursor:pointer; width:20px; height:20px; " |
| 98 | @click="deleteItem(props.item)" | 98 | @click="deleteItem(props.item)" |
| 99 | src="/static/icon/dashboard icons-51.png" | 99 | src="/static/icon/delete.png" |
| 100 | /> | 100 | /> |
| 101 | <span>Delete</span> | 101 | <span>Delete</span> |
| 102 | </v-tooltip> | 102 | </v-tooltip> |
| 103 | </span> | 103 | </span> |
| 104 | </td> | 104 | </td> |
| 105 | </tr> | 105 | </tr> |
| 106 | </template> | 106 | </template> |
| 107 | <v-alert | 107 | <v-alert |
| 108 | slot="no-results" | 108 | slot="no-results" |
| 109 | :value="true" | 109 | :value="true" |
| 110 | color="error" | 110 | color="error" |
| 111 | icon="warning" | 111 | icon="warning" |
| 112 | >Your search for "{{ search }}" found no results.</v-alert> | 112 | >Your search for "{{ search }}" found no results.</v-alert> |
| 113 | </v-data-table> | 113 | </v-data-table> |
| 114 | 114 | ||
| 115 | <!-- ****** ADD ROLE ****** --> | 115 | <!-- ****** ADD ROLE ****** --> |
| 116 | 116 | ||
| 117 | <v-dialog v-model="addRoleDialog" max-width="400px"> | 117 | <v-dialog v-model="addRoleDialog" max-width="400px"> |
| 118 | <v-card flat class="card-style pa-2" dark> | 118 | <v-card flat class="card-style pa-2" dark> |
| 119 | <v-layout> | 119 | <v-layout> |
| 120 | <v-flex xs12> | 120 | <v-flex xs12> |
| 121 | <label class="title text-xs-center">Add Class</label> | 121 | <label class="title text-xs-center">Add Class</label> |
| 122 | <v-icon size="24" class="right" @click="addRoleDialog = false">cancel</v-icon> | 122 | <v-icon size="24" class="right" @click="addRoleDialog = false">cancel</v-icon> |
| 123 | </v-flex> | 123 | </v-flex> |
| 124 | </v-layout> | 124 | </v-layout> |
| 125 | <v-form ref="form" v-model="valid" lazy-validation> | 125 | <v-form ref="form" v-model="valid" lazy-validation> |
| 126 | <v-container fluid> | 126 | <v-container fluid> |
| 127 | <v-flex xs12> | 127 | <v-flex xs12> |
| 128 | <v-layout> | 128 | <v-layout> |
| 129 | <v-flex xs3 class="pt-4 subheading"> | 129 | <v-flex xs3 class="pt-4 subheading"> |
| 130 | <label class="right">Role:</label> | 130 | <label class="right">Role:</label> |
| 131 | </v-flex> | 131 | </v-flex> |
| 132 | <v-flex xs8 sm7 class="ml-3"> | 132 | <v-flex xs8 sm7 class="ml-3"> |
| 133 | <v-text-field | 133 | <v-text-field |
| 134 | v-model="addrole.name" | 134 | v-model="addrole.name" |
| 135 | placeholder="fill your Role" | 135 | placeholder="fill your Role" |
| 136 | :rules="roleRules" | 136 | :rules="roleRules" |
| 137 | ></v-text-field> | 137 | ></v-text-field> |
| 138 | </v-flex> | 138 | </v-flex> |
| 139 | </v-layout> | 139 | </v-layout> |
| 140 | </v-flex> | 140 | </v-flex> |
| 141 | <v-layout> | 141 | <v-layout> |
| 142 | <v-flex xs12 sm12> | 142 | <v-flex xs12 sm12> |
| 143 | <v-layout> | 143 | <v-layout> |
| 144 | <v-spacer></v-spacer> | 144 | <v-spacer></v-spacer> |
| 145 | <v-btn @click="clear" round class="add-button" dark>clear</v-btn> | 145 | <v-btn @click="clear" round class="add-button" dark>clear</v-btn> |
| 146 | <v-btn @click="submit" round dark :loading="loading" class="add-button">Add</v-btn> | 146 | <v-btn @click="submit" round dark :loading="loading" class="add-button">Add</v-btn> |
| 147 | <v-spacer></v-spacer> | 147 | <v-spacer></v-spacer> |
| 148 | </v-layout> | 148 | </v-layout> |
| 149 | </v-flex> | 149 | </v-flex> |
| 150 | </v-layout> | 150 | </v-layout> |
| 151 | </v-container> | 151 | </v-container> |
| 152 | </v-form> | 152 | </v-form> |
| 153 | </v-card> | 153 | </v-card> |
| 154 | </v-dialog> | 154 | </v-dialog> |
| 155 | <div class="loader" v-if="showLoader"> | 155 | <div class="loader" v-if="showLoader"> |
| 156 | <v-progress-circular indeterminate color="white"></v-progress-circular> | 156 | <v-progress-circular indeterminate color="white"></v-progress-circular> |
| 157 | </div> | 157 | </div> |
| 158 | </v-container> | 158 | </v-container> |
| 159 | </template> | 159 | </template> |
| 160 | 160 | ||
| 161 | <script> | 161 | <script> |
| 162 | import http from "@/Services/http.js"; | 162 | import http from "@/Services/http.js"; |
| 163 | 163 | ||
| 164 | export default { | 164 | export default { |
| 165 | data: () => ({ | 165 | data: () => ({ |
| 166 | snackbar: false, | 166 | snackbar: false, |
| 167 | y: "top", | 167 | y: "top", |
| 168 | x: "right", | 168 | x: "right", |
| 169 | mode: "", | 169 | mode: "", |
| 170 | timeout: 5000, | 170 | timeout: 5000, |
| 171 | text: "", | 171 | text: "", |
| 172 | loading: false, | 172 | loading: false, |
| 173 | search: "", | 173 | search: "", |
| 174 | show: true, | 174 | show: true, |
| 175 | showSearch: false, | 175 | showSearch: false, |
| 176 | showLoader: false, | 176 | showLoader: false, |
| 177 | editRoleDialog: false, | 177 | editRoleDialog: false, |
| 178 | valid: true, | 178 | valid: true, |
| 179 | addRoleDialog: false, | 179 | addRoleDialog: false, |
| 180 | pagination: { | 180 | pagination: { |
| 181 | rowsPerPage: 10 | 181 | rowsPerPage: 10 |
| 182 | }, | 182 | }, |
| 183 | roleRules: [v => !!v || "Role is required"], | 183 | roleRules: [v => !!v || "Role is required"], |
| 184 | headers: [ | 184 | headers: [ |
| 185 | { | 185 | { |
| 186 | text: "No", | 186 | text: "No", |
| 187 | align: "", | 187 | align: "", |
| 188 | sortable: false, | 188 | sortable: false, |
| 189 | value: "No" | 189 | value: "No" |
| 190 | }, | 190 | }, |
| 191 | { text: "Role", value: "role", sortable: false, align: "center" }, | 191 | { text: "Role", value: "role", sortable: false, align: "center" }, |
| 192 | { text: "Action", value: "", sortable: false, align: "center" } | 192 | { text: "Action", value: "", sortable: false, align: "center" } |
| 193 | ], | 193 | ], |
| 194 | getRoles: [], | 194 | getRoles: [], |
| 195 | editedIndex: -1, | 195 | editedIndex: -1, |
| 196 | token: "", | 196 | token: "", |
| 197 | addrole: {}, | 197 | addrole: {}, |
| 198 | editedItem: {} | 198 | editedItem: {} |
| 199 | }), | 199 | }), |
| 200 | methods: { | 200 | methods: { |
| 201 | getRole() { | 201 | getRole() { |
| 202 | this.showLoader = true; | 202 | this.showLoader = true; |
| 203 | http() | 203 | http() |
| 204 | .get("/getRolesList", { | 204 | .get("/getRolesList", { |
| 205 | headers: { Authorization: "Bearer " + this.token } | 205 | headers: { Authorization: "Bearer " + this.token } |
| 206 | }) | 206 | }) |
| 207 | .then(response => { | 207 | .then(response => { |
| 208 | this.getRoles = response.data.data; | 208 | this.getRoles = response.data.data; |
| 209 | this.showLoader = false; | 209 | this.showLoader = false; |
| 210 | }) | 210 | }) |
| 211 | .catch(error => { | 211 | .catch(error => { |
| 212 | this.showLoader = false; | 212 | this.showLoader = false; |
| 213 | if (error.response.status === 401) { | 213 | if (error.response.status === 401) { |
| 214 | this.$router.replace({ path: "/" }); | 214 | this.$router.replace({ path: "/" }); |
| 215 | this.$store.dispatch("setToken", null); | 215 | this.$store.dispatch("setToken", null); |
| 216 | this.$store.dispatch("Id", null); | 216 | this.$store.dispatch("Id", null); |
| 217 | this.$store.dispatch("Role", null); | 217 | this.$store.dispatch("Role", null); |
| 218 | } | 218 | } |
| 219 | }); | 219 | }); |
| 220 | }, | 220 | }, |
| 221 | editItem(item) { | 221 | editItem(item) { |
| 222 | this.editedIndex = this.getRoles.indexOf(item); | 222 | this.editedIndex = this.getRoles.indexOf(item); |
| 223 | this.editedItem = Object.assign({}, item); | 223 | this.editedItem = Object.assign({}, item); |
| 224 | this.editRoleDialog = true; | 224 | this.editRoleDialog = true; |
| 225 | }, | 225 | }, |
| 226 | deleteItem(item) { | 226 | deleteItem(item) { |
| 227 | let deleteRoleId = { | 227 | let deleteRoleId = { |
| 228 | roleId: item._id | 228 | roleId: item._id |
| 229 | }; | 229 | }; |
| 230 | http() | 230 | http() |
| 231 | .delete( | 231 | .delete( |
| 232 | "/deleteRole", | 232 | "/deleteRole", |
| 233 | confirm("Are you sure you want to delete this?") && { | 233 | confirm("Are you sure you want to delete this?") && { |
| 234 | params: deleteRoleId | 234 | params: deleteRoleId |
| 235 | }, | 235 | }, |
| 236 | { | 236 | { |
| 237 | headers: { | 237 | headers: { |
| 238 | Authorization: "Bearer " + this.token | 238 | Authorization: "Bearer " + this.token |
| 239 | } | 239 | } |
| 240 | } | 240 | } |
| 241 | ) | 241 | ) |
| 242 | .then(response => { | 242 | .then(response => { |
| 243 | this.text = response.data.message; | 243 | this.text = response.data.message; |
| 244 | this.getRole(); | 244 | this.getRole(); |
| 245 | }) | 245 | }) |
| 246 | .catch(error => { | 246 | .catch(error => { |
| 247 | console.log(error); | 247 | console.log(error); |
| 248 | }); | 248 | }); |
| 249 | }, | 249 | }, |
| 250 | close() { | 250 | close() { |
| 251 | this.editRoleDialog = false; | 251 | this.editRoleDialog = false; |
| 252 | }, | 252 | }, |
| 253 | submit() { | 253 | submit() { |
| 254 | if (this.$refs.form.validate()) { | 254 | if (this.$refs.form.validate()) { |
| 255 | this.loading = true; | 255 | this.loading = true; |
| 256 | http() | 256 | http() |
| 257 | .post("/createRole", this.addrole) | 257 | .post("/createRole", this.addrole) |
| 258 | .then(response => { | 258 | .then(response => { |
| 259 | this.snackbar = true; | 259 | this.snackbar = true; |
| 260 | this.addRoleDialog = false; | 260 | this.addRoleDialog = false; |
| 261 | this.text = response.data.message; | 261 | this.text = response.data.message; |
| 262 | this.getRole(); | 262 | this.getRole(); |
| 263 | this.clear(); | 263 | this.clear(); |
| 264 | this.loading = false; | 264 | this.loading = false; |
| 265 | }) | 265 | }) |
| 266 | .catch(error => { | 266 | .catch(error => { |
| 267 | this.snackbar = true; | 267 | this.snackbar = true; |
| 268 | this.text = error.response.data.message; | 268 | this.text = error.response.data.message; |
| 269 | this.loading = false; | 269 | this.loading = false; |
| 270 | }); | 270 | }); |
| 271 | } | 271 | } |
| 272 | }, | 272 | }, |
| 273 | clear() { | 273 | clear() { |
| 274 | this.$refs.form.reset(); | 274 | this.$refs.form.reset(); |
| 275 | }, | 275 | }, |
| 276 | save() { | 276 | save() { |
| 277 | (this.editedItem.roleId = this.editedItem._id), | 277 | (this.editedItem.roleId = this.editedItem._id), |
| 278 | http() | 278 | http() |
| 279 | .put("/updateRole", this.editedItem, { | 279 | .put("/updateRole", this.editedItem, { |
| 280 | headers: { | 280 | headers: { |
| 281 | Authorization: "Bearer " + this.token | 281 | Authorization: "Bearer " + this.token |
| 282 | } | 282 | } |
| 283 | }) | 283 | }) |
| 284 | .then(response => { | 284 | .then(response => { |
| 285 | this.text = "Successfully Edit Notification"; | 285 | this.text = "Successfully Edit Notification"; |
| 286 | this.getRole(); | 286 | this.getRole(); |
| 287 | this.close(); | 287 | this.close(); |
| 288 | }) | 288 | }) |
| 289 | .catch(error => { | 289 | .catch(error => { |
| 290 | console.log(error); | 290 | console.log(error); |
| 291 | }); | 291 | }); |
| 292 | }, | 292 | }, |
| 293 | displaySearch() { | 293 | displaySearch() { |
| 294 | (this.show = false), (this.showSearch = true); | 294 | (this.show = false), (this.showSearch = true); |
| 295 | }, | 295 | }, |
| 296 | closeSearch() { | 296 | closeSearch() { |
| 297 | this.showSearch = false; | 297 | this.showSearch = false; |
| 298 | this.show = true; | 298 | this.show = true; |
| 299 | this.search = ""; | 299 | this.search = ""; |
| 300 | } | 300 | } |
| 301 | }, | 301 | }, |
| 302 | mounted() { | 302 | mounted() { |
| 303 | this.token = this.$store.state.token; | 303 | this.token = this.$store.state.token; |
| 304 | this.getRole(); | 304 | this.getRole(); |
| 305 | } | 305 | } |
| 306 | }; | 306 | }; |
| 307 | </script> | 307 | </script> |
src/pages/Attendence/studentAttendence.vue
| 1 | <template> | 1 | <template> |
| 2 | <v-container fluid class="body-color"> | 2 | <v-container fluid class="body-color"> |
| 3 | <v-snackbar | 3 | <v-snackbar |
| 4 | :timeout="timeout" | 4 | :timeout="timeout" |
| 5 | :top="y === 'top'" | 5 | :top="y === 'top'" |
| 6 | :right="x === 'right'" | 6 | :right="x === 'right'" |
| 7 | :vertical="mode === 'vertical'" | 7 | :vertical="mode === 'vertical'" |
| 8 | v-model="snackbar" | 8 | v-model="snackbar" |
| 9 | color="success" | 9 | color="success" |
| 10 | >{{ text }}</v-snackbar> | 10 | >{{ text }}</v-snackbar> |
| 11 | <!-- ****** ATTENDENCE STUDENTS TABLE ****** --> | 11 | <!-- ****** ATTENDENCE STUDENTS TABLE ****** --> |
| 12 | <!-- <download-csv :data="json_data"> | 12 | <!-- <download-csv :data="json_data"> |
| 13 | <v-btn>Download Data</v-btn> | 13 | <v-btn>Download Data</v-btn> |
| 14 | </download-csv>--> | 14 | </download-csv>--> |
| 15 | <v-toolbar color="transparent" flat> | 15 | <v-toolbar color="transparent" flat> |
| 16 | <v-spacer></v-spacer> | 16 | <v-spacer></v-spacer> |
| 17 | <v-flex xs12 sm4 md2> | 17 | <v-flex xs12 sm4 md2> |
| 18 | <v-select | 18 | <v-select |
| 19 | small | 19 | small |
| 20 | :items="addclass" | 20 | :items="addclass" |
| 21 | label="Select Class" | 21 | label="Select Class" |
| 22 | v-model="selectStudents.select" | 22 | v-model="selectStudents.select" |
| 23 | item-text="classNum" | 23 | item-text="classNum" |
| 24 | item-value="_id" | 24 | item-value="_id" |
| 25 | name="Select Class" | 25 | name="Select Class" |
| 26 | @change="getSections(selectStudents.select)" | 26 | @change="getSections(selectStudents.select)" |
| 27 | class="px-2" | 27 | class="px-2" |
| 28 | required | 28 | required |
| 29 | ></v-select> | 29 | ></v-select> |
| 30 | </v-flex> | 30 | </v-flex> |
| 31 | <v-card-title class="body-1" v-show="show"> | 31 | <v-card-title class="body-1" v-show="show"> |
| 32 | <v-btn icon large flat @click="displaySearch"> | 32 | <v-btn icon large flat @click="displaySearch"> |
| 33 | <v-avatar size="27"> | 33 | <v-avatar size="27"> |
| 34 | <img src="/static/icon/dashboard icons-49.png" alt="icon" /> | 34 | <img src="/static/icon/search.png" alt="icon" /> |
| 35 | </v-avatar> | 35 | </v-avatar> |
| 36 | </v-btn> | 36 | </v-btn> |
| 37 | </v-card-title> | 37 | </v-card-title> |
| 38 | <v-flex xs8 sm8 md3 lg2 v-show="showSearch"> | 38 | <v-flex xs8 sm8 md3 lg2 v-show="showSearch"> |
| 39 | <v-layout> | 39 | <v-layout> |
| 40 | <v-text-field v-model="search" label="Search" prepend-inner-icon="search" color="primary"></v-text-field> | 40 | <v-text-field v-model="search" label="Search" prepend-inner-icon="search" color="primary"></v-text-field> |
| 41 | <v-icon @click="closeSearch" color="error">close</v-icon> | 41 | <v-icon @click="closeSearch" color="error">close</v-icon> |
| 42 | </v-layout> | 42 | </v-layout> |
| 43 | </v-flex> | 43 | </v-flex> |
| 44 | </v-toolbar> | 44 | </v-toolbar> |
| 45 | <v-data-table | 45 | <v-data-table |
| 46 | :headers="headers" | 46 | :headers="headers" |
| 47 | :items="studentsList" | 47 | :items="studentsList" |
| 48 | :pagination.sync="pagination" | 48 | :pagination.sync="pagination" |
| 49 | :search="search" | 49 | :search="search" |
| 50 | > | 50 | > |
| 51 | <template slot="items" slot-scope="props"> | 51 | <template slot="items" slot-scope="props"> |
| 52 | <tr class="tr"> | 52 | <tr class="tr"> |
| 53 | <td class="td td-row">{{ props.index + 1}}</td> | 53 | <td class="td td-row">{{ props.index + 1}}</td> |
| 54 | <td class="text-xs-center td td-row"> | 54 | <td class="text-xs-center td td-row"> |
| 55 | <v-avatar size="40"> | 55 | <v-avatar size="40"> |
| 56 | <img :src="props.item.profilePicUrl" v-if="props.item.profilePicUrl" /> | 56 | <img :src="props.item.profilePicUrl" v-if="props.item.profilePicUrl" /> |
| 57 | <img src="/static/icon/user.png" v-else-if="!props.item.profilePicUrl" /> | 57 | <img src="/static/icon/user.png" v-else-if="!props.item.profilePicUrl" /> |
| 58 | </v-avatar> | 58 | </v-avatar> |
| 59 | </td> | 59 | </td> |
| 60 | <td class="text-xs-center td td-row">{{ props.item.name}}</td> | 60 | <td class="text-xs-center td td-row">{{ props.item.name}}</td> |
| 61 | <td class="text-xs-center td td-row">{{ props.item.rollNo}}</td> | 61 | <td class="text-xs-center td td-row">{{ props.item.rollNo}}</td> |
| 62 | <td class="text-xs-center td td-row">{{ props.item.email }}</td> | 62 | <td class="text-xs-center td td-row">{{ props.item.email }}</td> |
| 63 | <td class="text-xs-center td td-row"> | 63 | <td class="text-xs-center td td-row"> |
| 64 | <router-link :to="{ name:'View Students Attendence',params: { id:props.item._id } }"> | 64 | <router-link :to="{ name:'View Students Attendence',params: { id:props.item._id } }"> |
| 65 | <v-tooltip top> | 65 | <v-tooltip top> |
| 66 | <img | 66 | <img |
| 67 | slot="activator" | 67 | slot="activator" |
| 68 | style="cursor:pointer; width:20px; height:25px; " | 68 | style="cursor:pointer; width:20px; height:25px; " |
| 69 | class="mr-3" | 69 | class="mr-3" |
| 70 | src="/static/icon/dashboard icons-47.png" | 70 | src="/static/icon/view.png" |
| 71 | /> | 71 | /> |
| 72 | <span>View</span> | 72 | <span>View</span> |
| 73 | </v-tooltip> | 73 | </v-tooltip> |
| 74 | </router-link> | 74 | </router-link> |
| 75 | <v-tooltip top> | 75 | <v-tooltip top> |
| 76 | <img | 76 | <img |
| 77 | slot="activator" | 77 | slot="activator" |
| 78 | style="cursor:pointer; width:20px; height:20px; " | 78 | style="cursor:pointer; width:20px; height:20px; " |
| 79 | @click="deleteItem(props.item)" | 79 | @click="deleteItem(props.item)" |
| 80 | class="mr-3" | 80 | class="mr-3" |
| 81 | src="/static/icon/dashboard icons-51.png" | 81 | src="/static/icon/delete.png" |
| 82 | /> | 82 | /> |
| 83 | <span>Delete</span> | 83 | <span>Delete</span> |
| 84 | </v-tooltip> | 84 | </v-tooltip> |
| 85 | </td> | 85 | </td> |
| 86 | </tr> | 86 | </tr> |
| 87 | </template> | 87 | </template> |
| 88 | <v-alert | 88 | <v-alert |
| 89 | slot="no-results" | 89 | slot="no-results" |
| 90 | :value="true" | 90 | :value="true" |
| 91 | color="error" | 91 | color="error" |
| 92 | icon="warning" | 92 | icon="warning" |
| 93 | >Your search for "{{ search }}" found no results.</v-alert> | 93 | >Your search for "{{ search }}" found no results.</v-alert> |
| 94 | </v-data-table> | 94 | </v-data-table> |
| 95 | <div class="loader" v-if="showLoader"> | 95 | <div class="loader" v-if="showLoader"> |
| 96 | <v-progress-circular indeterminate color="white"></v-progress-circular> | 96 | <v-progress-circular indeterminate color="white"></v-progress-circular> |
| 97 | </div> | 97 | </div> |
| 98 | </v-container> | 98 | </v-container> |
| 99 | </template> | 99 | </template> |
| 100 | 100 | ||
| 101 | <script> | 101 | <script> |
| 102 | import http from "@/Services/http.js"; | 102 | import http from "@/Services/http.js"; |
| 103 | import moment from "moment"; | 103 | import moment from "moment"; |
| 104 | 104 | ||
| 105 | export default { | 105 | export default { |
| 106 | data: () => ({ | 106 | data: () => ({ |
| 107 | snackbar: false, | 107 | snackbar: false, |
| 108 | y: "top", | 108 | y: "top", |
| 109 | x: "right", | 109 | x: "right", |
| 110 | mode: "", | 110 | mode: "", |
| 111 | timeout: 3000, | 111 | timeout: 3000, |
| 112 | text: "", | 112 | text: "", |
| 113 | show: true, | 113 | show: true, |
| 114 | showSearch: false, | 114 | showSearch: false, |
| 115 | showLoader: false, | 115 | showLoader: false, |
| 116 | loading: false, | 116 | loading: false, |
| 117 | date: null, | 117 | date: null, |
| 118 | search: "", | 118 | search: "", |
| 119 | addclass: [], | 119 | addclass: [], |
| 120 | pagination: { | 120 | pagination: { |
| 121 | rowsPerPage: 10 | 121 | rowsPerPage: 10 |
| 122 | }, | 122 | }, |
| 123 | imageData: {}, | 123 | imageData: {}, |
| 124 | imageName: "", | 124 | imageName: "", |
| 125 | imageUrl: "", | 125 | imageUrl: "", |
| 126 | imageFile: "", | 126 | imageFile: "", |
| 127 | headers: [ | 127 | headers: [ |
| 128 | { | 128 | { |
| 129 | text: "No", | 129 | text: "No", |
| 130 | align: "", | 130 | align: "", |
| 131 | sortable: false, | 131 | sortable: false, |
| 132 | value: "index" | 132 | value: "index" |
| 133 | }, | 133 | }, |
| 134 | { | 134 | { |
| 135 | text: "Profile Pic", | 135 | text: "Profile Pic", |
| 136 | value: "profilprofilePicUrlePicUrl", | 136 | value: "profilprofilePicUrlePicUrl", |
| 137 | sortable: false, | 137 | sortable: false, |
| 138 | align: "center" | 138 | align: "center" |
| 139 | }, | 139 | }, |
| 140 | { text: "Name", value: "name", sortable: false, align: "center" }, | 140 | { text: "Name", value: "name", sortable: false, align: "center" }, |
| 141 | { text: "Roll No", value: "rollNo", sortable: false, align: "center" }, | 141 | { text: "Roll No", value: "rollNo", sortable: false, align: "center" }, |
| 142 | { text: "Email", value: "email", sortable: false, align: "center" }, | 142 | { text: "Email", value: "email", sortable: false, align: "center" }, |
| 143 | { text: "Action", value: "", sortable: false, align: "center" } | 143 | { text: "Action", value: "", sortable: false, align: "center" } |
| 144 | ], | 144 | ], |
| 145 | // json_data: [], | 145 | // json_data: [], |
| 146 | studentsList: [], | 146 | studentsList: [], |
| 147 | parentId: "", | 147 | parentId: "", |
| 148 | token: "", | 148 | token: "", |
| 149 | selectStudents: { | 149 | selectStudents: { |
| 150 | select: "", | 150 | select: "", |
| 151 | selectSection: "" | 151 | selectSection: "" |
| 152 | } | 152 | } |
| 153 | }), | 153 | }), |
| 154 | methods: { | 154 | methods: { |
| 155 | getSections(_id) { | 155 | getSections(_id) { |
| 156 | this.showLoader = true; | 156 | this.showLoader = true; |
| 157 | var token = this.$store.state.token; | 157 | var token = this.$store.state.token; |
| 158 | http() | 158 | http() |
| 159 | .get( | 159 | .get( |
| 160 | "/getStudentsList", | 160 | "/getStudentsList", |
| 161 | { params: { classId: _id } }, | 161 | { params: { classId: _id } }, |
| 162 | { | 162 | { |
| 163 | headers: { Authorization: "Bearer " + token } | 163 | headers: { Authorization: "Bearer " + token } |
| 164 | } | 164 | } |
| 165 | ) | 165 | ) |
| 166 | .then(response => { | 166 | .then(response => { |
| 167 | this.showLoader = false; | 167 | this.showLoader = false; |
| 168 | this.studentsList = response.data.data; | 168 | this.studentsList = response.data.data; |
| 169 | }) | 169 | }) |
| 170 | .catch(error => { | 170 | .catch(error => { |
| 171 | this.showLoader = false; | 171 | this.showLoader = false; |
| 172 | if (error.response.status === 401) { | 172 | if (error.response.status === 401) { |
| 173 | this.$router.replace({ path: "/" }); | 173 | this.$router.replace({ path: "/" }); |
| 174 | this.$store.dispatch("setToken", null); | 174 | this.$store.dispatch("setToken", null); |
| 175 | this.$store.dispatch("Id", null); | 175 | this.$store.dispatch("Id", null); |
| 176 | } | 176 | } |
| 177 | }); | 177 | }); |
| 178 | }, | 178 | }, |
| 179 | getAllClass() { | 179 | getAllClass() { |
| 180 | http() | 180 | http() |
| 181 | .get("/getClassesList", { | 181 | .get("/getClassesList", { |
| 182 | headers: { Authorization: "Bearer " + this.token } | 182 | headers: { Authorization: "Bearer " + this.token } |
| 183 | }) | 183 | }) |
| 184 | .then(response => { | 184 | .then(response => { |
| 185 | this.addclass = response.data.data; | 185 | this.addclass = response.data.data; |
| 186 | }) | 186 | }) |
| 187 | .catch(error => { | 187 | .catch(error => { |
| 188 | // console.log("err====>", err); | 188 | // console.log("err====>", err); |
| 189 | // this.$router.replace({ path: "/" }); | 189 | // this.$router.replace({ path: "/" }); |
| 190 | }); | 190 | }); |
| 191 | }, | 191 | }, |
| 192 | displaySearch() { | 192 | displaySearch() { |
| 193 | (this.show = false), (this.showSearch = true); | 193 | (this.show = false), (this.showSearch = true); |
| 194 | }, | 194 | }, |
| 195 | closeSearch() { | 195 | closeSearch() { |
| 196 | this.showSearch = false; | 196 | this.showSearch = false; |
| 197 | this.show = true; | 197 | this.show = true; |
| 198 | this.search = ""; | 198 | this.search = ""; |
| 199 | } | 199 | } |
| 200 | }, | 200 | }, |
| 201 | mounted() { | 201 | mounted() { |
| 202 | // this.getStudentList(); | 202 | // this.getStudentList(); |
| 203 | this.token = this.$store.state.token; | 203 | this.token = this.$store.state.token; |
| 204 | this.getAllClass(); | 204 | this.getAllClass(); |
| 205 | } | 205 | } |
| 206 | }; | 206 | }; |
| 207 | </script> | 207 | </script> |
src/pages/Attendence/teacherAttendence.vue
| 1 | <template> | 1 | <template> |
| 2 | <v-container fluid class="body-color"> | 2 | <v-container fluid class="body-color"> |
| 3 | <!-- ****** ATTENDENCE TACHERS TABLE ****** --> | 3 | <!-- ****** ATTENDENCE TACHERS TABLE ****** --> |
| 4 | <v-toolbar color="transparent" flat> | 4 | <v-toolbar color="transparent" flat> |
| 5 | <v-btn | 5 | <v-btn |
| 6 | fab | 6 | fab |
| 7 | dark | 7 | dark |
| 8 | class="open-dialog-button hidden-xl-only hidden-md-only hidden-lg-only" | 8 | class="open-dialog-button hidden-xl-only hidden-md-only hidden-lg-only" |
| 9 | small | 9 | small |
| 10 | @click="addTeacherAttendenceDialog = true" | 10 | @click="addTeacherAttendenceDialog = true" |
| 11 | > | 11 | > |
| 12 | <v-icon dark>add</v-icon> | 12 | <v-icon dark>add</v-icon> |
| 13 | </v-btn> | 13 | </v-btn> |
| 14 | <v-btn | 14 | <v-btn |
| 15 | round | 15 | round |
| 16 | class="open-dialog-button hidden-sm-only hidden-xs-only" | 16 | class="open-dialog-button hidden-sm-only hidden-xs-only" |
| 17 | dark | 17 | dark |
| 18 | @click="addTeacherAttendenceDialog = true" | 18 | @click="addTeacherAttendenceDialog = true" |
| 19 | > | 19 | > |
| 20 | <v-icon class="white--text pr-1" size="20">add</v-icon>Add Teacher Attendence | 20 | <v-icon class="white--text pr-1" size="20">add</v-icon>Add Teacher Attendence |
| 21 | </v-btn> | 21 | </v-btn> |
| 22 | <v-spacer></v-spacer> | 22 | <v-spacer></v-spacer> |
| 23 | <v-card-title class="body-1" v-show="show"> | 23 | <v-card-title class="body-1" v-show="show"> |
| 24 | <v-btn icon large flat @click="displaySearch"> | 24 | <v-btn icon large flat @click="displaySearch"> |
| 25 | <v-avatar size="27"> | 25 | <v-avatar size="27"> |
| 26 | <img src="/static/icon/dashboard icons-49.png" alt="icon" /> | 26 | <img src="/static/icon/search.png" alt="icon" /> |
| 27 | </v-avatar> | 27 | </v-avatar> |
| 28 | </v-btn> | 28 | </v-btn> |
| 29 | </v-card-title> | 29 | </v-card-title> |
| 30 | <v-flex xs8 sm8 md3 lg2 v-show="showSearch"> | 30 | <v-flex xs8 sm8 md3 lg2 v-show="showSearch"> |
| 31 | <v-layout> | 31 | <v-layout> |
| 32 | <v-text-field v-model="search" label="Search" prepend-inner-icon="search" color="primary"></v-text-field> | 32 | <v-text-field v-model="search" label="Search" prepend-inner-icon="search" color="primary"></v-text-field> |
| 33 | <v-icon @click="closeSearch" color="error">close</v-icon> | 33 | <v-icon @click="closeSearch" color="error">close</v-icon> |
| 34 | </v-layout> | 34 | </v-layout> |
| 35 | </v-flex> | 35 | </v-flex> |
| 36 | </v-toolbar> | 36 | </v-toolbar> |
| 37 | <v-data-table | 37 | <v-data-table |
| 38 | :headers="headers" | 38 | :headers="headers" |
| 39 | :items="desserts" | 39 | :items="desserts" |
| 40 | :pagination.sync="pagination" | 40 | :pagination.sync="pagination" |
| 41 | :search="search" | 41 | :search="search" |
| 42 | > | 42 | > |
| 43 | <template slot="items" slot-scope="props"> | 43 | <template slot="items" slot-scope="props"> |
| 44 | <tr class="tr"> | 44 | <tr class="tr"> |
| 45 | <td class="td td-row">{{ props.index + 1}}</td> | 45 | <td class="td td-row">{{ props.index + 1}}</td> |
| 46 | <td class="text-xs-center td td-row"> | 46 | <td class="text-xs-center td td-row"> |
| 47 | <v-avatar size="40"> | 47 | <v-avatar size="40"> |
| 48 | <img :src="props.item.profilePicUrl" v-if="props.item.profilePicUrl" /> | 48 | <img :src="props.item.profilePicUrl" v-if="props.item.profilePicUrl" /> |
| 49 | <img src="/static/icon/user.png" v-else-if="!props.item.profilePicUrl" /> | 49 | <img src="/static/icon/user.png" v-else-if="!props.item.profilePicUrl" /> |
| 50 | </v-avatar> | 50 | </v-avatar> |
| 51 | </td> | 51 | </td> |
| 52 | <td class="td td-row text-xs-center">{{ props.item.name}}</td> | 52 | <td class="td td-row text-xs-center">{{ props.item.name}}</td> |
| 53 | <td class="td td-row text-xs-center">{{ props.item.email }}</td> | 53 | <td class="td td-row text-xs-center">{{ props.item.email }}</td> |
| 54 | <td class="td td-row text-xs-center">{{ props.item.mobileNo }}</td> | 54 | <td class="td td-row text-xs-center">{{ props.item.mobileNo }}</td> |
| 55 | <td class="text-xs-center td td-row"> | 55 | <td class="text-xs-center td td-row"> |
| 56 | <router-link | 56 | <router-link |
| 57 | :to="{ name:'View Teacher Attendence',params: { teacherId:props.item._id } }" | 57 | :to="{ name:'View Teacher Attendence',params: { teacherId:props.item._id } }" |
| 58 | > | 58 | > |
| 59 | <span> | 59 | <span> |
| 60 | <v-tooltip top> | 60 | <v-tooltip top> |
| 61 | <img | 61 | <img |
| 62 | slot="activator" | 62 | slot="activator" |
| 63 | style="cursor:pointer; width:25px; height:25px; " | 63 | style="cursor:pointer; width:25px; height:25px; " |
| 64 | src="/static/icon/dashboard icons-47.png" | 64 | src="/static/icon/view.png" |
| 65 | /> | 65 | /> |
| 66 | <span>View</span> | 66 | <span>View</span> |
| 67 | </v-tooltip> | 67 | </v-tooltip> |
| 68 | </span> | 68 | </span> |
| 69 | </router-link> | 69 | </router-link> |
| 70 | </td> | 70 | </td> |
| 71 | </tr> | 71 | </tr> |
| 72 | </template> | 72 | </template> |
| 73 | <v-alert | 73 | <v-alert |
| 74 | slot="no-results" | 74 | slot="no-results" |
| 75 | :value="true" | 75 | :value="true" |
| 76 | color="error" | 76 | color="error" |
| 77 | icon="warning" | 77 | icon="warning" |
| 78 | >Your search for "{{ search }}" found no results.</v-alert> | 78 | >Your search for "{{ search }}" found no results.</v-alert> |
| 79 | </v-data-table> | 79 | </v-data-table> |
| 80 | <!-- ****** Add Teachers Attendece****** --> | 80 | <!-- ****** Add Teachers Attendece****** --> |
| 81 | <v-dialog v-model="addTeacherAttendenceDialog" width="1600"> | 81 | <v-dialog v-model="addTeacherAttendenceDialog" width="1600"> |
| 82 | <v-card flat class="pa-2"> | 82 | <v-card flat class="pa-2"> |
| 83 | <v-layout> | 83 | <v-layout> |
| 84 | <v-flex xs12> | 84 | <v-flex xs12> |
| 85 | <label class="title text-xs-center">Add Teacher Attendence</label> | 85 | <label class="title text-xs-center">Add Teacher Attendence</label> |
| 86 | <v-icon size="24" class="right" @click="addTeacherAttendenceDialog = false">cancel</v-icon> | 86 | <v-icon size="24" class="right" @click="addTeacherAttendenceDialog = false">cancel</v-icon> |
| 87 | </v-flex> | 87 | </v-flex> |
| 88 | </v-layout> | 88 | </v-layout> |
| 89 | <v-flex xs12 class="mt-4"> | 89 | <v-flex xs12 class="mt-4"> |
| 90 | <v-form ref="form" v-model="valid" lazy-validation> | 90 | <v-form ref="form" v-model="valid" lazy-validation> |
| 91 | <v-layout wrap> | 91 | <v-layout wrap> |
| 92 | <v-flex xs12 class="px-4"> | 92 | <v-flex xs12 class="px-4"> |
| 93 | <v-layout> | 93 | <v-layout> |
| 94 | <v-flex xs6 sm6 lg3 md4> | 94 | <v-flex xs6 sm6 lg3 md4> |
| 95 | <v-menu | 95 | <v-menu |
| 96 | ref="menu" | 96 | ref="menu" |
| 97 | :close-on-content-click="false" | 97 | :close-on-content-click="false" |
| 98 | v-model="menu" | 98 | v-model="menu" |
| 99 | :nudge-right="40" | 99 | :nudge-right="40" |
| 100 | lazy | 100 | lazy |
| 101 | transition="scale-transition" | 101 | transition="scale-transition" |
| 102 | offset-y | 102 | offset-y |
| 103 | full-width | 103 | full-width |
| 104 | min-width="290px" | 104 | min-width="290px" |
| 105 | > | 105 | > |
| 106 | <v-text-field | 106 | <v-text-field |
| 107 | slot="activator" | 107 | slot="activator" |
| 108 | v-model="date" | 108 | v-model="date" |
| 109 | label="Select Date" | 109 | label="Select Date" |
| 110 | append-icon="event" | 110 | append-icon="event" |
| 111 | :rules="dataValid" | 111 | :rules="dataValid" |
| 112 | readonly | 112 | readonly |
| 113 | ></v-text-field> | 113 | ></v-text-field> |
| 114 | <v-date-picker | 114 | <v-date-picker |
| 115 | ref="picker" | 115 | ref="picker" |
| 116 | v-model="date" | 116 | v-model="date" |
| 117 | :max="new Date().toISOString().substr(0, 10)" | 117 | :max="new Date().toISOString().substr(0, 10)" |
| 118 | min="1950-01-01" | 118 | min="1950-01-01" |
| 119 | @change="save" | 119 | @change="save" |
| 120 | ></v-date-picker> | 120 | ></v-date-picker> |
| 121 | </v-menu> | 121 | </v-menu> |
| 122 | </v-flex> | 122 | </v-flex> |
| 123 | <v-flex xs6 sm6 lg9 md8> | 123 | <v-flex xs6 sm6 lg9 md8> |
| 124 | <v-btn class="right mt-3 add-button" dark round @click="showTable">Attendence</v-btn> | 124 | <v-btn class="right mt-3 add-button" dark round @click="showTable">Attendence</v-btn> |
| 125 | </v-flex> | 125 | </v-flex> |
| 126 | </v-layout> | 126 | </v-layout> |
| 127 | </v-flex> | 127 | </v-flex> |
| 128 | </v-layout> | 128 | </v-layout> |
| 129 | </v-form> | 129 | </v-form> |
| 130 | </v-flex> | 130 | </v-flex> |
| 131 | <v-flex xs12 v-show="attendeceTable" class> | 131 | <v-flex xs12 v-show="attendeceTable" class> |
| 132 | <v-data-table | 132 | <v-data-table |
| 133 | :headers="headers" | 133 | :headers="headers" |
| 134 | :items="teachersData" | 134 | :items="teachersData" |
| 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"> | 141 | <td class="text-xs-center td td-row"> |
| 142 | <v-avatar size="40"> | 142 | <v-avatar size="40"> |
| 143 | <img :src="props.item.profilePicUrl" v-if="props.item.profilePicUrl" /> | 143 | <img :src="props.item.profilePicUrl" v-if="props.item.profilePicUrl" /> |
| 144 | <img src="/static/icon/user.png" v-else-if="!props.item.profilePicUrl" /> | 144 | <img src="/static/icon/user.png" v-else-if="!props.item.profilePicUrl" /> |
| 145 | </v-avatar> | 145 | </v-avatar> |
| 146 | </td> | 146 | </td> |
| 147 | <td class="text-xs-center td td-row">{{ props.item.name}}</td> | 147 | <td class="text-xs-center td td-row">{{ props.item.name}}</td> |
| 148 | <td class="text-xs-center td td-row">{{ props.item.email }}</td> | 148 | <td class="text-xs-center td td-row">{{ props.item.email }}</td> |
| 149 | <td class="text-xs-center td td-row">{{ props.item.mobileNo }}</td> | 149 | <td class="text-xs-center td td-row">{{ props.item.mobileNo }}</td> |
| 150 | <td class="text-xs-center td td-row"> | 150 | <td class="text-xs-center td td-row"> |
| 151 | <v-radio-group v-model="props.item.attendence" :mandatory="false" row> | 151 | <v-radio-group v-model="props.item.attendence" :mandatory="false" row> |
| 152 | <v-radio | 152 | <v-radio |
| 153 | v-for="attendences in attendenceType" | 153 | v-for="attendences in attendenceType" |
| 154 | :key="attendences.value" | 154 | :key="attendences.value" |
| 155 | :label="`${attendences.label}`" | 155 | :label="`${attendences.label}`" |
| 156 | :value="attendences.value" | 156 | :value="attendences.value" |
| 157 | ></v-radio> | 157 | ></v-radio> |
| 158 | </v-radio-group> | 158 | </v-radio-group> |
| 159 | </td> | 159 | </td> |
| 160 | </tr> | 160 | </tr> |
| 161 | </template> | 161 | </template> |
| 162 | </v-data-table> | 162 | </v-data-table> |
| 163 | <v-flex xs12> | 163 | <v-flex xs12> |
| 164 | <v-card-actions> | 164 | <v-card-actions> |
| 165 | <v-spacer></v-spacer> | 165 | <v-spacer></v-spacer> |
| 166 | <v-btn @click="submit()" class="add-button" round dark>Submit</v-btn> | 166 | <v-btn @click="submit()" class="add-button" round dark>Submit</v-btn> |
| 167 | </v-card-actions> | 167 | </v-card-actions> |
| 168 | </v-flex> | 168 | </v-flex> |
| 169 | </v-flex> | 169 | </v-flex> |
| 170 | </v-card> | 170 | </v-card> |
| 171 | </v-dialog> | 171 | </v-dialog> |
| 172 | <v-snackbar | 172 | <v-snackbar |
| 173 | :timeout="timeout" | 173 | :timeout="timeout" |
| 174 | :top="y === 'top'" | 174 | :top="y === 'top'" |
| 175 | :right="x === 'right'" | 175 | :right="x === 'right'" |
| 176 | :vertical="mode === 'vertical'" | 176 | :vertical="mode === 'vertical'" |
| 177 | v-model="snackbar" | 177 | v-model="snackbar" |
| 178 | color="success" | 178 | color="success" |
| 179 | >{{ text }}</v-snackbar> | 179 | >{{ text }}</v-snackbar> |
| 180 | <div class="loader" v-if="showLoader"> | 180 | <div class="loader" v-if="showLoader"> |
| 181 | <v-progress-circular indeterminate color="white"></v-progress-circular> | 181 | <v-progress-circular indeterminate color="white"></v-progress-circular> |
| 182 | </div> | 182 | </div> |
| 183 | </v-container> | 183 | </v-container> |
| 184 | </template> | 184 | </template> |
| 185 | 185 | ||
| 186 | <script> | 186 | <script> |
| 187 | import http from "@/Services/http.js"; | 187 | import http from "@/Services/http.js"; |
| 188 | import moment from "moment"; | 188 | import moment from "moment"; |
| 189 | 189 | ||
| 190 | export default { | 190 | export default { |
| 191 | data: () => ({ | 191 | data: () => ({ |
| 192 | snackbar: false, | 192 | snackbar: false, |
| 193 | y: "top", | 193 | y: "top", |
| 194 | x: "right", | 194 | x: "right", |
| 195 | mode: "", | 195 | mode: "", |
| 196 | timeout: 5000, | 196 | timeout: 5000, |
| 197 | text: "", | 197 | text: "", |
| 198 | date: null, | 198 | date: null, |
| 199 | menu: false, | 199 | menu: false, |
| 200 | show: true, | 200 | show: true, |
| 201 | showSearch: false, | 201 | showSearch: false, |
| 202 | addTeacherAttendenceDialog: false, | 202 | addTeacherAttendenceDialog: false, |
| 203 | attendeceTable: false, | 203 | attendeceTable: false, |
| 204 | showLoader: false, | 204 | showLoader: false, |
| 205 | loading: false, | 205 | loading: false, |
| 206 | search: "", | 206 | search: "", |
| 207 | valid: true, | 207 | valid: true, |
| 208 | isActive: true, | 208 | isActive: true, |
| 209 | newActive: false, | 209 | newActive: false, |
| 210 | dataValid: [v => !!v || "Date is required"], | 210 | dataValid: [v => !!v || "Date is required"], |
| 211 | attendenceType: [ | 211 | attendenceType: [ |
| 212 | { | 212 | { |
| 213 | label: "Present", | 213 | label: "Present", |
| 214 | value: "present" | 214 | value: "present" |
| 215 | }, | 215 | }, |
| 216 | { | 216 | { |
| 217 | label: "Late Present With Excuset", | 217 | label: "Late Present With Excuset", |
| 218 | value: "latePresentWithExcuse" | 218 | value: "latePresentWithExcuse" |
| 219 | }, | 219 | }, |
| 220 | { | 220 | { |
| 221 | label: "Late Present", | 221 | label: "Late Present", |
| 222 | value: "latePresent" | 222 | value: "latePresent" |
| 223 | }, | 223 | }, |
| 224 | { | 224 | { |
| 225 | label: "Absent", | 225 | label: "Absent", |
| 226 | value: "absent" | 226 | value: "absent" |
| 227 | } | 227 | } |
| 228 | ], | 228 | ], |
| 229 | pagination: { | 229 | pagination: { |
| 230 | rowsPerPage: 8 | 230 | rowsPerPage: 8 |
| 231 | }, | 231 | }, |
| 232 | headers: [ | 232 | headers: [ |
| 233 | { | 233 | { |
| 234 | text: "No", | 234 | text: "No", |
| 235 | align: "", | 235 | align: "", |
| 236 | sortable: false, | 236 | sortable: false, |
| 237 | value: "No" | 237 | value: "No" |
| 238 | }, | 238 | }, |
| 239 | { | 239 | { |
| 240 | text: "Profile Pic", | 240 | text: "Profile Pic", |
| 241 | value: "profilePicUrl", | 241 | value: "profilePicUrl", |
| 242 | sortable: false, | 242 | sortable: false, |
| 243 | align: "center" | 243 | align: "center" |
| 244 | }, | 244 | }, |
| 245 | { text: "Name", value: "name", sortable: false, align: "center" }, | 245 | { text: "Name", value: "name", sortable: false, align: "center" }, |
| 246 | { text: "Email", value: "email", sortable: false, align: "center" }, | 246 | { text: "Email", value: "email", sortable: false, align: "center" }, |
| 247 | { | 247 | { |
| 248 | text: "Mobile No", | 248 | text: "Mobile No", |
| 249 | value: "mobileNo", | 249 | value: "mobileNo", |
| 250 | sortable: false, | 250 | sortable: false, |
| 251 | align: "center" | 251 | align: "center" |
| 252 | }, | 252 | }, |
| 253 | { text: "Attendance", value: "", sortable: false, align: "center" } | 253 | { text: "Attendance", value: "", sortable: false, align: "center" } |
| 254 | ], | 254 | ], |
| 255 | desserts: [], | 255 | desserts: [], |
| 256 | teachersData: [], | 256 | teachersData: [], |
| 257 | addTeachers: {} | 257 | addTeachers: {} |
| 258 | }), | 258 | }), |
| 259 | watch: { | 259 | watch: { |
| 260 | menu(val) { | 260 | menu(val) { |
| 261 | val && this.$nextTick(() => (this.$refs.picker.activePicker = "DAY")); | 261 | val && this.$nextTick(() => (this.$refs.picker.activePicker = "DAY")); |
| 262 | } | 262 | } |
| 263 | }, | 263 | }, |
| 264 | methods: { | 264 | methods: { |
| 265 | save(date) { | 265 | save(date) { |
| 266 | this.$refs.menu.save(date); | 266 | this.$refs.menu.save(date); |
| 267 | }, | 267 | }, |
| 268 | showTable() { | 268 | showTable() { |
| 269 | this.attendeceTable = true; | 269 | this.attendeceTable = true; |
| 270 | this.getTeacherList(); | 270 | this.getTeacherList(); |
| 271 | }, | 271 | }, |
| 272 | getTeacherList() { | 272 | getTeacherList() { |
| 273 | this.showLoader = true; | 273 | this.showLoader = true; |
| 274 | var token = this.$store.state.token; | 274 | var token = this.$store.state.token; |
| 275 | http() | 275 | http() |
| 276 | .get("/getTeachersList", { | 276 | .get("/getTeachersList", { |
| 277 | headers: { Authorization: "Bearer " + token } | 277 | headers: { Authorization: "Bearer " + token } |
| 278 | }) | 278 | }) |
| 279 | .then(response => { | 279 | .then(response => { |
| 280 | this.teachersData = response.data.data; | 280 | this.teachersData = response.data.data; |
| 281 | this.desserts = response.data.data; | 281 | this.desserts = response.data.data; |
| 282 | var attendence = ""; | 282 | var attendence = ""; |
| 283 | for (let i = 0; i < this.teachersData.length; i++) { | 283 | for (let i = 0; i < this.teachersData.length; i++) { |
| 284 | this.teachersData[i].attendence = "present"; | 284 | this.teachersData[i].attendence = "present"; |
| 285 | } | 285 | } |
| 286 | this.showLoader = false; | 286 | this.showLoader = false; |
| 287 | // console.log("getTeacherList=====>",this.desserts) | 287 | // console.log("getTeacherList=====>",this.desserts) |
| 288 | }) | 288 | }) |
| 289 | .catch(error => { | 289 | .catch(error => { |
| 290 | this.showLoader = false; | 290 | this.showLoader = false; |
| 291 | if (error.response.status === 401) { | 291 | if (error.response.status === 401) { |
| 292 | this.$router.replace({ path: "/" }); | 292 | this.$router.replace({ path: "/" }); |
| 293 | this.$store.dispatch("setToken", null); | 293 | this.$store.dispatch("setToken", null); |
| 294 | this.$store.dispatch("Id", null); | 294 | this.$store.dispatch("Id", null); |
| 295 | } | 295 | } |
| 296 | }); | 296 | }); |
| 297 | }, | 297 | }, |
| 298 | submit() { | 298 | submit() { |
| 299 | var teachersAttendence = []; | 299 | var teachersAttendence = []; |
| 300 | for (var j = 0; j < this.teachersData.length; j++) { | 300 | for (var j = 0; j < this.teachersData.length; j++) { |
| 301 | teachersAttendence.push({ | 301 | teachersAttendence.push({ |
| 302 | teacherId: this.teachersData[j]._id, | 302 | teacherId: this.teachersData[j]._id, |
| 303 | attendanceType: this.teachersData[j].attendence | 303 | attendanceType: this.teachersData[j].attendence |
| 304 | }); | 304 | }); |
| 305 | } | 305 | } |
| 306 | if (this.$refs.form.validate()) { | 306 | if (this.$refs.form.validate()) { |
| 307 | let attendanceData = { | 307 | let attendanceData = { |
| 308 | date: this.date, | 308 | date: this.date, |
| 309 | teachers: teachersAttendence | 309 | teachers: teachersAttendence |
| 310 | }; | 310 | }; |
| 311 | http() | 311 | http() |
| 312 | .post("/createTeacherAttendance", attendanceData) | 312 | .post("/createTeacherAttendance", attendanceData) |
| 313 | .then(response => { | 313 | .then(response => { |
| 314 | this.snackbar = true; | 314 | this.snackbar = true; |
| 315 | this.text = response.data.message; | 315 | this.text = response.data.message; |
| 316 | this.addTeacherAttendenceDialog = false; | 316 | this.addTeacherAttendenceDialog = false; |
| 317 | }) | 317 | }) |
| 318 | .catch(error => { | 318 | .catch(error => { |
| 319 | this.snackbar = true; | 319 | this.snackbar = true; |
| 320 | this.text = error.response.data.message; | 320 | this.text = error.response.data.message; |
| 321 | }); | 321 | }); |
| 322 | } | 322 | } |
| 323 | }, | 323 | }, |
| 324 | clear() { | 324 | clear() { |
| 325 | this.$refs.form.reset(); | 325 | this.$refs.form.reset(); |
| 326 | this.imageUrl = ""; | 326 | this.imageUrl = ""; |
| 327 | }, | 327 | }, |
| 328 | 328 | ||
| 329 | displaySearch() { | 329 | displaySearch() { |
| 330 | (this.show = false), (this.showSearch = true); | 330 | (this.show = false), (this.showSearch = true); |
| 331 | }, | 331 | }, |
| 332 | closeSearch() { | 332 | closeSearch() { |
| 333 | this.showSearch = false; | 333 | this.showSearch = false; |
| 334 | this.show = true; | 334 | this.show = true; |
| 335 | this.search = ""; | 335 | this.search = ""; |
| 336 | } | 336 | } |
| 337 | }, | 337 | }, |
| 338 | mounted() { | 338 | mounted() { |
| 339 | this.getTeacherList(); | 339 | this.getTeacherList(); |
| 340 | } | 340 | } |
| 341 | }; | 341 | }; |
| 342 | </script> | 342 | </script> |
src/pages/Class/addclass.vue
| 1 | <template> | 1 | <template> |
| 2 | <v-container fluid class="body-color"> | 2 | <v-container fluid class="body-color"> |
| 3 | <!-- ****** EDIT ClASS ****** --> | 3 | <!-- ****** EDIT ClASS ****** --> |
| 4 | <v-dialog v-model="editClassDialog" max-width="400px"> | 4 | <v-dialog v-model="editClassDialog" 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 Class</label> | 8 | <label class="title text-xs-center">Edit Class</label> |
| 9 | <v-icon size="24" class="right" @click="editClassDialog = false">cancel</v-icon> | 9 | <v-icon size="24" class="right" @click="editClassDialog = 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-layout justify-center> | 13 | <v-layout justify-center> |
| 14 | <v-flex xs12 sm12> | 14 | <v-flex xs12 sm12> |
| 15 | <v-flex xs12> | 15 | <v-flex xs12> |
| 16 | <v-text-field v-model="editedItem.classNum" @keyup.enter="save" :rules="nameRules"></v-text-field> | 16 | <v-text-field v-model="editedItem.classNum" @keyup.enter="save" :rules="nameRules"></v-text-field> |
| 17 | </v-flex> | 17 | </v-flex> |
| 18 | <v-card-actions> | 18 | <v-card-actions> |
| 19 | <v-spacer></v-spacer> | 19 | <v-spacer></v-spacer> |
| 20 | <v-btn round dark @click="save" class="add-button">Save</v-btn> | 20 | <v-btn round dark @click="save" class="add-button">Save</v-btn> |
| 21 | <v-spacer></v-spacer> | 21 | <v-spacer></v-spacer> |
| 22 | </v-card-actions> | 22 | </v-card-actions> |
| 23 | </v-flex> | 23 | </v-flex> |
| 24 | </v-layout> | 24 | </v-layout> |
| 25 | </v-container> | 25 | </v-container> |
| 26 | </v-card> | 26 | </v-card> |
| 27 | </v-dialog> | 27 | </v-dialog> |
| 28 | 28 | ||
| 29 | <!-- ****** PROFILE VIEW STUDENTS ****** --> | 29 | <!-- ****** PROFILE VIEW STUDENTS ****** --> |
| 30 | <v-dialog v-model="profileClassDialog" max-width="400px"> | 30 | <v-dialog v-model="profileClassDialog" max-width="400px"> |
| 31 | <v-card flat class="card-style pa-3" dark> | 31 | <v-card flat class="card-style pa-3" dark> |
| 32 | <v-layout> | 32 | <v-layout> |
| 33 | <v-flex xs12> | 33 | <v-flex xs12> |
| 34 | <label class="title text-xs-center">View Class</label> | 34 | <label class="title text-xs-center">View Class</label> |
| 35 | <v-icon size="24" class="right" @click="profileClassDialog = false">cancel</v-icon> | 35 | <v-icon size="24" class="right" @click="profileClassDialog = false">cancel</v-icon> |
| 36 | </v-flex> | 36 | </v-flex> |
| 37 | </v-layout> | 37 | </v-layout> |
| 38 | <v-card-text> | 38 | <v-card-text> |
| 39 | <v-container grid-list-md> | 39 | <v-container grid-list-md> |
| 40 | <v-layout wrap> | 40 | <v-layout wrap> |
| 41 | <v-flex xs6 sm6> | 41 | <v-flex xs6 sm6> |
| 42 | <h5 class="right my-1 subheading"> | 42 | <h5 class="right my-1 subheading"> |
| 43 | <b>Class Name:</b> | 43 | <b>Class Name:</b> |
| 44 | </h5> | 44 | </h5> |
| 45 | </v-flex> | 45 | </v-flex> |
| 46 | <v-flex sm6 xs6> | 46 | <v-flex sm6 xs6> |
| 47 | <h5 class="my-1">{{ editedItem.classNum }}</h5> | 47 | <h5 class="my-1">{{ editedItem.classNum }}</h5> |
| 48 | </v-flex> | 48 | </v-flex> |
| 49 | </v-layout> | 49 | </v-layout> |
| 50 | </v-container> | 50 | </v-container> |
| 51 | </v-card-text> | 51 | </v-card-text> |
| 52 | </v-card> | 52 | </v-card> |
| 53 | </v-dialog> | 53 | </v-dialog> |
| 54 | 54 | ||
| 55 | <!-- ****** Class Table ****** --> | 55 | <!-- ****** Class Table ****** --> |
| 56 | 56 | ||
| 57 | <v-toolbar color="transparent" flat> | 57 | <v-toolbar color="transparent" flat> |
| 58 | <v-btn | 58 | <v-btn |
| 59 | fab | 59 | fab |
| 60 | dark | 60 | dark |
| 61 | class="open-dialog-button hidden-xl-only hidden-md-only hidden-lg-only" | 61 | class="open-dialog-button hidden-xl-only hidden-md-only hidden-lg-only" |
| 62 | small | 62 | small |
| 63 | @click="addClassDialog = true" | 63 | @click="addClassDialog = true" |
| 64 | > | 64 | > |
| 65 | <v-icon dark>add</v-icon> | 65 | <v-icon dark>add</v-icon> |
| 66 | </v-btn> | 66 | </v-btn> |
| 67 | <v-btn | 67 | <v-btn |
| 68 | round | 68 | round |
| 69 | class="open-dialog-button hidden-sm-only hidden-xs-only" | 69 | class="open-dialog-button hidden-sm-only hidden-xs-only" |
| 70 | dark | 70 | dark |
| 71 | @click="addClassDialog = true" | 71 | @click="addClassDialog = true" |
| 72 | > | 72 | > |
| 73 | <v-icon class="white--text pr-1" size="20">add</v-icon>Add Class | 73 | <v-icon class="white--text pr-1" size="20">add</v-icon>Add Class |
| 74 | </v-btn> | 74 | </v-btn> |
| 75 | <v-spacer></v-spacer> | 75 | <v-spacer></v-spacer> |
| 76 | <v-card-title class="body-1" v-show="show"> | 76 | <v-card-title class="body-1" v-show="show"> |
| 77 | <v-btn icon large flat @click="displaySearch"> | 77 | <v-btn icon large flat @click="displaySearch"> |
| 78 | <v-avatar size="27"> | 78 | <v-avatar size="27"> |
| 79 | <img src="/static/icon/dashboard icons-49.png" alt="icon" /> | 79 | <img src="/static/icon/search.png" alt="icon" /> |
| 80 | </v-avatar> | 80 | </v-avatar> |
| 81 | </v-btn> | 81 | </v-btn> |
| 82 | </v-card-title> | 82 | </v-card-title> |
| 83 | <v-flex xs8 sm8 md3 lg2 v-show="showSearch"> | 83 | <v-flex xs8 sm8 md3 lg2 v-show="showSearch"> |
| 84 | <v-layout> | 84 | <v-layout> |
| 85 | <v-text-field v-model="search" label="Search" prepend-inner-icon="search" color="primary"></v-text-field> | 85 | <v-text-field v-model="search" label="Search" prepend-inner-icon="search" color="primary"></v-text-field> |
| 86 | <v-icon @click="closeSearch" color="error">close</v-icon> | 86 | <v-icon @click="closeSearch" color="error">close</v-icon> |
| 87 | </v-layout> | 87 | </v-layout> |
| 88 | </v-flex> | 88 | </v-flex> |
| 89 | </v-toolbar> | 89 | </v-toolbar> |
| 90 | <v-data-table | 90 | <v-data-table |
| 91 | :headers="headers" | 91 | :headers="headers" |
| 92 | :items="classList" | 92 | :items="classList" |
| 93 | :pagination.sync="pagination" | 93 | :pagination.sync="pagination" |
| 94 | :search="search" | 94 | :search="search" |
| 95 | > | 95 | > |
| 96 | <template slot="items" slot-scope="props"> | 96 | <template slot="items" slot-scope="props"> |
| 97 | <tr class="tr"> | 97 | <tr class="tr"> |
| 98 | <td class="td td-row">{{ props.index + 1 }}</td> | 98 | <td class="td td-row">{{ props.index + 1 }}</td> |
| 99 | <td class="text-xs-center td td-row">{{ props.item.classNum}}</td> | 99 | <td class="text-xs-center td td-row">{{ props.item.classNum}}</td> |
| 100 | <td class="text-xs-center td td-row"> | 100 | <td class="text-xs-center td td-row"> |
| 101 | <span> | 101 | <span> |
| 102 | <v-tooltip top> | 102 | <v-tooltip top> |
| 103 | <img | 103 | <img |
| 104 | slot="activator" | 104 | slot="activator" |
| 105 | style="cursor:pointer; width:25px; height:25px; " | 105 | style="cursor:pointer; width:25px; height:25px; " |
| 106 | class="mr-3" | 106 | class="mr-3" |
| 107 | @click="profile(props.item)" | 107 | @click="profile(props.item)" |
| 108 | src="/static/icon/dashboard icons-47.png" | 108 | src="/static/icon/view.png" |
| 109 | /> | 109 | /> |
| 110 | <span>View</span> | 110 | <span>View</span> |
| 111 | </v-tooltip> | 111 | </v-tooltip> |
| 112 | <v-tooltip top> | 112 | <v-tooltip top> |
| 113 | <img | 113 | <img |
| 114 | slot="activator" | 114 | slot="activator" |
| 115 | style="cursor:pointer; width:20px; height:18px; " | 115 | style="cursor:pointer; width:20px; height:18px; " |
| 116 | class="mr-3" | 116 | class="mr-3" |
| 117 | @click="editItem(props.item)" | 117 | @click="editItem(props.item)" |
| 118 | src="/static/icon/dashboard icons-50.png" | 118 | src="/static/icon/edit.png" |
| 119 | /> | 119 | /> |
| 120 | <span>Edit</span> | 120 | <span>Edit</span> |
| 121 | </v-tooltip> | 121 | </v-tooltip> |
| 122 | <v-tooltip top> | 122 | <v-tooltip top> |
| 123 | <img | 123 | <img |
| 124 | slot="activator" | 124 | slot="activator" |
| 125 | style="cursor:pointer; width:20px; height:20px; " | 125 | style="cursor:pointer; width:20px; height:20px; " |
| 126 | @click="deleteItem(props.item)" | 126 | @click="deleteItem(props.item)" |
| 127 | src="/static/icon/dashboard icons-51.png" | 127 | src="/static/icon/delete.png" |
| 128 | /> | 128 | /> |
| 129 | <span>Delete</span> | 129 | <span>Delete</span> |
| 130 | </v-tooltip> | 130 | </v-tooltip> |
| 131 | </span> | 131 | </span> |
| 132 | </td> | 132 | </td> |
| 133 | </tr> | 133 | </tr> |
| 134 | </template> | 134 | </template> |
| 135 | <v-alert | 135 | <v-alert |
| 136 | slot="no-results" | 136 | slot="no-results" |
| 137 | :value="true" | 137 | :value="true" |
| 138 | color="error" | 138 | color="error" |
| 139 | icon="warning" | 139 | icon="warning" |
| 140 | >Your search for "{{ search }}" found no results.</v-alert> | 140 | >Your search for "{{ search }}" found no results.</v-alert> |
| 141 | </v-data-table> | 141 | </v-data-table> |
| 142 | 142 | ||
| 143 | <!-- ****** ADD Class ****** --> | 143 | <!-- ****** ADD Class ****** --> |
| 144 | <v-dialog v-model="addClassDialog" max-width="400px"> | 144 | <v-dialog v-model="addClassDialog" max-width="400px"> |
| 145 | <v-card flat class="card-style pa-2" dark> | 145 | <v-card flat class="card-style pa-2" dark> |
| 146 | <v-layout> | 146 | <v-layout> |
| 147 | <v-flex xs12> | 147 | <v-flex xs12> |
| 148 | <label class="title text-xs-center">Add Class</label> | 148 | <label class="title text-xs-center">Add Class</label> |
| 149 | <v-icon size="24" class="right" @click="addClassDialog = false">cancel</v-icon> | 149 | <v-icon size="24" class="right" @click="addClassDialog = false">cancel</v-icon> |
| 150 | </v-flex> | 150 | </v-flex> |
| 151 | </v-layout> | 151 | </v-layout> |
| 152 | <v-container fluid fill-height> | 152 | <v-container fluid fill-height> |
| 153 | <v-layout align-center> | 153 | <v-layout align-center> |
| 154 | <v-flex xs12> | 154 | <v-flex xs12> |
| 155 | <v-form ref="form" v-model="valid" lazy-validation> | 155 | <v-form ref="form" v-model="valid" lazy-validation> |
| 156 | <v-flex xs12 class="headline text-xs-center"> | 156 | <v-flex xs12 class="headline text-xs-center"> |
| 157 | <label>Class</label> | 157 | <label>Class</label> |
| 158 | </v-flex> | 158 | </v-flex> |
| 159 | <v-flex xs12> | 159 | <v-flex xs12> |
| 160 | <v-text-field | 160 | <v-text-field |
| 161 | v-model="addclasses.classNum" | 161 | v-model="addclasses.classNum" |
| 162 | placeholder="fill your class Name" | 162 | placeholder="fill your class Name" |
| 163 | type="text" | 163 | type="text" |
| 164 | :rules="nameRules" | 164 | :rules="nameRules" |
| 165 | required | 165 | required |
| 166 | ></v-text-field> | 166 | ></v-text-field> |
| 167 | </v-flex> | 167 | </v-flex> |
| 168 | <v-layout> | 168 | <v-layout> |
| 169 | <v-flex xs12 sm12> | 169 | <v-flex xs12 sm12> |
| 170 | <v-card-actions> | 170 | <v-card-actions> |
| 171 | <v-spacer></v-spacer> | 171 | <v-spacer></v-spacer> |
| 172 | <v-btn | 172 | <v-btn |
| 173 | @click="submit" | 173 | @click="submit" |
| 174 | class="add-button" | 174 | class="add-button" |
| 175 | round | 175 | round |
| 176 | dark | 176 | dark |
| 177 | :loading="loading" | 177 | :loading="loading" |
| 178 | >Add Class</v-btn> | 178 | >Add Class</v-btn> |
| 179 | <v-spacer></v-spacer> | 179 | <v-spacer></v-spacer> |
| 180 | </v-card-actions> | 180 | </v-card-actions> |
| 181 | </v-flex> | 181 | </v-flex> |
| 182 | </v-layout> | 182 | </v-layout> |
| 183 | </v-form> | 183 | </v-form> |
| 184 | </v-flex> | 184 | </v-flex> |
| 185 | </v-layout> | 185 | </v-layout> |
| 186 | </v-container> | 186 | </v-container> |
| 187 | </v-card> | 187 | </v-card> |
| 188 | </v-dialog> | 188 | </v-dialog> |
| 189 | <div class="loader" v-if="showLoader"> | 189 | <div class="loader" v-if="showLoader"> |
| 190 | <v-progress-circular indeterminate color="white"></v-progress-circular> | 190 | <v-progress-circular indeterminate color="white"></v-progress-circular> |
| 191 | </div> | 191 | </div> |
| 192 | <v-snackbar | 192 | <v-snackbar |
| 193 | :timeout="timeout" | 193 | :timeout="timeout" |
| 194 | :top="y === 'top'" | 194 | :top="y === 'top'" |
| 195 | :right="x === 'right'" | 195 | :right="x === 'right'" |
| 196 | :vertical="mode === 'vertical'" | 196 | :vertical="mode === 'vertical'" |
| 197 | v-model="snackbar" | 197 | v-model="snackbar" |
| 198 | :color="color" | 198 | :color="color" |
| 199 | >{{ text }}</v-snackbar> | 199 | >{{ text }}</v-snackbar> |
| 200 | </v-container> | 200 | </v-container> |
| 201 | </template> | 201 | </template> |
| 202 | 202 | ||
| 203 | <script> | 203 | <script> |
| 204 | import http from "@/Services/http.js"; | 204 | import http from "@/Services/http.js"; |
| 205 | 205 | ||
| 206 | export default { | 206 | export default { |
| 207 | data: () => ({ | 207 | data: () => ({ |
| 208 | snackbar: false, | 208 | snackbar: false, |
| 209 | y: "top", | 209 | y: "top", |
| 210 | x: "right", | 210 | x: "right", |
| 211 | mode: "", | 211 | mode: "", |
| 212 | timeout: 5000, | 212 | timeout: 5000, |
| 213 | text: "", | 213 | text: "", |
| 214 | color: "", | 214 | color: "", |
| 215 | show: true, | 215 | show: true, |
| 216 | showSearch: false, | 216 | showSearch: false, |
| 217 | showLoader: false, | 217 | showLoader: false, |
| 218 | loading: false, | 218 | loading: false, |
| 219 | addClassDialog: false, | 219 | addClassDialog: false, |
| 220 | search: "", | 220 | search: "", |
| 221 | editClassDialog: false, | 221 | editClassDialog: false, |
| 222 | profileClassDialog: false, | 222 | profileClassDialog: false, |
| 223 | valid: true, | 223 | valid: true, |
| 224 | pagination: { | 224 | pagination: { |
| 225 | rowsPerPage: 10 | 225 | rowsPerPage: 10 |
| 226 | }, | 226 | }, |
| 227 | nameRules: [v => !!v || " Class Name is required"], | 227 | nameRules: [v => !!v || " Class Name is required"], |
| 228 | headers: [ | 228 | headers: [ |
| 229 | { | 229 | { |
| 230 | text: "No", | 230 | text: "No", |
| 231 | align: "left", | 231 | align: "left", |
| 232 | sortable: false, | 232 | sortable: false, |
| 233 | value: "No" | 233 | value: "No" |
| 234 | }, | 234 | }, |
| 235 | { text: "Class No", value: "classNum", sortable: false, align: "center" }, | 235 | { text: "Class No", value: "classNum", sortable: false, align: "center" }, |
| 236 | 236 | ||
| 237 | { text: "Action", value: "", sortable: false, align: "center" } | 237 | { text: "Action", value: "", sortable: false, align: "center" } |
| 238 | ], | 238 | ], |
| 239 | classList: [], | 239 | classList: [], |
| 240 | editedIndex: -1, | 240 | editedIndex: -1, |
| 241 | editedItem: { | 241 | editedItem: { |
| 242 | classNum: "" | 242 | classNum: "" |
| 243 | }, | 243 | }, |
| 244 | addclasses: { | 244 | addclasses: { |
| 245 | classNum: "" | 245 | classNum: "" |
| 246 | } | 246 | } |
| 247 | }), | 247 | }), |
| 248 | methods: { | 248 | methods: { |
| 249 | getClassList() { | 249 | getClassList() { |
| 250 | this.showLoader = true; | 250 | this.showLoader = true; |
| 251 | var token = this.$store.state.token; | 251 | var token = this.$store.state.token; |
| 252 | http() | 252 | http() |
| 253 | .get("/getClassesList") | 253 | .get("/getClassesList") |
| 254 | .then(response => { | 254 | .then(response => { |
| 255 | this.classList = response.data.data; | 255 | this.classList = response.data.data; |
| 256 | this.showLoader = false; | 256 | this.showLoader = false; |
| 257 | }) | 257 | }) |
| 258 | .catch(error => { | 258 | .catch(error => { |
| 259 | this.showLoader = false; | 259 | this.showLoader = false; |
| 260 | if (error.response.status === 401) { | 260 | if (error.response.status === 401) { |
| 261 | this.$router.replace({ path: "/" }); | 261 | this.$router.replace({ path: "/" }); |
| 262 | this.$store.dispatch("setToken", null); | 262 | this.$store.dispatch("setToken", null); |
| 263 | this.$store.dispatch("Id", null); | 263 | this.$store.dispatch("Id", null); |
| 264 | } | 264 | } |
| 265 | }); | 265 | }); |
| 266 | }, | 266 | }, |
| 267 | editItem(item) { | 267 | editItem(item) { |
| 268 | this.editedIndex = this.classList.indexOf(item); | 268 | this.editedIndex = this.classList.indexOf(item); |
| 269 | this.editedItem = Object.assign({}, item); | 269 | this.editedItem = Object.assign({}, item); |
| 270 | this.editClassDialog = true; | 270 | this.editClassDialog = true; |
| 271 | }, | 271 | }, |
| 272 | profile(item) { | 272 | profile(item) { |
| 273 | this.editedIndex = this.classList.indexOf(item); | 273 | this.editedIndex = this.classList.indexOf(item); |
| 274 | this.editedItem = Object.assign({}, item); | 274 | this.editedItem = Object.assign({}, item); |
| 275 | this.profileClassDialog = true; | 275 | this.profileClassDialog = true; |
| 276 | }, | 276 | }, |
| 277 | deleteItem(item) { | 277 | deleteItem(item) { |
| 278 | let deleteStudent = { | 278 | let deleteStudent = { |
| 279 | classId: item._id | 279 | classId: item._id |
| 280 | }; | 280 | }; |
| 281 | http() | 281 | http() |
| 282 | .delete( | 282 | .delete( |
| 283 | "/deleteClass", | 283 | "/deleteClass", |
| 284 | confirm("Are you sure you want to delete this?") && { | 284 | confirm("Are you sure you want to delete this?") && { |
| 285 | params: deleteStudent | 285 | params: deleteStudent |
| 286 | } | 286 | } |
| 287 | ) | 287 | ) |
| 288 | .then(response => { | 288 | .then(response => { |
| 289 | this.snackbar = true; | 289 | this.snackbar = true; |
| 290 | this.text = response.data.message; | 290 | this.text = response.data.message; |
| 291 | this.color = "green"; | 291 | this.color = "green"; |
| 292 | this.getClassList(); | 292 | this.getClassList(); |
| 293 | }) | 293 | }) |
| 294 | .catch(error => { | 294 | .catch(error => { |
| 295 | this.snackbar = true; | 295 | this.snackbar = true; |
| 296 | this.color = "error"; | 296 | this.color = "error"; |
| 297 | this.text = error.response.data.message; | 297 | this.text = error.response.data.message; |
| 298 | }); | 298 | }); |
| 299 | }, | 299 | }, |
| 300 | close() { | 300 | close() { |
| 301 | this.editClassDialog = false; | 301 | this.editClassDialog = false; |
| 302 | }, | 302 | }, |
| 303 | closeProfile() { | 303 | closeProfile() { |
| 304 | this.profileClassDialog = false; | 304 | this.profileClassDialog = false; |
| 305 | }, | 305 | }, |
| 306 | submit() { | 306 | submit() { |
| 307 | if (this.$refs.form.validate()) { | 307 | if (this.$refs.form.validate()) { |
| 308 | let addClass = { | 308 | let addClass = { |
| 309 | classNum: this.addclasses.classNum | 309 | classNum: this.addclasses.classNum |
| 310 | }; | 310 | }; |
| 311 | this.loading = true; | 311 | this.loading = true; |
| 312 | http() | 312 | http() |
| 313 | .post("/createClass", addClass) | 313 | .post("/createClass", addClass) |
| 314 | .then(response => { | 314 | .then(response => { |
| 315 | this.getClassList(); | 315 | this.getClassList(); |
| 316 | this.snackbar = true; | 316 | this.snackbar = true; |
| 317 | this.text = response.data.message; | 317 | this.text = response.data.message; |
| 318 | this.color = "green" | 318 | this.color = "green" |
| 319 | this.clear(); | 319 | this.clear(); |
| 320 | this.loading = false; | 320 | this.loading = false; |
| 321 | this.addClassDialog = false; | 321 | this.addClassDialog = false; |
| 322 | }) | 322 | }) |
| 323 | .catch(error => { | 323 | .catch(error => { |
| 324 | this.loading = false; | 324 | this.loading = false; |
| 325 | this.snackbar = true; | 325 | this.snackbar = true; |
| 326 | this.color = "error"; | 326 | this.color = "error"; |
| 327 | this.text = error.response.data.message; | 327 | this.text = error.response.data.message; |
| 328 | }); | 328 | }); |
| 329 | } | 329 | } |
| 330 | }, | 330 | }, |
| 331 | clear() { | 331 | clear() { |
| 332 | this.$refs.form.reset(); | 332 | this.$refs.form.reset(); |
| 333 | }, | 333 | }, |
| 334 | save() { | 334 | save() { |
| 335 | let editClass = { | 335 | let editClass = { |
| 336 | classId: this.editedItem._id, | 336 | classId: this.editedItem._id, |
| 337 | classNum: this.editedItem.classNum | 337 | classNum: this.editedItem.classNum |
| 338 | }; | 338 | }; |
| 339 | http() | 339 | http() |
| 340 | .put("/updateClass", editClass) | 340 | .put("/updateClass", editClass) |
| 341 | .then(response => { | 341 | .then(response => { |
| 342 | this.snackbar = true; | 342 | this.snackbar = true; |
| 343 | this.text = response.data.message; | 343 | this.text = response.data.message; |
| 344 | this.color = "green"; | 344 | this.color = "green"; |
| 345 | this.getClassList(); | 345 | this.getClassList(); |
| 346 | this.close(); | 346 | this.close(); |
| 347 | }) | 347 | }) |
| 348 | .catch(error => { | 348 | .catch(error => { |
| 349 | this.snackbar = true; | 349 | this.snackbar = true; |
| 350 | this.text = error.response.data.message; | 350 | this.text = error.response.data.message; |
| 351 | this.color = "error"; | 351 | this.color = "error"; |
| 352 | // console.log(error); | 352 | // console.log(error); |
| 353 | }); | 353 | }); |
| 354 | }, | 354 | }, |
| 355 | displaySearch() { | 355 | displaySearch() { |
| 356 | (this.show = false), (this.showSearch = true); | 356 | (this.show = false), (this.showSearch = true); |
| 357 | }, | 357 | }, |
| 358 | closeSearch() { | 358 | closeSearch() { |
| 359 | this.showSearch = false; | 359 | this.showSearch = false; |
| 360 | this.show = true; | 360 | this.show = true; |
| 361 | this.search = ""; | 361 | this.search = ""; |
| 362 | } | 362 | } |
| 363 | }, | 363 | }, |
| 364 | mounted() { | 364 | mounted() { |
| 365 | this.getClassList(); | 365 | this.getClassList(); |
| 366 | } | 366 | } |
| 367 | // created() { | 367 | // created() { |
| 368 | // this.$root.$on("app:search", search => { | 368 | // this.$root.$on("app:search", search => { |
| 369 | // this.search = search; | 369 | // this.search = search; |
| 370 | // }); | 370 | // }); |
| 371 | // }, | 371 | // }, |
| 372 | // beforeDestroy() { | 372 | // beforeDestroy() { |
| 373 | // // dont forget to remove the listener | 373 | // // dont forget to remove the listener |
| 374 | // this.$root.$off("app:search"); | 374 | // this.$root.$off("app:search"); |
| 375 | // } | 375 | // } |
| 376 | }; | 376 | }; |
| 377 | </script> | 377 | </script> |
| 378 | <style> | 378 | <style> |
| 379 | </style> | 379 | </style> |
src/pages/Dashboard/dashboard.vue
| 1 | <template> | 1 | <template> |
| 2 | <v-app id="pages-dasboard"> | 2 | <v-app id="pages-dasboard"> |
| 3 | <!-- ****** VIEW PROFIL NOTICE BOARD ****** --> | 3 | <!-- ****** VIEW PROFIL NOTICE BOARD ****** --> |
| 4 | <!-- <v-dialog v-model="dialogNotice" max-width="940px" scrollable> | 4 | <!-- <v-dialog v-model="dialogNotice" max-width="940px" scrollable> |
| 5 | <v-card> | 5 | <v-card> |
| 6 | <v-toolbar color="grey lighten-2" flat> | 6 | <v-toolbar color="grey lighten-2" flat> |
| 7 | <v-spacer></v-spacer> | 7 | <v-spacer></v-spacer> |
| 8 | <v-toolbar-title> | 8 | <v-toolbar-title> |
| 9 | <h3>Notice Board</h3> | 9 | <h3>Notice Board</h3> |
| 10 | </v-toolbar-title> | 10 | </v-toolbar-title> |
| 11 | <v-spacer></v-spacer> | 11 | <v-spacer></v-spacer> |
| 12 | <v-icon @click="closeNotice">close</v-icon> | 12 | <v-icon @click="closeNotice">close</v-icon> |
| 13 | </v-toolbar> | 13 | </v-toolbar> |
| 14 | <v-card-text> | 14 | <v-card-text> |
| 15 | <v-layout> | 15 | <v-layout> |
| 16 | <v-flex align-center justify-center layout text-xs-center class="mt-2"> | 16 | <v-flex align-center justify-center layout text-xs-center class="mt-2"> |
| 17 | <img src="/static/icon/user.png" width="70px" v-if="!notice.eventImageUrl" /> | 17 | <img src="/static/icon/user.png" width="70px" v-if="!notice.eventImageUrl" /> |
| 18 | <img :src="notice.eventImageUrl" width="280px" v-else-if="notice.eventImageUrl" /> | 18 | <img :src="notice.eventImageUrl" width="280px" v-else-if="notice.eventImageUrl" /> |
| 19 | </v-flex> | 19 | </v-flex> |
| 20 | </v-layout> | 20 | </v-layout> |
| 21 | <v-container grid-list-md> | 21 | <v-container grid-list-md> |
| 22 | <v-layout wrap> | 22 | <v-layout wrap> |
| 23 | <v-flex> | 23 | <v-flex> |
| 24 | <v-layout> | 24 | <v-layout> |
| 25 | <v-flex xs5 sm6> | 25 | <v-flex xs5 sm6> |
| 26 | <h5 class="right my-1"> | 26 | <h5 class="right my-1"> |
| 27 | <b>Title:</b> | 27 | <b>Title:</b> |
| 28 | </h5> | 28 | </h5> |
| 29 | </v-flex> | 29 | </v-flex> |
| 30 | <v-flex sm6 xs8> | 30 | <v-flex sm6 xs8> |
| 31 | <h5 class="my-1">{{ notice.title }}</h5> | 31 | <h5 class="my-1">{{ notice.title }}</h5> |
| 32 | </v-flex> | 32 | </v-flex> |
| 33 | </v-layout> | 33 | </v-layout> |
| 34 | <v-layout> | 34 | <v-layout> |
| 35 | <v-flex xs5 sm6> | 35 | <v-flex xs5 sm6> |
| 36 | <h5 class="right my-1"> | 36 | <h5 class="right my-1"> |
| 37 | <b>Description:</b> | 37 | <b>Description:</b> |
| 38 | </h5> | 38 | </h5> |
| 39 | </v-flex> | 39 | </v-flex> |
| 40 | <v-flex sm6 xs8> | 40 | <v-flex sm6 xs8> |
| 41 | <h5 class="my-1">{{ notice.description }}</h5> | 41 | <h5 class="my-1">{{ notice.description }}</h5> |
| 42 | </v-flex> | 42 | </v-flex> |
| 43 | </v-layout> | 43 | </v-layout> |
| 44 | </v-flex> | 44 | </v-flex> |
| 45 | </v-layout> | 45 | </v-layout> |
| 46 | </v-container> | 46 | </v-container> |
| 47 | </v-card-text> | 47 | </v-card-text> |
| 48 | </v-card> | 48 | </v-card> |
| 49 | </v-dialog>--> | 49 | </v-dialog>--> |
| 50 | <!-- <v-container fluid grid-list-xl> --> | 50 | <!-- <v-container fluid grid-list-xl> --> |
| 51 | <v-layout wrap> | 51 | <v-layout wrap> |
| 52 | <v-flex xs12> | 52 | <v-flex xs12> |
| 53 | <v-layout wrap row> | 53 | <v-layout wrap row> |
| 54 | <!-- ***** Total Students ***** --> | 54 | <!-- ***** Total Students ***** --> |
| 55 | <v-flex xs12 sm12 md9> | 55 | <v-flex xs12 sm12 md9> |
| 56 | <v-container fluid grid-list-xl> | 56 | <v-container fluid grid-list-xl> |
| 57 | <v-flex xs12 sm12 md12> | 57 | <v-flex xs12 sm12 md12> |
| 58 | <v-layout wrap class> | 58 | <v-layout wrap class> |
| 59 | <v-flex xs12 sm12 md3> | 59 | <v-flex xs12 sm12 md3> |
| 60 | <router-link :to="{ name:'Students' }"> | 60 | <router-link :to="{ name:'Students' }"> |
| 61 | <v-card class="card pink-bgcolor"> | 61 | <v-card class="card pink-bgcolor"> |
| 62 | <v-card-title primary-title class="titleCard white--text py-3">Students</v-card-title> | 62 | <v-card-title primary-title class="titleCard white--text py-3">Students</v-card-title> |
| 63 | <img | 63 | <img |
| 64 | src="/static/icon/student.png" | 64 | src="/static/icon/student.png" |
| 65 | class="ml-2" | 65 | class="ml-2" |
| 66 | width="40" | 66 | width="40" |
| 67 | alt="icons" | 67 | alt="icons" |
| 68 | /> | 68 | /> |
| 69 | <v-card-title class="headline py-1 white--text">{{ students.length }}</v-card-title> | 69 | <v-card-title class="headline py-1 white--text">{{ students.length }}</v-card-title> |
| 70 | </v-card> | 70 | </v-card> |
| 71 | </router-link> | 71 | </router-link> |
| 72 | </v-flex> | 72 | </v-flex> |
| 73 | <!-- ***** Total Teachers***** --> | 73 | <!-- ***** Total Teachers***** --> |
| 74 | <v-flex xs12 sm12 md3> | 74 | <v-flex xs12 sm12 md3> |
| 75 | <router-link :to="{ name:'Teachers' }"> | 75 | <router-link :to="{ name:'Teachers' }"> |
| 76 | <v-card flat class="card elevation-2 firozi-bgcolor"> | 76 | <v-card flat class="card elevation-2 firozi-bgcolor"> |
| 77 | <v-card-title primary-title class="titleCard white--text py-3">Teachers</v-card-title> | 77 | <v-card-title primary-title class="titleCard white--text py-3">Teachers</v-card-title> |
| 78 | <img | 78 | <img |
| 79 | src="/static/icon/teacher.png" | 79 | src="/static/icon/teacher.png" |
| 80 | class="ml-2" | 80 | class="ml-2" |
| 81 | width="40" | 81 | width="40" |
| 82 | alt="icons" | 82 | alt="icons" |
| 83 | /> | 83 | /> |
| 84 | 84 | ||
| 85 | <v-card-title class="headline py-1 white--text">{{ teachers.length }}</v-card-title> | 85 | <v-card-title class="headline py-1 white--text">{{ teachers.length }}</v-card-title> |
| 86 | </v-card> | 86 | </v-card> |
| 87 | </router-link> | 87 | </router-link> |
| 88 | </v-flex> | 88 | </v-flex> |
| 89 | <!-- ***** Total Parents ***** --> | 89 | <!-- ***** Total Parents ***** --> |
| 90 | <v-flex xs12 sm12 md3> | 90 | <v-flex xs12 sm12 md3> |
| 91 | <router-link :to="{ name:'Parents' }"> | 91 | <router-link :to="{ name:'Parents' }"> |
| 92 | <v-card flat class="card yellow darken-3"> | 92 | <v-card flat class="card yellow darken-3"> |
| 93 | <v-card-title primary-title class="titleCard white--text py-3">Parents</v-card-title> | 93 | <v-card-title primary-title class="titleCard white--text py-3">Parents</v-card-title> |
| 94 | <img | 94 | <img |
| 95 | src="/static/icon/parents.png" | 95 | src="/static/icon/parents.png" |
| 96 | class="ml-3" | 96 | class="ml-3" |
| 97 | width="40px" | 97 | width="40px" |
| 98 | alt="icons" | 98 | alt="icons" |
| 99 | /> | 99 | /> |
| 100 | <v-card-title class="headline py-1 white--text">{{ parents.length }}</v-card-title> | 100 | <v-card-title class="headline py-1 white--text">{{ parents.length }}</v-card-title> |
| 101 | </v-card> | 101 | </v-card> |
| 102 | </router-link> | 102 | </router-link> |
| 103 | </v-flex> | 103 | </v-flex> |
| 104 | <!-- ***** Total Class***** --> | 104 | <!-- ***** Total Class***** --> |
| 105 | <v-flex xs12 sm12 md3> | 105 | <v-flex xs12 sm12 md3> |
| 106 | <router-link :to="{ name:'Class' }"> | 106 | <router-link :to="{ name:'Class' }"> |
| 107 | <v-card flat class="card darkBlue-bgcolor"> | 107 | <v-card flat class="card darkBlue-bgcolor"> |
| 108 | <v-card-title primary-title class="titleCard white--text py-3">Class</v-card-title> | 108 | <v-card-title primary-title class="titleCard white--text py-3">Class</v-card-title> |
| 109 | <img | 109 | <img |
| 110 | src="/static/icon/class.png" | 110 | src="/static/icon/class.png" |
| 111 | width="40" | 111 | width="40" |
| 112 | alt="icons" | 112 | alt="icons" |
| 113 | class="ml-2" | 113 | class="ml-2" |
| 114 | /> | 114 | /> |
| 115 | <v-card-title class="headline py-1 white--text">{{ classes.length }}</v-card-title> | 115 | <v-card-title class="headline py-1 white--text">{{ classes.length }}</v-card-title> |
| 116 | </v-card> | 116 | </v-card> |
| 117 | </router-link> | 117 | </router-link> |
| 118 | </v-flex> | 118 | </v-flex> |
| 119 | </v-layout> | 119 | </v-layout> |
| 120 | </v-flex> | 120 | </v-flex> |
| 121 | <v-layout> | 121 | <v-layout> |
| 122 | <v-flex xs12> | 122 | <v-flex xs12> |
| 123 | <v-card class="card mt-2 account-Card"> | 123 | <v-card class="card mt-2 account-Card"> |
| 124 | <h4> | 124 | <h4> |
| 125 | <b>Account</b> | 125 | <b>Account</b> |
| 126 | </h4> | 126 | </h4> |
| 127 | <v-layout wrap> | 127 | <v-layout wrap> |
| 128 | <v-flex xs12 sm12 md3> | 128 | <v-flex xs12 sm12 md3> |
| 129 | <v-list two-line> | 129 | <v-list two-line> |
| 130 | <template> | 130 | <template> |
| 131 | <v-list-tile> | 131 | <v-list-tile> |
| 132 | <v-list-tile-avatar> | 132 | <v-list-tile-avatar> |
| 133 | <v-icon class="account-circle darkBlue-color">panorama_fish_eye</v-icon> | 133 | <v-icon class="account-circle darkBlue-color">panorama_fish_eye</v-icon> |
| 134 | </v-list-tile-avatar> | 134 | </v-list-tile-avatar> |
| 135 | <v-list-tile-content> | 135 | <v-list-tile-content> |
| 136 | <v-list-tile-title class="mt-2"> | 136 | <v-list-tile-title class="mt-2"> |
| 137 | <p class="subheading font-color">Fees</p> | 137 | <p class="subheading font-color">Fees</p> |
| 138 | </v-list-tile-title> | 138 | </v-list-tile-title> |
| 139 | <v-list-tile-title>Rs 1000</v-list-tile-title> | 139 | <v-list-tile-title>Rs 1000</v-list-tile-title> |
| 140 | </v-list-tile-content> | 140 | </v-list-tile-content> |
| 141 | </v-list-tile> | 141 | </v-list-tile> |
| 142 | <v-list-tile> | 142 | <v-list-tile> |
| 143 | <v-list-tile-avatar> | 143 | <v-list-tile-avatar> |
| 144 | <v-icon class="account-circle yellowDark-color">panorama_fish_eye</v-icon> | 144 | <v-icon class="account-circle yellowDark-color">panorama_fish_eye</v-icon> |
| 145 | </v-list-tile-avatar> | 145 | </v-list-tile-avatar> |
| 146 | <v-list-tile-content> | 146 | <v-list-tile-content> |
| 147 | <v-list-tile-title class="mt-2"> | 147 | <v-list-tile-title class="mt-2"> |
| 148 | <p class="subheading font-color">Collection</p> | 148 | <p class="subheading font-color">Collection</p> |
| 149 | </v-list-tile-title> | 149 | </v-list-tile-title> |
| 150 | <v-list-tile-title>Rs 2000</v-list-tile-title> | 150 | <v-list-tile-title>Rs 2000</v-list-tile-title> |
| 151 | </v-list-tile-content> | 151 | </v-list-tile-content> |
| 152 | </v-list-tile> | 152 | </v-list-tile> |
| 153 | <v-list-tile> | 153 | <v-list-tile> |
| 154 | <v-list-tile-avatar> | 154 | <v-list-tile-avatar> |
| 155 | <v-icon class="account-circle pink-color">panorama_fish_eye</v-icon> | 155 | <v-icon class="account-circle pink-color">panorama_fish_eye</v-icon> |
| 156 | </v-list-tile-avatar> | 156 | </v-list-tile-avatar> |
| 157 | <v-list-tile-content> | 157 | <v-list-tile-content> |
| 158 | <v-list-tile-title class="mt-2"> | 158 | <v-list-tile-title class="mt-2"> |
| 159 | <p class="subheading font-color">Expences</p> | 159 | <p class="subheading font-color">Expences</p> |
| 160 | </v-list-tile-title> | 160 | </v-list-tile-title> |
| 161 | <v-list-tile-title>Rs 3000</v-list-tile-title> | 161 | <v-list-tile-title>Rs 3000</v-list-tile-title> |
| 162 | </v-list-tile-content> | 162 | </v-list-tile-content> |
| 163 | </v-list-tile> | 163 | </v-list-tile> |
| 164 | </template> | 164 | </template> |
| 165 | </v-list> | 165 | </v-list> |
| 166 | </v-flex> | 166 | </v-flex> |
| 167 | <v-flex xs12 sm12 md9> | 167 | <v-flex xs12 sm12 md9> |
| 168 | <div id="chart"> | 168 | <div id="chart"> |
| 169 | <apexchart | 169 | <apexchart |
| 170 | type="bar" | 170 | type="bar" |
| 171 | height="250" | 171 | height="250" |
| 172 | :options="chartOptions" | 172 | :options="chartOptions" |
| 173 | :series="series" | 173 | :series="series" |
| 174 | ></apexchart> | 174 | ></apexchart> |
| 175 | </div> | 175 | </div> |
| 176 | </v-flex> | 176 | </v-flex> |
| 177 | </v-layout> | 177 | </v-layout> |
| 178 | </v-card> | 178 | </v-card> |
| 179 | </v-flex> | 179 | </v-flex> |
| 180 | </v-layout> | 180 | </v-layout> |
| 181 | <v-card class="mt-2 card"> | 181 | <v-card class="mt-2 card"> |
| 182 | <!-- <full-calendar | 182 | <!-- <full-calendar |
| 183 | ref="calendar" | 183 | ref="calendar" |
| 184 | defaultView="month" | 184 | defaultView="month" |
| 185 | droppable="false" | 185 | droppable="false" |
| 186 | :events="events" | 186 | :events="events" |
| 187 | :config="config" | 187 | :config="config" |
| 188 | ></full-calendar>--> | 188 | ></full-calendar>--> |
| 189 | <h4 class="pa-3"> | 189 | <h4 class="pa-3"> |
| 190 | <b>Notice</b> | 190 | <b>Notice</b> |
| 191 | </h4> | 191 | </h4> |
| 192 | 192 | ||
| 193 | <v-data-table | 193 | <v-data-table |
| 194 | :items="noticeData" | 194 | :items="noticeData" |
| 195 | class="elevation-0" | 195 | class="elevation-0" |
| 196 | flat | 196 | flat |
| 197 | hide-actions | 197 | hide-actions |
| 198 | hide-headers | 198 | hide-headers |
| 199 | style="border-spacing: 0 !important;" | 199 | style="border-spacing: 0 !important;" |
| 200 | > | 200 | > |
| 201 | <template | 201 | <template |
| 202 | slot="items" | 202 | slot="items" |
| 203 | slot-scope="props" | 203 | slot-scope="props" |
| 204 | v-if="props.index < 5" | 204 | v-if="props.index < 5" |
| 205 | style="border-spacing: 0 !important;" | 205 | style="border-spacing: 0 !important;" |
| 206 | > | 206 | > |
| 207 | <tr class="td-notice"> | 207 | <tr class="td-notice"> |
| 208 | <td class="grey--text" style="width:18px">{{ props.index + 1}}</td> | 208 | <td class="grey--text" style="width:18px">{{ props.index + 1}}</td> |
| 209 | <td> | 209 | <td> |
| 210 | <span class="grey--text caption">{{ date(props.item.created) }}</span> | 210 | <span class="grey--text caption">{{ date(props.item.created) }}</span> |
| 211 | <br /> | 211 | <br /> |
| 212 | <span class="body-2">{{ props.item.title}}</span> | 212 | <span class="body-2">{{ props.item.title}}</span> |
| 213 | </td> | 213 | </td> |
| 214 | <td class="noticeDecritpion grey--text mt-2">{{ props.item.description}}</td> | 214 | <td class="noticeDecritpion grey--text mt-2">{{ props.item.description}}</td> |
| 215 | 215 | ||
| 216 | <td class="text-xs-center"> | 216 | <td class="text-xs-center"> |
| 217 | <span> | 217 | <span> |
| 218 | <v-tooltip top> | 218 | <v-tooltip top> |
| 219 | <img | 219 | <img |
| 220 | slot="activator" | 220 | slot="activator" |
| 221 | style="cursor:pointer; width:25px; height:25px; " | 221 | style="cursor:pointer; width:25px; height:25px; " |
| 222 | @click="profile" | 222 | @click="profile" |
| 223 | src="/static/icon/dashboard icons-47.png" | 223 | src="/static/icon/view.png" |
| 224 | /> | 224 | /> |
| 225 | <span>View</span> | 225 | <span>View</span> |
| 226 | </v-tooltip> | 226 | </v-tooltip> |
| 227 | </span> | 227 | </span> |
| 228 | </td> | 228 | </td> |
| 229 | </tr> | 229 | </tr> |
| 230 | </template> | 230 | </template> |
| 231 | </v-data-table> | 231 | </v-data-table> |
| 232 | </v-card> | 232 | </v-card> |
| 233 | </v-container> | 233 | </v-container> |
| 234 | </v-flex> | 234 | </v-flex> |
| 235 | <v-flex xs12 sm12 md3> | 235 | <v-flex xs12 sm12 md3> |
| 236 | <v-card height="100%" class="elevation-0 mt-3 profileDasboard"> | 236 | <v-card height="100%" class="elevation-0 mt-3 profileDasboard"> |
| 237 | <v-card-text> | 237 | <v-card-text> |
| 238 | <h4 class="text-xs-center py-3"> | 238 | <h4 class="text-xs-center py-3"> |
| 239 | <b>Profile</b> | 239 | <b>Profile</b> |
| 240 | </h4> | 240 | </h4> |
| 241 | <v-flex xs12 class="py-3"> | 241 | <v-flex xs12 class="py-3"> |
| 242 | <v-layout wrap> | 242 | <v-layout wrap> |
| 243 | <v-flex xs12 sm12 md4> | 243 | <v-flex xs12 sm12 md4> |
| 244 | <img src="/static/icon/user.png" v-if="!userData.schoolLogoUrl" width="80" /> | 244 | <img src="/static/icon/user.png" v-if="!userData.schoolLogoUrl" width="80" /> |
| 245 | <img | 245 | <img |
| 246 | :src="userData.schoolLogoUrl" | 246 | :src="userData.schoolLogoUrl" |
| 247 | v-else-if="userData.schoolLogoUrl" | 247 | v-else-if="userData.schoolLogoUrl" |
| 248 | width="80" | 248 | width="80" |
| 249 | /> | 249 | /> |
| 250 | </v-flex> | 250 | </v-flex> |
| 251 | <v-flex xs12 sm12 md6> | 251 | <v-flex xs12 sm12 md6> |
| 252 | <p class="mb-0 body-1"> | 252 | <p class="mb-0 body-1"> |
| 253 | <i>{{ userData.name }}</i> | 253 | <i>{{ userData.name }}</i> |
| 254 | </p> | 254 | </p> |
| 255 | <p class="mb-0 caption grey--text">{{ userData.email }}</p> | 255 | <p class="mb-0 caption grey--text">{{ userData.email }}</p> |
| 256 | <p class="mb-0 caption grey--text">{{ userData.mobile }}</p> | 256 | <p class="mb-0 caption grey--text">{{ userData.mobile }}</p> |
| 257 | <address class="caption grey--text mb-3">{{ userData.address }}</address> | 257 | <address class="caption grey--text mb-3">{{ userData.address }}</address> |
| 258 | </v-flex> | 258 | </v-flex> |
| 259 | </v-layout> | 259 | </v-layout> |
| 260 | </v-flex> | 260 | </v-flex> |
| 261 | <hr /> | 261 | <hr /> |
| 262 | <h4 class="text-xs-center py-3"> | 262 | <h4 class="text-xs-center py-3"> |
| 263 | <b>Calender</b> | 263 | <b>Calender</b> |
| 264 | </h4> | 264 | </h4> |
| 265 | <vue-event-calendar :events="demoEvents"></vue-event-calendar> | 265 | <vue-event-calendar :events="demoEvents"></vue-event-calendar> |
| 266 | </v-card-text> | 266 | </v-card-text> |
| 267 | </v-card> | 267 | </v-card> |
| 268 | </v-flex> | 268 | </v-flex> |
| 269 | </v-layout> | 269 | </v-layout> |
| 270 | </v-flex> | 270 | </v-flex> |
| 271 | </v-layout> | 271 | </v-layout> |
| 272 | <v-dialog v-model="dialog" max-width="500"> | 272 | <v-dialog v-model="dialog" max-width="500"> |
| 273 | <v-card color="grey lighten-4" flat> | 273 | <v-card color="grey lighten-4" flat> |
| 274 | <v-toolbar dark color="fixcolors"> | 274 | <v-toolbar dark color="fixcolors"> |
| 275 | <v-spacer></v-spacer> | 275 | <v-spacer></v-spacer> |
| 276 | <v-btn icon @click="dialog= false"> | 276 | <v-btn icon @click="dialog= false"> |
| 277 | <v-icon>close</v-icon> | 277 | <v-icon>close</v-icon> |
| 278 | </v-btn> | 278 | </v-btn> |
| 279 | </v-toolbar> | 279 | </v-toolbar> |
| 280 | <v-flex class="py-4"> | 280 | <v-flex class="py-4"> |
| 281 | <v-list-tile> | 281 | <v-list-tile> |
| 282 | <v-list-tile-action> | 282 | <v-list-tile-action> |
| 283 | <v-icon>edit</v-icon> | 283 | <v-icon>edit</v-icon> |
| 284 | </v-list-tile-action> | 284 | </v-list-tile-action> |
| 285 | <v-list-tile-content> | 285 | <v-list-tile-content> |
| 286 | <v-list-tile-title>{{ selected.title }}</v-list-tile-title> | 286 | <v-list-tile-title>{{ selected.title }}</v-list-tile-title> |
| 287 | </v-list-tile-content> | 287 | </v-list-tile-content> |
| 288 | </v-list-tile> | 288 | </v-list-tile> |
| 289 | <v-list-tile> | 289 | <v-list-tile> |
| 290 | <v-list-tile-action> | 290 | <v-list-tile-action> |
| 291 | <v-icon>access_time</v-icon> | 291 | <v-icon>access_time</v-icon> |
| 292 | </v-list-tile-action> | 292 | </v-list-tile-action> |
| 293 | <v-list-tile-content> | 293 | <v-list-tile-content> |
| 294 | <v-list-tile-title>{{ date(selected.start)}}</v-list-tile-title> | 294 | <v-list-tile-title>{{ date(selected.start)}}</v-list-tile-title> |
| 295 | </v-list-tile-content> | 295 | </v-list-tile-content> |
| 296 | </v-list-tile> | 296 | </v-list-tile> |
| 297 | </v-flex> | 297 | </v-flex> |
| 298 | </v-card> | 298 | </v-card> |
| 299 | </v-dialog> | 299 | </v-dialog> |
| 300 | <div class="loader" v-if="showLoader"> | 300 | <div class="loader" v-if="showLoader"> |
| 301 | <v-progress-circular indeterminate color="white"></v-progress-circular> | 301 | <v-progress-circular indeterminate color="white"></v-progress-circular> |
| 302 | </div> | 302 | </div> |
| 303 | </v-app> | 303 | </v-app> |
| 304 | </template> | 304 | </template> |
| 305 | 305 | ||
| 306 | <script> | 306 | <script> |
| 307 | import http from "@/Services/http.js"; | 307 | import http from "@/Services/http.js"; |
| 308 | import moment from "moment"; | 308 | import moment from "moment"; |
| 309 | // import { FunctionalCalendar } from "vue-functional-calendar"; | 309 | // import { FunctionalCalendar } from "vue-functional-calendar"; |
| 310 | 310 | ||
| 311 | export default { | 311 | export default { |
| 312 | components: { | 312 | components: { |
| 313 | // FunctionalCalendar | 313 | // FunctionalCalendar |
| 314 | }, | 314 | }, |
| 315 | data() { | 315 | data() { |
| 316 | return { | 316 | return { |
| 317 | // data: { | 317 | // data: { |
| 318 | // clieckedToday: false | 318 | // clieckedToday: false |
| 319 | // }, | 319 | // }, |
| 320 | // markedDates: ["16/4/2019", "18/4/2019", "20/4/2019", "21/4/2019"], | 320 | // markedDates: ["16/4/2019", "18/4/2019", "20/4/2019", "21/4/2019"], |
| 321 | // calendarData: {}, | 321 | // calendarData: {}, |
| 322 | // calendar: {}, | 322 | // calendar: {}, |
| 323 | demoEvents: [ | 323 | demoEvents: [ |
| 324 | { | 324 | { |
| 325 | date: "2020/01/10", // Required | 325 | date: "2020/01/10", // Required |
| 326 | title: "Foo" // Required | 326 | title: "Foo" // Required |
| 327 | }, | 327 | }, |
| 328 | { | 328 | { |
| 329 | date: "2020/01/12", | 329 | date: "2020/01/12", |
| 330 | title: "Bar", | 330 | title: "Bar", |
| 331 | desc: "description", | 331 | desc: "description", |
| 332 | customClass: "disabled highlight" // Custom classes to an calendar cell | 332 | customClass: "disabled highlight" // Custom classes to an calendar cell |
| 333 | } | 333 | } |
| 334 | ], | 334 | ], |
| 335 | 335 | ||
| 336 | showLoader: false, | 336 | showLoader: false, |
| 337 | calendarData: {}, | 337 | calendarData: {}, |
| 338 | dialog: false, | 338 | dialog: false, |
| 339 | dialogNotice: false, | 339 | dialogNotice: false, |
| 340 | HolidaysList: [], | 340 | HolidaysList: [], |
| 341 | EventsList: [], | 341 | EventsList: [], |
| 342 | events: [], | 342 | events: [], |
| 343 | config: { | 343 | config: { |
| 344 | eventClick: event => { | 344 | eventClick: event => { |
| 345 | this.selected = event; | 345 | this.selected = event; |
| 346 | this.dialog = true; | 346 | this.dialog = true; |
| 347 | } | 347 | } |
| 348 | }, | 348 | }, |
| 349 | selected: {}, | 349 | selected: {}, |
| 350 | // notice: {}, | 350 | // notice: {}, |
| 351 | userData: {}, | 351 | userData: {}, |
| 352 | dated: new Date(2018, 0, 9), | 352 | dated: new Date(2018, 0, 9), |
| 353 | userList: [], | 353 | userList: [], |
| 354 | sectionList: [], | 354 | sectionList: [], |
| 355 | students: "", | 355 | students: "", |
| 356 | parents: "", | 356 | parents: "", |
| 357 | teachers: "", | 357 | teachers: "", |
| 358 | classes: "", | 358 | classes: "", |
| 359 | noticeData: [], | 359 | noticeData: [], |
| 360 | attrs: [ | 360 | attrs: [ |
| 361 | { | 361 | { |
| 362 | key: "today", | 362 | key: "today", |
| 363 | highlight: true, | 363 | highlight: true, |
| 364 | dates: new Date() | 364 | dates: new Date() |
| 365 | } | 365 | } |
| 366 | ], | 366 | ], |
| 367 | drawer: true, | 367 | drawer: true, |
| 368 | items: [ | 368 | items: [ |
| 369 | { title: "Home", icon: "dashboard" }, | 369 | { title: "Home", icon: "dashboard" }, |
| 370 | { title: "About", icon: "question_answer" } | 370 | { title: "About", icon: "question_answer" } |
| 371 | ], | 371 | ], |
| 372 | right: null, | 372 | right: null, |
| 373 | 373 | ||
| 374 | series: [ | 374 | series: [ |
| 375 | { | 375 | { |
| 376 | name: "Total", | 376 | name: "Total", |
| 377 | data: [66, 44, 33] | 377 | data: [66, 44, 33] |
| 378 | } | 378 | } |
| 379 | ], | 379 | ], |
| 380 | chartOptions: { | 380 | chartOptions: { |
| 381 | chart: { | 381 | chart: { |
| 382 | type: "bar", | 382 | type: "bar", |
| 383 | height: 150, | 383 | height: 150, |
| 384 | animations: { | 384 | animations: { |
| 385 | enabled: true, | 385 | enabled: true, |
| 386 | easing: "easeinout", | 386 | easing: "easeinout", |
| 387 | speed: 1200, | 387 | speed: 1200, |
| 388 | animateGradually: { | 388 | animateGradually: { |
| 389 | enabled: true, | 389 | enabled: true, |
| 390 | delay: 450 | 390 | delay: 450 |
| 391 | }, | 391 | }, |
| 392 | dynamicAnimation: { | 392 | dynamicAnimation: { |
| 393 | enabled: true, | 393 | enabled: true, |
| 394 | speed: 450 | 394 | speed: 450 |
| 395 | } | 395 | } |
| 396 | } | 396 | } |
| 397 | }, | 397 | }, |
| 398 | plotOptions: { | 398 | plotOptions: { |
| 399 | bar: { | 399 | bar: { |
| 400 | horizontal: false, | 400 | horizontal: false, |
| 401 | columnWidth: "25%", | 401 | columnWidth: "25%", |
| 402 | // endingShape: "rounded", | 402 | // endingShape: "rounded", |
| 403 | distributed: true | 403 | distributed: true |
| 404 | } | 404 | } |
| 405 | }, | 405 | }, |
| 406 | legend: { | 406 | legend: { |
| 407 | show: false | 407 | show: false |
| 408 | }, | 408 | }, |
| 409 | colors: ["#7852cc", "#f9a825", "#ff8a89"], | 409 | colors: ["#7852cc", "#f9a825", "#ff8a89"], |
| 410 | dataLabels: { | 410 | dataLabels: { |
| 411 | enabled: false | 411 | enabled: false |
| 412 | }, | 412 | }, |
| 413 | stroke: { | 413 | stroke: { |
| 414 | show: true, | 414 | show: true, |
| 415 | width: 2, | 415 | width: 2, |
| 416 | colors: ["transparent"] | 416 | colors: ["transparent"] |
| 417 | }, | 417 | }, |
| 418 | xaxis: { | 418 | xaxis: { |
| 419 | categories: ["Fee", "Collections", "Expences"] | 419 | categories: ["Fee", "Collections", "Expences"] |
| 420 | }, | 420 | }, |
| 421 | yaxis: { | 421 | yaxis: { |
| 422 | title: { | 422 | title: { |
| 423 | text: "" | 423 | text: "" |
| 424 | } | 424 | } |
| 425 | }, | 425 | }, |
| 426 | fill: { | 426 | fill: { |
| 427 | opacity: 1 | 427 | opacity: 1 |
| 428 | }, | 428 | }, |
| 429 | tooltip: { | 429 | tooltip: { |
| 430 | y: { | 430 | y: { |
| 431 | formatter: function(val, opts) { | 431 | formatter: function(val, opts) { |
| 432 | // console.log("opts",opts.w.config.xaxis.categories) | 432 | // console.log("opts",opts.w.config.xaxis.categories) |
| 433 | return "" + val + " "; | 433 | return "" + val + " "; |
| 434 | } | 434 | } |
| 435 | } | 435 | } |
| 436 | } | 436 | } |
| 437 | } | 437 | } |
| 438 | }; | 438 | }; |
| 439 | }, | 439 | }, |
| 440 | mounted() { | 440 | mounted() { |
| 441 | this.token = this.$store.state.token; | 441 | this.token = this.$store.state.token; |
| 442 | // this.getData(); | 442 | // this.getData(); |
| 443 | this.getStudents(); | 443 | this.getStudents(); |
| 444 | this.getTeachers(); | 444 | this.getTeachers(); |
| 445 | this.getParents(); | 445 | this.getParents(); |
| 446 | this.getClasses(); | 446 | this.getClasses(); |
| 447 | this.getNoticeData(); | 447 | this.getNoticeData(); |
| 448 | this.getUserData(); | 448 | this.getUserData(); |
| 449 | // this.getUsersList(); | 449 | // this.getUsersList(); |
| 450 | }, | 450 | }, |
| 451 | methods: { | 451 | methods: { |
| 452 | closeNotice() { | 452 | closeNotice() { |
| 453 | this.dialogNotice = false; | 453 | this.dialogNotice = false; |
| 454 | }, | 454 | }, |
| 455 | profile() { | 455 | profile() { |
| 456 | // this.editedIndex = this.desserts.indexOf(item); | 456 | // this.editedIndex = this.desserts.indexOf(item); |
| 457 | // this.notice = Object.assign({}, item); | 457 | // this.notice = Object.assign({}, item); |
| 458 | // this.dialogNotice = true; | 458 | // this.dialogNotice = true; |
| 459 | this.$router.push({ name: "NoticeBoard" }); | 459 | this.$router.push({ name: "NoticeBoard" }); |
| 460 | }, | 460 | }, |
| 461 | date: function(date) { | 461 | date: function(date) { |
| 462 | return moment(date).format("MMMM DD, YYYY HH:mm"); | 462 | return moment(date).format("MMMM DD, YYYY HH:mm"); |
| 463 | }, | 463 | }, |
| 464 | refreshEvents() { | 464 | refreshEvents() { |
| 465 | this.$refs.calendar.$emit("refetch-events"); | 465 | this.$refs.calendar.$emit("refetch-events"); |
| 466 | }, | 466 | }, |
| 467 | removeEvent() { | 467 | removeEvent() { |
| 468 | this.$refs.calendar.$emit("remove-event", this.selected); | 468 | this.$refs.calendar.$emit("remove-event", this.selected); |
| 469 | this.selected = {}; | 469 | this.selected = {}; |
| 470 | }, | 470 | }, |
| 471 | eventSelected(event) { | 471 | eventSelected(event) { |
| 472 | this.selected = event; | 472 | this.selected = event; |
| 473 | console.log("this.selected", this.selected); | 473 | console.log("this.selected", this.selected); |
| 474 | }, | 474 | }, |
| 475 | // eventDropStart: function(event) { | 475 | // eventDropStart: function(event) { |
| 476 | // event.editable = false; | 476 | // event.editable = false; |
| 477 | // }, | 477 | // }, |
| 478 | eventCreated(...test) { | 478 | eventCreated(...test) { |
| 479 | console.log(test); | 479 | console.log(test); |
| 480 | }, | 480 | }, |
| 481 | getStudents() { | 481 | getStudents() { |
| 482 | http() | 482 | http() |
| 483 | .get("/getStudentsList") | 483 | .get("/getStudentsList") |
| 484 | .then(response => { | 484 | .then(response => { |
| 485 | this.students = response.data.data; | 485 | this.students = response.data.data; |
| 486 | this.showLoader = false; | 486 | this.showLoader = false; |
| 487 | }) | 487 | }) |
| 488 | .catch(error => { | 488 | .catch(error => { |
| 489 | // console.log("err====>", err); | 489 | // console.log("err====>", err); |
| 490 | this.showLoader = false; | 490 | this.showLoader = false; |
| 491 | if (error.response.status === 401) { | 491 | if (error.response.status === 401) { |
| 492 | this.$router.replace({ path: "/" }); | 492 | this.$router.replace({ path: "/" }); |
| 493 | this.$store.dispatch("setToken", null); | 493 | this.$store.dispatch("setToken", null); |
| 494 | this.$store.dispatch("Id", null); | 494 | this.$store.dispatch("Id", null); |
| 495 | } | 495 | } |
| 496 | }); | 496 | }); |
| 497 | }, | 497 | }, |
| 498 | getParents() { | 498 | getParents() { |
| 499 | http() | 499 | http() |
| 500 | .get("/getParentsList") | 500 | .get("/getParentsList") |
| 501 | .then(response => { | 501 | .then(response => { |
| 502 | this.parents = response.data.data; | 502 | this.parents = response.data.data; |
| 503 | this.showLoader = false; | 503 | this.showLoader = false; |
| 504 | }) | 504 | }) |
| 505 | .catch(error => { | 505 | .catch(error => { |
| 506 | // console.log("err====>", err); | 506 | // console.log("err====>", err); |
| 507 | this.showLoader = false; | 507 | this.showLoader = false; |
| 508 | if (error.response.status === 401) { | 508 | if (error.response.status === 401) { |
| 509 | this.$router.replace({ path: "/" }); | 509 | this.$router.replace({ path: "/" }); |
| 510 | this.$store.dispatch("setToken", null); | 510 | this.$store.dispatch("setToken", null); |
| 511 | this.$store.dispatch("Id", null); | 511 | this.$store.dispatch("Id", null); |
| 512 | } | 512 | } |
| 513 | }); | 513 | }); |
| 514 | }, | 514 | }, |
| 515 | getTeachers() { | 515 | getTeachers() { |
| 516 | http() | 516 | http() |
| 517 | .get("/getTeachersList") | 517 | .get("/getTeachersList") |
| 518 | .then(response => { | 518 | .then(response => { |
| 519 | this.teachers = response.data.data; | 519 | this.teachers = response.data.data; |
| 520 | this.showLoader = false; | 520 | this.showLoader = false; |
| 521 | }) | 521 | }) |
| 522 | .catch(error => { | 522 | .catch(error => { |
| 523 | // console.log("err====>", err); | 523 | // console.log("err====>", err); |
| 524 | this.showLoader = false; | 524 | this.showLoader = false; |
| 525 | if (error.response.status === 401) { | 525 | if (error.response.status === 401) { |
| 526 | this.$router.replace({ path: "/" }); | 526 | this.$router.replace({ path: "/" }); |
| 527 | this.$store.dispatch("setToken", null); | 527 | this.$store.dispatch("setToken", null); |
| 528 | this.$store.dispatch("Id", null); | 528 | this.$store.dispatch("Id", null); |
| 529 | } | 529 | } |
| 530 | }); | 530 | }); |
| 531 | }, | 531 | }, |
| 532 | getClasses() { | 532 | getClasses() { |
| 533 | http() | 533 | http() |
| 534 | .get("/getClassesList") | 534 | .get("/getClassesList") |
| 535 | .then(response => { | 535 | .then(response => { |
| 536 | this.classes = response.data.data; | 536 | this.classes = response.data.data; |
| 537 | this.showLoader = false; | 537 | this.showLoader = false; |
| 538 | }) | 538 | }) |
| 539 | .catch(error => { | 539 | .catch(error => { |
| 540 | this.showLoader = false; | 540 | this.showLoader = false; |
| 541 | if (error.response.status === 401) { | 541 | if (error.response.status === 401) { |
| 542 | this.$router.replace({ path: "/" }); | 542 | this.$router.replace({ path: "/" }); |
| 543 | this.$store.dispatch("setToken", null); | 543 | this.$store.dispatch("setToken", null); |
| 544 | this.$store.dispatch("Id", null); | 544 | this.$store.dispatch("Id", null); |
| 545 | this.$store.dispatch("Role", null); | 545 | this.$store.dispatch("Role", null); |
| 546 | } | 546 | } |
| 547 | }); | 547 | }); |
| 548 | }, | 548 | }, |
| 549 | getNoticeData() { | 549 | getNoticeData() { |
| 550 | this.showLoader = true; | 550 | this.showLoader = true; |
| 551 | http() | 551 | http() |
| 552 | .get("/getEventsList") | 552 | .get("/getEventsList") |
| 553 | .then(response => { | 553 | .then(response => { |
| 554 | this.noticeData = response.data.data; | 554 | this.noticeData = response.data.data; |
| 555 | this.showLoader = false; | 555 | this.showLoader = false; |
| 556 | }) | 556 | }) |
| 557 | .catch(error => { | 557 | .catch(error => { |
| 558 | this.showLoader = false; | 558 | this.showLoader = false; |
| 559 | if (error.response.status === 401) { | 559 | if (error.response.status === 401) { |
| 560 | this.$router.replace({ path: "/" }); | 560 | this.$router.replace({ path: "/" }); |
| 561 | this.$store.dispatch("setToken", null); | 561 | this.$store.dispatch("setToken", null); |
| 562 | this.$store.dispatch("Id", null); | 562 | this.$store.dispatch("Id", null); |
| 563 | } | 563 | } |
| 564 | }); | 564 | }); |
| 565 | }, | 565 | }, |
| 566 | getUserData() { | 566 | getUserData() { |
| 567 | // this.showLoader = true; | 567 | // this.showLoader = true; |
| 568 | http() | 568 | http() |
| 569 | .get("/getParticularUserDetail") | 569 | .get("/getParticularUserDetail") |
| 570 | .then(response => { | 570 | .then(response => { |
| 571 | this.userData = response.data.data; | 571 | this.userData = response.data.data; |
| 572 | this.showLoader = false; | 572 | this.showLoader = false; |
| 573 | }) | 573 | }) |
| 574 | .catch(error => { | 574 | .catch(error => { |
| 575 | this.showLoader = false; | 575 | this.showLoader = false; |
| 576 | if (error.response.status === 401) { | 576 | if (error.response.status === 401) { |
| 577 | this.$router.replace({ path: "/" }); | 577 | this.$router.replace({ path: "/" }); |
| 578 | this.$store.dispatch("setToken", null); | 578 | this.$store.dispatch("setToken", null); |
| 579 | this.$store.dispatch("Id", null); | 579 | this.$store.dispatch("Id", null); |
| 580 | } | 580 | } |
| 581 | }); | 581 | }); |
| 582 | } | 582 | } |
| 583 | } | 583 | } |
| 584 | }; | 584 | }; |
| 585 | </script> | 585 | </script> |
| 586 | 586 | ||
| 587 | <style scoped> | 587 | <style scoped> |
| 588 | @import "fullcalendar/dist/fullcalendar.css"; | 588 | @import "fullcalendar/dist/fullcalendar.css"; |
| 589 | </style> | 589 | </style> |
src/pages/Event/event.vue
| 1 | <template> | 1 | <template> |
| 2 | <v-container fluid class="body-color"> | 2 | <v-container fluid class="body-color"> |
| 3 | <!-- ****** EDITS EVENT ****** --> | 3 | <!-- ****** EDITS EVENT ****** --> |
| 4 | <v-dialog v-model="editEventdialog" max-width="500px"> | 4 | <v-dialog v-model="editEventdialog" max-width="500px"> |
| 5 | <v-card flat class="card-style pa-2" dark> | 5 | <v-card flat class="card-style pa-2" dark> |
| 6 | <v-layout> | 6 | <v-layout> |
| 7 | <v-flex xs12> | 7 | <v-flex xs12> |
| 8 | <label class="title text-xs-center">Edit Class</label> | 8 | <label class="title text-xs-center">Edit Class</label> |
| 9 | <v-icon size="24" class="right" @click="editEventdialog = false">cancel</v-icon> | 9 | <v-icon size="24" class="right" @click="editEventdialog = 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-flex xs12 sm12> | 13 | <v-flex xs12 sm12> |
| 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 xs7 class="ml-3"> | 18 | <v-flex xs7 class="ml-3"> |
| 19 | <v-text-field | 19 | <v-text-field |
| 20 | v-model="editedItem.title" | 20 | v-model="editedItem.title" |
| 21 | placeholder="fill your Title" | 21 | placeholder="fill your Title" |
| 22 | name="name" | 22 | name="name" |
| 23 | type="text" | 23 | type="text" |
| 24 | ></v-text-field> | 24 | ></v-text-field> |
| 25 | </v-flex> | 25 | </v-flex> |
| 26 | </v-layout> | 26 | </v-layout> |
| 27 | </v-flex> | 27 | </v-flex> |
| 28 | <v-flex xs12 sm12> | 28 | <v-flex xs12 sm12> |
| 29 | <v-layout> | 29 | <v-layout> |
| 30 | <v-flex xs4 class="pt-4 subheading"> | 30 | <v-flex xs4 class="pt-4 subheading"> |
| 31 | <label class="right">Date:</label> | 31 | <label class="right">Date:</label> |
| 32 | </v-flex> | 32 | </v-flex> |
| 33 | <v-flex xs7 class="ml-3"> | 33 | <v-flex xs7 class="ml-3"> |
| 34 | <v-menu | 34 | <v-menu |
| 35 | ref="menu" | 35 | ref="menu" |
| 36 | :close-on-content-click="false" | 36 | :close-on-content-click="false" |
| 37 | v-model="menu" | 37 | v-model="menu" |
| 38 | :nudge-right="40" | 38 | :nudge-right="40" |
| 39 | lazy | 39 | lazy |
| 40 | transition="scale-transition" | 40 | transition="scale-transition" |
| 41 | offset-y | 41 | offset-y |
| 42 | full-width | 42 | full-width |
| 43 | min-width="290px" | 43 | min-width="290px" |
| 44 | > | 44 | > |
| 45 | <v-text-field | 45 | <v-text-field |
| 46 | slot="activator" | 46 | slot="activator" |
| 47 | :rules="dateRules" | 47 | :rules="dateRules" |
| 48 | v-model="editedItem.dateOfEvent" | 48 | v-model="editedItem.dateOfEvent" |
| 49 | placeholder="Select date" | 49 | placeholder="Select date" |
| 50 | ></v-text-field> | 50 | ></v-text-field> |
| 51 | <v-date-picker | 51 | <v-date-picker |
| 52 | color="info" | 52 | color="info" |
| 53 | ref="picker" | 53 | ref="picker" |
| 54 | v-model="editedItem.dateOfEvent" | 54 | v-model="editedItem.dateOfEvent" |
| 55 | @input="$refs.menu.save(editedItem.dateOfEvent)" | 55 | @input="$refs.menu.save(editedItem.dateOfEvent)" |
| 56 | ></v-date-picker> | 56 | ></v-date-picker> |
| 57 | </v-menu> | 57 | </v-menu> |
| 58 | </v-flex> | 58 | </v-flex> |
| 59 | </v-layout> | 59 | </v-layout> |
| 60 | </v-flex> | 60 | </v-flex> |
| 61 | <v-flex xs12 sm12> | 61 | <v-flex xs12 sm12> |
| 62 | <v-layout> | 62 | <v-layout> |
| 63 | <v-flex xs4 class="pt-4 subheading"> | 63 | <v-flex xs4 class="pt-4 subheading"> |
| 64 | <label class="right">Description:</label> | 64 | <label class="right">Description:</label> |
| 65 | </v-flex> | 65 | </v-flex> |
| 66 | <v-flex xs7 class="ml-3"> | 66 | <v-flex xs7 class="ml-3"> |
| 67 | <v-text-field | 67 | <v-text-field |
| 68 | placeholder="fill your Description" | 68 | placeholder="fill your Description" |
| 69 | v-model="editedItem.description" | 69 | v-model="editedItem.description" |
| 70 | type="text" | 70 | type="text" |
| 71 | ></v-text-field> | 71 | ></v-text-field> |
| 72 | </v-flex> | 72 | </v-flex> |
| 73 | </v-layout> | 73 | </v-layout> |
| 74 | </v-flex> | 74 | </v-flex> |
| 75 | <v-layout> | 75 | <v-layout> |
| 76 | <v-flex xs12> | 76 | <v-flex xs12> |
| 77 | <v-card-actions class="hidden-xs-only hidden-sm-only"> | 77 | <v-card-actions class="hidden-xs-only hidden-sm-only"> |
| 78 | <v-spacer></v-spacer> | 78 | <v-spacer></v-spacer> |
| 79 | <v-btn round dark @click="save" class="add-button">Save</v-btn> | 79 | <v-btn round dark @click="save" class="add-button">Save</v-btn> |
| 80 | </v-card-actions> | 80 | </v-card-actions> |
| 81 | <v-card-actions class="hidden-md-only hidden-lg-only hidden-xl-only"> | 81 | <v-card-actions class="hidden-md-only hidden-lg-only hidden-xl-only"> |
| 82 | <v-spacer></v-spacer> | 82 | <v-spacer></v-spacer> |
| 83 | <v-btn round dark @click="save" class="add-button">Save</v-btn> | 83 | <v-btn round dark @click="save" class="add-button">Save</v-btn> |
| 84 | <v-spacer></v-spacer> | 84 | <v-spacer></v-spacer> |
| 85 | </v-card-actions> | 85 | </v-card-actions> |
| 86 | </v-flex> | 86 | </v-flex> |
| 87 | </v-layout> | 87 | </v-layout> |
| 88 | </v-container> | 88 | </v-container> |
| 89 | </v-card> | 89 | </v-card> |
| 90 | </v-dialog> | 90 | </v-dialog> |
| 91 | <!-- ****** PROFILE VIEW EVENT ****** --> | 91 | <!-- ****** PROFILE VIEW EVENT ****** --> |
| 92 | <v-dialog v-model="viewEventdialog" max-width="500px"> | 92 | <v-dialog v-model="viewEventdialog" max-width="500px"> |
| 93 | <v-card flat class="card-style pa-3" dark> | 93 | <v-card flat class="card-style pa-3" dark> |
| 94 | <v-layout> | 94 | <v-layout> |
| 95 | <v-flex xs12> | 95 | <v-flex xs12> |
| 96 | <label class="title text-xs-center">View Event</label> | 96 | <label class="title text-xs-center">View Event</label> |
| 97 | <v-icon size="24" class="right" @click="viewEventdialog = false">cancel</v-icon> | 97 | <v-icon size="24" class="right" @click="viewEventdialog = false">cancel</v-icon> |
| 98 | </v-flex> | 98 | </v-flex> |
| 99 | </v-layout> | 99 | </v-layout> |
| 100 | <v-card-text> | 100 | <v-card-text> |
| 101 | <v-container grid-list-md> | 101 | <v-container grid-list-md> |
| 102 | <v-layout wrap> | 102 | <v-layout wrap> |
| 103 | <v-flex> | 103 | <v-flex> |
| 104 | <v-layout> | 104 | <v-layout> |
| 105 | <v-flex xs5 sm6> | 105 | <v-flex xs5 sm6> |
| 106 | <h5 class="right my-1"> | 106 | <h5 class="right my-1"> |
| 107 | <b>Title:</b> | 107 | <b>Title:</b> |
| 108 | </h5> | 108 | </h5> |
| 109 | </v-flex> | 109 | </v-flex> |
| 110 | <v-flex sm6 xs8> | 110 | <v-flex sm6 xs8> |
| 111 | <h5 class="my-1">{{ editedItem.title }}</h5> | 111 | <h5 class="my-1">{{ editedItem.title }}</h5> |
| 112 | </v-flex> | 112 | </v-flex> |
| 113 | </v-layout> | 113 | </v-layout> |
| 114 | <v-layout> | 114 | <v-layout> |
| 115 | <v-flex xs5 sm6> | 115 | <v-flex xs5 sm6> |
| 116 | <h5 class="right my-1"> | 116 | <h5 class="right my-1"> |
| 117 | <b>Date:</b> | 117 | <b>Date:</b> |
| 118 | </h5> | 118 | </h5> |
| 119 | </v-flex> | 119 | </v-flex> |
| 120 | <v-flex sm6 xs8> | 120 | <v-flex sm6 xs8> |
| 121 | <h5 class="my-1">{{ dates(editedItem.dateOfEvent) }}</h5> | 121 | <h5 class="my-1">{{ dates(editedItem.dateOfEvent) }}</h5> |
| 122 | </v-flex> | 122 | </v-flex> |
| 123 | </v-layout> | 123 | </v-layout> |
| 124 | <v-layout> | 124 | <v-layout> |
| 125 | <v-flex xs5 sm6> | 125 | <v-flex xs5 sm6> |
| 126 | <h5 class="right my-1"> | 126 | <h5 class="right my-1"> |
| 127 | <b>Description:</b> | 127 | <b>Description:</b> |
| 128 | </h5> | 128 | </h5> |
| 129 | </v-flex> | 129 | </v-flex> |
| 130 | <v-flex sm6 xs8> | 130 | <v-flex sm6 xs8> |
| 131 | <h5 class="my-1">{{ editedItem.description }}</h5> | 131 | <h5 class="my-1">{{ editedItem.description }}</h5> |
| 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-container> | 136 | </v-container> |
| 137 | </v-card-text> | 137 | </v-card-text> |
| 138 | </v-card> | 138 | </v-card> |
| 139 | </v-dialog> | 139 | </v-dialog> |
| 140 | 140 | ||
| 141 | <!-- ****** EVENT TABLE ****** --> | 141 | <!-- ****** EVENT TABLE ****** --> |
| 142 | 142 | ||
| 143 | <v-toolbar color="transparent" flat> | 143 | <v-toolbar color="transparent" flat> |
| 144 | <v-btn | 144 | <v-btn |
| 145 | fab | 145 | fab |
| 146 | dark | 146 | dark |
| 147 | class="open-dialog-button hidden-xl-only hidden-md-only hidden-lg-only" | 147 | class="open-dialog-button hidden-xl-only hidden-md-only hidden-lg-only" |
| 148 | small | 148 | small |
| 149 | @click="addEventDialog = true" | 149 | @click="addEventDialog = true" |
| 150 | > | 150 | > |
| 151 | <v-icon dark>add</v-icon> | 151 | <v-icon dark>add</v-icon> |
| 152 | </v-btn> | 152 | </v-btn> |
| 153 | <v-btn | 153 | <v-btn |
| 154 | round | 154 | round |
| 155 | class="open-dialog-button hidden-sm-only hidden-xs-only" | 155 | class="open-dialog-button hidden-sm-only hidden-xs-only" |
| 156 | dark | 156 | dark |
| 157 | @click="addEventDialog = true" | 157 | @click="addEventDialog = true" |
| 158 | > | 158 | > |
| 159 | <v-icon class="white--text pr-1" size="20">add</v-icon>Add Event | 159 | <v-icon class="white--text pr-1" size="20">add</v-icon>Add Event |
| 160 | </v-btn> | 160 | </v-btn> |
| 161 | <v-spacer></v-spacer> | 161 | <v-spacer></v-spacer> |
| 162 | <v-card-title class="body-1" v-show="show"> | 162 | <v-card-title class="body-1" v-show="show"> |
| 163 | <v-btn icon large flat @click="displaySearch"> | 163 | <v-btn icon large flat @click="displaySearch"> |
| 164 | <v-avatar size="27"> | 164 | <v-avatar size="27"> |
| 165 | <img src="/static/icon/dashboard icons-49.png" alt="icon" /> | 165 | <img src="/static/icon/search.png" alt="icon" /> |
| 166 | </v-avatar> | 166 | </v-avatar> |
| 167 | </v-btn> | 167 | </v-btn> |
| 168 | </v-card-title> | 168 | </v-card-title> |
| 169 | <v-flex xs8 sm8 md3 lg2 v-show="showSearch"> | 169 | <v-flex xs8 sm8 md3 lg2 v-show="showSearch"> |
| 170 | <v-layout> | 170 | <v-layout> |
| 171 | <v-text-field v-model="search" label="Search" prepend-inner-icon="search" color="primary"></v-text-field> | 171 | <v-text-field v-model="search" label="Search" prepend-inner-icon="search" color="primary"></v-text-field> |
| 172 | <v-icon @click="closeSearch" color="error">close</v-icon> | 172 | <v-icon @click="closeSearch" color="error">close</v-icon> |
| 173 | </v-layout> | 173 | </v-layout> |
| 174 | </v-flex> | 174 | </v-flex> |
| 175 | </v-toolbar> | 175 | </v-toolbar> |
| 176 | <v-data-table :headers="headers" :items="events" :pagination.sync="pagination" :search="search"> | 176 | <v-data-table :headers="headers" :items="events" :pagination.sync="pagination" :search="search"> |
| 177 | <template slot="items" slot-scope="props"> | 177 | <template slot="items" slot-scope="props"> |
| 178 | <tr class="tr"> | 178 | <tr class="tr"> |
| 179 | <td class="td td-row">{{ props.index + 1}}</td> | 179 | <td class="td td-row">{{ props.index + 1}}</td> |
| 180 | <td class="td td-row text-xs-center">{{ props.item.title}}</td> | 180 | <td class="td td-row text-xs-center">{{ props.item.title}}</td> |
| 181 | <td class="td td-row text-xs-center">{{ dates(props.item.dateOfEvent)}}</td> | 181 | <td class="td td-row text-xs-center">{{ dates(props.item.dateOfEvent)}}</td> |
| 182 | <td class="td td-row text-xs-center">{{ props.item.description}}</td> | 182 | <td class="td td-row text-xs-center">{{ props.item.description}}</td> |
| 183 | <td class="td td-row text-xs-center"> | 183 | <td class="td td-row text-xs-center"> |
| 184 | <span> | 184 | <span> |
| 185 | <v-tooltip top> | 185 | <v-tooltip top> |
| 186 | <img | 186 | <img |
| 187 | slot="activator" | 187 | slot="activator" |
| 188 | style="cursor:pointer; width:25px; height:25px; " | 188 | style="cursor:pointer; width:25px; height:25px; " |
| 189 | class="mr-3" | 189 | class="mr-3" |
| 190 | @click="profile(props.item)" | 190 | @click="profile(props.item)" |
| 191 | src="/static/icon/dashboard icons-47.png" | 191 | src="/static/icon/view.png" |
| 192 | /> | 192 | /> |
| 193 | <span>View</span> | 193 | <span>View</span> |
| 194 | </v-tooltip> | 194 | </v-tooltip> |
| 195 | <v-tooltip top> | 195 | <v-tooltip top> |
| 196 | <img | 196 | <img |
| 197 | slot="activator" | 197 | slot="activator" |
| 198 | style="cursor:pointer; width:20px; height:18px; " | 198 | style="cursor:pointer; width:20px; height:18px; " |
| 199 | class="mr-3" | 199 | class="mr-3" |
| 200 | @click="editItem(props.item)" | 200 | @click="editItem(props.item)" |
| 201 | src="/static/icon/dashboard icons-50.png" | 201 | src="/static/icon/edit.png" |
| 202 | /> | 202 | /> |
| 203 | <span>Edit</span> | 203 | <span>Edit</span> |
| 204 | </v-tooltip> | 204 | </v-tooltip> |
| 205 | <v-tooltip top> | 205 | <v-tooltip top> |
| 206 | <img | 206 | <img |
| 207 | slot="activator" | 207 | slot="activator" |
| 208 | style="cursor:pointer; width:20px; height:20px; " | 208 | style="cursor:pointer; width:20px; height:20px; " |
| 209 | class="mr-3" | 209 | class="mr-3" |
| 210 | @click="deleteItem(props.item)" | 210 | @click="deleteItem(props.item)" |
| 211 | src="/static/icon/dashboard icons-51.png" | 211 | src="/static/icon/delete.png" |
| 212 | /> | 212 | /> |
| 213 | <span>Delete</span> | 213 | <span>Delete</span> |
| 214 | </v-tooltip> | 214 | </v-tooltip> |
| 215 | </span> | 215 | </span> |
| 216 | </td> | 216 | </td> |
| 217 | </tr> | 217 | </tr> |
| 218 | </template> | 218 | </template> |
| 219 | <v-alert | 219 | <v-alert |
| 220 | slot="no-results" | 220 | slot="no-results" |
| 221 | :value="true" | 221 | :value="true" |
| 222 | color="error" | 222 | color="error" |
| 223 | icon="warning" | 223 | icon="warning" |
| 224 | >Your search for "{{ search }}" found no results.</v-alert> | 224 | >Your search for "{{ search }}" found no results.</v-alert> |
| 225 | </v-data-table> | 225 | </v-data-table> |
| 226 | <!-- ****** ADD MULTIPLE EVENT ****** --> | 226 | <!-- ****** ADD MULTIPLE EVENT ****** --> |
| 227 | <v-dialog v-model="addEventDialog" max-width="500px"> | 227 | <v-dialog v-model="addEventDialog" max-width="500px"> |
| 228 | <v-card flat class="card-style pa-2" dark> | 228 | <v-card flat class="card-style pa-2" dark> |
| 229 | <v-layout> | 229 | <v-layout> |
| 230 | <v-flex xs12> | 230 | <v-flex xs12> |
| 231 | <label class="title text-xs-center">Add Event</label> | 231 | <label class="title text-xs-center">Add Event</label> |
| 232 | <v-icon size="24" class="right" @click="addEventDialog = false">cancel</v-icon> | 232 | <v-icon size="24" class="right" @click="addEventDialog = false">cancel</v-icon> |
| 233 | </v-flex> | 233 | </v-flex> |
| 234 | </v-layout> | 234 | </v-layout> |
| 235 | <v-form ref="form" v-model="valid" lazy-validation> | 235 | <v-form ref="form" v-model="valid" lazy-validation> |
| 236 | <v-container fluid> | 236 | <v-container fluid> |
| 237 | <v-flex xs12> | 237 | <v-flex xs12> |
| 238 | <v-layout> | 238 | <v-layout> |
| 239 | <v-flex xs4 class="pt-4 subheading"> | 239 | <v-flex xs4 class="pt-4 subheading"> |
| 240 | <label class="right">Title:</label> | 240 | <label class="right">Title:</label> |
| 241 | </v-flex> | 241 | </v-flex> |
| 242 | <v-flex xs8 sm8 class="ml-3"> | 242 | <v-flex xs8 sm8 class="ml-3"> |
| 243 | <v-text-field | 243 | <v-text-field |
| 244 | v-model="addEvent.title" | 244 | v-model="addEvent.title" |
| 245 | placeholder="fill your Title" | 245 | placeholder="fill your Title" |
| 246 | type="text" | 246 | type="text" |
| 247 | :rules="titleRules" | 247 | :rules="titleRules" |
| 248 | required | 248 | required |
| 249 | ></v-text-field> | 249 | ></v-text-field> |
| 250 | </v-flex> | 250 | </v-flex> |
| 251 | </v-layout> | 251 | </v-layout> |
| 252 | </v-flex> | 252 | </v-flex> |
| 253 | <v-flex xs12> | 253 | <v-flex xs12> |
| 254 | <v-layout> | 254 | <v-layout> |
| 255 | <v-flex xs4 class="pt-4 subheading"> | 255 | <v-flex xs4 class="pt-4 subheading"> |
| 256 | <label class="right">Date:</label> | 256 | <label class="right">Date:</label> |
| 257 | </v-flex> | 257 | </v-flex> |
| 258 | <v-flex xs8 sm8 class="ml-3"> | 258 | <v-flex xs8 sm8 class="ml-3"> |
| 259 | <v-menu | 259 | <v-menu |
| 260 | ref="menu1" | 260 | ref="menu1" |
| 261 | :close-on-content-click="false" | 261 | :close-on-content-click="false" |
| 262 | v-model="menu1" | 262 | v-model="menu1" |
| 263 | :nudge-right="40" | 263 | :nudge-right="40" |
| 264 | :return-value.sync="addEvent.dateOfEvent" | 264 | :return-value.sync="addEvent.dateOfEvent" |
| 265 | app | 265 | app |
| 266 | lazy | 266 | lazy |
| 267 | transition="scale-transition" | 267 | transition="scale-transition" |
| 268 | offset-y | 268 | offset-y |
| 269 | full-width | 269 | full-width |
| 270 | min-width="290px" | 270 | min-width="290px" |
| 271 | > | 271 | > |
| 272 | <v-text-field | 272 | <v-text-field |
| 273 | slot="activator" | 273 | slot="activator" |
| 274 | :rules="dateRules" | 274 | :rules="dateRules" |
| 275 | v-model="addEvent.dateOfEvent" | 275 | v-model="addEvent.dateOfEvent" |
| 276 | append-icon="event" | 276 | append-icon="event" |
| 277 | placeholder="Select date" | 277 | placeholder="Select date" |
| 278 | ></v-text-field> | 278 | ></v-text-field> |
| 279 | <v-date-picker | 279 | <v-date-picker |
| 280 | color="info" | 280 | color="info" |
| 281 | v-model="addEvent.dateOfEvent" | 281 | v-model="addEvent.dateOfEvent" |
| 282 | @input="$refs.menu1.save(addEvent.dateOfEvent)" | 282 | @input="$refs.menu1.save(addEvent.dateOfEvent)" |
| 283 | ></v-date-picker> | 283 | ></v-date-picker> |
| 284 | </v-menu> | 284 | </v-menu> |
| 285 | </v-flex> | 285 | </v-flex> |
| 286 | </v-layout> | 286 | </v-layout> |
| 287 | </v-flex> | 287 | </v-flex> |
| 288 | <v-flex xs12> | 288 | <v-flex xs12> |
| 289 | <v-layout> | 289 | <v-layout> |
| 290 | <v-flex xs4 class="pt-4 subheading"> | 290 | <v-flex xs4 class="pt-4 subheading"> |
| 291 | <label class="right">Description:</label> | 291 | <label class="right">Description:</label> |
| 292 | </v-flex> | 292 | </v-flex> |
| 293 | <v-flex xs8 sm8 class="ml-3"> | 293 | <v-flex xs8 sm8 class="ml-3"> |
| 294 | <v-text-field | 294 | <v-text-field |
| 295 | placeholder="fill your Description" | 295 | placeholder="fill your Description" |
| 296 | :rules="descriptionRules" | 296 | :rules="descriptionRules" |
| 297 | v-model="addEvent.description" | 297 | v-model="addEvent.description" |
| 298 | type="text" | 298 | type="text" |
| 299 | required | 299 | required |
| 300 | ></v-text-field> | 300 | ></v-text-field> |
| 301 | </v-flex> | 301 | </v-flex> |
| 302 | </v-layout> | 302 | </v-layout> |
| 303 | </v-flex> | 303 | </v-flex> |
| 304 | <v-layout> | 304 | <v-layout> |
| 305 | <v-flex xs12> | 305 | <v-flex xs12> |
| 306 | <v-layout class="right"> | 306 | <v-layout class="right"> |
| 307 | <v-btn @click="clear" round class="clear-button" dark>clear</v-btn> | 307 | <v-btn @click="clear" round class="clear-button" dark>clear</v-btn> |
| 308 | <v-btn @click="submit" round dark :loading="loading" class="add-button">Add</v-btn> | 308 | <v-btn @click="submit" round dark :loading="loading" class="add-button">Add</v-btn> |
| 309 | </v-layout> | 309 | </v-layout> |
| 310 | </v-flex> | 310 | </v-flex> |
| 311 | </v-layout> | 311 | </v-layout> |
| 312 | </v-container> | 312 | </v-container> |
| 313 | </v-form> | 313 | </v-form> |
| 314 | </v-card> | 314 | </v-card> |
| 315 | </v-dialog> | 315 | </v-dialog> |
| 316 | <v-snackbar | 316 | <v-snackbar |
| 317 | :timeout="timeout" | 317 | :timeout="timeout" |
| 318 | :top="y === 'top'" | 318 | :top="y === 'top'" |
| 319 | :right="x === 'right'" | 319 | :right="x === 'right'" |
| 320 | :vertical="mode === 'vertical'" | 320 | :vertical="mode === 'vertical'" |
| 321 | v-model="snackbar" | 321 | v-model="snackbar" |
| 322 | :color="color" | 322 | :color="color" |
| 323 | >{{ text }}</v-snackbar> | 323 | >{{ text }}</v-snackbar> |
| 324 | <div class="loader" v-if="showLoader"> | 324 | <div class="loader" v-if="showLoader"> |
| 325 | <v-progress-circular indeterminate color="white"></v-progress-circular> | 325 | <v-progress-circular indeterminate color="white"></v-progress-circular> |
| 326 | </div> | 326 | </div> |
| 327 | </v-container> | 327 | </v-container> |
| 328 | </template> | 328 | </template> |
| 329 | 329 | ||
| 330 | <script> | 330 | <script> |
| 331 | import http from "@/Services/http.js"; | 331 | import http from "@/Services/http.js"; |
| 332 | import moment from "moment"; | 332 | import moment from "moment"; |
| 333 | 333 | ||
| 334 | export default { | 334 | export default { |
| 335 | data: () => ({ | 335 | data: () => ({ |
| 336 | snackbar: false, | 336 | snackbar: false, |
| 337 | y: "top", | 337 | y: "top", |
| 338 | x: "right", | 338 | x: "right", |
| 339 | mode: "", | 339 | mode: "", |
| 340 | timeout: 5000, | 340 | timeout: 5000, |
| 341 | text: "", | 341 | text: "", |
| 342 | color: "", | 342 | color: "", |
| 343 | loading: false, | 343 | loading: false, |
| 344 | date: null, | 344 | date: null, |
| 345 | search: "", | 345 | search: "", |
| 346 | color: "", | 346 | color: "", |
| 347 | show: true, | 347 | show: true, |
| 348 | addEventDialog: false, | 348 | addEventDialog: false, |
| 349 | showSearch: false, | 349 | showSearch: false, |
| 350 | showLoader: false, | 350 | showLoader: false, |
| 351 | editEventdialog: false, | 351 | editEventdialog: false, |
| 352 | viewEventdialog: false, | 352 | viewEventdialog: false, |
| 353 | valid: true, | 353 | valid: true, |
| 354 | pagination: { | 354 | pagination: { |
| 355 | rowsPerPage: 10 | 355 | rowsPerPage: 10 |
| 356 | }, | 356 | }, |
| 357 | date: null, | 357 | date: null, |
| 358 | menu1: false, | 358 | menu1: false, |
| 359 | menu: false, | 359 | menu: false, |
| 360 | titleRules: [v => !!v || " Tilte is required"], | 360 | titleRules: [v => !!v || " Tilte is required"], |
| 361 | descriptionRules: [v => !!v || " Discription is required"], | 361 | descriptionRules: [v => !!v || " Discription is required"], |
| 362 | dateRules: [v => !!v || "Date is required"], | 362 | dateRules: [v => !!v || "Date is required"], |
| 363 | headers: [ | 363 | headers: [ |
| 364 | { | 364 | { |
| 365 | text: "No", | 365 | text: "No", |
| 366 | align: "", | 366 | align: "", |
| 367 | sortable: false, | 367 | sortable: false, |
| 368 | value: "No" | 368 | value: "No" |
| 369 | }, | 369 | }, |
| 370 | { text: "Title", value: "title", sortable: false, align: "center" }, | 370 | { text: "Title", value: "title", sortable: false, align: "center" }, |
| 371 | { text: "Date", value: "date", sortable: false, align: "center" }, | 371 | { text: "Date", value: "date", sortable: false, align: "center" }, |
| 372 | 372 | ||
| 373 | { | 373 | { |
| 374 | text: "Description", | 374 | text: "Description", |
| 375 | value: "description", | 375 | value: "description", |
| 376 | sortable: false, | 376 | sortable: false, |
| 377 | align: "center" | 377 | align: "center" |
| 378 | }, | 378 | }, |
| 379 | { text: "Action", value: "", sortable: false, align: "center" } | 379 | { text: "Action", value: "", sortable: false, align: "center" } |
| 380 | ], | 380 | ], |
| 381 | events: [], | 381 | events: [], |
| 382 | editedIndex: -1, | 382 | editedIndex: -1, |
| 383 | addEvent: {}, | 383 | addEvent: {}, |
| 384 | editedItem: {} | 384 | editedItem: {} |
| 385 | }), | 385 | }), |
| 386 | methods: { | 386 | methods: { |
| 387 | dates: function(date) { | 387 | dates: function(date) { |
| 388 | return moment(date).format("MMMM DD, YYYY"); | 388 | return moment(date).format("MMMM DD, YYYY"); |
| 389 | }, | 389 | }, |
| 390 | getEvents() { | 390 | getEvents() { |
| 391 | this.showLoader = true; | 391 | this.showLoader = true; |
| 392 | var token = this.$store.state.token; | 392 | var token = this.$store.state.token; |
| 393 | http() | 393 | http() |
| 394 | .get("/getSchoolEventsList", { | 394 | .get("/getSchoolEventsList", { |
| 395 | headers: { Authorization: "Bearer " + token } | 395 | headers: { Authorization: "Bearer " + token } |
| 396 | }) | 396 | }) |
| 397 | .then(response => { | 397 | .then(response => { |
| 398 | this.events = response.data.data; | 398 | this.events = response.data.data; |
| 399 | this.showLoader = false; | 399 | this.showLoader = false; |
| 400 | }) | 400 | }) |
| 401 | .catch(error => { | 401 | .catch(error => { |
| 402 | // console.log("err====>", err); | 402 | // console.log("err====>", err); |
| 403 | this.showLoader = false; | 403 | this.showLoader = false; |
| 404 | if (error.response.status === 401) { | 404 | if (error.response.status === 401) { |
| 405 | this.$router.replace({ path: "/" }); | 405 | this.$router.replace({ path: "/" }); |
| 406 | this.$store.dispatch("setToken", null); | 406 | this.$store.dispatch("setToken", null); |
| 407 | this.$store.dispatch("Id", null); | 407 | this.$store.dispatch("Id", null); |
| 408 | } | 408 | } |
| 409 | }); | 409 | }); |
| 410 | }, | 410 | }, |
| 411 | editItem(item) { | 411 | editItem(item) { |
| 412 | this.editedIndex = this.events.indexOf(item); | 412 | this.editedIndex = this.events.indexOf(item); |
| 413 | this.editedItem = Object.assign({}, item); | 413 | this.editedItem = Object.assign({}, item); |
| 414 | this.editedItem.schoolEventId = item._id; | 414 | this.editedItem.schoolEventId = item._id; |
| 415 | this.editEventdialog = true; | 415 | this.editEventdialog = true; |
| 416 | }, | 416 | }, |
| 417 | profile(item) { | 417 | profile(item) { |
| 418 | this.editedIndex = this.events.indexOf(item); | 418 | this.editedIndex = this.events.indexOf(item); |
| 419 | this.editedItem = Object.assign({}, item); | 419 | this.editedItem = Object.assign({}, item); |
| 420 | this.viewEventdialog = true; | 420 | this.viewEventdialog = true; |
| 421 | }, | 421 | }, |
| 422 | 422 | ||
| 423 | deleteItem(item) { | 423 | deleteItem(item) { |
| 424 | let deleteEvent = { | 424 | let deleteEvent = { |
| 425 | schoolEventId: item._id | 425 | schoolEventId: item._id |
| 426 | }; | 426 | }; |
| 427 | http() | 427 | http() |
| 428 | .delete( | 428 | .delete( |
| 429 | "/deleteSchoolEvent", | 429 | "/deleteSchoolEvent", |
| 430 | confirm("Are you sure you want to delete this?") && { | 430 | confirm("Are you sure you want to delete this?") && { |
| 431 | params: deleteEvent | 431 | params: deleteEvent |
| 432 | } | 432 | } |
| 433 | ) | 433 | ) |
| 434 | .then(response => { | 434 | .then(response => { |
| 435 | this.snackbar = true; | 435 | this.snackbar = true; |
| 436 | this.text = response.data.message; | 436 | this.text = response.data.message; |
| 437 | this.getEvents(); | 437 | this.getEvents(); |
| 438 | this.snackbar = true; | 438 | this.snackbar = true; |
| 439 | this.color = "green"; | 439 | this.color = "green"; |
| 440 | this.text = response.data.message; | 440 | this.text = response.data.message; |
| 441 | }) | 441 | }) |
| 442 | .catch(error => { | 442 | .catch(error => { |
| 443 | this.snackbar = true; | 443 | this.snackbar = true; |
| 444 | this.text = error.response.data.message; | 444 | this.text = error.response.data.message; |
| 445 | this.color = "error"; | 445 | this.color = "error"; |
| 446 | this.loading = false; | 446 | this.loading = false; |
| 447 | }); | 447 | }); |
| 448 | }, | 448 | }, |
| 449 | close() { | 449 | close() { |
| 450 | this.editEventdialog = false; | 450 | this.editEventdialog = false; |
| 451 | }, | 451 | }, |
| 452 | submit() { | 452 | submit() { |
| 453 | if (this.$refs.form.validate()) { | 453 | if (this.$refs.form.validate()) { |
| 454 | this.loading = true; | 454 | this.loading = true; |
| 455 | http() | 455 | http() |
| 456 | .post("/createSchoolEvent", this.addEvent) | 456 | .post("/createSchoolEvent", this.addEvent) |
| 457 | .then(response => { | 457 | .then(response => { |
| 458 | this.snackbar = true; | 458 | this.snackbar = true; |
| 459 | this.text = response.data.message; | 459 | this.text = response.data.message; |
| 460 | this.color = "green"; | 460 | this.color = "green"; |
| 461 | this.getEvents(); | 461 | this.getEvents(); |
| 462 | this.clear(); | 462 | this.clear(); |
| 463 | this.loading = false; | 463 | this.loading = false; |
| 464 | this.addEventDialog = false; | 464 | this.addEventDialog = false; |
| 465 | }) | 465 | }) |
| 466 | .catch(error => { | 466 | .catch(error => { |
| 467 | this.snackbar = true; | 467 | this.snackbar = true; |
| 468 | this.text = error.response.data.message; | 468 | this.text = error.response.data.message; |
| 469 | this.color = "error"; | 469 | this.color = "error"; |
| 470 | this.loading = false; | 470 | this.loading = false; |
| 471 | }); | 471 | }); |
| 472 | } | 472 | } |
| 473 | }, | 473 | }, |
| 474 | clear() { | 474 | clear() { |
| 475 | this.$refs.form.reset(); | 475 | this.$refs.form.reset(); |
| 476 | }, | 476 | }, |
| 477 | save() { | 477 | save() { |
| 478 | http() | 478 | http() |
| 479 | .put("/updateSchoolEvent", this.editedItem) | 479 | .put("/updateSchoolEvent", this.editedItem) |
| 480 | .then(response => { | 480 | .then(response => { |
| 481 | this.snackbar = true; | 481 | this.snackbar = true; |
| 482 | this.text = response.data.message; | 482 | this.text = response.data.message; |
| 483 | this.color = "green"; | 483 | this.color = "green"; |
| 484 | this.getEvents(); | 484 | this.getEvents(); |
| 485 | this.close(); | 485 | this.close(); |
| 486 | }) | 486 | }) |
| 487 | .catch(error => { | 487 | .catch(error => { |
| 488 | this.snackbar = true; | 488 | this.snackbar = true; |
| 489 | this.text = error.response.data.message; | 489 | this.text = error.response.data.message; |
| 490 | this.color = "error"; | 490 | this.color = "error"; |
| 491 | }); | 491 | }); |
| 492 | }, | 492 | }, |
| 493 | displaySearch() { | 493 | displaySearch() { |
| 494 | (this.show = false), (this.showSearch = true); | 494 | (this.show = false), (this.showSearch = true); |
| 495 | }, | 495 | }, |
| 496 | closeSearch() { | 496 | closeSearch() { |
| 497 | this.showSearch = false; | 497 | this.showSearch = false; |
| 498 | this.show = true; | 498 | this.show = true; |
| 499 | this.search = ""; | 499 | this.search = ""; |
| 500 | } | 500 | } |
| 501 | }, | 501 | }, |
| 502 | mounted() { | 502 | mounted() { |
| 503 | this.getEvents(); | 503 | this.getEvents(); |
| 504 | } | 504 | } |
| 505 | }; | 505 | }; |
| 506 | </script> | 506 | </script> |
src/pages/Exam/exam.vue
| 1 | <template> | 1 | <template> |
| 2 | <v-container fluid class="body-color"> | 2 | <v-container fluid class="body-color"> |
| 3 | <!-- ****** EDIT EXAM ****** --> | 3 | <!-- ****** EDIT EXAM ****** --> |
| 4 | <v-dialog v-model="editExamDialog" max-width="600px" scrollable> | 4 | <v-dialog v-model="editExamDialog" 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 Exam</label> | 8 | <label class="title text-xs-center">Edit Exam</label> |
| 9 | <v-icon size="24" class="right" @click="editExamDialog = false">cancel</v-icon> | 9 | <v-icon size="24" class="right" @click="editExamDialog = 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">Exam Name:</label> | 19 | <label class="right">Exam Name:</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 | placeholder="fill your Serial Number" | 23 | placeholder="fill your Serial Number" |
| 24 | v-model="editedItem.examName" | 24 | v-model="editedItem.examName" |
| 25 | type="text" | 25 | type="text" |
| 26 | ></v-text-field> | 26 | ></v-text-field> |
| 27 | </v-flex> | 27 | </v-flex> |
| 28 | </v-layout> | 28 | </v-layout> |
| 29 | </v-flex> | 29 | </v-flex> |
| 30 | <v-flex xs12 sm12> | 30 | <v-flex xs12 sm12> |
| 31 | <v-layout> | 31 | <v-layout> |
| 32 | <v-flex xs4 class="pt-4 subheading"> | 32 | <v-flex xs4 class="pt-4 subheading"> |
| 33 | <label class="right">Date:</label> | 33 | <label class="right">Date:</label> |
| 34 | </v-flex> | 34 | </v-flex> |
| 35 | <v-flex xs7 class="ml-3"> | 35 | <v-flex xs7 class="ml-3"> |
| 36 | <v-menu | 36 | <v-menu |
| 37 | ref="menu1" | 37 | ref="menu1" |
| 38 | :close-on-content-click="false" | 38 | :close-on-content-click="false" |
| 39 | v-model="menu1" | 39 | v-model="menu1" |
| 40 | :nudge-right="40" | 40 | :nudge-right="40" |
| 41 | :return-value.sync="menu1" | 41 | :return-value.sync="menu1" |
| 42 | lazy | 42 | lazy |
| 43 | transition="scale-transition" | 43 | transition="scale-transition" |
| 44 | offset-y | 44 | offset-y |
| 45 | full-width | 45 | full-width |
| 46 | min-width="290px" | 46 | min-width="290px" |
| 47 | > | 47 | > |
| 48 | <v-text-field | 48 | <v-text-field |
| 49 | slot="activator" | 49 | slot="activator" |
| 50 | v-model="editedItem.date" | 50 | v-model="editedItem.date" |
| 51 | label="Select Date" | 51 | label="Select Date" |
| 52 | append-icon="event" | 52 | append-icon="event" |
| 53 | readonly | 53 | readonly |
| 54 | ></v-text-field> | 54 | ></v-text-field> |
| 55 | <v-date-picker v-model="editedItem.date" @input="menu1 = false"></v-date-picker> | 55 | <v-date-picker v-model="editedItem.date" @input="menu1 = false"></v-date-picker> |
| 56 | </v-menu> | 56 | </v-menu> |
| 57 | </v-flex> | 57 | </v-flex> |
| 58 | </v-layout> | 58 | </v-layout> |
| 59 | </v-flex> | 59 | </v-flex> |
| 60 | <v-flex xs12 sm12> | 60 | <v-flex xs12 sm12> |
| 61 | <v-layout> | 61 | <v-layout> |
| 62 | <v-flex xs4 class="pt-4 subheading"> | 62 | <v-flex xs4 class="pt-4 subheading"> |
| 63 | <label class="right">Note:</label> | 63 | <label class="right">Note:</label> |
| 64 | </v-flex> | 64 | </v-flex> |
| 65 | <v-flex xs7 class="ml-3"> | 65 | <v-flex xs7 class="ml-3"> |
| 66 | <v-text-field | 66 | <v-text-field |
| 67 | placeholder="fill your Serial Number" | 67 | placeholder="fill your Serial Number" |
| 68 | v-model="editedItem.note" | 68 | v-model="editedItem.note" |
| 69 | type="text" | 69 | type="text" |
| 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-layout> | 74 | </v-layout> |
| 75 | <v-layout> | 75 | <v-layout> |
| 76 | <v-flex xs12> | 76 | <v-flex xs12> |
| 77 | <v-card-actions> | 77 | <v-card-actions> |
| 78 | <v-spacer></v-spacer> | 78 | <v-spacer></v-spacer> |
| 79 | <v-btn round dark @click="save" class="add-button">Save</v-btn> | 79 | <v-btn round dark @click="save" class="add-button">Save</v-btn> |
| 80 | </v-card-actions> | 80 | </v-card-actions> |
| 81 | </v-flex> | 81 | </v-flex> |
| 82 | </v-layout> | 82 | </v-layout> |
| 83 | </v-container> | 83 | </v-container> |
| 84 | </v-form> | 84 | </v-form> |
| 85 | </v-card-text> | 85 | </v-card-text> |
| 86 | </v-card> | 86 | </v-card> |
| 87 | </v-dialog> | 87 | </v-dialog> |
| 88 | 88 | ||
| 89 | <!-- ****** PROFILE VIEW PARTICULAR EXAM ****** --> | 89 | <!-- ****** PROFILE VIEW PARTICULAR EXAM ****** --> |
| 90 | 90 | ||
| 91 | <v-dialog v-model="profileExamDialog" max-width="500px"> | 91 | <v-dialog v-model="profileExamDialog" max-width="500px"> |
| 92 | <v-card flat class="card-style pa-3" dark> | 92 | <v-card flat class="card-style pa-3" dark> |
| 93 | <v-layout> | 93 | <v-layout> |
| 94 | <v-flex xs12> | 94 | <v-flex xs12> |
| 95 | <label class="title text-xs-center">View Exam</label> | 95 | <label class="title text-xs-center">View Exam</label> |
| 96 | <v-icon size="24" class="right" @click="profileExamDialog = false">cancel</v-icon> | 96 | <v-icon size="24" class="right" @click="profileExamDialog = false">cancel</v-icon> |
| 97 | </v-flex> | 97 | </v-flex> |
| 98 | </v-layout> | 98 | </v-layout> |
| 99 | <v-card-text> | 99 | <v-card-text> |
| 100 | <v-container grid-list-md> | 100 | <v-container grid-list-md> |
| 101 | <v-layout wrap> | 101 | <v-layout wrap> |
| 102 | <v-flex> | 102 | <v-flex> |
| 103 | <v-layout> | 103 | <v-layout> |
| 104 | <v-flex xs6 sm4> | 104 | <v-flex xs6 sm4> |
| 105 | <h5 class="right my-1"> | 105 | <h5 class="right my-1"> |
| 106 | <b>Exam Name:</b> | 106 | <b>Exam Name:</b> |
| 107 | </h5> | 107 | </h5> |
| 108 | </v-flex> | 108 | </v-flex> |
| 109 | <v-flex sm8 xs6> | 109 | <v-flex sm8 xs6> |
| 110 | <h5 class="my-1">{{ editedItem.examName }}</h5> | 110 | <h5 class="my-1">{{ editedItem.examName }}</h5> |
| 111 | </v-flex> | 111 | </v-flex> |
| 112 | </v-layout> | 112 | </v-layout> |
| 113 | <v-layout> | 113 | <v-layout> |
| 114 | <v-flex xs6 sm4> | 114 | <v-flex xs6 sm4> |
| 115 | <h5 class="right my-1"> | 115 | <h5 class="right my-1"> |
| 116 | <b>Date:</b> | 116 | <b>Date:</b> |
| 117 | </h5> | 117 | </h5> |
| 118 | </v-flex> | 118 | </v-flex> |
| 119 | <v-flex sm8 xs6> | 119 | <v-flex sm8 xs6> |
| 120 | <h5 class="my-1">{{ dates(editedItem.date) }}</h5> | 120 | <h5 class="my-1">{{ dates(editedItem.date) }}</h5> |
| 121 | </v-flex> | 121 | </v-flex> |
| 122 | </v-layout> | 122 | </v-layout> |
| 123 | <v-layout> | 123 | <v-layout> |
| 124 | <v-flex xs6 sm4> | 124 | <v-flex xs6 sm4> |
| 125 | <h5 class="right my-1"> | 125 | <h5 class="right my-1"> |
| 126 | <b>Note:</b> | 126 | <b>Note:</b> |
| 127 | </h5> | 127 | </h5> |
| 128 | </v-flex> | 128 | </v-flex> |
| 129 | <v-flex sm8 xs6> | 129 | <v-flex sm8 xs6> |
| 130 | <h5 class="my-1">{{ editedItem.note }}</h5> | 130 | <h5 class="my-1">{{ editedItem.note }}</h5> |
| 131 | </v-flex> | 131 | </v-flex> |
| 132 | </v-layout> | 132 | </v-layout> |
| 133 | </v-flex> | 133 | </v-flex> |
| 134 | </v-layout> | 134 | </v-layout> |
| 135 | </v-container> | 135 | </v-container> |
| 136 | </v-card-text> | 136 | </v-card-text> |
| 137 | </v-card> | 137 | </v-card> |
| 138 | </v-dialog> | 138 | </v-dialog> |
| 139 | <!-- ****** EXAM TABLE****** --> | 139 | <!-- ****** EXAM TABLE****** --> |
| 140 | 140 | ||
| 141 | <v-toolbar color="transparent" flat> | 141 | <v-toolbar color="transparent" flat> |
| 142 | <v-btn | 142 | <v-btn |
| 143 | fab | 143 | fab |
| 144 | dark | 144 | dark |
| 145 | class="open-dialog-button hidden-xl-only hidden-md-only hidden-lg-only" | 145 | class="open-dialog-button hidden-xl-only hidden-md-only hidden-lg-only" |
| 146 | small | 146 | small |
| 147 | @click="addExamDialog = true" | 147 | @click="addExamDialog = true" |
| 148 | > | 148 | > |
| 149 | <v-icon dark>add</v-icon> | 149 | <v-icon dark>add</v-icon> |
| 150 | </v-btn> | 150 | </v-btn> |
| 151 | <v-btn | 151 | <v-btn |
| 152 | round | 152 | round |
| 153 | class="open-dialog-button hidden-sm-only hidden-xs-only" | 153 | class="open-dialog-button hidden-sm-only hidden-xs-only" |
| 154 | dark | 154 | dark |
| 155 | @click="addExamDialog = true" | 155 | @click="addExamDialog = true" |
| 156 | > | 156 | > |
| 157 | <v-icon class="white--text pr-1" size="20">add</v-icon>Add Exam | 157 | <v-icon class="white--text pr-1" size="20">add</v-icon>Add Exam |
| 158 | </v-btn> | 158 | </v-btn> |
| 159 | <v-spacer></v-spacer> | 159 | <v-spacer></v-spacer> |
| 160 | <v-card-title class="body-1" v-show="show"> | 160 | <v-card-title class="body-1" v-show="show"> |
| 161 | <v-btn icon large flat @click="displaySearch"> | 161 | <v-btn icon large flat @click="displaySearch"> |
| 162 | <v-avatar size="27"> | 162 | <v-avatar size="27"> |
| 163 | <img src="/static/icon/dashboard icons-49.png" alt="icon" /> | 163 | <img src="/static/icon/search.png" alt="icon" /> |
| 164 | </v-avatar> | 164 | </v-avatar> |
| 165 | </v-btn> | 165 | </v-btn> |
| 166 | </v-card-title> | 166 | </v-card-title> |
| 167 | <v-flex xs8 sm8 md3 lg2 v-show="showSearch"> | 167 | <v-flex xs8 sm8 md3 lg2 v-show="showSearch"> |
| 168 | <v-layout> | 168 | <v-layout> |
| 169 | <v-text-field v-model="search" label="Search" prepend-inner-icon="search" color="primary"></v-text-field> | 169 | <v-text-field v-model="search" label="Search" prepend-inner-icon="search" color="primary"></v-text-field> |
| 170 | <v-icon @click="closeSearch" color="error">close</v-icon> | 170 | <v-icon @click="closeSearch" color="error">close</v-icon> |
| 171 | </v-layout> | 171 | </v-layout> |
| 172 | </v-flex> | 172 | </v-flex> |
| 173 | </v-toolbar> | 173 | </v-toolbar> |
| 174 | <v-data-table | 174 | <v-data-table |
| 175 | :headers="headers" | 175 | :headers="headers" |
| 176 | :items="examData" | 176 | :items="examData" |
| 177 | :pagination.sync="pagination" | 177 | :pagination.sync="pagination" |
| 178 | :search="search" | 178 | :search="search" |
| 179 | > | 179 | > |
| 180 | <template slot="items" slot-scope="props"> | 180 | <template slot="items" slot-scope="props"> |
| 181 | <tr class="tr"> | 181 | <tr class="tr"> |
| 182 | <td class="td td-row">{{ props.index + 1}}</td> | 182 | <td class="td td-row">{{ props.index + 1}}</td> |
| 183 | <td class="td td-row text-xs-center">{{ props.item.examName}}</td> | 183 | <td class="td td-row text-xs-center">{{ props.item.examName}}</td> |
| 184 | <td class="td td-row text-xs-center">{{ dates(props.item.date) }}</td> | 184 | <td class="td td-row text-xs-center">{{ dates(props.item.date) }}</td> |
| 185 | <td class="td td-row text-xs-center">{{ props.item.note}}</td> | 185 | <td class="td td-row text-xs-center">{{ props.item.note}}</td> |
| 186 | <td class="td td-row text-xs-center"> | 186 | <td class="td td-row text-xs-center"> |
| 187 | <span> | 187 | <span> |
| 188 | <v-tooltip top> | 188 | <v-tooltip top> |
| 189 | <img | 189 | <img |
| 190 | slot="activator" | 190 | slot="activator" |
| 191 | style="cursor:pointer; width:25px; height:25px; " | 191 | style="cursor:pointer; width:25px; height:25px; " |
| 192 | class="mr-3" | 192 | class="mr-3" |
| 193 | @click="profile(props.item)" | 193 | @click="profile(props.item)" |
| 194 | src="/static/icon/dashboard icons-47.png" | 194 | src="/static/icon/view.png" |
| 195 | /> | 195 | /> |
| 196 | <span>View</span> | 196 | <span>View</span> |
| 197 | </v-tooltip> | 197 | </v-tooltip> |
| 198 | <v-tooltip top> | 198 | <v-tooltip top> |
| 199 | <img | 199 | <img |
| 200 | slot="activator" | 200 | slot="activator" |
| 201 | style="cursor:pointer; width:20px; height:18px; " | 201 | style="cursor:pointer; width:20px; height:18px; " |
| 202 | class="mr-3" | 202 | class="mr-3" |
| 203 | @click="editItem(props.item)" | 203 | @click="editItem(props.item)" |
| 204 | src="/static/icon/dashboard icons-50.png" | 204 | src="/static/icon/edit.png" |
| 205 | /> | 205 | /> |
| 206 | <span>Edit</span> | 206 | <span>Edit</span> |
| 207 | </v-tooltip> | 207 | </v-tooltip> |
| 208 | <v-tooltip top> | 208 | <v-tooltip top> |
| 209 | <img | 209 | <img |
| 210 | slot="activator" | 210 | slot="activator" |
| 211 | style="cursor:pointer; width:20px; height:20px; " | 211 | style="cursor:pointer; width:20px; height:20px; " |
| 212 | class="mr-3" | 212 | class="mr-3" |
| 213 | @click="deleteItem(props.item)" | 213 | @click="deleteItem(props.item)" |
| 214 | src="/static/icon/dashboard icons-51.png" | 214 | src="/static/icon/delete.png" |
| 215 | /> | 215 | /> |
| 216 | <span>Delete</span> | 216 | <span>Delete</span> |
| 217 | </v-tooltip> | 217 | </v-tooltip> |
| 218 | </span> | 218 | </span> |
| 219 | </td> | 219 | </td> |
| 220 | </tr> | 220 | </tr> |
| 221 | </template> | 221 | </template> |
| 222 | <v-alert | 222 | <v-alert |
| 223 | slot="no-results" | 223 | slot="no-results" |
| 224 | :value="true" | 224 | :value="true" |
| 225 | color="error" | 225 | color="error" |
| 226 | icon="warning" | 226 | icon="warning" |
| 227 | >Your search for "{{ search }}" found no results.</v-alert> | 227 | >Your search for "{{ search }}" found no results.</v-alert> |
| 228 | </v-data-table> | 228 | </v-data-table> |
| 229 | 229 | ||
| 230 | <!-- ****** ADD EXAM ****** --> | 230 | <!-- ****** ADD EXAM ****** --> |
| 231 | <v-dialog v-model="addExamDialog" max-width="500px"> | 231 | <v-dialog v-model="addExamDialog" max-width="500px"> |
| 232 | <v-card flat class="card-style pa-2" dark> | 232 | <v-card flat class="card-style pa-2" dark> |
| 233 | <v-layout> | 233 | <v-layout> |
| 234 | <v-flex xs12> | 234 | <v-flex xs12> |
| 235 | <label class="title text-xs-center">Add Exam</label> | 235 | <label class="title text-xs-center">Add Exam</label> |
| 236 | <v-icon size="24" class="right" @click="addExamDialog = false">cancel</v-icon> | 236 | <v-icon size="24" class="right" @click="addExamDialog = false">cancel</v-icon> |
| 237 | </v-flex> | 237 | </v-flex> |
| 238 | </v-layout> | 238 | </v-layout> |
| 239 | <v-form ref="form" v-model="valid" lazy-validation> | 239 | <v-form ref="form" v-model="valid" lazy-validation> |
| 240 | <v-container fluid> | 240 | <v-container fluid> |
| 241 | <v-flex xs12> | 241 | <v-flex xs12> |
| 242 | <v-layout> | 242 | <v-layout> |
| 243 | <v-flex xs4 class="pt-4 subheading"> | 243 | <v-flex xs4 class="pt-4 subheading"> |
| 244 | <label class="right hidden-xs-only">Exam Name:</label> | 244 | <label class="right hidden-xs-only">Exam Name:</label> |
| 245 | <label | 245 | <label |
| 246 | class="right hidden-sm-only hidden-md-only hidden-lg-only hidden-xl-only" | 246 | class="right hidden-sm-only hidden-md-only hidden-lg-only hidden-xl-only" |
| 247 | >ExamName:</label> | 247 | >ExamName:</label> |
| 248 | </v-flex> | 248 | </v-flex> |
| 249 | <v-flex xs8 sm7 class="ml-3"> | 249 | <v-flex xs8 sm7 class="ml-3"> |
| 250 | <v-text-field | 250 | <v-text-field |
| 251 | placeholder="fill your Exam Name" | 251 | placeholder="fill your Exam Name" |
| 252 | :rules="authorRules" | 252 | :rules="authorRules" |
| 253 | v-model="addExam.examName" | 253 | v-model="addExam.examName" |
| 254 | ></v-text-field> | 254 | ></v-text-field> |
| 255 | </v-flex> | 255 | </v-flex> |
| 256 | </v-layout> | 256 | </v-layout> |
| 257 | </v-flex> | 257 | </v-flex> |
| 258 | <v-flex xs12> | 258 | <v-flex xs12> |
| 259 | <v-layout> | 259 | <v-layout> |
| 260 | <v-flex xs4 class="pt-4 subheading"> | 260 | <v-flex xs4 class="pt-4 subheading"> |
| 261 | <label class="right">Date:</label> | 261 | <label class="right">Date:</label> |
| 262 | </v-flex> | 262 | </v-flex> |
| 263 | <v-flex xs8 sm7 class="ml-3"> | 263 | <v-flex xs8 sm7 class="ml-3"> |
| 264 | <v-menu | 264 | <v-menu |
| 265 | ref="menu2" | 265 | ref="menu2" |
| 266 | :close-on-content-click="false" | 266 | :close-on-content-click="false" |
| 267 | v-model="menu2" | 267 | v-model="menu2" |
| 268 | :nudge-right="40" | 268 | :nudge-right="40" |
| 269 | :return-value.sync="addExam.date" | 269 | :return-value.sync="addExam.date" |
| 270 | lazy | 270 | lazy |
| 271 | transition="scale-transition" | 271 | transition="scale-transition" |
| 272 | offset-y | 272 | offset-y |
| 273 | full-width | 273 | full-width |
| 274 | min-width="290px" | 274 | min-width="290px" |
| 275 | > | 275 | > |
| 276 | <v-text-field | 276 | <v-text-field |
| 277 | slot="activator" | 277 | slot="activator" |
| 278 | v-model="addExam.date" | 278 | v-model="addExam.date" |
| 279 | :rules="examDateRules" | 279 | :rules="examDateRules" |
| 280 | label="Select Date" | 280 | label="Select Date" |
| 281 | append-icon="event" | 281 | append-icon="event" |
| 282 | readonly | 282 | readonly |
| 283 | ></v-text-field> | 283 | ></v-text-field> |
| 284 | <v-date-picker v-model="addExam.date" @input="$refs.menu2.save(addExam.date)"></v-date-picker> | 284 | <v-date-picker v-model="addExam.date" @input="$refs.menu2.save(addExam.date)"></v-date-picker> |
| 285 | </v-menu> | 285 | </v-menu> |
| 286 | </v-flex> | 286 | </v-flex> |
| 287 | </v-layout> | 287 | </v-layout> |
| 288 | </v-flex> | 288 | </v-flex> |
| 289 | <v-flex xs12> | 289 | <v-flex xs12> |
| 290 | <v-layout> | 290 | <v-layout> |
| 291 | <v-flex xs4 class="pt-4 subheading"> | 291 | <v-flex xs4 class="pt-4 subheading"> |
| 292 | <label class="right">Note:</label> | 292 | <label class="right">Note:</label> |
| 293 | </v-flex> | 293 | </v-flex> |
| 294 | <v-flex xs8 sm7 class="ml-3"> | 294 | <v-flex xs8 sm7 class="ml-3"> |
| 295 | <v-text-field | 295 | <v-text-field |
| 296 | placeholder="fill your Note" | 296 | placeholder="fill your Note" |
| 297 | :rules="noteRules" | 297 | :rules="noteRules" |
| 298 | v-model="addExam.note" | 298 | v-model="addExam.note" |
| 299 | ></v-text-field> | 299 | ></v-text-field> |
| 300 | </v-flex> | 300 | </v-flex> |
| 301 | </v-layout> | 301 | </v-layout> |
| 302 | </v-flex> | 302 | </v-flex> |
| 303 | <v-layout> | 303 | <v-layout> |
| 304 | <v-flex xs12> | 304 | <v-flex xs12> |
| 305 | <v-card-actions> | 305 | <v-card-actions> |
| 306 | <v-spacer class="hidden-xs-only"></v-spacer> | 306 | <v-spacer class="hidden-xs-only"></v-spacer> |
| 307 | <v-btn @click="clear" round dark class="clear-button">clear</v-btn> | 307 | <v-btn @click="clear" round dark class="clear-button">clear</v-btn> |
| 308 | <v-btn @click="submit" round dark :loading="loading" class="add-button">Add</v-btn> | 308 | <v-btn @click="submit" round dark :loading="loading" class="add-button">Add</v-btn> |
| 309 | </v-card-actions> | 309 | </v-card-actions> |
| 310 | </v-flex> | 310 | </v-flex> |
| 311 | </v-layout> | 311 | </v-layout> |
| 312 | </v-container> | 312 | </v-container> |
| 313 | </v-form> | 313 | </v-form> |
| 314 | </v-card> | 314 | </v-card> |
| 315 | </v-dialog> | 315 | </v-dialog> |
| 316 | <v-snackbar | 316 | <v-snackbar |
| 317 | :timeout="timeout" | 317 | :timeout="timeout" |
| 318 | :top="y === 'top'" | 318 | :top="y === 'top'" |
| 319 | :right="x === 'right'" | 319 | :right="x === 'right'" |
| 320 | :vertical="mode === 'vertical'" | 320 | :vertical="mode === 'vertical'" |
| 321 | v-model="snackbar" | 321 | v-model="snackbar" |
| 322 | :color="color" | 322 | :color="color" |
| 323 | >{{ text }}</v-snackbar> | 323 | >{{ text }}</v-snackbar> |
| 324 | <div class="loader" v-if="showLoader"> | 324 | <div class="loader" v-if="showLoader"> |
| 325 | <v-progress-circular indeterminate color="white"></v-progress-circular> | 325 | <v-progress-circular indeterminate color="white"></v-progress-circular> |
| 326 | </div> | 326 | </div> |
| 327 | </v-container> | 327 | </v-container> |
| 328 | </template> | 328 | </template> |
| 329 | 329 | ||
| 330 | <script> | 330 | <script> |
| 331 | import http from "@/Services/http.js"; | 331 | import http from "@/Services/http.js"; |
| 332 | import moment from "moment"; | 332 | import moment from "moment"; |
| 333 | 333 | ||
| 334 | export default { | 334 | export default { |
| 335 | data: () => ({ | 335 | data: () => ({ |
| 336 | snackbar: false, | 336 | snackbar: false, |
| 337 | date: null, | 337 | date: null, |
| 338 | menu1: false, | 338 | menu1: false, |
| 339 | menu2: false, | 339 | menu2: false, |
| 340 | color: "", | 340 | color: "", |
| 341 | y: "top", | 341 | y: "top", |
| 342 | x: "right", | 342 | x: "right", |
| 343 | mode: "", | 343 | mode: "", |
| 344 | timeout: 10000, | 344 | timeout: 10000, |
| 345 | text: "", | 345 | text: "", |
| 346 | libraryId: "", | 346 | libraryId: "", |
| 347 | show: true, | 347 | show: true, |
| 348 | showSearch: false, | 348 | showSearch: false, |
| 349 | addExamDialog: false, | 349 | addExamDialog: false, |
| 350 | loading: false, | 350 | loading: false, |
| 351 | loadingSearch: false, | 351 | loadingSearch: false, |
| 352 | date: null, | 352 | date: null, |
| 353 | search: "", | 353 | search: "", |
| 354 | showLoader: false, | 354 | showLoader: false, |
| 355 | editExamDialog: false, | 355 | editExamDialog: false, |
| 356 | profileExamDialog: false, | 356 | profileExamDialog: false, |
| 357 | valid: true, | 357 | valid: true, |
| 358 | pagination: { | 358 | pagination: { |
| 359 | rowsPerPage: 10 | 359 | rowsPerPage: 10 |
| 360 | }, | 360 | }, |
| 361 | libraryIDRules: [v => !!v || " Library ID is required"], | 361 | libraryIDRules: [v => !!v || " Library ID is required"], |
| 362 | bookRules: [v => !!v || " book Name is required"], | 362 | bookRules: [v => !!v || " book Name is required"], |
| 363 | authorRules: [v => !!v || "Author Name is required"], | 363 | authorRules: [v => !!v || "Author Name is required"], |
| 364 | subjectCodeRules: [v => !!v || "Subject Code is required"], | 364 | subjectCodeRules: [v => !!v || "Subject Code is required"], |
| 365 | authorRules: [v => !!v || "Author is required"], | 365 | authorRules: [v => !!v || "Author is required"], |
| 366 | noteRules: [v => !!v || "Note is required"], | 366 | noteRules: [v => !!v || "Note is required"], |
| 367 | examDateRules: [v => !!v || "Date is required"], | 367 | examDateRules: [v => !!v || "Date is required"], |
| 368 | headers: [ | 368 | headers: [ |
| 369 | { | 369 | { |
| 370 | align: "", | 370 | align: "", |
| 371 | text: "No", | 371 | text: "No", |
| 372 | sortable: false, | 372 | sortable: false, |
| 373 | value: "No" | 373 | value: "No" |
| 374 | }, | 374 | }, |
| 375 | { text: "Exam Name", vaue: "examName", sortable: false, align: "center" }, | 375 | { text: "Exam Name", vaue: "examName", sortable: false, align: "center" }, |
| 376 | { | 376 | { |
| 377 | text: "Date", | 377 | text: "Date", |
| 378 | value: "date", | 378 | value: "date", |
| 379 | sortable: false, | 379 | sortable: false, |
| 380 | align: "center" | 380 | align: "center" |
| 381 | }, | 381 | }, |
| 382 | { | 382 | { |
| 383 | text: "Note", | 383 | text: "Note", |
| 384 | value: "note", | 384 | value: "note", |
| 385 | sortable: false, | 385 | sortable: false, |
| 386 | align: "center" | 386 | align: "center" |
| 387 | }, | 387 | }, |
| 388 | { text: "Action", value: "", sortable: false, align: "center" } | 388 | { text: "Action", value: "", sortable: false, align: "center" } |
| 389 | ], | 389 | ], |
| 390 | examData: [], | 390 | examData: [], |
| 391 | addExam: {}, | 391 | addExam: {}, |
| 392 | editedItem: {}, | 392 | editedItem: {}, |
| 393 | token: "" | 393 | token: "" |
| 394 | }), | 394 | }), |
| 395 | methods: { | 395 | methods: { |
| 396 | dates: function(date) { | 396 | dates: function(date) { |
| 397 | return moment(date).format("MMMM DD, YYYY"); | 397 | return moment(date).format("MMMM DD, YYYY"); |
| 398 | }, | 398 | }, |
| 399 | pickFile() { | 399 | pickFile() { |
| 400 | this.$refs.image.click(); | 400 | this.$refs.image.click(); |
| 401 | }, | 401 | }, |
| 402 | getExamList() { | 402 | getExamList() { |
| 403 | this.showLoader = true; | 403 | this.showLoader = true; |
| 404 | this.loadingSearch = true; | 404 | this.loadingSearch = true; |
| 405 | http() | 405 | http() |
| 406 | .get("/getExamsList", { | 406 | .get("/getExamsList", { |
| 407 | headers: { Authorization: "Bearer " + this.token } | 407 | headers: { Authorization: "Bearer " + this.token } |
| 408 | }) | 408 | }) |
| 409 | .then(response => { | 409 | .then(response => { |
| 410 | this.examData = response.data.data; | 410 | this.examData = response.data.data; |
| 411 | this.showLoader = false; | 411 | this.showLoader = false; |
| 412 | this.loadingSearch = false; | 412 | this.loadingSearch = false; |
| 413 | }) | 413 | }) |
| 414 | .catch(error => { | 414 | .catch(error => { |
| 415 | // console.log("err====>", err); | 415 | // console.log("err====>", err); |
| 416 | this.showLoader = false; | 416 | this.showLoader = false; |
| 417 | this.loadingSearch = false; | 417 | this.loadingSearch = false; |
| 418 | this.snackbar = true; | 418 | this.snackbar = true; |
| 419 | this.text = error.response.data.message; | 419 | this.text = error.response.data.message; |
| 420 | if (error.response.status === 401) { | 420 | if (error.response.status === 401) { |
| 421 | this.$router.replace({ path: "/" }); | 421 | this.$router.replace({ path: "/" }); |
| 422 | this.$store.dispatch("setToken", null); | 422 | this.$store.dispatch("setToken", null); |
| 423 | this.$store.dispatch("Id", null); | 423 | this.$store.dispatch("Id", null); |
| 424 | } | 424 | } |
| 425 | }); | 425 | }); |
| 426 | }, | 426 | }, |
| 427 | editItem(item) { | 427 | editItem(item) { |
| 428 | this.editedIndex = this.examData.indexOf(item); | 428 | this.editedIndex = this.examData.indexOf(item); |
| 429 | this.editedItem = Object.assign({}, item); | 429 | this.editedItem = Object.assign({}, item); |
| 430 | this.editedItem.date = | 430 | this.editedItem.date = |
| 431 | this.editedItem.date != undefined | 431 | this.editedItem.date != undefined |
| 432 | ? (this.editedItem.date = this.editedItem.date.substring(0, 10)) | 432 | ? (this.editedItem.date = this.editedItem.date.substring(0, 10)) |
| 433 | : (this.editedItem.date = ""); | 433 | : (this.editedItem.date = ""); |
| 434 | this.editExamDialog = true; | 434 | this.editExamDialog = true; |
| 435 | }, | 435 | }, |
| 436 | profile(item) { | 436 | profile(item) { |
| 437 | this.editedIndex = this.examData.indexOf(item); | 437 | this.editedIndex = this.examData.indexOf(item); |
| 438 | this.editedItem = Object.assign({}, item); | 438 | this.editedItem = Object.assign({}, item); |
| 439 | this.profileExamDialog = true; | 439 | this.profileExamDialog = true; |
| 440 | }, | 440 | }, |
| 441 | deleteExam(item) { | 441 | deleteExam(item) { |
| 442 | let Exam = { | 442 | let Exam = { |
| 443 | examId: item._id | 443 | examId: item._id |
| 444 | }; | 444 | }; |
| 445 | http() | 445 | http() |
| 446 | .delete( | 446 | .delete( |
| 447 | "/deleteExam", | 447 | "/deleteExam", |
| 448 | confirm("Are you sure you want to Delete this?") && { | 448 | confirm("Are you sure you want to Delete this?") && { |
| 449 | params: Exam | 449 | params: Exam |
| 450 | } | 450 | } |
| 451 | ) | 451 | ) |
| 452 | .then(response => { | 452 | .then(response => { |
| 453 | this.snackbar = true; | 453 | this.snackbar = true; |
| 454 | this.text = "Successfully Delete Exam "; | 454 | this.text = "Successfully Delete Exam "; |
| 455 | this.getExamList(); | 455 | this.getExamList(); |
| 456 | }) | 456 | }) |
| 457 | .catch(error => { | 457 | .catch(error => { |
| 458 | // console.log(error); | 458 | // console.log(error); |
| 459 | }); | 459 | }); |
| 460 | }, | 460 | }, |
| 461 | close() { | 461 | close() { |
| 462 | this.editExamDialog = false; | 462 | this.editExamDialog = false; |
| 463 | }, | 463 | }, |
| 464 | submit() { | 464 | submit() { |
| 465 | if (this.$refs.form.validate()) { | 465 | if (this.$refs.form.validate()) { |
| 466 | this.loading = true; | 466 | this.loading = true; |
| 467 | http() | 467 | http() |
| 468 | .post("/createExam", this.addExam) | 468 | .post("/createExam", this.addExam) |
| 469 | .then(response => { | 469 | .then(response => { |
| 470 | this.snackbar = true; | 470 | this.snackbar = true; |
| 471 | this.text = response.data.message; | 471 | this.text = response.data.message; |
| 472 | this.color = "green"; | 472 | this.color = "green"; |
| 473 | this.addExamDialog = false; | 473 | this.addExamDialog = false; |
| 474 | this.getExamList(); | 474 | this.getExamList(); |
| 475 | this.color = "succses"; | 475 | this.color = "succses"; |
| 476 | this.loading = false; | 476 | this.loading = false; |
| 477 | this.clear(); | 477 | this.clear(); |
| 478 | }) | 478 | }) |
| 479 | .catch(error => { | 479 | .catch(error => { |
| 480 | this.snackbar = true; | 480 | this.snackbar = true; |
| 481 | this.text = error.response.data.message; | 481 | this.text = error.response.data.message; |
| 482 | this.color = "red"; | 482 | this.color = "red"; |
| 483 | this.loading = false; | 483 | this.loading = false; |
| 484 | }); | 484 | }); |
| 485 | } | 485 | } |
| 486 | }, | 486 | }, |
| 487 | clear() { | 487 | clear() { |
| 488 | this.$refs.form.reset(); | 488 | this.$refs.form.reset(); |
| 489 | this.disable = false; | 489 | this.disable = false; |
| 490 | }, | 490 | }, |
| 491 | save() { | 491 | save() { |
| 492 | this.editedItem.examId = this.editedItem._id; | 492 | this.editedItem.examId = this.editedItem._id; |
| 493 | http() | 493 | http() |
| 494 | .put("/updateExam", this.editedItem) | 494 | .put("/updateExam", this.editedItem) |
| 495 | .then(response => { | 495 | .then(response => { |
| 496 | this.snackbar = true; | 496 | this.snackbar = true; |
| 497 | this.text = response.data.message; | 497 | this.text = response.data.message; |
| 498 | this.color = "green"; | 498 | this.color = "green"; |
| 499 | this.getExamList(); | 499 | this.getExamList(); |
| 500 | this.close(); | 500 | this.close(); |
| 501 | }) | 501 | }) |
| 502 | .catch(error => { | 502 | .catch(error => { |
| 503 | this.snackbar = true; | 503 | this.snackbar = true; |
| 504 | this.text = error.response.data.message; | 504 | this.text = error.response.data.message; |
| 505 | this.color = "red"; | 505 | this.color = "red"; |
| 506 | }); | 506 | }); |
| 507 | }, | 507 | }, |
| 508 | displaySearch() { | 508 | displaySearch() { |
| 509 | (this.show = false), (this.showSearch = true); | 509 | (this.show = false), (this.showSearch = true); |
| 510 | }, | 510 | }, |
| 511 | closeSearch() { | 511 | closeSearch() { |
| 512 | this.showSearch = false; | 512 | this.showSearch = false; |
| 513 | this.show = true; | 513 | this.show = true; |
| 514 | this.search = ""; | 514 | this.search = ""; |
| 515 | } | 515 | } |
| 516 | }, | 516 | }, |
| 517 | mounted() { | 517 | mounted() { |
| 518 | this.token = this.$store.state.token; | 518 | this.token = this.$store.state.token; |
| 519 | this.getExamList(); | 519 | this.getExamList(); |
| 520 | } | 520 | } |
| 521 | }; | 521 | }; |
| 522 | </script> | 522 | </script> |
src/pages/Exam/examSchedule.vue
| 1 | <template> | 1 | <template> |
| 2 | <v-container fluid class="body-color"> | 2 | <v-container fluid class="body-color"> |
| 3 | <!-- ****** Edit Exam Schedule****** --> | 3 | <!-- ****** Edit Exam Schedule****** --> |
| 4 | <v-dialog v-model="editExamScheduleDialog" max-width="800px" scrollable> | 4 | <v-dialog v-model="editExamScheduleDialog" max-width="800px" 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 Exam Schedule</label> | 8 | <label class="title text-xs-center">Edit Exam Schedule</label> |
| 9 | <v-icon size="24" class="right" @click="editExamScheduleDialog = false">cancel</v-icon> | 9 | <v-icon size="24" class="right" @click="editExamScheduleDialog = 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">Exam Name:</label> | 19 | <label class="right">Exam Name:</label> |
| 20 | </v-flex> | 20 | </v-flex> |
| 21 | <v-flex xs7 class="ml-3"> | 21 | <v-flex xs7 class="ml-3"> |
| 22 | <v-select | 22 | <v-select |
| 23 | :rules="examNameRules" | 23 | :rules="examNameRules" |
| 24 | :items="examList" | 24 | :items="examList" |
| 25 | v-model="editedItem.examName" | 25 | v-model="editedItem.examName" |
| 26 | label="Select your Exam Name" | 26 | label="Select your Exam Name" |
| 27 | item-text="examName" | 27 | item-text="examName" |
| 28 | item-value="examName" | 28 | item-value="examName" |
| 29 | ></v-select> | 29 | ></v-select> |
| 30 | </v-flex> | 30 | </v-flex> |
| 31 | </v-layout> | 31 | </v-layout> |
| 32 | </v-flex> | 32 | </v-flex> |
| 33 | <v-flex xs12 sm12> | 33 | <v-flex xs12 sm12> |
| 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">Class:</label> | 36 | <label class="right">Class:</label> |
| 37 | </v-flex> | 37 | </v-flex> |
| 38 | <v-flex xs7 class="ml-3"> | 38 | <v-flex xs7 class="ml-3"> |
| 39 | <v-select | 39 | <v-select |
| 40 | v-model="editedItem.classId" | 40 | v-model="editedItem.classId" |
| 41 | label="Select your Class" | 41 | label="Select your Class" |
| 42 | type="text" | 42 | type="text" |
| 43 | :items="classList" | 43 | :items="classList" |
| 44 | item-text="classNum" | 44 | item-text="classNum" |
| 45 | item-value="_id" | 45 | item-value="_id" |
| 46 | @change="getSections(editedItem.classId)" | 46 | @change="getSections(editedItem.classId)" |
| 47 | required | 47 | required |
| 48 | ></v-select> | 48 | ></v-select> |
| 49 | </v-flex> | 49 | </v-flex> |
| 50 | </v-layout> | 50 | </v-layout> |
| 51 | </v-flex> | 51 | </v-flex> |
| 52 | <v-flex xs12 sm12> | 52 | <v-flex xs12 sm12> |
| 53 | <v-layout> | 53 | <v-layout> |
| 54 | <v-flex xs4 class="pt-4 subheading"> | 54 | <v-flex xs4 class="pt-4 subheading"> |
| 55 | <label class="right">Section:</label> | 55 | <label class="right">Section:</label> |
| 56 | </v-flex> | 56 | </v-flex> |
| 57 | <v-flex xs7 class="ml-3"> | 57 | <v-flex xs7 class="ml-3"> |
| 58 | <v-select | 58 | <v-select |
| 59 | :items="addSection" | 59 | :items="addSection" |
| 60 | label="Select your section" | 60 | label="Select your section" |
| 61 | v-model="editedItem.sectionId" | 61 | v-model="editedItem.sectionId" |
| 62 | item-text="name" | 62 | item-text="name" |
| 63 | item-value="_id" | 63 | item-value="_id" |
| 64 | name="Select Section" | 64 | name="Select Section" |
| 65 | required | 65 | required |
| 66 | ></v-select> | 66 | ></v-select> |
| 67 | </v-flex> | 67 | </v-flex> |
| 68 | </v-layout> | 68 | </v-layout> |
| 69 | </v-flex> | 69 | </v-flex> |
| 70 | <v-flex xs12 sm12> | 70 | <v-flex xs12 sm12> |
| 71 | <v-layout> | 71 | <v-layout> |
| 72 | <v-flex xs4 class="pt-4 subheading"> | 72 | <v-flex xs4 class="pt-4 subheading"> |
| 73 | <label class="right">Subject Name:</label> | 73 | <label class="right">Subject Name:</label> |
| 74 | </v-flex> | 74 | </v-flex> |
| 75 | <v-flex xs7 class="ml-3"> | 75 | <v-flex xs7 class="ml-3"> |
| 76 | <v-select | 76 | <v-select |
| 77 | :items="subjects" | 77 | :items="subjects" |
| 78 | label="Select your Subject Name" | 78 | label="Select your Subject Name" |
| 79 | v-model="editedItem.subjectName" | 79 | v-model="editedItem.subjectName" |
| 80 | item-text="subjectName" | 80 | item-text="subjectName" |
| 81 | item-value="subjectName" | 81 | item-value="subjectName" |
| 82 | name="Select Section" | 82 | name="Select Section" |
| 83 | required | 83 | required |
| 84 | ></v-select> | 84 | ></v-select> |
| 85 | </v-flex> | 85 | </v-flex> |
| 86 | </v-layout> | 86 | </v-layout> |
| 87 | </v-flex> | 87 | </v-flex> |
| 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">Date:</label> | 91 | <label class="right">Date:</label> |
| 92 | </v-flex> | 92 | </v-flex> |
| 93 | <v-flex xs7 class="ml-3"> | 93 | <v-flex xs7 class="ml-3"> |
| 94 | <v-menu | 94 | <v-menu |
| 95 | ref="editDate" | 95 | ref="editDate" |
| 96 | :close-on-content-click="false" | 96 | :close-on-content-click="false" |
| 97 | v-model="editDate" | 97 | v-model="editDate" |
| 98 | :nudge-right="40" | 98 | :nudge-right="40" |
| 99 | :return-value.sync="editDate" | 99 | :return-value.sync="editDate" |
| 100 | lazy | 100 | lazy |
| 101 | transition="scale-transition" | 101 | transition="scale-transition" |
| 102 | offset-y | 102 | offset-y |
| 103 | full-width | 103 | full-width |
| 104 | min-width="290px" | 104 | min-width="290px" |
| 105 | > | 105 | > |
| 106 | <v-text-field | 106 | <v-text-field |
| 107 | slot="activator" | 107 | slot="activator" |
| 108 | v-model="editedItem.date" | 108 | v-model="editedItem.date" |
| 109 | label="Select Date" | 109 | label="Select Date" |
| 110 | append-icon="event" | 110 | append-icon="event" |
| 111 | readonly | 111 | readonly |
| 112 | ></v-text-field> | 112 | ></v-text-field> |
| 113 | <v-date-picker v-model="editedItem.date" @input="editDate = false"></v-date-picker> | 113 | <v-date-picker v-model="editedItem.date" @input="editDate = false"></v-date-picker> |
| 114 | </v-menu> | 114 | </v-menu> |
| 115 | </v-flex> | 115 | </v-flex> |
| 116 | </v-layout> | 116 | </v-layout> |
| 117 | </v-flex> | 117 | </v-flex> |
| 118 | <v-flex xs12 sm12> | 118 | <v-flex xs12 sm12> |
| 119 | <v-layout> | 119 | <v-layout> |
| 120 | <v-flex xs4 class="pt-4 subheading"> | 120 | <v-flex xs4 class="pt-4 subheading"> |
| 121 | <label class="right">Time From:</label> | 121 | <label class="right">Time From:</label> |
| 122 | </v-flex> | 122 | </v-flex> |
| 123 | <v-flex xs7 class="ml-3"> | 123 | <v-flex xs7 class="ml-3"> |
| 124 | <v-menu | 124 | <v-menu |
| 125 | ref="menuEdit" | 125 | ref="menuEdit" |
| 126 | :close-on-content-click="false" | 126 | :close-on-content-click="false" |
| 127 | v-model="menuEdit" | 127 | v-model="menuEdit" |
| 128 | :nudge-right="40" | 128 | :nudge-right="40" |
| 129 | :return-value.sync="editedItem.timeFrom" | 129 | :return-value.sync="editedItem.timeFrom" |
| 130 | lazy | 130 | lazy |
| 131 | transition="scale-transition" | 131 | transition="scale-transition" |
| 132 | offset-y | 132 | offset-y |
| 133 | full-width | 133 | full-width |
| 134 | max-width="290px" | 134 | max-width="290px" |
| 135 | min-width="290px" | 135 | min-width="290px" |
| 136 | > | 136 | > |
| 137 | <v-text-field | 137 | <v-text-field |
| 138 | slot="activator" | 138 | slot="activator" |
| 139 | v-model="editedItem.timeFrom" | 139 | v-model="editedItem.timeFrom" |
| 140 | label="Select your time From" | 140 | label="Select your time From" |
| 141 | append-icon="access_time" | 141 | append-icon="access_time" |
| 142 | readonly | 142 | readonly |
| 143 | ></v-text-field> | 143 | ></v-text-field> |
| 144 | <v-time-picker | 144 | <v-time-picker |
| 145 | v-model="editedItem.timeIn" | 145 | v-model="editedItem.timeIn" |
| 146 | @change="$refs.menuEdit.save(editedItem.timeIn)" | 146 | @change="$refs.menuEdit.save(editedItem.timeIn)" |
| 147 | ></v-time-picker> | 147 | ></v-time-picker> |
| 148 | </v-menu> | 148 | </v-menu> |
| 149 | </v-flex> | 149 | </v-flex> |
| 150 | </v-layout> | 150 | </v-layout> |
| 151 | </v-flex> | 151 | </v-flex> |
| 152 | <v-flex xs12 sm12> | 152 | <v-flex xs12 sm12> |
| 153 | <v-layout> | 153 | <v-layout> |
| 154 | <v-flex xs4 class="pt-4 subheading"> | 154 | <v-flex xs4 class="pt-4 subheading"> |
| 155 | <label class="right">Time To:</label> | 155 | <label class="right">Time To:</label> |
| 156 | </v-flex> | 156 | </v-flex> |
| 157 | <v-flex xs7 class="ml-3"> | 157 | <v-flex xs7 class="ml-3"> |
| 158 | <v-menu | 158 | <v-menu |
| 159 | ref="timeToEdit" | 159 | ref="timeToEdit" |
| 160 | :close-on-content-click="false" | 160 | :close-on-content-click="false" |
| 161 | v-model="timeToEdit" | 161 | v-model="timeToEdit" |
| 162 | :nudge-right="40" | 162 | :nudge-right="40" |
| 163 | :return-value.sync="editedItem.timeTo" | 163 | :return-value.sync="editedItem.timeTo" |
| 164 | lazy | 164 | lazy |
| 165 | transition="scale-transition" | 165 | transition="scale-transition" |
| 166 | offset-y | 166 | offset-y |
| 167 | full-width | 167 | full-width |
| 168 | max-width="290px" | 168 | max-width="290px" |
| 169 | min-width="290px" | 169 | min-width="290px" |
| 170 | > | 170 | > |
| 171 | <v-text-field | 171 | <v-text-field |
| 172 | slot="activator" | 172 | slot="activator" |
| 173 | v-model="editedItem.timeTo" | 173 | v-model="editedItem.timeTo" |
| 174 | label="Select your Time To" | 174 | label="Select your Time To" |
| 175 | append-icon="access_time" | 175 | append-icon="access_time" |
| 176 | readonly | 176 | readonly |
| 177 | ></v-text-field> | 177 | ></v-text-field> |
| 178 | <v-time-picker | 178 | <v-time-picker |
| 179 | v-model="editedItem.timeTo" | 179 | v-model="editedItem.timeTo" |
| 180 | @change="$refs.timeToEdit.save(editedItem.timeTo)" | 180 | @change="$refs.timeToEdit.save(editedItem.timeTo)" |
| 181 | ></v-time-picker> | 181 | ></v-time-picker> |
| 182 | </v-menu> | 182 | </v-menu> |
| 183 | </v-flex> | 183 | </v-flex> |
| 184 | </v-layout> | 184 | </v-layout> |
| 185 | </v-flex> | 185 | </v-flex> |
| 186 | <v-flex xs12 sm12> | 186 | <v-flex xs12 sm12> |
| 187 | <v-layout> | 187 | <v-layout> |
| 188 | <v-flex xs4 class="pt-4 subheading"> | 188 | <v-flex xs4 class="pt-4 subheading"> |
| 189 | <label class="right">Room:</label> | 189 | <label class="right">Room:</label> |
| 190 | </v-flex> | 190 | </v-flex> |
| 191 | <v-flex xs7 class="ml-3"> | 191 | <v-flex xs7 class="ml-3"> |
| 192 | <v-text-field | 192 | <v-text-field |
| 193 | placeholder="fill your room" | 193 | placeholder="fill your room" |
| 194 | v-model="editedItem.room" | 194 | v-model="editedItem.room" |
| 195 | @keyup.enter="save" | 195 | @keyup.enter="save" |
| 196 | ></v-text-field> | 196 | ></v-text-field> |
| 197 | </v-flex> | 197 | </v-flex> |
| 198 | </v-layout> | 198 | </v-layout> |
| 199 | </v-flex> | 199 | </v-flex> |
| 200 | </v-layout> | 200 | </v-layout> |
| 201 | <v-layout> | 201 | <v-layout> |
| 202 | <v-flex xs12> | 202 | <v-flex xs12> |
| 203 | <v-card-actions> | 203 | <v-card-actions> |
| 204 | <v-spacer></v-spacer> | 204 | <v-spacer></v-spacer> |
| 205 | <v-btn round dark @click="save" class="add-button">Save</v-btn> | 205 | <v-btn round dark @click="save" class="add-button">Save</v-btn> |
| 206 | </v-card-actions> | 206 | </v-card-actions> |
| 207 | </v-flex> | 207 | </v-flex> |
| 208 | </v-layout> | 208 | </v-layout> |
| 209 | </v-container> | 209 | </v-container> |
| 210 | </v-form> | 210 | </v-form> |
| 211 | </v-card-text> | 211 | </v-card-text> |
| 212 | </v-card> | 212 | </v-card> |
| 213 | </v-dialog> | 213 | </v-dialog> |
| 214 | 214 | ||
| 215 | <!-- ****** PROFILE VIEW Exam Schedule DATA ****** --> | 215 | <!-- ****** PROFILE VIEW Exam Schedule DATA ****** --> |
| 216 | 216 | ||
| 217 | <v-dialog v-model="profileExamScheduleDialog" max-width="600px"> | 217 | <v-dialog v-model="profileExamScheduleDialog" max-width="600px"> |
| 218 | <v-card flat class="card-style pa-3" dark> | 218 | <v-card flat class="card-style pa-3" dark> |
| 219 | <v-layout> | 219 | <v-layout> |
| 220 | <v-flex xs12> | 220 | <v-flex xs12> |
| 221 | <label class="title text-xs-center">View Exam Schedule</label> | 221 | <label class="title text-xs-center">View Exam Schedule</label> |
| 222 | <v-icon size="24" class="right" @click="profileExamScheduleDialog = false">cancel</v-icon> | 222 | <v-icon size="24" class="right" @click="profileExamScheduleDialog = false">cancel</v-icon> |
| 223 | </v-flex> | 223 | </v-flex> |
| 224 | </v-layout> | 224 | </v-layout> |
| 225 | <v-card-text> | 225 | <v-card-text> |
| 226 | <v-container grid-list-md> | 226 | <v-container grid-list-md> |
| 227 | <v-layout wrap> | 227 | <v-layout wrap> |
| 228 | <v-flex> | 228 | <v-flex> |
| 229 | <v-layout> | 229 | <v-layout> |
| 230 | <v-flex xs5 sm6> | 230 | <v-flex xs5 sm6> |
| 231 | <h5 class="right my-1"> | 231 | <h5 class="right my-1"> |
| 232 | <b>Exam Name:</b> | 232 | <b>Exam Name:</b> |
| 233 | </h5> | 233 | </h5> |
| 234 | </v-flex> | 234 | </v-flex> |
| 235 | <v-flex sm6 xs8> | 235 | <v-flex sm6 xs8> |
| 236 | <h5 class="my-1">{{ editedItem.examName }}</h5> | 236 | <h5 class="my-1">{{ editedItem.examName }}</h5> |
| 237 | </v-flex> | 237 | </v-flex> |
| 238 | </v-layout> | 238 | </v-layout> |
| 239 | <v-layout> | 239 | <v-layout> |
| 240 | <v-flex xs5 sm6> | 240 | <v-flex xs5 sm6> |
| 241 | <h5 class="right my-1"> | 241 | <h5 class="right my-1"> |
| 242 | <b>Class:</b> | 242 | <b>Class:</b> |
| 243 | </h5> | 243 | </h5> |
| 244 | </v-flex> | 244 | </v-flex> |
| 245 | <v-flex sm6 xs8> | 245 | <v-flex sm6 xs8> |
| 246 | <h5 class="my-1">{{ editedItem.classId }}</h5> | 246 | <h5 class="my-1">{{ editedItem.classId }}</h5> |
| 247 | </v-flex> | 247 | </v-flex> |
| 248 | </v-layout> | 248 | </v-layout> |
| 249 | <v-layout> | 249 | <v-layout> |
| 250 | <v-flex xs5 sm6> | 250 | <v-flex xs5 sm6> |
| 251 | <h5 class="right my-1"> | 251 | <h5 class="right my-1"> |
| 252 | <b>Section:</b> | 252 | <b>Section:</b> |
| 253 | </h5> | 253 | </h5> |
| 254 | </v-flex> | 254 | </v-flex> |
| 255 | <v-flex sm6 xs8> | 255 | <v-flex sm6 xs8> |
| 256 | <h5 class="my-1">{{ editedItem.sectionId }}</h5> | 256 | <h5 class="my-1">{{ editedItem.sectionId }}</h5> |
| 257 | </v-flex> | 257 | </v-flex> |
| 258 | </v-layout> | 258 | </v-layout> |
| 259 | <v-layout> | 259 | <v-layout> |
| 260 | <v-flex xs5 sm6> | 260 | <v-flex xs5 sm6> |
| 261 | <h5 class="right my-1"> | 261 | <h5 class="right my-1"> |
| 262 | <b>Subject Name:</b> | 262 | <b>Subject Name:</b> |
| 263 | </h5> | 263 | </h5> |
| 264 | </v-flex> | 264 | </v-flex> |
| 265 | <v-flex sm6 xs8> | 265 | <v-flex sm6 xs8> |
| 266 | <h5 class="my-1">{{ editedItem.subjectName }}</h5> | 266 | <h5 class="my-1">{{ editedItem.subjectName }}</h5> |
| 267 | </v-flex> | 267 | </v-flex> |
| 268 | </v-layout> | 268 | </v-layout> |
| 269 | <v-layout> | 269 | <v-layout> |
| 270 | <v-flex xs5 sm6> | 270 | <v-flex xs5 sm6> |
| 271 | <h5 class="right my-1"> | 271 | <h5 class="right my-1"> |
| 272 | <b>Date:</b> | 272 | <b>Date:</b> |
| 273 | </h5> | 273 | </h5> |
| 274 | </v-flex> | 274 | </v-flex> |
| 275 | <v-flex sm6 xs8> | 275 | <v-flex sm6 xs8> |
| 276 | <h5 class="my-1">{{ dates(editedItem.date) }}</h5> | 276 | <h5 class="my-1">{{ dates(editedItem.date) }}</h5> |
| 277 | </v-flex> | 277 | </v-flex> |
| 278 | </v-layout> | 278 | </v-layout> |
| 279 | <v-layout> | 279 | <v-layout> |
| 280 | <v-flex xs5 sm6> | 280 | <v-flex xs5 sm6> |
| 281 | <h5 class="right my-1"> | 281 | <h5 class="right my-1"> |
| 282 | <b>Time From:</b> | 282 | <b>Time From:</b> |
| 283 | </h5> | 283 | </h5> |
| 284 | </v-flex> | 284 | </v-flex> |
| 285 | <v-flex sm6 xs8> | 285 | <v-flex sm6 xs8> |
| 286 | <h5 class="my-1">{{ editedItem.timeFrom }}</h5> | 286 | <h5 class="my-1">{{ editedItem.timeFrom }}</h5> |
| 287 | </v-flex> | 287 | </v-flex> |
| 288 | </v-layout> | 288 | </v-layout> |
| 289 | <v-layout> | 289 | <v-layout> |
| 290 | <v-flex xs5 sm6> | 290 | <v-flex xs5 sm6> |
| 291 | <h5 class="right my-1"> | 291 | <h5 class="right my-1"> |
| 292 | <b>Time To:</b> | 292 | <b>Time To:</b> |
| 293 | </h5> | 293 | </h5> |
| 294 | </v-flex> | 294 | </v-flex> |
| 295 | <v-flex sm6 xs8> | 295 | <v-flex sm6 xs8> |
| 296 | <h5 class="my-1">{{ editedItem.timeTo }}</h5> | 296 | <h5 class="my-1">{{ editedItem.timeTo }}</h5> |
| 297 | </v-flex> | 297 | </v-flex> |
| 298 | </v-layout> | 298 | </v-layout> |
| 299 | <v-layout> | 299 | <v-layout> |
| 300 | <v-flex xs5 sm6> | 300 | <v-flex xs5 sm6> |
| 301 | <h5 class="right my-1"> | 301 | <h5 class="right my-1"> |
| 302 | <b>Room:</b> | 302 | <b>Room:</b> |
| 303 | </h5> | 303 | </h5> |
| 304 | </v-flex> | 304 | </v-flex> |
| 305 | <v-flex sm6 xs8> | 305 | <v-flex sm6 xs8> |
| 306 | <h5 class="my-1">{{ editedItem.room }}</h5> | 306 | <h5 class="my-1">{{ editedItem.room }}</h5> |
| 307 | </v-flex> | 307 | </v-flex> |
| 308 | </v-layout> | 308 | </v-layout> |
| 309 | </v-flex> | 309 | </v-flex> |
| 310 | </v-layout> | 310 | </v-layout> |
| 311 | </v-container> | 311 | </v-container> |
| 312 | </v-card-text> | 312 | </v-card-text> |
| 313 | </v-card> | 313 | </v-card> |
| 314 | </v-dialog> | 314 | </v-dialog> |
| 315 | <!-- ***** Exam Schedule TABLE****** --> | 315 | <!-- ***** Exam Schedule TABLE****** --> |
| 316 | <v-toolbar color="transparent" flat> | 316 | <v-toolbar color="transparent" flat> |
| 317 | <v-btn | 317 | <v-btn |
| 318 | fab | 318 | fab |
| 319 | dark | 319 | dark |
| 320 | class="open-dialog-button hidden-xl-only hidden-md-only hidden-lg-only" | 320 | class="open-dialog-button hidden-xl-only hidden-md-only hidden-lg-only" |
| 321 | small | 321 | small |
| 322 | @click="addExamScheduleDialog = true" | 322 | @click="addExamScheduleDialog = true" |
| 323 | > | 323 | > |
| 324 | <v-icon dark>add</v-icon> | 324 | <v-icon dark>add</v-icon> |
| 325 | </v-btn> | 325 | </v-btn> |
| 326 | <v-btn | 326 | <v-btn |
| 327 | round | 327 | round |
| 328 | class="open-dialog-button hidden-sm-only hidden-xs-only" | 328 | class="open-dialog-button hidden-sm-only hidden-xs-only" |
| 329 | dark | 329 | dark |
| 330 | @click="addExamScheduleDialog = true" | 330 | @click="addExamScheduleDialog = true" |
| 331 | > | 331 | > |
| 332 | <v-icon class="white--text pr-1" size="20">add</v-icon>Add Exam Schedule | 332 | <v-icon class="white--text pr-1" size="20">add</v-icon>Add Exam Schedule |
| 333 | </v-btn> | 333 | </v-btn> |
| 334 | <v-spacer></v-spacer> | 334 | <v-spacer></v-spacer> |
| 335 | <v-flex xs8 sm3 md2 class="mr-3"> | 335 | <v-flex xs8 sm3 md2 class="mr-3"> |
| 336 | <v-select | 336 | <v-select |
| 337 | v-model="getScheduleData.classId" | 337 | v-model="getScheduleData.classId" |
| 338 | label="Select your class" | 338 | label="Select your class" |
| 339 | type="text" | 339 | type="text" |
| 340 | :items="classList" | 340 | :items="classList" |
| 341 | item-text="classNum" | 341 | item-text="classNum" |
| 342 | item-value="_id" | 342 | item-value="_id" |
| 343 | @change="getSchedulesList()" | 343 | @change="getSchedulesList()" |
| 344 | required | 344 | required |
| 345 | ></v-select> | 345 | ></v-select> |
| 346 | </v-flex> | 346 | </v-flex> |
| 347 | <v-card-title class="body-1" v-show="show"> | 347 | <v-card-title class="body-1" v-show="show"> |
| 348 | <v-btn icon large flat @click="displaySearch"> | 348 | <v-btn icon large flat @click="displaySearch"> |
| 349 | <v-avatar size="27"> | 349 | <v-avatar size="27"> |
| 350 | <img src="/static/icon/dashboard icons-49.png" alt="icon" /> | 350 | <img src="/static/icon/search.png" alt="icon" /> |
| 351 | </v-avatar> | 351 | </v-avatar> |
| 352 | </v-btn> | 352 | </v-btn> |
| 353 | </v-card-title> | 353 | </v-card-title> |
| 354 | <v-flex xs8 sm8 md3 lg2 v-show="showSearch"> | 354 | <v-flex xs8 sm8 md3 lg2 v-show="showSearch"> |
| 355 | <v-layout> | 355 | <v-layout> |
| 356 | <v-text-field v-model="search" label="Search" prepend-inner-icon="search" color="primary"></v-text-field> | 356 | <v-text-field v-model="search" label="Search" prepend-inner-icon="search" color="primary"></v-text-field> |
| 357 | <v-icon @click="closeSearch" color="error">close</v-icon> | 357 | <v-icon @click="closeSearch" color="error">close</v-icon> |
| 358 | </v-layout> | 358 | </v-layout> |
| 359 | </v-flex> | 359 | </v-flex> |
| 360 | </v-toolbar> | 360 | </v-toolbar> |
| 361 | <v-data-table | 361 | <v-data-table |
| 362 | :headers="headers" | 362 | :headers="headers" |
| 363 | :items="ScheduleData" | 363 | :items="ScheduleData" |
| 364 | :pagination.sync="pagination" | 364 | :pagination.sync="pagination" |
| 365 | :search="search" | 365 | :search="search" |
| 366 | > | 366 | > |
| 367 | <template slot="items" slot-scope="props"> | 367 | <template slot="items" slot-scope="props"> |
| 368 | <tr class="tr"> | 368 | <tr class="tr"> |
| 369 | <td class="td td-row">{{ props.index + 1}}</td> | 369 | <td class="td td-row">{{ props.index + 1}}</td> |
| 370 | <td class="td td-row text-xs-center">{{ props.item.examName}}</td> | 370 | <td class="td td-row text-xs-center">{{ props.item.examName}}</td> |
| 371 | <td class="td td-row text-xs-center">{{ props.item.classId.classNum}}</td> | 371 | <td class="td td-row text-xs-center">{{ props.item.classId.classNum}}</td> |
| 372 | <td class="td td-row text-xs-center">{{ props.item.sectionId.name }}</td> | 372 | <td class="td td-row text-xs-center">{{ props.item.sectionId.name }}</td> |
| 373 | <td class="td td-row text-xs-center">{{ props.item.subjectName }}</td> | 373 | <td class="td td-row text-xs-center">{{ props.item.subjectName }}</td> |
| 374 | <td class="td td-row text-xs-center">{{ dates(props.item.date) }}</td> | 374 | <td class="td td-row text-xs-center">{{ dates(props.item.date) }}</td> |
| 375 | <td class="td td-row text-xs-center">{{ props.item.timeFrom }} - {{ props.item.timeTo }}</td> | 375 | <td class="td td-row text-xs-center">{{ props.item.timeFrom }} - {{ props.item.timeTo }}</td> |
| 376 | <td class="td td-row text-xs-center">{{ props.item.room }}</td> | 376 | <td class="td td-row text-xs-center">{{ props.item.room }}</td> |
| 377 | <td class="td td-row text-xs-center"> | 377 | <td class="td td-row text-xs-center"> |
| 378 | <span> | 378 | <span> |
| 379 | <v-tooltip top> | 379 | <v-tooltip top> |
| 380 | <img | 380 | <img |
| 381 | slot="activator" | 381 | slot="activator" |
| 382 | style="cursor:pointer; width:25px; height:25px; " | 382 | style="cursor:pointer; width:25px; height:25px; " |
| 383 | class="mr-3" | 383 | class="mr-3" |
| 384 | @click="profile(props.item)" | 384 | @click="profile(props.item)" |
| 385 | src="/static/icon/dashboard icons-47.png" | 385 | src="/static/icon/view.png" |
| 386 | /> | 386 | /> |
| 387 | <span>View</span> | 387 | <span>View</span> |
| 388 | </v-tooltip> | 388 | </v-tooltip> |
| 389 | <v-tooltip top> | 389 | <v-tooltip top> |
| 390 | <img | 390 | <img |
| 391 | slot="activator" | 391 | slot="activator" |
| 392 | style="cursor:pointer; width:20px; height:18px; " | 392 | style="cursor:pointer; width:20px; height:18px; " |
| 393 | class="mr-3" | 393 | class="mr-3" |
| 394 | @click="editItem(props.item)" | 394 | @click="editItem(props.item)" |
| 395 | src="/static/icon/dashboard icons-50.png" | 395 | src="/static/icon/edit.png" |
| 396 | /> | 396 | /> |
| 397 | <span>Edit</span> | 397 | <span>Edit</span> |
| 398 | </v-tooltip> | 398 | </v-tooltip> |
| 399 | <v-tooltip top> | 399 | <v-tooltip top> |
| 400 | <img | 400 | <img |
| 401 | slot="activator" | 401 | slot="activator" |
| 402 | style="cursor:pointer; width:20px; height:20px; " | 402 | style="cursor:pointer; width:20px; height:20px; " |
| 403 | @click="deleteItem(props.item)" | 403 | @click="deleteItem(props.item)" |
| 404 | src="/static/icon/dashboard icons-51.png" | 404 | src="/static/icon/delete.png" |
| 405 | /> | 405 | /> |
| 406 | <span>Delete</span> | 406 | <span>Delete</span> |
| 407 | </v-tooltip> | 407 | </v-tooltip> |
| 408 | </span> | 408 | </span> |
| 409 | </td> | 409 | </td> |
| 410 | </tr> | 410 | </tr> |
| 411 | </template> | 411 | </template> |
| 412 | <v-alert | 412 | <v-alert |
| 413 | slot="no-results" | 413 | slot="no-results" |
| 414 | :value="true" | 414 | :value="true" |
| 415 | color="error" | 415 | color="error" |
| 416 | icon="warning" | 416 | icon="warning" |
| 417 | >Your search for "{{ search }}" found no results.</v-alert> | 417 | >Your search for "{{ search }}" found no results.</v-alert> |
| 418 | </v-data-table> | 418 | </v-data-table> |
| 419 | 419 | ||
| 420 | <!-- ****** ADD Exam Schedule ****** --> | 420 | <!-- ****** ADD Exam Schedule ****** --> |
| 421 | <v-dialog v-model="addExamScheduleDialog" max-width="600"> | 421 | <v-dialog v-model="addExamScheduleDialog" max-width="600"> |
| 422 | <v-card flat class="card-style pa-2" dark> | 422 | <v-card flat class="card-style pa-2" dark> |
| 423 | <v-layout> | 423 | <v-layout> |
| 424 | <v-flex xs12> | 424 | <v-flex xs12> |
| 425 | <label class="title text-xs-center">Add Class</label> | 425 | <label class="title text-xs-center">Add Class</label> |
| 426 | <v-icon size="24" class="right" @click="addExamScheduleDialog = false">cancel</v-icon> | 426 | <v-icon size="24" class="right" @click="addExamScheduleDialog = false">cancel</v-icon> |
| 427 | </v-flex> | 427 | </v-flex> |
| 428 | </v-layout> | 428 | </v-layout> |
| 429 | <v-form ref="form" v-model="valid" lazy-validation> | 429 | <v-form ref="form" v-model="valid" lazy-validation> |
| 430 | <v-container fluid> | 430 | <v-container fluid> |
| 431 | <v-flex xs12> | 431 | <v-flex xs12> |
| 432 | <v-layout> | 432 | <v-layout> |
| 433 | <v-flex xs5 class="pt-4 subheading"> | 433 | <v-flex xs5 class="pt-4 subheading"> |
| 434 | <label class="right">Exam Name:</label> | 434 | <label class="right">Exam Name:</label> |
| 435 | </v-flex> | 435 | </v-flex> |
| 436 | <v-flex xs7 sm7 md6 class="ml-3"> | 436 | <v-flex xs7 sm7 md6 class="ml-3"> |
| 437 | <v-select | 437 | <v-select |
| 438 | label="Select your Exam Name" | 438 | label="Select your Exam Name" |
| 439 | :rules="examNameRules" | 439 | :rules="examNameRules" |
| 440 | :items="examList" | 440 | :items="examList" |
| 441 | v-model="addSchedule.examName" | 441 | v-model="addSchedule.examName" |
| 442 | item-text="examName" | 442 | item-text="examName" |
| 443 | item-value="examName" | 443 | item-value="examName" |
| 444 | ></v-select> | 444 | ></v-select> |
| 445 | </v-flex> | 445 | </v-flex> |
| 446 | </v-layout> | 446 | </v-layout> |
| 447 | </v-flex> | 447 | </v-flex> |
| 448 | <v-flex xs12> | 448 | <v-flex xs12> |
| 449 | <v-layout> | 449 | <v-layout> |
| 450 | <v-flex xs5 class="pt-4 subheading"> | 450 | <v-flex xs5 class="pt-4 subheading"> |
| 451 | <label class="right">Class:</label> | 451 | <label class="right">Class:</label> |
| 452 | </v-flex> | 452 | </v-flex> |
| 453 | <v-flex xs7 sm7 md6 class="ml-3"> | 453 | <v-flex xs7 sm7 md6 class="ml-3"> |
| 454 | <v-select | 454 | <v-select |
| 455 | v-model="addSchedule.classId" | 455 | v-model="addSchedule.classId" |
| 456 | label="Select your class" | 456 | label="Select your class" |
| 457 | type="text" | 457 | type="text" |
| 458 | :items="classList" | 458 | :items="classList" |
| 459 | item-text="classNum" | 459 | item-text="classNum" |
| 460 | item-value="_id" | 460 | item-value="_id" |
| 461 | :rules="classRules" | 461 | :rules="classRules" |
| 462 | @change="getSections(addSchedule.classId)" | 462 | @change="getSections(addSchedule.classId)" |
| 463 | required | 463 | required |
| 464 | ></v-select> | 464 | ></v-select> |
| 465 | </v-flex> | 465 | </v-flex> |
| 466 | </v-layout> | 466 | </v-layout> |
| 467 | </v-flex> | 467 | </v-flex> |
| 468 | <v-flex xs12> | 468 | <v-flex xs12> |
| 469 | <v-layout> | 469 | <v-layout> |
| 470 | <v-flex xs5 class="pt-4 subheading"> | 470 | <v-flex xs5 class="pt-4 subheading"> |
| 471 | <label class="right">Section:</label> | 471 | <label class="right">Section:</label> |
| 472 | </v-flex> | 472 | </v-flex> |
| 473 | <v-flex xs7 sm7 md6 class="ml-3"> | 473 | <v-flex xs7 sm7 md6 class="ml-3"> |
| 474 | <v-select | 474 | <v-select |
| 475 | :items="addSection" | 475 | :items="addSection" |
| 476 | label="Select Section" | 476 | label="Select Section" |
| 477 | v-model="addSchedule.sectionId" | 477 | v-model="addSchedule.sectionId" |
| 478 | item-text="name" | 478 | item-text="name" |
| 479 | item-value="_id" | 479 | item-value="_id" |
| 480 | name="Select Section" | 480 | name="Select Section" |
| 481 | :rules="sectionRules" | 481 | :rules="sectionRules" |
| 482 | required | 482 | required |
| 483 | ></v-select> | 483 | ></v-select> |
| 484 | </v-flex> | 484 | </v-flex> |
| 485 | </v-layout> | 485 | </v-layout> |
| 486 | </v-flex> | 486 | </v-flex> |
| 487 | <v-flex xs12> | 487 | <v-flex xs12> |
| 488 | <v-layout> | 488 | <v-layout> |
| 489 | <v-flex xs5 class="pt-4 subheading"> | 489 | <v-flex xs5 class="pt-4 subheading"> |
| 490 | <label class="right">Subject Name:</label> | 490 | <label class="right">Subject Name:</label> |
| 491 | </v-flex> | 491 | </v-flex> |
| 492 | <v-flex xs7 sm7 md6 class="ml-3"> | 492 | <v-flex xs7 sm7 md6 class="ml-3"> |
| 493 | <v-select | 493 | <v-select |
| 494 | :items="subjects" | 494 | :items="subjects" |
| 495 | label="Select Subject" | 495 | label="Select Subject" |
| 496 | v-model="addSchedule.subjectName" | 496 | v-model="addSchedule.subjectName" |
| 497 | item-text="subjectName" | 497 | item-text="subjectName" |
| 498 | item-value="subjectName" | 498 | item-value="subjectName" |
| 499 | name="Select Section" | 499 | name="Select Section" |
| 500 | :rules="subjectRules" | 500 | :rules="subjectRules" |
| 501 | required | 501 | required |
| 502 | ></v-select> | 502 | ></v-select> |
| 503 | </v-flex> | 503 | </v-flex> |
| 504 | </v-layout> | 504 | </v-layout> |
| 505 | </v-flex> | 505 | </v-flex> |
| 506 | <v-flex xs12> | 506 | <v-flex xs12> |
| 507 | <v-layout> | 507 | <v-layout> |
| 508 | <v-flex xs5 class="pt-4 subheading"> | 508 | <v-flex xs5 class="pt-4 subheading"> |
| 509 | <label class="right">Date:</label> | 509 | <label class="right">Date:</label> |
| 510 | </v-flex> | 510 | </v-flex> |
| 511 | <v-flex xs7 sm7 md6 class="ml-3"> | 511 | <v-flex xs7 sm7 md6 class="ml-3"> |
| 512 | <v-menu | 512 | <v-menu |
| 513 | ref="menu2" | 513 | ref="menu2" |
| 514 | :close-on-content-click="false" | 514 | :close-on-content-click="false" |
| 515 | v-model="menu2" | 515 | v-model="menu2" |
| 516 | :nudge-right="40" | 516 | :nudge-right="40" |
| 517 | :return-value.sync="addSchedule.date" | 517 | :return-value.sync="addSchedule.date" |
| 518 | lazy | 518 | lazy |
| 519 | transition="scale-transition" | 519 | transition="scale-transition" |
| 520 | offset-y | 520 | offset-y |
| 521 | full-width | 521 | full-width |
| 522 | min-width="290px" | 522 | min-width="290px" |
| 523 | > | 523 | > |
| 524 | <v-text-field | 524 | <v-text-field |
| 525 | slot="activator" | 525 | slot="activator" |
| 526 | v-model="addSchedule.date" | 526 | v-model="addSchedule.date" |
| 527 | :rules="examScheduleDateRules" | 527 | :rules="examScheduleDateRules" |
| 528 | label="Select Date" | 528 | label="Select Date" |
| 529 | append-icon="event" | 529 | append-icon="event" |
| 530 | readonly | 530 | readonly |
| 531 | ></v-text-field> | 531 | ></v-text-field> |
| 532 | <v-date-picker | 532 | <v-date-picker |
| 533 | v-model="addSchedule.date" | 533 | v-model="addSchedule.date" |
| 534 | @input="$refs.menu2.save(addSchedule.date)" | 534 | @input="$refs.menu2.save(addSchedule.date)" |
| 535 | ></v-date-picker> | 535 | ></v-date-picker> |
| 536 | </v-menu> | 536 | </v-menu> |
| 537 | </v-flex> | 537 | </v-flex> |
| 538 | </v-layout> | 538 | </v-layout> |
| 539 | </v-flex> | 539 | </v-flex> |
| 540 | <v-flex xs12> | 540 | <v-flex xs12> |
| 541 | <v-layout> | 541 | <v-layout> |
| 542 | <v-flex xs5 class="pt-4 subheading"> | 542 | <v-flex xs5 class="pt-4 subheading"> |
| 543 | <label class="right">Time From:</label> | 543 | <label class="right">Time From:</label> |
| 544 | </v-flex> | 544 | </v-flex> |
| 545 | <v-flex xs7 sm7 md6 class="ml-3"> | 545 | <v-flex xs7 sm7 md6 class="ml-3"> |
| 546 | <v-menu | 546 | <v-menu |
| 547 | ref="menuA" | 547 | ref="menuA" |
| 548 | :close-on-content-click="false" | 548 | :close-on-content-click="false" |
| 549 | v-model="menuB" | 549 | v-model="menuB" |
| 550 | :nudge-right="40" | 550 | :nudge-right="40" |
| 551 | :return-value.sync="addSchedule.timeFrom" | 551 | :return-value.sync="addSchedule.timeFrom" |
| 552 | lazy | 552 | lazy |
| 553 | transition="scale-transition" | 553 | transition="scale-transition" |
| 554 | offset-y | 554 | offset-y |
| 555 | full-width | 555 | full-width |
| 556 | max-width="290px" | 556 | max-width="290px" |
| 557 | min-width="290px" | 557 | min-width="290px" |
| 558 | > | 558 | > |
| 559 | <v-text-field | 559 | <v-text-field |
| 560 | slot="activator" | 560 | slot="activator" |
| 561 | v-model="addSchedule.timeIn" | 561 | v-model="addSchedule.timeIn" |
| 562 | label="Select your time From" | 562 | label="Select your time From" |
| 563 | append-icon="access_time" | 563 | append-icon="access_time" |
| 564 | :rules="timeInRules" | 564 | :rules="timeInRules" |
| 565 | readonly | 565 | readonly |
| 566 | ></v-text-field> | 566 | ></v-text-field> |
| 567 | <v-time-picker | 567 | <v-time-picker |
| 568 | v-model="addSchedule.timeIn" | 568 | v-model="addSchedule.timeIn" |
| 569 | @change="$refs.menuA.save(addSchedule.timeIn)" | 569 | @change="$refs.menuA.save(addSchedule.timeIn)" |
| 570 | ></v-time-picker> | 570 | ></v-time-picker> |
| 571 | </v-menu> | 571 | </v-menu> |
| 572 | </v-flex> | 572 | </v-flex> |
| 573 | </v-layout> | 573 | </v-layout> |
| 574 | </v-flex> | 574 | </v-flex> |
| 575 | <v-flex xs12> | 575 | <v-flex xs12> |
| 576 | <v-layout> | 576 | <v-layout> |
| 577 | <v-flex xs5 class="pt-4 subheading"> | 577 | <v-flex xs5 class="pt-4 subheading"> |
| 578 | <label class="right">Time To:</label> | 578 | <label class="right">Time To:</label> |
| 579 | </v-flex> | 579 | </v-flex> |
| 580 | <v-flex xs7 sm7 md6 class="ml-3"> | 580 | <v-flex xs7 sm7 md6 class="ml-3"> |
| 581 | <v-menu | 581 | <v-menu |
| 582 | ref="menu" | 582 | ref="menu" |
| 583 | :close-on-content-click="false" | 583 | :close-on-content-click="false" |
| 584 | v-model="menu1" | 584 | v-model="menu1" |
| 585 | :nudge-right="40" | 585 | :nudge-right="40" |
| 586 | :return-value.sync="addSchedule.timeTo" | 586 | :return-value.sync="addSchedule.timeTo" |
| 587 | lazy | 587 | lazy |
| 588 | transition="scale-transition" | 588 | transition="scale-transition" |
| 589 | offset-y | 589 | offset-y |
| 590 | full-width | 590 | full-width |
| 591 | max-width="290px" | 591 | max-width="290px" |
| 592 | min-width="290px" | 592 | min-width="290px" |
| 593 | > | 593 | > |
| 594 | <v-text-field | 594 | <v-text-field |
| 595 | slot="activator" | 595 | slot="activator" |
| 596 | v-model="addSchedule.timeTo" | 596 | v-model="addSchedule.timeTo" |
| 597 | label="Select your Time To" | 597 | label="Select your Time To" |
| 598 | append-icon="access_time" | 598 | append-icon="access_time" |
| 599 | :rules="timeOutRules" | 599 | :rules="timeOutRules" |
| 600 | readonly | 600 | readonly |
| 601 | ></v-text-field> | 601 | ></v-text-field> |
| 602 | <v-time-picker | 602 | <v-time-picker |
| 603 | v-model="addSchedule.timeTo" | 603 | v-model="addSchedule.timeTo" |
| 604 | @change="$refs.menu.save(addSchedule.timeTo)" | 604 | @change="$refs.menu.save(addSchedule.timeTo)" |
| 605 | ></v-time-picker> | 605 | ></v-time-picker> |
| 606 | </v-menu> | 606 | </v-menu> |
| 607 | </v-flex> | 607 | </v-flex> |
| 608 | </v-layout> | 608 | </v-layout> |
| 609 | </v-flex> | 609 | </v-flex> |
| 610 | <v-flex xs12> | 610 | <v-flex xs12> |
| 611 | <v-layout> | 611 | <v-layout> |
| 612 | <v-flex xs5 class="pt-4 subheading"> | 612 | <v-flex xs5 class="pt-4 subheading"> |
| 613 | <label class="right">Room:</label> | 613 | <label class="right">Room:</label> |
| 614 | </v-flex> | 614 | </v-flex> |
| 615 | <v-flex xs7 sm7 md6 class="ml-3"> | 615 | <v-flex xs7 sm7 md6 class="ml-3"> |
| 616 | <v-text-field | 616 | <v-text-field |
| 617 | placeholder="fill your room" | 617 | placeholder="fill your room" |
| 618 | :rules="roomRules" | 618 | :rules="roomRules" |
| 619 | v-model="addSchedule.room" | 619 | v-model="addSchedule.room" |
| 620 | @keyup.enter="submit" | 620 | @keyup.enter="submit" |
| 621 | ></v-text-field> | 621 | ></v-text-field> |
| 622 | </v-flex> | 622 | </v-flex> |
| 623 | </v-layout> | 623 | </v-layout> |
| 624 | </v-flex> | 624 | </v-flex> |
| 625 | <v-layout> | 625 | <v-layout> |
| 626 | <v-flex xs12> | 626 | <v-flex xs12> |
| 627 | <v-card-actions> | 627 | <v-card-actions> |
| 628 | <v-spacer class="hidden-xs-only"></v-spacer> | 628 | <v-spacer class="hidden-xs-only"></v-spacer> |
| 629 | <v-btn @click="clear" round dark class="clear-button">clear</v-btn> | 629 | <v-btn @click="clear" round dark class="clear-button">clear</v-btn> |
| 630 | <v-btn @click="submit" round dark :loading="loading" class="add-button">Add</v-btn> | 630 | <v-btn @click="submit" round dark :loading="loading" class="add-button">Add</v-btn> |
| 631 | </v-card-actions> | 631 | </v-card-actions> |
| 632 | </v-flex> | 632 | </v-flex> |
| 633 | </v-layout> | 633 | </v-layout> |
| 634 | </v-container> | 634 | </v-container> |
| 635 | </v-form> | 635 | </v-form> |
| 636 | </v-card> | 636 | </v-card> |
| 637 | </v-dialog> | 637 | </v-dialog> |
| 638 | <v-snackbar | 638 | <v-snackbar |
| 639 | :timeout="timeout" | 639 | :timeout="timeout" |
| 640 | :top="y === 'top'" | 640 | :top="y === 'top'" |
| 641 | :right="x === 'right'" | 641 | :right="x === 'right'" |
| 642 | :vertical="mode === 'vertical'" | 642 | :vertical="mode === 'vertical'" |
| 643 | v-model="snackbar" | 643 | v-model="snackbar" |
| 644 | :color="color" | 644 | :color="color" |
| 645 | >{{ text }}</v-snackbar> | 645 | >{{ text }}</v-snackbar> |
| 646 | <div class="loader" v-if="showLoader"> | 646 | <div class="loader" v-if="showLoader"> |
| 647 | <v-progress-circular indeterminate color="white"></v-progress-circular> | 647 | <v-progress-circular indeterminate color="white"></v-progress-circular> |
| 648 | </div> | 648 | </div> |
| 649 | </v-container> | 649 | </v-container> |
| 650 | </template> | 650 | </template> |
| 651 | 651 | ||
| 652 | <script> | 652 | <script> |
| 653 | import http from "@/Services/http.js"; | 653 | import http from "@/Services/http.js"; |
| 654 | import moment from "moment"; | 654 | import moment from "moment"; |
| 655 | 655 | ||
| 656 | export default { | 656 | export default { |
| 657 | data: () => ({ | 657 | data: () => ({ |
| 658 | snackbar: false, | 658 | snackbar: false, |
| 659 | date: null, | 659 | date: null, |
| 660 | editDate: false, | 660 | editDate: false, |
| 661 | menu1: false, | 661 | menu1: false, |
| 662 | menuB: false, | 662 | menuB: false, |
| 663 | menu2: false, | 663 | menu2: false, |
| 664 | menuEdit: false, | 664 | menuEdit: false, |
| 665 | timeToEdit: false, | 665 | timeToEdit: false, |
| 666 | show: true, | 666 | show: true, |
| 667 | showSearch: false, | 667 | showSearch: false, |
| 668 | addExamScheduleDialog: false, | 668 | addExamScheduleDialog: false, |
| 669 | color: "", | 669 | color: "", |
| 670 | y: "top", | 670 | y: "top", |
| 671 | x: "right", | 671 | x: "right", |
| 672 | mode: "", | 672 | mode: "", |
| 673 | timeout: 10000, | 673 | timeout: 10000, |
| 674 | text: "", | 674 | text: "", |
| 675 | loading: false, | 675 | loading: false, |
| 676 | date: null, | 676 | date: null, |
| 677 | search: "", | 677 | search: "", |
| 678 | showLoader: false, | 678 | showLoader: false, |
| 679 | editExamScheduleDialog: false, | 679 | editExamScheduleDialog: false, |
| 680 | profileExamScheduleDialog: false, | 680 | profileExamScheduleDialog: false, |
| 681 | valid: true, | 681 | valid: true, |
| 682 | addSection: [], | 682 | addSection: [], |
| 683 | pagination: { | 683 | pagination: { |
| 684 | rowsPerPage: 10 | 684 | rowsPerPage: 10 |
| 685 | }, | 685 | }, |
| 686 | examNameRules: [v => !!v || "Exam Name is required"], | 686 | examNameRules: [v => !!v || "Exam Name is required"], |
| 687 | classRules: [v => !!v || "Class Name is required"], | 687 | classRules: [v => !!v || "Class Name is required"], |
| 688 | sectionRules: [v => !!v || "section is required"], | 688 | sectionRules: [v => !!v || "section is required"], |
| 689 | subjectRules: [v => !!v || "Subject is required"], | 689 | subjectRules: [v => !!v || "Subject is required"], |
| 690 | timeInRules: [v => !!v || "Time In is required"], | 690 | timeInRules: [v => !!v || "Time In is required"], |
| 691 | timeOutRules: [v => !!v || "time Out s is required"], | 691 | timeOutRules: [v => !!v || "time Out s is required"], |
| 692 | roomRules: [v => !!v || "Room is required"], | 692 | roomRules: [v => !!v || "Room is required"], |
| 693 | examScheduleDateRules: [v => !!v || "Date is required"], | 693 | examScheduleDateRules: [v => !!v || "Date is required"], |
| 694 | headers: [ | 694 | headers: [ |
| 695 | { | 695 | { |
| 696 | align: "", | 696 | align: "", |
| 697 | text: "No", | 697 | text: "No", |
| 698 | sortable: false, | 698 | sortable: false, |
| 699 | value: "No" | 699 | value: "No" |
| 700 | }, | 700 | }, |
| 701 | { | 701 | { |
| 702 | text: "Exam Name", | 702 | text: "Exam Name", |
| 703 | vaue: "examName", | 703 | vaue: "examName", |
| 704 | sortable: false, | 704 | sortable: false, |
| 705 | align: "center" | 705 | align: "center" |
| 706 | }, | 706 | }, |
| 707 | { | 707 | { |
| 708 | text: "Class", | 708 | text: "Class", |
| 709 | value: "classId.classNum", | 709 | value: "classId.classNum", |
| 710 | sortable: false, | 710 | sortable: false, |
| 711 | align: "center" | 711 | align: "center" |
| 712 | }, | 712 | }, |
| 713 | { | 713 | { |
| 714 | text: "Section", | 714 | text: "Section", |
| 715 | value: "sectionId.name", | 715 | value: "sectionId.name", |
| 716 | sortable: false, | 716 | sortable: false, |
| 717 | align: "center" | 717 | align: "center" |
| 718 | }, | 718 | }, |
| 719 | { | 719 | { |
| 720 | text: "Subject Name", | 720 | text: "Subject Name", |
| 721 | value: "subjectName", | 721 | value: "subjectName", |
| 722 | sortable: false, | 722 | sortable: false, |
| 723 | align: "center" | 723 | align: "center" |
| 724 | }, | 724 | }, |
| 725 | { | 725 | { |
| 726 | text: "Date", | 726 | text: "Date", |
| 727 | value: "date", | 727 | value: "date", |
| 728 | sortable: false, | 728 | sortable: false, |
| 729 | align: "center" | 729 | align: "center" |
| 730 | }, | 730 | }, |
| 731 | { | 731 | { |
| 732 | text: "Time", | 732 | text: "Time", |
| 733 | value: "timeFrom", | 733 | value: "timeFrom", |
| 734 | sortable: false, | 734 | sortable: false, |
| 735 | align: "center" | 735 | align: "center" |
| 736 | }, | 736 | }, |
| 737 | { | 737 | { |
| 738 | text: "Room", | 738 | text: "Room", |
| 739 | value: "room", | 739 | value: "room", |
| 740 | sortable: false, | 740 | sortable: false, |
| 741 | align: "center" | 741 | align: "center" |
| 742 | }, | 742 | }, |
| 743 | { text: "Action", value: "", sortable: false, align: "center" } | 743 | { text: "Action", value: "", sortable: false, align: "center" } |
| 744 | ], | 744 | ], |
| 745 | classList: [], | 745 | classList: [], |
| 746 | examList: [], | 746 | examList: [], |
| 747 | subjects: [], | 747 | subjects: [], |
| 748 | addSchedule: {}, | 748 | addSchedule: {}, |
| 749 | editedItem: {}, | 749 | editedItem: {}, |
| 750 | getScheduleData: {}, | 750 | getScheduleData: {}, |
| 751 | ScheduleData: [], | 751 | ScheduleData: [], |
| 752 | token: "" | 752 | token: "" |
| 753 | }), | 753 | }), |
| 754 | methods: { | 754 | methods: { |
| 755 | dates: function(date) { | 755 | dates: function(date) { |
| 756 | return moment(date).format("MMMM DD, YYYY"); | 756 | return moment(date).format("MMMM DD, YYYY"); |
| 757 | }, | 757 | }, |
| 758 | pickFile() { | 758 | pickFile() { |
| 759 | this.$refs.image.click(); | 759 | this.$refs.image.click(); |
| 760 | }, | 760 | }, |
| 761 | getSchedulesList() { | 761 | getSchedulesList() { |
| 762 | this.showLoader = true; | 762 | this.showLoader = true; |
| 763 | http() | 763 | http() |
| 764 | .get("/getSchedulesList", { | 764 | .get("/getSchedulesList", { |
| 765 | params: { classId: this.getScheduleData.classId }, | 765 | params: { classId: this.getScheduleData.classId }, |
| 766 | headers: { Authorization: "Bearer " + this.token } | 766 | headers: { Authorization: "Bearer " + this.token } |
| 767 | }) | 767 | }) |
| 768 | .then(response => { | 768 | .then(response => { |
| 769 | this.ScheduleData = response.data.data; | 769 | this.ScheduleData = response.data.data; |
| 770 | // console.log("this.ScheduleData", this.ScheduleData); | 770 | // console.log("this.ScheduleData", this.ScheduleData); |
| 771 | this.showLoader = false; | 771 | this.showLoader = false; |
| 772 | }) | 772 | }) |
| 773 | .catch(error => { | 773 | .catch(error => { |
| 774 | // console.log("err====>", err); | 774 | // console.log("err====>", err); |
| 775 | this.showLoader = false; | 775 | this.showLoader = false; |
| 776 | this.loadingSearch = false; | 776 | this.loadingSearch = false; |
| 777 | this.snackbar = true; | 777 | this.snackbar = true; |
| 778 | this.text = error.response.data.message; | 778 | this.text = error.response.data.message; |
| 779 | if (error.response.status === 401) { | 779 | if (error.response.status === 401) { |
| 780 | this.$router.replace({ path: "/" }); | 780 | this.$router.replace({ path: "/" }); |
| 781 | this.$store.dispatch("setToken", null); | 781 | this.$store.dispatch("setToken", null); |
| 782 | this.$store.dispatch("Id", null); | 782 | this.$store.dispatch("Id", null); |
| 783 | } | 783 | } |
| 784 | }); | 784 | }); |
| 785 | }, | 785 | }, |
| 786 | editItem(item) { | 786 | editItem(item) { |
| 787 | // console.log("item", item); | 787 | // console.log("item", item); |
| 788 | this.editedIndex = this.ScheduleData.indexOf(item); | 788 | this.editedIndex = this.ScheduleData.indexOf(item); |
| 789 | this.editedItem = Object.assign({}, item); | 789 | this.editedItem = Object.assign({}, item); |
| 790 | this.editedItem.classId = this.editedItem.classId._id; | 790 | this.editedItem.classId = this.editedItem.classId._id; |
| 791 | this.editedItem.sectionId = this.editedItem.sectionId._id; | 791 | this.editedItem.sectionId = this.editedItem.sectionId._id; |
| 792 | this.editedItem.date = | 792 | this.editedItem.date = |
| 793 | this.editedItem.date != undefined | 793 | this.editedItem.date != undefined |
| 794 | ? (this.editedItem.date = this.editedItem.date.substring(0, 10)) | 794 | ? (this.editedItem.date = this.editedItem.date.substring(0, 10)) |
| 795 | : (this.editedItem.date = ""); | 795 | : (this.editedItem.date = ""); |
| 796 | this.editExamScheduleDialog = true; | 796 | this.editExamScheduleDialog = true; |
| 797 | }, | 797 | }, |
| 798 | profile(item) { | 798 | profile(item) { |
| 799 | this.editedIndex = this.ScheduleData.indexOf(item); | 799 | this.editedIndex = this.ScheduleData.indexOf(item); |
| 800 | this.editedItem = Object.assign({}, item); | 800 | this.editedItem = Object.assign({}, item); |
| 801 | this.editedItem.classId = this.editedItem.classId.classNum; | 801 | this.editedItem.classId = this.editedItem.classId.classNum; |
| 802 | this.editedItem.sectionId = this.editedItem.sectionId.name; | 802 | this.editedItem.sectionId = this.editedItem.sectionId.name; |
| 803 | this.profileExamScheduleDialog = true; | 803 | this.profileExamScheduleDialog = true; |
| 804 | }, | 804 | }, |
| 805 | deleteSchedule(item) { | 805 | deleteSchedule(item) { |
| 806 | let deleteSchedule = { | 806 | let deleteSchedule = { |
| 807 | scheduleId: item._id | 807 | scheduleId: item._id |
| 808 | }; | 808 | }; |
| 809 | http() | 809 | http() |
| 810 | .delete( | 810 | .delete( |
| 811 | "/deleteSchedule", | 811 | "/deleteSchedule", |
| 812 | confirm("Are you sure you want to Delete this?") && { | 812 | confirm("Are you sure you want to Delete this?") && { |
| 813 | params: deleteSchedule | 813 | params: deleteSchedule |
| 814 | } | 814 | } |
| 815 | ) | 815 | ) |
| 816 | .then(response => { | 816 | .then(response => { |
| 817 | this.snackbar = true; | 817 | this.snackbar = true; |
| 818 | this.text = response.data.message; | 818 | this.text = response.data.message; |
| 819 | this.color = "green"; | 819 | this.color = "green"; |
| 820 | this.getSchedulesList(); | 820 | this.getSchedulesList(); |
| 821 | }) | 821 | }) |
| 822 | .catch(error => { | 822 | .catch(error => { |
| 823 | this.snackbar = true; | 823 | this.snackbar = true; |
| 824 | this.color = "error"; | 824 | this.color = "error"; |
| 825 | this.text = error.response.data.message; | 825 | this.text = error.response.data.message; |
| 826 | }); | 826 | }); |
| 827 | }, | 827 | }, |
| 828 | close() { | 828 | close() { |
| 829 | this.dialog = false; | 829 | this.dialog = false; |
| 830 | }, | 830 | }, |
| 831 | submit() { | 831 | submit() { |
| 832 | if (this.$refs.form.validate()) { | 832 | if (this.$refs.form.validate()) { |
| 833 | this.loading = true; | 833 | this.loading = true; |
| 834 | http() | 834 | http() |
| 835 | .post("/createSchedule", this.addSchedule) | 835 | .post("/createSchedule", this.addSchedule) |
| 836 | .then(response => { | 836 | .then(response => { |
| 837 | this.snackbar = true; | 837 | this.snackbar = true; |
| 838 | this.text = response.data.message; | 838 | this.text = response.data.message; |
| 839 | this.addExamScheduleDialog = false; | 839 | this.addExamScheduleDialog = false; |
| 840 | this.color = "green"; | 840 | this.color = "green"; |
| 841 | this.loading = false; | 841 | this.loading = false; |
| 842 | this.clear(); | 842 | this.clear(); |
| 843 | }) | 843 | }) |
| 844 | .catch(error => { | 844 | .catch(error => { |
| 845 | this.snackbar = true; | 845 | this.snackbar = true; |
| 846 | this.text = error.response.data.message; | 846 | this.text = error.response.data.message; |
| 847 | this.color = "red"; | 847 | this.color = "red"; |
| 848 | this.loading = false; | 848 | this.loading = false; |
| 849 | }); | 849 | }); |
| 850 | } | 850 | } |
| 851 | }, | 851 | }, |
| 852 | clear() { | 852 | clear() { |
| 853 | this.$refs.form.reset(); | 853 | this.$refs.form.reset(); |
| 854 | this.disable = false; | 854 | this.disable = false; |
| 855 | this.loading = false; | 855 | this.loading = false; |
| 856 | }, | 856 | }, |
| 857 | save() { | 857 | save() { |
| 858 | this.editedItem.scheduleId = this.editedItem._id; | 858 | this.editedItem.scheduleId = this.editedItem._id; |
| 859 | http() | 859 | http() |
| 860 | .put("/updateSchedule", this.editedItem) | 860 | .put("/updateSchedule", this.editedItem) |
| 861 | .then(response => { | 861 | .then(response => { |
| 862 | this.snackbar = true; | 862 | this.snackbar = true; |
| 863 | this.text = "Successfully Edit Exam Schedule"; | 863 | this.text = "Successfully Edit Exam Schedule"; |
| 864 | this.color = "green"; | 864 | this.color = "green"; |
| 865 | this.getSchedulesList(); | 865 | this.getSchedulesList(); |
| 866 | this.close(); | 866 | this.close(); |
| 867 | }) | 867 | }) |
| 868 | .catch(error => { | 868 | .catch(error => { |
| 869 | this.snackbar = true; | 869 | this.snackbar = true; |
| 870 | this.text = error.response.data.message; | 870 | this.text = error.response.data.message; |
| 871 | this.color = "red"; | 871 | this.color = "red"; |
| 872 | }); | 872 | }); |
| 873 | }, | 873 | }, |
| 874 | getClass() { | 874 | getClass() { |
| 875 | http() | 875 | http() |
| 876 | .get("/getClassesList", { | 876 | .get("/getClassesList", { |
| 877 | headers: { Authorization: "Bearer " + this.token } | 877 | headers: { Authorization: "Bearer " + this.token } |
| 878 | }) | 878 | }) |
| 879 | .then(response => { | 879 | .then(response => { |
| 880 | this.classList = response.data.data; | 880 | this.classList = response.data.data; |
| 881 | }) | 881 | }) |
| 882 | .catch(err => { | 882 | .catch(err => { |
| 883 | // console.log("err====>", err); | 883 | // console.log("err====>", err); |
| 884 | }); | 884 | }); |
| 885 | }, | 885 | }, |
| 886 | getSections(_id) { | 886 | getSections(_id) { |
| 887 | for (let i = 0; i < this.classList.length; i++) { | 887 | for (let i = 0; i < this.classList.length; i++) { |
| 888 | if (_id == this.classList[i]._id) { | 888 | if (_id == this.classList[i]._id) { |
| 889 | this.subjects = this.classList[i].subjects; | 889 | this.subjects = this.classList[i].subjects; |
| 890 | } | 890 | } |
| 891 | } | 891 | } |
| 892 | http() | 892 | http() |
| 893 | .get( | 893 | .get( |
| 894 | "/getSectionsList", | 894 | "/getSectionsList", |
| 895 | { params: { classId: _id } }, | 895 | { params: { classId: _id } }, |
| 896 | { | 896 | { |
| 897 | headers: { Authorization: "Bearer " + this.token } | 897 | headers: { Authorization: "Bearer " + this.token } |
| 898 | } | 898 | } |
| 899 | ) | 899 | ) |
| 900 | .then(response => { | 900 | .then(response => { |
| 901 | this.addSection = response.data.data; | 901 | this.addSection = response.data.data; |
| 902 | }) | 902 | }) |
| 903 | .catch(err => { | 903 | .catch(err => { |
| 904 | }); | 904 | }); |
| 905 | }, | 905 | }, |
| 906 | getExamList() { | 906 | getExamList() { |
| 907 | this.showLoader = true; | 907 | this.showLoader = true; |
| 908 | this.loadingSearch = true; | 908 | this.loadingSearch = true; |
| 909 | http() | 909 | http() |
| 910 | .get("/getExamsList", { | 910 | .get("/getExamsList", { |
| 911 | headers: { Authorization: "Bearer " + this.token } | 911 | headers: { Authorization: "Bearer " + this.token } |
| 912 | }) | 912 | }) |
| 913 | .then(response => { | 913 | .then(response => { |
| 914 | this.examList = response.data.data; | 914 | this.examList = response.data.data; |
| 915 | this.showLoader = false; | 915 | this.showLoader = false; |
| 916 | this.loadingSearch = false; | 916 | this.loadingSearch = false; |
| 917 | }) | 917 | }) |
| 918 | .catch(error => { | 918 | .catch(error => { |
| 919 | this.showLoader = false; | 919 | this.showLoader = false; |
| 920 | this.loadingSearch = false; | 920 | this.loadingSearch = false; |
| 921 | this.snackbar = true; | 921 | this.snackbar = true; |
| 922 | this.text = error.response.data.message; | 922 | this.text = error.response.data.message; |
| 923 | if (error.response.status === 401) { | 923 | if (error.response.status === 401) { |
| 924 | this.$router.replace({ path: "/" }); | 924 | this.$router.replace({ path: "/" }); |
| 925 | this.$store.dispatch("setToken", null); | 925 | this.$store.dispatch("setToken", null); |
| 926 | this.$store.dispatch("Id", null); | 926 | this.$store.dispatch("Id", null); |
| 927 | } | 927 | } |
| 928 | }); | 928 | }); |
| 929 | }, | 929 | }, |
| 930 | displaySearch() { | 930 | displaySearch() { |
| 931 | (this.show = false), (this.showSearch = true); | 931 | (this.show = false), (this.showSearch = true); |
| 932 | }, | 932 | }, |
| 933 | closeSearch() { | 933 | closeSearch() { |
| 934 | this.showSearch = false; | 934 | this.showSearch = false; |
| 935 | this.show = true; | 935 | this.show = true; |
| 936 | this.search = ""; | 936 | this.search = ""; |
| 937 | } | 937 | } |
| 938 | }, | 938 | }, |
| 939 | mounted() { | 939 | mounted() { |
| 940 | this.token = this.$store.state.token; | 940 | this.token = this.$store.state.token; |
| 941 | this.getClass(); | 941 | this.getClass(); |
| 942 | this.getExamList(); | 942 | this.getExamList(); |
| 943 | } | 943 | } |
| 944 | }; | 944 | }; |
| 945 | </script> | 945 | </script> |
src/pages/Exam/grade.vue
| 1 | <template> | 1 | <template> |
| 2 | <v-container fluid class="body-color"> | 2 | <v-container fluid class="body-color"> |
| 3 | <!-- ****** EDIT GRADE ****** --> | 3 | <!-- ****** EDIT GRADE ****** --> |
| 4 | <v-dialog v-model="editGradeDialog" max-width="500px"> | 4 | <v-dialog v-model="editGradeDialog" max-width="500px"> |
| 5 | <v-card flat class="card-style pa-2" dark> | 5 | <v-card flat class="card-style pa-2" dark> |
| 6 | <v-layout> | 6 | <v-layout> |
| 7 | <v-flex xs12> | 7 | <v-flex xs12> |
| 8 | <label class="title text-xs-center">Edit Grade</label> | 8 | <label class="title text-xs-center">Edit Grade</label> |
| 9 | <v-icon size="24" class="right" @click="editGradeDialog = false">cancel</v-icon> | 9 | <v-icon size="24" class="right" @click="editGradeDialog = false">cancel</v-icon> |
| 10 | </v-flex> | 10 | </v-flex> |
| 11 | </v-layout> | 11 | </v-layout> |
| 12 | <v-form ref="formEditGrade" v-model="validEditGrade" lazy-validation> | 12 | <v-form ref="formEditGrade" v-model="validEditGrade" lazy-validation> |
| 13 | <v-container fluid> | 13 | <v-container fluid> |
| 14 | <v-layout wrap> | 14 | <v-layout wrap> |
| 15 | <v-flex xs12 sm12> | 15 | <v-flex xs12 sm12> |
| 16 | <v-layout> | 16 | <v-layout> |
| 17 | <v-flex xs4 class="pt-4 subheading"> | 17 | <v-flex xs4 class="pt-4 subheading"> |
| 18 | <label class="right">Grade Name:</label> | 18 | <label class="right">Grade Name:</label> |
| 19 | </v-flex> | 19 | </v-flex> |
| 20 | <v-flex xs7 class="ml-3"> | 20 | <v-flex xs7 class="ml-3"> |
| 21 | <v-text-field | 21 | <v-text-field |
| 22 | placeholder="fill your Grade Name" | 22 | placeholder="fill your Grade Name" |
| 23 | v-model="editedItem.gradeName" | 23 | v-model="editedItem.gradeName" |
| 24 | type="text" | 24 | type="text" |
| 25 | :rules="editGradeName" | 25 | :rules="editGradeName" |
| 26 | ></v-text-field> | 26 | ></v-text-field> |
| 27 | </v-flex> | 27 | </v-flex> |
| 28 | </v-layout> | 28 | </v-layout> |
| 29 | </v-flex> | 29 | </v-flex> |
| 30 | <v-flex xs12 sm12> | 30 | <v-flex xs12 sm12> |
| 31 | <v-layout> | 31 | <v-layout> |
| 32 | <v-flex xs4 class="pt-4 subheading"> | 32 | <v-flex xs4 class="pt-4 subheading"> |
| 33 | <label class="right">Grade Point:</label> | 33 | <label class="right">Grade Point:</label> |
| 34 | </v-flex> | 34 | </v-flex> |
| 35 | <v-flex xs7 class="ml-3"> | 35 | <v-flex xs7 class="ml-3"> |
| 36 | <v-text-field | 36 | <v-text-field |
| 37 | placeholder="fill your Grade Point" | 37 | placeholder="fill your Grade Point" |
| 38 | v-model="editedItem.gradePoint" | 38 | v-model="editedItem.gradePoint" |
| 39 | :rules="editGradePoint" | 39 | :rules="editGradePoint" |
| 40 | type="text" | 40 | type="text" |
| 41 | ></v-text-field> | 41 | ></v-text-field> |
| 42 | </v-flex> | 42 | </v-flex> |
| 43 | </v-layout> | 43 | </v-layout> |
| 44 | </v-flex> | 44 | </v-flex> |
| 45 | <v-flex xs12 sm12> | 45 | <v-flex xs12 sm12> |
| 46 | <v-layout> | 46 | <v-layout> |
| 47 | <v-flex xs4 class="pt-4 subheading"> | 47 | <v-flex xs4 class="pt-4 subheading"> |
| 48 | <label class="right">Mark From:</label> | 48 | <label class="right">Mark From:</label> |
| 49 | </v-flex> | 49 | </v-flex> |
| 50 | <v-flex xs7 class="ml-3"> | 50 | <v-flex xs7 class="ml-3"> |
| 51 | <v-text-field | 51 | <v-text-field |
| 52 | placeholder="fill your Mark From" | 52 | placeholder="fill your Mark From" |
| 53 | v-model="editedItem.marksFrom" | 53 | v-model="editedItem.marksFrom" |
| 54 | :rules="editMarksFrom" | 54 | :rules="editMarksFrom" |
| 55 | type="text" | 55 | type="text" |
| 56 | ></v-text-field> | 56 | ></v-text-field> |
| 57 | </v-flex> | 57 | </v-flex> |
| 58 | </v-layout> | 58 | </v-layout> |
| 59 | </v-flex> | 59 | </v-flex> |
| 60 | <v-flex xs12 sm12> | 60 | <v-flex xs12 sm12> |
| 61 | <v-layout> | 61 | <v-layout> |
| 62 | <v-flex xs4 class="pt-4 subheading"> | 62 | <v-flex xs4 class="pt-4 subheading"> |
| 63 | <label class="right">Mark Upto:</label> | 63 | <label class="right">Mark Upto:</label> |
| 64 | </v-flex> | 64 | </v-flex> |
| 65 | <v-flex xs7 class="ml-3"> | 65 | <v-flex xs7 class="ml-3"> |
| 66 | <v-text-field | 66 | <v-text-field |
| 67 | placeholder="fill your Mark From" | 67 | placeholder="fill your Mark From" |
| 68 | v-model="editedItem.marksUpTo" | 68 | v-model="editedItem.marksUpTo" |
| 69 | :rules="editMarksUpTo" | 69 | :rules="editMarksUpTo" |
| 70 | type="text" | 70 | type="text" |
| 71 | ></v-text-field> | 71 | ></v-text-field> |
| 72 | </v-flex> | 72 | </v-flex> |
| 73 | </v-layout> | 73 | </v-layout> |
| 74 | </v-flex> | 74 | </v-flex> |
| 75 | <v-flex xs12 sm12> | 75 | <v-flex xs12 sm12> |
| 76 | <v-layout> | 76 | <v-layout> |
| 77 | <v-flex xs4 class="pt-4 subheading"> | 77 | <v-flex xs4 class="pt-4 subheading"> |
| 78 | <label class="right">Note:</label> | 78 | <label class="right">Note:</label> |
| 79 | </v-flex> | 79 | </v-flex> |
| 80 | <v-flex xs7 class="ml-3"> | 80 | <v-flex xs7 class="ml-3"> |
| 81 | <v-text-field | 81 | <v-text-field |
| 82 | placeholder="fill your Serial Number" | 82 | placeholder="fill your Serial Number" |
| 83 | v-model="editedItem.note" | 83 | v-model="editedItem.note" |
| 84 | type="text" | 84 | type="text" |
| 85 | ></v-text-field> | 85 | ></v-text-field> |
| 86 | </v-flex> | 86 | </v-flex> |
| 87 | </v-layout> | 87 | </v-layout> |
| 88 | </v-flex> | 88 | </v-flex> |
| 89 | </v-layout> | 89 | </v-layout> |
| 90 | <v-layout> | 90 | <v-layout> |
| 91 | <v-flex xs12> | 91 | <v-flex xs12> |
| 92 | <v-card-actions> | 92 | <v-card-actions> |
| 93 | <v-spacer></v-spacer> | 93 | <v-spacer></v-spacer> |
| 94 | <v-btn round dark @click="save" class="add-button">Save</v-btn> | 94 | <v-btn round dark @click="save" class="add-button">Save</v-btn> |
| 95 | </v-card-actions> | 95 | </v-card-actions> |
| 96 | </v-flex> | 96 | </v-flex> |
| 97 | </v-layout> | 97 | </v-layout> |
| 98 | </v-container> | 98 | </v-container> |
| 99 | </v-form> | 99 | </v-form> |
| 100 | </v-card> | 100 | </v-card> |
| 101 | </v-dialog> | 101 | </v-dialog> |
| 102 | 102 | ||
| 103 | <!-- ****** PROFILE VIEW PARTICULAR GRDAE DATA ****** --> | 103 | <!-- ****** PROFILE VIEW PARTICULAR GRDAE DATA ****** --> |
| 104 | 104 | ||
| 105 | <v-dialog v-model="viewGradeDialog" max-width="500px"> | 105 | <v-dialog v-model="viewGradeDialog" max-width="500px"> |
| 106 | <v-card flat class="card-style pa-3" dark> | 106 | <v-card flat class="card-style pa-3" dark> |
| 107 | <v-layout> | 107 | <v-layout> |
| 108 | <v-flex xs12> | 108 | <v-flex xs12> |
| 109 | <label class="title text-xs-center">View Class</label> | 109 | <label class="title text-xs-center">View Class</label> |
| 110 | <v-icon size="24" class="right" @click="viewGradeDialog = false">cancel</v-icon> | 110 | <v-icon size="24" class="right" @click="viewGradeDialog = false">cancel</v-icon> |
| 111 | </v-flex> | 111 | </v-flex> |
| 112 | </v-layout> | 112 | </v-layout> |
| 113 | <v-card-text> | 113 | <v-card-text> |
| 114 | <v-container grid-list-md> | 114 | <v-container grid-list-md> |
| 115 | <v-layout wrap> | 115 | <v-layout wrap> |
| 116 | <v-flex> | 116 | <v-flex> |
| 117 | <v-layout> | 117 | <v-layout> |
| 118 | <v-flex xs5 sm6> | 118 | <v-flex xs5 sm6> |
| 119 | <h5 class="right my-1"> | 119 | <h5 class="right my-1"> |
| 120 | <b>Grade Name:</b> | 120 | <b>Grade Name:</b> |
| 121 | </h5> | 121 | </h5> |
| 122 | </v-flex> | 122 | </v-flex> |
| 123 | <v-flex sm6 xs8> | 123 | <v-flex sm6 xs8> |
| 124 | <h5 class="my-1">{{ editedItem.gradeName }}</h5> | 124 | <h5 class="my-1">{{ editedItem.gradeName }}</h5> |
| 125 | </v-flex> | 125 | </v-flex> |
| 126 | </v-layout> | 126 | </v-layout> |
| 127 | <v-layout> | 127 | <v-layout> |
| 128 | <v-flex xs5 sm6> | 128 | <v-flex xs5 sm6> |
| 129 | <h5 class="right my-1"> | 129 | <h5 class="right my-1"> |
| 130 | <b>Grade Point:</b> | 130 | <b>Grade Point:</b> |
| 131 | </h5> | 131 | </h5> |
| 132 | </v-flex> | 132 | </v-flex> |
| 133 | <v-flex sm6 xs8> | 133 | <v-flex sm6 xs8> |
| 134 | <h5 class="my-1">{{ editedItem.gradePoint }}</h5> | 134 | <h5 class="my-1">{{ editedItem.gradePoint }}</h5> |
| 135 | </v-flex> | 135 | </v-flex> |
| 136 | </v-layout> | 136 | </v-layout> |
| 137 | <v-layout> | 137 | <v-layout> |
| 138 | <v-flex xs5 sm6> | 138 | <v-flex xs5 sm6> |
| 139 | <h5 class="right my-1"> | 139 | <h5 class="right my-1"> |
| 140 | <b>Mark From:</b> | 140 | <b>Mark From:</b> |
| 141 | </h5> | 141 | </h5> |
| 142 | </v-flex> | 142 | </v-flex> |
| 143 | <v-flex sm6 xs8> | 143 | <v-flex sm6 xs8> |
| 144 | <h5 class="my-1">{{ editedItem.marksFrom }}</h5> | 144 | <h5 class="my-1">{{ editedItem.marksFrom }}</h5> |
| 145 | </v-flex> | 145 | </v-flex> |
| 146 | </v-layout> | 146 | </v-layout> |
| 147 | <v-layout> | 147 | <v-layout> |
| 148 | <v-flex xs5 sm6> | 148 | <v-flex xs5 sm6> |
| 149 | <h5 class="right my-1"> | 149 | <h5 class="right my-1"> |
| 150 | <b>Mark Upto:</b> | 150 | <b>Mark Upto:</b> |
| 151 | </h5> | 151 | </h5> |
| 152 | </v-flex> | 152 | </v-flex> |
| 153 | <v-flex sm6 xs8> | 153 | <v-flex sm6 xs8> |
| 154 | <h5 class="my-1">{{ editedItem.marksUpTo }}</h5> | 154 | <h5 class="my-1">{{ editedItem.marksUpTo }}</h5> |
| 155 | </v-flex> | 155 | </v-flex> |
| 156 | </v-layout> | 156 | </v-layout> |
| 157 | <v-layout> | 157 | <v-layout> |
| 158 | <v-flex xs5 sm6> | 158 | <v-flex xs5 sm6> |
| 159 | <h5 class="right my-1"> | 159 | <h5 class="right my-1"> |
| 160 | <b>Note:</b> | 160 | <b>Note:</b> |
| 161 | </h5> | 161 | </h5> |
| 162 | </v-flex> | 162 | </v-flex> |
| 163 | <v-flex sm6 xs8> | 163 | <v-flex sm6 xs8> |
| 164 | <h5 class="my-1">{{ editedItem.note }}</h5> | 164 | <h5 class="my-1">{{ editedItem.note }}</h5> |
| 165 | </v-flex> | 165 | </v-flex> |
| 166 | </v-layout> | 166 | </v-layout> |
| 167 | </v-flex> | 167 | </v-flex> |
| 168 | </v-layout> | 168 | </v-layout> |
| 169 | </v-container> | 169 | </v-container> |
| 170 | </v-card-text> | 170 | </v-card-text> |
| 171 | </v-card> | 171 | </v-card> |
| 172 | </v-dialog> | 172 | </v-dialog> |
| 173 | <!-- ****** EXISTING GRADE TABLE****** --> | 173 | <!-- ****** EXISTING GRADE TABLE****** --> |
| 174 | 174 | ||
| 175 | <v-toolbar color="transparent" flat> | 175 | <v-toolbar color="transparent" flat> |
| 176 | <v-btn | 176 | <v-btn |
| 177 | fab | 177 | fab |
| 178 | dark | 178 | dark |
| 179 | class="open-dialog-button hidden-xl-only hidden-md-only hidden-lg-only" | 179 | class="open-dialog-button hidden-xl-only hidden-md-only hidden-lg-only" |
| 180 | small | 180 | small |
| 181 | @click="addGradeDialog = true" | 181 | @click="addGradeDialog = true" |
| 182 | > | 182 | > |
| 183 | <v-icon dark>add</v-icon> | 183 | <v-icon dark>add</v-icon> |
| 184 | </v-btn> | 184 | </v-btn> |
| 185 | <v-btn | 185 | <v-btn |
| 186 | round | 186 | round |
| 187 | class="open-dialog-button hidden-sm-only hidden-xs-only" | 187 | class="open-dialog-button hidden-sm-only hidden-xs-only" |
| 188 | dark | 188 | dark |
| 189 | @click="addGradeDialog = true" | 189 | @click="addGradeDialog = true" |
| 190 | > | 190 | > |
| 191 | <v-icon class="white--text pr-1" size="20">add</v-icon>Add Grade | 191 | <v-icon class="white--text pr-1" size="20">add</v-icon>Add Grade |
| 192 | </v-btn> | 192 | </v-btn> |
| 193 | <v-spacer></v-spacer> | 193 | <v-spacer></v-spacer> |
| 194 | <v-card-title class="body-1" v-show="show"> | 194 | <v-card-title class="body-1" v-show="show"> |
| 195 | <v-btn icon large flat @click="displaySearch"> | 195 | <v-btn icon large flat @click="displaySearch"> |
| 196 | <v-avatar size="27"> | 196 | <v-avatar size="27"> |
| 197 | <img src="/static/icon/dashboard icons-49.png" alt="icon" /> | 197 | <img src="/static/icon/search.png" alt="icon" /> |
| 198 | </v-avatar> | 198 | </v-avatar> |
| 199 | </v-btn> | 199 | </v-btn> |
| 200 | </v-card-title> | 200 | </v-card-title> |
| 201 | <v-flex xs8 sm8 md3 lg2 v-show="showSearch"> | 201 | <v-flex xs8 sm8 md3 lg2 v-show="showSearch"> |
| 202 | <v-layout> | 202 | <v-layout> |
| 203 | <v-text-field v-model="search" label="Search" prepend-inner-icon="search" color="primary"></v-text-field> | 203 | <v-text-field v-model="search" label="Search" prepend-inner-icon="search" color="primary"></v-text-field> |
| 204 | <v-icon @click="closeSearch" color="error">close</v-icon> | 204 | <v-icon @click="closeSearch" color="error">close</v-icon> |
| 205 | </v-layout> | 205 | </v-layout> |
| 206 | </v-flex> | 206 | </v-flex> |
| 207 | </v-toolbar> | 207 | </v-toolbar> |
| 208 | <v-data-table | 208 | <v-data-table |
| 209 | :headers="headers" | 209 | :headers="headers" |
| 210 | :items="gradeData" | 210 | :items="gradeData" |
| 211 | :pagination.sync="pagination" | 211 | :pagination.sync="pagination" |
| 212 | :search="search" | 212 | :search="search" |
| 213 | > | 213 | > |
| 214 | <template slot="items" slot-scope="props"> | 214 | <template slot="items" slot-scope="props"> |
| 215 | <tr class="tr"> | 215 | <tr class="tr"> |
| 216 | <td class="td td-row">{{ props.index + 1}}</td> | 216 | <td class="td td-row">{{ props.index + 1}}</td> |
| 217 | <td class="td td-row text-xs-center">{{ props.item.gradeName}}</td> | 217 | <td class="td td-row text-xs-center">{{ props.item.gradeName}}</td> |
| 218 | <td class="td td-row text-xs-center">{{ props.item.gradePoint }}</td> | 218 | <td class="td td-row text-xs-center">{{ props.item.gradePoint }}</td> |
| 219 | <td class="td td-row text-xs-center">{{ props.item.marksFrom }}</td> | 219 | <td class="td td-row text-xs-center">{{ props.item.marksFrom }}</td> |
| 220 | <td class="td td-row text-xs-center">{{ props.item.marksUpTo }}</td> | 220 | <td class="td td-row text-xs-center">{{ props.item.marksUpTo }}</td> |
| 221 | <td class="td td-row text-xs-center">{{ props.item.note }}</td> | 221 | <td class="td td-row text-xs-center">{{ props.item.note }}</td> |
| 222 | <td class="td td-row text-xs-center"> | 222 | <td class="td td-row text-xs-center"> |
| 223 | <span> | 223 | <span> |
| 224 | <v-tooltip top> | 224 | <v-tooltip top> |
| 225 | <img | 225 | <img |
| 226 | slot="activator" | 226 | slot="activator" |
| 227 | style="cursor:pointer; width:25px; height:25px; " | 227 | style="cursor:pointer; width:25px; height:25px; " |
| 228 | class="mr-3" | 228 | class="mr-3" |
| 229 | @click="profile(props.item)" | 229 | @click="profile(props.item)" |
| 230 | src="/static/icon/dashboard icons-47.png" | 230 | src="/static/icon/view.png" |
| 231 | /> | 231 | /> |
| 232 | <span>View</span> | 232 | <span>View</span> |
| 233 | </v-tooltip> | 233 | </v-tooltip> |
| 234 | <v-tooltip top> | 234 | <v-tooltip top> |
| 235 | <img | 235 | <img |
| 236 | slot="activator" | 236 | slot="activator" |
| 237 | style="cursor:pointer; width:20px; height:18px; " | 237 | style="cursor:pointer; width:20px; height:18px; " |
| 238 | class="mr-3" | 238 | class="mr-3" |
| 239 | @click="editItem(props.item)" | 239 | @click="editItem(props.item)" |
| 240 | src="/static/icon/dashboard icons-50.png" | 240 | src="/static/icon/edit.png" |
| 241 | /> | 241 | /> |
| 242 | <span>Edit</span> | 242 | <span>Edit</span> |
| 243 | </v-tooltip> | 243 | </v-tooltip> |
| 244 | <v-tooltip top> | 244 | <v-tooltip top> |
| 245 | <img | 245 | <img |
| 246 | slot="activator" | 246 | slot="activator" |
| 247 | style="cursor:pointer; width:20px; height:20px; " | 247 | style="cursor:pointer; width:20px; height:20px; " |
| 248 | @click="deleteGrade(props.item)" | 248 | @click="deleteGrade(props.item)" |
| 249 | class="mr-3" | 249 | class="mr-3" |
| 250 | src="/static/icon/dashboard icons-51.png" | 250 | src="/static/icon/delete.png" |
| 251 | /> | 251 | /> |
| 252 | <span>Delete</span> | 252 | <span>Delete</span> |
| 253 | </v-tooltip> | 253 | </v-tooltip> |
| 254 | </span> | 254 | </span> |
| 255 | </td> | 255 | </td> |
| 256 | </tr> | 256 | </tr> |
| 257 | </template> | 257 | </template> |
| 258 | <v-alert | 258 | <v-alert |
| 259 | slot="no-results" | 259 | slot="no-results" |
| 260 | :value="true" | 260 | :value="true" |
| 261 | color="error" | 261 | color="error" |
| 262 | icon="warning" | 262 | icon="warning" |
| 263 | >Your search for "{{ search }}" found no results.</v-alert> | 263 | >Your search for "{{ search }}" found no results.</v-alert> |
| 264 | </v-data-table> | 264 | </v-data-table> |
| 265 | <!-- ****** ADD GRADE ****** --> | 265 | <!-- ****** ADD GRADE ****** --> |
| 266 | <v-dialog v-model="addGradeDialog" max-width="500px"> | 266 | <v-dialog v-model="addGradeDialog" max-width="500px"> |
| 267 | <v-card flat class="card-style pa-2" dark> | 267 | <v-card flat class="card-style pa-2" dark> |
| 268 | <v-layout> | 268 | <v-layout> |
| 269 | <v-flex xs12> | 269 | <v-flex xs12> |
| 270 | <label class="title text-xs-center">Add Grade</label> | 270 | <label class="title text-xs-center">Add Grade</label> |
| 271 | <v-icon size="24" class="right" @click="addGradeDialog = false">cancel</v-icon> | 271 | <v-icon size="24" class="right" @click="addGradeDialog = false">cancel</v-icon> |
| 272 | </v-flex> | 272 | </v-flex> |
| 273 | </v-layout> | 273 | </v-layout> |
| 274 | <v-form ref="form" v-model="valid" lazy-validation> | 274 | <v-form ref="form" v-model="valid" lazy-validation> |
| 275 | <v-container fluid> | 275 | <v-container fluid> |
| 276 | <v-flex xs12> | 276 | <v-flex xs12> |
| 277 | <v-layout> | 277 | <v-layout> |
| 278 | <v-flex xs5 sm4 class="pt-4 subheading"> | 278 | <v-flex xs5 sm4 class="pt-4 subheading"> |
| 279 | <label class="right">Grade Name:</label> | 279 | <label class="right">Grade Name:</label> |
| 280 | </v-flex> | 280 | </v-flex> |
| 281 | <v-flex xs7 class="ml-3"> | 281 | <v-flex xs7 class="ml-3"> |
| 282 | <v-text-field | 282 | <v-text-field |
| 283 | placeholder="fill your Grade Name" | 283 | placeholder="fill your Grade Name" |
| 284 | :rules="gradeNameRules" | 284 | :rules="gradeNameRules" |
| 285 | v-model="addGrade.gradeName" | 285 | v-model="addGrade.gradeName" |
| 286 | ></v-text-field> | 286 | ></v-text-field> |
| 287 | </v-flex> | 287 | </v-flex> |
| 288 | </v-layout> | 288 | </v-layout> |
| 289 | </v-flex> | 289 | </v-flex> |
| 290 | <v-flex xs12> | 290 | <v-flex xs12> |
| 291 | <v-layout> | 291 | <v-layout> |
| 292 | <v-flex xs5 sm4 class="pt-4 subheading"> | 292 | <v-flex xs5 sm4 class="pt-4 subheading"> |
| 293 | <label class="right">Grade Point:</label> | 293 | <label class="right">Grade Point:</label> |
| 294 | </v-flex> | 294 | </v-flex> |
| 295 | <v-flex xs7 class="ml-3"> | 295 | <v-flex xs7 class="ml-3"> |
| 296 | <v-text-field | 296 | <v-text-field |
| 297 | placeholder="fill your Grade Point" | 297 | placeholder="fill your Grade Point" |
| 298 | v-model="addGrade.gradePoint" | 298 | v-model="addGrade.gradePoint" |
| 299 | :rules="gradePointRules" | 299 | :rules="gradePointRules" |
| 300 | ></v-text-field> | 300 | ></v-text-field> |
| 301 | </v-flex> | 301 | </v-flex> |
| 302 | </v-layout> | 302 | </v-layout> |
| 303 | </v-flex> | 303 | </v-flex> |
| 304 | <v-flex xs12> | 304 | <v-flex xs12> |
| 305 | <v-layout> | 305 | <v-layout> |
| 306 | <v-flex xs5 sm4 class="pt-4 subheading"> | 306 | <v-flex xs5 sm4 class="pt-4 subheading"> |
| 307 | <label class="right">Mark From:</label> | 307 | <label class="right">Mark From:</label> |
| 308 | </v-flex> | 308 | </v-flex> |
| 309 | <v-flex xs7 class="ml-3"> | 309 | <v-flex xs7 class="ml-3"> |
| 310 | <v-text-field | 310 | <v-text-field |
| 311 | placeholder="fill your Mark From" | 311 | placeholder="fill your Mark From" |
| 312 | :rules="markFromRules" | 312 | :rules="markFromRules" |
| 313 | v-model="addGrade.marksFrom" | 313 | v-model="addGrade.marksFrom" |
| 314 | type="number" | 314 | type="number" |
| 315 | ></v-text-field> | 315 | ></v-text-field> |
| 316 | </v-flex> | 316 | </v-flex> |
| 317 | </v-layout> | 317 | </v-layout> |
| 318 | </v-flex> | 318 | </v-flex> |
| 319 | <v-flex xs12> | 319 | <v-flex xs12> |
| 320 | <v-layout> | 320 | <v-layout> |
| 321 | <v-flex xs5 sm4 class="pt-4 subheading"> | 321 | <v-flex xs5 sm4 class="pt-4 subheading"> |
| 322 | <label class="right">Mark Upto:</label> | 322 | <label class="right">Mark Upto:</label> |
| 323 | </v-flex> | 323 | </v-flex> |
| 324 | <v-flex xs7 class="ml-3"> | 324 | <v-flex xs7 class="ml-3"> |
| 325 | <v-text-field | 325 | <v-text-field |
| 326 | placeholder="fill your Mark Upto" | 326 | placeholder="fill your Mark Upto" |
| 327 | :rules="markUptoRules" | 327 | :rules="markUptoRules" |
| 328 | v-model="addGrade.marksUpTo" | 328 | v-model="addGrade.marksUpTo" |
| 329 | type="number" | 329 | type="number" |
| 330 | ></v-text-field> | 330 | ></v-text-field> |
| 331 | </v-flex> | 331 | </v-flex> |
| 332 | </v-layout> | 332 | </v-layout> |
| 333 | </v-flex> | 333 | </v-flex> |
| 334 | <v-flex xs12> | 334 | <v-flex xs12> |
| 335 | <v-layout> | 335 | <v-layout> |
| 336 | <v-flex xs5 sm4 class="pt-4 subheading"> | 336 | <v-flex xs5 sm4 class="pt-4 subheading"> |
| 337 | <label class="right">Note:</label> | 337 | <label class="right">Note:</label> |
| 338 | </v-flex> | 338 | </v-flex> |
| 339 | <v-flex xs7 class="ml-3"> | 339 | <v-flex xs7 class="ml-3"> |
| 340 | <v-text-field | 340 | <v-text-field |
| 341 | placeholder="fill your Note" | 341 | placeholder="fill your Note" |
| 342 | :rules="noteRules" | 342 | :rules="noteRules" |
| 343 | v-model="addGrade.note" | 343 | v-model="addGrade.note" |
| 344 | @keyup.enter="submit" | 344 | @keyup.enter="submit" |
| 345 | ></v-text-field> | 345 | ></v-text-field> |
| 346 | </v-flex> | 346 | </v-flex> |
| 347 | </v-layout> | 347 | </v-layout> |
| 348 | </v-flex> | 348 | </v-flex> |
| 349 | <v-layout> | 349 | <v-layout> |
| 350 | <v-flex xs12> | 350 | <v-flex xs12> |
| 351 | <v-card-actions> | 351 | <v-card-actions> |
| 352 | <v-spacer class="hidden-xs-only"></v-spacer> | 352 | <v-spacer class="hidden-xs-only"></v-spacer> |
| 353 | <v-btn @click="clear" round dark class="clear-button">Clear</v-btn> | 353 | <v-btn @click="clear" round dark class="clear-button">Clear</v-btn> |
| 354 | <v-btn @click="submit" round dark :loading="loading" class="add-button">Add</v-btn> | 354 | <v-btn @click="submit" round dark :loading="loading" class="add-button">Add</v-btn> |
| 355 | </v-card-actions> | 355 | </v-card-actions> |
| 356 | </v-flex> | 356 | </v-flex> |
| 357 | </v-layout> | 357 | </v-layout> |
| 358 | </v-container> | 358 | </v-container> |
| 359 | </v-form> | 359 | </v-form> |
| 360 | </v-card> | 360 | </v-card> |
| 361 | </v-dialog> | 361 | </v-dialog> |
| 362 | <v-snackbar | 362 | <v-snackbar |
| 363 | :timeout="timeout" | 363 | :timeout="timeout" |
| 364 | :top="y === 'top'" | 364 | :top="y === 'top'" |
| 365 | :right="x === 'right'" | 365 | :right="x === 'right'" |
| 366 | :vertical="mode === 'vertical'" | 366 | :vertical="mode === 'vertical'" |
| 367 | v-model="snackbar" | 367 | v-model="snackbar" |
| 368 | :color="color" | 368 | :color="color" |
| 369 | >{{ text }}</v-snackbar> | 369 | >{{ text }}</v-snackbar> |
| 370 | <div class="loader" v-if="showLoader"> | 370 | <div class="loader" v-if="showLoader"> |
| 371 | <v-progress-circular indeterminate color="white"></v-progress-circular> | 371 | <v-progress-circular indeterminate color="white"></v-progress-circular> |
| 372 | </div> | 372 | </div> |
| 373 | </v-container> | 373 | </v-container> |
| 374 | </template> | 374 | </template> |
| 375 | 375 | ||
| 376 | <script> | 376 | <script> |
| 377 | import http from "@/Services/http.js"; | 377 | import http from "@/Services/http.js"; |
| 378 | import moment from "moment"; | 378 | import moment from "moment"; |
| 379 | 379 | ||
| 380 | export default { | 380 | export default { |
| 381 | data: () => ({ | 381 | data: () => ({ |
| 382 | snackbar: false, | 382 | snackbar: false, |
| 383 | date: null, | 383 | date: null, |
| 384 | menu1: false, | 384 | menu1: false, |
| 385 | menu2: false, | 385 | menu2: false, |
| 386 | addGradeDialog: false, | 386 | addGradeDialog: false, |
| 387 | color: "", | 387 | color: "", |
| 388 | y: "top", | 388 | y: "top", |
| 389 | x: "right", | 389 | x: "right", |
| 390 | mode: "", | 390 | mode: "", |
| 391 | timeout: 10000, | 391 | timeout: 10000, |
| 392 | text: "", | 392 | text: "", |
| 393 | show: true, | 393 | show: true, |
| 394 | showSearch: false, | 394 | showSearch: false, |
| 395 | loading: false, | 395 | loading: false, |
| 396 | loadingSearch: false, | 396 | loadingSearch: false, |
| 397 | date: null, | 397 | date: null, |
| 398 | search: "", | 398 | search: "", |
| 399 | showLoader: false, | 399 | showLoader: false, |
| 400 | editGradeDialog: false, | 400 | editGradeDialog: false, |
| 401 | viewGradeDialog: false, | 401 | viewGradeDialog: false, |
| 402 | valid: true, | 402 | valid: true, |
| 403 | validEditGrade: true, | 403 | validEditGrade: true, |
| 404 | pagination: { | 404 | pagination: { |
| 405 | rowsPerPage: 10 | 405 | rowsPerPage: 10 |
| 406 | }, | 406 | }, |
| 407 | gradeNameRules: [v => !!v || "Grade Name is required"], | 407 | gradeNameRules: [v => !!v || "Grade Name is required"], |
| 408 | gradePointRules: [v => !!v || "Grade Point required"], | 408 | gradePointRules: [v => !!v || "Grade Point required"], |
| 409 | markFromRules: [v => !!v || "Mark From is required"], | 409 | markFromRules: [v => !!v || "Mark From is required"], |
| 410 | markUptoRules: [v => !!v || "Mark Upto is required"], | 410 | markUptoRules: [v => !!v || "Mark Upto is required"], |
| 411 | authorRules: [v => !!v || "Author is required"], | 411 | authorRules: [v => !!v || "Author is required"], |
| 412 | noteRules: [v => !!v || "Note is required"], | 412 | noteRules: [v => !!v || "Note is required"], |
| 413 | editGradeName: [v => !!v || "Grade Name is required"], | 413 | editGradeName: [v => !!v || "Grade Name is required"], |
| 414 | editGradeName: [v => !!v || "Grade Name is required"], | 414 | editGradeName: [v => !!v || "Grade Name is required"], |
| 415 | editGradePoint: [v => !!v || "Grade Point required"], | 415 | editGradePoint: [v => !!v || "Grade Point required"], |
| 416 | editMarksFrom: [v => !!v || "Mark From is required"], | 416 | editMarksFrom: [v => !!v || "Mark From is required"], |
| 417 | editMarksUpTo: [v => !!v || "Mark Upto is required"], | 417 | editMarksUpTo: [v => !!v || "Mark Upto is required"], |
| 418 | headers: [ | 418 | headers: [ |
| 419 | { | 419 | { |
| 420 | align: "", | 420 | align: "", |
| 421 | text: "No", | 421 | text: "No", |
| 422 | sortable: false, | 422 | sortable: false, |
| 423 | value: "No" | 423 | value: "No" |
| 424 | }, | 424 | }, |
| 425 | { | 425 | { |
| 426 | text: "Grade Name", | 426 | text: "Grade Name", |
| 427 | vaue: "gradeName", | 427 | vaue: "gradeName", |
| 428 | sortable: false, | 428 | sortable: false, |
| 429 | align: "center" | 429 | align: "center" |
| 430 | }, | 430 | }, |
| 431 | { | 431 | { |
| 432 | text: "Grade Point", | 432 | text: "Grade Point", |
| 433 | value: "gradePoint", | 433 | value: "gradePoint", |
| 434 | sortable: false, | 434 | sortable: false, |
| 435 | align: "center" | 435 | align: "center" |
| 436 | }, | 436 | }, |
| 437 | { | 437 | { |
| 438 | text: "Mark From", | 438 | text: "Mark From", |
| 439 | value: "marksFrom", | 439 | value: "marksFrom", |
| 440 | sortable: false, | 440 | sortable: false, |
| 441 | align: "center" | 441 | align: "center" |
| 442 | }, | 442 | }, |
| 443 | { | 443 | { |
| 444 | text: "Mark Upto", | 444 | text: "Mark Upto", |
| 445 | value: "marksUpTo", | 445 | value: "marksUpTo", |
| 446 | sortable: false, | 446 | sortable: false, |
| 447 | align: "center" | 447 | align: "center" |
| 448 | }, | 448 | }, |
| 449 | { | 449 | { |
| 450 | text: "Note", | 450 | text: "Note", |
| 451 | value: "note", | 451 | value: "note", |
| 452 | sortable: false, | 452 | sortable: false, |
| 453 | align: "center" | 453 | align: "center" |
| 454 | }, | 454 | }, |
| 455 | { text: "Action", value: "", sortable: false, align: "center" } | 455 | { text: "Action", value: "", sortable: false, align: "center" } |
| 456 | ], | 456 | ], |
| 457 | gradeData: [], | 457 | gradeData: [], |
| 458 | addGrade: {}, | 458 | addGrade: {}, |
| 459 | editedItem: {}, | 459 | editedItem: {}, |
| 460 | token: "" | 460 | token: "" |
| 461 | }), | 461 | }), |
| 462 | methods: { | 462 | methods: { |
| 463 | dates: function(date) { | 463 | dates: function(date) { |
| 464 | return moment(date).format("MMMM DD, YYYY"); | 464 | return moment(date).format("MMMM DD, YYYY"); |
| 465 | }, | 465 | }, |
| 466 | pickFile() { | 466 | pickFile() { |
| 467 | this.$refs.image.click(); | 467 | this.$refs.image.click(); |
| 468 | }, | 468 | }, |
| 469 | getGradeList() { | 469 | getGradeList() { |
| 470 | this.showLoader = true; | 470 | this.showLoader = true; |
| 471 | this.loadingSearch = true; | 471 | this.loadingSearch = true; |
| 472 | http() | 472 | http() |
| 473 | .get("/getGradesList", { | 473 | .get("/getGradesList", { |
| 474 | headers: { Authorization: "Bearer " + this.token } | 474 | headers: { Authorization: "Bearer " + this.token } |
| 475 | }) | 475 | }) |
| 476 | .then(response => { | 476 | .then(response => { |
| 477 | this.gradeData = response.data.data; | 477 | this.gradeData = response.data.data; |
| 478 | this.showLoader = false; | 478 | this.showLoader = false; |
| 479 | this.loadingSearch = false; | 479 | this.loadingSearch = false; |
| 480 | }) | 480 | }) |
| 481 | .catch(error => { | 481 | .catch(error => { |
| 482 | // console.log("err====>", err); | 482 | // console.log("err====>", err); |
| 483 | this.showLoader = false; | 483 | this.showLoader = false; |
| 484 | this.loadingSearch = false; | 484 | this.loadingSearch = false; |
| 485 | this.snackbar = true; | 485 | this.snackbar = true; |
| 486 | this.text = error.response.data.message; | 486 | this.text = error.response.data.message; |
| 487 | if (error.response.status === 401) { | 487 | if (error.response.status === 401) { |
| 488 | this.$router.replace({ path: "/" }); | 488 | this.$router.replace({ path: "/" }); |
| 489 | this.$store.dispatch("setToken", null); | 489 | this.$store.dispatch("setToken", null); |
| 490 | this.$store.dispatch("Id", null); | 490 | this.$store.dispatch("Id", null); |
| 491 | } | 491 | } |
| 492 | }); | 492 | }); |
| 493 | }, | 493 | }, |
| 494 | editItem(item) { | 494 | editItem(item) { |
| 495 | console.log("item", item); | 495 | console.log("item", item); |
| 496 | this.editedIndex = this.gradeData.indexOf(item); | 496 | this.editedIndex = this.gradeData.indexOf(item); |
| 497 | this.editedItem = Object.assign({}, item); | 497 | this.editedItem = Object.assign({}, item); |
| 498 | this.editedItem.date = | 498 | this.editedItem.date = |
| 499 | this.editedItem.date != undefined | 499 | this.editedItem.date != undefined |
| 500 | ? (this.editedItem.date = this.editedItem.date.substring(0, 10)) | 500 | ? (this.editedItem.date = this.editedItem.date.substring(0, 10)) |
| 501 | : (this.editedItem.date = ""); | 501 | : (this.editedItem.date = ""); |
| 502 | this.editGradeDialog = true; | 502 | this.editGradeDialog = true; |
| 503 | }, | 503 | }, |
| 504 | profile(item) { | 504 | profile(item) { |
| 505 | this.editedIndex = this.gradeData.indexOf(item); | 505 | this.editedIndex = this.gradeData.indexOf(item); |
| 506 | this.editedItem = Object.assign({}, item); | 506 | this.editedItem = Object.assign({}, item); |
| 507 | this.viewGradeDialog = true; | 507 | this.viewGradeDialog = true; |
| 508 | }, | 508 | }, |
| 509 | deleteGrade(item) { | 509 | deleteGrade(item) { |
| 510 | let deleteGrade = { | 510 | let deleteGrade = { |
| 511 | gradeId: item._id | 511 | gradeId: item._id |
| 512 | }; | 512 | }; |
| 513 | http() | 513 | http() |
| 514 | .delete( | 514 | .delete( |
| 515 | "/deleteGrade", | 515 | "/deleteGrade", |
| 516 | confirm("Are you sure you want to Delete this?") && { | 516 | confirm("Are you sure you want to Delete this?") && { |
| 517 | params: deleteGrade | 517 | params: deleteGrade |
| 518 | } | 518 | } |
| 519 | ) | 519 | ) |
| 520 | .then(response => { | 520 | .then(response => { |
| 521 | this.snackbar = true; | 521 | this.snackbar = true; |
| 522 | this.text = response.data.message; | 522 | this.text = response.data.message; |
| 523 | this.color = "green"; | 523 | this.color = "green"; |
| 524 | this.getGradeList(); | 524 | this.getGradeList(); |
| 525 | }) | 525 | }) |
| 526 | .catch(error => { | 526 | .catch(error => { |
| 527 | this.loading = false; | 527 | this.loading = false; |
| 528 | this.snackbar = true; | 528 | this.snackbar = true; |
| 529 | this.color = "error"; | 529 | this.color = "error"; |
| 530 | this.text = error.response.data.message; | 530 | this.text = error.response.data.message; |
| 531 | }); | 531 | }); |
| 532 | }, | 532 | }, |
| 533 | close() { | 533 | close() { |
| 534 | this.editGradeDialog = false; | 534 | this.editGradeDialog = false; |
| 535 | }, | 535 | }, |
| 536 | submit() { | 536 | submit() { |
| 537 | if (this.$refs.form.validate()) { | 537 | if (this.$refs.form.validate()) { |
| 538 | this.loading = true; | 538 | this.loading = true; |
| 539 | http() | 539 | http() |
| 540 | .post("/createGrade", this.addGrade) | 540 | .post("/createGrade", this.addGrade) |
| 541 | .then(response => { | 541 | .then(response => { |
| 542 | this.snackbar = true; | 542 | this.snackbar = true; |
| 543 | this.text = response.data.message; | 543 | this.text = response.data.message; |
| 544 | this.color = "green"; | 544 | this.color = "green"; |
| 545 | this.addGradeDialog = false; | 545 | this.addGradeDialog = false; |
| 546 | this.loading = false; | 546 | this.loading = false; |
| 547 | this.clear(); | 547 | this.clear(); |
| 548 | this.getGradeList(); | 548 | this.getGradeList(); |
| 549 | }) | 549 | }) |
| 550 | .catch(error => { | 550 | .catch(error => { |
| 551 | this.snackbar = true; | 551 | this.snackbar = true; |
| 552 | this.text = error.response.data.message; | 552 | this.text = error.response.data.message; |
| 553 | this.color = "red"; | 553 | this.color = "red"; |
| 554 | this.loading = false; | 554 | this.loading = false; |
| 555 | }); | 555 | }); |
| 556 | } | 556 | } |
| 557 | }, | 557 | }, |
| 558 | clear() { | 558 | clear() { |
| 559 | this.$refs.form.reset(); | 559 | this.$refs.form.reset(); |
| 560 | this.disable = false; | 560 | this.disable = false; |
| 561 | this.loading = false; | 561 | this.loading = false; |
| 562 | }, | 562 | }, |
| 563 | save() { | 563 | save() { |
| 564 | if (this.$refs.formEditGrade.validate()) { | 564 | if (this.$refs.formEditGrade.validate()) { |
| 565 | this.editedItem.gradeId = this.editedItem._id; | 565 | this.editedItem.gradeId = this.editedItem._id; |
| 566 | http() | 566 | http() |
| 567 | .put("/updateGrade", this.editedItem) | 567 | .put("/updateGrade", this.editedItem) |
| 568 | .then(response => { | 568 | .then(response => { |
| 569 | this.snackbar = true; | 569 | this.snackbar = true; |
| 570 | this.text = response.data.message; | 570 | this.text = response.data.message; |
| 571 | this.color = "green"; | 571 | this.color = "green"; |
| 572 | this.getGradeList(); | 572 | this.getGradeList(); |
| 573 | this.close(); | 573 | this.close(); |
| 574 | }) | 574 | }) |
| 575 | .catch(error => { | 575 | .catch(error => { |
| 576 | this.snackbar = true; | 576 | this.snackbar = true; |
| 577 | this.text = error.response.data.message; | 577 | this.text = error.response.data.message; |
| 578 | this.color = "red"; | 578 | this.color = "red"; |
| 579 | }); | 579 | }); |
| 580 | } | 580 | } |
| 581 | }, | 581 | }, |
| 582 | displaySearch() { | 582 | displaySearch() { |
| 583 | (this.show = false), (this.showSearch = true); | 583 | (this.show = false), (this.showSearch = true); |
| 584 | }, | 584 | }, |
| 585 | closeSearch() { | 585 | closeSearch() { |
| 586 | this.showSearch = false; | 586 | this.showSearch = false; |
| 587 | this.show = true; | 587 | this.show = true; |
| 588 | this.search = ""; | 588 | this.search = ""; |
| 589 | } | 589 | } |
| 590 | }, | 590 | }, |
| 591 | mounted() { | 591 | mounted() { |
| 592 | this.token = this.$store.state.token; | 592 | this.token = this.$store.state.token; |
| 593 | this.getGradeList(); | 593 | this.getGradeList(); |
| 594 | } | 594 | } |
| 595 | }; | 595 | }; |
| 596 | </script> | 596 | </script> |
src/pages/Gallery/gallery.vue
| 1 | <template> | 1 | <template> |
| 2 | <v-container fluid class="body-color"> | 2 | <v-container fluid class="body-color"> |
| 3 | <!-- ****** EDITS Gallery ****** --> | 3 | <!-- ****** EDITS Gallery ****** --> |
| 4 | <v-dialog v-model="editGalleryDialog" max-width="1000px" scrollable> | 4 | <v-dialog v-model="editGalleryDialog" max-width="1000px" scrollable> |
| 5 | <v-card class="card-style pa-2" dark> | 5 | <v-card 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 Class</label> | 8 | <label class="title text-xs-center">Edit Class</label> |
| 9 | <v-icon size="24" class="right" @click="editGalleryDialog = false">cancel</v-icon> | 9 | <v-icon size="24" class="right" @click="editGalleryDialog = 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 row> | 13 | <v-layout row> |
| 14 | <v-flex xs12 class="text-xs-center text-sm-center text-md-center text-lg-center my-4"> | 14 | <v-flex xs12 class="text-xs-center text-sm-center text-md-center text-lg-center my-4"> |
| 15 | <input | 15 | <input |
| 16 | type="file" | 16 | type="file" |
| 17 | style="display: none" | 17 | style="display: none" |
| 18 | ref="editImage" | 18 | ref="editImage" |
| 19 | accept="image/*" | 19 | accept="image/*" |
| 20 | multiple | 20 | multiple |
| 21 | @change="editFilePicked" | 21 | @change="editFilePicked" |
| 22 | /> | 22 | /> |
| 23 | <v-layout justify-center> | 23 | <v-layout justify-center> |
| 24 | <v-flex | 24 | <v-flex |
| 25 | xs6 | 25 | xs6 |
| 26 | sm12 | 26 | sm12 |
| 27 | md3 | 27 | md3 |
| 28 | v-for="Image in editedItem.imageUrl" | 28 | v-for="Image in editedItem.imageUrl" |
| 29 | :key="Image._id" | 29 | :key="Image._id" |
| 30 | v-if="editedItem.imageUrl" | 30 | v-if="editedItem.imageUrl" |
| 31 | class="profile-image-wrapper imgNews" | 31 | class="profile-image-wrapper imgNews" |
| 32 | > | 32 | > |
| 33 | <img :src="Image.imageLink" height="160" width="160" alt="Gallery" class="pa-2" /> | 33 | <img :src="Image.imageLink" height="160" width="160" alt="Gallery" class="pa-2" /> |
| 34 | <v-icon | 34 | <v-icon |
| 35 | class="red edit-profile-icon" | 35 | class="red edit-profile-icon" |
| 36 | dark | 36 | dark |
| 37 | @click="deleteImage(Image._id,editedItem._id)" | 37 | @click="deleteImage(Image._id,editedItem._id)" |
| 38 | >close</v-icon> | 38 | >close</v-icon> |
| 39 | </v-flex> | 39 | </v-flex> |
| 40 | <v-flex v-for="(file, index) in editFiles" :key="index"> | 40 | <v-flex v-for="(file, index) in editFiles" :key="index"> |
| 41 | <img :src="file" height="160" width="160" class="pa-2" /> | 41 | <img :src="file" height="160" width="160" class="pa-2" /> |
| 42 | </v-flex> | 42 | </v-flex> |
| 43 | </v-layout> | 43 | </v-layout> |
| 44 | <img | 44 | <img |
| 45 | src="/static/icon/user.png" | 45 | src="/static/icon/user.png" |
| 46 | v-if="editedItem.imageUrl == '' && editFiles == ''" | 46 | v-if="editedItem.imageUrl == '' && editFiles == ''" |
| 47 | height="160" | 47 | height="160" |
| 48 | width="160" | 48 | width="160" |
| 49 | alt="Gallery" | 49 | alt="Gallery" |
| 50 | /> | 50 | /> |
| 51 | </v-flex> | 51 | </v-flex> |
| 52 | </v-layout> | 52 | </v-layout> |
| 53 | <v-layout wrap> | 53 | <v-layout wrap> |
| 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">Title:</label> | 57 | <label class="right">Title:</label> |
| 58 | </v-flex> | 58 | </v-flex> |
| 59 | <v-flex xs8 sm6 class="ml-3"> | 59 | <v-flex xs8 sm6 class="ml-3"> |
| 60 | <v-text-field | 60 | <v-text-field |
| 61 | v-model="editedItem.title" | 61 | v-model="editedItem.title" |
| 62 | placeholder="fill your Title" | 62 | placeholder="fill your Title" |
| 63 | name="name" | 63 | name="name" |
| 64 | type="text" | 64 | type="text" |
| 65 | required | 65 | required |
| 66 | ></v-text-field> | 66 | ></v-text-field> |
| 67 | </v-flex> | 67 | </v-flex> |
| 68 | </v-layout> | 68 | </v-layout> |
| 69 | </v-flex> | 69 | </v-flex> |
| 70 | <v-flex xs12 sm12> | 70 | <v-flex xs12 sm12> |
| 71 | <v-layout> | 71 | <v-layout> |
| 72 | <v-flex xs4 class="pt-4 subheading"> | 72 | <v-flex xs4 class="pt-4 subheading"> |
| 73 | <label class="right">Description:</label> | 73 | <label class="right">Description:</label> |
| 74 | </v-flex> | 74 | </v-flex> |
| 75 | <v-flex xs8 sm6 class="ml-3"> | 75 | <v-flex xs8 sm6 class="ml-3"> |
| 76 | <v-text-field | 76 | <v-text-field |
| 77 | placeholder="fill your Description" | 77 | placeholder="fill your Description" |
| 78 | v-model="editedItem.description" | 78 | v-model="editedItem.description" |
| 79 | type="text" | 79 | type="text" |
| 80 | name="email" | 80 | name="email" |
| 81 | required | 81 | required |
| 82 | ></v-text-field> | 82 | ></v-text-field> |
| 83 | </v-flex> | 83 | </v-flex> |
| 84 | </v-layout> | 84 | </v-layout> |
| 85 | </v-flex> | 85 | </v-flex> |
| 86 | <v-layout> | 86 | <v-layout> |
| 87 | <v-flex xs4 class="pt-4 subheading"> | 87 | <v-flex xs4 class="pt-4 subheading"> |
| 88 | <label class="right hidden-xs-only hidden-sm-only">Select Class:</label> | 88 | <label class="right hidden-xs-only hidden-sm-only">Select Class:</label> |
| 89 | <label class="right hidden-lg-only hidden-md-only hidden-xl-only">Class:</label> | 89 | <label class="right hidden-lg-only hidden-md-only hidden-xl-only">Class:</label> |
| 90 | </v-flex> | 90 | </v-flex> |
| 91 | <v-flex xs8 sm6 class="ml-3"> | 91 | <v-flex xs8 sm6 class="ml-3"> |
| 92 | <v-select | 92 | <v-select |
| 93 | :items="addclass" | 93 | :items="addclass" |
| 94 | label="Select Class" | 94 | label="Select Class" |
| 95 | v-model="editedItem.classNum" | 95 | v-model="editedItem.classNum" |
| 96 | item-text="classNum" | 96 | item-text="classNum" |
| 97 | item-value="_id" | 97 | item-value="_id" |
| 98 | name="Select Class" | 98 | name="Select Class" |
| 99 | required | 99 | required |
| 100 | ></v-select> | 100 | ></v-select> |
| 101 | </v-flex> | 101 | </v-flex> |
| 102 | </v-layout> | 102 | </v-layout> |
| 103 | <v-flex xs12> | 103 | <v-flex xs12> |
| 104 | <v-layout> | 104 | <v-layout> |
| 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">Add New Images:</label> | 106 | <label class="right hidden-xs-only hidden-sm-only">Add New Images:</label> |
| 107 | <label class="right hidden-lg-only hidden-md-only hidden-xl-only">Upload:</label> | 107 | <label class="right hidden-lg-only hidden-md-only hidden-xl-only">Upload:</label> |
| 108 | </v-flex> | 108 | </v-flex> |
| 109 | <v-flex xs8 sm6 class="ml-3"> | 109 | <v-flex xs8 sm6 class="ml-3"> |
| 110 | <v-text-field | 110 | <v-text-field |
| 111 | label="Select Image" | 111 | label="Select Image" |
| 112 | @click="editPickFile" | 112 | @click="editPickFile" |
| 113 | v-model="editImageName" | 113 | v-model="editImageName" |
| 114 | append-icon="attach_file" | 114 | append-icon="attach_file" |
| 115 | multiple | 115 | multiple |
| 116 | ></v-text-field> | 116 | ></v-text-field> |
| 117 | </v-flex> | 117 | </v-flex> |
| 118 | </v-layout> | 118 | </v-layout> |
| 119 | </v-flex> | 119 | </v-flex> |
| 120 | </v-layout> | 120 | </v-layout> |
| 121 | <v-flex xs12> | 121 | <v-flex xs12> |
| 122 | <div | 122 | <div |
| 123 | v-for="(editImage,index) in editedItem.youTubeLinkUrl" | 123 | v-for="(editImage,index) in editedItem.youTubeLinkUrl" |
| 124 | :key="index" | 124 | :key="index" |
| 125 | v-if="editImage.youTubeLink !=[]" | 125 | v-if="editImage.youTubeLink !=[]" |
| 126 | > | 126 | > |
| 127 | <v-layout wrap> | 127 | <v-layout wrap> |
| 128 | <v-flex xs12 sm12 md4 class="pt-4 subheading"> | 128 | <v-flex xs12 sm12 md4 class="pt-4 subheading"> |
| 129 | <label class="right hidden-xs-only hidden-sm-only">You Tube Link Url:</label> | 129 | <label class="right hidden-xs-only hidden-sm-only">You Tube Link Url:</label> |
| 130 | <label class="hidden-md-only hidden-lg-only hidden-xl-only">You Tube Link Url:</label> | 130 | <label class="hidden-md-only hidden-lg-only hidden-xl-only">You Tube Link Url:</label> |
| 131 | </v-flex> | 131 | </v-flex> |
| 132 | <v-layout> | 132 | <v-layout> |
| 133 | <v-flex xs10 sm10 sm5 md9 class="ml-3"> | 133 | <v-flex xs10 sm10 sm5 md9 class="ml-3"> |
| 134 | <v-text-field v-model="editImage.youTubeLink" type="text" name="link" required></v-text-field> | 134 | <v-text-field v-model="editImage.youTubeLink" type="text" name="link" required></v-text-field> |
| 135 | </v-flex> | 135 | </v-flex> |
| 136 | <v-flex xs2 class="pt-4"> | 136 | <v-flex xs2 class="pt-4"> |
| 137 | <v-icon @click="deleteUrl(index,editImage._id,editedItem._id)">cancel</v-icon> | 137 | <v-icon @click="deleteUrl(index,editImage._id,editedItem._id)">cancel</v-icon> |
| 138 | </v-flex> | 138 | </v-flex> |
| 139 | </v-layout> | 139 | </v-layout> |
| 140 | </v-layout> | 140 | </v-layout> |
| 141 | </div> | 141 | </div> |
| 142 | </v-flex> | 142 | </v-flex> |
| 143 | <v-flex xs12> | 143 | <v-flex xs12> |
| 144 | <div v-for="(updateImage,index) in updates" :key="index"> | 144 | <div v-for="(updateImage,index) in updates" :key="index"> |
| 145 | <v-layout wrap> | 145 | <v-layout wrap> |
| 146 | <v-flex xs12 sm12 md4 class="pt-4 subheading"> | 146 | <v-flex xs12 sm12 md4 class="pt-4 subheading"> |
| 147 | <label class="right hidden-xs-only hidden-sm-only">You Tube Url:</label> | 147 | <label class="right hidden-xs-only hidden-sm-only">You Tube Url:</label> |
| 148 | <label class="hidden-md-only hidden-lg-only hidden-xl-only">You Tube Url:</label> | 148 | <label class="hidden-md-only hidden-lg-only hidden-xl-only">You Tube Url:</label> |
| 149 | </v-flex> | 149 | </v-flex> |
| 150 | <v-layout> | 150 | <v-layout> |
| 151 | <v-flex xs10 sm12 md9 class="ml-3"> | 151 | <v-flex xs10 sm12 md9 class="ml-3"> |
| 152 | <v-text-field | 152 | <v-text-field |
| 153 | v-model="updateImage.youTubeLink" | 153 | v-model="updateImage.youTubeLink" |
| 154 | label="Upload new you tube link url" | 154 | label="Upload new you tube link url" |
| 155 | required | 155 | required |
| 156 | ></v-text-field> | 156 | ></v-text-field> |
| 157 | </v-flex> | 157 | </v-flex> |
| 158 | <v-flex xs2 class="pt-4"> | 158 | <v-flex xs2 class="pt-4"> |
| 159 | <v-icon @click="deleteUpdate(index)" v-if="index !=0">cancel</v-icon> | 159 | <v-icon @click="deleteUpdate(index)" v-if="index !=0">cancel</v-icon> |
| 160 | <v-icon @click="update">add_circle</v-icon> | 160 | <v-icon @click="update">add_circle</v-icon> |
| 161 | </v-flex> | 161 | </v-flex> |
| 162 | </v-layout> | 162 | </v-layout> |
| 163 | </v-layout> | 163 | </v-layout> |
| 164 | </div> | 164 | </div> |
| 165 | </v-flex> | 165 | </v-flex> |
| 166 | <v-layout> | 166 | <v-layout> |
| 167 | <v-flex xs12 sm12 md11 lg11> | 167 | <v-flex xs12 sm12 md11 lg11> |
| 168 | <v-card-actions class="hidden-xs-only hidden-sm-only"> | 168 | <v-card-actions class="hidden-xs-only hidden-sm-only"> |
| 169 | <v-spacer></v-spacer> | 169 | <v-spacer></v-spacer> |
| 170 | <v-btn | 170 | <v-btn |
| 171 | round | 171 | round |
| 172 | dark | 172 | dark |
| 173 | @click="save" | 173 | @click="save" |
| 174 | :loading="editGalleryLoading" | 174 | :loading="editGalleryLoading" |
| 175 | class="add-button mr-4" | 175 | class="add-button mr-4" |
| 176 | >Save</v-btn> | 176 | >Save</v-btn> |
| 177 | </v-card-actions> | 177 | </v-card-actions> |
| 178 | <v-card-actions class="hidden-md-only hidden-lg-only hidden-xl-only"> | 178 | <v-card-actions class="hidden-md-only hidden-lg-only hidden-xl-only"> |
| 179 | <v-spacer></v-spacer> | 179 | <v-spacer></v-spacer> |
| 180 | <v-btn | 180 | <v-btn |
| 181 | round | 181 | round |
| 182 | dark | 182 | dark |
| 183 | @click="save" | 183 | @click="save" |
| 184 | :loading="editGalleryLoading" | 184 | :loading="editGalleryLoading" |
| 185 | class="add-button" | 185 | class="add-button" |
| 186 | >Save</v-btn> | 186 | >Save</v-btn> |
| 187 | <v-spacer></v-spacer> | 187 | <v-spacer></v-spacer> |
| 188 | </v-card-actions> | 188 | </v-card-actions> |
| 189 | </v-flex> | 189 | </v-flex> |
| 190 | </v-layout> | 190 | </v-layout> |
| 191 | </v-card-text> | 191 | </v-card-text> |
| 192 | </v-card> | 192 | </v-card> |
| 193 | </v-dialog> | 193 | </v-dialog> |
| 194 | 194 | ||
| 195 | <!-- ****** PROFILE Gallery ****** --> | 195 | <!-- ****** PROFILE Gallery ****** --> |
| 196 | 196 | ||
| 197 | <v-dialog v-model="viewProfileGallery" max-width="1000" scrollable> | 197 | <v-dialog v-model="viewProfileGallery" max-width="1000" scrollable> |
| 198 | <v-card flat class="card-style pa-3" dark> | 198 | <v-card flat class="card-style pa-3" dark> |
| 199 | <v-layout> | 199 | <v-layout> |
| 200 | <v-flex xs12> | 200 | <v-flex xs12> |
| 201 | <label class="title text-xs-center">View Gallery</label> | 201 | <label class="title text-xs-center">View Gallery</label> |
| 202 | <v-icon size="24" class="right" @click="closeProfileGallery">cancel</v-icon> | 202 | <v-icon size="24" class="right" @click="closeProfileGallery">cancel</v-icon> |
| 203 | </v-flex> | 203 | </v-flex> |
| 204 | </v-layout> | 204 | </v-layout> |
| 205 | <v-card-text> | 205 | <v-card-text> |
| 206 | <v-layout row wrap> | 206 | <v-layout row wrap> |
| 207 | <v-flex xs12 class="text-xs-center text-sm-center text-md-center text-lg-center my-4"> | 207 | <v-flex xs12 class="text-xs-center text-sm-center text-md-center text-lg-center my-4"> |
| 208 | <v-avatar size="100" v-if="editedItem.imageUrl == ''" class="mt-4 pa-2"> | 208 | <v-avatar size="100" v-if="editedItem.imageUrl == ''" class="mt-4 pa-2"> |
| 209 | <img src="/static/icon/user.png" width="240" height="180" /> | 209 | <img src="/static/icon/user.png" width="240" height="180" /> |
| 210 | </v-avatar> | 210 | </v-avatar> |
| 211 | <span | 211 | <span |
| 212 | v-for="(image,i) in editedItem.imageUrl" | 212 | v-for="(image,i) in editedItem.imageUrl" |
| 213 | :key="i" | 213 | :key="i" |
| 214 | class="mt-4 pa-2" | 214 | class="mt-4 pa-2" |
| 215 | v-if="editedItem.imageUrl" | 215 | v-if="editedItem.imageUrl" |
| 216 | > | 216 | > |
| 217 | <img :src="image.imageLink" alt="Gallery" width="240" height="180" class="imgNews" /> | 217 | <img :src="image.imageLink" alt="Gallery" width="240" height="180" class="imgNews" /> |
| 218 | </span> | 218 | </span> |
| 219 | </v-flex> | 219 | </v-flex> |
| 220 | </v-layout> | 220 | </v-layout> |
| 221 | <v-container grid-list-md> | 221 | <v-container grid-list-md> |
| 222 | <v-layout wrap> | 222 | <v-layout wrap> |
| 223 | <v-flex xs12> | 223 | <v-flex xs12> |
| 224 | <v-layout> | 224 | <v-layout> |
| 225 | <v-flex xs5 sm6> | 225 | <v-flex xs5 sm6> |
| 226 | <h5 class="right my-1"> | 226 | <h5 class="right my-1"> |
| 227 | <b>Title:</b> | 227 | <b>Title:</b> |
| 228 | </h5> | 228 | </h5> |
| 229 | </v-flex> | 229 | </v-flex> |
| 230 | <v-flex sm6 xs8> | 230 | <v-flex sm6 xs8> |
| 231 | <h5 class="my-1">{{ editedItem.title }}</h5> | 231 | <h5 class="my-1">{{ editedItem.title }}</h5> |
| 232 | </v-flex> | 232 | </v-flex> |
| 233 | </v-layout> | 233 | </v-layout> |
| 234 | <v-layout> | 234 | <v-layout> |
| 235 | <v-flex xs5 sm6> | 235 | <v-flex xs5 sm6> |
| 236 | <h5 class="right my-1"> | 236 | <h5 class="right my-1"> |
| 237 | <b>Description:</b> | 237 | <b>Description:</b> |
| 238 | </h5> | 238 | </h5> |
| 239 | </v-flex> | 239 | </v-flex> |
| 240 | <v-flex sm6 xs8> | 240 | <v-flex sm6 xs8> |
| 241 | <h5 class="my-1">{{ editedItem.description }}</h5> | 241 | <h5 class="my-1">{{ editedItem.description }}</h5> |
| 242 | </v-flex> | 242 | </v-flex> |
| 243 | </v-layout> | 243 | </v-layout> |
| 244 | <v-layout> | 244 | <v-layout> |
| 245 | <v-flex xs5 sm6> | 245 | <v-flex xs5 sm6> |
| 246 | <h5 class="right my-1"> | 246 | <h5 class="right my-1"> |
| 247 | <b>You Tube Link Url:</b> | 247 | <b>You Tube Link Url:</b> |
| 248 | </h5> | 248 | </h5> |
| 249 | </v-flex> | 249 | </v-flex> |
| 250 | <v-flex sm6 xs8> | 250 | <v-flex sm6 xs8> |
| 251 | <h5 class="my-1 ml-3"> | 251 | <h5 class="my-1 ml-3"> |
| 252 | <ul v-for="youTubeLinkUrl in editedItem.youTubeLinkUrl"> | 252 | <ul v-for="youTubeLinkUrl in editedItem.youTubeLinkUrl"> |
| 253 | <li>{{ youTubeLinkUrl.youTubeLink }}</li> | 253 | <li>{{ youTubeLinkUrl.youTubeLink }}</li> |
| 254 | </ul> | 254 | </ul> |
| 255 | </h5> | 255 | </h5> |
| 256 | </v-flex> | 256 | </v-flex> |
| 257 | </v-layout> | 257 | </v-layout> |
| 258 | </v-flex> | 258 | </v-flex> |
| 259 | </v-layout> | 259 | </v-layout> |
| 260 | </v-container> | 260 | </v-container> |
| 261 | </v-card-text> | 261 | </v-card-text> |
| 262 | </v-card> | 262 | </v-card> |
| 263 | </v-dialog> | 263 | </v-dialog> |
| 264 | 264 | ||
| 265 | <!-- ****** Gallery TABLE ****** --> | 265 | <!-- ****** Gallery TABLE ****** --> |
| 266 | 266 | ||
| 267 | <v-toolbar color="transparent" flat> | 267 | <v-toolbar color="transparent" flat> |
| 268 | <v-btn | 268 | <v-btn |
| 269 | fab | 269 | fab |
| 270 | dark | 270 | dark |
| 271 | class="open-dialog-button hidden-xl-only hidden-md-only hidden-lg-only" | 271 | class="open-dialog-button hidden-xl-only hidden-md-only hidden-lg-only" |
| 272 | small | 272 | small |
| 273 | @click="addGalleryDialog = true" | 273 | @click="addGalleryDialog = true" |
| 274 | > | 274 | > |
| 275 | <v-icon dark>add</v-icon> | 275 | <v-icon dark>add</v-icon> |
| 276 | </v-btn> | 276 | </v-btn> |
| 277 | <v-btn | 277 | <v-btn |
| 278 | round | 278 | round |
| 279 | class="open-dialog-button hidden-sm-only hidden-xs-only" | 279 | class="open-dialog-button hidden-sm-only hidden-xs-only" |
| 280 | dark | 280 | dark |
| 281 | @click="addGalleryDialog = true" | 281 | @click="addGalleryDialog = true" |
| 282 | > | 282 | > |
| 283 | <v-icon class="white--text pr-1" size="20">add</v-icon>Add Gallery | 283 | <v-icon class="white--text pr-1" size="20">add</v-icon>Add Gallery |
| 284 | </v-btn> | 284 | </v-btn> |
| 285 | <v-spacer></v-spacer> | 285 | <v-spacer></v-spacer> |
| 286 | <v-card-title class="body-1" v-show="show"> | 286 | <v-card-title class="body-1" v-show="show"> |
| 287 | <v-btn icon large flat @click="displaySearch"> | 287 | <v-btn icon large flat @click="displaySearch"> |
| 288 | <v-avatar size="27"> | 288 | <v-avatar size="27"> |
| 289 | <img src="/static/icon/dashboard icons-49.png" alt="icon" /> | 289 | <img src="/static/icon/search.png" alt="icon" /> |
| 290 | </v-avatar> | 290 | </v-avatar> |
| 291 | </v-btn> | 291 | </v-btn> |
| 292 | </v-card-title> | 292 | </v-card-title> |
| 293 | <v-flex xs8 sm8 md3 lg2 v-show="showSearch"> | 293 | <v-flex xs8 sm8 md3 lg2 v-show="showSearch"> |
| 294 | <v-layout> | 294 | <v-layout> |
| 295 | <v-text-field v-model="search" label="Search" prepend-inner-icon="search" color="primary"></v-text-field> | 295 | <v-text-field v-model="search" label="Search" prepend-inner-icon="search" color="primary"></v-text-field> |
| 296 | <v-icon @click="closeSearch" color="error">close</v-icon> | 296 | <v-icon @click="closeSearch" color="error">close</v-icon> |
| 297 | </v-layout> | 297 | </v-layout> |
| 298 | </v-flex> | 298 | </v-flex> |
| 299 | </v-toolbar> | 299 | </v-toolbar> |
| 300 | <v-data-table | 300 | <v-data-table |
| 301 | :headers="headers" | 301 | :headers="headers" |
| 302 | :items="desserts" | 302 | :items="desserts" |
| 303 | :pagination.sync="pagination" | 303 | :pagination.sync="pagination" |
| 304 | :search="search" | 304 | :search="search" |
| 305 | > | 305 | > |
| 306 | <template slot="items" slot-scope="props"> | 306 | <template slot="items" slot-scope="props"> |
| 307 | <tr class="tr"> | 307 | <tr class="tr"> |
| 308 | <td class="td td-row">{{ props.index + 1}}</td> | 308 | <td class="td td-row">{{ props.index + 1}}</td> |
| 309 | <td class="td td-row text-xs-center">{{ props.item.title}}</td> | 309 | <td class="td td-row text-xs-center">{{ props.item.title}}</td> |
| 310 | <td class="td td-row text-xs-center">{{ props.item.description}}</td> | 310 | <td class="td td-row text-xs-center">{{ props.item.description}}</td> |
| 311 | <td class="td td-row text-xs-center"> | 311 | <td class="td td-row text-xs-center"> |
| 312 | <span> | 312 | <span> |
| 313 | <v-tooltip top> | 313 | <v-tooltip top> |
| 314 | <img | 314 | <img |
| 315 | slot="activator" | 315 | slot="activator" |
| 316 | style="cursor:pointer; width:25px; height:25px; " | 316 | style="cursor:pointer; width:25px; height:25px; " |
| 317 | class="mr-3" | 317 | class="mr-3" |
| 318 | @click="profile(props.item)" | 318 | @click="profile(props.item)" |
| 319 | src="/static/icon/dashboard icons-47.png" | 319 | src="/static/icon/view.png" |
| 320 | /> | 320 | /> |
| 321 | <span>View</span> | 321 | <span>View</span> |
| 322 | </v-tooltip> | 322 | </v-tooltip> |
| 323 | <v-tooltip top> | 323 | <v-tooltip top> |
| 324 | <img | 324 | <img |
| 325 | slot="activator" | 325 | slot="activator" |
| 326 | style="cursor:pointer; width:20px; height:18px; " | 326 | style="cursor:pointer; width:20px; height:18px; " |
| 327 | class="mr-3" | 327 | class="mr-3" |
| 328 | @click="editItem(props.item)" | 328 | @click="editItem(props.item)" |
| 329 | src="/static/icon/dashboard icons-50.png" | 329 | src="/static/icon/edit.png" |
| 330 | /> | 330 | /> |
| 331 | <span>Edit</span> | 331 | <span>Edit</span> |
| 332 | </v-tooltip> | 332 | </v-tooltip> |
| 333 | <v-tooltip top> | 333 | <v-tooltip top> |
| 334 | <img | 334 | <img |
| 335 | slot="activator" | 335 | slot="activator" |
| 336 | style="cursor:pointer; width:20px; height:20px; " | 336 | style="cursor:pointer; width:20px; height:20px; " |
| 337 | class="mr-3" | 337 | class="mr-3" |
| 338 | @click="deleteItem(props.item)" | 338 | @click="deleteItem(props.item)" |
| 339 | src="/static/icon/dashboard icons-51.png" | 339 | src="/static/icon/delete.png" |
| 340 | /> | 340 | /> |
| 341 | <span>Delete</span> | 341 | <span>Delete</span> |
| 342 | </v-tooltip> | 342 | </v-tooltip> |
| 343 | </span> | 343 | </span> |
| 344 | </td> | 344 | </td> |
| 345 | </tr> | 345 | </tr> |
| 346 | </template> | 346 | </template> |
| 347 | <v-alert | 347 | <v-alert |
| 348 | slot="no-results" | 348 | slot="no-results" |
| 349 | :value="true" | 349 | :value="true" |
| 350 | color="error" | 350 | color="error" |
| 351 | icon="warning" | 351 | icon="warning" |
| 352 | >Your search for "{{ search }}" found no results.</v-alert> | 352 | >Your search for "{{ search }}" found no results.</v-alert> |
| 353 | </v-data-table> | 353 | </v-data-table> |
| 354 | <!-- ****** ADD Gallery ****** --> | 354 | <!-- ****** ADD Gallery ****** --> |
| 355 | <v-dialog v-model="addGalleryDialog" max-width="600px"> | 355 | <v-dialog v-model="addGalleryDialog" max-width="600px"> |
| 356 | <v-card flat class="card-style pa-2" dark> | 356 | <v-card flat class="card-style pa-2" dark> |
| 357 | <v-layout> | 357 | <v-layout> |
| 358 | <v-flex xs12> | 358 | <v-flex xs12> |
| 359 | <label class="title text-xs-center">Add Gallery</label> | 359 | <label class="title text-xs-center">Add Gallery</label> |
| 360 | <v-icon size="24" class="right" @click="addGalleryDialog = false">cancel</v-icon> | 360 | <v-icon size="24" class="right" @click="addGalleryDialog = false">cancel</v-icon> |
| 361 | </v-flex> | 361 | </v-flex> |
| 362 | </v-layout> | 362 | </v-layout> |
| 363 | <v-form ref="form" v-model="valid" lazy-validation> | 363 | <v-form ref="form" v-model="valid" lazy-validation> |
| 364 | <v-container fluid> | 364 | <v-container fluid> |
| 365 | <v-layout> | 365 | <v-layout> |
| 366 | <v-flex xs12 class="text-xs-center text-sm-center text-md-center text-lg-center"> | 366 | <v-flex xs12 class="text-xs-center text-sm-center text-md-center text-lg-center"> |
| 367 | <input | 367 | <input |
| 368 | type="file" | 368 | type="file" |
| 369 | style="display: none" | 369 | style="display: none" |
| 370 | ref="image" | 370 | ref="image" |
| 371 | accept="image/*" | 371 | accept="image/*" |
| 372 | multiple | 372 | multiple |
| 373 | @change="onFilePicked" | 373 | @change="onFilePicked" |
| 374 | /> | 374 | /> |
| 375 | <v-layout justify-center> | 375 | <v-layout justify-center> |
| 376 | <v-flex v-for="(file,index) in files" :key="index" v-if="files"> | 376 | <v-flex v-for="(file,index) in files" :key="index" v-if="files"> |
| 377 | <img :src="file" height="150" width="150" /> | 377 | <img :src="file" height="150" width="150" /> |
| 378 | </v-flex> | 378 | </v-flex> |
| 379 | </v-layout> | 379 | </v-layout> |
| 380 | <img src="/static/icon/user.png" v-if="files ==''" height="100" width="100;" /> | 380 | <img src="/static/icon/user.png" v-if="files ==''" height="100" width="100;" /> |
| 381 | </v-flex> | 381 | </v-flex> |
| 382 | </v-layout> | 382 | </v-layout> |
| 383 | <v-flex xs12> | 383 | <v-flex xs12> |
| 384 | <v-layout> | 384 | <v-layout> |
| 385 | <v-flex xs4 class="pt-4 subheading"> | 385 | <v-flex xs4 class="pt-4 subheading"> |
| 386 | <label class="right">Title:</label> | 386 | <label class="right">Title:</label> |
| 387 | </v-flex> | 387 | </v-flex> |
| 388 | <v-flex xs8 sm8 md7 class="ml-3"> | 388 | <v-flex xs8 sm8 md7 class="ml-3"> |
| 389 | <v-text-field | 389 | <v-text-field |
| 390 | v-model="addGallery.title" | 390 | v-model="addGallery.title" |
| 391 | placeholder="fill your Title" | 391 | placeholder="fill your Title" |
| 392 | name="name" | 392 | name="name" |
| 393 | type="text" | 393 | type="text" |
| 394 | :rules="titleRules" | 394 | :rules="titleRules" |
| 395 | required | 395 | required |
| 396 | ></v-text-field> | 396 | ></v-text-field> |
| 397 | </v-flex> | 397 | </v-flex> |
| 398 | </v-layout> | 398 | </v-layout> |
| 399 | </v-flex> | 399 | </v-flex> |
| 400 | <v-flex xs12> | 400 | <v-flex xs12> |
| 401 | <v-layout> | 401 | <v-layout> |
| 402 | <v-flex xs4 class="pt-4 subheading"> | 402 | <v-flex xs4 class="pt-4 subheading"> |
| 403 | <label class="right">Description:</label> | 403 | <label class="right">Description:</label> |
| 404 | </v-flex> | 404 | </v-flex> |
| 405 | <v-flex xs8 sm8 md7 class="ml-3"> | 405 | <v-flex xs8 sm8 md7 class="ml-3"> |
| 406 | <v-text-field | 406 | <v-text-field |
| 407 | placeholder="fill your Description" | 407 | placeholder="fill your Description" |
| 408 | :rules="descriptionRules" | 408 | :rules="descriptionRules" |
| 409 | v-model="addGallery.description" | 409 | v-model="addGallery.description" |
| 410 | type="text" | 410 | type="text" |
| 411 | name="email" | 411 | name="email" |
| 412 | required | 412 | required |
| 413 | ></v-text-field> | 413 | ></v-text-field> |
| 414 | </v-flex> | 414 | </v-flex> |
| 415 | </v-layout> | 415 | </v-layout> |
| 416 | </v-flex> | 416 | </v-flex> |
| 417 | <v-flex xs12> | 417 | <v-flex xs12> |
| 418 | <v-layout> | 418 | <v-layout> |
| 419 | <v-flex xs4 class="pt-4 subheading"> | 419 | <v-flex xs4 class="pt-4 subheading"> |
| 420 | <label class="right hidden-xs-only hidden-sm-only">Select Class:</label> | 420 | <label class="right hidden-xs-only hidden-sm-only">Select Class:</label> |
| 421 | <label class="right hidden-lg-only hidden-md-only hidden-xl-only">Class:</label> | 421 | <label class="right hidden-lg-only hidden-md-only hidden-xl-only">Class:</label> |
| 422 | </v-flex> | 422 | </v-flex> |
| 423 | <v-flex xs8 sm8 md7 class="ml-3"> | 423 | <v-flex xs8 sm8 md7 class="ml-3"> |
| 424 | <v-select | 424 | <v-select |
| 425 | :items="addclass" | 425 | :items="addclass" |
| 426 | label="Select Class" | 426 | label="Select Class" |
| 427 | v-model="addGallery.classNum" | 427 | v-model="addGallery.classNum" |
| 428 | item-text="classNum" | 428 | item-text="classNum" |
| 429 | item-value="_id" | 429 | item-value="_id" |
| 430 | name="Select Class" | 430 | name="Select Class" |
| 431 | required | 431 | required |
| 432 | ></v-select> | 432 | ></v-select> |
| 433 | </v-flex> | 433 | </v-flex> |
| 434 | </v-layout> | 434 | </v-layout> |
| 435 | </v-flex> | 435 | </v-flex> |
| 436 | <v-flex xs12> | 436 | <v-flex xs12> |
| 437 | <v-layout> | 437 | <v-layout> |
| 438 | <v-flex xs4 class="pt-4 subheading"> | 438 | <v-flex xs4 class="pt-4 subheading"> |
| 439 | <label class="right hidden-xs-only hidden-sm-only">Uplaod Image:</label> | 439 | <label class="right hidden-xs-only hidden-sm-only">Uplaod Image:</label> |
| 440 | <label class="right hidden-lg-only hidden-md-only hidden-xl-only">Uplaod:</label> | 440 | <label class="right hidden-lg-only hidden-md-only hidden-xl-only">Uplaod:</label> |
| 441 | </v-flex> | 441 | </v-flex> |
| 442 | <v-flex xs8 sm8 md7 class="ml-3"> | 442 | <v-flex xs8 sm8 md7 class="ml-3"> |
| 443 | <v-text-field | 443 | <v-text-field |
| 444 | label="Select Image" | 444 | label="Select Image" |
| 445 | @click="pickFile" | 445 | @click="pickFile" |
| 446 | v-model="imageName" | 446 | v-model="imageName" |
| 447 | append-icon="attach_file" | 447 | append-icon="attach_file" |
| 448 | multiple | 448 | multiple |
| 449 | ></v-text-field> | 449 | ></v-text-field> |
| 450 | </v-flex> | 450 | </v-flex> |
| 451 | </v-layout> | 451 | </v-layout> |
| 452 | </v-flex> | 452 | </v-flex> |
| 453 | <v-layout> | 453 | <v-layout> |
| 454 | <v-flex xs12> | 454 | <v-flex xs12> |
| 455 | <div v-for="(youTubeLink,index) in finds" :key="index"> | 455 | <div v-for="(youTubeLink,index) in finds" :key="index"> |
| 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">You Tube Url:</label> | 458 | <label class="right">You Tube Url:</label> |
| 459 | </v-flex> | 459 | </v-flex> |
| 460 | <v-flex xs8 sm8 md6 class="ml-3"> | 460 | <v-flex xs8 sm8 md6 class="ml-3"> |
| 461 | <v-text-field | 461 | <v-text-field |
| 462 | placeholder="fill your youtube link" | 462 | placeholder="fill your youtube link" |
| 463 | v-model="youTubeLink.value" | 463 | v-model="youTubeLink.value" |
| 464 | type="text" | 464 | type="text" |
| 465 | name="link" | 465 | name="link" |
| 466 | required | 466 | required |
| 467 | ></v-text-field> | 467 | ></v-text-field> |
| 468 | </v-flex> | 468 | </v-flex> |
| 469 | <v-flex xs2 class="pt-4"> | 469 | <v-flex xs2 class="pt-4"> |
| 470 | <v-icon @click="deleteFind(index)" v-if="index !=0 ">cancel</v-icon> | 470 | <v-icon @click="deleteFind(index)" v-if="index !=0 ">cancel</v-icon> |
| 471 | <v-icon @click="addFind">add_circle</v-icon> | 471 | <v-icon @click="addFind">add_circle</v-icon> |
| 472 | </v-flex> | 472 | </v-flex> |
| 473 | </v-layout> | 473 | </v-layout> |
| 474 | </div> | 474 | </div> |
| 475 | </v-flex> | 475 | </v-flex> |
| 476 | </v-layout> | 476 | </v-layout> |
| 477 | <v-layout> | 477 | <v-layout> |
| 478 | <v-flex xs12 sm12> | 478 | <v-flex xs12 sm12> |
| 479 | <v-layout class="right"> | 479 | <v-layout class="right"> |
| 480 | <v-btn @click="clear" round dark class="clear-button">Clear</v-btn> | 480 | <v-btn @click="clear" round dark class="clear-button">Clear</v-btn> |
| 481 | <v-btn @click="submit" round dark :loading="loading" class="add-button">Add</v-btn> | 481 | <v-btn @click="submit" round dark :loading="loading" class="add-button">Add</v-btn> |
| 482 | </v-layout> | 482 | </v-layout> |
| 483 | </v-flex> | 483 | </v-flex> |
| 484 | </v-layout> | 484 | </v-layout> |
| 485 | </v-container> | 485 | </v-container> |
| 486 | </v-form> | 486 | </v-form> |
| 487 | </v-card> | 487 | </v-card> |
| 488 | </v-dialog> | 488 | </v-dialog> |
| 489 | <v-snackbar | 489 | <v-snackbar |
| 490 | :timeout="timeout" | 490 | :timeout="timeout" |
| 491 | :top="y === 'top'" | 491 | :top="y === 'top'" |
| 492 | :right="x === 'right'" | 492 | :right="x === 'right'" |
| 493 | :vertical="mode === 'vertical'" | 493 | :vertical="mode === 'vertical'" |
| 494 | v-model="snackbar" | 494 | v-model="snackbar" |
| 495 | :color="color" | 495 | :color="color" |
| 496 | >{{ text }}</v-snackbar> | 496 | >{{ text }}</v-snackbar> |
| 497 | <div class="loader" v-if="showLoader"> | 497 | <div class="loader" v-if="showLoader"> |
| 498 | <v-progress-circular indeterminate color="white"></v-progress-circular> | 498 | <v-progress-circular indeterminate color="white"></v-progress-circular> |
| 499 | </div> | 499 | </div> |
| 500 | </v-container> | 500 | </v-container> |
| 501 | </template> | 501 | </template> |
| 502 | 502 | ||
| 503 | <script> | 503 | <script> |
| 504 | import http from "@/Services/http.js"; | 504 | import http from "@/Services/http.js"; |
| 505 | 505 | ||
| 506 | export default { | 506 | export default { |
| 507 | data: () => ({ | 507 | data: () => ({ |
| 508 | snackbar: false, | 508 | snackbar: false, |
| 509 | y: "top", | 509 | y: "top", |
| 510 | x: "right", | 510 | x: "right", |
| 511 | mode: "", | 511 | mode: "", |
| 512 | timeout: 3000, | 512 | timeout: 3000, |
| 513 | text: "", | 513 | text: "", |
| 514 | loading: false, | 514 | loading: false, |
| 515 | color: "", | 515 | color: "", |
| 516 | date: null, | 516 | date: null, |
| 517 | search: "", | 517 | search: "", |
| 518 | show: true, | 518 | show: true, |
| 519 | addGalleryDialog: false, | 519 | addGalleryDialog: false, |
| 520 | showSearch: false, | 520 | showSearch: false, |
| 521 | showLoader: false, | 521 | showLoader: false, |
| 522 | editGalleryDialog: false, | 522 | editGalleryDialog: false, |
| 523 | viewProfileGallery: false, | 523 | viewProfileGallery: false, |
| 524 | valid: true, | 524 | valid: true, |
| 525 | editGalleryLoading: false, | 525 | editGalleryLoading: false, |
| 526 | addclass: [], | 526 | addclass: [], |
| 527 | addSection: [], | 527 | addSection: [], |
| 528 | finds: [{ value: "" }], | 528 | finds: [{ value: "" }], |
| 529 | updates: [{ youTubeLink: "" }], | 529 | updates: [{ youTubeLink: "" }], |
| 530 | youTubeLink: {}, | 530 | youTubeLink: {}, |
| 531 | addGallery: { | 531 | addGallery: { |
| 532 | youTubeLinkUrl: [] | 532 | youTubeLinkUrl: [] |
| 533 | }, | 533 | }, |
| 534 | pagination: { | 534 | pagination: { |
| 535 | rowsPerPage: 10 | 535 | rowsPerPage: 10 |
| 536 | }, | 536 | }, |
| 537 | imageName: "", | 537 | imageName: "", |
| 538 | imageUrl: "", | 538 | imageUrl: "", |
| 539 | imageFile: "", | 539 | imageFile: "", |
| 540 | image: [], | 540 | image: [], |
| 541 | upload: "", | 541 | upload: "", |
| 542 | editImageName: "", | 542 | editImageName: "", |
| 543 | editFiles: [], | 543 | editFiles: [], |
| 544 | files: [], | 544 | files: [], |
| 545 | token: "", | 545 | token: "", |
| 546 | titleRules: [v => !!v || " Tilte is required"], | 546 | titleRules: [v => !!v || " Tilte is required"], |
| 547 | descriptionRules: [v => !!v || " Description is required"], | 547 | descriptionRules: [v => !!v || " Description is required"], |
| 548 | headers: [ | 548 | headers: [ |
| 549 | { | 549 | { |
| 550 | align: "", | 550 | align: "", |
| 551 | text: "No", | 551 | text: "No", |
| 552 | sortable: false, | 552 | sortable: false, |
| 553 | value: "index" | 553 | value: "index" |
| 554 | }, | 554 | }, |
| 555 | { text: "Title", value: "title", sortable: false, align: "center" }, | 555 | { text: "Title", value: "title", sortable: false, align: "center" }, |
| 556 | { | 556 | { |
| 557 | text: "Description", | 557 | text: "Description", |
| 558 | value: "description", | 558 | value: "description", |
| 559 | sortable: false, | 559 | sortable: false, |
| 560 | align: "center" | 560 | align: "center" |
| 561 | }, | 561 | }, |
| 562 | { text: "Action", value: "", sortable: false, align: "center" } | 562 | { text: "Action", value: "", sortable: false, align: "center" } |
| 563 | ], | 563 | ], |
| 564 | desserts: [], | 564 | desserts: [], |
| 565 | editedIndex: -1, | 565 | editedIndex: -1, |
| 566 | editedItem: {}, | 566 | editedItem: {}, |
| 567 | index: "" | 567 | index: "" |
| 568 | }), | 568 | }), |
| 569 | methods: { | 569 | methods: { |
| 570 | pickFile() { | 570 | pickFile() { |
| 571 | this.$refs.image.click(); | 571 | this.$refs.image.click(); |
| 572 | }, | 572 | }, |
| 573 | editPickFile() { | 573 | editPickFile() { |
| 574 | this.$refs.editImage.click(); | 574 | this.$refs.editImage.click(); |
| 575 | }, | 575 | }, |
| 576 | onFilePicked(e) { | 576 | onFilePicked(e) { |
| 577 | const files = e.target.files; | 577 | const files = e.target.files; |
| 578 | /** fetch Image Name **/ | 578 | /** fetch Image Name **/ |
| 579 | if (files[0] !== undefined) { | 579 | if (files[0] !== undefined) { |
| 580 | this.imageName = files[0].name; | 580 | this.imageName = files[0].name; |
| 581 | if (this.imageName.lastIndexOf(".") <= 0) { | 581 | if (this.imageName.lastIndexOf(".") <= 0) { |
| 582 | return; | 582 | return; |
| 583 | } | 583 | } |
| 584 | this.files = []; | 584 | this.files = []; |
| 585 | // console.log("files", this.files); | 585 | // console.log("files", this.files); |
| 586 | /** Select many image and showing many image add to Gallery card **/ | 586 | /** Select many image and showing many image add to Gallery card **/ |
| 587 | const test = Array.from(files).forEach((file, idx) => { | 587 | const test = Array.from(files).forEach((file, idx) => { |
| 588 | const fr = new FileReader(); | 588 | const fr = new FileReader(); |
| 589 | const getResult = new Promise(resolve => { | 589 | const getResult = new Promise(resolve => { |
| 590 | fr.onload = e => { | 590 | fr.onload = e => { |
| 591 | this.files.push( | 591 | this.files.push( |
| 592 | // id: idx, | 592 | // id: idx, |
| 593 | e.target.result | 593 | e.target.result |
| 594 | ); | 594 | ); |
| 595 | }; | 595 | }; |
| 596 | console.log("uploadImage=======>", this.files); | 596 | console.log("uploadImage=======>", this.files); |
| 597 | }); | 597 | }); |
| 598 | fr.readAsDataURL(file); | 598 | fr.readAsDataURL(file); |
| 599 | return getResult.then(file => { | 599 | return getResult.then(file => { |
| 600 | return file; | 600 | return file; |
| 601 | }); | 601 | }); |
| 602 | }); | 602 | }); |
| 603 | const fr = new FileReader(); | 603 | const fr = new FileReader(); |
| 604 | fr.readAsDataURL(files[0]); | 604 | fr.readAsDataURL(files[0]); |
| 605 | fr.addEventListener("load", () => { | 605 | fr.addEventListener("load", () => { |
| 606 | this.imageFile = files; // this is an image file that can be sent to server... | 606 | this.imageFile = files; // this is an image file that can be sent to server... |
| 607 | }); | 607 | }); |
| 608 | } else { | 608 | } else { |
| 609 | this.imageName = ""; | 609 | this.imageName = ""; |
| 610 | this.imageFile = ""; | 610 | this.imageFile = ""; |
| 611 | this.imageUrl = ""; | 611 | this.imageUrl = ""; |
| 612 | } | 612 | } |
| 613 | }, | 613 | }, |
| 614 | editFilePicked(e) { | 614 | editFilePicked(e) { |
| 615 | const files = e.target.files; | 615 | const files = e.target.files; |
| 616 | /** fetch Image Name **/ | 616 | /** fetch Image Name **/ |
| 617 | if (files[0] !== undefined) { | 617 | if (files[0] !== undefined) { |
| 618 | this.editImageName = files[0].name; | 618 | this.editImageName = files[0].name; |
| 619 | if (this.editImageName.lastIndexOf(".") <= 0) { | 619 | if (this.editImageName.lastIndexOf(".") <= 0) { |
| 620 | return; | 620 | return; |
| 621 | } | 621 | } |
| 622 | /** Select many image and showing many image add to Gallery card **/ | 622 | /** Select many image and showing many image add to Gallery card **/ |
| 623 | const test = Array.from(files).forEach((file, idx) => { | 623 | const test = Array.from(files).forEach((file, idx) => { |
| 624 | const fr = new FileReader(); | 624 | const fr = new FileReader(); |
| 625 | const getResult = new Promise(resolve => { | 625 | const getResult = new Promise(resolve => { |
| 626 | fr.onload = e => { | 626 | fr.onload = e => { |
| 627 | this.editFiles.push( | 627 | this.editFiles.push( |
| 628 | // id: idx, | 628 | // id: idx, |
| 629 | e.target.result | 629 | e.target.result |
| 630 | ); | 630 | ); |
| 631 | }; | 631 | }; |
| 632 | console.log("uploadeditFilesImage=======>", this.editFiles); | 632 | console.log("uploadeditFilesImage=======>", this.editFiles); |
| 633 | }); | 633 | }); |
| 634 | fr.readAsDataURL(file); | 634 | fr.readAsDataURL(file); |
| 635 | return getResult.then(file => { | 635 | return getResult.then(file => { |
| 636 | return file; | 636 | return file; |
| 637 | }); | 637 | }); |
| 638 | }); | 638 | }); |
| 639 | const fr = new FileReader(); | 639 | const fr = new FileReader(); |
| 640 | fr.readAsDataURL(files[0]); | 640 | fr.readAsDataURL(files[0]); |
| 641 | // fr.addEventListener("load", () => { | 641 | // fr.addEventListener("load", () => { |
| 642 | // this.imageFile = files; // this is an image file that can be sent to server... | 642 | // this.imageFile = files; // this is an image file that can be sent to server... |
| 643 | // }); | 643 | // }); |
| 644 | } else { | 644 | } else { |
| 645 | this.editImageName = ""; | 645 | this.editImageName = ""; |
| 646 | this.editFiles = []; | 646 | this.editFiles = []; |
| 647 | } | 647 | } |
| 648 | }, | 648 | }, |
| 649 | getGalleryList() { | 649 | getGalleryList() { |
| 650 | this.showLoader = true; | 650 | this.showLoader = true; |
| 651 | http() | 651 | http() |
| 652 | .get("/getGalleryList", { | 652 | .get("/getGalleryList", { |
| 653 | headers: { Authorization: "Bearer " + this.token } | 653 | headers: { Authorization: "Bearer " + this.token } |
| 654 | }) | 654 | }) |
| 655 | .then(response => { | 655 | .then(response => { |
| 656 | this.desserts = response.data.data; | 656 | this.desserts = response.data.data; |
| 657 | this.showLoader = false; | 657 | this.showLoader = false; |
| 658 | }) | 658 | }) |
| 659 | .catch(error => { | 659 | .catch(error => { |
| 660 | // console.log("err====>", err); | 660 | // console.log("err====>", err); |
| 661 | this.showLoader = false; | 661 | this.showLoader = false; |
| 662 | if (error.response.status === 401) { | 662 | if (error.response.status === 401) { |
| 663 | this.$router.replace({ path: "/" }); | 663 | this.$router.replace({ path: "/" }); |
| 664 | this.$store.dispatch("setToken", null); | 664 | this.$store.dispatch("setToken", null); |
| 665 | this.$store.dispatch("Id", null); | 665 | this.$store.dispatch("Id", null); |
| 666 | } | 666 | } |
| 667 | }); | 667 | }); |
| 668 | }, | 668 | }, |
| 669 | editItem(item) { | 669 | editItem(item) { |
| 670 | this.files = []; | 670 | this.files = []; |
| 671 | this.editedIndex = this.desserts.indexOf(item); | 671 | this.editedIndex = this.desserts.indexOf(item); |
| 672 | this.editedItem = Object.assign({}, item); | 672 | this.editedItem = Object.assign({}, item); |
| 673 | this.editGalleryDialog = true; | 673 | this.editGalleryDialog = true; |
| 674 | }, | 674 | }, |
| 675 | profile(item) { | 675 | profile(item) { |
| 676 | this.editedIndex = this.desserts.indexOf(item); | 676 | this.editedIndex = this.desserts.indexOf(item); |
| 677 | this.editedItem = Object.assign({}, item); | 677 | this.editedItem = Object.assign({}, item); |
| 678 | this.viewProfileGallery = true; | 678 | this.viewProfileGallery = true; |
| 679 | }, | 679 | }, |
| 680 | deleteItem(item) { | 680 | deleteItem(item) { |
| 681 | let deleteGallery = { | 681 | let deleteGallery = { |
| 682 | galleryId: item._id | 682 | galleryId: item._id |
| 683 | }; | 683 | }; |
| 684 | http() | 684 | http() |
| 685 | .delete( | 685 | .delete( |
| 686 | "/deleteGallery", | 686 | "/deleteGallery", |
| 687 | confirm("Are you sure you want to delete this?") && { | 687 | confirm("Are you sure you want to delete this?") && { |
| 688 | params: deleteGallery, | 688 | params: deleteGallery, |
| 689 | headers: { | 689 | headers: { |
| 690 | Authorization: "Bearer " + this.token | 690 | Authorization: "Bearer " + this.token |
| 691 | } | 691 | } |
| 692 | } | 692 | } |
| 693 | ) | 693 | ) |
| 694 | .then(response => { | 694 | .then(response => { |
| 695 | this.snackbar = true; | 695 | this.snackbar = true; |
| 696 | this.text = "Successfully delete Existing Gallery"; | 696 | this.text = "Successfully delete Existing Gallery"; |
| 697 | this.color = "green"; | 697 | this.color = "green"; |
| 698 | this.getGalleryList(); | 698 | this.getGalleryList(); |
| 699 | }) | 699 | }) |
| 700 | .catch(error => { | 700 | .catch(error => { |
| 701 | // console.log(error); | 701 | // console.log(error); |
| 702 | this.snackbar = true; | 702 | this.snackbar = true; |
| 703 | this.text = error.response.data.message; | 703 | this.text = error.response.data.message; |
| 704 | this.color = "error"; | 704 | this.color = "error"; |
| 705 | }); | 705 | }); |
| 706 | }, | 706 | }, |
| 707 | deleteImage(imageId, id) { | 707 | deleteImage(imageId, id) { |
| 708 | let deleteImages = { | 708 | let deleteImages = { |
| 709 | galleryId: id, | 709 | galleryId: id, |
| 710 | imageId: imageId | 710 | imageId: imageId |
| 711 | }; | 711 | }; |
| 712 | http() | 712 | http() |
| 713 | .put("/deleteImage", deleteImages) | 713 | .put("/deleteImage", deleteImages) |
| 714 | .then(response => { | 714 | .then(response => { |
| 715 | this.snackbar = true; | 715 | this.snackbar = true; |
| 716 | this.text = response.data.message; | 716 | this.text = response.data.message; |
| 717 | this.color = "green"; | 717 | this.color = "green"; |
| 718 | this.getGalleryList(); | 718 | this.getGalleryList(); |
| 719 | this.close(); | 719 | this.close(); |
| 720 | }) | 720 | }) |
| 721 | .catch(error => { | 721 | .catch(error => { |
| 722 | this.snackbar = true; | 722 | this.snackbar = true; |
| 723 | this.text = error.response.data.message; | 723 | this.text = error.response.data.message; |
| 724 | this.color = "error"; | 724 | this.color = "error"; |
| 725 | }); | 725 | }); |
| 726 | }, | 726 | }, |
| 727 | close() { | 727 | close() { |
| 728 | this.editGalleryDialog = false; | 728 | this.editGalleryDialog = false; |
| 729 | }, | 729 | }, |
| 730 | closeProfileGallery() { | 730 | closeProfileGallery() { |
| 731 | this.viewProfileGallery = false; | 731 | this.viewProfileGallery = false; |
| 732 | }, | 732 | }, |
| 733 | submit() { | 733 | submit() { |
| 734 | for (let i = 0; i < this.finds.length; i++) { | 734 | for (let i = 0; i < this.finds.length; i++) { |
| 735 | this.addGallery.youTubeLinkUrl.push(this.finds[i].value); | 735 | this.addGallery.youTubeLinkUrl.push(this.finds[i].value); |
| 736 | } | 736 | } |
| 737 | if (this.$refs.form.validate()) { | 737 | if (this.$refs.form.validate()) { |
| 738 | if (this.files) { | 738 | if (this.files) { |
| 739 | var ary = []; | 739 | var ary = []; |
| 740 | var imageData = []; | 740 | var imageData = []; |
| 741 | ary = this.files; | 741 | ary = this.files; |
| 742 | for (let i = 0; i < ary.length; i++) { | 742 | for (let i = 0; i < ary.length; i++) { |
| 743 | const [baseUrl, imageUrl] = ary[i].split(/,/); | 743 | const [baseUrl, imageUrl] = ary[i].split(/,/); |
| 744 | imageData.push(imageUrl); | 744 | imageData.push(imageUrl); |
| 745 | this.addGallery.upload = imageData; | 745 | this.addGallery.upload = imageData; |
| 746 | } | 746 | } |
| 747 | } | 747 | } |
| 748 | if (this.addGallery.youTubeLinkUrl == "") { | 748 | if (this.addGallery.youTubeLinkUrl == "") { |
| 749 | var galleryData = { | 749 | var galleryData = { |
| 750 | classId: this.addGallery.classNum, | 750 | classId: this.addGallery.classNum, |
| 751 | title: this.addGallery.title, | 751 | title: this.addGallery.title, |
| 752 | description: this.addGallery.description, | 752 | description: this.addGallery.description, |
| 753 | upload: this.addGallery.upload | 753 | upload: this.addGallery.upload |
| 754 | }; | 754 | }; |
| 755 | this.loading = true; | 755 | this.loading = true; |
| 756 | http() | 756 | http() |
| 757 | .post("/createGallery", galleryData) | 757 | .post("/createGallery", galleryData) |
| 758 | .then(response => { | 758 | .then(response => { |
| 759 | this.getGalleryList(); | 759 | this.getGalleryList(); |
| 760 | this.loading = false; | 760 | this.loading = false; |
| 761 | this.snackbar = true; | 761 | this.snackbar = true; |
| 762 | this.text = response.data.message; | 762 | this.text = response.data.message; |
| 763 | this.color = "green"; | 763 | this.color = "green"; |
| 764 | this.clear(); | 764 | this.clear(); |
| 765 | this.files = ""; | 765 | this.files = ""; |
| 766 | }) | 766 | }) |
| 767 | .catch(error => { | 767 | .catch(error => { |
| 768 | this.snackbar = true; | 768 | this.snackbar = true; |
| 769 | this.text = error.response.data.message; | 769 | this.text = error.response.data.message; |
| 770 | this.color = "error"; | 770 | this.color = "error"; |
| 771 | this.loading = false; | 771 | this.loading = false; |
| 772 | }); | 772 | }); |
| 773 | } else if (this.addGallery.youTubeLinkUrl) { | 773 | } else if (this.addGallery.youTubeLinkUrl) { |
| 774 | this.loading = true; | 774 | this.loading = true; |
| 775 | http() | 775 | http() |
| 776 | .post("/createGallery", this.addGallery) | 776 | .post("/createGallery", this.addGallery) |
| 777 | .then(response => { | 777 | .then(response => { |
| 778 | this.getGalleryList(); | 778 | this.getGalleryList(); |
| 779 | this.files = []; | 779 | this.files = []; |
| 780 | this.loading = false; | 780 | this.loading = false; |
| 781 | this.snackbar = true; | 781 | this.snackbar = true; |
| 782 | this.color = "green"; | 782 | this.color = "green"; |
| 783 | this.text = response.data.message; | 783 | this.text = response.data.message; |
| 784 | this.clear(); | 784 | this.clear(); |
| 785 | this.files = ""; | 785 | this.files = ""; |
| 786 | }) | 786 | }) |
| 787 | .catch(error => { | 787 | .catch(error => { |
| 788 | this.snackbar = true; | 788 | this.snackbar = true; |
| 789 | this.text = error.response.data.message; | 789 | this.text = error.response.data.message; |
| 790 | this.loading = false; | 790 | this.loading = false; |
| 791 | this.color = "error"; | 791 | this.color = "error"; |
| 792 | }); | 792 | }); |
| 793 | } | 793 | } |
| 794 | } | 794 | } |
| 795 | }, | 795 | }, |
| 796 | clear() { | 796 | clear() { |
| 797 | this.$refs.form.reset(); | 797 | this.$refs.form.reset(); |
| 798 | this.files = []; | 798 | this.files = []; |
| 799 | }, | 799 | }, |
| 800 | save() { | 800 | save() { |
| 801 | this.editedItem.gelleryId = this.editedItem._id; | 801 | this.editedItem.gelleryId = this.editedItem._id; |
| 802 | var linkUrl = []; | 802 | var linkUrl = []; |
| 803 | for (let i = 0; i < this.updates.length; i++) { | 803 | for (let i = 0; i < this.updates.length; i++) { |
| 804 | linkUrl.push(this.updates[i].youTubeLink); | 804 | linkUrl.push(this.updates[i].youTubeLink); |
| 805 | } | 805 | } |
| 806 | if (this.editFiles) { | 806 | if (this.editFiles) { |
| 807 | var ary = []; | 807 | var ary = []; |
| 808 | var imageData = []; | 808 | var imageData = []; |
| 809 | ary = this.editFiles; | 809 | ary = this.editFiles; |
| 810 | for (let i = 0; i < ary.length; i++) { | 810 | for (let i = 0; i < ary.length; i++) { |
| 811 | const [baseUrl, imageUrl] = ary[i].split(/,/); | 811 | const [baseUrl, imageUrl] = ary[i].split(/,/); |
| 812 | imageData.push(imageUrl); | 812 | imageData.push(imageUrl); |
| 813 | this.editedItem.editFiles = imageData; | 813 | this.editedItem.editFiles = imageData; |
| 814 | } | 814 | } |
| 815 | } | 815 | } |
| 816 | if (linkUrl != "") { | 816 | if (linkUrl != "") { |
| 817 | var updateData = { | 817 | var updateData = { |
| 818 | galleryId: this.editedItem._id, | 818 | galleryId: this.editedItem._id, |
| 819 | description: this.editedItem.description, | 819 | description: this.editedItem.description, |
| 820 | classId: this.editedItem.classNum, | 820 | classId: this.editedItem.classNum, |
| 821 | uploadImage: this.editedItem.editFiles, | 821 | uploadImage: this.editedItem.editFiles, |
| 822 | title: this.editedItem.title, | 822 | title: this.editedItem.title, |
| 823 | updateYouTubeLinkUrl: linkUrl | 823 | updateYouTubeLinkUrl: linkUrl |
| 824 | }; | 824 | }; |
| 825 | } else if (linkUrl == "") { | 825 | } else if (linkUrl == "") { |
| 826 | var updateData = { | 826 | var updateData = { |
| 827 | galleryId: this.editedItem._id, | 827 | galleryId: this.editedItem._id, |
| 828 | description: this.editedItem.description, | 828 | description: this.editedItem.description, |
| 829 | classId: this.editedItem.classNum, | 829 | classId: this.editedItem.classNum, |
| 830 | uploadImage: this.editedItem.editFiles, | 830 | uploadImage: this.editedItem.editFiles, |
| 831 | title: this.editedItem.title | 831 | title: this.editedItem.title |
| 832 | }; | 832 | }; |
| 833 | } | 833 | } |
| 834 | this.editGalleryLoading = true; | 834 | this.editGalleryLoading = true; |
| 835 | http() | 835 | http() |
| 836 | .put("/updateGallery", updateData) | 836 | .put("/updateGallery", updateData) |
| 837 | .then(response => { | 837 | .then(response => { |
| 838 | this.getGalleryList(); | 838 | this.getGalleryList(); |
| 839 | this.close(); | 839 | this.close(); |
| 840 | this.snackbar = true; | 840 | this.snackbar = true; |
| 841 | this.text = response.data.message; | 841 | this.text = response.data.message; |
| 842 | this.color = "green"; | 842 | this.color = "green"; |
| 843 | this.editGalleryLoading = false; | 843 | this.editGalleryLoading = false; |
| 844 | (this.editImageName = ""), (this.editFiles = []); | 844 | (this.editImageName = ""), (this.editFiles = []); |
| 845 | }) | 845 | }) |
| 846 | .catch(error => { | 846 | .catch(error => { |
| 847 | this.editGalleryLoading = false; | 847 | this.editGalleryLoading = false; |
| 848 | this.snackbar = true; | 848 | this.snackbar = true; |
| 849 | this.text = error.response.data.message; | 849 | this.text = error.response.data.message; |
| 850 | this.color = "error"; | 850 | this.color = "error"; |
| 851 | }); | 851 | }); |
| 852 | }, | 852 | }, |
| 853 | getAllClasses() { | 853 | getAllClasses() { |
| 854 | http() | 854 | http() |
| 855 | .get("/getClassesList", { | 855 | .get("/getClassesList", { |
| 856 | headers: { Authorization: "Bearer " + this.token } | 856 | headers: { Authorization: "Bearer " + this.token } |
| 857 | }) | 857 | }) |
| 858 | .then(response => { | 858 | .then(response => { |
| 859 | this.addclass = response.data.data; | 859 | this.addclass = response.data.data; |
| 860 | }) | 860 | }) |
| 861 | .catch(err => { | 861 | .catch(err => { |
| 862 | // console.log("err====>", err); | 862 | // console.log("err====>", err); |
| 863 | }); | 863 | }); |
| 864 | }, | 864 | }, |
| 865 | addFind: function() { | 865 | addFind: function() { |
| 866 | this.finds.push({ value: "" }); | 866 | this.finds.push({ value: "" }); |
| 867 | }, | 867 | }, |
| 868 | update: function() { | 868 | update: function() { |
| 869 | this.updates.push({ youTubeLink: "" }); | 869 | this.updates.push({ youTubeLink: "" }); |
| 870 | }, | 870 | }, |
| 871 | deleteFind: function(index) { | 871 | deleteFind: function(index) { |
| 872 | this.finds.splice(index, 1); | 872 | this.finds.splice(index, 1); |
| 873 | if (index === 0) this.addFind(); | 873 | if (index === 0) this.addFind(); |
| 874 | }, | 874 | }, |
| 875 | deleteUpdate: function(index) { | 875 | deleteUpdate: function(index) { |
| 876 | this.updates.splice(index, 1); | 876 | this.updates.splice(index, 1); |
| 877 | if (index === 0) this.update(); | 877 | if (index === 0) this.update(); |
| 878 | }, | 878 | }, |
| 879 | deleteUrl: function(index, youTubelinkId, id) { | 879 | deleteUrl: function(index, youTubelinkId, id) { |
| 880 | this.editedItem.youTubeLinkUrl.splice(index, 1); | 880 | this.editedItem.youTubeLinkUrl.splice(index, 1); |
| 881 | if (index === 0) this.update(); | 881 | if (index === 0) this.update(); |
| 882 | let deleteYouTubeUrl = { | 882 | let deleteYouTubeUrl = { |
| 883 | galleryId: id, | 883 | galleryId: id, |
| 884 | youTubeId: youTubelinkId | 884 | youTubeId: youTubelinkId |
| 885 | }; | 885 | }; |
| 886 | http() | 886 | http() |
| 887 | .put("/deleteYoutubeLink", deleteYouTubeUrl) | 887 | .put("/deleteYoutubeLink", deleteYouTubeUrl) |
| 888 | .then(response => { | 888 | .then(response => { |
| 889 | this.snackbar = true; | 889 | this.snackbar = true; |
| 890 | this.text = response.data.message; | 890 | this.text = response.data.message; |
| 891 | this.color = "green"; | 891 | this.color = "green"; |
| 892 | this.getGalleryList(); | 892 | this.getGalleryList(); |
| 893 | this.close(); | 893 | this.close(); |
| 894 | }) | 894 | }) |
| 895 | .catch(error => { | 895 | .catch(error => { |
| 896 | this.snackbar = true; | 896 | this.snackbar = true; |
| 897 | this.text = error.response.data.message; | 897 | this.text = error.response.data.message; |
| 898 | this.color = "error"; | 898 | this.color = "error"; |
| 899 | }); | 899 | }); |
| 900 | }, | 900 | }, |
| 901 | displaySearch() { | 901 | displaySearch() { |
| 902 | (this.show = false), (this.showSearch = true); | 902 | (this.show = false), (this.showSearch = true); |
| 903 | }, | 903 | }, |
| 904 | closeSearch() { | 904 | closeSearch() { |
| 905 | this.showSearch = false; | 905 | this.showSearch = false; |
| 906 | this.show = true; | 906 | this.show = true; |
| 907 | this.search = ""; | 907 | this.search = ""; |
| 908 | } | 908 | } |
| 909 | }, | 909 | }, |
| 910 | mounted() { | 910 | mounted() { |
| 911 | this.token = this.$store.state.token; | 911 | this.token = this.$store.state.token; |
| 912 | this.getAllClasses(); | 912 | this.getAllClasses(); |
| 913 | this.getGalleryList(); | 913 | this.getGalleryList(); |
| 914 | } | 914 | } |
| 915 | }; | 915 | }; |
| 916 | </script> | 916 | </script> |
src/pages/Holiday/holiday.vue
| 1 | <template> | 1 | <template> |
| 2 | <v-container fluid class="body-color"> | 2 | <v-container fluid class="body-color"> |
| 3 | <!-- ****** EDIT HOLIDAY ****** --> | 3 | <!-- ****** EDIT HOLIDAY ****** --> |
| 4 | <v-dialog v-model="editHolidayDialog" max-width="500px"> | 4 | <v-dialog v-model="editHolidayDialog" max-width="500px"> |
| 5 | <v-card flat class="card-style pa-2" dark> | 5 | <v-card flat class="card-style pa-2" dark> |
| 6 | <v-layout> | 6 | <v-layout> |
| 7 | <v-flex xs12> | 7 | <v-flex xs12> |
| 8 | <label class="title text-xs-center">Edit Holiday</label> | 8 | <label class="title text-xs-center">Edit Holiday</label> |
| 9 | <v-icon size="24" class="right" @click="editHolidayDialog = false">cancel</v-icon> | 9 | <v-icon size="24" class="right" @click="editHolidayDialog = 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-flex xs12 sm12> | 13 | <v-flex xs12 sm12> |
| 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">Occasion:</label> | 16 | <label class="right">Occasion:</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 | 19 | <v-text-field |
| 20 | v-model="editedItem.occasion" | 20 | v-model="editedItem.occasion" |
| 21 | placeholder="fill your Occasion" | 21 | placeholder="fill your Occasion" |
| 22 | name="name" | 22 | name="name" |
| 23 | type="text" | 23 | type="text" |
| 24 | ></v-text-field> | 24 | ></v-text-field> |
| 25 | </v-flex> | 25 | </v-flex> |
| 26 | </v-layout> | 26 | </v-layout> |
| 27 | </v-flex> | 27 | </v-flex> |
| 28 | <v-flex xs12 sm12> | 28 | <v-flex xs12 sm12> |
| 29 | <v-layout> | 29 | <v-layout> |
| 30 | <v-flex xs4 class="pt-4 subheading"> | 30 | <v-flex xs4 class="pt-4 subheading"> |
| 31 | <label class="right">Date:</label> | 31 | <label class="right">Date:</label> |
| 32 | </v-flex> | 32 | </v-flex> |
| 33 | <v-flex xs8 class="ml-3"> | 33 | <v-flex xs8 class="ml-3"> |
| 34 | <v-menu | 34 | <v-menu |
| 35 | ref="menu" | 35 | ref="menu" |
| 36 | :close-on-content-click="false" | 36 | :close-on-content-click="false" |
| 37 | :return-value.sync="editedItem.dateOfHoliday" | 37 | :return-value.sync="editedItem.dateOfHoliday" |
| 38 | v-model="menu" | 38 | v-model="menu" |
| 39 | :nudge-right="40" | 39 | :nudge-right="40" |
| 40 | lazy | 40 | lazy |
| 41 | transition="scale-transition" | 41 | transition="scale-transition" |
| 42 | offset-y | 42 | offset-y |
| 43 | full-width | 43 | full-width |
| 44 | min-width="290px" | 44 | min-width="290px" |
| 45 | > | 45 | > |
| 46 | <v-text-field | 46 | <v-text-field |
| 47 | slot="activator" | 47 | slot="activator" |
| 48 | :rules="dateRules" | 48 | :rules="dateRules" |
| 49 | v-model="editedItem.dateOfHoliday" | 49 | v-model="editedItem.dateOfHoliday" |
| 50 | append-icon="event" | 50 | append-icon="event" |
| 51 | placeholder="Select date" | 51 | placeholder="Select date" |
| 52 | ></v-text-field> | 52 | ></v-text-field> |
| 53 | <v-date-picker | 53 | <v-date-picker |
| 54 | ref="picker" | 54 | ref="picker" |
| 55 | color="info" | 55 | color="info" |
| 56 | v-model="editedItem.dateOfHoliday" | 56 | v-model="editedItem.dateOfHoliday" |
| 57 | @input="$refs.menu.save(editedItem.dateOfHoliday)" | 57 | @input="$refs.menu.save(editedItem.dateOfHoliday)" |
| 58 | ></v-date-picker> | 58 | ></v-date-picker> |
| 59 | </v-menu> | 59 | </v-menu> |
| 60 | </v-flex> | 60 | </v-flex> |
| 61 | </v-layout> | 61 | </v-layout> |
| 62 | </v-flex> | 62 | </v-flex> |
| 63 | <v-layout> | 63 | <v-layout> |
| 64 | <v-flex xs12 sm12> | 64 | <v-flex xs12 sm12> |
| 65 | <v-card-actions class="hidden-xs-only hidden-sm-only"> | 65 | <v-card-actions class="hidden-xs-only hidden-sm-only"> |
| 66 | <v-spacer></v-spacer> | 66 | <v-spacer></v-spacer> |
| 67 | <v-btn round dark @click="save" class="add-button">Save</v-btn> | 67 | <v-btn round dark @click="save" class="add-button">Save</v-btn> |
| 68 | </v-card-actions> | 68 | </v-card-actions> |
| 69 | <v-card-actions class="hidden-md-only hidden-lg-only hidden-xl-only"> | 69 | <v-card-actions class="hidden-md-only hidden-lg-only hidden-xl-only"> |
| 70 | <v-spacer></v-spacer> | 70 | <v-spacer></v-spacer> |
| 71 | <v-btn round dark @click="save" class="add-button">Save</v-btn> | 71 | <v-btn round dark @click="save" class="add-button">Save</v-btn> |
| 72 | <v-spacer></v-spacer> | 72 | <v-spacer></v-spacer> |
| 73 | </v-card-actions> | 73 | </v-card-actions> |
| 74 | </v-flex> | 74 | </v-flex> |
| 75 | </v-layout> | 75 | </v-layout> |
| 76 | </v-container> | 76 | </v-container> |
| 77 | </v-card> | 77 | </v-card> |
| 78 | </v-dialog> | 78 | </v-dialog> |
| 79 | 79 | ||
| 80 | <!-- ****** PROFILE VIEW Holiday DEATILS ****** --> | 80 | <!-- ****** PROFILE VIEW Holiday DEATILS ****** --> |
| 81 | 81 | ||
| 82 | <v-dialog v-model="viewHolidayDialog" max-width="500px"> | 82 | <v-dialog v-model="viewHolidayDialog" max-width="500px"> |
| 83 | <v-card flat class="card-style pa-3" dark> | 83 | <v-card flat class="card-style pa-3" dark> |
| 84 | <v-layout> | 84 | <v-layout> |
| 85 | <v-flex xs12> | 85 | <v-flex xs12> |
| 86 | <label class="title text-xs-center">View Holiday</label> | 86 | <label class="title text-xs-center">View Holiday</label> |
| 87 | <v-icon size="24" class="right" @click="viewHolidayDialog = false">cancel</v-icon> | 87 | <v-icon size="24" class="right" @click="viewHolidayDialog = false">cancel</v-icon> |
| 88 | </v-flex> | 88 | </v-flex> |
| 89 | </v-layout> | 89 | </v-layout> |
| 90 | <v-card-text> | 90 | <v-card-text> |
| 91 | <v-container grid-list-md> | 91 | <v-container grid-list-md> |
| 92 | <v-layout wrap> | 92 | <v-layout wrap> |
| 93 | <v-flex> | 93 | <v-flex> |
| 94 | <v-layout> | 94 | <v-layout> |
| 95 | <v-flex xs4 sm6> | 95 | <v-flex xs4 sm6> |
| 96 | <h5 class="right my-1"> | 96 | <h5 class="right my-1"> |
| 97 | <b>Occasion:</b> | 97 | <b>Occasion:</b> |
| 98 | </h5> | 98 | </h5> |
| 99 | </v-flex> | 99 | </v-flex> |
| 100 | <v-flex sm6 xs8> | 100 | <v-flex sm6 xs8> |
| 101 | <h5 class="my-1">{{ editedItem.occasion }}</h5> | 101 | <h5 class="my-1">{{ editedItem.occasion }}</h5> |
| 102 | </v-flex> | 102 | </v-flex> |
| 103 | </v-layout> | 103 | </v-layout> |
| 104 | <v-layout> | 104 | <v-layout> |
| 105 | <v-flex xs4 sm6> | 105 | <v-flex xs4 sm6> |
| 106 | <h5 class="right my-1"> | 106 | <h5 class="right my-1"> |
| 107 | <b>Date:</b> | 107 | <b>Date:</b> |
| 108 | </h5> | 108 | </h5> |
| 109 | </v-flex> | 109 | </v-flex> |
| 110 | <v-flex sm6 xs8> | 110 | <v-flex sm6 xs8> |
| 111 | <h5 class="my-1">{{ editedItem.dateOfHoliday }}</h5> | 111 | <h5 class="my-1">{{ editedItem.dateOfHoliday }}</h5> |
| 112 | </v-flex> | 112 | </v-flex> |
| 113 | </v-layout> | 113 | </v-layout> |
| 114 | </v-flex> | 114 | </v-flex> |
| 115 | </v-layout> | 115 | </v-layout> |
| 116 | </v-container> | 116 | </v-container> |
| 117 | </v-card-text> | 117 | </v-card-text> |
| 118 | </v-card> | 118 | </v-card> |
| 119 | </v-dialog> | 119 | </v-dialog> |
| 120 | <!-- ****** Holiday TABLE ****** --> | 120 | <!-- ****** Holiday TABLE ****** --> |
| 121 | <v-toolbar color="transparent" flat> | 121 | <v-toolbar color="transparent" flat> |
| 122 | <v-btn | 122 | <v-btn |
| 123 | fab | 123 | fab |
| 124 | dark | 124 | dark |
| 125 | class="open-dialog-button hidden-xl-only hidden-md-only hidden-lg-only" | 125 | class="open-dialog-button hidden-xl-only hidden-md-only hidden-lg-only" |
| 126 | small | 126 | small |
| 127 | @click="addHolidayDialog = true" | 127 | @click="addHolidayDialog = true" |
| 128 | > | 128 | > |
| 129 | <v-icon dark>add</v-icon> | 129 | <v-icon dark>add</v-icon> |
| 130 | </v-btn> | 130 | </v-btn> |
| 131 | <v-btn | 131 | <v-btn |
| 132 | round | 132 | round |
| 133 | class="open-dialog-button hidden-sm-only hidden-xs-only" | 133 | class="open-dialog-button hidden-sm-only hidden-xs-only" |
| 134 | dark | 134 | dark |
| 135 | @click="addHolidayDialog = true" | 135 | @click="addHolidayDialog = true" |
| 136 | > | 136 | > |
| 137 | <v-icon class="white--text pr-1" size="20">add</v-icon>Add Holiday | 137 | <v-icon class="white--text pr-1" size="20">add</v-icon>Add Holiday |
| 138 | </v-btn> | 138 | </v-btn> |
| 139 | <v-spacer></v-spacer> | 139 | <v-spacer></v-spacer> |
| 140 | <v-card-title class="body-1" v-show="show"> | 140 | <v-card-title class="body-1" v-show="show"> |
| 141 | <v-btn icon large flat @click="displaySearch"> | 141 | <v-btn icon large flat @click="displaySearch"> |
| 142 | <v-avatar size="27"> | 142 | <v-avatar size="27"> |
| 143 | <img src="/static/icon/dashboard icons-49.png" alt="icon" /> | 143 | <img src="/static/icon/search.png" alt="icon" /> |
| 144 | </v-avatar> | 144 | </v-avatar> |
| 145 | </v-btn> | 145 | </v-btn> |
| 146 | </v-card-title> | 146 | </v-card-title> |
| 147 | <v-flex xs8 sm8 md3 lg2 v-show="showSearch"> | 147 | <v-flex xs8 sm8 md3 lg2 v-show="showSearch"> |
| 148 | <v-layout> | 148 | <v-layout> |
| 149 | <v-text-field v-model="search" label="Search" prepend-inner-icon="search" color="primary"></v-text-field> | 149 | <v-text-field v-model="search" label="Search" prepend-inner-icon="search" color="primary"></v-text-field> |
| 150 | <v-icon @click="closeSearch" color="error">close</v-icon> | 150 | <v-icon @click="closeSearch" color="error">close</v-icon> |
| 151 | </v-layout> | 151 | </v-layout> |
| 152 | </v-flex> | 152 | </v-flex> |
| 153 | </v-toolbar> | 153 | </v-toolbar> |
| 154 | <v-data-table | 154 | <v-data-table |
| 155 | :headers="headers" | 155 | :headers="headers" |
| 156 | :items="holidays" | 156 | :items="holidays" |
| 157 | :pagination.sync="pagination" | 157 | :pagination.sync="pagination" |
| 158 | :search="search" | 158 | :search="search" |
| 159 | > | 159 | > |
| 160 | <template slot="items" slot-scope="props"> | 160 | <template slot="items" slot-scope="props"> |
| 161 | <tr class="tr"> | 161 | <tr class="tr"> |
| 162 | <td class="td td-row">{{ props.index + 1}}</td> | 162 | <td class="td td-row">{{ props.index + 1}}</td> |
| 163 | <td class="text-xs-center td td-row">{{ props.item.occasion}}</td> | 163 | <td class="text-xs-center td td-row">{{ props.item.occasion}}</td> |
| 164 | <td class="text-xs-center td td-row">{{ dates(props.item.dateOfHoliday) }}</td> | 164 | <td class="text-xs-center td td-row">{{ dates(props.item.dateOfHoliday) }}</td> |
| 165 | <td class="text-xs-center td td-row"> | 165 | <td class="text-xs-center td td-row"> |
| 166 | <span> | 166 | <span> |
| 167 | <v-tooltip top> | 167 | <v-tooltip top> |
| 168 | <img | 168 | <img |
| 169 | slot="activator" | 169 | slot="activator" |
| 170 | style="cursor:pointer; width:25px; height:25px; " | 170 | style="cursor:pointer; width:25px; height:25px; " |
| 171 | class="mr-3" | 171 | class="mr-3" |
| 172 | @click="profile(props.item)" | 172 | @click="profile(props.item)" |
| 173 | src="/static/icon/dashboard icons-47.png" | 173 | src="/static/icon/view.png" |
| 174 | /> | 174 | /> |
| 175 | <span>View</span> | 175 | <span>View</span> |
| 176 | </v-tooltip> | 176 | </v-tooltip> |
| 177 | <v-tooltip top> | 177 | <v-tooltip top> |
| 178 | <img | 178 | <img |
| 179 | slot="activator" | 179 | slot="activator" |
| 180 | style="cursor:pointer; width:20px; height:18px; " | 180 | style="cursor:pointer; width:20px; height:18px; " |
| 181 | class="mr-3" | 181 | class="mr-3" |
| 182 | @click="editItem(props.item)" | 182 | @click="editItem(props.item)" |
| 183 | src="/static/icon/dashboard icons-50.png" | 183 | src="/static/icon/edit.png" |
| 184 | /> | 184 | /> |
| 185 | <span>Edit</span> | 185 | <span>Edit</span> |
| 186 | </v-tooltip> | 186 | </v-tooltip> |
| 187 | <v-tooltip top> | 187 | <v-tooltip top> |
| 188 | <img | 188 | <img |
| 189 | slot="activator" | 189 | slot="activator" |
| 190 | style="cursor:pointer; width:20px; height:20px; " | 190 | style="cursor:pointer; width:20px; height:20px; " |
| 191 | class="mr-3" | 191 | class="mr-3" |
| 192 | @click="deleteItem(props.item)" | 192 | @click="deleteItem(props.item)" |
| 193 | src="/static/icon/dashboard icons-51.png" | 193 | src="/static/icon/delete.png" |
| 194 | /> | 194 | /> |
| 195 | <span>Delete</span> | 195 | <span>Delete</span> |
| 196 | </v-tooltip> | 196 | </v-tooltip> |
| 197 | </span> | 197 | </span> |
| 198 | </td> | 198 | </td> |
| 199 | </tr> | 199 | </tr> |
| 200 | </template> | 200 | </template> |
| 201 | <v-alert | 201 | <v-alert |
| 202 | slot="no-results" | 202 | slot="no-results" |
| 203 | :value="true" | 203 | :value="true" |
| 204 | color="error" | 204 | color="error" |
| 205 | icon="warning" | 205 | icon="warning" |
| 206 | >Your search for "{{ search }}" found no results.</v-alert> | 206 | >Your search for "{{ search }}" found no results.</v-alert> |
| 207 | </v-data-table> | 207 | </v-data-table> |
| 208 | <!-- ****** ADD MULTIPLE Holiday ****** --> | 208 | <!-- ****** ADD MULTIPLE Holiday ****** --> |
| 209 | <v-dialog v-model="addHolidayDialog" max-width="400px"> | 209 | <v-dialog v-model="addHolidayDialog" max-width="400px"> |
| 210 | <v-card flat class="card-style pa-3" dark> | 210 | <v-card flat class="card-style pa-3" dark> |
| 211 | <v-layout> | 211 | <v-layout> |
| 212 | <v-flex xs12> | 212 | <v-flex xs12> |
| 213 | <label class="title text-xs-center">Add Holiday</label> | 213 | <label class="title text-xs-center">Add Holiday</label> |
| 214 | <v-icon size="24" class="right" @click="addHolidayDialog = false">cancel</v-icon> | 214 | <v-icon size="24" class="right" @click="addHolidayDialog = false">cancel</v-icon> |
| 215 | </v-flex> | 215 | </v-flex> |
| 216 | </v-layout> | 216 | </v-layout> |
| 217 | <v-form ref="form" v-model="valid" lazy-validation> | 217 | <v-form ref="form" v-model="valid" lazy-validation> |
| 218 | <v-container fluid> | 218 | <v-container fluid> |
| 219 | <v-flex xs12> | 219 | <v-flex xs12> |
| 220 | <v-layout> | 220 | <v-layout> |
| 221 | <v-flex xs4 class="pt-4 subheading"> | 221 | <v-flex xs4 class="pt-4 subheading"> |
| 222 | <label class="right">Occasion:</label> | 222 | <label class="right">Occasion:</label> |
| 223 | </v-flex> | 223 | </v-flex> |
| 224 | <v-flex xs8 sm8 class="ml-3"> | 224 | <v-flex xs8 sm8 class="ml-3"> |
| 225 | <v-text-field | 225 | <v-text-field |
| 226 | v-model="addHoliday.occasion" | 226 | v-model="addHoliday.occasion" |
| 227 | placeholder="fill your Occasion" | 227 | placeholder="fill your Occasion" |
| 228 | type="text" | 228 | type="text" |
| 229 | :rules="occasionRules" | 229 | :rules="occasionRules" |
| 230 | required | 230 | required |
| 231 | ></v-text-field> | 231 | ></v-text-field> |
| 232 | </v-flex> | 232 | </v-flex> |
| 233 | </v-layout> | 233 | </v-layout> |
| 234 | </v-flex> | 234 | </v-flex> |
| 235 | <v-flex xs12> | 235 | <v-flex xs12> |
| 236 | <v-layout> | 236 | <v-layout> |
| 237 | <v-flex xs4 class="pt-4 subheading"> | 237 | <v-flex xs4 class="pt-4 subheading"> |
| 238 | <label class="right">Date:</label> | 238 | <label class="right">Date:</label> |
| 239 | </v-flex> | 239 | </v-flex> |
| 240 | <v-flex xs8 sm8 class="ml-3"> | 240 | <v-flex xs8 sm8 class="ml-3"> |
| 241 | <v-menu | 241 | <v-menu |
| 242 | ref="menu1" | 242 | ref="menu1" |
| 243 | :close-on-content-click="false" | 243 | :close-on-content-click="false" |
| 244 | v-model="menu1" | 244 | v-model="menu1" |
| 245 | :nudge-right="40" | 245 | :nudge-right="40" |
| 246 | :return-value.sync="addHoliday.dateOfHoliday" | 246 | :return-value.sync="addHoliday.dateOfHoliday" |
| 247 | lazy | 247 | lazy |
| 248 | transition="scale-transition" | 248 | transition="scale-transition" |
| 249 | offset-y | 249 | offset-y |
| 250 | full-width | 250 | full-width |
| 251 | min-width="290px" | 251 | min-width="290px" |
| 252 | > | 252 | > |
| 253 | <v-text-field | 253 | <v-text-field |
| 254 | slot="activator" | 254 | slot="activator" |
| 255 | :rules="dateRules" | 255 | :rules="dateRules" |
| 256 | v-model="addHoliday.dateOfHoliday" | 256 | v-model="addHoliday.dateOfHoliday" |
| 257 | append-icon="event" | 257 | append-icon="event" |
| 258 | label="Select date" | 258 | label="Select date" |
| 259 | ></v-text-field> | 259 | ></v-text-field> |
| 260 | <v-date-picker | 260 | <v-date-picker |
| 261 | ref="picker" | 261 | ref="picker" |
| 262 | color="info" | 262 | color="info" |
| 263 | v-model="addHoliday.dateOfHoliday" | 263 | v-model="addHoliday.dateOfHoliday" |
| 264 | @input="$refs.menu1.save(addHoliday.dateOfHoliday)" | 264 | @input="$refs.menu1.save(addHoliday.dateOfHoliday)" |
| 265 | ></v-date-picker> | 265 | ></v-date-picker> |
| 266 | </v-menu> | 266 | </v-menu> |
| 267 | </v-flex> | 267 | </v-flex> |
| 268 | </v-layout> | 268 | </v-layout> |
| 269 | </v-flex> | 269 | </v-flex> |
| 270 | <v-layout> | 270 | <v-layout> |
| 271 | <v-flex xs12> | 271 | <v-flex xs12> |
| 272 | <v-layout class="right"> | 272 | <v-layout class="right"> |
| 273 | <v-btn @click="clear" round class="clear-button" dark>clear</v-btn> | 273 | <v-btn @click="clear" round class="clear-button" dark>clear</v-btn> |
| 274 | <v-btn @click="submit" round dark :loading="loading" class="add-button">Add</v-btn> | 274 | <v-btn @click="submit" round dark :loading="loading" class="add-button">Add</v-btn> |
| 275 | </v-layout> | 275 | </v-layout> |
| 276 | </v-flex> | 276 | </v-flex> |
| 277 | </v-layout> | 277 | </v-layout> |
| 278 | </v-container> | 278 | </v-container> |
| 279 | </v-form> | 279 | </v-form> |
| 280 | </v-card> | 280 | </v-card> |
| 281 | </v-dialog> | 281 | </v-dialog> |
| 282 | <v-snackbar | 282 | <v-snackbar |
| 283 | :timeout="timeout" | 283 | :timeout="timeout" |
| 284 | :top="y === 'top'" | 284 | :top="y === 'top'" |
| 285 | :right="x === 'right'" | 285 | :right="x === 'right'" |
| 286 | :vertical="mode === 'vertical'" | 286 | :vertical="mode === 'vertical'" |
| 287 | v-model="snackbar" | 287 | v-model="snackbar" |
| 288 | :color="color" | 288 | :color="color" |
| 289 | >{{ text }}</v-snackbar> | 289 | >{{ text }}</v-snackbar> |
| 290 | <div class="loader" v-if="showLoader"> | 290 | <div class="loader" v-if="showLoader"> |
| 291 | <v-progress-circular indeterminate color="white"></v-progress-circular> | 291 | <v-progress-circular indeterminate color="white"></v-progress-circular> |
| 292 | </div> | 292 | </div> |
| 293 | </v-container> | 293 | </v-container> |
| 294 | </template> | 294 | </template> |
| 295 | 295 | ||
| 296 | <script> | 296 | <script> |
| 297 | import http from "@/Services/http.js"; | 297 | import http from "@/Services/http.js"; |
| 298 | import moment from "moment"; | 298 | import moment from "moment"; |
| 299 | 299 | ||
| 300 | export default { | 300 | export default { |
| 301 | data: () => ({ | 301 | data: () => ({ |
| 302 | snackbar: false, | 302 | snackbar: false, |
| 303 | y: "top", | 303 | y: "top", |
| 304 | x: "right", | 304 | x: "right", |
| 305 | mode: "", | 305 | mode: "", |
| 306 | timeout: 3000, | 306 | timeout: 3000, |
| 307 | text: "", | 307 | text: "", |
| 308 | loading: false, | 308 | loading: false, |
| 309 | date: null, | 309 | date: null, |
| 310 | search: "", | 310 | search: "", |
| 311 | color: "", | 311 | color: "", |
| 312 | show: true, | 312 | show: true, |
| 313 | addHolidayDialog: false, | 313 | addHolidayDialog: false, |
| 314 | showSearch: false, | 314 | showSearch: false, |
| 315 | showLoader: false, | 315 | showLoader: false, |
| 316 | editHolidayDialog: false, | 316 | editHolidayDialog: false, |
| 317 | viewHolidayDialog: false, | 317 | viewHolidayDialog: false, |
| 318 | valid: true, | 318 | valid: true, |
| 319 | pagination: { | 319 | pagination: { |
| 320 | rowsPerPage: 10 | 320 | rowsPerPage: 10 |
| 321 | }, | 321 | }, |
| 322 | date: null, | 322 | date: null, |
| 323 | menu1: false, | 323 | menu1: false, |
| 324 | menu: false, | 324 | menu: false, |
| 325 | occasionRules: [v => !!v || "Occasion is required"], | 325 | occasionRules: [v => !!v || "Occasion is required"], |
| 326 | dateRules: [v => !!v || "Date is required"], | 326 | dateRules: [v => !!v || "Date is required"], |
| 327 | headers: [ | 327 | headers: [ |
| 328 | { | 328 | { |
| 329 | text: "No", | 329 | text: "No", |
| 330 | align: "", | 330 | align: "", |
| 331 | sortable: false, | 331 | sortable: false, |
| 332 | value: "No" | 332 | value: "No" |
| 333 | }, | 333 | }, |
| 334 | { text: "Occasion", value: "occasion", sortable: false, align: "center" }, | 334 | { text: "Occasion", value: "occasion", sortable: false, align: "center" }, |
| 335 | { | 335 | { |
| 336 | text: "Date Of Holiday", | 336 | text: "Date Of Holiday", |
| 337 | value: "dateOfHoliday", | 337 | value: "dateOfHoliday", |
| 338 | sortable: false, | 338 | sortable: false, |
| 339 | align: "center" | 339 | align: "center" |
| 340 | }, | 340 | }, |
| 341 | { text: "Action", value: "", sortable: false, align: "center" } | 341 | { text: "Action", value: "", sortable: false, align: "center" } |
| 342 | ], | 342 | ], |
| 343 | holidays: [], | 343 | holidays: [], |
| 344 | editedIndex: -1, | 344 | editedIndex: -1, |
| 345 | addHoliday: {}, | 345 | addHoliday: {}, |
| 346 | editedItem: {} | 346 | editedItem: {} |
| 347 | }), | 347 | }), |
| 348 | methods: { | 348 | methods: { |
| 349 | dates: function(date) { | 349 | dates: function(date) { |
| 350 | return moment(date).format("MMMM DD, YYYY"); | 350 | return moment(date).format("MMMM DD, YYYY"); |
| 351 | }, | 351 | }, |
| 352 | getHolidays() { | 352 | getHolidays() { |
| 353 | this.showLoader = true; | 353 | this.showLoader = true; |
| 354 | var token = this.$store.state.token; | 354 | var token = this.$store.state.token; |
| 355 | http() | 355 | http() |
| 356 | .get("/getHolidaysList", { | 356 | .get("/getHolidaysList", { |
| 357 | headers: { Authorization: "Bearer " + token } | 357 | headers: { Authorization: "Bearer " + token } |
| 358 | }) | 358 | }) |
| 359 | .then(response => { | 359 | .then(response => { |
| 360 | this.holidays = response.data.data; | 360 | this.holidays = response.data.data; |
| 361 | this.showLoader = false; | 361 | this.showLoader = false; |
| 362 | }) | 362 | }) |
| 363 | .catch(err => { | 363 | .catch(err => { |
| 364 | this.showLoader = false; | 364 | this.showLoader = false; |
| 365 | if (error.response.status === 401) { | 365 | if (error.response.status === 401) { |
| 366 | this.$router.replace({ path: "/" }); | 366 | this.$router.replace({ path: "/" }); |
| 367 | this.$store.dispatch("setToken", null); | 367 | this.$store.dispatch("setToken", null); |
| 368 | this.$store.dispatch("Id", null); | 368 | this.$store.dispatch("Id", null); |
| 369 | } | 369 | } |
| 370 | }); | 370 | }); |
| 371 | }, | 371 | }, |
| 372 | editItem(item) { | 372 | editItem(item) { |
| 373 | this.editedIndex = this.holidays.indexOf(item); | 373 | this.editedIndex = this.holidays.indexOf(item); |
| 374 | this.editedItem = Object.assign({}, item); | 374 | this.editedItem = Object.assign({}, item); |
| 375 | this.editedItem.holidayId = item._id; | 375 | this.editedItem.holidayId = item._id; |
| 376 | this.editHolidayDialog = true; | 376 | this.editHolidayDialog = true; |
| 377 | }, | 377 | }, |
| 378 | profile(item) { | 378 | profile(item) { |
| 379 | this.editedIndex = this.holidays.indexOf(item); | 379 | this.editedIndex = this.holidays.indexOf(item); |
| 380 | this.editedItem = Object.assign({}, item); | 380 | this.editedItem = Object.assign({}, item); |
| 381 | this.viewHolidayDialog = true; | 381 | this.viewHolidayDialog = true; |
| 382 | }, | 382 | }, |
| 383 | 383 | ||
| 384 | deleteItem(item) { | 384 | deleteItem(item) { |
| 385 | let deleteHoliday = { | 385 | let deleteHoliday = { |
| 386 | holidayId: item._id | 386 | holidayId: item._id |
| 387 | }; | 387 | }; |
| 388 | http() | 388 | http() |
| 389 | .delete( | 389 | .delete( |
| 390 | "/deleteHoliday", | 390 | "/deleteHoliday", |
| 391 | confirm("Are you sure you want to delete this?") && { | 391 | confirm("Are you sure you want to delete this?") && { |
| 392 | params: deleteHoliday | 392 | params: deleteHoliday |
| 393 | } | 393 | } |
| 394 | ) | 394 | ) |
| 395 | .then(response => { | 395 | .then(response => { |
| 396 | this.snackbar = true; | 396 | this.snackbar = true; |
| 397 | this.text = response.data.message; | 397 | this.text = response.data.message; |
| 398 | this.color = "green"; | 398 | this.color = "green"; |
| 399 | this.getHolidays(); | 399 | this.getHolidays(); |
| 400 | }) | 400 | }) |
| 401 | .catch(error => { | 401 | .catch(error => { |
| 402 | this.snackbar = true; | 402 | this.snackbar = true; |
| 403 | this.text = error.response.data.message; | 403 | this.text = error.response.data.message; |
| 404 | this.color = "error"; | 404 | this.color = "error"; |
| 405 | }); | 405 | }); |
| 406 | }, | 406 | }, |
| 407 | close() { | 407 | close() { |
| 408 | this.editHolidayDialog = false; | 408 | this.editHolidayDialog = false; |
| 409 | }, | 409 | }, |
| 410 | submit() { | 410 | submit() { |
| 411 | if (this.$refs.form.validate()) { | 411 | if (this.$refs.form.validate()) { |
| 412 | this.loading = true; | 412 | this.loading = true; |
| 413 | http() | 413 | http() |
| 414 | .post("/createHoliday", this.addHoliday) | 414 | .post("/createHoliday", this.addHoliday) |
| 415 | .then(response => { | 415 | .then(response => { |
| 416 | this.snackbar = true; | 416 | this.snackbar = true; |
| 417 | this.text = response.data.message; | 417 | this.text = response.data.message; |
| 418 | this.color = "green"; | 418 | this.color = "green"; |
| 419 | this.getHolidays(); | 419 | this.getHolidays(); |
| 420 | this.addHolidayDialog = false; | 420 | this.addHolidayDialog = false; |
| 421 | this.clear(); | 421 | this.clear(); |
| 422 | this.loading = false; | 422 | this.loading = false; |
| 423 | }) | 423 | }) |
| 424 | .catch(error => { | 424 | .catch(error => { |
| 425 | this.snackbar = true; | 425 | this.snackbar = true; |
| 426 | this.text = error.response.data.message; | 426 | this.text = error.response.data.message; |
| 427 | this.loading = false; | 427 | this.loading = false; |
| 428 | this.color = "error"; | 428 | this.color = "error"; |
| 429 | }); | 429 | }); |
| 430 | } | 430 | } |
| 431 | }, | 431 | }, |
| 432 | clear() { | 432 | clear() { |
| 433 | this.$refs.form.reset(); | 433 | this.$refs.form.reset(); |
| 434 | }, | 434 | }, |
| 435 | save() { | 435 | save() { |
| 436 | http() | 436 | http() |
| 437 | .put("/updateHoliday", this.editedItem) | 437 | .put("/updateHoliday", this.editedItem) |
| 438 | .then(response => { | 438 | .then(response => { |
| 439 | this.snackbar = true; | 439 | this.snackbar = true; |
| 440 | this.text = response.data.message; | 440 | this.text = response.data.message; |
| 441 | this.getHolidays(); | 441 | this.getHolidays(); |
| 442 | this.color = "green"; | 442 | this.color = "green"; |
| 443 | this.close(); | 443 | this.close(); |
| 444 | }) | 444 | }) |
| 445 | .catch(error => { | 445 | .catch(error => { |
| 446 | this.snackbar = true; | 446 | this.snackbar = true; |
| 447 | this.text = error.response.data.message; | 447 | this.text = error.response.data.message; |
| 448 | this.loading = false; | 448 | this.loading = false; |
| 449 | this.color = "error"; | 449 | this.color = "error"; |
| 450 | }); | 450 | }); |
| 451 | }, | 451 | }, |
| 452 | displaySearch() { | 452 | displaySearch() { |
| 453 | (this.show = false), (this.showSearch = true); | 453 | (this.show = false), (this.showSearch = true); |
| 454 | }, | 454 | }, |
| 455 | closeSearch() { | 455 | closeSearch() { |
| 456 | this.showSearch = false; | 456 | this.showSearch = false; |
| 457 | this.show = true; | 457 | this.show = true; |
| 458 | this.search = ""; | 458 | this.search = ""; |
| 459 | } | 459 | } |
| 460 | }, | 460 | }, |
| 461 | mounted() { | 461 | mounted() { |
| 462 | this.getHolidays(); | 462 | this.getHolidays(); |
| 463 | } | 463 | } |
| 464 | }; | 464 | }; |
| 465 | </script> | 465 | </script> |
src/pages/Library/books.vue
| 1 | <template> | 1 | <template> |
| 2 | <v-container fluid class="body-color"> | 2 | <v-container fluid class="body-color"> |
| 3 | <!-- ****** Edit Member ****** --> | 3 | <!-- ****** Edit Member ****** --> |
| 4 | <v-dialog v-model="editBookDialog" max-width="500px"> | 4 | <v-dialog v-model="editBookDialog" max-width="500px"> |
| 5 | <v-card flat class="card-style pa-2" dark> | 5 | <v-card flat class="card-style pa-2" dark> |
| 6 | <v-layout> | 6 | <v-layout> |
| 7 | <v-flex xs12> | 7 | <v-flex xs12> |
| 8 | <label class="title text-xs-center">Edit Book</label> | 8 | <label class="title text-xs-center">Edit Book</label> |
| 9 | <v-icon size="24" class="right" @click="editBookDialog = false">cancel</v-icon> | 9 | <v-icon size="24" class="right" @click="editBookDialog = 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-container> | 13 | <v-container> |
| 14 | <v-layout wrap justify-center> | 14 | <v-layout wrap justify-center> |
| 15 | <v-flex xs12> | 15 | <v-flex xs12> |
| 16 | <v-form> | 16 | <v-form> |
| 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 pr-3">Name:</label> | 19 | <label class="right pr-3">Name:</label> |
| 20 | </v-flex> | 20 | </v-flex> |
| 21 | <v-flex xs8> | 21 | <v-flex xs8> |
| 22 | <v-text-field v-model="editedItem.name" placeholder="fill your Name"></v-text-field> | 22 | <v-text-field v-model="editedItem.name" placeholder="fill your Name"></v-text-field> |
| 23 | </v-flex> | 23 | </v-flex> |
| 24 | </v-layout> | 24 | </v-layout> |
| 25 | <v-layout> | 25 | <v-layout> |
| 26 | <v-flex xs4 class="pt-4 subheading"> | 26 | <v-flex xs4 class="pt-4 subheading"> |
| 27 | <label class="right pr-3">Author:</label> | 27 | <label class="right pr-3">Author:</label> |
| 28 | </v-flex> | 28 | </v-flex> |
| 29 | <v-flex xs8> | 29 | <v-flex xs8> |
| 30 | <v-text-field v-model="editedItem.author" placeholder="fill your Author Name"></v-text-field> | 30 | <v-text-field v-model="editedItem.author" placeholder="fill your Author Name"></v-text-field> |
| 31 | </v-flex> | 31 | </v-flex> |
| 32 | </v-layout> | 32 | </v-layout> |
| 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 pr-3">Subject Code:</label> | 35 | <label class="right pr-3">Subject Code:</label> |
| 36 | </v-flex> | 36 | </v-flex> |
| 37 | <v-flex xs8> | 37 | <v-flex xs8> |
| 38 | <v-text-field | 38 | <v-text-field |
| 39 | v-model="editedItem.subjectCode" | 39 | v-model="editedItem.subjectCode" |
| 40 | placeholder="fill your Subject Code" | 40 | placeholder="fill your Subject Code" |
| 41 | ></v-text-field> | 41 | ></v-text-field> |
| 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 pr-3">Price:</label> | 46 | <label class="right pr-3">Price:</label> |
| 47 | </v-flex> | 47 | </v-flex> |
| 48 | <v-flex xs8> | 48 | <v-flex xs8> |
| 49 | <v-text-field | 49 | <v-text-field |
| 50 | v-model="editedItem.price" | 50 | v-model="editedItem.price" |
| 51 | placeholder="fill your Subject Code" | 51 | placeholder="fill your Subject Code" |
| 52 | ></v-text-field> | 52 | ></v-text-field> |
| 53 | </v-flex> | 53 | </v-flex> |
| 54 | </v-layout> | 54 | </v-layout> |
| 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 pr-3">Quantity:</label> | 57 | <label class="right pr-3">Quantity:</label> |
| 58 | </v-flex> | 58 | </v-flex> |
| 59 | <v-flex xs8> | 59 | <v-flex xs8> |
| 60 | <v-text-field | 60 | <v-text-field |
| 61 | v-model="editedItem.quantity" | 61 | v-model="editedItem.quantity" |
| 62 | type="number" | 62 | type="number" |
| 63 | placeholder="fill your Quantity" | 63 | placeholder="fill your Quantity" |
| 64 | ></v-text-field> | 64 | ></v-text-field> |
| 65 | </v-flex> | 65 | </v-flex> |
| 66 | </v-layout> | 66 | </v-layout> |
| 67 | <v-layout> | 67 | <v-layout> |
| 68 | <v-flex xs4 class="pt-4 subheading"> | 68 | <v-flex xs4 class="pt-4 subheading"> |
| 69 | <label class="right pr-3">Rack No:</label> | 69 | <label class="right pr-3">Rack No:</label> |
| 70 | </v-flex> | 70 | </v-flex> |
| 71 | <v-flex xs8> | 71 | <v-flex xs8> |
| 72 | <v-text-field v-model="editedItem.rackNo" placeholder="fill your Rack No"></v-text-field> | 72 | <v-text-field v-model="editedItem.rackNo" placeholder="fill your Rack No"></v-text-field> |
| 73 | </v-flex> | 73 | </v-flex> |
| 74 | </v-layout> | 74 | </v-layout> |
| 75 | <v-card-actions> | 75 | <v-card-actions> |
| 76 | <v-spacer></v-spacer> | 76 | <v-spacer></v-spacer> |
| 77 | <v-btn round dark @click="save" class="add-button">Save</v-btn> | 77 | <v-btn round dark @click="save" class="add-button">Save</v-btn> |
| 78 | <v-spacer></v-spacer> | 78 | <v-spacer></v-spacer> |
| 79 | </v-card-actions> | 79 | </v-card-actions> |
| 80 | </v-form> | 80 | </v-form> |
| 81 | </v-flex> | 81 | </v-flex> |
| 82 | </v-layout> | 82 | </v-layout> |
| 83 | </v-container> | 83 | </v-container> |
| 84 | </v-card-text> | 84 | </v-card-text> |
| 85 | </v-card> | 85 | </v-card> |
| 86 | </v-dialog> | 86 | </v-dialog> |
| 87 | 87 | ||
| 88 | <!-- ****** PROFILE VIEW BOOKS DATA ****** --> | 88 | <!-- ****** PROFILE VIEW BOOKS DATA ****** --> |
| 89 | 89 | ||
| 90 | <v-dialog v-model="viewBookDialog" max-width="500px"> | 90 | <v-dialog v-model="viewBookDialog" max-width="500px"> |
| 91 | <v-card flat class="card-style pa-3" dark> | 91 | <v-card flat class="card-style pa-3" dark> |
| 92 | <v-layout> | 92 | <v-layout> |
| 93 | <v-flex xs12> | 93 | <v-flex xs12> |
| 94 | <label class="title text-xs-center">View Book</label> | 94 | <label class="title text-xs-center">View Book</label> |
| 95 | <v-icon size="24" class="right" @click="viewBookDialog = false">cancel</v-icon> | 95 | <v-icon size="24" class="right" @click="viewBookDialog = false">cancel</v-icon> |
| 96 | </v-flex> | 96 | </v-flex> |
| 97 | </v-layout> | 97 | </v-layout> |
| 98 | <v-card-text> | 98 | <v-card-text> |
| 99 | <v-container grid-list-md> | 99 | <v-container grid-list-md> |
| 100 | <v-layout wrap> | 100 | <v-layout wrap> |
| 101 | <v-flex> | 101 | <v-flex> |
| 102 | <v-layout> | 102 | <v-layout> |
| 103 | <v-flex xs5 sm6> | 103 | <v-flex xs5 sm6> |
| 104 | <h5 class="right my-1"> | 104 | <h5 class="right my-1"> |
| 105 | <b>Name :</b> | 105 | <b>Name :</b> |
| 106 | </h5> | 106 | </h5> |
| 107 | </v-flex> | 107 | </v-flex> |
| 108 | <v-flex sm6 xs8> | 108 | <v-flex sm6 xs8> |
| 109 | <h5 class="my-1">{{ editedItem.name }}</h5> | 109 | <h5 class="my-1">{{ editedItem.name }}</h5> |
| 110 | </v-flex> | 110 | </v-flex> |
| 111 | </v-layout> | 111 | </v-layout> |
| 112 | <v-layout> | 112 | <v-layout> |
| 113 | <v-flex xs5 sm6> | 113 | <v-flex xs5 sm6> |
| 114 | <h5 class="right my-1"> | 114 | <h5 class="right my-1"> |
| 115 | <b>Author :</b> | 115 | <b>Author :</b> |
| 116 | </h5> | 116 | </h5> |
| 117 | </v-flex> | 117 | </v-flex> |
| 118 | <v-flex sm6 xs8> | 118 | <v-flex sm6 xs8> |
| 119 | <h5 class="my-1">{{ editedItem.author }}</h5> | 119 | <h5 class="my-1">{{ editedItem.author }}</h5> |
| 120 | </v-flex> | 120 | </v-flex> |
| 121 | </v-layout> | 121 | </v-layout> |
| 122 | <v-layout> | 122 | <v-layout> |
| 123 | <v-flex xs5 sm6> | 123 | <v-flex xs5 sm6> |
| 124 | <h5 class="right my-1"> | 124 | <h5 class="right my-1"> |
| 125 | <b>Subject Code :</b> | 125 | <b>Subject Code :</b> |
| 126 | </h5> | 126 | </h5> |
| 127 | </v-flex> | 127 | </v-flex> |
| 128 | <v-flex sm6 xs8> | 128 | <v-flex sm6 xs8> |
| 129 | <h5 class="my-1">{{ editedItem.subjectCode }}</h5> | 129 | <h5 class="my-1">{{ editedItem.subjectCode }}</h5> |
| 130 | </v-flex> | 130 | </v-flex> |
| 131 | </v-layout> | 131 | </v-layout> |
| 132 | <v-layout> | 132 | <v-layout> |
| 133 | <v-flex xs5 sm6> | 133 | <v-flex xs5 sm6> |
| 134 | <h5 class="right my-1"> | 134 | <h5 class="right my-1"> |
| 135 | <b>Price :</b> | 135 | <b>Price :</b> |
| 136 | </h5> | 136 | </h5> |
| 137 | </v-flex> | 137 | </v-flex> |
| 138 | <v-flex sm6 xs8> | 138 | <v-flex sm6 xs8> |
| 139 | <h5 class="my-1">{{ editedItem.price }}</h5> | 139 | <h5 class="my-1">{{ editedItem.price }}</h5> |
| 140 | </v-flex> | 140 | </v-flex> |
| 141 | </v-layout> | 141 | </v-layout> |
| 142 | <v-layout> | 142 | <v-layout> |
| 143 | <v-flex xs5 sm6> | 143 | <v-flex xs5 sm6> |
| 144 | <h5 class="right my-1"> | 144 | <h5 class="right my-1"> |
| 145 | <b>Quantity :</b> | 145 | <b>Quantity :</b> |
| 146 | </h5> | 146 | </h5> |
| 147 | </v-flex> | 147 | </v-flex> |
| 148 | <v-flex sm6 xs8> | 148 | <v-flex sm6 xs8> |
| 149 | <h5 class="my-1">{{ editedItem.quantity}}</h5> | 149 | <h5 class="my-1">{{ editedItem.quantity}}</h5> |
| 150 | </v-flex> | 150 | </v-flex> |
| 151 | </v-layout> | 151 | </v-layout> |
| 152 | <v-layout> | 152 | <v-layout> |
| 153 | <v-flex xs5 sm6> | 153 | <v-flex xs5 sm6> |
| 154 | <h5 class="right my-1"> | 154 | <h5 class="right my-1"> |
| 155 | <b>Rack No :</b> | 155 | <b>Rack No :</b> |
| 156 | </h5> | 156 | </h5> |
| 157 | </v-flex> | 157 | </v-flex> |
| 158 | <v-flex sm6 xs8> | 158 | <v-flex sm6 xs8> |
| 159 | <h5 class="my-1">{{ editedItem.rackNo}}</h5> | 159 | <h5 class="my-1">{{ editedItem.rackNo}}</h5> |
| 160 | </v-flex> | 160 | </v-flex> |
| 161 | </v-layout> | 161 | </v-layout> |
| 162 | </v-flex> | 162 | </v-flex> |
| 163 | </v-layout> | 163 | </v-layout> |
| 164 | </v-container> | 164 | </v-container> |
| 165 | </v-card-text> | 165 | </v-card-text> |
| 166 | </v-card> | 166 | </v-card> |
| 167 | </v-dialog> | 167 | </v-dialog> |
| 168 | <!-- ****** BOOKS TABLE ****** --> | 168 | <!-- ****** BOOKS TABLE ****** --> |
| 169 | 169 | ||
| 170 | <v-toolbar color="transparent" flat> | 170 | <v-toolbar color="transparent" flat> |
| 171 | <v-btn | 171 | <v-btn |
| 172 | fab | 172 | fab |
| 173 | dark | 173 | dark |
| 174 | class="open-dialog-button hidden-xl-only hidden-md-only hidden-lg-only" | 174 | class="open-dialog-button hidden-xl-only hidden-md-only hidden-lg-only" |
| 175 | small | 175 | small |
| 176 | @click="addBookDialog = true" | 176 | @click="addBookDialog = true" |
| 177 | > | 177 | > |
| 178 | <v-icon dark>add</v-icon> | 178 | <v-icon dark>add</v-icon> |
| 179 | </v-btn> | 179 | </v-btn> |
| 180 | <v-btn | 180 | <v-btn |
| 181 | round | 181 | round |
| 182 | class="open-dialog-button hidden-sm-only hidden-xs-only" | 182 | class="open-dialog-button hidden-sm-only hidden-xs-only" |
| 183 | dark | 183 | dark |
| 184 | @click="addBookDialog = true" | 184 | @click="addBookDialog = true" |
| 185 | > | 185 | > |
| 186 | <v-icon class="white--text pr-1" size="20">add</v-icon>Add Book | 186 | <v-icon class="white--text pr-1" size="20">add</v-icon>Add Book |
| 187 | </v-btn> | 187 | </v-btn> |
| 188 | <v-spacer></v-spacer> | 188 | <v-spacer></v-spacer> |
| 189 | <v-card-title class="body-1" v-show="show"> | 189 | <v-card-title class="body-1" v-show="show"> |
| 190 | <v-btn icon large flat @click="displaySearch"> | 190 | <v-btn icon large flat @click="displaySearch"> |
| 191 | <v-avatar size="27"> | 191 | <v-avatar size="27"> |
| 192 | <img src="/static/icon/dashboard icons-49.png" alt="icon" /> | 192 | <img src="/static/icon/search.png" alt="icon" /> |
| 193 | </v-avatar> | 193 | </v-avatar> |
| 194 | </v-btn> | 194 | </v-btn> |
| 195 | </v-card-title> | 195 | </v-card-title> |
| 196 | <v-flex xs8 sm8 md3 lg2 v-show="showSearch"> | 196 | <v-flex xs8 sm8 md3 lg2 v-show="showSearch"> |
| 197 | <v-layout> | 197 | <v-layout> |
| 198 | <v-text-field v-model="search" label="Search" prepend-inner-icon="search" color="primary"></v-text-field> | 198 | <v-text-field v-model="search" label="Search" prepend-inner-icon="search" color="primary"></v-text-field> |
| 199 | <v-icon @click="closeSearch" color="error">close</v-icon> | 199 | <v-icon @click="closeSearch" color="error">close</v-icon> |
| 200 | </v-layout> | 200 | </v-layout> |
| 201 | </v-flex> | 201 | </v-flex> |
| 202 | </v-toolbar> | 202 | </v-toolbar> |
| 203 | <v-data-table | 203 | <v-data-table |
| 204 | :headers="headers" | 204 | :headers="headers" |
| 205 | :items="bookData" | 205 | :items="bookData" |
| 206 | :pagination.sync="pagination" | 206 | :pagination.sync="pagination" |
| 207 | :search="search" | 207 | :search="search" |
| 208 | > | 208 | > |
| 209 | <template slot="items" slot-scope="props"> | 209 | <template slot="items" slot-scope="props"> |
| 210 | <td class="td td-row text-xs-center">{{ props.index + 1}}</td> | 210 | <td class="td td-row text-xs-center">{{ props.index + 1}}</td> |
| 211 | <td class="td td-row text-xs-center">{{ props.item.name }}</td> | 211 | <td class="td td-row text-xs-center">{{ props.item.name }}</td> |
| 212 | <td class="td td-row text-xs-center">{{ props.item.author }}</td> | 212 | <td class="td td-row text-xs-center">{{ props.item.author }}</td> |
| 213 | <td class="td td-row text-xs-center">{{ props.item.subjectCode }}</td> | 213 | <td class="td td-row text-xs-center">{{ props.item.subjectCode }}</td> |
| 214 | <td class="td td-row text-xs-center">{{ props.item.price }}</td> | 214 | <td class="td td-row text-xs-center">{{ props.item.price }}</td> |
| 215 | <td class="td td-row text-xs-center">{{ props.item.quantity }}</td> | 215 | <td class="td td-row text-xs-center">{{ props.item.quantity }}</td> |
| 216 | <td class="td td-row text-xs-center">{{ props.item.rackNo }}</td> | 216 | <td class="td td-row text-xs-center">{{ props.item.rackNo }}</td> |
| 217 | <td class="td td-row text-xs-center"> | 217 | <td class="td td-row text-xs-center"> |
| 218 | <span | 218 | <span |
| 219 | v-if="props.item.status === 'AVAILABLE'" | 219 | v-if="props.item.status === 'AVAILABLE'" |
| 220 | class="green lighten-1 pa-1 px-2 white--text paymentStatus" | 220 | class="green lighten-1 pa-1 px-2 white--text paymentStatus" |
| 221 | >{{ props.item.status}}</span> | 221 | >{{ props.item.status}}</span> |
| 222 | <span | 222 | <span |
| 223 | v-if="props.item.status === 'UNAVAILABLE'" | 223 | v-if="props.item.status === 'UNAVAILABLE'" |
| 224 | class="red lighten-1 pa-1 px-2 white--text paymentStatus" | 224 | class="red lighten-1 pa-1 px-2 white--text paymentStatus" |
| 225 | >{{ props.item.status}}</span> | 225 | >{{ props.item.status}}</span> |
| 226 | </td> | 226 | </td> |
| 227 | <td class="text-xs-center td td-row"> | 227 | <td class="text-xs-center td td-row"> |
| 228 | <span> | 228 | <span> |
| 229 | <v-tooltip top> | 229 | <v-tooltip top> |
| 230 | <img | 230 | <img |
| 231 | slot="activator" | 231 | slot="activator" |
| 232 | style="cursor:pointer; width:25px; height:25px; " | 232 | style="cursor:pointer; width:25px; height:25px; " |
| 233 | class="mr-3" | 233 | class="mr-3" |
| 234 | @click="profile(props.item)" | 234 | @click="profile(props.item)" |
| 235 | src="/static/icon/dashboard icons-47.png" | 235 | src="/static/icon/view.png" |
| 236 | /> | 236 | /> |
| 237 | <span>View</span> | 237 | <span>View</span> |
| 238 | </v-tooltip> | 238 | </v-tooltip> |
| 239 | <v-tooltip top> | 239 | <v-tooltip top> |
| 240 | <img | 240 | <img |
| 241 | slot="activator" | 241 | slot="activator" |
| 242 | style="cursor:pointer; width:20px; height:18px; " | 242 | style="cursor:pointer; width:20px; height:18px; " |
| 243 | class="mr-3" | 243 | class="mr-3" |
| 244 | @click="editItem(props.item)" | 244 | @click="editItem(props.item)" |
| 245 | src="/static/icon/dashboard icons-50.png" | 245 | src="/static/icon/edit.png" |
| 246 | /> | 246 | /> |
| 247 | <span>Edit</span> | 247 | <span>Edit</span> |
| 248 | </v-tooltip> | 248 | </v-tooltip> |
| 249 | <v-tooltip top> | 249 | <v-tooltip top> |
| 250 | <img | 250 | <img |
| 251 | slot="activator" | 251 | slot="activator" |
| 252 | style="cursor:pointer; width:20px; height:20px; " | 252 | style="cursor:pointer; width:20px; height:20px; " |
| 253 | @click="deleteItem(props.item)" | 253 | @click="deleteItem(props.item)" |
| 254 | src="/static/icon/dashboard icons-51.png" | 254 | src="/static/icon/delete.png" |
| 255 | /> | 255 | /> |
| 256 | <span>Delete</span> | 256 | <span>Delete</span> |
| 257 | </v-tooltip> | 257 | </v-tooltip> |
| 258 | </span> | 258 | </span> |
| 259 | </td> | 259 | </td> |
| 260 | </template> | 260 | </template> |
| 261 | <v-alert | 261 | <v-alert |
| 262 | slot="no-results" | 262 | slot="no-results" |
| 263 | :value="true" | 263 | :value="true" |
| 264 | color="error" | 264 | color="error" |
| 265 | icon="warning" | 265 | icon="warning" |
| 266 | >Your search for "{{ search }}" found no results.</v-alert> | 266 | >Your search for "{{ search }}" found no results.</v-alert> |
| 267 | </v-data-table> | 267 | </v-data-table> |
| 268 | <!-- ****** ADD BOOK ****** --> | 268 | <!-- ****** ADD BOOK ****** --> |
| 269 | <v-dialog v-model="addBookDialog" max-width="600px"> | 269 | <v-dialog v-model="addBookDialog" max-width="600px"> |
| 270 | <v-card flat class="card-style pa-2" dark> | 270 | <v-card flat class="card-style pa-2" dark> |
| 271 | <v-layout> | 271 | <v-layout> |
| 272 | <v-flex xs12> | 272 | <v-flex xs12> |
| 273 | <label class="title text-xs-center">Add Book</label> | 273 | <label class="title text-xs-center">Add Book</label> |
| 274 | <v-icon size="24" class="right" @click="addBookDialog = false">cancel</v-icon> | 274 | <v-icon size="24" class="right" @click="addBookDialog = false">cancel</v-icon> |
| 275 | </v-flex> | 275 | </v-flex> |
| 276 | </v-layout> | 276 | </v-layout> |
| 277 | <v-container fluid fill-height> | 277 | <v-container fluid fill-height> |
| 278 | <v-layout align-center> | 278 | <v-layout align-center> |
| 279 | <v-flex xs12 class="mt-4"> | 279 | <v-flex xs12 class="mt-4"> |
| 280 | <v-form ref="form" v-model="valid" lazy-validation> | 280 | <v-form ref="form" v-model="valid" lazy-validation> |
| 281 | <v-layout> | 281 | <v-layout> |
| 282 | <v-flex xs4 class="pt-4 subheading"> | 282 | <v-flex xs4 class="pt-4 subheading"> |
| 283 | <label class="right">Name:</label> | 283 | <label class="right">Name:</label> |
| 284 | </v-flex> | 284 | </v-flex> |
| 285 | <v-flex xs7 class="ml-3"> | 285 | <v-flex xs7 class="ml-3"> |
| 286 | <v-text-field | 286 | <v-text-field |
| 287 | v-model="BooksData.name" | 287 | v-model="BooksData.name" |
| 288 | placeholder="fill your Name" | 288 | placeholder="fill your Name" |
| 289 | type="text" | 289 | type="text" |
| 290 | :rules="nameRules" | 290 | :rules="nameRules" |
| 291 | required | 291 | required |
| 292 | ></v-text-field> | 292 | ></v-text-field> |
| 293 | </v-flex> | 293 | </v-flex> |
| 294 | </v-layout> | 294 | </v-layout> |
| 295 | <v-layout> | 295 | <v-layout> |
| 296 | <v-flex xs4 class="pt-4 subheading"> | 296 | <v-flex xs4 class="pt-4 subheading"> |
| 297 | <label class="right">Author:</label> | 297 | <label class="right">Author:</label> |
| 298 | </v-flex> | 298 | </v-flex> |
| 299 | <v-flex xs7 class="ml-3"> | 299 | <v-flex xs7 class="ml-3"> |
| 300 | <v-text-field | 300 | <v-text-field |
| 301 | v-model="BooksData.author" | 301 | v-model="BooksData.author" |
| 302 | placeholder="fill your Author Name" | 302 | placeholder="fill your Author Name" |
| 303 | type="text" | 303 | type="text" |
| 304 | :rules="authorRules" | 304 | :rules="authorRules" |
| 305 | required | 305 | required |
| 306 | ></v-text-field> | 306 | ></v-text-field> |
| 307 | </v-flex> | 307 | </v-flex> |
| 308 | </v-layout> | 308 | </v-layout> |
| 309 | <v-layout> | 309 | <v-layout> |
| 310 | <v-flex xs4 class="pt-4 subheading"> | 310 | <v-flex xs4 class="pt-4 subheading"> |
| 311 | <label class="right">Subject Code:</label> | 311 | <label class="right">Subject Code:</label> |
| 312 | </v-flex> | 312 | </v-flex> |
| 313 | <v-flex xs7 class="ml-3"> | 313 | <v-flex xs7 class="ml-3"> |
| 314 | <v-text-field | 314 | <v-text-field |
| 315 | v-model="BooksData.subjectCode" | 315 | v-model="BooksData.subjectCode" |
| 316 | placeholder="fill your Subject Code" | 316 | placeholder="fill your Subject Code" |
| 317 | type="text" | 317 | type="text" |
| 318 | :rules="subjectRules" | 318 | :rules="subjectRules" |
| 319 | required | 319 | required |
| 320 | ></v-text-field> | 320 | ></v-text-field> |
| 321 | </v-flex> | 321 | </v-flex> |
| 322 | </v-layout> | 322 | </v-layout> |
| 323 | <v-layout> | 323 | <v-layout> |
| 324 | <v-flex xs4 class="pt-4 subheading"> | 324 | <v-flex xs4 class="pt-4 subheading"> |
| 325 | <label class="right">Price:</label> | 325 | <label class="right">Price:</label> |
| 326 | </v-flex> | 326 | </v-flex> |
| 327 | <v-flex xs7 class="ml-3"> | 327 | <v-flex xs7 class="ml-3"> |
| 328 | <v-text-field | 328 | <v-text-field |
| 329 | v-model="BooksData.price" | 329 | v-model="BooksData.price" |
| 330 | placeholder="fill your Price" | 330 | placeholder="fill your Price" |
| 331 | :rules="priceRules" | 331 | :rules="priceRules" |
| 332 | required | 332 | required |
| 333 | ></v-text-field> | 333 | ></v-text-field> |
| 334 | </v-flex> | 334 | </v-flex> |
| 335 | </v-layout> | 335 | </v-layout> |
| 336 | <v-layout> | 336 | <v-layout> |
| 337 | <v-flex xs4 class="pt-4 subheading"> | 337 | <v-flex xs4 class="pt-4 subheading"> |
| 338 | <label class="right">Quantity:</label> | 338 | <label class="right">Quantity:</label> |
| 339 | </v-flex> | 339 | </v-flex> |
| 340 | <v-flex xs7 class="ml-3"> | 340 | <v-flex xs7 class="ml-3"> |
| 341 | <v-text-field | 341 | <v-text-field |
| 342 | v-model="BooksData.quantity" | 342 | v-model="BooksData.quantity" |
| 343 | placeholder="fill your Quantity" | 343 | placeholder="fill your Quantity" |
| 344 | :rules="quantityRules" | 344 | :rules="quantityRules" |
| 345 | required | 345 | required |
| 346 | ></v-text-field> | 346 | ></v-text-field> |
| 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">Rack No:</label> | 351 | <label class="right">Rack No:</label> |
| 352 | </v-flex> | 352 | </v-flex> |
| 353 | <v-flex xs7 class="ml-3"> | 353 | <v-flex xs7 class="ml-3"> |
| 354 | <v-text-field | 354 | <v-text-field |
| 355 | v-model="BooksData.rackNo" | 355 | v-model="BooksData.rackNo" |
| 356 | placeholder="fill your Rack No" | 356 | placeholder="fill your Rack No" |
| 357 | :rules="rackNoRules" | 357 | :rules="rackNoRules" |
| 358 | required | 358 | required |
| 359 | ></v-text-field> | 359 | ></v-text-field> |
| 360 | </v-flex> | 360 | </v-flex> |
| 361 | </v-layout> | 361 | </v-layout> |
| 362 | <v-layout> | 362 | <v-layout> |
| 363 | <v-flex xs12> | 363 | <v-flex xs12> |
| 364 | <v-card-actions> | 364 | <v-card-actions> |
| 365 | <v-spacer></v-spacer> | 365 | <v-spacer></v-spacer> |
| 366 | <v-btn @click="clear" round dark class="clear-button">clear</v-btn> | 366 | <v-btn @click="clear" round dark class="clear-button">clear</v-btn> |
| 367 | <v-btn @click="submit" round dark :loading="loading" class="add-button">Add</v-btn> | 367 | <v-btn @click="submit" round dark :loading="loading" class="add-button">Add</v-btn> |
| 368 | </v-card-actions> | 368 | </v-card-actions> |
| 369 | </v-flex> | 369 | </v-flex> |
| 370 | </v-layout> | 370 | </v-layout> |
| 371 | </v-form> | 371 | </v-form> |
| 372 | </v-flex> | 372 | </v-flex> |
| 373 | </v-layout> | 373 | </v-layout> |
| 374 | </v-container> | 374 | </v-container> |
| 375 | </v-card> | 375 | </v-card> |
| 376 | </v-dialog> | 376 | </v-dialog> |
| 377 | <v-snackbar | 377 | <v-snackbar |
| 378 | :timeout="timeout" | 378 | :timeout="timeout" |
| 379 | :top="y === 'top'" | 379 | :top="y === 'top'" |
| 380 | :right="x === 'right'" | 380 | :right="x === 'right'" |
| 381 | :vertical="mode === 'vertical'" | 381 | :vertical="mode === 'vertical'" |
| 382 | v-model="snackbar" | 382 | v-model="snackbar" |
| 383 | :color="color" | 383 | :color="color" |
| 384 | >{{ text }}</v-snackbar> | 384 | >{{ text }}</v-snackbar> |
| 385 | <div class="loader" v-if="showLoader"> | 385 | <div class="loader" v-if="showLoader"> |
| 386 | <v-progress-circular indeterminate color="white"></v-progress-circular> | 386 | <v-progress-circular indeterminate color="white"></v-progress-circular> |
| 387 | </div> | 387 | </div> |
| 388 | </v-container> | 388 | </v-container> |
| 389 | </template> | 389 | </template> |
| 390 | 390 | ||
| 391 | <script> | 391 | <script> |
| 392 | import http from "@/Services/http.js"; | 392 | import http from "@/Services/http.js"; |
| 393 | import Util from "@/util"; | 393 | import Util from "@/util"; |
| 394 | 394 | ||
| 395 | export default { | 395 | export default { |
| 396 | data: () => ({ | 396 | data: () => ({ |
| 397 | snackbar: false, | 397 | snackbar: false, |
| 398 | y: "top", | 398 | y: "top", |
| 399 | x: "right", | 399 | x: "right", |
| 400 | mode: "", | 400 | mode: "", |
| 401 | timeout: 5000, | 401 | timeout: 5000, |
| 402 | text: "", | 402 | text: "", |
| 403 | color: "", | 403 | color: "", |
| 404 | show: true, | 404 | show: true, |
| 405 | showSearch: false, | 405 | showSearch: false, |
| 406 | showLoader: false, | 406 | showLoader: false, |
| 407 | loading: false, | 407 | loading: false, |
| 408 | date: null, | 408 | date: null, |
| 409 | search: "", | 409 | search: "", |
| 410 | editBookDialog: false, | 410 | editBookDialog: false, |
| 411 | viewBookDialog: false, | 411 | viewBookDialog: false, |
| 412 | valid: true, | 412 | valid: true, |
| 413 | validEdit: true, | 413 | validEdit: true, |
| 414 | addBookDialog: false, | 414 | addBookDialog: false, |
| 415 | pagination: { | 415 | pagination: { |
| 416 | rowsPerPage: 10 | 416 | rowsPerPage: 10 |
| 417 | }, | 417 | }, |
| 418 | nameRules: [v => !!v || " Name is required"], | 418 | nameRules: [v => !!v || " Name is required"], |
| 419 | authorRules: [v => !!v || "Author Name Monthly"], | 419 | authorRules: [v => !!v || "Author Name Monthly"], |
| 420 | subjectRules: [v => !!v || "Subject Code is required"], | 420 | subjectRules: [v => !!v || "Subject Code is required"], |
| 421 | priceRules: [v => !!v || "Price is required"], | 421 | priceRules: [v => !!v || "Price is required"], |
| 422 | quantityRules: [v => !!v || "Quantity is required"], | 422 | quantityRules: [v => !!v || "Quantity is required"], |
| 423 | rackNoRules: [v => !!v || "Rack No. is required"], | 423 | rackNoRules: [v => !!v || "Rack No. is required"], |
| 424 | 424 | ||
| 425 | headers: [ | 425 | headers: [ |
| 426 | { | 426 | { |
| 427 | text: "No", | 427 | text: "No", |
| 428 | align: "", | 428 | align: "", |
| 429 | sortable: false, | 429 | sortable: false, |
| 430 | value: "No" | 430 | value: "No" |
| 431 | }, | 431 | }, |
| 432 | { | 432 | { |
| 433 | text: "Name", | 433 | text: "Name", |
| 434 | value: "name", | 434 | value: "name", |
| 435 | sortable: false, | 435 | sortable: false, |
| 436 | align: "center" | 436 | align: "center" |
| 437 | }, | 437 | }, |
| 438 | { text: "Authour", value: "author", sortable: false, align: "center" }, | 438 | { text: "Authour", value: "author", sortable: false, align: "center" }, |
| 439 | { | 439 | { |
| 440 | text: "Subject Code", | 440 | text: "Subject Code", |
| 441 | value: "subjectCode", | 441 | value: "subjectCode", |
| 442 | sortable: false, | 442 | sortable: false, |
| 443 | align: "center" | 443 | align: "center" |
| 444 | }, | 444 | }, |
| 445 | { text: "Price", value: "price", sortable: false, align: "center" }, | 445 | { text: "Price", value: "price", sortable: false, align: "center" }, |
| 446 | { text: "Quantity", value: "quantity", sortable: false, align: "center" }, | 446 | { text: "Quantity", value: "quantity", sortable: false, align: "center" }, |
| 447 | { text: "Rack No", value: "rackNo", sortable: false, align: "center" }, | 447 | { text: "Rack No", value: "rackNo", sortable: false, align: "center" }, |
| 448 | { text: "Status", value: "status", sortable: false, align: "center" }, | 448 | { text: "Status", value: "status", sortable: false, align: "center" }, |
| 449 | 449 | ||
| 450 | { text: "Action", value: "", sortable: false, align: "center" } | 450 | { text: "Action", value: "", sortable: false, align: "center" } |
| 451 | ], | 451 | ], |
| 452 | bookData: [], | 452 | bookData: [], |
| 453 | select: "", | 453 | select: "", |
| 454 | token: "", | 454 | token: "", |
| 455 | editedItem: {}, | 455 | editedItem: {}, |
| 456 | BooksData: {} | 456 | BooksData: {} |
| 457 | }), | 457 | }), |
| 458 | methods: { | 458 | methods: { |
| 459 | getBookData() { | 459 | getBookData() { |
| 460 | this.showLoader = true; | 460 | this.showLoader = true; |
| 461 | http() | 461 | http() |
| 462 | .get("/getBooksList", { | 462 | .get("/getBooksList", { |
| 463 | params: { | 463 | params: { |
| 464 | schoolId: this.$store.state.schoolId | 464 | schoolId: this.$store.state.schoolId |
| 465 | }, | 465 | }, |
| 466 | headers: { Authorization: "Bearer " + this.token } | 466 | headers: { Authorization: "Bearer " + this.token } |
| 467 | }) | 467 | }) |
| 468 | .then(response => { | 468 | .then(response => { |
| 469 | this.bookData = response.data.data; | 469 | this.bookData = response.data.data; |
| 470 | this.showLoader = false; | 470 | this.showLoader = false; |
| 471 | }) | 471 | }) |
| 472 | .catch(error => { | 472 | .catch(error => { |
| 473 | this.showLoader = false; | 473 | this.showLoader = false; |
| 474 | if (error.response.status === 401) { | 474 | if (error.response.status === 401) { |
| 475 | this.$router.replace({ path: "/" }); | 475 | this.$router.replace({ path: "/" }); |
| 476 | this.$store.dispatch("setToken", null); | 476 | this.$store.dispatch("setToken", null); |
| 477 | this.$store.dispatch("Id", null); | 477 | this.$store.dispatch("Id", null); |
| 478 | } | 478 | } |
| 479 | }); | 479 | }); |
| 480 | }, | 480 | }, |
| 481 | editItem(item) { | 481 | editItem(item) { |
| 482 | this.editedIndex = this.bookData.indexOf(item); | 482 | this.editedIndex = this.bookData.indexOf(item); |
| 483 | this.editedItem = Object.assign({}, item); | 483 | this.editedItem = Object.assign({}, item); |
| 484 | console.log(this.editedItem); | 484 | console.log(this.editedItem); |
| 485 | this.editBookDialog = true; | 485 | this.editBookDialog = true; |
| 486 | }, | 486 | }, |
| 487 | profile(item) { | 487 | profile(item) { |
| 488 | this.editedIndex = this.bookData.indexOf(item); | 488 | this.editedIndex = this.bookData.indexOf(item); |
| 489 | this.editedItem = Object.assign({}, item); | 489 | this.editedItem = Object.assign({}, item); |
| 490 | this.viewBookDialog = true; | 490 | this.viewBookDialog = true; |
| 491 | }, | 491 | }, |
| 492 | deleteItem(item) { | 492 | deleteItem(item) { |
| 493 | let deleteStudent = { | 493 | let deleteStudent = { |
| 494 | bookId: item._id | 494 | bookId: item._id |
| 495 | }; | 495 | }; |
| 496 | http() | 496 | http() |
| 497 | .delete( | 497 | .delete( |
| 498 | "/deleteBook", | 498 | "/deleteBook", |
| 499 | confirm("Are you sure you want to delete this?") && { | 499 | confirm("Are you sure you want to delete this?") && { |
| 500 | params: deleteStudent | 500 | params: deleteStudent |
| 501 | } | 501 | } |
| 502 | ) | 502 | ) |
| 503 | .then(response => { | 503 | .then(response => { |
| 504 | this.snackbar = true; | 504 | this.snackbar = true; |
| 505 | this.text = response.data.message; | 505 | this.text = response.data.message; |
| 506 | this.color = "green"; | 506 | this.color = "green"; |
| 507 | this.getBookData(); | 507 | this.getBookData(); |
| 508 | }) | 508 | }) |
| 509 | .catch(error => { | 509 | .catch(error => { |
| 510 | this.snackbar = true; | 510 | this.snackbar = true; |
| 511 | this.text = error.response.data.message; | 511 | this.text = error.response.data.message; |
| 512 | this.color = "error"; | 512 | this.color = "error"; |
| 513 | }); | 513 | }); |
| 514 | }, | 514 | }, |
| 515 | closeEditProfile() { | 515 | closeEditProfile() { |
| 516 | this.editBookDialog = false; | 516 | this.editBookDialog = false; |
| 517 | }, | 517 | }, |
| 518 | close2() { | 518 | close2() { |
| 519 | this.dialog2 = false; | 519 | this.dialog2 = false; |
| 520 | }, | 520 | }, |
| 521 | submit() { | 521 | submit() { |
| 522 | this.BooksData.quantity = Number(this.BooksData.quantity); | 522 | this.BooksData.quantity = Number(this.BooksData.quantity); |
| 523 | this.BooksData.schoolId = this.$store.state.schoolId; | 523 | this.BooksData.schoolId = this.$store.state.schoolId; |
| 524 | if (this.$refs.form.validate()) { | 524 | if (this.$refs.form.validate()) { |
| 525 | this.loading = true; | 525 | this.loading = true; |
| 526 | http() | 526 | http() |
| 527 | .post("/createBook", this.BooksData) | 527 | .post("/createBook", this.BooksData) |
| 528 | .then(response => { | 528 | .then(response => { |
| 529 | this.getBookData(); | 529 | this.getBookData(); |
| 530 | this.snackbar = true; | 530 | this.snackbar = true; |
| 531 | this.text = response.data.message; | 531 | this.text = response.data.message; |
| 532 | this.color = "green"; | 532 | this.color = "green"; |
| 533 | this.addBookDialog = false; | 533 | this.addBookDialog = false; |
| 534 | this.clear(); | 534 | this.clear(); |
| 535 | this.loading = false; | 535 | this.loading = false; |
| 536 | }) | 536 | }) |
| 537 | .catch(error => { | 537 | .catch(error => { |
| 538 | this.snackbar = true; | 538 | this.snackbar = true; |
| 539 | this.text = error.response.data.message; | 539 | this.text = error.response.data.message; |
| 540 | this.color = "error"; | 540 | this.color = "error"; |
| 541 | this.loading = false; | 541 | this.loading = false; |
| 542 | }); | 542 | }); |
| 543 | } | 543 | } |
| 544 | }, | 544 | }, |
| 545 | clear() { | 545 | clear() { |
| 546 | this.$refs.form.reset(); | 546 | this.$refs.form.reset(); |
| 547 | }, | 547 | }, |
| 548 | save() { | 548 | save() { |
| 549 | this.editedItem.bookId = this.editedItem._id; | 549 | this.editedItem.bookId = this.editedItem._id; |
| 550 | http() | 550 | http() |
| 551 | .put("/updateBook", this.editedItem) | 551 | .put("/updateBook", this.editedItem) |
| 552 | .then(response => { | 552 | .then(response => { |
| 553 | this.snackbar = true; | 553 | this.snackbar = true; |
| 554 | this.text = response.data.message; | 554 | this.text = response.data.message; |
| 555 | this.color = "green"; | 555 | this.color = "green"; |
| 556 | this.getBookData(); | 556 | this.getBookData(); |
| 557 | this.closeEditProfile(); | 557 | this.closeEditProfile(); |
| 558 | }) | 558 | }) |
| 559 | .catch(error => { | 559 | .catch(error => { |
| 560 | this.snackbar = true; | 560 | this.snackbar = true; |
| 561 | this.text = error.response.data.message; | 561 | this.text = error.response.data.message; |
| 562 | this.color = "error"; | 562 | this.color = "error"; |
| 563 | // console.log(error); | 563 | // console.log(error); |
| 564 | }); | 564 | }); |
| 565 | }, | 565 | }, |
| 566 | displaySearch() { | 566 | displaySearch() { |
| 567 | (this.show = false), (this.showSearch = true); | 567 | (this.show = false), (this.showSearch = true); |
| 568 | }, | 568 | }, |
| 569 | closeSearch() { | 569 | closeSearch() { |
| 570 | this.showSearch = false; | 570 | this.showSearch = false; |
| 571 | this.show = true; | 571 | this.show = true; |
| 572 | this.search = ""; | 572 | this.search = ""; |
| 573 | } | 573 | } |
| 574 | }, | 574 | }, |
| 575 | mounted() { | 575 | mounted() { |
| 576 | this.token = this.$store.state.token; | 576 | this.token = this.$store.state.token; |
| 577 | this.getBookData(); | 577 | this.getBookData(); |
| 578 | } | 578 | } |
| 579 | }; | 579 | }; |
| 580 | </script> | 580 | </script> |
| 581 | 581 |
src/pages/Library/eBook.vue
| 1 | <template> | 1 | <template> |
| 2 | <v-container fluid class="body-color"> | 2 | <v-container fluid class="body-color"> |
| 3 | <!-- ****** EDITS EBOOK DETAILS ****** --> | 3 | <!-- ****** EDITS EBOOK DETAILS ****** --> |
| 4 | <v-dialog v-model="dialog" max-width="1000px" scrollable> | 4 | <v-dialog v-model="dialog" max-width="1000px" scrollable> |
| 5 | <v-card flat> | 5 | <v-card flat> |
| 6 | <v-toolbar class="grey lighten-2" flat> | 6 | <v-toolbar class="grey lighten-2" flat> |
| 7 | <v-spacer></v-spacer> | 7 | <v-spacer></v-spacer> |
| 8 | <v-toolbar-title> | 8 | <v-toolbar-title> |
| 9 | <h3>Edit E-Books</h3> | 9 | <h3>Edit E-Books</h3> |
| 10 | </v-toolbar-title> | 10 | </v-toolbar-title> |
| 11 | <v-spacer></v-spacer> | 11 | <v-spacer></v-spacer> |
| 12 | </v-toolbar> | 12 | </v-toolbar> |
| 13 | <v-card-text style="height:760px;"> | 13 | <v-card-text style="height:760px;"> |
| 14 | <v-form ref="form"> | 14 | <v-form ref="form"> |
| 15 | <v-container fluid> | 15 | <v-container fluid> |
| 16 | <v-layout row> | 16 | <v-layout row> |
| 17 | <v-flex | 17 | <v-flex |
| 18 | xs12 | 18 | xs12 |
| 19 | class="text-xs-center text-sm-center text-md-center text-lg-center mr-4" | 19 | class="text-xs-center text-sm-center text-md-center text-lg-center mr-4" |
| 20 | > | 20 | > |
| 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 | multiple | 26 | multiple |
| 27 | @change="onImagePicked" | 27 | @change="onImagePicked" |
| 28 | /> | 28 | /> |
| 29 | <v-layout justify-center> | 29 | <v-layout justify-center> |
| 30 | <v-flex v-if="files != ''"> | 30 | <v-flex v-if="files != ''"> |
| 31 | <img :src="files" height="200" width="160;" /> | 31 | <img :src="files" height="200" width="160;" /> |
| 32 | </v-flex> | 32 | </v-flex> |
| 33 | </v-layout> | 33 | </v-layout> |
| 34 | <img | 34 | <img |
| 35 | v-if="editedItem.coverPhotoUrl && files == '' " | 35 | v-if="editedItem.coverPhotoUrl && files == '' " |
| 36 | :src="editedItem.coverPhotoUrl" | 36 | :src="editedItem.coverPhotoUrl" |
| 37 | height="200" | 37 | height="200" |
| 38 | width="160" | 38 | width="160" |
| 39 | alt="eBooks" | 39 | alt="eBooks" |
| 40 | class="pa-2" | 40 | class="pa-2" |
| 41 | /> | 41 | /> |
| 42 | <!-- <v-layout justify-center> | 42 | <!-- <v-layout justify-center> |
| 43 | <v-flex | 43 | <v-flex |
| 44 | xs3 | 44 | xs3 |
| 45 | v-for="Image in editedItem.newsImageUrl" | 45 | v-for="Image in editedItem.newsImageUrl" |
| 46 | :key="Image._id" | 46 | :key="Image._id" |
| 47 | v-if="editedItem.newsImageUrl" | 47 | v-if="editedItem.newsImageUrl" |
| 48 | class="profile-image-wrapper" | 48 | class="profile-image-wrapper" |
| 49 | > | 49 | > |
| 50 | 50 | ||
| 51 | <v-icon | 51 | <v-icon |
| 52 | class="red edit-profile-icon" | 52 | class="red edit-profile-icon" |
| 53 | dark | 53 | dark |
| 54 | @click="deleteImage(Image._id,editedItem._id)" | 54 | @click="deleteImage(Image._id,editedItem._id)" |
| 55 | >close</v-icon> | 55 | >close</v-icon> |
| 56 | </v-flex> | 56 | </v-flex> |
| 57 | <v-flex v-for="(file, index) in files" :key="index"> | 57 | <v-flex v-for="(file, index) in files" :key="index"> |
| 58 | <img :src="file" height="160" width="160" class="pa-2" /> | 58 | <img :src="file" height="160" width="160" class="pa-2" /> |
| 59 | </v-flex> | 59 | </v-flex> |
| 60 | </v-layout>--> | 60 | </v-layout>--> |
| 61 | <img | 61 | <img |
| 62 | src="/static/icon/user.png" | 62 | src="/static/icon/user.png" |
| 63 | v-if="editedItem.coverPhotoUrl == ''" | 63 | v-if="editedItem.coverPhotoUrl == ''" |
| 64 | height="160" | 64 | height="160" |
| 65 | width="160" | 65 | width="160" |
| 66 | alt="Books" | 66 | alt="Books" |
| 67 | /> | 67 | /> |
| 68 | </v-flex> | 68 | </v-flex> |
| 69 | </v-layout> | 69 | </v-layout> |
| 70 | <v-layout> | 70 | <v-layout> |
| 71 | <v-flex xs12 sm12> | 71 | <v-flex xs12 sm12> |
| 72 | <v-layout> | 72 | <v-layout> |
| 73 | <v-flex xs4 class="pt-4 subheading"> | 73 | <v-flex xs4 class="pt-4 subheading"> |
| 74 | <label class="right">Name:</label> | 74 | <label class="right">Name:</label> |
| 75 | </v-flex> | 75 | </v-flex> |
| 76 | <v-flex xs5 class="ml-3"> | 76 | <v-flex xs5 class="ml-3"> |
| 77 | <v-text-field | 77 | <v-text-field |
| 78 | v-model="editedItem.name" | 78 | v-model="editedItem.name" |
| 79 | placeholder="fill your Name" | 79 | placeholder="fill your Name" |
| 80 | type="text" | 80 | type="text" |
| 81 | ></v-text-field> | 81 | ></v-text-field> |
| 82 | </v-flex> | 82 | </v-flex> |
| 83 | </v-layout> | 83 | </v-layout> |
| 84 | </v-flex> | 84 | </v-flex> |
| 85 | <v-flex xs12 sm12> | 85 | <v-flex xs12 sm12> |
| 86 | <v-layout> | 86 | <v-layout> |
| 87 | <v-flex xs4 class="pt-4 subheading"> | 87 | <v-flex xs4 class="pt-4 subheading"> |
| 88 | <label class="right">Author:</label> | 88 | <label class="right">Author:</label> |
| 89 | </v-flex> | 89 | </v-flex> |
| 90 | <v-flex xs5 class="ml-3"> | 90 | <v-flex xs5 class="ml-3"> |
| 91 | <v-text-field placeholder="fill your Author" v-model="editedItem.author"></v-text-field> | 91 | <v-text-field placeholder="fill your Author" v-model="editedItem.author"></v-text-field> |
| 92 | </v-flex> | 92 | </v-flex> |
| 93 | </v-layout> | 93 | </v-layout> |
| 94 | </v-flex> | 94 | </v-flex> |
| 95 | <v-flex xs12 sm12> | 95 | <v-flex xs12 sm12> |
| 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">Class:</label> | 98 | <label class="right">Class:</label> |
| 99 | </v-flex> | 99 | </v-flex> |
| 100 | <v-flex xs5 class="ml-3"> | 100 | <v-flex xs5 class="ml-3"> |
| 101 | <v-text-field | 101 | <v-text-field |
| 102 | v-model="editedItem.className" | 102 | v-model="editedItem.className" |
| 103 | :items="addClass" | 103 | :items="addClass" |
| 104 | label="Select Class" | 104 | label="Select Class" |
| 105 | item-text="classNum" | 105 | item-text="classNum" |
| 106 | item-value="_id" | 106 | item-value="_id" |
| 107 | ></v-text-field> | 107 | ></v-text-field> |
| 108 | </v-flex> | 108 | </v-flex> |
| 109 | </v-layout> | 109 | </v-layout> |
| 110 | </v-flex> | 110 | </v-flex> |
| 111 | <v-flex xs12 sm12> | 111 | <v-flex xs12 sm12> |
| 112 | <v-layout> | 112 | <v-layout> |
| 113 | <v-flex xs4 class="pt-4 subheading"> | 113 | <v-flex xs4 class="pt-4 subheading"> |
| 114 | <label class="right">Upload Image:</label> | 114 | <label class="right">Upload Image:</label> |
| 115 | </v-flex> | 115 | </v-flex> |
| 116 | <v-flex xs5 class="ml-3"> | 116 | <v-flex xs5 class="ml-3"> |
| 117 | <v-text-field | 117 | <v-text-field |
| 118 | label="Select Image" | 118 | label="Select Image" |
| 119 | @click="pickImage" | 119 | @click="pickImage" |
| 120 | v-model="imageName" | 120 | v-model="imageName" |
| 121 | append-icon="attach_file" | 121 | append-icon="attach_file" |
| 122 | multiple | 122 | multiple |
| 123 | ></v-text-field> | 123 | ></v-text-field> |
| 124 | </v-flex> | 124 | </v-flex> |
| 125 | </v-layout> | 125 | </v-layout> |
| 126 | </v-flex> | 126 | </v-flex> |
| 127 | <v-flex xs12 sm12> | 127 | <v-flex xs12 sm12> |
| 128 | <v-layout> | 128 | <v-layout> |
| 129 | <v-flex xs4 class="pt-4 subheading"> | 129 | <v-flex xs4 class="pt-4 subheading"> |
| 130 | <label class="right">Upload File:</label> | 130 | <label class="right">Upload File:</label> |
| 131 | </v-flex> | 131 | </v-flex> |
| 132 | <v-flex xs5 class="ml-3"> | 132 | <v-flex xs5 class="ml-3"> |
| 133 | <input type="file" style="display: none" ref="file" @change="onFilePicked" /> | 133 | <input type="file" style="display: none" ref="file" @change="onFilePicked" /> |
| 134 | <v-text-field | 134 | <v-text-field |
| 135 | label="Select File" | 135 | label="Select File" |
| 136 | @click="pickFile" | 136 | @click="pickFile" |
| 137 | v-model="fileName" | 137 | v-model="fileName" |
| 138 | append-icon="attach_file" | 138 | append-icon="attach_file" |
| 139 | multiple | 139 | multiple |
| 140 | ></v-text-field> | 140 | ></v-text-field> |
| 141 | </v-flex> | 141 | </v-flex> |
| 142 | </v-layout> | 142 | </v-layout> |
| 143 | </v-flex> | 143 | </v-flex> |
| 144 | <v-flex xs12 sm12> | 144 | <v-flex xs12 sm12> |
| 145 | <v-layout> | 145 | <v-layout> |
| 146 | <v-flex xs4 class="pt-4 subheading"> | 146 | <v-flex xs4 class="pt-4 subheading"> |
| 147 | <label class="right">Private:</label> | 147 | <label class="right">Private:</label> |
| 148 | </v-flex> | 148 | </v-flex> |
| 149 | <v-flex xs5 class="ml-3"> | 149 | <v-flex xs5 class="ml-3"> |
| 150 | <v-checkbox v-model="editedItem.private"></v-checkbox> | 150 | <v-checkbox v-model="editedItem.private"></v-checkbox> |
| 151 | </v-flex> | 151 | </v-flex> |
| 152 | </v-layout> | 152 | </v-layout> |
| 153 | </v-flex> | 153 | </v-flex> |
| 154 | </v-layout> | 154 | </v-layout> |
| 155 | <v-layout> | 155 | <v-layout> |
| 156 | <v-flex xs12 sm8 offset-sm2> | 156 | <v-flex xs12 sm8 offset-sm2> |
| 157 | <v-card-actions> | 157 | <v-card-actions> |
| 158 | <v-btn round dark @click.native="close">Cancel</v-btn> | 158 | <v-btn round dark @click.native="close">Cancel</v-btn> |
| 159 | <v-spacer></v-spacer> | 159 | <v-spacer></v-spacer> |
| 160 | <v-btn round dark @click="save" :loading="loadingUpadte">Save</v-btn> | 160 | <v-btn round dark @click="save" :loading="loadingUpadte">Save</v-btn> |
| 161 | </v-card-actions> | 161 | </v-card-actions> |
| 162 | </v-flex> | 162 | </v-flex> |
| 163 | </v-layout> | 163 | </v-layout> |
| 164 | </v-container> | 164 | </v-container> |
| 165 | </v-form> | 165 | </v-form> |
| 166 | </v-card-text> | 166 | </v-card-text> |
| 167 | </v-card> | 167 | </v-card> |
| 168 | </v-dialog> | 168 | </v-dialog> |
| 169 | 169 | ||
| 170 | <!-- ****** PROFILE VIEW ALL NEWS DEATILS ****** --> | 170 | <!-- ****** PROFILE VIEW ALL NEWS DEATILS ****** --> |
| 171 | 171 | ||
| 172 | <v-dialog v-model="dialog1" max-width="800px" scrollable> | 172 | <v-dialog v-model="dialog1" max-width="800px" scrollable> |
| 173 | <v-card style="height: 700px;"> | 173 | <v-card style="height: 700px;"> |
| 174 | <v-toolbar color="grey lighten-2" flat> | 174 | <v-toolbar color="grey lighten-2" flat> |
| 175 | <v-spacer></v-spacer> | 175 | <v-spacer></v-spacer> |
| 176 | <v-toolbar-title> | 176 | <v-toolbar-title> |
| 177 | <h3>E-Books</h3> | 177 | <h3>E-Books</h3> |
| 178 | </v-toolbar-title> | 178 | </v-toolbar-title> |
| 179 | <v-spacer></v-spacer> | 179 | <v-spacer></v-spacer> |
| 180 | <v-icon @click="close1">close</v-icon> | 180 | <v-icon @click="close1">close</v-icon> |
| 181 | </v-toolbar> | 181 | </v-toolbar> |
| 182 | <v-card-text> | 182 | <v-card-text> |
| 183 | <v-container> | 183 | <v-container> |
| 184 | <v-layout wrap> | 184 | <v-layout wrap> |
| 185 | <v-flex sm12 xs12> | 185 | <v-flex sm12 xs12> |
| 186 | <iframe :src="editedItem.fileUrl" height="600" width="100%"></iframe> | 186 | <iframe :src="editedItem.fileUrl" height="600" width="100%"></iframe> |
| 187 | </v-flex> | 187 | </v-flex> |
| 188 | </v-layout> | 188 | </v-layout> |
| 189 | </v-container> | 189 | </v-container> |
| 190 | </v-card-text> | 190 | </v-card-text> |
| 191 | </v-card> | 191 | </v-card> |
| 192 | </v-dialog> | 192 | </v-dialog> |
| 193 | <!-- ****** EXISTING-USERS NEWS TABLE ****** --> | 193 | <!-- ****** EXISTING-USERS NEWS TABLE ****** --> |
| 194 | 194 | ||
| 195 | <v-toolbar color="transparent" flat> | 195 | <v-toolbar color="transparent" flat> |
| 196 | <v-btn | 196 | <v-btn |
| 197 | fab | 197 | fab |
| 198 | dark | 198 | dark |
| 199 | class="open-dialog-button hidden-xl-only hidden-md-only hidden-lg-only" | 199 | class="open-dialog-button hidden-xl-only hidden-md-only hidden-lg-only" |
| 200 | small | 200 | small |
| 201 | @click="addEBookDialog = true" | 201 | @click="addEBookDialog = true" |
| 202 | > | 202 | > |
| 203 | <v-icon dark>add</v-icon> | 203 | <v-icon dark>add</v-icon> |
| 204 | </v-btn> | 204 | </v-btn> |
| 205 | <v-btn | 205 | <v-btn |
| 206 | round | 206 | round |
| 207 | class="open-dialog-button hidden-sm-only hidden-xs-only" | 207 | class="open-dialog-button hidden-sm-only hidden-xs-only" |
| 208 | dark | 208 | dark |
| 209 | @click="addEBookDialog = true" | 209 | @click="addEBookDialog = true" |
| 210 | > | 210 | > |
| 211 | <v-icon class="white--text pr-1" size="20">add</v-icon>Add E-Book | 211 | <v-icon class="white--text pr-1" size="20">add</v-icon>Add E-Book |
| 212 | </v-btn> | 212 | </v-btn> |
| 213 | <v-spacer></v-spacer> | 213 | <v-spacer></v-spacer> |
| 214 | <v-card-title class="body-1" v-show="show"> | 214 | <v-card-title class="body-1" v-show="show"> |
| 215 | <v-btn icon large flat @click="displaySearch"> | 215 | <v-btn icon large flat @click="displaySearch"> |
| 216 | <v-avatar size="27"> | 216 | <v-avatar size="27"> |
| 217 | <img src="/static/icon/dashboard icons-49.png" alt="icon" /> | 217 | <img src="/static/icon/search.png" alt="icon" /> |
| 218 | </v-avatar> | 218 | </v-avatar> |
| 219 | </v-btn> | 219 | </v-btn> |
| 220 | </v-card-title> | 220 | </v-card-title> |
| 221 | <v-flex xs8 sm8 md3 lg2 v-show="showSearch"> | 221 | <v-flex xs8 sm8 md3 lg2 v-show="showSearch"> |
| 222 | <v-layout> | 222 | <v-layout> |
| 223 | <v-text-field v-model="search" label="Search" prepend-inner-icon="search" color="primary"></v-text-field> | 223 | <v-text-field v-model="search" label="Search" prepend-inner-icon="search" color="primary"></v-text-field> |
| 224 | <v-icon @click="closeSearch" color="error">close</v-icon> | 224 | <v-icon @click="closeSearch" color="error">close</v-icon> |
| 225 | </v-layout> | 225 | </v-layout> |
| 226 | </v-flex> | 226 | </v-flex> |
| 227 | </v-toolbar> | 227 | </v-toolbar> |
| 228 | <v-data-table | 228 | <v-data-table |
| 229 | :headers="headers" | 229 | :headers="headers" |
| 230 | :items="eBookData" | 230 | :items="eBookData" |
| 231 | :pagination.sync="pagination" | 231 | :pagination.sync="pagination" |
| 232 | :search="search" | 232 | :search="search" |
| 233 | > | 233 | > |
| 234 | <template slot="items" slot-scope="props"> | 234 | <template slot="items" slot-scope="props"> |
| 235 | <tr class="tr"> | 235 | <tr class="tr"> |
| 236 | <td class="td td-row">{{ props.index + 1}}</td> | 236 | <td class="td td-row">{{ props.index + 1}}</td> |
| 237 | <td class="td td-row text-xs-center"> | 237 | <td class="td td-row text-xs-center"> |
| 238 | <img :src="props.item.coverPhotoUrl" alt="newsImage" width="100" height="70" /> | 238 | <img :src="props.item.coverPhotoUrl" alt="newsImage" width="100" height="70" /> |
| 239 | </td> | 239 | </td> |
| 240 | <td class="td td-row text-xs-center">{{ props.item.name}}</td> | 240 | <td class="td td-row text-xs-center">{{ props.item.name}}</td> |
| 241 | <td class="td td-row text-xs-center">{{ props.item.author}}</td> | 241 | <td class="td td-row text-xs-center">{{ props.item.author}}</td> |
| 242 | <td class="td td-row text-xs-center">{{ props.item.classId.classNum}}</td> | 242 | <td class="td td-row text-xs-center">{{ props.item.classId.classNum}}</td> |
| 243 | <td class="td td-row text-xs-center"> | 243 | <td class="td td-row text-xs-center"> |
| 244 | <span> | 244 | <span> |
| 245 | <v-tooltip top> | 245 | <v-tooltip top> |
| 246 | <img | 246 | <img |
| 247 | slot="activator" | 247 | slot="activator" |
| 248 | style="cursor:pointer; width:25px; height:25px; " | 248 | style="cursor:pointer; width:25px; height:25px; " |
| 249 | class="mr-3" | 249 | class="mr-3" |
| 250 | @click="profile(props.item)" | 250 | @click="profile(props.item)" |
| 251 | src="/static/icon/dashboard icons-47.png" | 251 | src="/static/icon/view.png" |
| 252 | /> | 252 | /> |
| 253 | <span>View</span> | 253 | <span>View</span> |
| 254 | </v-tooltip> | 254 | </v-tooltip> |
| 255 | <v-tooltip top> | 255 | <v-tooltip top> |
| 256 | <img | 256 | <img |
| 257 | slot="activator" | 257 | slot="activator" |
| 258 | style="cursor:pointer; width:20px; height:18px; " | 258 | style="cursor:pointer; width:20px; height:18px; " |
| 259 | class="mr-3" | 259 | class="mr-3" |
| 260 | @click="editItem(props.item)" | 260 | @click="editItem(props.item)" |
| 261 | src="/static/icon/dashboard icons-50.png" | 261 | src="/static/icon/edit.png" |
| 262 | /> | 262 | /> |
| 263 | <span>Edit</span> | 263 | <span>Edit</span> |
| 264 | </v-tooltip> | 264 | </v-tooltip> |
| 265 | <v-tooltip top> | 265 | <v-tooltip top> |
| 266 | <img | 266 | <img |
| 267 | slot="activator" | 267 | slot="activator" |
| 268 | style="cursor:pointer; width:20px; height:20px; " | 268 | style="cursor:pointer; width:20px; height:20px; " |
| 269 | @click="deleteItem(props.item)" | 269 | @click="deleteItem(props.item)" |
| 270 | src="/static/icon/dashboard icons-51.png" | 270 | src="/static/icon/delete.png" |
| 271 | /> | 271 | /> |
| 272 | <span>Delete</span> | 272 | <span>Delete</span> |
| 273 | </v-tooltip> | 273 | </v-tooltip> |
| 274 | </span> | 274 | </span> |
| 275 | </td> | 275 | </td> |
| 276 | </tr> | 276 | </tr> |
| 277 | </template> | 277 | </template> |
| 278 | <v-alert | 278 | <v-alert |
| 279 | slot="no-results" | 279 | slot="no-results" |
| 280 | :value="true" | 280 | :value="true" |
| 281 | color="error" | 281 | color="error" |
| 282 | icon="warning" | 282 | icon="warning" |
| 283 | >Your search for "{{ search }}" found no results.</v-alert> | 283 | >Your search for "{{ search }}" found no results.</v-alert> |
| 284 | </v-data-table> | 284 | </v-data-table> |
| 285 | <!-- ****** ADD MULTIPLE E-BOOK ****** --> | 285 | <!-- ****** ADD MULTIPLE E-BOOK ****** --> |
| 286 | <v-dialog v-model="addEBookDialog" max-width="600px"> | 286 | <v-dialog v-model="addEBookDialog" max-width="600px"> |
| 287 | <v-card flat class="card-style pa-2" dark> | 287 | <v-card flat class="card-style pa-2" dark> |
| 288 | <v-layout> | 288 | <v-layout> |
| 289 | <v-flex xs12> | 289 | <v-flex xs12> |
| 290 | <label class="title text-xs-center">Add E-Book</label> | 290 | <label class="title text-xs-center">Add E-Book</label> |
| 291 | <v-icon size="24" class="right" @click="addEBookDialog = false">cancel</v-icon> | 291 | <v-icon size="24" class="right" @click="addEBookDialog = false">cancel</v-icon> |
| 292 | </v-flex> | 292 | </v-flex> |
| 293 | </v-layout> | 293 | </v-layout> |
| 294 | <v-form ref="form" v-model="valid" lazy-validation> | 294 | <v-form ref="form" v-model="valid" lazy-validation> |
| 295 | <v-container fluid> | 295 | <v-container fluid> |
| 296 | <v-layout> | 296 | <v-layout> |
| 297 | <v-flex | 297 | <v-flex |
| 298 | xs12 | 298 | xs12 |
| 299 | class="text-xs-center text-sm-center text-md-center text-lg-center" | 299 | class="text-xs-center text-sm-center text-md-center text-lg-center" |
| 300 | > | 300 | > |
| 301 | <input | 301 | <input |
| 302 | type="file" | 302 | type="file" |
| 303 | style="display: none" | 303 | style="display: none" |
| 304 | ref="image" | 304 | ref="image" |
| 305 | accept="image/*" | 305 | accept="image/*" |
| 306 | @change="onImagePicked" | 306 | @change="onImagePicked" |
| 307 | /> | 307 | /> |
| 308 | <v-layout justify-center> | 308 | <v-layout justify-center> |
| 309 | <v-flex v-if="files != ''"> | 309 | <v-flex v-if="files != ''"> |
| 310 | <img :src="files" height="150" width="150" /> | 310 | <img :src="files" height="150" width="150" /> |
| 311 | </v-flex> | 311 | </v-flex> |
| 312 | </v-layout> | 312 | </v-layout> |
| 313 | <img src="/static/icon/user.png" v-if="files ==''" height="80" width="80px;" /> | 313 | <img src="/static/icon/user.png" v-if="files ==''" height="80" width="80px;" /> |
| 314 | </v-flex> | 314 | </v-flex> |
| 315 | </v-layout> | 315 | </v-layout> |
| 316 | <v-flex xs12> | 316 | <v-flex xs12> |
| 317 | <v-layout> | 317 | <v-layout> |
| 318 | <v-flex xs4 class="pt-4 subheading"> | 318 | <v-flex xs4 class="pt-4 subheading"> |
| 319 | <label class="right">Name:</label> | 319 | <label class="right">Name:</label> |
| 320 | </v-flex> | 320 | </v-flex> |
| 321 | <v-flex xs7 class="ml-3"> | 321 | <v-flex xs7 class="ml-3"> |
| 322 | <v-text-field | 322 | <v-text-field |
| 323 | v-model="addEBooks.name" | 323 | v-model="addEBooks.name" |
| 324 | placeholder="fill your Title" | 324 | placeholder="fill your Title" |
| 325 | name="name" | 325 | name="name" |
| 326 | type="text" | 326 | type="text" |
| 327 | :rules="titleRules" | 327 | :rules="titleRules" |
| 328 | required | 328 | required |
| 329 | ></v-text-field> | 329 | ></v-text-field> |
| 330 | </v-flex> | 330 | </v-flex> |
| 331 | </v-layout> | 331 | </v-layout> |
| 332 | </v-flex> | 332 | </v-flex> |
| 333 | <v-flex xs12> | 333 | <v-flex xs12> |
| 334 | <v-layout> | 334 | <v-layout> |
| 335 | <v-flex xs4 class="pt-4 subheading"> | 335 | <v-flex xs4 class="pt-4 subheading"> |
| 336 | <label class="right">Author:</label> | 336 | <label class="right">Author:</label> |
| 337 | </v-flex> | 337 | </v-flex> |
| 338 | <v-flex xs7 class="ml-3"> | 338 | <v-flex xs7 class="ml-3"> |
| 339 | <v-text-field | 339 | <v-text-field |
| 340 | v-model="addEBooks.author" | 340 | v-model="addEBooks.author" |
| 341 | placeholder="fill your Author Name" | 341 | placeholder="fill your Author Name" |
| 342 | name="name" | 342 | name="name" |
| 343 | type="text" | 343 | type="text" |
| 344 | :rules="titleRules" | 344 | :rules="titleRules" |
| 345 | required | 345 | required |
| 346 | ></v-text-field> | 346 | ></v-text-field> |
| 347 | </v-flex> | 347 | </v-flex> |
| 348 | </v-layout> | 348 | </v-layout> |
| 349 | </v-flex> | 349 | </v-flex> |
| 350 | <v-flex xs12> | 350 | <v-flex xs12> |
| 351 | <v-layout> | 351 | <v-layout> |
| 352 | <v-flex xs4 class="pt-4 subheading"> | 352 | <v-flex xs4 class="pt-4 subheading"> |
| 353 | <label class="right">Class:</label> | 353 | <label class="right">Class:</label> |
| 354 | </v-flex> | 354 | </v-flex> |
| 355 | <v-flex xs7 class="ml-3"> | 355 | <v-flex xs7 class="ml-3"> |
| 356 | <v-select | 356 | <v-select |
| 357 | v-model="addEBooks.classId" | 357 | v-model="addEBooks.classId" |
| 358 | :items="addClass" | 358 | :items="addClass" |
| 359 | label="Select Class" | 359 | label="Select Class" |
| 360 | item-text="classNum" | 360 | item-text="classNum" |
| 361 | item-value="_id" | 361 | item-value="_id" |
| 362 | :rules="titleRules" | 362 | :rules="titleRules" |
| 363 | required | 363 | required |
| 364 | ></v-select> | 364 | ></v-select> |
| 365 | </v-flex> | 365 | </v-flex> |
| 366 | </v-layout> | 366 | </v-layout> |
| 367 | </v-flex> | 367 | </v-flex> |
| 368 | <v-flex xs12> | 368 | <v-flex xs12> |
| 369 | <v-layout> | 369 | <v-layout> |
| 370 | <v-flex xs4 class="pt-4 subheading"> | 370 | <v-flex xs4 class="pt-4 subheading"> |
| 371 | <label class="right">Upload Image:</label> | 371 | <label class="right">Upload Image:</label> |
| 372 | </v-flex> | 372 | </v-flex> |
| 373 | <v-flex xs7 class="ml-3"> | 373 | <v-flex xs7 class="ml-3"> |
| 374 | <v-text-field | 374 | <v-text-field |
| 375 | label="Select Image" | 375 | label="Select Image" |
| 376 | @click="pickImage" | 376 | @click="pickImage" |
| 377 | v-model="imageName" | 377 | v-model="imageName" |
| 378 | append-icon="attach_file" | 378 | append-icon="attach_file" |
| 379 | multiple | 379 | multiple |
| 380 | ></v-text-field> | 380 | ></v-text-field> |
| 381 | </v-flex> | 381 | </v-flex> |
| 382 | </v-layout> | 382 | </v-layout> |
| 383 | </v-flex> | 383 | </v-flex> |
| 384 | <v-flex xs12> | 384 | <v-flex xs12> |
| 385 | <v-layout> | 385 | <v-layout> |
| 386 | <v-flex xs4 class="pt-4 subheading"> | 386 | <v-flex xs4 class="pt-4 subheading"> |
| 387 | <label class="right">Upload File:</label> | 387 | <label class="right">Upload File:</label> |
| 388 | </v-flex> | 388 | </v-flex> |
| 389 | <v-flex xs7 class="ml-3"> | 389 | <v-flex xs7 class="ml-3"> |
| 390 | <input type="file" style="display: none" ref="file" @change="onFilePicked" /> | 390 | <input type="file" style="display: none" ref="file" @change="onFilePicked" /> |
| 391 | <v-text-field | 391 | <v-text-field |
| 392 | label="Select File" | 392 | label="Select File" |
| 393 | @click="pickFile" | 393 | @click="pickFile" |
| 394 | v-model="fileName" | 394 | v-model="fileName" |
| 395 | append-icon="attach_file" | 395 | append-icon="attach_file" |
| 396 | multiple | 396 | multiple |
| 397 | ></v-text-field> | 397 | ></v-text-field> |
| 398 | </v-flex> | 398 | </v-flex> |
| 399 | </v-layout> | 399 | </v-layout> |
| 400 | </v-flex> | 400 | </v-flex> |
| 401 | <v-flex xs12> | 401 | <v-flex xs12> |
| 402 | <v-layout> | 402 | <v-layout> |
| 403 | <v-flex xs4 class="pt-3 subheading"> | 403 | <v-flex xs4 class="pt-3 subheading"> |
| 404 | <label class="right">Private:</label> | 404 | <label class="right">Private:</label> |
| 405 | </v-flex> | 405 | </v-flex> |
| 406 | <v-flex xs7 class="ml-3"> | 406 | <v-flex xs7 class="ml-3"> |
| 407 | <v-checkbox v-model="addEBooks.private"></v-checkbox> | 407 | <v-checkbox v-model="addEBooks.private"></v-checkbox> |
| 408 | </v-flex> | 408 | </v-flex> |
| 409 | </v-layout> | 409 | </v-layout> |
| 410 | </v-flex> | 410 | </v-flex> |
| 411 | <v-layout> | 411 | <v-layout> |
| 412 | <v-flex xs12> | 412 | <v-flex xs12> |
| 413 | <v-card-actions> | 413 | <v-card-actions> |
| 414 | <v-spacer></v-spacer> | 414 | <v-spacer></v-spacer> |
| 415 | <v-btn @click="clear" round dark class="clear-button">clear</v-btn> | 415 | <v-btn @click="clear" round dark class="clear-button">clear</v-btn> |
| 416 | <v-btn @click="submit" round dark :loading="loading" class="add-button">Add</v-btn> | 416 | <v-btn @click="submit" round dark :loading="loading" class="add-button">Add</v-btn> |
| 417 | </v-card-actions> | 417 | </v-card-actions> |
| 418 | </v-flex> | 418 | </v-flex> |
| 419 | </v-layout> | 419 | </v-layout> |
| 420 | </v-container> | 420 | </v-container> |
| 421 | </v-form> | 421 | </v-form> |
| 422 | </v-card> | 422 | </v-card> |
| 423 | </v-dialog> | 423 | </v-dialog> |
| 424 | <div class="loader" v-if="showLoader"> | 424 | <div class="loader" v-if="showLoader"> |
| 425 | <v-progress-circular indeterminate color="white"></v-progress-circular> | 425 | <v-progress-circular indeterminate color="white"></v-progress-circular> |
| 426 | </div> | 426 | </div> |
| 427 | </v-container> | 427 | </v-container> |
| 428 | </template> | 428 | </template> |
| 429 | 429 | ||
| 430 | <script> | 430 | <script> |
| 431 | import http from "@/Services/http.js"; | 431 | import http from "@/Services/http.js"; |
| 432 | import Util from "@/util"; | 432 | import Util from "@/util"; |
| 433 | 433 | ||
| 434 | export default { | 434 | export default { |
| 435 | data: () => ({ | 435 | data: () => ({ |
| 436 | snackbar: false, | 436 | snackbar: false, |
| 437 | y: "top", | 437 | y: "top", |
| 438 | x: "right", | 438 | x: "right", |
| 439 | mode: "", | 439 | mode: "", |
| 440 | timeout: 3000, | 440 | timeout: 3000, |
| 441 | text: "", | 441 | text: "", |
| 442 | show: true, | 442 | show: true, |
| 443 | showSearch: false, | 443 | showSearch: false, |
| 444 | loading: false, | 444 | loading: false, |
| 445 | loadingUpadte: false, | 445 | loadingUpadte: false, |
| 446 | date: null, | 446 | date: null, |
| 447 | search: "", | 447 | search: "", |
| 448 | showLoader: false, | 448 | showLoader: false, |
| 449 | dialog: false, | 449 | dialog: false, |
| 450 | dialog1: false, | 450 | dialog1: false, |
| 451 | valid: true, | 451 | valid: true, |
| 452 | addEBookDialog: false, | 452 | addEBookDialog: false, |
| 453 | addClass: [], | 453 | addClass: [], |
| 454 | addSection: [], | 454 | addSection: [], |
| 455 | pagination: { | 455 | pagination: { |
| 456 | rowsPerPage: 10 | 456 | rowsPerPage: 10 |
| 457 | }, | 457 | }, |
| 458 | imageName: "", | 458 | imageName: "", |
| 459 | fileName: "", | 459 | fileName: "", |
| 460 | imageUrl: "", | 460 | imageUrl: "", |
| 461 | imageFile: "", | 461 | imageFile: "", |
| 462 | image: [], | 462 | image: [], |
| 463 | upload: "", | 463 | upload: "", |
| 464 | files: "", | 464 | files: "", |
| 465 | anyFile: "", | 465 | anyFile: "", |
| 466 | titleRules: [v => !!v || " Tilte is required"], | 466 | titleRules: [v => !!v || " Tilte is required"], |
| 467 | descriptionRules: [v => !!v || " Description is required"], | 467 | descriptionRules: [v => !!v || " Description is required"], |
| 468 | headers: [ | 468 | headers: [ |
| 469 | { | 469 | { |
| 470 | align: "justify-center", | 470 | align: "justify-center", |
| 471 | text: "No", | 471 | text: "No", |
| 472 | sortable: false, | 472 | sortable: false, |
| 473 | value: "No" | 473 | value: "No" |
| 474 | }, | 474 | }, |
| 475 | { text: "Photo", vaue: "fileUrl", sortable: false, align: "center" }, | 475 | { text: "Photo", vaue: "fileUrl", sortable: false, align: "center" }, |
| 476 | { text: "Name", vaue: "name", sortable: false, align: "center" }, | 476 | { text: "Name", vaue: "name", sortable: false, align: "center" }, |
| 477 | { text: "Author", value: "author", sortable: false, align: "center" }, | 477 | { text: "Author", value: "author", sortable: false, align: "center" }, |
| 478 | { | 478 | { |
| 479 | text: "Class", | 479 | text: "Class", |
| 480 | value: "classId", | 480 | value: "classId", |
| 481 | sortable: false, | 481 | sortable: false, |
| 482 | align: "center" | 482 | align: "center" |
| 483 | }, | 483 | }, |
| 484 | { text: "Action", value: "", sortable: false, align: "center" } | 484 | { text: "Action", value: "", sortable: false, align: "center" } |
| 485 | ], | 485 | ], |
| 486 | eBookData: [], | 486 | eBookData: [], |
| 487 | editedIndex: -1, | 487 | editedIndex: -1, |
| 488 | addEBooks: { | 488 | addEBooks: { |
| 489 | private: false | 489 | private: false |
| 490 | }, | 490 | }, |
| 491 | editedItem: {}, | 491 | editedItem: {}, |
| 492 | token: "" | 492 | token: "" |
| 493 | }), | 493 | }), |
| 494 | methods: { | 494 | methods: { |
| 495 | pickImage() { | 495 | pickImage() { |
| 496 | this.$refs.image.click(); | 496 | this.$refs.image.click(); |
| 497 | }, | 497 | }, |
| 498 | pickFile() { | 498 | pickFile() { |
| 499 | this.$refs.file.click(); | 499 | this.$refs.file.click(); |
| 500 | }, | 500 | }, |
| 501 | onImagePicked(e) { | 501 | onImagePicked(e) { |
| 502 | // console.log(e) | 502 | // console.log(e) |
| 503 | const files = e.target.files; | 503 | const files = e.target.files; |
| 504 | /** fetch Image Name **/ | 504 | /** fetch Image Name **/ |
| 505 | if (files[0] !== undefined) { | 505 | if (files[0] !== undefined) { |
| 506 | this.imageName = files[0].name; | 506 | this.imageName = files[0].name; |
| 507 | if (this.imageName.lastIndexOf(".") <= 0) { | 507 | if (this.imageName.lastIndexOf(".") <= 0) { |
| 508 | return; | 508 | return; |
| 509 | } | 509 | } |
| 510 | /** Select many image and showing many image add to news card **/ | 510 | /** Select many image and showing many image add to news card **/ |
| 511 | const fr = new FileReader(); | 511 | const fr = new FileReader(); |
| 512 | fr.readAsDataURL(files[0]); | 512 | fr.readAsDataURL(files[0]); |
| 513 | fr.addEventListener("load", () => { | 513 | fr.addEventListener("load", () => { |
| 514 | this.files = fr.result; | 514 | this.files = fr.result; |
| 515 | }); | 515 | }); |
| 516 | } else { | 516 | } else { |
| 517 | this.imageName = ""; | 517 | this.imageName = ""; |
| 518 | this.imageFile = ""; | 518 | this.imageFile = ""; |
| 519 | this.files = ""; | 519 | this.files = ""; |
| 520 | this.imageUrl = ""; | 520 | this.imageUrl = ""; |
| 521 | } | 521 | } |
| 522 | }, | 522 | }, |
| 523 | getEBooksList() { | 523 | getEBooksList() { |
| 524 | this.showLoader = true; | 524 | this.showLoader = true; |
| 525 | http() | 525 | http() |
| 526 | .get("/getEBooksList", { | 526 | .get("/getEBooksList", { |
| 527 | params: { schoolId: this.$store.state.schoolId }, | 527 | params: { schoolId: this.$store.state.schoolId }, |
| 528 | headers: { Authorization: "Bearer " + this.token } | 528 | headers: { Authorization: "Bearer " + this.token } |
| 529 | }) | 529 | }) |
| 530 | .then(response => { | 530 | .then(response => { |
| 531 | this.eBookData = response.data.data; | 531 | this.eBookData = response.data.data; |
| 532 | this.showLoader = false; | 532 | this.showLoader = false; |
| 533 | }) | 533 | }) |
| 534 | .catch(error => { | 534 | .catch(error => { |
| 535 | // console.log("err====>", err); | 535 | // console.log("err====>", err); |
| 536 | this.showLoader = false; | 536 | this.showLoader = false; |
| 537 | if (error.response.status === 401) { | 537 | if (error.response.status === 401) { |
| 538 | this.$router.replace({ path: "/" }); | 538 | this.$router.replace({ path: "/" }); |
| 539 | this.$store.dispatch("setToken", null); | 539 | this.$store.dispatch("setToken", null); |
| 540 | this.$store.dispatch("Id", null); | 540 | this.$store.dispatch("Id", null); |
| 541 | } | 541 | } |
| 542 | }); | 542 | }); |
| 543 | }, | 543 | }, |
| 544 | onFilePicked(e) { | 544 | onFilePicked(e) { |
| 545 | // console.log(e) | 545 | // console.log(e) |
| 546 | const files = e.target.files; | 546 | const files = e.target.files; |
| 547 | /** fetch Image Name **/ | 547 | /** fetch Image Name **/ |
| 548 | if (files[0] !== undefined) { | 548 | if (files[0] !== undefined) { |
| 549 | this.fileName = files[0].name; | 549 | this.fileName = files[0].name; |
| 550 | if (this.fileName.lastIndexOf(".") <= 0) { | 550 | if (this.fileName.lastIndexOf(".") <= 0) { |
| 551 | return; | 551 | return; |
| 552 | } | 552 | } |
| 553 | const fr = new FileReader(); | 553 | const fr = new FileReader(); |
| 554 | fr.readAsDataURL(files[0]); | 554 | fr.readAsDataURL(files[0]); |
| 555 | fr.addEventListener("load", () => { | 555 | fr.addEventListener("load", () => { |
| 556 | this.anyFile = fr.result; | 556 | this.anyFile = fr.result; |
| 557 | // console.log(" this.anyFile Url", this.anyFile ) | 557 | // console.log(" this.anyFile Url", this.anyFile ) |
| 558 | }); | 558 | }); |
| 559 | } else { | 559 | } else { |
| 560 | this.anyFile = ""; | 560 | this.anyFile = ""; |
| 561 | this.fileName = ""; | 561 | this.fileName = ""; |
| 562 | } | 562 | } |
| 563 | }, | 563 | }, |
| 564 | editItem(item) { | 564 | editItem(item) { |
| 565 | this.files = []; | 565 | this.files = []; |
| 566 | this.editedIndex = this.eBookData.indexOf(item); | 566 | this.editedIndex = this.eBookData.indexOf(item); |
| 567 | this.editedItem = Object.assign({}, item); | 567 | this.editedItem = Object.assign({}, item); |
| 568 | this.editedItem.className = item.classId.classNum; | 568 | this.editedItem.className = item.classId.classNum; |
| 569 | this.dialog = true; | 569 | this.dialog = true; |
| 570 | }, | 570 | }, |
| 571 | profile(item) { | 571 | profile(item) { |
| 572 | this.editedIndex = this.eBookData.indexOf(item); | 572 | this.editedIndex = this.eBookData.indexOf(item); |
| 573 | this.editedItem = Object.assign({}, item); | 573 | this.editedItem = Object.assign({}, item); |
| 574 | this.dialog1 = true; | 574 | this.dialog1 = true; |
| 575 | }, | 575 | }, |
| 576 | deleteItem(item) { | 576 | deleteItem(item) { |
| 577 | let deleteEBooks = { | 577 | let deleteEBooks = { |
| 578 | ebookId: item._id | 578 | ebookId: item._id |
| 579 | }; | 579 | }; |
| 580 | http() | 580 | http() |
| 581 | .delete( | 581 | .delete( |
| 582 | "/deleteEBook", | 582 | "/deleteEBook", |
| 583 | confirm("Are you sure you want to delete this?") && { | 583 | confirm("Are you sure you want to delete this?") && { |
| 584 | params: deleteEBooks | 584 | params: deleteEBooks |
| 585 | } | 585 | } |
| 586 | ) | 586 | ) |
| 587 | .then(response => { | 587 | .then(response => { |
| 588 | this.snackbar = true; | 588 | this.snackbar = true; |
| 589 | this.text = "Successfully delete Existing News"; | 589 | this.text = "Successfully delete Existing News"; |
| 590 | this.getEBooksList(); | 590 | this.getEBooksList(); |
| 591 | }) | 591 | }) |
| 592 | .catch(error => { | 592 | .catch(error => { |
| 593 | this.snackbar = true; | 593 | this.snackbar = true; |
| 594 | this.text = error.response.data.message; | 594 | this.text = error.response.data.message; |
| 595 | }); | 595 | }); |
| 596 | }, | 596 | }, |
| 597 | close() { | 597 | close() { |
| 598 | this.dialog = false; | 598 | this.dialog = false; |
| 599 | }, | 599 | }, |
| 600 | close1() { | 600 | close1() { |
| 601 | this.dialog1 = false; | 601 | this.dialog1 = false; |
| 602 | }, | 602 | }, |
| 603 | submit() { | 603 | submit() { |
| 604 | if (this.$refs.form.validate()) { | 604 | if (this.$refs.form.validate()) { |
| 605 | if (this.files) { | 605 | if (this.files) { |
| 606 | const [baseUrl, imageUrl] = this.files.split(/,/); | 606 | const [baseUrl, imageUrl] = this.files.split(/,/); |
| 607 | this.addEBooks.uploadCover = imageUrl; | 607 | this.addEBooks.uploadCover = imageUrl; |
| 608 | // console.log("anyFile.split(/,/)", this.addEBooks.uploadCover); | 608 | // console.log("anyFile.split(/,/)", this.addEBooks.uploadCover); |
| 609 | } | 609 | } |
| 610 | if (this.anyFile) { | 610 | if (this.anyFile) { |
| 611 | const [baseUrl, fileUrl] = this.anyFile.split(/,/); | 611 | const [baseUrl, fileUrl] = this.anyFile.split(/,/); |
| 612 | this.addEBooks.uploadFile = fileUrl; | 612 | this.addEBooks.uploadFile = fileUrl; |
| 613 | // console.log("anyFile.split(/,/)", this.addEBooks.uploadFile); | 613 | // console.log("anyFile.split(/,/)", this.addEBooks.uploadFile); |
| 614 | } | 614 | } |
| 615 | this.addEBooks = this.$store.state.schoolId; | 615 | this.addEBooks = this.$store.state.schoolId; |
| 616 | this.loading = true; | 616 | this.loading = true; |
| 617 | http() | 617 | http() |
| 618 | .post("/createEBook", this.addEBooks) | 618 | .post("/createEBook", this.addEBooks) |
| 619 | .then(response => { | 619 | .then(response => { |
| 620 | this.snackbar = true; | 620 | this.snackbar = true; |
| 621 | this.text = "New E-Book added successfully"; | 621 | this.text = "New E-Book added successfully"; |
| 622 | this.addEBooks.uploadCover = ""; | 622 | this.addEBooks.uploadCover = ""; |
| 623 | this.addEBooks.uploadFile = ""; | 623 | this.addEBooks.uploadFile = ""; |
| 624 | this.files = ""; | 624 | this.files = ""; |
| 625 | this.getEBooksList(); | 625 | this.getEBooksList(); |
| 626 | this.addEBookDialog = false; | 626 | this.addEBookDialog = false; |
| 627 | this.loading = false; | 627 | this.loading = false; |
| 628 | this.clear(); | 628 | this.clear(); |
| 629 | }) | 629 | }) |
| 630 | .catch(error => { | 630 | .catch(error => { |
| 631 | this.snackbar = true; | 631 | this.snackbar = true; |
| 632 | this.text = error.response.data.message; | 632 | this.text = error.response.data.message; |
| 633 | this.loading = false; | 633 | this.loading = false; |
| 634 | }); | 634 | }); |
| 635 | } | 635 | } |
| 636 | }, | 636 | }, |
| 637 | clear() { | 637 | clear() { |
| 638 | this.$refs.form.reset(); | 638 | this.$refs.form.reset(); |
| 639 | this.addEBooks.uploadCover = ""; | 639 | this.addEBooks.uploadCover = ""; |
| 640 | this.files = ""; | 640 | this.files = ""; |
| 641 | }, | 641 | }, |
| 642 | save() { | 642 | save() { |
| 643 | this.loadingUpadte = true; | 643 | this.loadingUpadte = true; |
| 644 | if (this.files.length > 0) { | 644 | if (this.files.length > 0) { |
| 645 | const [baseUrl, imageUrl] = this.files.split(/,/); | 645 | const [baseUrl, imageUrl] = this.files.split(/,/); |
| 646 | this.editedItem.uploadCover = imageUrl; | 646 | this.editedItem.uploadCover = imageUrl; |
| 647 | // console.log("anyFile.split(/,/)", this.addEBooks.uploadCover); | 647 | // console.log("anyFile.split(/,/)", this.addEBooks.uploadCover); |
| 648 | } | 648 | } |
| 649 | if (this.anyFile) { | 649 | if (this.anyFile) { |
| 650 | const [baseUrl, fileUrl] = this.anyFile.split(/,/); | 650 | const [baseUrl, fileUrl] = this.anyFile.split(/,/); |
| 651 | this.editedItem.uploadFile = fileUrl; | 651 | this.editedItem.uploadFile = fileUrl; |
| 652 | // console.log("anyFile.split(/,/)", this.addEBooks.uploadFile); | 652 | // console.log("anyFile.split(/,/)", this.addEBooks.uploadFile); |
| 653 | } | 653 | } |
| 654 | this.editedItem.ebookId = this.editedItem._id; | 654 | this.editedItem.ebookId = this.editedItem._id; |
| 655 | http() | 655 | http() |
| 656 | .put("/updateEBook", this.editedItem) | 656 | .put("/updateEBook", this.editedItem) |
| 657 | .then(response => { | 657 | .then(response => { |
| 658 | this.loadingUpadte = false; | 658 | this.loadingUpadte = false; |
| 659 | this.snackbar = true; | 659 | this.snackbar = true; |
| 660 | this.text = "Successfully Edit Existing E-Book"; | 660 | this.text = "Successfully Edit Existing E-Book"; |
| 661 | this.getEBooksList(); | 661 | this.getEBooksList(); |
| 662 | this.editedItem.uploadFile = ""; | 662 | this.editedItem.uploadFile = ""; |
| 663 | this.editedItem.uploadCover = ""; | 663 | this.editedItem.uploadCover = ""; |
| 664 | this.anyFile = ""; | 664 | this.anyFile = ""; |
| 665 | this.files = ""; | 665 | this.files = ""; |
| 666 | this.close(); | 666 | this.close(); |
| 667 | }) | 667 | }) |
| 668 | .catch(error => { | 668 | .catch(error => { |
| 669 | this.loadingUpadte = false; | 669 | this.loadingUpadte = false; |
| 670 | this.snackbar = true; | 670 | this.snackbar = true; |
| 671 | this.text = error.response.data.message; | 671 | this.text = error.response.data.message; |
| 672 | // console.log(error); | 672 | // console.log(error); |
| 673 | }); | 673 | }); |
| 674 | }, | 674 | }, |
| 675 | getAllClass() { | 675 | getAllClass() { |
| 676 | http() | 676 | http() |
| 677 | .get("/getClassesList", { | 677 | .get("/getClassesList", { |
| 678 | headers: { Authorization: "Bearer " + this.token } | 678 | headers: { Authorization: "Bearer " + this.token } |
| 679 | }) | 679 | }) |
| 680 | .then(response => { | 680 | .then(response => { |
| 681 | this.addClass = response.data.data; | 681 | this.addClass = response.data.data; |
| 682 | }) | 682 | }) |
| 683 | .catch(err => { | 683 | .catch(err => { |
| 684 | // console.log("err====>", err); | 684 | // console.log("err====>", err); |
| 685 | // this.$router.replace({ path: "/" }); | 685 | // this.$router.replace({ path: "/" }); |
| 686 | }); | 686 | }); |
| 687 | }, | 687 | }, |
| 688 | displaySearch() { | 688 | displaySearch() { |
| 689 | (this.show = false), (this.showSearch = true); | 689 | (this.show = false), (this.showSearch = true); |
| 690 | }, | 690 | }, |
| 691 | closeSearch() { | 691 | closeSearch() { |
| 692 | this.showSearch = false; | 692 | this.showSearch = false; |
| 693 | this.show = true; | 693 | this.show = true; |
| 694 | this.search = ""; | 694 | this.search = ""; |
| 695 | } | 695 | } |
| 696 | }, | 696 | }, |
| 697 | mounted() { | 697 | mounted() { |
| 698 | this.token = this.$store.state.token; | 698 | this.token = this.$store.state.token; |
| 699 | this.getEBooksList(); | 699 | this.getEBooksList(); |
| 700 | this.getAllClass(); | 700 | this.getAllClass(); |
| 701 | // this.getBookData(); | 701 | // this.getBookData(); |
| 702 | // this.editItem; | 702 | // this.editItem; |
| 703 | } | 703 | } |
| 704 | }; | 704 | }; |
| 705 | </script> | 705 | </script> |
src/pages/Library/issue.vue
| 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 | ></v-text-field> | 27 | ></v-text-field> |
| 28 | </v-flex> | 28 | </v-flex> |
| 29 | </v-layout> | 29 | </v-layout> |
| 30 | </v-flex> | 30 | </v-flex> |
| 31 | <v-flex xs12 sm12> | 31 | <v-flex xs12 sm12> |
| 32 | <v-layout> | 32 | <v-layout> |
| 33 | <v-flex xs4 class="pt-4 subheading"> | 33 | <v-flex xs4 class="pt-4 subheading"> |
| 34 | <label class="right">Book:</label> | 34 | <label class="right">Book:</label> |
| 35 | </v-flex> | 35 | </v-flex> |
| 36 | <v-flex xs7 class="ml-3"> | 36 | <v-flex xs7 class="ml-3"> |
| 37 | <v-text-field | 37 | <v-text-field |
| 38 | v-model="editedItem.name" | 38 | v-model="editedItem.name" |
| 39 | placeholder="fill your Book name" | 39 | placeholder="fill your Book name" |
| 40 | name="name" | 40 | name="name" |
| 41 | type="text" | 41 | type="text" |
| 42 | ></v-text-field> | 42 | ></v-text-field> |
| 43 | </v-flex> | 43 | </v-flex> |
| 44 | </v-layout> | 44 | </v-layout> |
| 45 | </v-flex> | 45 | </v-flex> |
| 46 | <v-flex xs12 sm12> | 46 | <v-flex xs12 sm12> |
| 47 | <v-layout> | 47 | <v-layout> |
| 48 | <v-flex xs4 class="pt-4 subheading"> | 48 | <v-flex xs4 class="pt-4 subheading"> |
| 49 | <label class="right">Author:</label> | 49 | <label class="right">Author:</label> |
| 50 | </v-flex> | 50 | </v-flex> |
| 51 | <v-flex xs7 class="ml-3"> | 51 | <v-flex xs7 class="ml-3"> |
| 52 | <v-text-field | 52 | <v-text-field |
| 53 | placeholder="fill your Author Name" | 53 | placeholder="fill your Author Name" |
| 54 | v-model="editedItem.author" | 54 | v-model="editedItem.author" |
| 55 | type="text" | 55 | type="text" |
| 56 | ></v-text-field> | 56 | ></v-text-field> |
| 57 | </v-flex> | 57 | </v-flex> |
| 58 | </v-layout> | 58 | </v-layout> |
| 59 | </v-flex> | 59 | </v-flex> |
| 60 | <v-flex xs12 sm12> | 60 | <v-flex xs12 sm12> |
| 61 | <v-layout> | 61 | <v-layout> |
| 62 | <v-flex xs4 class="pt-4 subheading"> | 62 | <v-flex xs4 class="pt-4 subheading"> |
| 63 | <label class="right">Subject Code:</label> | 63 | <label class="right">Subject Code:</label> |
| 64 | </v-flex> | 64 | </v-flex> |
| 65 | <v-flex xs7 class="ml-3"> | 65 | <v-flex xs7 class="ml-3"> |
| 66 | <v-text-field | 66 | <v-text-field |
| 67 | placeholder="fill your Subject Codes" | 67 | placeholder="fill your Subject Codes" |
| 68 | v-model="editedItem.subjectCode" | 68 | v-model="editedItem.subjectCode" |
| 69 | type="text" | 69 | type="text" |
| 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 sm12> | 74 | <v-flex xs12 sm12> |
| 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">Serial Number:</label> | 77 | <label class="right">Serial Number:</label> |
| 78 | </v-flex> | 78 | </v-flex> |
| 79 | <v-flex xs7 class="ml-3"> | 79 | <v-flex xs7 class="ml-3"> |
| 80 | <v-text-field | 80 | <v-text-field |
| 81 | placeholder="fill your Serial Number" | 81 | placeholder="fill your Serial Number" |
| 82 | v-model="editedItem.serialNumber" | 82 | v-model="editedItem.serialNumber" |
| 83 | type="text" | 83 | type="text" |
| 84 | ></v-text-field> | 84 | ></v-text-field> |
| 85 | </v-flex> | 85 | </v-flex> |
| 86 | </v-layout> | 86 | </v-layout> |
| 87 | </v-flex> | 87 | </v-flex> |
| 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">due Date:</label> | 91 | <label class="right">due Date:</label> |
| 92 | </v-flex> | 92 | </v-flex> |
| 93 | <v-flex xs7 class="ml-3"> | 93 | <v-flex xs7 class="ml-3"> |
| 94 | <v-menu | 94 | <v-menu |
| 95 | ref="menu1" | 95 | ref="menu1" |
| 96 | :close-on-content-click="false" | 96 | :close-on-content-click="false" |
| 97 | v-model="menu1" | 97 | v-model="menu1" |
| 98 | :nudge-right="40" | 98 | :nudge-right="40" |
| 99 | :return-value.sync="menu1" | 99 | :return-value.sync="menu1" |
| 100 | lazy | 100 | lazy |
| 101 | transition="scale-transition" | 101 | transition="scale-transition" |
| 102 | offset-y | 102 | offset-y |
| 103 | full-width | 103 | full-width |
| 104 | min-width="290px" | 104 | min-width="290px" |
| 105 | > | 105 | > |
| 106 | <v-text-field | 106 | <v-text-field |
| 107 | slot="activator" | 107 | slot="activator" |
| 108 | v-model="editedItem.dueDate" | 108 | v-model="editedItem.dueDate" |
| 109 | label="Select Due Date" | 109 | label="Select Due Date" |
| 110 | append-icon="event" | 110 | append-icon="event" |
| 111 | readonly | 111 | readonly |
| 112 | ></v-text-field> | 112 | ></v-text-field> |
| 113 | <v-date-picker v-model="editedItem.dueDate" @input="menu1 = false"></v-date-picker> | 113 | <v-date-picker v-model="editedItem.dueDate" @input="menu1 = false"></v-date-picker> |
| 114 | </v-menu> | 114 | </v-menu> |
| 115 | </v-flex> | 115 | </v-flex> |
| 116 | </v-layout> | 116 | </v-layout> |
| 117 | </v-flex> | 117 | </v-flex> |
| 118 | <v-flex xs12 sm12> | 118 | <v-flex xs12 sm12> |
| 119 | <v-layout> | 119 | <v-layout> |
| 120 | <v-flex xs4 class="pt-4 subheading"> | 120 | <v-flex xs4 class="pt-4 subheading"> |
| 121 | <label class="right">Note:</label> | 121 | <label class="right">Note:</label> |
| 122 | </v-flex> | 122 | </v-flex> |
| 123 | <v-flex xs7 class="ml-3"> | 123 | <v-flex xs7 class="ml-3"> |
| 124 | <v-text-field | 124 | <v-text-field |
| 125 | placeholder="fill your Serial Number" | 125 | placeholder="fill your Serial Number" |
| 126 | v-model="editedItem.note" | 126 | v-model="editedItem.note" |
| 127 | type="text" | 127 | type="text" |
| 128 | ></v-text-field> | 128 | ></v-text-field> |
| 129 | </v-flex> | 129 | </v-flex> |
| 130 | </v-layout> | 130 | </v-layout> |
| 131 | </v-flex> | 131 | </v-flex> |
| 132 | </v-layout> | 132 | </v-layout> |
| 133 | <v-layout> | 133 | <v-layout> |
| 134 | <v-flex xs12> | 134 | <v-flex xs12> |
| 135 | <v-card-actions> | 135 | <v-card-actions> |
| 136 | <v-spacer></v-spacer> | 136 | <v-spacer></v-spacer> |
| 137 | <v-btn round dark @click="save" class="add-button">Save</v-btn> | 137 | <v-btn round dark @click="save" class="add-button">Save</v-btn> |
| 138 | </v-card-actions> | 138 | </v-card-actions> |
| 139 | </v-flex> | 139 | </v-flex> |
| 140 | </v-layout> | 140 | </v-layout> |
| 141 | </v-container> | 141 | </v-container> |
| 142 | </v-form> | 142 | </v-form> |
| 143 | </v-card-text> | 143 | </v-card-text> |
| 144 | </v-card> | 144 | </v-card> |
| 145 | </v-dialog> | 145 | </v-dialog> |
| 146 | 146 | ||
| 147 | <!-- ****** PROFILE VIEW PARTICULAR ISSUE DATA ****** --> | 147 | <!-- ****** PROFILE VIEW PARTICULAR ISSUE DATA ****** --> |
| 148 | 148 | ||
| 149 | <v-dialog v-model="viewIssueDialog" max-width="500px"> | 149 | <v-dialog v-model="viewIssueDialog" max-width="500px"> |
| 150 | <v-card flat class="card-style pa-3" dark> | 150 | <v-card flat class="card-style pa-3" dark> |
| 151 | <v-layout> | 151 | <v-layout> |
| 152 | <v-flex xs12> | 152 | <v-flex xs12> |
| 153 | <label class="title text-xs-center">View Issue</label> | 153 | <label class="title text-xs-center">View Issue</label> |
| 154 | <v-icon size="24" class="right" @click="viewIssueDialog = false">cancel</v-icon> | 154 | <v-icon size="24" class="right" @click="viewIssueDialog = false">cancel</v-icon> |
| 155 | </v-flex> | 155 | </v-flex> |
| 156 | </v-layout> | 156 | </v-layout> |
| 157 | <v-card-text> | 157 | <v-card-text> |
| 158 | <v-container grid-list-md> | 158 | <v-container grid-list-md> |
| 159 | <v-layout wrap> | 159 | <v-layout wrap> |
| 160 | <v-flex> | 160 | <v-flex> |
| 161 | <v-layout> | 161 | <v-layout> |
| 162 | <v-flex xs5 sm6> | 162 | <v-flex xs5 sm6> |
| 163 | <h5 class="right my-1"> | 163 | <h5 class="right my-1"> |
| 164 | <b>Book:</b> | 164 | <b>Book:</b> |
| 165 | </h5> | 165 | </h5> |
| 166 | </v-flex> | 166 | </v-flex> |
| 167 | <v-flex sm6 xs8> | 167 | <v-flex sm6 xs8> |
| 168 | <h5 class="my-1">{{ editedItem.name }}</h5> | 168 | <h5 class="my-1">{{ editedItem.name }}</h5> |
| 169 | </v-flex> | 169 | </v-flex> |
| 170 | </v-layout> | 170 | </v-layout> |
| 171 | <v-layout> | 171 | <v-layout> |
| 172 | <v-flex xs5 sm6> | 172 | <v-flex xs5 sm6> |
| 173 | <h5 class="right my-1"> | 173 | <h5 class="right my-1"> |
| 174 | <b>Serial Number:</b> | 174 | <b>Serial Number:</b> |
| 175 | </h5> | 175 | </h5> |
| 176 | </v-flex> | 176 | </v-flex> |
| 177 | <v-flex sm6 xs8> | 177 | <v-flex sm6 xs8> |
| 178 | <h5 class="my-1">{{ editedItem.serialNumber }}</h5> | 178 | <h5 class="my-1">{{ editedItem.serialNumber }}</h5> |
| 179 | </v-flex> | 179 | </v-flex> |
| 180 | </v-layout> | 180 | </v-layout> |
| 181 | <v-layout> | 181 | <v-layout> |
| 182 | <v-flex xs5 sm6> | 182 | <v-flex xs5 sm6> |
| 183 | <h5 class="right my-1"> | 183 | <h5 class="right my-1"> |
| 184 | <b>Issue date:</b> | 184 | <b>Issue date:</b> |
| 185 | </h5> | 185 | </h5> |
| 186 | </v-flex> | 186 | </v-flex> |
| 187 | <v-flex sm6 xs8> | 187 | <v-flex sm6 xs8> |
| 188 | <h5 class="my-1">{{ dates(editedItem.creted) }}</h5> | 188 | <h5 class="my-1">{{ dates(editedItem.creted) }}</h5> |
| 189 | </v-flex> | 189 | </v-flex> |
| 190 | </v-layout> | 190 | </v-layout> |
| 191 | <v-layout> | 191 | <v-layout> |
| 192 | <v-flex xs5 sm6> | 192 | <v-flex xs5 sm6> |
| 193 | <h5 class="right my-1"> | 193 | <h5 class="right my-1"> |
| 194 | <b>Due date:</b> | 194 | <b>Due date:</b> |
| 195 | </h5> | 195 | </h5> |
| 196 | </v-flex> | 196 | </v-flex> |
| 197 | <v-flex sm6 xs8> | 197 | <v-flex sm6 xs8> |
| 198 | <h5 class="my-1">{{ dates(editedItem.dueDate) }}</h5> | 198 | <h5 class="my-1">{{ dates(editedItem.dueDate) }}</h5> |
| 199 | </v-flex> | 199 | </v-flex> |
| 200 | </v-layout> | 200 | </v-layout> |
| 201 | <v-layout> | 201 | <v-layout> |
| 202 | <v-flex xs5 sm6> | 202 | <v-flex xs5 sm6> |
| 203 | <h5 class="right my-1"> | 203 | <h5 class="right my-1"> |
| 204 | <b>Status:</b> | 204 | <b>Status:</b> |
| 205 | </h5> | 205 | </h5> |
| 206 | </v-flex> | 206 | </v-flex> |
| 207 | <v-flex sm6 xs8> | 207 | <v-flex sm6 xs8> |
| 208 | <h5 class="my-1">{{ editedItem.status }}</h5> | 208 | <h5 class="my-1">{{ editedItem.status }}</h5> |
| 209 | </v-flex> | 209 | </v-flex> |
| 210 | </v-layout> | 210 | </v-layout> |
| 211 | </v-flex> | 211 | </v-flex> |
| 212 | </v-layout> | 212 | </v-layout> |
| 213 | </v-container> | 213 | </v-container> |
| 214 | </v-card-text> | 214 | </v-card-text> |
| 215 | </v-card> | 215 | </v-card> |
| 216 | </v-dialog> | 216 | </v-dialog> |
| 217 | <!-- ****** EXISTING ISSUE TABLE****** --> | 217 | <!-- ****** EXISTING ISSUE TABLE****** --> |
| 218 | <!-- <v-card> | 218 | <!-- <v-card> |
| 219 | <v-layout> | 219 | <v-layout> |
| 220 | <v-flex lg1 xs4 md4 xl1 class="hidden-xs-only"> | 220 | <v-flex lg1 xs4 md4 xl1 class="hidden-xs-only"> |
| 221 | <label class="right pt-4">Library ID:</label> | 221 | <label class="right pt-4">Library ID:</label> |
| 222 | </v-flex> | 222 | </v-flex> |
| 223 | <v-flex lg2 md3 xs7> | 223 | <v-flex lg2 md3 xs7> |
| 224 | <v-text-field | 224 | <v-text-field |
| 225 | class="pl-3" | 225 | class="pl-3" |
| 226 | @keyup.enter="getIssueList" | 226 | @keyup.enter="getIssueList" |
| 227 | v-model="libraryId" | 227 | v-model="libraryId" |
| 228 | placeholder="fill your library Id" | 228 | placeholder="fill your library Id" |
| 229 | ></v-text-field> | 229 | ></v-text-field> |
| 230 | </v-flex> | 230 | </v-flex> |
| 231 | <v-flex lg9 md3 xs5> | 231 | <v-flex lg9 md3 xs5> |
| 232 | <v-btn | 232 | <v-btn |
| 233 | round | 233 | round |
| 234 | class="black mt-1 right hidden-xs-only" | 234 | class="black mt-1 right hidden-xs-only" |
| 235 | @click="getIssueList" | 235 | @click="getIssueList" |
| 236 | :loading="loadingSearch" | 236 | :loading="loadingSearch" |
| 237 | dark | 237 | dark |
| 238 | >Search</v-btn> | 238 | >Search</v-btn> |
| 239 | <v-btn | 239 | <v-btn |
| 240 | round | 240 | round |
| 241 | class="black mt-4 right hidden-sm-only hidden-xl-only hidden-md-only hidden-lg-only" | 241 | class="black mt-4 right hidden-sm-only hidden-xl-only hidden-md-only hidden-lg-only" |
| 242 | :loading="loadingSearch" | 242 | :loading="loadingSearch" |
| 243 | @click="getIssueList" | 243 | @click="getIssueList" |
| 244 | small | 244 | small |
| 245 | dark | 245 | dark |
| 246 | >Search</v-btn> | 246 | >Search</v-btn> |
| 247 | </v-flex> | 247 | </v-flex> |
| 248 | </v-layout> | 248 | </v-layout> |
| 249 | </v-card>--> | 249 | </v-card>--> |
| 250 | 250 | ||
| 251 | <v-toolbar color="transparent" flat> | 251 | <v-toolbar color="transparent" flat> |
| 252 | <v-btn | 252 | <v-btn |
| 253 | fab | 253 | fab |
| 254 | dark | 254 | dark |
| 255 | class="open-dialog-button hidden-xl-only hidden-md-only hidden-lg-only" | 255 | class="open-dialog-button hidden-xl-only hidden-md-only hidden-lg-only" |
| 256 | small | 256 | small |
| 257 | @click="addIssueDialog = true" | 257 | @click="addIssueDialog = true" |
| 258 | > | 258 | > |
| 259 | <v-icon dark>add</v-icon> | 259 | <v-icon dark>add</v-icon> |
| 260 | </v-btn> | 260 | </v-btn> |
| 261 | <v-btn | 261 | <v-btn |
| 262 | round | 262 | round |
| 263 | class="open-dialog-button hidden-sm-only hidden-xs-only" | 263 | class="open-dialog-button hidden-sm-only hidden-xs-only" |
| 264 | dark | 264 | dark |
| 265 | @click="addIssueDialog = true" | 265 | @click="addIssueDialog = true" |
| 266 | > | 266 | > |
| 267 | <v-icon class="white--text pr-1" size="20">add</v-icon>Add Issue | 267 | <v-icon class="white--text pr-1" size="20">add</v-icon>Add Issue |
| 268 | </v-btn> | 268 | </v-btn> |
| 269 | <v-flex lg2 md3 xs7> | 269 | <v-flex lg2 md3 xs7> |
| 270 | <v-text-field | 270 | <v-text-field |
| 271 | class="pl-3" | 271 | class="pl-3" |
| 272 | @keyup.enter="getIssueList" | 272 | @keyup.enter="getIssueList" |
| 273 | v-model="libraryId" | 273 | v-model="libraryId" |
| 274 | placeholder="fill your library Id" | 274 | placeholder="fill your library Id" |
| 275 | ></v-text-field> | 275 | ></v-text-field> |
| 276 | </v-flex> | 276 | </v-flex> |
| 277 | <v-spacer></v-spacer> | 277 | <v-spacer></v-spacer> |
| 278 | <v-btn | 278 | <v-btn |
| 279 | round | 279 | round |
| 280 | class="add-button mt-1 right hidden-xs-only" | 280 | class="add-button mt-1 right hidden-xs-only" |
| 281 | @click="getIssueList" | 281 | @click="getIssueList" |
| 282 | :loading="loadingSearch" | 282 | :loading="loadingSearch" |
| 283 | dark | 283 | dark |
| 284 | >Search</v-btn> | 284 | >Search</v-btn> |
| 285 | <v-btn | 285 | <v-btn |
| 286 | round | 286 | round |
| 287 | class="add-button mt-4 right hidden-sm-only hidden-xl-only hidden-md-only hidden-lg-only" | 287 | class="add-button mt-4 right hidden-sm-only hidden-xl-only hidden-md-only hidden-lg-only" |
| 288 | :loading="loadingSearch" | 288 | :loading="loadingSearch" |
| 289 | @click="getIssueList" | 289 | @click="getIssueList" |
| 290 | small | 290 | small |
| 291 | dark | 291 | dark |
| 292 | >Search</v-btn> | 292 | >Search</v-btn> |
| 293 | <v-card-title class="body-1" v-show="show"> | 293 | <v-card-title class="body-1" v-show="show"> |
| 294 | <v-btn icon large flat @click="displaySearch"> | 294 | <v-btn icon large flat @click="displaySearch"> |
| 295 | <v-avatar size="27"> | 295 | <v-avatar size="27"> |
| 296 | <img src="/static/icon/dashboard icons-49.png" alt="icon" /> | 296 | <img src="/static/icon/search.png" alt="icon" /> |
| 297 | </v-avatar> | 297 | </v-avatar> |
| 298 | </v-btn> | 298 | </v-btn> |
| 299 | </v-card-title> | 299 | </v-card-title> |
| 300 | <v-flex xs8 sm8 md3 lg2 v-show="showSearch"> | 300 | <v-flex xs8 sm8 md3 lg2 v-show="showSearch"> |
| 301 | <v-layout> | 301 | <v-layout> |
| 302 | <v-text-field v-model="search" label="Search" prepend-inner-icon="search" color="primary"></v-text-field> | 302 | <v-text-field v-model="search" label="Search" prepend-inner-icon="search" color="primary"></v-text-field> |
| 303 | <v-icon @click="closeSearch" color="error">close</v-icon> | 303 | <v-icon @click="closeSearch" color="error">close</v-icon> |
| 304 | </v-layout> | 304 | </v-layout> |
| 305 | </v-flex> | 305 | </v-flex> |
| 306 | </v-toolbar> | 306 | </v-toolbar> |
| 307 | <v-data-table | 307 | <v-data-table |
| 308 | :headers="headers" | 308 | :headers="headers" |
| 309 | :items="desserts" | 309 | :items="desserts" |
| 310 | :pagination.sync="pagination" | 310 | :pagination.sync="pagination" |
| 311 | :search="search" | 311 | :search="search" |
| 312 | > | 312 | > |
| 313 | <template slot="items" slot-scope="props" v-if="props.item.isReturn != true"> | 313 | <template slot="items" slot-scope="props" v-if="props.item.isReturn != true"> |
| 314 | <tr class="tr"> | 314 | <tr class="tr"> |
| 315 | <td class="td td-row">{{ props.index + 1}}</td> | 315 | <td class="td td-row">{{ props.index + 1}}</td> |
| 316 | <td class="text-xs-center td td-row">{{ props.item.bookId.name}}</td> | 316 | <td class="text-xs-center td td-row">{{ props.item.bookId.name}}</td> |
| 317 | <td class="text-xs-center td td-row">{{ props.item.serialNumber}}</td> | 317 | <td class="text-xs-center td td-row">{{ props.item.serialNumber}}</td> |
| 318 | <td class="text-xs-center td td-row">{{ dates(props.item.created) }}</td> | 318 | <td class="text-xs-center td td-row">{{ dates(props.item.created) }}</td> |
| 319 | <td class="text-xs-center td td-row">{{ dates(props.item.dueDate) }}</td> | 319 | <td class="text-xs-center td td-row">{{ dates(props.item.dueDate) }}</td> |
| 320 | <td class="text-xs-center td td-row"> | 320 | <td class="text-xs-center td td-row"> |
| 321 | <span | 321 | <span |
| 322 | v-if="props.item.bookId.status === 'AVAILABLE'" | 322 | v-if="props.item.bookId.status === 'AVAILABLE'" |
| 323 | class="green lighten-1 pa-1 px-2 white--text paymentStatus" | 323 | class="green lighten-1 pa-1 px-2 white--text paymentStatus" |
| 324 | >{{ props.item.bookId.status}}</span> | 324 | >{{ props.item.bookId.status}}</span> |
| 325 | <span | 325 | <span |
| 326 | v-if="props.item.bookId.status === 'UNAVAILABLE'" | 326 | v-if="props.item.bookId.status === 'UNAVAILABLE'" |
| 327 | class="red lighten-1 pa-1 px-2 white--text paymentStatus" | 327 | class="red lighten-1 pa-1 px-2 white--text paymentStatus" |
| 328 | >{{ props.item.bookId.status}}</span> | 328 | >{{ props.item.bookId.status}}</span> |
| 329 | </td> | 329 | </td> |
| 330 | <td class="text-xs-center td td-row"> | 330 | <td class="text-xs-center td td-row"> |
| 331 | <span> | 331 | <span> |
| 332 | <v-tooltip top> | 332 | <v-tooltip top> |
| 333 | <img | 333 | <img |
| 334 | slot="activator" | 334 | slot="activator" |
| 335 | style="cursor:pointer; width:25px; height:25px; " | 335 | style="cursor:pointer; width:25px; height:25px; " |
| 336 | class="mr-3" | 336 | class="mr-3" |
| 337 | @click="profile(props.item)" | 337 | @click="profile(props.item)" |
| 338 | src="/static/icon/dashboard icons-47.png" | 338 | src="/static/icon/view.png" |
| 339 | /> | 339 | /> |
| 340 | <span>View</span> | 340 | <span>View</span> |
| 341 | </v-tooltip> | 341 | </v-tooltip> |
| 342 | <v-tooltip top> | 342 | <v-tooltip top> |
| 343 | <img | 343 | <img |
| 344 | slot="activator" | 344 | slot="activator" |
| 345 | style="cursor:pointer; width:20px; height:18px; " | 345 | style="cursor:pointer; width:20px; height:18px; " |
| 346 | class="mr-3" | 346 | class="mr-3" |
| 347 | @click="editItem(props.item)" | 347 | @click="editItem(props.item)" |
| 348 | src="/static/icon/dashboard icons-50.png" | 348 | src="/static/icon/edit.png" |
| 349 | /> | 349 | /> |
| 350 | <span>Edit</span> | 350 | <span>Edit</span> |
| 351 | </v-tooltip> | 351 | </v-tooltip> |
| 352 | <v-tooltip top> | 352 | <v-tooltip top> |
| 353 | <img | 353 | <img |
| 354 | slot="activator" | 354 | slot="activator" |
| 355 | style="cursor:pointer; width:20px; height:20px; " | 355 | style="cursor:pointer; width:20px; height:20px; " |
| 356 | @click="deleteItem(props.item)" | 356 | @click="deleteItem(props.item)" |
| 357 | src="/static/icon/dashboard icons-51.png" | 357 | src="/static/icon/delete.png" |
| 358 | /> | 358 | /> |
| 359 | <span>Delete</span> | 359 | <span>Delete</span> |
| 360 | </v-tooltip> | 360 | </v-tooltip> |
| 361 | </span> | 361 | </span> |
| 362 | </td> | 362 | </td> |
| 363 | </tr> | 363 | </tr> |
| 364 | </template> | 364 | </template> |
| 365 | <v-alert | 365 | <v-alert |
| 366 | slot="no-results" | 366 | slot="no-results" |
| 367 | :value="true" | 367 | :value="true" |
| 368 | color="error" | 368 | color="error" |
| 369 | icon="warning" | 369 | icon="warning" |
| 370 | >Your search for "{{ search }}" found no results.</v-alert> | 370 | >Your search for "{{ search }}" found no results.</v-alert> |
| 371 | </v-data-table> | 371 | </v-data-table> |
| 372 | 372 | ||
| 373 | <!-- ****** ADD Issue ****** --> | 373 | <!-- ****** ADD Issue ****** --> |
| 374 | <v-dialog v-model="addIssueDialog" max-width="600px"> | 374 | <v-dialog v-model="addIssueDialog" max-width="600px"> |
| 375 | <v-card flat class="card-style pa-2" dark> | 375 | <v-card flat class="card-style pa-2" dark> |
| 376 | <v-layout> | 376 | <v-layout> |
| 377 | <v-flex xs12> | 377 | <v-flex xs12> |
| 378 | <label class="title text-xs-center">Add Issue</label> | 378 | <label class="title text-xs-center">Add Issue</label> |
| 379 | <v-icon size="24" class="right" @click="addIssueDialog = false">cancel</v-icon> | 379 | <v-icon size="24" class="right" @click="addIssueDialog = false">cancel</v-icon> |
| 380 | </v-flex> | 380 | </v-flex> |
| 381 | </v-layout> | 381 | </v-layout> |
| 382 | <v-form ref="form" v-model="valid" lazy-validation> | 382 | <v-form ref="form" v-model="valid" lazy-validation> |
| 383 | <v-container fluid> | 383 | <v-container fluid> |
| 384 | <v-flex xs12> | 384 | <v-flex xs12> |
| 385 | <v-layout> | 385 | <v-layout> |
| 386 | <v-flex xs4 class="pt-4 subheading"> | 386 | <v-flex xs4 class="pt-4 subheading"> |
| 387 | <label class="right">Library ID:</label> | 387 | <label class="right">Library ID:</label> |
| 388 | </v-flex> | 388 | </v-flex> |
| 389 | <v-flex xs7 class="ml-3"> | 389 | <v-flex xs7 class="ml-3"> |
| 390 | <v-text-field | 390 | <v-text-field |
| 391 | v-model="libraryID" | 391 | v-model="libraryID" |
| 392 | placeholder="fill your Library ID" | 392 | placeholder="fill your Library ID" |
| 393 | :rules="libraryIDRules" | 393 | :rules="libraryIDRules" |
| 394 | required | 394 | required |
| 395 | ></v-text-field> | 395 | ></v-text-field> |
| 396 | </v-flex> | 396 | </v-flex> |
| 397 | </v-layout> | 397 | </v-layout> |
| 398 | </v-flex> | 398 | </v-flex> |
| 399 | <v-flex xs12> | 399 | <v-flex xs12> |
| 400 | <v-layout> | 400 | <v-layout> |
| 401 | <v-flex xs4 class="pt-4 subheading"> | 401 | <v-flex xs4 class="pt-4 subheading"> |
| 402 | <label class="right">Book:</label> | 402 | <label class="right">Book:</label> |
| 403 | </v-flex> | 403 | </v-flex> |
| 404 | <v-flex xs7 class="ml-3"> | 404 | <v-flex xs7 class="ml-3"> |
| 405 | <v-select | 405 | <v-select |
| 406 | label="Select Book Name" | 406 | label="Select Book Name" |
| 407 | :rules="bookRules" | 407 | :rules="bookRules" |
| 408 | :items="books" | 408 | :items="books" |
| 409 | item-text="name" | 409 | item-text="name" |
| 410 | item-value="_id" | 410 | item-value="_id" |
| 411 | v-model="bookId" | 411 | v-model="bookId" |
| 412 | @change="getParticularBookData(bookId)" | 412 | @change="getParticularBookData(bookId)" |
| 413 | required | 413 | required |
| 414 | ></v-select> | 414 | ></v-select> |
| 415 | </v-flex> | 415 | </v-flex> |
| 416 | </v-layout> | 416 | </v-layout> |
| 417 | </v-flex> | 417 | </v-flex> |
| 418 | <v-flex xs12> | 418 | <v-flex xs12> |
| 419 | <v-layout> | 419 | <v-layout> |
| 420 | <v-flex xs4 class="pt-4 subheading"> | 420 | <v-flex xs4 class="pt-4 subheading"> |
| 421 | <label class="right">Author:</label> | 421 | <label class="right">Author:</label> |
| 422 | </v-flex> | 422 | </v-flex> |
| 423 | <v-flex xs7 class="ml-3"> | 423 | <v-flex xs7 class="ml-3"> |
| 424 | <v-text-field | 424 | <v-text-field |
| 425 | placeholder="fill your Author" | 425 | placeholder="fill your Author" |
| 426 | :rules="authorRules" | 426 | :rules="authorRules" |
| 427 | v-model="addIssue.author" | 427 | v-model="addIssue.author" |
| 428 | ></v-text-field> | 428 | ></v-text-field> |
| 429 | </v-flex> | 429 | </v-flex> |
| 430 | </v-layout> | 430 | </v-layout> |
| 431 | </v-flex> | 431 | </v-flex> |
| 432 | <v-flex xs12> | 432 | <v-flex xs12> |
| 433 | <v-layout> | 433 | <v-layout> |
| 434 | <v-flex xs4 class="pt-4 subheading"> | 434 | <v-flex xs4 class="pt-4 subheading"> |
| 435 | <label class="right">Subject Code:</label> | 435 | <label class="right">Subject Code:</label> |
| 436 | </v-flex> | 436 | </v-flex> |
| 437 | <v-flex xs7 class="ml-3"> | 437 | <v-flex xs7 class="ml-3"> |
| 438 | <v-text-field | 438 | <v-text-field |
| 439 | placeholder="fill your Subject Code" | 439 | placeholder="fill your Subject Code" |
| 440 | :rules="subjectCodeRules" | 440 | :rules="subjectCodeRules" |
| 441 | v-model="addIssue.subjectCode" | 441 | v-model="addIssue.subjectCode" |
| 442 | ></v-text-field> | 442 | ></v-text-field> |
| 443 | </v-flex> | 443 | </v-flex> |
| 444 | </v-layout> | 444 | </v-layout> |
| 445 | </v-flex> | 445 | </v-flex> |
| 446 | <v-flex xs12> | 446 | <v-flex xs12> |
| 447 | <v-layout> | 447 | <v-layout> |
| 448 | <v-flex xs4 class="pt-4 subheading"> | 448 | <v-flex xs4 class="pt-4 subheading"> |
| 449 | <label class="right">Serial No:</label> | 449 | <label class="right">Serial No:</label> |
| 450 | </v-flex> | 450 | </v-flex> |
| 451 | <v-flex xs7 class="ml-3"> | 451 | <v-flex xs7 class="ml-3"> |
| 452 | <v-text-field | 452 | <v-text-field |
| 453 | placeholder="fill your Serial No" | 453 | placeholder="fill your Serial No" |
| 454 | :rules="authorRules" | 454 | :rules="authorRules" |
| 455 | v-model="serialNo" | 455 | v-model="serialNo" |
| 456 | ></v-text-field> | 456 | ></v-text-field> |
| 457 | </v-flex> | 457 | </v-flex> |
| 458 | </v-layout> | 458 | </v-layout> |
| 459 | </v-flex> | 459 | </v-flex> |
| 460 | <v-flex xs12> | 460 | <v-flex xs12> |
| 461 | <v-layout> | 461 | <v-layout> |
| 462 | <v-flex xs4 class="pt-4 subheading"> | 462 | <v-flex xs4 class="pt-4 subheading"> |
| 463 | <label class="right">Due Date:</label> | 463 | <label class="right">Due Date:</label> |
| 464 | </v-flex> | 464 | </v-flex> |
| 465 | <v-flex xs7 class="ml-3"> | 465 | <v-flex xs7 class="ml-3"> |
| 466 | <v-menu | 466 | <v-menu |
| 467 | ref="menu2" | 467 | ref="menu2" |
| 468 | :close-on-content-click="false" | 468 | :close-on-content-click="false" |
| 469 | v-model="menu2" | 469 | v-model="menu2" |
| 470 | :nudge-right="40" | 470 | :nudge-right="40" |
| 471 | :return-value.sync="date" | 471 | :return-value.sync="date" |
| 472 | lazy | 472 | lazy |
| 473 | transition="scale-transition" | 473 | transition="scale-transition" |
| 474 | offset-y | 474 | offset-y |
| 475 | full-width | 475 | full-width |
| 476 | min-width="290px" | 476 | min-width="290px" |
| 477 | > | 477 | > |
| 478 | <v-text-field | 478 | <v-text-field |
| 479 | slot="activator" | 479 | slot="activator" |
| 480 | v-model="date" | 480 | v-model="date" |
| 481 | label="Select Due Date" | 481 | label="Select Due Date" |
| 482 | append-icon="event" | 482 | append-icon="event" |
| 483 | :rules="dueDateRule" | 483 | :rules="dueDateRule" |
| 484 | readonly | 484 | readonly |
| 485 | ></v-text-field> | 485 | ></v-text-field> |
| 486 | <v-date-picker v-model="date" @input="$refs.menu2.save(date)"></v-date-picker> | 486 | <v-date-picker v-model="date" @input="$refs.menu2.save(date)"></v-date-picker> |
| 487 | </v-menu> | 487 | </v-menu> |
| 488 | </v-flex> | 488 | </v-flex> |
| 489 | </v-layout> | 489 | </v-layout> |
| 490 | </v-flex> | 490 | </v-flex> |
| 491 | <v-flex xs12> | 491 | <v-flex xs12> |
| 492 | <v-layout> | 492 | <v-layout> |
| 493 | <v-flex xs4 class="pt-4 subheading"> | 493 | <v-flex xs4 class="pt-4 subheading"> |
| 494 | <label class="right">Note:</label> | 494 | <label class="right">Note:</label> |
| 495 | </v-flex> | 495 | </v-flex> |
| 496 | <v-flex xs7 class="ml-3"> | 496 | <v-flex xs7 class="ml-3"> |
| 497 | <v-text-field placeholder="fill your Note" :rules="noteRules" v-model="note"></v-text-field> | 497 | <v-text-field placeholder="fill your Note" :rules="noteRules" v-model="note"></v-text-field> |
| 498 | </v-flex> | 498 | </v-flex> |
| 499 | </v-layout> | 499 | </v-layout> |
| 500 | </v-flex> | 500 | </v-flex> |
| 501 | <v-layout> | 501 | <v-layout> |
| 502 | <v-flex xs12> | 502 | <v-flex xs12> |
| 503 | <v-card-actions> | 503 | <v-card-actions> |
| 504 | <v-spacer></v-spacer> | 504 | <v-spacer></v-spacer> |
| 505 | <v-btn @click="clear" round dark class="clear-button">clear</v-btn> | 505 | <v-btn @click="clear" round dark class="clear-button">clear</v-btn> |
| 506 | <v-btn | 506 | <v-btn |
| 507 | @click="submit" | 507 | @click="submit" |
| 508 | round | 508 | round |
| 509 | dark | 509 | dark |
| 510 | :loading="loading" | 510 | :loading="loading" |
| 511 | class="add-button" | 511 | class="add-button" |
| 512 | :disabled="disable" | 512 | :disabled="disable" |
| 513 | >Add</v-btn> | 513 | >Add</v-btn> |
| 514 | </v-card-actions> | 514 | </v-card-actions> |
| 515 | </v-flex> | 515 | </v-flex> |
| 516 | </v-layout> | 516 | </v-layout> |
| 517 | </v-container> | 517 | </v-container> |
| 518 | </v-form> | 518 | </v-form> |
| 519 | </v-card> | 519 | </v-card> |
| 520 | </v-dialog> | 520 | </v-dialog> |
| 521 | <div class="loader" v-if="showLoader"> | 521 | <div class="loader" v-if="showLoader"> |
| 522 | <v-progress-circular indeterminate color="white"></v-progress-circular> | 522 | <v-progress-circular indeterminate color="white"></v-progress-circular> |
| 523 | </div> | 523 | </div> |
| 524 | <v-snackbar | 524 | <v-snackbar |
| 525 | :timeout="timeout" | 525 | :timeout="timeout" |
| 526 | :top="y === 'top'" | 526 | :top="y === 'top'" |
| 527 | :right="x === 'right'" | 527 | :right="x === 'right'" |
| 528 | :vertical="mode === 'vertical'" | 528 | :vertical="mode === 'vertical'" |
| 529 | v-model="snackbar" | 529 | v-model="snackbar" |
| 530 | :color="color" | 530 | :color="color" |
| 531 | >{{ text }}</v-snackbar> | 531 | >{{ text }}</v-snackbar> |
| 532 | </v-container> | 532 | </v-container> |
| 533 | </template> | 533 | </template> |
| 534 | 534 | ||
| 535 | <script> | 535 | <script> |
| 536 | import http from "@/Services/http.js"; | 536 | import http from "@/Services/http.js"; |
| 537 | import moment from "moment"; | 537 | import moment from "moment"; |
| 538 | 538 | ||
| 539 | export default { | 539 | export default { |
| 540 | data: () => ({ | 540 | data: () => ({ |
| 541 | snackbar: false, | 541 | snackbar: false, |
| 542 | date: null, | 542 | date: null, |
| 543 | menu1: false, | 543 | menu1: false, |
| 544 | menu2: false, | 544 | menu2: false, |
| 545 | color: "", | 545 | color: "", |
| 546 | show: true, | 546 | show: true, |
| 547 | showSearch: false, | 547 | showSearch: false, |
| 548 | dueDate: null, | 548 | dueDate: null, |
| 549 | y: "top", | 549 | y: "top", |
| 550 | x: "right", | 550 | x: "right", |
| 551 | mode: "", | 551 | mode: "", |
| 552 | timeout: 10000, | 552 | timeout: 10000, |
| 553 | text: "", | 553 | text: "", |
| 554 | libraryId: "", | 554 | libraryId: "", |
| 555 | loading: false, | 555 | loading: false, |
| 556 | loadingSearch: false, | 556 | loadingSearch: false, |
| 557 | date: null, | 557 | date: null, |
| 558 | search: "", | 558 | search: "", |
| 559 | addIssueDialog: false, | 559 | addIssueDialog: false, |
| 560 | viewIssueDialog: false, | 560 | viewIssueDialog: false, |
| 561 | showLoader: false, | 561 | showLoader: false, |
| 562 | editIssueDialog: false, | 562 | editIssueDialog: false, |
| 563 | dialog1: false, | 563 | dialog1: false, |
| 564 | valid: true, | 564 | valid: true, |
| 565 | isActive: true, | 565 | isActive: true, |
| 566 | newActive: false, | 566 | newActive: false, |
| 567 | addclass: [], | 567 | addclass: [], |
| 568 | addSection: [], | 568 | addSection: [], |
| 569 | pagination: { | 569 | pagination: { |
| 570 | rowsPerPage: 10 | 570 | rowsPerPage: 10 |
| 571 | }, | 571 | }, |
| 572 | libraryIDRules: [v => !!v || " Library ID is required"], | 572 | libraryIDRules: [v => !!v || " Library ID is required"], |
| 573 | bookRules: [v => !!v || " book Name is required"], | 573 | bookRules: [v => !!v || " book Name is required"], |
| 574 | authorRules: [v => !!v || "Author Name is required"], | 574 | authorRules: [v => !!v || "Author Name is required"], |
| 575 | subjectCodeRules: [v => !!v || "Subject Code is required"], | 575 | subjectCodeRules: [v => !!v || "Subject Code is required"], |
| 576 | authorRules: [v => !!v || "Author is required"], | 576 | authorRules: [v => !!v || "Author is required"], |
| 577 | noteRules: [v => !!v || "Note is required"], | 577 | noteRules: [v => !!v || "Note is required"], |
| 578 | dueDateRule: [v => !!v || "Due Date is required"], | 578 | dueDateRule: [v => !!v || "Due Date is required"], |
| 579 | headers: [ | 579 | headers: [ |
| 580 | { | 580 | { |
| 581 | align: "justify-center", | 581 | align: "justify-center", |
| 582 | text: "No", | 582 | text: "No", |
| 583 | sortable: false, | 583 | sortable: false, |
| 584 | value: "No" | 584 | value: "No" |
| 585 | }, | 585 | }, |
| 586 | { text: "Book", vaue: "name", sortable: false, align: "center" }, | 586 | { text: "Book", vaue: "name", sortable: false, align: "center" }, |
| 587 | { | 587 | { |
| 588 | text: "Serial Number", | 588 | text: "Serial Number", |
| 589 | value: "serialNumber", | 589 | value: "serialNumber", |
| 590 | sortable: false, | 590 | sortable: false, |
| 591 | align: "center" | 591 | align: "center" |
| 592 | }, | 592 | }, |
| 593 | { | 593 | { |
| 594 | text: "Issue Date", | 594 | text: "Issue Date", |
| 595 | value: "created", | 595 | value: "created", |
| 596 | sortable: false, | 596 | sortable: false, |
| 597 | align: "center" | 597 | align: "center" |
| 598 | }, | 598 | }, |
| 599 | { | 599 | { |
| 600 | text: "Due Date", | 600 | text: "Due Date", |
| 601 | value: "dueDate", | 601 | value: "dueDate", |
| 602 | sortable: false, | 602 | sortable: false, |
| 603 | align: "center" | 603 | align: "center" |
| 604 | }, | 604 | }, |
| 605 | { | 605 | { |
| 606 | text: "Status", | 606 | text: "Status", |
| 607 | value: "status", | 607 | value: "status", |
| 608 | sortable: false, | 608 | sortable: false, |
| 609 | align: "center" | 609 | align: "center" |
| 610 | }, | 610 | }, |
| 611 | { text: "Action", value: "", sortable: false, align: "center" } | 611 | { text: "Action", value: "", sortable: false, align: "center" } |
| 612 | ], | 612 | ], |
| 613 | desserts: [], | 613 | desserts: [], |
| 614 | addIssue: {}, | 614 | addIssue: {}, |
| 615 | bookId: "", | 615 | bookId: "", |
| 616 | libraryID: "", | 616 | libraryID: "", |
| 617 | serialNo: "", | 617 | serialNo: "", |
| 618 | note: "", | 618 | note: "", |
| 619 | editedItem: {}, | 619 | editedItem: {}, |
| 620 | books: [], | 620 | books: [], |
| 621 | token: "", | 621 | token: "", |
| 622 | disable: false | 622 | disable: false |
| 623 | }), | 623 | }), |
| 624 | methods: { | 624 | methods: { |
| 625 | dates: function(date) { | 625 | dates: function(date) { |
| 626 | return moment(date).format("MMMM DD, YYYY"); | 626 | return moment(date).format("MMMM DD, YYYY"); |
| 627 | }, | 627 | }, |
| 628 | pickFile() { | 628 | pickFile() { |
| 629 | this.$refs.image.click(); | 629 | this.$refs.image.click(); |
| 630 | }, | 630 | }, |
| 631 | getIssueList() { | 631 | getIssueList() { |
| 632 | this.showLoader = true; | 632 | this.showLoader = true; |
| 633 | this.loadingSearch = true; | 633 | this.loadingSearch = true; |
| 634 | http() | 634 | http() |
| 635 | .get( | 635 | .get( |
| 636 | "/getBooksIssueList", | 636 | "/getBooksIssueList", |
| 637 | { | 637 | { |
| 638 | params: { | 638 | params: { |
| 639 | libraryId: this.libraryId, | 639 | libraryId: this.libraryId, |
| 640 | schoolId: this.$store.state.schoolId | 640 | schoolId: this.$store.state.schoolId |
| 641 | } | 641 | } |
| 642 | }, | 642 | }, |
| 643 | { | 643 | { |
| 644 | headers: { Authorization: "Bearer " + this.token } | 644 | headers: { Authorization: "Bearer " + this.token } |
| 645 | } | 645 | } |
| 646 | ) | 646 | ) |
| 647 | .then(response => { | 647 | .then(response => { |
| 648 | this.desserts = response.data.data; | 648 | this.desserts = response.data.data; |
| 649 | this.showLoader = false; | 649 | this.showLoader = false; |
| 650 | this.loadingSearch = false; | 650 | this.loadingSearch = false; |
| 651 | }) | 651 | }) |
| 652 | .catch(error => { | 652 | .catch(error => { |
| 653 | this.showLoader = false; | 653 | this.showLoader = false; |
| 654 | this.loadingSearch = false; | 654 | this.loadingSearch = false; |
| 655 | this.snackbar = true; | 655 | this.snackbar = true; |
| 656 | this.text = error.response.data.message; | 656 | this.text = error.response.data.message; |
| 657 | if (error.response.status === 401) { | 657 | if (error.response.status === 401) { |
| 658 | this.$router.replace({ path: "/" }); | 658 | this.$router.replace({ path: "/" }); |
| 659 | this.$store.dispatch("setToken", null); | 659 | this.$store.dispatch("setToken", null); |
| 660 | this.$store.dispatch("Id", null); | 660 | this.$store.dispatch("Id", null); |
| 661 | this.$store.dispatch("Role", null); | 661 | this.$store.dispatch("Role", null); |
| 662 | } | 662 | } |
| 663 | }); | 663 | }); |
| 664 | }, | 664 | }, |
| 665 | editItem(item) { | 665 | editItem(item) { |
| 666 | this.editedIndex = this.desserts.indexOf(item); | 666 | this.editedIndex = this.desserts.indexOf(item); |
| 667 | this.editedItem = Object.assign({}, item); | 667 | this.editedItem = Object.assign({}, item); |
| 668 | this.editedItem.name = item.bookId.name; | 668 | this.editedItem.name = item.bookId.name; |
| 669 | this.editedItem.status = item.bookId.status; | 669 | this.editedItem.status = item.bookId.status; |
| 670 | this.editedItem.dueDate = | 670 | this.editedItem.dueDate = |
| 671 | this.editedItem.dueDate != undefined | 671 | this.editedItem.dueDate != undefined |
| 672 | ? (this.editedItem.dueDate = this.editedItem.dueDate.substring(0, 10)) | 672 | ? (this.editedItem.dueDate = this.editedItem.dueDate.substring(0, 10)) |
| 673 | : (this.editedItem.dueDate = ""); | 673 | : (this.editedItem.dueDate = ""); |
| 674 | this.editIssueDialog = true; | 674 | this.editIssueDialog = true; |
| 675 | }, | 675 | }, |
| 676 | profile(item) { | 676 | profile(item) { |
| 677 | this.editedIndex = this.desserts.indexOf(item); | 677 | this.editedIndex = this.desserts.indexOf(item); |
| 678 | this.editedItem = Object.assign({}, item); | 678 | this.editedItem = Object.assign({}, item); |
| 679 | this.editedItem.name = item.bookId.name; | 679 | this.editedItem.name = item.bookId.name; |
| 680 | this.editedItem.status = item.bookId.status; | 680 | this.editedItem.status = item.bookId.status; |
| 681 | 681 | ||
| 682 | this.viewIssueDialog = true; | 682 | this.viewIssueDialog = true; |
| 683 | }, | 683 | }, |
| 684 | returnBook(item) { | 684 | returnBook(item) { |
| 685 | let returnBook = { | 685 | let returnBook = { |
| 686 | bookIssueId: item._id | 686 | bookIssueId: item._id |
| 687 | }; | 687 | }; |
| 688 | http() | 688 | http() |
| 689 | .put( | 689 | .put( |
| 690 | "/returnBook", | 690 | "/returnBook", |
| 691 | confirm("Are you sure you want to return this?") && returnBook | 691 | confirm("Are you sure you want to return this?") && returnBook |
| 692 | ) | 692 | ) |
| 693 | .then(response => { | 693 | .then(response => { |
| 694 | this.snackbar = true; | 694 | this.snackbar = true; |
| 695 | this.text = "Successfully return Issue a Book "; | 695 | this.text = "Successfully return Issue a Book "; |
| 696 | this.getIssueList(); | 696 | this.getIssueList(); |
| 697 | }) | 697 | }) |
| 698 | .catch(error => {}); | 698 | .catch(error => {}); |
| 699 | }, | 699 | }, |
| 700 | close() { | 700 | close() { |
| 701 | this.editIssueDialog = false; | 701 | this.editIssueDialog = false; |
| 702 | }, | 702 | }, |
| 703 | close1() { | 703 | close1() { |
| 704 | this.viewIssueDialog = false; | 704 | this.viewIssueDialog = false; |
| 705 | }, | 705 | }, |
| 706 | submit() { | 706 | submit() { |
| 707 | if (this.$refs.form.validate()) { | 707 | if (this.$refs.form.validate()) { |
| 708 | let createBook = { | 708 | let createBook = { |
| 709 | bookId: this.bookId, | 709 | bookId: this.bookId, |
| 710 | author: this.addIssue.author, | 710 | author: this.addIssue.author, |
| 711 | subjectCode: this.addIssue.subjectCode, | 711 | subjectCode: this.addIssue.subjectCode, |
| 712 | libraryId: this.libraryID, | 712 | libraryId: this.libraryID, |
| 713 | serialNumber: this.serialNo, | 713 | serialNumber: this.serialNo, |
| 714 | note: this.note, | 714 | note: this.note, |
| 715 | dueDate: this.date, | 715 | dueDate: this.date, |
| 716 | schoolId: this.$store.state.schoolId | 716 | schoolId: this.$store.state.schoolId |
| 717 | }; | 717 | }; |
| 718 | this.loading = true; | 718 | this.loading = true; |
| 719 | http() | 719 | http() |
| 720 | .then(response => { | 720 | .then(response => { |
| 721 | this.snackbar = true; | 721 | this.snackbar = true; |
| 722 | this.text = response.data.message; | 722 | this.text = response.data.message; |
| 723 | // this.getIssueList(); | 723 | // this.getIssueList(); |
| 724 | this.color = "green"; | 724 | this.color = "green"; |
| 725 | this.loading = false; | 725 | this.loading = false; |
| 726 | this.clear(); | 726 | this.clear(); |
| 727 | }) | 727 | }) |
| 728 | .catch(error => { | 728 | .catch(error => { |
| 729 | this.snackbar = true; | 729 | this.snackbar = true; |
| 730 | this.text = error.response.data.message; | 730 | this.text = error.response.data.message; |
| 731 | this.color = "red"; | 731 | this.color = "red"; |
| 732 | this.loading = false; | 732 | this.loading = false; |
| 733 | }); | 733 | }); |
| 734 | } | 734 | } |
| 735 | }, | 735 | }, |
| 736 | clear() { | 736 | clear() { |
| 737 | this.$refs.form.reset(); | 737 | this.$refs.form.reset(); |
| 738 | this.disable = false; | 738 | this.disable = false; |
| 739 | }, | 739 | }, |
| 740 | save() { | 740 | save() { |
| 741 | this.editedItem.bookIssueId = this.editedItem._id; | 741 | this.editedItem.bookIssueId = this.editedItem._id; |
| 742 | this.editedItem.bookId = this.editedItem.bookId._id; | 742 | this.editedItem.bookId = this.editedItem.bookId._id; |
| 743 | http() | 743 | http() |
| 744 | .put("/updateBookIssue", this.editedItem) | 744 | .put("/updateBookIssue", this.editedItem) |
| 745 | .then(response => { | 745 | .then(response => { |
| 746 | this.snackbar = true; | 746 | this.snackbar = true; |
| 747 | this.text = "Successfully Edit Issue a Book"; | 747 | this.text = "Successfully Edit Issue a Book"; |
| 748 | this.color = "green"; | 748 | this.color = "green"; |
| 749 | this.getIssueList(); | 749 | this.getIssueList(); |
| 750 | this.addIssueDialog = false; | 750 | this.addIssueDialog = false; |
| 751 | this.close(); | 751 | this.close(); |
| 752 | }) | 752 | }) |
| 753 | .catch(error => { | 753 | .catch(error => { |
| 754 | this.snackbar = true; | 754 | this.snackbar = true; |
| 755 | this.text = error.response.data.message; | 755 | this.text = error.response.data.message; |
| 756 | this.color = "red"; | 756 | this.color = "red"; |
| 757 | }); | 757 | }); |
| 758 | }, | 758 | }, |
| 759 | getBookData() { | 759 | getBookData() { |
| 760 | this.showLoader = true; | 760 | this.showLoader = true; |
| 761 | http() | 761 | http() |
| 762 | .get("/getBooksList", { | 762 | .get("/getBooksList", { |
| 763 | params: { | 763 | params: { |
| 764 | schoolId: this.$store.state.schoolId | 764 | schoolId: this.$store.state.schoolId |
| 765 | }, | 765 | }, |
| 766 | headers: { Authorization: "Bearer " + this.token } | 766 | headers: { Authorization: "Bearer " + this.token } |
| 767 | }) | 767 | }) |
| 768 | .then(response => { | 768 | .then(response => { |
| 769 | this.books = response.data.data; | 769 | this.books = response.data.data; |
| 770 | this.showLoader = false; | 770 | this.showLoader = false; |
| 771 | }) | 771 | }) |
| 772 | .catch(error => { | 772 | .catch(error => { |
| 773 | this.showLoader = false; | 773 | this.showLoader = false; |
| 774 | if (error.response.status === 401) { | 774 | if (error.response.status === 401) { |
| 775 | this.$router.replace({ path: "/" }); | 775 | this.$router.replace({ path: "/" }); |
| 776 | this.$store.dispatch("setToken", null); | 776 | this.$store.dispatch("setToken", null); |
| 777 | this.$store.dispatch("Id", null); | 777 | this.$store.dispatch("Id", null); |
| 778 | } | 778 | } |
| 779 | }); | 779 | }); |
| 780 | }, | 780 | }, |
| 781 | getParticularBookData(books) { | 781 | getParticularBookData(books) { |
| 782 | for (let i = 0; i < this.books.length; i++) { | 782 | for (let i = 0; i < this.books.length; i++) { |
| 783 | if (books == this.books[i]._id) { | 783 | if (books == this.books[i]._id) { |
| 784 | if (this.books[i].remaining <= 0) { | 784 | if (this.books[i].remaining <= 0) { |
| 785 | this.snackbar = true; | 785 | this.snackbar = true; |
| 786 | this.text = "Book is unavailable"; | 786 | this.text = "Book is unavailable"; |
| 787 | this.color = "red"; | 787 | this.color = "red"; |
| 788 | this.disable = true; | 788 | this.disable = true; |
| 789 | } else if (this.books[i].remaining > 0) { | 789 | } else if (this.books[i].remaining > 0) { |
| 790 | this.disable = false; | 790 | this.disable = false; |
| 791 | } | 791 | } |
| 792 | this.addIssue = { | 792 | this.addIssue = { |
| 793 | author: this.books[i].author, | 793 | author: this.books[i].author, |
| 794 | subjectCode: this.books[i].subjectCode | 794 | subjectCode: this.books[i].subjectCode |
| 795 | }; | 795 | }; |
| 796 | } | 796 | } |
| 797 | } | 797 | } |
| 798 | this.addIssue.boojk = books; | 798 | this.addIssue.boojk = books; |
| 799 | }, | 799 | }, |
| 800 | displaySearch() { | 800 | displaySearch() { |
| 801 | (this.show = false), (this.showSearch = true); | 801 | (this.show = false), (this.showSearch = true); |
| 802 | }, | 802 | }, |
| 803 | closeSearch() { | 803 | closeSearch() { |
| 804 | this.showSearch = false; | 804 | this.showSearch = false; |
| 805 | this.show = true; | 805 | this.show = true; |
| 806 | this.search = ""; | 806 | this.search = ""; |
| 807 | } | 807 | } |
| 808 | }, | 808 | }, |
| 809 | mounted() { | 809 | mounted() { |
| 810 | this.token = this.$store.state.token; | 810 | this.token = this.$store.state.token; |
| 811 | this.getBookData(); | 811 | this.getBookData(); |
| 812 | } | 812 | } |
| 813 | }; | 813 | }; |
| 814 | </script> | 814 | </script> |
| 815 | <style scoped> | 815 | <style scoped> |
| 816 | .active { | 816 | .active { |
| 817 | background-color: gray; | 817 | background-color: gray; |
| 818 | color: white !important; | 818 | color: white !important; |
| 819 | } | 819 | } |
| 820 | .activebtn { | 820 | .activebtn { |
| 821 | color: black !important; | 821 | color: black !important; |
| 822 | } | 822 | } |
| 823 | </style> | 823 | </style> |
src/pages/Mark/mark.vue
| 1 | <template> | 1 | <template> |
| 2 | <v-container fluid class="body-color"> | 2 | <v-container fluid class="body-color"> |
| 3 | <!-- ****** EXISTING MARK TABLE ****** --> | 3 | <!-- ****** EXISTING MARK TABLE ****** --> |
| 4 | <v-toolbar color="transparent" flat> | 4 | <v-toolbar color="transparent" flat> |
| 5 | <v-btn | 5 | <v-btn |
| 6 | fab | 6 | fab |
| 7 | dark | 7 | dark |
| 8 | class="open-dialog-button hidden-xl-only hidden-md-only hidden-lg-only" | 8 | class="open-dialog-button hidden-xl-only hidden-md-only hidden-lg-only" |
| 9 | small | 9 | small |
| 10 | @click="addMarkDialog = true" | 10 | @click="addMarkDialog = true" |
| 11 | > | 11 | > |
| 12 | <v-icon dark>add</v-icon> | 12 | <v-icon dark>add</v-icon> |
| 13 | </v-btn> | 13 | </v-btn> |
| 14 | <v-btn | 14 | <v-btn |
| 15 | round | 15 | round |
| 16 | class="open-dialog-button hidden-sm-only hidden-xs-only" | 16 | class="open-dialog-button hidden-sm-only hidden-xs-only" |
| 17 | dark | 17 | dark |
| 18 | @click="addMarkDialog = true" | 18 | @click="addMarkDialog = true" |
| 19 | > | 19 | > |
| 20 | <v-icon class="white--text pr-1" size="20">add</v-icon>Add Mark | 20 | <v-icon class="white--text pr-1" size="20">add</v-icon>Add Mark |
| 21 | </v-btn> | 21 | </v-btn> |
| 22 | <v-layout class="hidden-sm-only hidden-xs-only"> | 22 | <v-layout class="hidden-sm-only hidden-xs-only"> |
| 23 | <v-flex md3 lg2 class="ml-2"> | 23 | <v-flex md3 lg2 class="ml-2"> |
| 24 | <v-select | 24 | <v-select |
| 25 | v-model="getMark.classId" | 25 | v-model="getMark.classId" |
| 26 | label="Select your class" | 26 | label="Select your class" |
| 27 | type="text" | 27 | type="text" |
| 28 | :items="classList" | 28 | :items="classList" |
| 29 | item-text="classNum" | 29 | item-text="classNum" |
| 30 | item-value="_id" | 30 | item-value="_id" |
| 31 | @change="getSections(getMark.classId)" | 31 | @change="getSections(getMark.classId)" |
| 32 | required | 32 | required |
| 33 | ></v-select> | 33 | ></v-select> |
| 34 | </v-flex> | 34 | </v-flex> |
| 35 | <v-flex md3 lg2 class="ml-2"> | 35 | <v-flex md3 lg2 class="ml-2"> |
| 36 | <v-select | 36 | <v-select |
| 37 | :items="addSection" | 37 | :items="addSection" |
| 38 | label="Select your Section" | 38 | label="Select your Section" |
| 39 | v-model="getMark.sectionId" | 39 | v-model="getMark.sectionId" |
| 40 | item-text="name" | 40 | item-text="name" |
| 41 | item-value="_id" | 41 | item-value="_id" |
| 42 | name="Select Section" | 42 | name="Select Section" |
| 43 | required | 43 | required |
| 44 | ></v-select> | 44 | ></v-select> |
| 45 | </v-flex> | 45 | </v-flex> |
| 46 | <v-spacer></v-spacer> | 46 | <v-spacer></v-spacer> |
| 47 | <v-btn | 47 | <v-btn |
| 48 | @click="getStudents" | 48 | @click="getStudents" |
| 49 | round | 49 | round |
| 50 | dark | 50 | dark |
| 51 | :loading="loading" | 51 | :loading="loading" |
| 52 | class="right open-dialog-button mt-2" | 52 | class="right open-dialog-button mt-2" |
| 53 | >Mark</v-btn> | 53 | >Mark</v-btn> |
| 54 | </v-layout> | 54 | </v-layout> |
| 55 | <v-spacer class="hidden-lg-only hidden-xl-only hidden-md-only"></v-spacer> | 55 | <v-spacer class="hidden-lg-only hidden-xl-only hidden-md-only"></v-spacer> |
| 56 | <v-card-title class="body-1" v-show="show"> | 56 | <v-card-title class="body-1" v-show="show"> |
| 57 | <v-btn icon large flat @click="displaySearch"> | 57 | <v-btn icon large flat @click="displaySearch"> |
| 58 | <v-avatar size="27"> | 58 | <v-avatar size="27"> |
| 59 | <img src="/static/icon/dashboard icons-49.png" alt="icon" /> | 59 | <img src="/static/icon/search.png" alt="icon" /> |
| 60 | </v-avatar> | 60 | </v-avatar> |
| 61 | </v-btn> | 61 | </v-btn> |
| 62 | </v-card-title> | 62 | </v-card-title> |
| 63 | <v-flex xs8 sm8 md3 lg2 v-show="showSearch"> | 63 | <v-flex xs8 sm8 md3 lg2 v-show="showSearch"> |
| 64 | <v-layout> | 64 | <v-layout> |
| 65 | <v-text-field v-model="search" label="Search" prepend-inner-icon="search" color="primary"></v-text-field> | 65 | <v-text-field v-model="search" label="Search" prepend-inner-icon="search" color="primary"></v-text-field> |
| 66 | <v-icon @click="closeSearch" color="error">close</v-icon> | 66 | <v-icon @click="closeSearch" color="error">close</v-icon> |
| 67 | </v-layout> | 67 | </v-layout> |
| 68 | </v-flex> | 68 | </v-flex> |
| 69 | </v-toolbar> | 69 | </v-toolbar> |
| 70 | <v-card flat class="elevation-0 transparent hidden-lg-only hidden-xl-only hidden-md-only"> | 70 | <v-card flat class="elevation-0 transparent hidden-lg-only hidden-xl-only hidden-md-only"> |
| 71 | <v-flex xs12 sm12 lg12> | 71 | <v-flex xs12 sm12 lg12> |
| 72 | <v-layout wrap> | 72 | <v-layout wrap> |
| 73 | <v-flex xs12 sm12 lg3> | 73 | <v-flex xs12 sm12 lg3> |
| 74 | <v-layout> | 74 | <v-layout> |
| 75 | <v-flex xs3 sm6 lg2 class="subheading mt-4"> | 75 | <v-flex xs3 sm6 lg2 class="subheading mt-4"> |
| 76 | <label class="right">Class:</label> | 76 | <label class="right">Class:</label> |
| 77 | </v-flex> | 77 | </v-flex> |
| 78 | <v-flex xs12 sm12 lg8 class="ml-2"> | 78 | <v-flex xs12 sm12 lg8 class="ml-2"> |
| 79 | <v-select | 79 | <v-select |
| 80 | v-model="getMark.classId" | 80 | v-model="getMark.classId" |
| 81 | label="Select your class" | 81 | label="Select your class" |
| 82 | type="text" | 82 | type="text" |
| 83 | :items="classList" | 83 | :items="classList" |
| 84 | item-text="classNum" | 84 | item-text="classNum" |
| 85 | item-value="_id" | 85 | item-value="_id" |
| 86 | @change="getSections(getMark.classId)" | 86 | @change="getSections(getMark.classId)" |
| 87 | required | 87 | required |
| 88 | ></v-select> | 88 | ></v-select> |
| 89 | </v-flex> | 89 | </v-flex> |
| 90 | </v-layout> | 90 | </v-layout> |
| 91 | </v-flex> | 91 | </v-flex> |
| 92 | <v-flex xs12 sm12 lg3> | 92 | <v-flex xs12 sm12 lg3> |
| 93 | <v-layout> | 93 | <v-layout> |
| 94 | <v-flex xs3 sm6 lg2 class="subheading mt-4"> | 94 | <v-flex xs3 sm6 lg2 class="subheading mt-4"> |
| 95 | <label class="right">Section:</label> | 95 | <label class="right">Section:</label> |
| 96 | </v-flex> | 96 | </v-flex> |
| 97 | <v-flex xs12 sm12 lg8 class="ml-2"> | 97 | <v-flex xs12 sm12 lg8 class="ml-2"> |
| 98 | <v-select | 98 | <v-select |
| 99 | :items="addSection" | 99 | :items="addSection" |
| 100 | label="Select your Section" | 100 | label="Select your Section" |
| 101 | v-model="getMark.sectionId" | 101 | v-model="getMark.sectionId" |
| 102 | item-text="name" | 102 | item-text="name" |
| 103 | item-value="_id" | 103 | item-value="_id" |
| 104 | name="Select Section" | 104 | name="Select Section" |
| 105 | required | 105 | required |
| 106 | ></v-select> | 106 | ></v-select> |
| 107 | </v-flex> | 107 | </v-flex> |
| 108 | </v-layout> | 108 | </v-layout> |
| 109 | </v-flex> | 109 | </v-flex> |
| 110 | <v-flex xs12 sm12 lg6> | 110 | <v-flex xs12 sm12 lg6> |
| 111 | <v-btn | 111 | <v-btn |
| 112 | @click="getStudents" | 112 | @click="getStudents" |
| 113 | round | 113 | round |
| 114 | dark | 114 | dark |
| 115 | :loading="loading" | 115 | :loading="loading" |
| 116 | class="right mt-3 open-dialog-button" | 116 | class="right mt-3 open-dialog-button" |
| 117 | >Mark</v-btn> | 117 | >Mark</v-btn> |
| 118 | </v-flex> | 118 | </v-flex> |
| 119 | </v-layout> | 119 | </v-layout> |
| 120 | </v-flex> | 120 | </v-flex> |
| 121 | </v-card> | 121 | </v-card> |
| 122 | <v-data-table | 122 | <v-data-table |
| 123 | :headers="headers" | 123 | :headers="headers" |
| 124 | :items="getStudentsList" | 124 | :items="getStudentsList" |
| 125 | :pagination.sync="pagination" | 125 | :pagination.sync="pagination" |
| 126 | :search="search" | 126 | :search="search" |
| 127 | > | 127 | > |
| 128 | <template slot="items" slot-scope="props"> | 128 | <template slot="items" slot-scope="props"> |
| 129 | <tr class="tr"> | 129 | <tr class="tr"> |
| 130 | <td class="td td-row">{{ props.index + 1}}</td> | 130 | <td class="td td-row">{{ props.index + 1}}</td> |
| 131 | <td class="td td-row text-xs-center"> | 131 | <td class="td td-row text-xs-center"> |
| 132 | <v-avatar size="40"> | 132 | <v-avatar size="40"> |
| 133 | <img :src="props.item.profilePicUrl" v-if="props.item.profilePicUrl" /> | 133 | <img :src="props.item.profilePicUrl" v-if="props.item.profilePicUrl" /> |
| 134 | <img src="/static/icon/user.png" v-else-if="!props.item.profilePicUrl" /> | 134 | <img src="/static/icon/user.png" v-else-if="!props.item.profilePicUrl" /> |
| 135 | </v-avatar> | 135 | </v-avatar> |
| 136 | </td> | 136 | </td> |
| 137 | <td class="td td-row text-xs-center">{{ props.item.name}}</td> | 137 | <td class="td td-row text-xs-center">{{ props.item.name}}</td> |
| 138 | <td class="td td-row text-xs-center">{{ props.item.rollNo }}</td> | 138 | <td class="td td-row text-xs-center">{{ props.item.rollNo }}</td> |
| 139 | <td class="td td-row text-xs-center">{{ props.item.email }}</td> | 139 | <td class="td td-row text-xs-center">{{ props.item.email }}</td> |
| 140 | <td class="td td-row text-xs-center"> | 140 | <td class="td td-row text-xs-center"> |
| 141 | <span> | 141 | <span> |
| 142 | <router-link :to="{ name:'view Mark',params: { markId:props.item._id } }"> | 142 | <router-link :to="{ name:'view Mark',params: { markId:props.item._id } }"> |
| 143 | <v-tooltip top> | 143 | <v-tooltip top> |
| 144 | <img | 144 | <img |
| 145 | slot="activator" | 145 | slot="activator" |
| 146 | style="cursor:pointer; width:25px; height:25px; " | 146 | style="cursor:pointer; width:25px; height:25px; " |
| 147 | src="/static/icon/dashboard icons-47.png" | 147 | src="/static/icon/view.png" |
| 148 | /> | 148 | /> |
| 149 | <span>View</span> | 149 | <span>View</span> |
| 150 | </v-tooltip> | 150 | </v-tooltip> |
| 151 | </router-link> | 151 | </router-link> |
| 152 | </span> | 152 | </span> |
| 153 | </td> | 153 | </td> |
| 154 | </tr> | 154 | </tr> |
| 155 | </template> | 155 | </template> |
| 156 | <v-alert | 156 | <v-alert |
| 157 | slot="no-results" | 157 | slot="no-results" |
| 158 | :value="true" | 158 | :value="true" |
| 159 | color="error" | 159 | color="error" |
| 160 | icon="warning" | 160 | icon="warning" |
| 161 | >Your search for "{{ search }}" found no results.</v-alert> | 161 | >Your search for "{{ search }}" found no results.</v-alert> |
| 162 | </v-data-table> | 162 | </v-data-table> |
| 163 | <!-- ****** ADD Mark Schedule ****** --> | 163 | <!-- ****** ADD Mark Schedule ****** --> |
| 164 | <v-dialog v-model="addMarkDialog" max-width> | 164 | <v-dialog v-model="addMarkDialog" max-width> |
| 165 | <v-card flat class> | 165 | <v-card flat class> |
| 166 | <v-layout class="pa-3 card-style white--text"> | 166 | <v-layout class="pa-3 card-style white--text"> |
| 167 | <v-flex xs12> | 167 | <v-flex xs12> |
| 168 | <label class="title text-xs-center">Add Mark</label> | 168 | <label class="title text-xs-center">Add Mark</label> |
| 169 | <v-icon size="24" class="right white--text" @click="addMarkDialog = false">cancel</v-icon> | 169 | <v-icon size="24" class="right white--text" @click="addMarkDialog = false">cancel</v-icon> |
| 170 | </v-flex> | 170 | </v-flex> |
| 171 | </v-layout> | 171 | </v-layout> |
| 172 | <v-form ref="form" v-model="valid" lazy-validation> | 172 | <v-form ref="form" v-model="valid" lazy-validation> |
| 173 | <v-container fluid> | 173 | <v-container fluid> |
| 174 | <v-flex xs12 sm12 lg12> | 174 | <v-flex xs12 sm12 lg12> |
| 175 | <v-layout wrap> | 175 | <v-layout wrap> |
| 176 | <v-flex xs12 sm12 lg10> | 176 | <v-flex xs12 sm12 lg10> |
| 177 | <v-layout wrap> | 177 | <v-layout wrap> |
| 178 | <v-flex xs12 sm12 lg3> | 178 | <v-flex xs12 sm12 lg3> |
| 179 | <v-flex xs3 sm2 lg2 class="subheading"> | 179 | <v-flex xs3 sm2 lg2 class="subheading"> |
| 180 | <label>Exam:</label> | 180 | <label>Exam:</label> |
| 181 | </v-flex> | 181 | </v-flex> |
| 182 | <v-flex xs12 sm12 lg10> | 182 | <v-flex xs12 sm12 lg10> |
| 183 | <v-select | 183 | <v-select |
| 184 | label="Select your Exam Name" | 184 | label="Select your Exam Name" |
| 185 | :items="examList" | 185 | :items="examList" |
| 186 | v-model="addMark.examId" | 186 | v-model="addMark.examId" |
| 187 | :rules="examRules" | 187 | :rules="examRules" |
| 188 | item-text="examName" | 188 | item-text="examName" |
| 189 | item-value="_id" | 189 | item-value="_id" |
| 190 | ></v-select> | 190 | ></v-select> |
| 191 | </v-flex> | 191 | </v-flex> |
| 192 | </v-flex> | 192 | </v-flex> |
| 193 | <v-flex xs12 sm12 lg3> | 193 | <v-flex xs12 sm12 lg3> |
| 194 | <v-flex xs3 sm6 lg2 class="subheading"> | 194 | <v-flex xs3 sm6 lg2 class="subheading"> |
| 195 | <label>Class:</label> | 195 | <label>Class:</label> |
| 196 | </v-flex> | 196 | </v-flex> |
| 197 | <v-flex xs12 sm12 lg10 class> | 197 | <v-flex xs12 sm12 lg10 class> |
| 198 | <v-select | 198 | <v-select |
| 199 | v-model="addMark.classId" | 199 | v-model="addMark.classId" |
| 200 | label="Select your class" | 200 | label="Select your class" |
| 201 | type="text" | 201 | type="text" |
| 202 | :items="classList" | 202 | :items="classList" |
| 203 | item-text="classNum" | 203 | item-text="classNum" |
| 204 | item-value="_id" | 204 | item-value="_id" |
| 205 | :rules="classRules" | 205 | :rules="classRules" |
| 206 | @change="getSections(addMark.classId)" | 206 | @change="getSections(addMark.classId)" |
| 207 | required | 207 | required |
| 208 | ></v-select> | 208 | ></v-select> |
| 209 | </v-flex> | 209 | </v-flex> |
| 210 | </v-flex> | 210 | </v-flex> |
| 211 | <v-flex xs12 sm12 lg3> | 211 | <v-flex xs12 sm12 lg3> |
| 212 | <v-flex xs3 sm6 lg2 class="subheading"> | 212 | <v-flex xs3 sm6 lg2 class="subheading"> |
| 213 | <label>Section:</label> | 213 | <label>Section:</label> |
| 214 | </v-flex> | 214 | </v-flex> |
| 215 | <v-flex xs12 sm12 lg10 class> | 215 | <v-flex xs12 sm12 lg10 class> |
| 216 | <v-select | 216 | <v-select |
| 217 | :items="addSection" | 217 | :items="addSection" |
| 218 | label="Select your Section" | 218 | label="Select your Section" |
| 219 | v-model="addMark.sectionId" | 219 | v-model="addMark.sectionId" |
| 220 | item-text="name" | 220 | item-text="name" |
| 221 | item-value="_id" | 221 | item-value="_id" |
| 222 | name="Select Section" | 222 | name="Select Section" |
| 223 | :rules="sectionRules" | 223 | :rules="sectionRules" |
| 224 | required | 224 | required |
| 225 | ></v-select> | 225 | ></v-select> |
| 226 | </v-flex> | 226 | </v-flex> |
| 227 | </v-flex> | 227 | </v-flex> |
| 228 | <v-flex xs12 sm12 lg3> | 228 | <v-flex xs12 sm12 lg3> |
| 229 | <v-flex xs3 sm6 lg2 class="subheading"> | 229 | <v-flex xs3 sm6 lg2 class="subheading"> |
| 230 | <label>Subject:</label> | 230 | <label>Subject:</label> |
| 231 | </v-flex> | 231 | </v-flex> |
| 232 | <v-flex xs12 sm12 lg10 class> | 232 | <v-flex xs12 sm12 lg10 class> |
| 233 | <v-select | 233 | <v-select |
| 234 | :items="subjects" | 234 | :items="subjects" |
| 235 | label="Select your Subject" | 235 | label="Select your Subject" |
| 236 | v-model="addMark.subjectId" | 236 | v-model="addMark.subjectId" |
| 237 | item-text="subjectName" | 237 | item-text="subjectName" |
| 238 | item-value="_id" | 238 | item-value="_id" |
| 239 | name="Select Section" | 239 | name="Select Section" |
| 240 | :rules="subjectRules" | 240 | :rules="subjectRules" |
| 241 | required | 241 | required |
| 242 | ></v-select> | 242 | ></v-select> |
| 243 | </v-flex> | 243 | </v-flex> |
| 244 | </v-flex> | 244 | </v-flex> |
| 245 | </v-layout> | 245 | </v-layout> |
| 246 | </v-flex> | 246 | </v-flex> |
| 247 | <v-flex xs12 sm12 lg2> | 247 | <v-flex xs12 sm12 lg2> |
| 248 | <v-flex xs12 sm12 lg12> | 248 | <v-flex xs12 sm12 lg12> |
| 249 | <v-btn | 249 | <v-btn |
| 250 | @click="findStudents" | 250 | @click="findStudents" |
| 251 | round | 251 | round |
| 252 | dark | 252 | dark |
| 253 | :loading="loading" | 253 | :loading="loading" |
| 254 | class="right mt-4 open-dialog-button" | 254 | class="right mt-4 open-dialog-button" |
| 255 | >Mark</v-btn> | 255 | >Mark</v-btn> |
| 256 | </v-flex> | 256 | </v-flex> |
| 257 | </v-flex> | 257 | </v-flex> |
| 258 | </v-layout> | 258 | </v-layout> |
| 259 | </v-flex> | 259 | </v-flex> |
| 260 | <!-- ****** ADD MARK TABLE DATA ****** --> | 260 | <!-- ****** ADD MARK TABLE DATA ****** --> |
| 261 | <v-card class="mt-4 elevation-0 body-color"> | 261 | <v-card class="mt-4 elevation-0 body-color"> |
| 262 | <v-data-table | 262 | <v-data-table |
| 263 | :headers="headerOfMark" | 263 | :headers="headerOfMark" |
| 264 | :items="getStudentData" | 264 | :items="getStudentData" |
| 265 | :pagination.sync="pagination" | 265 | :pagination.sync="pagination" |
| 266 | :search="search" | 266 | :search="search" |
| 267 | class="body-color" | 267 | class="body-color" |
| 268 | > | 268 | > |
| 269 | <template slot="items" slot-scope="props"> | 269 | <template slot="items" slot-scope="props"> |
| 270 | <tr class="tr"> | 270 | <tr class="tr"> |
| 271 | <td class="td td-row">{{ props.index + 1}}</td> | 271 | <td class="td td-row">{{ props.index + 1}}</td> |
| 272 | <td class="text-xs-center td td-row"> | 272 | <td class="text-xs-center td td-row"> |
| 273 | <v-avatar size="40"> | 273 | <v-avatar size="40"> |
| 274 | <img :src="props.item.profilePicUrl" v-if="props.item.profilePicUrl" /> | 274 | <img :src="props.item.profilePicUrl" v-if="props.item.profilePicUrl" /> |
| 275 | <img src="/static/icon/user.png" v-else-if="!props.item.profilePicUrl" /> | 275 | <img src="/static/icon/user.png" v-else-if="!props.item.profilePicUrl" /> |
| 276 | </v-avatar> | 276 | </v-avatar> |
| 277 | </td> | 277 | </td> |
| 278 | <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> |
| 279 | <td class="text-xs-center td td-row">{{ props.item.rollNo }}</td> | 279 | <td class="text-xs-center td td-row">{{ props.item.rollNo }}</td> |
| 280 | <td | 280 | <td |
| 281 | class="text-xs-center markTable td td-row" | 281 | class="text-xs-center markTable td td-row" |
| 282 | v-for="(marks, index) in props.item.marksObtained" | 282 | v-for="(marks, index) in props.item.marksObtained" |
| 283 | :key="'A'+ index" | 283 | :key="'A'+ index" |
| 284 | > | 284 | > |
| 285 | <v-text-field v-model="marks.marksScored"></v-text-field> | 285 | <v-text-field v-model="marks.marksScored"></v-text-field> |
| 286 | </td> | 286 | </td> |
| 287 | </tr> | 287 | </tr> |
| 288 | </template> | 288 | </template> |
| 289 | <v-alert | 289 | <v-alert |
| 290 | slot="no-results" | 290 | slot="no-results" |
| 291 | :value="true" | 291 | :value="true" |
| 292 | color="error" | 292 | color="error" |
| 293 | icon="warning" | 293 | icon="warning" |
| 294 | >Your search for "{{ search }}" found no results.</v-alert> | 294 | >Your search for "{{ search }}" found no results.</v-alert> |
| 295 | </v-data-table> | 295 | </v-data-table> |
| 296 | </v-card> | 296 | </v-card> |
| 297 | <v-layout class="mt-2"> | 297 | <v-layout class="mt-2"> |
| 298 | <v-flex xs12 sm12> | 298 | <v-flex xs12 sm12> |
| 299 | <v-layout> | 299 | <v-layout> |
| 300 | <v-flex xs12> | 300 | <v-flex xs12> |
| 301 | <v-btn | 301 | <v-btn |
| 302 | @click="submit" | 302 | @click="submit" |
| 303 | round | 303 | round |
| 304 | dark | 304 | dark |
| 305 | :loading="loading" | 305 | :loading="loading" |
| 306 | class="right add-button" | 306 | class="right add-button" |
| 307 | >Add Mark</v-btn> | 307 | >Add Mark</v-btn> |
| 308 | </v-flex> | 308 | </v-flex> |
| 309 | </v-layout> | 309 | </v-layout> |
| 310 | </v-flex> | 310 | </v-flex> |
| 311 | </v-layout> | 311 | </v-layout> |
| 312 | </v-container> | 312 | </v-container> |
| 313 | </v-form> | 313 | </v-form> |
| 314 | </v-card> | 314 | </v-card> |
| 315 | </v-dialog> | 315 | </v-dialog> |
| 316 | <div class="loader" v-if="showLoader"> | 316 | <div class="loader" v-if="showLoader"> |
| 317 | <v-progress-circular indeterminate color="white"></v-progress-circular> | 317 | <v-progress-circular indeterminate color="white"></v-progress-circular> |
| 318 | </div> | 318 | </div> |
| 319 | <v-snackbar | 319 | <v-snackbar |
| 320 | :timeout="timeout" | 320 | :timeout="timeout" |
| 321 | :top="y === 'top'" | 321 | :top="y === 'top'" |
| 322 | :right="x === 'right'" | 322 | :right="x === 'right'" |
| 323 | :vertical="mode === 'vertical'" | 323 | :vertical="mode === 'vertical'" |
| 324 | v-model="snackbar" | 324 | v-model="snackbar" |
| 325 | :color="color" | 325 | :color="color" |
| 326 | >{{ text }}</v-snackbar> | 326 | >{{ text }}</v-snackbar> |
| 327 | </v-container> | 327 | </v-container> |
| 328 | </template> | 328 | </template> |
| 329 | 329 | ||
| 330 | <script> | 330 | <script> |
| 331 | import http from "@/Services/http.js"; | 331 | import http from "@/Services/http.js"; |
| 332 | import moment from "moment"; | 332 | import moment from "moment"; |
| 333 | 333 | ||
| 334 | export default { | 334 | export default { |
| 335 | data: () => ({ | 335 | data: () => ({ |
| 336 | show: true, | 336 | show: true, |
| 337 | showSearch: false, | 337 | showSearch: false, |
| 338 | snackbar: false, | 338 | snackbar: false, |
| 339 | date: null, | 339 | date: null, |
| 340 | color: "", | 340 | color: "", |
| 341 | y: "top", | 341 | y: "top", |
| 342 | x: "right", | 342 | x: "right", |
| 343 | mode: "", | 343 | mode: "", |
| 344 | timeout: 10000, | 344 | timeout: 10000, |
| 345 | text: "", | 345 | text: "", |
| 346 | loading: false, | 346 | loading: false, |
| 347 | search: "", | 347 | search: "", |
| 348 | show: true, | 348 | show: true, |
| 349 | showSearch: false, | 349 | showSearch: false, |
| 350 | showLoader: false, | 350 | showLoader: false, |
| 351 | dialog: false, | 351 | dialog: false, |
| 352 | dialog1: false, | 352 | dialog1: false, |
| 353 | valid: true, | 353 | valid: true, |
| 354 | 354 | ||
| 355 | addMarkDialog: false, | 355 | addMarkDialog: false, |
| 356 | addSection: [], | 356 | addSection: [], |
| 357 | pagination: { | 357 | pagination: { |
| 358 | rowsPerPage: 10 | 358 | rowsPerPage: 10 |
| 359 | }, | 359 | }, |
| 360 | classRules: [v => !!v || "Class is required"], | 360 | classRules: [v => !!v || "Class is required"], |
| 361 | sectionRules: [v => !!v || "section is required"], | 361 | sectionRules: [v => !!v || "section is required"], |
| 362 | subjectRules: [v => !!v || "Subject is required"], | 362 | subjectRules: [v => !!v || "Subject is required"], |
| 363 | examRules: [v => !!v || "Exam is required"], | 363 | examRules: [v => !!v || "Exam is required"], |
| 364 | 364 | ||
| 365 | headerOfMark: [ | 365 | headerOfMark: [ |
| 366 | { | 366 | { |
| 367 | align: "", | 367 | align: "", |
| 368 | text: "No", | 368 | text: "No", |
| 369 | sortable: false, | 369 | sortable: false, |
| 370 | value: "No" | 370 | value: "No" |
| 371 | }, | 371 | }, |
| 372 | { | 372 | { |
| 373 | text: "Profile Pic", | 373 | text: "Profile Pic", |
| 374 | vaue: "profilePicUrl", | 374 | vaue: "profilePicUrl", |
| 375 | sortable: false, | 375 | sortable: false, |
| 376 | align: "center" | 376 | align: "center" |
| 377 | }, | 377 | }, |
| 378 | { | 378 | { |
| 379 | text: "Name", | 379 | text: "Name", |
| 380 | vaue: "name", | 380 | vaue: "name", |
| 381 | sortable: false, | 381 | sortable: false, |
| 382 | align: "center" | 382 | align: "center" |
| 383 | }, | 383 | }, |
| 384 | { | 384 | { |
| 385 | text: "Roll No.", | 385 | text: "Roll No.", |
| 386 | value: "rollNo", | 386 | value: "rollNo", |
| 387 | sortable: false, | 387 | sortable: false, |
| 388 | align: "center" | 388 | align: "center" |
| 389 | } | 389 | } |
| 390 | ], | 390 | ], |
| 391 | headers: [ | 391 | headers: [ |
| 392 | { | 392 | { |
| 393 | align: "", | 393 | align: "", |
| 394 | text: "No", | 394 | text: "No", |
| 395 | sortable: false, | 395 | sortable: false, |
| 396 | value: "No" | 396 | value: "No" |
| 397 | }, | 397 | }, |
| 398 | { | 398 | { |
| 399 | text: "Profile Pic", | 399 | text: "Profile Pic", |
| 400 | vaue: "profilePicUrl", | 400 | vaue: "profilePicUrl", |
| 401 | sortable: false, | 401 | sortable: false, |
| 402 | align: "center" | 402 | align: "center" |
| 403 | }, | 403 | }, |
| 404 | { | 404 | { |
| 405 | text: "Name", | 405 | text: "Name", |
| 406 | vaue: "name", | 406 | vaue: "name", |
| 407 | sortable: false, | 407 | sortable: false, |
| 408 | align: "center" | 408 | align: "center" |
| 409 | }, | 409 | }, |
| 410 | { | 410 | { |
| 411 | text: "Roll No.", | 411 | text: "Roll No.", |
| 412 | value: "rollNo", | 412 | value: "rollNo", |
| 413 | sortable: false, | 413 | sortable: false, |
| 414 | align: "center" | 414 | align: "center" |
| 415 | }, | 415 | }, |
| 416 | { | 416 | { |
| 417 | text: "Email", | 417 | text: "Email", |
| 418 | value: "email", | 418 | value: "email", |
| 419 | sortable: false, | 419 | sortable: false, |
| 420 | align: "center" | 420 | align: "center" |
| 421 | }, | 421 | }, |
| 422 | { text: "Action", value: "", sortable: false, align: "center" } | 422 | { text: "Action", value: "", sortable: false, align: "center" } |
| 423 | ], | 423 | ], |
| 424 | classList: [], | 424 | classList: [], |
| 425 | examList: [], | 425 | examList: [], |
| 426 | subjects: [], | 426 | subjects: [], |
| 427 | addMark: {}, | 427 | addMark: {}, |
| 428 | getMark: {}, | 428 | getMark: {}, |
| 429 | getScheduleData: {}, | 429 | getScheduleData: {}, |
| 430 | markData: [], | 430 | markData: [], |
| 431 | getStudentData: [], | 431 | getStudentData: [], |
| 432 | getStudentsList: [], | 432 | getStudentsList: [], |
| 433 | token: "" | 433 | token: "" |
| 434 | }), | 434 | }), |
| 435 | methods: { | 435 | methods: { |
| 436 | getClass() { | 436 | getClass() { |
| 437 | this.showLoader = true; | 437 | this.showLoader = true; |
| 438 | http() | 438 | http() |
| 439 | .get("/getClassesList", { | 439 | .get("/getClassesList", { |
| 440 | headers: { Authorization: "Bearer " + this.token } | 440 | headers: { Authorization: "Bearer " + this.token } |
| 441 | }) | 441 | }) |
| 442 | .then(response => { | 442 | .then(response => { |
| 443 | this.classList = response.data.data; | 443 | this.classList = response.data.data; |
| 444 | this.showLoader = false; | 444 | this.showLoader = false; |
| 445 | }) | 445 | }) |
| 446 | .catch(err => { | 446 | .catch(err => { |
| 447 | // console.log("err====>", err); | 447 | // console.log("err====>", err); |
| 448 | this.showLoader = false; | 448 | this.showLoader = false; |
| 449 | }); | 449 | }); |
| 450 | }, | 450 | }, |
| 451 | getSections(_id) { | 451 | getSections(_id) { |
| 452 | this.showLoader = true; | 452 | this.showLoader = true; |
| 453 | for (let i = 0; i < this.classList.length; i++) { | 453 | for (let i = 0; i < this.classList.length; i++) { |
| 454 | if (_id == this.classList[i]._id) { | 454 | if (_id == this.classList[i]._id) { |
| 455 | this.subjects = this.classList[i].subjects; | 455 | this.subjects = this.classList[i].subjects; |
| 456 | } | 456 | } |
| 457 | } | 457 | } |
| 458 | http() | 458 | http() |
| 459 | .get( | 459 | .get( |
| 460 | "/getSectionsList", | 460 | "/getSectionsList", |
| 461 | { params: { classId: _id } }, | 461 | { params: { classId: _id } }, |
| 462 | { | 462 | { |
| 463 | headers: { Authorization: "Bearer " + this.token } | 463 | headers: { Authorization: "Bearer " + this.token } |
| 464 | } | 464 | } |
| 465 | ) | 465 | ) |
| 466 | .then(response => { | 466 | .then(response => { |
| 467 | this.addSection = response.data.data; | 467 | this.addSection = response.data.data; |
| 468 | this.showLoader = false; | 468 | this.showLoader = false; |
| 469 | }) | 469 | }) |
| 470 | .catch(err => { | 470 | .catch(err => { |
| 471 | this.showLoader = false; | 471 | this.showLoader = false; |
| 472 | // console.log("err====>", err); | 472 | // console.log("err====>", err); |
| 473 | }); | 473 | }); |
| 474 | }, | 474 | }, |
| 475 | getExamList() { | 475 | getExamList() { |
| 476 | this.showLoader = true; | 476 | this.showLoader = true; |
| 477 | this.loadingSearch = true; | 477 | this.loadingSearch = true; |
| 478 | http() | 478 | http() |
| 479 | .get("/getExamsList", { | 479 | .get("/getExamsList", { |
| 480 | headers: { Authorization: "Bearer " + this.token } | 480 | headers: { Authorization: "Bearer " + this.token } |
| 481 | }) | 481 | }) |
| 482 | .then(response => { | 482 | .then(response => { |
| 483 | this.examList = response.data.data; | 483 | this.examList = response.data.data; |
| 484 | this.showLoader = false; | 484 | this.showLoader = false; |
| 485 | this.loadingSearch = false; | 485 | this.loadingSearch = false; |
| 486 | }) | 486 | }) |
| 487 | .catch(error => { | 487 | .catch(error => { |
| 488 | // console.log("err====>", err); | 488 | // console.log("err====>", err); |
| 489 | this.showLoader = false; | 489 | this.showLoader = false; |
| 490 | this.loadingSearch = false; | 490 | this.loadingSearch = false; |
| 491 | this.snackbar = true; | 491 | this.snackbar = true; |
| 492 | this.text = error.response.data.message; | 492 | this.text = error.response.data.message; |
| 493 | if (error.response.status === 401) { | 493 | if (error.response.status === 401) { |
| 494 | this.$router.replace({ path: "/" }); | 494 | this.$router.replace({ path: "/" }); |
| 495 | this.$store.dispatch("setToken", null); | 495 | this.$store.dispatch("setToken", null); |
| 496 | this.$store.dispatch("Id", null); | 496 | this.$store.dispatch("Id", null); |
| 497 | this.$store.dispatch("Role", null); | 497 | this.$store.dispatch("Role", null); |
| 498 | } | 498 | } |
| 499 | }); | 499 | }); |
| 500 | }, | 500 | }, |
| 501 | findStudents() { | 501 | findStudents() { |
| 502 | this.getStudentData = []; | 502 | this.getStudentData = []; |
| 503 | if (this.$refs.form.validate()) { | 503 | if (this.$refs.form.validate()) { |
| 504 | this.showLoader = true; | 504 | this.showLoader = true; |
| 505 | http() | 505 | http() |
| 506 | .get("/getStudentWithClass", { | 506 | .get("/getStudentWithClass", { |
| 507 | params: { | 507 | params: { |
| 508 | classId: this.addMark.classId, | 508 | classId: this.addMark.classId, |
| 509 | sectionId: this.addMark.sectionId | 509 | sectionId: this.addMark.sectionId |
| 510 | } | 510 | } |
| 511 | }) | 511 | }) |
| 512 | .then(response => { | 512 | .then(response => { |
| 513 | this.getStudentData = response.data.data; | 513 | this.getStudentData = response.data.data; |
| 514 | this.showLoader = false; | 514 | this.showLoader = false; |
| 515 | this.showLoader = true; | 515 | this.showLoader = true; |
| 516 | http() | 516 | http() |
| 517 | .get("/getMarkDistributionsList", { | 517 | .get("/getMarkDistributionsList", { |
| 518 | params: this.addMark | 518 | params: this.addMark |
| 519 | }) | 519 | }) |
| 520 | .then(response => { | 520 | .then(response => { |
| 521 | this.showLoader = false; | 521 | this.showLoader = false; |
| 522 | this.headerOfMark.length = 4; | 522 | this.headerOfMark.length = 4; |
| 523 | for (var i = 0; i < response.data.data.length; i++) { | 523 | for (var i = 0; i < response.data.data.length; i++) { |
| 524 | this.headerOfMark.push({ | 524 | this.headerOfMark.push({ |
| 525 | text: | 525 | text: |
| 526 | response.data.data[i].distributionType + | 526 | response.data.data[i].distributionType + |
| 527 | " (" + | 527 | " (" + |
| 528 | response.data.data[i].markValue + | 528 | response.data.data[i].markValue + |
| 529 | ")", | 529 | ")", |
| 530 | sortable: false, | 530 | sortable: false, |
| 531 | align: "center" | 531 | align: "center" |
| 532 | }); | 532 | }); |
| 533 | } | 533 | } |
| 534 | for (var n = 0; n < this.getStudentData.length; n++) { | 534 | for (var n = 0; n < this.getStudentData.length; n++) { |
| 535 | this.getStudentData[n].marksObtained = []; | 535 | this.getStudentData[n].marksObtained = []; |
| 536 | for (var j = 0; j < response.data.data.length; j++) { | 536 | for (var j = 0; j < response.data.data.length; j++) { |
| 537 | this.getStudentData[n].marksObtained.push({ | 537 | this.getStudentData[n].marksObtained.push({ |
| 538 | markDistributionId: response.data.data[j]._id, | 538 | markDistributionId: response.data.data[j]._id, |
| 539 | marksScored: 0 | 539 | marksScored: 0 |
| 540 | }); | 540 | }); |
| 541 | } | 541 | } |
| 542 | } | 542 | } |
| 543 | }) | 543 | }) |
| 544 | .catch(error => { | 544 | .catch(error => { |
| 545 | this.showLoader = false; | 545 | this.showLoader = false; |
| 546 | }); | 546 | }); |
| 547 | }) | 547 | }) |
| 548 | .catch(error => { | 548 | .catch(error => { |
| 549 | this.showLoader = false; | 549 | this.showLoader = false; |
| 550 | }); | 550 | }); |
| 551 | } | 551 | } |
| 552 | }, | 552 | }, |
| 553 | submit() { | 553 | submit() { |
| 554 | for (var j = 0; j < this.getStudentData.length; j++) { | 554 | for (var j = 0; j < this.getStudentData.length; j++) { |
| 555 | let data = { | 555 | let data = { |
| 556 | examId: this.addMark.examId, | 556 | examId: this.addMark.examId, |
| 557 | classId: this.addMark.classId, | 557 | classId: this.addMark.classId, |
| 558 | sectionId: this.addMark.sectionId, | 558 | sectionId: this.addMark.sectionId, |
| 559 | subjectId: this.addMark.subjectId, | 559 | subjectId: this.addMark.subjectId, |
| 560 | studentId: this.getStudentData[j]._id, | 560 | studentId: this.getStudentData[j]._id, |
| 561 | studentsMarks: this.getStudentData[j].marksObtained | 561 | studentsMarks: this.getStudentData[j].marksObtained |
| 562 | }; | 562 | }; |
| 563 | http() | 563 | http() |
| 564 | .post("/createMark", data) | 564 | .post("/createMark", data) |
| 565 | .then(response => { | 565 | .then(response => { |
| 566 | this.getStudentData = []; | 566 | this.getStudentData = []; |
| 567 | this.snackbar = true; | 567 | this.snackbar = true; |
| 568 | this.addMarkDialog = false; | 568 | this.addMarkDialog = false; |
| 569 | this.text = response.data.message; | 569 | this.text = response.data.message; |
| 570 | this.color = "green"; | 570 | this.color = "green"; |
| 571 | this.loading = false; | 571 | this.loading = false; |
| 572 | }) | 572 | }) |
| 573 | .catch(error => { | 573 | .catch(error => { |
| 574 | this.snackbar = true; | 574 | this.snackbar = true; |
| 575 | this.text = error.response.data.message; | 575 | this.text = error.response.data.message; |
| 576 | this.color = "red"; | 576 | this.color = "red"; |
| 577 | }); | 577 | }); |
| 578 | } | 578 | } |
| 579 | }, | 579 | }, |
| 580 | getStudents() { | 580 | getStudents() { |
| 581 | this.showLoader = true; | 581 | this.showLoader = true; |
| 582 | http() | 582 | http() |
| 583 | .get("/getStudentWithClass", { | 583 | .get("/getStudentWithClass", { |
| 584 | params: { | 584 | params: { |
| 585 | classId: this.getMark.classId, | 585 | classId: this.getMark.classId, |
| 586 | sectionId: this.getMark.sectionId | 586 | sectionId: this.getMark.sectionId |
| 587 | } | 587 | } |
| 588 | }) | 588 | }) |
| 589 | .then(response => { | 589 | .then(response => { |
| 590 | this.getStudentsList = response.data.data; | 590 | this.getStudentsList = response.data.data; |
| 591 | this.showLoader = false; | 591 | this.showLoader = false; |
| 592 | }) | 592 | }) |
| 593 | .catch(error => { | 593 | .catch(error => { |
| 594 | console.log("err====>", error); | 594 | console.log("err====>", error); |
| 595 | this.showLoader = false; | 595 | this.showLoader = false; |
| 596 | }); | 596 | }); |
| 597 | }, | 597 | }, |
| 598 | displaySearch() { | 598 | displaySearch() { |
| 599 | (this.show = false), (this.showSearch = true); | 599 | (this.show = false), (this.showSearch = true); |
| 600 | }, | 600 | }, |
| 601 | closeSearch() { | 601 | closeSearch() { |
| 602 | this.showSearch = false; | 602 | this.showSearch = false; |
| 603 | this.show = true; | 603 | this.show = true; |
| 604 | this.search = ""; | 604 | this.search = ""; |
| 605 | } | 605 | } |
| 606 | }, | 606 | }, |
| 607 | mounted() { | 607 | mounted() { |
| 608 | this.token = this.$store.state.token; | 608 | this.token = this.$store.state.token; |
| 609 | this.getClass(); | 609 | this.getClass(); |
| 610 | this.getExamList(); | 610 | this.getExamList(); |
| 611 | } | 611 | } |
| 612 | }; | 612 | }; |
| 613 | </script> | 613 | </script> |
| 614 | <style scoped> | 614 | <style scoped> |
| 615 | .markTable { | 615 | .markTable { |
| 616 | max-width: 80px !important; | 616 | max-width: 80px !important; |
| 617 | } | 617 | } |
| 618 | </style> | 618 | </style> |
| 619 | 619 | ||
| 620 | 620 | ||
| 621 | 621 | ||
| 622 | 622 | ||
| 623 | 623 | ||
| 624 | 624 | ||
| 625 | 625 | ||
| 626 | 626 | ||
| 627 | 627 | ||
| 628 | 628 | ||
| 629 | 629 | ||
| 630 | 630 | ||
| 631 | 631 | ||
| 632 | 632 | ||
| 633 | 633 | ||
| 634 | 634 | ||
| 635 | 635 | ||
| 636 | 636 | ||
| 637 | 637 | ||
| 638 | 638 | ||
| 639 | 639 | ||
| 640 | 640 |
src/pages/Mark/markDistribution.vue
| 1 | <template> | 1 | <template> |
| 2 | <v-container fluid class="body-color"> | 2 | <v-container fluid class="body-color"> |
| 3 | <!-- ****** EDIT Mark Distribution ****** --> | 3 | <!-- ****** EDIT Mark Distribution ****** --> |
| 4 | <v-dialog v-model="editMarkDistributionDialog" max-width="500px"> | 4 | <v-dialog v-model="editMarkDistributionDialog" max-width="500px"> |
| 5 | <v-card flat class="card-style pa-2" dark> | 5 | <v-card flat class="card-style pa-2" dark> |
| 6 | <v-layout> | 6 | <v-layout> |
| 7 | <v-flex xs12> | 7 | <v-flex xs12> |
| 8 | <label class="title text-xs-center">Edit Class</label> | 8 | <label class="title text-xs-center">Edit Class</label> |
| 9 | <v-icon size="24" class="right" @click="editMarkDistributionDialog = false">cancel</v-icon> | 9 | <v-icon size="24" class="right" @click="editMarkDistributionDialog = false">cancel</v-icon> |
| 10 | </v-flex> | 10 | </v-flex> |
| 11 | </v-layout> | 11 | </v-layout> |
| 12 | <v-form ref="form"> | 12 | <v-form ref="form"> |
| 13 | <v-container fluid> | 13 | <v-container fluid> |
| 14 | <v-flex xs12 sm12> | 14 | <v-flex xs12 sm12> |
| 15 | <v-layout> | 15 | <v-layout> |
| 16 | <v-flex xs4 class="pt-4 subheading"> | 16 | <v-flex xs4 class="pt-4 subheading"> |
| 17 | <label class="right">Mark Distribution:</label> | 17 | <label class="right">Mark Distribution:</label> |
| 18 | </v-flex> | 18 | </v-flex> |
| 19 | <v-flex xs8 sm6 class="ml-3"> | 19 | <v-flex xs8 sm6 class="ml-3"> |
| 20 | <v-text-field | 20 | <v-text-field |
| 21 | v-model="editedItem.distributionType" | 21 | v-model="editedItem.distributionType" |
| 22 | placeholder="fill your Distribution Type" | 22 | placeholder="fill your Distribution Type" |
| 23 | ></v-text-field> | 23 | ></v-text-field> |
| 24 | </v-flex> | 24 | </v-flex> |
| 25 | </v-layout> | 25 | </v-layout> |
| 26 | </v-flex> | 26 | </v-flex> |
| 27 | <v-flex xs12 sm12> | 27 | <v-flex xs12 sm12> |
| 28 | <v-layout> | 28 | <v-layout> |
| 29 | <v-flex xs4 class="pt-4 subheading"> | 29 | <v-flex xs4 class="pt-4 subheading"> |
| 30 | <label class="right">Mark Value:</label> | 30 | <label class="right">Mark Value:</label> |
| 31 | </v-flex> | 31 | </v-flex> |
| 32 | <v-flex xs8 sm6 class="ml-3"> | 32 | <v-flex xs8 sm6 class="ml-3"> |
| 33 | <v-text-field placeholder="fill your Mark Value" v-model="editedItem.markValue"></v-text-field> | 33 | <v-text-field placeholder="fill your Mark Value" v-model="editedItem.markValue"></v-text-field> |
| 34 | </v-flex> | 34 | </v-flex> |
| 35 | </v-layout> | 35 | </v-layout> |
| 36 | </v-flex> | 36 | </v-flex> |
| 37 | <v-layout> | 37 | <v-layout> |
| 38 | <v-flex xs12 sm11> | 38 | <v-flex xs12 sm11> |
| 39 | <v-card-actions> | 39 | <v-card-actions> |
| 40 | <v-spacer></v-spacer> | 40 | <v-spacer></v-spacer> |
| 41 | <v-btn round dark @click="save" class="add-button">Save</v-btn> | 41 | <v-btn round dark @click="save" class="add-button">Save</v-btn> |
| 42 | </v-card-actions> | 42 | </v-card-actions> |
| 43 | </v-flex> | 43 | </v-flex> |
| 44 | </v-layout> | 44 | </v-layout> |
| 45 | </v-container> | 45 | </v-container> |
| 46 | </v-form> | 46 | </v-form> |
| 47 | </v-card> | 47 | </v-card> |
| 48 | </v-dialog> | 48 | </v-dialog> |
| 49 | <!-- ****** MARK DISTRIBUTATION TABLE ****** --> | 49 | <!-- ****** MARK DISTRIBUTATION TABLE ****** --> |
| 50 | <v-toolbar color="transparent" flat> | 50 | <v-toolbar color="transparent" flat> |
| 51 | <v-btn | 51 | <v-btn |
| 52 | fab | 52 | fab |
| 53 | dark | 53 | dark |
| 54 | class="open-dialog-button hidden-xl-only hidden-md-only hidden-lg-only" | 54 | class="open-dialog-button hidden-xl-only hidden-md-only hidden-lg-only" |
| 55 | small | 55 | small |
| 56 | @click="addMarkDistributionDialog = true" | 56 | @click="addMarkDistributionDialog = true" |
| 57 | > | 57 | > |
| 58 | <v-icon dark>add</v-icon> | 58 | <v-icon dark>add</v-icon> |
| 59 | </v-btn> | 59 | </v-btn> |
| 60 | <v-btn | 60 | <v-btn |
| 61 | round | 61 | round |
| 62 | class="open-dialog-button hidden-sm-only hidden-xs-only" | 62 | class="open-dialog-button hidden-sm-only hidden-xs-only" |
| 63 | dark | 63 | dark |
| 64 | @click="addMarkDistributionDialog = true" | 64 | @click="addMarkDistributionDialog = true" |
| 65 | > | 65 | > |
| 66 | <v-icon class="white--text pr-1" size="20">add</v-icon>Add Mark Distribution | 66 | <v-icon class="white--text pr-1" size="20">add</v-icon>Add Mark Distribution |
| 67 | </v-btn> | 67 | </v-btn> |
| 68 | <v-spacer></v-spacer> | 68 | <v-spacer></v-spacer> |
| 69 | <v-card-title class="body-1" v-show="show"> | 69 | <v-card-title class="body-1" v-show="show"> |
| 70 | <v-btn icon large flat @click="displaySearch"> | 70 | <v-btn icon large flat @click="displaySearch"> |
| 71 | <v-avatar size="27"> | 71 | <v-avatar size="27"> |
| 72 | <img src="/static/icon/dashboard icons-49.png" alt="icon" /> | 72 | <img src="/static/icon/search.png" alt="icon" /> |
| 73 | </v-avatar> | 73 | </v-avatar> |
| 74 | </v-btn> | 74 | </v-btn> |
| 75 | </v-card-title> | 75 | </v-card-title> |
| 76 | <v-flex xs8 sm8 md3 lg2 v-show="showSearch"> | 76 | <v-flex xs8 sm8 md3 lg2 v-show="showSearch"> |
| 77 | <v-layout> | 77 | <v-layout> |
| 78 | <v-text-field v-model="search" label="Search" prepend-inner-icon="search" color="primary"></v-text-field> | 78 | <v-text-field v-model="search" label="Search" prepend-inner-icon="search" color="primary"></v-text-field> |
| 79 | <v-icon @click="closeSearch" color="error">close</v-icon> | 79 | <v-icon @click="closeSearch" color="error">close</v-icon> |
| 80 | </v-layout> | 80 | </v-layout> |
| 81 | </v-flex> | 81 | </v-flex> |
| 82 | </v-toolbar> | 82 | </v-toolbar> |
| 83 | <v-data-table | 83 | <v-data-table |
| 84 | :headers="headers" | 84 | :headers="headers" |
| 85 | :items="markList" | 85 | :items="markList" |
| 86 | :pagination.sync="pagination" | 86 | :pagination.sync="pagination" |
| 87 | :search="search" | 87 | :search="search" |
| 88 | > | 88 | > |
| 89 | <template slot="items" slot-scope="props"> | 89 | <template slot="items" slot-scope="props"> |
| 90 | <tr class="tr"> | 90 | <tr class="tr"> |
| 91 | <td class="td td-row text-xs-center">{{ props.index + 1 }}</td> | 91 | <td class="td td-row text-xs-center">{{ props.index + 1 }}</td> |
| 92 | <td class="td td-row text-xs-center">{{ props.item.distributionType }}</td> | 92 | <td class="td td-row text-xs-center">{{ props.item.distributionType }}</td> |
| 93 | <td class="td td-row text-xs-center linkCover">{{ props.item.markValue }}</td> | 93 | <td class="td td-row text-xs-center linkCover">{{ props.item.markValue }}</td> |
| 94 | <td class="td td-row text-xs-center"> | 94 | <td class="td td-row text-xs-center"> |
| 95 | <span> | 95 | <span> |
| 96 | <img | 96 | <img |
| 97 | style="cursor:pointer; width:20px; height:18px; " | 97 | style="cursor:pointer; width:20px; height:18px; " |
| 98 | class="mr-3" | 98 | class="mr-3" |
| 99 | @click="editItem(props.item)" | 99 | @click="editItem(props.item)" |
| 100 | src="/static/icon/dashboard icons-50.png" | 100 | src="/static/icon/edit.png" |
| 101 | /> | 101 | /> |
| 102 | <img | 102 | <img |
| 103 | style="cursor:pointer; width:20px; height:20px; " | 103 | style="cursor:pointer; width:20px; height:20px; " |
| 104 | @click="deleteItem(props.item)" | 104 | @click="deleteItem(props.item)" |
| 105 | src="/static/icon/dashboard icons-51.png" | 105 | src="/static/icon/delete.png" |
| 106 | /> | 106 | /> |
| 107 | </span> | 107 | </span> |
| 108 | </td> | 108 | </td> |
| 109 | </tr> | 109 | </tr> |
| 110 | </template> | 110 | </template> |
| 111 | <v-alert | 111 | <v-alert |
| 112 | slot="no-results" | 112 | slot="no-results" |
| 113 | :value="true" | 113 | :value="true" |
| 114 | color="error" | 114 | color="error" |
| 115 | icon="warning" | 115 | icon="warning" |
| 116 | >Your search for "{{ search }}" found no results.</v-alert> | 116 | >Your search for "{{ search }}" found no results.</v-alert> |
| 117 | </v-data-table> | 117 | </v-data-table> |
| 118 | <!-- ****** ADD MULTIPLE REMINDER ****** --> | 118 | <!-- ****** ADD MULTIPLE REMINDER ****** --> |
| 119 | <v-dialog v-model="addMarkDistributionDialog" max-width="500px"> | 119 | <v-dialog v-model="addMarkDistributionDialog" max-width="500px"> |
| 120 | <v-card flat class="card-style pa-2" dark> | 120 | <v-card flat class="card-style pa-2" dark> |
| 121 | <v-layout> | 121 | <v-layout> |
| 122 | <v-flex xs12> | 122 | <v-flex xs12> |
| 123 | <label class="title text-xs-center">Add Mark Distribution</label> | 123 | <label class="title text-xs-center">Add Mark Distribution</label> |
| 124 | <v-icon size="24" class="right" @click="addMarkDistributionDialog = false">cancel</v-icon> | 124 | <v-icon size="24" class="right" @click="addMarkDistributionDialog = false">cancel</v-icon> |
| 125 | </v-flex> | 125 | </v-flex> |
| 126 | </v-layout> | 126 | </v-layout> |
| 127 | <v-form ref="form" v-model="valid" lazy-validation> | 127 | <v-form ref="form" v-model="valid" lazy-validation> |
| 128 | <v-container fluid> | 128 | <v-container fluid> |
| 129 | <v-flex xs12> | 129 | <v-flex xs12> |
| 130 | <v-layout wrap> | 130 | <v-layout wrap> |
| 131 | <v-flex xs12 sm12 md4 class="pt-4 subheading"> | 131 | <v-flex xs12 sm12 md4 class="pt-4 subheading"> |
| 132 | <label class="right hidden-xs-only hidden-sm-only">Mark Distribution:</label> | 132 | <label class="right hidden-xs-only hidden-sm-only">Mark Distribution:</label> |
| 133 | <label class="hidden-md-only hidden-lg-only hidden-xl-only">Mark Distribution:</label> | 133 | <label class="hidden-md-only hidden-lg-only hidden-xl-only">Mark Distribution:</label> |
| 134 | </v-flex> | 134 | </v-flex> |
| 135 | <v-flex xs12 sm12 md7 class="ml-3"> | 135 | <v-flex xs12 sm12 md7 class="ml-3"> |
| 136 | <v-text-field | 136 | <v-text-field |
| 137 | v-model="mark.distributionType" | 137 | v-model="mark.distributionType" |
| 138 | placeholder="fill your Mark Distribution" | 138 | placeholder="fill your Mark Distribution" |
| 139 | :rules="markDistributionRules" | 139 | :rules="markDistributionRules" |
| 140 | ></v-text-field> | 140 | ></v-text-field> |
| 141 | </v-flex> | 141 | </v-flex> |
| 142 | </v-layout> | 142 | </v-layout> |
| 143 | </v-flex> | 143 | </v-flex> |
| 144 | <v-flex xs12> | 144 | <v-flex xs12> |
| 145 | <v-layout wrap> | 145 | <v-layout wrap> |
| 146 | <v-flex xs12 sm12 md4 class="pt-4 subheading"> | 146 | <v-flex xs12 sm12 md4 class="pt-4 subheading"> |
| 147 | <label class="right hidden-xs-only hidden-sm-only">Mark Value:</label> | 147 | <label class="right hidden-xs-only hidden-sm-only">Mark Value:</label> |
| 148 | <label class="hidden-md-only hidden-lg-only hidden-xl-only">Mark Value:</label> | 148 | <label class="hidden-md-only hidden-lg-only hidden-xl-only">Mark Value:</label> |
| 149 | </v-flex> | 149 | </v-flex> |
| 150 | <v-flex xs12 sm12 md7 class="ml-3"> | 150 | <v-flex xs12 sm12 md7 class="ml-3"> |
| 151 | <v-text-field | 151 | <v-text-field |
| 152 | placeholder="fill your Mark Value" | 152 | placeholder="fill your Mark Value" |
| 153 | :rules="markValueRules" | 153 | :rules="markValueRules" |
| 154 | v-model="mark.markValue" | 154 | v-model="mark.markValue" |
| 155 | type="text" | 155 | type="text" |
| 156 | required | 156 | required |
| 157 | ></v-text-field> | 157 | ></v-text-field> |
| 158 | </v-flex> | 158 | </v-flex> |
| 159 | </v-layout> | 159 | </v-layout> |
| 160 | </v-flex> | 160 | </v-flex> |
| 161 | <v-layout> | 161 | <v-layout> |
| 162 | <v-flex xs12 sm12> | 162 | <v-flex xs12 sm12> |
| 163 | <v-layout> | 163 | <v-layout> |
| 164 | <v-spacer></v-spacer> | 164 | <v-spacer></v-spacer> |
| 165 | <v-btn @click="clear" round class="clear-button" dark>clear</v-btn> | 165 | <v-btn @click="clear" round class="clear-button" dark>clear</v-btn> |
| 166 | <v-btn @click="submit" round dark :loading="loading" class="add-button">Add</v-btn> | 166 | <v-btn @click="submit" round dark :loading="loading" class="add-button">Add</v-btn> |
| 167 | </v-layout> | 167 | </v-layout> |
| 168 | </v-flex> | 168 | </v-flex> |
| 169 | </v-layout> | 169 | </v-layout> |
| 170 | </v-container> | 170 | </v-container> |
| 171 | </v-form> | 171 | </v-form> |
| 172 | </v-card> | 172 | </v-card> |
| 173 | </v-dialog> | 173 | </v-dialog> |
| 174 | <v-snackbar | 174 | <v-snackbar |
| 175 | :timeout="timeout" | 175 | :timeout="timeout" |
| 176 | :top="y === 'top'" | 176 | :top="y === 'top'" |
| 177 | :right="x === 'right'" | 177 | :right="x === 'right'" |
| 178 | :vertical="mode === 'vertical'" | 178 | :vertical="mode === 'vertical'" |
| 179 | v-model="snackbar" | 179 | v-model="snackbar" |
| 180 | :color="color" | 180 | :color="color" |
| 181 | >{{ text }}</v-snackbar> | 181 | >{{ text }}</v-snackbar> |
| 182 | <div class="loader" v-if="showLoader"> | 182 | <div class="loader" v-if="showLoader"> |
| 183 | <v-progress-circular indeterminate color="white"></v-progress-circular> | 183 | <v-progress-circular indeterminate color="white"></v-progress-circular> |
| 184 | </div> | 184 | </div> |
| 185 | </v-container> | 185 | </v-container> |
| 186 | </template> | 186 | </template> |
| 187 | 187 | ||
| 188 | <script> | 188 | <script> |
| 189 | import http from "@/Services/http.js"; | 189 | import http from "@/Services/http.js"; |
| 190 | import Util from "@/util"; | 190 | import Util from "@/util"; |
| 191 | 191 | ||
| 192 | export default { | 192 | export default { |
| 193 | data: () => ({ | 193 | data: () => ({ |
| 194 | snackbar: false, | 194 | snackbar: false, |
| 195 | y: "top", | 195 | y: "top", |
| 196 | x: "right", | 196 | x: "right", |
| 197 | mode: "", | 197 | mode: "", |
| 198 | color: "", | 198 | color: "", |
| 199 | timeout: 5000, | 199 | timeout: 5000, |
| 200 | text: "", | 200 | text: "", |
| 201 | loading: false, | 201 | loading: false, |
| 202 | search: "", | 202 | search: "", |
| 203 | showLoader: false, | 203 | showLoader: false, |
| 204 | show: true, | 204 | show: true, |
| 205 | showSearch: false, | 205 | showSearch: false, |
| 206 | editMarkDistributionDialog: false, | 206 | editMarkDistributionDialog: false, |
| 207 | addMarkDistributionDialog: false, | 207 | addMarkDistributionDialog: false, |
| 208 | valid: true, | 208 | valid: true, |
| 209 | isActive: true, | 209 | isActive: true, |
| 210 | newActive: false, | 210 | newActive: false, |
| 211 | pagination: { | 211 | pagination: { |
| 212 | rowsPerPage: 15 | 212 | rowsPerPage: 15 |
| 213 | }, | 213 | }, |
| 214 | markDistributionRules: [v => !!v || " Mark Distribution type is required"], | 214 | markDistributionRules: [v => !!v || " Mark Distribution type is required"], |
| 215 | markValueRules: [v => !!v || "Mark Value is required"], | 215 | markValueRules: [v => !!v || "Mark Value is required"], |
| 216 | headers: [ | 216 | headers: [ |
| 217 | { | 217 | { |
| 218 | text: "No", | 218 | text: "No", |
| 219 | align: "center", | 219 | align: "center", |
| 220 | sortable: false, | 220 | sortable: false, |
| 221 | value: "No" | 221 | value: "No" |
| 222 | }, | 222 | }, |
| 223 | { | 223 | { |
| 224 | text: " Mark Distribution Type", | 224 | text: " Mark Distribution Type", |
| 225 | value: " distributionType", | 225 | value: " distributionType", |
| 226 | sortable: false, | 226 | sortable: false, |
| 227 | align: "center" | 227 | align: "center" |
| 228 | }, | 228 | }, |
| 229 | { | 229 | { |
| 230 | text: " Mark Value", | 230 | text: " Mark Value", |
| 231 | value: "markValue", | 231 | value: "markValue", |
| 232 | sortable: false, | 232 | sortable: false, |
| 233 | align: "center" | 233 | align: "center" |
| 234 | }, | 234 | }, |
| 235 | { text: "Action", value: "", sortable: false, align: "center" } | 235 | { text: "Action", value: "", sortable: false, align: "center" } |
| 236 | ], | 236 | ], |
| 237 | markList: [], | 237 | markList: [], |
| 238 | editedIndex: -1, | 238 | editedIndex: -1, |
| 239 | mark: {}, | 239 | mark: {}, |
| 240 | editedItem: {}, | 240 | editedItem: {}, |
| 241 | token: "" | 241 | token: "" |
| 242 | }), | 242 | }), |
| 243 | methods: { | 243 | methods: { |
| 244 | getMarkDistributions() { | 244 | getMarkDistributions() { |
| 245 | this.showLoader = true; | 245 | this.showLoader = true; |
| 246 | http() | 246 | http() |
| 247 | .get("/getMarkDistributionsList", { | 247 | .get("/getMarkDistributionsList", { |
| 248 | headers: { Authorization: "Bearer " + this.token } | 248 | headers: { Authorization: "Bearer " + this.token } |
| 249 | }) | 249 | }) |
| 250 | .then(response => { | 250 | .then(response => { |
| 251 | this.markList = response.data.data; | 251 | this.markList = response.data.data; |
| 252 | this.showLoader = false; | 252 | this.showLoader = false; |
| 253 | }) | 253 | }) |
| 254 | .catch(error => { | 254 | .catch(error => { |
| 255 | this.showLoader = false; | 255 | this.showLoader = false; |
| 256 | // if (error.response.status === 401) { | 256 | // if (error.response.status === 401) { |
| 257 | // this.$router.replace({ path: "/" }); | 257 | // this.$router.replace({ path: "/" }); |
| 258 | // this.$store.dispatch("setToken", null); | 258 | // this.$store.dispatch("setToken", null); |
| 259 | // this.$store.dispatch("Id", null); | 259 | // this.$store.dispatch("Id", null); |
| 260 | // } | 260 | // } |
| 261 | }); | 261 | }); |
| 262 | }, | 262 | }, |
| 263 | editItem(item) { | 263 | editItem(item) { |
| 264 | this.editedIndex = this.markList.indexOf(item); | 264 | this.editedIndex = this.markList.indexOf(item); |
| 265 | this.editedItem = Object.assign({}, item); | 265 | this.editedItem = Object.assign({}, item); |
| 266 | this.editMarkDistributionDialog = true; | 266 | this.editMarkDistributionDialog = true; |
| 267 | }, | 267 | }, |
| 268 | deleteItem(item) { | 268 | deleteItem(item) { |
| 269 | let deleteParticularMark = { | 269 | let deleteParticularMark = { |
| 270 | markDistributionId: item._id | 270 | markDistributionId: item._id |
| 271 | }; | 271 | }; |
| 272 | http() | 272 | http() |
| 273 | .delete( | 273 | .delete( |
| 274 | "/deleteMarkDistribution", | 274 | "/deleteMarkDistribution", |
| 275 | confirm("Are you sure you want to delete this?") && { | 275 | confirm("Are you sure you want to delete this?") && { |
| 276 | params: deleteParticularMark | 276 | params: deleteParticularMark |
| 277 | } | 277 | } |
| 278 | ) | 278 | ) |
| 279 | .then(response => { | 279 | .then(response => { |
| 280 | this.snackbar = true; | 280 | this.snackbar = true; |
| 281 | this.text = response.data.message; | 281 | this.text = response.data.message; |
| 282 | this.getMarkDistributions(); | 282 | this.getMarkDistributions(); |
| 283 | }) | 283 | }) |
| 284 | .catch(error => { | 284 | .catch(error => { |
| 285 | console.log(error); | 285 | console.log(error); |
| 286 | }); | 286 | }); |
| 287 | }, | 287 | }, |
| 288 | close() { | 288 | close() { |
| 289 | this.editMarkDistributionDialog = false; | 289 | this.editMarkDistributionDialog = false; |
| 290 | }, | 290 | }, |
| 291 | submit() { | 291 | submit() { |
| 292 | if (this.$refs.form.validate()) { | 292 | if (this.$refs.form.validate()) { |
| 293 | this.loading = true; | 293 | this.loading = true; |
| 294 | http() | 294 | http() |
| 295 | .post("/createMarkDistribution", this.mark) | 295 | .post("/createMarkDistribution", this.mark) |
| 296 | .then(response => { | 296 | .then(response => { |
| 297 | this.snackbar = true; | 297 | this.snackbar = true; |
| 298 | this.text = response.data.message; | 298 | this.text = response.data.message; |
| 299 | this.getMarkDistributions(); | 299 | this.getMarkDistributions(); |
| 300 | this.clear(); | 300 | this.clear(); |
| 301 | this.addMarkDistributionDialog = false; | 301 | this.addMarkDistributionDialog = false; |
| 302 | this.loading = false; | 302 | this.loading = false; |
| 303 | }) | 303 | }) |
| 304 | .catch(error => { | 304 | .catch(error => { |
| 305 | this.snackbar = true; | 305 | this.snackbar = true; |
| 306 | this.text = error.response.data.message; | 306 | this.text = error.response.data.message; |
| 307 | this.loading = false; | 307 | this.loading = false; |
| 308 | }); | 308 | }); |
| 309 | } | 309 | } |
| 310 | }, | 310 | }, |
| 311 | clear() { | 311 | clear() { |
| 312 | this.$refs.form.reset(); | 312 | this.$refs.form.reset(); |
| 313 | }, | 313 | }, |
| 314 | save() { | 314 | save() { |
| 315 | (this.editedItem.markDistributionId = this.editedItem._id), | 315 | (this.editedItem.markDistributionId = this.editedItem._id), |
| 316 | http() | 316 | http() |
| 317 | .put("/updateMarkDistribution", this.editedItem) | 317 | .put("/updateMarkDistribution", this.editedItem) |
| 318 | .then(response => { | 318 | .then(response => { |
| 319 | this.snackbar = true; | 319 | this.snackbar = true; |
| 320 | this.text = "Successfully Edit Notification"; | 320 | this.text = "Successfully Edit Notification"; |
| 321 | this.getMarkDistributions(); | 321 | this.getMarkDistributions(); |
| 322 | this.close(); | 322 | this.close(); |
| 323 | }) | 323 | }) |
| 324 | .catch(error => { | 324 | .catch(error => { |
| 325 | console.log(error); | 325 | console.log(error); |
| 326 | }); | 326 | }); |
| 327 | }, | 327 | }, |
| 328 | displaySearch() { | 328 | displaySearch() { |
| 329 | (this.show = false), (this.showSearch = true); | 329 | (this.show = false), (this.showSearch = true); |
| 330 | }, | 330 | }, |
| 331 | closeSearch() { | 331 | closeSearch() { |
| 332 | this.showSearch = false; | 332 | this.showSearch = false; |
| 333 | this.show = true; | 333 | this.show = true; |
| 334 | this.search = ""; | 334 | this.search = ""; |
| 335 | } | 335 | } |
| 336 | }, | 336 | }, |
| 337 | mounted() { | 337 | mounted() { |
| 338 | this.token = this.$store.state.token; | 338 | this.token = this.$store.state.token; |
| 339 | this.getMarkDistributions(); | 339 | this.getMarkDistributions(); |
| 340 | } | 340 | } |
| 341 | }; | 341 | }; |
| 342 | </script> | 342 | </script> |
| 343 | <style scoped> | 343 | <style scoped> |
src/pages/News/news.vue
| 1 | <template> | 1 | <template> |
| 2 | <v-container fluid class="body-color"> | 2 | <v-container fluid class="body-color"> |
| 3 | <!-- ****** EDIT NEWS ****** --> | 3 | <!-- ****** EDIT NEWS ****** --> |
| 4 | <v-dialog v-model="editNewsDialog" max-width="600px"> | 4 | <v-dialog v-model="editNewsDialog" max-width="600px"> |
| 5 | <v-card flat class="card-style pa-2" dark> | 5 | <v-card flat class="card-style pa-2" dark> |
| 6 | <v-layout> | 6 | <v-layout> |
| 7 | <v-flex xs12> | 7 | <v-flex xs12> |
| 8 | <label class="title text-xs-center">Edit News</label> | 8 | <label class="title text-xs-center">Edit News</label> |
| 9 | <v-icon size="24" class="right" @click="editNewsDialog = false">cancel</v-icon> | 9 | <v-icon size="24" class="right" @click="editNewsDialog = 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 row> | 13 | <v-layout row> |
| 14 | <v-flex xs12 class="text-xs-center text-sm-center text-md-center text-lg-center my-4"> | 14 | <v-flex xs12 class="text-xs-center text-sm-center text-md-center text-lg-center my-4"> |
| 15 | <input | 15 | <input |
| 16 | type="file" | 16 | type="file" |
| 17 | style="display: none" | 17 | style="display: none" |
| 18 | ref="image" | 18 | ref="image" |
| 19 | accept="image/*" | 19 | accept="image/*" |
| 20 | multiple | 20 | multiple |
| 21 | @change="onFilePicked" | 21 | @change="onFilePicked" |
| 22 | /> | 22 | /> |
| 23 | <v-layout justify-center> | 23 | <v-layout justify-center> |
| 24 | <v-flex | 24 | <v-flex |
| 25 | xs12 | 25 | xs12 |
| 26 | sm12 | 26 | sm12 |
| 27 | md3 | 27 | md3 |
| 28 | v-for="Image in editedItem.newsImageUrl" | 28 | v-for="Image in editedItem.newsImageUrl" |
| 29 | :key="Image._id" | 29 | :key="Image._id" |
| 30 | v-if="editedItem.newsImageUrl" | 30 | v-if="editedItem.newsImageUrl" |
| 31 | class="profile-image-wrapper" | 31 | class="profile-image-wrapper" |
| 32 | > | 32 | > |
| 33 | <img | 33 | <img |
| 34 | :src="Image.imageUrl" | 34 | :src="Image.imageUrl" |
| 35 | height="100" | 35 | height="100" |
| 36 | width="100" | 36 | width="100" |
| 37 | alt="News" | 37 | alt="News" |
| 38 | class="pa-2 imgNews" | 38 | class="pa-2 imgNews" |
| 39 | /> | 39 | /> |
| 40 | <v-icon | 40 | <v-icon |
| 41 | class="red edit-profile-icon" | 41 | class="red edit-profile-icon" |
| 42 | dark | 42 | dark |
| 43 | @click="deleteImage(Image._id,editedItem._id)" | 43 | @click="deleteImage(Image._id,editedItem._id)" |
| 44 | >close</v-icon> | 44 | >close</v-icon> |
| 45 | </v-flex> | 45 | </v-flex> |
| 46 | <v-flex v-for="(file, index) in files" :key="index"> | 46 | <v-flex v-for="(file, index) in files" :key="index"> |
| 47 | <img :src="file" height="100" width="100" class="pa-2" /> | 47 | <img :src="file" height="100" width="100" class="pa-2" /> |
| 48 | </v-flex> | 48 | </v-flex> |
| 49 | <img | 49 | <img |
| 50 | src="/static/icon/user.png" | 50 | src="/static/icon/user.png" |
| 51 | v-if="files == '' && editedItem.newsImageUrl == ''" | 51 | v-if="files == '' && editedItem.newsImageUrl == ''" |
| 52 | height="100" | 52 | height="100" |
| 53 | width="100" | 53 | width="100" |
| 54 | alt="News" | 54 | alt="News" |
| 55 | /> | 55 | /> |
| 56 | </v-layout> | 56 | </v-layout> |
| 57 | </v-flex> | 57 | </v-flex> |
| 58 | </v-layout> | 58 | </v-layout> |
| 59 | <!-- </v-layout> --> | 59 | <!-- </v-layout> --> |
| 60 | <v-layout wrap> | 60 | <v-layout wrap> |
| 61 | <v-flex xs12 sm12> | 61 | <v-flex xs12 sm12> |
| 62 | <v-layout> | 62 | <v-layout> |
| 63 | <v-flex xs4 class="pt-4 subheading"> | 63 | <v-flex xs4 class="pt-4 subheading"> |
| 64 | <label class="right">Title:</label> | 64 | <label class="right">Title:</label> |
| 65 | </v-flex> | 65 | </v-flex> |
| 66 | <v-flex sm6 xs8 class="ml-3"> | 66 | <v-flex sm6 xs8 class="ml-3"> |
| 67 | <v-text-field | 67 | <v-text-field |
| 68 | v-model="editedItem.title" | 68 | v-model="editedItem.title" |
| 69 | placeholder="fill your Title" | 69 | placeholder="fill your Title" |
| 70 | name="name" | 70 | name="name" |
| 71 | type="text" | 71 | type="text" |
| 72 | required | 72 | required |
| 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">Description:</label> | 80 | <label class="right">Description:</label> |
| 81 | </v-flex> | 81 | </v-flex> |
| 82 | <v-flex sm6 xs8 class="ml-3"> | 82 | <v-flex sm6 xs8 class="ml-3"> |
| 83 | <v-text-field | 83 | <v-text-field |
| 84 | placeholder="fill your Description" | 84 | placeholder="fill your Description" |
| 85 | v-model="editedItem.description" | 85 | v-model="editedItem.description" |
| 86 | type="text" | 86 | type="text" |
| 87 | name="email" | 87 | name="email" |
| 88 | required | 88 | required |
| 89 | ></v-text-field> | 89 | ></v-text-field> |
| 90 | </v-flex> | 90 | </v-flex> |
| 91 | </v-layout> | 91 | </v-layout> |
| 92 | </v-flex> | 92 | </v-flex> |
| 93 | <v-flex xs12> | 93 | <v-flex xs12> |
| 94 | <v-layout> | 94 | <v-layout> |
| 95 | <v-flex xs4 class="pt-4 subheading"> | 95 | <v-flex xs4 class="pt-4 subheading"> |
| 96 | <label class="right hidden-xs-only hidden-sm-only">Add New Images:</label> | 96 | <label class="right hidden-xs-only hidden-sm-only">Add New Images:</label> |
| 97 | <label class="right hidden-lg-only hidden-md-only hidden-xl-only">Uplaod :</label> | 97 | <label class="right hidden-lg-only hidden-md-only hidden-xl-only">Uplaod :</label> |
| 98 | </v-flex> | 98 | </v-flex> |
| 99 | <v-flex sm6 xs8 class="ml-3"> | 99 | <v-flex sm6 xs8 class="ml-3"> |
| 100 | <v-text-field | 100 | <v-text-field |
| 101 | label="Select Image" | 101 | label="Select Image" |
| 102 | @click="pickFile" | 102 | @click="pickFile" |
| 103 | v-model="imageName" | 103 | v-model="imageName" |
| 104 | append-icon="attach_file" | 104 | append-icon="attach_file" |
| 105 | multiple | 105 | multiple |
| 106 | ></v-text-field> | 106 | ></v-text-field> |
| 107 | </v-flex> | 107 | </v-flex> |
| 108 | </v-layout> | 108 | </v-layout> |
| 109 | </v-flex> | 109 | </v-flex> |
| 110 | </v-layout> | 110 | </v-layout> |
| 111 | <v-layout> | 111 | <v-layout> |
| 112 | <v-flex xs12 sm9 offset-sm2 class="hidden-xs-only hidden-sm-only"> | 112 | <v-flex xs12 sm9 offset-sm2 class="hidden-xs-only hidden-sm-only"> |
| 113 | <v-card-actions> | 113 | <v-card-actions> |
| 114 | <v-spacer></v-spacer> | 114 | <v-spacer></v-spacer> |
| 115 | <v-btn round dark @click="save" class="add-button">Save</v-btn> | 115 | <v-btn round dark @click="save" class="add-button">Save</v-btn> |
| 116 | </v-card-actions> | 116 | </v-card-actions> |
| 117 | </v-flex> | 117 | </v-flex> |
| 118 | <v-flex xs12 class="hidden-lg-only hidden-md-only hidden-xl-only"> | 118 | <v-flex xs12 class="hidden-lg-only hidden-md-only hidden-xl-only"> |
| 119 | <v-card-actions> | 119 | <v-card-actions> |
| 120 | <v-spacer></v-spacer> | 120 | <v-spacer></v-spacer> |
| 121 | <v-btn round dark @click="save" class="add-button">Save</v-btn> | 121 | <v-btn round dark @click="save" class="add-button">Save</v-btn> |
| 122 | <v-spacer></v-spacer> | 122 | <v-spacer></v-spacer> |
| 123 | </v-card-actions> | 123 | </v-card-actions> |
| 124 | </v-flex> | 124 | </v-flex> |
| 125 | </v-layout> | 125 | </v-layout> |
| 126 | </v-card-text> | 126 | </v-card-text> |
| 127 | </v-card> | 127 | </v-card> |
| 128 | </v-dialog> | 128 | </v-dialog> |
| 129 | <!-- ****** PROFILE NEWS ****** --> | 129 | <!-- ****** PROFILE NEWS ****** --> |
| 130 | <v-dialog v-model="dialog1" max-width="500px"> | 130 | <v-dialog v-model="dialog1" max-width="500px"> |
| 131 | <v-card flat class="card-style pa-3" dark> | 131 | <v-card flat class="card-style pa-3" dark> |
| 132 | <v-layout> | 132 | <v-layout> |
| 133 | <v-flex xs12> | 133 | <v-flex xs12> |
| 134 | <label class="title text-xs-center">View News</label> | 134 | <label class="title text-xs-center">View News</label> |
| 135 | <v-icon size="24" class="right" @click="dialog1 = false">cancel</v-icon> | 135 | <v-icon size="24" class="right" @click="dialog1 = false">cancel</v-icon> |
| 136 | </v-flex> | 136 | </v-flex> |
| 137 | </v-layout> | 137 | </v-layout> |
| 138 | <v-card-text> | 138 | <v-card-text> |
| 139 | <v-flex align-center justify-center layout text-xs-center> | 139 | <v-flex align-center justify-center layout text-xs-center> |
| 140 | <span v-for="(image,i) in editedItem.newsImageUrl" :key="i" class="pa-2"> | 140 | <span v-for="(image,i) in editedItem.newsImageUrl" :key="i" class="pa-2"> |
| 141 | <img :src="image.imageUrl" alt="News" width="100" height="100" class="imgNews" /> | 141 | <img :src="image.imageUrl" alt="News" width="100" height="100" class="imgNews" /> |
| 142 | </span> | 142 | </span> |
| 143 | <img | 143 | <img |
| 144 | src="/static/icon/user.png" | 144 | src="/static/icon/user.png" |
| 145 | v-if="editedItem.newsImageUrl == ''" | 145 | v-if="editedItem.newsImageUrl == ''" |
| 146 | height="80" | 146 | height="80" |
| 147 | width="80" | 147 | width="80" |
| 148 | alt="News" | 148 | alt="News" |
| 149 | /> | 149 | /> |
| 150 | </v-flex> | 150 | </v-flex> |
| 151 | <v-container grid-list-md> | 151 | <v-container grid-list-md> |
| 152 | <v-layout wrap> | 152 | <v-layout wrap> |
| 153 | <v-flex> | 153 | <v-flex> |
| 154 | <v-layout> | 154 | <v-layout> |
| 155 | <v-flex xs5 sm6> | 155 | <v-flex xs5 sm6> |
| 156 | <h5 class="right my-1"> | 156 | <h5 class="right my-1"> |
| 157 | <b>Title:</b> | 157 | <b>Title:</b> |
| 158 | </h5> | 158 | </h5> |
| 159 | </v-flex> | 159 | </v-flex> |
| 160 | <v-flex sm6 xs8> | 160 | <v-flex sm6 xs8> |
| 161 | <h5 class="my-1">{{ editedItem.title }}</h5> | 161 | <h5 class="my-1">{{ editedItem.title }}</h5> |
| 162 | </v-flex> | 162 | </v-flex> |
| 163 | </v-layout> | 163 | </v-layout> |
| 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>Description:</b> | 167 | <b>Description:</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.description }}</h5> | 171 | <h5 class="my-1">{{ editedItem.description }}</h5> |
| 172 | </v-flex> | 172 | </v-flex> |
| 173 | </v-layout> | 173 | </v-layout> |
| 174 | </v-flex> | 174 | </v-flex> |
| 175 | </v-layout> | 175 | </v-layout> |
| 176 | </v-container> | 176 | </v-container> |
| 177 | </v-card-text> | 177 | </v-card-text> |
| 178 | </v-card> | 178 | </v-card> |
| 179 | </v-dialog> | 179 | </v-dialog> |
| 180 | <!-- ****** EXISTING-USERS NEWS TABLE ****** --> | 180 | <!-- ****** EXISTING-USERS NEWS TABLE ****** --> |
| 181 | <v-toolbar color="transparent" flat> | 181 | <v-toolbar color="transparent" flat> |
| 182 | <v-btn | 182 | <v-btn |
| 183 | fab | 183 | fab |
| 184 | dark | 184 | dark |
| 185 | class="open-dialog-button hidden-xl-only hidden-md-only hidden-lg-only" | 185 | class="open-dialog-button hidden-xl-only hidden-md-only hidden-lg-only" |
| 186 | small | 186 | small |
| 187 | @click="addNewsDialog = true" | 187 | @click="addNewsDialog = true" |
| 188 | > | 188 | > |
| 189 | <v-icon dark>add</v-icon> | 189 | <v-icon dark>add</v-icon> |
| 190 | </v-btn> | 190 | </v-btn> |
| 191 | <v-btn | 191 | <v-btn |
| 192 | round | 192 | round |
| 193 | class="open-dialog-button hidden-sm-only hidden-xs-only" | 193 | class="open-dialog-button hidden-sm-only hidden-xs-only" |
| 194 | dark | 194 | dark |
| 195 | @click="addNewsDialog = true" | 195 | @click="addNewsDialog = true" |
| 196 | > | 196 | > |
| 197 | <v-icon class="white--text pr-1" size="20">add</v-icon>Add News | 197 | <v-icon class="white--text pr-1" size="20">add</v-icon>Add News |
| 198 | </v-btn> | 198 | </v-btn> |
| 199 | <v-spacer></v-spacer> | 199 | <v-spacer></v-spacer> |
| 200 | <v-card-title class="body-1" v-show="show"> | 200 | <v-card-title class="body-1" v-show="show"> |
| 201 | <v-btn icon large flat @click="displaySearch"> | 201 | <v-btn icon large flat @click="displaySearch"> |
| 202 | <v-avatar size="27"> | 202 | <v-avatar size="27"> |
| 203 | <img src="/static/icon/dashboard icons-49.png" alt="icon" /> | 203 | <img src="/static/icon/search.png" alt="icon" /> |
| 204 | </v-avatar> | 204 | </v-avatar> |
| 205 | </v-btn> | 205 | </v-btn> |
| 206 | </v-card-title> | 206 | </v-card-title> |
| 207 | <v-flex xs8 sm8 md3 lg2 v-show="showSearch"> | 207 | <v-flex xs8 sm8 md3 lg2 v-show="showSearch"> |
| 208 | <v-layout> | 208 | <v-layout> |
| 209 | <v-text-field v-model="search" label="Search" prepend-inner-icon="search" color="primary"></v-text-field> | 209 | <v-text-field v-model="search" label="Search" prepend-inner-icon="search" color="primary"></v-text-field> |
| 210 | <v-icon @click="closeSearch" color="error">close</v-icon> | 210 | <v-icon @click="closeSearch" color="error">close</v-icon> |
| 211 | </v-layout> | 211 | </v-layout> |
| 212 | </v-flex> | 212 | </v-flex> |
| 213 | </v-toolbar> | 213 | </v-toolbar> |
| 214 | <v-data-table | 214 | <v-data-table |
| 215 | :headers="headers" | 215 | :headers="headers" |
| 216 | :items="desserts" | 216 | :items="desserts" |
| 217 | :pagination.sync="pagination" | 217 | :pagination.sync="pagination" |
| 218 | :search="search" | 218 | :search="search" |
| 219 | > | 219 | > |
| 220 | <template slot="items" slot-scope="props"> | 220 | <template slot="items" slot-scope="props"> |
| 221 | <tr class="tr"> | 221 | <tr class="tr"> |
| 222 | <td class="td td-row">{{ props.index + 1}}</td> | 222 | <td class="td td-row">{{ props.index + 1}}</td> |
| 223 | <td class="td td-row text-xs-center"> | 223 | <td class="td td-row text-xs-center"> |
| 224 | <span v-for="(image,_id) in props.item.newsImageUrl" class="pa-2"> | 224 | <span v-for="(image,_id) in props.item.newsImageUrl" class="pa-2"> |
| 225 | <img :src="image.imageUrl" alt="newsImage" width="40" height="40" /> | 225 | <img :src="image.imageUrl" alt="newsImage" width="40" height="40" /> |
| 226 | </span> | 226 | </span> |
| 227 | <img | 227 | <img |
| 228 | src="/static/icon/user.png" | 228 | src="/static/icon/user.png" |
| 229 | v-if="props.item.newsImageUrl == ''" | 229 | v-if="props.item.newsImageUrl == ''" |
| 230 | width="40" | 230 | width="40" |
| 231 | alt="News" | 231 | alt="News" |
| 232 | /> | 232 | /> |
| 233 | </td> | 233 | </td> |
| 234 | <td class="td td-row text-xs-center">{{ props.item.title}}</td> | 234 | <td class="td td-row text-xs-center">{{ props.item.title}}</td> |
| 235 | <td class="td td-row text-xs-center">{{ props.item.description}}</td> | 235 | <td class="td td-row text-xs-center">{{ props.item.description}}</td> |
| 236 | 236 | ||
| 237 | <td class="td td-row text-xs-center"> | 237 | <td class="td td-row text-xs-center"> |
| 238 | <span> | 238 | <span> |
| 239 | <v-tooltip top> | 239 | <v-tooltip top> |
| 240 | <img | 240 | <img |
| 241 | slot="activator" | 241 | slot="activator" |
| 242 | style="cursor:pointer; width:25px; height:25px; " | 242 | style="cursor:pointer; width:25px; height:25px; " |
| 243 | class="mr-3" | 243 | class="mr-3" |
| 244 | @click="profile(props.item)" | 244 | @click="profile(props.item)" |
| 245 | src="/static/icon/dashboard icons-47.png" | 245 | src="/static/icon/view.png" |
| 246 | /> | 246 | /> |
| 247 | <span>View</span> | 247 | <span>View</span> |
| 248 | </v-tooltip> | 248 | </v-tooltip> |
| 249 | <v-tooltip top> | 249 | <v-tooltip top> |
| 250 | <img | 250 | <img |
| 251 | slot="activator" | 251 | slot="activator" |
| 252 | style="cursor:pointer; width:20px; height:18px; " | 252 | style="cursor:pointer; width:20px; height:18px; " |
| 253 | class="mr-3" | 253 | class="mr-3" |
| 254 | @click="editItem(props.item)" | 254 | @click="editItem(props.item)" |
| 255 | src="/static/icon/dashboard icons-50.png" | 255 | src="/static/icon/edit.png" |
| 256 | /> | 256 | /> |
| 257 | <span>Edit</span> | 257 | <span>Edit</span> |
| 258 | </v-tooltip> | 258 | </v-tooltip> |
| 259 | <v-tooltip top> | 259 | <v-tooltip top> |
| 260 | <img | 260 | <img |
| 261 | slot="activator" | 261 | slot="activator" |
| 262 | style="cursor:pointer; width:20px; height:20px; " | 262 | style="cursor:pointer; width:20px; height:20px; " |
| 263 | @click="deleteItem(props.item)" | 263 | @click="deleteItem(props.item)" |
| 264 | src="/static/icon/dashboard icons-51.png" | 264 | src="/static/icon/delete.png" |
| 265 | /> | 265 | /> |
| 266 | <span>Delete</span> | 266 | <span>Delete</span> |
| 267 | </v-tooltip> | 267 | </v-tooltip> |
| 268 | </span> | 268 | </span> |
| 269 | </td> | 269 | </td> |
| 270 | </tr> | 270 | </tr> |
| 271 | </template> | 271 | </template> |
| 272 | <v-alert | 272 | <v-alert |
| 273 | slot="no-results" | 273 | slot="no-results" |
| 274 | :value="true" | 274 | :value="true" |
| 275 | color="error" | 275 | color="error" |
| 276 | icon="warning" | 276 | icon="warning" |
| 277 | >Your search for "{{ search }}" found no results.</v-alert> | 277 | >Your search for "{{ search }}" found no results.</v-alert> |
| 278 | </v-data-table> | 278 | </v-data-table> |
| 279 | <!-- ****** ADD NEWS ****** --> | 279 | <!-- ****** ADD NEWS ****** --> |
| 280 | <v-dialog v-model="addNewsDialog" max-width="600px"> | 280 | <v-dialog v-model="addNewsDialog" max-width="600px"> |
| 281 | <v-card flat class="card-style pa-2" dark> | 281 | <v-card flat class="card-style pa-2" dark> |
| 282 | <v-layout> | 282 | <v-layout> |
| 283 | <v-flex xs12> | 283 | <v-flex xs12> |
| 284 | <label class="title text-xs-center">Add News</label> | 284 | <label class="title text-xs-center">Add News</label> |
| 285 | <v-icon size="24" class="right" @click="addNewsDialog = false">cancel</v-icon> | 285 | <v-icon size="24" class="right" @click="addNewsDialog = false">cancel</v-icon> |
| 286 | </v-flex> | 286 | </v-flex> |
| 287 | </v-layout> | 287 | </v-layout> |
| 288 | <v-form ref="form" v-model="valid" lazy-validation> | 288 | <v-form ref="form" v-model="valid" lazy-validation> |
| 289 | <v-container fluid> | 289 | <v-container fluid> |
| 290 | <v-layout> | 290 | <v-layout> |
| 291 | <v-flex xs12 class="text-xs-center text-sm-center text-md-center text-lg-center my-4"> | 291 | <v-flex xs12 class="text-xs-center text-sm-center text-md-center text-lg-center my-4"> |
| 292 | <input | 292 | <input |
| 293 | type="file" | 293 | type="file" |
| 294 | style="display: none" | 294 | style="display: none" |
| 295 | ref="image" | 295 | ref="image" |
| 296 | accept="image/*" | 296 | accept="image/*" |
| 297 | multiple | 297 | multiple |
| 298 | @change="onFilePicked" | 298 | @change="onFilePicked" |
| 299 | /> | 299 | /> |
| 300 | <v-layout justify-center> | 300 | <v-layout justify-center> |
| 301 | <v-flex v-for="(file,index) in files" :key="index" v-if="files"> | 301 | <v-flex v-for="(file,index) in files" :key="index" v-if="files"> |
| 302 | <img :src="file" height="100" width="100;" class="imgNews" /> | 302 | <img :src="file" height="100" width="100;" class="imgNews" /> |
| 303 | </v-flex> | 303 | </v-flex> |
| 304 | </v-layout> | 304 | </v-layout> |
| 305 | <img src="/static/icon/user.png" v-if="files ==''" height="80" width="80" /> | 305 | <img src="/static/icon/user.png" v-if="files ==''" height="80" width="80" /> |
| 306 | </v-flex> | 306 | </v-flex> |
| 307 | </v-layout> | 307 | </v-layout> |
| 308 | <v-flex xs12> | 308 | <v-flex xs12> |
| 309 | <v-layout> | 309 | <v-layout> |
| 310 | <v-flex xs4 sm4 class="pt-4 subheading"> | 310 | <v-flex xs4 sm4 class="pt-4 subheading"> |
| 311 | <label class="right">Title:</label> | 311 | <label class="right">Title:</label> |
| 312 | </v-flex> | 312 | </v-flex> |
| 313 | <v-flex sm6 xs8 class="ml-3"> | 313 | <v-flex sm6 xs8 class="ml-3"> |
| 314 | <v-text-field | 314 | <v-text-field |
| 315 | v-model="addNews.title" | 315 | v-model="addNews.title" |
| 316 | placeholder="fill your Title" | 316 | placeholder="fill your Title" |
| 317 | name="name" | 317 | name="name" |
| 318 | type="text" | 318 | type="text" |
| 319 | :rules="titleRules" | 319 | :rules="titleRules" |
| 320 | required | 320 | required |
| 321 | ></v-text-field> | 321 | ></v-text-field> |
| 322 | </v-flex> | 322 | </v-flex> |
| 323 | </v-layout> | 323 | </v-layout> |
| 324 | </v-flex> | 324 | </v-flex> |
| 325 | <v-flex xs12> | 325 | <v-flex xs12> |
| 326 | <v-layout> | 326 | <v-layout> |
| 327 | <v-flex xs4 class="pt-4 subheading"> | 327 | <v-flex xs4 class="pt-4 subheading"> |
| 328 | <label class="right">Description:</label> | 328 | <label class="right">Description:</label> |
| 329 | </v-flex> | 329 | </v-flex> |
| 330 | <v-flex sm6 xs8 class="ml-3"> | 330 | <v-flex sm6 xs8 class="ml-3"> |
| 331 | <v-text-field | 331 | <v-text-field |
| 332 | placeholder="fill your Description" | 332 | placeholder="fill your Description" |
| 333 | :rules="descriptionRules" | 333 | :rules="descriptionRules" |
| 334 | v-model="addNews.description" | 334 | v-model="addNews.description" |
| 335 | type="text" | 335 | type="text" |
| 336 | name="email" | 336 | name="email" |
| 337 | required | 337 | required |
| 338 | ></v-text-field> | 338 | ></v-text-field> |
| 339 | </v-flex> | 339 | </v-flex> |
| 340 | </v-layout> | 340 | </v-layout> |
| 341 | </v-flex> | 341 | </v-flex> |
| 342 | <v-flex xs12> | 342 | <v-flex xs12> |
| 343 | <v-layout> | 343 | <v-layout> |
| 344 | <v-flex xs4 class="pt-4 subheading"> | 344 | <v-flex xs4 class="pt-4 subheading"> |
| 345 | <label class="right hidden-xs-only hidden-sm-only">Uplaod Image:</label> | 345 | <label class="right hidden-xs-only hidden-sm-only">Uplaod Image:</label> |
| 346 | <label class="right hidden-lg-only hidden-md-only hidden-xl-only">Uplaod :</label> | 346 | <label class="right hidden-lg-only hidden-md-only hidden-xl-only">Uplaod :</label> |
| 347 | </v-flex> | 347 | </v-flex> |
| 348 | <v-flex xs8 sm6 class="ml-3"> | 348 | <v-flex xs8 sm6 class="ml-3"> |
| 349 | <v-text-field | 349 | <v-text-field |
| 350 | label="Select Image" | 350 | label="Select Image" |
| 351 | @click="pickFile" | 351 | @click="pickFile" |
| 352 | v-model="imageName" | 352 | v-model="imageName" |
| 353 | append-icon="attach_file" | 353 | append-icon="attach_file" |
| 354 | multiple | 354 | multiple |
| 355 | ></v-text-field> | 355 | ></v-text-field> |
| 356 | </v-flex> | 356 | </v-flex> |
| 357 | </v-layout> | 357 | </v-layout> |
| 358 | </v-flex> | 358 | </v-flex> |
| 359 | <v-layout> | 359 | <v-layout> |
| 360 | <v-flex xs11> | 360 | <v-flex xs11> |
| 361 | <v-layout> | 361 | <v-layout> |
| 362 | <v-spacer></v-spacer> | 362 | <v-spacer></v-spacer> |
| 363 | <v-btn @click="clear" round class="clear-button" dark>clear</v-btn> | 363 | <v-btn @click="clear" round class="clear-button" dark>clear</v-btn> |
| 364 | <v-btn @click="submit" round dark :loading="loading" class="add-button">Add</v-btn> | 364 | <v-btn @click="submit" round dark :loading="loading" class="add-button">Add</v-btn> |
| 365 | </v-layout> | 365 | </v-layout> |
| 366 | </v-flex> | 366 | </v-flex> |
| 367 | </v-layout> | 367 | </v-layout> |
| 368 | </v-container> | 368 | </v-container> |
| 369 | </v-form> | 369 | </v-form> |
| 370 | </v-card> | 370 | </v-card> |
| 371 | </v-dialog> | 371 | </v-dialog> |
| 372 | <div class="loader" v-if="showLoader"> | 372 | <div class="loader" v-if="showLoader"> |
| 373 | <v-progress-circular indeterminate color="white"></v-progress-circular> | 373 | <v-progress-circular indeterminate color="white"></v-progress-circular> |
| 374 | </div> | 374 | </div> |
| 375 | </v-container> | 375 | </v-container> |
| 376 | </template> | 376 | </template> |
| 377 | 377 | ||
| 378 | <script> | 378 | <script> |
| 379 | import http from "@/Services/http.js"; | 379 | import http from "@/Services/http.js"; |
| 380 | 380 | ||
| 381 | export default { | 381 | export default { |
| 382 | data: () => ({ | 382 | data: () => ({ |
| 383 | snackbar: false, | 383 | snackbar: false, |
| 384 | y: "top", | 384 | y: "top", |
| 385 | x: "right", | 385 | x: "right", |
| 386 | mode: "", | 386 | mode: "", |
| 387 | timeout: 5000, | 387 | timeout: 5000, |
| 388 | color: "", | 388 | color: "", |
| 389 | text: "", | 389 | text: "", |
| 390 | loading: false, | 390 | loading: false, |
| 391 | date: null, | 391 | date: null, |
| 392 | search: "", | 392 | search: "", |
| 393 | show: true, | 393 | show: true, |
| 394 | showSearch: false, | 394 | showSearch: false, |
| 395 | showLoader: false, | 395 | showLoader: false, |
| 396 | editNewsDialog: false, | 396 | editNewsDialog: false, |
| 397 | addNewsDialog: false, | 397 | addNewsDialog: false, |
| 398 | dialog1: false, | 398 | dialog1: false, |
| 399 | valid: true, | 399 | valid: true, |
| 400 | addclass: [], | 400 | addclass: [], |
| 401 | addSection: [], | 401 | addSection: [], |
| 402 | pagination: { | 402 | pagination: { |
| 403 | rowsPerPage: 10 | 403 | rowsPerPage: 10 |
| 404 | }, | 404 | }, |
| 405 | imageName: "", | 405 | imageName: "", |
| 406 | imageUrl: "", | 406 | imageUrl: "", |
| 407 | imageFile: "", | 407 | imageFile: "", |
| 408 | image: [], | 408 | image: [], |
| 409 | upload: "", | 409 | upload: "", |
| 410 | files: [], | 410 | files: [], |
| 411 | titleRules: [v => !!v || " Tilte is required"], | 411 | titleRules: [v => !!v || " Tilte is required"], |
| 412 | descriptionRules: [v => !!v || " Description is required"], | 412 | descriptionRules: [v => !!v || " Description is required"], |
| 413 | headers: [ | 413 | headers: [ |
| 414 | { | 414 | { |
| 415 | align: "justify-center", | 415 | align: "justify-center", |
| 416 | text: "No", | 416 | text: "No", |
| 417 | sortable: false, | 417 | sortable: false, |
| 418 | value: "No" | 418 | value: "No" |
| 419 | }, | 419 | }, |
| 420 | { text: "Image", vaue: "image", sortable: false, align: "center" }, | 420 | { text: "Image", vaue: "image", sortable: false, align: "center" }, |
| 421 | { text: "Title", value: "title", sortable: false, align: "center" }, | 421 | { text: "Title", value: "title", sortable: false, align: "center" }, |
| 422 | { | 422 | { |
| 423 | text: "Description", | 423 | text: "Description", |
| 424 | value: "description", | 424 | value: "description", |
| 425 | sortable: false, | 425 | sortable: false, |
| 426 | align: "center" | 426 | align: "center" |
| 427 | }, | 427 | }, |
| 428 | { text: "Action", value: "", sortable: false, align: "center" } | 428 | { text: "Action", value: "", sortable: false, align: "center" } |
| 429 | ], | 429 | ], |
| 430 | desserts: [], | 430 | desserts: [], |
| 431 | editedIndex: -1, | 431 | editedIndex: -1, |
| 432 | addNews: { | 432 | addNews: { |
| 433 | title: "", | 433 | title: "", |
| 434 | description: "" | 434 | description: "" |
| 435 | }, | 435 | }, |
| 436 | editedItem: { | 436 | editedItem: { |
| 437 | title: "", | 437 | title: "", |
| 438 | description: "" | 438 | description: "" |
| 439 | }, | 439 | }, |
| 440 | defaultItem: { | 440 | defaultItem: { |
| 441 | title: "", | 441 | title: "", |
| 442 | description: "" | 442 | description: "" |
| 443 | } | 443 | } |
| 444 | }), | 444 | }), |
| 445 | methods: { | 445 | methods: { |
| 446 | getSections(_id) { | 446 | getSections(_id) { |
| 447 | var token = this.$store.state.token; | 447 | var token = this.$store.state.token; |
| 448 | http() | 448 | http() |
| 449 | .get( | 449 | .get( |
| 450 | "/getSectionsList", | 450 | "/getSectionsList", |
| 451 | { params: { classId: _id } }, | 451 | { params: { classId: _id } }, |
| 452 | { | 452 | { |
| 453 | headers: { Authorization: "Bearer " + token } | 453 | headers: { Authorization: "Bearer " + token } |
| 454 | } | 454 | } |
| 455 | ) | 455 | ) |
| 456 | .then(response => { | 456 | .then(response => { |
| 457 | this.addSection = response.data.data; | 457 | this.addSection = response.data.data; |
| 458 | }) | 458 | }) |
| 459 | .catch(err => { | 459 | .catch(err => { |
| 460 | console.log("err====>", err); | 460 | console.log("err====>", err); |
| 461 | }); | 461 | }); |
| 462 | }, | 462 | }, |
| 463 | pickFile() { | 463 | pickFile() { |
| 464 | this.$refs.image.click(); | 464 | this.$refs.image.click(); |
| 465 | }, | 465 | }, |
| 466 | onFilePicked(e) { | 466 | onFilePicked(e) { |
| 467 | // console.log(e) | 467 | // console.log(e) |
| 468 | const files = e.target.files; | 468 | const files = e.target.files; |
| 469 | /** fetch Image Name **/ | 469 | /** fetch Image Name **/ |
| 470 | if (files[0] !== undefined) { | 470 | if (files[0] !== undefined) { |
| 471 | this.imageName = files[0].name; | 471 | this.imageName = files[0].name; |
| 472 | if (this.imageName.lastIndexOf(".") <= 0) { | 472 | if (this.imageName.lastIndexOf(".") <= 0) { |
| 473 | return; | 473 | return; |
| 474 | } | 474 | } |
| 475 | this.files = []; | 475 | this.files = []; |
| 476 | // console.log("files", this.files); | 476 | // console.log("files", this.files); |
| 477 | /** Select many image and showing many image add to news card **/ | 477 | /** Select many image and showing many image add to news card **/ |
| 478 | const test = Array.from(files).forEach((file, idx) => { | 478 | const test = Array.from(files).forEach((file, idx) => { |
| 479 | const fr = new FileReader(); | 479 | const fr = new FileReader(); |
| 480 | const getResult = new Promise(resolve => { | 480 | const getResult = new Promise(resolve => { |
| 481 | fr.onload = e => { | 481 | fr.onload = e => { |
| 482 | this.files.push( | 482 | this.files.push( |
| 483 | // id: idx, | 483 | // id: idx, |
| 484 | e.target.result | 484 | e.target.result |
| 485 | ); | 485 | ); |
| 486 | }; | 486 | }; |
| 487 | }); | 487 | }); |
| 488 | fr.readAsDataURL(file); | 488 | fr.readAsDataURL(file); |
| 489 | return getResult.then(file => { | 489 | return getResult.then(file => { |
| 490 | return file; | 490 | return file; |
| 491 | }); | 491 | }); |
| 492 | }); | 492 | }); |
| 493 | const fr = new FileReader(); | 493 | const fr = new FileReader(); |
| 494 | fr.readAsDataURL(files[0]); | 494 | fr.readAsDataURL(files[0]); |
| 495 | fr.addEventListener("load", () => { | 495 | fr.addEventListener("load", () => { |
| 496 | this.imageFile = files; // this is an image file that can be sent to server... | 496 | this.imageFile = files; // this is an image file that can be sent to server... |
| 497 | // console.log("uploadImage=======>", this.imageFile ); | 497 | // console.log("uploadImage=======>", this.imageFile ); |
| 498 | }); | 498 | }); |
| 499 | } else { | 499 | } else { |
| 500 | this.imageName = ""; | 500 | this.imageName = ""; |
| 501 | this.imageFile = ""; | 501 | this.imageFile = ""; |
| 502 | this.imageUrl = ""; | 502 | this.imageUrl = ""; |
| 503 | } | 503 | } |
| 504 | }, | 504 | }, |
| 505 | getNewsList() { | 505 | getNewsList() { |
| 506 | this.showLoader = true; | 506 | this.showLoader = true; |
| 507 | var token = this.$store.state.token; | 507 | var token = this.$store.state.token; |
| 508 | http() | 508 | http() |
| 509 | .get("/getNewsList", { | 509 | .get("/getNewsList", { |
| 510 | headers: { Authorization: "Bearer " + token } | 510 | headers: { Authorization: "Bearer " + token } |
| 511 | }) | 511 | }) |
| 512 | .then(response => { | 512 | .then(response => { |
| 513 | this.desserts = response.data.data; | 513 | this.desserts = response.data.data; |
| 514 | this.showLoader = false; | 514 | this.showLoader = false; |
| 515 | }) | 515 | }) |
| 516 | .catch(error => { | 516 | .catch(error => { |
| 517 | this.showLoader = false; | 517 | this.showLoader = false; |
| 518 | if (error.response.status === 401) { | 518 | if (error.response.status === 401) { |
| 519 | this.$router.replace({ path: "/" }); | 519 | this.$router.replace({ path: "/" }); |
| 520 | this.$store.dispatch("setToken", null); | 520 | this.$store.dispatch("setToken", null); |
| 521 | this.$store.dispatch("Id", null); | 521 | this.$store.dispatch("Id", null); |
| 522 | } | 522 | } |
| 523 | }); | 523 | }); |
| 524 | }, | 524 | }, |
| 525 | editItem(item) { | 525 | editItem(item) { |
| 526 | this.files = []; | 526 | this.files = []; |
| 527 | this.editedIndex = this.desserts.indexOf(item); | 527 | this.editedIndex = this.desserts.indexOf(item); |
| 528 | this.editedItem = Object.assign({}, item); | 528 | this.editedItem = Object.assign({}, item); |
| 529 | this.editNewsDialog = true; | 529 | this.editNewsDialog = true; |
| 530 | }, | 530 | }, |
| 531 | profile(item) { | 531 | profile(item) { |
| 532 | this.editedIndex = this.desserts.indexOf(item); | 532 | this.editedIndex = this.desserts.indexOf(item); |
| 533 | this.editedItem = Object.assign({}, item); | 533 | this.editedItem = Object.assign({}, item); |
| 534 | this.dialog1 = true; | 534 | this.dialog1 = true; |
| 535 | }, | 535 | }, |
| 536 | deleteItem(item) { | 536 | deleteItem(item) { |
| 537 | let deleteNews = { | 537 | let deleteNews = { |
| 538 | newsId: item._id | 538 | newsId: item._id |
| 539 | }; | 539 | }; |
| 540 | http() | 540 | http() |
| 541 | .delete( | 541 | .delete( |
| 542 | "/deleteNews", | 542 | "/deleteNews", |
| 543 | confirm("Are you sure you want to delete this?") && { | 543 | confirm("Are you sure you want to delete this?") && { |
| 544 | params: deleteNews | 544 | params: deleteNews |
| 545 | } | 545 | } |
| 546 | ) | 546 | ) |
| 547 | .then(response => { | 547 | .then(response => { |
| 548 | this.snackbar = true; | 548 | this.snackbar = true; |
| 549 | this.text = response.data.message; | 549 | this.text = response.data.message; |
| 550 | this.color = "green"; | 550 | this.color = "green"; |
| 551 | this.getNewsList(); | 551 | this.getNewsList(); |
| 552 | }) | 552 | }) |
| 553 | .catch(error => { | 553 | .catch(error => { |
| 554 | this.snackbar = true; | 554 | this.snackbar = true; |
| 555 | this.color = "error"; | 555 | this.color = "error"; |
| 556 | this.text = error.response.data.message; | 556 | this.text = error.response.data.message; |
| 557 | }); | 557 | }); |
| 558 | }, | 558 | }, |
| 559 | deleteImage(imageId, newsId) { | 559 | deleteImage(imageId, newsId) { |
| 560 | let deleteImages = { | 560 | let deleteImages = { |
| 561 | newsId: newsId, | 561 | newsId: newsId, |
| 562 | imageId: imageId | 562 | imageId: imageId |
| 563 | }; | 563 | }; |
| 564 | http() | 564 | http() |
| 565 | .put("/deleteImages", deleteImages) | 565 | .put("/deleteImages", deleteImages) |
| 566 | .then(response => { | 566 | .then(response => { |
| 567 | this.snackbar = true; | 567 | this.snackbar = true; |
| 568 | this.text = response.data.message; | 568 | this.text = response.data.message; |
| 569 | this.color = "green"; | 569 | this.color = "green"; |
| 570 | this.close(); | 570 | this.close(); |
| 571 | }) | 571 | }) |
| 572 | .catch(error => { | 572 | .catch(error => { |
| 573 | this.snackbar = true; | 573 | this.snackbar = true; |
| 574 | this.color = "error"; | 574 | this.color = "error"; |
| 575 | this.text = error.response.data.message; | 575 | this.text = error.response.data.message; |
| 576 | }); | 576 | }); |
| 577 | }, | 577 | }, |
| 578 | close() { | 578 | close() { |
| 579 | this.dialog = false; | 579 | this.dialog = false; |
| 580 | }, | 580 | }, |
| 581 | close1() { | 581 | close1() { |
| 582 | this.dialog1 = false; | 582 | this.dialog1 = false; |
| 583 | }, | 583 | }, |
| 584 | submit() { | 584 | submit() { |
| 585 | if (this.$refs.form.validate()) { | 585 | if (this.$refs.form.validate()) { |
| 586 | let newsData = { | 586 | let newsData = { |
| 587 | title: this.addNews.title, | 587 | title: this.addNews.title, |
| 588 | description: this.addNews.description | 588 | description: this.addNews.description |
| 589 | }; | 589 | }; |
| 590 | if (this.files) { | 590 | if (this.files) { |
| 591 | var ary = []; | 591 | var ary = []; |
| 592 | var imageData = []; | 592 | var imageData = []; |
| 593 | ary = this.files; | 593 | ary = this.files; |
| 594 | for (let i = 0; i < ary.length; i++) { | 594 | for (let i = 0; i < ary.length; i++) { |
| 595 | const [baseUrl, imageUrl] = ary[i].split(/,/); | 595 | const [baseUrl, imageUrl] = ary[i].split(/,/); |
| 596 | imageData.push(imageUrl); | 596 | imageData.push(imageUrl); |
| 597 | newsData.upload = imageData; | 597 | newsData.upload = imageData; |
| 598 | } | 598 | } |
| 599 | } | 599 | } |
| 600 | this.loading = true; | 600 | this.loading = true; |
| 601 | http() | 601 | http() |
| 602 | .post("/createNews", newsData) | 602 | .post("/createNews", newsData) |
| 603 | .then(response => { | 603 | .then(response => { |
| 604 | this.files = []; | 604 | this.files = []; |
| 605 | this.snackbar = true; | 605 | this.snackbar = true; |
| 606 | this.text = response.data.message; | 606 | this.text = response.data.message; |
| 607 | this.getNewsList(); | 607 | this.getNewsList(); |
| 608 | this.color = "green"; | 608 | this.color = "green"; |
| 609 | this.addNewsDialog = false; | 609 | this.addNewsDialog = false; |
| 610 | this.loading = false; | 610 | this.loading = false; |
| 611 | this.clear(); | 611 | this.clear(); |
| 612 | }) | 612 | }) |
| 613 | .catch(error => { | 613 | .catch(error => { |
| 614 | this.snackbar = true; | 614 | this.snackbar = true; |
| 615 | this.text = error.response.data.message; | 615 | this.text = error.response.data.message; |
| 616 | this.color = "error"; | 616 | this.color = "error"; |
| 617 | }); | 617 | }); |
| 618 | } | 618 | } |
| 619 | }, | 619 | }, |
| 620 | clear() { | 620 | clear() { |
| 621 | this.$refs.form.reset(); | 621 | this.$refs.form.reset(); |
| 622 | this.files = []; | 622 | this.files = []; |
| 623 | }, | 623 | }, |
| 624 | save() { | 624 | save() { |
| 625 | let editNews = { | 625 | let editNews = { |
| 626 | title: this.editedItem.title, | 626 | title: this.editedItem.title, |
| 627 | description: this.editedItem.description, | 627 | description: this.editedItem.description, |
| 628 | newsId: this.editedItem._id | 628 | newsId: this.editedItem._id |
| 629 | }; | 629 | }; |
| 630 | if (this.files) { | 630 | if (this.files) { |
| 631 | var ary = []; | 631 | var ary = []; |
| 632 | var imageData = []; | 632 | var imageData = []; |
| 633 | ary = this.files; | 633 | ary = this.files; |
| 634 | for (let i = 0; i < ary.length; i++) { | 634 | for (let i = 0; i < ary.length; i++) { |
| 635 | const [baseUrl, imageUrl] = ary[i].split(/,/); | 635 | const [baseUrl, imageUrl] = ary[i].split(/,/); |
| 636 | imageData.push(imageUrl); | 636 | imageData.push(imageUrl); |
| 637 | editNews.upload = imageData; | 637 | editNews.upload = imageData; |
| 638 | } | 638 | } |
| 639 | } | 639 | } |
| 640 | http() | 640 | http() |
| 641 | .put("/updateNews", editNews) | 641 | .put("/updateNews", editNews) |
| 642 | .then(response => { | 642 | .then(response => { |
| 643 | this.snackbar = true; | 643 | this.snackbar = true; |
| 644 | this.text = response.data.message; | 644 | this.text = response.data.message; |
| 645 | this.color = "green"; | 645 | this.color = "green"; |
| 646 | this.getNewsList(); | 646 | this.getNewsList(); |
| 647 | this.close(); | 647 | this.close(); |
| 648 | }) | 648 | }) |
| 649 | .catch(error => { | 649 | .catch(error => { |
| 650 | this.snackbar = true; | 650 | this.snackbar = true; |
| 651 | this.color = "error"; | 651 | this.color = "error"; |
| 652 | this.text = error.response.data.message; | 652 | this.text = error.response.data.message; |
| 653 | }); | 653 | }); |
| 654 | }, | 654 | }, |
| 655 | displaySearch() { | 655 | displaySearch() { |
| 656 | (this.show = false), (this.showSearch = true); | 656 | (this.show = false), (this.showSearch = true); |
| 657 | }, | 657 | }, |
| 658 | closeSearch() { | 658 | closeSearch() { |
| 659 | this.showSearch = false; | 659 | this.showSearch = false; |
| 660 | this.show = true; | 660 | this.show = true; |
| 661 | this.search = ""; | 661 | this.search = ""; |
| 662 | } | 662 | } |
| 663 | }, | 663 | }, |
| 664 | mounted() { | 664 | mounted() { |
| 665 | this.getNewsList(); | 665 | this.getNewsList(); |
| 666 | this.editItem; | 666 | this.editItem; |
| 667 | } | 667 | } |
| 668 | }; | 668 | }; |
| 669 | </script> | 669 | </script> |
src/pages/NoticeBoard/noticeBoard.vue
| 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 | </v-flex> | 87 | </v-flex> |
| 88 | </v-layout> | 88 | </v-layout> |
| 89 | </v-flex> | 89 | </v-flex> |
| 90 | <v-flex xs12> | 90 | <v-flex xs12> |
| 91 | <v-card-actions> | 91 | <v-card-actions> |
| 92 | <v-spacer></v-spacer> | 92 | <v-spacer></v-spacer> |
| 93 | <v-btn round dark @click="save" class="add-button">Save</v-btn> | 93 | <v-btn round dark @click="save" class="add-button">Save</v-btn> |
| 94 | </v-card-actions> | 94 | </v-card-actions> |
| 95 | </v-flex> | 95 | </v-flex> |
| 96 | </v-layout> | 96 | </v-layout> |
| 97 | </v-card-text> | 97 | </v-card-text> |
| 98 | </v-card> | 98 | </v-card> |
| 99 | </v-dialog> | 99 | </v-dialog> |
| 100 | 100 | ||
| 101 | <!-- ****** VIEW PROFIL NOTICE BOARD ****** --> | 101 | <!-- ****** VIEW PROFIL NOTICE BOARD ****** --> |
| 102 | 102 | ||
| 103 | <v-dialog v-model="viewNoticeBoardDialog" max-width="600px" scrollable> | 103 | <v-dialog v-model="viewNoticeBoardDialog" max-width="600px" scrollable> |
| 104 | <v-card flat class="card-style pa-3" dark> | 104 | <v-card flat class="card-style pa-3" dark> |
| 105 | <v-layout> | 105 | <v-layout> |
| 106 | <v-flex xs12> | 106 | <v-flex xs12> |
| 107 | <label class="title text-xs-center">View Notice Board</label> | 107 | <label class="title text-xs-center">View Notice Board</label> |
| 108 | <v-icon size="24" class="right" @click="viewNoticeBoardDialog = false">cancel</v-icon> | 108 | <v-icon size="24" class="right" @click="viewNoticeBoardDialog = false">cancel</v-icon> |
| 109 | </v-flex> | 109 | </v-flex> |
| 110 | </v-layout> | 110 | </v-layout> |
| 111 | <v-card-text> | 111 | <v-card-text> |
| 112 | <v-layout> | 112 | <v-layout> |
| 113 | <v-flex align-center justify-center layout text-xs-center> | 113 | <v-flex align-center justify-center layout text-xs-center> |
| 114 | <img src="/static/icon/user.png" v-if="!editedItem.eventImageUrl" width="80" /> | 114 | <img src="/static/icon/user.png" v-if="!editedItem.eventImageUrl" width="80" /> |
| 115 | <img | 115 | <img |
| 116 | :src="editedItem.eventImageUrl" | 116 | :src="editedItem.eventImageUrl" |
| 117 | v-else-if="editedItem.eventImageUrl" | 117 | v-else-if="editedItem.eventImageUrl" |
| 118 | class="img" | 118 | class="img" |
| 119 | width="200" | 119 | width="200" |
| 120 | /> | 120 | /> |
| 121 | </v-flex> | 121 | </v-flex> |
| 122 | </v-layout> | 122 | </v-layout> |
| 123 | <v-container grid-list-md> | 123 | <v-container grid-list-md> |
| 124 | <v-layout wrap> | 124 | <v-layout wrap> |
| 125 | <v-flex> | 125 | <v-flex> |
| 126 | <v-layout> | 126 | <v-layout> |
| 127 | <v-flex xs5 sm6> | 127 | <v-flex xs5 sm6> |
| 128 | <h5 class="right my-1"> | 128 | <h5 class="right my-1"> |
| 129 | <b>Title:</b> | 129 | <b>Title:</b> |
| 130 | </h5> | 130 | </h5> |
| 131 | </v-flex> | 131 | </v-flex> |
| 132 | <v-flex sm6 xs8> | 132 | <v-flex sm6 xs8> |
| 133 | <h5 class="my-1">{{ editedItem.title }}</h5> | 133 | <h5 class="my-1">{{ editedItem.title }}</h5> |
| 134 | </v-flex> | 134 | </v-flex> |
| 135 | </v-layout> | 135 | </v-layout> |
| 136 | <v-layout> | 136 | <v-layout> |
| 137 | <v-flex xs5 sm6> | 137 | <v-flex xs5 sm6> |
| 138 | <h5 class="right my-1"> | 138 | <h5 class="right my-1"> |
| 139 | <b>Description:</b> | 139 | <b>Description:</b> |
| 140 | </h5> | 140 | </h5> |
| 141 | </v-flex> | 141 | </v-flex> |
| 142 | <v-flex sm6 xs8> | 142 | <v-flex sm6 xs8> |
| 143 | <h5 class="my-1">{{ editedItem.description }}</h5> | 143 | <h5 class="my-1">{{ editedItem.description }}</h5> |
| 144 | </v-flex> | 144 | </v-flex> |
| 145 | </v-layout> | 145 | </v-layout> |
| 146 | </v-flex> | 146 | </v-flex> |
| 147 | </v-layout> | 147 | </v-layout> |
| 148 | </v-container> | 148 | </v-container> |
| 149 | </v-card-text> | 149 | </v-card-text> |
| 150 | </v-card> | 150 | </v-card> |
| 151 | </v-dialog> | 151 | </v-dialog> |
| 152 | <!-- ****** EXISTING Notice Board TABLE ****** --> | 152 | <!-- ****** EXISTING Notice Board TABLE ****** --> |
| 153 | <v-toolbar color="transparent" flat> | 153 | <v-toolbar color="transparent" flat> |
| 154 | <v-btn | 154 | <v-btn |
| 155 | fab | 155 | fab |
| 156 | dark | 156 | dark |
| 157 | class="open-dialog-button hidden-xl-only hidden-md-only hidden-lg-only" | 157 | class="open-dialog-button hidden-xl-only hidden-md-only hidden-lg-only" |
| 158 | small | 158 | small |
| 159 | @click="addNoticeBoardDialog = true" | 159 | @click="addNoticeBoardDialog = true" |
| 160 | > | 160 | > |
| 161 | <v-icon dark>add</v-icon> | 161 | <v-icon dark>add</v-icon> |
| 162 | </v-btn> | 162 | </v-btn> |
| 163 | <v-btn | 163 | <v-btn |
| 164 | round | 164 | round |
| 165 | class="open-dialog-button hidden-sm-only hidden-xs-only" | 165 | class="open-dialog-button hidden-sm-only hidden-xs-only" |
| 166 | dark | 166 | dark |
| 167 | @click="addNoticeBoardDialog = true" | 167 | @click="addNoticeBoardDialog = true" |
| 168 | > | 168 | > |
| 169 | <v-icon class="white--text pr-1" size="20">add</v-icon>Add Notice Board | 169 | <v-icon class="white--text pr-1" size="20">add</v-icon>Add Notice Board |
| 170 | </v-btn> | 170 | </v-btn> |
| 171 | <v-spacer></v-spacer> | 171 | <v-spacer></v-spacer> |
| 172 | <v-card-title class="body-1" v-show="show"> | 172 | <v-card-title class="body-1" v-show="show"> |
| 173 | <v-btn icon large flat @click="displaySearch"> | 173 | <v-btn icon large flat @click="displaySearch"> |
| 174 | <v-avatar size="27"> | 174 | <v-avatar size="27"> |
| 175 | <img src="/static/icon/dashboard icons-49.png" alt="icon" /> | 175 | <img src="/static/icon/search.png" alt="icon" /> |
| 176 | </v-avatar> | 176 | </v-avatar> |
| 177 | </v-btn> | 177 | </v-btn> |
| 178 | </v-card-title> | 178 | </v-card-title> |
| 179 | <v-flex xs8 sm8 md3 lg2 v-show="showSearch"> | 179 | <v-flex xs8 sm8 md3 lg2 v-show="showSearch"> |
| 180 | <v-layout> | 180 | <v-layout> |
| 181 | <v-text-field v-model="search" label="Search" prepend-inner-icon="search" color="primary"></v-text-field> | 181 | <v-text-field v-model="search" label="Search" prepend-inner-icon="search" color="primary"></v-text-field> |
| 182 | <v-icon @click="closeSearch" color="error">close</v-icon> | 182 | <v-icon @click="closeSearch" color="error">close</v-icon> |
| 183 | </v-layout> | 183 | </v-layout> |
| 184 | </v-flex> | 184 | </v-flex> |
| 185 | </v-toolbar> | 185 | </v-toolbar> |
| 186 | <v-data-table | 186 | <v-data-table |
| 187 | :headers="headers" | 187 | :headers="headers" |
| 188 | :items="notices" | 188 | :items="notices" |
| 189 | :pagination.sync="pagination" | 189 | :pagination.sync="pagination" |
| 190 | :search="search" | 190 | :search="search" |
| 191 | > | 191 | > |
| 192 | <template slot="items" slot-scope="props"> | 192 | <template slot="items" slot-scope="props"> |
| 193 | <tr class="tr"> | 193 | <tr class="tr"> |
| 194 | <td class="td td-row">{{ props.index + 1}}</td> | 194 | <td class="td td-row">{{ props.index + 1}}</td> |
| 195 | <td class="td td-row text-xs-center"> | 195 | <td class="td td-row text-xs-center"> |
| 196 | <v-avatar size="40"> | 196 | <v-avatar size="40"> |
| 197 | <img :src="props.item.eventImageUrl" v-if="props.item.eventImageUrl" /> | 197 | <img :src="props.item.eventImageUrl" v-if="props.item.eventImageUrl" /> |
| 198 | <img src="/static/icon/user.png" v-else-if="!props.item.eventImageUrl" /> | 198 | <img src="/static/icon/user.png" v-else-if="!props.item.eventImageUrl" /> |
| 199 | </v-avatar> | 199 | </v-avatar> |
| 200 | </td> | 200 | </td> |
| 201 | <td class="text-xs-center td td-row">{{ props.item.title}}</td> | 201 | <td class="text-xs-center td td-row">{{ props.item.title}}</td> |
| 202 | <td class="text-xs-center td td-row"> | 202 | <td class="text-xs-center td td-row"> |
| 203 | <span> | 203 | <span> |
| 204 | <v-tooltip top> | 204 | <v-tooltip top> |
| 205 | <img | 205 | <img |
| 206 | slot="activator" | 206 | slot="activator" |
| 207 | style="cursor:pointer; width:25px; height:25px; " | 207 | style="cursor:pointer; width:25px; height:25px; " |
| 208 | class="mr-3" | 208 | class="mr-3" |
| 209 | @click="profile(props.item)" | 209 | @click="profile(props.item)" |
| 210 | src="/static/icon/dashboard icons-47.png" | 210 | src="/static/icon/view.png" |
| 211 | /> | 211 | /> |
| 212 | <span>View</span> | 212 | <span>View</span> |
| 213 | </v-tooltip> | 213 | </v-tooltip> |
| 214 | <v-tooltip top> | 214 | <v-tooltip top> |
| 215 | <img | 215 | <img |
| 216 | slot="activator" | 216 | slot="activator" |
| 217 | style="cursor:pointer; width:20px; height:18px; " | 217 | style="cursor:pointer; width:20px; height:18px; " |
| 218 | class="mr-3" | 218 | class="mr-3" |
| 219 | @click="editItem(props.item)" | 219 | @click="editItem(props.item)" |
| 220 | src="/static/icon/dashboard icons-50.png" | 220 | src="/static/icon/edit.png" |
| 221 | /> | 221 | /> |
| 222 | <span>Edit</span> | 222 | <span>Edit</span> |
| 223 | </v-tooltip> | 223 | </v-tooltip> |
| 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:20px; " | 227 | style="cursor:pointer; width:20px; height:20px; " |
| 228 | @click="deleteItem(props.item)" | 228 | @click="deleteItem(props.item)" |
| 229 | src="/static/icon/dashboard icons-51.png" | 229 | src="/static/icon/delete.png" |
| 230 | /> | 230 | /> |
| 231 | <span>Delete</span> | 231 | <span>Delete</span> |
| 232 | </v-tooltip> | 232 | </v-tooltip> |
| 233 | </span> | 233 | </span> |
| 234 | </td> | 234 | </td> |
| 235 | </tr> | 235 | </tr> |
| 236 | </template> | 236 | </template> |
| 237 | <v-alert | 237 | <v-alert |
| 238 | slot="no-results" | 238 | slot="no-results" |
| 239 | :value="true" | 239 | :value="true" |
| 240 | color="error" | 240 | color="error" |
| 241 | icon="warning" | 241 | icon="warning" |
| 242 | >Your search for "{{ search }}" found no results.</v-alert> | 242 | >Your search for "{{ search }}" found no results.</v-alert> |
| 243 | </v-data-table> | 243 | </v-data-table> |
| 244 | <!-- ****** ADD Notice Board ****** --> | 244 | <!-- ****** ADD Notice Board ****** --> |
| 245 | <v-dialog v-model="addNoticeBoardDialog" max-width="600px"> | 245 | <v-dialog v-model="addNoticeBoardDialog" max-width="600px"> |
| 246 | <v-card flat class="card-style pa-2" dark> | 246 | <v-card flat class="card-style pa-2" dark> |
| 247 | <v-layout> | 247 | <v-layout> |
| 248 | <v-flex xs12> | 248 | <v-flex xs12> |
| 249 | <label class="title text-xs-center">Add Notice Board</label> | 249 | <label class="title text-xs-center">Add Notice Board</label> |
| 250 | <v-icon size="24" class="right" @click="addNoticeBoardDialog = false">cancel</v-icon> | 250 | <v-icon size="24" class="right" @click="addNoticeBoardDialog = false">cancel</v-icon> |
| 251 | </v-flex> | 251 | </v-flex> |
| 252 | </v-layout> | 252 | </v-layout> |
| 253 | <v-container fluid fill-height> | 253 | <v-container fluid fill-height> |
| 254 | <v-layout align-center> | 254 | <v-layout align-center> |
| 255 | <v-flex xs12> | 255 | <v-flex xs12> |
| 256 | <v-form ref="form" v-model="valid" lazy-validation> | 256 | <v-form ref="form" v-model="valid" lazy-validation> |
| 257 | <v-layout> | 257 | <v-layout> |
| 258 | <v-flex xs12 class="text-xs-center text-sm-center text-md-center text-lg-center"> | 258 | <v-flex xs12 class="text-xs-center text-sm-center text-md-center text-lg-center"> |
| 259 | <v-avatar size="80px" v-if="!imageUrl"> | 259 | <v-avatar size="80px" v-if="!imageUrl"> |
| 260 | <img src="/static/icon/user.png" /> | 260 | <img src="/static/icon/user.png" /> |
| 261 | </v-avatar> | 261 | </v-avatar> |
| 262 | <input | 262 | <input |
| 263 | type="file" | 263 | type="file" |
| 264 | style="display: none" | 264 | style="display: none" |
| 265 | ref="image" | 265 | ref="image" |
| 266 | accept="image/*" | 266 | accept="image/*" |
| 267 | @change="onFilePicked" | 267 | @change="onFilePicked" |
| 268 | /> | 268 | /> |
| 269 | 269 | ||
| 270 | <v-avatar size="150px" v-if="imageUrl"> | 270 | <v-avatar size="150px" v-if="imageUrl"> |
| 271 | <img :src="imageUrl" height="150" /> | 271 | <img :src="imageUrl" height="150" /> |
| 272 | </v-avatar> | 272 | </v-avatar> |
| 273 | </v-flex> | 273 | </v-flex> |
| 274 | </v-layout> | 274 | </v-layout> |
| 275 | <v-layout> | 275 | <v-layout> |
| 276 | <v-flex xs4 class="pt-4 subheading"> | 276 | <v-flex xs4 class="pt-4 subheading"> |
| 277 | <label class="right">Title:</label> | 277 | <label class="right">Title:</label> |
| 278 | </v-flex> | 278 | </v-flex> |
| 279 | <v-flex xs7 class="ml-3"> | 279 | <v-flex xs7 class="ml-3"> |
| 280 | <v-text-field | 280 | <v-text-field |
| 281 | v-model="addNoticeBoard.title" | 281 | v-model="addNoticeBoard.title" |
| 282 | placeholder="fill your Title" | 282 | placeholder="fill your Title" |
| 283 | name="name" | 283 | name="name" |
| 284 | type="text" | 284 | type="text" |
| 285 | :rules="titleRules" | 285 | :rules="titleRules" |
| 286 | required | 286 | required |
| 287 | ></v-text-field> | 287 | ></v-text-field> |
| 288 | </v-flex> | 288 | </v-flex> |
| 289 | </v-layout> | 289 | </v-layout> |
| 290 | <v-layout> | 290 | <v-layout> |
| 291 | <v-flex xs4 class="pt-4 subheading"> | 291 | <v-flex xs4 class="pt-4 subheading"> |
| 292 | <label class="right">Description:</label> | 292 | <label class="right">Description:</label> |
| 293 | </v-flex> | 293 | </v-flex> |
| 294 | <v-flex xs7 class="ml-3"> | 294 | <v-flex xs7 class="ml-3"> |
| 295 | <v-text-field | 295 | <v-text-field |
| 296 | v-model="addNoticeBoard.description" | 296 | v-model="addNoticeBoard.description" |
| 297 | placeholder="fill your Description" | 297 | placeholder="fill your Description" |
| 298 | name="name" | 298 | name="name" |
| 299 | type="text" | 299 | type="text" |
| 300 | :rules="descriptionRules" | 300 | :rules="descriptionRules" |
| 301 | required | 301 | required |
| 302 | ></v-text-field> | 302 | ></v-text-field> |
| 303 | </v-flex> | 303 | </v-flex> |
| 304 | </v-layout> | 304 | </v-layout> |
| 305 | <v-layout> | 305 | <v-layout> |
| 306 | <v-flex xs4 class="pt-4 subheading"> | 306 | <v-flex xs4 class="pt-4 subheading"> |
| 307 | <label class="right hidden-xs-only hidden-sm-only">Uplaod Image:</label> | 307 | <label class="right hidden-xs-only hidden-sm-only">Uplaod Image:</label> |
| 308 | <label class="right hidden-lg-only hidden-md-only hidden-xl-only">Uplaod :</label> | 308 | <label class="right hidden-lg-only hidden-md-only hidden-xl-only">Uplaod :</label> |
| 309 | </v-flex> | 309 | </v-flex> |
| 310 | <v-flex xs7 class="ml-3"> | 310 | <v-flex xs7 class="ml-3"> |
| 311 | <v-text-field | 311 | <v-text-field |
| 312 | label="Select Image" | 312 | label="Select Image" |
| 313 | @click="pickFile" | 313 | @click="pickFile" |
| 314 | v-model="imageName" | 314 | v-model="imageName" |
| 315 | append-icon="attach_file" | 315 | append-icon="attach_file" |
| 316 | ></v-text-field> | 316 | ></v-text-field> |
| 317 | </v-flex> | 317 | </v-flex> |
| 318 | </v-layout> | 318 | </v-layout> |
| 319 | <v-layout> | 319 | <v-layout> |
| 320 | <v-flex xs12> | 320 | <v-flex xs12> |
| 321 | <v-card-actions> | 321 | <v-card-actions> |
| 322 | <v-spacer></v-spacer> | 322 | <v-spacer></v-spacer> |
| 323 | <v-btn @click="clear" round dark class="clear-button">clear</v-btn> | 323 | <v-btn @click="clear" round dark class="clear-button">clear</v-btn> |
| 324 | <v-btn @click="submit" round dark :loading="loading" class="add-button">Add</v-btn> | 324 | <v-btn @click="submit" round dark :loading="loading" class="add-button">Add</v-btn> |
| 325 | </v-card-actions> | 325 | </v-card-actions> |
| 326 | </v-flex> | 326 | </v-flex> |
| 327 | </v-layout> | 327 | </v-layout> |
| 328 | </v-form> | 328 | </v-form> |
| 329 | </v-flex> | 329 | </v-flex> |
| 330 | </v-layout> | 330 | </v-layout> |
| 331 | </v-container> | 331 | </v-container> |
| 332 | </v-card> | 332 | </v-card> |
| 333 | </v-dialog> | 333 | </v-dialog> |
| 334 | <v-snackbar | 334 | <v-snackbar |
| 335 | :timeout="timeout" | 335 | :timeout="timeout" |
| 336 | :top="y === 'top'" | 336 | :top="y === 'top'" |
| 337 | :right="x === 'right'" | 337 | :right="x === 'right'" |
| 338 | :vertical="mode === 'vertical'" | 338 | :vertical="mode === 'vertical'" |
| 339 | v-model="snackbar" | 339 | v-model="snackbar" |
| 340 | :color="color" | 340 | :color="color" |
| 341 | >{{ text }}</v-snackbar> | 341 | >{{ text }}</v-snackbar> |
| 342 | <div class="loader" v-if="showLoader"> | 342 | <div class="loader" v-if="showLoader"> |
| 343 | <v-progress-circular indeterminate color="white"></v-progress-circular> | 343 | <v-progress-circular indeterminate color="white"></v-progress-circular> |
| 344 | </div> | 344 | </div> |
| 345 | </v-container> | 345 | </v-container> |
| 346 | </template> | 346 | </template> |
| 347 | 347 | ||
| 348 | <script> | 348 | <script> |
| 349 | import http from "@/Services/http.js"; | 349 | import http from "@/Services/http.js"; |
| 350 | 350 | ||
| 351 | export default { | 351 | export default { |
| 352 | data: () => ({ | 352 | data: () => ({ |
| 353 | snackbar: false, | 353 | snackbar: false, |
| 354 | y: "top", | 354 | y: "top", |
| 355 | x: "right", | 355 | x: "right", |
| 356 | mode: "", | 356 | mode: "", |
| 357 | timeout: 3000, | 357 | timeout: 3000, |
| 358 | text: "", | 358 | text: "", |
| 359 | color: "", | 359 | color: "", |
| 360 | show: true, | 360 | show: true, |
| 361 | showSearch: false, | 361 | showSearch: false, |
| 362 | showLoader: false, | 362 | showLoader: false, |
| 363 | loading: false, | 363 | loading: false, |
| 364 | date: null, | 364 | date: null, |
| 365 | search: "", | 365 | search: "", |
| 366 | addNoticeBoardDialog: false, | 366 | addNoticeBoardDialog: false, |
| 367 | editNoticeBoardDialog: false, | 367 | editNoticeBoardDialog: false, |
| 368 | viewNoticeBoardDialog: false, | 368 | viewNoticeBoardDialog: false, |
| 369 | valid: true, | 369 | valid: true, |
| 370 | addclass: [], | 370 | addclass: [], |
| 371 | addSection: [], | 371 | addSection: [], |
| 372 | gender: ["Male", "Female"], | 372 | gender: ["Male", "Female"], |
| 373 | pagination: { | 373 | pagination: { |
| 374 | rowsPerPage: 10 | 374 | rowsPerPage: 10 |
| 375 | }, | 375 | }, |
| 376 | imageName: "", | 376 | imageName: "", |
| 377 | imageUrl: "", | 377 | imageUrl: "", |
| 378 | imageFile: "", | 378 | imageFile: "", |
| 379 | upload: "", | 379 | upload: "", |
| 380 | titleRules: [v => !!v || " Title is required"], | 380 | titleRules: [v => !!v || " Title is required"], |
| 381 | descriptionRules: [v => !!v || " Description is required"], | 381 | descriptionRules: [v => !!v || " Description is required"], |
| 382 | headers: [ | 382 | headers: [ |
| 383 | { | 383 | { |
| 384 | text: "No", | 384 | text: "No", |
| 385 | align: "", | 385 | align: "", |
| 386 | sortable: false, | 386 | sortable: false, |
| 387 | value: "No" | 387 | value: "No" |
| 388 | }, | 388 | }, |
| 389 | { | 389 | { |
| 390 | text: "Event Image", | 390 | text: "Event Image", |
| 391 | align: "center", | 391 | align: "center", |
| 392 | sortable: false, | 392 | sortable: false, |
| 393 | value: "eventImageUrl" | 393 | value: "eventImageUrl" |
| 394 | }, | 394 | }, |
| 395 | { text: "Title", value: "title", sortable: false, align: "center" }, | 395 | { text: "Title", value: "title", sortable: false, align: "center" }, |
| 396 | { text: "Action", value: "", sortable: false, align: "center" } | 396 | { text: "Action", value: "", sortable: false, align: "center" } |
| 397 | ], | 397 | ], |
| 398 | notices: [], | 398 | notices: [], |
| 399 | editedIndex: -1, | 399 | editedIndex: -1, |
| 400 | addNoticeBoard: {}, | 400 | addNoticeBoard: {}, |
| 401 | editedItem: { | 401 | editedItem: { |
| 402 | title: "", | 402 | title: "", |
| 403 | description: "" | 403 | description: "" |
| 404 | } | 404 | } |
| 405 | }), | 405 | }), |
| 406 | methods: { | 406 | methods: { |
| 407 | pickFile() { | 407 | pickFile() { |
| 408 | this.$refs.image.click(); | 408 | this.$refs.image.click(); |
| 409 | }, | 409 | }, |
| 410 | 410 | ||
| 411 | onFilePicked(e) { | 411 | onFilePicked(e) { |
| 412 | // console.log(e) | 412 | // console.log(e) |
| 413 | const files = e.target.files; | 413 | const files = e.target.files; |
| 414 | this.upload = e.target.files[0]; | 414 | this.upload = e.target.files[0]; |
| 415 | console.log("thisupload==>", this.upload); | 415 | console.log("thisupload==>", this.upload); |
| 416 | if (files[0] !== undefined) { | 416 | if (files[0] !== undefined) { |
| 417 | this.imageName = files[0].name; | 417 | this.imageName = files[0].name; |
| 418 | if (this.imageName.lastIndexOf(".") <= 0) { | 418 | if (this.imageName.lastIndexOf(".") <= 0) { |
| 419 | return; | 419 | return; |
| 420 | } | 420 | } |
| 421 | const fr = new FileReader(); | 421 | const fr = new FileReader(); |
| 422 | fr.readAsDataURL(files[0]); | 422 | fr.readAsDataURL(files[0]); |
| 423 | fr.addEventListener("load", () => { | 423 | fr.addEventListener("load", () => { |
| 424 | this.imageUrl = fr.result; | 424 | this.imageUrl = fr.result; |
| 425 | this.imageFile = files[0]; // this is an image file that can be sent to server... | 425 | this.imageFile = files[0]; // this is an image file that can be sent to server... |
| 426 | }); | 426 | }); |
| 427 | } else { | 427 | } else { |
| 428 | this.imageName = ""; | 428 | this.imageName = ""; |
| 429 | this.imageFile = ""; | 429 | this.imageFile = ""; |
| 430 | this.imageUrl = ""; | 430 | this.imageUrl = ""; |
| 431 | } | 431 | } |
| 432 | }, | 432 | }, |
| 433 | getNoticeDataList() { | 433 | getNoticeDataList() { |
| 434 | this.showLoader = true; | 434 | this.showLoader = true; |
| 435 | var token = this.$store.state.token; | 435 | var token = this.$store.state.token; |
| 436 | http() | 436 | http() |
| 437 | .get("/getEventsList", { | 437 | .get("/getEventsList", { |
| 438 | headers: { Authorization: "Bearer " + token } | 438 | headers: { Authorization: "Bearer " + token } |
| 439 | }) | 439 | }) |
| 440 | .then(response => { | 440 | .then(response => { |
| 441 | this.notices = response.data.data; | 441 | this.notices = response.data.data; |
| 442 | this.showLoader = false; | 442 | this.showLoader = false; |
| 443 | }) | 443 | }) |
| 444 | .catch(error => { | 444 | .catch(error => { |
| 445 | this.showLoader = false; | 445 | this.showLoader = false; |
| 446 | if (error.response.status === 401) { | 446 | if (error.response.status === 401) { |
| 447 | this.$router.replace({ path: "/" }); | 447 | this.$router.replace({ path: "/" }); |
| 448 | this.$store.dispatch("setToken", null); | 448 | this.$store.dispatch("setToken", null); |
| 449 | this.$store.dispatch("Id", null); | 449 | this.$store.dispatch("Id", null); |
| 450 | } | 450 | } |
| 451 | }); | 451 | }); |
| 452 | }, | 452 | }, |
| 453 | editItem(item) { | 453 | editItem(item) { |
| 454 | this.editedIndex = this.notices.indexOf(item); | 454 | this.editedIndex = this.notices.indexOf(item); |
| 455 | this.editedItem = Object.assign({}, item); | 455 | this.editedItem = Object.assign({}, item); |
| 456 | this.editNoticeBoardDialog = true; | 456 | this.editNoticeBoardDialog = true; |
| 457 | }, | 457 | }, |
| 458 | profile(item) { | 458 | profile(item) { |
| 459 | this.editedIndex = this.notices.indexOf(item); | 459 | this.editedIndex = this.notices.indexOf(item); |
| 460 | this.editedItem = Object.assign({}, item); | 460 | this.editedItem = Object.assign({}, item); |
| 461 | this.viewNoticeBoardDialog = true; | 461 | this.viewNoticeBoardDialog = true; |
| 462 | }, | 462 | }, |
| 463 | deleteItem(item) { | 463 | deleteItem(item) { |
| 464 | let deleteEvent = { | 464 | let deleteEvent = { |
| 465 | eventId: item._id | 465 | eventId: item._id |
| 466 | }; | 466 | }; |
| 467 | http() | 467 | http() |
| 468 | .delete( | 468 | .delete( |
| 469 | "/deleteEvent", | 469 | "/deleteEvent", |
| 470 | confirm("Are you sure you want to delete this?") && { | 470 | confirm("Are you sure you want to delete this?") && { |
| 471 | params: deleteEvent | 471 | params: deleteEvent |
| 472 | } | 472 | } |
| 473 | ) | 473 | ) |
| 474 | .then(response => { | 474 | .then(response => { |
| 475 | // console.log("deleteUers",deleteEvent) | 475 | // console.log("deleteUers",deleteEvent) |
| 476 | if ((this.snackbar = true)) { | 476 | if ((this.snackbar = true)) { |
| 477 | this.text = "Successfully delete Existing Notice Data"; | 477 | this.text = "Successfully delete Existing Notice Data"; |
| 478 | } | 478 | } |
| 479 | this.getNoticeDataList(); | 479 | this.getNoticeDataList(); |
| 480 | }) | 480 | }) |
| 481 | .catch(error => { | 481 | .catch(error => { |
| 482 | // console.log(error); | 482 | // console.log(error); |
| 483 | }); | 483 | }); |
| 484 | }, | 484 | }, |
| 485 | close() { | 485 | close() { |
| 486 | this.editNoticeBoardDialog = false; | 486 | this.editNoticeBoardDialog = false; |
| 487 | }, | 487 | }, |
| 488 | submit() { | 488 | submit() { |
| 489 | if (this.$refs.form.validate()) { | 489 | if (this.$refs.form.validate()) { |
| 490 | if (this.imageUrl) { | 490 | if (this.imageUrl) { |
| 491 | var str = this.imageUrl; | 491 | var str = this.imageUrl; |
| 492 | const [baseUrl, imageUrl] = str.split(/,/); | 492 | const [baseUrl, imageUrl] = str.split(/,/); |
| 493 | this.addNoticeBoard.upload = imageUrl; | 493 | this.addNoticeBoard.upload = imageUrl; |
| 494 | } | 494 | } |
| 495 | http() | 495 | http() |
| 496 | .post("/createEvent", this.addNoticeBoard) | 496 | .post("/createEvent", this.addNoticeBoard) |
| 497 | .then(response => { | 497 | .then(response => { |
| 498 | this.imageUrl = ""; | 498 | this.imageUrl = ""; |
| 499 | this.snackbar = true; | 499 | this.snackbar = true; |
| 500 | this.color = "green"; | 500 | this.color = "green"; |
| 501 | this.text = response.data.message; | 501 | this.text = response.data.message; |
| 502 | this.getNoticeDataList(); | 502 | this.getNoticeDataList(); |
| 503 | this.addNoticeBoardDialog = false; | 503 | this.addNoticeBoardDialog = false; |
| 504 | this.clear(); | 504 | this.clear(); |
| 505 | }) | 505 | }) |
| 506 | .catch(error => { | 506 | .catch(error => { |
| 507 | this.snackbar = true; | 507 | this.snackbar = true; |
| 508 | this.text = error.response.data.message; | 508 | this.text = error.response.data.message; |
| 509 | this.color = "error"; | 509 | this.color = "error"; |
| 510 | }); | 510 | }); |
| 511 | } | 511 | } |
| 512 | }, | 512 | }, |
| 513 | clear() { | 513 | clear() { |
| 514 | this.$refs.form.reset(); | 514 | this.$refs.form.reset(); |
| 515 | this.imageUrl = ""; | 515 | this.imageUrl = ""; |
| 516 | }, | 516 | }, |
| 517 | save() { | 517 | save() { |
| 518 | let editNoticeBoard = { | 518 | let editNoticeBoard = { |
| 519 | eventId: this.editedItem._id, | 519 | eventId: this.editedItem._id, |
| 520 | title: this.editedItem.title, | 520 | title: this.editedItem.title, |
| 521 | description: this.editedItem.description | 521 | description: this.editedItem.description |
| 522 | }; | 522 | }; |
| 523 | if (this.imageUrl) { | 523 | if (this.imageUrl) { |
| 524 | var str = this.imageUrl; | 524 | var str = this.imageUrl; |
| 525 | const [baseUrl, imageUrl] = str.split(/,/); | 525 | const [baseUrl, imageUrl] = str.split(/,/); |
| 526 | editNoticeBoard.upload = imageUrl; | 526 | editNoticeBoard.upload = imageUrl; |
| 527 | } | 527 | } |
| 528 | http() | 528 | http() |
| 529 | .put("/updateEvent", editNoticeBoard) | 529 | .put("/updateEvent", editNoticeBoard) |
| 530 | .then(response => { | 530 | .then(response => { |
| 531 | if ((this.snackbar = true)) { | 531 | if ((this.snackbar = true)) { |
| 532 | this.text = "Successfully Edit Existing Notice Data"; | 532 | this.text = "Successfully Edit Existing Notice Data"; |
| 533 | } | 533 | } |
| 534 | this.getNoticeDataList(); | 534 | this.getNoticeDataList(); |
| 535 | this.close(); | 535 | this.close(); |
| 536 | }) | 536 | }) |
| 537 | .catch(error => { | 537 | .catch(error => { |
| 538 | // console.log(error); | 538 | // console.log(error); |
| 539 | }); | 539 | }); |
| 540 | }, | 540 | }, |
| 541 | displaySearch() { | 541 | displaySearch() { |
| 542 | (this.show = false), (this.showSearch = true); | 542 | (this.show = false), (this.showSearch = true); |
| 543 | }, | 543 | }, |
| 544 | closeSearch() { | 544 | closeSearch() { |
| 545 | this.showSearch = false; | 545 | this.showSearch = false; |
| 546 | this.show = true; | 546 | this.show = true; |
| 547 | this.search = ""; | 547 | this.search = ""; |
| 548 | } | 548 | } |
| 549 | }, | 549 | }, |
| 550 | mounted() { | 550 | mounted() { |
| 551 | this.getNoticeDataList(); | 551 | this.getNoticeDataList(); |
| 552 | } | 552 | } |
| 553 | }; | 553 | }; |
| 554 | </script> | 554 | </script> |
src/pages/Notification/notification.vue
| 1 | <template> | 1 | <template> |
| 2 | <v-container fluid class="body-color"> | 2 | <v-container fluid class="body-color"> |
| 3 | <!-- ****** EDITS NOTIFICATION DETAILS ****** --> | 3 | <!-- ****** EDITS NOTIFICATION DETAILS ****** --> |
| 4 | <v-dialog v-model="editNotificationDialog" max-width="500px"> | 4 | <v-dialog v-model="editNotificationDialog" max-width="500px"> |
| 5 | <v-flex xs12 sm12> | 5 | <v-flex xs12 sm12> |
| 6 | <v-card flat class="card-style pa-3" dark> | 6 | <v-card flat class="card-style pa-3" dark> |
| 7 | <v-layout> | 7 | <v-layout> |
| 8 | <v-flex xs12> | 8 | <v-flex xs12> |
| 9 | <label class="title text-xs-center">Edit Notification</label> | 9 | <label class="title text-xs-center">Edit Notification</label> |
| 10 | <v-icon size="24" class="right" @click="editNotificationDialog = false">cancel</v-icon> | 10 | <v-icon size="24" class="right" @click="editNotificationDialog = false">cancel</v-icon> |
| 11 | </v-flex> | 11 | </v-flex> |
| 12 | </v-layout> | 12 | </v-layout> |
| 13 | <v-flex xs12 sm12> | 13 | <v-flex xs12 sm12> |
| 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 sm8 class="ml-3"> | 18 | <v-flex xs8 sm8 class="ml-3"> |
| 19 | <v-text-field | 19 | <v-text-field |
| 20 | v-model="editedItem.title" | 20 | v-model="editedItem.title" |
| 21 | placeholder="fill your Title" | 21 | placeholder="fill your Title" |
| 22 | name="name" | 22 | name="name" |
| 23 | type="text" | 23 | type="text" |
| 24 | ></v-text-field> | 24 | ></v-text-field> |
| 25 | </v-flex> | 25 | </v-flex> |
| 26 | </v-layout> | 26 | </v-layout> |
| 27 | </v-flex> | 27 | </v-flex> |
| 28 | <v-flex xs12 sm12> | 28 | <v-flex xs12 sm12> |
| 29 | <v-layout> | 29 | <v-layout> |
| 30 | <v-flex xs4 class="pt-4 subheading"> | 30 | <v-flex xs4 class="pt-4 subheading"> |
| 31 | <label class="right">Description:</label> | 31 | <label class="right">Description:</label> |
| 32 | </v-flex> | 32 | </v-flex> |
| 33 | <v-flex xs8 sm8 class="ml-3"> | 33 | <v-flex xs8 sm8 class="ml-3"> |
| 34 | <v-text-field | 34 | <v-text-field |
| 35 | placeholder="fill your Description" | 35 | placeholder="fill your Description" |
| 36 | v-model="editedItem.description" | 36 | v-model="editedItem.description" |
| 37 | type="text" | 37 | type="text" |
| 38 | ></v-text-field> | 38 | ></v-text-field> |
| 39 | </v-flex> | 39 | </v-flex> |
| 40 | </v-layout> | 40 | </v-layout> |
| 41 | </v-flex> | 41 | </v-flex> |
| 42 | <v-layout> | 42 | <v-layout> |
| 43 | <v-flex xs12> | 43 | <v-flex xs12> |
| 44 | <v-card-actions> | 44 | <v-card-actions> |
| 45 | <v-spacer></v-spacer> | 45 | <v-spacer></v-spacer> |
| 46 | <v-btn round dark @click="save" :loading="editLoading" class="add-button">Save</v-btn> | 46 | <v-btn round dark @click="save" :loading="editLoading" class="add-button">Save</v-btn> |
| 47 | <v-spacer></v-spacer> | 47 | <v-spacer></v-spacer> |
| 48 | </v-card-actions> | 48 | </v-card-actions> |
| 49 | </v-flex> | 49 | </v-flex> |
| 50 | </v-layout> | 50 | </v-layout> |
| 51 | </v-card> | 51 | </v-card> |
| 52 | </v-flex> | 52 | </v-flex> |
| 53 | </v-dialog> | 53 | </v-dialog> |
| 54 | 54 | ||
| 55 | <!-- ****** PROFILE VIEW NOTIFICATION DEATILS ****** --> | 55 | <!-- ****** PROFILE VIEW NOTIFICATION DEATILS ****** --> |
| 56 | 56 | ||
| 57 | <v-dialog v-model="profileNotificationDialog" max-width="400px"> | 57 | <v-dialog v-model="profileNotificationDialog" max-width="400px"> |
| 58 | <v-card flat class="card-style pa-3" dark> | 58 | <v-card flat class="card-style pa-3" dark> |
| 59 | <v-layout> | 59 | <v-layout> |
| 60 | <v-flex xs12> | 60 | <v-flex xs12> |
| 61 | <label class="title text-xs-center">View Notification</label> | 61 | <label class="title text-xs-center">View Notification</label> |
| 62 | <v-icon size="24" class="right" @click="profileNotificationDialog = false">cancel</v-icon> | 62 | <v-icon size="24" class="right" @click="profileNotificationDialog = false">cancel</v-icon> |
| 63 | </v-flex> | 63 | </v-flex> |
| 64 | </v-layout> | 64 | </v-layout> |
| 65 | <v-card-text> | 65 | <v-card-text> |
| 66 | <v-container grid-list-md> | 66 | <v-container grid-list-md> |
| 67 | <v-layout wrap> | 67 | <v-layout wrap> |
| 68 | <v-flex xs12> | 68 | <v-flex xs12> |
| 69 | <v-layout> | 69 | <v-layout> |
| 70 | <v-flex xs4 sm6> | 70 | <v-flex xs4 sm6> |
| 71 | <h5 class="right my-1"> | 71 | <h5 class="right my-1"> |
| 72 | <b>Title:</b> | 72 | <b>Title:</b> |
| 73 | </h5> | 73 | </h5> |
| 74 | </v-flex> | 74 | </v-flex> |
| 75 | <v-flex sm6 xs8> | 75 | <v-flex sm6 xs8> |
| 76 | <h5 class="my-1">{{ editedItem.title }}</h5> | 76 | <h5 class="my-1">{{ editedItem.title }}</h5> |
| 77 | </v-flex> | 77 | </v-flex> |
| 78 | </v-layout> | 78 | </v-layout> |
| 79 | </v-flex> | 79 | </v-flex> |
| 80 | <v-layout> | 80 | <v-layout> |
| 81 | <v-flex xs4 sm6> | 81 | <v-flex xs4 sm6> |
| 82 | <h5 class="right my-1"> | 82 | <h5 class="right my-1"> |
| 83 | <b>Description:</b> | 83 | <b>Description:</b> |
| 84 | </h5> | 84 | </h5> |
| 85 | </v-flex> | 85 | </v-flex> |
| 86 | <v-flex sm6 xs8> | 86 | <v-flex sm6 xs8> |
| 87 | <h5 class="my-1">{{ editedItem.description }}</h5> | 87 | <h5 class="my-1">{{ editedItem.description }}</h5> |
| 88 | </v-flex> | 88 | </v-flex> |
| 89 | </v-layout> | 89 | </v-layout> |
| 90 | </v-layout> | 90 | </v-layout> |
| 91 | </v-container> | 91 | </v-container> |
| 92 | </v-card-text> | 92 | </v-card-text> |
| 93 | </v-card> | 93 | </v-card> |
| 94 | </v-dialog> | 94 | </v-dialog> |
| 95 | <!-- ****** NOTIFICATION TABLE ****** --> | 95 | <!-- ****** NOTIFICATION TABLE ****** --> |
| 96 | <v-toolbar color="transparent" flat> | 96 | <v-toolbar color="transparent" flat> |
| 97 | <v-btn | 97 | <v-btn |
| 98 | fab | 98 | fab |
| 99 | dark | 99 | dark |
| 100 | class="open-dialog-button hidden-xl-only hidden-md-only hidden-lg-only" | 100 | class="open-dialog-button hidden-xl-only hidden-md-only hidden-lg-only" |
| 101 | small | 101 | small |
| 102 | @click="addNotificationDialog = true" | 102 | @click="addNotificationDialog = true" |
| 103 | > | 103 | > |
| 104 | <v-icon dark>add</v-icon> | 104 | <v-icon dark>add</v-icon> |
| 105 | </v-btn> | 105 | </v-btn> |
| 106 | <v-btn | 106 | <v-btn |
| 107 | round | 107 | round |
| 108 | class="open-dialog-button hidden-sm-only hidden-xs-only" | 108 | class="open-dialog-button hidden-sm-only hidden-xs-only" |
| 109 | dark | 109 | dark |
| 110 | @click="addNotificationDialog = true" | 110 | @click="addNotificationDialog = true" |
| 111 | > | 111 | > |
| 112 | <v-icon class="white--text pr-1" size="20">add</v-icon>Add Notification | 112 | <v-icon class="white--text pr-1" size="20">add</v-icon>Add Notification |
| 113 | </v-btn> | 113 | </v-btn> |
| 114 | <v-spacer></v-spacer> | 114 | <v-spacer></v-spacer> |
| 115 | <v-card-title class="body-1" v-show="show"> | 115 | <v-card-title class="body-1" v-show="show"> |
| 116 | <v-btn icon large flat @click="displaySearch"> | 116 | <v-btn icon large flat @click="displaySearch"> |
| 117 | <v-avatar size="27"> | 117 | <v-avatar size="27"> |
| 118 | <img src="/static/icon/dashboard icons-49.png" alt="icon" /> | 118 | <img src="/static/icon/search.png" alt="icon" /> |
| 119 | </v-avatar> | 119 | </v-avatar> |
| 120 | </v-btn> | 120 | </v-btn> |
| 121 | </v-card-title> | 121 | </v-card-title> |
| 122 | <v-flex xs8 sm8 md3 lg2 v-show="showSearch"> | 122 | <v-flex xs8 sm8 md3 lg2 v-show="showSearch"> |
| 123 | <v-layout> | 123 | <v-layout> |
| 124 | <v-text-field v-model="search" label="Search" prepend-inner-icon="search" color="primary"></v-text-field> | 124 | <v-text-field v-model="search" label="Search" prepend-inner-icon="search" color="primary"></v-text-field> |
| 125 | <v-icon @click="closeSearch" color="error">close</v-icon> | 125 | <v-icon @click="closeSearch" color="error">close</v-icon> |
| 126 | </v-layout> | 126 | </v-layout> |
| 127 | </v-flex> | 127 | </v-flex> |
| 128 | </v-toolbar> | 128 | </v-toolbar> |
| 129 | <v-data-table | 129 | <v-data-table |
| 130 | :headers="headers" | 130 | :headers="headers" |
| 131 | :items="notifications" | 131 | :items="notifications" |
| 132 | :pagination.sync="pagination" | 132 | :pagination.sync="pagination" |
| 133 | :search="search" | 133 | :search="search" |
| 134 | > | 134 | > |
| 135 | <template slot="items" slot-scope="props"> | 135 | <template slot="items" slot-scope="props"> |
| 136 | <tr class="tr"> | 136 | <tr class="tr"> |
| 137 | <td class="td td-row">{{ props.index + 1}}</td> | 137 | <td class="td td-row">{{ props.index + 1}}</td> |
| 138 | <td class="td td-row text-xs-center">{{ props.item.title}}</td> | 138 | <td class="td td-row text-xs-center">{{ props.item.title}}</td> |
| 139 | <td class="td td-row text-xs-center">{{ props.item.description}}</td> | 139 | <td class="td td-row text-xs-center">{{ props.item.description}}</td> |
| 140 | <td class="td td-row text-xs-center"> | 140 | <td class="td td-row text-xs-center"> |
| 141 | <span> | 141 | <span> |
| 142 | <v-tooltip top> | 142 | <v-tooltip top> |
| 143 | <img | 143 | <img |
| 144 | slot="activator" | 144 | slot="activator" |
| 145 | style="cursor:pointer; width:25px; height:25px; " | 145 | style="cursor:pointer; width:25px; height:25px; " |
| 146 | class="mr-3" | 146 | class="mr-3" |
| 147 | @click="profile(props.item)" | 147 | @click="profile(props.item)" |
| 148 | src="/static/icon/dashboard icons-47.png" | 148 | src="/static/icon/view.png" |
| 149 | /> | 149 | /> |
| 150 | <span>View</span> | 150 | <span>View</span> |
| 151 | </v-tooltip> | 151 | </v-tooltip> |
| 152 | <v-tooltip top> | 152 | <v-tooltip top> |
| 153 | <img | 153 | <img |
| 154 | slot="activator" | 154 | slot="activator" |
| 155 | style="cursor:pointer; width:20px; height:18px; " | 155 | style="cursor:pointer; width:20px; height:18px; " |
| 156 | class="mr-3" | 156 | class="mr-3" |
| 157 | @click="editItem(props.item)" | 157 | @click="editItem(props.item)" |
| 158 | src="/static/icon/dashboard icons-50.png" | 158 | src="/static/icon/edit.png" |
| 159 | /> | 159 | /> |
| 160 | <span>Edit</span> | 160 | <span>Edit</span> |
| 161 | </v-tooltip> | 161 | </v-tooltip> |
| 162 | <v-tooltip top> | 162 | <v-tooltip top> |
| 163 | <img | 163 | <img |
| 164 | slot="activator" | 164 | slot="activator" |
| 165 | style="cursor:pointer; width:20px; height:20px; " | 165 | style="cursor:pointer; width:20px; height:20px; " |
| 166 | class="mr-3" | 166 | class="mr-3" |
| 167 | @click="deleteItem(props.item)" | 167 | @click="deleteItem(props.item)" |
| 168 | src="/static/icon/dashboard icons-51.png" | 168 | src="/static/icon/delete.png" |
| 169 | /> | 169 | /> |
| 170 | <span>Delete</span> | 170 | <span>Delete</span> |
| 171 | </v-tooltip> | 171 | </v-tooltip> |
| 172 | </span> | 172 | </span> |
| 173 | </td> | 173 | </td> |
| 174 | </tr> | 174 | </tr> |
| 175 | </template> | 175 | </template> |
| 176 | <v-alert | 176 | <v-alert |
| 177 | slot="no-results" | 177 | slot="no-results" |
| 178 | :value="true" | 178 | :value="true" |
| 179 | color="error" | 179 | color="error" |
| 180 | icon="warning" | 180 | icon="warning" |
| 181 | >Your search for "{{ search }}" found no results.</v-alert> | 181 | >Your search for "{{ search }}" found no results.</v-alert> |
| 182 | </v-data-table> | 182 | </v-data-table> |
| 183 | 183 | ||
| 184 | <!-- ****** ADD MULTIPLE NOTIFICATION ****** --> | 184 | <!-- ****** ADD MULTIPLE NOTIFICATION ****** --> |
| 185 | <v-dialog v-model="addNotificationDialog" max-width="480px"> | 185 | <v-dialog v-model="addNotificationDialog" max-width="480px"> |
| 186 | <v-card flat class="card-style pa-2" dark> | 186 | <v-card flat class="card-style pa-2" dark> |
| 187 | <v-layout> | 187 | <v-layout> |
| 188 | <v-flex xs12> | 188 | <v-flex xs12> |
| 189 | <label class="title text-xs-center">Add Notification</label> | 189 | <label class="title text-xs-center">Add Notification</label> |
| 190 | <v-icon size="24" class="right" @click="addNotificationDialog = false">cancel</v-icon> | 190 | <v-icon size="24" class="right" @click="addNotificationDialog = false">cancel</v-icon> |
| 191 | </v-flex> | 191 | </v-flex> |
| 192 | </v-layout> | 192 | </v-layout> |
| 193 | <v-form ref="form" v-model="valid" lazy-validation> | 193 | <v-form ref="form" v-model="valid" lazy-validation> |
| 194 | <v-container fluid fill-height> | 194 | <v-container fluid fill-height> |
| 195 | <v-layout align-center wrap> | 195 | <v-layout align-center wrap> |
| 196 | <v-flex xs12> | 196 | <v-flex xs12> |
| 197 | <v-layout> | 197 | <v-layout> |
| 198 | <v-flex xs4 class="pt-4 subheading"> | 198 | <v-flex xs4 class="pt-4 subheading"> |
| 199 | <label class="right">Title:</label> | 199 | <label class="right">Title:</label> |
| 200 | </v-flex> | 200 | </v-flex> |
| 201 | <v-flex xs8 sm8 class="ml-3"> | 201 | <v-flex xs8 sm8 class="ml-3"> |
| 202 | <v-text-field | 202 | <v-text-field |
| 203 | v-model="addNotification.title" | 203 | v-model="addNotification.title" |
| 204 | placeholder="fill your Title" | 204 | placeholder="fill your Title" |
| 205 | type="text" | 205 | type="text" |
| 206 | :rules="titleRules" | 206 | :rules="titleRules" |
| 207 | required | 207 | required |
| 208 | ></v-text-field> | 208 | ></v-text-field> |
| 209 | </v-flex> | 209 | </v-flex> |
| 210 | </v-layout> | 210 | </v-layout> |
| 211 | </v-flex> | 211 | </v-flex> |
| 212 | <v-flex xs12> | 212 | <v-flex xs12> |
| 213 | <v-layout> | 213 | <v-layout> |
| 214 | <v-flex xs4 class="pt-4 subheading"> | 214 | <v-flex xs4 class="pt-4 subheading"> |
| 215 | <label class="right">Description:</label> | 215 | <label class="right">Description:</label> |
| 216 | </v-flex> | 216 | </v-flex> |
| 217 | <v-flex xs8 sm8 class="ml-3"> | 217 | <v-flex xs8 sm8 class="ml-3"> |
| 218 | <v-text-field | 218 | <v-text-field |
| 219 | placeholder="fill your Description" | 219 | placeholder="fill your Description" |
| 220 | :rules="descriptionRules" | 220 | :rules="descriptionRules" |
| 221 | v-model="addNotification.description" | 221 | v-model="addNotification.description" |
| 222 | type="text" | 222 | type="text" |
| 223 | required | 223 | required |
| 224 | ></v-text-field> | 224 | ></v-text-field> |
| 225 | </v-flex> | 225 | </v-flex> |
| 226 | </v-layout> | 226 | </v-layout> |
| 227 | </v-flex> | 227 | </v-flex> |
| 228 | <v-layout> | 228 | <v-layout> |
| 229 | <v-flex xs12 sm12> | 229 | <v-flex xs12 sm12> |
| 230 | <v-layout class="hidden-xs-only hidden-sm-only right"> | 230 | <v-layout class="hidden-xs-only hidden-sm-only right"> |
| 231 | <v-btn @click="clear" round class="clear-button" dark>Clear</v-btn> | 231 | <v-btn @click="clear" round class="clear-button" dark>Clear</v-btn> |
| 232 | <v-btn @click="submit" round dark :loading="loading" class="add-button">Add</v-btn> | 232 | <v-btn @click="submit" round dark :loading="loading" class="add-button">Add</v-btn> |
| 233 | </v-layout> | 233 | </v-layout> |
| 234 | <v-card-actions class="hidden-md-only hidden-lg-only hidden-xl-only"> | 234 | <v-card-actions class="hidden-md-only hidden-lg-only hidden-xl-only"> |
| 235 | <v-spacer></v-spacer> | 235 | <v-spacer></v-spacer> |
| 236 | <v-btn @click="clear" round class="clear-button" dark>Clear</v-btn> | 236 | <v-btn @click="clear" round class="clear-button" dark>Clear</v-btn> |
| 237 | <v-btn @click="submit" round dark :loading="loading" class="add-button">Add</v-btn> | 237 | <v-btn @click="submit" round dark :loading="loading" class="add-button">Add</v-btn> |
| 238 | <v-spacer></v-spacer> | 238 | <v-spacer></v-spacer> |
| 239 | </v-card-actions> | 239 | </v-card-actions> |
| 240 | </v-flex> | 240 | </v-flex> |
| 241 | </v-layout> | 241 | </v-layout> |
| 242 | </v-layout> | 242 | </v-layout> |
| 243 | </v-container> | 243 | </v-container> |
| 244 | </v-form> | 244 | </v-form> |
| 245 | </v-card> | 245 | </v-card> |
| 246 | </v-dialog> | 246 | </v-dialog> |
| 247 | <v-snackbar | 247 | <v-snackbar |
| 248 | :timeout="timeout" | 248 | :timeout="timeout" |
| 249 | :top="y === 'top'" | 249 | :top="y === 'top'" |
| 250 | :right="x === 'right'" | 250 | :right="x === 'right'" |
| 251 | :vertical="mode === 'vertical'" | 251 | :vertical="mode === 'vertical'" |
| 252 | v-model="snackbar" | 252 | v-model="snackbar" |
| 253 | :color="color" | 253 | :color="color" |
| 254 | >{{ text }}</v-snackbar> | 254 | >{{ text }}</v-snackbar> |
| 255 | <div class="loader" v-if="showLoader"> | 255 | <div class="loader" v-if="showLoader"> |
| 256 | <v-progress-circular indeterminate color="white"></v-progress-circular> | 256 | <v-progress-circular indeterminate color="white"></v-progress-circular> |
| 257 | </div> | 257 | </div> |
| 258 | </v-container> | 258 | </v-container> |
| 259 | </template> | 259 | </template> |
| 260 | 260 | ||
| 261 | <script> | 261 | <script> |
| 262 | import http from "@/Services/http.js"; | 262 | import http from "@/Services/http.js"; |
| 263 | import Util from "@/util"; | 263 | import Util from "@/util"; |
| 264 | 264 | ||
| 265 | export default { | 265 | export default { |
| 266 | data: () => ({ | 266 | data: () => ({ |
| 267 | snackbar: false, | 267 | snackbar: false, |
| 268 | y: "top", | 268 | y: "top", |
| 269 | x: "right", | 269 | x: "right", |
| 270 | mode: "", | 270 | mode: "", |
| 271 | timeout: 3000, | 271 | timeout: 3000, |
| 272 | text: "", | 272 | text: "", |
| 273 | loading: false, | 273 | loading: false, |
| 274 | editLoading: false, | 274 | editLoading: false, |
| 275 | date: null, | 275 | date: null, |
| 276 | search: "", | 276 | search: "", |
| 277 | color: "", | 277 | color: "", |
| 278 | show: true, | 278 | show: true, |
| 279 | showSearch: false, | 279 | showSearch: false, |
| 280 | showLoader: false, | 280 | showLoader: false, |
| 281 | profileNotificationDialog: false, | 281 | profileNotificationDialog: false, |
| 282 | editNotificationDialog: false, | 282 | editNotificationDialog: false, |
| 283 | valid: true, | 283 | valid: true, |
| 284 | addNotificationDialog: false, | 284 | addNotificationDialog: false, |
| 285 | pagination: { | 285 | pagination: { |
| 286 | rowsPerPage: 10 | 286 | rowsPerPage: 10 |
| 287 | }, | 287 | }, |
| 288 | imageData: {}, | 288 | imageData: {}, |
| 289 | imageName: "", | 289 | imageName: "", |
| 290 | imageUrl: "", | 290 | imageUrl: "", |
| 291 | imageFile: "", | 291 | imageFile: "", |
| 292 | titleRules: [v => !!v || " Tilte is required"], | 292 | titleRules: [v => !!v || " Tilte is required"], |
| 293 | descriptionRules: [v => !!v || " Description is required"], | 293 | descriptionRules: [v => !!v || " Description is required"], |
| 294 | headers: [ | 294 | headers: [ |
| 295 | { | 295 | { |
| 296 | text: "No", | 296 | text: "No", |
| 297 | align: "", | 297 | align: "", |
| 298 | sortable: false, | 298 | sortable: false, |
| 299 | value: "No" | 299 | value: "No" |
| 300 | }, | 300 | }, |
| 301 | { text: "Title", value: "title", sortable: false, align: "center" }, | 301 | { text: "Title", value: "title", sortable: false, align: "center" }, |
| 302 | { | 302 | { |
| 303 | text: "Description", | 303 | text: "Description", |
| 304 | value: "description", | 304 | value: "description", |
| 305 | sortable: false, | 305 | sortable: false, |
| 306 | align: "center" | 306 | align: "center" |
| 307 | }, | 307 | }, |
| 308 | { text: "Action", value: "", sortable: false, align: "center" } | 308 | { text: "Action", value: "", sortable: false, align: "center" } |
| 309 | ], | 309 | ], |
| 310 | notifications: [], | 310 | notifications: [], |
| 311 | editedIndex: -1, | 311 | editedIndex: -1, |
| 312 | addNotification: { | 312 | addNotification: { |
| 313 | title: "", | 313 | title: "", |
| 314 | description: "" | 314 | description: "" |
| 315 | }, | 315 | }, |
| 316 | editedItem: { | 316 | editedItem: { |
| 317 | title: "", | 317 | title: "", |
| 318 | description: "" | 318 | description: "" |
| 319 | } | 319 | } |
| 320 | }), | 320 | }), |
| 321 | methods: { | 321 | methods: { |
| 322 | pickFile() { | 322 | pickFile() { |
| 323 | this.$refs.image.click(); | 323 | this.$refs.image.click(); |
| 324 | }, | 324 | }, |
| 325 | 325 | ||
| 326 | onFilePicked(e) { | 326 | onFilePicked(e) { |
| 327 | const files = e.target.files; | 327 | const files = e.target.files; |
| 328 | this.imageData.upload = e.target.files[0]; | 328 | this.imageData.upload = e.target.files[0]; |
| 329 | if (files[0] !== undefined) { | 329 | if (files[0] !== undefined) { |
| 330 | this.imageName = files[0].name; | 330 | this.imageName = files[0].name; |
| 331 | if (this.imageName.lastIndexOf(".") <= 0) { | 331 | if (this.imageName.lastIndexOf(".") <= 0) { |
| 332 | return; | 332 | return; |
| 333 | } | 333 | } |
| 334 | const fr = new FileReader(); | 334 | const fr = new FileReader(); |
| 335 | fr.readAsDataURL(files[0]); | 335 | fr.readAsDataURL(files[0]); |
| 336 | fr.addEventListener("load", () => { | 336 | fr.addEventListener("load", () => { |
| 337 | this.imageUrl = fr.result; | 337 | this.imageUrl = fr.result; |
| 338 | this.imageFile = files[0]; // this is an image file that can be sent to server... | 338 | this.imageFile = files[0]; // this is an image file that can be sent to server... |
| 339 | this.imageData.imageUrl = URL.createObjectURL(this.imageFile); | 339 | this.imageData.imageUrl = URL.createObjectURL(this.imageFile); |
| 340 | }); | 340 | }); |
| 341 | } else { | 341 | } else { |
| 342 | this.imageName = ""; | 342 | this.imageName = ""; |
| 343 | this.imageFile = ""; | 343 | this.imageFile = ""; |
| 344 | this.imageUrl = ""; | 344 | this.imageUrl = ""; |
| 345 | } | 345 | } |
| 346 | }, | 346 | }, |
| 347 | getNotifications() { | 347 | getNotifications() { |
| 348 | this.showLoader = true; | 348 | this.showLoader = true; |
| 349 | var token = this.$store.state.token; | 349 | var token = this.$store.state.token; |
| 350 | http() | 350 | http() |
| 351 | .get("/getNotificationsList", { | 351 | .get("/getNotificationsList", { |
| 352 | headers: { Authorization: "Bearer " + token } | 352 | headers: { Authorization: "Bearer " + token } |
| 353 | }) | 353 | }) |
| 354 | .then(response => { | 354 | .then(response => { |
| 355 | this.notifications = response.data.data; | 355 | this.notifications = response.data.data; |
| 356 | this.showLoader = false; | 356 | this.showLoader = false; |
| 357 | }) | 357 | }) |
| 358 | .catch(error => { | 358 | .catch(error => { |
| 359 | this.showLoader = false; | 359 | this.showLoader = false; |
| 360 | if (error.response.status === 401) { | 360 | if (error.response.status === 401) { |
| 361 | this.$router.replace({ path: "/" }); | 361 | this.$router.replace({ path: "/" }); |
| 362 | this.$store.dispatch("setToken", null); | 362 | this.$store.dispatch("setToken", null); |
| 363 | this.$store.dispatch("Id", null); | 363 | this.$store.dispatch("Id", null); |
| 364 | } | 364 | } |
| 365 | }); | 365 | }); |
| 366 | }, | 366 | }, |
| 367 | editItem(item) { | 367 | editItem(item) { |
| 368 | this.editedIndex = this.notifications.indexOf(item); | 368 | this.editedIndex = this.notifications.indexOf(item); |
| 369 | this.editedItem = Object.assign({}, item); | 369 | this.editedItem = Object.assign({}, item); |
| 370 | this.editNotificationDialog = true; | 370 | this.editNotificationDialog = true; |
| 371 | }, | 371 | }, |
| 372 | profile(item) { | 372 | profile(item) { |
| 373 | this.editedIndex = this.notifications.indexOf(item); | 373 | this.editedIndex = this.notifications.indexOf(item); |
| 374 | this.editedItem = Object.assign({}, item); | 374 | this.editedItem = Object.assign({}, item); |
| 375 | this.profileNotificationDialog = true; | 375 | this.profileNotificationDialog = true; |
| 376 | }, | 376 | }, |
| 377 | 377 | ||
| 378 | deleteItem(item) { | 378 | deleteItem(item) { |
| 379 | let deleteNotification = { | 379 | let deleteNotification = { |
| 380 | notificationId: item._id | 380 | notificationId: item._id |
| 381 | }; | 381 | }; |
| 382 | http() | 382 | http() |
| 383 | .delete( | 383 | .delete( |
| 384 | "/deleteNotification", | 384 | "/deleteNotification", |
| 385 | confirm("Are you sure you want to delete this?") && { | 385 | confirm("Are you sure you want to delete this?") && { |
| 386 | params: deleteNotification | 386 | params: deleteNotification |
| 387 | } | 387 | } |
| 388 | ) | 388 | ) |
| 389 | .then(response => { | 389 | .then(response => { |
| 390 | this.snackbar = true; | 390 | this.snackbar = true; |
| 391 | this.text = response.data.message; | 391 | this.text = response.data.message; |
| 392 | this.color = "green"; | 392 | this.color = "green"; |
| 393 | this.getNotifications(); | 393 | this.getNotifications(); |
| 394 | }) | 394 | }) |
| 395 | .catch(error => { | 395 | .catch(error => { |
| 396 | this.snackbar = true; | 396 | this.snackbar = true; |
| 397 | this.text = error.response.data.message; | 397 | this.text = error.response.data.message; |
| 398 | this.color = "error"; | 398 | this.color = "error"; |
| 399 | }); | 399 | }); |
| 400 | }, | 400 | }, |
| 401 | close() { | 401 | close() { |
| 402 | this.editNotificationDialog = false; | 402 | this.editNotificationDialog = false; |
| 403 | }, | 403 | }, |
| 404 | closeNotificationDialog() { | 404 | closeNotificationDialog() { |
| 405 | this.profileNotificationDialog = false; | 405 | this.profileNotificationDialog = false; |
| 406 | }, | 406 | }, |
| 407 | submit() { | 407 | submit() { |
| 408 | if (this.$refs.form.validate()) { | 408 | if (this.$refs.form.validate()) { |
| 409 | let imageData = new FormData(); | 409 | let imageData = new FormData(); |
| 410 | imageData.append("upload", this.imageFile); | 410 | imageData.append("upload", this.imageFile); |
| 411 | let create = { | 411 | let create = { |
| 412 | title: this.addNotification.title, | 412 | title: this.addNotification.title, |
| 413 | description: this.addNotification.description | 413 | description: this.addNotification.description |
| 414 | }; | 414 | }; |
| 415 | this.loading = true; | 415 | this.loading = true; |
| 416 | http() | 416 | http() |
| 417 | .post("/createNotification", create) | 417 | .post("/createNotification", create) |
| 418 | .then(response => { | 418 | .then(response => { |
| 419 | this.snackbar = true; | 419 | this.snackbar = true; |
| 420 | this.text = response.data.message; | 420 | this.text = response.data.message; |
| 421 | this.color = "green"; | 421 | this.color = "green"; |
| 422 | this.getNotifications(); | 422 | this.getNotifications(); |
| 423 | this.clear(); | 423 | this.clear(); |
| 424 | this.loading = false; | 424 | this.loading = false; |
| 425 | }) | 425 | }) |
| 426 | .catch(error => { | 426 | .catch(error => { |
| 427 | this.snackbar = true; | 427 | this.snackbar = true; |
| 428 | this.text = error.response.data.message; | 428 | this.text = error.response.data.message; |
| 429 | this.color = "error"; | 429 | this.color = "error"; |
| 430 | this.loading = false; | 430 | this.loading = false; |
| 431 | }); | 431 | }); |
| 432 | } | 432 | } |
| 433 | }, | 433 | }, |
| 434 | clear() { | 434 | clear() { |
| 435 | this.$refs.form.reset(); | 435 | this.$refs.form.reset(); |
| 436 | }, | 436 | }, |
| 437 | save() { | 437 | save() { |
| 438 | let imageData = new FormData(); | 438 | let imageData = new FormData(); |
| 439 | imageData.append("upload", this.imageFile); | 439 | imageData.append("upload", this.imageFile); |
| 440 | let editNotification = { | 440 | let editNotification = { |
| 441 | notificationId: this.editedItem._id, | 441 | notificationId: this.editedItem._id, |
| 442 | title: this.editedItem.title, | 442 | title: this.editedItem.title, |
| 443 | description: this.editedItem.description | 443 | description: this.editedItem.description |
| 444 | }; | 444 | }; |
| 445 | this.editLoading = true; | 445 | this.editLoading = true; |
| 446 | http() | 446 | http() |
| 447 | .put("/updateNotification", editNotification) | 447 | .put("/updateNotification", editNotification) |
| 448 | .then(response => { | 448 | .then(response => { |
| 449 | this.snackbar = true; | 449 | this.snackbar = true; |
| 450 | this.text = response.data.message; | 450 | this.text = response.data.message; |
| 451 | this.color = "green"; | 451 | this.color = "green"; |
| 452 | this.getNotifications(); | 452 | this.getNotifications(); |
| 453 | this.close(); | 453 | this.close(); |
| 454 | this.editLoading = false; | 454 | this.editLoading = false; |
| 455 | }) | 455 | }) |
| 456 | .catch(error => { | 456 | .catch(error => { |
| 457 | this.editLoading = false; | 457 | this.editLoading = false; |
| 458 | this.snackbar = true; | 458 | this.snackbar = true; |
| 459 | this.color = "error"; | 459 | this.color = "error"; |
| 460 | this.text = error.response.data.message; | 460 | this.text = error.response.data.message; |
| 461 | }); | 461 | }); |
| 462 | }, | 462 | }, |
| 463 | displaySearch() { | 463 | displaySearch() { |
| 464 | (this.show = false), (this.showSearch = true); | 464 | (this.show = false), (this.showSearch = true); |
| 465 | }, | 465 | }, |
| 466 | closeSearch() { | 466 | closeSearch() { |
| 467 | this.showSearch = false; | 467 | this.showSearch = false; |
| 468 | this.show = true; | 468 | this.show = true; |
| 469 | this.search = ""; | 469 | this.search = ""; |
| 470 | } | 470 | } |
| 471 | }, | 471 | }, |
| 472 | mounted() { | 472 | mounted() { |
| 473 | this.getNotifications(); | 473 | this.getNotifications(); |
| 474 | } | 474 | } |
| 475 | }; | 475 | }; |
| 476 | </script> | 476 | </script> |
src/pages/Parent/parents.vue
| 1 | <template> | 1 | <template> |
| 2 | <v-container fluid class="body-color"> | 2 | <v-container fluid class="body-color"> |
| 3 | <v-dialog v-model="editParentDilaog" max-width="600px" scrollable> | 3 | <v-dialog v-model="editParentDilaog" max-width="600px" scrollable> |
| 4 | <v-card flat class="card-style pa-2" dark> | 4 | <v-card flat class="card-style pa-2" dark> |
| 5 | <v-layout> | 5 | <v-layout> |
| 6 | <v-flex xs12> | 6 | <v-flex xs12> |
| 7 | <label class="title text-xs-center">Edit Parents</label> | 7 | <label class="title text-xs-center">Edit Parents</label> |
| 8 | <v-icon size="24" class="right" @click="editParentDilaog = false">cancel</v-icon> | 8 | <v-icon size="24" class="right" @click="editParentDilaog = false">cancel</v-icon> |
| 9 | </v-flex> | 9 | </v-flex> |
| 10 | </v-layout> | 10 | </v-layout> |
| 11 | <v-card-text class="hidden-xs-only hidden-sm-only"> | 11 | <v-card-text class="hidden-xs-only hidden-sm-only"> |
| 12 | <v-form ref="editParentForm" v-model="validEditParent" lazy-validation> | 12 | <v-form ref="editParentForm" v-model="validEditParent" lazy-validation> |
| 13 | <v-flex xs12> | 13 | <v-flex xs12> |
| 14 | <v-layout> | 14 | <v-layout> |
| 15 | <v-flex xs3 sm4 class="pt-4 subheading"> | 15 | <v-flex xs3 sm4 class="pt-4 subheading"> |
| 16 | <label class="right">Email ID:</label> | 16 | <label class="right">Email ID:</label> |
| 17 | </v-flex> | 17 | </v-flex> |
| 18 | <v-flex xs8 sm6 class="ml-3"> | 18 | <v-flex xs8 sm6 class="ml-3"> |
| 19 | <v-text-field | 19 | <v-text-field |
| 20 | placeholder="fill your email" | 20 | placeholder="fill your email" |
| 21 | v-model="editedItem.email" | 21 | v-model="editedItem.email" |
| 22 | type="text" | 22 | type="text" |
| 23 | name="email" | 23 | name="email" |
| 24 | required | 24 | required |
| 25 | ></v-text-field> | 25 | ></v-text-field> |
| 26 | </v-flex> | 26 | </v-flex> |
| 27 | </v-layout> | 27 | </v-layout> |
| 28 | </v-flex> | 28 | </v-flex> |
| 29 | <v-flex xs12> | 29 | <v-flex xs12> |
| 30 | <v-layout> | 30 | <v-layout> |
| 31 | <v-flex xs3 sm4 class="pt-4 subheading"> | 31 | <v-flex xs3 sm4 class="pt-4 subheading"> |
| 32 | <label class="right">Father Name:</label> | 32 | <label class="right">Father Name:</label> |
| 33 | </v-flex> | 33 | </v-flex> |
| 34 | <v-flex xs8 sm6 class="ml-3"> | 34 | <v-flex xs8 sm6 class="ml-3"> |
| 35 | <v-text-field | 35 | <v-text-field |
| 36 | v-model="editedItem.fatherName" | 36 | v-model="editedItem.fatherName" |
| 37 | placeholder="fill your father Name" | 37 | placeholder="fill your father Name" |
| 38 | required | 38 | required |
| 39 | ></v-text-field> | 39 | ></v-text-field> |
| 40 | </v-flex> | 40 | </v-flex> |
| 41 | </v-layout> | 41 | </v-layout> |
| 42 | </v-flex> | 42 | </v-flex> |
| 43 | <v-flex xs12> | 43 | <v-flex xs12> |
| 44 | <v-layout> | 44 | <v-layout> |
| 45 | <v-flex xs3 sm4 class="pt-4 subheading"> | 45 | <v-flex xs3 sm4 class="pt-4 subheading"> |
| 46 | <label class="right">Father Cell No:</label> | 46 | <label class="right">Father Cell No:</label> |
| 47 | </v-flex> | 47 | </v-flex> |
| 48 | <v-flex xs8 sm6 class="ml-3"> | 48 | <v-flex xs8 sm6 class="ml-3"> |
| 49 | <v-text-field | 49 | <v-text-field |
| 50 | v-model="editedItem.fatherCellNo" | 50 | v-model="editedItem.fatherCellNo" |
| 51 | placeholder="fill your father Cell Number" | 51 | placeholder="fill your father Cell Number" |
| 52 | :rules="editFatherNoRule" | 52 | :rules="editFatherNoRule" |
| 53 | type="number" | 53 | type="number" |
| 54 | required | 54 | required |
| 55 | ></v-text-field> | 55 | ></v-text-field> |
| 56 | </v-flex> | 56 | </v-flex> |
| 57 | </v-layout> | 57 | </v-layout> |
| 58 | </v-flex> | 58 | </v-flex> |
| 59 | <v-flex xs12> | 59 | <v-flex xs12> |
| 60 | <v-layout> | 60 | <v-layout> |
| 61 | <v-flex xs3 sm4 class="pt-4 subheading"> | 61 | <v-flex xs3 sm4 class="pt-4 subheading"> |
| 62 | <label class="right">Father Profession:</label> | 62 | <label class="right">Father Profession:</label> |
| 63 | </v-flex> | 63 | </v-flex> |
| 64 | <v-flex xs8 sm6 class="ml-3"> | 64 | <v-flex xs8 sm6 class="ml-3"> |
| 65 | <v-text-field | 65 | <v-text-field |
| 66 | v-model="editedItem.fatherProfession" | 66 | v-model="editedItem.fatherProfession" |
| 67 | placeholder="fill your father Profession" | 67 | placeholder="fill your father Profession" |
| 68 | required | 68 | required |
| 69 | ></v-text-field> | 69 | ></v-text-field> |
| 70 | </v-flex> | 70 | </v-flex> |
| 71 | </v-layout> | 71 | </v-layout> |
| 72 | </v-flex> | 72 | </v-flex> |
| 73 | <v-flex xs12> | 73 | <v-flex xs12> |
| 74 | <v-layout> | 74 | <v-layout> |
| 75 | <v-flex xs3 sm4 class="pt-4 subheading"> | 75 | <v-flex xs3 sm4 class="pt-4 subheading"> |
| 76 | <label class="right">Mother Name:</label> | 76 | <label class="right">Mother Name:</label> |
| 77 | </v-flex> | 77 | </v-flex> |
| 78 | <v-flex xs8 sm6 class="ml-3"> | 78 | <v-flex xs8 sm6 class="ml-3"> |
| 79 | <v-text-field | 79 | <v-text-field |
| 80 | v-model="editedItem.motherName" | 80 | v-model="editedItem.motherName" |
| 81 | placeholder="fill your Mother Name" | 81 | placeholder="fill your Mother Name" |
| 82 | type="text" | 82 | type="text" |
| 83 | required | 83 | required |
| 84 | ></v-text-field> | 84 | ></v-text-field> |
| 85 | </v-flex> | 85 | </v-flex> |
| 86 | </v-layout> | 86 | </v-layout> |
| 87 | </v-flex> | 87 | </v-flex> |
| 88 | <v-flex xs12> | 88 | <v-flex xs12> |
| 89 | <v-layout> | 89 | <v-layout> |
| 90 | <v-flex xs3 sm4 class="pt-4 subheading"> | 90 | <v-flex xs3 sm4 class="pt-4 subheading"> |
| 91 | <label class="right">Mother Cell No:</label> | 91 | <label class="right">Mother Cell No:</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 | 94 | <v-text-field |
| 95 | v-model="editedItem.motherCellNo" | 95 | v-model="editedItem.motherCellNo" |
| 96 | placeholder="fill your Mother Cell Number" | 96 | placeholder="fill your Mother Cell Number" |
| 97 | type="number" | 97 | type="number" |
| 98 | required | 98 | required |
| 99 | ></v-text-field> | 99 | ></v-text-field> |
| 100 | </v-flex> | 100 | </v-flex> |
| 101 | </v-layout> | 101 | </v-layout> |
| 102 | </v-flex> | 102 | </v-flex> |
| 103 | <v-flex xs12> | 103 | <v-flex xs12> |
| 104 | <v-layout> | 104 | <v-layout> |
| 105 | <v-flex xs3 sm4 class="pt-4 subheading"> | 105 | <v-flex xs3 sm4 class="pt-4 subheading"> |
| 106 | <label class="right">Mother Profession:</label> | 106 | <label class="right">Mother Profession:</label> |
| 107 | </v-flex> | 107 | </v-flex> |
| 108 | <v-flex xs8 sm6 class="ml-3"> | 108 | <v-flex xs8 sm6 class="ml-3"> |
| 109 | <v-text-field | 109 | <v-text-field |
| 110 | v-model="editedItem.motherProfession" | 110 | v-model="editedItem.motherProfession" |
| 111 | placeholder="fill your Mother Profession" | 111 | placeholder="fill your Mother Profession" |
| 112 | type="text" | 112 | type="text" |
| 113 | required | 113 | required |
| 114 | ></v-text-field> | 114 | ></v-text-field> |
| 115 | </v-flex> | 115 | </v-flex> |
| 116 | </v-layout> | 116 | </v-layout> |
| 117 | </v-flex> | 117 | </v-flex> |
| 118 | <v-layout> | 118 | <v-layout> |
| 119 | <v-flex xs12 sm12> | 119 | <v-flex xs12 sm12> |
| 120 | <v-card-actions> | 120 | <v-card-actions> |
| 121 | <v-spacer></v-spacer> | 121 | <v-spacer></v-spacer> |
| 122 | <v-btn round dark @click="save" class="add-button">Save</v-btn> | 122 | <v-btn round dark @click="save" class="add-button">Save</v-btn> |
| 123 | <v-spacer></v-spacer> | 123 | <v-spacer></v-spacer> |
| 124 | </v-card-actions> | 124 | </v-card-actions> |
| 125 | </v-flex> | 125 | </v-flex> |
| 126 | </v-layout> | 126 | </v-layout> |
| 127 | </v-form> | 127 | </v-form> |
| 128 | </v-card-text> | 128 | </v-card-text> |
| 129 | <v-card-text style="height: 600px;" class="hidden-lg-only hidden-xl-only hidden-md-only"> | 129 | <v-card-text style="height: 600px;" class="hidden-lg-only hidden-xl-only hidden-md-only"> |
| 130 | <v-flex xs12> | 130 | <v-flex xs12> |
| 131 | <v-layout wrap> | 131 | <v-layout wrap> |
| 132 | <v-flex xs12 class="pt-4 subheading"> | 132 | <v-flex xs12 class="pt-4 subheading"> |
| 133 | <label>Email ID:</label> | 133 | <label>Email ID:</label> |
| 134 | </v-flex> | 134 | </v-flex> |
| 135 | <v-flex xs12> | 135 | <v-flex xs12> |
| 136 | <v-text-field | 136 | <v-text-field |
| 137 | placeholder="fill your email" | 137 | placeholder="fill your email" |
| 138 | v-model="editedItem.email" | 138 | v-model="editedItem.email" |
| 139 | type="text" | 139 | type="text" |
| 140 | name="email" | 140 | name="email" |
| 141 | required | 141 | required |
| 142 | ></v-text-field> | 142 | ></v-text-field> |
| 143 | </v-flex> | 143 | </v-flex> |
| 144 | </v-layout> | 144 | </v-layout> |
| 145 | </v-flex> | 145 | </v-flex> |
| 146 | <v-flex xs12> | 146 | <v-flex xs12> |
| 147 | <v-layout wrap> | 147 | <v-layout wrap> |
| 148 | <v-flex xs12 class="pt-4 subheading"> | 148 | <v-flex xs12 class="pt-4 subheading"> |
| 149 | <label>Father Name:</label> | 149 | <label>Father Name:</label> |
| 150 | </v-flex> | 150 | </v-flex> |
| 151 | <v-flex xs12> | 151 | <v-flex xs12> |
| 152 | <v-text-field | 152 | <v-text-field |
| 153 | v-model="editedItem.fatherName" | 153 | v-model="editedItem.fatherName" |
| 154 | placeholder="fill your father Name" | 154 | placeholder="fill your father Name" |
| 155 | required | 155 | required |
| 156 | ></v-text-field> | 156 | ></v-text-field> |
| 157 | </v-flex> | 157 | </v-flex> |
| 158 | </v-layout> | 158 | </v-layout> |
| 159 | </v-flex> | 159 | </v-flex> |
| 160 | <v-flex xs12> | 160 | <v-flex xs12> |
| 161 | <v-layout wrap> | 161 | <v-layout wrap> |
| 162 | <v-flex xs12 class="pt-4 subheading"> | 162 | <v-flex xs12 class="pt-4 subheading"> |
| 163 | <label>Father Cell No:</label> | 163 | <label>Father Cell No:</label> |
| 164 | </v-flex> | 164 | </v-flex> |
| 165 | <v-flex xs12> | 165 | <v-flex xs12> |
| 166 | <v-text-field | 166 | <v-text-field |
| 167 | v-model="editedItem.fatherCellNo" | 167 | v-model="editedItem.fatherCellNo" |
| 168 | placeholder="fill your father Cell Number" | 168 | placeholder="fill your father Cell Number" |
| 169 | type="number" | 169 | type="number" |
| 170 | required | 170 | required |
| 171 | ></v-text-field> | 171 | ></v-text-field> |
| 172 | </v-flex> | 172 | </v-flex> |
| 173 | </v-layout> | 173 | </v-layout> |
| 174 | </v-flex> | 174 | </v-flex> |
| 175 | <v-flex xs12> | 175 | <v-flex xs12> |
| 176 | <v-layout wrap> | 176 | <v-layout wrap> |
| 177 | <v-flex xs12 class="pt-4 subheading"> | 177 | <v-flex xs12 class="pt-4 subheading"> |
| 178 | <label>Father Profession:</label> | 178 | <label>Father Profession:</label> |
| 179 | </v-flex> | 179 | </v-flex> |
| 180 | <v-flex xs12> | 180 | <v-flex xs12> |
| 181 | <v-text-field | 181 | <v-text-field |
| 182 | v-model="editedItem.fatherProfession" | 182 | v-model="editedItem.fatherProfession" |
| 183 | placeholder="fill your father Profession" | 183 | placeholder="fill your father Profession" |
| 184 | required | 184 | required |
| 185 | ></v-text-field> | 185 | ></v-text-field> |
| 186 | </v-flex> | 186 | </v-flex> |
| 187 | </v-layout> | 187 | </v-layout> |
| 188 | </v-flex> | 188 | </v-flex> |
| 189 | <v-flex xs12> | 189 | <v-flex xs12> |
| 190 | <v-layout wrap> | 190 | <v-layout wrap> |
| 191 | <v-flex xs12 class="pt-4 subheading"> | 191 | <v-flex xs12 class="pt-4 subheading"> |
| 192 | <label>Mother Name:</label> | 192 | <label>Mother Name:</label> |
| 193 | </v-flex> | 193 | </v-flex> |
| 194 | <v-flex xs12> | 194 | <v-flex xs12> |
| 195 | <v-text-field | 195 | <v-text-field |
| 196 | v-model="editedItem.motherName" | 196 | v-model="editedItem.motherName" |
| 197 | placeholder="fill your Mother Name" | 197 | placeholder="fill your Mother Name" |
| 198 | type="text" | 198 | type="text" |
| 199 | required | 199 | required |
| 200 | ></v-text-field> | 200 | ></v-text-field> |
| 201 | </v-flex> | 201 | </v-flex> |
| 202 | </v-layout> | 202 | </v-layout> |
| 203 | </v-flex> | 203 | </v-flex> |
| 204 | <v-flex xs12> | 204 | <v-flex xs12> |
| 205 | <v-layout wrap> | 205 | <v-layout wrap> |
| 206 | <v-flex xs12 class="pt-4 subheading"> | 206 | <v-flex xs12 class="pt-4 subheading"> |
| 207 | <label>Mother Cell No:</label> | 207 | <label>Mother Cell No:</label> |
| 208 | </v-flex> | 208 | </v-flex> |
| 209 | <v-flex xs12> | 209 | <v-flex xs12> |
| 210 | <v-text-field | 210 | <v-text-field |
| 211 | v-model="editedItem.motherCellNo" | 211 | v-model="editedItem.motherCellNo" |
| 212 | placeholder="fill your Mother Cell Number" | 212 | placeholder="fill your Mother Cell Number" |
| 213 | type="number" | 213 | type="number" |
| 214 | required | 214 | required |
| 215 | ></v-text-field> | 215 | ></v-text-field> |
| 216 | </v-flex> | 216 | </v-flex> |
| 217 | </v-layout> | 217 | </v-layout> |
| 218 | </v-flex> | 218 | </v-flex> |
| 219 | <v-flex xs12> | 219 | <v-flex xs12> |
| 220 | <v-layout wrap> | 220 | <v-layout wrap> |
| 221 | <v-flex xs12 class="pt-4 subheading"> | 221 | <v-flex xs12 class="pt-4 subheading"> |
| 222 | <label>Mother Profession:</label> | 222 | <label>Mother Profession:</label> |
| 223 | </v-flex> | 223 | </v-flex> |
| 224 | <v-flex xs12> | 224 | <v-flex xs12> |
| 225 | <v-text-field | 225 | <v-text-field |
| 226 | v-model="editedItem.motherProfession" | 226 | v-model="editedItem.motherProfession" |
| 227 | placeholder="fill your Mother Profession" | 227 | placeholder="fill your Mother Profession" |
| 228 | type="text" | 228 | type="text" |
| 229 | required | 229 | required |
| 230 | ></v-text-field> | 230 | ></v-text-field> |
| 231 | </v-flex> | 231 | </v-flex> |
| 232 | </v-layout> | 232 | </v-layout> |
| 233 | </v-flex> | 233 | </v-flex> |
| 234 | <v-layout> | 234 | <v-layout> |
| 235 | <v-flex xs12 sm12> | 235 | <v-flex xs12 sm12> |
| 236 | <v-card-actions> | 236 | <v-card-actions> |
| 237 | <v-spacer></v-spacer> | 237 | <v-spacer></v-spacer> |
| 238 | <v-btn round dark @click="save" class="add-button">Save</v-btn> | 238 | <v-btn round dark @click="save" class="add-button">Save</v-btn> |
| 239 | <v-spacer></v-spacer> | 239 | <v-spacer></v-spacer> |
| 240 | </v-card-actions> | 240 | </v-card-actions> |
| 241 | </v-flex> | 241 | </v-flex> |
| 242 | </v-layout> | 242 | </v-layout> |
| 243 | </v-card-text> | 243 | </v-card-text> |
| 244 | </v-card> | 244 | </v-card> |
| 245 | </v-dialog> | 245 | </v-dialog> |
| 246 | 246 | ||
| 247 | <!-- ****** PROFILE VIEW Parents DEATILS ****** --> | 247 | <!-- ****** PROFILE VIEW Parents DEATILS ****** --> |
| 248 | 248 | ||
| 249 | <v-dialog v-model="profileParentDialog" max-width="500px" scrollable> | 249 | <v-dialog v-model="profileParentDialog" max-width="500px" scrollable> |
| 250 | <v-card class="card-style pa-2" dark> | 250 | <v-card class="card-style pa-2" dark> |
| 251 | <v-layout> | 251 | <v-layout> |
| 252 | <v-flex xs12> | 252 | <v-flex xs12> |
| 253 | <label class="title text-xs-center">View Parent</label> | 253 | <label class="title text-xs-center">View Parent</label> |
| 254 | <v-icon size="24" class="right" @click="profileParentDialog = false">cancel</v-icon> | 254 | <v-icon size="24" class="right" @click="profileParentDialog = false">cancel</v-icon> |
| 255 | </v-flex> | 255 | </v-flex> |
| 256 | </v-layout> | 256 | </v-layout> |
| 257 | <v-container grid-list-md> | 257 | <v-container grid-list-md> |
| 258 | <v-layout wrap> | 258 | <v-layout wrap> |
| 259 | <v-flex xs12> | 259 | <v-flex xs12> |
| 260 | <v-layout> | 260 | <v-layout> |
| 261 | <v-flex xs12 sm12> | 261 | <v-flex xs12 sm12> |
| 262 | <v-layout> | 262 | <v-layout> |
| 263 | <v-flex xs6> | 263 | <v-flex xs6> |
| 264 | <h5 class="right my-1"> | 264 | <h5 class="right my-1"> |
| 265 | <b>Email:</b> | 265 | <b>Email:</b> |
| 266 | </h5> | 266 | </h5> |
| 267 | </v-flex> | 267 | </v-flex> |
| 268 | <v-flex xs6> | 268 | <v-flex xs6> |
| 269 | <h5 class="my-1">{{ editedItem.email }}</h5> | 269 | <h5 class="my-1">{{ editedItem.email }}</h5> |
| 270 | </v-flex> | 270 | </v-flex> |
| 271 | </v-layout> | 271 | </v-layout> |
| 272 | </v-flex> | 272 | </v-flex> |
| 273 | </v-layout> | 273 | </v-layout> |
| 274 | <v-layout> | 274 | <v-layout> |
| 275 | <v-flex xs12> | 275 | <v-flex xs12> |
| 276 | <v-layout> | 276 | <v-layout> |
| 277 | <v-flex xs6> | 277 | <v-flex xs6> |
| 278 | <b> | 278 | <b> |
| 279 | <h5 class="right my-1"> | 279 | <h5 class="right my-1"> |
| 280 | <b>Fahter Name:</b> | 280 | <b>Fahter Name:</b> |
| 281 | </h5> | 281 | </h5> |
| 282 | </b> | 282 | </b> |
| 283 | </v-flex> | 283 | </v-flex> |
| 284 | <v-flex xs6> | 284 | <v-flex xs6> |
| 285 | <h5 class="my-1">{{ editedItem.fatherName }}</h5> | 285 | <h5 class="my-1">{{ editedItem.fatherName }}</h5> |
| 286 | </v-flex> | 286 | </v-flex> |
| 287 | </v-layout> | 287 | </v-layout> |
| 288 | </v-flex> | 288 | </v-flex> |
| 289 | </v-layout> | 289 | </v-layout> |
| 290 | <v-layout> | 290 | <v-layout> |
| 291 | <v-flex xs12> | 291 | <v-flex xs12> |
| 292 | <v-layout> | 292 | <v-layout> |
| 293 | <v-flex xs6> | 293 | <v-flex xs6> |
| 294 | <b> | 294 | <b> |
| 295 | <h5 class="right my-1"> | 295 | <h5 class="right my-1"> |
| 296 | <b>Mother Name:</b> | 296 | <b>Mother Name:</b> |
| 297 | </h5> | 297 | </h5> |
| 298 | </b> | 298 | </b> |
| 299 | </v-flex> | 299 | </v-flex> |
| 300 | <v-flex xs6> | 300 | <v-flex xs6> |
| 301 | <h5 class="my-1">{{ editedItem.motherName }}</h5> | 301 | <h5 class="my-1">{{ editedItem.motherName }}</h5> |
| 302 | </v-flex> | 302 | </v-flex> |
| 303 | </v-layout> | 303 | </v-layout> |
| 304 | </v-flex> | 304 | </v-flex> |
| 305 | </v-layout> | 305 | </v-layout> |
| 306 | <v-layout> | 306 | <v-layout> |
| 307 | <v-flex xs12> | 307 | <v-flex xs12> |
| 308 | <v-layout> | 308 | <v-layout> |
| 309 | <v-flex sm6 xs6> | 309 | <v-flex sm6 xs6> |
| 310 | <b> | 310 | <b> |
| 311 | <h5 class="right my-1"> | 311 | <h5 class="right my-1"> |
| 312 | <b>Father Cell No:</b> | 312 | <b>Father Cell No:</b> |
| 313 | </h5> | 313 | </h5> |
| 314 | </b> | 314 | </b> |
| 315 | </v-flex> | 315 | </v-flex> |
| 316 | <v-flex sm6 xs6> | 316 | <v-flex sm6 xs6> |
| 317 | <h5 class="my-1">{{ editedItem.fatherCellNo }}</h5> | 317 | <h5 class="my-1">{{ editedItem.fatherCellNo }}</h5> |
| 318 | </v-flex> | 318 | </v-flex> |
| 319 | </v-layout> | 319 | </v-layout> |
| 320 | </v-flex> | 320 | </v-flex> |
| 321 | </v-layout> | 321 | </v-layout> |
| 322 | <v-layout> | 322 | <v-layout> |
| 323 | <v-flex xs12> | 323 | <v-flex xs12> |
| 324 | <v-layout> | 324 | <v-layout> |
| 325 | <v-flex xs6> | 325 | <v-flex xs6> |
| 326 | <b> | 326 | <b> |
| 327 | <h5 class="right my-1"> | 327 | <h5 class="right my-1"> |
| 328 | <b>Mother Cell No:</b> | 328 | <b>Mother Cell No:</b> |
| 329 | </h5> | 329 | </h5> |
| 330 | </b> | 330 | </b> |
| 331 | </v-flex> | 331 | </v-flex> |
| 332 | <v-flex xs6> | 332 | <v-flex xs6> |
| 333 | <h5 class="my-1">{{ editedItem.motherCellNo }}</h5> | 333 | <h5 class="my-1">{{ editedItem.motherCellNo }}</h5> |
| 334 | </v-flex> | 334 | </v-flex> |
| 335 | </v-layout> | 335 | </v-layout> |
| 336 | </v-flex> | 336 | </v-flex> |
| 337 | </v-layout> | 337 | </v-layout> |
| 338 | <v-layout> | 338 | <v-layout> |
| 339 | <v-flex xs12> | 339 | <v-flex xs12> |
| 340 | <v-layout> | 340 | <v-layout> |
| 341 | <v-flex xs6> | 341 | <v-flex xs6> |
| 342 | <b> | 342 | <b> |
| 343 | <h5 class="right my-1 hidden-lg-only hidden-xl-only hidden-md-only"> | 343 | <h5 class="right my-1 hidden-lg-only hidden-xl-only hidden-md-only"> |
| 344 | <b>FatherProfession:</b> | 344 | <b>FatherProfession:</b> |
| 345 | </h5> | 345 | </h5> |
| 346 | <h5 class="right my-1 hidden-sm-only hidden-xs-only"> | 346 | <h5 class="right my-1 hidden-sm-only hidden-xs-only"> |
| 347 | <b>Father Profession:</b> | 347 | <b>Father Profession:</b> |
| 348 | </h5> | 348 | </h5> |
| 349 | </b> | 349 | </b> |
| 350 | </v-flex> | 350 | </v-flex> |
| 351 | <v-flex xs6> | 351 | <v-flex xs6> |
| 352 | <h5 class="my-1">{{ editedItem.fatherProfession }}</h5> | 352 | <h5 class="my-1">{{ editedItem.fatherProfession }}</h5> |
| 353 | </v-flex> | 353 | </v-flex> |
| 354 | </v-layout> | 354 | </v-layout> |
| 355 | </v-flex> | 355 | </v-flex> |
| 356 | </v-layout> | 356 | </v-layout> |
| 357 | <v-layout> | 357 | <v-layout> |
| 358 | <v-flex xs12> | 358 | <v-flex xs12> |
| 359 | <v-layout> | 359 | <v-layout> |
| 360 | <v-flex xs6> | 360 | <v-flex xs6> |
| 361 | <b> | 361 | <b> |
| 362 | <h5 class="right my-1 hidden-lg-only hidden-xl-only hidden-md-only"> | 362 | <h5 class="right my-1 hidden-lg-only hidden-xl-only hidden-md-only"> |
| 363 | <b>MotherProfession:</b> | 363 | <b>MotherProfession:</b> |
| 364 | </h5> | 364 | </h5> |
| 365 | <h5 class="right my-1 hidden-sm-only hidden-xs-only"> | 365 | <h5 class="right my-1 hidden-sm-only hidden-xs-only"> |
| 366 | <b>Mother Profession:</b> | 366 | <b>Mother Profession:</b> |
| 367 | </h5> | 367 | </h5> |
| 368 | </b> | 368 | </b> |
| 369 | </v-flex> | 369 | </v-flex> |
| 370 | <v-flex xs6> | 370 | <v-flex xs6> |
| 371 | <h5 class="my-1">{{ editedItem.motherProfession }}</h5> | 371 | <h5 class="my-1">{{ editedItem.motherProfession }}</h5> |
| 372 | </v-flex> | 372 | </v-flex> |
| 373 | </v-layout> | 373 | </v-layout> |
| 374 | </v-flex> | 374 | </v-flex> |
| 375 | </v-layout> | 375 | </v-layout> |
| 376 | </v-flex> | 376 | </v-flex> |
| 377 | </v-layout> | 377 | </v-layout> |
| 378 | </v-container> | 378 | </v-container> |
| 379 | </v-card> | 379 | </v-card> |
| 380 | </v-dialog> | 380 | </v-dialog> |
| 381 | <!-- ****** EXISTING-USERS Parents TABLE ****** --> | 381 | <!-- ****** EXISTING-USERS Parents TABLE ****** --> |
| 382 | <v-toolbar color="transparent" flat> | 382 | <v-toolbar color="transparent" flat> |
| 383 | <v-btn | 383 | <v-btn |
| 384 | fab | 384 | fab |
| 385 | dark | 385 | dark |
| 386 | class="open-dialog-button hidden-xl-only hidden-md-only hidden-lg-only" | 386 | class="open-dialog-button hidden-xl-only hidden-md-only hidden-lg-only" |
| 387 | small | 387 | small |
| 388 | @click="addParentDialog = true" | 388 | @click="addParentDialog = true" |
| 389 | > | 389 | > |
| 390 | <v-icon dark>add</v-icon> | 390 | <v-icon dark>add</v-icon> |
| 391 | </v-btn> | 391 | </v-btn> |
| 392 | <v-btn | 392 | <v-btn |
| 393 | round | 393 | round |
| 394 | class="open-dialog-button hidden-sm-only hidden-xs-only" | 394 | class="open-dialog-button hidden-sm-only hidden-xs-only" |
| 395 | dark | 395 | dark |
| 396 | @click="addParentDialog = true" | 396 | @click="addParentDialog = true" |
| 397 | > | 397 | > |
| 398 | <v-icon class="white--text pr-1" size="20">add</v-icon>Add Parent | 398 | <v-icon class="white--text pr-1" size="20">add</v-icon>Add Parent |
| 399 | </v-btn> | 399 | </v-btn> |
| 400 | <v-spacer></v-spacer> | 400 | <v-spacer></v-spacer> |
| 401 | <v-card-title class="body-1" v-show="show"> | 401 | <v-card-title class="body-1" v-show="show"> |
| 402 | <v-btn icon large flat @click="displaySearch"> | 402 | <v-btn icon large flat @click="displaySearch"> |
| 403 | <v-avatar size="27"> | 403 | <v-avatar size="27"> |
| 404 | <img src="/static/icon/dashboard icons-49.png" alt="icon" /> | 404 | <img src="/static/icon/search.png" alt="icon" /> |
| 405 | </v-avatar> | 405 | </v-avatar> |
| 406 | </v-btn> | 406 | </v-btn> |
| 407 | </v-card-title> | 407 | </v-card-title> |
| 408 | <v-flex xs8 sm8 md2 lg2 v-show="showSearch"> | 408 | <v-flex xs8 sm8 md2 lg2 v-show="showSearch"> |
| 409 | <v-layout> | 409 | <v-layout> |
| 410 | <v-text-field | 410 | <v-text-field |
| 411 | v-model="search" | 411 | v-model="search" |
| 412 | label="Search" | 412 | label="Search" |
| 413 | prepend-inner-icon="search" | 413 | prepend-inner-icon="search" |
| 414 | color="primary" | 414 | color="primary" |
| 415 | style="transition: 0.8s cubic-bezier(0.25, 0.8, 0.25, 1); !important" | 415 | style="transition: 0.8s cubic-bezier(0.25, 0.8, 0.25, 1); !important" |
| 416 | ></v-text-field> | 416 | ></v-text-field> |
| 417 | <v-icon @click="closeSearch" color="error">close</v-icon> | 417 | <v-icon @click="closeSearch" color="error">close</v-icon> |
| 418 | </v-layout> | 418 | </v-layout> |
| 419 | </v-flex> | 419 | </v-flex> |
| 420 | </v-toolbar> | 420 | </v-toolbar> |
| 421 | <v-data-table | 421 | <v-data-table |
| 422 | :headers="headers" | 422 | :headers="headers" |
| 423 | :items="parentsList" | 423 | :items="parentsList" |
| 424 | :pagination.sync="pagination" | 424 | :pagination.sync="pagination" |
| 425 | :search="search" | 425 | :search="search" |
| 426 | > | 426 | > |
| 427 | <template slot="items" slot-scope="props"> | 427 | <template slot="items" slot-scope="props"> |
| 428 | <tr class="tr"> | 428 | <tr class="tr"> |
| 429 | <td class="text-xs-center td td-row">{{ props.index + 1}}</td> | 429 | <td class="text-xs-center td td-row">{{ props.index + 1}}</td> |
| 430 | <td class="text-xs-center td td-row">{{ props.item.email }}</td> | 430 | <td class="text-xs-center td td-row">{{ props.item.email }}</td> |
| 431 | <td class="text-xs-center td td-row">{{ props.item.fatherName }}</td> | 431 | <td class="text-xs-center td td-row">{{ props.item.fatherName }}</td> |
| 432 | <td class="text-xs-center td td-row">{{ props.item.fatherCellNo }}</td> | 432 | <td class="text-xs-center td td-row">{{ props.item.fatherCellNo }}</td> |
| 433 | <td class="text-xs-center td td-row">{{ props.item.motherName }}</td> | 433 | <td class="text-xs-center td td-row">{{ props.item.motherName }}</td> |
| 434 | <td class="text-xs-center td td-row">{{ props.item.motherCellNo }}</td> | 434 | <td class="text-xs-center td td-row">{{ props.item.motherCellNo }}</td> |
| 435 | <td class="text-xs-center td td-row"> | 435 | <td class="text-xs-center td td-row"> |
| 436 | <span> | 436 | <span> |
| 437 | <v-tooltip top> | 437 | <v-tooltip top> |
| 438 | <img | 438 | <img |
| 439 | slot="activator" | 439 | slot="activator" |
| 440 | style="cursor:pointer; width:25px; height:25px; " | 440 | style="cursor:pointer; width:25px; height:25px; " |
| 441 | class="mr-3" | 441 | class="mr-3" |
| 442 | @click="profile(props.item)" | 442 | @click="profile(props.item)" |
| 443 | src="/static/icon/dashboard icons-47.png" | 443 | src="/static/icon/view.png" |
| 444 | /> | 444 | /> |
| 445 | <span>View</span> | 445 | <span>View</span> |
| 446 | </v-tooltip> | 446 | </v-tooltip> |
| 447 | <v-tooltip top> | 447 | <v-tooltip top> |
| 448 | <img | 448 | <img |
| 449 | slot="activator" | 449 | slot="activator" |
| 450 | style="cursor:pointer; width:20px; height:18px; " | 450 | style="cursor:pointer; width:20px; height:18px; " |
| 451 | @click="editItem(props.item)" | 451 | @click="editItem(props.item)" |
| 452 | src="/static/icon/dashboard icons-50.png" | 452 | src="/static/icon/edit.png" |
| 453 | class="mr-3" | 453 | class="mr-3" |
| 454 | /> | 454 | /> |
| 455 | <span>Edit</span> | 455 | <span>Edit</span> |
| 456 | </v-tooltip> | 456 | </v-tooltip> |
| 457 | </span> | 457 | </span> |
| 458 | </td> | 458 | </td> |
| 459 | </tr> | 459 | </tr> |
| 460 | </template> | 460 | </template> |
| 461 | <v-alert | 461 | <v-alert |
| 462 | slot="no-results" | 462 | slot="no-results" |
| 463 | :value="true" | 463 | :value="true" |
| 464 | color="error" | 464 | color="error" |
| 465 | icon="warning" | 465 | icon="warning" |
| 466 | >Your search for "{{ search }}" found no results.</v-alert> | 466 | >Your search for "{{ search }}" found no results.</v-alert> |
| 467 | </v-data-table> | 467 | </v-data-table> |
| 468 | 468 | ||
| 469 | <!-- ****** ADD PARENTS DETAILS****** --> | 469 | <!-- ****** ADD PARENTS DETAILS****** --> |
| 470 | <v-dialog v-model="addParentDialog" max-width="1100px"> | 470 | <v-dialog v-model="addParentDialog" max-width="1100px"> |
| 471 | <v-card flat class="card-style pa-2" dark> | 471 | <v-card flat class="card-style pa-2" dark> |
| 472 | <v-layout> | 472 | <v-layout> |
| 473 | <v-flex xs12> | 473 | <v-flex xs12> |
| 474 | <label class="title text-xs-center">Add Parent</label> | 474 | <label class="title text-xs-center">Add Parent</label> |
| 475 | <v-icon size="24" class="right" @click="addParentDialog = false">cancel</v-icon> | 475 | <v-icon size="24" class="right" @click="addParentDialog = false">cancel</v-icon> |
| 476 | </v-flex> | 476 | </v-flex> |
| 477 | </v-layout> | 477 | </v-layout> |
| 478 | <v-container fluid fill-height> | 478 | <v-container fluid fill-height> |
| 479 | <v-layout align-center> | 479 | <v-layout align-center> |
| 480 | <v-flex xs12 sm12> | 480 | <v-flex xs12 sm12> |
| 481 | <v-form ref="parentForm" v-model="valid" lazy-validation> | 481 | <v-form ref="parentForm" v-model="valid" lazy-validation> |
| 482 | <v-container fluid class="hidden-xs-only hidden-sm-only"> | 482 | <v-container fluid class="hidden-xs-only hidden-sm-only"> |
| 483 | <v-layout> | 483 | <v-layout> |
| 484 | <v-flex xs12 sm6> | 484 | <v-flex xs12 sm6> |
| 485 | <v-layout> | 485 | <v-layout> |
| 486 | <v-flex xs4 class="pt-4 subheading"> | 486 | <v-flex xs4 class="pt-4 subheading"> |
| 487 | <label class="right">Father Cell No:</label> | 487 | <label class="right">Father Cell No:</label> |
| 488 | </v-flex> | 488 | </v-flex> |
| 489 | <v-flex xs8 class="ml-3"> | 489 | <v-flex xs8 class="ml-3"> |
| 490 | <v-text-field | 490 | <v-text-field |
| 491 | v-model="parentData.fatherCellNo" | 491 | v-model="parentData.fatherCellNo" |
| 492 | placeholder="fill your father Cell Number" | 492 | placeholder="fill your father Cell Number" |
| 493 | type="number" | 493 | type="number" |
| 494 | :rules="fatheCellNoRules" | 494 | :rules="fatheCellNoRules" |
| 495 | counter="10" | 495 | counter="10" |
| 496 | required | 496 | required |
| 497 | ></v-text-field> | 497 | ></v-text-field> |
| 498 | </v-flex> | 498 | </v-flex> |
| 499 | </v-layout> | 499 | </v-layout> |
| 500 | </v-flex> | 500 | </v-flex> |
| 501 | <v-flex xs12 sm6> | 501 | <v-flex xs12 sm6> |
| 502 | <v-layout> | 502 | <v-layout> |
| 503 | <v-flex xs4 class="pt-4 subheading"> | 503 | <v-flex xs4 class="pt-4 subheading"> |
| 504 | <label class="right">Parent Email Id:</label> | 504 | <label class="right">Parent Email Id:</label> |
| 505 | </v-flex> | 505 | </v-flex> |
| 506 | <v-flex xs8 class="ml-3"> | 506 | <v-flex xs8 class="ml-3"> |
| 507 | <v-text-field | 507 | <v-text-field |
| 508 | placeholder="fill Parent email" | 508 | placeholder="fill Parent email" |
| 509 | v-model="parentData.email" | 509 | v-model="parentData.email" |
| 510 | type="text" | 510 | type="text" |
| 511 | required | 511 | required |
| 512 | ></v-text-field> | 512 | ></v-text-field> |
| 513 | </v-flex> | 513 | </v-flex> |
| 514 | </v-layout> | 514 | </v-layout> |
| 515 | </v-flex> | 515 | </v-flex> |
| 516 | </v-layout> | 516 | </v-layout> |
| 517 | <v-layout> | 517 | <v-layout> |
| 518 | <v-flex xs12 sm6> | 518 | <v-flex xs12 sm6> |
| 519 | <v-layout> | 519 | <v-layout> |
| 520 | <v-flex xs4 class="pt-4 subheading"> | 520 | <v-flex xs4 class="pt-4 subheading"> |
| 521 | <label class="right">Father Name:</label> | 521 | <label class="right">Father Name:</label> |
| 522 | </v-flex> | 522 | </v-flex> |
| 523 | <v-flex xs8 class="ml-3"> | 523 | <v-flex xs8 class="ml-3"> |
| 524 | <v-text-field | 524 | <v-text-field |
| 525 | v-model="parentData.fatherName" | 525 | v-model="parentData.fatherName" |
| 526 | placeholder="Fill your father Name" | 526 | placeholder="Fill your father Name" |
| 527 | required | 527 | required |
| 528 | ></v-text-field> | 528 | ></v-text-field> |
| 529 | </v-flex> | 529 | </v-flex> |
| 530 | </v-layout> | 530 | </v-layout> |
| 531 | </v-flex> | 531 | </v-flex> |
| 532 | <v-flex xs12 sm6> | 532 | <v-flex xs12 sm6> |
| 533 | <v-layout> | 533 | <v-layout> |
| 534 | <v-flex xs4 class="pt-4 subheading"> | 534 | <v-flex xs4 class="pt-4 subheading"> |
| 535 | <label class="right">Father Profession:</label> | 535 | <label class="right">Father Profession:</label> |
| 536 | </v-flex> | 536 | </v-flex> |
| 537 | <v-flex xs8 class="ml-3"> | 537 | <v-flex xs8 class="ml-3"> |
| 538 | <v-text-field | 538 | <v-text-field |
| 539 | v-model="parentData.fatherProfession" | 539 | v-model="parentData.fatherProfession" |
| 540 | placeholder="fill your father Profession" | 540 | placeholder="fill your father Profession" |
| 541 | required | 541 | required |
| 542 | ></v-text-field> | 542 | ></v-text-field> |
| 543 | </v-flex> | 543 | </v-flex> |
| 544 | </v-layout> | 544 | </v-layout> |
| 545 | </v-flex> | 545 | </v-flex> |
| 546 | </v-layout> | 546 | </v-layout> |
| 547 | <v-layout> | 547 | <v-layout> |
| 548 | <v-flex xs12 sm6> | 548 | <v-flex xs12 sm6> |
| 549 | <v-layout> | 549 | <v-layout> |
| 550 | <v-flex xs4 class="pt-4 subheading"> | 550 | <v-flex xs4 class="pt-4 subheading"> |
| 551 | <label class="right">Mother Name:</label> | 551 | <label class="right">Mother Name:</label> |
| 552 | </v-flex> | 552 | </v-flex> |
| 553 | <v-flex xs8 class="ml-3"> | 553 | <v-flex xs8 class="ml-3"> |
| 554 | <v-text-field | 554 | <v-text-field |
| 555 | v-model="parentData.motherName" | 555 | v-model="parentData.motherName" |
| 556 | placeholder="fill your Mother Name" | 556 | placeholder="fill your Mother Name" |
| 557 | type="text" | 557 | type="text" |
| 558 | required | 558 | required |
| 559 | ></v-text-field> | 559 | ></v-text-field> |
| 560 | </v-flex> | 560 | </v-flex> |
| 561 | </v-layout> | 561 | </v-layout> |
| 562 | </v-flex> | 562 | </v-flex> |
| 563 | <v-flex xs12 sm6> | 563 | <v-flex xs12 sm6> |
| 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">Mother Cell No:</label> | 566 | <label class="right">Mother Cell No:</label> |
| 567 | </v-flex> | 567 | </v-flex> |
| 568 | <v-flex xs8 class="ml-3"> | 568 | <v-flex xs8 class="ml-3"> |
| 569 | <v-text-field | 569 | <v-text-field |
| 570 | v-model="parentData.motherCellNo" | 570 | v-model="parentData.motherCellNo" |
| 571 | placeholder="fill your Mother Cell Number" | 571 | placeholder="fill your Mother Cell Number" |
| 572 | counter="10" | 572 | counter="10" |
| 573 | type="number" | 573 | type="number" |
| 574 | required | 574 | required |
| 575 | ></v-text-field> | 575 | ></v-text-field> |
| 576 | </v-flex> | 576 | </v-flex> |
| 577 | </v-layout> | 577 | </v-layout> |
| 578 | </v-flex> | 578 | </v-flex> |
| 579 | </v-layout> | 579 | </v-layout> |
| 580 | <v-layout> | 580 | <v-layout> |
| 581 | <v-flex xs12 sm6> | 581 | <v-flex xs12 sm6> |
| 582 | <v-layout> | 582 | <v-layout> |
| 583 | <v-flex xs4 class="pt-4 subheading"> | 583 | <v-flex xs4 class="pt-4 subheading"> |
| 584 | <label class="right">Mother Profession:</label> | 584 | <label class="right">Mother Profession:</label> |
| 585 | </v-flex> | 585 | </v-flex> |
| 586 | <v-flex xs8 class="ml-3"> | 586 | <v-flex xs8 class="ml-3"> |
| 587 | <v-text-field | 587 | <v-text-field |
| 588 | v-model="parentData.motherProfession" | 588 | v-model="parentData.motherProfession" |
| 589 | placeholder="fill your Mother Profession" | 589 | placeholder="fill your Mother Profession" |
| 590 | type="text" | 590 | type="text" |
| 591 | required | 591 | required |
| 592 | ></v-text-field> | 592 | ></v-text-field> |
| 593 | </v-flex> | 593 | </v-flex> |
| 594 | </v-layout> | 594 | </v-layout> |
| 595 | </v-flex> | 595 | </v-flex> |
| 596 | </v-layout> | 596 | </v-layout> |
| 597 | <v-flex xs12 sm12> | 597 | <v-flex xs12 sm12> |
| 598 | <v-layout> | 598 | <v-layout> |
| 599 | <v-flex xs12 sm12> | 599 | <v-flex xs12 sm12> |
| 600 | <v-btn | 600 | <v-btn |
| 601 | class="right add-button" | 601 | class="right add-button" |
| 602 | @click="submitParentDetails" | 602 | @click="submitParentDetails" |
| 603 | round | 603 | round |
| 604 | dark | 604 | dark |
| 605 | :loading="loading" | 605 | :loading="loading" |
| 606 | v-show="showParent" | 606 | v-show="showParent" |
| 607 | >Add</v-btn> | 607 | >Add</v-btn> |
| 608 | <v-btn @click="clear" round dark class="clear-button right">Clear</v-btn> | 608 | <v-btn @click="clear" round dark class="clear-button right">Clear</v-btn> |
| 609 | </v-flex> | 609 | </v-flex> |
| 610 | </v-layout> | 610 | </v-layout> |
| 611 | </v-flex> | 611 | </v-flex> |
| 612 | </v-container> | 612 | </v-container> |
| 613 | <v-container fluid class="hidden-lg-only hidden-xl-only hidden-md-only"> | 613 | <v-container fluid class="hidden-lg-only hidden-xl-only hidden-md-only"> |
| 614 | <v-layout wrap> | 614 | <v-layout wrap> |
| 615 | <v-flex xs12 sm6> | 615 | <v-flex xs12 sm6> |
| 616 | <v-layout wrap> | 616 | <v-layout wrap> |
| 617 | <v-flex xs12 class="pt-4 subheading"> | 617 | <v-flex xs12 class="pt-4 subheading"> |
| 618 | <label>Father Cell No:</label> | 618 | <label>Father Cell No:</label> |
| 619 | </v-flex> | 619 | </v-flex> |
| 620 | <v-flex xs12> | 620 | <v-flex xs12> |
| 621 | <v-text-field | 621 | <v-text-field |
| 622 | v-model="parentData.fatherCellNo" | 622 | v-model="parentData.fatherCellNo" |
| 623 | :rules="fatheCellNoRules" | 623 | :rules="fatheCellNoRules" |
| 624 | counter="10" | 624 | counter="10" |
| 625 | placeholder="fill your father Cell Number" | 625 | placeholder="fill your father Cell Number" |
| 626 | type="number" | 626 | type="number" |
| 627 | required | 627 | required |
| 628 | ></v-text-field> | 628 | ></v-text-field> |
| 629 | </v-flex> | 629 | </v-flex> |
| 630 | </v-layout> | 630 | </v-layout> |
| 631 | </v-flex> | 631 | </v-flex> |
| 632 | <v-flex xs12 sm6> | 632 | <v-flex xs12 sm6> |
| 633 | <v-layout wrap> | 633 | <v-layout wrap> |
| 634 | <v-flex xs12 class="pt-4 subheading"> | 634 | <v-flex xs12 class="pt-4 subheading"> |
| 635 | <label>Parent Email Id:</label> | 635 | <label>Parent Email Id:</label> |
| 636 | </v-flex> | 636 | </v-flex> |
| 637 | <v-flex xs12> | 637 | <v-flex xs12> |
| 638 | <v-text-field | 638 | <v-text-field |
| 639 | placeholder="fill Parent email" | 639 | placeholder="fill Parent email" |
| 640 | v-model="parentData.email" | 640 | v-model="parentData.email" |
| 641 | type="text" | 641 | type="text" |
| 642 | required | 642 | required |
| 643 | ></v-text-field> | 643 | ></v-text-field> |
| 644 | </v-flex> | 644 | </v-flex> |
| 645 | </v-layout> | 645 | </v-layout> |
| 646 | </v-flex> | 646 | </v-flex> |
| 647 | </v-layout> | 647 | </v-layout> |
| 648 | <v-layout wrap> | 648 | <v-layout wrap> |
| 649 | <v-flex xs12 sm6> | 649 | <v-flex xs12 sm6> |
| 650 | <v-layout wrap> | 650 | <v-layout wrap> |
| 651 | <v-flex xs12 class="pt-4 subheading"> | 651 | <v-flex xs12 class="pt-4 subheading"> |
| 652 | <label>Father Name:</label> | 652 | <label>Father Name:</label> |
| 653 | </v-flex> | 653 | </v-flex> |
| 654 | <v-flex xs12> | 654 | <v-flex xs12> |
| 655 | <v-text-field | 655 | <v-text-field |
| 656 | v-model="parentData.fatherName" | 656 | v-model="parentData.fatherName" |
| 657 | placeholder="Fill your father Name" | 657 | placeholder="Fill your father Name" |
| 658 | required | 658 | required |
| 659 | ></v-text-field> | 659 | ></v-text-field> |
| 660 | </v-flex> | 660 | </v-flex> |
| 661 | </v-layout> | 661 | </v-layout> |
| 662 | </v-flex> | 662 | </v-flex> |
| 663 | <v-flex xs12 sm6> | 663 | <v-flex xs12 sm6> |
| 664 | <v-layout wrap> | 664 | <v-layout wrap> |
| 665 | <v-flex xs12 class="pt-4 subheading"> | 665 | <v-flex xs12 class="pt-4 subheading"> |
| 666 | <label>Father Profession:</label> | 666 | <label>Father Profession:</label> |
| 667 | </v-flex> | 667 | </v-flex> |
| 668 | <v-flex xs12> | 668 | <v-flex xs12> |
| 669 | <v-text-field | 669 | <v-text-field |
| 670 | v-model="parentData.fatherProfession" | 670 | v-model="parentData.fatherProfession" |
| 671 | placeholder="fill your father Profession" | 671 | placeholder="fill your father Profession" |
| 672 | required | 672 | required |
| 673 | ></v-text-field> | 673 | ></v-text-field> |
| 674 | </v-flex> | 674 | </v-flex> |
| 675 | </v-layout> | 675 | </v-layout> |
| 676 | </v-flex> | 676 | </v-flex> |
| 677 | </v-layout> | 677 | </v-layout> |
| 678 | <v-layout wrap> | 678 | <v-layout wrap> |
| 679 | <v-flex xs12 sm6> | 679 | <v-flex xs12 sm6> |
| 680 | <v-layout wrap> | 680 | <v-layout wrap> |
| 681 | <v-flex xs12 class="pt-4 subheading"> | 681 | <v-flex xs12 class="pt-4 subheading"> |
| 682 | <label>Mother Name:</label> | 682 | <label>Mother Name:</label> |
| 683 | </v-flex> | 683 | </v-flex> |
| 684 | <v-flex xs12> | 684 | <v-flex xs12> |
| 685 | <v-text-field | 685 | <v-text-field |
| 686 | v-model="parentData.motherName" | 686 | v-model="parentData.motherName" |
| 687 | placeholder="fill your Mother Name" | 687 | placeholder="fill your Mother Name" |
| 688 | type="text" | 688 | type="text" |
| 689 | required | 689 | required |
| 690 | ></v-text-field> | 690 | ></v-text-field> |
| 691 | </v-flex> | 691 | </v-flex> |
| 692 | </v-layout> | 692 | </v-layout> |
| 693 | </v-flex> | 693 | </v-flex> |
| 694 | <v-flex xs12 sm6> | 694 | <v-flex xs12 sm6> |
| 695 | <v-layout wrap> | 695 | <v-layout wrap> |
| 696 | <v-flex xs42 class="pt-4 subheading"> | 696 | <v-flex xs42 class="pt-4 subheading"> |
| 697 | <label>Mother Cell No:</label> | 697 | <label>Mother Cell No:</label> |
| 698 | </v-flex> | 698 | </v-flex> |
| 699 | <v-flex xs12> | 699 | <v-flex xs12> |
| 700 | <v-text-field | 700 | <v-text-field |
| 701 | v-model="parentData.motherCellNo" | 701 | v-model="parentData.motherCellNo" |
| 702 | placeholder="fill your Mother Cell Number" | 702 | placeholder="fill your Mother Cell Number" |
| 703 | type="number" | 703 | type="number" |
| 704 | required | 704 | required |
| 705 | ></v-text-field> | 705 | ></v-text-field> |
| 706 | </v-flex> | 706 | </v-flex> |
| 707 | </v-layout> | 707 | </v-layout> |
| 708 | </v-flex> | 708 | </v-flex> |
| 709 | </v-layout> | 709 | </v-layout> |
| 710 | <v-layout wrap> | 710 | <v-layout wrap> |
| 711 | <v-flex xs12 sm6> | 711 | <v-flex xs12 sm6> |
| 712 | <v-layout wrap> | 712 | <v-layout wrap> |
| 713 | <v-flex xs12 class="pt-4 subheading"> | 713 | <v-flex xs12 class="pt-4 subheading"> |
| 714 | <label>Mother Profession:</label> | 714 | <label>Mother Profession:</label> |
| 715 | </v-flex> | 715 | </v-flex> |
| 716 | <v-flex xs12> | 716 | <v-flex xs12> |
| 717 | <v-text-field | 717 | <v-text-field |
| 718 | v-model="parentData.motherProfession" | 718 | v-model="parentData.motherProfession" |
| 719 | placeholder="fill your Mother Profession" | 719 | placeholder="fill your Mother Profession" |
| 720 | type="text" | 720 | type="text" |
| 721 | required | 721 | required |
| 722 | ></v-text-field> | 722 | ></v-text-field> |
| 723 | </v-flex> | 723 | </v-flex> |
| 724 | </v-layout> | 724 | </v-layout> |
| 725 | </v-flex> | 725 | </v-flex> |
| 726 | </v-layout> | 726 | </v-layout> |
| 727 | <v-flex xs12 sm12> | 727 | <v-flex xs12 sm12> |
| 728 | <v-layout> | 728 | <v-layout> |
| 729 | <v-flex xs6 sm6 offset-sm1> | 729 | <v-flex xs6 sm6 offset-sm1> |
| 730 | <v-btn @click="clear" class="clear-button" round dark>clear</v-btn> | 730 | <v-btn @click="clear" class="clear-button" round dark>clear</v-btn> |
| 731 | </v-flex> | 731 | </v-flex> |
| 732 | <v-flex xs6 sm6> | 732 | <v-flex xs6 sm6> |
| 733 | <v-btn | 733 | <v-btn |
| 734 | class="add-button" | 734 | class="add-button" |
| 735 | @click="submitParentDetails" | 735 | @click="submitParentDetails" |
| 736 | round | 736 | round |
| 737 | dark | 737 | dark |
| 738 | :loading="loading" | 738 | :loading="loading" |
| 739 | v-show="showParent" | 739 | v-show="showParent" |
| 740 | >Add</v-btn> | 740 | >Add</v-btn> |
| 741 | </v-flex> | 741 | </v-flex> |
| 742 | </v-layout> | 742 | </v-layout> |
| 743 | </v-flex> | 743 | </v-flex> |
| 744 | </v-container> | 744 | </v-container> |
| 745 | </v-form> | 745 | </v-form> |
| 746 | </v-flex> | 746 | </v-flex> |
| 747 | </v-layout> | 747 | </v-layout> |
| 748 | </v-container> | 748 | </v-container> |
| 749 | </v-card> | 749 | </v-card> |
| 750 | </v-dialog> | 750 | </v-dialog> |
| 751 | <div class="loader" v-if="showLoader"> | 751 | <div class="loader" v-if="showLoader"> |
| 752 | <v-progress-circular indeterminate color="white"></v-progress-circular> | 752 | <v-progress-circular indeterminate color="white"></v-progress-circular> |
| 753 | </div> | 753 | </div> |
| 754 | <v-snackbar | 754 | <v-snackbar |
| 755 | :timeout="timeout" | 755 | :timeout="timeout" |
| 756 | :top="y === 'top'" | 756 | :top="y === 'top'" |
| 757 | :right="x === 'right'" | 757 | :right="x === 'right'" |
| 758 | :vertical="mode === 'vertical'" | 758 | :vertical="mode === 'vertical'" |
| 759 | v-model="snackbar" | 759 | v-model="snackbar" |
| 760 | color="success" | 760 | color="success" |
| 761 | >{{ text }}</v-snackbar> | 761 | >{{ text }}</v-snackbar> |
| 762 | </v-container> | 762 | </v-container> |
| 763 | </template> | 763 | </template> |
| 764 | 764 | ||
| 765 | <script> | 765 | <script> |
| 766 | import http from "@/Services/http.js"; | 766 | import http from "@/Services/http.js"; |
| 767 | import Util from "@/util"; | 767 | import Util from "@/util"; |
| 768 | import moment from "moment"; | 768 | import moment from "moment"; |
| 769 | 769 | ||
| 770 | export default { | 770 | export default { |
| 771 | data: () => ({ | 771 | data: () => ({ |
| 772 | showParent: true, | 772 | showParent: true, |
| 773 | snackbar: false, | 773 | snackbar: false, |
| 774 | y: "top", | 774 | y: "top", |
| 775 | x: "right", | 775 | x: "right", |
| 776 | color: "", | 776 | color: "", |
| 777 | mode: "", | 777 | mode: "", |
| 778 | timeout: 3000, | 778 | timeout: 3000, |
| 779 | text: "", | 779 | text: "", |
| 780 | show: true, | 780 | show: true, |
| 781 | showSearch: false, | 781 | showSearch: false, |
| 782 | showLoader: false, | 782 | showLoader: false, |
| 783 | loading: false, | 783 | loading: false, |
| 784 | date: null, | 784 | date: null, |
| 785 | search: "", | 785 | search: "", |
| 786 | addParentDialog: false, | 786 | addParentDialog: false, |
| 787 | menu: false, | 787 | menu: false, |
| 788 | menu1: false, | 788 | menu1: false, |
| 789 | editParentDilaog: false, | 789 | editParentDilaog: false, |
| 790 | profileParentDialog: false, | 790 | profileParentDialog: false, |
| 791 | viewProfileParentDialog: false, | 791 | viewProfileParentDialog: false, |
| 792 | valid: true, | 792 | valid: true, |
| 793 | validEditParent: true, | 793 | validEditParent: true, |
| 794 | pagination: { | 794 | pagination: { |
| 795 | rowsPerPage: 10 | 795 | rowsPerPage: 10 |
| 796 | }, | 796 | }, |
| 797 | fatherNameRules: [v => !!v || " Father Name is required"], | 797 | fatherNameRules: [v => !!v || " Father Name is required"], |
| 798 | fatheCellNoRules: [ | 798 | fatheCellNoRules: [ |
| 799 | v => !!v || " father Cell Number is required", | 799 | v => !!v || " father Cell Number is required", |
| 800 | v => v <= 10000000000 || "Max 10 characters is required" | 800 | v => v <= 10000000000 || "Max 10 characters is required" |
| 801 | ], | 801 | ], |
| 802 | editFatherNoRule: [ | 802 | editFatherNoRule: [ |
| 803 | v => !!v || " father Cell Number is required", | 803 | v => !!v || " father Cell Number is required", |
| 804 | v => v <= 10000000000 || "Max 10 characters is required" | 804 | v => v <= 10000000000 || "Max 10 characters is required" |
| 805 | ], | 805 | ], |
| 806 | 806 | ||
| 807 | editfatherCellNo: [v => !!v || " Father Name is required"], | 807 | editfatherCellNo: [v => !!v || " Father Name is required"], |
| 808 | errorMessages: "", | 808 | errorMessages: "", |
| 809 | emailRules: [ | 809 | emailRules: [ |
| 810 | v => !!v || "E-mail is required", | 810 | v => !!v || "E-mail is required", |
| 811 | v => | 811 | v => |
| 812 | /^\w+([.-]?\w+)*@\w+([.-]?\w+)*(\.\w{2,3})+$/.test(v) || | 812 | /^\w+([.-]?\w+)*@\w+([.-]?\w+)*(\.\w{2,3})+$/.test(v) || |
| 813 | "E-mail must be valid" | 813 | "E-mail must be valid" |
| 814 | ], | 814 | ], |
| 815 | headers: [ | 815 | headers: [ |
| 816 | { | 816 | { |
| 817 | text: "No", | 817 | text: "No", |
| 818 | align: "center", | 818 | align: "center", |
| 819 | sortable: false, | 819 | sortable: false, |
| 820 | value: "No" | 820 | value: "No" |
| 821 | }, | 821 | }, |
| 822 | { text: "Email", value: "email", sortable: false, align: "center" }, | 822 | { text: "Email", value: "email", sortable: false, align: "center" }, |
| 823 | { | 823 | { |
| 824 | text: "Father Name", | 824 | text: "Father Name", |
| 825 | value: "fatherName", | 825 | value: "fatherName", |
| 826 | sortable: false, | 826 | sortable: false, |
| 827 | align: "center" | 827 | align: "center" |
| 828 | }, | 828 | }, |
| 829 | { | 829 | { |
| 830 | text: "Father Cell No", | 830 | text: "Father Cell No", |
| 831 | value: "fatherName", | 831 | value: "fatherName", |
| 832 | sortable: false, | 832 | sortable: false, |
| 833 | align: "center" | 833 | align: "center" |
| 834 | }, | 834 | }, |
| 835 | { | 835 | { |
| 836 | text: "Mother Name", | 836 | text: "Mother Name", |
| 837 | value: "motherName", | 837 | value: "motherName", |
| 838 | sortable: false, | 838 | sortable: false, |
| 839 | align: "center" | 839 | align: "center" |
| 840 | }, | 840 | }, |
| 841 | { | 841 | { |
| 842 | text: "Mother Cell No", | 842 | text: "Mother Cell No", |
| 843 | value: "motherCellNo", | 843 | value: "motherCellNo", |
| 844 | sortable: false, | 844 | sortable: false, |
| 845 | align: "center" | 845 | align: "center" |
| 846 | }, | 846 | }, |
| 847 | { text: "Action", value: "", sortable: false, align: "center" } | 847 | { text: "Action", value: "", sortable: false, align: "center" } |
| 848 | ], | 848 | ], |
| 849 | parentsList: [], | 849 | parentsList: [], |
| 850 | editedIndex: -1, | 850 | editedIndex: -1, |
| 851 | parentData: {}, | 851 | parentData: {}, |
| 852 | max: 10, | 852 | max: 10, |
| 853 | editedItem: { | 853 | editedItem: { |
| 854 | fatherName: "", | 854 | fatherName: "", |
| 855 | fatherCellNo: "", | 855 | fatherCellNo: "", |
| 856 | motherName: "", | 856 | motherName: "", |
| 857 | motherCellNo: "", | 857 | motherCellNo: "", |
| 858 | email: "" | 858 | email: "" |
| 859 | } | 859 | } |
| 860 | }), | 860 | }), |
| 861 | watch: { | 861 | watch: { |
| 862 | menu(val) { | 862 | menu(val) { |
| 863 | val && this.$nextTick(() => (this.$refs.picker.activePicker = "YEAR")); | 863 | val && this.$nextTick(() => (this.$refs.picker.activePicker = "YEAR")); |
| 864 | }, | 864 | }, |
| 865 | menu1(val) { | 865 | menu1(val) { |
| 866 | val && this.$nextTick(() => (this.$refs.picker.activePicker = "YEAR")); | 866 | val && this.$nextTick(() => (this.$refs.picker.activePicker = "YEAR")); |
| 867 | } | 867 | } |
| 868 | }, | 868 | }, |
| 869 | methods: { | 869 | methods: { |
| 870 | editItem(item) { | 870 | editItem(item) { |
| 871 | this.editedIndex = this.parentsList.indexOf(item); | 871 | this.editedIndex = this.parentsList.indexOf(item); |
| 872 | this.editedItem = Object.assign({}, item); | 872 | this.editedItem = Object.assign({}, item); |
| 873 | this.editParentDilaog = true; | 873 | this.editParentDilaog = true; |
| 874 | }, | 874 | }, |
| 875 | profile(item) { | 875 | profile(item) { |
| 876 | this.editedIndex = this.parentsList.indexOf(item); | 876 | this.editedIndex = this.parentsList.indexOf(item); |
| 877 | this.editedItem = Object.assign({}, item); | 877 | this.editedItem = Object.assign({}, item); |
| 878 | this.profileParentDialog = true; | 878 | this.profileParentDialog = true; |
| 879 | }, | 879 | }, |
| 880 | close() { | 880 | close() { |
| 881 | this.editParentDilaog = false; | 881 | this.editParentDilaog = false; |
| 882 | }, | 882 | }, |
| 883 | closeProfile() { | 883 | closeProfile() { |
| 884 | this.profileParentDialog = false; | 884 | this.profileParentDialog = false; |
| 885 | }, | 885 | }, |
| 886 | clear() { | 886 | clear() { |
| 887 | this.$refs.parentForm.reset(); | 887 | this.$refs.parentForm.reset(); |
| 888 | }, | 888 | }, |
| 889 | save() { | 889 | save() { |
| 890 | if (this.$refs.editParentForm.validate()) { | 890 | if (this.$refs.editParentForm.validate()) { |
| 891 | this.editedItem.parentId = this.editedItem._id; | 891 | this.editedItem.parentId = this.editedItem._id; |
| 892 | http() | 892 | http() |
| 893 | .put("/updateParent", this.editedItem) | 893 | .put("/updateParent", this.editedItem) |
| 894 | .then(response => { | 894 | .then(response => { |
| 895 | this.snackbar = true; | 895 | this.snackbar = true; |
| 896 | this.color = "green"; | 896 | this.color = "green"; |
| 897 | this.text = response.data.message; | 897 | this.text = response.data.message; |
| 898 | this.getParentDetails(); | 898 | this.getParentDetails(); |
| 899 | this.close(); | 899 | this.close(); |
| 900 | }) | 900 | }) |
| 901 | .catch(error => { | 901 | .catch(error => { |
| 902 | this.snackbar = true; | 902 | this.snackbar = true; |
| 903 | this.color = "error"; | 903 | this.color = "error"; |
| 904 | this.text = error.response.data.message; | 904 | this.text = error.response.data.message; |
| 905 | if (error.response.data.statusText) { | 905 | if (error.response.data.statusText) { |
| 906 | this.text = error.response.data.statusText; | 906 | this.text = error.response.data.statusText; |
| 907 | } | 907 | } |
| 908 | }); | 908 | }); |
| 909 | } | 909 | } |
| 910 | }, | 910 | }, |
| 911 | async submitParentDetails() { | 911 | async submitParentDetails() { |
| 912 | if (this.$refs.parentForm.validate()) { | 912 | if (this.$refs.parentForm.validate()) { |
| 913 | this.parentData.role = "PARENT"; | 913 | this.parentData.role = "PARENT"; |
| 914 | this.loading = true; | 914 | this.loading = true; |
| 915 | await http() | 915 | await http() |
| 916 | .post("/createParent", this.parentData) | 916 | .post("/createParent", this.parentData) |
| 917 | .then(response => { | 917 | .then(response => { |
| 918 | this.parentId = response.data.data.id; | 918 | this.parentId = response.data.data.id; |
| 919 | this.snackbar = true; | 919 | this.snackbar = true; |
| 920 | this.color = "green"; | 920 | this.color = "green"; |
| 921 | this.text = response.data.message; | 921 | this.text = response.data.message; |
| 922 | this.getParentDetails(); | 922 | this.getParentDetails(); |
| 923 | this.clear(); | 923 | this.clear(); |
| 924 | this.loading = false; | 924 | this.loading = false; |
| 925 | this.addParentDialog = false; | 925 | this.addParentDialog = false; |
| 926 | }) | 926 | }) |
| 927 | .catch(error => { | 927 | .catch(error => { |
| 928 | // console.log(error.response.data); | 928 | // console.log(error.response.data); |
| 929 | this.snackbar = true; | 929 | this.snackbar = true; |
| 930 | this.color = "error"; | 930 | this.color = "error"; |
| 931 | this.text = error.response.data.message; | 931 | this.text = error.response.data.message; |
| 932 | if (error.response.data.statusText) { | 932 | if (error.response.data.statusText) { |
| 933 | this.text = error.response.data.statusText; | 933 | this.text = error.response.data.statusText; |
| 934 | } | 934 | } |
| 935 | this.loading = false; | 935 | this.loading = false; |
| 936 | }); | 936 | }); |
| 937 | } | 937 | } |
| 938 | }, | 938 | }, |
| 939 | getParentDetails() { | 939 | getParentDetails() { |
| 940 | http() | 940 | http() |
| 941 | .get("getParentsList", { | 941 | .get("getParentsList", { |
| 942 | headers: { | 942 | headers: { |
| 943 | Authorization: "Bearer " + this.$store.state.token | 943 | Authorization: "Bearer " + this.$store.state.token |
| 944 | } | 944 | } |
| 945 | }) | 945 | }) |
| 946 | .then(response => { | 946 | .then(response => { |
| 947 | this.parentsList = response.data.data; | 947 | this.parentsList = response.data.data; |
| 948 | }) | 948 | }) |
| 949 | .catch(error => { | 949 | .catch(error => { |
| 950 | // console.log("err====>", error.response.data.message); | 950 | // console.log("err====>", error.response.data.message); |
| 951 | this.showLoader = false; | 951 | this.showLoader = false; |
| 952 | if (error.response.status === 401) { | 952 | if (error.response.status === 401) { |
| 953 | this.$router.replace({ path: "/" }); | 953 | this.$router.replace({ path: "/" }); |
| 954 | this.$store.dispatch("setToken", null); | 954 | this.$store.dispatch("setToken", null); |
| 955 | this.$store.dispatch("Id", null); | 955 | this.$store.dispatch("Id", null); |
| 956 | this.$store.dispatch("Role", null); | 956 | this.$store.dispatch("Role", null); |
| 957 | } | 957 | } |
| 958 | }); | 958 | }); |
| 959 | }, | 959 | }, |
| 960 | displaySearch() { | 960 | displaySearch() { |
| 961 | (this.show = false), (this.showSearch = true); | 961 | (this.show = false), (this.showSearch = true); |
| 962 | }, | 962 | }, |
| 963 | closeSearch() { | 963 | closeSearch() { |
| 964 | this.showSearch = false; | 964 | this.showSearch = false; |
| 965 | this.show = true; | 965 | this.show = true; |
| 966 | this.search = ""; | 966 | this.search = ""; |
| 967 | } | 967 | } |
| 968 | }, | 968 | }, |
| 969 | mounted() { | 969 | mounted() { |
| 970 | this.getParentDetails(); | 970 | this.getParentDetails(); |
| 971 | } | 971 | } |
| 972 | }; | 972 | }; |
| 973 | </script> | 973 | </script> |
src/pages/Section/section.vue
| 1 | <template> | 1 | <template> |
| 2 | <v-container fluid class="body-color"> | 2 | <v-container fluid class="body-color"> |
| 3 | <v-dialog v-model="editSectionDialog" max-width="460px"> | 3 | <v-dialog v-model="editSectionDialog" max-width="460px"> |
| 4 | <v-card flat class="card-style pa-2" dark> | 4 | <v-card flat class="card-style pa-2" dark> |
| 5 | <v-layout> | 5 | <v-layout> |
| 6 | <v-flex xs12> | 6 | <v-flex xs12> |
| 7 | <label class="title text-xs-center">Edit Section</label> | 7 | <label class="title text-xs-center">Edit Section</label> |
| 8 | <v-icon size="24" class="right" @click="editSectionDialog = false">cancel</v-icon> | 8 | <v-icon size="24" class="right" @click="editSectionDialog = false">cancel</v-icon> |
| 9 | </v-flex> | 9 | </v-flex> |
| 10 | </v-layout> | 10 | </v-layout> |
| 11 | <v-container fluid> | 11 | <v-container fluid> |
| 12 | <v-layout wrap justify-center> | 12 | <v-layout wrap justify-center> |
| 13 | <v-flex xs12 sm12> | 13 | <v-flex xs12 sm12> |
| 14 | <v-form> | 14 | <v-form> |
| 15 | <v-layout> | 15 | <v-layout> |
| 16 | <v-flex xs5 sm4 class="pt-4 subheading"> | 16 | <v-flex xs5 sm4 class="pt-4 subheading"> |
| 17 | <label class="right">Class :</label> | 17 | <label class="right">Class :</label> |
| 18 | </v-flex> | 18 | </v-flex> |
| 19 | <v-flex xs7 sm8> | 19 | <v-flex xs7 sm8> |
| 20 | <v-autocomplete | 20 | <v-autocomplete |
| 21 | :items="addclass" | 21 | :items="addclass" |
| 22 | :label="editedItem.classData.classNum" | 22 | :label="editedItem.classData.classNum" |
| 23 | v-model="editItem.classId" | 23 | v-model="editItem.classId" |
| 24 | item-text="classNum" | 24 | item-text="classNum" |
| 25 | item-value="_id" | 25 | item-value="_id" |
| 26 | class="ml-2" | 26 | class="ml-2" |
| 27 | ></v-autocomplete> | 27 | ></v-autocomplete> |
| 28 | </v-flex> | 28 | </v-flex> |
| 29 | </v-layout> | 29 | </v-layout> |
| 30 | <v-layout> | 30 | <v-layout> |
| 31 | <v-flex xs5 sm4 class="pt-4 subheading"> | 31 | <v-flex xs5 sm4 class="pt-4 subheading"> |
| 32 | <h5 class="right my-1 hidden-xs-only hidden-sm-only">Section Name :</h5> | 32 | <h5 class="right my-1 hidden-xs-only hidden-sm-only">Section Name :</h5> |
| 33 | <h5 class="right my-1 hidden-lg-only hidden-md-only hidden-xl-only">Name :</h5> | 33 | <h5 class="right my-1 hidden-lg-only hidden-md-only hidden-xl-only">Name :</h5> |
| 34 | </v-flex> | 34 | </v-flex> |
| 35 | <v-flex xs7 sm8> | 35 | <v-flex xs7 sm8> |
| 36 | <v-autocomplete | 36 | <v-autocomplete |
| 37 | v-model="editedItem.name" | 37 | v-model="editedItem.name" |
| 38 | placeholder="fill your Section Name" | 38 | placeholder="fill your Section Name" |
| 39 | :items="SectionName" | 39 | :items="SectionName" |
| 40 | class="ml-2" | 40 | class="ml-2" |
| 41 | ></v-autocomplete> | 41 | ></v-autocomplete> |
| 42 | </v-flex> | 42 | </v-flex> |
| 43 | </v-layout> | 43 | </v-layout> |
| 44 | <v-layout> | 44 | <v-layout> |
| 45 | <v-flex xs5 sm4 class="pt-4 subheading"> | 45 | <v-flex xs5 sm4 class="pt-4 subheading"> |
| 46 | <h5 class="right my-1 hidden-xs-only hidden-sm-only">Incharge :</h5> | 46 | <h5 class="right my-1 hidden-xs-only hidden-sm-only">Incharge :</h5> |
| 47 | <h5 class="right my-1 hidden-lg-only hidden-md-only hidden-xl-only">Incharge :</h5> | 47 | <h5 class="right my-1 hidden-lg-only hidden-md-only hidden-xl-only">Incharge :</h5> |
| 48 | </v-flex> | 48 | </v-flex> |
| 49 | <v-flex xs7 sm8> | 49 | <v-flex xs7 sm8> |
| 50 | <v-select | 50 | <v-select |
| 51 | :items="teacherList" | 51 | :items="teacherList" |
| 52 | v-model="editedItem.classInchargeId" | 52 | v-model="editedItem.classInchargeId" |
| 53 | :label="editedItem.teacherData[0].name" | 53 | :label="editedItem.teacherData[0].name" |
| 54 | item-text="name" | 54 | item-text="name" |
| 55 | item-value="_id" | 55 | item-value="_id" |
| 56 | class="ml-2" | 56 | class="ml-2" |
| 57 | ></v-select> | 57 | ></v-select> |
| 58 | </v-flex> | 58 | </v-flex> |
| 59 | </v-layout> | 59 | </v-layout> |
| 60 | <v-flex xs12> | 60 | <v-flex xs12> |
| 61 | <v-card-actions> | 61 | <v-card-actions> |
| 62 | <v-btn round dark @click.native="closeSectionDialog" class="add-button">Cancel</v-btn> | 62 | <v-btn round dark @click.native="closeSectionDialog" class="add-button">Cancel</v-btn> |
| 63 | <v-spacer></v-spacer> | 63 | <v-spacer></v-spacer> |
| 64 | <v-btn round dark @click="save" :loading="editLoading" class="add-button">Save</v-btn> | 64 | <v-btn round dark @click="save" :loading="editLoading" class="add-button">Save</v-btn> |
| 65 | </v-card-actions> | 65 | </v-card-actions> |
| 66 | </v-flex> | 66 | </v-flex> |
| 67 | </v-form> | 67 | </v-form> |
| 68 | </v-flex> | 68 | </v-flex> |
| 69 | </v-layout> | 69 | </v-layout> |
| 70 | </v-container> | 70 | </v-container> |
| 71 | </v-card> | 71 | </v-card> |
| 72 | </v-dialog> | 72 | </v-dialog> |
| 73 | 73 | ||
| 74 | <!-- ****** PROFILE VIEW SECTION DATA ****** --> | 74 | <!-- ****** PROFILE VIEW SECTION DATA ****** --> |
| 75 | 75 | ||
| 76 | <v-dialog v-model="viewSectionDialog" max-width="500px"> | 76 | <v-dialog v-model="viewSectionDialog" max-width="500px"> |
| 77 | <v-card flat class="card-style pa-3" dark> | 77 | <v-card flat class="card-style pa-3" dark> |
| 78 | <v-layout> | 78 | <v-layout> |
| 79 | <v-flex xs12> | 79 | <v-flex xs12> |
| 80 | <label class="title text-xs-center">View Section</label> | 80 | <label class="title text-xs-center">View Section</label> |
| 81 | <v-icon size="24" class="right" @click="viewSectionDialog = false">cancel</v-icon> | 81 | <v-icon size="24" class="right" @click="viewSectionDialog = false">cancel</v-icon> |
| 82 | </v-flex> | 82 | </v-flex> |
| 83 | </v-layout> | 83 | </v-layout> |
| 84 | <v-card-text> | 84 | <v-card-text> |
| 85 | <v-container grid-list-md> | 85 | <v-container grid-list-md> |
| 86 | <v-layout wrap> | 86 | <v-layout wrap> |
| 87 | <v-flex> | 87 | <v-flex> |
| 88 | <v-layout> | 88 | <v-layout> |
| 89 | <v-flex xs7 sm6> | 89 | <v-flex xs7 sm6> |
| 90 | <h5 class="right my-1 hidden-xs-only hidden-sm-only"> | 90 | <h5 class="right my-1 hidden-xs-only hidden-sm-only"> |
| 91 | <b>Class Name :</b> | 91 | <b>Class Name :</b> |
| 92 | </h5> | 92 | </h5> |
| 93 | <h5 class="right my-1 hidden-lg-only hidden-md-only hidden-xl-only"> | 93 | <h5 class="right my-1 hidden-lg-only hidden-md-only hidden-xl-only"> |
| 94 | <b>Class :</b> | 94 | <b>Class :</b> |
| 95 | </h5> | 95 | </h5> |
| 96 | </v-flex> | 96 | </v-flex> |
| 97 | <v-flex sm6 xs5> | 97 | <v-flex sm6 xs5> |
| 98 | <h5 class="my-1">{{ editedItem.classData.classNum }}</h5> | 98 | <h5 class="my-1">{{ editedItem.classData.classNum }}</h5> |
| 99 | </v-flex> | 99 | </v-flex> |
| 100 | </v-layout> | 100 | </v-layout> |
| 101 | <v-layout> | 101 | <v-layout> |
| 102 | <v-flex xs7 sm6> | 102 | <v-flex xs7 sm6> |
| 103 | <h5 class="right my-1"> | 103 | <h5 class="right my-1"> |
| 104 | <b>Section Name :</b> | 104 | <b>Section Name :</b> |
| 105 | </h5> | 105 | </h5> |
| 106 | </v-flex> | 106 | </v-flex> |
| 107 | <v-flex sm6 xs5> | 107 | <v-flex sm6 xs5> |
| 108 | <h5 class="my-1">{{ editedItem.name }}</h5> | 108 | <h5 class="my-1">{{ editedItem.name }}</h5> |
| 109 | </v-flex> | 109 | </v-flex> |
| 110 | </v-layout> | 110 | </v-layout> |
| 111 | <v-layout> | 111 | <v-layout> |
| 112 | <v-flex xs7 sm6> | 112 | <v-flex xs7 sm6> |
| 113 | <h5 class="right my-1 hidden-xs-only hidden-sm-only"> | 113 | <h5 class="right my-1 hidden-xs-only hidden-sm-only"> |
| 114 | <b>Class Incharge :</b> | 114 | <b>Class Incharge :</b> |
| 115 | </h5> | 115 | </h5> |
| 116 | <h5 class="right my-1 hidden-lg-only hidden-md-only hidden-xl-only"> | 116 | <h5 class="right my-1 hidden-lg-only hidden-md-only hidden-xl-only"> |
| 117 | <b>Incharge :</b> | 117 | <b>Incharge :</b> |
| 118 | </h5> | 118 | </h5> |
| 119 | </v-flex> | 119 | </v-flex> |
| 120 | <v-flex sm6 xs5> | 120 | <v-flex sm6 xs5> |
| 121 | <h5 class="my-1">{{ editedItem.teacherData[0].name }}</h5> | 121 | <h5 class="my-1">{{ editedItem.teacherData[0].name }}</h5> |
| 122 | </v-flex> | 122 | </v-flex> |
| 123 | </v-layout> | 123 | </v-layout> |
| 124 | <v-layout> | 124 | <v-layout> |
| 125 | <v-flex xs7 sm6> | 125 | <v-flex xs7 sm6> |
| 126 | <h5 class="right my-1"> | 126 | <h5 class="right my-1"> |
| 127 | <b>Session :</b> | 127 | <b>Session :</b> |
| 128 | </h5> | 128 | </h5> |
| 129 | </v-flex> | 129 | </v-flex> |
| 130 | <v-flex sm6 xs5> | 130 | <v-flex sm6 xs5> |
| 131 | <h5 class="my-1">{{ editedItem.session }}</h5> | 131 | <h5 class="my-1">{{ editedItem.session }}</h5> |
| 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-container> | 136 | </v-container> |
| 137 | </v-card-text> | 137 | </v-card-text> |
| 138 | </v-card> | 138 | </v-card> |
| 139 | </v-dialog> | 139 | </v-dialog> |
| 140 | <!-- ****** Section Table ****** --> | 140 | <!-- ****** Section Table ****** --> |
| 141 | <v-toolbar color="transparent" flat> | 141 | <v-toolbar color="transparent" flat> |
| 142 | <v-btn | 142 | <v-btn |
| 143 | fab | 143 | fab |
| 144 | dark | 144 | dark |
| 145 | class="open-dialog-button hidden-xl-only hidden-md-only hidden-lg-only" | 145 | class="open-dialog-button hidden-xl-only hidden-md-only hidden-lg-only" |
| 146 | small | 146 | small |
| 147 | @click="addSectionDialog = true" | 147 | @click="addSectionDialog = true" |
| 148 | > | 148 | > |
| 149 | <v-icon dark>add</v-icon> | 149 | <v-icon dark>add</v-icon> |
| 150 | </v-btn> | 150 | </v-btn> |
| 151 | <v-btn | 151 | <v-btn |
| 152 | round | 152 | round |
| 153 | class="open-dialog-button hidden-sm-only hidden-xs-only" | 153 | class="open-dialog-button hidden-sm-only hidden-xs-only" |
| 154 | dark | 154 | dark |
| 155 | @click="addSectionDialog = true" | 155 | @click="addSectionDialog = true" |
| 156 | > | 156 | > |
| 157 | <v-icon class="white--text pr-1" size="20">add</v-icon>Add Section | 157 | <v-icon class="white--text pr-1" size="20">add</v-icon>Add Section |
| 158 | </v-btn> | 158 | </v-btn> |
| 159 | <v-spacer></v-spacer> | 159 | <v-spacer></v-spacer> |
| 160 | <v-card-title class="body-1" v-show="show"> | 160 | <v-card-title class="body-1" v-show="show"> |
| 161 | <v-btn icon large flat @click="displaySearch"> | 161 | <v-btn icon large flat @click="displaySearch"> |
| 162 | <v-avatar size="27"> | 162 | <v-avatar size="27"> |
| 163 | <img src="/static/icon/dashboard icons-49.png" alt="icon" /> | 163 | <img src="/static/icon/search.png" alt="icon" /> |
| 164 | </v-avatar> | 164 | </v-avatar> |
| 165 | </v-btn> | 165 | </v-btn> |
| 166 | </v-card-title> | 166 | </v-card-title> |
| 167 | <v-flex xs8 v-show="showSearch"> | 167 | <v-flex xs8 v-show="showSearch"> |
| 168 | <v-layout> | 168 | <v-layout> |
| 169 | <v-text-field | 169 | <v-text-field |
| 170 | v-model="search" | 170 | v-model="search" |
| 171 | label="Search" | 171 | label="Search" |
| 172 | prepend-inner-icon="search" | 172 | prepend-inner-icon="search" |
| 173 | color="primary" | 173 | color="primary" |
| 174 | style="transition: 0.8s cubic-bezier(0.25, 0.8, 0.25, 1); !important" | 174 | style="transition: 0.8s cubic-bezier(0.25, 0.8, 0.25, 1); !important" |
| 175 | ></v-text-field> | 175 | ></v-text-field> |
| 176 | <v-icon @click="closeSearch" color="error">close</v-icon> | 176 | <v-icon @click="closeSearch" color="error">close</v-icon> |
| 177 | </v-layout> | 177 | </v-layout> |
| 178 | </v-flex> | 178 | </v-flex> |
| 179 | </v-toolbar> | 179 | </v-toolbar> |
| 180 | <v-data-table | 180 | <v-data-table |
| 181 | :headers="headers" | 181 | :headers="headers" |
| 182 | :items="sectionList" | 182 | :items="sectionList" |
| 183 | :pagination.sync="pagination" | 183 | :pagination.sync="pagination" |
| 184 | :search="search" | 184 | :search="search" |
| 185 | > | 185 | > |
| 186 | <template slot="items" slot-scope="props"> | 186 | <template slot="items" slot-scope="props"> |
| 187 | <tr class="tr"> | 187 | <tr class="tr"> |
| 188 | <td class="td td-row">{{ props.index + 1 }}</td> | 188 | <td class="td td-row">{{ props.index + 1 }}</td> |
| 189 | <td class="text-xs-center td td-row">{{ props.item.classData.classNum }}</td> | 189 | <td class="text-xs-center td td-row">{{ props.item.classData.classNum }}</td> |
| 190 | <td class="text-xs-center td td-row">{{ props.item.name }}</td> | 190 | <td class="text-xs-center td td-row">{{ props.item.name }}</td> |
| 191 | <td class="text-xs-center td td-row">{{ props.item.session }}</td> | 191 | <td class="text-xs-center td td-row">{{ props.item.session }}</td> |
| 192 | <td class="text-xs-center td td-row"> | 192 | <td class="text-xs-center td td-row"> |
| 193 | <span> | 193 | <span> |
| 194 | <v-tooltip top> | 194 | <v-tooltip top> |
| 195 | <img | 195 | <img |
| 196 | slot="activator" | 196 | slot="activator" |
| 197 | style="cursor:pointer; width:25px; height:25px;" | 197 | style="cursor:pointer; width:25px; height:25px;" |
| 198 | class="mr-3" | 198 | class="mr-3" |
| 199 | @click="profile(props.item)" | 199 | @click="profile(props.item)" |
| 200 | src="/static/icon/dashboard icons-47.png" | 200 | src="/static/icon/view.png" |
| 201 | /> | 201 | /> |
| 202 | <span>View</span> | 202 | <span>View</span> |
| 203 | </v-tooltip> | 203 | </v-tooltip> |
| 204 | <v-tooltip top> | 204 | <v-tooltip top> |
| 205 | <img | 205 | <img |
| 206 | slot="activator" | 206 | slot="activator" |
| 207 | style="cursor:pointer; width:20px; height:18px; " | 207 | style="cursor:pointer; width:20px; height:18px; " |
| 208 | class="mr-3" | 208 | class="mr-3" |
| 209 | @click="editItem(props.item)" | 209 | @click="editItem(props.item)" |
| 210 | src="/static/icon/dashboard icons-50.png" | 210 | src="/static/icon/edit.png" |
| 211 | /> | 211 | /> |
| 212 | <span>Edit</span> | 212 | <span>Edit</span> |
| 213 | </v-tooltip> | 213 | </v-tooltip> |
| 214 | <v-tooltip top> | 214 | <v-tooltip top> |
| 215 | <img | 215 | <img |
| 216 | slot="activator" | 216 | slot="activator" |
| 217 | style="cursor:pointer; width:20px; height:20px; " | 217 | style="cursor:pointer; width:20px; height:20px; " |
| 218 | @click="deleteItem(props.item)" | 218 | @click="deleteItem(props.item)" |
| 219 | src="/static/icon/dashboard icons-51.png" | 219 | src="/static/icon/delete.png" |
| 220 | class="mr-3" | 220 | class="mr-3" |
| 221 | /> | 221 | /> |
| 222 | <span>Delete</span> | 222 | <span>Delete</span> |
| 223 | </v-tooltip> | 223 | </v-tooltip> |
| 224 | </span> | 224 | </span> |
| 225 | </td> | 225 | </td> |
| 226 | </tr> | 226 | </tr> |
| 227 | </template> | 227 | </template> |
| 228 | <v-alert | 228 | <v-alert |
| 229 | slot="no-results" | 229 | slot="no-results" |
| 230 | :value="true" | 230 | :value="true" |
| 231 | color="error" | 231 | color="error" |
| 232 | icon="warning" | 232 | icon="warning" |
| 233 | >Your search for "{{ search }}" found no results.</v-alert> | 233 | >Your search for "{{ search }}" found no results.</v-alert> |
| 234 | </v-data-table> | 234 | </v-data-table> |
| 235 | <!-- </v-tab-item> --> | 235 | <!-- </v-tab-item> --> |
| 236 | 236 | ||
| 237 | <!-- ****** ADD Students Dialog box****** --> | 237 | <!-- ****** ADD Students Dialog box****** --> |
| 238 | <v-dialog v-model="addSectionDialog" max-width="400px"> | 238 | <v-dialog v-model="addSectionDialog" max-width="400px"> |
| 239 | <v-card flat class="card-style pa-2" dark> | 239 | <v-card flat class="card-style pa-2" dark> |
| 240 | <v-layout> | 240 | <v-layout> |
| 241 | <v-flex xs12> | 241 | <v-flex xs12> |
| 242 | <label class="title text-xs-center">Add Class</label> | 242 | <label class="title text-xs-center">Add Class</label> |
| 243 | <v-icon size="24" class="right" @click="addSectionDialog = false">cancel</v-icon> | 243 | <v-icon size="24" class="right" @click="addSectionDialog = false">cancel</v-icon> |
| 244 | </v-flex> | 244 | </v-flex> |
| 245 | </v-layout> | 245 | </v-layout> |
| 246 | <v-container fluid fill-height> | 246 | <v-container fluid fill-height> |
| 247 | <v-layout align-center> | 247 | <v-layout align-center> |
| 248 | <v-flex xs12> | 248 | <v-flex xs12> |
| 249 | <v-form ref="form" v-model="valid" lazy-validation> | 249 | <v-form ref="form" v-model="valid" lazy-validation> |
| 250 | <v-layout> | 250 | <v-layout> |
| 251 | <v-flex xs4 class="pt-4 subheading"> | 251 | <v-flex xs4 class="pt-4 subheading"> |
| 252 | <label class="right">Section :</label> | 252 | <label class="right">Section :</label> |
| 253 | </v-flex> | 253 | </v-flex> |
| 254 | <v-flex xs8 class="ml-3"> | 254 | <v-flex xs8 class="ml-3"> |
| 255 | <v-autocomplete | 255 | <v-autocomplete |
| 256 | v-model="sectionData.name" | 256 | v-model="sectionData.name" |
| 257 | placeholder="fill your Section Name" | 257 | placeholder="fill your Section Name" |
| 258 | :items="SectionName" | 258 | :items="SectionName" |
| 259 | :rules="nameRules" | 259 | :rules="nameRules" |
| 260 | required | 260 | required |
| 261 | ></v-autocomplete> | 261 | ></v-autocomplete> |
| 262 | </v-flex> | 262 | </v-flex> |
| 263 | </v-layout> | 263 | </v-layout> |
| 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">Class :</label> | 266 | <label class="right">Class :</label> |
| 267 | </v-flex> | 267 | </v-flex> |
| 268 | <v-flex xs8 class="ml-3"> | 268 | <v-flex xs8 class="ml-3"> |
| 269 | <v-select | 269 | <v-select |
| 270 | :items="addclass" | 270 | :items="addclass" |
| 271 | label="Select Class" | 271 | label="Select Class" |
| 272 | v-model="sectionData.classNum" | 272 | v-model="sectionData.classNum" |
| 273 | item-text="classNum" | 273 | item-text="classNum" |
| 274 | item-value="_id" | 274 | item-value="_id" |
| 275 | name="Select Class" | 275 | name="Select Class" |
| 276 | :rules="classRules" | 276 | :rules="classRules" |
| 277 | required | 277 | required |
| 278 | ></v-select> | 278 | ></v-select> |
| 279 | </v-flex> | 279 | </v-flex> |
| 280 | </v-layout> | 280 | </v-layout> |
| 281 | <v-layout> | 281 | <v-layout> |
| 282 | <v-flex xs4 class="pt-4 subheading"> | 282 | <v-flex xs4 class="pt-4 subheading"> |
| 283 | <label class="right">Incharge :</label> | 283 | <label class="right">Incharge :</label> |
| 284 | </v-flex> | 284 | </v-flex> |
| 285 | <v-flex xs8 class="ml-3"> | 285 | <v-flex xs8 class="ml-3"> |
| 286 | <v-select | 286 | <v-select |
| 287 | :items="teacherList" | 287 | :items="teacherList" |
| 288 | label="Select Incharge" | 288 | label="Select Incharge" |
| 289 | v-model="sectionData.sectionId" | 289 | v-model="sectionData.sectionId" |
| 290 | item-text="name" | 290 | item-text="name" |
| 291 | item-value="_id" | 291 | item-value="_id" |
| 292 | name="Select Class" | 292 | name="Select Class" |
| 293 | :rules="inchargeRules" | 293 | :rules="inchargeRules" |
| 294 | required | 294 | required |
| 295 | ></v-select> | 295 | ></v-select> |
| 296 | </v-flex> | 296 | </v-flex> |
| 297 | </v-layout> | 297 | </v-layout> |
| 298 | <v-layout> | 298 | <v-layout> |
| 299 | <v-flex xs4 class="pt-4 subheading"> | 299 | <v-flex xs4 class="pt-4 subheading"> |
| 300 | <label class="right">Session:</label> | 300 | <label class="right">Session:</label> |
| 301 | </v-flex> | 301 | </v-flex> |
| 302 | <v-flex xs8 class="ml-3"> | 302 | <v-flex xs8 class="ml-3"> |
| 303 | <v-text-field | 303 | <v-text-field |
| 304 | v-model="sectionData.session" | 304 | v-model="sectionData.session" |
| 305 | placeholder="fill your Session" | 305 | placeholder="fill your Session" |
| 306 | name="name" | 306 | name="name" |
| 307 | type="text" | 307 | type="text" |
| 308 | :rules="sessionRules" | 308 | :rules="sessionRules" |
| 309 | required | 309 | required |
| 310 | ></v-text-field> | 310 | ></v-text-field> |
| 311 | </v-flex> | 311 | </v-flex> |
| 312 | </v-layout> | 312 | </v-layout> |
| 313 | <v-layout> | 313 | <v-layout> |
| 314 | <v-flex xs12 sm12> | 314 | <v-flex xs12 sm12> |
| 315 | <v-card-actions> | 315 | <v-card-actions> |
| 316 | <v-btn @click="clear" class="add-button" round dark>Clear</v-btn> | 316 | <v-btn @click="clear" class="add-button" round dark>Clear</v-btn> |
| 317 | <v-spacer></v-spacer> | 317 | <v-spacer></v-spacer> |
| 318 | <v-btn @click="submit" class="add-button" round dark :loading="loading">Add</v-btn> | 318 | <v-btn @click="submit" class="add-button" round dark :loading="loading">Add</v-btn> |
| 319 | </v-card-actions> | 319 | </v-card-actions> |
| 320 | </v-flex> | 320 | </v-flex> |
| 321 | </v-layout> | 321 | </v-layout> |
| 322 | </v-form> | 322 | </v-form> |
| 323 | </v-flex> | 323 | </v-flex> |
| 324 | </v-layout> | 324 | </v-layout> |
| 325 | </v-container> | 325 | </v-container> |
| 326 | </v-card> | 326 | </v-card> |
| 327 | </v-dialog> | 327 | </v-dialog> |
| 328 | <v-snackbar | 328 | <v-snackbar |
| 329 | :timeout="timeout" | 329 | :timeout="timeout" |
| 330 | :top="y === 'top'" | 330 | :top="y === 'top'" |
| 331 | :right="x === 'right'" | 331 | :right="x === 'right'" |
| 332 | :vertical="mode === 'vertical'" | 332 | :vertical="mode === 'vertical'" |
| 333 | v-model="snackbar" | 333 | v-model="snackbar" |
| 334 | :color="color" | 334 | :color="color" |
| 335 | >{{ text }}</v-snackbar> | 335 | >{{ text }}</v-snackbar> |
| 336 | <div class="loader" v-if="showLoader"> | 336 | <div class="loader" v-if="showLoader"> |
| 337 | <v-progress-circular indeterminate color="white"></v-progress-circular> | 337 | <v-progress-circular indeterminate color="white"></v-progress-circular> |
| 338 | </div> | 338 | </div> |
| 339 | </v-container> | 339 | </v-container> |
| 340 | </template> | 340 | </template> |
| 341 | 341 | ||
| 342 | <script> | 342 | <script> |
| 343 | import http from "@/Services/http.js"; | 343 | import http from "@/Services/http.js"; |
| 344 | // import { apiCollection } from "@/schoolApi/apiCollection"; | 344 | // import { apiCollection } from "@/schoolApi/apiCollection"; |
| 345 | // const getSectionData = apiCollection.get("posts"); | 345 | // const getSectionData = apiCollection.get("posts"); |
| 346 | 346 | ||
| 347 | export default { | 347 | export default { |
| 348 | data: () => ({ | 348 | data: () => ({ |
| 349 | snackbar: false, | 349 | snackbar: false, |
| 350 | y: "top", | 350 | y: "top", |
| 351 | x: "right", | 351 | x: "right", |
| 352 | mode: "", | 352 | mode: "", |
| 353 | timeout: 5000, | 353 | timeout: 5000, |
| 354 | text: "", | 354 | text: "", |
| 355 | color: "", | 355 | color: "", |
| 356 | show: true, | 356 | show: true, |
| 357 | showSearch: false, | 357 | showSearch: false, |
| 358 | showLoader: false, | 358 | showLoader: false, |
| 359 | loading: false, | 359 | loading: false, |
| 360 | date: null, | 360 | date: null, |
| 361 | search: "", | 361 | search: "", |
| 362 | editSectionDialog: false, | 362 | editSectionDialog: false, |
| 363 | viewSectionDialog: false, | 363 | viewSectionDialog: false, |
| 364 | valid: true, | 364 | valid: true, |
| 365 | validEdit: true, | 365 | validEdit: true, |
| 366 | addSectionDialog: false, | 366 | addSectionDialog: false, |
| 367 | editLoading: false, | 367 | editLoading: false, |
| 368 | details: [], | 368 | details: [], |
| 369 | pagination: { | 369 | pagination: { |
| 370 | rowsPerPage: 10 | 370 | rowsPerPage: 10 |
| 371 | }, | 371 | }, |
| 372 | nameRules: [v => !!v || " Section Name is required"], | 372 | nameRules: [v => !!v || " Section Name is required"], |
| 373 | classRules: [v => !!v || " Class Name is required"], | 373 | classRules: [v => !!v || " Class Name is required"], |
| 374 | sessionRules: [v => !!v || " Session is required"], | 374 | sessionRules: [v => !!v || " Session is required"], |
| 375 | inchargeRules: [v => !!v || " Incharge Name is required"], | 375 | inchargeRules: [v => !!v || " Incharge Name is required"], |
| 376 | SectionName: ["A", "B", "C", "D", "E", "F"], | 376 | SectionName: ["A", "B", "C", "D", "E", "F"], |
| 377 | headers: [ | 377 | headers: [ |
| 378 | { | 378 | { |
| 379 | text: "No", | 379 | text: "No", |
| 380 | align: "", | 380 | align: "", |
| 381 | sortable: false, | 381 | sortable: false, |
| 382 | value: "No" | 382 | value: "No" |
| 383 | }, | 383 | }, |
| 384 | { | 384 | { |
| 385 | text: "Class Name", | 385 | text: "Class Name", |
| 386 | value: "classData.classNum", | 386 | value: "classData.classNum", |
| 387 | sortable: false, | 387 | sortable: false, |
| 388 | align: "center" | 388 | align: "center" |
| 389 | }, | 389 | }, |
| 390 | { text: "Section Name", value: "name", sortable: false, align: "center" }, | 390 | { text: "Section Name", value: "name", sortable: false, align: "center" }, |
| 391 | { text: "Session", value: "session", sortable: false, align: "center" }, | 391 | { text: "Session", value: "session", sortable: false, align: "center" }, |
| 392 | { text: "Action", value: "", sortable: false, align: "center" } | 392 | { text: "Action", value: "", sortable: false, align: "center" } |
| 393 | ], | 393 | ], |
| 394 | sectionList: [], | 394 | sectionList: [], |
| 395 | addclass: [], | 395 | addclass: [], |
| 396 | teacherList: [], | 396 | teacherList: [], |
| 397 | select: "", | 397 | select: "", |
| 398 | selectId: "", | 398 | selectId: "", |
| 399 | token: "", | 399 | token: "", |
| 400 | editedIndex: -1, | 400 | editedIndex: -1, |
| 401 | editedItem: { | 401 | editedItem: { |
| 402 | classData: { | 402 | classData: { |
| 403 | classNum: "" | 403 | classNum: "" |
| 404 | }, | 404 | }, |
| 405 | teacherData: [ | 405 | teacherData: [ |
| 406 | { | 406 | { |
| 407 | name: "" | 407 | name: "" |
| 408 | } | 408 | } |
| 409 | ] | 409 | ] |
| 410 | // name: "", | 410 | // name: "", |
| 411 | // session: new Date().getFullYear() | 411 | // session: new Date().getFullYear() |
| 412 | }, | 412 | }, |
| 413 | sectionData: { | 413 | sectionData: { |
| 414 | session: new Date().getFullYear() | 414 | session: new Date().getFullYear() |
| 415 | } | 415 | } |
| 416 | }), | 416 | }), |
| 417 | methods: { | 417 | methods: { |
| 418 | getSectionList() { | 418 | getSectionList() { |
| 419 | // const { data } = await getSectionData.get(); | 419 | // const { data } = await getSectionData.get(); |
| 420 | this.showLoader = true; | 420 | this.showLoader = true; |
| 421 | http() | 421 | http() |
| 422 | .get("/getAllSections", { | 422 | .get("/getAllSections", { |
| 423 | headers: { Authorization: "Bearer " + this.token } | 423 | headers: { Authorization: "Bearer " + this.token } |
| 424 | }) | 424 | }) |
| 425 | .then(response => { | 425 | .then(response => { |
| 426 | this.sectionList = response.data.data; | 426 | this.sectionList = response.data.data; |
| 427 | this.showLoader = false; | 427 | this.showLoader = false; |
| 428 | // console.log("getAllSections=====>",response.data.data) | 428 | // console.log("getAllSections=====>",response.data.data) |
| 429 | }) | 429 | }) |
| 430 | .catch(error => { | 430 | .catch(error => { |
| 431 | this.showLoader = false; | 431 | this.showLoader = false; |
| 432 | if (error.response.status === 401) { | 432 | if (error.response.status === 401) { |
| 433 | this.$router.replace({ path: "/" }); | 433 | this.$router.replace({ path: "/" }); |
| 434 | this.$store.dispatch("setToken", null); | 434 | this.$store.dispatch("setToken", null); |
| 435 | this.$store.dispatch("Id", null); | 435 | this.$store.dispatch("Id", null); |
| 436 | } | 436 | } |
| 437 | }); | 437 | }); |
| 438 | }, | 438 | }, |
| 439 | editItem(item) { | 439 | editItem(item) { |
| 440 | this.editedIndex = this.sectionList.indexOf(item); | 440 | this.editedIndex = this.sectionList.indexOf(item); |
| 441 | this.editedItem = Object.assign({}, item); | 441 | this.editedItem = Object.assign({}, item); |
| 442 | this.editSectionDialog = true; | 442 | this.editSectionDialog = true; |
| 443 | }, | 443 | }, |
| 444 | profile(item) { | 444 | profile(item) { |
| 445 | this.editedIndex = this.sectionList.indexOf(item); | 445 | this.editedIndex = this.sectionList.indexOf(item); |
| 446 | this.editedItem = Object.assign({}, item); | 446 | this.editedItem = Object.assign({}, item); |
| 447 | this.viewSectionDialog = true; | 447 | this.viewSectionDialog = true; |
| 448 | }, | 448 | }, |
| 449 | deleteItem(item) { | 449 | deleteItem(item) { |
| 450 | let deleteStudent = { | 450 | let deleteStudent = { |
| 451 | sectionId: item._id | 451 | sectionId: item._id |
| 452 | }; | 452 | }; |
| 453 | http() | 453 | http() |
| 454 | .delete( | 454 | .delete( |
| 455 | "/deleteSection", | 455 | "/deleteSection", |
| 456 | confirm("Are you sure you want to delete this?") && { | 456 | confirm("Are you sure you want to delete this?") && { |
| 457 | params: deleteStudent | 457 | params: deleteStudent |
| 458 | } | 458 | } |
| 459 | ) | 459 | ) |
| 460 | .then(response => { | 460 | .then(response => { |
| 461 | this.snackbar = true; | 461 | this.snackbar = true; |
| 462 | this.text = response.data.message; | 462 | this.text = response.data.message; |
| 463 | this.color = "green"; | 463 | this.color = "green"; |
| 464 | this.getSectionList(); | 464 | this.getSectionList(); |
| 465 | }) | 465 | }) |
| 466 | .catch(error => { | 466 | .catch(error => { |
| 467 | this.snackbar = true; | 467 | this.snackbar = true; |
| 468 | this.text = error.response.data.message; | 468 | this.text = error.response.data.message; |
| 469 | this.color = "green"; | 469 | this.color = "green"; |
| 470 | }); | 470 | }); |
| 471 | }, | 471 | }, |
| 472 | closeSectionDialog() { | 472 | closeSectionDialog() { |
| 473 | this.editSectionDialog = false; | 473 | this.editSectionDialog = false; |
| 474 | }, | 474 | }, |
| 475 | closeviewSectionDialog() { | 475 | closeviewSectionDialog() { |
| 476 | this.viewSectionDialog = false; | 476 | this.viewSectionDialog = false; |
| 477 | }, | 477 | }, |
| 478 | submit() { | 478 | submit() { |
| 479 | if (this.$refs.form.validate()) { | 479 | if (this.$refs.form.validate()) { |
| 480 | let addSection = { | 480 | let addSection = { |
| 481 | name: this.sectionData.name, | 481 | name: this.sectionData.name, |
| 482 | classId: this.sectionData.classNum, | 482 | classId: this.sectionData.classNum, |
| 483 | session: this.sectionData.session, | 483 | session: this.sectionData.session, |
| 484 | classInchargeId: this.sectionData.sectionId | 484 | classInchargeId: this.sectionData.sectionId |
| 485 | }; | 485 | }; |
| 486 | this.loading = true; | 486 | this.loading = true; |
| 487 | http() | 487 | http() |
| 488 | .post("/createSection", addSection) | 488 | .post("/createSection", addSection) |
| 489 | .then(response => { | 489 | .then(response => { |
| 490 | this.getSectionList(); | 490 | this.getSectionList(); |
| 491 | this.snackbar = true; | 491 | this.snackbar = true; |
| 492 | this.color = "green"; | 492 | this.color = "green"; |
| 493 | this.text = "New Section added successfully"; | 493 | this.text = "New Section added successfully"; |
| 494 | this.clear(); | 494 | this.clear(); |
| 495 | this.addSectionDialog = false; | 495 | this.addSectionDialog = false; |
| 496 | this.loading = false; | 496 | this.loading = false; |
| 497 | }) | 497 | }) |
| 498 | .catch(error => { | 498 | .catch(error => { |
| 499 | this.snackbar = true; | 499 | this.snackbar = true; |
| 500 | this.color = "error"; | 500 | this.color = "error"; |
| 501 | this.text = error.response.data.message; | 501 | this.text = error.response.data.message; |
| 502 | this.loading = false; | 502 | this.loading = false; |
| 503 | }); | 503 | }); |
| 504 | } | 504 | } |
| 505 | }, | 505 | }, |
| 506 | clear() { | 506 | clear() { |
| 507 | this.$refs.form.reset(); | 507 | this.$refs.form.reset(); |
| 508 | }, | 508 | }, |
| 509 | save() { | 509 | save() { |
| 510 | this.editedItem.sectionId = this.editedItem._id; | 510 | this.editedItem.sectionId = this.editedItem._id; |
| 511 | this.editLoading = true; | 511 | this.editLoading = true; |
| 512 | http() | 512 | http() |
| 513 | .put("/updateSection", this.editedItem) | 513 | .put("/updateSection", this.editedItem) |
| 514 | .then(response => { | 514 | .then(response => { |
| 515 | this.editLoading = false; | 515 | this.editLoading = false; |
| 516 | this.snackbar = true; | 516 | this.snackbar = true; |
| 517 | this.color = "green"; | 517 | this.color = "green"; |
| 518 | this.text = response.data.message; | 518 | this.text = response.data.message; |
| 519 | this.getSectionList(); | 519 | this.getSectionList(); |
| 520 | this.closeSectionDialog(); | 520 | this.closeSectionDialog(); |
| 521 | }) | 521 | }) |
| 522 | .catch(error => { | 522 | .catch(error => { |
| 523 | this.editLoading = false; | 523 | this.editLoading = false; |
| 524 | this.snackbar = true; | 524 | this.snackbar = true; |
| 525 | this.color = "error"; | 525 | this.color = "error"; |
| 526 | this.text = error.response.data.message; | 526 | this.text = error.response.data.message; |
| 527 | }); | 527 | }); |
| 528 | }, | 528 | }, |
| 529 | getAllTeacher() { | 529 | getAllTeacher() { |
| 530 | http() | 530 | http() |
| 531 | .get("/getTeachersList", { | 531 | .get("/getTeachersList", { |
| 532 | headers: { Authorization: "Bearer " + this.token } | 532 | headers: { Authorization: "Bearer " + this.token } |
| 533 | }) | 533 | }) |
| 534 | .then(response => { | 534 | .then(response => { |
| 535 | this.teacherList = response.data.data; | 535 | this.teacherList = response.data.data; |
| 536 | this.showLoader = false; | 536 | this.showLoader = false; |
| 537 | }) | 537 | }) |
| 538 | .catch(err => { | 538 | .catch(err => { |
| 539 | // console.log("err====>", err); | 539 | // console.log("err====>", err); |
| 540 | this.showLoader = false; | 540 | this.showLoader = false; |
| 541 | }); | 541 | }); |
| 542 | }, | 542 | }, |
| 543 | getAllClasses() { | 543 | getAllClasses() { |
| 544 | http() | 544 | http() |
| 545 | .get("/getClassesList", { | 545 | .get("/getClassesList", { |
| 546 | headers: { Authorization: "Bearer " + this.token } | 546 | headers: { Authorization: "Bearer " + this.token } |
| 547 | }) | 547 | }) |
| 548 | .then(response => { | 548 | .then(response => { |
| 549 | this.addclass = response.data.data; | 549 | this.addclass = response.data.data; |
| 550 | }) | 550 | }) |
| 551 | .catch(err => { | 551 | .catch(err => { |
| 552 | // console.log("err====>", err); | 552 | // console.log("err====>", err); |
| 553 | // this.$router.replace({ path: "/" }); | 553 | // this.$router.replace({ path: "/" }); |
| 554 | }); | 554 | }); |
| 555 | }, | 555 | }, |
| 556 | displaySearch() { | 556 | displaySearch() { |
| 557 | (this.show = false), (this.showSearch = true); | 557 | (this.show = false), (this.showSearch = true); |
| 558 | }, | 558 | }, |
| 559 | closeSearch() { | 559 | closeSearch() { |
| 560 | this.showSearch = false; | 560 | this.showSearch = false; |
| 561 | this.show = true; | 561 | this.show = true; |
| 562 | this.search = ""; | 562 | this.search = ""; |
| 563 | } | 563 | } |
| 564 | }, | 564 | }, |
| 565 | mounted() { | 565 | mounted() { |
| 566 | this.token = this.$store.state.token; | 566 | this.token = this.$store.state.token; |
| 567 | this.getSectionList(); | 567 | this.getSectionList(); |
| 568 | this.getAllClasses(); | 568 | this.getAllClasses(); |
| 569 | this.getAllTeacher(); | 569 | this.getAllTeacher(); |
| 570 | } | 570 | } |
| 571 | }; | 571 | }; |
| 572 | </script> | 572 | </script> |
| 573 | 573 |
src/pages/Students/students.vue
| 1 | <template> | 1 | <template> |
| 2 | <v-container fluid class="body-color"> | 2 | <v-container fluid class="body-color"> |
| 3 | <!-- ****** EDITS STUDENTS DETAILS ****** --> | 3 | <!-- ****** EDITS STUDENTS DETAILS ****** --> |
| 4 | <v-dialog v-model="editStudentDialog" max-width="1700px" scrollable> | 4 | <v-dialog v-model="editStudentDialog" max-width="1700px" 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 Student</label> | 8 | <label class="title text-xs-center">Edit Student</label> |
| 9 | <v-icon size="24" class="right" @click="editStudentDialog = false">cancel</v-icon> | 9 | <v-icon size="24" class="right" @click="editStudentDialog = 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> | 15 | <v-layout> |
| 16 | <v-flex xs12 class="text-xs-center text-sm-center text-md-center text-lg-center"> | 16 | <v-flex xs12 class="text-xs-center text-sm-center text-md-center text-lg-center"> |
| 17 | <v-avatar size="100px" v-if="!editedItem.profilePicUrl && !editImageUrl"> | 17 | <v-avatar size="100px" v-if="!editedItem.profilePicUrl && !editImageUrl"> |
| 18 | <img | 18 | <img |
| 19 | src="/static/icon/user.png" | 19 | src="/static/icon/user.png" |
| 20 | /> | 20 | /> |
| 21 | </v-avatar> | 21 | </v-avatar> |
| 22 | <img | 22 | <img |
| 23 | :src="editedItem.profilePicUrl" | 23 | :src="editedItem.profilePicUrl" |
| 24 | v-else-if="editedItem.profilePicUrl && !editImageUrl" | 24 | v-else-if="editedItem.profilePicUrl && !editImageUrl" |
| 25 | height="150" | 25 | height="150" |
| 26 | style="border-radius:50%; width:150px" | 26 | style="border-radius:50%; width:150px" |
| 27 | /> | 27 | /> |
| 28 | <img | 28 | <img |
| 29 | v-if="editImageUrl" | 29 | v-if="editImageUrl" |
| 30 | :src="editImageUrl" | 30 | :src="editImageUrl" |
| 31 | style="border-radius:50%; width:150px;height:150px" | 31 | style="border-radius:50%; width:150px;height:150px" |
| 32 | /> | 32 | /> |
| 33 | <input | 33 | <input |
| 34 | type="file" | 34 | type="file" |
| 35 | style="display: none" | 35 | style="display: none" |
| 36 | ref="editDataImage" | 36 | ref="editDataImage" |
| 37 | accept="image/*" | 37 | accept="image/*" |
| 38 | @change="onEditFilePicked" | 38 | @change="onEditFilePicked" |
| 39 | /> | 39 | /> |
| 40 | </v-flex> | 40 | </v-flex> |
| 41 | </v-layout> | 41 | </v-layout> |
| 42 | <v-layout wrap> | 42 | <v-layout wrap> |
| 43 | <v-flex xs12 sm4> | 43 | <v-flex xs12 sm4> |
| 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 hidden-xs-only hidden-sm-only">Select Class:</label> | 46 | <label class="right hidden-xs-only hidden-sm-only">Select Class:</label> |
| 47 | <label class="right hidden-lg-only hidden-md-only hidden-xl-only">Class:</label> | 47 | <label class="right hidden-lg-only hidden-md-only hidden-xl-only">Class:</label> |
| 48 | </v-flex> | 48 | </v-flex> |
| 49 | <v-flex xs8 class="ml-3"> | 49 | <v-flex xs8 class="ml-3"> |
| 50 | <v-select | 50 | <v-select |
| 51 | :items="addclass" | 51 | :items="addclass" |
| 52 | label="Select Class" | 52 | label="Select Class" |
| 53 | v-model="editedItem.select" | 53 | v-model="editedItem.select" |
| 54 | item-text="classNum" | 54 | item-text="classNum" |
| 55 | item-value="_id" | 55 | item-value="_id" |
| 56 | name="Select Class" | 56 | name="Select Class" |
| 57 | @change="getSections(editedItem.select)" | 57 | @change="getSections(editedItem.select)" |
| 58 | required | 58 | required |
| 59 | ></v-select> | 59 | ></v-select> |
| 60 | </v-flex> | 60 | </v-flex> |
| 61 | </v-layout> | 61 | </v-layout> |
| 62 | </v-flex> | 62 | </v-flex> |
| 63 | <v-flex xs12 sm4> | 63 | <v-flex xs12 sm4> |
| 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 hidden-xs-only hidden-sm-only">Select Section:</label> | 66 | <label class="right hidden-xs-only hidden-sm-only">Select Section:</label> |
| 67 | <label class="right hidden-lg-only hidden-md-only hidden-xl-only">Section:</label> | 67 | <label class="right hidden-lg-only hidden-md-only hidden-xl-only">Section:</label> |
| 68 | </v-flex> | 68 | </v-flex> |
| 69 | <v-flex xs8 class="ml-3"> | 69 | <v-flex xs8 class="ml-3"> |
| 70 | <v-select | 70 | <v-select |
| 71 | :items="addSection" | 71 | :items="addSection" |
| 72 | label="Select Section" | 72 | label="Select Section" |
| 73 | v-model="editedItem.selectSection" | 73 | v-model="editedItem.selectSection" |
| 74 | item-text="name" | 74 | item-text="name" |
| 75 | item-value="_id" | 75 | item-value="_id" |
| 76 | name="Select Section" | 76 | name="Select Section" |
| 77 | required | 77 | required |
| 78 | ></v-select> | 78 | ></v-select> |
| 79 | </v-flex> | 79 | </v-flex> |
| 80 | </v-layout> | 80 | </v-layout> |
| 81 | </v-flex> | 81 | </v-flex> |
| 82 | <v-flex xs12 sm4> | 82 | <v-flex xs12 sm4> |
| 83 | <v-layout> | 83 | <v-layout> |
| 84 | <v-flex xs4 class="pt-4 subheading"> | 84 | <v-flex xs4 class="pt-4 subheading"> |
| 85 | <label class="right hidden-xs-only hidden-sm-only">Full Name:</label> | 85 | <label class="right hidden-xs-only hidden-sm-only">Full Name:</label> |
| 86 | <label class="right hidden-lg-only hidden-md-only hidden-xl-only">Name:</label> | 86 | <label class="right hidden-lg-only hidden-md-only hidden-xl-only">Name:</label> |
| 87 | </v-flex> | 87 | </v-flex> |
| 88 | <v-flex xs8 class="ml-3"> | 88 | <v-flex xs8 class="ml-3"> |
| 89 | <v-text-field | 89 | <v-text-field |
| 90 | v-model="editedItem.name" | 90 | v-model="editedItem.name" |
| 91 | placeholder="fill your full Name" | 91 | placeholder="fill your full Name" |
| 92 | name="name" | 92 | name="name" |
| 93 | type="text" | 93 | type="text" |
| 94 | required | 94 | required |
| 95 | ></v-text-field> | 95 | ></v-text-field> |
| 96 | </v-flex> | 96 | </v-flex> |
| 97 | </v-layout> | 97 | </v-layout> |
| 98 | </v-flex> | 98 | </v-flex> |
| 99 | </v-layout> | 99 | </v-layout> |
| 100 | <v-layout wrap> | 100 | <v-layout wrap> |
| 101 | <v-flex xs12 sm4> | 101 | <v-flex xs12 sm4> |
| 102 | <v-layout> | 102 | <v-layout> |
| 103 | <v-flex xs4 class="pt-4 subheading"> | 103 | <v-flex xs4 class="pt-4 subheading"> |
| 104 | <label class="right hidden-xs-only hidden-sm-only">Email Id:</label> | 104 | <label class="right hidden-xs-only hidden-sm-only">Email Id:</label> |
| 105 | <label class="right hidden-lg-only hidden-md-only hidden-xl-only">Email:</label> | 105 | <label class="right hidden-lg-only hidden-md-only hidden-xl-only">Email:</label> |
| 106 | </v-flex> | 106 | </v-flex> |
| 107 | <v-flex xs8 class="ml-3"> | 107 | <v-flex xs8 class="ml-3"> |
| 108 | <v-text-field | 108 | <v-text-field |
| 109 | placeholder="fill your email" | 109 | placeholder="fill your email" |
| 110 | v-model="editedItem.email" | 110 | v-model="editedItem.email" |
| 111 | type="text" | 111 | type="text" |
| 112 | name="email" | 112 | name="email" |
| 113 | required | 113 | required |
| 114 | ></v-text-field> | 114 | ></v-text-field> |
| 115 | </v-flex> | 115 | </v-flex> |
| 116 | </v-layout> | 116 | </v-layout> |
| 117 | </v-flex> | 117 | </v-flex> |
| 118 | <v-flex xs12 sm4> | 118 | <v-flex xs12 sm4> |
| 119 | <v-layout> | 119 | <v-layout> |
| 120 | <v-flex xs4 class="pt-4 subheading"> | 120 | <v-flex xs4 class="pt-4 subheading"> |
| 121 | <label class="right hidden-sm-only hidden-xs-only">Date of Birth:</label> | 121 | <label class="right hidden-sm-only hidden-xs-only">Date of Birth:</label> |
| 122 | <label class="right hidden-lg-only hidden-xl-only hidden-md-only">D.O.B:</label> | 122 | <label class="right hidden-lg-only hidden-xl-only hidden-md-only">D.O.B:</label> |
| 123 | </v-flex> | 123 | </v-flex> |
| 124 | <v-flex xs8 class="ml-3"> | 124 | <v-flex xs8 class="ml-3"> |
| 125 | <v-menu | 125 | <v-menu |
| 126 | ref="menu" | 126 | ref="menu" |
| 127 | :close-on-content-click="false" | 127 | :close-on-content-click="false" |
| 128 | v-model="menu1" | 128 | v-model="menu1" |
| 129 | :nudge-right="40" | 129 | :nudge-right="40" |
| 130 | lazy | 130 | lazy |
| 131 | transition="scale-transition" | 131 | transition="scale-transition" |
| 132 | offset-y | 132 | offset-y |
| 133 | full-width | 133 | full-width |
| 134 | min-width="290px" | 134 | min-width="290px" |
| 135 | > | 135 | > |
| 136 | <v-text-field | 136 | <v-text-field |
| 137 | slot="activator" | 137 | slot="activator" |
| 138 | v-model="editedItem.dob" | 138 | v-model="editedItem.dob" |
| 139 | placeholder="Select Dob" | 139 | placeholder="Select Dob" |
| 140 | ></v-text-field> | 140 | ></v-text-field> |
| 141 | <v-date-picker | 141 | <v-date-picker |
| 142 | ref="picker" | 142 | ref="picker" |
| 143 | v-model="editedItem.dob" | 143 | v-model="editedItem.dob" |
| 144 | :max="new Date().toISOString().substr(0, 10)" | 144 | :max="new Date().toISOString().substr(0, 10)" |
| 145 | min="1950-01-01" | 145 | min="1950-01-01" |
| 146 | @input="menu1 = false" | 146 | @input="menu1 = false" |
| 147 | ></v-date-picker> | 147 | ></v-date-picker> |
| 148 | </v-menu> | 148 | </v-menu> |
| 149 | </v-flex> | 149 | </v-flex> |
| 150 | </v-layout> | 150 | </v-layout> |
| 151 | </v-flex> | 151 | </v-flex> |
| 152 | <v-flex xs12 sm4> | 152 | <v-flex xs12 sm4> |
| 153 | <v-layout> | 153 | <v-layout> |
| 154 | <v-flex xs4 class="pt-4 subheading"> | 154 | <v-flex xs4 class="pt-4 subheading"> |
| 155 | <label class="right">City:</label> | 155 | <label class="right">City:</label> |
| 156 | </v-flex> | 156 | </v-flex> |
| 157 | <v-flex xs8 class="ml-3"> | 157 | <v-flex xs8 class="ml-3"> |
| 158 | <v-text-field | 158 | <v-text-field |
| 159 | v-model="editedItem.city" | 159 | v-model="editedItem.city" |
| 160 | placeholder="fill your City Name" | 160 | placeholder="fill your City Name" |
| 161 | name="City" | 161 | name="City" |
| 162 | type="text" | 162 | type="text" |
| 163 | required | 163 | required |
| 164 | ></v-text-field> | 164 | ></v-text-field> |
| 165 | </v-flex> | 165 | </v-flex> |
| 166 | </v-layout> | 166 | </v-layout> |
| 167 | </v-flex> | 167 | </v-flex> |
| 168 | </v-layout> | 168 | </v-layout> |
| 169 | <v-layout wrap> | 169 | <v-layout wrap> |
| 170 | <v-flex xs12 sm4> | 170 | <v-flex xs12 sm4> |
| 171 | <v-layout> | 171 | <v-layout> |
| 172 | <v-flex xs4 class="pt-4 subheading"> | 172 | <v-flex xs4 class="pt-4 subheading"> |
| 173 | <label class="right hidden-xs-only hidden-sm-only">Blood Group:</label> | 173 | <label class="right hidden-xs-only hidden-sm-only">Blood Group:</label> |
| 174 | <label class="right hidden-lg-only hidden-md-only hidden-xl-only">Blood:</label> | 174 | <label class="right hidden-lg-only hidden-md-only hidden-xl-only">Blood:</label> |
| 175 | </v-flex> | 175 | </v-flex> |
| 176 | <v-flex xs8 class="ml-3"> | 176 | <v-flex xs8 class="ml-3"> |
| 177 | <v-text-field | 177 | <v-text-field |
| 178 | v-model="editedItem.bloodGroup" | 178 | v-model="editedItem.bloodGroup" |
| 179 | placeholder="fill your BloodGroup" | 179 | placeholder="fill your BloodGroup" |
| 180 | name="state" | 180 | name="state" |
| 181 | type="text" | 181 | type="text" |
| 182 | required | 182 | required |
| 183 | ></v-text-field> | 183 | ></v-text-field> |
| 184 | </v-flex> | 184 | </v-flex> |
| 185 | </v-layout> | 185 | </v-layout> |
| 186 | </v-flex> | 186 | </v-flex> |
| 187 | <v-flex xs12 sm4> | 187 | <v-flex xs12 sm4> |
| 188 | <v-layout> | 188 | <v-layout> |
| 189 | <v-flex xs4 class="pt-4 subheading"> | 189 | <v-flex xs4 class="pt-4 subheading"> |
| 190 | <label class="right">Gender:</label> | 190 | <label class="right">Gender:</label> |
| 191 | </v-flex> | 191 | </v-flex> |
| 192 | <v-flex xs8 class="ml-3"> | 192 | <v-flex xs8 class="ml-3"> |
| 193 | <v-select | 193 | <v-select |
| 194 | :items="gender" | 194 | :items="gender" |
| 195 | v-model="editedItem.gender" | 195 | v-model="editedItem.gender" |
| 196 | placeholder="Select Gender" | 196 | placeholder="Select Gender" |
| 197 | required | 197 | required |
| 198 | ></v-select> | 198 | ></v-select> |
| 199 | </v-flex> | 199 | </v-flex> |
| 200 | </v-layout> | 200 | </v-layout> |
| 201 | </v-flex> | 201 | </v-flex> |
| 202 | <v-flex xs12 sm4> | 202 | <v-flex xs12 sm4> |
| 203 | <v-layout> | 203 | <v-layout> |
| 204 | <v-flex xs4 class="pt-4 subheading"> | 204 | <v-flex xs4 class="pt-4 subheading"> |
| 205 | <label class="right">Medical Notes:</label> | 205 | <label class="right">Medical Notes:</label> |
| 206 | </v-flex> | 206 | </v-flex> |
| 207 | <v-flex xs8 class="ml-3"> | 207 | <v-flex xs8 class="ml-3"> |
| 208 | <v-text-field | 208 | <v-text-field |
| 209 | v-model="editedItem.medicalNotes" | 209 | v-model="editedItem.medicalNotes" |
| 210 | placeholder="fill your medicalNotes" | 210 | placeholder="fill your medicalNotes" |
| 211 | required | 211 | required |
| 212 | ></v-text-field> | 212 | ></v-text-field> |
| 213 | </v-flex> | 213 | </v-flex> |
| 214 | </v-layout> | 214 | </v-layout> |
| 215 | </v-flex> | 215 | </v-flex> |
| 216 | </v-layout> | 216 | </v-layout> |
| 217 | <v-layout wrap> | 217 | <v-layout wrap> |
| 218 | <v-flex xs12 sm4> | 218 | <v-flex xs12 sm4> |
| 219 | <v-layout> | 219 | <v-layout> |
| 220 | <v-flex xs4 class="pt-4 subheading"> | 220 | <v-flex xs4 class="pt-4 subheading"> |
| 221 | <label class="right">Height:</label> | 221 | <label class="right">Height:</label> |
| 222 | </v-flex> | 222 | </v-flex> |
| 223 | <v-flex xs8 class="ml-3"> | 223 | <v-flex xs8 class="ml-3"> |
| 224 | <v-text-field | 224 | <v-text-field |
| 225 | v-model="editedItem.height" | 225 | v-model="editedItem.height" |
| 226 | placeholder="fill your Height" | 226 | placeholder="fill your Height" |
| 227 | name="state" | 227 | name="state" |
| 228 | type="text" | 228 | type="text" |
| 229 | required | 229 | required |
| 230 | ></v-text-field> | 230 | ></v-text-field> |
| 231 | </v-flex> | 231 | </v-flex> |
| 232 | </v-layout> | 232 | </v-layout> |
| 233 | </v-flex> | 233 | </v-flex> |
| 234 | <v-flex xs12 sm4> | 234 | <v-flex xs12 sm4> |
| 235 | <v-layout> | 235 | <v-layout> |
| 236 | <v-flex xs4 class="pt-4 subheading"> | 236 | <v-flex xs4 class="pt-4 subheading"> |
| 237 | <label class="right">Weight:</label> | 237 | <label class="right">Weight:</label> |
| 238 | </v-flex> | 238 | </v-flex> |
| 239 | <v-flex xs8 class="ml-3"> | 239 | <v-flex xs8 class="ml-3"> |
| 240 | <v-text-field | 240 | <v-text-field |
| 241 | v-model="editedItem.weight" | 241 | v-model="editedItem.weight" |
| 242 | placeholder="fill your Weight" | 242 | placeholder="fill your Weight" |
| 243 | name="pincode" | 243 | name="pincode" |
| 244 | required | 244 | required |
| 245 | ></v-text-field> | 245 | ></v-text-field> |
| 246 | </v-flex> | 246 | </v-flex> |
| 247 | </v-layout> | 247 | </v-layout> |
| 248 | </v-flex> | 248 | </v-flex> |
| 249 | <v-flex xs12 sm4> | 249 | <v-flex xs12 sm4> |
| 250 | <v-layout> | 250 | <v-layout> |
| 251 | <v-flex xs4 class="pt-4 subheading"> | 251 | <v-flex xs4 class="pt-4 subheading"> |
| 252 | <label class="right hidden-xs-only hidden-sm-only">Uplaod Image:</label> | 252 | <label class="right hidden-xs-only hidden-sm-only">Uplaod Image:</label> |
| 253 | <label class="right hidden-lg-only hidden-md-only hidden-xl-only">Uplaod:</label> | 253 | <label class="right hidden-lg-only hidden-md-only hidden-xl-only">Uplaod:</label> |
| 254 | </v-flex> | 254 | </v-flex> |
| 255 | <v-flex xs8 class="ml-3"> | 255 | <v-flex xs8 class="ml-3"> |
| 256 | <v-text-field | 256 | <v-text-field |
| 257 | label="Select Image" | 257 | label="Select Image" |
| 258 | @click="pickEditFile" | 258 | @click="pickEditFile" |
| 259 | v-model="editImageName" | 259 | v-model="editImageName" |
| 260 | append-icon="attach_file" | 260 | append-icon="attach_file" |
| 261 | ></v-text-field> | 261 | ></v-text-field> |
| 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-layout wrap> | 266 | <v-layout wrap> |
| 267 | <v-flex xs12 sm4> | 267 | <v-flex xs12 sm4> |
| 268 | <v-layout> | 268 | <v-layout> |
| 269 | <v-flex xs4 class="pt-4 subheading"> | 269 | <v-flex xs4 class="pt-4 subheading"> |
| 270 | <label class="right">State:</label> | 270 | <label class="right">State:</label> |
| 271 | </v-flex> | 271 | </v-flex> |
| 272 | <v-flex xs8 class="ml-3"> | 272 | <v-flex xs8 class="ml-3"> |
| 273 | <v-text-field | 273 | <v-text-field |
| 274 | v-model="editedItem.state" | 274 | v-model="editedItem.state" |
| 275 | placeholder="fill your State Name" | 275 | placeholder="fill your State Name" |
| 276 | name="state" | 276 | name="state" |
| 277 | type="text" | 277 | type="text" |
| 278 | required | 278 | required |
| 279 | ></v-text-field> | 279 | ></v-text-field> |
| 280 | </v-flex> | 280 | </v-flex> |
| 281 | </v-layout> | 281 | </v-layout> |
| 282 | </v-flex> | 282 | </v-flex> |
| 283 | <v-flex xs12 sm4> | 283 | <v-flex xs12 sm4> |
| 284 | <v-layout> | 284 | <v-layout> |
| 285 | <v-flex xs4 class="pt-4 subheading"> | 285 | <v-flex xs4 class="pt-4 subheading"> |
| 286 | <label class="right">Pincode:</label> | 286 | <label class="right">Pincode:</label> |
| 287 | </v-flex> | 287 | </v-flex> |
| 288 | <v-flex xs8 class="ml-3"> | 288 | <v-flex xs8 class="ml-3"> |
| 289 | <v-text-field | 289 | <v-text-field |
| 290 | v-model="editedItem.pincode" | 290 | v-model="editedItem.pincode" |
| 291 | placeholder="fill your pincode" | 291 | placeholder="fill your pincode" |
| 292 | name="pincode" | 292 | name="pincode" |
| 293 | type="number" | 293 | type="number" |
| 294 | required | 294 | required |
| 295 | ></v-text-field> | 295 | ></v-text-field> |
| 296 | </v-flex> | 296 | </v-flex> |
| 297 | </v-layout> | 297 | </v-layout> |
| 298 | </v-flex> | 298 | </v-flex> |
| 299 | <v-flex xs12 sm4> | 299 | <v-flex xs12 sm4> |
| 300 | <v-layout> | 300 | <v-layout> |
| 301 | <v-flex xs4 class="pt-4 subheading"> | 301 | <v-flex xs4 class="pt-4 subheading"> |
| 302 | <label class="right hidden-xs-only hidden-sm-only">Mobile No:</label> | 302 | <label class="right hidden-xs-only hidden-sm-only">Mobile No:</label> |
| 303 | <label class="right hidden-lg-only hidden-md-only hidden-xl-only">Mobile:</label> | 303 | <label class="right hidden-lg-only hidden-md-only hidden-xl-only">Mobile:</label> |
| 304 | </v-flex> | 304 | </v-flex> |
| 305 | <v-flex xs8 class="ml-3"> | 305 | <v-flex xs8 class="ml-3"> |
| 306 | <v-text-field | 306 | <v-text-field |
| 307 | v-model="editedItem.mobile" | 307 | v-model="editedItem.mobile" |
| 308 | placeholder="fill your MobileNo" | 308 | placeholder="fill your MobileNo" |
| 309 | name="mobileNo" | 309 | name="mobileNo" |
| 310 | type="number" | 310 | type="number" |
| 311 | required | 311 | required |
| 312 | ></v-text-field> | 312 | ></v-text-field> |
| 313 | </v-flex> | 313 | </v-flex> |
| 314 | </v-layout> | 314 | </v-layout> |
| 315 | </v-flex> | 315 | </v-flex> |
| 316 | </v-layout> | 316 | </v-layout> |
| 317 | <v-layout wrap> | 317 | <v-layout wrap> |
| 318 | <v-flex xs12 sm4> | 318 | <v-flex xs12 sm4> |
| 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 hidden-xs-only hidden-sm-only">Select Country:</label> | 321 | <label class="right hidden-xs-only hidden-sm-only">Select Country:</label> |
| 322 | <label class="right hidden-lg-only hidden-md-only hidden-xl-only">Country:</label> | 322 | <label class="right hidden-lg-only hidden-md-only hidden-xl-only">Country:</label> |
| 323 | </v-flex> | 323 | </v-flex> |
| 324 | <v-flex xs8 class="ml-3"> | 324 | <v-flex xs8 class="ml-3"> |
| 325 | <v-autocomplete | 325 | <v-autocomplete |
| 326 | v-model="editedItem.country" | 326 | v-model="editedItem.country" |
| 327 | :items="countries" | 327 | :items="countries" |
| 328 | placeholder="Select Country Name" | 328 | placeholder="Select Country Name" |
| 329 | required | 329 | required |
| 330 | ></v-autocomplete> | 330 | ></v-autocomplete> |
| 331 | </v-flex> | 331 | </v-flex> |
| 332 | </v-layout> | 332 | </v-layout> |
| 333 | </v-flex> | 333 | </v-flex> |
| 334 | <v-flex xs12 sm4> | 334 | <v-flex xs12 sm4> |
| 335 | <v-layout> | 335 | <v-layout> |
| 336 | <v-flex xs4 class="pt-4 subheading"> | 336 | <v-flex xs4 class="pt-4 subheading"> |
| 337 | <label class="right hidden-xs-only hidden-sm-only">Roll Number:</label> | 337 | <label class="right hidden-xs-only hidden-sm-only">Roll Number:</label> |
| 338 | <label class="right hidden-lg-only hidden-md-only hidden-xl-only">Roll No:</label> | 338 | <label class="right hidden-lg-only hidden-md-only hidden-xl-only">Roll No:</label> |
| 339 | </v-flex> | 339 | </v-flex> |
| 340 | <v-flex xs8 class="ml-3"> | 340 | <v-flex xs8 class="ml-3"> |
| 341 | <v-text-field | 341 | <v-text-field |
| 342 | :items="gender" | 342 | :items="gender" |
| 343 | v-model="editedItem.rollNo" | 343 | v-model="editedItem.rollNo" |
| 344 | placeholder="fill roll number" | 344 | placeholder="fill roll number" |
| 345 | required | 345 | required |
| 346 | ></v-text-field> | 346 | ></v-text-field> |
| 347 | </v-flex> | 347 | </v-flex> |
| 348 | </v-layout> | 348 | </v-layout> |
| 349 | </v-flex> | 349 | </v-flex> |
| 350 | <v-flex xs12 sm4 class="hidden-xs-only hidden-sm-only"> | 350 | <v-flex xs12 sm4 class="hidden-xs-only hidden-sm-only"> |
| 351 | <v-layout> | 351 | <v-layout> |
| 352 | <v-flex xs4 sm4 class="pt-4 subheading"> | 352 | <v-flex xs4 sm4 class="pt-4 subheading"> |
| 353 | <label class="right hidden-xs-only hidden-sm-only">Permanent Address:</label> | 353 | <label class="right hidden-xs-only hidden-sm-only">Permanent Address:</label> |
| 354 | <label | 354 | <label |
| 355 | class="right hidden-lg-only hidden-md-only hidden-xl-only" | 355 | class="right hidden-lg-only hidden-md-only hidden-xl-only" |
| 356 | >Permanent Address:</label> | 356 | >Permanent Address:</label> |
| 357 | </v-flex> | 357 | </v-flex> |
| 358 | <v-flex xs12 sm8 class="ml-3"> | 358 | <v-flex xs12 sm8 class="ml-3"> |
| 359 | <v-text-field | 359 | <v-text-field |
| 360 | v-model="editedItem.permanentAddress" | 360 | v-model="editedItem.permanentAddress" |
| 361 | placeholder="fill Your Permanent Address" | 361 | placeholder="fill Your Permanent Address" |
| 362 | required | 362 | required |
| 363 | ></v-text-field> | 363 | ></v-text-field> |
| 364 | </v-flex> | 364 | </v-flex> |
| 365 | </v-layout> | 365 | </v-layout> |
| 366 | </v-flex> | 366 | </v-flex> |
| 367 | </v-layout> | 367 | </v-layout> |
| 368 | <v-layout class="hidden-xs-only hidden-sm-only" > | 368 | <v-layout class="hidden-xs-only hidden-sm-only" > |
| 369 | <v-flex xs12 sm4> | 369 | <v-flex xs12 sm4> |
| 370 | <v-layout> | 370 | <v-layout> |
| 371 | <v-flex xs4 class="pt-4 subheading"> | 371 | <v-flex xs4 class="pt-4 subheading"> |
| 372 | <label class="right hidden-xs-only hidden-sm-only">Present Address:</label> | 372 | <label class="right hidden-xs-only hidden-sm-only">Present Address:</label> |
| 373 | <label | 373 | <label |
| 374 | class="right hidden-lg-only hidden-md-only hidden-xl-only" | 374 | class="right hidden-lg-only hidden-md-only hidden-xl-only" |
| 375 | >Present Address:</label> | 375 | >Present Address:</label> |
| 376 | </v-flex> | 376 | </v-flex> |
| 377 | <v-flex xs8 class="ml-3"> | 377 | <v-flex xs8 class="ml-3"> |
| 378 | <v-text-field | 378 | <v-text-field |
| 379 | v-model="editedItem.presentAddress" | 379 | v-model="editedItem.presentAddress" |
| 380 | placeholder="Select Country Name" | 380 | placeholder="Select Country Name" |
| 381 | required | 381 | required |
| 382 | ></v-text-field> | 382 | ></v-text-field> |
| 383 | </v-flex> | 383 | </v-flex> |
| 384 | </v-layout> | 384 | </v-layout> |
| 385 | </v-flex> | 385 | </v-flex> |
| 386 | </v-layout> | 386 | </v-layout> |
| 387 | <v-layout class="hidden-lg-only hidden-md-only hidden-xl-only" wrap> | 387 | <v-layout class="hidden-lg-only hidden-md-only hidden-xl-only" wrap> |
| 388 | <v-flex xs12 sm12> | 388 | <v-flex xs12 sm12> |
| 389 | <v-layout> | 389 | <v-layout> |
| 390 | <v-flex xs12 sm3 class="pt-4 subheading text-xs-center"> | 390 | <v-flex xs12 sm3 class="pt-4 subheading text-xs-center"> |
| 391 | <label class>Present Address :</label> | 391 | <label class>Present Address :</label> |
| 392 | </v-flex> | 392 | </v-flex> |
| 393 | </v-layout> | 393 | </v-layout> |
| 394 | <v-layout> | 394 | <v-layout> |
| 395 | <v-flex xs12 sm12> | 395 | <v-flex xs12 sm12> |
| 396 | <v-textarea | 396 | <v-textarea |
| 397 | v-model="editedItem.presentAddress" | 397 | v-model="editedItem.presentAddress" |
| 398 | placeholder="fill Your present Address" | 398 | placeholder="fill Your present Address" |
| 399 | required | 399 | required |
| 400 | ></v-textarea> | 400 | ></v-textarea> |
| 401 | </v-flex> | 401 | </v-flex> |
| 402 | </v-layout> | 402 | </v-layout> |
| 403 | </v-flex> | 403 | </v-flex> |
| 404 | <v-flex xs12 sm12> | 404 | <v-flex xs12 sm12> |
| 405 | <v-layout> | 405 | <v-layout> |
| 406 | <v-flex xs12 sm3 class="pt-4 pr-4 subheading text-xs-center addressForm"> | 406 | <v-flex xs12 sm3 class="pt-4 pr-4 subheading text-xs-center addressForm"> |
| 407 | <label>Permanent addr:</label> | 407 | <label>Permanent addr:</label> |
| 408 | </v-flex> | 408 | </v-flex> |
| 409 | </v-layout> | 409 | </v-layout> |
| 410 | <v-layout> | 410 | <v-layout> |
| 411 | <v-flex xs12 sm12> | 411 | <v-flex xs12 sm12> |
| 412 | <v-textarea | 412 | <v-textarea |
| 413 | name="input-4-3" | 413 | name="input-4-3" |
| 414 | v-model="editedItem.permanentAddress" | 414 | v-model="editedItem.permanentAddress" |
| 415 | placeholder="fill Your Permanent Address" | 415 | placeholder="fill Your Permanent Address" |
| 416 | required | 416 | required |
| 417 | ></v-textarea> | 417 | ></v-textarea> |
| 418 | </v-flex> | 418 | </v-flex> |
| 419 | </v-layout> | 419 | </v-layout> |
| 420 | </v-flex> | 420 | </v-flex> |
| 421 | </v-layout> | 421 | </v-layout> |
| 422 | <v-layout> | 422 | <v-layout> |
| 423 | <v-flex xs12 sm12> | 423 | <v-flex xs12 sm12> |
| 424 | <v-layout class="right"> | 424 | <v-layout class="right"> |
| 425 | <v-btn @click="save" round dark :loading="editLoading" class="add-button">Save</v-btn> | 425 | <v-btn @click="save" round dark :loading="editLoading" class="add-button">Save</v-btn> |
| 426 | </v-layout> | 426 | </v-layout> |
| 427 | </v-flex> | 427 | </v-flex> |
| 428 | </v-layout> | 428 | </v-layout> |
| 429 | </v-container> | 429 | </v-container> |
| 430 | </v-form> | 430 | </v-form> |
| 431 | </v-card-text> | 431 | </v-card-text> |
| 432 | </v-card> | 432 | </v-card> |
| 433 | </v-dialog> | 433 | </v-dialog> |
| 434 | 434 | ||
| 435 | <!-- ****** PROFILE VIEW STUDENTS DEATILS ****** --> | 435 | <!-- ****** PROFILE VIEW STUDENTS DEATILS ****** --> |
| 436 | 436 | ||
| 437 | <v-dialog v-model="profileStudentDialog" max-width="1000px" scrollable> | 437 | <v-dialog v-model="profileStudentDialog" max-width="1000px" scrollable> |
| 438 | <v-card flat class="card-style pa-3" dark> | 438 | <v-card flat class="card-style pa-3" dark> |
| 439 | <v-layout> | 439 | <v-layout> |
| 440 | <v-flex xs12> | 440 | <v-flex xs12> |
| 441 | <label class="title text-xs-center">View Student</label> | 441 | <label class="title text-xs-center">View Student</label> |
| 442 | <v-icon size="24" class="right" @click="profileStudentDialog = false">cancel</v-icon> | 442 | <v-icon size="24" class="right" @click="profileStudentDialog = false">cancel</v-icon> |
| 443 | </v-flex> | 443 | </v-flex> |
| 444 | </v-layout> | 444 | </v-layout> |
| 445 | <v-card-text> | 445 | <v-card-text> |
| 446 | <v-flex align-center justify-center layout text-xs-center class="mt-3"> | 446 | <v-flex align-center justify-center layout text-xs-center class="mt-3"> |
| 447 | <v-avatar size="100px"> | 447 | <v-avatar size="100px"> |
| 448 | <img src="/static/icon/user.png" v-if="!editedItem.profilePicUrl" /> | 448 | <img src="/static/icon/user.png" v-if="!editedItem.profilePicUrl" /> |
| 449 | <img :src="editedItem.profilePicUrl" v-else-if="editedItem.profilePicUrl" /> | 449 | <img :src="editedItem.profilePicUrl" v-else-if="editedItem.profilePicUrl" /> |
| 450 | </v-avatar> | 450 | </v-avatar> |
| 451 | </v-flex> | 451 | </v-flex> |
| 452 | <v-container grid-list-md> | 452 | <v-container grid-list-md> |
| 453 | <v-layout wrap> | 453 | <v-layout wrap> |
| 454 | <v-flex xs12 sm5> | 454 | <v-flex xs12 sm5> |
| 455 | <v-layout> | 455 | <v-layout> |
| 456 | <v-flex xs6 sm6> | 456 | <v-flex xs6 sm6> |
| 457 | <h5 class="right my-1"> | 457 | <h5 class="right my-1"> |
| 458 | <b>Full Name:</b> | 458 | <b>Full Name:</b> |
| 459 | </h5> | 459 | </h5> |
| 460 | </v-flex> | 460 | </v-flex> |
| 461 | <v-flex sm6 xs6> | 461 | <v-flex sm6 xs6> |
| 462 | <h5 class="my-1 left">{{ editedItem.name }}</h5> | 462 | <h5 class="my-1 left">{{ editedItem.name }}</h5> |
| 463 | </v-flex> | 463 | </v-flex> |
| 464 | </v-layout> | 464 | </v-layout> |
| 465 | </v-flex> | 465 | </v-flex> |
| 466 | <v-flex xs12 sm7> | 466 | <v-flex xs12 sm7> |
| 467 | <v-layout> | 467 | <v-layout> |
| 468 | <v-flex xs6 sm4> | 468 | <v-flex xs6 sm4> |
| 469 | <h5 class="right my-1"> | 469 | <h5 class="right my-1"> |
| 470 | <b>Email:</b> | 470 | <b>Email:</b> |
| 471 | </h5> | 471 | </h5> |
| 472 | </v-flex> | 472 | </v-flex> |
| 473 | <v-flex sm8 xs6> | 473 | <v-flex sm8 xs6> |
| 474 | <h5 class="my-1 left">{{ editedItem.email }}</h5> | 474 | <h5 class="my-1 left">{{ editedItem.email }}</h5> |
| 475 | </v-flex> | 475 | </v-flex> |
| 476 | </v-layout> | 476 | </v-layout> |
| 477 | </v-flex> | 477 | </v-flex> |
| 478 | </v-layout> | 478 | </v-layout> |
| 479 | <v-layout wrap> | 479 | <v-layout wrap> |
| 480 | <v-flex xs12 sm5> | 480 | <v-flex xs12 sm5> |
| 481 | <v-layout> | 481 | <v-layout> |
| 482 | <v-flex xs6 sm6> | 482 | <v-flex xs6 sm6> |
| 483 | <b> | 483 | <b> |
| 484 | <h5 class="right my-1"> | 484 | <h5 class="right my-1"> |
| 485 | <b>Gender:</b> | 485 | <b>Gender:</b> |
| 486 | </h5> | 486 | </h5> |
| 487 | </b> | 487 | </b> |
| 488 | </v-flex> | 488 | </v-flex> |
| 489 | <v-flex sm6 xs6> | 489 | <v-flex sm6 xs6> |
| 490 | <h5 class="my-1 left">{{ editedItem.gender }}</h5> | 490 | <h5 class="my-1 left">{{ editedItem.gender }}</h5> |
| 491 | </v-flex> | 491 | </v-flex> |
| 492 | </v-layout> | 492 | </v-layout> |
| 493 | </v-flex> | 493 | </v-flex> |
| 494 | <v-flex xs12 sm7> | 494 | <v-flex xs12 sm7> |
| 495 | <v-layout> | 495 | <v-layout> |
| 496 | <v-flex xs6 sm4> | 496 | <v-flex xs6 sm4> |
| 497 | <b> | 497 | <b> |
| 498 | <h5 class="right my-1"> | 498 | <h5 class="right my-1"> |
| 499 | <b>D.O.B:</b> | 499 | <b>D.O.B:</b> |
| 500 | </h5> | 500 | </h5> |
| 501 | </b> | 501 | </b> |
| 502 | </v-flex> | 502 | </v-flex> |
| 503 | <v-flex sm8 xs6> | 503 | <v-flex sm8 xs6> |
| 504 | <h5 class="my-1">{{ dates(editedItem.dob) }}</h5> | 504 | <h5 class="my-1">{{ dates(editedItem.dob) }}</h5> |
| 505 | </v-flex> | 505 | </v-flex> |
| 506 | </v-layout> | 506 | </v-layout> |
| 507 | </v-flex> | 507 | </v-flex> |
| 508 | </v-layout> | 508 | </v-layout> |
| 509 | <v-layout wrap> | 509 | <v-layout wrap> |
| 510 | <v-flex xs12 sm5> | 510 | <v-flex xs12 sm5> |
| 511 | <v-layout> | 511 | <v-layout> |
| 512 | <v-flex xs6 sm6> | 512 | <v-flex xs6 sm6> |
| 513 | <b> | 513 | <b> |
| 514 | <h5 class="right my-1"> | 514 | <h5 class="right my-1"> |
| 515 | <b>BloodGroup:</b> | 515 | <b>BloodGroup:</b> |
| 516 | </h5> | 516 | </h5> |
| 517 | </b> | 517 | </b> |
| 518 | </v-flex> | 518 | </v-flex> |
| 519 | <v-flex sm6 xs6> | 519 | <v-flex sm6 xs6> |
| 520 | <h5 class="my-1 left">{{ editedItem.bloodGroup }}</h5> | 520 | <h5 class="my-1 left">{{ editedItem.bloodGroup }}</h5> |
| 521 | </v-flex> | 521 | </v-flex> |
| 522 | </v-layout> | 522 | </v-layout> |
| 523 | </v-flex> | 523 | </v-flex> |
| 524 | <v-flex xs12 sm7> | 524 | <v-flex xs12 sm7> |
| 525 | <v-layout> | 525 | <v-layout> |
| 526 | <v-flex xs6 sm4> | 526 | <v-flex xs6 sm4> |
| 527 | <b> | 527 | <b> |
| 528 | <h5 class="right my-1"> | 528 | <h5 class="right my-1"> |
| 529 | <b>Roll No. :</b> | 529 | <b>Roll No. :</b> |
| 530 | </h5> | 530 | </h5> |
| 531 | </b> | 531 | </b> |
| 532 | </v-flex> | 532 | </v-flex> |
| 533 | <v-flex sm8 xs6> | 533 | <v-flex sm8 xs6> |
| 534 | <h5 class="my-1">{{ editedItem.rollNo }}</h5> | 534 | <h5 class="my-1">{{ editedItem.rollNo }}</h5> |
| 535 | </v-flex> | 535 | </v-flex> |
| 536 | </v-layout> | 536 | </v-layout> |
| 537 | </v-flex> | 537 | </v-flex> |
| 538 | </v-layout> | 538 | </v-layout> |
| 539 | <v-layout wrap> | 539 | <v-layout wrap> |
| 540 | <v-flex xs12 sm5> | 540 | <v-flex xs12 sm5> |
| 541 | <v-layout> | 541 | <v-layout> |
| 542 | <v-flex xs6 sm6> | 542 | <v-flex xs6 sm6> |
| 543 | <b> | 543 | <b> |
| 544 | <h5 class="right my-1"> | 544 | <h5 class="right my-1"> |
| 545 | <b>Height:</b> | 545 | <b>Height:</b> |
| 546 | </h5> | 546 | </h5> |
| 547 | </b> | 547 | </b> |
| 548 | </v-flex> | 548 | </v-flex> |
| 549 | <v-flex sm6 xs6> | 549 | <v-flex sm6 xs6> |
| 550 | <h5 class="my-1 left">{{ editedItem.height }}</h5> | 550 | <h5 class="my-1 left">{{ editedItem.height }}</h5> |
| 551 | </v-flex> | 551 | </v-flex> |
| 552 | </v-layout> | 552 | </v-layout> |
| 553 | </v-flex> | 553 | </v-flex> |
| 554 | <v-flex xs12 sm7> | 554 | <v-flex xs12 sm7> |
| 555 | <v-layout> | 555 | <v-layout> |
| 556 | <v-flex xs6 sm4> | 556 | <v-flex xs6 sm4> |
| 557 | <b> | 557 | <b> |
| 558 | <h5 class="right my-1"> | 558 | <h5 class="right my-1"> |
| 559 | <b>Weight:</b> | 559 | <b>Weight:</b> |
| 560 | </h5> | 560 | </h5> |
| 561 | </b> | 561 | </b> |
| 562 | </v-flex> | 562 | </v-flex> |
| 563 | <v-flex sm8 xs6> | 563 | <v-flex sm8 xs6> |
| 564 | <h5 class="my-1">{{ editedItem.weight }}</h5> | 564 | <h5 class="my-1">{{ editedItem.weight }}</h5> |
| 565 | </v-flex> | 565 | </v-flex> |
| 566 | </v-layout> | 566 | </v-layout> |
| 567 | </v-flex> | 567 | </v-flex> |
| 568 | </v-layout> | 568 | </v-layout> |
| 569 | <v-layout wrap> | 569 | <v-layout wrap> |
| 570 | <v-flex xs12 sm5> | 570 | <v-flex xs12 sm5> |
| 571 | <v-layout> | 571 | <v-layout> |
| 572 | <v-flex xs6 sm6> | 572 | <v-flex xs6 sm6> |
| 573 | <b> | 573 | <b> |
| 574 | <h5 class="right my-1"> | 574 | <h5 class="right my-1"> |
| 575 | <b>City:</b> | 575 | <b>City:</b> |
| 576 | </h5> | 576 | </h5> |
| 577 | </b> | 577 | </b> |
| 578 | </v-flex> | 578 | </v-flex> |
| 579 | <v-flex sm6 xs6> | 579 | <v-flex sm6 xs6> |
| 580 | <h5 class="my-1 left">{{ editedItem.city }}</h5> | 580 | <h5 class="my-1 left">{{ editedItem.city }}</h5> |
| 581 | </v-flex> | 581 | </v-flex> |
| 582 | </v-layout> | 582 | </v-layout> |
| 583 | </v-flex> | 583 | </v-flex> |
| 584 | <v-flex xs12 sm7> | 584 | <v-flex xs12 sm7> |
| 585 | <v-layout> | 585 | <v-layout> |
| 586 | <v-flex xs6 sm4> | 586 | <v-flex xs6 sm4> |
| 587 | <b> | 587 | <b> |
| 588 | <h5 class="right my-1"> | 588 | <h5 class="right my-1"> |
| 589 | <b>State:</b> | 589 | <b>State:</b> |
| 590 | </h5> | 590 | </h5> |
| 591 | </b> | 591 | </b> |
| 592 | </v-flex> | 592 | </v-flex> |
| 593 | <v-flex sm8 xs6> | 593 | <v-flex sm8 xs6> |
| 594 | <h5 class="my-1">{{ editedItem.state }}</h5> | 594 | <h5 class="my-1">{{ editedItem.state }}</h5> |
| 595 | </v-flex> | 595 | </v-flex> |
| 596 | </v-layout> | 596 | </v-layout> |
| 597 | </v-flex> | 597 | </v-flex> |
| 598 | </v-layout> | 598 | </v-layout> |
| 599 | <v-layout wrap> | 599 | <v-layout wrap> |
| 600 | <v-flex xs12 sm5> | 600 | <v-flex xs12 sm5> |
| 601 | <v-layout> | 601 | <v-layout> |
| 602 | <v-flex xs6 sm6> | 602 | <v-flex xs6 sm6> |
| 603 | <b> | 603 | <b> |
| 604 | <h5 class="right my-1"> | 604 | <h5 class="right my-1"> |
| 605 | <b>Pincode:</b> | 605 | <b>Pincode:</b> |
| 606 | </h5> | 606 | </h5> |
| 607 | </b> | 607 | </b> |
| 608 | </v-flex> | 608 | </v-flex> |
| 609 | <v-flex sm6 xs6> | 609 | <v-flex sm6 xs6> |
| 610 | <h5 class="my-1">{{ editedItem.pincode }}</h5> | 610 | <h5 class="my-1">{{ editedItem.pincode }}</h5> |
| 611 | </v-flex> | 611 | </v-flex> |
| 612 | </v-layout> | 612 | </v-layout> |
| 613 | </v-flex> | 613 | </v-flex> |
| 614 | <v-flex xs12 sm7> | 614 | <v-flex xs12 sm7> |
| 615 | <v-layout> | 615 | <v-layout> |
| 616 | <v-flex xs6 sm4> | 616 | <v-flex xs6 sm4> |
| 617 | <b> | 617 | <b> |
| 618 | <h5 class="right my-1"> | 618 | <h5 class="right my-1"> |
| 619 | <b>Country:</b> | 619 | <b>Country:</b> |
| 620 | </h5> | 620 | </h5> |
| 621 | </b> | 621 | </b> |
| 622 | </v-flex> | 622 | </v-flex> |
| 623 | <v-flex sm7 xs6> | 623 | <v-flex sm7 xs6> |
| 624 | <h5 class="my-1">{{ editedItem.country }}</h5> | 624 | <h5 class="my-1">{{ editedItem.country }}</h5> |
| 625 | </v-flex> | 625 | </v-flex> |
| 626 | </v-layout> | 626 | </v-layout> |
| 627 | </v-flex> | 627 | </v-flex> |
| 628 | </v-layout> | 628 | </v-layout> |
| 629 | <v-layout wrap> | 629 | <v-layout wrap> |
| 630 | <v-flex xs12 sm5> | 630 | <v-flex xs12 sm5> |
| 631 | <v-layout> | 631 | <v-layout> |
| 632 | <v-flex sm6 xs6> | 632 | <v-flex sm6 xs6> |
| 633 | <b> | 633 | <b> |
| 634 | <h5 class="right my-1"> | 634 | <h5 class="right my-1"> |
| 635 | <b>Mobile No:</b> | 635 | <b>Mobile No:</b> |
| 636 | </h5> | 636 | </h5> |
| 637 | </b> | 637 | </b> |
| 638 | </v-flex> | 638 | </v-flex> |
| 639 | <v-flex sm6 xs6> | 639 | <v-flex sm6 xs6> |
| 640 | <h5 class="my-1">{{ editedItem.mobile }}</h5> | 640 | <h5 class="my-1">{{ editedItem.mobile }}</h5> |
| 641 | </v-flex> | 641 | </v-flex> |
| 642 | </v-layout> | 642 | </v-layout> |
| 643 | </v-flex> | 643 | </v-flex> |
| 644 | <v-flex xs12 sm7> | 644 | <v-flex xs12 sm7> |
| 645 | <v-layout> | 645 | <v-layout> |
| 646 | <v-flex xs6 sm4> | 646 | <v-flex xs6 sm4> |
| 647 | <b> | 647 | <b> |
| 648 | <h5 class="right my-1"> | 648 | <h5 class="right my-1"> |
| 649 | <b>FahterName:</b> | 649 | <b>FahterName:</b> |
| 650 | </h5> | 650 | </h5> |
| 651 | </b> | 651 | </b> |
| 652 | </v-flex> | 652 | </v-flex> |
| 653 | <v-flex sm8 xs6> | 653 | <v-flex sm8 xs6> |
| 654 | <h5 class="my-1">{{ editedItem.fatherName }}</h5> | 654 | <h5 class="my-1">{{ editedItem.fatherName }}</h5> |
| 655 | </v-flex> | 655 | </v-flex> |
| 656 | </v-layout> | 656 | </v-layout> |
| 657 | </v-flex> | 657 | </v-flex> |
| 658 | </v-layout> | 658 | </v-layout> |
| 659 | <v-layout wrap> | 659 | <v-layout wrap> |
| 660 | <v-flex xs12 sm5> | 660 | <v-flex xs12 sm5> |
| 661 | <v-layout> | 661 | <v-layout> |
| 662 | <v-flex xs6 sm6> | 662 | <v-flex xs6 sm6> |
| 663 | <b> | 663 | <b> |
| 664 | <h5 class="right my-1"> | 664 | <h5 class="right my-1"> |
| 665 | <b>MotherName:</b> | 665 | <b>MotherName:</b> |
| 666 | </h5> | 666 | </h5> |
| 667 | </b> | 667 | </b> |
| 668 | </v-flex> | 668 | </v-flex> |
| 669 | <v-flex sm6 xs6> | 669 | <v-flex sm6 xs6> |
| 670 | <h5 class="my-1">{{ editedItem.motherName }}</h5> | 670 | <h5 class="my-1">{{ editedItem.motherName }}</h5> |
| 671 | </v-flex> | 671 | </v-flex> |
| 672 | </v-layout> | 672 | </v-layout> |
| 673 | </v-flex> | 673 | </v-flex> |
| 674 | <v-flex xs12 sm7> | 674 | <v-flex xs12 sm7> |
| 675 | <v-layout> | 675 | <v-layout> |
| 676 | <v-flex xs6 sm4> | 676 | <v-flex xs6 sm4> |
| 677 | <b> | 677 | <b> |
| 678 | <h5 class="right my-1"> | 678 | <h5 class="right my-1"> |
| 679 | <b>FatherCellNo:</b> | 679 | <b>FatherCellNo:</b> |
| 680 | </h5> | 680 | </h5> |
| 681 | </b> | 681 | </b> |
| 682 | </v-flex> | 682 | </v-flex> |
| 683 | <v-flex sm6 xs6> | 683 | <v-flex sm6 xs6> |
| 684 | <h5 class="my-1">{{ editedItem.fatherCellNo }}</h5> | 684 | <h5 class="my-1">{{ editedItem.fatherCellNo }}</h5> |
| 685 | </v-flex> | 685 | </v-flex> |
| 686 | </v-layout> | 686 | </v-layout> |
| 687 | </v-flex> | 687 | </v-flex> |
| 688 | </v-layout> | 688 | </v-layout> |
| 689 | <v-layout wrap> | 689 | <v-layout wrap> |
| 690 | <v-flex xs12 sm5> | 690 | <v-flex xs12 sm5> |
| 691 | <v-layout> | 691 | <v-layout> |
| 692 | <v-flex xs6 sm6> | 692 | <v-flex xs6 sm6> |
| 693 | <b> | 693 | <b> |
| 694 | <h5 class="right my-1"> | 694 | <h5 class="right my-1"> |
| 695 | <b>MotherCellNo:</b> | 695 | <b>MotherCellNo:</b> |
| 696 | </h5> | 696 | </h5> |
| 697 | </b> | 697 | </b> |
| 698 | </v-flex> | 698 | </v-flex> |
| 699 | <v-flex sm6 xs6> | 699 | <v-flex sm6 xs6> |
| 700 | <h5 class="my-1">{{ editedItem.motherCellNo }}</h5> | 700 | <h5 class="my-1">{{ editedItem.motherCellNo }}</h5> |
| 701 | </v-flex> | 701 | </v-flex> |
| 702 | </v-layout> | 702 | </v-layout> |
| 703 | </v-flex> | 703 | </v-flex> |
| 704 | <v-flex xs12 sm7> | 704 | <v-flex xs12 sm7> |
| 705 | <v-layout> | 705 | <v-layout> |
| 706 | <v-flex xs6 sm4> | 706 | <v-flex xs6 sm4> |
| 707 | <b> | 707 | <b> |
| 708 | <h5 class="my-1 right"> | 708 | <h5 class="my-1 right"> |
| 709 | <b>AcademicYear:</b> | 709 | <b>AcademicYear:</b> |
| 710 | </h5> | 710 | </h5> |
| 711 | </b> | 711 | </b> |
| 712 | </v-flex> | 712 | </v-flex> |
| 713 | <v-flex sm5 xs8> | 713 | <v-flex sm5 xs8> |
| 714 | <h5 class="my-1">{{ editedItem.establishmentYear }}</h5> | 714 | <h5 class="my-1">{{ editedItem.establishmentYear }}</h5> |
| 715 | </v-flex> | 715 | </v-flex> |
| 716 | </v-layout> | 716 | </v-layout> |
| 717 | </v-flex> | 717 | </v-flex> |
| 718 | </v-layout> | 718 | </v-layout> |
| 719 | <v-layout wrap> | 719 | <v-layout wrap> |
| 720 | <v-flex xs12 sm5> | 720 | <v-flex xs12 sm5> |
| 721 | <v-layout> | 721 | <v-layout> |
| 722 | <v-flex xs6 sm6> | 722 | <v-flex xs6 sm6> |
| 723 | <b> | 723 | <b> |
| 724 | <h5 class="my-1 right"> | 724 | <h5 class="my-1 right"> |
| 725 | <b>MedicalNotes:</b> | 725 | <b>MedicalNotes:</b> |
| 726 | </h5> | 726 | </h5> |
| 727 | </b> | 727 | </b> |
| 728 | </v-flex> | 728 | </v-flex> |
| 729 | <v-flex sm5 xs6> | 729 | <v-flex sm5 xs6> |
| 730 | <h5 class="my-1">{{ editedItem.medicalNotes }}</h5> | 730 | <h5 class="my-1">{{ editedItem.medicalNotes }}</h5> |
| 731 | </v-flex> | 731 | </v-flex> |
| 732 | </v-layout> | 732 | </v-layout> |
| 733 | </v-flex> | 733 | </v-flex> |
| 734 | <v-flex xs12 sm7 class="hidden-xs-only"> | 734 | <v-flex xs12 sm7 class="hidden-xs-only"> |
| 735 | <v-layout wrap> | 735 | <v-layout wrap> |
| 736 | <v-flex sm4> | 736 | <v-flex sm4> |
| 737 | <b> | 737 | <b> |
| 738 | <h5 class="my-1 right"> | 738 | <h5 class="my-1 right"> |
| 739 | <b>present Address:</b> | 739 | <b>present Address:</b> |
| 740 | </h5> | 740 | </h5> |
| 741 | </b> | 741 | </b> |
| 742 | </v-flex> | 742 | </v-flex> |
| 743 | <v-flex sm8> | 743 | <v-flex sm8> |
| 744 | <h5 class="my-1">{{ editedItem.presentAddress }}</h5> | 744 | <h5 class="my-1">{{ editedItem.presentAddress }}</h5> |
| 745 | </v-flex> | 745 | </v-flex> |
| 746 | </v-layout> | 746 | </v-layout> |
| 747 | </v-flex> | 747 | </v-flex> |
| 748 | <v-flex sm6 class="hidden-xs-only"> | 748 | <v-flex sm6 class="hidden-xs-only"> |
| 749 | <v-layout wrap> | 749 | <v-layout wrap> |
| 750 | <v-flex sm5> | 750 | <v-flex sm5> |
| 751 | <b> | 751 | <b> |
| 752 | <h5 class="my-1 right"> | 752 | <h5 class="my-1 right"> |
| 753 | <b>Permanent Address:</b> | 753 | <b>Permanent Address:</b> |
| 754 | </h5> | 754 | </h5> |
| 755 | </b> | 755 | </b> |
| 756 | </v-flex> | 756 | </v-flex> |
| 757 | <v-flex sm7> | 757 | <v-flex sm7> |
| 758 | <h5 class="my-1">{{ editedItem.permanentAddress }}</h5> | 758 | <h5 class="my-1">{{ editedItem.permanentAddress }}</h5> |
| 759 | </v-flex> | 759 | </v-flex> |
| 760 | </v-layout> | 760 | </v-layout> |
| 761 | </v-flex> | 761 | </v-flex> |
| 762 | </v-layout> | 762 | </v-layout> |
| 763 | <v-layout wrap class="hidden-sm-only hidden-md-only hidden-lg-only hidden-xl-only"> | 763 | <v-layout wrap class="hidden-sm-only hidden-md-only hidden-lg-only hidden-xl-only"> |
| 764 | <v-flex xs12 sm5> | 764 | <v-flex xs12 sm5> |
| 765 | <v-layout wrap> | 765 | <v-layout wrap> |
| 766 | <v-flex xs12 sm6> | 766 | <v-flex xs12 sm6> |
| 767 | <b> | 767 | <b> |
| 768 | <h5 class="my-1"> | 768 | <h5 class="my-1"> |
| 769 | <b>present Address:-</b> | 769 | <b>present Address:-</b> |
| 770 | </h5> | 770 | </h5> |
| 771 | </b> | 771 | </b> |
| 772 | </v-flex> | 772 | </v-flex> |
| 773 | <v-flex sm5 xs12> | 773 | <v-flex sm5 xs12> |
| 774 | <h5 class="my-1">{{ editedItem.presentAddress }}</h5> | 774 | <h5 class="my-1">{{ editedItem.presentAddress }}</h5> |
| 775 | </v-flex> | 775 | </v-flex> |
| 776 | </v-layout> | 776 | </v-layout> |
| 777 | </v-flex> | 777 | </v-flex> |
| 778 | <v-flex xs12 sm6> | 778 | <v-flex xs12 sm6> |
| 779 | <v-layout wrap> | 779 | <v-layout wrap> |
| 780 | <v-flex xs12 sm6> | 780 | <v-flex xs12 sm6> |
| 781 | <b> | 781 | <b> |
| 782 | <h5 class="my-1"> | 782 | <h5 class="my-1"> |
| 783 | <b>Permanent Address:-</b> | 783 | <b>Permanent Address:-</b> |
| 784 | </h5> | 784 | </h5> |
| 785 | </b> | 785 | </b> |
| 786 | </v-flex> | 786 | </v-flex> |
| 787 | <v-flex sm6 xs12> | 787 | <v-flex sm6 xs12> |
| 788 | <h5 class="my-1">{{ editedItem.permanentAddress }}</h5> | 788 | <h5 class="my-1">{{ editedItem.permanentAddress }}</h5> |
| 789 | </v-flex> | 789 | </v-flex> |
| 790 | </v-layout> | 790 | </v-layout> |
| 791 | </v-flex> | 791 | </v-flex> |
| 792 | </v-layout> | 792 | </v-layout> |
| 793 | </v-container> | 793 | </v-container> |
| 794 | </v-card-text> | 794 | </v-card-text> |
| 795 | </v-card> | 795 | </v-card> |
| 796 | </v-dialog> | 796 | </v-dialog> |
| 797 | 797 | ||
| 798 | <!-- ****** STUDENTS TABLE ****** --> | 798 | <!-- ****** STUDENTS TABLE ****** --> |
| 799 | <v-toolbar color="transparent" flat> | 799 | <v-toolbar color="transparent" flat> |
| 800 | <v-btn | 800 | <v-btn |
| 801 | fab | 801 | fab |
| 802 | dark | 802 | dark |
| 803 | class="open-dialog-button hidden-xl-only hidden-md-only hidden-lg-only" | 803 | class="open-dialog-button hidden-xl-only hidden-md-only hidden-lg-only" |
| 804 | small | 804 | small |
| 805 | @click="addStudentDialog = true" | 805 | @click="addStudentDialog = true" |
| 806 | > | 806 | > |
| 807 | <v-icon dark>add</v-icon> | 807 | <v-icon dark>add</v-icon> |
| 808 | </v-btn> | 808 | </v-btn> |
| 809 | <v-btn | 809 | <v-btn |
| 810 | round | 810 | round |
| 811 | class="open-dialog-button hidden-sm-only hidden-xs-only" | 811 | class="open-dialog-button hidden-sm-only hidden-xs-only" |
| 812 | dark | 812 | dark |
| 813 | @click="addStudentDialog = true" | 813 | @click="addStudentDialog = true" |
| 814 | > | 814 | > |
| 815 | <v-icon class="white--text pr-1" size="20">add</v-icon>Add Student | 815 | <v-icon class="white--text pr-1" size="20">add</v-icon>Add Student |
| 816 | </v-btn> | 816 | </v-btn> |
| 817 | <v-card-actions class="hidden-xs-only hidden-sm-only"> | 817 | <v-card-actions class="hidden-xs-only hidden-sm-only"> |
| 818 | <v-flex md13 lg12> | 818 | <v-flex md13 lg12> |
| 819 | <v-layout> | 819 | <v-layout> |
| 820 | <v-flex lg3 md4> | 820 | <v-flex lg3 md4> |
| 821 | <v-select | 821 | <v-select |
| 822 | :items="addclass" | 822 | :items="addclass" |
| 823 | label="Select Class" | 823 | label="Select Class" |
| 824 | v-model="selectStudents.select" | 824 | v-model="selectStudents.select" |
| 825 | item-text="classNum" | 825 | item-text="classNum" |
| 826 | item-value="_id" | 826 | item-value="_id" |
| 827 | name="Select Class" | 827 | name="Select Class" |
| 828 | :rules="classRules" | 828 | :rules="classRules" |
| 829 | @change="getSections(selectStudents.select)" | 829 | @change="getSections(selectStudents.select)" |
| 830 | required | 830 | required |
| 831 | class="ml-2" | 831 | class="ml-2" |
| 832 | ></v-select> | 832 | ></v-select> |
| 833 | </v-flex> | 833 | </v-flex> |
| 834 | <v-flex lg3 md4 class="ml-2"> | 834 | <v-flex lg3 md4 class="ml-2"> |
| 835 | <v-layout> | 835 | <v-layout> |
| 836 | <v-select | 836 | <v-select |
| 837 | :items="addSection" | 837 | :items="addSection" |
| 838 | label="Select Section" | 838 | label="Select Section" |
| 839 | v-model="selectStudents.selectSection" | 839 | v-model="selectStudents.selectSection" |
| 840 | item-text="name" | 840 | item-text="name" |
| 841 | item-value="_id" | 841 | item-value="_id" |
| 842 | name="Select Section" | 842 | name="Select Section" |
| 843 | :rules="sectionRules" | 843 | :rules="sectionRules" |
| 844 | required | 844 | required |
| 845 | ></v-select> | 845 | ></v-select> |
| 846 | </v-layout> | 846 | </v-layout> |
| 847 | </v-flex> | 847 | </v-flex> |
| 848 | </v-layout> | 848 | </v-layout> |
| 849 | </v-flex> | 849 | </v-flex> |
| 850 | </v-card-actions> | 850 | </v-card-actions> |
| 851 | <v-spacer></v-spacer> | 851 | <v-spacer></v-spacer> |
| 852 | <v-btn @click="findStudents()" round dark :loading="loading" class="add-button hidden-xs-only hidden-sm-only">Find</v-btn> | 852 | <v-btn @click="findStudents()" round dark :loading="loading" class="add-button hidden-xs-only hidden-sm-only">Find</v-btn> |
| 853 | <v-card-title class="body-1" v-show="show"> | 853 | <v-card-title class="body-1" v-show="show"> |
| 854 | <v-btn icon large flat @click="displaySearch"> | 854 | <v-btn icon large flat @click="displaySearch"> |
| 855 | <v-avatar size="27"> | 855 | <v-avatar size="27"> |
| 856 | <img src="/static/icon/dashboard icons-49.png" alt="icon" /> | 856 | <img src="/static/icon/search.png" alt="icon" /> |
| 857 | </v-avatar> | 857 | </v-avatar> |
| 858 | </v-btn> | 858 | </v-btn> |
| 859 | </v-card-title> | 859 | </v-card-title> |
| 860 | <v-flex xs8 sm7 lg2 md3 v-show="showSearch"> | 860 | <v-flex xs8 sm7 lg2 md3 v-show="showSearch"> |
| 861 | <v-layout> | 861 | <v-layout> |
| 862 | <v-text-field v-model="search" label="Search" prepend-inner-icon="search" color="primary"></v-text-field> | 862 | <v-text-field v-model="search" label="Search" prepend-inner-icon="search" color="primary"></v-text-field> |
| 863 | <v-icon @click="closeSearch" color="error">close</v-icon> | 863 | <v-icon @click="closeSearch" color="error">close</v-icon> |
| 864 | </v-layout> | 864 | </v-layout> |
| 865 | </v-flex> | 865 | </v-flex> |
| 866 | </v-toolbar> | 866 | </v-toolbar> |
| 867 | <v-card flat class="elevation-0 transparent"> | 867 | <v-card flat class="elevation-0 transparent"> |
| 868 | <v-flex class="hidden-xl-only hidden-lg-only hidden-md-only"> | 868 | <v-flex class="hidden-xl-only hidden-lg-only hidden-md-only"> |
| 869 | <v-layout> | 869 | <v-layout> |
| 870 | <v-flex xs4> | 870 | <v-flex xs4> |
| 871 | <label class="right mt-4">Select Class:</label> | 871 | <label class="right mt-4">Select Class:</label> |
| 872 | </v-flex> | 872 | </v-flex> |
| 873 | <v-flex xs8> | 873 | <v-flex xs8> |
| 874 | <v-select | 874 | <v-select |
| 875 | :items="addclass" | 875 | :items="addclass" |
| 876 | label="Select Class" | 876 | label="Select Class" |
| 877 | v-model="selectStudents.select" | 877 | v-model="selectStudents.select" |
| 878 | item-text="classNum" | 878 | item-text="classNum" |
| 879 | item-value="_id" | 879 | item-value="_id" |
| 880 | name="Select Class" | 880 | name="Select Class" |
| 881 | :rules="classRules" | 881 | :rules="classRules" |
| 882 | @change="getSections(selectStudents.select)" | 882 | @change="getSections(selectStudents.select)" |
| 883 | class="px-2" | 883 | class="px-2" |
| 884 | ></v-select> | 884 | ></v-select> |
| 885 | </v-flex> | 885 | </v-flex> |
| 886 | </v-layout> | 886 | </v-layout> |
| 887 | <v-layout> | 887 | <v-layout> |
| 888 | <v-flex xs4> | 888 | <v-flex xs4> |
| 889 | <label class="right mt-4">Select Section:</label> | 889 | <label class="right mt-4">Select Section:</label> |
| 890 | </v-flex> | 890 | </v-flex> |
| 891 | <v-flex xs8> | 891 | <v-flex xs8> |
| 892 | <v-select | 892 | <v-select |
| 893 | :items="addSection" | 893 | :items="addSection" |
| 894 | label="Select Section" | 894 | label="Select Section" |
| 895 | v-model="selectStudents.selectSection" | 895 | v-model="selectStudents.selectSection" |
| 896 | item-text="name" | 896 | item-text="name" |
| 897 | item-value="_id" | 897 | item-value="_id" |
| 898 | name="Select Section" | 898 | name="Select Section" |
| 899 | :rules="sectionRules" | 899 | :rules="sectionRules" |
| 900 | class="px-2" | 900 | class="px-2" |
| 901 | required | 901 | required |
| 902 | ></v-select> | 902 | ></v-select> |
| 903 | </v-flex> | 903 | </v-flex> |
| 904 | </v-layout> | 904 | </v-layout> |
| 905 | <v-layout> | 905 | <v-layout> |
| 906 | <v-flex xs5 class="mx-auto mb-2"> | 906 | <v-flex xs5 class="mx-auto mb-2"> |
| 907 | <v-btn @click="findStudents()" block round dark :loading="loading" class="add-button">Find</v-btn> | 907 | <v-btn @click="findStudents()" block round dark :loading="loading" class="add-button">Find</v-btn> |
| 908 | </v-flex> | 908 | </v-flex> |
| 909 | </v-layout> | 909 | </v-layout> |
| 910 | </v-flex> | 910 | </v-flex> |
| 911 | </v-card> | 911 | </v-card> |
| 912 | <v-data-table | 912 | <v-data-table |
| 913 | :headers="headers" | 913 | :headers="headers" |
| 914 | :items="studentsData" | 914 | :items="studentsData" |
| 915 | :pagination.sync="pagination" | 915 | :pagination.sync="pagination" |
| 916 | :search="search" | 916 | :search="search" |
| 917 | > | 917 | > |
| 918 | <template slot="items" slot-scope="props"> | 918 | <template slot="items" slot-scope="props"> |
| 919 | <tr class="tr"> | 919 | <tr class="tr"> |
| 920 | <td class="text-xs-center td td-row">{{ props.item.rollNo}}</td> | 920 | <td class="text-xs-center td td-row">{{ props.item.rollNo}}</td> |
| 921 | <td class="text-xs-center td td-row"> | 921 | <td class="text-xs-center td td-row"> |
| 922 | <v-avatar size="40"> | 922 | <v-avatar size="40"> |
| 923 | <img :src="props.item.profilePicUrl" v-if="props.item.profilePicUrl" /> | 923 | <img :src="props.item.profilePicUrl" v-if="props.item.profilePicUrl" /> |
| 924 | <img src="/static/icon/user.png" v-else-if="!props.item.profilePicUrl" /> | 924 | <img src="/static/icon/user.png" v-else-if="!props.item.profilePicUrl" /> |
| 925 | </v-avatar> | 925 | </v-avatar> |
| 926 | </td> | 926 | </td> |
| 927 | <td class="text-xs-center td td-row">{{ props.item.name}}</td> | 927 | <td class="text-xs-center td td-row">{{ props.item.name}}</td> |
| 928 | <td class="text-xs-center td td-row">{{ props.item.gender }}</td> | 928 | <td class="text-xs-center td td-row">{{ props.item.gender }}</td> |
| 929 | <td class="text-xs-center td td-row">{{ props.item.parentId.fatherName }}</td> | 929 | <td class="text-xs-center td td-row">{{ props.item.parentId.fatherName }}</td> |
| 930 | <td class="text-xs-center td td-row">{{ props.item.parentId.motherName }}</td> | 930 | <td class="text-xs-center td td-row">{{ props.item.parentId.motherName }}</td> |
| 931 | <td class="text-xs-center td td-row">{{ props.item.establishmentYear }}</td> | 931 | <td class="text-xs-center td td-row">{{ props.item.establishmentYear }}</td> |
| 932 | <td class="text-xs-center td td-row">{{ props.item.mobile}}</td> | 932 | <td class="text-xs-center td td-row">{{ props.item.mobile}}</td> |
| 933 | <td class="text-xs-center td td-row"> | 933 | <td class="text-xs-center td td-row"> |
| 934 | <v-switch | 934 | <v-switch |
| 935 | class="pl-3" | 935 | class="pl-3" |
| 936 | v-model="props.item.status" | 936 | v-model="props.item.status" |
| 937 | @change="suspendStudentStatus(props.item.status,props.item._id)" | 937 | @change="suspendStudentStatus(props.item.status,props.item._id)" |
| 938 | ></v-switch> | 938 | ></v-switch> |
| 939 | </td> | 939 | </td> |
| 940 | <td class="text-xs-center td td-row"> | 940 | <td class="text-xs-center td td-row"> |
| 941 | <span> | 941 | <span> |
| 942 | <v-tooltip top> | 942 | <v-tooltip top> |
| 943 | <img | 943 | <img |
| 944 | slot="activator" | 944 | slot="activator" |
| 945 | style="cursor:pointer; width:25px; height:25px; " | 945 | style="cursor:pointer; width:25px; height:25px; " |
| 946 | class="mr-3" | 946 | class="mr-3" |
| 947 | @click="profile(props.item)" | 947 | @click="profile(props.item)" |
| 948 | src="/static/icon/dashboard icons-47.png" | 948 | src="/static/icon/view.png" |
| 949 | /> | 949 | /> |
| 950 | <span>View</span> | 950 | <span>View</span> |
| 951 | </v-tooltip> | 951 | </v-tooltip> |
| 952 | <v-tooltip top> | 952 | <v-tooltip top> |
| 953 | <img | 953 | <img |
| 954 | slot="activator" | 954 | slot="activator" |
| 955 | style="cursor:pointer; width:20px; height:18px; " | 955 | style="cursor:pointer; width:20px; height:18px; " |
| 956 | class="mr-3" | 956 | class="mr-3" |
| 957 | @click="editItem(props.item)" | 957 | @click="editItem(props.item)" |
| 958 | src="/static/icon/dashboard icons-50.png" | 958 | src="/static/icon/edit.png" |
| 959 | /> | 959 | /> |
| 960 | <span>Edit</span> | 960 | <span>Edit</span> |
| 961 | </v-tooltip> | 961 | </v-tooltip> |
| 962 | <v-tooltip top> | 962 | <v-tooltip top> |
| 963 | <img | 963 | <img |
| 964 | slot="activator" | 964 | slot="activator" |
| 965 | style="cursor:pointer; width:20px; height:20px; " | 965 | style="cursor:pointer; width:20px; height:20px; " |
| 966 | class="mr-3" | 966 | class="mr-3" |
| 967 | @click="deleteItem(props.item)" | 967 | @click="deleteItem(props.item)" |
| 968 | src="/static/icon/dashboard icons-51.png" | 968 | src="/static/icon/delete.png" |
| 969 | /> | 969 | /> |
| 970 | <span>Delete</span> | 970 | <span>Delete</span> |
| 971 | </v-tooltip> | 971 | </v-tooltip> |
| 972 | </span> | 972 | </span> |
| 973 | </td> | 973 | </td> |
| 974 | </tr> | 974 | </tr> |
| 975 | </template> | 975 | </template> |
| 976 | <v-alert | 976 | <v-alert |
| 977 | slot="no-results" | 977 | slot="no-results" |
| 978 | :value="true" | 978 | :value="true" |
| 979 | color="error" | 979 | color="error" |
| 980 | icon="warning" | 980 | icon="warning" |
| 981 | >Your search for "{{ search }}" found no results.</v-alert> | 981 | >Your search for "{{ search }}" found no results.</v-alert> |
| 982 | </v-data-table> | 982 | </v-data-table> |
| 983 | <!-- ****** ADD STUDENTS DETAILS****** --> | 983 | <!-- ****** ADD STUDENTS DETAILS****** --> |
| 984 | <v-dialog v-model="addStudentDialog" max-width="1280"> | 984 | <v-dialog v-model="addStudentDialog" max-width="1280"> |
| 985 | <v-card flat class="card-style pa-2" dark> | 985 | <v-card flat class="card-style pa-2" dark> |
| 986 | <v-layout> | 986 | <v-layout> |
| 987 | <v-flex xs12> | 987 | <v-flex xs12> |
| 988 | <label class="title text-xs-center">Add Student</label> | 988 | <label class="title text-xs-center">Add Student</label> |
| 989 | <v-icon size="24" class="right" @click="addStudentDialog = false">cancel</v-icon> | 989 | <v-icon size="24" class="right" @click="addStudentDialog = false">cancel</v-icon> |
| 990 | </v-flex> | 990 | </v-flex> |
| 991 | </v-layout> | 991 | </v-layout> |
| 992 | <v-container fluid> | 992 | <v-container fluid> |
| 993 | <v-layout align-center> | 993 | <v-layout align-center> |
| 994 | <v-flex xs12> | 994 | <v-flex xs12> |
| 995 | <v-stepper v-model="e2" flat class="card-style elevation-0" dark> | 995 | <v-stepper v-model="e2" flat class="card-style elevation-0" dark> |
| 996 | <v-stepper-header> | 996 | <v-stepper-header> |
| 997 | <v-stepper-step :complete="e2 > 1" step="1">Fill parent Details</v-stepper-step> | 997 | <v-stepper-step :complete="e2 > 1" step="1">Fill parent Details</v-stepper-step> |
| 998 | <v-divider></v-divider> | 998 | <v-divider></v-divider> |
| 999 | <v-stepper-step step="2">Fill Student Details</v-stepper-step> | 999 | <v-stepper-step step="2">Fill Student Details</v-stepper-step> |
| 1000 | </v-stepper-header> | 1000 | </v-stepper-header> |
| 1001 | <v-stepper-items> | 1001 | <v-stepper-items> |
| 1002 | <v-stepper-content step="1"> | 1002 | <v-stepper-content step="1"> |
| 1003 | <v-container fluid class> | 1003 | <v-container fluid class> |
| 1004 | <v-flex xs12 sm12 class="hidden-md-only hidden-lg-only hidden-xl-only"> | 1004 | <v-flex xs12 sm12 class="hidden-md-only hidden-lg-only hidden-xl-only"> |
| 1005 | <v-form ref="parentForm" v-model="valid" lazy-validation> | 1005 | <v-form ref="parentForm" v-model="valid" lazy-validation> |
| 1006 | <v-layout wrap> | 1006 | <v-layout wrap> |
| 1007 | <v-flex xs12 sm6> | 1007 | <v-flex xs12 sm6> |
| 1008 | <v-layout wrap> | 1008 | <v-layout wrap> |
| 1009 | <v-flex xs12 class="pt-4 subheading"> | 1009 | <v-flex xs12 class="pt-4 subheading"> |
| 1010 | <label>Father Cell No:</label> | 1010 | <label>Father Cell No:</label> |
| 1011 | </v-flex> | 1011 | </v-flex> |
| 1012 | <v-flex xs12> | 1012 | <v-flex xs12> |
| 1013 | <v-text-field | 1013 | <v-text-field |
| 1014 | v-model.trim="parentData.fatherCellNo" | 1014 | v-model.trim="parentData.fatherCellNo" |
| 1015 | placeholder="fill your father Cell Number" | 1015 | placeholder="fill your father Cell Number" |
| 1016 | type="number" | 1016 | type="number" |
| 1017 | :rules="fatheCellNoRules" | 1017 | :rules="fatheCellNoRules" |
| 1018 | counter="10" | 1018 | counter="10" |
| 1019 | v-on:keyup="getParentDetails()" | 1019 | v-on:keyup="getParentDetails()" |
| 1020 | required | 1020 | required |
| 1021 | ></v-text-field> | 1021 | ></v-text-field> |
| 1022 | </v-flex> | 1022 | </v-flex> |
| 1023 | </v-layout> | 1023 | </v-layout> |
| 1024 | </v-flex> | 1024 | </v-flex> |
| 1025 | <v-flex xs12 sm6> | 1025 | <v-flex xs12 sm6> |
| 1026 | <v-layout wrap> | 1026 | <v-layout wrap> |
| 1027 | <v-flex xs12 class="pt-4 subheading"> | 1027 | <v-flex xs12 class="pt-4 subheading"> |
| 1028 | <label>Parent Email Id:</label> | 1028 | <label>Parent Email Id:</label> |
| 1029 | </v-flex> | 1029 | </v-flex> |
| 1030 | <v-flex xs12> | 1030 | <v-flex xs12> |
| 1031 | <v-text-field | 1031 | <v-text-field |
| 1032 | placeholder="fill Parent email" | 1032 | placeholder="fill Parent email" |
| 1033 | v-model="parentData.email" | 1033 | v-model="parentData.email" |
| 1034 | type="text" | 1034 | type="text" |
| 1035 | required | 1035 | required |
| 1036 | ></v-text-field> | 1036 | ></v-text-field> |
| 1037 | </v-flex> | 1037 | </v-flex> |
| 1038 | </v-layout> | 1038 | </v-layout> |
| 1039 | </v-flex> | 1039 | </v-flex> |
| 1040 | </v-layout> | 1040 | </v-layout> |
| 1041 | <v-layout wrap> | 1041 | <v-layout wrap> |
| 1042 | <v-flex xs12 sm6> | 1042 | <v-flex xs12 sm6> |
| 1043 | <v-layout wrap> | 1043 | <v-layout wrap> |
| 1044 | <v-flex xs12 class="pt-4 subheading"> | 1044 | <v-flex xs12 class="pt-4 subheading"> |
| 1045 | <label>Father Name:</label> | 1045 | <label>Father Name:</label> |
| 1046 | </v-flex> | 1046 | </v-flex> |
| 1047 | <v-flex xs12> | 1047 | <v-flex xs12> |
| 1048 | <v-text-field | 1048 | <v-text-field |
| 1049 | v-model="parentData.fatherName" | 1049 | v-model="parentData.fatherName" |
| 1050 | placeholder="Fill your father Name" | 1050 | placeholder="Fill your father Name" |
| 1051 | required | 1051 | required |
| 1052 | ></v-text-field> | 1052 | ></v-text-field> |
| 1053 | </v-flex> | 1053 | </v-flex> |
| 1054 | </v-layout> | 1054 | </v-layout> |
| 1055 | </v-flex> | 1055 | </v-flex> |
| 1056 | <v-flex xs12 sm6> | 1056 | <v-flex xs12 sm6> |
| 1057 | <v-layout wrap> | 1057 | <v-layout wrap> |
| 1058 | <v-flex xs12 class="pt-4 subheading"> | 1058 | <v-flex xs12 class="pt-4 subheading"> |
| 1059 | <label>Mother Name:</label> | 1059 | <label>Mother Name:</label> |
| 1060 | </v-flex> | 1060 | </v-flex> |
| 1061 | <v-flex xs12> | 1061 | <v-flex xs12> |
| 1062 | <v-text-field | 1062 | <v-text-field |
| 1063 | v-model="parentData.motherName" | 1063 | v-model="parentData.motherName" |
| 1064 | placeholder="fill your Mother Name" | 1064 | placeholder="fill your Mother Name" |
| 1065 | type="text" | 1065 | type="text" |
| 1066 | required | 1066 | required |
| 1067 | ></v-text-field> | 1067 | ></v-text-field> |
| 1068 | </v-flex> | 1068 | </v-flex> |
| 1069 | </v-layout> | 1069 | </v-layout> |
| 1070 | </v-flex> | 1070 | </v-flex> |
| 1071 | </v-layout> | 1071 | </v-layout> |
| 1072 | <v-layout wrap> | 1072 | <v-layout wrap> |
| 1073 | <v-flex xs12 sm6> | 1073 | <v-flex xs12 sm6> |
| 1074 | <v-layout wrap> | 1074 | <v-layout wrap> |
| 1075 | <v-flex xs12 class="pt-4 subheading"> | 1075 | <v-flex xs12 class="pt-4 subheading"> |
| 1076 | <label>Mother Cell No:</label> | 1076 | <label>Mother Cell No:</label> |
| 1077 | </v-flex> | 1077 | </v-flex> |
| 1078 | <v-flex xs12> | 1078 | <v-flex xs12> |
| 1079 | <v-text-field | 1079 | <v-text-field |
| 1080 | v-model="parentData.motherCellNo" | 1080 | v-model="parentData.motherCellNo" |
| 1081 | placeholder="fill your Mother Cell Number" | 1081 | placeholder="fill your Mother Cell Number" |
| 1082 | type="number" | 1082 | type="number" |
| 1083 | required | 1083 | required |
| 1084 | ></v-text-field> | 1084 | ></v-text-field> |
| 1085 | </v-flex> | 1085 | </v-flex> |
| 1086 | </v-layout> | 1086 | </v-layout> |
| 1087 | </v-flex> | 1087 | </v-flex> |
| 1088 | <v-flex xs12 sm6> | 1088 | <v-flex xs12 sm6> |
| 1089 | <v-layout wrap> | 1089 | <v-layout wrap> |
| 1090 | <v-flex xs12 class="pt-4 subheading"> | 1090 | <v-flex xs12 class="pt-4 subheading"> |
| 1091 | <label>Father Profession:</label> | 1091 | <label>Father Profession:</label> |
| 1092 | </v-flex> | 1092 | </v-flex> |
| 1093 | <v-flex xs12> | 1093 | <v-flex xs12> |
| 1094 | <v-text-field | 1094 | <v-text-field |
| 1095 | v-model="parentData.fatherProfession" | 1095 | v-model="parentData.fatherProfession" |
| 1096 | placeholder="fill your father profession" | 1096 | placeholder="fill your father profession" |
| 1097 | ></v-text-field> | 1097 | ></v-text-field> |
| 1098 | </v-flex> | 1098 | </v-flex> |
| 1099 | </v-layout> | 1099 | </v-layout> |
| 1100 | </v-flex> | 1100 | </v-flex> |
| 1101 | </v-layout> | 1101 | </v-layout> |
| 1102 | <v-layout wrap> | 1102 | <v-layout wrap> |
| 1103 | <v-flex xs12 sm6> | 1103 | <v-flex xs12 sm6> |
| 1104 | <v-layout wrap> | 1104 | <v-layout wrap> |
| 1105 | <v-flex xs12 class="pt-4 subheading"> | 1105 | <v-flex xs12 class="pt-4 subheading"> |
| 1106 | <label>Mother Profession:</label> | 1106 | <label>Mother Profession:</label> |
| 1107 | </v-flex> | 1107 | </v-flex> |
| 1108 | <v-flex xs12> | 1108 | <v-flex xs12> |
| 1109 | <v-text-field | 1109 | <v-text-field |
| 1110 | v-model="parentData.motherProfession" | 1110 | v-model="parentData.motherProfession" |
| 1111 | placeholder="fill your mother profession" | 1111 | placeholder="fill your mother profession" |
| 1112 | ></v-text-field> | 1112 | ></v-text-field> |
| 1113 | </v-flex> | 1113 | </v-flex> |
| 1114 | </v-layout> | 1114 | </v-layout> |
| 1115 | </v-flex> | 1115 | </v-flex> |
| 1116 | </v-layout> | 1116 | </v-layout> |
| 1117 | <v-flex sm12 class="hidden-xs-only"> | 1117 | <v-flex sm12 class="hidden-xs-only"> |
| 1118 | <v-card-actions> | 1118 | <v-card-actions> |
| 1119 | <v-spacer></v-spacer> | 1119 | <v-spacer></v-spacer> |
| 1120 | <v-btn | 1120 | <v-btn |
| 1121 | @click="submitParentDetails" | 1121 | @click="submitParentDetails" |
| 1122 | round | 1122 | round |
| 1123 | dark | 1123 | dark |
| 1124 | :loading="loading" | 1124 | :loading="loading" |
| 1125 | v-show="showParent" | 1125 | v-show="showParent" |
| 1126 | class="add-button" | 1126 | class="add-button" |
| 1127 | >Add</v-btn> | 1127 | >Add</v-btn> |
| 1128 | <v-btn | 1128 | <v-btn |
| 1129 | v-show="showNext" | 1129 | v-show="showNext" |
| 1130 | @click="e2 = 2" | 1130 | @click="e2 = 2" |
| 1131 | round | 1131 | round |
| 1132 | dark | 1132 | dark |
| 1133 | class="add-button" | 1133 | class="add-button" |
| 1134 | >Next</v-btn> | 1134 | >Next</v-btn> |
| 1135 | </v-card-actions> | 1135 | </v-card-actions> |
| 1136 | </v-flex> | 1136 | </v-flex> |
| 1137 | <v-flex | 1137 | <v-flex |
| 1138 | xs6 | 1138 | xs6 |
| 1139 | class="hidden-md-only hidden-sm-only hidden-lg-only hidden-xl-only mx-auto mt-2" | 1139 | class="hidden-md-only hidden-sm-only hidden-lg-only hidden-xl-only mx-auto mt-2" |
| 1140 | > | 1140 | > |
| 1141 | <v-btn | 1141 | <v-btn |
| 1142 | @click="submitParentDetails" | 1142 | @click="submitParentDetails" |
| 1143 | round | 1143 | round |
| 1144 | dark | 1144 | dark |
| 1145 | :loading="loading" | 1145 | :loading="loading" |
| 1146 | v-show="showParent" | 1146 | v-show="showParent" |
| 1147 | class="add-button" | 1147 | class="add-button" |
| 1148 | >Add</v-btn> | 1148 | >Add</v-btn> |
| 1149 | <v-btn | 1149 | <v-btn |
| 1150 | v-show="showNext" | 1150 | v-show="showNext" |
| 1151 | @click="e2 = 2" | 1151 | @click="e2 = 2" |
| 1152 | round | 1152 | round |
| 1153 | dark | 1153 | dark |
| 1154 | class="add-button" | 1154 | class="add-button" |
| 1155 | >Next</v-btn> | 1155 | >Next</v-btn> |
| 1156 | </v-flex> | 1156 | </v-flex> |
| 1157 | </v-form> | 1157 | </v-form> |
| 1158 | </v-flex> | 1158 | </v-flex> |
| 1159 | <v-flex xs12 sm12 class="hidden-xs-only hidden-sm-only"> | 1159 | <v-flex xs12 sm12 class="hidden-xs-only hidden-sm-only"> |
| 1160 | <v-form ref="parentForm" v-model="valid" lazy-validation> | 1160 | <v-form ref="parentForm" v-model="valid" lazy-validation> |
| 1161 | <v-layout wrap> | 1161 | <v-layout wrap> |
| 1162 | <v-flex xs12 sm6> | 1162 | <v-flex xs12 sm6> |
| 1163 | <v-layout> | 1163 | <v-layout> |
| 1164 | <v-flex xs4 class="pt-4 subheading"> | 1164 | <v-flex xs4 class="pt-4 subheading"> |
| 1165 | <label class="right">Father Cell No:</label> | 1165 | <label class="right">Father Cell No:</label> |
| 1166 | </v-flex> | 1166 | </v-flex> |
| 1167 | <v-flex xs8 class="ml-3"> | 1167 | <v-flex xs8 class="ml-3"> |
| 1168 | <v-text-field | 1168 | <v-text-field |
| 1169 | v-model.trim="parentData.fatherCellNo" | 1169 | v-model.trim="parentData.fatherCellNo" |
| 1170 | placeholder="fill your father Cell Number" | 1170 | placeholder="fill your father Cell Number" |
| 1171 | type="number" | 1171 | type="number" |
| 1172 | :rules="fatheCellNoRules" | 1172 | :rules="fatheCellNoRules" |
| 1173 | counter="10" | 1173 | counter="10" |
| 1174 | v-on:keyup="getParentDetails()" | 1174 | v-on:keyup="getParentDetails()" |
| 1175 | required | 1175 | required |
| 1176 | ></v-text-field> | 1176 | ></v-text-field> |
| 1177 | </v-flex> | 1177 | </v-flex> |
| 1178 | </v-layout> | 1178 | </v-layout> |
| 1179 | </v-flex> | 1179 | </v-flex> |
| 1180 | <v-flex xs12 sm6> | 1180 | <v-flex xs12 sm6> |
| 1181 | <v-layout> | 1181 | <v-layout> |
| 1182 | <v-flex xs4 class="pt-4 subheading"> | 1182 | <v-flex xs4 class="pt-4 subheading"> |
| 1183 | <label class="right">Parent Email Id:</label> | 1183 | <label class="right">Parent Email Id:</label> |
| 1184 | </v-flex> | 1184 | </v-flex> |
| 1185 | <v-flex xs8 class="ml-3"> | 1185 | <v-flex xs8 class="ml-3"> |
| 1186 | <v-text-field | 1186 | <v-text-field |
| 1187 | placeholder="fill Parent email" | 1187 | placeholder="fill Parent email" |
| 1188 | v-model="parentData.email" | 1188 | v-model="parentData.email" |
| 1189 | type="text" | 1189 | type="text" |
| 1190 | required | 1190 | required |
| 1191 | ></v-text-field> | 1191 | ></v-text-field> |
| 1192 | </v-flex> | 1192 | </v-flex> |
| 1193 | </v-layout> | 1193 | </v-layout> |
| 1194 | </v-flex> | 1194 | </v-flex> |
| 1195 | </v-layout> | 1195 | </v-layout> |
| 1196 | <v-layout wrap> | 1196 | <v-layout wrap> |
| 1197 | <v-flex xs12 sm6> | 1197 | <v-flex xs12 sm6> |
| 1198 | <v-layout> | 1198 | <v-layout> |
| 1199 | <v-flex xs4 class="pt-4 subheading"> | 1199 | <v-flex xs4 class="pt-4 subheading"> |
| 1200 | <label class="right">Father Name:</label> | 1200 | <label class="right">Father Name:</label> |
| 1201 | </v-flex> | 1201 | </v-flex> |
| 1202 | <v-flex xs8 class="ml-3"> | 1202 | <v-flex xs8 class="ml-3"> |
| 1203 | <v-text-field | 1203 | <v-text-field |
| 1204 | v-model="parentData.fatherName" | 1204 | v-model="parentData.fatherName" |
| 1205 | placeholder="Fill your father Name" | 1205 | placeholder="Fill your father Name" |
| 1206 | required | 1206 | required |
| 1207 | ></v-text-field> | 1207 | ></v-text-field> |
| 1208 | </v-flex> | 1208 | </v-flex> |
| 1209 | </v-layout> | 1209 | </v-layout> |
| 1210 | </v-flex> | 1210 | </v-flex> |
| 1211 | <v-flex xs12 sm6> | 1211 | <v-flex xs12 sm6> |
| 1212 | <v-layout> | 1212 | <v-layout> |
| 1213 | <v-flex xs4 class="pt-4 subheading"> | 1213 | <v-flex xs4 class="pt-4 subheading"> |
| 1214 | <label class="right">Mother Name:</label> | 1214 | <label class="right">Mother Name:</label> |
| 1215 | </v-flex> | 1215 | </v-flex> |
| 1216 | <v-flex xs8 class="ml-3"> | 1216 | <v-flex xs8 class="ml-3"> |
| 1217 | <v-text-field | 1217 | <v-text-field |
| 1218 | v-model="parentData.motherName" | 1218 | v-model="parentData.motherName" |
| 1219 | placeholder="fill your Mother Name" | 1219 | placeholder="fill your Mother Name" |
| 1220 | type="text" | 1220 | type="text" |
| 1221 | required | 1221 | required |
| 1222 | ></v-text-field> | 1222 | ></v-text-field> |
| 1223 | </v-flex> | 1223 | </v-flex> |
| 1224 | </v-layout> | 1224 | </v-layout> |
| 1225 | </v-flex> | 1225 | </v-flex> |
| 1226 | </v-layout> | 1226 | </v-layout> |
| 1227 | <v-layout wrap> | 1227 | <v-layout wrap> |
| 1228 | <v-flex xs12 sm6> | 1228 | <v-flex xs12 sm6> |
| 1229 | <v-layout> | 1229 | <v-layout> |
| 1230 | <v-flex xs4 class="pt-4 subheading"> | 1230 | <v-flex xs4 class="pt-4 subheading"> |
| 1231 | <label class="right">Mother Cell No:</label> | 1231 | <label class="right">Mother Cell No:</label> |
| 1232 | </v-flex> | 1232 | </v-flex> |
| 1233 | <v-flex xs8 class="ml-3"> | 1233 | <v-flex xs8 class="ml-3"> |
| 1234 | <v-text-field | 1234 | <v-text-field |
| 1235 | v-model="parentData.motherCellNo" | 1235 | v-model="parentData.motherCellNo" |
| 1236 | placeholder="fill your Mother Cell Number" | 1236 | placeholder="fill your Mother Cell Number" |
| 1237 | type="number" | 1237 | type="number" |
| 1238 | required | 1238 | required |
| 1239 | ></v-text-field> | 1239 | ></v-text-field> |
| 1240 | </v-flex> | 1240 | </v-flex> |
| 1241 | </v-layout> | 1241 | </v-layout> |
| 1242 | </v-flex> | 1242 | </v-flex> |
| 1243 | <v-flex xs12 sm6> | 1243 | <v-flex xs12 sm6> |
| 1244 | <v-layout> | 1244 | <v-layout> |
| 1245 | <v-flex xs4 class="pt-4 subheading"> | 1245 | <v-flex xs4 class="pt-4 subheading"> |
| 1246 | <label class="right">Father Profession:</label> | 1246 | <label class="right">Father Profession:</label> |
| 1247 | </v-flex> | 1247 | </v-flex> |
| 1248 | <v-flex xs8 class="ml-3"> | 1248 | <v-flex xs8 class="ml-3"> |
| 1249 | <v-text-field | 1249 | <v-text-field |
| 1250 | v-model="parentData.fatherProfession" | 1250 | v-model="parentData.fatherProfession" |
| 1251 | placeholder="fill your father profession" | 1251 | placeholder="fill your father profession" |
| 1252 | ></v-text-field> | 1252 | ></v-text-field> |
| 1253 | </v-flex> | 1253 | </v-flex> |
| 1254 | </v-layout> | 1254 | </v-layout> |
| 1255 | </v-flex> | 1255 | </v-flex> |
| 1256 | </v-layout> | 1256 | </v-layout> |
| 1257 | <v-layout wrap> | 1257 | <v-layout wrap> |
| 1258 | <v-flex xs12 sm6> | 1258 | <v-flex xs12 sm6> |
| 1259 | <v-layout> | 1259 | <v-layout> |
| 1260 | <v-flex xs4 class="pt-4 subheading"> | 1260 | <v-flex xs4 class="pt-4 subheading"> |
| 1261 | <label class="right">Mother Profession:</label> | 1261 | <label class="right">Mother Profession:</label> |
| 1262 | </v-flex> | 1262 | </v-flex> |
| 1263 | <v-flex xs8 class="ml-3"> | 1263 | <v-flex xs8 class="ml-3"> |
| 1264 | <v-text-field | 1264 | <v-text-field |
| 1265 | v-model="parentData.motherProfession" | 1265 | v-model="parentData.motherProfession" |
| 1266 | placeholder="fill your mother profession" | 1266 | placeholder="fill your mother profession" |
| 1267 | ></v-text-field> | 1267 | ></v-text-field> |
| 1268 | </v-flex> | 1268 | </v-flex> |
| 1269 | </v-layout> | 1269 | </v-layout> |
| 1270 | </v-flex> | 1270 | </v-flex> |
| 1271 | </v-layout> | 1271 | </v-layout> |
| 1272 | <v-flex sm12 class="hidden-xs-only"> | 1272 | <v-flex sm12 class="hidden-xs-only"> |
| 1273 | <v-card-actions> | 1273 | <v-card-actions> |
| 1274 | <v-spacer></v-spacer> | 1274 | <v-spacer></v-spacer> |
| 1275 | <v-btn | 1275 | <v-btn |
| 1276 | @click="submitParentDetails" | 1276 | @click="submitParentDetails" |
| 1277 | round | 1277 | round |
| 1278 | dark | 1278 | dark |
| 1279 | :loading="loading" | 1279 | :loading="loading" |
| 1280 | v-show="showParent" | 1280 | v-show="showParent" |
| 1281 | class="add-button" | 1281 | class="add-button" |
| 1282 | >Add</v-btn> | 1282 | >Add</v-btn> |
| 1283 | <v-btn | 1283 | <v-btn |
| 1284 | v-show="showNext" | 1284 | v-show="showNext" |
| 1285 | @click="e2 = 2" | 1285 | @click="e2 = 2" |
| 1286 | round | 1286 | round |
| 1287 | dark | 1287 | dark |
| 1288 | class="add-button" | 1288 | class="add-button" |
| 1289 | >Next</v-btn> | 1289 | >Next</v-btn> |
| 1290 | </v-card-actions> | 1290 | </v-card-actions> |
| 1291 | </v-flex> | 1291 | </v-flex> |
| 1292 | <v-flex | 1292 | <v-flex |
| 1293 | xs6 | 1293 | xs6 |
| 1294 | class="hidden-md-only hidden-sm-only hidden-lg-only hidden-xl-only mx-auto mt-2" | 1294 | class="hidden-md-only hidden-sm-only hidden-lg-only hidden-xl-only mx-auto mt-2" |
| 1295 | > | 1295 | > |
| 1296 | <v-btn | 1296 | <v-btn |
| 1297 | @click="submitParentDetails" | 1297 | @click="submitParentDetails" |
| 1298 | round | 1298 | round |
| 1299 | dark | 1299 | dark |
| 1300 | :loading="loading" | 1300 | :loading="loading" |
| 1301 | v-show="showParent" | 1301 | v-show="showParent" |
| 1302 | class="add-button" | 1302 | class="add-button" |
| 1303 | >Add</v-btn> | 1303 | >Add</v-btn> |
| 1304 | <v-btn | 1304 | <v-btn |
| 1305 | v-show="showNext" | 1305 | v-show="showNext" |
| 1306 | @click="e2 = 2" | 1306 | @click="e2 = 2" |
| 1307 | round | 1307 | round |
| 1308 | dark | 1308 | dark |
| 1309 | class="add-button" | 1309 | class="add-button" |
| 1310 | >Next</v-btn> | 1310 | >Next</v-btn> |
| 1311 | </v-flex> | 1311 | </v-flex> |
| 1312 | </v-form> | 1312 | </v-form> |
| 1313 | </v-flex> | 1313 | </v-flex> |
| 1314 | </v-container> | 1314 | </v-container> |
| 1315 | </v-stepper-content> | 1315 | </v-stepper-content> |
| 1316 | <v-stepper-content step="2"> | 1316 | <v-stepper-content step="2"> |
| 1317 | <v-flex xs12 sm12> | 1317 | <v-flex xs12 sm12> |
| 1318 | <v-form ref="form" v-model="valid" lazy-validation> | 1318 | <v-form ref="form" v-model="valid" lazy-validation> |
| 1319 | <v-layout> | 1319 | <v-layout> |
| 1320 | <v-flex | 1320 | <v-flex |
| 1321 | xs12 | 1321 | xs12 |
| 1322 | class="text-xs-center text-sm-center text-md-center text-lg-center" | 1322 | class="text-xs-center text-sm-center text-md-center text-lg-center" |
| 1323 | > | 1323 | > |
| 1324 | <v-avatar size="100px"> | 1324 | <v-avatar size="100px"> |
| 1325 | <img src="/static/icon/user.png" v-if="!imageUrl" /> | 1325 | <img src="/static/icon/user.png" v-if="!imageUrl" /> |
| 1326 | </v-avatar> | 1326 | </v-avatar> |
| 1327 | <input | 1327 | <input |
| 1328 | type="file" | 1328 | type="file" |
| 1329 | style="display: none" | 1329 | style="display: none" |
| 1330 | ref="image" | 1330 | ref="image" |
| 1331 | accept="image/*" | 1331 | accept="image/*" |
| 1332 | @change="onFilePicked" | 1332 | @change="onFilePicked" |
| 1333 | /> | 1333 | /> |
| 1334 | <img | 1334 | <img |
| 1335 | :src="imageData.imageUrl" | 1335 | :src="imageData.imageUrl" |
| 1336 | height="150" | 1336 | height="150" |
| 1337 | v-if="imageUrl" | 1337 | v-if="imageUrl" |
| 1338 | style="border-radius:50%; width:200px" | 1338 | style="border-radius:50%; width:200px" |
| 1339 | /> | 1339 | /> |
| 1340 | </v-flex> | 1340 | </v-flex> |
| 1341 | </v-layout> | 1341 | </v-layout> |
| 1342 | <v-layout wrap> | 1342 | <v-layout wrap> |
| 1343 | <v-flex xs12 sm6> | 1343 | <v-flex xs12 sm6> |
| 1344 | <v-layout> | 1344 | <v-layout> |
| 1345 | <v-flex x4 sm4 class="pt-4 subheading"> | 1345 | <v-flex x4 sm4 class="pt-4 subheading"> |
| 1346 | <label class="right hidden-xs-only hidden-sm-only">Select Class:</label> | 1346 | <label class="right hidden-xs-only hidden-sm-only">Select Class:</label> |
| 1347 | <label | 1347 | <label |
| 1348 | class="right hidden-lg-only hidden-md-only hidden-xl-only" | 1348 | class="right hidden-lg-only hidden-md-only hidden-xl-only" |
| 1349 | >Class:</label> | 1349 | >Class:</label> |
| 1350 | </v-flex> | 1350 | </v-flex> |
| 1351 | <v-flex xs8 sm8 class="ml-3"> | 1351 | <v-flex xs8 sm8 class="ml-3"> |
| 1352 | <v-select | 1352 | <v-select |
| 1353 | :items="addclass" | 1353 | :items="addclass" |
| 1354 | label="Select Class" | 1354 | label="Select Class" |
| 1355 | v-model="addStudents.select" | 1355 | v-model="addStudents.select" |
| 1356 | item-text="classNum" | 1356 | item-text="classNum" |
| 1357 | item-value="_id" | 1357 | item-value="_id" |
| 1358 | name="Select Class" | 1358 | name="Select Class" |
| 1359 | :rules="classRules" | 1359 | :rules="classRules" |
| 1360 | @change="getSection(addStudents.select)" | 1360 | @change="getSection(addStudents.select)" |
| 1361 | required | 1361 | required |
| 1362 | ></v-select> | 1362 | ></v-select> |
| 1363 | </v-flex> | 1363 | </v-flex> |
| 1364 | </v-layout> | 1364 | </v-layout> |
| 1365 | </v-flex> | 1365 | </v-flex> |
| 1366 | <v-flex xs12 sm6> | 1366 | <v-flex xs12 sm6> |
| 1367 | <v-layout> | 1367 | <v-layout> |
| 1368 | <v-flex xs4 class="pt-4 subheading"> | 1368 | <v-flex xs4 class="pt-4 subheading"> |
| 1369 | <label class="right hidden-xs-only hidden-sm-only">Select Section:</label> | 1369 | <label class="right hidden-xs-only hidden-sm-only">Select Section:</label> |
| 1370 | <label | 1370 | <label |
| 1371 | class="right hidden-lg-only hidden-md-only hidden-xl-only" | 1371 | class="right hidden-lg-only hidden-md-only hidden-xl-only" |
| 1372 | >Section:</label> | 1372 | >Section:</label> |
| 1373 | </v-flex> | 1373 | </v-flex> |
| 1374 | <v-flex xs8 class="ml-3"> | 1374 | <v-flex xs8 class="ml-3"> |
| 1375 | <v-select | 1375 | <v-select |
| 1376 | :items="addSection" | 1376 | :items="addSection" |
| 1377 | label="Select Section" | 1377 | label="Select Section" |
| 1378 | v-model="addStudents.selectSection" | 1378 | v-model="addStudents.selectSection" |
| 1379 | item-text="name" | 1379 | item-text="name" |
| 1380 | item-value="_id" | 1380 | item-value="_id" |
| 1381 | name="Select Section" | 1381 | name="Select Section" |
| 1382 | :rules="sectionRules" | 1382 | :rules="sectionRules" |
| 1383 | required | 1383 | required |
| 1384 | ></v-select> | 1384 | ></v-select> |
| 1385 | </v-flex> | 1385 | </v-flex> |
| 1386 | </v-layout> | 1386 | </v-layout> |
| 1387 | </v-flex> | 1387 | </v-flex> |
| 1388 | </v-layout> | 1388 | </v-layout> |
| 1389 | <v-layout wrap> | 1389 | <v-layout wrap> |
| 1390 | <v-flex xs12 sm6> | 1390 | <v-flex xs12 sm6> |
| 1391 | <v-layout> | 1391 | <v-layout> |
| 1392 | <v-flex xs4 sm4 class="pt-4 subheading"> | 1392 | <v-flex xs4 sm4 class="pt-4 subheading"> |
| 1393 | <label class="right hidden-xs-only hidden-sm-only">Full Name:</label> | 1393 | <label class="right hidden-xs-only hidden-sm-only">Full Name:</label> |
| 1394 | <label | 1394 | <label |
| 1395 | class="right hidden-lg-only hidden-md-only hidden-xl-only" | 1395 | class="right hidden-lg-only hidden-md-only hidden-xl-only" |
| 1396 | >Name:</label> | 1396 | >Name:</label> |
| 1397 | </v-flex> | 1397 | </v-flex> |
| 1398 | <v-flex xs8 sm8 class="ml-3"> | 1398 | <v-flex xs8 sm8 class="ml-3"> |
| 1399 | <v-text-field | 1399 | <v-text-field |
| 1400 | v-model="addStudents.name" | 1400 | v-model="addStudents.name" |
| 1401 | placeholder="fill your full Name" | 1401 | placeholder="fill your full Name" |
| 1402 | name="name" | 1402 | name="name" |
| 1403 | type="text" | 1403 | type="text" |
| 1404 | :rules="nameRules" | 1404 | :rules="nameRules" |
| 1405 | required | 1405 | required |
| 1406 | ></v-text-field> | 1406 | ></v-text-field> |
| 1407 | </v-flex> | 1407 | </v-flex> |
| 1408 | </v-layout> | 1408 | </v-layout> |
| 1409 | </v-flex> | 1409 | </v-flex> |
| 1410 | <v-flex xs12 sm6> | 1410 | <v-flex xs12 sm6> |
| 1411 | <v-layout> | 1411 | <v-layout> |
| 1412 | <v-flex xs4 sm4 class="pt-4 subheading"> | 1412 | <v-flex xs4 sm4 class="pt-4 subheading"> |
| 1413 | <label class="right">Email:</label> | 1413 | <label class="right">Email:</label> |
| 1414 | </v-flex> | 1414 | </v-flex> |
| 1415 | <v-flex xs8 sm8 class="ml-3"> | 1415 | <v-flex xs8 sm8 class="ml-3"> |
| 1416 | <v-text-field | 1416 | <v-text-field |
| 1417 | placeholder="fill your email" | 1417 | placeholder="fill your email" |
| 1418 | v-model="addStudents.email" | 1418 | v-model="addStudents.email" |
| 1419 | type="text" | 1419 | type="text" |
| 1420 | name="email" | 1420 | name="email" |
| 1421 | required | 1421 | required |
| 1422 | ></v-text-field> | 1422 | ></v-text-field> |
| 1423 | </v-flex> | 1423 | </v-flex> |
| 1424 | </v-layout> | 1424 | </v-layout> |
| 1425 | </v-flex> | 1425 | </v-flex> |
| 1426 | </v-layout> | 1426 | </v-layout> |
| 1427 | <v-layout wrap> | 1427 | <v-layout wrap> |
| 1428 | <v-flex xs12 sm6> | 1428 | <v-flex xs12 sm6> |
| 1429 | <v-layout> | 1429 | <v-layout> |
| 1430 | <v-flex xs4 sm4 class="pt-4 subheading"> | 1430 | <v-flex xs4 sm4 class="pt-4 subheading"> |
| 1431 | <label class="right hidden-sm-only hidden-xs-only">Date of Birth:</label> | 1431 | <label class="right hidden-sm-only hidden-xs-only">Date of Birth:</label> |
| 1432 | <label | 1432 | <label |
| 1433 | class="right hidden-lg-only hidden-xl-only hidden-md-only" | 1433 | class="right hidden-lg-only hidden-xl-only hidden-md-only" |
| 1434 | >D.O.B:</label> | 1434 | >D.O.B:</label> |
| 1435 | </v-flex> | 1435 | </v-flex> |
| 1436 | <v-flex xs8 sm8 class="ml-3"> | 1436 | <v-flex xs8 sm8 class="ml-3"> |
| 1437 | <v-menu | 1437 | <v-menu |
| 1438 | ref="menu" | 1438 | ref="menu" |
| 1439 | :close-on-content-click="false" | 1439 | :close-on-content-click="false" |
| 1440 | v-model="menu" | 1440 | v-model="menu" |
| 1441 | :nudge-right="40" | 1441 | :nudge-right="40" |
| 1442 | lazy | 1442 | lazy |
| 1443 | transition="scale-transition" | 1443 | transition="scale-transition" |
| 1444 | offset-y | 1444 | offset-y |
| 1445 | full-width | 1445 | full-width |
| 1446 | min-width="290px" | 1446 | min-width="290px" |
| 1447 | > | 1447 | > |
| 1448 | <v-text-field | 1448 | <v-text-field |
| 1449 | slot="activator" | 1449 | slot="activator" |
| 1450 | :rules="dateRules" | 1450 | :rules="dateRules" |
| 1451 | v-model="addStudents.date" | 1451 | v-model="addStudents.date" |
| 1452 | placeholder="Select date" | 1452 | placeholder="Select date" |
| 1453 | ></v-text-field> | 1453 | ></v-text-field> |
| 1454 | <v-date-picker | 1454 | <v-date-picker |
| 1455 | ref="picker" | 1455 | ref="picker" |
| 1456 | v-model="addStudents.date" | 1456 | v-model="addStudents.date" |
| 1457 | :max="new Date().toISOString().substr(0, 10)" | 1457 | :max="new Date().toISOString().substr(0, 10)" |
| 1458 | min="1950-01-01" | 1458 | min="1950-01-01" |
| 1459 | @input="menu = false" | 1459 | @input="menu = false" |
| 1460 | ></v-date-picker> | 1460 | ></v-date-picker> |
| 1461 | </v-menu> | 1461 | </v-menu> |
| 1462 | </v-flex> | 1462 | </v-flex> |
| 1463 | </v-layout> | 1463 | </v-layout> |
| 1464 | </v-flex> | 1464 | </v-flex> |
| 1465 | <v-flex xs12 sm6> | 1465 | <v-flex xs12 sm6> |
| 1466 | <v-layout> | 1466 | <v-layout> |
| 1467 | <v-flex xs4 class="pt-4 subheading"> | 1467 | <v-flex xs4 class="pt-4 subheading"> |
| 1468 | <label class="right">City:</label> | 1468 | <label class="right">City:</label> |
| 1469 | </v-flex> | 1469 | </v-flex> |
| 1470 | <v-flex xs8 class="ml-3"> | 1470 | <v-flex xs8 class="ml-3"> |
| 1471 | <v-text-field | 1471 | <v-text-field |
| 1472 | v-model="addStudents.city" | 1472 | v-model="addStudents.city" |
| 1473 | placeholder="fill your City Name" | 1473 | placeholder="fill your City Name" |
| 1474 | name="City" | 1474 | name="City" |
| 1475 | type="text" | 1475 | type="text" |
| 1476 | :rules="cityRules" | 1476 | :rules="cityRules" |
| 1477 | required | 1477 | required |
| 1478 | ></v-text-field> | 1478 | ></v-text-field> |
| 1479 | </v-flex> | 1479 | </v-flex> |
| 1480 | </v-layout> | 1480 | </v-layout> |
| 1481 | </v-flex> | 1481 | </v-flex> |
| 1482 | </v-layout> | 1482 | </v-layout> |
| 1483 | <v-layout wrap> | 1483 | <v-layout wrap> |
| 1484 | <v-flex xs12 sm6> | 1484 | <v-flex xs12 sm6> |
| 1485 | <v-layout> | 1485 | <v-layout> |
| 1486 | <v-flex xs4 class="pt-4 subheading"> | 1486 | <v-flex xs4 class="pt-4 subheading"> |
| 1487 | <label class="right">State:</label> | 1487 | <label class="right">State:</label> |
| 1488 | </v-flex> | 1488 | </v-flex> |
| 1489 | <v-flex xs8 class="ml-3"> | 1489 | <v-flex xs8 class="ml-3"> |
| 1490 | <v-text-field | 1490 | <v-text-field |
| 1491 | v-model="addStudents.state" | 1491 | v-model="addStudents.state" |
| 1492 | placeholder="fill your State Name" | 1492 | placeholder="fill your State Name" |
| 1493 | name="state" | 1493 | name="state" |
| 1494 | type="text" | 1494 | type="text" |
| 1495 | :rules="stateRules" | 1495 | :rules="stateRules" |
| 1496 | required | 1496 | required |
| 1497 | ></v-text-field> | 1497 | ></v-text-field> |
| 1498 | </v-flex> | 1498 | </v-flex> |
| 1499 | </v-layout> | 1499 | </v-layout> |
| 1500 | </v-flex> | 1500 | </v-flex> |
| 1501 | <v-flex xs12 sm6> | 1501 | <v-flex xs12 sm6> |
| 1502 | <v-layout> | 1502 | <v-layout> |
| 1503 | <v-flex xs4 class="pt-4 subheading"> | 1503 | <v-flex xs4 class="pt-4 subheading"> |
| 1504 | <label class="right">Pincode:</label> | 1504 | <label class="right">Pincode:</label> |
| 1505 | </v-flex> | 1505 | </v-flex> |
| 1506 | <v-flex xs8 class="ml-3"> | 1506 | <v-flex xs8 class="ml-3"> |
| 1507 | <v-text-field | 1507 | <v-text-field |
| 1508 | v-model="addStudents.pincode" | 1508 | v-model="addStudents.pincode" |
| 1509 | placeholder="fill your pincode" | 1509 | placeholder="fill your pincode" |
| 1510 | name="pincode" | 1510 | name="pincode" |
| 1511 | type="number" | 1511 | type="number" |
| 1512 | :rules="pincode" | 1512 | :rules="pincode" |
| 1513 | required | 1513 | required |
| 1514 | ></v-text-field> | 1514 | ></v-text-field> |
| 1515 | </v-flex> | 1515 | </v-flex> |
| 1516 | </v-layout> | 1516 | </v-layout> |
| 1517 | </v-flex> | 1517 | </v-flex> |
| 1518 | </v-layout> | 1518 | </v-layout> |
| 1519 | <v-layout wrap> | 1519 | <v-layout wrap> |
| 1520 | <v-flex xs12 sm6> | 1520 | <v-flex xs12 sm6> |
| 1521 | <v-layout> | 1521 | <v-layout> |
| 1522 | <v-flex xs4 class="pt-4 subheading"> | 1522 | <v-flex xs4 class="pt-4 subheading"> |
| 1523 | <label class="right hidden-xs-only hidden-sm-only">Mobile No:</label> | 1523 | <label class="right hidden-xs-only hidden-sm-only">Mobile No:</label> |
| 1524 | <label | 1524 | <label |
| 1525 | class="right hidden-lg-only hidden-md-only hidden-xl-only" | 1525 | class="right hidden-lg-only hidden-md-only hidden-xl-only" |
| 1526 | >Mobile:</label> | 1526 | >Mobile:</label> |
| 1527 | </v-flex> | 1527 | </v-flex> |
| 1528 | <v-flex xs8 class="ml-3"> | 1528 | <v-flex xs8 class="ml-3"> |
| 1529 | <v-text-field | 1529 | <v-text-field |
| 1530 | v-model="addStudents.mobile" | 1530 | v-model="addStudents.mobile" |
| 1531 | placeholder="fill your MobileNo" | 1531 | placeholder="fill your MobileNo" |
| 1532 | name="mobileNo" | 1532 | name="mobileNo" |
| 1533 | type="number" | 1533 | type="number" |
| 1534 | 1534 | ||
| 1535 | ></v-text-field> | 1535 | ></v-text-field> |
| 1536 | </v-flex> | 1536 | </v-flex> |
| 1537 | </v-layout> | 1537 | </v-layout> |
| 1538 | </v-flex> | 1538 | </v-flex> |
| 1539 | <v-flex xs12 sm6> | 1539 | <v-flex xs12 sm6> |
| 1540 | <v-layout> | 1540 | <v-layout> |
| 1541 | <v-flex xs4 class="pt-4 subheading"> | 1541 | <v-flex xs4 class="pt-4 subheading"> |
| 1542 | <label class="right hidden-xs-only hidden-sm-only">Select Country:</label> | 1542 | <label class="right hidden-xs-only hidden-sm-only">Select Country:</label> |
| 1543 | <label | 1543 | <label |
| 1544 | class="right hidden-lg-only hidden-md-only hidden-xl-only" | 1544 | class="right hidden-lg-only hidden-md-only hidden-xl-only" |
| 1545 | >Country:</label> | 1545 | >Country:</label> |
| 1546 | </v-flex> | 1546 | </v-flex> |
| 1547 | <v-flex xs8 class="ml-3"> | 1547 | <v-flex xs8 class="ml-3"> |
| 1548 | <v-autocomplete | 1548 | <v-autocomplete |
| 1549 | v-model="addStudents.country" | 1549 | v-model="addStudents.country" |
| 1550 | :rules="country" | 1550 | :rules="country" |
| 1551 | :items="countries" | 1551 | :items="countries" |
| 1552 | placeholder="Select Country Name" | 1552 | placeholder="Select Country Name" |
| 1553 | required | 1553 | required |
| 1554 | ></v-autocomplete> | 1554 | ></v-autocomplete> |
| 1555 | </v-flex> | 1555 | </v-flex> |
| 1556 | </v-layout> | 1556 | </v-layout> |
| 1557 | </v-flex> | 1557 | </v-flex> |
| 1558 | </v-layout> | 1558 | </v-layout> |
| 1559 | <v-layout wrap> | 1559 | <v-layout wrap> |
| 1560 | <v-flex xs12 sm6> | 1560 | <v-flex xs12 sm6> |
| 1561 | <v-layout> | 1561 | <v-layout> |
| 1562 | <v-flex xs4 class="pt-4 subheading"> | 1562 | <v-flex xs4 class="pt-4 subheading"> |
| 1563 | <label class="right">Gender:</label> | 1563 | <label class="right">Gender:</label> |
| 1564 | </v-flex> | 1564 | </v-flex> |
| 1565 | <v-flex xs8 class="ml-3"> | 1565 | <v-flex xs8 class="ml-3"> |
| 1566 | <v-select | 1566 | <v-select |
| 1567 | :items="gender" | 1567 | :items="gender" |
| 1568 | v-model="addStudents.gender" | 1568 | v-model="addStudents.gender" |
| 1569 | :rules="genderRules" | 1569 | :rules="genderRules" |
| 1570 | label="Select Gender" | 1570 | label="Select Gender" |
| 1571 | required | 1571 | required |
| 1572 | ></v-select> | 1572 | ></v-select> |
| 1573 | </v-flex> | 1573 | </v-flex> |
| 1574 | </v-layout> | 1574 | </v-layout> |
| 1575 | </v-flex> | 1575 | </v-flex> |
| 1576 | <v-flex xs12 sm6> | 1576 | <v-flex xs12 sm6> |
| 1577 | <v-layout> | 1577 | <v-layout> |
| 1578 | <v-flex xs4 class="pt-4 subheading"> | 1578 | <v-flex xs4 class="pt-4 subheading"> |
| 1579 | <label class="right hidden-xs-only hidden-sm-only">Blood Group:</label> | 1579 | <label class="right hidden-xs-only hidden-sm-only">Blood Group:</label> |
| 1580 | <label | 1580 | <label |
| 1581 | class="right hidden-lg-only hidden-md-only hidden-xl-only" | 1581 | class="right hidden-lg-only hidden-md-only hidden-xl-only" |
| 1582 | >Blood:</label> | 1582 | >Blood:</label> |
| 1583 | </v-flex> | 1583 | </v-flex> |
| 1584 | <v-flex xs8 class="ml-3"> | 1584 | <v-flex xs8 class="ml-3"> |
| 1585 | <v-text-field | 1585 | <v-text-field |
| 1586 | v-model="addStudents.bloodGroup" | 1586 | v-model="addStudents.bloodGroup" |
| 1587 | placeholder="Fill your Blood Group" | 1587 | placeholder="Fill your Blood Group" |
| 1588 | required | 1588 | required |
| 1589 | ></v-text-field> | 1589 | ></v-text-field> |
| 1590 | </v-flex> | 1590 | </v-flex> |
| 1591 | </v-layout> | 1591 | </v-layout> |
| 1592 | </v-flex> | 1592 | </v-flex> |
| 1593 | </v-layout> | 1593 | </v-layout> |
| 1594 | <v-layout wrap> | 1594 | <v-layout wrap> |
| 1595 | <v-flex xs12 sm6> | 1595 | <v-flex xs12 sm6> |
| 1596 | <v-layout> | 1596 | <v-layout> |
| 1597 | <v-flex xs4 class="pt-4 subheading"> | 1597 | <v-flex xs4 class="pt-4 subheading"> |
| 1598 | <label class="right hidden-xs-only hidden-sm-only">Roll Number:</label> | 1598 | <label class="right hidden-xs-only hidden-sm-only">Roll Number:</label> |
| 1599 | <label | 1599 | <label |
| 1600 | class="right hidden-lg-only hidden-md-only hidden-xl-only" | 1600 | class="right hidden-lg-only hidden-md-only hidden-xl-only" |
| 1601 | >Roll No:</label> | 1601 | >Roll No:</label> |
| 1602 | </v-flex> | 1602 | </v-flex> |
| 1603 | <v-flex xs8 class="ml-3"> | 1603 | <v-flex xs8 class="ml-3"> |
| 1604 | <v-text-field | 1604 | <v-text-field |
| 1605 | v-model="addStudents.rollNo" | 1605 | v-model="addStudents.rollNo" |
| 1606 | placeholder="Fill your Roll Number" | 1606 | placeholder="Fill your Roll Number" |
| 1607 | required | 1607 | required |
| 1608 | ></v-text-field> | 1608 | ></v-text-field> |
| 1609 | </v-flex> | 1609 | </v-flex> |
| 1610 | </v-layout> | 1610 | </v-layout> |
| 1611 | </v-flex> | 1611 | </v-flex> |
| 1612 | <v-flex xs12 sm6> | 1612 | <v-flex xs12 sm6> |
| 1613 | <v-layout> | 1613 | <v-layout> |
| 1614 | <v-flex xs4 class="pt-4 subheading"> | 1614 | <v-flex xs4 class="pt-4 subheading"> |
| 1615 | <label class="right hidden-xs-only hidden-sm-only">Medical Notes:</label> | 1615 | <label class="right hidden-xs-only hidden-sm-only">Medical Notes:</label> |
| 1616 | <label | 1616 | <label |
| 1617 | class="right hidden-lg-only hidden-md-only hidden-xl-only" | 1617 | class="right hidden-lg-only hidden-md-only hidden-xl-only" |
| 1618 | >Medical:</label> | 1618 | >Medical:</label> |
| 1619 | </v-flex> | 1619 | </v-flex> |
| 1620 | <v-flex xs8 class="ml-3"> | 1620 | <v-flex xs8 class="ml-3"> |
| 1621 | <v-text-field | 1621 | <v-text-field |
| 1622 | v-model="addStudents.medicalNotes" | 1622 | v-model="addStudents.medicalNotes" |
| 1623 | placeholder="Fill your Medical Notes" | 1623 | placeholder="Fill your Medical Notes" |
| 1624 | required | 1624 | required |
| 1625 | ></v-text-field> | 1625 | ></v-text-field> |
| 1626 | </v-flex> | 1626 | </v-flex> |
| 1627 | </v-layout> | 1627 | </v-layout> |
| 1628 | </v-flex> | 1628 | </v-flex> |
| 1629 | </v-layout> | 1629 | </v-layout> |
| 1630 | <v-layout wrap> | 1630 | <v-layout wrap> |
| 1631 | <v-flex xs12 sm6> | 1631 | <v-flex xs12 sm6> |
| 1632 | <v-layout> | 1632 | <v-layout> |
| 1633 | <v-flex xs4 class="pt-4 subheading"> | 1633 | <v-flex xs4 class="pt-4 subheading"> |
| 1634 | <label class="right">Height:</label> | 1634 | <label class="right">Height:</label> |
| 1635 | </v-flex> | 1635 | </v-flex> |
| 1636 | <v-flex xs8 class="ml-3"> | 1636 | <v-flex xs8 class="ml-3"> |
| 1637 | <v-text-field | 1637 | <v-text-field |
| 1638 | v-model="addStudents.height" | 1638 | v-model="addStudents.height" |
| 1639 | placeholder="Fill your Height" | 1639 | placeholder="Fill your Height" |
| 1640 | required | 1640 | required |
| 1641 | ></v-text-field> | 1641 | ></v-text-field> |
| 1642 | </v-flex> | 1642 | </v-flex> |
| 1643 | </v-layout> | 1643 | </v-layout> |
| 1644 | </v-flex> | 1644 | </v-flex> |
| 1645 | <v-flex xs12 sm6> | 1645 | <v-flex xs12 sm6> |
| 1646 | <v-layout> | 1646 | <v-layout> |
| 1647 | <v-flex xs4 class="pt-4 subheading"> | 1647 | <v-flex xs4 class="pt-4 subheading"> |
| 1648 | <label class="right">Weight:</label> | 1648 | <label class="right">Weight:</label> |
| 1649 | </v-flex> | 1649 | </v-flex> |
| 1650 | <v-flex xs8 class="ml-3"> | 1650 | <v-flex xs8 class="ml-3"> |
| 1651 | <v-text-field | 1651 | <v-text-field |
| 1652 | v-model="addStudents.weight" | 1652 | v-model="addStudents.weight" |
| 1653 | placeholder="Fill your Weight" | 1653 | placeholder="Fill your Weight" |
| 1654 | required | 1654 | required |
| 1655 | ></v-text-field> | 1655 | ></v-text-field> |
| 1656 | </v-flex> | 1656 | </v-flex> |
| 1657 | </v-layout> | 1657 | </v-layout> |
| 1658 | </v-flex> | 1658 | </v-flex> |
| 1659 | </v-layout> | 1659 | </v-layout> |
| 1660 | <v-layout wrap> | 1660 | <v-layout wrap> |
| 1661 | <v-flex xs12 sm6> | 1661 | <v-flex xs12 sm6> |
| 1662 | <v-layout> | 1662 | <v-layout> |
| 1663 | <v-flex xs4 class="pt-4 subheading"> | 1663 | <v-flex xs4 class="pt-4 subheading"> |
| 1664 | <label class="right hidden-xs-only hidden-sm-only">Uplaod Image:</label> | 1664 | <label class="right hidden-xs-only hidden-sm-only">Uplaod Image:</label> |
| 1665 | <label | 1665 | <label |
| 1666 | class="right hidden-lg-only hidden-md-only hidden-xl-only" | 1666 | class="right hidden-lg-only hidden-md-only hidden-xl-only" |
| 1667 | >Uplaod :</label> | 1667 | >Uplaod :</label> |
| 1668 | </v-flex> | 1668 | </v-flex> |
| 1669 | <v-flex xs8 class="ml-3"> | 1669 | <v-flex xs8 class="ml-3"> |
| 1670 | <v-text-field | 1670 | <v-text-field |
| 1671 | label="Select Image" | 1671 | label="Select Image" |
| 1672 | @click="pickFile" | 1672 | @click="pickFile" |
| 1673 | v-model="imageName" | 1673 | v-model="imageName" |
| 1674 | append-icon="attach_file" | 1674 | append-icon="attach_file" |
| 1675 | ></v-text-field> | 1675 | ></v-text-field> |
| 1676 | </v-flex> | 1676 | </v-flex> |
| 1677 | </v-layout> | 1677 | </v-layout> |
| 1678 | </v-flex> | 1678 | </v-flex> |
| 1679 | <v-flex xs12 sm6> | 1679 | <v-flex xs12 sm6> |
| 1680 | <v-layout> | 1680 | <v-layout> |
| 1681 | <v-flex xs4 class="pt-4 subheading"> | 1681 | <v-flex xs4 class="pt-4 subheading"> |
| 1682 | <label class="right hidden-xs-only hidden-sm-only">Academic Year:</label> | 1682 | <label class="right hidden-xs-only hidden-sm-only">Academic Year:</label> |
| 1683 | <label | 1683 | <label |
| 1684 | class="right hidden-lg-only hidden-md-only hidden-xl-only" | 1684 | class="right hidden-lg-only hidden-md-only hidden-xl-only" |
| 1685 | >Year:</label> | 1685 | >Year:</label> |
| 1686 | </v-flex> | 1686 | </v-flex> |
| 1687 | <v-flex xs8 class="ml-3"> | 1687 | <v-flex xs8 class="ml-3"> |
| 1688 | <v-text-field | 1688 | <v-text-field |
| 1689 | v-model="addStudents.establishmentYear" | 1689 | v-model="addStudents.establishmentYear" |
| 1690 | placeholder="fill your Academic Year" | 1690 | placeholder="fill your Academic Year" |
| 1691 | name="state" | 1691 | name="state" |
| 1692 | type="number" | 1692 | type="number" |
| 1693 | :rules="establishmentYearRules" | 1693 | :rules="establishmentYearRules" |
| 1694 | required | 1694 | required |
| 1695 | ></v-text-field> | 1695 | ></v-text-field> |
| 1696 | </v-flex> | 1696 | </v-flex> |
| 1697 | </v-layout> | 1697 | </v-layout> |
| 1698 | </v-flex> | 1698 | </v-flex> |
| 1699 | </v-layout> | 1699 | </v-layout> |
| 1700 | <v-layout wrap class="hidden-xs-only hidden-sm-only"> | 1700 | <v-layout wrap class="hidden-xs-only hidden-sm-only"> |
| 1701 | <v-flex xs12 sm6> | 1701 | <v-flex xs12 sm6> |
| 1702 | <v-layout> | 1702 | <v-layout> |
| 1703 | <v-flex xs4 sm4 class="pt-4 subheading"> | 1703 | <v-flex xs4 sm4 class="pt-4 subheading"> |
| 1704 | <label class="right">Present Address:</label> | 1704 | <label class="right">Present Address:</label> |
| 1705 | </v-flex> | 1705 | </v-flex> |
| 1706 | <v-flex xs8 sm8 class="ml-3"> | 1706 | <v-flex xs8 sm8 class="ml-3"> |
| 1707 | <v-text-field | 1707 | <v-text-field |
| 1708 | v-model="addStudents.presentAddress" | 1708 | v-model="addStudents.presentAddress" |
| 1709 | :rules="presentAddress" | 1709 | :rules="presentAddress" |
| 1710 | placeholder="fill Your present Address" | 1710 | placeholder="fill Your present Address" |
| 1711 | @keyup="copyData" | 1711 | @keyup="copyData" |
| 1712 | ></v-text-field> | 1712 | ></v-text-field> |
| 1713 | </v-flex> | 1713 | </v-flex> |
| 1714 | </v-layout> | 1714 | </v-layout> |
| 1715 | </v-flex> | 1715 | </v-flex> |
| 1716 | <v-flex xs12 sm6> | 1716 | <v-flex xs12 sm6> |
| 1717 | <v-layout> | 1717 | <v-layout> |
| 1718 | <v-flex xs4 sm4 class="pt-4 subheading addressForm"> | 1718 | <v-flex xs4 sm4 class="pt-4 subheading addressForm"> |
| 1719 | <label class="right">Permanent Address:</label> | 1719 | <label class="right">Permanent Address:</label> |
| 1720 | </v-flex> | 1720 | </v-flex> |
| 1721 | <v-flex xs12 sm8 class="ml-3"> | 1721 | <v-flex xs12 sm8 class="ml-3"> |
| 1722 | <v-switch | 1722 | <v-switch |
| 1723 | v-model="addStudents.permanentAddress" | 1723 | v-model="addStudents.permanentAddress" |
| 1724 | label="Select Permanent Address" | 1724 | label="Select Permanent Address" |
| 1725 | :value="addStudents.presentAddress" | 1725 | :value="addStudents.presentAddress" |
| 1726 | ></v-switch> | 1726 | ></v-switch> |
| 1727 | </v-flex> | 1727 | </v-flex> |
| 1728 | </v-layout> | 1728 | </v-layout> |
| 1729 | </v-flex> | 1729 | </v-flex> |
| 1730 | </v-layout> | 1730 | </v-layout> |
| 1731 | <v-layout class="hidden-xs-only hidden-sm-only"> | 1731 | <v-layout class="hidden-xs-only hidden-sm-only"> |
| 1732 | <v-flex xs12 sm6> | 1732 | <v-flex xs12 sm6> |
| 1733 | <v-layout> | 1733 | <v-layout> |
| 1734 | <v-flex xs4 sm4 class="pt-4 subheading addressForm"> | 1734 | <v-flex xs4 sm4 class="pt-4 subheading addressForm"> |
| 1735 | <label class="right">Permanent Address:</label> | 1735 | <label class="right">Permanent Address:</label> |
| 1736 | </v-flex> | 1736 | </v-flex> |
| 1737 | <v-flex xs12 sm8 class="ml-3"> | 1737 | <v-flex xs12 sm8 class="ml-3"> |
| 1738 | <v-text-field | 1738 | <v-text-field |
| 1739 | v-model="addStudents.permanentAddress" | 1739 | v-model="addStudents.permanentAddress" |
| 1740 | :rules="permanentAddress" | 1740 | :rules="permanentAddress" |
| 1741 | placeholder="fill Your Permanent Address" | 1741 | placeholder="fill Your Permanent Address" |
| 1742 | ></v-text-field> | 1742 | ></v-text-field> |
| 1743 | </v-flex> | 1743 | </v-flex> |
| 1744 | </v-layout> | 1744 | </v-layout> |
| 1745 | </v-flex> | 1745 | </v-flex> |
| 1746 | </v-layout> | 1746 | </v-layout> |
| 1747 | <v-layout class="hidden-lg-only hidden-md-only hidden-xl-only" wrap> | 1747 | <v-layout class="hidden-lg-only hidden-md-only hidden-xl-only" wrap> |
| 1748 | <v-flex xs12 sm12> | 1748 | <v-flex xs12 sm12> |
| 1749 | <v-layout> | 1749 | <v-layout> |
| 1750 | <v-flex xs12 sm12 class="pt-4 subheading text-xs-center"> | 1750 | <v-flex xs12 sm12 class="pt-4 subheading text-xs-center"> |
| 1751 | <label class>Present Address:</label> | 1751 | <label class>Present Address:</label> |
| 1752 | </v-flex> | 1752 | </v-flex> |
| 1753 | </v-layout> | 1753 | </v-layout> |
| 1754 | <v-layout> | 1754 | <v-layout> |
| 1755 | <v-flex xs12 sm12> | 1755 | <v-flex xs12 sm12> |
| 1756 | <v-textarea | 1756 | <v-textarea |
| 1757 | name="input-4-3" | 1757 | name="input-4-3" |
| 1758 | v-model="addStudents.presentAddress" | 1758 | v-model="addStudents.presentAddress" |
| 1759 | :rules="presentAddress" | 1759 | :rules="presentAddress" |
| 1760 | placeholder="fill Your present Address" | 1760 | placeholder="fill Your present Address" |
| 1761 | required | 1761 | required |
| 1762 | ></v-textarea> | 1762 | ></v-textarea> |
| 1763 | </v-flex> | 1763 | </v-flex> |
| 1764 | </v-layout> | 1764 | </v-layout> |
| 1765 | </v-flex> | 1765 | </v-flex> |
| 1766 | <v-flex xs12 sm12> | 1766 | <v-flex xs12 sm12> |
| 1767 | <v-layout> | 1767 | <v-layout> |
| 1768 | <v-flex | 1768 | <v-flex |
| 1769 | xs12 | 1769 | xs12 |
| 1770 | sm12 | 1770 | sm12 |
| 1771 | class="pt-4 pr-4 subheading text-xs-center addressForm" | 1771 | class="pt-4 pr-4 subheading text-xs-center addressForm" |
| 1772 | > | 1772 | > |
| 1773 | <label>Permanent Address:</label> | 1773 | <label>Permanent Address:</label> |
| 1774 | </v-flex> | 1774 | </v-flex> |
| 1775 | </v-layout> | 1775 | </v-layout> |
| 1776 | <v-layout> | 1776 | <v-layout> |
| 1777 | <v-flex xs12 sm12> | 1777 | <v-flex xs12 sm12> |
| 1778 | <v-textarea | 1778 | <v-textarea |
| 1779 | name="input-4-3" | 1779 | name="input-4-3" |
| 1780 | v-model="addStudents.permanentAddress" | 1780 | v-model="addStudents.permanentAddress" |
| 1781 | :rules="permanentAddress" | 1781 | :rules="permanentAddress" |
| 1782 | placeholder="fill Your Permanent Address" | 1782 | placeholder="fill Your Permanent Address" |
| 1783 | required | 1783 | required |
| 1784 | ></v-textarea> | 1784 | ></v-textarea> |
| 1785 | </v-flex> | 1785 | </v-flex> |
| 1786 | </v-layout> | 1786 | </v-layout> |
| 1787 | </v-flex> | 1787 | </v-flex> |
| 1788 | </v-layout> | 1788 | </v-layout> |
| 1789 | <v-layout> | 1789 | <v-layout> |
| 1790 | <v-flex xs12 sm12> | 1790 | <v-flex xs12 sm12> |
| 1791 | <v-layout class="right"> | 1791 | <v-layout class="right"> |
| 1792 | <!-- <v-flex xs6> --> | 1792 | <!-- <v-flex xs6> --> |
| 1793 | <v-btn round dark @click="e2 = 1" class="clear-button">Back</v-btn> | 1793 | <v-btn round dark @click="e2 = 1" class="clear-button">Back</v-btn> |
| 1794 | <!-- </v-flex> | 1794 | <!-- </v-flex> |
| 1795 | <v-flex xs6>--> | 1795 | <v-flex xs6>--> |
| 1796 | <v-btn | 1796 | <v-btn |
| 1797 | @click="submit" | 1797 | @click="submit" |
| 1798 | round | 1798 | round |
| 1799 | dark | 1799 | dark |
| 1800 | :loading="loading" | 1800 | :loading="loading" |
| 1801 | class="add-button" | 1801 | class="add-button" |
| 1802 | >Add</v-btn> | 1802 | >Add</v-btn> |
| 1803 | <!-- </v-flex> --> | 1803 | <!-- </v-flex> --> |
| 1804 | </v-layout> | 1804 | </v-layout> |
| 1805 | </v-flex> | 1805 | </v-flex> |
| 1806 | </v-layout> | 1806 | </v-layout> |
| 1807 | </v-form> | 1807 | </v-form> |
| 1808 | </v-flex> | 1808 | </v-flex> |
| 1809 | </v-stepper-content> | 1809 | </v-stepper-content> |
| 1810 | </v-stepper-items> | 1810 | </v-stepper-items> |
| 1811 | </v-stepper> | 1811 | </v-stepper> |
| 1812 | </v-flex> | 1812 | </v-flex> |
| 1813 | </v-layout> | 1813 | </v-layout> |
| 1814 | </v-container> | 1814 | </v-container> |
| 1815 | </v-card> | 1815 | </v-card> |
| 1816 | </v-dialog> | 1816 | </v-dialog> |
| 1817 | <v-snackbar | 1817 | <v-snackbar |
| 1818 | :timeout="timeout" | 1818 | :timeout="timeout" |
| 1819 | :top="y === 'top'" | 1819 | :top="y === 'top'" |
| 1820 | :right="x === 'right'" | 1820 | :right="x === 'right'" |
| 1821 | :vertical="mode === 'vertical'" | 1821 | :vertical="mode === 'vertical'" |
| 1822 | v-model="snackbar" | 1822 | v-model="snackbar" |
| 1823 | :color="color" | 1823 | :color="color" |
| 1824 | >{{ text }}</v-snackbar> | 1824 | >{{ text }}</v-snackbar> |
| 1825 | <div class="loader" v-if="showLoader"> | 1825 | <div class="loader" v-if="showLoader"> |
| 1826 | <v-progress-circular indeterminate color="white"></v-progress-circular> | 1826 | <v-progress-circular indeterminate color="white"></v-progress-circular> |
| 1827 | </div> | 1827 | </div> |
| 1828 | </v-container> | 1828 | </v-container> |
| 1829 | </template> | 1829 | </template> |
| 1830 | 1830 | ||
| 1831 | <script> | 1831 | <script> |
| 1832 | import http from "@/Services/http.js"; | 1832 | import http from "@/Services/http.js"; |
| 1833 | import moment from "moment"; | 1833 | import moment from "moment"; |
| 1834 | import countryList from "@/script/country.js"; | 1834 | import countryList from "@/script/country.js"; |
| 1835 | import parent from "@/script/parents.js"; | 1835 | import parent from "@/script/parents.js"; |
| 1836 | 1836 | ||
| 1837 | export default { | 1837 | export default { |
| 1838 | data: () => ({ | 1838 | data: () => ({ |
| 1839 | e2: 0, | 1839 | e2: 0, |
| 1840 | showParent: true, | 1840 | showParent: true, |
| 1841 | showNext: false, | 1841 | showNext: false, |
| 1842 | snackbar: false, | 1842 | snackbar: false, |
| 1843 | y: "top", | 1843 | y: "top", |
| 1844 | x: "right", | 1844 | x: "right", |
| 1845 | mode: "", | 1845 | mode: "", |
| 1846 | timeout: 3000, | 1846 | timeout: 3000, |
| 1847 | text: "", | 1847 | text: "", |
| 1848 | show: true, | 1848 | show: true, |
| 1849 | color: "", | 1849 | color: "", |
| 1850 | showSearch: false, | 1850 | showSearch: false, |
| 1851 | showLoader: false, | 1851 | showLoader: false, |
| 1852 | loading: false, | 1852 | loading: false, |
| 1853 | editLoading: false, | 1853 | editLoading: false, |
| 1854 | date: null, | 1854 | date: null, |
| 1855 | search: "", | 1855 | search: "", |
| 1856 | menu: false, | 1856 | menu: false, |
| 1857 | menu1: false, | 1857 | menu1: false, |
| 1858 | editStudentDialog: false, | 1858 | editStudentDialog: false, |
| 1859 | profileStudentDialog: false, | 1859 | profileStudentDialog: false, |
| 1860 | addStudentDialog: false, | 1860 | addStudentDialog: false, |
| 1861 | valid: true, | 1861 | valid: true, |
| 1862 | addclass: [], | 1862 | addclass: [], |
| 1863 | addSection: [], | 1863 | addSection: [], |
| 1864 | gender: ["Male", "Female"], | 1864 | gender: ["Male", "Female"], |
| 1865 | pagination: { | 1865 | pagination: { |
| 1866 | rowsPerPage: 10 | 1866 | rowsPerPage: 10 |
| 1867 | }, | 1867 | }, |
| 1868 | imageData: {}, | 1868 | imageData: {}, |
| 1869 | imageName: "", | 1869 | imageName: "", |
| 1870 | imageUrl: "", | 1870 | imageUrl: "", |
| 1871 | imageFile: "", | 1871 | imageFile: "", |
| 1872 | editImageName: "", | 1872 | editImageName: "", |
| 1873 | editImageUrl: "", | 1873 | editImageUrl: "", |
| 1874 | nameRules: [v => !!v || " Full Name is required"], | 1874 | nameRules: [v => !!v || " Full Name is required"], |
| 1875 | dateRules: [v => !!v || " DOB is required"], | 1875 | dateRules: [v => !!v || " DOB is required"], |
| 1876 | cityRules: [v => !!v || " City Name is required"], | 1876 | cityRules: [v => !!v || " City Name is required"], |
| 1877 | pincode: [v => !!v || " Pincode is required"], | 1877 | pincode: [v => !!v || " Pincode is required"], |
| 1878 | country: [v => !!v || " Country Name is required"], | 1878 | country: [v => !!v || " Country Name is required"], |
| 1879 | permanentAddress: [v => !!v || " Permanent Address is required"], | 1879 | permanentAddress: [v => !!v || " Permanent Address is required"], |
| 1880 | presentAddress: [v => !!v || " Present Address is required"], | 1880 | presentAddress: [v => !!v || " Present Address is required"], |
| 1881 | stateRules: [v => !!v || "State Name is required"], | 1881 | stateRules: [v => !!v || "State Name is required"], |
| 1882 | classRules: [v => !!v || " Class Name is required"], | 1882 | classRules: [v => !!v || " Class Name is required"], |
| 1883 | sectionRules: [v => !!v || " Section Name is required"], | 1883 | sectionRules: [v => !!v || " Section Name is required"], |
| 1884 | genderRules: [v => !!v || " Select Gender is required"], | 1884 | genderRules: [v => !!v || " Select Gender is required"], |
| 1885 | fatheCellNoRules: [ | 1885 | fatheCellNoRules: [ |
| 1886 | v => !!v || " father Cell Number is required", | 1886 | v => !!v || " father Cell Number is required", |
| 1887 | v => v <= 10000000000 || "Max 10 characters is required" | 1887 | v => v <= 10000000000 || "Max 10 characters is required" |
| 1888 | ], | 1888 | ], |
| 1889 | mobileNoRule: [v => !!v || " Mobile Number is required"], | 1889 | mobileNoRule: [v => !!v || " Mobile Number is required"], |
| 1890 | establishmentYearRules: [v => !!v || " Academic Year is required"], | 1890 | establishmentYearRules: [v => !!v || " Academic Year is required"], |
| 1891 | errorMessages: "", | 1891 | errorMessages: "", |
| 1892 | countries: [], | 1892 | countries: [], |
| 1893 | headers: [ | 1893 | headers: [ |
| 1894 | { | 1894 | { |
| 1895 | text: "Roll No.", | 1895 | text: "Roll No.", |
| 1896 | align: "center", | 1896 | align: "center", |
| 1897 | sortable: false, | 1897 | sortable: false, |
| 1898 | value: "rollNo" | 1898 | value: "rollNo" |
| 1899 | }, | 1899 | }, |
| 1900 | { | 1900 | { |
| 1901 | text: "Profile Pic", | 1901 | text: "Profile Pic", |
| 1902 | value: "profilePicUrl", | 1902 | value: "profilePicUrl", |
| 1903 | sortable: false, | 1903 | sortable: false, |
| 1904 | align: "center" | 1904 | align: "center" |
| 1905 | }, | 1905 | }, |
| 1906 | { text: "Name", value: "name", sortable: false, align: "center" }, | 1906 | { text: "Name", value: "name", sortable: false, align: "center" }, |
| 1907 | { text: "Gender", value: "gender", sortable: false, align: "center" }, | 1907 | { text: "Gender", value: "gender", sortable: false, align: "center" }, |
| 1908 | { | 1908 | { |
| 1909 | text: "Father Name", | 1909 | text: "Father Name", |
| 1910 | value: "fatherName", | 1910 | value: "fatherName", |
| 1911 | sortable: false, | 1911 | sortable: false, |
| 1912 | align: "center" | 1912 | align: "center" |
| 1913 | }, | 1913 | }, |
| 1914 | { | 1914 | { |
| 1915 | text: "Mother Name", | 1915 | text: "Mother Name", |
| 1916 | value: "motherName", | 1916 | value: "motherName", |
| 1917 | sortable: false, | 1917 | sortable: false, |
| 1918 | align: "center" | 1918 | align: "center" |
| 1919 | }, | 1919 | }, |
| 1920 | { | 1920 | { |
| 1921 | text: "Academic Year", | 1921 | text: "Academic Year", |
| 1922 | value: "establishmentYear", | 1922 | value: "establishmentYear", |
| 1923 | sortable: false, | 1923 | sortable: false, |
| 1924 | align: "center" | 1924 | align: "center" |
| 1925 | }, | 1925 | }, |
| 1926 | { text: "Mobile No", value: "mobile", sortable: false, align: "center" }, | 1926 | { text: "Mobile No", value: "mobile", sortable: false, align: "center" }, |
| 1927 | { | 1927 | { |
| 1928 | text: "Status", | 1928 | text: "Status", |
| 1929 | value: "status", | 1929 | value: "status", |
| 1930 | sortable: false, | 1930 | sortable: false, |
| 1931 | align: "center" | 1931 | align: "center" |
| 1932 | }, | 1932 | }, |
| 1933 | { text: "Action", value: "", sortable: false, align: "center" } | 1933 | { text: "Action", value: "", sortable: false, align: "center" } |
| 1934 | ], | 1934 | ], |
| 1935 | studentsData: [], | 1935 | studentsData: [], |
| 1936 | parentId: "", | 1936 | parentId: "", |
| 1937 | editedIndex: -1, | 1937 | editedIndex: -1, |
| 1938 | parentData: {}, | 1938 | parentData: {}, |
| 1939 | addStudents: { | 1939 | addStudents: { |
| 1940 | role: "STUDENT", | 1940 | role: "STUDENT", |
| 1941 | name: "", | 1941 | name: "", |
| 1942 | email: "", | 1942 | email: "", |
| 1943 | date: "", | 1943 | date: "", |
| 1944 | city: "", | 1944 | city: "", |
| 1945 | pincode: "", | 1945 | pincode: "", |
| 1946 | country: "", | 1946 | country: "", |
| 1947 | permanentAddress: "", | 1947 | permanentAddress: "", |
| 1948 | presentAddress: "", | 1948 | presentAddress: "", |
| 1949 | mobile: "", | 1949 | mobile: "", |
| 1950 | state: "", | 1950 | state: "", |
| 1951 | gender: "", | 1951 | gender: "", |
| 1952 | select: "", | 1952 | select: "", |
| 1953 | selectSection: "", | 1953 | selectSection: "", |
| 1954 | bloodGroup: "", | 1954 | bloodGroup: "", |
| 1955 | allergies: "", | 1955 | allergies: "", |
| 1956 | medicalNotes: "", | 1956 | medicalNotes: "", |
| 1957 | height: "", | 1957 | height: "", |
| 1958 | weight: "", | 1958 | weight: "", |
| 1959 | rollNo: "", | 1959 | rollNo: "", |
| 1960 | establishmentYear: new Date().getFullYear() | 1960 | establishmentYear: new Date().getFullYear() |
| 1961 | }, | 1961 | }, |
| 1962 | selectStudents: { | 1962 | selectStudents: { |
| 1963 | select: "", | 1963 | select: "", |
| 1964 | selectSection: "" | 1964 | selectSection: "" |
| 1965 | }, | 1965 | }, |
| 1966 | editedItem: { | 1966 | editedItem: { |
| 1967 | role: "STUDENT", | 1967 | role: "STUDENT", |
| 1968 | name: "", | 1968 | name: "", |
| 1969 | email: "", | 1969 | email: "", |
| 1970 | dob: "", | 1970 | dob: "", |
| 1971 | city: "", | 1971 | city: "", |
| 1972 | pincode: "", | 1972 | pincode: "", |
| 1973 | country: "", | 1973 | country: "", |
| 1974 | permanentAddress: "", | 1974 | permanentAddress: "", |
| 1975 | presentAddress: "", | 1975 | presentAddress: "", |
| 1976 | mobile: "", | 1976 | mobile: "", |
| 1977 | state: "", | 1977 | state: "", |
| 1978 | gender: "", | 1978 | gender: "", |
| 1979 | select: "", | 1979 | select: "", |
| 1980 | selectSection: "", | 1980 | selectSection: "", |
| 1981 | bloodGroup: "", | 1981 | bloodGroup: "", |
| 1982 | allergies: "", | 1982 | allergies: "", |
| 1983 | medicalNotes: "", | 1983 | medicalNotes: "", |
| 1984 | height: "", | 1984 | height: "", |
| 1985 | weight: "", | 1985 | weight: "", |
| 1986 | rollNo: "", | 1986 | rollNo: "", |
| 1987 | establishmentYear: new Date().getFullYear() | 1987 | establishmentYear: new Date().getFullYear() |
| 1988 | } | 1988 | } |
| 1989 | }), | 1989 | }), |
| 1990 | watch: { | 1990 | watch: { |
| 1991 | menu(val) { | 1991 | menu(val) { |
| 1992 | val && this.$nextTick(() => (this.$refs.picker.activePicker = "YEAR")); | 1992 | val && this.$nextTick(() => (this.$refs.picker.activePicker = "YEAR")); |
| 1993 | }, | 1993 | }, |
| 1994 | menu1(val) { | 1994 | menu1(val) { |
| 1995 | val && this.$nextTick(() => (this.$refs.picker.activePicker = "YEAR")); | 1995 | val && this.$nextTick(() => (this.$refs.picker.activePicker = "YEAR")); |
| 1996 | } | 1996 | } |
| 1997 | }, | 1997 | }, |
| 1998 | methods: { | 1998 | methods: { |
| 1999 | findStudents() { | 1999 | findStudents() { |
| 2000 | this.showLoader = true; | 2000 | this.showLoader = true; |
| 2001 | http() | 2001 | http() |
| 2002 | .get("/getStudentWithClass", { | 2002 | .get("/getStudentWithClass", { |
| 2003 | params: { | 2003 | params: { |
| 2004 | classId: this.selectStudents.select, | 2004 | classId: this.selectStudents.select, |
| 2005 | sectionId: this.selectStudents.selectSection | 2005 | sectionId: this.selectStudents.selectSection |
| 2006 | } | 2006 | } |
| 2007 | }) | 2007 | }) |
| 2008 | .then(response => { | 2008 | .then(response => { |
| 2009 | this.studentsData = response.data.data; | 2009 | this.studentsData = response.data.data; |
| 2010 | this.showLoader = false; | 2010 | this.showLoader = false; |
| 2011 | }) | 2011 | }) |
| 2012 | .catch(err => { | 2012 | .catch(err => { |
| 2013 | console.log("err====>", err); | 2013 | console.log("err====>", err); |
| 2014 | this.showLoader = false; | 2014 | this.showLoader = false; |
| 2015 | }); | 2015 | }); |
| 2016 | }, | 2016 | }, |
| 2017 | getSections(_id) { | 2017 | getSections(_id) { |
| 2018 | var token = this.$store.state.token; | 2018 | var token = this.$store.state.token; |
| 2019 | this.showLoader = true; | 2019 | this.showLoader = true; |
| 2020 | http() | 2020 | http() |
| 2021 | .get( | 2021 | .get( |
| 2022 | "/getSectionsList", | 2022 | "/getSectionsList", |
| 2023 | { params: { classId: _id } }, | 2023 | { params: { classId: _id } }, |
| 2024 | { | 2024 | { |
| 2025 | headers: { Authorization: "Bearer " + token } | 2025 | headers: { Authorization: "Bearer " + token } |
| 2026 | } | 2026 | } |
| 2027 | ) | 2027 | ) |
| 2028 | .then(response => { | 2028 | .then(response => { |
| 2029 | this.addSection = response.data.data; | 2029 | this.addSection = response.data.data; |
| 2030 | this.showLoader = false; | 2030 | this.showLoader = false; |
| 2031 | }) | 2031 | }) |
| 2032 | .catch(err => { | 2032 | .catch(err => { |
| 2033 | this.showLoader = false; | 2033 | this.showLoader = false; |
| 2034 | }); | 2034 | }); |
| 2035 | }, | 2035 | }, |
| 2036 | getSection(_id) { | 2036 | getSection(_id) { |
| 2037 | var token = this.$store.state.token; | 2037 | var token = this.$store.state.token; |
| 2038 | this.showLoader = true; | 2038 | this.showLoader = true; |
| 2039 | http() | 2039 | http() |
| 2040 | .get( | 2040 | .get( |
| 2041 | "/getSectionsList", | 2041 | "/getSectionsList", |
| 2042 | { params: { classId: _id } }, | 2042 | { params: { classId: _id } }, |
| 2043 | { | 2043 | { |
| 2044 | headers: { Authorization: "Bearer " + token } | 2044 | headers: { Authorization: "Bearer " + token } |
| 2045 | } | 2045 | } |
| 2046 | ) | 2046 | ) |
| 2047 | .then(response => { | 2047 | .then(response => { |
| 2048 | this.addSection = response.data.data; | 2048 | this.addSection = response.data.data; |
| 2049 | this.showLoader = false; | 2049 | this.showLoader = false; |
| 2050 | }) | 2050 | }) |
| 2051 | .catch(err => { | 2051 | .catch(err => { |
| 2052 | this.showLoader = false; | 2052 | this.showLoader = false; |
| 2053 | }); | 2053 | }); |
| 2054 | }, | 2054 | }, |
| 2055 | pickFile() { | 2055 | pickFile() { |
| 2056 | this.$refs.image.click(); | 2056 | this.$refs.image.click(); |
| 2057 | }, | 2057 | }, |
| 2058 | pickEditFile() { | 2058 | pickEditFile() { |
| 2059 | this.$refs.editDataImage.click(); | 2059 | this.$refs.editDataImage.click(); |
| 2060 | }, | 2060 | }, |
| 2061 | dates: function(date) { | 2061 | dates: function(date) { |
| 2062 | return moment(date).format("MMMM DD, YYYY"); | 2062 | return moment(date).format("MMMM DD, YYYY"); |
| 2063 | }, | 2063 | }, |
| 2064 | onFilePicked(e) { | 2064 | onFilePicked(e) { |
| 2065 | // console.log(e) | 2065 | // console.log(e) |
| 2066 | const files = e.target.files; | 2066 | const files = e.target.files; |
| 2067 | this.imageData.upload = e.target.files[0]; | 2067 | this.imageData.upload = e.target.files[0]; |
| 2068 | if (files[0] !== undefined) { | 2068 | if (files[0] !== undefined) { |
| 2069 | this.imageName = files[0].name; | 2069 | this.imageName = files[0].name; |
| 2070 | if (this.imageName.lastIndexOf(".") <= 0) { | 2070 | if (this.imageName.lastIndexOf(".") <= 0) { |
| 2071 | return; | 2071 | return; |
| 2072 | } | 2072 | } |
| 2073 | const fr = new FileReader(); | 2073 | const fr = new FileReader(); |
| 2074 | fr.readAsDataURL(files[0]); | 2074 | fr.readAsDataURL(files[0]); |
| 2075 | fr.addEventListener("load", () => { | 2075 | fr.addEventListener("load", () => { |
| 2076 | this.imageUrl = fr.result; | 2076 | this.imageUrl = fr.result; |
| 2077 | this.imageFile = files[0]; // this is an image file that can be sent to server... | 2077 | this.imageFile = files[0]; // this is an image file that can be sent to server... |
| 2078 | this.imageData.imageUrl = URL.createObjectURL(this.imageFile); | 2078 | this.imageData.imageUrl = URL.createObjectURL(this.imageFile); |
| 2079 | }); | 2079 | }); |
| 2080 | } else { | 2080 | } else { |
| 2081 | this.imageName = ""; | 2081 | this.imageName = ""; |
| 2082 | this.imageFile = ""; | 2082 | this.imageFile = ""; |
| 2083 | this.imageUrl = ""; | 2083 | this.imageUrl = ""; |
| 2084 | } | 2084 | } |
| 2085 | }, | 2085 | }, |
| 2086 | onEditFilePicked(e) { | 2086 | onEditFilePicked(e) { |
| 2087 | console.log(e); | 2087 | console.log(e); |
| 2088 | const files = e.target.files; | 2088 | const files = e.target.files; |
| 2089 | if (files[0] !== undefined) { | 2089 | if (files[0] !== undefined) { |
| 2090 | this.editImageName = files[0].name; | 2090 | this.editImageName = files[0].name; |
| 2091 | console.log("this.editImageName", this.editImageName); | 2091 | console.log("this.editImageName", this.editImageName); |
| 2092 | 2092 | ||
| 2093 | if (this.editImageName.lastIndexOf(".") <= 0) { | 2093 | if (this.editImageName.lastIndexOf(".") <= 0) { |
| 2094 | return; | 2094 | return; |
| 2095 | } | 2095 | } |
| 2096 | const fr = new FileReader(); | 2096 | const fr = new FileReader(); |
| 2097 | fr.readAsDataURL(files[0]); | 2097 | fr.readAsDataURL(files[0]); |
| 2098 | fr.addEventListener("load", () => { | 2098 | fr.addEventListener("load", () => { |
| 2099 | this.editImageUrl = fr.result; | 2099 | this.editImageUrl = fr.result; |
| 2100 | this.editiImageFile = files[0]; // this is an image file that can be sent to server... | 2100 | this.editiImageFile = files[0]; // this is an image file that can be sent to server... |
| 2101 | }); | 2101 | }); |
| 2102 | } else { | 2102 | } else { |
| 2103 | this.editImageName = ""; | 2103 | this.editImageName = ""; |
| 2104 | this.editiImageFile = ""; | 2104 | this.editiImageFile = ""; |
| 2105 | } | 2105 | } |
| 2106 | }, | 2106 | }, |
| 2107 | editItem(item) { | 2107 | editItem(item) { |
| 2108 | this.editedIndex = this.studentsData.indexOf(item); | 2108 | this.editedIndex = this.studentsData.indexOf(item); |
| 2109 | this.editedItem = Object.assign({}, item); | 2109 | this.editedItem = Object.assign({}, item); |
| 2110 | this.editedItem.fatherName = item.parentId.fatherName; | 2110 | this.editedItem.fatherName = item.parentId.fatherName; |
| 2111 | this.editedItem.fatherCellNo = item.parentId.fatherCellNo; | 2111 | this.editedItem.fatherCellNo = item.parentId.fatherCellNo; |
| 2112 | this.editedItem.motherName = item.parentId.motherName; | 2112 | this.editedItem.motherName = item.parentId.motherName; |
| 2113 | this.editedItem.motherCellNo = item.parentId.motherCellNo; | 2113 | this.editedItem.motherCellNo = item.parentId.motherCellNo; |
| 2114 | this.editedItem.dob = | 2114 | this.editedItem.dob = |
| 2115 | this.editedItem.dob != undefined | 2115 | this.editedItem.dob != undefined |
| 2116 | ? (this.editedItem.dob = this.editedItem.dob.substring(0, 10)) | 2116 | ? (this.editedItem.dob = this.editedItem.dob.substring(0, 10)) |
| 2117 | : (this.editedItem.dob = ""); | 2117 | : (this.editedItem.dob = ""); |
| 2118 | this.editStudentDialog = true; | 2118 | this.editStudentDialog = true; |
| 2119 | }, | 2119 | }, |
| 2120 | profile(item) { | 2120 | profile(item) { |
| 2121 | this.editedIndex = this.studentsData.indexOf(item); | 2121 | this.editedIndex = this.studentsData.indexOf(item); |
| 2122 | this.editedItem = Object.assign({}, item); | 2122 | this.editedItem = Object.assign({}, item); |
| 2123 | this.editedItem.fatherName = item.parentId.fatherName; | 2123 | this.editedItem.fatherName = item.parentId.fatherName; |
| 2124 | this.editedItem.fatherCellNo = item.parentId.fatherCellNo; | 2124 | this.editedItem.fatherCellNo = item.parentId.fatherCellNo; |
| 2125 | this.editedItem.motherName = item.parentId.motherName; | 2125 | this.editedItem.motherName = item.parentId.motherName; |
| 2126 | this.editedItem.motherCellNo = item.parentId.motherCellNo; | 2126 | this.editedItem.motherCellNo = item.parentId.motherCellNo; |
| 2127 | 2127 | ||
| 2128 | this.profileStudentDialog = true; | 2128 | this.profileStudentDialog = true; |
| 2129 | }, | 2129 | }, |
| 2130 | deleteItem(item) { | 2130 | deleteItem(item) { |
| 2131 | let deleteStudent = { | 2131 | let deleteStudent = { |
| 2132 | studentId: item._id | 2132 | studentId: item._id |
| 2133 | }; | 2133 | }; |
| 2134 | http() | 2134 | http() |
| 2135 | .delete( | 2135 | .delete( |
| 2136 | "/deleteStudent", | 2136 | "/deleteStudent", |
| 2137 | confirm("Are you sure you want to delete this?") && { | 2137 | confirm("Are you sure you want to delete this?") && { |
| 2138 | params: deleteStudent | 2138 | params: deleteStudent |
| 2139 | } | 2139 | } |
| 2140 | ) | 2140 | ) |
| 2141 | .then(response => { | 2141 | .then(response => { |
| 2142 | this.snackbar = true; | 2142 | this.snackbar = true; |
| 2143 | this.text = response.data.message; | 2143 | this.text = response.data.message; |
| 2144 | this.color = "green"; | 2144 | this.color = "green"; |
| 2145 | this.findStudents(); | 2145 | this.findStudents(); |
| 2146 | }) | 2146 | }) |
| 2147 | .catch(error => { | 2147 | .catch(error => { |
| 2148 | this.snackbar = true; | 2148 | this.snackbar = true; |
| 2149 | this.text = error.response.data.message; | 2149 | this.text = error.response.data.message; |
| 2150 | this.color = "error"; | 2150 | this.color = "error"; |
| 2151 | }); | 2151 | }); |
| 2152 | }, | 2152 | }, |
| 2153 | close() { | 2153 | close() { |
| 2154 | this.editStudentDialog = false; | 2154 | this.editStudentDialog = false; |
| 2155 | }, | 2155 | }, |
| 2156 | closeStudentProfile() { | 2156 | closeStudentProfile() { |
| 2157 | this.profileStudentDialog = false; | 2157 | this.profileStudentDialog = false; |
| 2158 | }, | 2158 | }, |
| 2159 | copyData() { | 2159 | copyData() { |
| 2160 | this.addStudents.permanentAddress = this.addStudents.presentAddress; | 2160 | this.addStudents.permanentAddress = this.addStudents.presentAddress; |
| 2161 | }, | 2161 | }, |
| 2162 | submit() { | 2162 | submit() { |
| 2163 | if (this.$refs.form.validate()) { | 2163 | if (this.$refs.form.validate()) { |
| 2164 | let addStudent = { | 2164 | let addStudent = { |
| 2165 | parentId: this.parentId, | 2165 | parentId: this.parentId, |
| 2166 | name: this.addStudents.name, | 2166 | name: this.addStudents.name, |
| 2167 | email: this.addStudents.email, | 2167 | email: this.addStudents.email, |
| 2168 | role: this.addStudents.role, | 2168 | role: this.addStudents.role, |
| 2169 | dob: this.addStudents.date, | 2169 | dob: this.addStudents.date, |
| 2170 | city: this.addStudents.city, | 2170 | city: this.addStudents.city, |
| 2171 | pincode: this.addStudents.pincode, | 2171 | pincode: this.addStudents.pincode, |
| 2172 | country: this.addStudents.country, | 2172 | country: this.addStudents.country, |
| 2173 | permanentAddress: this.addStudents.permanentAddress, | 2173 | permanentAddress: this.addStudents.permanentAddress, |
| 2174 | presentAddress: this.addStudents.presentAddress, | 2174 | presentAddress: this.addStudents.presentAddress, |
| 2175 | mobile: this.addStudents.mobile, | 2175 | mobile: this.addStudents.mobile, |
| 2176 | state: this.addStudents.state, | 2176 | state: this.addStudents.state, |
| 2177 | gender: this.addStudents.gender, | 2177 | gender: this.addStudents.gender, |
| 2178 | establishmentYear: this.addStudents.establishmentYear, | 2178 | establishmentYear: this.addStudents.establishmentYear, |
| 2179 | classId: this.addStudents.select, | 2179 | classId: this.addStudents.select, |
| 2180 | sectionId: this.addStudents.selectSection, | 2180 | sectionId: this.addStudents.selectSection, |
| 2181 | bloodGroup: this.addStudents.bloodGroup, | 2181 | bloodGroup: this.addStudents.bloodGroup, |
| 2182 | medicalNotes: this.addStudents.medicalNotes, | 2182 | medicalNotes: this.addStudents.medicalNotes, |
| 2183 | height: this.addStudents.height, | 2183 | height: this.addStudents.height, |
| 2184 | weight: this.addStudents.weight, | 2184 | weight: this.addStudents.weight, |
| 2185 | rollNo: this.addStudents.rollNo | 2185 | rollNo: this.addStudents.rollNo |
| 2186 | }; | 2186 | }; |
| 2187 | if (this.imageUrl) { | 2187 | if (this.imageUrl) { |
| 2188 | var str = this.imageUrl; | 2188 | var str = this.imageUrl; |
| 2189 | const [baseUrl, imageUrl] = str.split(/,/); | 2189 | const [baseUrl, imageUrl] = str.split(/,/); |
| 2190 | addStudent.upload = imageUrl; | 2190 | addStudent.upload = imageUrl; |
| 2191 | } | 2191 | } |
| 2192 | this.loading = true; | 2192 | this.loading = true; |
| 2193 | http() | 2193 | http() |
| 2194 | .post("/createStudent", addStudent) | 2194 | .post("/createStudent", addStudent) |
| 2195 | .then(response => { | 2195 | .then(response => { |
| 2196 | this.snackbar = true; | 2196 | this.snackbar = true; |
| 2197 | this.text = "New Student added successfully"; | 2197 | this.text = "New Student added successfully"; |
| 2198 | this.color = "green"; | 2198 | this.color = "green"; |
| 2199 | this.addStudentDialog = false; | 2199 | this.addStudentDialog = false; |
| 2200 | this.clear(); | 2200 | this.clear(); |
| 2201 | this.clearParents(); | 2201 | this.clearParents(); |
| 2202 | this.loading = false; | 2202 | this.loading = false; |
| 2203 | }) | 2203 | }) |
| 2204 | .catch(error => { | 2204 | .catch(error => { |
| 2205 | this.snackbar = true; | 2205 | this.snackbar = true; |
| 2206 | this.text = error.response.data.message; | 2206 | this.text = error.response.data.message; |
| 2207 | this.color = "error"; | 2207 | this.color = "error"; |
| 2208 | this.loading = false; | 2208 | this.loading = false; |
| 2209 | }); | 2209 | }); |
| 2210 | } | 2210 | } |
| 2211 | }, | 2211 | }, |
| 2212 | clear() { | 2212 | clear() { |
| 2213 | this.$refs.form.reset(); | 2213 | this.$refs.form.reset(); |
| 2214 | this.imageUrl = ""; | 2214 | this.imageUrl = ""; |
| 2215 | }, | 2215 | }, |
| 2216 | clearParents() { | 2216 | clearParents() { |
| 2217 | this.$refs.parentForm.reset(); | 2217 | this.$refs.parentForm.reset(); |
| 2218 | }, | 2218 | }, |
| 2219 | save() { | 2219 | save() { |
| 2220 | let editStudent = { | 2220 | let editStudent = { |
| 2221 | studentId: this.editedItem._id, | 2221 | studentId: this.editedItem._id, |
| 2222 | name: this.editedItem.name, | 2222 | name: this.editedItem.name, |
| 2223 | email: this.editedItem.email, | 2223 | email: this.editedItem.email, |
| 2224 | role: this.editedItem.role, | 2224 | role: this.editedItem.role, |
| 2225 | dob: this.editedItem.dob, | 2225 | dob: this.editedItem.dob, |
| 2226 | city: this.editedItem.city, | 2226 | city: this.editedItem.city, |
| 2227 | pincode: this.editedItem.pincode, | 2227 | pincode: this.editedItem.pincode, |
| 2228 | country: this.editedItem.country, | 2228 | country: this.editedItem.country, |
| 2229 | permanentAddress: this.editedItem.permanentAddress, | 2229 | permanentAddress: this.editedItem.permanentAddress, |
| 2230 | presentAddress: this.editedItem.presentAddress, | 2230 | presentAddress: this.editedItem.presentAddress, |
| 2231 | mobile: this.editedItem.mobile, | 2231 | mobile: this.editedItem.mobile, |
| 2232 | state: this.editedItem.state, | 2232 | state: this.editedItem.state, |
| 2233 | gender: this.editedItem.gender, | 2233 | gender: this.editedItem.gender, |
| 2234 | establishmentYear: this.editedItem.establishmentYear, | 2234 | establishmentYear: this.editedItem.establishmentYear, |
| 2235 | classId: this.editedItem.select, | 2235 | classId: this.editedItem.select, |
| 2236 | sectionId: this.editedItem.selectSection, | 2236 | sectionId: this.editedItem.selectSection, |
| 2237 | bloodGroup: this.editedItem.bloodGroup, | 2237 | bloodGroup: this.editedItem.bloodGroup, |
| 2238 | medicalNotes: this.editedItem.medicalNotes, | 2238 | medicalNotes: this.editedItem.medicalNotes, |
| 2239 | height: this.editedItem.height, | 2239 | height: this.editedItem.height, |
| 2240 | weight: this.editedItem.weight, | 2240 | weight: this.editedItem.weight, |
| 2241 | rollNo: this.editedItem.rollNo | 2241 | rollNo: this.editedItem.rollNo |
| 2242 | }; | 2242 | }; |
| 2243 | if (this.editImageUrl) { | 2243 | if (this.editImageUrl) { |
| 2244 | var str = this.editImageUrl; | 2244 | var str = this.editImageUrl; |
| 2245 | const [baseUrl, editImageUrl] = str.split(/,/); | 2245 | const [baseUrl, editImageUrl] = str.split(/,/); |
| 2246 | editStudent.upload = editImageUrl; | 2246 | editStudent.upload = editImageUrl; |
| 2247 | } | 2247 | } |
| 2248 | this.editLoading = true; | 2248 | this.editLoading = true; |
| 2249 | http() | 2249 | http() |
| 2250 | .put("/updateStudent", editStudent) | 2250 | .put("/updateStudent", editStudent) |
| 2251 | .then(response => { | 2251 | .then(response => { |
| 2252 | this.snackbar = true; | 2252 | this.snackbar = true; |
| 2253 | this.text = response.data.message; | 2253 | this.text = response.data.message; |
| 2254 | this.color = "green"; | 2254 | this.color = "green"; |
| 2255 | this.imageUrl = ""; | 2255 | this.imageUrl = ""; |
| 2256 | this.findStudents(); | 2256 | this.findStudents(); |
| 2257 | this.close(); | 2257 | this.close(); |
| 2258 | this.editLoading = false; | 2258 | this.editLoading = false; |
| 2259 | }) | 2259 | }) |
| 2260 | .catch(error => { | 2260 | .catch(error => { |
| 2261 | this.snackbar = true; | 2261 | this.snackbar = true; |
| 2262 | this.text = error.response.data.statusText; | 2262 | this.text = error.response.data.statusText; |
| 2263 | this.color = "error"; | 2263 | this.color = "error"; |
| 2264 | this.editLoading = false; | 2264 | this.editLoading = false; |
| 2265 | }); | 2265 | }); |
| 2266 | }, | 2266 | }, |
| 2267 | submitParentDetails() { | 2267 | submitParentDetails() { |
| 2268 | if (this.$refs.parentForm.validate()) { | 2268 | if (this.$refs.parentForm.validate()) { |
| 2269 | this.parentData.fatherCellNo = this.parentData.fatherCellNo; | 2269 | this.parentData.fatherCellNo = this.parentData.fatherCellNo; |
| 2270 | this.parentData.motherCellNo = this.parentData.motherCellNo; | 2270 | this.parentData.motherCellNo = this.parentData.motherCellNo; |
| 2271 | let addparentDetails = { | 2271 | let addparentDetails = { |
| 2272 | email: this.parentData.email, | 2272 | email: this.parentData.email, |
| 2273 | fatherName: this.parentData.fatherName, | 2273 | fatherName: this.parentData.fatherName, |
| 2274 | fatherCellNo: this.parentData.fatherCellNo, | 2274 | fatherCellNo: this.parentData.fatherCellNo, |
| 2275 | motherName: this.parentData.motherName, | 2275 | motherName: this.parentData.motherName, |
| 2276 | motherCellNo: this.parentData.motherCellNo, | 2276 | motherCellNo: this.parentData.motherCellNo, |
| 2277 | fatherProfession: this.parentData.fatherProfession, | 2277 | fatherProfession: this.parentData.fatherProfession, |
| 2278 | motherProfession: this.parentData.motherProfession, | 2278 | motherProfession: this.parentData.motherProfession, |
| 2279 | role: "PARENT" | 2279 | role: "PARENT" |
| 2280 | }; | 2280 | }; |
| 2281 | this.loading = true; | 2281 | this.loading = true; |
| 2282 | http() | 2282 | http() |
| 2283 | .post("/createParent", addparentDetails) | 2283 | .post("/createParent", addparentDetails) |
| 2284 | .then(response => { | 2284 | .then(response => { |
| 2285 | this.parentId = response.data.data.id; | 2285 | this.parentId = response.data.data.id; |
| 2286 | this.e2 = 2; | 2286 | this.e2 = 2; |
| 2287 | this.snackbar = true; | 2287 | this.snackbar = true; |
| 2288 | this.text = response.data.message; | 2288 | this.text = response.data.message; |
| 2289 | this.color = "green"; | 2289 | this.color = "green"; |
| 2290 | // this.getStudentList(); | 2290 | // this.getStudentList(); |
| 2291 | this.clear(); | 2291 | this.clear(); |
| 2292 | this.loading = false; | 2292 | this.loading = false; |
| 2293 | }) | 2293 | }) |
| 2294 | .catch(error => { | 2294 | .catch(error => { |
| 2295 | this.snackbar = true; | 2295 | this.snackbar = true; |
| 2296 | this.text = error.response.data.message; | 2296 | this.text = error.response.data.message; |
| 2297 | this.color = "error"; | 2297 | this.color = "error"; |
| 2298 | if (error.response.data.statusText) { | 2298 | if (error.response.data.statusText) { |
| 2299 | this.text = error.response.data.statusText; | 2299 | this.text = error.response.data.statusText; |
| 2300 | } | 2300 | } |
| 2301 | this.loading = false; | 2301 | this.loading = false; |
| 2302 | }); | 2302 | }); |
| 2303 | } | 2303 | } |
| 2304 | }, | 2304 | }, |
| 2305 | getParentDetails() { | 2305 | getParentDetails() { |
| 2306 | if (this.parentData.fatherCellNo.length > 9) { | 2306 | if (this.parentData.fatherCellNo.length > 9) { |
| 2307 | this.showLoader = true; | 2307 | this.showLoader = true; |
| 2308 | http() | 2308 | http() |
| 2309 | .get("getParticularParent", { | 2309 | .get("getParticularParent", { |
| 2310 | params: { fatherCellNo: this.parentData.fatherCellNo }, | 2310 | params: { fatherCellNo: this.parentData.fatherCellNo }, |
| 2311 | headers: { | 2311 | headers: { |
| 2312 | Authorization: "Bearer " + this.$store.state.token | 2312 | Authorization: "Bearer " + this.$store.state.token |
| 2313 | } | 2313 | } |
| 2314 | }) | 2314 | }) |
| 2315 | .then(response => { | 2315 | .then(response => { |
| 2316 | this.showNext = true; | 2316 | this.showNext = true; |
| 2317 | this.showParent = false; | 2317 | this.showParent = false; |
| 2318 | this.parentData = response.data.data; | 2318 | this.parentData = response.data.data; |
| 2319 | this.parentId = response.data.data._id; | 2319 | this.parentId = response.data.data._id; |
| 2320 | this.showLoader = false; | 2320 | this.showLoader = false; |
| 2321 | }) | 2321 | }) |
| 2322 | .catch(error => { | 2322 | .catch(error => { |
| 2323 | console.log("err====>", error.response.data.message); | 2323 | console.log("err====>", error.response.data.message); |
| 2324 | this.text = error.response.data.message; | 2324 | this.text = error.response.data.message; |
| 2325 | this.snackbar = true; | 2325 | this.snackbar = true; |
| 2326 | if (this.text === "Data not found!") { | 2326 | if (this.text === "Data not found!") { |
| 2327 | this.showNext = false; | 2327 | this.showNext = false; |
| 2328 | this.showParent = true; | 2328 | this.showParent = true; |
| 2329 | this.parentData.email = ""; | 2329 | this.parentData.email = ""; |
| 2330 | this.parentData.fatherName = ""; | 2330 | this.parentData.fatherName = ""; |
| 2331 | this.parentData.motherName = ""; | 2331 | this.parentData.motherName = ""; |
| 2332 | this.parentData.motherCellNo = ""; | 2332 | this.parentData.motherCellNo = ""; |
| 2333 | this.parentData.fatherProfession = ""; | 2333 | this.parentData.fatherProfession = ""; |
| 2334 | this.parentData.motherProfession = ""; | 2334 | this.parentData.motherProfession = ""; |
| 2335 | } | 2335 | } |
| 2336 | this.showLoader = false; | 2336 | this.showLoader = false; |
| 2337 | }); | 2337 | }); |
| 2338 | } | 2338 | } |
| 2339 | }, | 2339 | }, |
| 2340 | suspendStudentStatus(status, id) { | 2340 | suspendStudentStatus(status, id) { |
| 2341 | let suspendStudentData = { | 2341 | let suspendStudentData = { |
| 2342 | studentId: id, | 2342 | studentId: id, |
| 2343 | status: status | 2343 | status: status |
| 2344 | }; | 2344 | }; |
| 2345 | http() | 2345 | http() |
| 2346 | .put("/suspendStudentAccount", suspendStudentData) | 2346 | .put("/suspendStudentAccount", suspendStudentData) |
| 2347 | .then(response => { | 2347 | .then(response => { |
| 2348 | this.findStudents(); | 2348 | this.findStudents(); |
| 2349 | this.text = response.data.message; | 2349 | this.text = response.data.message; |
| 2350 | this.color = "green"; | 2350 | this.color = "green"; |
| 2351 | this.snackbar = true; | 2351 | this.snackbar = true; |
| 2352 | }) | 2352 | }) |
| 2353 | .catch(error => { | 2353 | .catch(error => { |
| 2354 | this.snackbar = true; | 2354 | this.snackbar = true; |
| 2355 | this.color = "error"; | 2355 | this.color = "error"; |
| 2356 | this.text = error.response.data.message; | 2356 | this.text = error.response.data.message; |
| 2357 | }); | 2357 | }); |
| 2358 | }, | 2358 | }, |
| 2359 | displaySearch() { | 2359 | displaySearch() { |
| 2360 | (this.show = false), (this.showSearch = true); | 2360 | (this.show = false), (this.showSearch = true); |
| 2361 | }, | 2361 | }, |
| 2362 | closeSearch() { | 2362 | closeSearch() { |
| 2363 | this.showSearch = false; | 2363 | this.showSearch = false; |
| 2364 | this.show = true; | 2364 | this.show = true; |
| 2365 | this.search = ""; | 2365 | this.search = ""; |
| 2366 | } | 2366 | } |
| 2367 | }, | 2367 | }, |
| 2368 | mounted() { | 2368 | mounted() { |
| 2369 | const getCountryList = countryList(); | 2369 | const getCountryList = countryList(); |
| 2370 | this.countries = getCountryList; | 2370 | this.countries = getCountryList; |
| 2371 | var token = this.$store.state.token; | 2371 | var token = this.$store.state.token; |
| 2372 | http() | 2372 | http() |
| 2373 | .get("/getClassesList", { | 2373 | .get("/getClassesList", { |
| 2374 | headers: { Authorization: "Bearer " + token } | 2374 | headers: { Authorization: "Bearer " + token } |
| 2375 | }) | 2375 | }) |
| 2376 | .then(response => { | 2376 | .then(response => { |
| 2377 | this.addclass = response.data.data; | 2377 | this.addclass = response.data.data; |
| 2378 | }) | 2378 | }) |
| 2379 | .catch(error => { | 2379 | .catch(error => { |
| 2380 | this.showLoader = false; | 2380 | this.showLoader = false; |
| 2381 | if (error.response.status === 401) { | 2381 | if (error.response.status === 401) { |
| 2382 | this.$router.replace({ path: "/" }); | 2382 | this.$router.replace({ path: "/" }); |
| 2383 | this.$store.dispatch("setToken", null); | 2383 | this.$store.dispatch("setToken", null); |
| 2384 | this.$store.dispatch("Id", null); | 2384 | this.$store.dispatch("Id", null); |
| 2385 | this.$store.dispatch("Role", null); | 2385 | this.$store.dispatch("Role", null); |
| 2386 | } | 2386 | } |
| 2387 | }); | 2387 | }); |
| 2388 | } | 2388 | } |
| 2389 | }; | 2389 | }; |
| 2390 | </script> | 2390 | </script> |
| 2391 | <style scoped> | 2391 | <style scoped> |
| 2392 | .active { | 2392 | .active { |
| 2393 | background-color: gray; | 2393 | background-color: gray; |
| 2394 | color: white !important; | 2394 | color: white !important; |
| 2395 | } | 2395 | } |
| 2396 | .activebtn { | 2396 | .activebtn { |
| 2397 | color: black !important; | 2397 | color: black !important; |
| 2398 | } | 2398 | } |
| 2399 | </style> | 2399 | </style> |
src/pages/Subjects/subjects.vue
| 1 | <template> | 1 | <template> |
| 2 | <v-container fluid class="body-color"> | 2 | <v-container fluid class="body-color"> |
| 3 | <!-- ****** EDIT Subject ****** --> | 3 | <!-- ****** EDIT Subject ****** --> |
| 4 | <v-dialog v-model="editSubjectDialog" max-width="400px"> | 4 | <v-dialog v-model="editSubjectDialog" 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 Subject</label> | 8 | <label class="title text-xs-center">Edit Subject</label> |
| 9 | <v-icon size="24" class="right" @click="editSubjectDialog = false">cancel</v-icon> | 9 | <v-icon size="24" class="right" @click="editSubjectDialog = 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="formEditSubject" v-model="validEditSubject" lazy-validation> | 13 | <v-form ref="formEditSubject" v-model="validEditSubject" 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">Class:</label> | 16 | <label class="right">Class:</label> |
| 17 | </v-flex> | 17 | </v-flex> |
| 18 | <v-flex xs8 class="ml-3"> | 18 | <v-flex xs8 class="ml-3"> |
| 19 | <v-select | 19 | <v-select |
| 20 | :items="classList" | 20 | :items="classList" |
| 21 | label="Select Class" | 21 | label="Select Class" |
| 22 | v-model="addSubject.selectName" | 22 | v-model="addSubject.selectName" |
| 23 | item-text="classNum" | 23 | item-text="classNum" |
| 24 | item-value="_id" | 24 | item-value="_id" |
| 25 | name="Select Class" | 25 | name="Select Class" |
| 26 | :rules="nameEditSubjectRules" | 26 | :rules="nameEditSubjectRules" |
| 27 | required | 27 | required |
| 28 | ></v-select> | 28 | ></v-select> |
| 29 | </v-flex> | 29 | </v-flex> |
| 30 | </v-layout> | 30 | </v-layout> |
| 31 | <v-layout> | 31 | <v-layout> |
| 32 | <v-flex xs4 class="pt-4 subheading"> | 32 | <v-flex xs4 class="pt-4 subheading"> |
| 33 | <label class="right">Subject:</label> | 33 | <label class="right">Subject:</label> |
| 34 | </v-flex> | 34 | </v-flex> |
| 35 | <v-flex xs8 class="ml-3"> | 35 | <v-flex xs8 class="ml-3"> |
| 36 | <v-text-field | 36 | <v-text-field |
| 37 | placeholder="fill your Subject" | 37 | placeholder="fill your Subject" |
| 38 | v-model="editedItem.subjectName" | 38 | v-model="editedItem.subjectName" |
| 39 | :rules="subjectEditNameRules" | 39 | :rules="subjectEditNameRules" |
| 40 | type="text" | 40 | type="text" |
| 41 | name="email" | 41 | name="email" |
| 42 | required | 42 | required |
| 43 | ></v-text-field> | 43 | ></v-text-field> |
| 44 | </v-flex> | 44 | </v-flex> |
| 45 | </v-layout> | 45 | </v-layout> |
| 46 | <v-flex xs12 sm12> | 46 | <v-flex xs12 sm12> |
| 47 | <v-card-actions> | 47 | <v-card-actions> |
| 48 | <v-btn round dark @click.native="close" class="clear-button">Cancel</v-btn> | 48 | <v-btn round dark @click.native="close" class="clear-button">Cancel</v-btn> |
| 49 | <v-spacer></v-spacer> | 49 | <v-spacer></v-spacer> |
| 50 | <v-btn round dark @click="save" :loading="editLoading" class="add-button">Save</v-btn> | 50 | <v-btn round dark @click="save" :loading="editLoading" class="add-button">Save</v-btn> |
| 51 | </v-card-actions> | 51 | </v-card-actions> |
| 52 | </v-flex> | 52 | </v-flex> |
| 53 | </v-form> | 53 | </v-form> |
| 54 | </v-container> | 54 | </v-container> |
| 55 | </v-card> | 55 | </v-card> |
| 56 | </v-dialog> | 56 | </v-dialog> |
| 57 | 57 | ||
| 58 | <!-- ****** VIEW PROFIL NOTICE BOARD ****** --> | 58 | <!-- ****** VIEW PROFIL NOTICE BOARD ****** --> |
| 59 | 59 | ||
| 60 | <v-dialog v-model="viewSubjectDialog" max-width="600px"> | 60 | <v-dialog v-model="viewSubjectDialog" max-width="600px"> |
| 61 | <v-toolbar color="v-toolbar"> | 61 | <v-toolbar color="v-toolbar"> |
| 62 | <v-spacer></v-spacer> | 62 | <v-spacer></v-spacer> |
| 63 | <v-toolbar-title> | 63 | <v-toolbar-title> |
| 64 | <h3>Subject</h3> | 64 | <h3>Subject</h3> |
| 65 | </v-toolbar-title> | 65 | </v-toolbar-title> |
| 66 | <v-spacer></v-spacer> | 66 | <v-spacer></v-spacer> |
| 67 | <v-icon @click="close1">close</v-icon> | 67 | <v-icon @click="close1">close</v-icon> |
| 68 | </v-toolbar> | 68 | </v-toolbar> |
| 69 | <v-card> | 69 | <v-card> |
| 70 | <v-card-text> | 70 | <v-card-text> |
| 71 | <v-container grid-list-md> | 71 | <v-container grid-list-md> |
| 72 | <v-layout wrap> | 72 | <v-layout wrap> |
| 73 | <v-flex> | 73 | <v-flex> |
| 74 | <v-layout> | 74 | <v-layout> |
| 75 | <v-flex xs7 sm6> | 75 | <v-flex xs7 sm6> |
| 76 | <h5 class="right my-1"> | 76 | <h5 class="right my-1"> |
| 77 | <b>Subject Name:</b> | 77 | <b>Subject Name:</b> |
| 78 | </h5> | 78 | </h5> |
| 79 | </v-flex> | 79 | </v-flex> |
| 80 | <v-flex sm6 xs5> | 80 | <v-flex sm6 xs5> |
| 81 | <h5 class="my-1">{{ editedItem.subjectName }}</h5> | 81 | <h5 class="my-1">{{ editedItem.subjectName }}</h5> |
| 82 | </v-flex> | 82 | </v-flex> |
| 83 | </v-layout> | 83 | </v-layout> |
| 84 | </v-flex> | 84 | </v-flex> |
| 85 | </v-layout> | 85 | </v-layout> |
| 86 | </v-container> | 86 | </v-container> |
| 87 | </v-card-text> | 87 | </v-card-text> |
| 88 | </v-card> | 88 | </v-card> |
| 89 | </v-dialog> | 89 | </v-dialog> |
| 90 | 90 | ||
| 91 | <!-- ****** EXISTING SUBJECTS TABLE ****** --> | 91 | <!-- ****** EXISTING SUBJECTS TABLE ****** --> |
| 92 | <v-toolbar color="transparent" flat> | 92 | <v-toolbar color="transparent" flat> |
| 93 | <v-btn | 93 | <v-btn |
| 94 | fab | 94 | fab |
| 95 | dark | 95 | dark |
| 96 | class="open-dialog-button hidden-xl-only hidden-md-only hidden-lg-only" | 96 | class="open-dialog-button hidden-xl-only hidden-md-only hidden-lg-only" |
| 97 | small | 97 | small |
| 98 | @click="addSubjectDialog = true" | 98 | @click="addSubjectDialog = true" |
| 99 | > | 99 | > |
| 100 | <v-icon dark>add</v-icon> | 100 | <v-icon dark>add</v-icon> |
| 101 | </v-btn> | 101 | </v-btn> |
| 102 | <v-flex xs1 class="hidden-sm-only hidden-xs-only"> | 102 | <v-flex xs1 class="hidden-sm-only hidden-xs-only"> |
| 103 | <v-btn round class="open-dialog-button" dark @click="addSubjectDialog = true"> | 103 | <v-btn round class="open-dialog-button" dark @click="addSubjectDialog = true"> |
| 104 | <v-icon class="white--text pr-1" size="20">add</v-icon>Add Subject | 104 | <v-icon class="white--text pr-1" size="20">add</v-icon>Add Subject |
| 105 | </v-btn> | 105 | </v-btn> |
| 106 | </v-flex> | 106 | </v-flex> |
| 107 | <v-spacer></v-spacer> | 107 | <v-spacer></v-spacer> |
| 108 | <v-flex lg2 md2 xs12 v-show="show"> | 108 | <v-flex lg2 md2 xs12 v-show="show"> |
| 109 | <v-select | 109 | <v-select |
| 110 | :items="classList" | 110 | :items="classList" |
| 111 | label="Select Your Class" | 111 | label="Select Your Class" |
| 112 | v-model="selectClassId" | 112 | v-model="selectClassId" |
| 113 | item-text="classNum" | 113 | item-text="classNum" |
| 114 | item-value="_id" | 114 | item-value="_id" |
| 115 | name="Select Class" | 115 | name="Select Class" |
| 116 | :rules="nameRules" | 116 | :rules="nameRules" |
| 117 | @change="getClassSubject" | 117 | @change="getClassSubject" |
| 118 | class="pl-2" | 118 | class="pl-2" |
| 119 | required | 119 | required |
| 120 | ></v-select> | 120 | ></v-select> |
| 121 | </v-flex> | 121 | </v-flex> |
| 122 | <v-card-title class="body-1" v-show="show"> | 122 | <v-card-title class="body-1" v-show="show"> |
| 123 | <v-btn icon flat @click="displaySearch"> | 123 | <v-btn icon flat @click="displaySearch"> |
| 124 | <v-avatar size="27"> | 124 | <v-avatar size="27"> |
| 125 | <img src="/static/icon/dashboard icons-49.png" alt="icon" /> | 125 | <img src="/static/icon/search.png" alt="icon" /> |
| 126 | </v-avatar> | 126 | </v-avatar> |
| 127 | </v-btn> | 127 | </v-btn> |
| 128 | </v-card-title> | 128 | </v-card-title> |
| 129 | <v-flex xs9 sm9 md2 lg2 xl2 v-show="showSearch"> | 129 | <v-flex xs9 sm9 md2 lg2 xl2 v-show="showSearch"> |
| 130 | <v-layout> | 130 | <v-layout> |
| 131 | <v-text-field | 131 | <v-text-field |
| 132 | v-model="search" | 132 | v-model="search" |
| 133 | label="Search" | 133 | label="Search" |
| 134 | prepend-inner-icon="search" | 134 | prepend-inner-icon="search" |
| 135 | color="primary" | 135 | color="primary" |
| 136 | style="transition: 0.8s cubic-bezier(0.25, 0.8, 0.25, 1); !important" | 136 | style="transition: 0.8s cubic-bezier(0.25, 0.8, 0.25, 1); !important" |
| 137 | ></v-text-field> | 137 | ></v-text-field> |
| 138 | <v-icon @click="closeSearch" color="error">close</v-icon> | 138 | <v-icon @click="closeSearch" color="error">close</v-icon> |
| 139 | </v-layout> | 139 | </v-layout> |
| 140 | </v-flex> | 140 | </v-flex> |
| 141 | </v-toolbar> | 141 | </v-toolbar> |
| 142 | <v-data-table | 142 | <v-data-table |
| 143 | :headers="headers" | 143 | :headers="headers" |
| 144 | :items="subjectList.subjects" | 144 | :items="subjectList.subjects" |
| 145 | :pagination.sync="pagination" | 145 | :pagination.sync="pagination" |
| 146 | :search="search" | 146 | :search="search" |
| 147 | > | 147 | > |
| 148 | <template slot="items" slot-scope="props"> | 148 | <template slot="items" slot-scope="props"> |
| 149 | <tr class="tr"> | 149 | <tr class="tr"> |
| 150 | <td class="td-row td">{{ props.index + 1 }}</td> | 150 | <td class="td-row td">{{ props.index + 1 }}</td> |
| 151 | <td class="text-xs-center td td-row">{{ props.item.subjectName }}</td> | 151 | <td class="text-xs-center td td-row">{{ props.item.subjectName }}</td> |
| 152 | <td class="text-xs-center td td-row"> | 152 | <td class="text-xs-center td td-row"> |
| 153 | <span> | 153 | <span> |
| 154 | <v-tooltip top> | 154 | <v-tooltip top> |
| 155 | <img | 155 | <img |
| 156 | slot="activator" | 156 | slot="activator" |
| 157 | style="cursor:pointer; width:25px; height:25px; " | 157 | style="cursor:pointer; width:25px; height:25px; " |
| 158 | class="mr-3" | 158 | class="mr-3" |
| 159 | @click="profile(props.item)" | 159 | @click="profile(props.item)" |
| 160 | src="/static/icon/dashboard icons-47.png" | 160 | src="/static/icon/view.png" |
| 161 | /> | 161 | /> |
| 162 | <span>View</span> | 162 | <span>View</span> |
| 163 | </v-tooltip> | 163 | </v-tooltip> |
| 164 | <v-tooltip top> | 164 | <v-tooltip top> |
| 165 | <img | 165 | <img |
| 166 | slot="activator" | 166 | slot="activator" |
| 167 | style="cursor:pointer; width:20px; height:18px; " | 167 | style="cursor:pointer; width:20px; height:18px; " |
| 168 | class="mr-3" | 168 | class="mr-3" |
| 169 | @click="editItem(props.item)" | 169 | @click="editItem(props.item)" |
| 170 | src="/static/icon/dashboard icons-50.png" | 170 | src="/static/icon/edit.png" |
| 171 | /> | 171 | /> |
| 172 | <span>Edit</span> | 172 | <span>Edit</span> |
| 173 | </v-tooltip> | 173 | </v-tooltip> |
| 174 | <v-tooltip top> | 174 | <v-tooltip top> |
| 175 | <img | 175 | <img |
| 176 | slot="activator" | 176 | slot="activator" |
| 177 | style="cursor:pointer; width:20px; height:20px; " | 177 | style="cursor:pointer; width:20px; height:20px; " |
| 178 | class="mr-3" | 178 | class="mr-3" |
| 179 | @click="deleteItem(props.item)" | 179 | @click="deleteItem(props.item)" |
| 180 | src="/static/icon/dashboard icons-51.png" | 180 | src="/static/icon/delete.png" |
| 181 | /> | 181 | /> |
| 182 | <span>Delete</span> | 182 | <span>Delete</span> |
| 183 | </v-tooltip> | 183 | </v-tooltip> |
| 184 | </span> | 184 | </span> |
| 185 | </td> | 185 | </td> |
| 186 | </tr> | 186 | </tr> |
| 187 | </template> | 187 | </template> |
| 188 | <v-alert | 188 | <v-alert |
| 189 | slot="no-results" | 189 | slot="no-results" |
| 190 | :value="true" | 190 | :value="true" |
| 191 | color="error" | 191 | color="error" |
| 192 | icon="warning" | 192 | icon="warning" |
| 193 | >Your search for "{{ search }}" found no results.</v-alert> | 193 | >Your search for "{{ search }}" found no results.</v-alert> |
| 194 | </v-data-table> | 194 | </v-data-table> |
| 195 | <!-- ****** ADD MULTIPLE Subject ****** --> | 195 | <!-- ****** ADD MULTIPLE Subject ****** --> |
| 196 | <v-snackbar | 196 | <v-snackbar |
| 197 | :timeout="timeout" | 197 | :timeout="timeout" |
| 198 | :top="y === 'top'" | 198 | :top="y === 'top'" |
| 199 | :right="x === 'right'" | 199 | :right="x === 'right'" |
| 200 | :vertical="mode === 'vertical'" | 200 | :vertical="mode === 'vertical'" |
| 201 | v-model="snackbar" | 201 | v-model="snackbar" |
| 202 | :color="color" | 202 | :color="color" |
| 203 | >{{ text }}</v-snackbar> | 203 | >{{ text }}</v-snackbar> |
| 204 | <v-dialog v-model="addSubjectDialog" max-width="400px"> | 204 | <v-dialog v-model="addSubjectDialog" max-width="400px"> |
| 205 | <v-card flat class="card-style pa-2" dark> | 205 | <v-card flat class="card-style pa-2" dark> |
| 206 | <v-layout> | 206 | <v-layout> |
| 207 | <v-flex xs12> | 207 | <v-flex xs12> |
| 208 | <label class="title text-xs-center">Add Subject</label> | 208 | <label class="title text-xs-center">Add Subject</label> |
| 209 | <v-icon size="24" class="right" @click="addSubjectDialog = false">cancel</v-icon> | 209 | <v-icon size="24" class="right" @click="addSubjectDialog = false">cancel</v-icon> |
| 210 | </v-flex> | 210 | </v-flex> |
| 211 | </v-layout> | 211 | </v-layout> |
| 212 | <v-container fluid fill-height> | 212 | <v-container fluid fill-height> |
| 213 | <v-layout align-center> | 213 | <v-layout align-center> |
| 214 | <v-flex xs12> | 214 | <v-flex xs12> |
| 215 | <v-form ref="form" v-model="valid" lazy-validation> | 215 | <v-form ref="form" v-model="valid" lazy-validation> |
| 216 | <v-layout> | 216 | <v-layout> |
| 217 | <v-flex xs4 sm4 class="pt-4 subheading"> | 217 | <v-flex xs4 sm4 class="pt-4 subheading"> |
| 218 | <label class="right">Class :</label> | 218 | <label class="right">Class :</label> |
| 219 | </v-flex> | 219 | </v-flex> |
| 220 | <v-flex xs8 sm8 class="ml-3"> | 220 | <v-flex xs8 sm8 class="ml-3"> |
| 221 | <v-select | 221 | <v-select |
| 222 | v-model="addSubject.classId" | 222 | v-model="addSubject.classId" |
| 223 | label="Select your class" | 223 | label="Select your class" |
| 224 | type="text" | 224 | type="text" |
| 225 | :items="classList" | 225 | :items="classList" |
| 226 | item-text="classNum" | 226 | item-text="classNum" |
| 227 | item-value="_id" | 227 | item-value="_id" |
| 228 | :rules="nameRules" | 228 | :rules="nameRules" |
| 229 | required | 229 | required |
| 230 | ></v-select> | 230 | ></v-select> |
| 231 | </v-flex> | 231 | </v-flex> |
| 232 | </v-layout> | 232 | </v-layout> |
| 233 | <v-layout> | 233 | <v-layout> |
| 234 | <v-flex xs4 sm4 class="pt-4 subheading"> | 234 | <v-flex xs4 sm4 class="pt-4 subheading"> |
| 235 | <label class="right">Subject :</label> | 235 | <label class="right">Subject :</label> |
| 236 | </v-flex> | 236 | </v-flex> |
| 237 | <v-flex xs8 sm8 class="ml-3"> | 237 | <v-flex xs8 sm8 class="ml-3"> |
| 238 | <v-text-field | 238 | <v-text-field |
| 239 | v-model="addSubject.subjectName" | 239 | v-model="addSubject.subjectName" |
| 240 | placeholder="fill your Subject Name" | 240 | placeholder="fill your Subject Name" |
| 241 | name="name" | 241 | name="name" |
| 242 | type="text" | 242 | type="text" |
| 243 | :rules="subjectRules" | 243 | :rules="subjectRules" |
| 244 | required | 244 | required |
| 245 | ></v-text-field> | 245 | ></v-text-field> |
| 246 | </v-flex> | 246 | </v-flex> |
| 247 | </v-layout> | 247 | </v-layout> |
| 248 | <v-layout> | 248 | <v-layout> |
| 249 | <v-flex xs12 sm12> | 249 | <v-flex xs12 sm12> |
| 250 | <v-card-actions> | 250 | <v-card-actions> |
| 251 | <v-btn @click="clear" round dark class="clear-button">Clear</v-btn> | 251 | <v-btn @click="clear" round dark class="clear-button">Clear</v-btn> |
| 252 | <v-spacer></v-spacer> | 252 | <v-spacer></v-spacer> |
| 253 | <v-btn @click="submit" round dark :loading="loading" class="add-button">Add</v-btn> | 253 | <v-btn @click="submit" round dark :loading="loading" class="add-button">Add</v-btn> |
| 254 | </v-card-actions> | 254 | </v-card-actions> |
| 255 | </v-flex> | 255 | </v-flex> |
| 256 | </v-layout> | 256 | </v-layout> |
| 257 | </v-form> | 257 | </v-form> |
| 258 | </v-flex> | 258 | </v-flex> |
| 259 | </v-layout> | 259 | </v-layout> |
| 260 | </v-container> | 260 | </v-container> |
| 261 | </v-card> | 261 | </v-card> |
| 262 | </v-dialog> | 262 | </v-dialog> |
| 263 | <div class="loader" v-if="showLoader"> | 263 | <div class="loader" v-if="showLoader"> |
| 264 | <v-progress-circular indeterminate color="white"></v-progress-circular> | 264 | <v-progress-circular indeterminate color="white"></v-progress-circular> |
| 265 | </div> | 265 | </div> |
| 266 | </v-container> | 266 | </v-container> |
| 267 | </template> | 267 | </template> |
| 268 | 268 | ||
| 269 | <script> | 269 | <script> |
| 270 | import http from "@/Services/http.js"; | 270 | import http from "@/Services/http.js"; |
| 271 | import Util from "@/util"; | 271 | import Util from "@/util"; |
| 272 | 272 | ||
| 273 | export default { | 273 | export default { |
| 274 | data: () => ({ | 274 | data: () => ({ |
| 275 | snackbar: false, | 275 | snackbar: false, |
| 276 | y: "top", | 276 | y: "top", |
| 277 | x: "right", | 277 | x: "right", |
| 278 | mode: "", | 278 | mode: "", |
| 279 | timeout: 3000, | 279 | timeout: 3000, |
| 280 | text: "", | 280 | text: "", |
| 281 | color: "", | 281 | color: "", |
| 282 | show: true, | 282 | show: true, |
| 283 | showSearch: false, | 283 | showSearch: false, |
| 284 | showLoader: false, | 284 | showLoader: false, |
| 285 | loading: false, | 285 | loading: false, |
| 286 | editLoading: false, | 286 | editLoading: false, |
| 287 | date: null, | 287 | date: null, |
| 288 | search: "", | 288 | search: "", |
| 289 | viewSubjectDialog: false, | 289 | viewSubjectDialog: false, |
| 290 | editSubjectDialog: false, | 290 | editSubjectDialog: false, |
| 291 | valid: true, | 291 | valid: true, |
| 292 | validEditSubject: true, | 292 | validEditSubject: true, |
| 293 | addSubjectDialog: false, | 293 | addSubjectDialog: false, |
| 294 | // isActive: true, | 294 | // isActive: true, |
| 295 | // newActive: false, | 295 | // newActive: false, |
| 296 | gender: ["Male", "Female"], | 296 | gender: ["Male", "Female"], |
| 297 | pagination: { | 297 | pagination: { |
| 298 | rowsPerPage: 10 | 298 | rowsPerPage: 10 |
| 299 | }, | 299 | }, |
| 300 | token: "", | 300 | token: "", |
| 301 | nameRules: [v => !!v || " Class Name is required"], | 301 | nameRules: [v => !!v || " Class Name is required"], |
| 302 | nameEditSubjectRules: [v => !!v || " Class Name is required"], | 302 | nameEditSubjectRules: [v => !!v || " Class Name is required"], |
| 303 | subjectRules: [v => !!v || " Subject Name is required"], | 303 | subjectRules: [v => !!v || " Subject Name is required"], |
| 304 | subjectEditNameRules: [v => !!v || " Subject Name is required"], | 304 | subjectEditNameRules: [v => !!v || " Subject Name is required"], |
| 305 | headers: [ | 305 | headers: [ |
| 306 | { | 306 | { |
| 307 | text: "No", | 307 | text: "No", |
| 308 | align: "", | 308 | align: "", |
| 309 | sortable: false, | 309 | sortable: false, |
| 310 | value: "No" | 310 | value: "No" |
| 311 | }, | 311 | }, |
| 312 | { | 312 | { |
| 313 | text: "Subject Name", | 313 | text: "Subject Name", |
| 314 | value: "subjectName", | 314 | value: "subjectName", |
| 315 | sortable: false, | 315 | sortable: false, |
| 316 | align: "center" | 316 | align: "center" |
| 317 | }, | 317 | }, |
| 318 | { text: "Action", value: "", sortable: false, align: "center" } | 318 | { text: "Action", value: "", sortable: false, align: "center" } |
| 319 | ], | 319 | ], |
| 320 | subjectList: [], | 320 | subjectList: [], |
| 321 | classList: [], | 321 | classList: [], |
| 322 | editedIndex: -1, | 322 | editedIndex: -1, |
| 323 | addSubject: {}, | 323 | addSubject: {}, |
| 324 | selectClassId: "", | 324 | selectClassId: "", |
| 325 | selectClassId: "", | 325 | selectClassId: "", |
| 326 | editedItem: { | 326 | editedItem: { |
| 327 | subjectName: "" | 327 | subjectName: "" |
| 328 | } | 328 | } |
| 329 | }), | 329 | }), |
| 330 | methods: { | 330 | methods: { |
| 331 | pickFile() { | 331 | pickFile() { |
| 332 | this.$refs.image.click(); | 332 | this.$refs.image.click(); |
| 333 | }, | 333 | }, |
| 334 | editItem(item) { | 334 | editItem(item) { |
| 335 | this.editedItem = Object.assign({}, item); | 335 | this.editedItem = Object.assign({}, item); |
| 336 | this.dialog = true; | 336 | this.dialog = true; |
| 337 | }, | 337 | }, |
| 338 | profile(item) { | 338 | profile(item) { |
| 339 | this.editedItem = Object.assign({}, item); | 339 | this.editedItem = Object.assign({}, item); |
| 340 | this.dialog1 = true; | 340 | this.dialog1 = true; |
| 341 | }, | 341 | }, |
| 342 | deleteItem(item) { | 342 | deleteItem(item) { |
| 343 | let deleteSubject = { | 343 | let deleteSubject = { |
| 344 | classId: this.selectClassId, | 344 | classId: this.selectClassId, |
| 345 | subjectId: item._id | 345 | subjectId: item._id |
| 346 | }; | 346 | }; |
| 347 | http() | 347 | http() |
| 348 | .delete( | 348 | .delete( |
| 349 | "/deleteSubject", | 349 | "/deleteSubject", |
| 350 | confirm("Are you sure you want to delete this?") && { | 350 | confirm("Are you sure you want to delete this?") && { |
| 351 | params: deleteSubject | 351 | params: deleteSubject |
| 352 | } | 352 | } |
| 353 | ) | 353 | ) |
| 354 | .then(response => { | 354 | .then(response => { |
| 355 | this.getClassSubject(); | 355 | this.getClassSubject(); |
| 356 | this.snackbar = true; | 356 | this.snackbar = true; |
| 357 | this.text = "Successfully delete Existing Subject"; | 357 | this.text = "Successfully delete Existing Subject"; |
| 358 | }) | 358 | }) |
| 359 | .catch(error => { | 359 | .catch(error => { |
| 360 | // console.log(error); | 360 | // console.log(error); |
| 361 | }); | 361 | }); |
| 362 | }, | 362 | }, |
| 363 | close() { | 363 | close() { |
| 364 | this.editSubjectDialog = false; | 364 | this.editSubjectDialog = false; |
| 365 | }, | 365 | }, |
| 366 | close1() { | 366 | close1() { |
| 367 | this.viewSubjectDialog = false; | 367 | this.viewSubjectDialog = false; |
| 368 | }, | 368 | }, |
| 369 | submit() { | 369 | submit() { |
| 370 | if (this.$refs.form.validate()) { | 370 | if (this.$refs.form.validate()) { |
| 371 | http() | 371 | http() |
| 372 | .post("/addSubject", this.addSubject) | 372 | .post("/addSubject", this.addSubject) |
| 373 | .then(response => { | 373 | .then(response => { |
| 374 | this.getClassSubject(); | 374 | this.getClassSubject(); |
| 375 | this.snackbar = true; | 375 | this.snackbar = true; |
| 376 | this.text = "New Subject added successfully"; | 376 | this.text = "New Subject added successfully"; |
| 377 | this.clear(); | 377 | this.clear(); |
| 378 | this.color = "green"; | 378 | this.color = "green"; |
| 379 | this.addSubjectDialog = false; | 379 | this.addSubjectDialog = false; |
| 380 | }) | 380 | }) |
| 381 | .catch(error => { | 381 | .catch(error => { |
| 382 | // console.log(error); | 382 | // console.log(error); |
| 383 | this.snackbar = true; | 383 | this.snackbar = true; |
| 384 | this.text = error.response.data.message; | 384 | this.text = error.response.data.message; |
| 385 | this.color = "error"; | 385 | this.color = "error"; |
| 386 | }); | 386 | }); |
| 387 | } | 387 | } |
| 388 | }, | 388 | }, |
| 389 | clear() { | 389 | clear() { |
| 390 | this.$refs.form.reset(); | 390 | this.$refs.form.reset(); |
| 391 | }, | 391 | }, |
| 392 | save() { | 392 | save() { |
| 393 | if (this.$refs.formEditSubject.validate()) { | 393 | if (this.$refs.formEditSubject.validate()) { |
| 394 | let editSubject = { | 394 | let editSubject = { |
| 395 | classId: this.addSubject.selectName, | 395 | classId: this.addSubject.selectName, |
| 396 | subjectId: this.editedItem._id, | 396 | subjectId: this.editedItem._id, |
| 397 | subjectName: this.editedItem.subjectName | 397 | subjectName: this.editedItem.subjectName |
| 398 | }; | 398 | }; |
| 399 | this.editLoading = true; | 399 | this.editLoading = true; |
| 400 | http() | 400 | http() |
| 401 | .put("/updateSubject", editSubject) | 401 | .put("/updateSubject", editSubject) |
| 402 | .then(response => { | 402 | .then(response => { |
| 403 | this.snackbar = true; | 403 | this.snackbar = true; |
| 404 | this.text = "Successfully Edit Existing Subject"; | 404 | this.text = "Successfully Edit Existing Subject"; |
| 405 | this.editLoading = false; | 405 | this.editLoading = false; |
| 406 | http() | 406 | http() |
| 407 | .get( | 407 | .get( |
| 408 | "/getParticularClass", | 408 | "/getParticularClass", |
| 409 | { params: { classId: this.selectClassId } }, | 409 | { params: { classId: this.selectClassId } }, |
| 410 | { | 410 | { |
| 411 | headers: { Authorization: "Bearer " + this.token } | 411 | headers: { Authorization: "Bearer " + this.token } |
| 412 | } | 412 | } |
| 413 | ) | 413 | ) |
| 414 | .then(response => { | 414 | .then(response => { |
| 415 | this.subjectList = response.data.data; | 415 | this.subjectList = response.data.data; |
| 416 | this.getClassSubject(); | 416 | this.getClassSubject(); |
| 417 | this.snackbar = true; | 417 | this.snackbar = true; |
| 418 | this.color = "green"; | 418 | this.color = "green"; |
| 419 | this.text = response.data.message; | 419 | this.text = response.data.message; |
| 420 | this.close(); | 420 | this.close(); |
| 421 | }) | 421 | }) |
| 422 | .catch(err => { | 422 | .catch(err => { |
| 423 | console.log("err====>", err); | 423 | console.log("err====>", err); |
| 424 | }); | 424 | }); |
| 425 | }) | 425 | }) |
| 426 | .catch(error => { | 426 | .catch(error => { |
| 427 | this.editLoading = false; | 427 | this.editLoading = false; |
| 428 | 428 | ||
| 429 | // console.log(error); | 429 | // console.log(error); |
| 430 | }); | 430 | }); |
| 431 | } | 431 | } |
| 432 | }, | 432 | }, |
| 433 | getClassSubject() { | 433 | getClassSubject() { |
| 434 | this.showLoader = true; | 434 | this.showLoader = true; |
| 435 | this.selectClassId = this.selectClassId; | 435 | this.selectClassId = this.selectClassId; |
| 436 | http() | 436 | http() |
| 437 | .get( | 437 | .get( |
| 438 | "/getParticularClass", | 438 | "/getParticularClass", |
| 439 | { params: { classId: this.selectClassId } }, | 439 | { params: { classId: this.selectClassId } }, |
| 440 | { | 440 | { |
| 441 | headers: { Authorization: "Bearer " + this.token } | 441 | headers: { Authorization: "Bearer " + this.token } |
| 442 | } | 442 | } |
| 443 | ) | 443 | ) |
| 444 | .then(response => { | 444 | .then(response => { |
| 445 | this.subjectList = response.data.data; | 445 | this.subjectList = response.data.data; |
| 446 | this.showLoader = false; | 446 | this.showLoader = false; |
| 447 | }) | 447 | }) |
| 448 | .catch(err => { | 448 | .catch(err => { |
| 449 | this.showLoader = false; | 449 | this.showLoader = false; |
| 450 | }); | 450 | }); |
| 451 | }, | 451 | }, |
| 452 | getClass() { | 452 | getClass() { |
| 453 | http() | 453 | http() |
| 454 | .get("/getClassesList", { | 454 | .get("/getClassesList", { |
| 455 | headers: { Authorization: "Bearer " + this.token } | 455 | headers: { Authorization: "Bearer " + this.token } |
| 456 | }) | 456 | }) |
| 457 | .then(response => { | 457 | .then(response => { |
| 458 | this.classList = response.data.data; | 458 | this.classList = response.data.data; |
| 459 | }) | 459 | }) |
| 460 | .catch(error => { | 460 | .catch(error => { |
| 461 | if (error.response.status === 401) { | 461 | if (error.response.status === 401) { |
| 462 | this.$router.replace({ path: "/" }); | 462 | this.$router.replace({ path: "/" }); |
| 463 | this.$store.dispatch("setToken", null); | 463 | this.$store.dispatch("setToken", null); |
| 464 | this.$store.dispatch("Id", null); | 464 | this.$store.dispatch("Id", null); |
| 465 | } | 465 | } |
| 466 | }); | 466 | }); |
| 467 | }, | 467 | }, |
| 468 | displaySearch() { | 468 | displaySearch() { |
| 469 | (this.show = false), (this.showSearch = true); | 469 | (this.show = false), (this.showSearch = true); |
| 470 | }, | 470 | }, |
| 471 | closeSearch() { | 471 | closeSearch() { |
| 472 | this.showSearch = false; | 472 | this.showSearch = false; |
| 473 | this.show = true; | 473 | this.show = true; |
| 474 | this.search = ""; | 474 | this.search = ""; |
| 475 | } | 475 | } |
| 476 | }, | 476 | }, |
| 477 | mounted() { | 477 | mounted() { |
| 478 | this.token = this.$store.state.token; | 478 | this.token = this.$store.state.token; |
| 479 | // this.getNoticeDataList(); | 479 | // this.getNoticeDataList(); |
| 480 | this.getClass(); | 480 | this.getClass(); |
| 481 | } | 481 | } |
| 482 | }; | 482 | }; |
| 483 | </script> | 483 | </script> |
src/pages/Teachers/teachers.vue
| 1 | <template> | 1 | <template> |
| 2 | <v-container fluid class="body-color"> | 2 | <v-container fluid class="body-color"> |
| 3 | <!-- ****** EDIT TEACHERS DETAILS ****** --> | 3 | <!-- ****** EDIT TEACHERS DETAILS ****** --> |
| 4 | <v-dialog v-model="editTeacherDialog" max-width="1160px" scrollable> | 4 | <v-dialog v-model="editTeacherDialog" max-width="1160px" scrollable> |
| 5 | <v-card flat class="card-style" dark> | 5 | <v-card flat class="card-style" dark> |
| 6 | <v-card-text> | 6 | <v-card-text> |
| 7 | <v-layout> | 7 | <v-layout> |
| 8 | <v-flex xs12> | 8 | <v-flex xs12> |
| 9 | <label class="title text-xs-center">Edit Teacher</label> | 9 | <label class="title text-xs-center">Edit Teacher</label> |
| 10 | <v-icon size="24" class="right" @click="editTeacherDialog = false">cancel</v-icon> | 10 | <v-icon size="24" class="right" @click="editTeacherDialog = false">cancel</v-icon> |
| 11 | </v-flex> | 11 | </v-flex> |
| 12 | </v-layout> | 12 | </v-layout> |
| 13 | <v-container fluid> | 13 | <v-container fluid> |
| 14 | <v-layout> | 14 | <v-layout> |
| 15 | <v-flex xs12 class="text-xs-center text-sm-center text-md-center text-lg-center my-4"> | 15 | <v-flex xs12 class="text-xs-center text-sm-center text-md-center text-lg-center my-4"> |
| 16 | <v-avatar size="100px" v-if="!editedItem.profilePicUrl && !imageUrl"> | 16 | <v-avatar size="100px" v-if="!editedItem.profilePicUrl && !imageUrl"> |
| 17 | <img src="/static/icon/user.png" /> | 17 | <img src="/static/icon/user.png" /> |
| 18 | </v-avatar> | 18 | </v-avatar> |
| 19 | <img | 19 | <img |
| 20 | :src="editedItem.profilePicUrl" | 20 | :src="editedItem.profilePicUrl" |
| 21 | v-else-if="editedItem.profilePicUrl && !imageUrl" | 21 | v-else-if="editedItem.profilePicUrl && !imageUrl" |
| 22 | height="150" | 22 | height="150" |
| 23 | style="border-radius:50%; width:150px" | 23 | style="border-radius:50%; width:150px" |
| 24 | /> | 24 | /> |
| 25 | <img | 25 | <img |
| 26 | v-if="imageUrl" | 26 | v-if="imageUrl" |
| 27 | :src="imageUrl" | 27 | :src="imageUrl" |
| 28 | height="150" | 28 | height="150" |
| 29 | style="border-radius:50%; width:150px" | 29 | style="border-radius:50%; width:150px" |
| 30 | /> | 30 | /> |
| 31 | <input | 31 | <input |
| 32 | type="file" | 32 | type="file" |
| 33 | style="display:none" | 33 | style="display:none" |
| 34 | ref="image" | 34 | ref="image" |
| 35 | accept="image/*" | 35 | accept="image/*" |
| 36 | @change="onFilePicked" | 36 | @change="onFilePicked" |
| 37 | /> | 37 | /> |
| 38 | </v-flex> | 38 | </v-flex> |
| 39 | </v-layout> | 39 | </v-layout> |
| 40 | <v-layout wrap> | 40 | <v-layout wrap> |
| 41 | <v-flex xs12 sm6> | 41 | <v-flex xs12 sm6> |
| 42 | <v-layout> | 42 | <v-layout> |
| 43 | <v-flex xs4 class="pt-4 subheading"> | 43 | <v-flex xs4 class="pt-4 subheading"> |
| 44 | <label class="right hidden-xs-only hidden-sm-only">Full Name:</label> | 44 | <label class="right hidden-xs-only hidden-sm-only">Full Name:</label> |
| 45 | <label class="right hidden-lg-only hidden-md-only hidden-xl-only">Name:</label> | 45 | <label class="right hidden-lg-only hidden-md-only hidden-xl-only">Name:</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.name" | 49 | v-model="editedItem.name" |
| 50 | placeholder="fill your full Name" | 50 | placeholder="fill your full Name" |
| 51 | type="text" | 51 | type="text" |
| 52 | required | 52 | required |
| 53 | ></v-text-field> | 53 | ></v-text-field> |
| 54 | </v-flex> | 54 | </v-flex> |
| 55 | </v-layout> | 55 | </v-layout> |
| 56 | </v-flex> | 56 | </v-flex> |
| 57 | <v-flex xs12 sm6> | 57 | <v-flex xs12 sm6> |
| 58 | <v-layout> | 58 | <v-layout> |
| 59 | <v-flex xs4 sm4 class="pt-4 subheading"> | 59 | <v-flex xs4 sm4 class="pt-4 subheading"> |
| 60 | <label class="right">Email ID:</label> | 60 | <label class="right">Email ID:</label> |
| 61 | </v-flex> | 61 | </v-flex> |
| 62 | <v-flex xs8 sm8 class="ml-3"> | 62 | <v-flex xs8 sm8 class="ml-3"> |
| 63 | <v-text-field | 63 | <v-text-field |
| 64 | placeholder="fill your email" | 64 | placeholder="fill your email" |
| 65 | v-model="editedItem.email" | 65 | v-model="editedItem.email" |
| 66 | type="text" | 66 | type="text" |
| 67 | required | 67 | required |
| 68 | ></v-text-field> | 68 | ></v-text-field> |
| 69 | </v-flex> | 69 | </v-flex> |
| 70 | </v-layout> | 70 | </v-layout> |
| 71 | </v-flex> | 71 | </v-flex> |
| 72 | </v-layout> | 72 | </v-layout> |
| 73 | <v-layout wrap> | 73 | <v-layout wrap> |
| 74 | <v-flex xs12 sm6> | 74 | <v-flex xs12 sm6> |
| 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-sm-only hidden-xs-only">Date of Birth:</label> | 77 | <label class="right hidden-sm-only hidden-xs-only">Date of Birth:</label> |
| 78 | <label class="right hidden-lg-only hidden-xl-only hidden-md-only">D.O.B:</label> | 78 | <label class="right hidden-lg-only hidden-xl-only hidden-md-only">D.O.B:</label> |
| 79 | </v-flex> | 79 | </v-flex> |
| 80 | <v-flex xs8 class="ml-3"> | 80 | <v-flex xs8 class="ml-3"> |
| 81 | <v-menu | 81 | <v-menu |
| 82 | ref="menu" | 82 | ref="menu" |
| 83 | :close-on-content-click="false" | 83 | :close-on-content-click="false" |
| 84 | v-model="menu2" | 84 | v-model="menu2" |
| 85 | :nudge-right="40" | 85 | :nudge-right="40" |
| 86 | lazy | 86 | lazy |
| 87 | transition="scale-transition" | 87 | transition="scale-transition" |
| 88 | offset-y | 88 | offset-y |
| 89 | full-width | 89 | full-width |
| 90 | min-width="290px" | 90 | min-width="290px" |
| 91 | > | 91 | > |
| 92 | <v-text-field | 92 | <v-text-field |
| 93 | slot="activator" | 93 | slot="activator" |
| 94 | v-model="editedItem.dob" | 94 | v-model="editedItem.dob" |
| 95 | placeholder="Select date" | 95 | placeholder="Select date" |
| 96 | ></v-text-field> | 96 | ></v-text-field> |
| 97 | <v-date-picker | 97 | <v-date-picker |
| 98 | ref="picker" | 98 | ref="picker" |
| 99 | v-model="editedItem.dob" | 99 | v-model="editedItem.dob" |
| 100 | :max="new Date().toISOString().substr(0, 10)" | 100 | :max="new Date().toISOString().substr(0, 10)" |
| 101 | min="1950-01-01" | 101 | min="1950-01-01" |
| 102 | @input="menu2 = false" | 102 | @input="menu2 = false" |
| 103 | ></v-date-picker> | 103 | ></v-date-picker> |
| 104 | </v-menu> | 104 | </v-menu> |
| 105 | </v-flex> | 105 | </v-flex> |
| 106 | </v-layout> | 106 | </v-layout> |
| 107 | </v-flex> | 107 | </v-flex> |
| 108 | <v-flex xs12 sm6> | 108 | <v-flex xs12 sm6> |
| 109 | <v-layout> | 109 | <v-layout> |
| 110 | <v-flex xs4 class="pt-4 subheading"> | 110 | <v-flex xs4 class="pt-4 subheading"> |
| 111 | <label class="right">City:</label> | 111 | <label class="right">City:</label> |
| 112 | </v-flex> | 112 | </v-flex> |
| 113 | <v-flex xs8 class="ml-3"> | 113 | <v-flex xs8 class="ml-3"> |
| 114 | <v-text-field | 114 | <v-text-field |
| 115 | v-model="editedItem.city" | 115 | v-model="editedItem.city" |
| 116 | placeholder="fill your City Name" | 116 | placeholder="fill your City Name" |
| 117 | type="text" | 117 | type="text" |
| 118 | required | 118 | required |
| 119 | ></v-text-field> | 119 | ></v-text-field> |
| 120 | </v-flex> | 120 | </v-flex> |
| 121 | </v-layout> | 121 | </v-layout> |
| 122 | </v-flex> | 122 | </v-flex> |
| 123 | </v-layout> | 123 | </v-layout> |
| 124 | <v-layout wrap> | 124 | <v-layout wrap> |
| 125 | <v-flex xs12 sm6> | 125 | <v-flex xs12 sm6> |
| 126 | <v-layout> | 126 | <v-layout> |
| 127 | <v-flex xs4 class="pt-4 subheading"> | 127 | <v-flex xs4 class="pt-4 subheading"> |
| 128 | <label class="right">State:</label> | 128 | <label class="right">State:</label> |
| 129 | </v-flex> | 129 | </v-flex> |
| 130 | <v-flex xs8 class="ml-3"> | 130 | <v-flex xs8 class="ml-3"> |
| 131 | <v-text-field | 131 | <v-text-field |
| 132 | v-model="editedItem.state" | 132 | v-model="editedItem.state" |
| 133 | placeholder="fill your State Name" | 133 | placeholder="fill your State Name" |
| 134 | type="text" | 134 | type="text" |
| 135 | required | 135 | required |
| 136 | ></v-text-field> | 136 | ></v-text-field> |
| 137 | </v-flex> | 137 | </v-flex> |
| 138 | </v-layout> | 138 | </v-layout> |
| 139 | </v-flex> | 139 | </v-flex> |
| 140 | <v-flex xs12 sm6> | 140 | <v-flex xs12 sm6> |
| 141 | <v-layout> | 141 | <v-layout> |
| 142 | <v-flex xs4 class="pt-4 subheading"> | 142 | <v-flex xs4 class="pt-4 subheading"> |
| 143 | <label class="right">PinCode:</label> | 143 | <label class="right">PinCode:</label> |
| 144 | </v-flex> | 144 | </v-flex> |
| 145 | <v-flex xs8 class="ml-3"> | 145 | <v-flex xs8 class="ml-3"> |
| 146 | <v-text-field | 146 | <v-text-field |
| 147 | v-model="editedItem.pincode" | 147 | v-model="editedItem.pincode" |
| 148 | placeholder="fill your pincode" | 148 | placeholder="fill your pincode" |
| 149 | type="number" | 149 | type="number" |
| 150 | required | 150 | required |
| 151 | ></v-text-field> | 151 | ></v-text-field> |
| 152 | </v-flex> | 152 | </v-flex> |
| 153 | </v-layout> | 153 | </v-layout> |
| 154 | </v-flex> | 154 | </v-flex> |
| 155 | </v-layout> | 155 | </v-layout> |
| 156 | <v-layout wrap> | 156 | <v-layout wrap> |
| 157 | <v-flex xs12 sm6> | 157 | <v-flex xs12 sm6> |
| 158 | <v-layout> | 158 | <v-layout> |
| 159 | <v-flex xs4 class="pt-4 subheading"> | 159 | <v-flex xs4 class="pt-4 subheading"> |
| 160 | <label class="right hidden-xs-only hidden-sm-only">Mobile No:</label> | 160 | <label class="right hidden-xs-only hidden-sm-only">Mobile No:</label> |
| 161 | <label class="right hidden-lg-only hidden-md-only hidden-xl-only">Mobile:</label> | 161 | <label class="right hidden-lg-only hidden-md-only hidden-xl-only">Mobile:</label> |
| 162 | </v-flex> | 162 | </v-flex> |
| 163 | <v-flex xs8 class="ml-3"> | 163 | <v-flex xs8 class="ml-3"> |
| 164 | <v-text-field | 164 | <v-text-field |
| 165 | v-model="editedItem.mobileNo" | 165 | v-model="editedItem.mobileNo" |
| 166 | placeholder="fill your MobileNo" | 166 | placeholder="fill your MobileNo" |
| 167 | type="number" | 167 | type="number" |
| 168 | required | 168 | required |
| 169 | ></v-text-field> | 169 | ></v-text-field> |
| 170 | </v-flex> | 170 | </v-flex> |
| 171 | </v-layout> | 171 | </v-layout> |
| 172 | </v-flex> | 172 | </v-flex> |
| 173 | <v-flex xs12 sm6> | 173 | <v-flex xs12 sm6> |
| 174 | <v-layout> | 174 | <v-layout> |
| 175 | <v-flex xs4 class="pt-4 subheading"> | 175 | <v-flex xs4 class="pt-4 subheading"> |
| 176 | <label class="right hidden-xs-only hidden-sm-only">Select Country:</label> | 176 | <label class="right hidden-xs-only hidden-sm-only">Select Country:</label> |
| 177 | <label class="right hidden-lg-only hidden-md-only hidden-xl-only">Country:</label> | 177 | <label class="right hidden-lg-only hidden-md-only hidden-xl-only">Country:</label> |
| 178 | </v-flex> | 178 | </v-flex> |
| 179 | <v-flex xs8 sm8 class="ml-3"> | 179 | <v-flex xs8 sm8 class="ml-3"> |
| 180 | <v-autocomplete | 180 | <v-autocomplete |
| 181 | v-model="editedItem.country" | 181 | v-model="editedItem.country" |
| 182 | :items="countries" | 182 | :items="countries" |
| 183 | placeholder="Select Country Name" | 183 | placeholder="Select Country Name" |
| 184 | required | 184 | required |
| 185 | ></v-autocomplete> | 185 | ></v-autocomplete> |
| 186 | </v-flex> | 186 | </v-flex> |
| 187 | </v-layout> | 187 | </v-layout> |
| 188 | </v-flex> | 188 | </v-flex> |
| 189 | </v-layout> | 189 | </v-layout> |
| 190 | <v-layout wrap> | 190 | <v-layout wrap> |
| 191 | <v-flex xs12 sm6> | 191 | <v-flex xs12 sm6> |
| 192 | <v-layout> | 192 | <v-layout> |
| 193 | <v-flex xs4 class="pt-4 subheading"> | 193 | <v-flex xs4 class="pt-4 subheading"> |
| 194 | <label class="right">Join Date:</label> | 194 | <label class="right">Join Date:</label> |
| 195 | </v-flex> | 195 | </v-flex> |
| 196 | <v-flex xs8 sm8 class="ml-3"> | 196 | <v-flex xs8 sm8 class="ml-3"> |
| 197 | <v-menu | 197 | <v-menu |
| 198 | ref="menu" | 198 | ref="menu" |
| 199 | :close-on-content-click="false" | 199 | :close-on-content-click="false" |
| 200 | v-model="menu3" | 200 | v-model="menu3" |
| 201 | :nudge-right="40" | 201 | :nudge-right="40" |
| 202 | lazy | 202 | lazy |
| 203 | transition="scale-transition" | 203 | transition="scale-transition" |
| 204 | offset-y | 204 | offset-y |
| 205 | full-width | 205 | full-width |
| 206 | min-width="290px" | 206 | min-width="290px" |
| 207 | > | 207 | > |
| 208 | <v-text-field | 208 | <v-text-field |
| 209 | slot="activator" | 209 | slot="activator" |
| 210 | v-model="editedItem.joinDate" | 210 | v-model="editedItem.joinDate" |
| 211 | placeholder="Select date" | 211 | placeholder="Select date" |
| 212 | ></v-text-field> | 212 | ></v-text-field> |
| 213 | <v-date-picker | 213 | <v-date-picker |
| 214 | ref="picker" | 214 | ref="picker" |
| 215 | v-model="editedItem.joinDate" | 215 | v-model="editedItem.joinDate" |
| 216 | :max="new Date().toISOString().substr(0, 10)" | 216 | :max="new Date().toISOString().substr(0, 10)" |
| 217 | min="1950-01-01" | 217 | min="1950-01-01" |
| 218 | @input="menu3 = false" | 218 | @input="menu3 = false" |
| 219 | ></v-date-picker> | 219 | ></v-date-picker> |
| 220 | </v-menu> | 220 | </v-menu> |
| 221 | </v-flex> | 221 | </v-flex> |
| 222 | </v-layout> | 222 | </v-layout> |
| 223 | </v-flex> | 223 | </v-flex> |
| 224 | <v-flex xs12 sm6> | 224 | <v-flex xs12 sm6> |
| 225 | <v-layout> | 225 | <v-layout> |
| 226 | <v-flex xs4 class="pt-4 subheading"> | 226 | <v-flex xs4 class="pt-4 subheading"> |
| 227 | <label class="right hidden-xs-only hidden-sm-only">Uplaod Image:</label> | 227 | <label class="right hidden-xs-only hidden-sm-only">Uplaod Image:</label> |
| 228 | <label class="right hidden-lg-only hidden-md-only hidden-xl-only">Uplaod :</label> | 228 | <label class="right hidden-lg-only hidden-md-only hidden-xl-only">Uplaod :</label> |
| 229 | </v-flex> | 229 | </v-flex> |
| 230 | <v-flex xs8 sm8 class="ml-3"> | 230 | <v-flex xs8 sm8 class="ml-3"> |
| 231 | <v-text-field | 231 | <v-text-field |
| 232 | label="Select Image" | 232 | label="Select Image" |
| 233 | @click="pickFile" | 233 | @click="pickFile" |
| 234 | v-model="imageName" | 234 | v-model="imageName" |
| 235 | append-icon="attach_file" | 235 | append-icon="attach_file" |
| 236 | ></v-text-field> | 236 | ></v-text-field> |
| 237 | </v-flex> | 237 | </v-flex> |
| 238 | </v-layout> | 238 | </v-layout> |
| 239 | </v-flex> | 239 | </v-flex> |
| 240 | </v-layout> | 240 | </v-layout> |
| 241 | <v-layout class="hidden-xs-only hidden-sm-only" wrap> | 241 | <v-layout class="hidden-xs-only hidden-sm-only" wrap> |
| 242 | <v-flex xs12 sm6> | 242 | <v-flex xs12 sm6> |
| 243 | <v-layout> | 243 | <v-layout> |
| 244 | <v-flex xs4 sm4 class="pt-4 subheading"> | 244 | <v-flex xs4 sm4 class="pt-4 subheading"> |
| 245 | <label class="right">Present Address:</label> | 245 | <label class="right">Present Address:</label> |
| 246 | </v-flex> | 246 | </v-flex> |
| 247 | <v-flex xs8 sm8 class="ml-3"> | 247 | <v-flex xs8 sm8 class="ml-3"> |
| 248 | <v-text-field | 248 | <v-text-field |
| 249 | name="input-4-3" | 249 | name="input-4-3" |
| 250 | v-model="editedItem.presentAddress" | 250 | v-model="editedItem.presentAddress" |
| 251 | placeholder="fill Your present Address" | 251 | placeholder="fill Your present Address" |
| 252 | required | 252 | required |
| 253 | ></v-text-field> | 253 | ></v-text-field> |
| 254 | </v-flex> | 254 | </v-flex> |
| 255 | </v-layout> | 255 | </v-layout> |
| 256 | </v-flex> | 256 | </v-flex> |
| 257 | <v-flex xs12 sm6> | 257 | <v-flex xs12 sm6> |
| 258 | <v-layout> | 258 | <v-layout> |
| 259 | <v-flex xs4 sm4 class="pt-4 subheading"> | 259 | <v-flex xs4 sm4 class="pt-4 subheading"> |
| 260 | <label class="right">Permanent Address:</label> | 260 | <label class="right">Permanent Address:</label> |
| 261 | </v-flex> | 261 | </v-flex> |
| 262 | <v-flex xs12 sm8 class="ml-3"> | 262 | <v-flex xs12 sm8 class="ml-3"> |
| 263 | <v-text-field | 263 | <v-text-field |
| 264 | name="input-4-3" | 264 | name="input-4-3" |
| 265 | v-model="editedItem.permanentAddress" | 265 | v-model="editedItem.permanentAddress" |
| 266 | placeholder="fill Your Permanent Address" | 266 | placeholder="fill Your Permanent Address" |
| 267 | required | 267 | required |
| 268 | ></v-text-field> | 268 | ></v-text-field> |
| 269 | </v-flex> | 269 | </v-flex> |
| 270 | </v-layout> | 270 | </v-layout> |
| 271 | </v-flex> | 271 | </v-flex> |
| 272 | </v-layout> | 272 | </v-layout> |
| 273 | <v-layout class="hidden-lg-only hidden-md-only hidden-xl-only" wrap> | 273 | <v-layout class="hidden-lg-only hidden-md-only hidden-xl-only" wrap> |
| 274 | <v-flex xs12 sm12> | 274 | <v-flex xs12 sm12> |
| 275 | <v-layout> | 275 | <v-layout> |
| 276 | <v-flex xs12 sm3 class="pt-4 subheading text-xs-center"> | 276 | <v-flex xs12 sm3 class="pt-4 subheading text-xs-center"> |
| 277 | <label class>Present Address:</label> | 277 | <label class>Present Address:</label> |
| 278 | </v-flex> | 278 | </v-flex> |
| 279 | </v-layout> | 279 | </v-layout> |
| 280 | <v-layout> | 280 | <v-layout> |
| 281 | <v-flex xs12 sm12> | 281 | <v-flex xs12 sm12> |
| 282 | <v-textarea | 282 | <v-textarea |
| 283 | name="input-4-3" | 283 | name="input-4-3" |
| 284 | v-model="editedItem.presentAddress" | 284 | v-model="editedItem.presentAddress" |
| 285 | placeholder="fill Your present Address" | 285 | placeholder="fill Your present Address" |
| 286 | required | 286 | required |
| 287 | ></v-textarea> | 287 | ></v-textarea> |
| 288 | </v-flex> | 288 | </v-flex> |
| 289 | </v-layout> | 289 | </v-layout> |
| 290 | </v-flex> | 290 | </v-flex> |
| 291 | <v-flex xs12 sm12> | 291 | <v-flex xs12 sm12> |
| 292 | <v-layout> | 292 | <v-layout> |
| 293 | <v-flex xs12 sm3 class="pt-4 pr-4 subheading text-xs-center addressForm"> | 293 | <v-flex xs12 sm3 class="pt-4 pr-4 subheading text-xs-center addressForm"> |
| 294 | <label>Permanent Address:</label> | 294 | <label>Permanent Address:</label> |
| 295 | </v-flex> | 295 | </v-flex> |
| 296 | </v-layout> | 296 | </v-layout> |
| 297 | <v-layout> | 297 | <v-layout> |
| 298 | <v-flex xs12 sm12> | 298 | <v-flex xs12 sm12> |
| 299 | <v-textarea | 299 | <v-textarea |
| 300 | name="input-4-3" | 300 | name="input-4-3" |
| 301 | v-model="editedItem.permanentAddress" | 301 | v-model="editedItem.permanentAddress" |
| 302 | placeholder="fill Your Permanent Address" | 302 | placeholder="fill Your Permanent Address" |
| 303 | required | 303 | required |
| 304 | ></v-textarea> | 304 | ></v-textarea> |
| 305 | </v-flex> | 305 | </v-flex> |
| 306 | </v-layout> | 306 | </v-layout> |
| 307 | </v-flex> | 307 | </v-flex> |
| 308 | </v-layout> | 308 | </v-layout> |
| 309 | <v-layout> | 309 | <v-layout> |
| 310 | <v-flex xs12 sm12> | 310 | <v-flex xs12 sm12> |
| 311 | <v-flex xs12 sm12> | 311 | <v-flex xs12 sm12> |
| 312 | <v-layout class="right"> | 312 | <v-layout class="right"> |
| 313 | <v-btn @click="save" round dark :loading="loading" class="add-button">Save</v-btn> | 313 | <v-btn @click="save" round dark :loading="loading" class="add-button">Save</v-btn> |
| 314 | </v-layout> | 314 | </v-layout> |
| 315 | </v-flex> | 315 | </v-flex> |
| 316 | </v-flex> | 316 | </v-flex> |
| 317 | </v-layout> | 317 | </v-layout> |
| 318 | </v-container> | 318 | </v-container> |
| 319 | </v-card-text> | 319 | </v-card-text> |
| 320 | </v-card> | 320 | </v-card> |
| 321 | </v-dialog> | 321 | </v-dialog> |
| 322 | 322 | ||
| 323 | <!-- ****** PROFILE VIEW TEACHERS DETAILS ****** --> | 323 | <!-- ****** PROFILE VIEW TEACHERS DETAILS ****** --> |
| 324 | 324 | ||
| 325 | <v-dialog v-model="viewTeacherProfileDialog" max-width="500px" scrollable> | 325 | <v-dialog v-model="viewTeacherProfileDialog" max-width="500px" scrollable> |
| 326 | <v-card flat class="card-style pa-3" dark> | 326 | <v-card flat class="card-style pa-3" dark> |
| 327 | <v-layout> | 327 | <v-layout> |
| 328 | <v-flex xs12> | 328 | <v-flex xs12> |
| 329 | <label class="title text-xs-center">View Class</label> | 329 | <label class="title text-xs-center">View Class</label> |
| 330 | <v-icon size="24" class="right" @click="viewTeacherProfileDialog = false">cancel</v-icon> | 330 | <v-icon size="24" class="right" @click="viewTeacherProfileDialog = false">cancel</v-icon> |
| 331 | </v-flex> | 331 | </v-flex> |
| 332 | </v-layout> | 332 | </v-layout> |
| 333 | <v-card-text> | 333 | <v-card-text> |
| 334 | <v-container grid-list-md> | 334 | <v-container grid-list-md> |
| 335 | <v-layout wrap> | 335 | <v-layout wrap> |
| 336 | <v-flex> | 336 | <v-flex> |
| 337 | <v-flex align-center justify-center layout text-xs-center> | 337 | <v-flex align-center justify-center layout text-xs-center> |
| 338 | <v-avatar size="80"> | 338 | <v-avatar size="80"> |
| 339 | <img src="/static/icon/user.png" v-if="!editedItem.profilePicUrl" /> | 339 | <img src="/static/icon/user.png" v-if="!editedItem.profilePicUrl" /> |
| 340 | <img :src="editedItem.profilePicUrl" v-else-if="editedItem.profilePicUrl" /> | 340 | <img :src="editedItem.profilePicUrl" v-else-if="editedItem.profilePicUrl" /> |
| 341 | </v-avatar> | 341 | </v-avatar> |
| 342 | </v-flex> | 342 | </v-flex> |
| 343 | <v-layout> | 343 | <v-layout> |
| 344 | <v-flex xs5 sm6> | 344 | <v-flex xs5 sm6> |
| 345 | <h5 class="right my-1"> | 345 | <h5 class="right my-1"> |
| 346 | <b>Full Name:</b> | 346 | <b>Full Name:</b> |
| 347 | </h5> | 347 | </h5> |
| 348 | </v-flex> | 348 | </v-flex> |
| 349 | <v-flex sm6 xs8> | 349 | <v-flex sm6 xs8> |
| 350 | <h5 class="my-1">{{ editedItem.name }}</h5> | 350 | <h5 class="my-1">{{ editedItem.name }}</h5> |
| 351 | </v-flex> | 351 | </v-flex> |
| 352 | </v-layout> | 352 | </v-layout> |
| 353 | <v-layout> | 353 | <v-layout> |
| 354 | <v-flex xs5 sm6> | 354 | <v-flex xs5 sm6> |
| 355 | <h5 class="right my-1"> | 355 | <h5 class="right my-1"> |
| 356 | <b>Email:</b> | 356 | <b>Email:</b> |
| 357 | </h5> | 357 | </h5> |
| 358 | </v-flex> | 358 | </v-flex> |
| 359 | <v-flex sm6 xs8> | 359 | <v-flex sm6 xs8> |
| 360 | <h5 class="my-1">{{ editedItem.email }}</h5> | 360 | <h5 class="my-1">{{ editedItem.email }}</h5> |
| 361 | </v-flex> | 361 | </v-flex> |
| 362 | </v-layout> | 362 | </v-layout> |
| 363 | <v-layout> | 363 | <v-layout> |
| 364 | <v-flex xs5 sm6> | 364 | <v-flex xs5 sm6> |
| 365 | <h5 class="right my-1"> | 365 | <h5 class="right my-1"> |
| 366 | <b>City:</b> | 366 | <b>City:</b> |
| 367 | </h5> | 367 | </h5> |
| 368 | </v-flex> | 368 | </v-flex> |
| 369 | <v-flex sm6 xs8> | 369 | <v-flex sm6 xs8> |
| 370 | <h5 class="my-1">{{ editedItem.city }}</h5> | 370 | <h5 class="my-1">{{ editedItem.city }}</h5> |
| 371 | </v-flex> | 371 | </v-flex> |
| 372 | </v-layout> | 372 | </v-layout> |
| 373 | <v-layout> | 373 | <v-layout> |
| 374 | <v-flex xs5 sm6> | 374 | <v-flex xs5 sm6> |
| 375 | <h5 class="right my-1"> | 375 | <h5 class="right my-1"> |
| 376 | <b>State:</b> | 376 | <b>State:</b> |
| 377 | </h5> | 377 | </h5> |
| 378 | </v-flex> | 378 | </v-flex> |
| 379 | <v-flex sm6 xs8> | 379 | <v-flex sm6 xs8> |
| 380 | <h5 class="my-1">{{ editedItem.state }}</h5> | 380 | <h5 class="my-1">{{ editedItem.state }}</h5> |
| 381 | </v-flex> | 381 | </v-flex> |
| 382 | </v-layout> | 382 | </v-layout> |
| 383 | <v-layout> | 383 | <v-layout> |
| 384 | <v-flex xs5 sm6> | 384 | <v-flex xs5 sm6> |
| 385 | <h5 class="right my-1"> | 385 | <h5 class="right my-1"> |
| 386 | <b>Country:</b> | 386 | <b>Country:</b> |
| 387 | </h5> | 387 | </h5> |
| 388 | </v-flex> | 388 | </v-flex> |
| 389 | <v-flex sm6 xs8> | 389 | <v-flex sm6 xs8> |
| 390 | <h5 class="my-1">{{ editedItem.country }}</h5> | 390 | <h5 class="my-1">{{ editedItem.country }}</h5> |
| 391 | </v-flex> | 391 | </v-flex> |
| 392 | </v-layout> | 392 | </v-layout> |
| 393 | <v-layout> | 393 | <v-layout> |
| 394 | <v-flex xs5 sm6> | 394 | <v-flex xs5 sm6> |
| 395 | <h5 class="right my-1"> | 395 | <h5 class="right my-1"> |
| 396 | <b>Pincode:</b> | 396 | <b>Pincode:</b> |
| 397 | </h5> | 397 | </h5> |
| 398 | </v-flex> | 398 | </v-flex> |
| 399 | <v-flex sm6 xs8> | 399 | <v-flex sm6 xs8> |
| 400 | <h5 class="my-1">{{ editedItem.pincode }}</h5> | 400 | <h5 class="my-1">{{ editedItem.pincode }}</h5> |
| 401 | </v-flex> | 401 | </v-flex> |
| 402 | </v-layout> | 402 | </v-layout> |
| 403 | <v-layout> | 403 | <v-layout> |
| 404 | <v-flex xs5 sm6> | 404 | <v-flex xs5 sm6> |
| 405 | <h5 class="right my-1"> | 405 | <h5 class="right my-1"> |
| 406 | <b>Mobile No:</b> | 406 | <b>Mobile No:</b> |
| 407 | </h5> | 407 | </h5> |
| 408 | </v-flex> | 408 | </v-flex> |
| 409 | <v-flex sm6 xs8> | 409 | <v-flex sm6 xs8> |
| 410 | <h5 class="my-1">{{ editedItem.mobileNo }}</h5> | 410 | <h5 class="my-1">{{ editedItem.mobileNo }}</h5> |
| 411 | </v-flex> | 411 | </v-flex> |
| 412 | </v-layout> | 412 | </v-layout> |
| 413 | <v-layout> | 413 | <v-layout> |
| 414 | <v-flex xs5 sm6> | 414 | <v-flex xs5 sm6> |
| 415 | <h5 class="right my-1"> | 415 | <h5 class="right my-1"> |
| 416 | <b>Join Date:</b> | 416 | <b>Join Date:</b> |
| 417 | </h5> | 417 | </h5> |
| 418 | </v-flex> | 418 | </v-flex> |
| 419 | <v-flex sm6 xs8> | 419 | <v-flex sm6 xs8> |
| 420 | <h5 class="my-1">{{ dates(editedItem.joinDate) }}</h5> | 420 | <h5 class="my-1">{{ dates(editedItem.joinDate) }}</h5> |
| 421 | </v-flex> | 421 | </v-flex> |
| 422 | </v-layout> | 422 | </v-layout> |
| 423 | <v-layout> | 423 | <v-layout> |
| 424 | <v-flex xs5 sm6> | 424 | <v-flex xs5 sm6> |
| 425 | <h5 class="right my-1"> | 425 | <h5 class="right my-1"> |
| 426 | <b>D.O.B :</b> | 426 | <b>D.O.B :</b> |
| 427 | </h5> | 427 | </h5> |
| 428 | </v-flex> | 428 | </v-flex> |
| 429 | <v-flex sm6 xs8> | 429 | <v-flex sm6 xs8> |
| 430 | <h5 class="my-1">{{ dates(editedItem.dob) }}</h5> | 430 | <h5 class="my-1">{{ dates(editedItem.dob) }}</h5> |
| 431 | </v-flex> | 431 | </v-flex> |
| 432 | </v-layout> | 432 | </v-layout> |
| 433 | <v-layout> | 433 | <v-layout> |
| 434 | <v-flex xs6 sm6> | 434 | <v-flex xs6 sm6> |
| 435 | <h5 class="right my-1"> | 435 | <h5 class="right my-1"> |
| 436 | <b>Permanent Address:</b> | 436 | <b>Permanent Address:</b> |
| 437 | </h5> | 437 | </h5> |
| 438 | </v-flex> | 438 | </v-flex> |
| 439 | <v-flex sm6 xs8> | 439 | <v-flex sm6 xs8> |
| 440 | <h5 class="my-1">{{ editedItem.permanentAddress }}</h5> | 440 | <h5 class="my-1">{{ editedItem.permanentAddress }}</h5> |
| 441 | </v-flex> | 441 | </v-flex> |
| 442 | </v-layout> | 442 | </v-layout> |
| 443 | <v-layout> | 443 | <v-layout> |
| 444 | <v-flex xs6 sm6> | 444 | <v-flex xs6 sm6> |
| 445 | <h5 class="right my-1"> | 445 | <h5 class="right my-1"> |
| 446 | <b>present Address:</b> | 446 | <b>present Address:</b> |
| 447 | </h5> | 447 | </h5> |
| 448 | </v-flex> | 448 | </v-flex> |
| 449 | <v-flex sm6 xs8> | 449 | <v-flex sm6 xs8> |
| 450 | <h5 class="my-1">{{ editedItem.presentAddress }}</h5> | 450 | <h5 class="my-1">{{ editedItem.presentAddress }}</h5> |
| 451 | </v-flex> | 451 | </v-flex> |
| 452 | </v-layout> | 452 | </v-layout> |
| 453 | </v-flex> | 453 | </v-flex> |
| 454 | </v-layout> | 454 | </v-layout> |
| 455 | </v-container> | 455 | </v-container> |
| 456 | </v-card-text> | 456 | </v-card-text> |
| 457 | </v-card> | 457 | </v-card> |
| 458 | </v-dialog> | 458 | </v-dialog> |
| 459 | <!-- ****** EXISTING-Teachers TABLE DATA****** --> | 459 | <!-- ****** EXISTING-Teachers TABLE DATA****** --> |
| 460 | <v-toolbar color="transparent" flat> | 460 | <v-toolbar color="transparent" flat> |
| 461 | <v-btn | 461 | <v-btn |
| 462 | fab | 462 | fab |
| 463 | dark | 463 | dark |
| 464 | class="open-dialog-button hidden-xl-only hidden-md-only hidden-lg-only" | 464 | class="open-dialog-button hidden-xl-only hidden-md-only hidden-lg-only" |
| 465 | small | 465 | small |
| 466 | @click="addTeacherDialog = true" | 466 | @click="addTeacherDialog = true" |
| 467 | > | 467 | > |
| 468 | <v-icon dark>add</v-icon> | 468 | <v-icon dark>add</v-icon> |
| 469 | </v-btn> | 469 | </v-btn> |
| 470 | <v-btn | 470 | <v-btn |
| 471 | round | 471 | round |
| 472 | class="open-dialog-button hidden-sm-only hidden-xs-only" | 472 | class="open-dialog-button hidden-sm-only hidden-xs-only" |
| 473 | dark | 473 | dark |
| 474 | @click="addTeacherDialog = true" | 474 | @click="addTeacherDialog = true" |
| 475 | > | 475 | > |
| 476 | <v-icon class="white--text pr-1" size="20">add</v-icon>Add Teacher | 476 | <v-icon class="white--text pr-1" size="20">add</v-icon>Add Teacher |
| 477 | </v-btn> | 477 | </v-btn> |
| 478 | <v-spacer></v-spacer> | 478 | <v-spacer></v-spacer> |
| 479 | <v-card-title class="body-1" v-show="show"> | 479 | <v-card-title class="body-1" v-show="show"> |
| 480 | <v-btn icon large flat @click="displaySearch"> | 480 | <v-btn icon large flat @click="displaySearch"> |
| 481 | <v-avatar size="27"> | 481 | <v-avatar size="27"> |
| 482 | <img src="/static/icon/dashboard icons-49.png" alt="icon" /> | 482 | <img src="/static/icon/search.png" alt="icon" /> |
| 483 | </v-avatar> | 483 | </v-avatar> |
| 484 | </v-btn> | 484 | </v-btn> |
| 485 | </v-card-title> | 485 | </v-card-title> |
| 486 | <v-flex md2 lg2 sm6 xs8 v-show="showSearch"> | 486 | <v-flex md2 lg2 sm6 xs8 v-show="showSearch"> |
| 487 | <v-layout> | 487 | <v-layout> |
| 488 | <v-text-field v-model="search" label="Search" prepend-inner-icon="search" color="primary"></v-text-field> | 488 | <v-text-field v-model="search" label="Search" prepend-inner-icon="search" color="primary"></v-text-field> |
| 489 | <v-icon @click="closeSearch" color="error">close</v-icon> | 489 | <v-icon @click="closeSearch" color="error">close</v-icon> |
| 490 | </v-layout> | 490 | </v-layout> |
| 491 | </v-flex> | 491 | </v-flex> |
| 492 | </v-toolbar> | 492 | </v-toolbar> |
| 493 | <v-data-table | 493 | <v-data-table |
| 494 | :headers="headers" | 494 | :headers="headers" |
| 495 | :items="desserts" | 495 | :items="desserts" |
| 496 | :pagination.sync="pagination" | 496 | :pagination.sync="pagination" |
| 497 | :search="search" | 497 | :search="search" |
| 498 | > | 498 | > |
| 499 | <template slot="items" slot-scope="props"> | 499 | <template slot="items" slot-scope="props"> |
| 500 | <tr class="tr"> | 500 | <tr class="tr"> |
| 501 | <td class="td td-row">{{ props.index + 1}}</td> | 501 | <td class="td td-row">{{ props.index + 1}}</td> |
| 502 | <td class="td td-row text-xs-center"> | 502 | <td class="td td-row text-xs-center"> |
| 503 | <v-avatar size="40"> | 503 | <v-avatar size="40"> |
| 504 | <img :src="props.item.profilePicUrl" v-if="props.item.profilePicUrl" /> | 504 | <img :src="props.item.profilePicUrl" v-if="props.item.profilePicUrl" /> |
| 505 | <img src="/static/icon/user.png" v-else-if="!props.item.profilePicUrl" /> | 505 | <img src="/static/icon/user.png" v-else-if="!props.item.profilePicUrl" /> |
| 506 | </v-avatar> | 506 | </v-avatar> |
| 507 | </td> | 507 | </td> |
| 508 | <td class="td td-row text-xs-center">{{ props.item.name}}</td> | 508 | <td class="td td-row text-xs-center">{{ props.item.name}}</td> |
| 509 | <td class="td td-row text-xs-center">{{ props.item.email }}</td> | 509 | <td class="td td-row text-xs-center">{{ props.item.email }}</td> |
| 510 | <td class="td td-row text-xs-center">{{ dates(props.item.dob) }}</td> | 510 | <td class="td td-row text-xs-center">{{ dates(props.item.dob) }}</td> |
| 511 | <td class="td td-row text-xs-center">{{ dates(props.item.joinDate)}}</td> | 511 | <td class="td td-row text-xs-center">{{ dates(props.item.joinDate)}}</td> |
| 512 | <td class="td td-row text-xs-center">{{ props.item.mobileNo }}</td> | 512 | <td class="td td-row text-xs-center">{{ props.item.mobileNo }}</td> |
| 513 | <td class="td td-row text-xs-center"> | 513 | <td class="td td-row text-xs-center"> |
| 514 | <v-switch | 514 | <v-switch |
| 515 | class="pl-3" | 515 | class="pl-3" |
| 516 | v-model="props.item.status" | 516 | v-model="props.item.status" |
| 517 | @change="suspendStatus(props.item.status,props.item._id)" | 517 | @change="suspendStatus(props.item.status,props.item._id)" |
| 518 | ></v-switch> | 518 | ></v-switch> |
| 519 | </td> | 519 | </td> |
| 520 | <td class="text-xs-center td td-row"> | 520 | <td class="text-xs-center td td-row"> |
| 521 | <span> | 521 | <span> |
| 522 | <v-tooltip top> | 522 | <v-tooltip top> |
| 523 | <img | 523 | <img |
| 524 | slot="activator" | 524 | slot="activator" |
| 525 | style="cursor:pointer; width:25px; height:25px; " | 525 | style="cursor:pointer; width:25px; height:25px; " |
| 526 | class="mr-3" | 526 | class="mr-3" |
| 527 | @click="profile(props.item)" | 527 | @click="profile(props.item)" |
| 528 | src="/static/icon/dashboard icons-47.png" | 528 | src="/static/icon/view.png" |
| 529 | /> | 529 | /> |
| 530 | <span>View</span> | 530 | <span>View</span> |
| 531 | </v-tooltip> | 531 | </v-tooltip> |
| 532 | <v-tooltip top> | 532 | <v-tooltip top> |
| 533 | <img | 533 | <img |
| 534 | slot="activator" | 534 | slot="activator" |
| 535 | style="cursor:pointer; width:20px; height:18px; " | 535 | style="cursor:pointer; width:20px; height:18px; " |
| 536 | class="mr-3" | 536 | class="mr-3" |
| 537 | @click="editItem(props.item)" | 537 | @click="editItem(props.item)" |
| 538 | src="/static/icon/dashboard icons-50.png" | 538 | src="/static/icon/edit.png" |
| 539 | /> | 539 | /> |
| 540 | <span>Edit</span> | 540 | <span>Edit</span> |
| 541 | </v-tooltip> | 541 | </v-tooltip> |
| 542 | <v-tooltip top> | 542 | <v-tooltip top> |
| 543 | <img | 543 | <img |
| 544 | slot="activator" | 544 | slot="activator" |
| 545 | style="cursor:pointer; width:20px; height:20px; " | 545 | style="cursor:pointer; width:20px; height:20px; " |
| 546 | @click="deleteItem(props.item)" | 546 | @click="deleteItem(props.item)" |
| 547 | src="/static/icon/dashboard icons-51.png" | 547 | src="/static/icon/delete.png" |
| 548 | class="mr-3" | 548 | class="mr-3" |
| 549 | /> | 549 | /> |
| 550 | <span>Delete</span> | 550 | <span>Delete</span> |
| 551 | </v-tooltip> | 551 | </v-tooltip> |
| 552 | </span> | 552 | </span> |
| 553 | </td> | 553 | </td> |
| 554 | </tr> | 554 | </tr> |
| 555 | </template> | 555 | </template> |
| 556 | <v-alert | 556 | <v-alert |
| 557 | slot="no-results" | 557 | slot="no-results" |
| 558 | :value="true" | 558 | :value="true" |
| 559 | color="error" | 559 | color="error" |
| 560 | icon="warning" | 560 | icon="warning" |
| 561 | >Your search for "{{ search }}" found no results.</v-alert> | 561 | >Your search for "{{ search }}" found no results.</v-alert> |
| 562 | </v-data-table> | 562 | </v-data-table> |
| 563 | 563 | ||
| 564 | <!-- ****** Add Teachers Data****** --> | 564 | <!-- ****** Add Teachers Data****** --> |
| 565 | <v-dialog v-model="addTeacherDialog" max-width="1160"> | 565 | <v-dialog v-model="addTeacherDialog" max-width="1160"> |
| 566 | <v-card flat class="card-style pa-2" dark> | 566 | <v-card flat class="card-style pa-2" dark> |
| 567 | <v-layout> | 567 | <v-layout> |
| 568 | <v-flex xs12 class="pa-0"> | 568 | <v-flex xs12 class="pa-0"> |
| 569 | <label class="title text-xs-center">Add Teacher</label> | 569 | <label class="title text-xs-center">Add Teacher</label> |
| 570 | <v-icon size="24" class="right" @click="addTeacherDialog = false">cancel</v-icon> | 570 | <v-icon size="24" class="right" @click="addTeacherDialog = false">cancel</v-icon> |
| 571 | </v-flex> | 571 | </v-flex> |
| 572 | </v-layout> | 572 | </v-layout> |
| 573 | <v-form ref="form" v-model="valid" lazy-validation> | 573 | <v-form ref="form" v-model="valid" lazy-validation> |
| 574 | <v-container fluid> | 574 | <v-container fluid> |
| 575 | <v-layout> | 575 | <v-layout> |
| 576 | <v-flex xs12 class="text-xs-center text-sm-center text-md-center text-lg-center my-4"> | 576 | <v-flex xs12 class="text-xs-center text-sm-center text-md-center text-lg-center my-4"> |
| 577 | <v-avatar size="120px"> | 577 | <v-avatar size="120px"> |
| 578 | <img src="/static/icon/user.png" v-if="!imageUrl" /> | 578 | <img src="/static/icon/user.png" v-if="!imageUrl" /> |
| 579 | </v-avatar> | 579 | </v-avatar> |
| 580 | <img | 580 | <img |
| 581 | :src="imageUrl" | 581 | :src="imageUrl" |
| 582 | height="150" | 582 | height="150" |
| 583 | v-if="imageUrl" | 583 | v-if="imageUrl" |
| 584 | style="border-radius:50%; width:150px" | 584 | style="border-radius:50%; width:150px" |
| 585 | /> | 585 | /> |
| 586 | </v-flex> | 586 | </v-flex> |
| 587 | </v-layout> | 587 | </v-layout> |
| 588 | <v-layout wrap> | 588 | <v-layout wrap> |
| 589 | <v-flex xs12 sm6> | 589 | <v-flex xs12 sm6> |
| 590 | <v-layout> | 590 | <v-layout> |
| 591 | <v-flex xs4 class="pt-4 subheading"> | 591 | <v-flex xs4 class="pt-4 subheading"> |
| 592 | <label class="right hidden-sm-only hidden-xs-only">Full Name:</label> | 592 | <label class="right hidden-sm-only hidden-xs-only">Full Name:</label> |
| 593 | <label class="right hidden-lg-only hidden-xl-only hidden-md-only">Full Name</label> | 593 | <label class="right hidden-lg-only hidden-xl-only hidden-md-only">Full Name</label> |
| 594 | </v-flex> | 594 | </v-flex> |
| 595 | <v-flex xs8 class="ml-3"> | 595 | <v-flex xs8 class="ml-3"> |
| 596 | <v-text-field | 596 | <v-text-field |
| 597 | v-model="addTeachers.name" | 597 | v-model="addTeachers.name" |
| 598 | placeholder="fill your full Name" | 598 | placeholder="fill your full Name" |
| 599 | name="name" | 599 | name="name" |
| 600 | type="text" | 600 | type="text" |
| 601 | :rules="nameRules" | 601 | :rules="nameRules" |
| 602 | required | 602 | required |
| 603 | ></v-text-field> | 603 | ></v-text-field> |
| 604 | </v-flex> | 604 | </v-flex> |
| 605 | </v-layout> | 605 | </v-layout> |
| 606 | </v-flex> | 606 | </v-flex> |
| 607 | <v-flex xs12 sm6> | 607 | <v-flex xs12 sm6> |
| 608 | <v-layout> | 608 | <v-layout> |
| 609 | <v-flex xs4 class="pt-4 subheading"> | 609 | <v-flex xs4 class="pt-4 subheading"> |
| 610 | <label class="right">Email ID:</label> | 610 | <label class="right">Email ID:</label> |
| 611 | </v-flex> | 611 | </v-flex> |
| 612 | <v-flex xs8 class="ml-3"> | 612 | <v-flex xs8 class="ml-3"> |
| 613 | <v-text-field | 613 | <v-text-field |
| 614 | placeholder="fill your email" | 614 | placeholder="fill your email" |
| 615 | v-model="addTeachers.email" | 615 | v-model="addTeachers.email" |
| 616 | type="text" | 616 | type="text" |
| 617 | name="email" | 617 | name="email" |
| 618 | required | 618 | required |
| 619 | ></v-text-field> | 619 | ></v-text-field> |
| 620 | </v-flex> | 620 | </v-flex> |
| 621 | </v-layout> | 621 | </v-layout> |
| 622 | </v-flex> | 622 | </v-flex> |
| 623 | </v-layout> | 623 | </v-layout> |
| 624 | <v-layout wrap> | 624 | <v-layout wrap> |
| 625 | <v-flex xs12 sm6> | 625 | <v-flex xs12 sm6> |
| 626 | <v-layout> | 626 | <v-layout> |
| 627 | <v-flex xs4 sm4 class="pt-4 subheading"> | 627 | <v-flex xs4 sm4 class="pt-4 subheading"> |
| 628 | <label class="right hidden-sm-only hidden-xs-only">Date of Birth:</label> | 628 | <label class="right hidden-sm-only hidden-xs-only">Date of Birth:</label> |
| 629 | <label class="right hidden-lg-only hidden-xl-only hidden-md-only">D.O.B:</label> | 629 | <label class="right hidden-lg-only hidden-xl-only hidden-md-only">D.O.B:</label> |
| 630 | </v-flex> | 630 | </v-flex> |
| 631 | <v-flex xs8 class="ml-3"> | 631 | <v-flex xs8 class="ml-3"> |
| 632 | <v-menu | 632 | <v-menu |
| 633 | ref="menu" | 633 | ref="menu" |
| 634 | :close-on-content-click="false" | 634 | :close-on-content-click="false" |
| 635 | v-model="menu" | 635 | v-model="menu" |
| 636 | :nudge-right="40" | 636 | :nudge-right="40" |
| 637 | lazy | 637 | lazy |
| 638 | transition="scale-transition" | 638 | transition="scale-transition" |
| 639 | offset-y | 639 | offset-y |
| 640 | full-width | 640 | full-width |
| 641 | min-width="290px" | 641 | min-width="290px" |
| 642 | > | 642 | > |
| 643 | <v-text-field | 643 | <v-text-field |
| 644 | slot="activator" | 644 | slot="activator" |
| 645 | :rules="dateRules" | 645 | :rules="dateRules" |
| 646 | v-model="addTeachers.date" | 646 | v-model="addTeachers.date" |
| 647 | placeholder="Select date" | 647 | placeholder="Select date" |
| 648 | ></v-text-field> | 648 | ></v-text-field> |
| 649 | <v-date-picker | 649 | <v-date-picker |
| 650 | ref="picker" | 650 | ref="picker" |
| 651 | v-model="addTeachers.date" | 651 | v-model="addTeachers.date" |
| 652 | :max="new Date().toISOString().substr(0, 10)" | 652 | :max="new Date().toISOString().substr(0, 10)" |
| 653 | min="1950-01-01" | 653 | min="1950-01-01" |
| 654 | @input="menu = false" | 654 | @input="menu = false" |
| 655 | ></v-date-picker> | 655 | ></v-date-picker> |
| 656 | </v-menu> | 656 | </v-menu> |
| 657 | </v-flex> | 657 | </v-flex> |
| 658 | </v-layout> | 658 | </v-layout> |
| 659 | </v-flex> | 659 | </v-flex> |
| 660 | <v-flex xs12 sm6> | 660 | <v-flex xs12 sm6> |
| 661 | <v-layout> | 661 | <v-layout> |
| 662 | <v-flex xs4 class="pt-4 subheading"> | 662 | <v-flex xs4 class="pt-4 subheading"> |
| 663 | <label class="right">City:</label> | 663 | <label class="right">City:</label> |
| 664 | </v-flex> | 664 | </v-flex> |
| 665 | <v-flex xs8 class="ml-3"> | 665 | <v-flex xs8 class="ml-3"> |
| 666 | <v-text-field | 666 | <v-text-field |
| 667 | v-model="addTeachers.city" | 667 | v-model="addTeachers.city" |
| 668 | placeholder="fill your City Name" | 668 | placeholder="fill your City Name" |
| 669 | name="City" | 669 | name="City" |
| 670 | type="text" | 670 | type="text" |
| 671 | :rules="cityRules" | 671 | :rules="cityRules" |
| 672 | required | 672 | required |
| 673 | ></v-text-field> | 673 | ></v-text-field> |
| 674 | </v-flex> | 674 | </v-flex> |
| 675 | </v-layout> | 675 | </v-layout> |
| 676 | </v-flex> | 676 | </v-flex> |
| 677 | </v-layout> | 677 | </v-layout> |
| 678 | <v-layout wrap> | 678 | <v-layout wrap> |
| 679 | <v-flex xs12 sm6> | 679 | <v-flex xs12 sm6> |
| 680 | <v-layout> | 680 | <v-layout> |
| 681 | <v-flex xs4 class="pt-4 subheading"> | 681 | <v-flex xs4 class="pt-4 subheading"> |
| 682 | <label class="right">State:</label> | 682 | <label class="right">State:</label> |
| 683 | </v-flex> | 683 | </v-flex> |
| 684 | <v-flex xs8 class="ml-3"> | 684 | <v-flex xs8 class="ml-3"> |
| 685 | <v-text-field | 685 | <v-text-field |
| 686 | v-model="addTeachers.state" | 686 | v-model="addTeachers.state" |
| 687 | placeholder="fill your State Name" | 687 | placeholder="fill your State Name" |
| 688 | name="state" | 688 | name="state" |
| 689 | type="text" | 689 | type="text" |
| 690 | :rules="stateRules" | 690 | :rules="stateRules" |
| 691 | required | 691 | required |
| 692 | ></v-text-field> | 692 | ></v-text-field> |
| 693 | </v-flex> | 693 | </v-flex> |
| 694 | </v-layout> | 694 | </v-layout> |
| 695 | </v-flex> | 695 | </v-flex> |
| 696 | <v-flex xs12 sm6> | 696 | <v-flex xs12 sm6> |
| 697 | <v-layout> | 697 | <v-layout> |
| 698 | <v-flex xs4 class="pt-4 subheading"> | 698 | <v-flex xs4 class="pt-4 subheading"> |
| 699 | <label class="right">PinCode:</label> | 699 | <label class="right">PinCode:</label> |
| 700 | </v-flex> | 700 | </v-flex> |
| 701 | <v-flex xs8 class="ml-3"> | 701 | <v-flex xs8 class="ml-3"> |
| 702 | <v-text-field | 702 | <v-text-field |
| 703 | v-model="addTeachers.pincode" | 703 | v-model="addTeachers.pincode" |
| 704 | placeholder="fill your pincode" | 704 | placeholder="fill your pincode" |
| 705 | name="pincode" | 705 | name="pincode" |
| 706 | type="number" | 706 | type="number" |
| 707 | :rules="pincode" | 707 | :rules="pincode" |
| 708 | required | 708 | required |
| 709 | ></v-text-field> | 709 | ></v-text-field> |
| 710 | </v-flex> | 710 | </v-flex> |
| 711 | </v-layout> | 711 | </v-layout> |
| 712 | </v-flex> | 712 | </v-flex> |
| 713 | </v-layout> | 713 | </v-layout> |
| 714 | <v-layout wrap> | 714 | <v-layout wrap> |
| 715 | <v-flex xs12 sm6> | 715 | <v-flex xs12 sm6> |
| 716 | <v-layout> | 716 | <v-layout> |
| 717 | <v-flex xs4 class="pt-4 subheading"> | 717 | <v-flex xs4 class="pt-4 subheading"> |
| 718 | <label class="right hidden-xs-only hidden-sm-only">Mobile No:</label> | 718 | <label class="right hidden-xs-only hidden-sm-only">Mobile No:</label> |
| 719 | <label class="right hidden-lg-only hidden-md-only hidden-xl-only">Mobile:</label> | 719 | <label class="right hidden-lg-only hidden-md-only hidden-xl-only">Mobile:</label> |
| 720 | </v-flex> | 720 | </v-flex> |
| 721 | <v-flex xs8 class="ml-3"> | 721 | <v-flex xs8 class="ml-3"> |
| 722 | <v-text-field | 722 | <v-text-field |
| 723 | v-model="addTeachers.mobileNo" | 723 | v-model="addTeachers.mobileNo" |
| 724 | placeholder="fill your Mobile No." | 724 | placeholder="fill your Mobile No." |
| 725 | name="mobileNo" | 725 | name="mobileNo" |
| 726 | type="number" | 726 | type="number" |
| 727 | :rules="mobileNoRules" | 727 | :rules="mobileNoRules" |
| 728 | required | 728 | required |
| 729 | ></v-text-field> | 729 | ></v-text-field> |
| 730 | </v-flex> | 730 | </v-flex> |
| 731 | </v-layout> | 731 | </v-layout> |
| 732 | </v-flex> | 732 | </v-flex> |
| 733 | <v-flex xs12 sm6> | 733 | <v-flex xs12 sm6> |
| 734 | <v-layout> | 734 | <v-layout> |
| 735 | <v-flex xs4 class="pt-4 subheading"> | 735 | <v-flex xs4 class="pt-4 subheading"> |
| 736 | <label class="right hidden-xs-only hidden-sm-only">Select Country:</label> | 736 | <label class="right hidden-xs-only hidden-sm-only">Select Country:</label> |
| 737 | <label class="right hidden-lg-only hidden-md-only hidden-xl-only">Country:</label> | 737 | <label class="right hidden-lg-only hidden-md-only hidden-xl-only">Country:</label> |
| 738 | </v-flex> | 738 | </v-flex> |
| 739 | <v-flex xs8 class="ml-3"> | 739 | <v-flex xs8 class="ml-3"> |
| 740 | <v-autocomplete | 740 | <v-autocomplete |
| 741 | v-model="addTeachers.country" | 741 | v-model="addTeachers.country" |
| 742 | :rules="country" | 742 | :rules="country" |
| 743 | :items="countries" | 743 | :items="countries" |
| 744 | placeholder="Select Country Name" | 744 | placeholder="Select Country Name" |
| 745 | required | 745 | required |
| 746 | ></v-autocomplete> | 746 | ></v-autocomplete> |
| 747 | </v-flex> | 747 | </v-flex> |
| 748 | </v-layout> | 748 | </v-layout> |
| 749 | </v-flex> | 749 | </v-flex> |
| 750 | </v-layout> | 750 | </v-layout> |
| 751 | <v-layout wrap> | 751 | <v-layout wrap> |
| 752 | <v-flex xs12 sm6> | 752 | <v-flex xs12 sm6> |
| 753 | <v-layout> | 753 | <v-layout> |
| 754 | <v-flex xs4 class="pt-4 subheading"> | 754 | <v-flex xs4 class="pt-4 subheading"> |
| 755 | <label class="right">Join Date:</label> | 755 | <label class="right">Join Date:</label> |
| 756 | </v-flex> | 756 | </v-flex> |
| 757 | <v-flex xs8 class="ml-3"> | 757 | <v-flex xs8 class="ml-3"> |
| 758 | <v-menu | 758 | <v-menu |
| 759 | ref="menu1" | 759 | ref="menu1" |
| 760 | :close-on-content-click="false" | 760 | :close-on-content-click="false" |
| 761 | v-model="menu1" | 761 | v-model="menu1" |
| 762 | :nudge-right="40" | 762 | :nudge-right="40" |
| 763 | lazy | 763 | lazy |
| 764 | transition="scale-transition" | 764 | transition="scale-transition" |
| 765 | offset-y | 765 | offset-y |
| 766 | full-width | 766 | full-width |
| 767 | min-width="290px" | 767 | min-width="290px" |
| 768 | > | 768 | > |
| 769 | <v-text-field | 769 | <v-text-field |
| 770 | slot="activator" | 770 | slot="activator" |
| 771 | :rules="joinDateRules" | 771 | :rules="joinDateRules" |
| 772 | v-model="addTeachers.joinDate" | 772 | v-model="addTeachers.joinDate" |
| 773 | placeholder="Select date" | 773 | placeholder="Select date" |
| 774 | ></v-text-field> | 774 | ></v-text-field> |
| 775 | <v-date-picker | 775 | <v-date-picker |
| 776 | ref="picker" | 776 | ref="picker" |
| 777 | v-model="addTeachers.joinDate" | 777 | v-model="addTeachers.joinDate" |
| 778 | :max="new Date().toISOString().substr(0, 10)" | 778 | :max="new Date().toISOString().substr(0, 10)" |
| 779 | min="1950-01-01" | 779 | min="1950-01-01" |
| 780 | @input="menu1 = false" | 780 | @input="menu1 = false" |
| 781 | ></v-date-picker> | 781 | ></v-date-picker> |
| 782 | </v-menu> | 782 | </v-menu> |
| 783 | </v-flex> | 783 | </v-flex> |
| 784 | </v-layout> | 784 | </v-layout> |
| 785 | </v-flex> | 785 | </v-flex> |
| 786 | <v-flex xs12 sm6> | 786 | <v-flex xs12 sm6> |
| 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">Uplaod Image:</label> | 789 | <label class="right hidden-xs-only hidden-sm-only">Uplaod Image:</label> |
| 790 | <label class="right hidden-lg-only hidden-md-only hidden-xl-only">Uplaod:</label> | 790 | <label class="right hidden-lg-only hidden-md-only hidden-xl-only">Uplaod:</label> |
| 791 | </v-flex> | 791 | </v-flex> |
| 792 | <v-flex xs8 class="ml-3"> | 792 | <v-flex xs8 class="ml-3"> |
| 793 | <v-text-field | 793 | <v-text-field |
| 794 | label="Select Image" | 794 | label="Select Image" |
| 795 | @click="pickFile" | 795 | @click="pickFile" |
| 796 | v-model="imageName" | 796 | v-model="imageName" |
| 797 | append-icon="attach_file" | 797 | append-icon="attach_file" |
| 798 | ></v-text-field> | 798 | ></v-text-field> |
| 799 | <input | 799 | <input |
| 800 | type="file" | 800 | type="file" |
| 801 | style="display:none" | 801 | style="display:none" |
| 802 | ref="image" | 802 | ref="image" |
| 803 | accept="image/*" | 803 | accept="image/*" |
| 804 | @change="onFilePicked" | 804 | @change="onFilePicked" |
| 805 | /> | 805 | /> |
| 806 | </v-flex> | 806 | </v-flex> |
| 807 | </v-layout> | 807 | </v-layout> |
| 808 | </v-flex> | 808 | </v-flex> |
| 809 | </v-layout> | 809 | </v-layout> |
| 810 | <v-layout class="hidden-xs-only hidden-sm-only"> | 810 | <v-layout class="hidden-xs-only hidden-sm-only"> |
| 811 | <v-flex xs12 sm6> | 811 | <v-flex xs12 sm6> |
| 812 | <v-layout> | 812 | <v-layout> |
| 813 | <v-flex xs4 md4 class="pt-4 subheading"> | 813 | <v-flex xs4 md4 class="pt-4 subheading"> |
| 814 | <label class="right">Present Address:</label> | 814 | <label class="right">Present Address:</label> |
| 815 | </v-flex> | 815 | </v-flex> |
| 816 | <v-flex xs8 md8 class="ml-3"> | 816 | <v-flex xs8 md8 class="ml-3"> |
| 817 | <v-text-field | 817 | <v-text-field |
| 818 | name="input-4-3" | 818 | name="input-4-3" |
| 819 | v-model="addTeachers.presentAddress" | 819 | v-model="addTeachers.presentAddress" |
| 820 | :rules="presentAddress" | 820 | :rules="presentAddress" |
| 821 | placeholder="fill Your present Address" | 821 | placeholder="fill Your present Address" |
| 822 | @keyup="copyData" | 822 | @keyup="copyData" |
| 823 | ></v-text-field> | 823 | ></v-text-field> |
| 824 | </v-flex> | 824 | </v-flex> |
| 825 | </v-layout> | 825 | </v-layout> |
| 826 | </v-flex> | 826 | </v-flex> |
| 827 | <v-flex xs12 sm6> | 827 | <v-flex xs12 sm6> |
| 828 | <v-layout> | 828 | <v-layout> |
| 829 | <v-flex xs4 md4 class="pt-4 subheading addressForm"> | 829 | <v-flex xs4 md4 class="pt-4 subheading addressForm"> |
| 830 | <label class="right">Permanent Address:</label> | 830 | <label class="right">Permanent Address:</label> |
| 831 | </v-flex> | 831 | </v-flex> |
| 832 | <v-flex xs12 md8 class="ml-3"> | 832 | <v-flex xs12 md8 class="ml-3"> |
| 833 | <v-switch | 833 | <v-switch |
| 834 | v-model="addTeachers.permanentAddress" | 834 | v-model="addTeachers.permanentAddress" |
| 835 | label="Select Permanent Address" | 835 | label="Select Permanent Address" |
| 836 | :value="addTeachers.presentAddress" | 836 | :value="addTeachers.presentAddress" |
| 837 | ></v-switch> | 837 | ></v-switch> |
| 838 | </v-flex> | 838 | </v-flex> |
| 839 | </v-layout> | 839 | </v-layout> |
| 840 | </v-flex> | 840 | </v-flex> |
| 841 | </v-layout> | 841 | </v-layout> |
| 842 | <v-layout class="hidden-xs-only hidden-sm-only"> | 842 | <v-layout class="hidden-xs-only hidden-sm-only"> |
| 843 | <v-flex xs12 sm6> | 843 | <v-flex xs12 sm6> |
| 844 | <v-layout> | 844 | <v-layout> |
| 845 | <v-flex xs4 md4 class="pt-4 subheading addressForm"> | 845 | <v-flex xs4 md4 class="pt-4 subheading addressForm"> |
| 846 | <label class="right">Permanent Address:</label> | 846 | <label class="right">Permanent Address:</label> |
| 847 | </v-flex> | 847 | </v-flex> |
| 848 | <v-flex xs12 md8 class="ml-3"> | 848 | <v-flex xs12 md8 class="ml-3"> |
| 849 | <v-text-field | 849 | <v-text-field |
| 850 | name="input-4-3" | 850 | name="input-4-3" |
| 851 | v-model="addTeachers.permanentAddress" | 851 | v-model="addTeachers.permanentAddress" |
| 852 | :rules="permanentAddress" | 852 | :rules="permanentAddress" |
| 853 | placeholder="fill Your Permanent Address" | 853 | placeholder="fill Your Permanent Address" |
| 854 | required | 854 | required |
| 855 | ></v-text-field> | 855 | ></v-text-field> |
| 856 | </v-flex> | 856 | </v-flex> |
| 857 | </v-layout> | 857 | </v-layout> |
| 858 | </v-flex> | 858 | </v-flex> |
| 859 | </v-layout> | 859 | </v-layout> |
| 860 | <v-layout class="hidden-lg-only hidden-md-only hidden-xl-only" wrap> | 860 | <v-layout class="hidden-lg-only hidden-md-only hidden-xl-only" wrap> |
| 861 | <v-flex xs12 sm12> | 861 | <v-flex xs12 sm12> |
| 862 | <v-layout> | 862 | <v-layout> |
| 863 | <v-flex xs12 sm12 class="pt-4 subheading text-xs-center"> | 863 | <v-flex xs12 sm12 class="pt-4 subheading text-xs-center"> |
| 864 | <label class>Present Addres:</label> | 864 | <label class>Present Addres:</label> |
| 865 | </v-flex> | 865 | </v-flex> |
| 866 | </v-layout> | 866 | </v-layout> |
| 867 | <v-layout> | 867 | <v-layout> |
| 868 | <v-flex xs12 sm12> | 868 | <v-flex xs12 sm12> |
| 869 | <v-textarea | 869 | <v-textarea |
| 870 | name="input-4-3" | 870 | name="input-4-3" |
| 871 | v-model="addTeachers.presentAddress" | 871 | v-model="addTeachers.presentAddress" |
| 872 | :rules="presentAddress" | 872 | :rules="presentAddress" |
| 873 | placeholder="fill Your present Address" | 873 | placeholder="fill Your present Address" |
| 874 | required | 874 | required |
| 875 | ></v-textarea> | 875 | ></v-textarea> |
| 876 | </v-flex> | 876 | </v-flex> |
| 877 | </v-layout> | 877 | </v-layout> |
| 878 | </v-flex> | 878 | </v-flex> |
| 879 | <v-flex xs12 sm12> | 879 | <v-flex xs12 sm12> |
| 880 | <v-layout> | 880 | <v-layout> |
| 881 | <v-flex xs12 sm12 class="pt-4 pr-4 subheading text-xs-center addressForm"> | 881 | <v-flex xs12 sm12 class="pt-4 pr-4 subheading text-xs-center addressForm"> |
| 882 | <label>Permanent Address:</label> | 882 | <label>Permanent Address:</label> |
| 883 | </v-flex> | 883 | </v-flex> |
| 884 | </v-layout> | 884 | </v-layout> |
| 885 | <v-layout> | 885 | <v-layout> |
| 886 | <v-flex xs12 sm12> | 886 | <v-flex xs12 sm12> |
| 887 | <v-textarea | 887 | <v-textarea |
| 888 | name="input-4-3" | 888 | name="input-4-3" |
| 889 | v-model="addTeachers.permanentAddress" | 889 | v-model="addTeachers.permanentAddress" |
| 890 | :rules="permanentAddress" | 890 | :rules="permanentAddress" |
| 891 | placeholder="fill Your Permanent Address" | 891 | placeholder="fill Your Permanent Address" |
| 892 | required | 892 | required |
| 893 | ></v-textarea> | 893 | ></v-textarea> |
| 894 | </v-flex> | 894 | </v-flex> |
| 895 | </v-layout> | 895 | </v-layout> |
| 896 | </v-flex> | 896 | </v-flex> |
| 897 | </v-layout> | 897 | </v-layout> |
| 898 | <v-layout> | 898 | <v-layout> |
| 899 | <v-flex xs12 sm12> | 899 | <v-flex xs12 sm12> |
| 900 | <v-layout class="right"> | 900 | <v-layout class="right"> |
| 901 | <v-btn @click="clear" round dark class="clear-button">Clear</v-btn> | 901 | <v-btn @click="clear" round dark class="clear-button">Clear</v-btn> |
| 902 | <v-btn @click="submit" round dark :loading="loading" class="add-button">Add</v-btn> | 902 | <v-btn @click="submit" round dark :loading="loading" class="add-button">Add</v-btn> |
| 903 | </v-layout> | 903 | </v-layout> |
| 904 | </v-flex> | 904 | </v-flex> |
| 905 | </v-layout> | 905 | </v-layout> |
| 906 | </v-container> | 906 | </v-container> |
| 907 | </v-form> | 907 | </v-form> |
| 908 | </v-card> | 908 | </v-card> |
| 909 | </v-dialog> | 909 | </v-dialog> |
| 910 | <div class="loader" v-if="showLoader"> | 910 | <div class="loader" v-if="showLoader"> |
| 911 | <v-progress-circular indeterminate color="white"></v-progress-circular> | 911 | <v-progress-circular indeterminate color="white"></v-progress-circular> |
| 912 | </div> | 912 | </div> |
| 913 | </v-container> | 913 | </v-container> |
| 914 | </template> | 914 | </template> |
| 915 | 915 | ||
| 916 | <script> | 916 | <script> |
| 917 | import http from "@/Services/http.js"; | 917 | import http from "@/Services/http.js"; |
| 918 | import moment from "moment"; | 918 | import moment from "moment"; |
| 919 | import countryList from "@/script/country.js"; | 919 | import countryList from "@/script/country.js"; |
| 920 | 920 | ||
| 921 | export default { | 921 | export default { |
| 922 | data: () => ({ | 922 | data: () => ({ |
| 923 | component: "report-generate", | 923 | component: "report-generate", |
| 924 | snackbar: false, | 924 | snackbar: false, |
| 925 | y: "top", | 925 | y: "top", |
| 926 | x: "right", | 926 | x: "right", |
| 927 | mode: "", | 927 | mode: "", |
| 928 | timeout: 3000, | 928 | timeout: 3000, |
| 929 | text: "", | 929 | text: "", |
| 930 | color: "", | 930 | color: "", |
| 931 | showLoader: false, | 931 | showLoader: false, |
| 932 | loading: false, | 932 | loading: false, |
| 933 | date: null, | 933 | date: null, |
| 934 | search: "", | 934 | search: "", |
| 935 | show: true, | 935 | show: true, |
| 936 | showSearch: false, | 936 | showSearch: false, |
| 937 | menu: false, | 937 | menu: false, |
| 938 | menu1: false, | 938 | menu1: false, |
| 939 | menu2: false, | 939 | menu2: false, |
| 940 | menu3: false, | 940 | menu3: false, |
| 941 | editTeacherDialog: false, | 941 | editTeacherDialog: false, |
| 942 | viewTeacherProfileDialog: false, | 942 | viewTeacherProfileDialog: false, |
| 943 | addTeacherDialog: false, | 943 | addTeacherDialog: false, |
| 944 | valid: true, | 944 | valid: true, |
| 945 | pagination: { | 945 | pagination: { |
| 946 | rowsPerPage: 10 | 946 | rowsPerPage: 10 |
| 947 | }, | 947 | }, |
| 948 | imageData: {}, | 948 | imageData: {}, |
| 949 | imageName: "", | 949 | imageName: "", |
| 950 | imageUrl: "", | 950 | imageUrl: "", |
| 951 | imageFile: "", | 951 | imageFile: "", |
| 952 | nameRules: [v => !!v || " Full Name is required"], | 952 | nameRules: [v => !!v || " Full Name is required"], |
| 953 | dateRules: [v => !!v || " DOB is required"], | 953 | dateRules: [v => !!v || " DOB is required"], |
| 954 | cityRules: [v => !!v || " City Name is required"], | 954 | cityRules: [v => !!v || " City Name is required"], |
| 955 | pincode: [v => !!v || " Pincode is required"], | 955 | pincode: [v => !!v || " Pincode is required"], |
| 956 | country: [v => !!v || " Country Name is required"], | 956 | country: [v => !!v || " Country Name is required"], |
| 957 | permanentAddress: [v => !!v || " Permanent Address is required"], | 957 | permanentAddress: [v => !!v || " Permanent Address is required"], |
| 958 | presentAddress: [v => !!v || " Present Address is required"], | 958 | presentAddress: [v => !!v || " Present Address is required"], |
| 959 | mobileNoRules: [v => !!v || "Mobile Number is required"], | 959 | mobileNoRules: [v => !!v || "Mobile Number is required"], |
| 960 | stateRules: [v => !!v || "State Name is required"], | 960 | stateRules: [v => !!v || "State Name is required"], |
| 961 | joinDateRules: [v => !!v || " Join Date is required"], | 961 | joinDateRules: [v => !!v || " Join Date is required"], |
| 962 | errorMessages: "", | 962 | errorMessages: "", |
| 963 | switch1: true, | 963 | switch1: true, |
| 964 | countries: [], | 964 | countries: [], |
| 965 | headers: [ | 965 | headers: [ |
| 966 | { | 966 | { |
| 967 | text: "No", | 967 | text: "No", |
| 968 | align: "", | 968 | align: "", |
| 969 | sortable: false, | 969 | sortable: false, |
| 970 | value: "No" | 970 | value: "No" |
| 971 | }, | 971 | }, |
| 972 | { | 972 | { |
| 973 | text: "Profile Pic", | 973 | text: "Profile Pic", |
| 974 | value: "profilePicUrl", | 974 | value: "profilePicUrl", |
| 975 | sortable: false, | 975 | sortable: false, |
| 976 | align: "center" | 976 | align: "center" |
| 977 | }, | 977 | }, |
| 978 | { text: "Name", value: "name", sortable: false, align: "center" }, | 978 | { text: "Name", value: "name", sortable: false, align: "center" }, |
| 979 | { text: "Email", value: "email", sortable: false, align: "center" }, | 979 | { text: "Email", value: "email", sortable: false, align: "center" }, |
| 980 | { text: "DOB", value: "dob", sortable: false, align: "center" }, | 980 | { text: "DOB", value: "dob", sortable: false, align: "center" }, |
| 981 | { | 981 | { |
| 982 | text: "Join Date", | 982 | text: "Join Date", |
| 983 | value: "joinDate", | 983 | value: "joinDate", |
| 984 | sortable: false, | 984 | sortable: false, |
| 985 | align: "center" | 985 | align: "center" |
| 986 | }, | 986 | }, |
| 987 | { | 987 | { |
| 988 | text: "Mobile No", | 988 | text: "Mobile No", |
| 989 | value: "mobileNo", | 989 | value: "mobileNo", |
| 990 | sortable: false, | 990 | sortable: false, |
| 991 | align: "center" | 991 | align: "center" |
| 992 | }, | 992 | }, |
| 993 | { | 993 | { |
| 994 | text: "Status", | 994 | text: "Status", |
| 995 | value: "status", | 995 | value: "status", |
| 996 | sortable: false, | 996 | sortable: false, |
| 997 | align: "center" | 997 | align: "center" |
| 998 | }, | 998 | }, |
| 999 | { text: "Action", value: "", sortable: false, align: "center" } | 999 | { text: "Action", value: "", sortable: false, align: "center" } |
| 1000 | ], | 1000 | ], |
| 1001 | desserts: [], | 1001 | desserts: [], |
| 1002 | editedIndex: -1, | 1002 | editedIndex: -1, |
| 1003 | upload: "", | 1003 | upload: "", |
| 1004 | editedItem: { | 1004 | editedItem: { |
| 1005 | role: "TEACHER", | 1005 | role: "TEACHER", |
| 1006 | name: "", | 1006 | name: "", |
| 1007 | email: "", | 1007 | email: "", |
| 1008 | date: null, | 1008 | date: null, |
| 1009 | city: "", | 1009 | city: "", |
| 1010 | pincode: "", | 1010 | pincode: "", |
| 1011 | country: "", | 1011 | country: "", |
| 1012 | permanentAddress: "", | 1012 | permanentAddress: "", |
| 1013 | presentAddress: "", | 1013 | presentAddress: "", |
| 1014 | mobileNo: "", | 1014 | mobileNo: "", |
| 1015 | state: "", | 1015 | state: "", |
| 1016 | joinDate: null | 1016 | joinDate: null |
| 1017 | }, | 1017 | }, |
| 1018 | addTeachers: { | 1018 | addTeachers: { |
| 1019 | role: "TEACHER", | 1019 | role: "TEACHER", |
| 1020 | name: "", | 1020 | name: "", |
| 1021 | email: "", | 1021 | email: "", |
| 1022 | date: null, | 1022 | date: null, |
| 1023 | city: "", | 1023 | city: "", |
| 1024 | pincode: "", | 1024 | pincode: "", |
| 1025 | country: "", | 1025 | country: "", |
| 1026 | permanentAddress: "", | 1026 | permanentAddress: "", |
| 1027 | presentAddress: "", | 1027 | presentAddress: "", |
| 1028 | mobileNo: "", | 1028 | mobileNo: "", |
| 1029 | state: "", | 1029 | state: "", |
| 1030 | joinDate: null | 1030 | joinDate: null |
| 1031 | }, | 1031 | }, |
| 1032 | status: "" | 1032 | status: "" |
| 1033 | }), | 1033 | }), |
| 1034 | watch: { | 1034 | watch: { |
| 1035 | menu(val) { | 1035 | menu(val) { |
| 1036 | val && this.$nextTick(() => (this.$refs.picker.activePicker = "YEAR")); | 1036 | val && this.$nextTick(() => (this.$refs.picker.activePicker = "YEAR")); |
| 1037 | }, | 1037 | }, |
| 1038 | menu1(val) { | 1038 | menu1(val) { |
| 1039 | val && this.$nextTick(() => (this.$refs.picker.activePicker = "YEAR")); | 1039 | val && this.$nextTick(() => (this.$refs.picker.activePicker = "YEAR")); |
| 1040 | } | 1040 | } |
| 1041 | }, | 1041 | }, |
| 1042 | methods: { | 1042 | methods: { |
| 1043 | save(date) { | 1043 | save(date) { |
| 1044 | this.$refs.menu.save(date); | 1044 | this.$refs.menu.save(date); |
| 1045 | }, | 1045 | }, |
| 1046 | save(date) { | 1046 | save(date) { |
| 1047 | this.$refs.menu1.save(date); | 1047 | this.$refs.menu1.save(date); |
| 1048 | }, | 1048 | }, |
| 1049 | pickFile() { | 1049 | pickFile() { |
| 1050 | this.$refs.image.click(); | 1050 | this.$refs.image.click(); |
| 1051 | }, | 1051 | }, |
| 1052 | onFilePicked(e) { | 1052 | onFilePicked(e) { |
| 1053 | const files = e.target.files; | 1053 | const files = e.target.files; |
| 1054 | this.upload = e.target.files[0]; | 1054 | this.upload = e.target.files[0]; |
| 1055 | if (files[0] !== undefined) { | 1055 | if (files[0] !== undefined) { |
| 1056 | this.imageName = files[0].name; | 1056 | this.imageName = files[0].name; |
| 1057 | if (this.imageName.lastIndexOf(".") <= 0) { | 1057 | if (this.imageName.lastIndexOf(".") <= 0) { |
| 1058 | return; | 1058 | return; |
| 1059 | } | 1059 | } |
| 1060 | const fr = new FileReader(); | 1060 | const fr = new FileReader(); |
| 1061 | fr.readAsDataURL(files[0]); | 1061 | fr.readAsDataURL(files[0]); |
| 1062 | fr.addEventListener("load", () => { | 1062 | fr.addEventListener("load", () => { |
| 1063 | this.imageUrl = fr.result; | 1063 | this.imageUrl = fr.result; |
| 1064 | this.imageFile = files[0]; // this is an image file that can be sent to server... | 1064 | this.imageFile = files[0]; // this is an image file that can be sent to server... |
| 1065 | }); | 1065 | }); |
| 1066 | } else { | 1066 | } else { |
| 1067 | this.imageName = ""; | 1067 | this.imageName = ""; |
| 1068 | this.imageFile = ""; | 1068 | this.imageFile = ""; |
| 1069 | this.imageUrl = ""; | 1069 | this.imageUrl = ""; |
| 1070 | } | 1070 | } |
| 1071 | }, | 1071 | }, |
| 1072 | dates: function(date) { | 1072 | dates: function(date) { |
| 1073 | return moment(date).format("MMMM DD, YYYY"); | 1073 | return moment(date).format("MMMM DD, YYYY"); |
| 1074 | }, | 1074 | }, |
| 1075 | getTeacherList() { | 1075 | getTeacherList() { |
| 1076 | this.showLoader = true; | 1076 | this.showLoader = true; |
| 1077 | var token = this.$store.state.token; | 1077 | var token = this.$store.state.token; |
| 1078 | http() | 1078 | http() |
| 1079 | .get("/getTeachersList", { | 1079 | .get("/getTeachersList", { |
| 1080 | headers: { Authorization: "Bearer " + token } | 1080 | headers: { Authorization: "Bearer " + token } |
| 1081 | }) | 1081 | }) |
| 1082 | .then(response => { | 1082 | .then(response => { |
| 1083 | this.desserts = response.data.data; | 1083 | this.desserts = response.data.data; |
| 1084 | this.showLoader = false; | 1084 | this.showLoader = false; |
| 1085 | // console.log("getTeacherList=====>",this.desserts) | 1085 | // console.log("getTeacherList=====>",this.desserts) |
| 1086 | }) | 1086 | }) |
| 1087 | .catch(error => { | 1087 | .catch(error => { |
| 1088 | this.showLoader = false; | 1088 | this.showLoader = false; |
| 1089 | if (error.response.status === 401) { | 1089 | if (error.response.status === 401) { |
| 1090 | this.$router.replace({ path: "/" }); | 1090 | this.$router.replace({ path: "/" }); |
| 1091 | this.$store.dispatch("setToken", null); | 1091 | this.$store.dispatch("setToken", null); |
| 1092 | this.$store.dispatch("Id", null); | 1092 | this.$store.dispatch("Id", null); |
| 1093 | } | 1093 | } |
| 1094 | }); | 1094 | }); |
| 1095 | }, | 1095 | }, |
| 1096 | editItem(item) { | 1096 | editItem(item) { |
| 1097 | this.editedIndex = this.desserts.indexOf(item); | 1097 | this.editedIndex = this.desserts.indexOf(item); |
| 1098 | this.editedItem = Object.assign({}, item); | 1098 | this.editedItem = Object.assign({}, item); |
| 1099 | this.editedItem.dob = | 1099 | this.editedItem.dob = |
| 1100 | this.editedItem.dob != undefined | 1100 | this.editedItem.dob != undefined |
| 1101 | ? (this.editedItem.dob = this.editedItem.dob.substring(0, 10)) | 1101 | ? (this.editedItem.dob = this.editedItem.dob.substring(0, 10)) |
| 1102 | : (this.editedItem.dob = ""); | 1102 | : (this.editedItem.dob = ""); |
| 1103 | this.editedItem.joinDate = | 1103 | this.editedItem.joinDate = |
| 1104 | this.editedItem.joinDate != undefined | 1104 | this.editedItem.joinDate != undefined |
| 1105 | ? (this.editedItem.joinDate = this.editedItem.joinDate.substring( | 1105 | ? (this.editedItem.joinDate = this.editedItem.joinDate.substring( |
| 1106 | 0, | 1106 | 0, |
| 1107 | 10 | 1107 | 10 |
| 1108 | )) | 1108 | )) |
| 1109 | : (this.editedItem.joinDate = ""); | 1109 | : (this.editedItem.joinDate = ""); |
| 1110 | 1110 | ||
| 1111 | this.editTeacherDialog = true; | 1111 | this.editTeacherDialog = true; |
| 1112 | }, | 1112 | }, |
| 1113 | profile(item) { | 1113 | profile(item) { |
| 1114 | this.editedIndex = this.desserts.indexOf(item); | 1114 | this.editedIndex = this.desserts.indexOf(item); |
| 1115 | this.editedItem = Object.assign({}, item); | 1115 | this.editedItem = Object.assign({}, item); |
| 1116 | this.viewTeacherProfileDialog = true; | 1116 | this.viewTeacherProfileDialog = true; |
| 1117 | }, | 1117 | }, |
| 1118 | deleteItem(item) { | 1118 | deleteItem(item) { |
| 1119 | let deleteTeachers = { | 1119 | let deleteTeachers = { |
| 1120 | teacherId: item._id | 1120 | teacherId: item._id |
| 1121 | }; | 1121 | }; |
| 1122 | http() | 1122 | http() |
| 1123 | .delete( | 1123 | .delete( |
| 1124 | "/deleteTeacher", | 1124 | "/deleteTeacher", |
| 1125 | confirm("Are you sure you want to delete this?") && { | 1125 | confirm("Are you sure you want to delete this?") && { |
| 1126 | params: deleteTeachers | 1126 | params: deleteTeachers |
| 1127 | } | 1127 | } |
| 1128 | ) | 1128 | ) |
| 1129 | .then(response => { | 1129 | .then(response => { |
| 1130 | this.snackbar = true; | 1130 | this.snackbar = true; |
| 1131 | this.text = "Successfully delete Existing Teacher"; | 1131 | this.text = "Successfully delete Existing Teacher"; |
| 1132 | this.color = "green"; | 1132 | this.color = "green"; |
| 1133 | this.getTeacherList(); | 1133 | this.getTeacherList(); |
| 1134 | }) | 1134 | }) |
| 1135 | .catch(error => { | 1135 | .catch(error => { |
| 1136 | this.snackbar = true; | 1136 | this.snackbar = true; |
| 1137 | this.text = error.response.data.message; | 1137 | this.text = error.response.data.message; |
| 1138 | this.color = "error"; | 1138 | this.color = "error"; |
| 1139 | }); | 1139 | }); |
| 1140 | }, | 1140 | }, |
| 1141 | closeEditTeacherDialog() { | 1141 | closeEditTeacherDialog() { |
| 1142 | this.editTeacherDialog = false; | 1142 | this.editTeacherDialog = false; |
| 1143 | }, | 1143 | }, |
| 1144 | close1() { | 1144 | close1() { |
| 1145 | this.viewTeacherProfileDialog = false; | 1145 | this.viewTeacherProfileDialog = false; |
| 1146 | }, | 1146 | }, |
| 1147 | copyData() { | 1147 | copyData() { |
| 1148 | this.addTeachers.permanentAddress = this.addTeachers.presentAddress; | 1148 | this.addTeachers.permanentAddress = this.addTeachers.presentAddress; |
| 1149 | }, | 1149 | }, |
| 1150 | submit() { | 1150 | submit() { |
| 1151 | if (this.$refs.form.validate()) { | 1151 | if (this.$refs.form.validate()) { |
| 1152 | let addTeacher = { | 1152 | let addTeacher = { |
| 1153 | name: this.addTeachers.name, | 1153 | name: this.addTeachers.name, |
| 1154 | email: this.addTeachers.email, | 1154 | email: this.addTeachers.email, |
| 1155 | role: this.addTeachers.role, | 1155 | role: this.addTeachers.role, |
| 1156 | dob: this.addTeachers.date, | 1156 | dob: this.addTeachers.date, |
| 1157 | city: this.addTeachers.city, | 1157 | city: this.addTeachers.city, |
| 1158 | pincode: this.addTeachers.pincode, | 1158 | pincode: this.addTeachers.pincode, |
| 1159 | country: this.addTeachers.country, | 1159 | country: this.addTeachers.country, |
| 1160 | permanentAddress: this.addTeachers.permanentAddress, | 1160 | permanentAddress: this.addTeachers.permanentAddress, |
| 1161 | presentAddress: this.addTeachers.presentAddress, | 1161 | presentAddress: this.addTeachers.presentAddress, |
| 1162 | mobileNo: this.addTeachers.mobileNo, | 1162 | mobileNo: this.addTeachers.mobileNo, |
| 1163 | state: this.addTeachers.state, | 1163 | state: this.addTeachers.state, |
| 1164 | joinDate: this.addTeachers.joinDate | 1164 | joinDate: this.addTeachers.joinDate |
| 1165 | }; | 1165 | }; |
| 1166 | if (this.imageUrl) { | 1166 | if (this.imageUrl) { |
| 1167 | var str = this.imageUrl; | 1167 | var str = this.imageUrl; |
| 1168 | const [baseUrl, imageUrl] = str.split(/,/); | 1168 | const [baseUrl, imageUrl] = str.split(/,/); |
| 1169 | addTeacher.upload = imageUrl; | 1169 | addTeacher.upload = imageUrl; |
| 1170 | } | 1170 | } |
| 1171 | this.loading = true; | 1171 | this.loading = true; |
| 1172 | http() | 1172 | http() |
| 1173 | .post("/createTeacher", addTeacher) | 1173 | .post("/createTeacher", addTeacher) |
| 1174 | .then(response => { | 1174 | .then(response => { |
| 1175 | this.imageUrl = ""; | 1175 | this.imageUrl = ""; |
| 1176 | this.getTeacherList(); | 1176 | this.getTeacherList(); |
| 1177 | this.snackbar = true; | 1177 | this.snackbar = true; |
| 1178 | this.text = "New Teacher added successfully"; | 1178 | this.text = "New Teacher added successfully"; |
| 1179 | this.color = "green"; | 1179 | this.color = "green"; |
| 1180 | this.clear(); | 1180 | this.clear(); |
| 1181 | this.loading = false; | 1181 | this.loading = false; |
| 1182 | this.addTeacherDialog = false; | 1182 | this.addTeacherDialog = false; |
| 1183 | }) | 1183 | }) |
| 1184 | .catch(error => { | 1184 | .catch(error => { |
| 1185 | this.snackbar = true; | 1185 | this.snackbar = true; |
| 1186 | this.text = error.response.data.message; | 1186 | this.text = error.response.data.message; |
| 1187 | this.color = "error"; | 1187 | this.color = "error"; |
| 1188 | this.loading = false; | 1188 | this.loading = false; |
| 1189 | }); | 1189 | }); |
| 1190 | } | 1190 | } |
| 1191 | }, | 1191 | }, |
| 1192 | clear() { | 1192 | clear() { |
| 1193 | this.$refs.form.reset(); | 1193 | this.$refs.form.reset(); |
| 1194 | this.imageUrl = ""; | 1194 | this.imageUrl = ""; |
| 1195 | }, | 1195 | }, |
| 1196 | save() { | 1196 | save() { |
| 1197 | this.loading = true; | 1197 | this.loading = true; |
| 1198 | let editTeacher = { | 1198 | let editTeacher = { |
| 1199 | teacherId: this.editedItem._id, | 1199 | teacherId: this.editedItem._id, |
| 1200 | name: this.editedItem.name, | 1200 | name: this.editedItem.name, |
| 1201 | email: this.editedItem.email, | 1201 | email: this.editedItem.email, |
| 1202 | role: this.editedItem.role, | 1202 | role: this.editedItem.role, |
| 1203 | dob: this.editedItem.dob, | 1203 | dob: this.editedItem.dob, |
| 1204 | city: this.editedItem.city, | 1204 | city: this.editedItem.city, |
| 1205 | pincode: this.editedItem.pincode, | 1205 | pincode: this.editedItem.pincode, |
| 1206 | country: this.editedItem.country, | 1206 | country: this.editedItem.country, |
| 1207 | permanentAddress: this.editedItem.permanentAddress, | 1207 | permanentAddress: this.editedItem.permanentAddress, |
| 1208 | presentAddress: this.editedItem.presentAddress, | 1208 | presentAddress: this.editedItem.presentAddress, |
| 1209 | mobileNo: this.editedItem.mobileNo, | 1209 | mobileNo: this.editedItem.mobileNo, |
| 1210 | state: this.editedItem.state, | 1210 | state: this.editedItem.state, |
| 1211 | joinDate: this.editedItem.joinDate | 1211 | joinDate: this.editedItem.joinDate |
| 1212 | }; | 1212 | }; |
| 1213 | if (this.imageUrl) { | 1213 | if (this.imageUrl) { |
| 1214 | var str = this.imageUrl; | 1214 | var str = this.imageUrl; |
| 1215 | const [baseUrl, imageUrl] = str.split(/,/); | 1215 | const [baseUrl, imageUrl] = str.split(/,/); |
| 1216 | editTeacher.upload = imageUrl; | 1216 | editTeacher.upload = imageUrl; |
| 1217 | } | 1217 | } |
| 1218 | http() | 1218 | http() |
| 1219 | .put("/updateTeacher", editTeacher) | 1219 | .put("/updateTeacher", editTeacher) |
| 1220 | .then(response => { | 1220 | .then(response => { |
| 1221 | this.snackbar = true; | 1221 | this.snackbar = true; |
| 1222 | this.text = "Successfully Edit Existing Teacher"; | 1222 | this.text = "Successfully Edit Existing Teacher"; |
| 1223 | this.color = "green"; | 1223 | this.color = "green"; |
| 1224 | this.loading = false; | 1224 | this.loading = false; |
| 1225 | this.getTeacherList(); | 1225 | this.getTeacherList(); |
| 1226 | this.closeEditTeacherDialog(); | 1226 | this.closeEditTeacherDialog(); |
| 1227 | }) | 1227 | }) |
| 1228 | .catch(error => { | 1228 | .catch(error => { |
| 1229 | this.snackbar = true; | 1229 | this.snackbar = true; |
| 1230 | this.text = error.response.data.message; | 1230 | this.text = error.response.data.message; |
| 1231 | this.color = "error"; | 1231 | this.color = "error"; |
| 1232 | this.loading = false; | 1232 | this.loading = false; |
| 1233 | }); | 1233 | }); |
| 1234 | }, | 1234 | }, |
| 1235 | suspendStatus(suspendStatus, id) { | 1235 | suspendStatus(suspendStatus, id) { |
| 1236 | let suspendStatusData = { | 1236 | let suspendStatusData = { |
| 1237 | teacherId: id, | 1237 | teacherId: id, |
| 1238 | status: suspendStatus | 1238 | status: suspendStatus |
| 1239 | }; | 1239 | }; |
| 1240 | this.showLoader = true; | 1240 | this.showLoader = true; |
| 1241 | http() | 1241 | http() |
| 1242 | .put("/suspendAccount", suspendStatusData) | 1242 | .put("/suspendAccount", suspendStatusData) |
| 1243 | .then(response => { | 1243 | .then(response => { |
| 1244 | this.getTeacherList(); | 1244 | this.getTeacherList(); |
| 1245 | this.text = response.data.message; | 1245 | this.text = response.data.message; |
| 1246 | this.color = "green"; | 1246 | this.color = "green"; |
| 1247 | this.snackbar = true; | 1247 | this.snackbar = true; |
| 1248 | this.showLoader = false; | 1248 | this.showLoader = false; |
| 1249 | }) | 1249 | }) |
| 1250 | .catch(error => { | 1250 | .catch(error => { |
| 1251 | this.snackbar = true; | 1251 | this.snackbar = true; |
| 1252 | this.color = "error"; | 1252 | this.color = "error"; |
| 1253 | this.text = error.response.data.message; | 1253 | this.text = error.response.data.message; |
| 1254 | this.showLoader = false; | 1254 | this.showLoader = false; |
| 1255 | }); | 1255 | }); |
| 1256 | }, | 1256 | }, |
| 1257 | displaySearch() { | 1257 | displaySearch() { |
| 1258 | (this.show = false), (this.showSearch = true); | 1258 | (this.show = false), (this.showSearch = true); |
| 1259 | }, | 1259 | }, |
| 1260 | closeSearch() { | 1260 | closeSearch() { |
| 1261 | this.showSearch = false; | 1261 | this.showSearch = false; |
| 1262 | this.show = true; | 1262 | this.show = true; |
| 1263 | this.search = ""; | 1263 | this.search = ""; |
| 1264 | } | 1264 | } |
| 1265 | }, | 1265 | }, |
| 1266 | mounted() { | 1266 | mounted() { |
| 1267 | const getCountryList = countryList(); | 1267 | const getCountryList = countryList(); |
| 1268 | this.countries = getCountryList; | 1268 | this.countries = getCountryList; |
| 1269 | this.getTeacherList(); | 1269 | this.getTeacherList(); |
| 1270 | } | 1270 | } |
| 1271 | }; | 1271 | }; |
| 1272 | </script> | 1272 | </script> |
| 1273 | <style scoped> | 1273 | <style scoped> |
| 1274 | .active { | 1274 | .active { |
| 1275 | background-color: gray; | 1275 | background-color: gray; |
| 1276 | color: white !important; | 1276 | color: white !important; |
| 1277 | } | 1277 | } |
| 1278 | .activebtn { | 1278 | .activebtn { |
| 1279 | color: black !important; | 1279 | color: black !important; |
| 1280 | } | 1280 | } |
| 1281 | </style> | 1281 | </style> |
src/pages/TimeTable/timeTable.vue
| 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">class No:</label> | 39 | <label class="right">class No:</label> |
| 40 | </v-flex> | 40 | </v-flex> |
| 41 | <v-flex xs8 sm5 class="ml-3"> | 41 | <v-flex xs8 sm5 class="ml-3"> |
| 42 | <v-select | 42 | <v-select |
| 43 | :items="addclass" | 43 | :items="addclass" |
| 44 | label="Select Class" | 44 | label="Select Class" |
| 45 | v-model="editedItem.classNum" | 45 | v-model="editedItem.classNum" |
| 46 | item-text="classNum" | 46 | item-text="classNum" |
| 47 | item-value="_id" | 47 | item-value="_id" |
| 48 | @change="getSections(editedItem.classNum)" | 48 | @change="getSections(editedItem.classNum)" |
| 49 | ></v-select> | 49 | ></v-select> |
| 50 | </v-flex> | 50 | </v-flex> |
| 51 | </v-layout> | 51 | </v-layout> |
| 52 | </v-flex> | 52 | </v-flex> |
| 53 | <v-flex xs12 sm12> | 53 | <v-flex xs12 sm12> |
| 54 | <v-layout> | 54 | <v-layout> |
| 55 | <v-flex xs4 class="pt-4 subheading"> | 55 | <v-flex xs4 class="pt-4 subheading"> |
| 56 | <label class="right hidden-xs-only hidden-sm-only">Section Name:</label> | 56 | <label class="right hidden-xs-only hidden-sm-only">Section Name:</label> |
| 57 | <label class="right hidden-lg-only hidden-md-only hidden-xl-only">Section:</label> | 57 | <label class="right hidden-lg-only hidden-md-only hidden-xl-only">Section:</label> |
| 58 | </v-flex> | 58 | </v-flex> |
| 59 | <v-flex xs8 sm5 class="ml-3"> | 59 | <v-flex xs8 sm5 class="ml-3"> |
| 60 | <v-select | 60 | <v-select |
| 61 | :items="addSection" | 61 | :items="addSection" |
| 62 | label="Select Section" | 62 | label="Select Section" |
| 63 | v-model="editedItem.selectSection" | 63 | v-model="editedItem.selectSection" |
| 64 | item-text="name" | 64 | item-text="name" |
| 65 | item-value="_id" | 65 | item-value="_id" |
| 66 | ></v-select> | 66 | ></v-select> |
| 67 | </v-flex> | 67 | </v-flex> |
| 68 | </v-layout> | 68 | </v-layout> |
| 69 | </v-flex> | 69 | </v-flex> |
| 70 | <v-layout> | 70 | <v-layout> |
| 71 | <v-flex xs12 sm9 offset-sm1> | 71 | <v-flex xs12 sm9 offset-sm1> |
| 72 | <v-card-actions> | 72 | <v-card-actions> |
| 73 | <v-spacer></v-spacer> | 73 | <v-spacer></v-spacer> |
| 74 | <v-btn round dark @click.native="close" class="clear-button">Cancel</v-btn> | 74 | <v-btn round dark @click.native="close" class="clear-button">Cancel</v-btn> |
| 75 | <v-btn round dark @click="save" class="add-button">Save</v-btn> | 75 | <v-btn round dark @click="save" class="add-button">Save</v-btn> |
| 76 | </v-card-actions> | 76 | </v-card-actions> |
| 77 | </v-flex> | 77 | </v-flex> |
| 78 | </v-layout> | 78 | </v-layout> |
| 79 | </v-card> | 79 | </v-card> |
| 80 | </v-flex> | 80 | </v-flex> |
| 81 | </v-dialog> | 81 | </v-dialog> |
| 82 | 82 | ||
| 83 | <!-- ****** ADD Dialog Schedule IN TIME-TABLE ****** --> | 83 | <!-- ****** ADD Dialog Schedule IN TIME-TABLE ****** --> |
| 84 | 84 | ||
| 85 | <v-dialog v-model="dialogSchedule" max-width="600px"> | 85 | <v-dialog v-model="dialogSchedule" max-width="600px"> |
| 86 | <v-flex xs12 sm12> | 86 | <v-flex xs12 sm12> |
| 87 | <v-card flat class="card-style pa-2" dark> | 87 | <v-card flat class="card-style pa-2" dark> |
| 88 | <v-layout> | 88 | <v-layout> |
| 89 | <v-flex xs12> | 89 | <v-flex xs12> |
| 90 | <label class="title text-xs-center">Add Schedule</label> | 90 | <label class="title text-xs-center">Add Schedule</label> |
| 91 | <v-icon size="24" class="right" @click="dialogSchedule = false">cancel</v-icon> | 91 | <v-icon size="24" class="right" @click="dialogSchedule = false">cancel</v-icon> |
| 92 | </v-flex> | 92 | </v-flex> |
| 93 | </v-layout> | 93 | </v-layout> |
| 94 | <v-form ref="formAddDay" v-model="validAddDay" lazy-validation> | 94 | <v-form ref="formAddDay" v-model="validAddDay" lazy-validation> |
| 95 | <v-container fluid> | 95 | <v-container fluid> |
| 96 | <v-flex xs12 sm12 class="py-3"> | 96 | <v-flex xs12 sm12 class="py-3"> |
| 97 | <v-layout> | 97 | <v-layout> |
| 98 | <v-flex xs4 class="pt-4 subheading"> | 98 | <v-flex xs4 class="pt-4 subheading"> |
| 99 | <label class="right hidden-xs-only hidden-sm-only">Select Day:</label> | 99 | <label class="right hidden-xs-only hidden-sm-only">Select Day:</label> |
| 100 | <label class="right hidden-lg-only hidden-md-only hidden-xl-only">Day:</label> | 100 | <label class="right hidden-lg-only hidden-md-only hidden-xl-only">Day:</label> |
| 101 | </v-flex> | 101 | </v-flex> |
| 102 | <v-flex xs12 sm5 class="pl-3"> | 102 | <v-flex xs12 sm5 class="pl-3"> |
| 103 | <v-select | 103 | <v-select |
| 104 | :items="addOneDay" | 104 | :items="addOneDay" |
| 105 | label="Select Day" | 105 | label="Select Day" |
| 106 | v-model="schedule.selectDay" | 106 | v-model="schedule.selectDay" |
| 107 | :rules="selecDayRule" | 107 | :rules="selecDayRule" |
| 108 | ></v-select> | 108 | ></v-select> |
| 109 | </v-flex> | 109 | </v-flex> |
| 110 | </v-layout> | 110 | </v-layout> |
| 111 | </v-flex> | 111 | </v-flex> |
| 112 | <v-layout> | 112 | <v-layout> |
| 113 | <v-flex xs12 sm8 offset-sm2> | 113 | <v-flex xs12 sm8 offset-sm2> |
| 114 | <v-card-actions> | 114 | <v-card-actions> |
| 115 | <v-spacer></v-spacer> | 115 | <v-spacer></v-spacer> |
| 116 | <v-btn round dark @click="submitSchedule" class="add-button">Save</v-btn> | 116 | <v-btn round dark @click="submitSchedule" class="add-button">Save</v-btn> |
| 117 | <v-spacer></v-spacer> | 117 | <v-spacer></v-spacer> |
| 118 | </v-card-actions> | 118 | </v-card-actions> |
| 119 | </v-flex> | 119 | </v-flex> |
| 120 | </v-layout> | 120 | </v-layout> |
| 121 | </v-container> | 121 | </v-container> |
| 122 | </v-form> | 122 | </v-form> |
| 123 | </v-card> | 123 | </v-card> |
| 124 | </v-flex> | 124 | </v-flex> |
| 125 | </v-dialog> | 125 | </v-dialog> |
| 126 | 126 | ||
| 127 | <!-- ****** ADD LECTURES IN TIME-TABLE ****** --> | 127 | <!-- ****** ADD LECTURES IN TIME-TABLE ****** --> |
| 128 | 128 | ||
| 129 | <v-dialog v-model="dialogAddLecture" max-width="600px"> | 129 | <v-dialog v-model="dialogAddLecture" max-width="600px"> |
| 130 | <v-flex xs12 sm12> | 130 | <v-flex xs12 sm12> |
| 131 | <v-card flat class="card-style pa-2" dark> | 131 | <v-card flat class="card-style pa-2" dark> |
| 132 | <v-layout> | 132 | <v-layout> |
| 133 | <v-flex xs12> | 133 | <v-flex xs12> |
| 134 | <label class="title text-xs-center">Add Lecture</label> | 134 | <label class="title text-xs-center">Add Lecture</label> |
| 135 | <v-icon size="24" class="right" @click="dialogAddLecture = false">cancel</v-icon> | 135 | <v-icon size="24" class="right" @click="dialogAddLecture = false">cancel</v-icon> |
| 136 | </v-flex> | 136 | </v-flex> |
| 137 | </v-layout> | 137 | </v-layout> |
| 138 | <v-form ref="lectureForm" v-model="valid" lazy-validation> | 138 | <v-form ref="lectureForm" v-model="valid" lazy-validation> |
| 139 | <v-container fluid> | 139 | <v-container fluid> |
| 140 | <v-flex xs12 sm12> | 140 | <v-flex xs12 sm12> |
| 141 | <v-layout> | 141 | <v-layout> |
| 142 | <v-flex xs4 class="pt-4 subheading"> | 142 | <v-flex xs4 class="pt-4 subheading"> |
| 143 | <label class="right">Subject Name:</label> | 143 | <label class="right">Subject Name:</label> |
| 144 | </v-flex> | 144 | </v-flex> |
| 145 | <v-flex xs5 class="ml-3"> | 145 | <v-flex xs5 class="ml-3"> |
| 146 | <v-text-field | 146 | <v-text-field |
| 147 | v-model="addlectures.subjectName" | 147 | v-model="addlectures.subjectName" |
| 148 | :rules="subjectNameRules" | 148 | :rules="subjectNameRules" |
| 149 | placeholder="fill your Subject Name" | 149 | placeholder="fill your Subject Name" |
| 150 | type="text" | 150 | type="text" |
| 151 | ></v-text-field> | 151 | ></v-text-field> |
| 152 | </v-flex> | 152 | </v-flex> |
| 153 | </v-layout> | 153 | </v-layout> |
| 154 | </v-flex> | 154 | </v-flex> |
| 155 | <v-flex xs12 sm12> | 155 | <v-flex xs12 sm12> |
| 156 | <v-layout> | 156 | <v-layout> |
| 157 | <v-flex xs4 class="pt-4 subheading"> | 157 | <v-flex xs4 class="pt-4 subheading"> |
| 158 | <label class="right">Time In:</label> | 158 | <label class="right">Time In:</label> |
| 159 | </v-flex> | 159 | </v-flex> |
| 160 | <v-flex xs5 class="ml-3"> | 160 | <v-flex xs5 class="ml-3"> |
| 161 | <v-menu | 161 | <v-menu |
| 162 | ref="menuD" | 162 | ref="menuD" |
| 163 | :close-on-content-click="false" | 163 | :close-on-content-click="false" |
| 164 | v-model="menu5" | 164 | v-model="menu5" |
| 165 | :nudge-right="40" | 165 | :nudge-right="40" |
| 166 | lazy | 166 | lazy |
| 167 | transition="scale-transition" | 167 | transition="scale-transition" |
| 168 | offset-y | 168 | offset-y |
| 169 | full-width | 169 | full-width |
| 170 | max-width="290px" | 170 | max-width="290px" |
| 171 | min-width="290px" | 171 | min-width="290px" |
| 172 | > | 172 | > |
| 173 | <v-text-field | 173 | <v-text-field |
| 174 | slot="activator" | 174 | slot="activator" |
| 175 | v-model="addlectures.timeIn" | 175 | v-model="addlectures.timeIn" |
| 176 | label="Select your Time In" | 176 | label="Select your Time In" |
| 177 | append-icon="access_time" | 177 | append-icon="access_time" |
| 178 | :rules="timeInRules" | 178 | :rules="timeInRules" |
| 179 | readonly | 179 | readonly |
| 180 | ></v-text-field> | 180 | ></v-text-field> |
| 181 | <v-time-picker v-model="addlectures.timeIn" @change="menu5 = false"></v-time-picker> | 181 | <v-time-picker v-model="addlectures.timeIn" @change="menu5 = false"></v-time-picker> |
| 182 | </v-menu> | 182 | </v-menu> |
| 183 | </v-flex> | 183 | </v-flex> |
| 184 | </v-layout> | 184 | </v-layout> |
| 185 | </v-flex> | 185 | </v-flex> |
| 186 | <v-flex xs12 sm12> | 186 | <v-flex xs12 sm12> |
| 187 | <v-layout> | 187 | <v-layout> |
| 188 | <v-flex xs4 class="pt-4 subheading"> | 188 | <v-flex xs4 class="pt-4 subheading"> |
| 189 | <label class="right">Time Out:</label> | 189 | <label class="right">Time Out:</label> |
| 190 | </v-flex> | 190 | </v-flex> |
| 191 | <v-flex xs5 class="ml-3"> | 191 | <v-flex xs5 class="ml-3"> |
| 192 | <v-menu | 192 | <v-menu |
| 193 | ref="menuE" | 193 | ref="menuE" |
| 194 | :close-on-content-click="false" | 194 | :close-on-content-click="false" |
| 195 | v-model="menu6" | 195 | v-model="menu6" |
| 196 | :nudge-right="40" | 196 | :nudge-right="40" |
| 197 | lazy | 197 | lazy |
| 198 | transition="scale-transition" | 198 | transition="scale-transition" |
| 199 | offset-y | 199 | offset-y |
| 200 | full-width | 200 | full-width |
| 201 | max-width="290px" | 201 | max-width="290px" |
| 202 | min-width="290px" | 202 | min-width="290px" |
| 203 | > | 203 | > |
| 204 | <v-text-field | 204 | <v-text-field |
| 205 | slot="activator" | 205 | slot="activator" |
| 206 | :rules="timeOutRules" | 206 | :rules="timeOutRules" |
| 207 | v-model="addlectures.timeOut" | 207 | v-model="addlectures.timeOut" |
| 208 | label="Select your Time Out" | 208 | label="Select your Time Out" |
| 209 | append-icon="access_time" | 209 | append-icon="access_time" |
| 210 | readonly | 210 | readonly |
| 211 | ></v-text-field> | 211 | ></v-text-field> |
| 212 | <v-time-picker v-model="addlectures.timeOut" @change="menu6 = false"></v-time-picker> | 212 | <v-time-picker v-model="addlectures.timeOut" @change="menu6 = false"></v-time-picker> |
| 213 | </v-menu> | 213 | </v-menu> |
| 214 | </v-flex> | 214 | </v-flex> |
| 215 | </v-layout> | 215 | </v-layout> |
| 216 | </v-flex> | 216 | </v-flex> |
| 217 | <v-flex xs12 sm12> | 217 | <v-flex xs12 sm12> |
| 218 | <v-layout> | 218 | <v-layout> |
| 219 | <v-flex xs4 class="pt-4 subheading"> | 219 | <v-flex xs4 class="pt-4 subheading"> |
| 220 | <label class="right">Select Teacher:</label> | 220 | <label class="right">Select Teacher:</label> |
| 221 | </v-flex> | 221 | </v-flex> |
| 222 | <v-flex xs5 class="ml-3"> | 222 | <v-flex xs5 class="ml-3"> |
| 223 | <v-select | 223 | <v-select |
| 224 | :items="addTeachers" | 224 | :items="addTeachers" |
| 225 | v-model="addlectures.teacherId" | 225 | v-model="addlectures.teacherId" |
| 226 | :rules="subjectNameRules" | 226 | :rules="subjectNameRules" |
| 227 | item-text="name" | 227 | item-text="name" |
| 228 | item-value="_id" | 228 | item-value="_id" |
| 229 | required | 229 | required |
| 230 | ></v-select> | 230 | ></v-select> |
| 231 | </v-flex> | 231 | </v-flex> |
| 232 | </v-layout> | 232 | </v-layout> |
| 233 | </v-flex> | 233 | </v-flex> |
| 234 | <v-layout> | 234 | <v-layout> |
| 235 | <v-flex xs12 sm8 offset-sm2> | 235 | <v-flex xs12 sm8 offset-sm2> |
| 236 | <v-card-actions> | 236 | <v-card-actions> |
| 237 | <v-spacer></v-spacer> | 237 | <v-spacer></v-spacer> |
| 238 | <v-btn round dark @click="AddLecture" class="add-button">Save</v-btn> | 238 | <v-btn round dark @click="AddLecture" class="add-button">Save</v-btn> |
| 239 | </v-card-actions> | 239 | </v-card-actions> |
| 240 | </v-flex> | 240 | </v-flex> |
| 241 | </v-layout> | 241 | </v-layout> |
| 242 | </v-container> | 242 | </v-container> |
| 243 | </v-form> | 243 | </v-form> |
| 244 | </v-card> | 244 | </v-card> |
| 245 | </v-flex> | 245 | </v-flex> |
| 246 | </v-dialog> | 246 | </v-dialog> |
| 247 | 247 | ||
| 248 | <!-- ****** EDIT PARTICULAR LECTURES TIME-TABLE ****** --> | 248 | <!-- ****** EDIT PARTICULAR LECTURES TIME-TABLE ****** --> |
| 249 | 249 | ||
| 250 | <v-dialog v-model="dialogUpdateLectures" max-width="600px"> | 250 | <v-dialog v-model="dialogUpdateLectures" max-width="600px"> |
| 251 | <v-flex xs12 sm12 class> | 251 | <v-flex xs12 sm12 class> |
| 252 | <v-card flat class="card-style pa-2" dark> | 252 | <v-card flat class="card-style pa-2" dark> |
| 253 | <v-layout> | 253 | <v-layout> |
| 254 | <v-flex xs12> | 254 | <v-flex xs12> |
| 255 | <label class="title text-xs-center">Edit Lecture</label> | 255 | <label class="title text-xs-center">Edit Lecture</label> |
| 256 | <v-icon size="24" class="right" @click="dialogUpdateLectures = false">cancel</v-icon> | 256 | <v-icon size="24" class="right" @click="dialogUpdateLectures = false">cancel</v-icon> |
| 257 | </v-flex> | 257 | </v-flex> |
| 258 | </v-layout> | 258 | </v-layout> |
| 259 | <v-flex xs12 sm12> | 259 | <v-flex xs12 sm12> |
| 260 | <v-layout> | 260 | <v-layout> |
| 261 | <v-flex xs5 sm4 class="pt-4 subheading"> | 261 | <v-flex xs5 sm4 class="pt-4 subheading"> |
| 262 | <label class="right">Subject Name:</label> | 262 | <label class="right">Subject Name:</label> |
| 263 | </v-flex> | 263 | </v-flex> |
| 264 | <v-flex xs7 sm6 class="ml-3"> | 264 | <v-flex xs7 sm6 class="ml-3"> |
| 265 | <v-text-field | 265 | <v-text-field |
| 266 | v-model="updateLectures.subjectName" | 266 | v-model="updateLectures.subjectName" |
| 267 | placeholder="fill your Subject Name" | 267 | placeholder="fill your Subject Name" |
| 268 | type="text" | 268 | type="text" |
| 269 | ></v-text-field> | 269 | ></v-text-field> |
| 270 | </v-flex> | 270 | </v-flex> |
| 271 | </v-layout> | 271 | </v-layout> |
| 272 | </v-flex> | 272 | </v-flex> |
| 273 | <v-flex xs12 sm12> | 273 | <v-flex xs12 sm12> |
| 274 | <v-layout> | 274 | <v-layout> |
| 275 | <v-flex xs5 sm4 class="pt-4 subheading"> | 275 | <v-flex xs5 sm4 class="pt-4 subheading"> |
| 276 | <label class="right">Time In:</label> | 276 | <label class="right">Time In:</label> |
| 277 | </v-flex> | 277 | </v-flex> |
| 278 | <v-flex xs7 sm6 class="ml-3"> | 278 | <v-flex xs7 sm6 class="ml-3"> |
| 279 | <v-menu | 279 | <v-menu |
| 280 | ref="menuC" | 280 | ref="menuC" |
| 281 | :close-on-content-click="false" | 281 | :close-on-content-click="false" |
| 282 | v-model="menu4" | 282 | v-model="menu4" |
| 283 | :nudge-right="40" | 283 | :nudge-right="40" |
| 284 | lazy | 284 | lazy |
| 285 | transition="scale-transition" | 285 | transition="scale-transition" |
| 286 | offset-y | 286 | offset-y |
| 287 | full-width | 287 | full-width |
| 288 | max-width="290px" | 288 | max-width="290px" |
| 289 | min-width="290px" | 289 | min-width="290px" |
| 290 | > | 290 | > |
| 291 | <v-text-field | 291 | <v-text-field |
| 292 | slot="activator" | 292 | slot="activator" |
| 293 | v-model="updateLectures.timeIn" | 293 | v-model="updateLectures.timeIn" |
| 294 | placeholder="Select your Time In" | 294 | placeholder="Select your Time In" |
| 295 | append-icon="access_time" | 295 | append-icon="access_time" |
| 296 | readonly | 296 | readonly |
| 297 | ></v-text-field> | 297 | ></v-text-field> |
| 298 | <v-time-picker v-model="updateLectures.timeIn" @change="menu4= false"></v-time-picker> | 298 | <v-time-picker v-model="updateLectures.timeIn" @change="menu4= false"></v-time-picker> |
| 299 | </v-menu> | 299 | </v-menu> |
| 300 | </v-flex> | 300 | </v-flex> |
| 301 | </v-layout> | 301 | </v-layout> |
| 302 | </v-flex> | 302 | </v-flex> |
| 303 | <v-flex xs12 sm12> | 303 | <v-flex xs12 sm12> |
| 304 | <v-layout> | 304 | <v-layout> |
| 305 | <v-flex xs5 sm4 class="pt-4 subheading"> | 305 | <v-flex xs5 sm4 class="pt-4 subheading"> |
| 306 | <label class="right">Time Out:</label> | 306 | <label class="right">Time Out:</label> |
| 307 | </v-flex> | 307 | </v-flex> |
| 308 | <v-flex xs7 sm6 class="ml-3"> | 308 | <v-flex xs7 sm6 class="ml-3"> |
| 309 | <v-menu | 309 | <v-menu |
| 310 | ref="menuB" | 310 | ref="menuB" |
| 311 | :close-on-content-click="false" | 311 | :close-on-content-click="false" |
| 312 | v-model="menu3" | 312 | v-model="menu3" |
| 313 | :nudge-right="40" | 313 | :nudge-right="40" |
| 314 | lazy | 314 | lazy |
| 315 | transition="scale-transition" | 315 | transition="scale-transition" |
| 316 | offset-y | 316 | offset-y |
| 317 | full-width | 317 | full-width |
| 318 | max-width="290px" | 318 | max-width="290px" |
| 319 | min-width="290px" | 319 | min-width="290px" |
| 320 | > | 320 | > |
| 321 | <v-text-field | 321 | <v-text-field |
| 322 | slot="activator" | 322 | slot="activator" |
| 323 | v-model="updateLectures.timeOut" | 323 | v-model="updateLectures.timeOut" |
| 324 | placeholder="Select your Time Out" | 324 | placeholder="Select your Time Out" |
| 325 | append-icon="access_time" | 325 | append-icon="access_time" |
| 326 | readonly | 326 | readonly |
| 327 | ></v-text-field> | 327 | ></v-text-field> |
| 328 | <v-time-picker v-model="updateLectures.timeOut" @change="menu3 = false"></v-time-picker> | 328 | <v-time-picker v-model="updateLectures.timeOut" @change="menu3 = false"></v-time-picker> |
| 329 | </v-menu> | 329 | </v-menu> |
| 330 | </v-flex> | 330 | </v-flex> |
| 331 | </v-layout> | 331 | </v-layout> |
| 332 | </v-flex> | 332 | </v-flex> |
| 333 | <v-flex xs12 sm12> | 333 | <v-flex xs12 sm12> |
| 334 | <v-layout> | 334 | <v-layout> |
| 335 | <v-flex xs5 sm4 class="pt-4 subheading"> | 335 | <v-flex xs5 sm4 class="pt-4 subheading"> |
| 336 | <label class="right">Select Teacher:</label> | 336 | <label class="right">Select Teacher:</label> |
| 337 | </v-flex> | 337 | </v-flex> |
| 338 | <v-flex xs7 sm6 class="ml-3"> | 338 | <v-flex xs7 sm6 class="ml-3"> |
| 339 | <v-select | 339 | <v-select |
| 340 | :items="addTeachers" | 340 | :items="addTeachers" |
| 341 | label="Select Teacher" | 341 | label="Select Teacher" |
| 342 | v-model="updateLectures.teacherId" | 342 | v-model="updateLectures.teacherId" |
| 343 | item-text="name" | 343 | item-text="name" |
| 344 | item-value="_id" | 344 | item-value="_id" |
| 345 | required | 345 | required |
| 346 | ></v-select> | 346 | ></v-select> |
| 347 | </v-flex> | 347 | </v-flex> |
| 348 | </v-layout> | 348 | </v-layout> |
| 349 | </v-flex> | 349 | </v-flex> |
| 350 | <v-layout> | 350 | <v-layout> |
| 351 | <v-flex xs12 sm10 offset-sm1> | 351 | <v-flex xs12 sm10 offset-sm1> |
| 352 | <v-card-actions> | 352 | <v-card-actions> |
| 353 | <!-- <v-btn round dark @click.native="closeUpdateLectures">Cancel</v-btn> --> | 353 | <!-- <v-btn round dark @click.native="closeUpdateLectures">Cancel</v-btn> --> |
| 354 | <v-spacer></v-spacer> | 354 | <v-spacer></v-spacer> |
| 355 | <v-btn | 355 | <v-btn |
| 356 | round | 356 | round |
| 357 | dark | 357 | dark |
| 358 | class="add-button" | 358 | class="add-button" |
| 359 | @click="updateParticularTable(updateLectures.timeIn,updateLectures.timeOut)" | 359 | @click="updateParticularTable(updateLectures.timeIn,updateLectures.timeOut)" |
| 360 | >Save</v-btn> | 360 | >Save</v-btn> |
| 361 | </v-card-actions> | 361 | </v-card-actions> |
| 362 | </v-flex> | 362 | </v-flex> |
| 363 | </v-layout> | 363 | </v-layout> |
| 364 | </v-card> | 364 | </v-card> |
| 365 | </v-flex> | 365 | </v-flex> |
| 366 | </v-dialog> | 366 | </v-dialog> |
| 367 | <!-- ****** EXISTING-USERS TIME-TABLE ****** --> | 367 | <!-- ****** EXISTING-USERS TIME-TABLE ****** --> |
| 368 | 368 | ||
| 369 | <!-- <v-card flat> | 369 | <!-- <v-card flat> |
| 370 | <v-card-actions class="hidden-xs-only hidden-sm-only"> | 370 | <v-card-actions class="hidden-xs-only hidden-sm-only"> |
| 371 | <v-layout> | 371 | <v-layout> |
| 372 | <label class="right mt-4 ml-5">Select Class:</label> | 372 | <label class="right mt-4 ml-5">Select Class:</label> |
| 373 | <v-select | 373 | <v-select |
| 374 | :items="addclass" | 374 | :items="addclass" |
| 375 | label="Select Class" | 375 | label="Select Class" |
| 376 | v-model="selectTimeTable.select" | 376 | v-model="selectTimeTable.select" |
| 377 | item-text="classNum" | 377 | item-text="classNum" |
| 378 | item-value="_id" | 378 | item-value="_id" |
| 379 | name="Select Class" | 379 | name="Select Class" |
| 380 | @change="getSections(selectTimeTable.select)" | 380 | @change="getSections(selectTimeTable.select)" |
| 381 | class="px-4" | 381 | class="px-4" |
| 382 | required | 382 | required |
| 383 | ></v-select> | 383 | ></v-select> |
| 384 | <label class="right mt-4">Select Section:</label> | 384 | <label class="right mt-4">Select Section:</label> |
| 385 | <v-select | 385 | <v-select |
| 386 | :items="addSection" | 386 | :items="addSection" |
| 387 | label="Select Section" | 387 | label="Select Section" |
| 388 | v-model="selectTimeTable.selectSection" | 388 | v-model="selectTimeTable.selectSection" |
| 389 | item-text="name" | 389 | item-text="name" |
| 390 | item-value="_id" | 390 | item-value="_id" |
| 391 | name="Select Section" | 391 | name="Select Section" |
| 392 | class="pl-3" | 392 | class="pl-3" |
| 393 | required | 393 | required |
| 394 | ></v-select> | 394 | ></v-select> |
| 395 | </v-layout> | 395 | </v-layout> |
| 396 | <v-spacer></v-spacer> | 396 | <v-spacer></v-spacer> |
| 397 | <v-btn @click="findTimeTable()" round dark :loading="loadingFindData" class="left">Find</v-btn> | 397 | <v-btn @click="findTimeTable()" round dark :loading="loadingFindData" class="left">Find</v-btn> |
| 398 | </v-card-actions> | 398 | </v-card-actions> |
| 399 | <v-layout class="hidden-xl-only hidden-lg-only hidden-md-only"> | 399 | <v-layout class="hidden-xl-only hidden-lg-only hidden-md-only"> |
| 400 | <v-flex xs4 sm2 class="mt-4 ml-2"> | 400 | <v-flex xs4 sm2 class="mt-4 ml-2"> |
| 401 | <label>Select Class:</label> | 401 | <label>Select Class:</label> |
| 402 | </v-flex> | 402 | </v-flex> |
| 403 | <v-flex xs6 sm9> | 403 | <v-flex xs6 sm9> |
| 404 | <v-select | 404 | <v-select |
| 405 | :items="addclass" | 405 | :items="addclass" |
| 406 | label="Select Class" | 406 | label="Select Class" |
| 407 | v-model="selectTimeTable.select" | 407 | v-model="selectTimeTable.select" |
| 408 | item-text="classNum" | 408 | item-text="classNum" |
| 409 | item-value="_id" | 409 | item-value="_id" |
| 410 | name="Select Class" | 410 | name="Select Class" |
| 411 | @change="getSections(selectTimeTable.select)" | 411 | @change="getSections(selectTimeTable.select)" |
| 412 | required | 412 | required |
| 413 | ></v-select> | 413 | ></v-select> |
| 414 | </v-flex> | 414 | </v-flex> |
| 415 | </v-layout> | 415 | </v-layout> |
| 416 | <v-layout class="hidden-xl-only hidden-lg-only hidden-md-only"> | 416 | <v-layout class="hidden-xl-only hidden-lg-only hidden-md-only"> |
| 417 | <v-flex xs4 sm2 class="mt-4 ml-2"> | 417 | <v-flex xs4 sm2 class="mt-4 ml-2"> |
| 418 | <label>Select Section:</label> | 418 | <label>Select Section:</label> |
| 419 | </v-flex> | 419 | </v-flex> |
| 420 | <v-flex xs6 sm9> | 420 | <v-flex xs6 sm9> |
| 421 | <v-select | 421 | <v-select |
| 422 | :items="addSection" | 422 | :items="addSection" |
| 423 | label="Select Section" | 423 | label="Select Section" |
| 424 | v-model="selectTimeTable.selectSection" | 424 | v-model="selectTimeTable.selectSection" |
| 425 | item-text="name" | 425 | item-text="name" |
| 426 | item-value="_id" | 426 | item-value="_id" |
| 427 | name="Select Section" | 427 | name="Select Section" |
| 428 | required | 428 | required |
| 429 | ></v-select> | 429 | ></v-select> |
| 430 | </v-flex> | 430 | </v-flex> |
| 431 | </v-layout> | 431 | </v-layout> |
| 432 | <v-layout class="hidden-xl-only hidden-lg-only hidden-md-only"> | 432 | <v-layout class="hidden-xl-only hidden-lg-only hidden-md-only"> |
| 433 | <v-flex xs12> | 433 | <v-flex xs12> |
| 434 | <v-btn @click="findTimeTable()" round dark :loading="loading" class="right mr-4 mb-2">Find</v-btn> | 434 | <v-btn @click="findTimeTable()" round dark :loading="loading" class="right mr-4 mb-2">Find</v-btn> |
| 435 | </v-flex> | 435 | </v-flex> |
| 436 | </v-layout> | 436 | </v-layout> |
| 437 | </v-card>--> | 437 | </v-card>--> |
| 438 | <v-flex xs12> | 438 | <v-flex xs12> |
| 439 | <v-toolbar color="transparent" flat> | 439 | <v-toolbar color="transparent" flat> |
| 440 | <v-btn | 440 | <v-btn |
| 441 | fab | 441 | fab |
| 442 | dark | 442 | dark |
| 443 | class="open-dialog-button hidden-xl-only hidden-md-only hidden-lg-only" | 443 | class="open-dialog-button hidden-xl-only hidden-md-only hidden-lg-only" |
| 444 | small | 444 | small |
| 445 | @click="addTimeTableDialog = true" | 445 | @click="addTimeTableDialog = true" |
| 446 | > | 446 | > |
| 447 | <v-icon dark>add</v-icon> | 447 | <v-icon dark>add</v-icon> |
| 448 | </v-btn> | 448 | </v-btn> |
| 449 | <v-btn | 449 | <v-btn |
| 450 | round | 450 | round |
| 451 | class="open-dialog-button hidden-sm-only hidden-xs-only" | 451 | class="open-dialog-button hidden-sm-only hidden-xs-only" |
| 452 | dark | 452 | dark |
| 453 | @click="addTimeTableDialog = true" | 453 | @click="addTimeTableDialog = true" |
| 454 | > | 454 | > |
| 455 | <v-icon class="white--text pr-1" size="20">add</v-icon>Add Time Table | 455 | <v-icon class="white--text pr-1" size="20">add</v-icon>Add Time Table |
| 456 | </v-btn> | 456 | </v-btn> |
| 457 | <v-flex xs4 md2> | 457 | <v-flex xs4 md2> |
| 458 | <v-select | 458 | <v-select |
| 459 | :items="addclass" | 459 | :items="addclass" |
| 460 | label="Select Class" | 460 | label="Select Class" |
| 461 | v-model="selectTimeTable.select" | 461 | v-model="selectTimeTable.select" |
| 462 | item-text="classNum" | 462 | item-text="classNum" |
| 463 | item-value="_id" | 463 | item-value="_id" |
| 464 | name="Select Class" | 464 | name="Select Class" |
| 465 | @change="getSections(selectTimeTable.select)" | 465 | @change="getSections(selectTimeTable.select)" |
| 466 | required | 466 | required |
| 467 | ></v-select> | 467 | ></v-select> |
| 468 | </v-flex> | 468 | </v-flex> |
| 469 | <v-flex xs4 md2 class="ml-4"> | 469 | <v-flex xs4 md2 class="ml-4"> |
| 470 | <v-select | 470 | <v-select |
| 471 | :items="addSection" | 471 | :items="addSection" |
| 472 | label="Select Section" | 472 | label="Select Section" |
| 473 | v-model="selectTimeTable.selectSection" | 473 | v-model="selectTimeTable.selectSection" |
| 474 | item-text="name" | 474 | item-text="name" |
| 475 | item-value="_id" | 475 | item-value="_id" |
| 476 | name="Select Section" | 476 | name="Select Section" |
| 477 | required | 477 | required |
| 478 | ></v-select> | 478 | ></v-select> |
| 479 | </v-flex> | 479 | </v-flex> |
| 480 | <v-spacer></v-spacer> | 480 | <v-spacer></v-spacer> |
| 481 | <v-btn | 481 | <v-btn |
| 482 | @click="findTimeTable()" | 482 | @click="findTimeTable()" |
| 483 | round | 483 | round |
| 484 | dark | 484 | dark |
| 485 | :loading="loading" | 485 | :loading="loading" |
| 486 | class="right mb-2 open-dialog-button" | 486 | class="right mb-2 open-dialog-button" |
| 487 | >Find</v-btn> | 487 | >Find</v-btn> |
| 488 | <v-card-title class="body-1" v-show="show"> | 488 | <v-card-title class="body-1" v-show="show"> |
| 489 | <v-btn icon large flat @click="displaySearch"> | 489 | <v-btn icon large flat @click="displaySearch"> |
| 490 | <v-avatar size="27"> | 490 | <v-avatar size="27"> |
| 491 | <img src="/static/icon/dashboard icons-49.png" alt="icon" /> | 491 | <img src="/static/icon/search.png" alt="icon" /> |
| 492 | </v-avatar> | 492 | </v-avatar> |
| 493 | </v-btn> | 493 | </v-btn> |
| 494 | </v-card-title> | 494 | </v-card-title> |
| 495 | <v-flex xs8 sm8 md3 lg2 v-show="showSearch"> | 495 | <v-flex xs8 sm8 md3 lg2 v-show="showSearch"> |
| 496 | <v-layout> | 496 | <v-layout> |
| 497 | <v-text-field | 497 | <v-text-field |
| 498 | v-model="search" | 498 | v-model="search" |
| 499 | label="Search" | 499 | label="Search" |
| 500 | prepend-inner-icon="search" | 500 | prepend-inner-icon="search" |
| 501 | color="primary" | 501 | color="primary" |
| 502 | ></v-text-field> | 502 | ></v-text-field> |
| 503 | <v-icon @click="closeSearch" color="error">close</v-icon> | 503 | <v-icon @click="closeSearch" color="error">close</v-icon> |
| 504 | </v-layout> | 504 | </v-layout> |
| 505 | </v-flex> | 505 | </v-flex> |
| 506 | </v-toolbar> | 506 | </v-toolbar> |
| 507 | <v-data-table | 507 | <v-data-table |
| 508 | :headers="headers" | 508 | :headers="headers" |
| 509 | :items="desserts" | 509 | :items="desserts" |
| 510 | :pagination.sync="pagination" | 510 | :pagination.sync="pagination" |
| 511 | :search="search" | 511 | :search="search" |
| 512 | item-key="_id" | 512 | item-key="_id" |
| 513 | > | 513 | > |
| 514 | <template slot="items" slot-scope="props"> | 514 | <template slot="items" slot-scope="props"> |
| 515 | <tr | 515 | <tr |
| 516 | style="cursor: pointer;" | 516 | style="cursor: pointer;" |
| 517 | class="tr" | 517 | class="tr" |
| 518 | @click="getTimeTable(props.item), props.expanded = !props.expanded" | 518 | @click="getTimeTable(props.item), props.expanded = !props.expanded" |
| 519 | > | 519 | > |
| 520 | <td class="td td-row">{{ props.index + 1}}</td> | 520 | <td class="td td-row">{{ props.index + 1}}</td> |
| 521 | <td class="text-xs-center td td-row">{{ props.item.classData.classNum}}</td> | 521 | <td class="text-xs-center td td-row">{{ props.item.classData.classNum}}</td> |
| 522 | <td class="text-xs-center td td-row">{{ props.item.sectionData.name }}</td> | 522 | <td class="text-xs-center td td-row">{{ props.item.sectionData.name }}</td> |
| 523 | <td class="text-xs-center td td-row"> | 523 | <td class="text-xs-center td td-row"> |
| 524 | <span> | 524 | <span> |
| 525 | <v-tooltip top> | 525 | <v-tooltip top> |
| 526 | <img | 526 | <img |
| 527 | slot="activator" | 527 | slot="activator" |
| 528 | style="cursor:pointer; width:20px; height:20px; " | 528 | style="cursor:pointer; width:20px; height:20px; " |
| 529 | class="mr-3" | 529 | class="mr-3" |
| 530 | @click="editItem(props.item)" | 530 | @click="editItem(props.item)" |
| 531 | src="/static/icon/dashboard icons-50.png" | 531 | src="/static/icon/dashboard icons-50.png" |
| 532 | /> | 532 | /> |
| 533 | <span>Edit</span> | 533 | <span>Edit</span> |
| 534 | </v-tooltip> | 534 | </v-tooltip> |
| 535 | <v-tooltip top> | 535 | <v-tooltip top> |
| 536 | <img | 536 | <img |
| 537 | slot="activator" | 537 | slot="activator" |
| 538 | style="cursor:pointer; width:20px; height:20px; " | 538 | style="cursor:pointer; width:20px; height:20px; " |
| 539 | class="mr-3" | 539 | class="mr-3" |
| 540 | @click="deleteItem(props.item)" | 540 | @click="deleteItem(props.item)" |
| 541 | src="/static/icon/dashboard icons-51.png" | 541 | src="/static/icon/delete.png" |
| 542 | /> | 542 | /> |
| 543 | <span>Delete</span> | 543 | <span>Delete</span> |
| 544 | </v-tooltip> | 544 | </v-tooltip> |
| 545 | <v-tooltip top> | 545 | <v-tooltip top> |
| 546 | <img | 546 | <img |
| 547 | slot="activator" | 547 | slot="activator" |
| 548 | style="cursor:pointer; width:20px; height:20px; " | 548 | style="cursor:pointer; width:20px; height:20px; " |
| 549 | class="mr-3" | 549 | class="mr-3" |
| 550 | src="/static/icon/add1.png" | 550 | src="/static/icon/add1.png" |
| 551 | @click="addSchedule(props.item._id)" | 551 | @click="addSchedule(props.item._id)" |
| 552 | /> | 552 | /> |
| 553 | <span>Add</span> | 553 | <span>Add</span> |
| 554 | </v-tooltip> | 554 | </v-tooltip> |
| 555 | </span> | 555 | </span> |
| 556 | </td> | 556 | </td> |
| 557 | </tr> | 557 | </tr> |
| 558 | </template> | 558 | </template> |
| 559 | <template slot="expand" slot-scope="props"> | 559 | <template slot="expand" slot-scope="props"> |
| 560 | <v-data-table | 560 | <v-data-table |
| 561 | :items="timeTableList.schedule" | 561 | :items="timeTableList.schedule" |
| 562 | hide-actions | 562 | hide-actions |
| 563 | item-key="title" | 563 | item-key="title" |
| 564 | style="width: auto;" | 564 | style="width: auto;" |
| 565 | > | 565 | > |
| 566 | <template slot="items" slot-scope="props"> | 566 | <template slot="items" slot-scope="props"> |
| 567 | <tr class="tr"> | 567 | <tr class="tr"> |
| 568 | <td class="text-xs-left subheading table-td td td-row"> | 568 | <td class="text-xs-left subheading table-td td td-row"> |
| 569 | <b>{{ props.item.day }}</b> | 569 | <b>{{ props.item.day }}</b> |
| 570 | </td> | 570 | </td> |
| 571 | <td class="table-td td td-row"> | 571 | <td class="table-td td td-row"> |
| 572 | <b>Subject</b> | 572 | <b>Subject</b> |
| 573 | <br /> | 573 | <br /> |
| 574 | <b>Time In</b> | 574 | <b>Time In</b> |
| 575 | <br /> | 575 | <br /> |
| 576 | <b>Time Out</b> | 576 | <b>Time Out</b> |
| 577 | </td> | 577 | </td> |
| 578 | <td v-for="list in props.item.lectures" class="table-td td td-row"> | 578 | <td v-for="list in props.item.lectures" class="table-td td td-row"> |
| 579 | <b>{{ list.subjectName }}</b> | 579 | <b>{{ list.subjectName }}</b> |
| 580 | <img | 580 | <img |
| 581 | style="cursor:pointer; width:20px; height:18px; " | 581 | style="cursor:pointer; width:20px; height:18px; " |
| 582 | class="mr-2 ml-2" | 582 | class="mr-2 ml-2" |
| 583 | src="/static/icon/edit1.png" | 583 | src="/static/icon/edit1.png" |
| 584 | @click="updateTimeTable(list, timeTableList)" | 584 | @click="updateTimeTable(list, timeTableList)" |
| 585 | /> | 585 | /> |
| 586 | <img | 586 | <img |
| 587 | style="cursor:pointer; width:20px; height:20px; " | 587 | style="cursor:pointer; width:20px; height:20px; " |
| 588 | src="/static/icon/delete1.png" | 588 | src="/static/icon/delete1.png" |
| 589 | @click="deleteTimeTable(list,props.item.lectures)" | 589 | @click="deleteTimeTable(list,props.item.lectures)" |
| 590 | /> | 590 | /> |
| 591 | <br /> | 591 | <br /> |
| 592 | {{list.timeIn}} | 592 | {{list.timeIn}} |
| 593 | <br /> | 593 | <br /> |
| 594 | {{list.timeOut}} | 594 | {{list.timeOut}} |
| 595 | </td> | 595 | </td> |
| 596 | <td class="td td-row"> | 596 | <td class="td td-row"> |
| 597 | <v-tooltip top> | 597 | <v-tooltip top> |
| 598 | <v-icon | 598 | <v-icon |
| 599 | slot="activator" | 599 | slot="activator" |
| 600 | color="black" | 600 | color="black" |
| 601 | @click="addLecture(props.item._id, timeTableList._id)" | 601 | @click="addLecture(props.item._id, timeTableList._id)" |
| 602 | >add_circle_outline</v-icon> | 602 | >add_circle_outline</v-icon> |
| 603 | <span>Add</span> | 603 | <span>Add</span> |
| 604 | </v-tooltip> | 604 | </v-tooltip> |
| 605 | </td> | 605 | </td> |
| 606 | </tr> | 606 | </tr> |
| 607 | </template> | 607 | </template> |
| 608 | </v-data-table> | 608 | </v-data-table> |
| 609 | </template> | 609 | </template> |
| 610 | <v-alert | 610 | <v-alert |
| 611 | slot="no-results" | 611 | slot="no-results" |
| 612 | :value="true" | 612 | :value="true" |
| 613 | color="error" | 613 | color="error" |
| 614 | icon="warning" | 614 | icon="warning" |
| 615 | >Your search for "{{ search }}" found no results.</v-alert> | 615 | >Your search for "{{ search }}" found no results.</v-alert> |
| 616 | </v-data-table> | 616 | </v-data-table> |
| 617 | <br /> | 617 | <br /> |
| 618 | <br /> | 618 | <br /> |
| 619 | </v-flex> | 619 | </v-flex> |
| 620 | 620 | ||
| 621 | <!-- ****** ADD TIME-TABLE ****** --> | 621 | <!-- ****** ADD TIME-TABLE ****** --> |
| 622 | <v-dialog v-model="addTimeTableDialog" max-width="600px"> | 622 | <v-dialog v-model="addTimeTableDialog" max-width="600px"> |
| 623 | <v-card flat class="card-style pa-2" dark> | 623 | <v-card flat class="card-style pa-2" dark> |
| 624 | <v-layout> | 624 | <v-layout> |
| 625 | <v-flex xs12> | 625 | <v-flex xs12> |
| 626 | <label class="title text-xs-center">Add Time Table</label> | 626 | <label class="title text-xs-center">Add Time Table</label> |
| 627 | <v-icon size="24" class="right" @click="addTimeTableDialog = false">cancel</v-icon> | 627 | <v-icon size="24" class="right" @click="addTimeTableDialog = false">cancel</v-icon> |
| 628 | </v-flex> | 628 | </v-flex> |
| 629 | </v-layout> | 629 | </v-layout> |
| 630 | <v-form ref="form" v-model="valid" lazy-validation> | 630 | <v-form ref="form" v-model="valid" lazy-validation> |
| 631 | <v-container fluid class="pt-3"> | 631 | <v-container fluid class="pt-3"> |
| 632 | <v-flex xs12> | 632 | <v-flex xs12> |
| 633 | <v-layout> | 633 | <v-layout> |
| 634 | <v-flex xs4 class="pt-4 subheading"> | 634 | <v-flex xs4 class="pt-4 subheading"> |
| 635 | <label class="right hidden-xs-only hidden-sm-only">Select Class:</label> | 635 | <label class="right hidden-xs-only hidden-sm-only">Select Class:</label> |
| 636 | <label class="right hidden-lg-only hidden-md-only hidden-xl-only">Class:</label> | 636 | <label class="right hidden-lg-only hidden-md-only hidden-xl-only">Class:</label> |
| 637 | </v-flex> | 637 | </v-flex> |
| 638 | <v-flex xs8 sm6 class="ml-3"> | 638 | <v-flex xs8 sm6 class="ml-3"> |
| 639 | <v-select | 639 | <v-select |
| 640 | :items="addclass" | 640 | :items="addclass" |
| 641 | label="Select Class" | 641 | label="Select Class" |
| 642 | v-model="timeTable.select" | 642 | v-model="timeTable.select" |
| 643 | item-text="classNum" | 643 | item-text="classNum" |
| 644 | item-value="_id" | 644 | item-value="_id" |
| 645 | @change="getSections(timeTable.select)" | 645 | @change="getSections(timeTable.select)" |
| 646 | :rules="classRules" | 646 | :rules="classRules" |
| 647 | required | 647 | required |
| 648 | ></v-select> | 648 | ></v-select> |
| 649 | </v-flex> | 649 | </v-flex> |
| 650 | </v-layout> | 650 | </v-layout> |
| 651 | </v-flex> | 651 | </v-flex> |
| 652 | <v-flex xs12> | 652 | <v-flex xs12> |
| 653 | <v-layout> | 653 | <v-layout> |
| 654 | <v-flex xs4 class="pt-4 subheading"> | 654 | <v-flex xs4 class="pt-4 subheading"> |
| 655 | <label class="right hidden-xs-only hidden-sm-only">Select Section:</label> | 655 | <label class="right hidden-xs-only hidden-sm-only">Select Section:</label> |
| 656 | <label class="right hidden-lg-only hidden-md-only hidden-xl-only">Section:</label> | 656 | <label class="right hidden-lg-only hidden-md-only hidden-xl-only">Section:</label> |
| 657 | </v-flex> | 657 | </v-flex> |
| 658 | <v-flex sm6 xs8 class="ml-3"> | 658 | <v-flex sm6 xs8 class="ml-3"> |
| 659 | <v-select | 659 | <v-select |
| 660 | :items="addSection" | 660 | :items="addSection" |
| 661 | label="Select Section" | 661 | label="Select Section" |
| 662 | v-model="timeTable.selectSection" | 662 | v-model="timeTable.selectSection" |
| 663 | item-text="name" | 663 | item-text="name" |
| 664 | item-value="_id" | 664 | item-value="_id" |
| 665 | :rules="sectionRules" | 665 | :rules="sectionRules" |
| 666 | required | 666 | required |
| 667 | ></v-select> | 667 | ></v-select> |
| 668 | </v-flex> | 668 | </v-flex> |
| 669 | </v-layout> | 669 | </v-layout> |
| 670 | </v-flex> | 670 | </v-flex> |
| 671 | <v-flex xs12> | 671 | <v-flex xs12> |
| 672 | <v-layout> | 672 | <v-layout> |
| 673 | <v-flex xs4 class="pt-4 subheading"> | 673 | <v-flex xs4 class="pt-4 subheading"> |
| 674 | <label class="right hidden-xs-only hidden-sm-only">Select Teacher:</label> | 674 | <label class="right hidden-xs-only hidden-sm-only">Select Teacher:</label> |
| 675 | <label class="right hidden-lg-only hidden-md-only hidden-xl-only">Teacher:</label> | 675 | <label class="right hidden-lg-only hidden-md-only hidden-xl-only">Teacher:</label> |
| 676 | </v-flex> | 676 | </v-flex> |
| 677 | <v-flex xs8 sm6 class="ml-3"> | 677 | <v-flex xs8 sm6 class="ml-3"> |
| 678 | <v-select | 678 | <v-select |
| 679 | :items="addTeachers" | 679 | :items="addTeachers" |
| 680 | label="Select Teacher" | 680 | label="Select Teacher" |
| 681 | v-model="timeTable.selectTeacher" | 681 | v-model="timeTable.selectTeacher" |
| 682 | item-text="name" | 682 | item-text="name" |
| 683 | item-value="_id" | 683 | item-value="_id" |
| 684 | :rules="teacherRules" | 684 | :rules="teacherRules" |
| 685 | required | 685 | required |
| 686 | ></v-select> | 686 | ></v-select> |
| 687 | </v-flex> | 687 | </v-flex> |
| 688 | </v-layout> | 688 | </v-layout> |
| 689 | </v-flex> | 689 | </v-flex> |
| 690 | <v-flex xs12> | 690 | <v-flex xs12> |
| 691 | <v-layout> | 691 | <v-layout> |
| 692 | <v-flex xs4 class="pt-4 subheading"> | 692 | <v-flex xs4 class="pt-4 subheading"> |
| 693 | <label class="right">Select Day:</label> | 693 | <label class="right">Select Day:</label> |
| 694 | </v-flex> | 694 | </v-flex> |
| 695 | <v-flex xs8 sm6 class="ml-3"> | 695 | <v-flex xs8 sm6 class="ml-3"> |
| 696 | <v-select | 696 | <v-select |
| 697 | :items="addOneDay" | 697 | :items="addOneDay" |
| 698 | label="Select Day" | 698 | label="Select Day" |
| 699 | v-model="timeTable.selectDay" | 699 | v-model="timeTable.selectDay" |
| 700 | :rules="dayRules" | 700 | :rules="dayRules" |
| 701 | item-text="name" | 701 | item-text="name" |
| 702 | item-value="_id" | 702 | item-value="_id" |
| 703 | required | 703 | required |
| 704 | ></v-select> | 704 | ></v-select> |
| 705 | </v-flex> | 705 | </v-flex> |
| 706 | </v-layout> | 706 | </v-layout> |
| 707 | </v-flex> | 707 | </v-flex> |
| 708 | <v-flex xs12> | 708 | <v-flex xs12> |
| 709 | <v-layout> | 709 | <v-layout> |
| 710 | <v-flex xs4 class="pt-4 subheading"> | 710 | <v-flex xs4 class="pt-4 subheading"> |
| 711 | <label class="right hidden-xs-only hidden-sm-only">Subject Name:</label> | 711 | <label class="right hidden-xs-only hidden-sm-only">Subject Name:</label> |
| 712 | <label class="right hidden-lg-only hidden-md-only hidden-xl-only">Subject:</label> | 712 | <label class="right hidden-lg-only hidden-md-only hidden-xl-only">Subject:</label> |
| 713 | </v-flex> | 713 | </v-flex> |
| 714 | <v-flex xs8 sm6 class="ml-3"> | 714 | <v-flex xs8 sm6 class="ml-3"> |
| 715 | <v-text-field | 715 | <v-text-field |
| 716 | placeholder="fill your Subject Name" | 716 | placeholder="fill your Subject Name" |
| 717 | :rules="subjectNameRules" | 717 | :rules="subjectNameRules" |
| 718 | v-model="timeTable.subjectName" | 718 | v-model="timeTable.subjectName" |
| 719 | type="text" | 719 | type="text" |
| 720 | required | 720 | required |
| 721 | ></v-text-field> | 721 | ></v-text-field> |
| 722 | </v-flex> | 722 | </v-flex> |
| 723 | </v-layout> | 723 | </v-layout> |
| 724 | </v-flex> | 724 | </v-flex> |
| 725 | <v-flex xs12> | 725 | <v-flex xs12> |
| 726 | <v-layout> | 726 | <v-layout> |
| 727 | <v-flex xs4 class="pt-4 subheading"> | 727 | <v-flex xs4 class="pt-4 subheading"> |
| 728 | <label class="right">Time In:</label> | 728 | <label class="right">Time In:</label> |
| 729 | </v-flex> | 729 | </v-flex> |
| 730 | <v-flex xs8 sm6 class="ml-3"> | 730 | <v-flex xs8 sm6 class="ml-3"> |
| 731 | <v-menu | 731 | <v-menu |
| 732 | ref="menuA" | 732 | ref="menuA" |
| 733 | :close-on-content-click="false" | 733 | :close-on-content-click="false" |
| 734 | v-model="menu2" | 734 | v-model="menu2" |
| 735 | :nudge-right="40" | 735 | :nudge-right="40" |
| 736 | :return-value.sync="timeTable.timeIn" | 736 | :return-value.sync="timeTable.timeIn" |
| 737 | lazy | 737 | lazy |
| 738 | transition="scale-transition" | 738 | transition="scale-transition" |
| 739 | offset-y | 739 | offset-y |
| 740 | full-width | 740 | full-width |
| 741 | max-width="290px" | 741 | max-width="290px" |
| 742 | min-width="290px" | 742 | min-width="290px" |
| 743 | > | 743 | > |
| 744 | <v-text-field | 744 | <v-text-field |
| 745 | slot="activator" | 745 | slot="activator" |
| 746 | v-model="timeTable.timeIn" | 746 | v-model="timeTable.timeIn" |
| 747 | label="Select your timeIn" | 747 | label="Select your timeIn" |
| 748 | append-icon="access_time" | 748 | append-icon="access_time" |
| 749 | :rules="timeInRules" | 749 | :rules="timeInRules" |
| 750 | readonly | 750 | readonly |
| 751 | ></v-text-field> | 751 | ></v-text-field> |
| 752 | <v-time-picker | 752 | <v-time-picker |
| 753 | v-model="timeTable.timeIn" | 753 | v-model="timeTable.timeIn" |
| 754 | @change="$refs.menuA.save(timeTable.timeIn)" | 754 | @change="$refs.menuA.save(timeTable.timeIn)" |
| 755 | ></v-time-picker> | 755 | ></v-time-picker> |
| 756 | </v-menu> | 756 | </v-menu> |
| 757 | </v-flex> | 757 | </v-flex> |
| 758 | </v-layout> | 758 | </v-layout> |
| 759 | </v-flex> | 759 | </v-flex> |
| 760 | <v-flex xs12> | 760 | <v-flex xs12> |
| 761 | <v-layout> | 761 | <v-layout> |
| 762 | <v-flex xs4 class="pt-4 subheading"> | 762 | <v-flex xs4 class="pt-4 subheading"> |
| 763 | <label class="right">Time Out:</label> | 763 | <label class="right">Time Out:</label> |
| 764 | </v-flex> | 764 | </v-flex> |
| 765 | <v-flex xs8 sm6 class="ml-3"> | 765 | <v-flex xs8 sm6 class="ml-3"> |
| 766 | <v-menu | 766 | <v-menu |
| 767 | ref="menu" | 767 | ref="menu" |
| 768 | :close-on-content-click="false" | 768 | :close-on-content-click="false" |
| 769 | v-model="menu1" | 769 | v-model="menu1" |
| 770 | :nudge-right="40" | 770 | :nudge-right="40" |
| 771 | :return-value.sync="timeTable.timeOut" | 771 | :return-value.sync="timeTable.timeOut" |
| 772 | lazy | 772 | lazy |
| 773 | transition="scale-transition" | 773 | transition="scale-transition" |
| 774 | offset-y | 774 | offset-y |
| 775 | full-width | 775 | full-width |
| 776 | max-width="290px" | 776 | max-width="290px" |
| 777 | min-width="290px" | 777 | min-width="290px" |
| 778 | > | 778 | > |
| 779 | <v-text-field | 779 | <v-text-field |
| 780 | slot="activator" | 780 | slot="activator" |
| 781 | v-model="timeTable.timeOut" | 781 | v-model="timeTable.timeOut" |
| 782 | label="Select your Time Out" | 782 | label="Select your Time Out" |
| 783 | append-icon="access_time" | 783 | append-icon="access_time" |
| 784 | :rules="timeOutRules" | 784 | :rules="timeOutRules" |
| 785 | readonly | 785 | readonly |
| 786 | ></v-text-field> | 786 | ></v-text-field> |
| 787 | <v-time-picker | 787 | <v-time-picker |
| 788 | v-model="timeTable.timeOut" | 788 | v-model="timeTable.timeOut" |
| 789 | @change="$refs.menu.save(timeTable.timeOut)" | 789 | @change="$refs.menu.save(timeTable.timeOut)" |
| 790 | ></v-time-picker> | 790 | ></v-time-picker> |
| 791 | </v-menu> | 791 | </v-menu> |
| 792 | </v-flex> | 792 | </v-flex> |
| 793 | </v-layout> | 793 | </v-layout> |
| 794 | </v-flex> | 794 | </v-flex> |
| 795 | <v-layout> | 795 | <v-layout> |
| 796 | <v-flex xs12 sm11> | 796 | <v-flex xs12 sm11> |
| 797 | <v-layout> | 797 | <v-layout> |
| 798 | <v-spacer></v-spacer> | 798 | <v-spacer></v-spacer> |
| 799 | <v-btn @click="clear" round class="clear-button" dark>clear</v-btn> | 799 | <v-btn @click="clear" round class="clear-button" dark>clear</v-btn> |
| 800 | <v-btn @click="submit" round dark :loading="loading" class="add-button">Add</v-btn> | 800 | <v-btn @click="submit" round dark :loading="loading" class="add-button">Add</v-btn> |
| 801 | </v-layout> | 801 | </v-layout> |
| 802 | </v-flex> | 802 | </v-flex> |
| 803 | </v-layout> | 803 | </v-layout> |
| 804 | </v-container> | 804 | </v-container> |
| 805 | </v-form> | 805 | </v-form> |
| 806 | </v-card> | 806 | </v-card> |
| 807 | </v-dialog> | 807 | </v-dialog> |
| 808 | <div class="loader" v-if="showLoader"> | 808 | <div class="loader" v-if="showLoader"> |
| 809 | <v-progress-circular indeterminate color="white"></v-progress-circular> | 809 | <v-progress-circular indeterminate color="white"></v-progress-circular> |
| 810 | </div> | 810 | </div> |
| 811 | <v-snackbar | 811 | <v-snackbar |
| 812 | :timeout="timeout" | 812 | :timeout="timeout" |
| 813 | :top="y === 'top'" | 813 | :top="y === 'top'" |
| 814 | :right="x === 'right'" | 814 | :right="x === 'right'" |
| 815 | :vertical="mode === 'vertical'" | 815 | :vertical="mode === 'vertical'" |
| 816 | v-model="snackbar" | 816 | v-model="snackbar" |
| 817 | :color="color" | 817 | :color="color" |
| 818 | >{{ text }}</v-snackbar> | 818 | >{{ text }}</v-snackbar> |
| 819 | </v-container> | 819 | </v-container> |
| 820 | </template> | 820 | </template> |
| 821 | <script> | 821 | <script> |
| 822 | import http from "@/Services/http.js"; | 822 | import http from "@/Services/http.js"; |
| 823 | import Util from "@/util"; | 823 | import Util from "@/util"; |
| 824 | 824 | ||
| 825 | export default { | 825 | export default { |
| 826 | data: () => ({ | 826 | data: () => ({ |
| 827 | y: "top", | 827 | y: "top", |
| 828 | x: "right", | 828 | x: "right", |
| 829 | mode: "", | 829 | mode: "", |
| 830 | timeout: 3000, | 830 | timeout: 3000, |
| 831 | text: "", | 831 | text: "", |
| 832 | search: "", | 832 | search: "", |
| 833 | color: "", | 833 | color: "", |
| 834 | snackbar: false, | 834 | snackbar: false, |
| 835 | loading: false, | 835 | loading: false, |
| 836 | showLoader: false, | 836 | showLoader: false, |
| 837 | dialog: false, | 837 | dialog: false, |
| 838 | show: true, | 838 | show: true, |
| 839 | showSearch: false, | 839 | showSearch: false, |
| 840 | dialogAddLecture: false, | 840 | dialogAddLecture: false, |
| 841 | dialogUpdateLectures: false, | 841 | dialogUpdateLectures: false, |
| 842 | dialogSchedule: false, | 842 | dialogSchedule: false, |
| 843 | dialog1: false, | 843 | dialog1: false, |
| 844 | valid: true, | 844 | valid: true, |
| 845 | addTimeTableDialog: false, | 845 | addTimeTableDialog: false, |
| 846 | validAddDay: true, | 846 | validAddDay: true, |
| 847 | loadingFindData: false, | 847 | loadingFindData: false, |
| 848 | addclass: [], | 848 | addclass: [], |
| 849 | addSection: [], | 849 | addSection: [], |
| 850 | addTeachers: [], | 850 | addTeachers: [], |
| 851 | gender: ["Male", "Female"], | 851 | gender: ["Male", "Female"], |
| 852 | pagination: { | 852 | pagination: { |
| 853 | rowsPerPage: 15 | 853 | rowsPerPage: 15 |
| 854 | }, | 854 | }, |
| 855 | imageData: {}, | 855 | imageData: {}, |
| 856 | imageName: "", | 856 | imageName: "", |
| 857 | imageUrl: "", | 857 | imageUrl: "", |
| 858 | imageFile: "", | 858 | imageFile: "", |
| 859 | timeInRules: [v => !!v || "Time In is required"], | 859 | timeInRules: [v => !!v || "Time In is required"], |
| 860 | timeOutRules: [v => !!v || "Time Out is required"], | 860 | timeOutRules: [v => !!v || "Time Out is required"], |
| 861 | lectureRules: [v => !!v || "Lecture No is required"], | 861 | lectureRules: [v => !!v || "Lecture No is required"], |
| 862 | subjectNameRules: [v => !!v || "Subject Name is required"], | 862 | subjectNameRules: [v => !!v || "Subject Name is required"], |
| 863 | classRules: [v => !!v || "Class Name is required"], | 863 | classRules: [v => !!v || "Class Name is required"], |
| 864 | sectionRules: [v => !!v || "Section Name is required"], | 864 | sectionRules: [v => !!v || "Section Name is required"], |
| 865 | sectionRules: [v => !!v || "Section Name is required"], | 865 | sectionRules: [v => !!v || "Section Name is required"], |
| 866 | teacherRules: [v => !!v || "Teacher Name is required"], | 866 | teacherRules: [v => !!v || "Teacher Name is required"], |
| 867 | selecDayRule: [v => !!v || "Day is required"], | 867 | selecDayRule: [v => !!v || "Day is required"], |
| 868 | dayRules: [v => !!v || "Day is required"], | 868 | dayRules: [v => !!v || "Day is required"], |
| 869 | getParticulerLecture: "", | 869 | getParticulerLecture: "", |
| 870 | headers: [ | 870 | headers: [ |
| 871 | { | 871 | { |
| 872 | text: "No", | 872 | text: "No", |
| 873 | align: "", | 873 | align: "", |
| 874 | sortable: false, | 874 | sortable: false, |
| 875 | value: "No" | 875 | value: "No" |
| 876 | }, | 876 | }, |
| 877 | { | 877 | { |
| 878 | text: "Class Name", | 878 | text: "Class Name", |
| 879 | value: "classData.classNum", | 879 | value: "classData.classNum", |
| 880 | sortable: false, | 880 | sortable: false, |
| 881 | align: "center" | 881 | align: "center" |
| 882 | }, | 882 | }, |
| 883 | { | 883 | { |
| 884 | text: "Section Name", | 884 | text: "Section Name", |
| 885 | value: "sectionData.name", | 885 | value: "sectionData.name", |
| 886 | sortable: false, | 886 | sortable: false, |
| 887 | align: "center" | 887 | align: "center" |
| 888 | }, | 888 | }, |
| 889 | { text: "Action", value: "", sortable: false, align: "center" } | 889 | { text: "Action", value: "", sortable: false, align: "center" } |
| 890 | ], | 890 | ], |
| 891 | daysHeaders: [ | 891 | daysHeaders: [ |
| 892 | { text: "Day", value: "dayday", sortable: false, align: "center" }, | 892 | { text: "Day", value: "dayday", sortable: false, align: "center" }, |
| 893 | { | 893 | { |
| 894 | text: "Subject Name", | 894 | text: "Subject Name", |
| 895 | value: "subjectName", | 895 | value: "subjectName", |
| 896 | sortable: false, | 896 | sortable: false, |
| 897 | align: "center" | 897 | align: "center" |
| 898 | }, | 898 | }, |
| 899 | { text: "Time In", value: "timeIn", sortable: false, align: "center" }, | 899 | { text: "Time In", value: "timeIn", sortable: false, align: "center" }, |
| 900 | { text: "Time Out", value: "timeOut", sortable: false, align: "center" } | 900 | { text: "Time Out", value: "timeOut", sortable: false, align: "center" } |
| 901 | ], | 901 | ], |
| 902 | addOneDay: [ | 902 | addOneDay: [ |
| 903 | "Monday", | 903 | "Monday", |
| 904 | "Tuesday", | 904 | "Tuesday", |
| 905 | "Wednesday", | 905 | "Wednesday", |
| 906 | "Thursday", | 906 | "Thursday", |
| 907 | "Friday", | 907 | "Friday", |
| 908 | "Saturday", | 908 | "Saturday", |
| 909 | "Sunday" | 909 | "Sunday" |
| 910 | ], | 910 | ], |
| 911 | schedule: { | 911 | schedule: { |
| 912 | selectDay: "" | 912 | selectDay: "" |
| 913 | }, | 913 | }, |
| 914 | desserts: [], | 914 | desserts: [], |
| 915 | timeTableList: [], | 915 | timeTableList: [], |
| 916 | editedIndex: -1, | 916 | editedIndex: -1, |
| 917 | selectTimeTable: { | 917 | selectTimeTable: { |
| 918 | select: "", | 918 | select: "", |
| 919 | selectSection: "" | 919 | selectSection: "" |
| 920 | }, | 920 | }, |
| 921 | timeTable: { | 921 | timeTable: { |
| 922 | select: "", | 922 | select: "", |
| 923 | selectSection: "", | 923 | selectSection: "", |
| 924 | selectDay: "", | 924 | selectDay: "", |
| 925 | timeIn: null, | 925 | timeIn: null, |
| 926 | timeOut: null, | 926 | timeOut: null, |
| 927 | subjectName: "", | 927 | subjectName: "", |
| 928 | selectTeacher: "" | 928 | selectTeacher: "" |
| 929 | }, | 929 | }, |
| 930 | editedItem: { | 930 | editedItem: { |
| 931 | classNum: "", | 931 | classNum: "", |
| 932 | selectSection: "" | 932 | selectSection: "" |
| 933 | }, | 933 | }, |
| 934 | addlectures: { | 934 | addlectures: { |
| 935 | timeIn: null, | 935 | timeIn: null, |
| 936 | timeOut: null, | 936 | timeOut: null, |
| 937 | subjectName: "", | 937 | subjectName: "", |
| 938 | teacherId: "", | 938 | teacherId: "", |
| 939 | scheduleId: "", | 939 | scheduleId: "", |
| 940 | timeTableId: "" | 940 | timeTableId: "" |
| 941 | }, | 941 | }, |
| 942 | updateLectures: { | 942 | updateLectures: { |
| 943 | timeIn: null, | 943 | timeIn: null, |
| 944 | timeOut: null, | 944 | timeOut: null, |
| 945 | subjectName: "", | 945 | subjectName: "", |
| 946 | teacherId: "" | 946 | teacherId: "" |
| 947 | }, | 947 | }, |
| 948 | updateLecturesId: { | 948 | updateLecturesId: { |
| 949 | lectureId: "", | 949 | lectureId: "", |
| 950 | scheduleId: "" | 950 | scheduleId: "" |
| 951 | }, | 951 | }, |
| 952 | menu1: false, | 952 | menu1: false, |
| 953 | menu2: false, | 953 | menu2: false, |
| 954 | menu3: false, | 954 | menu3: false, |
| 955 | menu4: false, | 955 | menu4: false, |
| 956 | menu5: false, | 956 | menu5: false, |
| 957 | menu6: false, | 957 | menu6: false, |
| 958 | scheduleDayId: "" | 958 | scheduleDayId: "" |
| 959 | }), | 959 | }), |
| 960 | methods: { | 960 | methods: { |
| 961 | findTimeTable() { | 961 | findTimeTable() { |
| 962 | this.loadingFindData = true; | 962 | this.loadingFindData = true; |
| 963 | http() | 963 | http() |
| 964 | .get("/getParticularClassTimeTable", { | 964 | .get("/getParticularClassTimeTable", { |
| 965 | params: { | 965 | params: { |
| 966 | sectionId: this.selectTimeTable.selectSection, | 966 | sectionId: this.selectTimeTable.selectSection, |
| 967 | classId: this.selectTimeTable.select | 967 | classId: this.selectTimeTable.select |
| 968 | } | 968 | } |
| 969 | }) | 969 | }) |
| 970 | .then(response => { | 970 | .then(response => { |
| 971 | this.desserts = response.data.data; | 971 | this.desserts = response.data.data; |
| 972 | this.loadingFindData = false; | 972 | this.loadingFindData = false; |
| 973 | }) | 973 | }) |
| 974 | .catch(error => { | 974 | .catch(error => { |
| 975 | this.loadingFindData = false; | 975 | this.loadingFindData = false; |
| 976 | this.snackbar = true; | 976 | this.snackbar = true; |
| 977 | this.text = error.response.data.message; | 977 | this.text = error.response.data.message; |
| 978 | this.text = error.response.data.statusText; | 978 | this.text = error.response.data.statusText; |
| 979 | }); | 979 | }); |
| 980 | }, | 980 | }, |
| 981 | getSections(_id) { | 981 | getSections(_id) { |
| 982 | var token = this.$store.state.token; | 982 | var token = this.$store.state.token; |
| 983 | http() | 983 | http() |
| 984 | .get( | 984 | .get( |
| 985 | "/getSectionsList", | 985 | "/getSectionsList", |
| 986 | { params: { classId: _id } }, | 986 | { params: { classId: _id } }, |
| 987 | { | 987 | { |
| 988 | headers: { Authorization: "Bearer " + token } | 988 | headers: { Authorization: "Bearer " + token } |
| 989 | } | 989 | } |
| 990 | ) | 990 | ) |
| 991 | .then(response => { | 991 | .then(response => { |
| 992 | this.addSection = response.data.data; | 992 | this.addSection = response.data.data; |
| 993 | }) | 993 | }) |
| 994 | .catch(err => { | 994 | .catch(err => { |
| 995 | // console.log("err====>", err); | 995 | // console.log("err====>", err); |
| 996 | }); | 996 | }); |
| 997 | }, | 997 | }, |
| 998 | getTimeTable(item) { | 998 | getTimeTable(item) { |
| 999 | this.showLoader = true; | 999 | this.showLoader = true; |
| 1000 | this.getParticulerLecture = item._id; | 1000 | this.getParticulerLecture = item._id; |
| 1001 | this.getTimeTableDayData(); | 1001 | this.getTimeTableDayData(); |
| 1002 | }, | 1002 | }, |
| 1003 | getTimeTableDayData() { | 1003 | getTimeTableDayData() { |
| 1004 | var token = this.$store.state.token; | 1004 | var token = this.$store.state.token; |
| 1005 | http() | 1005 | http() |
| 1006 | .get( | 1006 | .get( |
| 1007 | "/getParticularTimeTable", | 1007 | "/getParticularTimeTable", |
| 1008 | { params: { timeTableId: this.getParticulerLecture } }, | 1008 | { params: { timeTableId: this.getParticulerLecture } }, |
| 1009 | { | 1009 | { |
| 1010 | headers: { Authorization: "Bearer " + token } | 1010 | headers: { Authorization: "Bearer " + token } |
| 1011 | } | 1011 | } |
| 1012 | ) | 1012 | ) |
| 1013 | .then(response => { | 1013 | .then(response => { |
| 1014 | this.timeTableList = response.data.data; | 1014 | this.timeTableList = response.data.data; |
| 1015 | this.showLoader = false; | 1015 | this.showLoader = false; |
| 1016 | }) | 1016 | }) |
| 1017 | .catch(err => { | 1017 | .catch(err => { |
| 1018 | this.showLoader = false; | 1018 | this.showLoader = false; |
| 1019 | // console.log("err====>", err); | 1019 | // console.log("err====>", err); |
| 1020 | }); | 1020 | }); |
| 1021 | }, | 1021 | }, |
| 1022 | pickFile() { | 1022 | pickFile() { |
| 1023 | this.$refs.image.click(); | 1023 | this.$refs.image.click(); |
| 1024 | }, | 1024 | }, |
| 1025 | 1025 | ||
| 1026 | onFilePicked(e) { | 1026 | onFilePicked(e) { |
| 1027 | const files = e.target.files; | 1027 | const files = e.target.files; |
| 1028 | this.imageData.upload = e.target.files[0]; | 1028 | this.imageData.upload = e.target.files[0]; |
| 1029 | if (files[0] !== undefined) { | 1029 | if (files[0] !== undefined) { |
| 1030 | this.imageName = files[0].name; | 1030 | this.imageName = files[0].name; |
| 1031 | if (this.imageName.lastIndexOf(".") <= 0) { | 1031 | if (this.imageName.lastIndexOf(".") <= 0) { |
| 1032 | return; | 1032 | return; |
| 1033 | } | 1033 | } |
| 1034 | const fr = new FileReader(); | 1034 | const fr = new FileReader(); |
| 1035 | fr.readAsDataURL(files[0]); | 1035 | fr.readAsDataURL(files[0]); |
| 1036 | fr.addEventListener("load", () => { | 1036 | fr.addEventListener("load", () => { |
| 1037 | this.imageUrl = fr.result; | 1037 | this.imageUrl = fr.result; |
| 1038 | this.imageFile = files[0]; // this is an image file that can be sent to server... | 1038 | this.imageFile = files[0]; // this is an image file that can be sent to server... |
| 1039 | this.imageData.imageUrl = URL.createObjectURL(this.imageFile); | 1039 | this.imageData.imageUrl = URL.createObjectURL(this.imageFile); |
| 1040 | }); | 1040 | }); |
| 1041 | } else { | 1041 | } else { |
| 1042 | this.imageName = ""; | 1042 | this.imageName = ""; |
| 1043 | this.imageFile = ""; | 1043 | this.imageFile = ""; |
| 1044 | this.imageUrl = ""; | 1044 | this.imageUrl = ""; |
| 1045 | } | 1045 | } |
| 1046 | }, | 1046 | }, |
| 1047 | // getTimeTableList() { | 1047 | // getTimeTableList() { |
| 1048 | // this.showLoader = true; | 1048 | // this.showLoader = true; |
| 1049 | // var token = this.$store.state.token; | 1049 | // var token = this.$store.state.token; |
| 1050 | // http() | 1050 | // http() |
| 1051 | // .get("/getTimeTablesList", { | 1051 | // .get("/getTimeTablesList", { |
| 1052 | // headers: { Authorization: "Bearer " + token } | 1052 | // headers: { Authorization: "Bearer " + token } |
| 1053 | // }) | 1053 | // }) |
| 1054 | // .then(response => { | 1054 | // .then(response => { |
| 1055 | // this.desserts = response.data.data; | 1055 | // this.desserts = response.data.data; |
| 1056 | // this.showLoader = false; | 1056 | // this.showLoader = false; |
| 1057 | // // console.log("getTimeTableList=====>", response.data.data); | 1057 | // // console.log("getTimeTableList=====>", response.data.data); |
| 1058 | // }) | 1058 | // }) |
| 1059 | // .catch(err => { | 1059 | // .catch(err => { |
| 1060 | // // console.log("err====>", err); | 1060 | // // console.log("err====>", err); |
| 1061 | // this.showLoader = false; | 1061 | // this.showLoader = false; |
| 1062 | // this.$router.replace({ path: "/" }); | 1062 | // this.$router.replace({ path: "/" }); |
| 1063 | // }); | 1063 | // }); |
| 1064 | // }, | 1064 | // }, |
| 1065 | editItem(item) { | 1065 | editItem(item) { |
| 1066 | this.editedIndex = this.desserts.indexOf(item); | 1066 | this.editedIndex = this.desserts.indexOf(item); |
| 1067 | this.editedItem = Object.assign({}, item); | 1067 | this.editedItem = Object.assign({}, item); |
| 1068 | this.dialog = true; | 1068 | this.dialog = true; |
| 1069 | }, | 1069 | }, |
| 1070 | updateTimeTable(timeToUpdate, classToUpdate) { | 1070 | updateTimeTable(timeToUpdate, classToUpdate) { |
| 1071 | // console.log( | 1071 | // console.log( |
| 1072 | // "timeToUpdate, classToUpdate", | 1072 | // "timeToUpdate, classToUpdate", |
| 1073 | // timeToUpdate._id, | 1073 | // timeToUpdate._id, |
| 1074 | // classToUpdate.schedule | 1074 | // classToUpdate.schedule |
| 1075 | // ); | 1075 | // ); |
| 1076 | for (let i = 0; i < classToUpdate.schedule.length; i++) { | 1076 | for (let i = 0; i < classToUpdate.schedule.length; i++) { |
| 1077 | this.updateLecturesId.scheduleId = classToUpdate.schedule[i]._id; | 1077 | this.updateLecturesId.scheduleId = classToUpdate.schedule[i]._id; |
| 1078 | } | 1078 | } |
| 1079 | (this.updateLecturesId.lectureId = timeToUpdate._id), | 1079 | (this.updateLecturesId.lectureId = timeToUpdate._id), |
| 1080 | (this.updateLectures = timeToUpdate); | 1080 | (this.updateLectures = timeToUpdate); |
| 1081 | this.dialogUpdateLectures = true; | 1081 | this.dialogUpdateLectures = true; |
| 1082 | }, | 1082 | }, |
| 1083 | addLecture(scheduleId, timeTableId) { | 1083 | addLecture(scheduleId, timeTableId) { |
| 1084 | this.addlectures.scheduleId = scheduleId; | 1084 | this.addlectures.scheduleId = scheduleId; |
| 1085 | this.addlectures.timeTableId = timeTableId; | 1085 | this.addlectures.timeTableId = timeTableId; |
| 1086 | this.dialogAddLecture = true; | 1086 | this.dialogAddLecture = true; |
| 1087 | }, | 1087 | }, |
| 1088 | AddLecture() { | 1088 | AddLecture() { |
| 1089 | if (this.$refs.lectureForm.validate()) { | 1089 | if (this.$refs.lectureForm.validate()) { |
| 1090 | http() | 1090 | http() |
| 1091 | .post("/addLecture", this.addlectures) | 1091 | .post("/addLecture", this.addlectures) |
| 1092 | .then(response => { | 1092 | .then(response => { |
| 1093 | this.snackbar = true; | 1093 | this.snackbar = true; |
| 1094 | this.text = "New Add Lecture successfully"; | 1094 | this.text = "New Add Lecture successfully"; |
| 1095 | var token = this.$store.state.token; | 1095 | var token = this.$store.state.token; |
| 1096 | http() | 1096 | http() |
| 1097 | .get( | 1097 | .get( |
| 1098 | "/getParticularTimeTable", | 1098 | "/getParticularTimeTable", |
| 1099 | { params: { timeTableId: this.getParticulerLecture } }, | 1099 | { params: { timeTableId: this.getParticulerLecture } }, |
| 1100 | { | 1100 | { |
| 1101 | headers: { Authorization: "Bearer " + token } | 1101 | headers: { Authorization: "Bearer " + token } |
| 1102 | } | 1102 | } |
| 1103 | ) | 1103 | ) |
| 1104 | .then(response => { | 1104 | .then(response => { |
| 1105 | this.timeTableList = response.data.data; | 1105 | this.timeTableList = response.data.data; |
| 1106 | this.snackbar = true; | 1106 | this.snackbar = true; |
| 1107 | this.text = response.data.message; | 1107 | this.text = response.data.message; |
| 1108 | this.color = "green"; | 1108 | this.color = "green"; |
| 1109 | this.showLoader = false; | 1109 | this.showLoader = false; |
| 1110 | }) | 1110 | }) |
| 1111 | .catch(err => { | 1111 | .catch(err => { |
| 1112 | this.showLoader = false; | 1112 | this.showLoader = false; |
| 1113 | // console.log("err====>", err); | 1113 | // console.log("err====>", err); |
| 1114 | this.snackbar = true; | 1114 | this.snackbar = true; |
| 1115 | this.color = "error"; | 1115 | this.color = "error"; |
| 1116 | this.text = error.response.data.message; | 1116 | this.text = error.response.data.message; |
| 1117 | }); | 1117 | }); |
| 1118 | this.closedialogLecture(); | 1118 | this.closedialogLecture(); |
| 1119 | this.clearLeactureData(); | 1119 | this.clearLeactureData(); |
| 1120 | }) | 1120 | }) |
| 1121 | .catch(error => { | 1121 | .catch(error => { |
| 1122 | this.snackbar = true; | 1122 | this.snackbar = true; |
| 1123 | this.text = error.response.data.message; | 1123 | this.text = error.response.data.message; |
| 1124 | this.text = error.response.data.statusText; | 1124 | this.text = error.response.data.statusText; |
| 1125 | }); | 1125 | }); |
| 1126 | } | 1126 | } |
| 1127 | }, | 1127 | }, |
| 1128 | updateParticularTable() { | 1128 | updateParticularTable() { |
| 1129 | let EditLecture = { | 1129 | let EditLecture = { |
| 1130 | lectureId: this.updateLecturesId.lectureId, | 1130 | lectureId: this.updateLecturesId.lectureId, |
| 1131 | scheduleId: this.updateLecturesId.scheduleId, | 1131 | scheduleId: this.updateLecturesId.scheduleId, |
| 1132 | updatedLecture: { | 1132 | updatedLecture: { |
| 1133 | timeIn: this.updateLectures.timeIn, | 1133 | timeIn: this.updateLectures.timeIn, |
| 1134 | timeOut: this.updateLectures.timeOut, | 1134 | timeOut: this.updateLectures.timeOut, |
| 1135 | subjectName: this.updateLectures.subjectName, | 1135 | subjectName: this.updateLectures.subjectName, |
| 1136 | teacherId: this.updateLectures.teacherId | 1136 | teacherId: this.updateLectures.teacherId |
| 1137 | } | 1137 | } |
| 1138 | }; | 1138 | }; |
| 1139 | http() | 1139 | http() |
| 1140 | .put("/updateLecture", EditLecture) | 1140 | .put("/updateLecture", EditLecture) |
| 1141 | .then(response => { | 1141 | .then(response => { |
| 1142 | console.log("updateLecture", EditLecture); | 1142 | console.log("updateLecture", EditLecture); |
| 1143 | this.snackbar = true; | 1143 | this.snackbar = true; |
| 1144 | this.text = response.data.message; | 1144 | this.text = response.data.message; |
| 1145 | this.color = "green"; | 1145 | this.color = "green"; |
| 1146 | this.closeUpdateLectures(); | 1146 | this.closeUpdateLectures(); |
| 1147 | }) | 1147 | }) |
| 1148 | .catch(error => { | 1148 | .catch(error => { |
| 1149 | // console.log(error); | 1149 | // console.log(error); |
| 1150 | 1150 | ||
| 1151 | this.snackbar = true; | 1151 | this.snackbar = true; |
| 1152 | this.color = "error"; | 1152 | this.color = "error"; |
| 1153 | this.text = error.response.data.message; | 1153 | this.text = error.response.data.message; |
| 1154 | if (error.response.data.statusText) { | 1154 | if (error.response.data.statusText) { |
| 1155 | this.text = error.response.data.statusText; | 1155 | this.text = error.response.data.statusText; |
| 1156 | } | 1156 | } |
| 1157 | }); | 1157 | }); |
| 1158 | }, | 1158 | }, |
| 1159 | deleteItem(item) { | 1159 | deleteItem(item) { |
| 1160 | let deleteTimeTable = { | 1160 | let deleteTimeTable = { |
| 1161 | timeTableId: item._id | 1161 | timeTableId: item._id |
| 1162 | }; | 1162 | }; |
| 1163 | http() | 1163 | http() |
| 1164 | .delete( | 1164 | .delete( |
| 1165 | "/deleteTimeTable", | 1165 | "/deleteTimeTable", |
| 1166 | confirm("Are you sure you want to delete this?") && { | 1166 | confirm("Are you sure you want to delete this?") && { |
| 1167 | params: deleteTimeTable | 1167 | params: deleteTimeTable |
| 1168 | } | 1168 | } |
| 1169 | ) | 1169 | ) |
| 1170 | .then(response => { | 1170 | .then(response => { |
| 1171 | // console.log("deleteUers",deleteTimeTable) | 1171 | // console.log("deleteUers",deleteTimeTable) |
| 1172 | this.snackbar = true; | 1172 | this.snackbar = true; |
| 1173 | this.text = response.data.message; | 1173 | this.text = response.data.message; |
| 1174 | this.color = "green"; | 1174 | this.color = "green"; |
| 1175 | this.findTimeTable(); | 1175 | this.findTimeTable(); |
| 1176 | }) | 1176 | }) |
| 1177 | .catch(error => { | 1177 | .catch(error => { |
| 1178 | // console.log(error); | 1178 | // console.log(error); |
| 1179 | }); | 1179 | }); |
| 1180 | }, | 1180 | }, |
| 1181 | close() { | 1181 | close() { |
| 1182 | this.dialog = false; | 1182 | this.dialog = false; |
| 1183 | }, | 1183 | }, |
| 1184 | close1() { | 1184 | close1() { |
| 1185 | this.dialog1 = false; | 1185 | this.dialog1 = false; |
| 1186 | }, | 1186 | }, |
| 1187 | closedialogLecture() { | 1187 | closedialogLecture() { |
| 1188 | this.dialogAddLecture = false; | 1188 | this.dialogAddLecture = false; |
| 1189 | }, | 1189 | }, |
| 1190 | closeUpdateLectures() { | 1190 | closeUpdateLectures() { |
| 1191 | this.dialogUpdateLectures = false; | 1191 | this.dialogUpdateLectures = false; |
| 1192 | }, | 1192 | }, |
| 1193 | submit() { | 1193 | submit() { |
| 1194 | if (this.$refs.form.validate()) { | 1194 | if (this.$refs.form.validate()) { |
| 1195 | let imageData = new FormData(); | 1195 | let imageData = new FormData(); |
| 1196 | imageData.append("upload", this.imageFile); | 1196 | imageData.append("upload", this.imageFile); |
| 1197 | let addTimeTable = { | 1197 | let addTimeTable = { |
| 1198 | sectionId: this.timeTable.selectSection, | 1198 | sectionId: this.timeTable.selectSection, |
| 1199 | classId: this.timeTable.select, | 1199 | classId: this.timeTable.select, |
| 1200 | schedule: [ | 1200 | schedule: [ |
| 1201 | { | 1201 | { |
| 1202 | day: this.timeTable.selectDay, | 1202 | day: this.timeTable.selectDay, |
| 1203 | lectures: [ | 1203 | lectures: [ |
| 1204 | { | 1204 | { |
| 1205 | timeIn: this.timeTable.timeIn, | 1205 | timeIn: this.timeTable.timeIn, |
| 1206 | timeOut: this.timeTable.timeOut, | 1206 | timeOut: this.timeTable.timeOut, |
| 1207 | subjectName: this.timeTable.subjectName, | 1207 | subjectName: this.timeTable.subjectName, |
| 1208 | teacherId: this.timeTable.selectTeacher | 1208 | teacherId: this.timeTable.selectTeacher |
| 1209 | } | 1209 | } |
| 1210 | ] | 1210 | ] |
| 1211 | } | 1211 | } |
| 1212 | ] | 1212 | ] |
| 1213 | }; | 1213 | }; |
| 1214 | this.loading = true; | 1214 | this.loading = true; |
| 1215 | http() | 1215 | http() |
| 1216 | .post("/createTimeTable", addTimeTable) | 1216 | .post("/createTimeTable", addTimeTable) |
| 1217 | .then(response => { | 1217 | .then(response => { |
| 1218 | // console.log("addTimeTable=====>", addTimeTable); | 1218 | // console.log("addTimeTable=====>", addTimeTable); |
| 1219 | if ((this.snackbar = true)) { | 1219 | if ((this.snackbar = true)) { |
| 1220 | this.text = "New Time Table added successfully"; | 1220 | this.text = "New Time Table added successfully"; |
| 1221 | } | 1221 | } |
| 1222 | this.clear(); | 1222 | this.clear(); |
| 1223 | this.addTimeTableDialog = false; | 1223 | this.addTimeTableDialog = false; |
| 1224 | this.loading = false; | 1224 | this.loading = false; |
| 1225 | }) | 1225 | }) |
| 1226 | .catch(error => { | 1226 | .catch(error => { |
| 1227 | // console.log(error); | 1227 | // console.log(error); |
| 1228 | if ((this.snackbar = true)) { | 1228 | if ((this.snackbar = true)) { |
| 1229 | this.text = error.response.data.message; | 1229 | this.text = error.response.data.message; |
| 1230 | } | 1230 | } |
| 1231 | this.loading = false; | 1231 | this.loading = false; |
| 1232 | }); | 1232 | }); |
| 1233 | } | 1233 | } |
| 1234 | }, | 1234 | }, |
| 1235 | clear() { | 1235 | clear() { |
| 1236 | this.$refs.form.reset(); | 1236 | this.$refs.form.reset(); |
| 1237 | }, | 1237 | }, |
| 1238 | clearLeactureData() { | 1238 | clearLeactureData() { |
| 1239 | this.$refs.lectureForm.reset(); | 1239 | this.$refs.lectureForm.reset(); |
| 1240 | }, | 1240 | }, |
| 1241 | save() { | 1241 | save() { |
| 1242 | let imageData = new FormData(); | 1242 | let imageData = new FormData(); |
| 1243 | imageData.append("upload", this.imageFile); | 1243 | imageData.append("upload", this.imageFile); |
| 1244 | // console.log(imageData); | 1244 | // console.log(imageData); |
| 1245 | let editTimeTable = { | 1245 | let editTimeTable = { |
| 1246 | timeTableId: this.editedItem._id, | 1246 | timeTableId: this.editedItem._id, |
| 1247 | classId: this.editedItem.classNum, | 1247 | classId: this.editedItem.classNum, |
| 1248 | sectionId: this.editedItem.selectSection | 1248 | sectionId: this.editedItem.selectSection |
| 1249 | // imageData | 1249 | // imageData |
| 1250 | }; | 1250 | }; |
| 1251 | http() | 1251 | http() |
| 1252 | .put("/updateTimeTable", editTimeTable) | 1252 | .put("/updateTimeTable", editTimeTable) |
| 1253 | .then(response => { | 1253 | .then(response => { |
| 1254 | console.log("editTimeTable", editTimeTable); | 1254 | console.log("editTimeTable", editTimeTable); |
| 1255 | if ((this.snackbar = true)) { | 1255 | if ((this.snackbar = true)) { |
| 1256 | this.text = "Successfully Edit Existing Time Table"; | 1256 | this.text = "Successfully Edit Existing Time Table"; |
| 1257 | } | 1257 | } |
| 1258 | this.findTimeTable(); | 1258 | this.findTimeTable(); |
| 1259 | }) | 1259 | }) |
| 1260 | .catch(error => { | 1260 | .catch(error => { |
| 1261 | // console.log(error); | 1261 | // console.log(error); |
| 1262 | if ((this.snackbar = true)) { | 1262 | if ((this.snackbar = true)) { |
| 1263 | this.text = error.response.data.message; | 1263 | this.text = error.response.data.message; |
| 1264 | } | 1264 | } |
| 1265 | }); | 1265 | }); |
| 1266 | this.close(); | 1266 | this.close(); |
| 1267 | }, | 1267 | }, |
| 1268 | deleteTimeTable(timeToDelete, deleteLectures) { | 1268 | deleteTimeTable(timeToDelete, deleteLectures) { |
| 1269 | let deleteLecture = { | 1269 | let deleteLecture = { |
| 1270 | lectureId: timeToDelete._id | 1270 | lectureId: timeToDelete._id |
| 1271 | }; | 1271 | }; |
| 1272 | http() | 1272 | http() |
| 1273 | .delete( | 1273 | .delete( |
| 1274 | "/deleteLecture", | 1274 | "/deleteLecture", |
| 1275 | confirm("Are you sure you want to delete this?") && { | 1275 | confirm("Are you sure you want to delete this?") && { |
| 1276 | params: deleteLecture | 1276 | params: deleteLecture |
| 1277 | } | 1277 | } |
| 1278 | ) | 1278 | ) |
| 1279 | .then(response => { | 1279 | .then(response => { |
| 1280 | if ((this.snackbar = true)) { | 1280 | if ((this.snackbar = true)) { |
| 1281 | this.text = "Successfully delete Existing Time Table"; | 1281 | this.text = "Successfully delete Existing Time Table"; |
| 1282 | } | 1282 | } |
| 1283 | const index = this.timeTableList.schedule.indexOf(deleteLectures); | 1283 | const index = this.timeTableList.schedule.indexOf(deleteLectures); |
| 1284 | for (let i = 0; i < this.timeTableList.schedule.length; i++) { | 1284 | for (let i = 0; i < this.timeTableList.schedule.length; i++) { |
| 1285 | this.timeTableList.schedule[i].lectures.splice(index, 1); | 1285 | this.timeTableList.schedule[i].lectures.splice(index, 1); |
| 1286 | } | 1286 | } |
| 1287 | }) | 1287 | }) |
| 1288 | .catch(error => { | 1288 | .catch(error => { |
| 1289 | console.log(error); | 1289 | console.log(error); |
| 1290 | }); | 1290 | }); |
| 1291 | }, | 1291 | }, |
| 1292 | addSchedule(id) { | 1292 | addSchedule(id) { |
| 1293 | this.scheduleDayId = id; | 1293 | this.scheduleDayId = id; |
| 1294 | this.dialogSchedule = true; | 1294 | this.dialogSchedule = true; |
| 1295 | }, | 1295 | }, |
| 1296 | submitSchedule() { | 1296 | submitSchedule() { |
| 1297 | if (this.$refs.formAddDay.validate()) { | 1297 | if (this.$refs.formAddDay.validate()) { |
| 1298 | let scheduleDayData = { | 1298 | let scheduleDayData = { |
| 1299 | timeTableId: this.scheduleDayId, | 1299 | timeTableId: this.scheduleDayId, |
| 1300 | day: this.schedule.selectDay | 1300 | day: this.schedule.selectDay |
| 1301 | }; | 1301 | }; |
| 1302 | http() | 1302 | http() |
| 1303 | .post("/addSchedule", scheduleDayData) | 1303 | .post("/addSchedule", scheduleDayData) |
| 1304 | .then(response => { | 1304 | .then(response => { |
| 1305 | this.snackbar = true; | 1305 | this.snackbar = true; |
| 1306 | this.text = "New Schedule Day added successfully"; | 1306 | this.text = "New Schedule Day added successfully"; |
| 1307 | this.dialogSchedule = false; | 1307 | this.dialogSchedule = false; |
| 1308 | this.loading = false; | 1308 | this.loading = false; |
| 1309 | this.getTimeTableDayData(); | 1309 | this.getTimeTableDayData(); |
| 1310 | }) | 1310 | }) |
| 1311 | .catch(error => { | 1311 | .catch(error => { |
| 1312 | // console.log(error); | 1312 | // console.log(error); |
| 1313 | this.snackbar = true; | 1313 | this.snackbar = true; |
| 1314 | this.text = error.response.data.message; | 1314 | this.text = error.response.data.message; |
| 1315 | this.loading = false; | 1315 | this.loading = false; |
| 1316 | }); | 1316 | }); |
| 1317 | } | 1317 | } |
| 1318 | }, | 1318 | }, |
| 1319 | displaySearch() { | 1319 | displaySearch() { |
| 1320 | (this.show = false), (this.showSearch = true); | 1320 | (this.show = false), (this.showSearch = true); |
| 1321 | }, | 1321 | }, |
| 1322 | closeSearch() { | 1322 | closeSearch() { |
| 1323 | this.showSearch = false; | 1323 | this.showSearch = false; |
| 1324 | this.show = true; | 1324 | this.show = true; |
| 1325 | this.search = ""; | 1325 | this.search = ""; |
| 1326 | } | 1326 | } |
| 1327 | }, | 1327 | }, |
| 1328 | mounted() { | 1328 | mounted() { |
| 1329 | // this.getTimeTableList(); | 1329 | // this.getTimeTableList(); |
| 1330 | var token = this.$store.state.token; | 1330 | var token = this.$store.state.token; |
| 1331 | http() | 1331 | http() |
| 1332 | .get("/getClassesList", { | 1332 | .get("/getClassesList", { |
| 1333 | headers: { Authorization: "Bearer " + token } | 1333 | headers: { Authorization: "Bearer " + token } |
| 1334 | }) | 1334 | }) |
| 1335 | .then(response => { | 1335 | .then(response => { |
| 1336 | this.addclass = response.data.data; | 1336 | this.addclass = response.data.data; |
| 1337 | // console.log("getClassesList=====>",this.addclass) | 1337 | // console.log("getClassesList=====>",this.addclass) |
| 1338 | }) | 1338 | }) |
| 1339 | .catch(error => { | 1339 | .catch(error => { |
| 1340 | this.showLoader = false; | 1340 | this.showLoader = false; |
| 1341 | if (error.response.status === 401) { | 1341 | if (error.response.status === 401) { |
| 1342 | this.$router.replace({ path: "/" }); | 1342 | this.$router.replace({ path: "/" }); |
| 1343 | this.$store.dispatch("setToken", null); | 1343 | this.$store.dispatch("setToken", null); |
| 1344 | this.$store.dispatch("Id", null); | 1344 | this.$store.dispatch("Id", null); |
| 1345 | this.$store.dispatch("Role", null); | 1345 | this.$store.dispatch("Role", null); |
| 1346 | } | 1346 | } |
| 1347 | }); | 1347 | }); |
| 1348 | 1348 | ||
| 1349 | http() | 1349 | http() |
| 1350 | .get("/getTeachersList", { | 1350 | .get("/getTeachersList", { |
| 1351 | headers: { Authorization: "Bearer " + token } | 1351 | headers: { Authorization: "Bearer " + token } |
| 1352 | }) | 1352 | }) |
| 1353 | .then(response => { | 1353 | .then(response => { |
| 1354 | this.addTeachers = response.data.data; | 1354 | this.addTeachers = response.data.data; |
| 1355 | // console.log("getClassesList=====>",this.addTeachers) | 1355 | // console.log("getClassesList=====>",this.addTeachers) |
| 1356 | }) | 1356 | }) |
| 1357 | .catch(error => { | 1357 | .catch(error => { |
| 1358 | this.showLoader = false; | 1358 | this.showLoader = false; |
| 1359 | if (error.response.status === 401) { | 1359 | if (error.response.status === 401) { |
| 1360 | this.$router.replace({ path: "/" }); | 1360 | this.$router.replace({ path: "/" }); |
| 1361 | this.$store.dispatch("setToken", null); | 1361 | this.$store.dispatch("setToken", null); |
| 1362 | this.$store.dispatch("Id", null); | 1362 | this.$store.dispatch("Id", null); |
| 1363 | this.$store.dispatch("Role", null); | 1363 | this.$store.dispatch("Role", null); |
| 1364 | } | 1364 | } |
| 1365 | }); | 1365 | }); |
| 1366 | } | 1366 | } |
| 1367 | }; | 1367 | }; |
| 1368 | </script> | 1368 | </script> |
src/pages/User/user.vue
| 1 | <template> | 1 | <template> |
| 2 | <v-container fluid class="body-color"> | 2 | <v-container fluid class="body-color"> |
| 3 | <!-- ****** EDIT USERS DETAILS ****** --> | 3 | <!-- ****** EDIT USERS DETAILS ****** --> |
| 4 | <v-dialog v-model="editUserDialog" max-width="1100px" scrollable> | 4 | <v-dialog v-model="editUserDialog" max-width="1100px" 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 User</label> | 8 | <label class="title text-xs-center">Edit User</label> |
| 9 | <v-icon size="24" class="right" @click="editUserDialog = false">cancel</v-icon> | 9 | <v-icon size="24" class="right" @click="editUserDialog = 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 my-4"> | 14 | <v-flex xs12 class="text-xs-center text-sm-center text-md-center text-lg-center my-4"> |
| 15 | <v-avatar size="120px"> | 15 | <v-avatar size="120px"> |
| 16 | <img src="/static/icon/user.png" v-if="!editedItem.profilePicUrl && !imageUrl" /> | 16 | <img src="/static/icon/user.png" v-if="!editedItem.profilePicUrl && !imageUrl" /> |
| 17 | <img | 17 | <img |
| 18 | :src="editedItem.profilePicUrl" | 18 | :src="editedItem.profilePicUrl" |
| 19 | v-else-if="editedItem.profilePicUrl && !imageUrl" | 19 | v-else-if="editedItem.profilePicUrl && !imageUrl" |
| 20 | /> | 20 | /> |
| 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:150px" | 25 | style="border-radius:50%; width:150px" |
| 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 sm6> | 38 | <v-flex xs12 sm6> |
| 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 class="ml-3"> | 43 | <v-flex xs8 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 Name" | 46 | placeholder="fill your 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-flex xs12 sm6> | 54 | <v-flex xs12 sm6> |
| 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">Email ID:</label> | 57 | <label class="right">Email ID:</label> |
| 58 | </v-flex> | 58 | </v-flex> |
| 59 | <v-flex xs8 class="ml-3"> | 59 | <v-flex xs8 class="ml-3"> |
| 60 | <v-text-field | 60 | <v-text-field |
| 61 | placeholder="fill your email" | 61 | placeholder="fill your email" |
| 62 | v-model="editedItem.email" | 62 | v-model="editedItem.email" |
| 63 | type="text" | 63 | type="text" |
| 64 | name="email" | 64 | name="email" |
| 65 | required | 65 | required |
| 66 | ></v-text-field> | 66 | ></v-text-field> |
| 67 | </v-flex> | 67 | </v-flex> |
| 68 | </v-layout> | 68 | </v-layout> |
| 69 | </v-flex> | 69 | </v-flex> |
| 70 | </v-layout> | 70 | </v-layout> |
| 71 | <v-layout wrap> | 71 | <v-layout wrap> |
| 72 | <v-flex xs12 sm6> | 72 | <v-flex xs12 sm6> |
| 73 | <v-layout> | 73 | <v-layout> |
| 74 | <v-flex xs4 class="pt-4 subheading"> | 74 | <v-flex xs4 class="pt-4 subheading"> |
| 75 | <label class="right hidden-sm-only hidden-xs-only">Date of Birth:</label> | 75 | <label class="right hidden-sm-only hidden-xs-only">Date of Birth:</label> |
| 76 | <label class="right hidden-lg-only hidden-xl-only hidden-md-only">D.O.B:</label> | 76 | <label class="right hidden-lg-only hidden-xl-only hidden-md-only">D.O.B:</label> |
| 77 | </v-flex> | 77 | </v-flex> |
| 78 | <v-flex xs8 class="ml-3"> | 78 | <v-flex xs8 class="ml-3"> |
| 79 | <v-menu | 79 | <v-menu |
| 80 | ref="menu" | 80 | ref="menu" |
| 81 | :close-on-content-click="false" | 81 | :close-on-content-click="false" |
| 82 | v-model="menu2" | 82 | v-model="menu2" |
| 83 | :nudge-right="40" | 83 | :nudge-right="40" |
| 84 | lazy | 84 | lazy |
| 85 | transition="scale-transition" | 85 | transition="scale-transition" |
| 86 | offset-y | 86 | offset-y |
| 87 | full-width | 87 | full-width |
| 88 | min-width="290px" | 88 | min-width="290px" |
| 89 | > | 89 | > |
| 90 | <v-text-field | 90 | <v-text-field |
| 91 | slot="activator" | 91 | slot="activator" |
| 92 | v-model="editedItem.dob" | 92 | v-model="editedItem.dob" |
| 93 | placeholder="Select date" | 93 | placeholder="Select date" |
| 94 | ></v-text-field> | 94 | ></v-text-field> |
| 95 | <v-date-picker | 95 | <v-date-picker |
| 96 | ref="picker" | 96 | ref="picker" |
| 97 | v-model="editedItem.dob" | 97 | v-model="editedItem.dob" |
| 98 | :max="new Date().toISOString().substr(0, 10)" | 98 | :max="new Date().toISOString().substr(0, 10)" |
| 99 | min="1950-01-01" | 99 | min="1950-01-01" |
| 100 | @input="menu2 = false" | 100 | @input="menu2 = false" |
| 101 | ></v-date-picker> | 101 | ></v-date-picker> |
| 102 | </v-menu> | 102 | </v-menu> |
| 103 | </v-flex> | 103 | </v-flex> |
| 104 | </v-layout> | 104 | </v-layout> |
| 105 | </v-flex> | 105 | </v-flex> |
| 106 | <v-flex xs12 sm6> | 106 | <v-flex xs12 sm6> |
| 107 | <v-layout> | 107 | <v-layout> |
| 108 | <v-flex xs4 class="pt-4 subheading"> | 108 | <v-flex xs4 class="pt-4 subheading"> |
| 109 | <label class="right">Gender:</label> | 109 | <label class="right">Gender:</label> |
| 110 | </v-flex> | 110 | </v-flex> |
| 111 | <v-flex xs8 class="ml-3"> | 111 | <v-flex xs8 class="ml-3"> |
| 112 | <v-select | 112 | <v-select |
| 113 | :items="gender" | 113 | :items="gender" |
| 114 | v-model="editedItem.gender" | 114 | v-model="editedItem.gender" |
| 115 | label="Select gender" | 115 | label="Select gender" |
| 116 | name="gender" | 116 | name="gender" |
| 117 | required | 117 | required |
| 118 | ></v-select> | 118 | ></v-select> |
| 119 | </v-flex> | 119 | </v-flex> |
| 120 | </v-layout> | 120 | </v-layout> |
| 121 | </v-flex> | 121 | </v-flex> |
| 122 | </v-layout> | 122 | </v-layout> |
| 123 | <v-layout wrap> | 123 | <v-layout wrap> |
| 124 | <v-flex xs12 sm6> | 124 | <v-flex xs12 sm6> |
| 125 | <v-layout> | 125 | <v-layout> |
| 126 | <v-flex xs4 class="pt-4 subheading"> | 126 | <v-flex xs4 class="pt-4 subheading"> |
| 127 | <label class="right">Religion:</label> | 127 | <label class="right">Religion:</label> |
| 128 | </v-flex> | 128 | </v-flex> |
| 129 | <v-flex xs8 class="ml-3"> | 129 | <v-flex xs8 class="ml-3"> |
| 130 | <v-text-field | 130 | <v-text-field |
| 131 | v-model="editedItem.religion" | 131 | v-model="editedItem.religion" |
| 132 | placeholder="fill your Religion" | 132 | placeholder="fill your Religion" |
| 133 | name="religion" | 133 | name="religion" |
| 134 | type="text" | 134 | type="text" |
| 135 | required | 135 | required |
| 136 | ></v-text-field> | 136 | ></v-text-field> |
| 137 | </v-flex> | 137 | </v-flex> |
| 138 | </v-layout> | 138 | </v-layout> |
| 139 | </v-flex> | 139 | </v-flex> |
| 140 | <v-flex xs12 sm6> | 140 | <v-flex xs12 sm6> |
| 141 | <v-layout> | 141 | <v-layout> |
| 142 | <v-flex xs4 class="pt-4 subheading"> | 142 | <v-flex xs4 class="pt-4 subheading"> |
| 143 | <label class="right">JoiningDate:</label> | 143 | <label class="right">JoiningDate:</label> |
| 144 | </v-flex> | 144 | </v-flex> |
| 145 | <v-flex xs8 class="ml-3"> | 145 | <v-flex xs8 class="ml-3"> |
| 146 | <v-menu | 146 | <v-menu |
| 147 | ref="menu" | 147 | ref="menu" |
| 148 | :close-on-content-click="false" | 148 | :close-on-content-click="false" |
| 149 | v-model="menu3" | 149 | v-model="menu3" |
| 150 | :nudge-right="40" | 150 | :nudge-right="40" |
| 151 | lazy | 151 | lazy |
| 152 | transition="scale-transition" | 152 | transition="scale-transition" |
| 153 | offset-y | 153 | offset-y |
| 154 | full-width | 154 | full-width |
| 155 | min-width="290px" | 155 | min-width="290px" |
| 156 | > | 156 | > |
| 157 | <v-text-field | 157 | <v-text-field |
| 158 | slot="activator" | 158 | slot="activator" |
| 159 | v-model="editedItem.joiningDate" | 159 | v-model="editedItem.joiningDate" |
| 160 | placeholder="Select date" | 160 | placeholder="Select date" |
| 161 | ></v-text-field> | 161 | ></v-text-field> |
| 162 | <v-date-picker | 162 | <v-date-picker |
| 163 | ref="picker" | 163 | ref="picker" |
| 164 | v-model="editedItem.joiningDate" | 164 | v-model="editedItem.joiningDate" |
| 165 | :max="new Date().toISOString().substr(0, 10)" | 165 | :max="new Date().toISOString().substr(0, 10)" |
| 166 | min="1950-01-01" | 166 | min="1950-01-01" |
| 167 | @input="menu3 = false" | 167 | @input="menu3 = false" |
| 168 | ></v-date-picker> | 168 | ></v-date-picker> |
| 169 | </v-menu> | 169 | </v-menu> |
| 170 | </v-flex> | 170 | </v-flex> |
| 171 | </v-layout> | 171 | </v-layout> |
| 172 | </v-flex> | 172 | </v-flex> |
| 173 | </v-layout> | 173 | </v-layout> |
| 174 | <v-layout wrap> | 174 | <v-layout wrap> |
| 175 | <v-flex xs12 sm6> | 175 | <v-flex xs12 sm6> |
| 176 | <v-layout> | 176 | <v-layout> |
| 177 | <v-flex xs4 class="pt-4 subheading"> | 177 | <v-flex xs4 class="pt-4 subheading"> |
| 178 | <label class="right">Phone:</label> | 178 | <label class="right">Phone:</label> |
| 179 | </v-flex> | 179 | </v-flex> |
| 180 | <v-flex xs8 class="ml-3"> | 180 | <v-flex xs8 class="ml-3"> |
| 181 | <v-text-field | 181 | <v-text-field |
| 182 | v-model="editedItem.phone" | 182 | v-model="editedItem.phone" |
| 183 | placeholder="fill your MobileNo" | 183 | placeholder="fill your MobileNo" |
| 184 | name="mobileNo" | 184 | name="mobileNo" |
| 185 | type="number" | 185 | type="number" |
| 186 | required | 186 | required |
| 187 | ></v-text-field> | 187 | ></v-text-field> |
| 188 | </v-flex> | 188 | </v-flex> |
| 189 | </v-layout> | 189 | </v-layout> |
| 190 | </v-flex> | 190 | </v-flex> |
| 191 | <v-flex xs12 sm6> | 191 | <v-flex xs12 sm6> |
| 192 | <v-layout> | 192 | <v-layout> |
| 193 | <v-flex xs4 class="pt-4 subheading"> | 193 | <v-flex xs4 class="pt-4 subheading"> |
| 194 | <label class="right hidden-sm-only hidden-xs-only">Select Role:</label> | 194 | <label class="right hidden-sm-only hidden-xs-only">Select Role:</label> |
| 195 | <label class="right hidden-lg-only hidden-xl-only hidden-md-only">Role:</label> | 195 | <label class="right hidden-lg-only hidden-xl-only hidden-md-only">Role:</label> |
| 196 | </v-flex> | 196 | </v-flex> |
| 197 | <v-flex xs8 class="ml-3"> | 197 | <v-flex xs8 class="ml-3"> |
| 198 | <v-autocomplete | 198 | <v-autocomplete |
| 199 | v-model="editedItem.role" | 199 | v-model="editedItem.role" |
| 200 | :label="editedItem.role" | 200 | :label="editedItem.role" |
| 201 | :items="userRole" | 201 | :items="userRole" |
| 202 | item-text="name" | 202 | item-text="name" |
| 203 | item-value="role" | 203 | item-value="role" |
| 204 | required | 204 | required |
| 205 | ></v-autocomplete> | 205 | ></v-autocomplete> |
| 206 | </v-flex> | 206 | </v-flex> |
| 207 | </v-layout> | 207 | </v-layout> |
| 208 | </v-flex> | 208 | </v-flex> |
| 209 | </v-layout> | 209 | </v-layout> |
| 210 | <v-layout wrap> | 210 | <v-layout wrap> |
| 211 | <v-flex xs12 sm6> | 211 | <v-flex xs12 sm6> |
| 212 | <v-layout> | 212 | <v-layout> |
| 213 | <v-flex xs4 class="pt-4 subheading"> | 213 | <v-flex xs4 class="pt-4 subheading"> |
| 214 | <label class="right hidden-sm-only hidden-xs-only">Uplaod Image:</label> | 214 | <label class="right hidden-sm-only hidden-xs-only">Uplaod Image:</label> |
| 215 | <label class="right hidden-lg-only hidden-xl-only hidden-md-only">Uplaod:</label> | 215 | <label class="right hidden-lg-only hidden-xl-only hidden-md-only">Uplaod:</label> |
| 216 | </v-flex> | 216 | </v-flex> |
| 217 | <v-flex xs8 class="ml-3"> | 217 | <v-flex xs8 class="ml-3"> |
| 218 | <v-text-field | 218 | <v-text-field |
| 219 | label="Select Image" | 219 | label="Select Image" |
| 220 | @click="pickFile" | 220 | @click="pickFile" |
| 221 | v-model="imageName" | 221 | v-model="imageName" |
| 222 | append-icon="attach_file" | 222 | append-icon="attach_file" |
| 223 | ></v-text-field> | 223 | ></v-text-field> |
| 224 | </v-flex> | 224 | </v-flex> |
| 225 | </v-layout> | 225 | </v-layout> |
| 226 | </v-flex> | 226 | </v-flex> |
| 227 | <v-flex xs12 sm6> | 227 | <v-flex xs12 sm6> |
| 228 | <v-layout> | 228 | <v-layout> |
| 229 | <v-flex xs4 class="pt-4 subheading"> | 229 | <v-flex xs4 class="pt-4 subheading"> |
| 230 | <label class="right">Address:</label> | 230 | <label class="right">Address:</label> |
| 231 | </v-flex> | 231 | </v-flex> |
| 232 | <v-flex xs8 class="ml-3"> | 232 | <v-flex xs8 class="ml-3"> |
| 233 | <v-text-field | 233 | <v-text-field |
| 234 | name="input-4-3" | 234 | name="input-4-3" |
| 235 | v-model="editedItem.address" | 235 | v-model="editedItem.address" |
| 236 | placeholder="fill Your Address" | 236 | placeholder="fill Your Address" |
| 237 | required | 237 | required |
| 238 | ></v-text-field> | 238 | ></v-text-field> |
| 239 | </v-flex> | 239 | </v-flex> |
| 240 | </v-layout> | 240 | </v-layout> |
| 241 | </v-flex> | 241 | </v-flex> |
| 242 | </v-layout> | 242 | </v-layout> |
| 243 | <v-layout> | 243 | <v-layout> |
| 244 | <v-flex xs12 sm12> | 244 | <v-flex xs12 sm12> |
| 245 | <v-card-actions class="hidden-sm-only hidden-xs-only"> | 245 | <v-card-actions class="hidden-sm-only hidden-xs-only"> |
| 246 | <v-spacer></v-spacer> | 246 | <v-spacer></v-spacer> |
| 247 | <v-btn round dark :loading="loading" @click="save" class="add-button">Save</v-btn> | 247 | <v-btn round dark :loading="loading" @click="save" class="add-button">Save</v-btn> |
| 248 | </v-card-actions> | 248 | </v-card-actions> |
| 249 | <v-card-actions class="hidden-lg-only hidden-xl-only hidden-md-only"> | 249 | <v-card-actions class="hidden-lg-only hidden-xl-only hidden-md-only"> |
| 250 | <v-spacer></v-spacer> | 250 | <v-spacer></v-spacer> |
| 251 | <v-btn round dark :loading="loading" @click="save" class="add-button">Save</v-btn> | 251 | <v-btn round dark :loading="loading" @click="save" class="add-button">Save</v-btn> |
| 252 | <v-spacer></v-spacer> | 252 | <v-spacer></v-spacer> |
| 253 | </v-card-actions> | 253 | </v-card-actions> |
| 254 | </v-flex> | 254 | </v-flex> |
| 255 | </v-layout> | 255 | </v-layout> |
| 256 | </v-card-text> | 256 | </v-card-text> |
| 257 | </v-card> | 257 | </v-card> |
| 258 | </v-dialog> | 258 | </v-dialog> |
| 259 | <!-- ****** PROFILE User DETAILS ****** --> | 259 | <!-- ****** PROFILE User DETAILS ****** --> |
| 260 | <v-dialog v-model="viewUserDialog" max-width="560px" scrollable> | 260 | <v-dialog v-model="viewUserDialog" max-width="560px" scrollable> |
| 261 | <v-card flat class="card-style pa-3" dark> | 261 | <v-card flat class="card-style pa-3" dark> |
| 262 | <v-layout> | 262 | <v-layout> |
| 263 | <v-flex xs12> | 263 | <v-flex xs12> |
| 264 | <label class="title text-xs-center">View User</label> | 264 | <label class="title text-xs-center">View User</label> |
| 265 | <v-icon size="24" class="right" @click="viewUserDialog = false">cancel</v-icon> | 265 | <v-icon size="24" class="right" @click="viewUserDialog = false">cancel</v-icon> |
| 266 | </v-flex> | 266 | </v-flex> |
| 267 | </v-layout> | 267 | </v-layout> |
| 268 | <v-card-text> | 268 | <v-card-text> |
| 269 | <v-container grid-list-md> | 269 | <v-container grid-list-md> |
| 270 | <v-layout wrap> | 270 | <v-layout wrap> |
| 271 | <v-flex> | 271 | <v-flex> |
| 272 | <v-flex align-center justify-center layout text-xs-center> | 272 | <v-flex align-center justify-center layout text-xs-center> |
| 273 | <v-avatar size="100px"> | 273 | <v-avatar size="100px"> |
| 274 | <img src="/static/icon/user.png" v-if="!editedItem.profilePicUrl" /> | 274 | <img src="/static/icon/user.png" v-if="!editedItem.profilePicUrl" /> |
| 275 | <img :src="editedItem.profilePicUrl" v-else-if="editedItem.profilePicUrl" /> | 275 | <img :src="editedItem.profilePicUrl" v-else-if="editedItem.profilePicUrl" /> |
| 276 | </v-avatar> | 276 | </v-avatar> |
| 277 | </v-flex> | 277 | </v-flex> |
| 278 | <v-layout> | 278 | <v-layout> |
| 279 | <v-flex xs4 sm6> | 279 | <v-flex xs4 sm6> |
| 280 | <h5 class="right my-1"> | 280 | <h5 class="right my-1"> |
| 281 | <b>Name:</b> | 281 | <b>Name:</b> |
| 282 | </h5> | 282 | </h5> |
| 283 | </v-flex> | 283 | </v-flex> |
| 284 | <v-flex sm6 xs8> | 284 | <v-flex sm6 xs8> |
| 285 | <h5 class="my-1">{{ editedItem.name }}</h5> | 285 | <h5 class="my-1">{{ editedItem.name }}</h5> |
| 286 | </v-flex> | 286 | </v-flex> |
| 287 | </v-layout> | 287 | </v-layout> |
| 288 | <v-layout> | 288 | <v-layout> |
| 289 | <v-flex xs4 sm6> | 289 | <v-flex xs4 sm6> |
| 290 | <h5 class="right my-1"> | 290 | <h5 class="right my-1"> |
| 291 | <b>Email:</b> | 291 | <b>Email:</b> |
| 292 | </h5> | 292 | </h5> |
| 293 | </v-flex> | 293 | </v-flex> |
| 294 | <v-flex sm6 xs8> | 294 | <v-flex sm6 xs8> |
| 295 | <h5 class="my-1">{{ editedItem.email }}</h5> | 295 | <h5 class="my-1">{{ editedItem.email }}</h5> |
| 296 | </v-flex> | 296 | </v-flex> |
| 297 | </v-layout> | 297 | </v-layout> |
| 298 | <v-layout> | 298 | <v-layout> |
| 299 | <v-flex xs4 sm6> | 299 | <v-flex xs4 sm6> |
| 300 | <h5 class="right my-1"> | 300 | <h5 class="right my-1"> |
| 301 | <b>Gender:</b> | 301 | <b>Gender:</b> |
| 302 | </h5> | 302 | </h5> |
| 303 | </v-flex> | 303 | </v-flex> |
| 304 | <v-flex sm6 xs8> | 304 | <v-flex sm6 xs8> |
| 305 | <h5 class="my-1">{{ editedItem.gender }}</h5> | 305 | <h5 class="my-1">{{ editedItem.gender }}</h5> |
| 306 | </v-flex> | 306 | </v-flex> |
| 307 | </v-layout> | 307 | </v-layout> |
| 308 | <v-layout> | 308 | <v-layout> |
| 309 | <v-flex xs4 sm6> | 309 | <v-flex xs4 sm6> |
| 310 | <h5 class="right my-1"> | 310 | <h5 class="right my-1"> |
| 311 | <b>Religion:</b> | 311 | <b>Religion:</b> |
| 312 | </h5> | 312 | </h5> |
| 313 | </v-flex> | 313 | </v-flex> |
| 314 | <v-flex sm6 xs8> | 314 | <v-flex sm6 xs8> |
| 315 | <h5 class="my-1">{{ editedItem.religion }}</h5> | 315 | <h5 class="my-1">{{ editedItem.religion }}</h5> |
| 316 | </v-flex> | 316 | </v-flex> |
| 317 | </v-layout> | 317 | </v-layout> |
| 318 | <v-layout> | 318 | <v-layout> |
| 319 | <v-flex xs4 sm6> | 319 | <v-flex xs4 sm6> |
| 320 | <h5 class="right my-1"> | 320 | <h5 class="right my-1"> |
| 321 | <b>Role:</b> | 321 | <b>Role:</b> |
| 322 | </h5> | 322 | </h5> |
| 323 | </v-flex> | 323 | </v-flex> |
| 324 | <v-flex sm6 xs8> | 324 | <v-flex sm6 xs8> |
| 325 | <h5 class="my-1">{{ editedItem.role }}</h5> | 325 | <h5 class="my-1">{{ editedItem.role }}</h5> |
| 326 | </v-flex> | 326 | </v-flex> |
| 327 | </v-layout> | 327 | </v-layout> |
| 328 | <v-layout> | 328 | <v-layout> |
| 329 | <v-flex xs4 sm6> | 329 | <v-flex xs4 sm6> |
| 330 | <h5 class="right my-1"> | 330 | <h5 class="right my-1"> |
| 331 | <b>Phone:</b> | 331 | <b>Phone:</b> |
| 332 | </h5> | 332 | </h5> |
| 333 | </v-flex> | 333 | </v-flex> |
| 334 | <v-flex sm6 xs8> | 334 | <v-flex sm6 xs8> |
| 335 | <h5 class="my-1">{{ editedItem.phone }}</h5> | 335 | <h5 class="my-1">{{ editedItem.phone }}</h5> |
| 336 | </v-flex> | 336 | </v-flex> |
| 337 | </v-layout> | 337 | </v-layout> |
| 338 | <v-layout> | 338 | <v-layout> |
| 339 | <v-flex xs4 sm6> | 339 | <v-flex xs4 sm6> |
| 340 | <h5 class="right my-1"> | 340 | <h5 class="right my-1"> |
| 341 | <b>JoiningDate:</b> | 341 | <b>JoiningDate:</b> |
| 342 | </h5> | 342 | </h5> |
| 343 | </v-flex> | 343 | </v-flex> |
| 344 | <v-flex sm6 xs8> | 344 | <v-flex sm6 xs8> |
| 345 | <h5 class="my-1">{{ dates(editedItem.joiningDate) }}</h5> | 345 | <h5 class="my-1">{{ dates(editedItem.joiningDate) }}</h5> |
| 346 | </v-flex> | 346 | </v-flex> |
| 347 | </v-layout> | 347 | </v-layout> |
| 348 | <v-layout> | 348 | <v-layout> |
| 349 | <v-flex xs4 sm6> | 349 | <v-flex xs4 sm6> |
| 350 | <h5 class="right my-1"> | 350 | <h5 class="right my-1"> |
| 351 | <label class="right hidden-sm-only hidden-xs-only"> | 351 | <label class="right hidden-sm-only hidden-xs-only"> |
| 352 | <b>Date of Birth:</b> | 352 | <b>Date of Birth:</b> |
| 353 | </label> | 353 | </label> |
| 354 | <label class="right hidden-lg-only hidden-xl-only hidden-md-only"> | 354 | <label class="right hidden-lg-only hidden-xl-only hidden-md-only"> |
| 355 | <b>D.O.B:</b> | 355 | <b>D.O.B:</b> |
| 356 | </label> | 356 | </label> |
| 357 | </h5> | 357 | </h5> |
| 358 | </v-flex> | 358 | </v-flex> |
| 359 | <v-flex sm6 xs8> | 359 | <v-flex sm6 xs8> |
| 360 | <h5 class="my-1">{{ dates(editedItem.dob) }}</h5> | 360 | <h5 class="my-1">{{ dates(editedItem.dob) }}</h5> |
| 361 | </v-flex> | 361 | </v-flex> |
| 362 | </v-layout> | 362 | </v-layout> |
| 363 | <v-layout> | 363 | <v-layout> |
| 364 | <v-flex xs4 sm6> | 364 | <v-flex xs4 sm6> |
| 365 | <h5 class="right my-1"> | 365 | <h5 class="right my-1"> |
| 366 | <b>Address:</b> | 366 | <b>Address:</b> |
| 367 | </h5> | 367 | </h5> |
| 368 | </v-flex> | 368 | </v-flex> |
| 369 | <v-flex sm6 xs8> | 369 | <v-flex sm6 xs8> |
| 370 | <h5 class="my-1">{{ editedItem.address }}</h5> | 370 | <h5 class="my-1">{{ editedItem.address }}</h5> |
| 371 | </v-flex> | 371 | </v-flex> |
| 372 | </v-layout> | 372 | </v-layout> |
| 373 | </v-flex> | 373 | </v-flex> |
| 374 | </v-layout> | 374 | </v-layout> |
| 375 | </v-container> | 375 | </v-container> |
| 376 | </v-card-text> | 376 | </v-card-text> |
| 377 | </v-card> | 377 | </v-card> |
| 378 | </v-dialog> | 378 | </v-dialog> |
| 379 | 379 | ||
| 380 | <!-- ****** EXISTING-USER TABLE DATA****** --> | 380 | <!-- ****** EXISTING-USER TABLE DATA****** --> |
| 381 | <v-toolbar color="transparent" flat> | 381 | <v-toolbar color="transparent" flat> |
| 382 | <v-btn | 382 | <v-btn |
| 383 | fab | 383 | fab |
| 384 | dark | 384 | dark |
| 385 | class="open-dialog-button hidden-xl-only hidden-md-only hidden-lg-only" | 385 | class="open-dialog-button hidden-xl-only hidden-md-only hidden-lg-only" |
| 386 | small | 386 | small |
| 387 | @click="addUserDialog = true" | 387 | @click="addUserDialog = true" |
| 388 | > | 388 | > |
| 389 | <v-icon dark>add</v-icon> | 389 | <v-icon dark>add</v-icon> |
| 390 | </v-btn> | 390 | </v-btn> |
| 391 | <v-btn | 391 | <v-btn |
| 392 | round | 392 | round |
| 393 | class="open-dialog-button hidden-sm-only hidden-xs-only" | 393 | class="open-dialog-button hidden-sm-only hidden-xs-only" |
| 394 | dark | 394 | dark |
| 395 | @click="addUserDialog = true" | 395 | @click="addUserDialog = true" |
| 396 | > | 396 | > |
| 397 | <v-icon class="white--text pr-1" size="20">add</v-icon>Add User | 397 | <v-icon class="white--text pr-1" size="20">add</v-icon>Add User |
| 398 | </v-btn> | 398 | </v-btn> |
| 399 | <v-spacer></v-spacer> | 399 | <v-spacer></v-spacer> |
| 400 | <v-card-title class="body-1" v-show="show"> | 400 | <v-card-title class="body-1" v-show="show"> |
| 401 | <v-btn icon large flat @click="displaySearch"> | 401 | <v-btn icon large flat @click="displaySearch"> |
| 402 | <v-avatar size="27"> | 402 | <v-avatar size="27"> |
| 403 | <img src="/static/icon/dashboard icons-49.png" alt="icon" /> | 403 | <img src="/static/icon/search.png" alt="icon" /> |
| 404 | </v-avatar> | 404 | </v-avatar> |
| 405 | </v-btn> | 405 | </v-btn> |
| 406 | </v-card-title> | 406 | </v-card-title> |
| 407 | <v-flex xs8 sm8 lg2 md3 v-show="showSearch"> | 407 | <v-flex xs8 sm8 lg2 md3 v-show="showSearch"> |
| 408 | <v-layout> | 408 | <v-layout> |
| 409 | <v-text-field v-model="search" label="Search" prepend-inner-icon="search" color="primary"></v-text-field> | 409 | <v-text-field v-model="search" label="Search" prepend-inner-icon="search" color="primary"></v-text-field> |
| 410 | <v-icon @click="closeSearch" color="error">close</v-icon> | 410 | <v-icon @click="closeSearch" color="error">close</v-icon> |
| 411 | </v-layout> | 411 | </v-layout> |
| 412 | </v-flex> | 412 | </v-flex> |
| 413 | </v-toolbar> | 413 | </v-toolbar> |
| 414 | <v-data-table :headers="headers" :items="Users" :pagination.sync="pagination" :search="search"> | 414 | <v-data-table :headers="headers" :items="Users" :pagination.sync="pagination" :search="search"> |
| 415 | <template slot="items" slot-scope="props"> | 415 | <template slot="items" slot-scope="props"> |
| 416 | <td class="td td-row">{{ props.index + 1 }}</td> | 416 | <td class="td td-row">{{ props.index + 1 }}</td> |
| 417 | <td class="td td-row text-xs-center"> | 417 | <td class="td td-row text-xs-center"> |
| 418 | <v-avatar size="40"> | 418 | <v-avatar size="40"> |
| 419 | <img :src="props.item.profilePicUrl" v-if="props.item.profilePicUrl" /> | 419 | <img :src="props.item.profilePicUrl" v-if="props.item.profilePicUrl" /> |
| 420 | <img src="/static/icon/user.png" v-else-if="!props.item.profilePicUrl" /> | 420 | <img src="/static/icon/user.png" v-else-if="!props.item.profilePicUrl" /> |
| 421 | </v-avatar> | 421 | </v-avatar> |
| 422 | </td> | 422 | </td> |
| 423 | <td class="text-xs-center td td-row">{{ props.item.name}}</td> | 423 | <td class="text-xs-center td td-row">{{ props.item.name}}</td> |
| 424 | <td class="text-xs-center td td-row">{{ props.item.email }}</td> | 424 | <td class="text-xs-center td td-row">{{ props.item.email }}</td> |
| 425 | <td class="text-xs-center td td-row">{{ dates(props.item.dob) }}</td> | 425 | <td class="text-xs-center td td-row">{{ dates(props.item.dob) }}</td> |
| 426 | <td class="text-xs-center td td-row">{{ dates(props.item.joiningDate)}}</td> | 426 | <td class="text-xs-center td td-row">{{ dates(props.item.joiningDate)}}</td> |
| 427 | <td class="text-xs-center td td-row">{{ props.item.phone }}</td> | 427 | <td class="text-xs-center td td-row">{{ props.item.phone }}</td> |
| 428 | <td class="text-xs-center td td-row"> | 428 | <td class="text-xs-center td td-row"> |
| 429 | <v-switch | 429 | <v-switch |
| 430 | class="pl-3" | 430 | class="pl-3" |
| 431 | v-model="props.item.status" | 431 | v-model="props.item.status" |
| 432 | @change="suspendStatus(props.item.status,props.item._id)" | 432 | @change="suspendStatus(props.item.status,props.item._id)" |
| 433 | ></v-switch> | 433 | ></v-switch> |
| 434 | </td> | 434 | </td> |
| 435 | <td class="text-xs-center td td-row"> | 435 | <td class="text-xs-center td td-row"> |
| 436 | <span> | 436 | <span> |
| 437 | <v-tooltip top> | 437 | <v-tooltip top> |
| 438 | <img | 438 | <img |
| 439 | slot="activator" | 439 | slot="activator" |
| 440 | style="cursor:pointer; width:25px; height:25px; " | 440 | style="cursor:pointer; width:25px; height:25px; " |
| 441 | class="mr-3" | 441 | class="mr-3" |
| 442 | @click="profile(props.item)" | 442 | @click="profile(props.item)" |
| 443 | src="/static/icon/dashboard icons-47.png" | 443 | src="/static/icon/view.png" |
| 444 | /> | 444 | /> |
| 445 | <span>View</span> | 445 | <span>View</span> |
| 446 | </v-tooltip> | 446 | </v-tooltip> |
| 447 | <v-tooltip top> | 447 | <v-tooltip top> |
| 448 | <img | 448 | <img |
| 449 | slot="activator" | 449 | slot="activator" |
| 450 | style="cursor:pointer; width:20px; height:18px; " | 450 | style="cursor:pointer; width:20px; height:18px; " |
| 451 | class="mr-3" | 451 | class="mr-3" |
| 452 | @click="editItem(props.item)" | 452 | @click="editItem(props.item)" |
| 453 | src="/static/icon/dashboard icons-50.png" | 453 | src="/static/icon/edit.png" |
| 454 | /> | 454 | /> |
| 455 | <span>Edit</span> | 455 | <span>Edit</span> |
| 456 | </v-tooltip> | 456 | </v-tooltip> |
| 457 | <v-tooltip top> | 457 | <v-tooltip top> |
| 458 | <img | 458 | <img |
| 459 | slot="activator" | 459 | slot="activator" |
| 460 | style="cursor:pointer; width:20px; height:20px; " | 460 | style="cursor:pointer; width:20px; height:20px; " |
| 461 | class="mr-3" | 461 | class="mr-3" |
| 462 | @click="deleteItem(props.item)" | 462 | @click="deleteItem(props.item)" |
| 463 | src="/static/icon/dashboard icons-51.png" | 463 | src="/static/icon/delete.png" |
| 464 | /> | 464 | /> |
| 465 | <span>Delete</span> | 465 | <span>Delete</span> |
| 466 | </v-tooltip> | 466 | </v-tooltip> |
| 467 | </span> | 467 | </span> |
| 468 | </td> | 468 | </td> |
| 469 | </template> | 469 | </template> |
| 470 | <v-alert | 470 | <v-alert |
| 471 | slot="no-results" | 471 | slot="no-results" |
| 472 | :value="true" | 472 | :value="true" |
| 473 | color="error" | 473 | color="error" |
| 474 | icon="warning" | 474 | icon="warning" |
| 475 | >Your search for "{{ search }}" found no results.</v-alert> | 475 | >Your search for "{{ search }}" found no results.</v-alert> |
| 476 | </v-data-table> | 476 | </v-data-table> |
| 477 | <!-- ****** Add User Data****** --> | 477 | <!-- ****** Add User Data****** --> |
| 478 | <v-dialog v-model="addUserDialog" max-width="900px"> | 478 | <v-dialog v-model="addUserDialog" max-width="900px"> |
| 479 | <v-card flat class="card-style pa-2" dark> | 479 | <v-card flat class="card-style pa-2" dark> |
| 480 | <v-layout> | 480 | <v-layout> |
| 481 | <v-flex xs12> | 481 | <v-flex xs12> |
| 482 | <label class="title text-xs-center">Add User</label> | 482 | <label class="title text-xs-center">Add User</label> |
| 483 | <v-icon size="24" class="right" @click="addUserDialog = false">cancel</v-icon> | 483 | <v-icon size="24" class="right" @click="addUserDialog = false">cancel</v-icon> |
| 484 | </v-flex> | 484 | </v-flex> |
| 485 | </v-layout> | 485 | </v-layout> |
| 486 | <v-form ref="form" v-model="valid" lazy-validation> | 486 | <v-form ref="form" v-model="valid" lazy-validation> |
| 487 | <v-container fluid> | 487 | <v-container fluid> |
| 488 | <v-layout> | 488 | <v-layout> |
| 489 | <v-flex | 489 | <v-flex |
| 490 | xs12 | 490 | xs12 |
| 491 | class="text-xs-center text-sm-center text-md-center text-lg-center my-4 mr-4" | 491 | class="text-xs-center text-sm-center text-md-center text-lg-center my-4 mr-4" |
| 492 | > | 492 | > |
| 493 | <v-avatar size="80px"> | 493 | <v-avatar size="80px"> |
| 494 | <img src="/static/icon/user.png" v-if="!imageUrl" /> | 494 | <img src="/static/icon/user.png" v-if="!imageUrl" /> |
| 495 | </v-avatar> | 495 | </v-avatar> |
| 496 | <img | 496 | <img |
| 497 | :src="imageUrl" | 497 | :src="imageUrl" |
| 498 | height="150" | 498 | height="150" |
| 499 | v-if="imageUrl" | 499 | v-if="imageUrl" |
| 500 | style="border-radius:50%; width:150px" | 500 | style="border-radius:50%; width:150px" |
| 501 | /> | 501 | /> |
| 502 | </v-flex> | 502 | </v-flex> |
| 503 | </v-layout> | 503 | </v-layout> |
| 504 | <v-layout> | 504 | <v-layout> |
| 505 | <v-flex xs12 sm6> | 505 | <v-flex xs12 sm6> |
| 506 | <v-layout> | 506 | <v-layout> |
| 507 | <v-flex xs4 class="pt-4 subheading"> | 507 | <v-flex xs4 class="pt-4 subheading"> |
| 508 | <label class="right">Name:</label> | 508 | <label class="right">Name:</label> |
| 509 | </v-flex> | 509 | </v-flex> |
| 510 | <v-flex xs8 class="ml-3"> | 510 | <v-flex xs8 class="ml-3"> |
| 511 | <v-text-field | 511 | <v-text-field |
| 512 | v-model="addUser.name" | 512 | v-model="addUser.name" |
| 513 | placeholder="fill your Name" | 513 | placeholder="fill your Name" |
| 514 | name="name" | 514 | name="name" |
| 515 | type="text" | 515 | type="text" |
| 516 | :rules="nameRules" | 516 | :rules="nameRules" |
| 517 | required | 517 | required |
| 518 | ></v-text-field> | 518 | ></v-text-field> |
| 519 | </v-flex> | 519 | </v-flex> |
| 520 | </v-layout> | 520 | </v-layout> |
| 521 | </v-flex> | 521 | </v-flex> |
| 522 | <v-flex xs12 sm6> | 522 | <v-flex xs12 sm6> |
| 523 | <v-layout> | 523 | <v-layout> |
| 524 | <v-flex xs4 class="pt-4 subheading"> | 524 | <v-flex xs4 class="pt-4 subheading"> |
| 525 | <label class="right">Email ID:</label> | 525 | <label class="right">Email ID:</label> |
| 526 | </v-flex> | 526 | </v-flex> |
| 527 | <v-flex xs8 class="ml-3"> | 527 | <v-flex xs8 class="ml-3"> |
| 528 | <v-text-field | 528 | <v-text-field |
| 529 | placeholder="fill your email" | 529 | placeholder="fill your email" |
| 530 | :rules="emailRules" | 530 | :rules="emailRules" |
| 531 | v-model="addUser.email" | 531 | v-model="addUser.email" |
| 532 | type="text" | 532 | type="text" |
| 533 | name="email" | 533 | name="email" |
| 534 | required | 534 | required |
| 535 | ></v-text-field> | 535 | ></v-text-field> |
| 536 | </v-flex> | 536 | </v-flex> |
| 537 | </v-layout> | 537 | </v-layout> |
| 538 | </v-flex> | 538 | </v-flex> |
| 539 | </v-layout> | 539 | </v-layout> |
| 540 | <v-layout> | 540 | <v-layout> |
| 541 | <v-flex xs12 sm6> | 541 | <v-flex xs12 sm6> |
| 542 | <v-layout> | 542 | <v-layout> |
| 543 | <v-flex xs4 class="pt-4 subheading"> | 543 | <v-flex xs4 class="pt-4 subheading"> |
| 544 | <label class="right hidden-sm-only hidden-xs-only">Date of Birth:</label> | 544 | <label class="right hidden-sm-only hidden-xs-only">Date of Birth:</label> |
| 545 | <label class="right hidden-lg-only hidden-xl-only hidden-md-only">D.O.B:</label> | 545 | <label class="right hidden-lg-only hidden-xl-only hidden-md-only">D.O.B:</label> |
| 546 | </v-flex> | 546 | </v-flex> |
| 547 | <v-flex xs8 class="ml-3"> | 547 | <v-flex xs8 class="ml-3"> |
| 548 | <v-menu | 548 | <v-menu |
| 549 | ref="menu" | 549 | ref="menu" |
| 550 | :close-on-content-click="false" | 550 | :close-on-content-click="false" |
| 551 | v-model="menu" | 551 | v-model="menu" |
| 552 | :nudge-right="40" | 552 | :nudge-right="40" |
| 553 | lazy | 553 | lazy |
| 554 | transition="scale-transition" | 554 | transition="scale-transition" |
| 555 | offset-y | 555 | offset-y |
| 556 | full-width | 556 | full-width |
| 557 | min-width="290px" | 557 | min-width="290px" |
| 558 | > | 558 | > |
| 559 | <v-text-field | 559 | <v-text-field |
| 560 | slot="activator" | 560 | slot="activator" |
| 561 | :rules="dateRules" | 561 | :rules="dateRules" |
| 562 | v-model="addUser.dob" | 562 | v-model="addUser.dob" |
| 563 | placeholder="Select DOB" | 563 | placeholder="Select DOB" |
| 564 | ></v-text-field> | 564 | ></v-text-field> |
| 565 | <v-date-picker | 565 | <v-date-picker |
| 566 | ref="picker" | 566 | ref="picker" |
| 567 | v-model="addUser.dob" | 567 | v-model="addUser.dob" |
| 568 | :max="new Date().toISOString().substr(0, 10)" | 568 | :max="new Date().toISOString().substr(0, 10)" |
| 569 | min="1950-01-01" | 569 | min="1950-01-01" |
| 570 | @input="menu = false" | 570 | @input="menu = false" |
| 571 | ></v-date-picker> | 571 | ></v-date-picker> |
| 572 | </v-menu> | 572 | </v-menu> |
| 573 | </v-flex> | 573 | </v-flex> |
| 574 | </v-layout> | 574 | </v-layout> |
| 575 | </v-flex> | 575 | </v-flex> |
| 576 | <v-flex xs12 sm6> | 576 | <v-flex xs12 sm6> |
| 577 | <v-layout> | 577 | <v-layout> |
| 578 | <v-flex xs4 class="pt-4 subheading"> | 578 | <v-flex xs4 class="pt-4 subheading"> |
| 579 | <label class="right">Gender:</label> | 579 | <label class="right">Gender:</label> |
| 580 | </v-flex> | 580 | </v-flex> |
| 581 | <v-flex xs8 class="ml-3"> | 581 | <v-flex xs8 class="ml-3"> |
| 582 | <v-select | 582 | <v-select |
| 583 | v-model="addUser.gender" | 583 | v-model="addUser.gender" |
| 584 | :items="gender" | 584 | :items="gender" |
| 585 | label="Selct Gender " | 585 | label="Selct Gender " |
| 586 | :rules="genderRules" | 586 | :rules="genderRules" |
| 587 | required | 587 | required |
| 588 | ></v-select> | 588 | ></v-select> |
| 589 | </v-flex> | 589 | </v-flex> |
| 590 | </v-layout> | 590 | </v-layout> |
| 591 | </v-flex> | 591 | </v-flex> |
| 592 | </v-layout> | 592 | </v-layout> |
| 593 | <v-layout> | 593 | <v-layout> |
| 594 | <v-flex xs12 sm6> | 594 | <v-flex xs12 sm6> |
| 595 | <v-layout> | 595 | <v-layout> |
| 596 | <v-flex xs4 class="pt-4 subheading"> | 596 | <v-flex xs4 class="pt-4 subheading"> |
| 597 | <label class="right">Religion:</label> | 597 | <label class="right">Religion:</label> |
| 598 | </v-flex> | 598 | </v-flex> |
| 599 | <v-flex xs8 class="ml-3"> | 599 | <v-flex xs8 class="ml-3"> |
| 600 | <v-text-field | 600 | <v-text-field |
| 601 | v-model="addUser.religion" | 601 | v-model="addUser.religion" |
| 602 | placeholder="fill your Religion" | 602 | placeholder="fill your Religion" |
| 603 | name="Religion" | 603 | name="Religion" |
| 604 | type="text" | 604 | type="text" |
| 605 | :rules="religionRules" | 605 | :rules="religionRules" |
| 606 | required | 606 | required |
| 607 | ></v-text-field> | 607 | ></v-text-field> |
| 608 | </v-flex> | 608 | </v-flex> |
| 609 | </v-layout> | 609 | </v-layout> |
| 610 | </v-flex> | 610 | </v-flex> |
| 611 | <v-flex xs12 sm6> | 611 | <v-flex xs12 sm6> |
| 612 | <v-layout> | 612 | <v-layout> |
| 613 | <v-flex xs4 class="pt-4 subheading"> | 613 | <v-flex xs4 class="pt-4 subheading"> |
| 614 | <label class="right">JoiningDate:</label> | 614 | <label class="right">JoiningDate:</label> |
| 615 | </v-flex> | 615 | </v-flex> |
| 616 | <v-flex xs8 class="ml-3"> | 616 | <v-flex xs8 class="ml-3"> |
| 617 | <v-menu | 617 | <v-menu |
| 618 | ref="menu1" | 618 | ref="menu1" |
| 619 | :close-on-content-click="false" | 619 | :close-on-content-click="false" |
| 620 | v-model="menu1" | 620 | v-model="menu1" |
| 621 | :nudge-right="40" | 621 | :nudge-right="40" |
| 622 | lazy | 622 | lazy |
| 623 | transition="scale-transition" | 623 | transition="scale-transition" |
| 624 | offset-y | 624 | offset-y |
| 625 | full-width | 625 | full-width |
| 626 | min-width="290px" | 626 | min-width="290px" |
| 627 | > | 627 | > |
| 628 | <v-text-field | 628 | <v-text-field |
| 629 | slot="activator" | 629 | slot="activator" |
| 630 | :rules="joinDateRules" | 630 | :rules="joinDateRules" |
| 631 | v-model="addUser.joinDate" | 631 | v-model="addUser.joinDate" |
| 632 | placeholder="Select date" | 632 | placeholder="Select date" |
| 633 | ></v-text-field> | 633 | ></v-text-field> |
| 634 | <v-date-picker | 634 | <v-date-picker |
| 635 | ref="picker" | 635 | ref="picker" |
| 636 | v-model="addUser.joinDate" | 636 | v-model="addUser.joinDate" |
| 637 | :max="new Date().toISOString().substr(0, 10)" | 637 | :max="new Date().toISOString().substr(0, 10)" |
| 638 | min="1950-01-01" | 638 | min="1950-01-01" |
| 639 | @input="menu1 = false" | 639 | @input="menu1 = false" |
| 640 | ></v-date-picker> | 640 | ></v-date-picker> |
| 641 | </v-menu> | 641 | </v-menu> |
| 642 | </v-flex> | 642 | </v-flex> |
| 643 | </v-layout> | 643 | </v-layout> |
| 644 | </v-flex> | 644 | </v-flex> |
| 645 | </v-layout> | 645 | </v-layout> |
| 646 | <v-layout> | 646 | <v-layout> |
| 647 | <v-flex xs12 sm6> | 647 | <v-flex xs12 sm6> |
| 648 | <v-layout> | 648 | <v-layout> |
| 649 | <v-flex xs4 class="pt-4 subheading"> | 649 | <v-flex xs4 class="pt-4 subheading"> |
| 650 | <label class="right">Phone :</label> | 650 | <label class="right">Phone :</label> |
| 651 | </v-flex> | 651 | </v-flex> |
| 652 | <v-flex xs8 class="ml-3"> | 652 | <v-flex xs8 class="ml-3"> |
| 653 | <v-text-field | 653 | <v-text-field |
| 654 | v-model="addUser.mobileNo" | 654 | v-model="addUser.mobileNo" |
| 655 | placeholder="fill your Phone Number" | 655 | placeholder="fill your Phone Number" |
| 656 | name="mobileNo" | 656 | name="mobileNo" |
| 657 | type="number" | 657 | type="number" |
| 658 | :rules="mobileNoRules" | 658 | :rules="mobileNoRules" |
| 659 | required | 659 | required |
| 660 | ></v-text-field> | 660 | ></v-text-field> |
| 661 | </v-flex> | 661 | </v-flex> |
| 662 | </v-layout> | 662 | </v-layout> |
| 663 | </v-flex> | 663 | </v-flex> |
| 664 | <v-flex xs12 sm6> | 664 | <v-flex xs12 sm6> |
| 665 | <v-layout> | 665 | <v-layout> |
| 666 | <v-flex xs4 class="pt-4 subheading"> | 666 | <v-flex xs4 class="pt-4 subheading"> |
| 667 | <label class="right hidden-sm-only hidden-xs-only">Select Role:</label> | 667 | <label class="right hidden-sm-only hidden-xs-only">Select Role:</label> |
| 668 | <label class="right hidden-lg-only hidden-xl-only hidden-md-only">Role:</label> | 668 | <label class="right hidden-lg-only hidden-xl-only hidden-md-only">Role:</label> |
| 669 | </v-flex> | 669 | </v-flex> |
| 670 | <v-flex xs8 class="ml-3"> | 670 | <v-flex xs8 class="ml-3"> |
| 671 | <v-autocomplete | 671 | <v-autocomplete |
| 672 | v-model="addUser.role" | 672 | v-model="addUser.role" |
| 673 | :rules="role" | 673 | :rules="role" |
| 674 | :items="userRole" | 674 | :items="userRole" |
| 675 | item-text="name" | 675 | item-text="name" |
| 676 | item-value="name" | 676 | item-value="name" |
| 677 | placeholder="Select Role Name" | 677 | placeholder="Select Role Name" |
| 678 | required | 678 | required |
| 679 | ></v-autocomplete> | 679 | ></v-autocomplete> |
| 680 | </v-flex> | 680 | </v-flex> |
| 681 | </v-layout> | 681 | </v-layout> |
| 682 | </v-flex> | 682 | </v-flex> |
| 683 | </v-layout> | 683 | </v-layout> |
| 684 | <v-layout wrap> | 684 | <v-layout wrap> |
| 685 | <v-flex xs12 sm6> | 685 | <v-flex xs12 sm6> |
| 686 | <v-layout> | 686 | <v-layout> |
| 687 | <v-flex xs4 class="pt-4 subheading"> | 687 | <v-flex xs4 class="pt-4 subheading"> |
| 688 | <label class="right">Username:</label> | 688 | <label class="right">Username:</label> |
| 689 | </v-flex> | 689 | </v-flex> |
| 690 | <v-flex xs8 class="ml-3"> | 690 | <v-flex xs8 class="ml-3"> |
| 691 | <v-text-field | 691 | <v-text-field |
| 692 | v-model="addUser.userName" | 692 | v-model="addUser.userName" |
| 693 | placeholder="fill your User Name" | 693 | placeholder="fill your User Name" |
| 694 | type="text" | 694 | type="text" |
| 695 | :rules="userNameRules" | 695 | :rules="userNameRules" |
| 696 | required | 696 | required |
| 697 | ></v-text-field> | 697 | ></v-text-field> |
| 698 | </v-flex> | 698 | </v-flex> |
| 699 | </v-layout> | 699 | </v-layout> |
| 700 | </v-flex> | 700 | </v-flex> |
| 701 | <v-flex xs12 sm6> | 701 | <v-flex xs12 sm6> |
| 702 | <v-layout> | 702 | <v-layout> |
| 703 | <v-flex xs4 class="pt-4 subheading"> | 703 | <v-flex xs4 class="pt-4 subheading"> |
| 704 | <label class="right hidden-sm-only hidden-xs-only">Uplaod Image:</label> | 704 | <label class="right hidden-sm-only hidden-xs-only">Uplaod Image:</label> |
| 705 | <label class="right hidden-lg-only hidden-xl-only hidden-md-only">Image:</label> | 705 | <label class="right hidden-lg-only hidden-xl-only hidden-md-only">Image:</label> |
| 706 | </v-flex> | 706 | </v-flex> |
| 707 | <v-flex xs8 class="ml-3"> | 707 | <v-flex xs8 class="ml-3"> |
| 708 | <v-text-field | 708 | <v-text-field |
| 709 | label="Select Image" | 709 | label="Select Image" |
| 710 | @click="pickFile" | 710 | @click="pickFile" |
| 711 | v-model="imageName" | 711 | v-model="imageName" |
| 712 | append-icon="attach_file" | 712 | append-icon="attach_file" |
| 713 | ></v-text-field> | 713 | ></v-text-field> |
| 714 | <input | 714 | <input |
| 715 | type="file" | 715 | type="file" |
| 716 | style="display:none" | 716 | style="display:none" |
| 717 | ref="image" | 717 | ref="image" |
| 718 | accept="image/*" | 718 | accept="image/*" |
| 719 | @change="onFilePicked" | 719 | @change="onFilePicked" |
| 720 | /> | 720 | /> |
| 721 | </v-flex> | 721 | </v-flex> |
| 722 | </v-layout> | 722 | </v-layout> |
| 723 | </v-flex> | 723 | </v-flex> |
| 724 | <v-flex xs12 sm6> | 724 | <v-flex xs12 sm6> |
| 725 | <v-layout> | 725 | <v-layout> |
| 726 | <v-flex xs4 class="pt-4 subheading"> | 726 | <v-flex xs4 class="pt-4 subheading"> |
| 727 | <label class="right">Address:</label> | 727 | <label class="right">Address:</label> |
| 728 | </v-flex> | 728 | </v-flex> |
| 729 | <v-flex xs8 class="ml-3"> | 729 | <v-flex xs8 class="ml-3"> |
| 730 | <v-text-field | 730 | <v-text-field |
| 731 | name="input-4-3" | 731 | name="input-4-3" |
| 732 | v-model="addUser.presentAddress" | 732 | v-model="addUser.presentAddress" |
| 733 | :rules="presentAddress" | 733 | :rules="presentAddress" |
| 734 | placeholder="fill Your present Address" | 734 | placeholder="fill Your present Address" |
| 735 | required | 735 | required |
| 736 | ></v-text-field> | 736 | ></v-text-field> |
| 737 | </v-flex> | 737 | </v-flex> |
| 738 | </v-layout> | 738 | </v-layout> |
| 739 | </v-flex> | 739 | </v-flex> |
| 740 | </v-layout> | 740 | </v-layout> |
| 741 | <v-layout> | 741 | <v-layout> |
| 742 | <v-flex xs12 sm12> | 742 | <v-flex xs12 sm12> |
| 743 | <v-layout class="right"> | 743 | <v-layout class="right"> |
| 744 | <v-btn @click="clear" round dark class="clear-button">Clear</v-btn> | 744 | <v-btn @click="clear" round dark class="clear-button">Clear</v-btn> |
| 745 | <v-btn @click="submit" round dark :loading="loading" class="add-button">Add</v-btn> | 745 | <v-btn @click="submit" round dark :loading="loading" class="add-button">Add</v-btn> |
| 746 | </v-layout> | 746 | </v-layout> |
| 747 | </v-flex> | 747 | </v-flex> |
| 748 | </v-layout> | 748 | </v-layout> |
| 749 | </v-container> | 749 | </v-container> |
| 750 | </v-form> | 750 | </v-form> |
| 751 | </v-card> | 751 | </v-card> |
| 752 | </v-dialog> | 752 | </v-dialog> |
| 753 | <div class="loader" v-if="showLoader"> | 753 | <div class="loader" v-if="showLoader"> |
| 754 | <v-progress-circular indeterminate color="white"></v-progress-circular> | 754 | <v-progress-circular indeterminate color="white"></v-progress-circular> |
| 755 | </div> | 755 | </div> |
| 756 | <v-snackbar | 756 | <v-snackbar |
| 757 | :timeout="timeout" | 757 | :timeout="timeout" |
| 758 | :top="y === 'top'" | 758 | :top="y === 'top'" |
| 759 | :right="x === 'right'" | 759 | :right="x === 'right'" |
| 760 | :vertical="mode === 'vertical'" | 760 | :vertical="mode === 'vertical'" |
| 761 | v-model="snackbar" | 761 | v-model="snackbar" |
| 762 | :color="color" | 762 | :color="color" |
| 763 | >{{ text }}</v-snackbar> | 763 | >{{ text }}</v-snackbar> |
| 764 | </v-container> | 764 | </v-container> |
| 765 | </template> | 765 | </template> |
| 766 | 766 | ||
| 767 | <script> | 767 | <script> |
| 768 | import http from "@/Services/http.js"; | 768 | import http from "@/Services/http.js"; |
| 769 | import Util from "@/util"; | 769 | import Util from "@/util"; |
| 770 | import moment from "moment"; | 770 | import moment from "moment"; |
| 771 | 771 | ||
| 772 | export default { | 772 | export default { |
| 773 | data: () => ({ | 773 | data: () => ({ |
| 774 | component: "report-generate", | 774 | component: "report-generate", |
| 775 | snackbar: false, | 775 | snackbar: false, |
| 776 | y: "top", | 776 | y: "top", |
| 777 | x: "right", | 777 | x: "right", |
| 778 | mode: "", | 778 | mode: "", |
| 779 | timeout: 3000, | 779 | timeout: 3000, |
| 780 | color: "", | 780 | color: "", |
| 781 | text: "", | 781 | text: "", |
| 782 | show: true, | 782 | show: true, |
| 783 | showSearch: false, | 783 | showSearch: false, |
| 784 | showLoader: false, | 784 | showLoader: false, |
| 785 | loading: false, | 785 | loading: false, |
| 786 | addUserDialog: false, | 786 | addUserDialog: false, |
| 787 | date: null, | 787 | date: null, |
| 788 | search: "", | 788 | search: "", |
| 789 | menu: false, | 789 | menu: false, |
| 790 | menu1: false, | 790 | menu1: false, |
| 791 | menu2: false, | 791 | menu2: false, |
| 792 | menu3: false, | 792 | menu3: false, |
| 793 | viewUserDialog: false, | 793 | viewUserDialog: false, |
| 794 | editUserDialog: false, | 794 | editUserDialog: false, |
| 795 | valid: true, | 795 | valid: true, |
| 796 | isActive: true, | 796 | isActive: true, |
| 797 | newActive: false, | 797 | newActive: false, |
| 798 | pagination: { | 798 | pagination: { |
| 799 | rowsPerPage: 10 | 799 | rowsPerPage: 10 |
| 800 | }, | 800 | }, |
| 801 | imageData: {}, | 801 | imageData: {}, |
| 802 | imageName: "", | 802 | imageName: "", |
| 803 | imageUrl: "", | 803 | imageUrl: "", |
| 804 | imageFile: "", | 804 | imageFile: "", |
| 805 | nameRules: [v => !!v || "Name is required"], | 805 | nameRules: [v => !!v || "Name is required"], |
| 806 | dateRules: [v => !!v || " DOB is required"], | 806 | dateRules: [v => !!v || " DOB is required"], |
| 807 | genderRules: [v => !!v || " Gender Name is required"], | 807 | genderRules: [v => !!v || " Gender Name is required"], |
| 808 | pincode: [v => !!v || " Pincode is required"], | 808 | pincode: [v => !!v || " Pincode is required"], |
| 809 | role: [v => !!v || "Role Name is required"], | 809 | role: [v => !!v || "Role Name is required"], |
| 810 | permanentAddress: [v => !!v || " Permanent Address is required"], | 810 | permanentAddress: [v => !!v || " Permanent Address is required"], |
| 811 | presentAddress: [v => !!v || " Present Address is required"], | 811 | presentAddress: [v => !!v || " Present Address is required"], |
| 812 | mobileNoRules: [v => !!v || "Phone Number is required"], | 812 | mobileNoRules: [v => !!v || "Phone Number is required"], |
| 813 | religionRules: [v => !!v || "Religion Name is required"], | 813 | religionRules: [v => !!v || "Religion Name is required"], |
| 814 | joinDateRules: [v => !!v || " Join Date is required"], | 814 | joinDateRules: [v => !!v || " Join Date is required"], |
| 815 | userNameRules: [v => !!v || " User Name is required"], | 815 | userNameRules: [v => !!v || " User Name is required"], |
| 816 | passwordRules: [v => !!v || " Password is required"], | 816 | passwordRules: [v => !!v || " Password is required"], |
| 817 | errorMessages: "", | 817 | errorMessages: "", |
| 818 | userRole: [], | 818 | userRole: [], |
| 819 | emailRules: [ | 819 | emailRules: [ |
| 820 | v => !!v || "E-mail is required", | 820 | v => !!v || "E-mail is required", |
| 821 | v => | 821 | v => |
| 822 | /^\w+([.-]?\w+)*@\w+([.-]?\w+)*(\.\w{2,3})+$/.test(v) || | 822 | /^\w+([.-]?\w+)*@\w+([.-]?\w+)*(\.\w{2,3})+$/.test(v) || |
| 823 | "E-mail must be valid" | 823 | "E-mail must be valid" |
| 824 | ], | 824 | ], |
| 825 | gender: ["Male", "Female"], | 825 | gender: ["Male", "Female"], |
| 826 | headers: [ | 826 | headers: [ |
| 827 | { | 827 | { |
| 828 | text: "No", | 828 | text: "No", |
| 829 | align: "", | 829 | align: "", |
| 830 | sortable: false, | 830 | sortable: false, |
| 831 | value: "No" | 831 | value: "No" |
| 832 | }, | 832 | }, |
| 833 | { | 833 | { |
| 834 | text: "Profile Pic", | 834 | text: "Profile Pic", |
| 835 | value: "profilePicUrl", | 835 | value: "profilePicUrl", |
| 836 | sortable: false, | 836 | sortable: false, |
| 837 | align: "center" | 837 | align: "center" |
| 838 | }, | 838 | }, |
| 839 | { text: "Name", value: "name", sortable: false, align: "center" }, | 839 | { text: "Name", value: "name", sortable: false, align: "center" }, |
| 840 | { text: "Email", value: "email", sortable: false, align: "center" }, | 840 | { text: "Email", value: "email", sortable: false, align: "center" }, |
| 841 | { text: "DOB", value: "dob", sortable: false, align: "center" }, | 841 | { text: "DOB", value: "dob", sortable: false, align: "center" }, |
| 842 | { | 842 | { |
| 843 | text: "Joining Date", | 843 | text: "Joining Date", |
| 844 | value: "joiningDate", | 844 | value: "joiningDate", |
| 845 | sortable: false, | 845 | sortable: false, |
| 846 | align: "center" | 846 | align: "center" |
| 847 | }, | 847 | }, |
| 848 | { | 848 | { |
| 849 | text: "Phone", | 849 | text: "Phone", |
| 850 | value: "phone", | 850 | value: "phone", |
| 851 | sortable: false, | 851 | sortable: false, |
| 852 | align: "center" | 852 | align: "center" |
| 853 | }, | 853 | }, |
| 854 | { | 854 | { |
| 855 | text: "Status", | 855 | text: "Status", |
| 856 | value: "status", | 856 | value: "status", |
| 857 | sortable: false, | 857 | sortable: false, |
| 858 | align: "center" | 858 | align: "center" |
| 859 | }, | 859 | }, |
| 860 | { text: "Action", value: "", sortable: false, align: "center" } | 860 | { text: "Action", value: "", sortable: false, align: "center" } |
| 861 | ], | 861 | ], |
| 862 | Users: [], | 862 | Users: [], |
| 863 | editedIndex: -1, | 863 | editedIndex: -1, |
| 864 | upload: "", | 864 | upload: "", |
| 865 | editedItem: { | 865 | editedItem: { |
| 866 | role: "", | 866 | role: "", |
| 867 | name: "", | 867 | name: "", |
| 868 | email: "", | 868 | email: "", |
| 869 | dob: null, | 869 | dob: null, |
| 870 | gender: "", | 870 | gender: "", |
| 871 | role: "", | 871 | role: "", |
| 872 | address: "", | 872 | address: "", |
| 873 | phone: "", | 873 | phone: "", |
| 874 | religion: "", | 874 | religion: "", |
| 875 | joiningDate: null | 875 | joiningDate: null |
| 876 | }, | 876 | }, |
| 877 | addUser: { | 877 | addUser: { |
| 878 | role: "", | 878 | role: "", |
| 879 | name: "", | 879 | name: "", |
| 880 | email: "", | 880 | email: "", |
| 881 | dob: null, | 881 | dob: null, |
| 882 | gender: "", | 882 | gender: "", |
| 883 | pincode: "", | 883 | pincode: "", |
| 884 | role: "", | 884 | role: "", |
| 885 | permanentAddress: "", | 885 | permanentAddress: "", |
| 886 | presentAddress: "", | 886 | presentAddress: "", |
| 887 | mobileNo: "", | 887 | mobileNo: "", |
| 888 | religion: "", | 888 | religion: "", |
| 889 | joiningDate: null | 889 | joiningDate: null |
| 890 | } | 890 | } |
| 891 | }), | 891 | }), |
| 892 | watch: { | 892 | watch: { |
| 893 | menu(val) { | 893 | menu(val) { |
| 894 | val && this.$nextTick(() => (this.$refs.picker.activePicker = "YEAR")); | 894 | val && this.$nextTick(() => (this.$refs.picker.activePicker = "YEAR")); |
| 895 | }, | 895 | }, |
| 896 | menu1(val) { | 896 | menu1(val) { |
| 897 | val && this.$nextTick(() => (this.$refs.picker.activePicker = "YEAR")); | 897 | val && this.$nextTick(() => (this.$refs.picker.activePicker = "YEAR")); |
| 898 | } | 898 | } |
| 899 | }, | 899 | }, |
| 900 | methods: { | 900 | methods: { |
| 901 | save(date) { | 901 | save(date) { |
| 902 | this.$refs.menu.save(date); | 902 | this.$refs.menu.save(date); |
| 903 | }, | 903 | }, |
| 904 | save(date) { | 904 | save(date) { |
| 905 | this.$refs.menu1.save(date); | 905 | this.$refs.menu1.save(date); |
| 906 | }, | 906 | }, |
| 907 | pickFile() { | 907 | pickFile() { |
| 908 | this.$refs.image.click(); | 908 | this.$refs.image.click(); |
| 909 | }, | 909 | }, |
| 910 | onFilePicked(e) { | 910 | onFilePicked(e) { |
| 911 | // console.log(e) | 911 | // console.log(e) |
| 912 | const files = e.target.files; | 912 | const files = e.target.files; |
| 913 | this.upload = e.target.files[0]; | 913 | this.upload = e.target.files[0]; |
| 914 | console.log("imageData-upload========>", this.upload); | 914 | console.log("imageData-upload========>", this.upload); |
| 915 | if (files[0] !== undefined) { | 915 | if (files[0] !== undefined) { |
| 916 | this.imageName = files[0].name; | 916 | this.imageName = files[0].name; |
| 917 | if (this.imageName.lastIndexOf(".") <= 0) { | 917 | if (this.imageName.lastIndexOf(".") <= 0) { |
| 918 | return; | 918 | return; |
| 919 | } | 919 | } |
| 920 | const fr = new FileReader(); | 920 | const fr = new FileReader(); |
| 921 | fr.readAsDataURL(files[0]); | 921 | fr.readAsDataURL(files[0]); |
| 922 | fr.addEventListener("load", () => { | 922 | fr.addEventListener("load", () => { |
| 923 | this.imageUrl = fr.result; | 923 | this.imageUrl = fr.result; |
| 924 | this.imageFile = files[0]; // this is an image file that can be sent to server... | 924 | this.imageFile = files[0]; // this is an image file that can be sent to server... |
| 925 | // this.imageData.imageUrl = URL.createObjectURL(this.imageFile); | 925 | // this.imageData.imageUrl = URL.createObjectURL(this.imageFile); |
| 926 | // console.log("upload=======>", this.imageData.imageUrl); | 926 | // console.log("upload=======>", this.imageData.imageUrl); |
| 927 | console.log("imageFile", this.imageUrl); | 927 | console.log("imageFile", this.imageUrl); |
| 928 | }); | 928 | }); |
| 929 | } else { | 929 | } else { |
| 930 | this.imageName = ""; | 930 | this.imageName = ""; |
| 931 | this.imageFile = ""; | 931 | this.imageFile = ""; |
| 932 | this.imageUrl = ""; | 932 | this.imageUrl = ""; |
| 933 | } | 933 | } |
| 934 | }, | 934 | }, |
| 935 | dates: function(date) { | 935 | dates: function(date) { |
| 936 | return moment(date).format("MMMM DD, YYYY"); | 936 | return moment(date).format("MMMM DD, YYYY"); |
| 937 | }, | 937 | }, |
| 938 | getUsersList() { | 938 | getUsersList() { |
| 939 | this.showLoader = true; | 939 | this.showLoader = true; |
| 940 | var token = this.$store.state.token; | 940 | var token = this.$store.state.token; |
| 941 | http() | 941 | http() |
| 942 | .get("/getUsersList", { | 942 | .get("/getUsersList", { |
| 943 | headers: { Authorization: "Bearer " + token } | 943 | headers: { Authorization: "Bearer " + token } |
| 944 | }) | 944 | }) |
| 945 | .then(response => { | 945 | .then(response => { |
| 946 | this.Users = response.data.data; | 946 | this.Users = response.data.data; |
| 947 | this.showLoader = false; | 947 | this.showLoader = false; |
| 948 | }) | 948 | }) |
| 949 | .catch(error => { | 949 | .catch(error => { |
| 950 | this.showLoader = false; | 950 | this.showLoader = false; |
| 951 | if (error.response.status === 401) { | 951 | if (error.response.status === 401) { |
| 952 | this.$router.replace({ path: "/" }); | 952 | this.$router.replace({ path: "/" }); |
| 953 | this.$store.dispatch("setToken", null); | 953 | this.$store.dispatch("setToken", null); |
| 954 | this.$store.dispatch("Id", null); | 954 | this.$store.dispatch("Id", null); |
| 955 | } | 955 | } |
| 956 | }); | 956 | }); |
| 957 | }, | 957 | }, |
| 958 | editItem(item) { | 958 | editItem(item) { |
| 959 | this.editedIndex = this.Users.indexOf(item); | 959 | this.editedIndex = this.Users.indexOf(item); |
| 960 | this.editedItem = Object.assign({}, item); | 960 | this.editedItem = Object.assign({}, item); |
| 961 | this.editedItem.dob = | 961 | this.editedItem.dob = |
| 962 | this.editedItem.dob != undefined | 962 | this.editedItem.dob != undefined |
| 963 | ? (this.editedItem.dob = this.editedItem.dob.substring(0, 10)) | 963 | ? (this.editedItem.dob = this.editedItem.dob.substring(0, 10)) |
| 964 | : (this.editedItem.dob = ""); | 964 | : (this.editedItem.dob = ""); |
| 965 | for (let i = 0; i < this.userRole.length; i++) { | 965 | for (let i = 0; i < this.userRole.length; i++) { |
| 966 | if (this.userRole[i].role === this.editedItem.role) { | 966 | if (this.userRole[i].role === this.editedItem.role) { |
| 967 | this.editedItem.role = this.userRole[i].name; | 967 | this.editedItem.role = this.userRole[i].name; |
| 968 | } | 968 | } |
| 969 | } | 969 | } |
| 970 | this.editUserDialog = true; | 970 | this.editUserDialog = true; |
| 971 | }, | 971 | }, |
| 972 | profile(item) { | 972 | profile(item) { |
| 973 | this.editedIndex = this.Users.indexOf(item); | 973 | this.editedIndex = this.Users.indexOf(item); |
| 974 | this.editedItem = Object.assign({}, item); | 974 | this.editedItem = Object.assign({}, item); |
| 975 | this.viewUserDialog = true; | 975 | this.viewUserDialog = true; |
| 976 | for (let i = 0; i < this.userRole.length; i++) { | 976 | for (let i = 0; i < this.userRole.length; i++) { |
| 977 | if (this.userRole[i].role === this.editedItem.role) { | 977 | if (this.userRole[i].role === this.editedItem.role) { |
| 978 | this.editedItem.role = this.userRole[i].name; | 978 | this.editedItem.role = this.userRole[i].name; |
| 979 | } | 979 | } |
| 980 | } | 980 | } |
| 981 | }, | 981 | }, |
| 982 | deleteItem(item) { | 982 | deleteItem(item) { |
| 983 | let deleteUser = { | 983 | let deleteUser = { |
| 984 | userId: item._id | 984 | userId: item._id |
| 985 | }; | 985 | }; |
| 986 | http() | 986 | http() |
| 987 | .delete( | 987 | .delete( |
| 988 | "/deleteUser", | 988 | "/deleteUser", |
| 989 | confirm("Are you sure you want to delete this?") && { | 989 | confirm("Are you sure you want to delete this?") && { |
| 990 | params: deleteUser | 990 | params: deleteUser |
| 991 | } | 991 | } |
| 992 | ) | 992 | ) |
| 993 | .then(response => { | 993 | .then(response => { |
| 994 | this.snackbar = true; | 994 | this.snackbar = true; |
| 995 | this.text = response.data.message; | 995 | this.text = response.data.message; |
| 996 | this.color = "green"; | 996 | this.color = "green"; |
| 997 | this.getUsersList(); | 997 | this.getUsersList(); |
| 998 | }) | 998 | }) |
| 999 | .catch(error => { | 999 | .catch(error => { |
| 1000 | this.snackbar = true; | 1000 | this.snackbar = true; |
| 1001 | this.color = "error"; | 1001 | this.color = "error"; |
| 1002 | this.text = error.response.data.message; | 1002 | this.text = error.response.data.message; |
| 1003 | }); | 1003 | }); |
| 1004 | }, | 1004 | }, |
| 1005 | close() { | 1005 | close() { |
| 1006 | this.editUserDialog = false; | 1006 | this.editUserDialog = false; |
| 1007 | }, | 1007 | }, |
| 1008 | closeProfileDialog() { | 1008 | closeProfileDialog() { |
| 1009 | this.viewUserDialog = false; | 1009 | this.viewUserDialog = false; |
| 1010 | }, | 1010 | }, |
| 1011 | submit() { | 1011 | submit() { |
| 1012 | if (this.$refs.form.validate()) { | 1012 | if (this.$refs.form.validate()) { |
| 1013 | let addUserData = { | 1013 | let addUserData = { |
| 1014 | name: this.addUser.name, | 1014 | name: this.addUser.name, |
| 1015 | email: this.addUser.email, | 1015 | email: this.addUser.email, |
| 1016 | dob: this.addUser.dob, | 1016 | dob: this.addUser.dob, |
| 1017 | gender: this.addUser.gender, | 1017 | gender: this.addUser.gender, |
| 1018 | religion: this.addUser.religion, | 1018 | religion: this.addUser.religion, |
| 1019 | role: this.addUser.role, | 1019 | role: this.addUser.role, |
| 1020 | address: this.addUser.presentAddress, | 1020 | address: this.addUser.presentAddress, |
| 1021 | phone: this.addUser.mobileNo, | 1021 | phone: this.addUser.mobileNo, |
| 1022 | religion: this.addUser.religion, | 1022 | religion: this.addUser.religion, |
| 1023 | joiningDate: this.addUser.joinDate | 1023 | joiningDate: this.addUser.joinDate |
| 1024 | }; | 1024 | }; |
| 1025 | if (this.imageUrl) { | 1025 | if (this.imageUrl) { |
| 1026 | var str = this.imageUrl; | 1026 | var str = this.imageUrl; |
| 1027 | const [baseUrl, imageUrl] = str.split(/,/); | 1027 | const [baseUrl, imageUrl] = str.split(/,/); |
| 1028 | addUserData.profilePicUrl = imageUrl; | 1028 | addUserData.profilePicUrl = imageUrl; |
| 1029 | } | 1029 | } |
| 1030 | this.loading = true; | 1030 | this.loading = true; |
| 1031 | http() | 1031 | http() |
| 1032 | .post("/createUser", addUserData) | 1032 | .post("/createUser", addUserData) |
| 1033 | .then(response => { | 1033 | .then(response => { |
| 1034 | this.imageUrl = ""; | 1034 | this.imageUrl = ""; |
| 1035 | this.getUsersList(); | 1035 | this.getUsersList(); |
| 1036 | this.snackbar = true; | 1036 | this.snackbar = true; |
| 1037 | this.addUserDialog = false; | 1037 | this.addUserDialog = false; |
| 1038 | this.text = response.data.message; | 1038 | this.text = response.data.message; |
| 1039 | this.color = "green"; | 1039 | this.color = "green"; |
| 1040 | this.clear(); | 1040 | this.clear(); |
| 1041 | this.loading = false; | 1041 | this.loading = false; |
| 1042 | }) | 1042 | }) |
| 1043 | .catch(error => { | 1043 | .catch(error => { |
| 1044 | this.loading = false; | 1044 | this.loading = false; |
| 1045 | this.snackbar = true; | 1045 | this.snackbar = true; |
| 1046 | this.color = "error"; | 1046 | this.color = "error"; |
| 1047 | this.text = error.response.data.message; | 1047 | this.text = error.response.data.message; |
| 1048 | }); | 1048 | }); |
| 1049 | } | 1049 | } |
| 1050 | }, | 1050 | }, |
| 1051 | clear() { | 1051 | clear() { |
| 1052 | this.$refs.form.reset(); | 1052 | this.$refs.form.reset(); |
| 1053 | this.imageUrl = ""; | 1053 | this.imageUrl = ""; |
| 1054 | }, | 1054 | }, |
| 1055 | save() { | 1055 | save() { |
| 1056 | this.loading = true; | 1056 | this.loading = true; |
| 1057 | for (let i = 0; i < this.userRole.length; i++) { | 1057 | for (let i = 0; i < this.userRole.length; i++) { |
| 1058 | if (this.userRole[i].name === this.editedItem.role) { | 1058 | if (this.userRole[i].name === this.editedItem.role) { |
| 1059 | this.editedItem.role = this.userRole[i].role; | 1059 | this.editedItem.role = this.userRole[i].role; |
| 1060 | } | 1060 | } |
| 1061 | } | 1061 | } |
| 1062 | this.editedItem.userId = this.editedItem._id; | 1062 | this.editedItem.userId = this.editedItem._id; |
| 1063 | if (this.imageUrl) { | 1063 | if (this.imageUrl) { |
| 1064 | var str = this.imageUrl; | 1064 | var str = this.imageUrl; |
| 1065 | const [baseUrl, imageUrl] = str.split(/,/); | 1065 | const [baseUrl, imageUrl] = str.split(/,/); |
| 1066 | this.editedItem.upload = imageUrl; | 1066 | this.editedItem.upload = imageUrl; |
| 1067 | } | 1067 | } |
| 1068 | http() | 1068 | http() |
| 1069 | .put("/updateUser", this.editedItem) | 1069 | .put("/updateUser", this.editedItem) |
| 1070 | .then(response => { | 1070 | .then(response => { |
| 1071 | this.snackbar = true; | 1071 | this.snackbar = true; |
| 1072 | this.text = response.data.message; | 1072 | this.text = response.data.message; |
| 1073 | this.color = "green"; | 1073 | this.color = "green"; |
| 1074 | this.loading = false; | 1074 | this.loading = false; |
| 1075 | this.getUsersList(); | 1075 | this.getUsersList(); |
| 1076 | this.close(); | 1076 | this.close(); |
| 1077 | }) | 1077 | }) |
| 1078 | .catch(error => { | 1078 | .catch(error => { |
| 1079 | this.loading = false; | 1079 | this.loading = false; |
| 1080 | this.snackbar = true; | 1080 | this.snackbar = true; |
| 1081 | this.text = error.response.data.message; | 1081 | this.text = error.response.data.message; |
| 1082 | this.color = "error"; | 1082 | this.color = "error"; |
| 1083 | }); | 1083 | }); |
| 1084 | }, | 1084 | }, |
| 1085 | getRole() { | 1085 | getRole() { |
| 1086 | this.showLoader = true; | 1086 | this.showLoader = true; |
| 1087 | var token = this.$store.state.token; | 1087 | var token = this.$store.state.token; |
| 1088 | http() | 1088 | http() |
| 1089 | .get("/getRolesList", { | 1089 | .get("/getRolesList", { |
| 1090 | headers: { Authorization: "Bearer " + token } | 1090 | headers: { Authorization: "Bearer " + token } |
| 1091 | }) | 1091 | }) |
| 1092 | .then(response => { | 1092 | .then(response => { |
| 1093 | this.userRole = response.data.data; | 1093 | this.userRole = response.data.data; |
| 1094 | this.showLoader = false; | 1094 | this.showLoader = false; |
| 1095 | }) | 1095 | }) |
| 1096 | .catch(error => { | 1096 | .catch(error => { |
| 1097 | this.showLoader = false; | 1097 | this.showLoader = false; |
| 1098 | if (error.response.status === 401) { | 1098 | if (error.response.status === 401) { |
| 1099 | this.$router.replace({ path: "/" }); | 1099 | this.$router.replace({ path: "/" }); |
| 1100 | this.$store.dispatch("setToken", null); | 1100 | this.$store.dispatch("setToken", null); |
| 1101 | this.$store.dispatch("Id", null); | 1101 | this.$store.dispatch("Id", null); |
| 1102 | } | 1102 | } |
| 1103 | }); | 1103 | }); |
| 1104 | }, | 1104 | }, |
| 1105 | suspendStatus(suspendStatus, id) { | 1105 | suspendStatus(suspendStatus, id) { |
| 1106 | let suspendStatusData = { | 1106 | let suspendStatusData = { |
| 1107 | userId: id, | 1107 | userId: id, |
| 1108 | status: suspendStatus | 1108 | status: suspendStatus |
| 1109 | }; | 1109 | }; |
| 1110 | this.showLoader = true; | 1110 | this.showLoader = true; |
| 1111 | http() | 1111 | http() |
| 1112 | .put("/suspendUserAccount", suspendStatusData) | 1112 | .put("/suspendUserAccount", suspendStatusData) |
| 1113 | .then(response => { | 1113 | .then(response => { |
| 1114 | this.getUsersList(); | 1114 | this.getUsersList(); |
| 1115 | this.text = response.data.message; | 1115 | this.text = response.data.message; |
| 1116 | this.snackbar = true; | 1116 | this.snackbar = true; |
| 1117 | this.showLoader = false; | 1117 | this.showLoader = false; |
| 1118 | }) | 1118 | }) |
| 1119 | .catch(error => { | 1119 | .catch(error => { |
| 1120 | // console.log(error.response.data.data); | 1120 | // console.log(error.response.data.data); |
| 1121 | this.snackbar = true; | 1121 | this.snackbar = true; |
| 1122 | this.text = error.response.data.message; | 1122 | this.text = error.response.data.message; |
| 1123 | this.showLoader = false; | 1123 | this.showLoader = false; |
| 1124 | }); | 1124 | }); |
| 1125 | }, | 1125 | }, |
| 1126 | displaySearch() { | 1126 | displaySearch() { |
| 1127 | (this.show = false), (this.showSearch = true); | 1127 | (this.show = false), (this.showSearch = true); |
| 1128 | }, | 1128 | }, |
| 1129 | closeSearch() { | 1129 | closeSearch() { |
| 1130 | this.showSearch = false; | 1130 | this.showSearch = false; |
| 1131 | this.show = true; | 1131 | this.show = true; |
| 1132 | this.search = ""; | 1132 | this.search = ""; |
| 1133 | } | 1133 | } |
| 1134 | }, | 1134 | }, |
| 1135 | mounted() { | 1135 | mounted() { |
| 1136 | this.getUsersList(); | 1136 | this.getUsersList(); |
| 1137 | this.getRole(); | 1137 | this.getRole(); |
| 1138 | } | 1138 | } |
| 1139 | }; | 1139 | }; |
| 1140 | </script> | 1140 | </script> |
src/pages/socialMedia/socialMedia.vue
| 1 | <template> | 1 | <template> |
| 2 | <v-container fluid class="body-color"> | 2 | <v-container fluid class="body-color"> |
| 3 | <!-- ****** EDIT Social Media ****** --> | 3 | <!-- ****** EDIT Social Media ****** --> |
| 4 | <v-dialog v-model="editSocialMediaDialog" max-width="400px"> | 4 | <v-dialog v-model="editSocialMediaDialog" 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 Social Media</label> | 8 | <label class="title text-xs-center">Edit Social Media</label> |
| 9 | <v-icon size="24" class="right" @click="editSocialMediaDialog = false">cancel</v-icon> | 9 | <v-icon size="24" class="right" @click="editSocialMediaDialog = false">cancel</v-icon> |
| 10 | </v-flex> | 10 | </v-flex> |
| 11 | </v-layout> | 11 | </v-layout> |
| 12 | <v-form ref="form"> | 12 | <v-form ref="form"> |
| 13 | <v-container fluid> | 13 | <v-container fluid> |
| 14 | <v-flex xs12 sm12> | 14 | <v-flex xs12 sm12> |
| 15 | <v-layout> | 15 | <v-layout> |
| 16 | <v-flex xs4 class="pt-4 subheading"> | 16 | <v-flex xs4 class="pt-4 subheading"> |
| 17 | <label class="right">Type:</label> | 17 | <label class="right">Type:</label> |
| 18 | </v-flex> | 18 | </v-flex> |
| 19 | <v-flex xs8 sm8 class="ml-3"> | 19 | <v-flex xs8 sm8 class="ml-3"> |
| 20 | <v-select | 20 | <v-select |
| 21 | v-model="editedItem.type" | 21 | v-model="editedItem.type" |
| 22 | placeholder="fill your Title" | 22 | placeholder="fill your Title" |
| 23 | :items="socialLink" | 23 | :items="socialLink" |
| 24 | item-text="name" | 24 | item-text="name" |
| 25 | item-value="value" | 25 | item-value="value" |
| 26 | ></v-select> | 26 | ></v-select> |
| 27 | </v-flex> | 27 | </v-flex> |
| 28 | </v-layout> | 28 | </v-layout> |
| 29 | </v-flex> | 29 | </v-flex> |
| 30 | <v-flex xs12 sm12> | 30 | <v-flex xs12 sm12> |
| 31 | <v-layout> | 31 | <v-layout> |
| 32 | <v-flex xs4 class="pt-4 subheading"> | 32 | <v-flex xs4 class="pt-4 subheading"> |
| 33 | <label class="right">Url lINK:</label> | 33 | <label class="right">Url lINK:</label> |
| 34 | </v-flex> | 34 | </v-flex> |
| 35 | <v-flex xs8 sm8 class="ml-3"> | 35 | <v-flex xs8 sm8 class="ml-3"> |
| 36 | <v-text-field placeholder="fill your Description" v-model="editedItem.linkUrl"></v-text-field> | 36 | <v-text-field placeholder="fill your Description" v-model="editedItem.linkUrl"></v-text-field> |
| 37 | </v-flex> | 37 | </v-flex> |
| 38 | </v-layout> | 38 | </v-layout> |
| 39 | </v-flex> | 39 | </v-flex> |
| 40 | <v-layout> | 40 | <v-layout> |
| 41 | <v-flex xs12 sm12> | 41 | <v-flex xs12 sm12> |
| 42 | <v-card-actions> | 42 | <v-card-actions> |
| 43 | <v-spacer></v-spacer> | 43 | <v-spacer></v-spacer> |
| 44 | <v-btn round dark @click="save" class="add-button">Save</v-btn> | 44 | <v-btn round dark @click="save" class="add-button">Save</v-btn> |
| 45 | <v-spacer></v-spacer> | 45 | <v-spacer></v-spacer> |
| 46 | </v-card-actions> | 46 | </v-card-actions> |
| 47 | </v-flex> | 47 | </v-flex> |
| 48 | </v-layout> | 48 | </v-layout> |
| 49 | </v-container> | 49 | </v-container> |
| 50 | </v-form> | 50 | </v-form> |
| 51 | </v-card> | 51 | </v-card> |
| 52 | </v-dialog> | 52 | </v-dialog> |
| 53 | 53 | ||
| 54 | <!-- ****** PROFILE VIEW Social ****** --> | 54 | <!-- ****** PROFILE VIEW Social ****** --> |
| 55 | 55 | ||
| 56 | <v-dialog v-model="profileSocialMediaDialog" max-width="500px"> | 56 | <v-dialog v-model="profileSocialMediaDialog" max-width="500px"> |
| 57 | <v-card flat class="card-style pa-3" dark> | 57 | <v-card flat class="card-style pa-3" dark> |
| 58 | <v-layout> | 58 | <v-layout> |
| 59 | <v-flex xs12> | 59 | <v-flex xs12> |
| 60 | <label class="title text-xs-center">View Social Media</label> | 60 | <label class="title text-xs-center">View Social Media</label> |
| 61 | <v-icon size="24" class="right" @click="profileSocialMediaDialog = false">cancel</v-icon> | 61 | <v-icon size="24" class="right" @click="profileSocialMediaDialog = false">cancel</v-icon> |
| 62 | </v-flex> | 62 | </v-flex> |
| 63 | </v-layout> | 63 | </v-layout> |
| 64 | <v-card-text> | 64 | <v-card-text> |
| 65 | <v-container grid-list-md> | 65 | <v-container grid-list-md> |
| 66 | <v-layout> | 66 | <v-layout> |
| 67 | <v-flex xs4 sm6> | 67 | <v-flex xs4 sm6> |
| 68 | <h5 class="right my-1"> | 68 | <h5 class="right my-1"> |
| 69 | <b>Title:</b> | 69 | <b>Title:</b> |
| 70 | </h5> | 70 | </h5> |
| 71 | </v-flex> | 71 | </v-flex> |
| 72 | <v-flex sm6 xs8> | 72 | <v-flex sm6 xs8> |
| 73 | <h5 class="my-1">{{ editedItem.type }}</h5> | 73 | <h5 class="my-1">{{ editedItem.type }}</h5> |
| 74 | </v-flex> | 74 | </v-flex> |
| 75 | </v-layout> | 75 | </v-layout> |
| 76 | <v-layout> | 76 | <v-layout> |
| 77 | <v-flex xs5 sm6> | 77 | <v-flex xs5 sm6> |
| 78 | <h5 class="right my-1"> | 78 | <h5 class="right my-1"> |
| 79 | <b>Description:</b> | 79 | <b>Description:</b> |
| 80 | </h5> | 80 | </h5> |
| 81 | </v-flex> | 81 | </v-flex> |
| 82 | <v-flex sm6 xs8> | 82 | <v-flex sm6 xs8> |
| 83 | <h5 class="my-1 linkCover">{{ editedItem.linkUrl }}</h5> | 83 | <h5 class="my-1 linkCover">{{ editedItem.linkUrl }}</h5> |
| 84 | </v-flex> | 84 | </v-flex> |
| 85 | </v-layout> | 85 | </v-layout> |
| 86 | </v-container> | 86 | </v-container> |
| 87 | </v-card-text> | 87 | </v-card-text> |
| 88 | </v-card> | 88 | </v-card> |
| 89 | </v-dialog> | 89 | </v-dialog> |
| 90 | <!-- ****** Social TABLE ****** --> | 90 | <!-- ****** Social TABLE ****** --> |
| 91 | <v-toolbar color="transparent" flat> | 91 | <v-toolbar color="transparent" flat> |
| 92 | <v-btn | 92 | <v-btn |
| 93 | fab | 93 | fab |
| 94 | dark | 94 | dark |
| 95 | class="open-dialog-button hidden-xl-only hidden-md-only hidden-lg-only" | 95 | class="open-dialog-button hidden-xl-only hidden-md-only hidden-lg-only" |
| 96 | small | 96 | small |
| 97 | @click="addSocialMediaDialog = true" | 97 | @click="addSocialMediaDialog = true" |
| 98 | > | 98 | > |
| 99 | <v-icon dark>add</v-icon> | 99 | <v-icon dark>add</v-icon> |
| 100 | </v-btn> | 100 | </v-btn> |
| 101 | <v-btn | 101 | <v-btn |
| 102 | round | 102 | round |
| 103 | class="open-dialog-button hidden-sm-only hidden-xs-only" | 103 | class="open-dialog-button hidden-sm-only hidden-xs-only" |
| 104 | dark | 104 | dark |
| 105 | @click="addSocialMediaDialog = true" | 105 | @click="addSocialMediaDialog = true" |
| 106 | > | 106 | > |
| 107 | <v-icon class="white--text pr-1" size="20">add</v-icon>Add Social Media | 107 | <v-icon class="white--text pr-1" size="20">add</v-icon>Add Social Media |
| 108 | </v-btn> | 108 | </v-btn> |
| 109 | <v-spacer></v-spacer> | 109 | <v-spacer></v-spacer> |
| 110 | <v-card-title class="body-1" v-show="show"> | 110 | <v-card-title class="body-1" v-show="show"> |
| 111 | <v-btn icon large flat @click="displaySearch"> | 111 | <v-btn icon large flat @click="displaySearch"> |
| 112 | <v-avatar size="27"> | 112 | <v-avatar size="27"> |
| 113 | <img src="/static/icon/dashboard icons-49.png" alt="icon" /> | 113 | <img src="/static/icon/search.png" alt="icon" /> |
| 114 | </v-avatar> | 114 | </v-avatar> |
| 115 | </v-btn> | 115 | </v-btn> |
| 116 | </v-card-title> | 116 | </v-card-title> |
| 117 | <v-flex xs8 sm8 md3 lg2 v-show="showSearch"> | 117 | <v-flex xs8 sm8 md3 lg2 v-show="showSearch"> |
| 118 | <v-layout> | 118 | <v-layout> |
| 119 | <v-text-field v-model="search" label="Search" prepend-inner-icon="search" color="primary"></v-text-field> | 119 | <v-text-field v-model="search" label="Search" prepend-inner-icon="search" color="primary"></v-text-field> |
| 120 | <v-icon @click="closeSearch" color="error">close</v-icon> | 120 | <v-icon @click="closeSearch" color="error">close</v-icon> |
| 121 | </v-layout> | 121 | </v-layout> |
| 122 | </v-flex> | 122 | </v-flex> |
| 123 | </v-toolbar> | 123 | </v-toolbar> |
| 124 | <v-data-table | 124 | <v-data-table |
| 125 | :headers="headers" | 125 | :headers="headers" |
| 126 | :items="desserts" | 126 | :items="desserts" |
| 127 | :pagination.sync="pagination" | 127 | :pagination.sync="pagination" |
| 128 | :search="search" | 128 | :search="search" |
| 129 | > | 129 | > |
| 130 | <template slot="items" slot-scope="props"> | 130 | <template slot="items" slot-scope="props"> |
| 131 | <tr class="tr"> | 131 | <tr class="tr"> |
| 132 | <td class="td td-row">{{ props.index + 1}}</td> | 132 | <td class="td td-row">{{ props.index + 1}}</td> |
| 133 | <td class="td td-row text-xs-center">{{ props.item.type}}</td> | 133 | <td class="td td-row text-xs-center">{{ props.item.type}}</td> |
| 134 | <td class="td td-row text-xs-center linkCover">{{ props.item.linkUrl}}</td> | 134 | <td class="td td-row text-xs-center linkCover">{{ props.item.linkUrl}}</td> |
| 135 | <td class="td td-row text-xs-center"> | 135 | <td class="td td-row text-xs-center"> |
| 136 | <span> | 136 | <span> |
| 137 | <v-tooltip top> | 137 | <v-tooltip top> |
| 138 | <img | 138 | <img |
| 139 | slot="activator" | 139 | slot="activator" |
| 140 | style="cursor:pointer; width:25px; height:25px; " | 140 | style="cursor:pointer; width:25px; height:25px; " |
| 141 | class="mr-3" | 141 | class="mr-3" |
| 142 | @click="profile(props.item)" | 142 | @click="profile(props.item)" |
| 143 | src="/static/icon/dashboard icons-47.png" | 143 | src="/static/icon/view.png" |
| 144 | /> | 144 | /> |
| 145 | <span>View</span> | 145 | <span>View</span> |
| 146 | </v-tooltip> | 146 | </v-tooltip> |
| 147 | <v-tooltip top> | 147 | <v-tooltip top> |
| 148 | <img | 148 | <img |
| 149 | slot="activator" | 149 | slot="activator" |
| 150 | style="cursor:pointer; width:20 px; height:18px; " | 150 | style="cursor:pointer; width:20 px; height:18px; " |
| 151 | class="mr-3" | 151 | class="mr-3" |
| 152 | @click="editItem(props.item)" | 152 | @click="editItem(props.item)" |
| 153 | src="/static/icon/dashboard icons-50.png" | 153 | src="/static/icon/edit.png" |
| 154 | /> | 154 | /> |
| 155 | <span>Edit</span> | 155 | <span>Edit</span> |
| 156 | </v-tooltip> | 156 | </v-tooltip> |
| 157 | <v-tooltip top> | 157 | <v-tooltip top> |
| 158 | <img | 158 | <img |
| 159 | slot="activator" | 159 | slot="activator" |
| 160 | style="cursor:pointer; width:20px; height:20px; " | 160 | style="cursor:pointer; width:20px; height:20px; " |
| 161 | class="mr-3" | 161 | class="mr-3" |
| 162 | @click="deleteItem(props.item)" | 162 | @click="deleteItem(props.item)" |
| 163 | src="/static/icon/dashboard icons-51.png" | 163 | src="/static/icon/delete.png" |
| 164 | /> | 164 | /> |
| 165 | <span>Delete</span> | 165 | <span>Delete</span> |
| 166 | </v-tooltip> | 166 | </v-tooltip> |
| 167 | </span> | 167 | </span> |
| 168 | </td> | 168 | </td> |
| 169 | </tr> | 169 | </tr> |
| 170 | </template> | 170 | </template> |
| 171 | <v-alert | 171 | <v-alert |
| 172 | slot="no-results" | 172 | slot="no-results" |
| 173 | :value="true" | 173 | :value="true" |
| 174 | color="error" | 174 | color="error" |
| 175 | icon="warning" | 175 | icon="warning" |
| 176 | >Your search for "{{ search }}" found no results.</v-alert> | 176 | >Your search for "{{ search }}" found no results.</v-alert> |
| 177 | </v-data-table> | 177 | </v-data-table> |
| 178 | <!-- ****** ADD MULTIPLE REMINDER ****** --> | 178 | <!-- ****** ADD MULTIPLE REMINDER ****** --> |
| 179 | <v-dialog v-model="addSocialMediaDialog" max-width="400px"> | 179 | <v-dialog v-model="addSocialMediaDialog" max-width="400px"> |
| 180 | <v-card flat class="card-style pa-2" dark> | 180 | <v-card flat class="card-style pa-2" dark> |
| 181 | <v-layout> | 181 | <v-layout> |
| 182 | <v-flex xs12> | 182 | <v-flex xs12> |
| 183 | <label class="title text-xs-center">Add Social Media</label> | 183 | <label class="title text-xs-center">Add Social Media</label> |
| 184 | <v-icon size="24" class="right" @click="addSocialMediaDialog = false">cancel</v-icon> | 184 | <v-icon size="24" class="right" @click="addSocialMediaDialog = false">cancel</v-icon> |
| 185 | </v-flex> | 185 | </v-flex> |
| 186 | </v-layout> | 186 | </v-layout> |
| 187 | <v-form ref="form" v-model="valid" lazy-validation> | 187 | <v-form ref="form" v-model="valid" lazy-validation> |
| 188 | <v-container fluid> | 188 | <v-container fluid> |
| 189 | <v-flex xs12> | 189 | <v-flex xs12> |
| 190 | <v-layout> | 190 | <v-layout> |
| 191 | <v-flex xs4 class="pt-4 subheading"> | 191 | <v-flex xs4 class="pt-4 subheading"> |
| 192 | <label class="right">Type:</label> | 192 | <label class="right">Type:</label> |
| 193 | </v-flex> | 193 | </v-flex> |
| 194 | <v-flex xs8 sm8 class="ml-3"> | 194 | <v-flex xs8 sm8 class="ml-3"> |
| 195 | <v-select | 195 | <v-select |
| 196 | v-model="socialMedia.type" | 196 | v-model="socialMedia.type" |
| 197 | :items="socialLink" | 197 | :items="socialLink" |
| 198 | item-text="name" | 198 | item-text="name" |
| 199 | item-value="value" | 199 | item-value="value" |
| 200 | label="Selct Type" | 200 | label="Selct Type" |
| 201 | type="text" | 201 | type="text" |
| 202 | :rules="socialRules" | 202 | :rules="socialRules" |
| 203 | required | 203 | required |
| 204 | ></v-select> | 204 | ></v-select> |
| 205 | </v-flex> | 205 | </v-flex> |
| 206 | </v-layout> | 206 | </v-layout> |
| 207 | </v-flex> | 207 | </v-flex> |
| 208 | <v-flex xs12> | 208 | <v-flex xs12> |
| 209 | <v-layout> | 209 | <v-layout> |
| 210 | <v-flex xs4 class="pt-4 subheading"> | 210 | <v-flex xs4 class="pt-4 subheading"> |
| 211 | <label class="right">Link Url:</label> | 211 | <label class="right">Link Url:</label> |
| 212 | </v-flex> | 212 | </v-flex> |
| 213 | <v-flex xs8 sm8 class="ml-3"> | 213 | <v-flex xs8 sm8 class="ml-3"> |
| 214 | <v-text-field | 214 | <v-text-field |
| 215 | placeholder="fill your link url" | 215 | placeholder="fill your link url" |
| 216 | :rules="linkUrlnRules" | 216 | :rules="linkUrlnRules" |
| 217 | v-model="socialMedia.linkUrl" | 217 | v-model="socialMedia.linkUrl" |
| 218 | type="text" | 218 | type="text" |
| 219 | required | 219 | required |
| 220 | ></v-text-field> | 220 | ></v-text-field> |
| 221 | </v-flex> | 221 | </v-flex> |
| 222 | </v-layout> | 222 | </v-layout> |
| 223 | </v-flex> | 223 | </v-flex> |
| 224 | <v-layout> | 224 | <v-layout> |
| 225 | <v-flex xs12 sm12> | 225 | <v-flex xs12 sm12> |
| 226 | <v-card-actions> | 226 | <v-card-actions> |
| 227 | <v-spacer></v-spacer> | 227 | <v-spacer></v-spacer> |
| 228 | <v-btn @click="clear" round class="clear-button" dark>clear</v-btn> | 228 | <v-btn @click="clear" round class="clear-button" dark>clear</v-btn> |
| 229 | <v-spacer></v-spacer> | 229 | <v-spacer></v-spacer> |
| 230 | <v-btn @click="submit" round dark :loading="loading" class="add-button">Add</v-btn> | 230 | <v-btn @click="submit" round dark :loading="loading" class="add-button">Add</v-btn> |
| 231 | </v-card-actions> | 231 | </v-card-actions> |
| 232 | </v-flex> | 232 | </v-flex> |
| 233 | </v-layout> | 233 | </v-layout> |
| 234 | </v-container> | 234 | </v-container> |
| 235 | </v-form> | 235 | </v-form> |
| 236 | </v-card> | 236 | </v-card> |
| 237 | </v-dialog> | 237 | </v-dialog> |
| 238 | <v-snackbar | 238 | <v-snackbar |
| 239 | :timeout="timeout" | 239 | :timeout="timeout" |
| 240 | :top="y === 'top'" | 240 | :top="y === 'top'" |
| 241 | :right="x === 'right'" | 241 | :right="x === 'right'" |
| 242 | :vertical="mode === 'vertical'" | 242 | :vertical="mode === 'vertical'" |
| 243 | v-model="snackbar" | 243 | v-model="snackbar" |
| 244 | :color="color" | 244 | :color="color" |
| 245 | >{{ text }}</v-snackbar> | 245 | >{{ text }}</v-snackbar> |
| 246 | <div class="loader" v-if="showLoader"> | 246 | <div class="loader" v-if="showLoader"> |
| 247 | <v-progress-circular indeterminate color="white"></v-progress-circular> | 247 | <v-progress-circular indeterminate color="white"></v-progress-circular> |
| 248 | </div> | 248 | </div> |
| 249 | </v-container> | 249 | </v-container> |
| 250 | </template> | 250 | </template> |
| 251 | 251 | ||
| 252 | <script> | 252 | <script> |
| 253 | import http from "@/Services/http.js"; | 253 | import http from "@/Services/http.js"; |
| 254 | 254 | ||
| 255 | export default { | 255 | export default { |
| 256 | data: () => ({ | 256 | data: () => ({ |
| 257 | snackbar: false, | 257 | snackbar: false, |
| 258 | y: "top", | 258 | y: "top", |
| 259 | x: "right", | 259 | x: "right", |
| 260 | mode: "", | 260 | mode: "", |
| 261 | timeout: 3000, | 261 | timeout: 3000, |
| 262 | text: "", | 262 | text: "", |
| 263 | loading: false, | 263 | loading: false, |
| 264 | color: "", | 264 | color: "", |
| 265 | date: null, | 265 | date: null, |
| 266 | search: "", | 266 | search: "", |
| 267 | show: true, | 267 | show: true, |
| 268 | showSearch: false, | 268 | showSearch: false, |
| 269 | addSocialMediaDialog: false, | 269 | addSocialMediaDialog: false, |
| 270 | showLoader: false, | 270 | showLoader: false, |
| 271 | editSocialMediaDialog: false, | 271 | editSocialMediaDialog: false, |
| 272 | profileSocialMediaDialog: false, | 272 | profileSocialMediaDialog: false, |
| 273 | valid: true, | 273 | valid: true, |
| 274 | pagination: { | 274 | pagination: { |
| 275 | rowsPerPage: 10 | 275 | rowsPerPage: 10 |
| 276 | }, | 276 | }, |
| 277 | imageData: {}, | 277 | imageData: {}, |
| 278 | imageName: "", | 278 | imageName: "", |
| 279 | imageUrl: "", | 279 | imageUrl: "", |
| 280 | imageFile: "", | 280 | imageFile: "", |
| 281 | socialRules: [v => !!v || " Social media type is required"], | 281 | socialRules: [v => !!v || " Social media type is required"], |
| 282 | linkUrlnRules: [v => !!v || " Link Url is required"], | 282 | linkUrlnRules: [v => !!v || " Link Url is required"], |
| 283 | headers: [ | 283 | headers: [ |
| 284 | { | 284 | { |
| 285 | text: "No", | 285 | text: "No", |
| 286 | align: "", | 286 | align: "", |
| 287 | sortable: false, | 287 | sortable: false, |
| 288 | value: "No" | 288 | value: "No" |
| 289 | }, | 289 | }, |
| 290 | { text: "Type", value: "type", sortable: false, align: "center" }, | 290 | { text: "Type", value: "type", sortable: false, align: "center" }, |
| 291 | { | 291 | { |
| 292 | text: "Link Url", | 292 | text: "Link Url", |
| 293 | value: "linkUrl", | 293 | value: "linkUrl", |
| 294 | sortable: false, | 294 | sortable: false, |
| 295 | align: "center" | 295 | align: "center" |
| 296 | }, | 296 | }, |
| 297 | { text: "Action", value: "", sortable: false, align: "center" } | 297 | { text: "Action", value: "", sortable: false, align: "center" } |
| 298 | ], | 298 | ], |
| 299 | desserts: [], | 299 | desserts: [], |
| 300 | editedIndex: -1, | 300 | editedIndex: -1, |
| 301 | socialMedia: {}, | 301 | socialMedia: {}, |
| 302 | editedItem: {}, | 302 | editedItem: {}, |
| 303 | socialLink: [ | 303 | socialLink: [ |
| 304 | { | 304 | { |
| 305 | name: "Face Book", | 305 | name: "Face Book", |
| 306 | value: "FACEBOOK" | 306 | value: "FACEBOOK" |
| 307 | }, | 307 | }, |
| 308 | { | 308 | { |
| 309 | name: "You Tube", | 309 | name: "You Tube", |
| 310 | value: "YOUTUBE" | 310 | value: "YOUTUBE" |
| 311 | } | 311 | } |
| 312 | ], | 312 | ], |
| 313 | userName: "" | 313 | userName: "" |
| 314 | }), | 314 | }), |
| 315 | methods: { | 315 | methods: { |
| 316 | // pickFile() { | 316 | // pickFile() { |
| 317 | // this.$refs.image.click(); | 317 | // this.$refs.image.click(); |
| 318 | // }, | 318 | // }, |
| 319 | 319 | ||
| 320 | // onFilePicked(e) { | 320 | // onFilePicked(e) { |
| 321 | // // console.log(e) | 321 | // // console.log(e) |
| 322 | // const files = e.target.files; | 322 | // const files = e.target.files; |
| 323 | // this.imageData.upload = e.target.files[0]; | 323 | // this.imageData.upload = e.target.files[0]; |
| 324 | // if (files[0] !== undefined) { | 324 | // if (files[0] !== undefined) { |
| 325 | // this.imageName = files[0].name; | 325 | // this.imageName = files[0].name; |
| 326 | // if (this.imageName.lastIndexOf(".") <= 0) { | 326 | // if (this.imageName.lastIndexOf(".") <= 0) { |
| 327 | // return; | 327 | // return; |
| 328 | // } | 328 | // } |
| 329 | // const fr = new FileReader(); | 329 | // const fr = new FileReader(); |
| 330 | // fr.readAsDataURL(files[0]); | 330 | // fr.readAsDataURL(files[0]); |
| 331 | // fr.addEventListener("load", () => { | 331 | // fr.addEventListener("load", () => { |
| 332 | // this.imageUrl = fr.result; | 332 | // this.imageUrl = fr.result; |
| 333 | // this.imageFile = files[0]; // this is an image file that can be sent to server... | 333 | // this.imageFile = files[0]; // this is an image file that can be sent to server... |
| 334 | // this.imageData.imageUrl = URL.createObjectURL(this.imageFile); | 334 | // this.imageData.imageUrl = URL.createObjectURL(this.imageFile); |
| 335 | // console.log("upload=======>", this.imageData.imageUrl); | 335 | // console.log("upload=======>", this.imageData.imageUrl); |
| 336 | // console.log("imageFile", this.imageFile); | 336 | // console.log("imageFile", this.imageFile); |
| 337 | // }); | 337 | // }); |
| 338 | // } else { | 338 | // } else { |
| 339 | // this.imageName = ""; | 339 | // this.imageName = ""; |
| 340 | // this.imageFile = ""; | 340 | // this.imageFile = ""; |
| 341 | // this.imageUrl = ""; | 341 | // this.imageUrl = ""; |
| 342 | // } | 342 | // } |
| 343 | // }, | 343 | // }, |
| 344 | getSocialMedia() { | 344 | getSocialMedia() { |
| 345 | this.showLoader = true; | 345 | this.showLoader = true; |
| 346 | var token = this.$store.state.token; | 346 | var token = this.$store.state.token; |
| 347 | http() | 347 | http() |
| 348 | .get("/getSocialList", { | 348 | .get("/getSocialList", { |
| 349 | headers: { Authorization: "Bearer " + token } | 349 | headers: { Authorization: "Bearer " + token } |
| 350 | }) | 350 | }) |
| 351 | .then(response => { | 351 | .then(response => { |
| 352 | this.desserts = response.data.data; | 352 | this.desserts = response.data.data; |
| 353 | this.showLoader = false; | 353 | this.showLoader = false; |
| 354 | }) | 354 | }) |
| 355 | .catch(error => { | 355 | .catch(error => { |
| 356 | this.showLoader = false; | 356 | this.showLoader = false; |
| 357 | if (error.response.status === 401) { | 357 | if (error.response.status === 401) { |
| 358 | this.$router.replace({ path: "/" }); | 358 | this.$router.replace({ path: "/" }); |
| 359 | this.$store.dispatch("setToken", null); | 359 | this.$store.dispatch("setToken", null); |
| 360 | this.$store.dispatch("Id", null); | 360 | this.$store.dispatch("Id", null); |
| 361 | } | 361 | } |
| 362 | }); | 362 | }); |
| 363 | }, | 363 | }, |
| 364 | editItem(item) { | 364 | editItem(item) { |
| 365 | this.editedIndex = this.desserts.indexOf(item); | 365 | this.editedIndex = this.desserts.indexOf(item); |
| 366 | this.editedItem = Object.assign({}, item); | 366 | this.editedItem = Object.assign({}, item); |
| 367 | this.editSocialMediaDialog = true; | 367 | this.editSocialMediaDialog = true; |
| 368 | }, | 368 | }, |
| 369 | profile(item) { | 369 | profile(item) { |
| 370 | this.editedIndex = this.desserts.indexOf(item); | 370 | this.editedIndex = this.desserts.indexOf(item); |
| 371 | this.editedItem = Object.assign({}, item); | 371 | this.editedItem = Object.assign({}, item); |
| 372 | this.profileSocialMediaDialog = true; | 372 | this.profileSocialMediaDialog = true; |
| 373 | }, | 373 | }, |
| 374 | 374 | ||
| 375 | deleteItem(item) { | 375 | deleteItem(item) { |
| 376 | let deleteSocialMedia = { | 376 | let deleteSocialMedia = { |
| 377 | socialId: item._id | 377 | socialId: item._id |
| 378 | }; | 378 | }; |
| 379 | http() | 379 | http() |
| 380 | .delete( | 380 | .delete( |
| 381 | "/deleteSocial", | 381 | "/deleteSocial", |
| 382 | confirm("Are you sure you want to delete this?") && { | 382 | confirm("Are you sure you want to delete this?") && { |
| 383 | params: deleteSocialMedia | 383 | params: deleteSocialMedia |
| 384 | } | 384 | } |
| 385 | ) | 385 | ) |
| 386 | .then(response => { | 386 | .then(response => { |
| 387 | this.snackbar = true; | 387 | this.snackbar = true; |
| 388 | this.text = response.data.message; | 388 | this.text = response.data.message; |
| 389 | this.color = "green"; | 389 | this.color = "green"; |
| 390 | this.getSocialMedia(); | 390 | this.getSocialMedia(); |
| 391 | }) | 391 | }) |
| 392 | .catch(error => { | 392 | .catch(error => { |
| 393 | this.snackbar = true; | 393 | this.snackbar = true; |
| 394 | this.text = error.response.data.message; | 394 | this.text = error.response.data.message; |
| 395 | this.color = "error"; | 395 | this.color = "error"; |
| 396 | }); | 396 | }); |
| 397 | }, | 397 | }, |
| 398 | close() { | 398 | close() { |
| 399 | this.editSocialMediaDialog = false; | 399 | this.editSocialMediaDialog = false; |
| 400 | }, | 400 | }, |
| 401 | submit() { | 401 | submit() { |
| 402 | if (this.$refs.form.validate()) { | 402 | if (this.$refs.form.validate()) { |
| 403 | this.loading = true; | 403 | this.loading = true; |
| 404 | http() | 404 | http() |
| 405 | .post("/addSocialLinks", this.socialMedia) | 405 | .post("/addSocialLinks", this.socialMedia) |
| 406 | .then(response => { | 406 | .then(response => { |
| 407 | this.snackbar = true; | 407 | this.snackbar = true; |
| 408 | this.text = response.data.message; | 408 | this.text = response.data.message; |
| 409 | this.color = "green"; | 409 | this.color = "green"; |
| 410 | this.getSocialMedia(); | 410 | this.getSocialMedia(); |
| 411 | this.clear(); | 411 | this.clear(); |
| 412 | this.addSocialMediaDialog = false; | 412 | this.addSocialMediaDialog = false; |
| 413 | this.loading = false; | 413 | this.loading = false; |
| 414 | }) | 414 | }) |
| 415 | .catch(error => { | 415 | .catch(error => { |
| 416 | this.snackbar = true; | 416 | this.snackbar = true; |
| 417 | this.color = "error"; | 417 | this.color = "error"; |
| 418 | this.text = error.response.data.message; | 418 | this.text = error.response.data.message; |
| 419 | this.loading = false; | 419 | this.loading = false; |
| 420 | }); | 420 | }); |
| 421 | } | 421 | } |
| 422 | }, | 422 | }, |
| 423 | clear() { | 423 | clear() { |
| 424 | this.$refs.form.reset(); | 424 | this.$refs.form.reset(); |
| 425 | }, | 425 | }, |
| 426 | save() { | 426 | save() { |
| 427 | (this.editedItem.socialId = this.editedItem._id), | 427 | (this.editedItem.socialId = this.editedItem._id), |
| 428 | http() | 428 | http() |
| 429 | .put("/updateSocial", this.editedItem) | 429 | .put("/updateSocial", this.editedItem) |
| 430 | .then(response => { | 430 | .then(response => { |
| 431 | this.snackbar = true; | 431 | this.snackbar = true; |
| 432 | this.text = response.data.message; | 432 | this.text = response.data.message; |
| 433 | this.color = "green"; | 433 | this.color = "green"; |
| 434 | this.getSocialMedia(); | 434 | this.getSocialMedia(); |
| 435 | this.close(); | 435 | this.close(); |
| 436 | }) | 436 | }) |
| 437 | .catch(error => { | 437 | .catch(error => { |
| 438 | this.snackbar = true; | 438 | this.snackbar = true; |
| 439 | this.text = error.response.data.message; | 439 | this.text = error.response.data.message; |
| 440 | this.color = "error"; | 440 | this.color = "error"; |
| 441 | }); | 441 | }); |
| 442 | }, | 442 | }, |
| 443 | displaySearch() { | 443 | displaySearch() { |
| 444 | (this.show = false), (this.showSearch = true); | 444 | (this.show = false), (this.showSearch = true); |
| 445 | }, | 445 | }, |
| 446 | closeSearch() { | 446 | closeSearch() { |
| 447 | this.showSearch = false; | 447 | this.showSearch = false; |
| 448 | this.show = true; | 448 | this.show = true; |
| 449 | this.search = ""; | 449 | this.search = ""; |
| 450 | } | 450 | } |
| 451 | }, | 451 | }, |
| 452 | mounted() { | 452 | mounted() { |
| 453 | this.getSocialMedia(); | 453 | this.getSocialMedia(); |
| 454 | } | 454 | } |
| 455 | }; | 455 | }; |
| 456 | </script> | 456 | </script> |