viithiisys / School-Management-dashboard

Download as
Browse Code ยป

Commit 99cd791848d643102e6b1412e7fc0f8425875761

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

implement all task to trello

Showing 18 changed files with 173 additions and 107 deletions   Show diff stats
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 path: '/dashboard', 6 path: '/dashboard',
7 icon: '/static/schoolIcons/Dashboard.png', 7 icon: '/static/schoolIcons/Dashboard.png',
8 }, 8 },
9 { 9 {
10 title: 'Class', 10 title: 'Class',
11 // group: 'apps', 11 // group: 'apps',
12 path: '/addclass', 12 path: '/addclass',
13 icon: '/static/schoolIcons/Class.png', 13 icon: '/static/schoolIcons/Class.png',
14 }, 14 },
15 { 15 {
16 title: 'Section', 16 title: 'Section',
17 // group: 'apps', 17 // group: 'apps',
18 path: '/section', 18 path: '/section',
19 icon: '/static/schoolIcons/Section.png', 19 icon: '/static/schoolIcons/Section.png',
20 }, 20 },
21 { 21 {
22 title: 'Subjects', 22 title: 'Subjects',
23 path: '/subject', 23 path: '/subject',
24 icon: '/static/schoolIcons/Subjects.png', 24 icon: '/static/schoolIcons/Subjects.png',
25 }, 25 },
26 { 26 {
27 title: 'Parents', 27 title: 'Parents',
28 // group: 'apps', 28 // group: 'apps',
29 path: '/parents', 29 path: '/parents',
30 icon: '/static/schoolIcons/Parents.png', 30 icon: '/static/schoolIcons/Parents.png',
31 }, 31 },
32 { 32 {
33 title: 'Teachers', 33 title: 'Teachers',
34 // group: '', 34 // group: '',
35 path: 'teachers', 35 path: 'teachers',
36 icon: '/static/schoolIcons/Teachers.png', 36 icon: '/static/schoolIcons/Teachers.png',
37 }, 37 },
38 { 38 {
39 title: 'Students', 39 title: 'Students',
40 // group: 'apps', 40 // group: 'apps',
41 path: '/Students', 41 path: '/Students',
42 icon: '/static/schoolIcons/Students.png', 42 icon: '/static/schoolIcons/Students.png',
43 }, 43 },
44 { 44 {
45 title: 'User', 45 title: 'User',
46 path: '/User', 46 path: '/User',
47 icon: '/static/schoolIcons/User.png', 47 icon: '/static/schoolIcons/User.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/schoolIcons/Attendance.png', 53 icon: '/static/schoolIcons/Attendance.png',
54 items: [ 54 items: [
55 { name: 'studentAttendence', title: 'Student Attendance', component: 'studentAttendence', action: '', }, 55 { name: 'studentAttendence', title: 'Student Attendance', component: 'studentAttendence', action: '', },
56 { name: 'teacherAttendence', title: 'Teacher Attendance', component: 'teacherAttendence', action: '', } 56 { name: 'teacherAttendence', title: 'Teacher Attendance', component: 'teacherAttendence', 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/schoolIcons/exam.png', 64 icon: '/static/schoolIcons/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: 'ExamSchedule', action: '', }, 67 { name: 'ExamSchedule', title: 'Exam Schedule', component: 'ExamSchedule', 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: 'Mark', 73 title: 'Mark',
74 group: 'Mark', 74 group: 'Mark',
75 component: 'Mark', 75 component: 'Mark',
76 icon: '/static/schoolIcons/marks.png', 76 icon: '/static/schoolIcons/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: 'markDistribution', action: '', }, 79 { name: 'markDistribution', title: 'Mark Distribution', component: 'markDistribution', 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/schoolIcons/administrator.png', 88 icon: '/static/schoolIcons/administrator.png',
89 items: [ 89 items: [
90 { name: 'academicYear', title: 'Academic Year', component: 'academicYear', action: '', }, 90 { name: 'academicYear', title: 'Academic Year', component: 'academicYear', 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: 'resetPassword', action: '', }, 92 { name: 'resetPassword', title: 'Reset Password', component: 'resetPassword', action: '', },
93 { name: 'Role', title: 'Role', component: 'Role', action: '', }, 93 { name: 'Role', title: 'Role', component: 'Role', action: '', },
94 { name: 'bulkImportole', title: 'Bulk Import', component: 'bulkImport', action: '', }, 94 { name: 'bulkImportole', title: 'Bulk Import', component: 'bulkImport', action: '', },
95 95
96 ] 96 ]
97 }, 97 },
98 { 98 {
99 title: 'Notice Board', 99 title: 'Notice Board',
100 path: '/NoticeBoard', 100 path: '/NoticeBoard',
101 icon: '/static/schoolIcons/Notice_board.png', 101 icon: '/static/schoolIcons/Notice_board.png',
102 }, 102 },
103 { 103 {
104 title: 'News', 104 title: 'News',
105 path: '/news', 105 path: '/news',
106 icon: '/static/schoolIcons/News.png', 106 icon: '/static/schoolIcons/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 path: '/timeTable', 115 path: '/timeTable',
116 icon: '/static/schoolIcons/Time_table.png', 116 icon: '/static/schoolIcons/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/schoolIcons/Library.png', 122 icon: '/static/schoolIcons/Library.png',
123 items: [ 123 items: [
124 { name: 'libraryMember', title: ' Library Member', component: 'libraryMember', action: '', }, 124 { name: 'libraryMember', title: ' Library Member', component: 'libraryMember', 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: 'eBooks', title: 'E-Books', component: 'eBooks', action: '', } 127 { name: 'eBooks', title: 'E-Books', component: 'eBooks', 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/schoolIcons/reports.png', 135 icon: '/static/schoolIcons/reports.png',
136 items: [ 136 items: [
137 { name: 'studentReport', title: 'Student Report', component: 'studentReport', action: '', }, 137 { name: 'studentReport', title: 'Student Report', component: 'studentReport', action: '', },
138 { name: 'progressCardReport', title: 'Progress Card Report', component: 'progressCardReport', action: '', } 138 { name: 'progressCardReport', title: 'Progress Card Report', component: 'progressCardReport', action: '', }
139 ] 139 ]
140 }, 140 },
141 { 141 {
142 title: 'Notification', 142 title: 'Notification',
143 path: '/notification', 143 path: '/notification',
144 icon: '/static/schoolIcons/Notification.png', 144 icon: '/static/schoolIcons/Notification.png',
145 }, 145 },
146 { 146 {
147 title: 'Social Media', 147 title: 'Social Media',
148 path: '/SocialMedia', 148 path: '/SocialMedia',
149 icon: '/static/schoolIcons/Social_Media.png', 149 icon: '/static/schoolIcons/Social_Media.png',
150 }, 150 },
151 { 151 {
152 title: 'Gallery', 152 title: 'Gallery',
153 path: '/Gallery', 153 path: '/Gallery',
154 icon: '/static/schoolIcons/Gallery.png', 154 icon: '/static/schoolIcons/Gallery.png',
155 }, 155 },
156 { 156 {
157 title: 'Event', 157 title: 'Event',
158 path: '/Event', 158 path: '/Event',
159 icon: '/static/schoolIcons/Events.png', 159 icon: '/static/schoolIcons/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/schoolIcons/Account.png', 165 icon: '/static/schoolIcons/Account.png',
166 items: [ 166 items: [
167 { name: 'feeTypes', title: 'Fee Types', component: 'feeTypes', action: '', }, 167 { name: 'feeTypes', title: 'Fee Types', component: 'feeTypes', action: '', },
168 { name: 'Invoice', title: 'Invoice', component: 'Invoice', action: '', }, 168 { name: 'Invoice', title: 'Invoice', component: 'Invoice', action: '', },
169 { name: 'paymentHistory', title: 'Payment History', component: 'paymentHistory', action: '', }, 169 { name: 'paymentHistory', title: 'Payment History', component: 'paymentHistory', 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: 'GlobalPayment', action: '', } 172 { name: 'GlobalPayment', title: 'Global Payment', component: 'GlobalPayment', action: '', }
173 ] 173 ]
174 }, 174 },
175 { 175 {
176 title: 'Holiday', 176 title: 'Holiday',
177 path: '/Holiday', 177 path: '/Holiday',
178 icon: '/static/schoolIcons/Holidays.png', 178 icon: '/static/schoolIcons/Holidays.png',
179 }, 179 },
180 { 180 {
181 title: 'General Setting', 181 title: 'General Setting',
182 path: '/generalSetting', 182 path: '/generalSetting',
183 icon: '/static/schoolIcons/settings.png', 183 icon: '/static/schoolIcons/settings.png',
184 } 184 }
185 ]; 185 ];
186 186
187 const libraryMenu = [{
188 title: 'Library',
189 group: 'Library',
190 component: 'Library',
191 icon: '/static/schoolIcons/Library.png',
192 items: [
193 { name: 'libraryMember', title: ' Library Member', component: 'libraryMember', action: '', },
194 { name: 'Books', title: 'Books', component: 'Books', action: '', },
195 { name: 'Issue', title: ' Issue', component: 'Issue', action: '', },
196 { name: 'eBooks', title: 'E-Books', component: 'eBooks', action: '', }
197
198 ]
199 }];
200
201 const accountMenu = [{
202 title: 'Account',
203 group: 'Account',
204 component: 'Account',
205 icon: '/static/schoolIcons/Account.png',
206 items: [
207 { name: 'feeTypes', title: 'Fee Types', component: 'feeTypes', action: '', },
208 { name: 'Invoice', title: 'Invoice', component: 'Invoice', action: '', },
209 { name: 'paymentHistory', title: 'Payment History', component: 'paymentHistory', action: '', },
210 { name: 'Expense', title: 'Expense', component: 'Expense', action: '', },
211 { name: 'Income', title: 'Income', component: 'Income', action: '', },
212 { name: 'GlobalPayment', title: 'Global Payment', component: 'GlobalPayment', action: '', }
213 ]
214 }];
215
187 const schoolMenu = [ 216 const schoolMenu = [
188 // { header: 'Apps' }, 217 // { header: 'Apps' },
189 { 218 {
190 title: 'School', 219 title: 'School',
191 // group: 'apps', 220 // group: 'apps',
192 path: '/school', 221 path: '/school',
193 icon: '/static/schoolIcons/Dashboard.png', 222 icon: '/static/schoolIcons/Dashboard.png',
194 } 223 }
195 ]; 224 ];
196 225
197 // reorder menu 226 // reorder menu
198 // Menu.forEach((item) => { 227 // Menu.forEach((item) => {
199 // if (item.items) { 228 // if (item.items) {
200 // item.items.sort((x, y) => { 229 // item.items.sort((x, y) => {
201 // let textA = x.title.toUpperCase(); 230 // let textA = x.title.toUpperCase();
202 // let textB = y.title.toUpperCase(); 231 // let textB = y.title.toUpperCase();
203 // return (textA < textB) ? -1 : (textA > textB) ? 1 : 0; 232 // return (textA < textB) ? -1 : (textA > textB) ? 1 : 0;
204 // }); 233 // });
205 // } 234 // }
206 // }); 235 // });
207 236
208 export default { adminMenu, schoolMenu };
src/components/pageHeader/AppDrawer.vue
Diff comments   View file @99cd791
1 <template> 1 <template>
2 <v-navigation-drawer 2 <v-navigation-drawer
3 id="appDrawer" 3 id="appDrawer"
4 :mini-variant.sync="mini" 4 :mini-variant.sync="mini"
5 fixed 5 fixed
6 :dark="$vuetify.dark" 6 :dark="$vuetify.dark"
7 app 7 app
8 v-model="drawer" 8 v-model="drawer"
9 width="260" 9 width="260"
10 > 10 >
11 <v-toolbar class="fixcolors"> 11 <v-toolbar class="fixcolors">
12 <img v-bind:src="computeLogo" height="40" width="150" class="imgLogo" alt="ana" /> 12 <img v-bind:src="computeLogo" height="40" width="150" class="imgLogo" alt="ana" />
13 <v-toolbar-title class="ml-0 pl-3"></v-toolbar-title> 13 <v-toolbar-title class="ml-0 pl-3"></v-toolbar-title>
14 </v-toolbar> 14 </v-toolbar>
15 <vue-perfect-scrollbar class="drawer-menu--scroll" :settings="scrollSettings"> 15 <vue-perfect-scrollbar class="drawer-menu--scroll" :settings="scrollSettings">
16 <v-list dense expand> 16 <v-list dense expand>
17 <template v-for="(item, i) in menus"> 17 <template v-for="(item, i) in menus">
18 <!--group with subitems--> 18 <!--group with subitems-->
19 <v-list-group 19 <v-list-group
20 v-if="item.items" 20 v-if="item.items"
21 :key="item.name" 21 :key="item.name"
22 :group="item.group" 22 :group="item.group"
23 no-action="no-action" 23 no-action="no-action"
24 > 24 >
25 <v-list-tile slot="activator" ripple="ripple"> 25 <v-list-tile slot="activator" ripple="ripple">
26 <v-list-tile-action v-if="item.icon" class="pr-3"> 26 <v-list-tile-action v-if="item.icon" class="pr-3">
27 <img :src="item.icon" width="40" alt="icons" /> 27 <img :src="item.icon" width="40" alt="icons" />
28 </v-list-tile-action> 28 </v-list-tile-action>
29 <v-list-tile-content> 29 <v-list-tile-content>
30 <v-list-tile-title>{{ item.title }}</v-list-tile-title> 30 <v-list-tile-title>{{ item.title }}</v-list-tile-title>
31 </v-list-tile-content> 31 </v-list-tile-content>
32 </v-list-tile> 32 </v-list-tile>
33 <template v-for="(subItem, i) in item.items"> 33 <template v-for="(subItem, i) in item.items">
34 <!--sub group--> 34 <!--sub group-->
35 <v-list-group 35 <v-list-group
36 v-if="subItem.items" 36 v-if="subItem.items"
37 :key="subItem.name" 37 :key="subItem.name"
38 :group="subItem.group" 38 :group="subItem.group"
39 sub-group="sub-group" 39 sub-group="sub-group"
40 > 40 >
41 <v-list-tile slot="activator" ripple="ripple"> 41 <v-list-tile slot="activator" ripple="ripple">
42 <v-list-tile-content> 42 <v-list-tile-content>
43 <v-list-tile-title>{{ subItem.title }}</v-list-tile-title> 43 <v-list-tile-title>{{ subItem.title }}</v-list-tile-title>
44 </v-list-tile-content> 44 </v-list-tile-content>
45 </v-list-tile> 45 </v-list-tile>
46 <v-list-tile 46 <v-list-tile
47 v-for="(grand, i) in subItem.children" 47 v-for="(grand, i) in subItem.children"
48 :key="i" 48 :key="i"
49 :to="genChildTarget(item, grand)" 49 :to="genChildTarget(item, grand)"
50 :href="grand.href" 50 :href="grand.href"
51 ripple="ripple" 51 ripple="ripple"
52 > 52 >
53 <v-list-tile-content> 53 <v-list-tile-content>
54 <v-list-tile-title>{{ grand.title }}</v-list-tile-title> 54 <v-list-tile-title>{{ grand.title }}</v-list-tile-title>
55 </v-list-tile-content> 55 </v-list-tile-content>
56 </v-list-tile> 56 </v-list-tile>
57 </v-list-group> 57 </v-list-group>
58 <!--child item--> 58 <!--child item-->
59 <v-list-tile 59 <v-list-tile
60 v-else 60 v-else
61 :key="i" 61 :key="i"
62 :to="genChildTarget(item, subItem)" 62 :to="genChildTarget(item, subItem)"
63 :href="subItem.href" 63 :href="subItem.href"
64 :disabled="subItem.disabled" 64 :disabled="subItem.disabled"
65 :target="subItem.target" 65 :target="subItem.target"
66 ripple="ripple" 66 ripple="ripple"
67 > 67 >
68 <v-list-tile-action v-if="subItem.action"> 68 <v-list-tile-action v-if="subItem.action">
69 <img 69 <img
70 width="30" 70 width="30"
71 :src="subItem.action" 71 :src="subItem.action"
72 :class="[subItem.actionClass || 'success--text']" 72 :class="[subItem.actionClass || 'success--text']"
73 /> 73 />
74 </v-list-tile-action> 74 </v-list-tile-action>
75 <v-list-tile-content> 75 <v-list-tile-content>
76 <v-list-tile-title class="body-2"> 76 <v-list-tile-title class="body-2">
77 <span>{{ subItem.title }}</span> 77 <span>{{ subItem.title }}</span>
78 </v-list-tile-title> 78 </v-list-tile-title>
79 </v-list-tile-content> 79 </v-list-tile-content>
80 <!-- <v-circle class="white--text pa-0 circle-pill" v-if="subItem.badge" color="red" disabled="disabled">{{ subItem.badge }}</v-circle> --> 80 <!-- <v-circle class="white--text pa-0 circle-pill" v-if="subItem.badge" color="red" disabled="disabled">{{ subItem.badge }}</v-circle> -->
81 </v-list-tile> 81 </v-list-tile>
82 </template> 82 </template>
83 </v-list-group> 83 </v-list-group>
84 <v-subheader v-else-if="item.header" :key="i">{{ item.header }}</v-subheader> 84 <v-subheader v-else-if="item.header" :key="i">{{ item.header }}</v-subheader>
85 <v-divider v-else-if="item.divider" :key="i"></v-divider> 85 <v-divider v-else-if="item.divider" :key="i"></v-divider>
86 <!--top-level link--> 86 <!--top-level link-->
87 <v-list-tile 87 <v-list-tile
88 v-else 88 v-else
89 ripple="ripple" 89 ripple="ripple"
90 :disabled="item.disabled" 90 :disabled="item.disabled"
91 :target="item.target" 91 :target="item.target"
92 rel="noopener" 92 rel="noopener"
93 :key="item.path" 93 :key="item.path"
94 > 94 >
95 <a :href="item.path"> 95 <a :href="item.path">
96 <v-list-tile-action v-if="item.icon"> 96 <v-list-tile-action v-if="item.icon">
97 <img :src="item.icon" width="40" alt="icons" /> 97 <img :src="item.icon" width="40" alt="icons" />
98 </v-list-tile-action> 98 </v-list-tile-action>
99 <v-list-tile-content class="pl-3 mt-2"> 99 <v-list-tile-content class="pl-3 mt-2">
100 <v-list-tile-title>{{ item.title }}</v-list-tile-title> 100 <v-list-tile-title>{{ item.title }}</v-list-tile-title>
101 </v-list-tile-content> 101 </v-list-tile-content>
102 <!-- <v-circle class="white--text pa-0 chip--x-small" v-if="item.badge" :color="item.color || 'primary'" disabled="disabled">{{ item.badge }}</v-circle> --> 102 <!-- <v-circle class="white--text pa-0 chip--x-small" v-if="item.badge" :color="item.color || 'primary'" disabled="disabled">{{ item.badge }}</v-circle> -->
103 <v-list-tile-action v-if="item.subAction"> 103 <v-list-tile-action v-if="item.subAction">
104 <!-- <v-icon class="success--text">{{ item.subAction }}</v-icon> --> 104 <!-- <v-icon class="success--text">{{ item.subAction }}</v-icon> -->
105 <img :src="item.icon" width="40" alt="icons" /> 105 <img :src="item.icon" width="40" alt="icons" />
106 </v-list-tile-action> 106 </v-list-tile-action>
107 <!-- <v-circle class="caption blue lighten-2 white--text mx-0" v-else-if="item.chip" label="label" small="small">{{ item.chip }}</v-circle> --> 107 <!-- <v-circle class="caption blue lighten-2 white--text mx-0" v-else-if="item.chip" label="label" small="small">{{ item.chip }}</v-circle> -->
108 </a> 108 </a>
109 </v-list-tile> 109 </v-list-tile>
110 </template> 110 </template>
111 </v-list> 111 </v-list>
112 </vue-perfect-scrollbar> 112 </vue-perfect-scrollbar>
113 </v-navigation-drawer> 113 </v-navigation-drawer>
114 </template> 114 </template>
115 <script> 115 <script>
116 import menu from "@/api/menu"; 116 import menu from "@/api/menu";
117 import VuePerfectScrollbar from "vue-perfect-scrollbar"; 117 import VuePerfectScrollbar from "vue-perfect-scrollbar";
118 export default { 118 export default {
119 name: "app-drawer", 119 name: "app-drawer",
120 components: { 120 components: {
121 VuePerfectScrollbar 121 VuePerfectScrollbar
122 }, 122 },
123 props: { 123 props: {
124 expanded: { 124 expanded: {
125 type: Boolean, 125 type: Boolean,
126 default: true 126 default: true
127 } 127 }
128 }, 128 },
129 data: () => ({ 129 data: () => ({
130 mini: false, 130 mini: false,
131 drawer: true, 131 drawer: true,
132 menus: [], 132 menus: [],
133 scrollSettings: { 133 scrollSettings: {
134 maxScrollbarLength: 160 134 maxScrollbarLength: 160
135 } 135 }
136 }), 136 }),
137 computed: { 137 computed: {
138 computeGroupActive() { 138 computeGroupActive() {
139 return true; 139 return true;
140 }, 140 },
141 computeLogo() { 141 computeLogo() {
142 return "/static/logoIntrack.png"; 142 return "/static/logoIntrack.png";
143 }, 143 },
144 144
145 sideToolbarColor() { 145 sideToolbarColor() {
146 return this.$vuetify.options.extra.sideNav; 146 return this.$vuetify.options.extra.sideNav;
147 } 147 }
148 }, 148 },
149 created() { 149 created() {
150 if (this.$store.state.role === "ADMIN") { 150 if (this.$store.state.role === "ADMIN") {
151 this.menus = menu.adminMenu; 151 this.menus = menu.adminMenu;
152 } else if (this.$store.state.role === "SUPERADMIN") { 152 } else if (this.$store.state.role === "SUPERADMIN") {
153 this.menus = menu.schoolMenu; 153 this.menus = menu.schoolMenu;
154 } else if (this.$store.state.role === "LIBRARIAN") {
155 this.menus = menu.libraryMenu;
156 } else if (this.$store.state.role === "ACCOUNTANT") {
157 this.menus = menu.accountMenu;
154 } 158 }
155 window.getApp.$on("APP_DRAWER_TOGGLED", () => { 159 window.getApp.$on("APP_DRAWER_TOGGLED", () => {
156 this.drawer = !this.drawer; 160 this.drawer = !this.drawer;
157 }); 161 });
158 }, 162 },
159 163
160 methods: { 164 methods: {
161 genChildTarget(item, subItem) { 165 genChildTarget(item, subItem) {
162 if (subItem.href) return; 166 if (subItem.href) return;
163 if (subItem.component) { 167 if (subItem.component) {
164 return { 168 return {
165 name: subItem.component 169 name: subItem.component
166 }; 170 };
167 } 171 }
168 return { name: `${item.group}/${subItem.name}` }; 172 return { name: `${item.group}/${subItem.name}` };
169 } 173 }
170 } 174 }
171 }; 175 };
172 </script> 176 </script>
173 177
174 178
175 <style lang="stylus"> 179 <style lang="stylus">
176 // @import '../../node_modules/vuetify/src/stylus/settings/_elevations.styl'; 180 // @import '../../node_modules/vuetify/src/stylus/settings/_elevations.styl';
177 #appDrawer { 181 #appDrawer {
178 overflow: hidden; 182 overflow: hidden;
179 183
180 .drawer-menu--scroll { 184 .drawer-menu--scroll {
181 height: calc(100vh - 48px); 185 height: calc(100vh - 48px);
182 overflow: auto; 186 overflow: auto;
183 } 187 }
184 } 188 }
185 189
186 .v-list__group__items--no-action .v-list__tile { 190 .v-list__group__items--no-action .v-list__tile {
187 padding-left: 72px !important; 191 padding-left: 72px !important;
188 } 192 }
189 193
190 .v-list--dense .v-list__tile:not(.v-list__tile--avatar) { 194 .v-list--dense .v-list__tile:not(.v-list__tile--avatar) {
191 height: 60px; 195 height: 60px;
192 font-size: 17px; 196 font-size: 17px;
193 } 197 }
194 198
195 .v-list__tile__action { 199 .v-list__tile__action {
196 min-width: 36px; 200 min-width: 36px;
197 } 201 }
198 202
199 .v-list__tile.primary--text a { 203 .v-list__tile.primary--text a {
200 color: black !important; 204 color: black !important;
201 border-left: 4px solid black; 205 border-left: 4px solid black;
202 border-radius: 4px; 206 border-radius: 4px;
203 } 207 }
204 208
205 @media screen and (max-width: 420px) { 209 @media screen and (max-width: 420px) {
206 .v-list--dense .v-list__tile:not(.v-list__tile--avatar) { 210 .v-list--dense .v-list__tile:not(.v-list__tile--avatar) {
207 font-size: 14px; 211 font-size: 14px;
208 } 212 }
209 213
210 .imgLogo { 214 .imgLogo {
211 height: 32px; 215 height: 32px;
212 width: 120px; 216 width: 120px;
213 } 217 }
214 } 218 }
215 </style> 219 </style>
216 220
217 221
218 <style scoped> 222 <style scoped>
219 .theme--light .v-icon, 223 .theme--light .v-icon,
220 .application .theme--light.v-icon { 224 .application .theme--light.v-icon {
221 color: #39b982; 225 color: #39b982;
222 } 226 }
223 a { 227 a {
224 text-decoration: none; 228 text-decoration: none;
225 display: inherit; 229 display: inherit;
226 color: black; 230 color: black;
227 } 231 }
228 a:hover { 232 a:hover {
229 color: gray !important; 233 color: gray !important;
230 /* border-left: 4px solid black; */ 234 /* border-left: 4px solid black; */
231 /* border-radius: 4px; */ 235 /* border-radius: 4px; */
232 } 236 }
233 /* a:active { 237 /* a:active {
234 color: red !important; 238 color: red !important;
235 } */ 239 } */
236 /* a:visited { 240 /* a:visited {
237 border-left: 4px solid black; 241 border-left: 4px solid black;
238 border-radius: 4px; 242 border-radius: 4px;
239 } */ 243 } */
240 /* visited link */ 244 /* visited link */
241 /* a:visited { 245 /* a:visited {
242 color: black !important; 246 color: black !important;
243 border-left: 4px solid black; 247 border-left: 4px solid black;
244 border-radius: 4px; 248 border-radius: 4px;
245 } 249 }
246 a:active { 250 a:active {
247 color: black !important; 251 color: black !important;
248 border-left: 4px solid black; 252 border-left: 4px solid black;
249 border-radius: 4px; 253 border-radius: 4px;
250 } */ 254 } */
251 </style> 255 </style>
252 256
253 257
src/components/pageHeader/AppToolbar.vue
Diff comments   View file @99cd791
1 <template> 1 <template>
2 <v-toolbar class="fixcolors" fixed app> 2 <v-toolbar class="fixcolors" fixed app>
3 <v-toolbar-title class="ml-0"> 3 <v-toolbar-title class="ml-0">
4 <v-toolbar-side-icon @click.stop="handleDrawerToggle" class="hide white--text"></v-toolbar-side-icon> 4 <v-toolbar-side-icon @click.stop="handleDrawerToggle" class="hide white--text"></v-toolbar-side-icon>
5 </v-toolbar-title> 5 </v-toolbar-title>
6 6
7 <!-- ****** SEARCH ALL EXISTING STUDENTS ****** --> 7 <!-- ****** SEARCH ALL EXISTING STUDENTS ****** -->
8 <v-flex 8 <v-flex
9 xs7 9 xs7
10 sm3 10 sm3
11 class="userSearch" 11 class="userSearch"
12 v-if="$route.name != 'Dashboard' && $route.name != 'changepassword' && $route.name != 'generalSetting' && $route.name != 'resetPassword' && $route.name != 'bulkImport'" 12 v-if="$route.name != 'Dashboard' && $route.name != 'changepassword' && $route.name != 'generalSetting' && $route.name != 'resetPassword' && $route.name != 'bulkImport'"
13 > 13 >
14 <v-text-field 14 <v-text-field
15 flat 15 flat
16 append-icon="search" 16 append-icon="search"
17 label="Seacrh" 17 label="Seacrh"
18 class="pl-3" 18 class="pl-3"
19 color="white" 19 color="white"
20 @input.native="emitSearch" 20 @input.native="emitSearch"
21 type="text" 21 type="text"
22 dark 22 dark
23 ></v-text-field> 23 ></v-text-field>
24 </v-flex> 24 </v-flex>
25 <v-spacer></v-spacer> 25 <v-spacer></v-spacer>
26 <v-menu offset-y origin="center center" :nudge-bottom="10" transition="scale-transition"> 26 <v-menu offset-y origin="center center" :nudge-bottom="10" transition="scale-transition">
27 <v-btn icon large flat slot="activator"> 27 <v-btn icon large flat slot="activator">
28 <v-avatar> 28 <v-avatar>
29 <!-- <img src="/static/icon/user.png" /> --> 29 <!-- <img src="/static/icon/user.png" /> -->
30 <v-icon dark size="40px" v-if="!userData.schoolLogoUrl">account_circle</v-icon> 30 <v-icon dark size="40px" v-if="!userData.schoolLogoUrl && !userData.profilePicUrl">account_circle</v-icon>
31 <img :src="userData.schoolLogoUrl" v-else-if="userData.schoolLogoUrl" /> 31 <img :src="userData.schoolLogoUrl" v-else-if="userData.schoolLogoUrl" />
32 <img :src="userData.profilePicUrl" v-else-if="userData.profilePicUrl" />
32 </v-avatar> 33 </v-avatar>
33 </v-btn> 34 </v-btn>
34 <v-list class="pa-0"> 35 <v-list class="pa-0">
35 <v-list-tile 36 <v-list-tile
36 v-for="(item,index) in items" 37 v-for="(item,index) in items"
37 :to="!item.href ? { name: item.name } : null" 38 :to="!item.href ? { name: item.name } : null"
38 :href="item.href" 39 :href="item.href"
39 @click="item.click" 40 @click="item.click"
40 ripple="ripple" 41 ripple="ripple"
41 :disabled="item.disabled" 42 :disabled="item.disabled"
42 :target="item.target" 43 :target="item.target"
43 rel="noopener" 44 rel="noopener"
44 :key="index" 45 :key="index"
45 > 46 >
46 <v-list-tile-action v-if="item.icon"> 47 <v-list-tile-action v-if="item.icon">
47 <v-icon class="iconSize">{{ item.icon }}</v-icon> 48 <v-icon class="iconSize">{{ item.icon }}</v-icon>
48 </v-list-tile-action> 49 </v-list-tile-action>
49 <v-list-tile-content> 50 <v-list-tile-content>
50 <v-list-tile-title>{{ item.title }}</v-list-tile-title> 51 <v-list-tile-title>{{ item.title }}</v-list-tile-title>
51 </v-list-tile-content> 52 </v-list-tile-content>
52 </v-list-tile> 53 </v-list-tile>
53 </v-list> 54 </v-list>
54 </v-menu> 55 </v-menu>
55 </v-toolbar> 56 </v-toolbar>
56 </template> 57 </template>
57 <script> 58 <script>
58 import http from "@/Services/http.js"; 59 import http from "@/Services/http.js";
59 60
60 export default { 61 export default {
61 name: "app-toolbar", 62 name: "app-toolbar",
62 data: () => ({ 63 data: () => ({
63 userName: "", 64 userName: "",
64 search: "", 65 search: "",
65 userData: {}, 66 userData: {},
66 items: [ 67 items: [
67 { 68 {
68 icon: "account_circle", 69 icon: "account_circle",
69 href: "/resetPassword", 70 href: "/resetPassword",
70 title: "Change Password", 71 title: "Change Password",
71 click: e => { 72 click: e => {
72 console.log(e); 73 console.log(e);
73 } 74 }
74 }, 75 },
75 // { 76 // {
76 // icon: 'settings', 77 // icon: 'settings',
77 // href: '#', 78 // href: '#',
78 // title: 'Settings', 79 // title: 'Settings',
79 // click: (e) => { 80 // click: (e) => {
80 // console.log(e); 81 // console.log(e);
81 // } 82 // }
82 // }, 83 // },
83 { 84 {
84 icon: "lock", 85 icon: "lock",
85 href: "#", 86 href: "#",
86 title: "Logout", 87 title: "Logout",
87 click: e => { 88 click: e => {
88 window.getApp.$emit("APP_LOGOUT"); 89 window.getApp.$emit("APP_LOGOUT");
89 } 90 }
90 } 91 }
91 ] 92 ]
92 }), 93 }),
93 computed: { 94 computed: {
94 toolbarColor() { 95 toolbarColor() {
95 return this.$vuetify.options.extra.mainNav; 96 return this.$vuetify.options.extra.mainNav;
96 } 97 }
97 }, 98 },
98 mounted() { 99 mounted() {
99 this.getUserData(); 100 this.getUserData();
100 }, 101 },
101 methods: { 102 methods: {
102 emitSearch(ev) { 103 emitSearch(ev) {
103 this.$root.$emit("app:search", ev.target.value); 104 this.$root.$emit("app:search", ev.target.value);
104 console.log("ev.target.value", ev.target.value); 105 console.log("ev.target.value", ev.target.value);
105 }, 106 },
106 handleDrawerToggle() { 107 handleDrawerToggle() {
107 window.getApp.$emit("APP_DRAWER_TOGGLED"); 108 window.getApp.$emit("APP_DRAWER_TOGGLED");
108 }, 109 },
109 handleFullScreen() { 110 handleFullScreen() {
110 Util.toggleFullScreen(); 111 Util.toggleFullScreen();
111 }, 112 },
112 getUserData() { 113 getUserData() {
113 http() 114 http()
114 .get("/getParticularUserDetail") 115 .get("/getParticularUserDetail")
115 .then(response => { 116 .then(response => {
116 this.userData = response.data.data; 117 this.userData = response.data.data;
117 }) 118 })
118 .catch(error => { 119 .catch(error => {
119 if (error.response.status === 401) { 120 if (error.response.status === 401) {
120 this.$router.replace({ path: "/" }); 121 this.$router.replace({ path: "/" });
121 this.$store.dispatch("setToken", null); 122 this.$store.dispatch("setToken", null);
122 this.$store.dispatch("Id", null); 123 this.$store.dispatch("Id", null);
123 } 124 }
124 }); 125 });
125 } 126 }
126 } 127 }
127 }; 128 };
128 </script> 129 </script>
129 <style> 130 <style>
130 .v-icon { 131 .v-icon {
131 font-size: 30px; 132 font-size: 30px;
132 } 133 }
133 .fixcolors { 134 .fixcolors {
134 background: #444b54 !important; 135 background: #444b54 !important;
135 } 136 }
136 @media screen and (min-width: 1270px) { 137 @media screen and (min-width: 1270px) {
137 .hide { 138 .hide {
138 display: none; 139 display: none;
139 } 140 }
140 /* } 141 /* }
141 @media screen and (max-width: 962px) { 142 @media screen and (max-width: 962px) {
142 .imglogo{ 143 .imglogo{
143 position: absolute; 144 position: absolute;
144 top: 13px; 145 top: 13px;
145 left: 13px !important; 146 left: 13px !important;
146 width: 70px; 147 width: 70px;
147 height: 24px; 148 height: 24px;
148 } */ 149 } */
149 } 150 }
150 @media screen and (max-width: 420px) { 151 @media screen and (max-width: 420px) {
151 .v-list__tile { 152 .v-list__tile {
152 font-size: 14px; 153 font-size: 14px;
153 padding: 0 10px; 154 padding: 0 10px;
154 } 155 }
155 .name { 156 .name {
156 font-size: 15px; 157 font-size: 15px;
157 } 158 }
158 } 159 }
159 </style> 160 </style>
160 161
src/pages/Account/expense.vue
Diff comments   View file @99cd791
1 <template> 1 <template>
2 <v-app id="pages-dasboard"> 2 <v-app id="pages-dasboard">
3 <v-tabs grow slider-color="gray"> 3 <v-tabs grow slider-color="gray">
4 <v-tab 4 <v-tab
5 ripple 5 ripple
6 @click="activeTab('existing')" 6 @click="activeTab('existing')"
7 v-bind:class="{ active: isActive }" 7 v-bind:class="{ active: isActive }"
8 id="tab" 8 id="tab"
9 class="subheading" 9 class="subheading"
10 >Existing Expense</v-tab> 10 >Existing Expense</v-tab>
11 <v-tab 11 <v-tab
12 ripple 12 ripple
13 @click="activeTab('new')" 13 @click="activeTab('new')"
14 v-bind:class="{ active: newActive }" 14 v-bind:class="{ active: newActive }"
15 id="tab1" 15 id="tab1"
16 User 16 User
17 class="subheading" 17 class="subheading"
18 >Add New Expense</v-tab> 18 >Add New Expense</v-tab>
19 <!-- ****** EDIT EXPENSE DETAILS ****** --> 19 <!-- ****** EDIT EXPENSE DETAILS ****** -->
20 <v-tab-item> 20 <v-tab-item>
21 <v-snackbar 21 <v-snackbar
22 :timeout="timeout" 22 :timeout="timeout"
23 :top="y === 'top'" 23 :top="y === 'top'"
24 :right="x === 'right'" 24 :right="x === 'right'"
25 :vertical="mode === 'vertical'" 25 :vertical="mode === 'vertical'"
26 v-model="snackbar" 26 v-model="snackbar"
27 color="success" 27 color="success"
28 >{{ text }}</v-snackbar> 28 >{{ text }}</v-snackbar>
29 <v-dialog v-model="dialog" max-width="600px" scrollable> 29 <v-dialog v-model="dialog" max-width="600px" scrollable>
30 <v-card flat> 30 <v-card flat>
31 <v-toolbar color="grey lighten-2" flat> 31 <v-toolbar color="grey lighten-2" flat>
32 <v-spacer></v-spacer> 32 <v-spacer></v-spacer>
33 <v-toolbar-title>Edit Expense Profile</v-toolbar-title> 33 <v-toolbar-title>Edit Expense Profile</v-toolbar-title>
34 <v-spacer></v-spacer> 34 <v-spacer></v-spacer>
35 </v-toolbar> 35 </v-toolbar>
36 <v-card-text style="height: 600px;"> 36 <v-card-text style="height: 600px;">
37 <v-layout> 37 <v-layout>
38 <v-flex 38 <v-flex
39 xs12 39 xs12
40 class="text-xs-center text-sm-center text-md-center text-lg-center my-4 mr-4" 40 class="text-xs-center text-sm-center text-md-center text-lg-center my-4 mr-4"
41 > 41 >
42 <v-avatar size="160px"> 42 <v-avatar size="160px">
43 <img src="/static/icon/user.png" v-if="!editedItem.fileUrl && !imageUrl" /> 43 <img src="/static/icon/user.png" v-if="!editedItem.fileUrl && !imageUrl" />
44 <img :src="editedItem.fileUrl" v-else-if="editedItem.fileUrl && !imageUrl" /> 44 <img :src="editedItem.fileUrl" v-else-if="editedItem.fileUrl && !imageUrl" />
45 <img 45 <img
46 v-if="imageUrl" 46 v-if="imageUrl"
47 :src="imageUrl" 47 :src="imageUrl"
48 height="150" 48 height="150"
49 style="border-radius:50%; width:200px" 49 style="border-radius:50%; width:200px"
50 /> 50 />
51 </v-avatar> 51 </v-avatar>
52 <input 52 <input
53 type="file" 53 type="file"
54 style="display:none" 54 style="display:none"
55 ref="image" 55 ref="image"
56 accept="image/*" 56 accept="image/*"
57 @change="onFilePicked" 57 @change="onFilePicked"
58 /> 58 />
59 </v-flex> 59 </v-flex>
60 </v-layout> 60 </v-layout>
61 <v-layout wrap> 61 <v-layout wrap>
62 <v-flex xs12 sm12> 62 <v-flex xs12 sm12>
63 <v-layout> 63 <v-layout>
64 <v-flex xs4 class="pt-4 subheading"> 64 <v-flex xs4 class="pt-4 subheading">
65 <label class="right">Name:</label> 65 <label class="right">Name:</label>
66 </v-flex> 66 </v-flex>
67 <v-flex xs6 class="ml-3"> 67 <v-flex xs6 class="ml-3">
68 <v-text-field 68 <v-text-field
69 v-model="editedItem.name" 69 v-model="editedItem.name"
70 placeholder="fill your full Name" 70 placeholder="fill your full Name"
71 name="name" 71 name="name"
72 type="text" 72 type="text"
73 required 73 required
74 ></v-text-field> 74 ></v-text-field>
75 </v-flex> 75 </v-flex>
76 </v-layout> 76 </v-layout>
77 </v-flex> 77 </v-flex>
78 </v-layout> 78 </v-layout>
79 <v-layout wrap> 79 <v-layout wrap>
80 <v-flex xs12> 80 <v-flex xs12>
81 <v-layout> 81 <v-layout>
82 <v-flex xs4 class="pt-4 subheading"> 82 <v-flex xs4 class="pt-4 subheading">
83 <label class="right">Date:</label> 83 <label class="right">Date:</label>
84 </v-flex> 84 </v-flex>
85 <v-flex xs6 class="ml-3"> 85 <v-flex xs6 class="ml-3">
86 <v-menu 86 <v-menu
87 ref="menu" 87 ref="menu"
88 :close-on-content-click="false" 88 :close-on-content-click="false"
89 v-model="menu3" 89 v-model="menu3"
90 :nudge-right="40" 90 :nudge-right="40"
91 lazy 91 lazy
92 transition="scale-transition" 92 transition="scale-transition"
93 offset-y 93 offset-y
94 full-width 94 full-width
95 min-width="290px" 95 min-width="290px"
96 > 96 >
97 <v-text-field 97 <v-text-field
98 slot="activator" 98 slot="activator"
99 v-model="editedItem.date" 99 v-model="editedItem.date"
100 placeholder="Select date" 100 placeholder="Select date"
101 ></v-text-field> 101 ></v-text-field>
102 <v-date-picker 102 <v-date-picker
103 ref="picker" 103 ref="picker"
104 v-model="editedItem.date" 104 v-model="editedItem.date"
105 @input="$refs.menu.save(editedItem.date)" 105 @input="$refs.menu.save(editedItem.date)"
106 ></v-date-picker> 106 ></v-date-picker>
107 </v-menu> 107 </v-menu>
108 </v-flex> 108 </v-flex>
109 </v-layout> 109 </v-layout>
110 </v-flex> 110 </v-flex>
111 <v-layout wrap> 111 <v-layout wrap>
112 <v-flex xs12 sm12> 112 <v-flex xs12 sm12>
113 <v-layout> 113 <v-layout>
114 <v-flex xs4 class="pt-4 subheading"> 114 <v-flex xs4 class="pt-4 subheading">
115 <label class="right">Amount:</label> 115 <label class="right">Amount:</label>
116 </v-flex> 116 </v-flex>
117 <v-flex xs6 class="ml-3"> 117 <v-flex xs6 class="ml-3">
118 <v-text-field v-model="editedItem.amount" required></v-text-field> 118 <v-text-field v-model="editedItem.amount" required></v-text-field>
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-flex xs12> 123 <v-flex xs12>
124 <v-layout wrap> 124 <v-layout wrap>
125 <v-flex xs4 class="pt-4 subheading"> 125 <v-flex xs4 class="pt-4 subheading">
126 <label class="right hidden-xs-only hidden-sm-only">Uplaod Image:</label> 126 <label class="right hidden-xs-only hidden-sm-only">Uplaod Image:</label>
127 <label class="right hidden-lg-only hidden-md-only hidden-xl-only">Uplaod:</label> 127 <label class="right hidden-lg-only hidden-md-only hidden-xl-only">Uplaod:</label>
128 </v-flex> 128 </v-flex>
129 <v-flex xs6 class="ml-3"> 129 <v-flex xs6 class="ml-3">
130 <v-text-field 130 <v-text-field
131 label="Select Image" 131 label="Select Image"
132 @click="pickFile" 132 @click="pickFile"
133 v-model="imageName" 133 v-model="imageName"
134 append-icon="attach_file" 134 append-icon="attach_file"
135 ></v-text-field> 135 ></v-text-field>
136 </v-flex> 136 </v-flex>
137 </v-layout> 137 </v-layout>
138 </v-flex> 138 </v-flex>
139 <v-flex xs12> 139 <v-flex xs12>
140 <v-layout> 140 <v-layout>
141 <v-flex xs4 class="pt-4 subheading"> 141 <v-flex xs4 class="pt-4 subheading">
142 <label class="right">Note:</label> 142 <label class="right">Note:</label>
143 </v-flex> 143 </v-flex>
144 <v-flex xs6 class="ml-3"> 144 <v-flex xs6 class="ml-3">
145 <v-textarea 145 <v-textarea
146 name="input-7-1" 146 name="input-7-1"
147 v-model="editedItem.note" 147 v-model="editedItem.note"
148 placeholder="fill your Note" 148 placeholder="fill your Note"
149 type="text" 149 type="text"
150 :rules="noteRules" 150 :rules="noteRules"
151 multi-line 151 multi-line
152 required 152 required
153 ></v-textarea> 153 ></v-textarea>
154 </v-flex> 154 </v-flex>
155 </v-layout> 155 </v-layout>
156 </v-flex> 156 </v-flex>
157 </v-layout> 157 </v-layout>
158 <v-layout> 158 <v-layout>
159 <v-flex xs12 sm12> 159 <v-flex xs12 sm12>
160 <v-card-actions> 160 <v-card-actions>
161 <v-btn round dark @click.native="close">Cancel</v-btn> 161 <v-btn round dark @click.native="close">Cancel</v-btn>
162 <v-spacer></v-spacer> 162 <v-spacer></v-spacer>
163 <v-btn round dark :loading="loading" @click="save">Save</v-btn> 163 <v-btn round dark :loading="loading" @click="save">Save</v-btn>
164 </v-card-actions> 164 </v-card-actions>
165 </v-flex> 165 </v-flex>
166 </v-layout> 166 </v-layout>
167 </v-card-text> 167 </v-card-text>
168 </v-card> 168 </v-card>
169 </v-dialog> 169 </v-dialog>
170 170
171 <!-- ****** PROFILE VIEW EXPENSE DETAILS ****** --> 171 <!-- ****** PROFILE VIEW EXPENSE DETAILS ****** -->
172 172
173 <v-dialog v-model="dialog1" max-width="600px" scrollable> 173 <v-dialog v-model="dialog1" max-width="600px" scrollable>
174 <v-card> 174 <v-card>
175 <v-toolbar color="grey lighten-2" flat> 175 <v-toolbar color="grey lighten-2" flat>
176 <v-spacer></v-spacer> 176 <v-spacer></v-spacer>
177 <v-toolbar-title> 177 <v-toolbar-title>
178 <h3>Expense Profile</h3> 178 <h3>Expense Profile</h3>
179 </v-toolbar-title> 179 </v-toolbar-title>
180 <v-spacer></v-spacer> 180 <v-spacer></v-spacer>
181 <v-icon @click="close1">close</v-icon> 181 <v-icon @click="close1">close</v-icon>
182 </v-toolbar> 182 </v-toolbar>
183 <v-card-text style="height: 460px;"> 183 <v-card-text style="height: 460px;">
184 <v-container grid-list-md> 184 <v-container grid-list-md>
185 <v-layout wrap> 185 <v-layout wrap>
186 <v-flex> 186 <v-flex>
187 <v-flex align-center justify-center layout text-xs-center> 187 <v-flex align-center justify-center layout text-xs-center>
188 <v-avatar size="160px"> 188 <v-avatar size="160px">
189 <img src="/static/icon/user.png" v-if="!editedItem.fileUrl" /> 189 <img src="/static/icon/user.png" v-if="!editedItem.fileUrl" />
190 <img :src="editedItem.fileUrl" v-else-if="editedItem.fileUrl" /> 190 <img :src="editedItem.fileUrl" v-else-if="editedItem.fileUrl" />
191 </v-avatar> 191 </v-avatar>
192 </v-flex> 192 </v-flex>
193 <v-layout> 193 <v-layout>
194 <v-flex xs5 sm6> 194 <v-flex xs5 sm6>
195 <h5 class="right my-1"> 195 <h5 class="right my-1">
196 <b>Name:</b> 196 <b>Name:</b>
197 </h5> 197 </h5>
198 </v-flex> 198 </v-flex>
199 <v-flex sm6 xs8> 199 <v-flex sm6 xs8>
200 <h5 class="my-1">{{ editedItem.name }}</h5> 200 <h5 class="my-1">{{ editedItem.name }}</h5>
201 </v-flex> 201 </v-flex>
202 </v-layout> 202 </v-layout>
203 <v-layout> 203 <v-layout>
204 <v-flex xs5 sm6> 204 <v-flex xs5 sm6>
205 <h5 class="right my-1"> 205 <h5 class="right my-1">
206 <b>Amount:</b> 206 <b>Amount:</b>
207 </h5> 207 </h5>
208 </v-flex> 208 </v-flex>
209 <v-flex sm6 xs8> 209 <v-flex sm6 xs8>
210 <h5 class="my-1">{{ editedItem.amount }}</h5> 210 <h5 class="my-1">{{ editedItem.amount }}</h5>
211 </v-flex> 211 </v-flex>
212 </v-layout> 212 </v-layout>
213 <v-layout> 213 <v-layout>
214 <v-flex xs5 sm6> 214 <v-flex xs5 sm6>
215 <h5 class="right my-1"> 215 <h5 class="right my-1">
216 <b>Date:</b> 216 <b>Date:</b>
217 </h5> 217 </h5>
218 </v-flex> 218 </v-flex>
219 <v-flex sm6 xs8> 219 <v-flex sm6 xs8>
220 <h5 class="my-1">{{ dates(editedItem.date) }}</h5> 220 <h5 class="my-1">{{ dates(editedItem.date) }}</h5>
221 </v-flex> 221 </v-flex>
222 </v-layout> 222 </v-layout>
223 <v-layout> 223 <v-layout>
224 <v-flex xs5 sm6> 224 <v-flex xs5 sm6>
225 <h5 class="right my-1"> 225 <h5 class="right my-1">
226 <b>Note:</b> 226 <b>Note:</b>
227 </h5> 227 </h5>
228 </v-flex> 228 </v-flex>
229 <v-flex sm6 xs8> 229 <v-flex sm6 xs8>
230 <h5 class="my-1">{{ editedItem.note }}</h5> 230 <h5 class="my-1">{{ editedItem.note }}</h5>
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-container> 235 </v-container>
236 </v-card-text> 236 </v-card-text>
237 </v-card> 237 </v-card>
238 </v-dialog> 238 </v-dialog>
239 <v-snackbar 239 <v-snackbar
240 :timeout="timeout" 240 :timeout="timeout"
241 :top="y === 'top'" 241 :top="y === 'top'"
242 :right="x === 'right'" 242 :right="x === 'right'"
243 :vertical="mode === 'vertical'" 243 :vertical="mode === 'vertical'"
244 v-model="snackbar" 244 v-model="snackbar"
245 color="success" 245 color="success"
246 >{{ text }}</v-snackbar> 246 >{{ text }}</v-snackbar>
247 247
248 <!-- ****** EXISTING-EXPENSE TABLE DATA****** --> 248 <!-- ****** EXISTING-EXPENSE TABLE DATA****** -->
249 249
250 <v-data-table 250 <v-data-table
251 :headers="headers" 251 :headers="headers"
252 :items="expenseList" 252 :items="expenseList"
253 :pagination.sync="pagination" 253 :pagination.sync="pagination"
254 :search="search" 254 :search="search"
255 > 255 >
256 <template slot="items" slot-scope="props"> 256 <template slot="items" slot-scope="props">
257 <td id="td" class="text-xs-center">{{ props.index + 1}}</td> 257 <td id="td" class="text-xs-center">{{ props.index + 1}}</td>
258 <td id="td" class="text-xs-center"> 258 <td id="td" class="text-xs-center">
259 <v-avatar> 259 <v-avatar>
260 <img :src="props.item.fileUrl" v-if="props.item.fileUrl" /> 260 <img :src="props.item.fileUrl" v-if="props.item.fileUrl" />
261 <img src="/static/icon/user.png" v-else-if="!props.item.fileUrl" /> 261 <img src="/static/icon/user.png" v-else-if="!props.item.fileUrl" />
262 </v-avatar> 262 </v-avatar>
263 </td> 263 </td>
264 <td id="td" class="text-xs-center">{{ props.item.name}}</td> 264 <td id="td" class="text-xs-center">{{ props.item.name}}</td>
265 <td id="td" class="text-xs-center">{{ dates(props.item.date) }}</td> 265 <td id="td" class="text-xs-center">{{ dates(props.item.date) }}</td>
266 <td id="td" class="text-xs-center">{{ props.item.user }}</td> 266 <td id="td" class="text-xs-center">{{ props.item.user }}</td>
267 <td id="td" class="text-xs-center">{{ props.item.amount }}</td> 267 <td id="td" class="text-xs-center">{{ props.item.amount }}</td>
268 <td id="td" class="text-xs-center">{{ props.item.note }}</td> 268 <td id="td" class="text-xs-center">{{ props.item.note }}</td>
269 <td class="text-xs-center"> 269 <td class="text-xs-center">
270 <span> 270 <span>
271 <v-tooltip top> 271 <v-tooltip top>
272 <img 272 <img
273 slot="activator" 273 slot="activator"
274 style="cursor:pointer; width:25px; height:18px; " 274 style="cursor:pointer; width:25px; height:18px; "
275 class="mr5" 275 class="mr5"
276 @click="profile(props.item)" 276 @click="profile(props.item)"
277 src="/static/icon/eye1.png" 277 src="/static/icon/eye1.png"
278 /> 278 />
279 <span>View</span> 279 <span>View</span>
280 </v-tooltip> 280 </v-tooltip>
281 <v-tooltip top> 281 <v-tooltip top>
282 <img 282 <img
283 slot="activator" 283 slot="activator"
284 style="cursor:pointer; width:20px; height:18px; " 284 style="cursor:pointer; width:20px; height:18px; "
285 class="mr5" 285 class="mr5"
286 @click="editItem(props.item)" 286 @click="editItem(props.item)"
287 src="/static/icon/edit1.png" 287 src="/static/icon/edit1.png"
288 /> 288 />
289 <span>Edit</span> 289 <span>Edit</span>
290 </v-tooltip> 290 </v-tooltip>
291 <v-tooltip top> 291 <v-tooltip top>
292 <img 292 <img
293 slot="activator" 293 slot="activator"
294 style="cursor:pointer; width:20px; height:20px; " 294 style="cursor:pointer; width:20px; height:20px; "
295 class="mr5" 295 class="mr5"
296 @click="deleteItem(props.item)" 296 @click="deleteItem(props.item)"
297 src="/static/icon/delete1.png" 297 src="/static/icon/delete1.png"
298 /> 298 />
299 <span>Delete</span> 299 <span>Delete</span>
300 </v-tooltip> 300 </v-tooltip>
301 </span> 301 </span>
302 </td> 302 </td>
303 </template> 303 </template>
304 <v-alert 304 <v-alert
305 slot="no-results" 305 slot="no-results"
306 :value="true" 306 :value="true"
307 color="error" 307 color="error"
308 icon="warning" 308 icon="warning"
309 >Your search for "{{ search }}" found no results.</v-alert> 309 >Your search for "{{ search }}" found no results.</v-alert>
310 </v-data-table> 310 </v-data-table>
311 </v-tab-item> 311 </v-tab-item>
312 312
313 <!-- ****** Add Expense Data ****** --> 313 <!-- ****** Add Expense Data ****** -->
314 <v-tab-item> 314 <v-tab-item>
315 <v-container> 315 <v-container>
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="success" 322 color="success"
323 >{{ text }}</v-snackbar> 323 >{{ text }}</v-snackbar>
324 <v-flex xs12 sm12 class="my-4"> 324 <v-flex xs12 sm12 class="my-4">
325 <v-card flat> 325 <v-card flat>
326 <v-form ref="form" v-model="valid" lazy-validation> 326 <v-form ref="form" v-model="valid" lazy-validation>
327 <v-container fluid> 327 <v-container fluid>
328 <v-layout> 328 <v-layout>
329 <v-flex 329 <v-flex
330 xs12 330 xs12
331 class="text-xs-center text-sm-center text-md-center text-lg-center my-4 mr-4" 331 class="text-xs-center text-sm-center text-md-center text-lg-center my-4 mr-4"
332 > 332 >
333 <v-avatar size="100px"> 333 <v-avatar size="100px">
334 <img src="/static/icon/user.png" v-if="!imageUrl" /> 334 <img src="/static/icon/user.png" v-if="!imageUrl" />
335 </v-avatar> 335 </v-avatar>
336 <img 336 <img
337 :src="imageUrl" 337 :src="imageUrl"
338 height="150" 338 height="150"
339 v-if="imageUrl" 339 v-if="imageUrl"
340 style="border-radius:50%; width:200px" 340 style="border-radius:50%; width:200px"
341 /> 341 />
342 </v-flex> 342 </v-flex>
343 </v-layout> 343 </v-layout>
344 <v-layout> 344 <v-layout>
345 <v-flex xs12 sm12> 345 <v-flex xs12 sm12>
346 <v-layout> 346 <v-layout>
347 <v-flex xs4 class="pt-4 subheading"> 347 <v-flex xs4 class="pt-4 subheading">
348 <label class="right">Name:</label> 348 <label class="right">Name:</label>
349 </v-flex> 349 </v-flex>
350 <v-flex xs8 sm4 class="ml-3"> 350 <v-flex xs8 sm4 class="ml-3">
351 <v-text-field 351 <v-text-field
352 v-model="addExpense.name" 352 v-model="addExpense.name"
353 placeholder="fill your full Name" 353 placeholder="fill your full Name"
354 name="name" 354 name="name"
355 type="text" 355 type="text"
356 :rules="nameRules" 356 :rules="nameRules"
357 required 357 required
358 ></v-text-field> 358 ></v-text-field>
359 </v-flex> 359 </v-flex>
360 </v-layout> 360 </v-layout>
361 </v-flex> 361 </v-flex>
362 </v-layout> 362 </v-layout>
363 <v-layout> 363 <v-layout>
364 <v-flex xs12 sm12> 364 <v-flex xs12 sm12>
365 <v-layout> 365 <v-layout>
366 <v-flex xs4 class="pt-4 subheading"> 366 <v-flex xs4 class="pt-4 subheading">
367 <label class="right">Amount:</label> 367 <label class="right">Amount:</label>
368 </v-flex> 368 </v-flex>
369 <v-flex xs8 sm4 class="ml-3"> 369 <v-flex xs8 sm4 class="ml-3">
370 <v-text-field 370 <v-text-field
371 v-model="addExpense.amount" 371 v-model="addExpense.amount"
372 placeholder="fill your Amount" 372 placeholder="fill your Amount"
373 name="name" 373 name="name"
374 type="text" 374 type="text"
375 :rules="amountRules" 375 :rules="amountRules"
376 required 376 required
377 ></v-text-field> 377 ></v-text-field>
378 </v-flex> 378 </v-flex>
379 </v-layout> 379 </v-layout>
380 </v-flex> 380 </v-flex>
381 </v-layout> 381 </v-layout>
382 <v-layout> 382 <v-layout>
383 <v-flex xs12 sm12> 383 <v-flex xs12 sm12>
384 <v-layout> 384 <v-layout>
385 <v-flex xs4 class="pt-4 subheading"> 385 <v-flex xs4 class="pt-4 subheading">
386 <label class="right">Date</label> 386 <label class="right">Date</label>
387 </v-flex> 387 </v-flex>
388 <v-flex xs8 sm4 class="ml-3"> 388 <v-flex xs8 sm4 class="ml-3">
389 <v-menu 389 <v-menu
390 ref="menu1" 390 ref="menu1"
391 :close-on-content-click="false" 391 :close-on-content-click="false"
392 v-model="menu1" 392 v-model="menu1"
393 :nudge-right="40" 393 :nudge-right="40"
394 lazy 394 lazy
395 transition="scale-transition" 395 transition="scale-transition"
396 offset-y 396 offset-y
397 full-width 397 full-width
398 min-width="290px" 398 min-width="290px"
399 > 399 >
400 <v-text-field 400 <v-text-field
401 slot="activator" 401 slot="activator"
402 :rules="joinDateRules" 402 :rules="joinDateRules"
403 v-model="addExpense.date" 403 v-model="addExpense.date"
404 placeholder="Select date" 404 placeholder="Select date"
405 ></v-text-field> 405 ></v-text-field>
406 <v-date-picker 406 <v-date-picker
407 ref="picker" 407 ref="picker"
408 v-model="addExpense.date" 408 v-model="addExpense.date"
409 @input="$refs.menu1.save(addExpense.date)" 409 @input="$refs.menu1.save(addExpense.date)"
410 ></v-date-picker> 410 ></v-date-picker>
411 </v-menu> 411 </v-menu>
412 </v-flex> 412 </v-flex>
413 </v-layout> 413 </v-layout>
414 </v-flex> 414 </v-flex>
415 <v-flex xs12 sm12> 415 <v-flex xs12 sm12>
416 <v-layout> 416 <v-layout>
417 <v-flex xs4 class="pt-4 subheading"> 417 <v-flex xs4 class="pt-4 subheading">
418 <label class="right">File:</label> 418 <label class="right">File:</label>
419 </v-flex> 419 </v-flex>
420 <v-flex xs8 sm4 class="ml-3"> 420 <v-flex xs8 sm4 class="ml-3">
421 <v-text-field 421 <v-text-field
422 label="Select file" 422 label="Select file"
423 @click="pickFile" 423 @click="pickFile"
424 v-model="imageName" 424 v-model="imageName"
425 append-icon="attach_file" 425 append-icon="attach_file"
426 ></v-text-field> 426 ></v-text-field>
427 <input 427 <input
428 type="file" 428 type="file"
429 style="display:none" 429 style="display:none"
430 ref="image" 430 ref="image"
431 accept="image/*" 431 accept="image/*"
432 @change="onFilePicked" 432 @change="onFilePicked"
433 /> 433 />
434 </v-flex> 434 </v-flex>
435 </v-layout> 435 </v-layout>
436 </v-flex> 436 </v-flex>
437 <v-layout> 437 <v-layout>
438 <v-flex xs12 sm12> 438 <v-flex xs12 sm12>
439 <v-layout> 439 <v-layout>
440 <v-flex xs4 class="pt-4 subheading"> 440 <v-flex xs4 class="pt-4 subheading">
441 <label class="right">Note:</label> 441 <label class="right">Note:</label>
442 </v-flex> 442 </v-flex>
443 <v-flex xs8 sm4 class="ml-3"> 443 <v-flex xs8 sm4 class="ml-3">
444 <v-textarea 444 <v-textarea
445 name="input-7-1" 445 name="input-7-1"
446 v-model="addExpense.note" 446 v-model="addExpense.note"
447 placeholder="fill your Note" 447 placeholder="fill your Note"
448 type="text" 448 type="text"
449 :rules="noteRules" 449 :rules="noteRules"
450 multi-line 450 multi-line
451 required 451 required
452 ></v-textarea> 452 ></v-textarea>
453 </v-flex> 453 </v-flex>
454 </v-layout> 454 </v-layout>
455 </v-flex> 455 </v-flex>
456 </v-layout> 456 </v-layout>
457 </v-layout> 457 </v-layout>
458 <v-layout> 458 <v-layout>
459 <v-flex xs12 sm6 offset-sm3> 459 <v-flex xs12 sm6 offset-sm3>
460 <v-layout> 460 <v-layout>
461 <v-flex xs6> 461 <v-flex xs6>
462 <v-btn @click="clear" round class="ml-3" dark>clear</v-btn> 462 <v-btn @click="clear" round class="ml-3" dark>clear</v-btn>
463 </v-flex> 463 </v-flex>
464 <v-flex xs6> 464 <v-flex xs6>
465 <v-btn @click="submit" round dark :loading="loading" class="right">Add</v-btn> 465 <v-btn @click="submit" round dark :loading="loading" class="right">Add</v-btn>
466 </v-flex> 466 </v-flex>
467 </v-layout> 467 </v-layout>
468 </v-flex> 468 </v-flex>
469 </v-layout> 469 </v-layout>
470 </v-container> 470 </v-container>
471 </v-form> 471 </v-form>
472 </v-card> 472 </v-card>
473 </v-flex> 473 </v-flex>
474 </v-container> 474 </v-container>
475 </v-tab-item> 475 </v-tab-item>
476 </v-tabs> 476 </v-tabs>
477 <div class="loader" v-if="showLoader"> 477 <div class="loader" v-if="showLoader">
478 <v-progress-circular indeterminate color="white"></v-progress-circular> 478 <v-progress-circular indeterminate color="white"></v-progress-circular>
479 </div> 479 </div>
480 </v-app> 480 </v-app>
481 </template> 481 </template>
482 482
483 <script> 483 <script>
484 import http from "@/Services/http.js"; 484 import http from "@/Services/http.js";
485 import Util from "@/util"; 485 import Util from "@/util";
486 import moment from "moment"; 486 import moment from "moment";
487 487
488 export default { 488 export default {
489 data: () => ({ 489 data: () => ({
490 component: "report-generate", 490 component: "report-generate",
491 snackbar: false, 491 snackbar: false,
492 y: "top", 492 y: "top",
493 x: "right", 493 x: "right",
494 mode: "", 494 mode: "",
495 timeout: 3000, 495 timeout: 3000,
496 text: "", 496 text: "",
497 showLoader: false, 497 showLoader: false,
498 loading: false, 498 loading: false,
499 date: null, 499 date: null,
500 search: "", 500 search: "",
501 menu: false, 501 menu: false,
502 menu1: false, 502 menu1: false,
503 menu2: false, 503 menu2: false,
504 menu3: false, 504 menu3: false,
505 dialog: false, 505 dialog: false,
506 dialog1: false, 506 dialog1: false,
507 valid: true, 507 valid: true,
508 isActive: true, 508 isActive: true,
509 newActive: false, 509 newActive: false,
510 pagination: { 510 pagination: {
511 rowsPerPage: 15 511 rowsPerPage: 15
512 }, 512 },
513 imageData: {}, 513 imageData: {},
514 imageName: "", 514 imageName: "",
515 imageUrl: "", 515 imageUrl: "",
516 imageFile: "", 516 imageFile: "",
517 nameRules: [v => !!v || " Full Name is required"], 517 nameRules: [v => !!v || " Full Name is required"],
518 amountRules: [v => !!v || "Amount is required"], 518 amountRules: [v => !!v || "Amount is required"],
519 noteRules: [v => !!v || "Note Name is required"], 519 noteRules: [v => !!v || "Note Name is required"],
520 joinDateRules: [v => !!v || "Date is required"], 520 joinDateRules: [v => !!v || "Date is required"],
521 errorMessages: "", 521 errorMessages: "",
522 headers: [ 522 headers: [
523 { 523 {
524 text: "No", 524 text: "No",
525 align: "center", 525 align: "center",
526 sortable: false, 526 sortable: false,
527 value: "No" 527 value: "No"
528 }, 528 },
529 { 529 {
530 text: "Profile Pic", 530 text: "Profile Pic",
531 value: "profilePicUrl", 531 value: "profilePicUrl",
532 sortable: false, 532 sortable: false,
533 align: "center" 533 align: "center"
534 }, 534 },
535 { text: "Name", value: "name", sortable: false, align: "center" }, 535 { text: "Name", value: "name", sortable: false, align: "center" },
536 { text: "Date", value: "date", sortable: false, align: "center" }, 536 { text: "Date", value: "date", sortable: false, align: "center" },
537 { text: "User", value: "user", sortable: false, align: "center" }, 537 { text: "User", value: "user", sortable: false, align: "center" },
538 { text: "Amount", value: "amount", sortable: false, align: "center" }, 538 { text: "Amount", value: "amount", sortable: false, align: "center" },
539 { text: "Note", value: "note", sortable: false, align: "center" }, 539 { text: "Note", value: "note", sortable: false, align: "center" },
540 { text: "Action", value: "", sortable: false, align: "center" } 540 { text: "Action", value: "", sortable: false, align: "center" }
541 ], 541 ],
542 expenseList: [], 542 expenseList: [],
543 editedIndex: -1, 543 editedIndex: -1,
544 upload: "", 544 upload: "",
545 editedItem: { 545 editedItem: {
546 role: "TEACHER", 546 role: "TEACHER",
547 name: "", 547 name: "",
548 email: "", 548 email: "",
549 date: null, 549 date: null,
550 city: "", 550 city: "",
551 pincode: "", 551 pincode: "",
552 country: "", 552 country: "",
553 permanentAddress: "", 553 permanentAddress: "",
554 presentAddress: "", 554 presentAddress: "",
555 mobileNo: "", 555 mobileNo: "",
556 state: "", 556 state: "",
557 joinDate: null 557 joinDate: null
558 }, 558 },
559 addExpense: {}, 559 addExpense: {},
560 defaultItem: { 560 defaultItem: {
561 role: "TEACHER", 561 role: "TEACHER",
562 name: "", 562 name: "",
563 email: "" 563 email: ""
564 } 564 }
565 }), 565 }),
566 watch: { 566 watch: {
567 menu(val) { 567 menu(val) {
568 val && this.$nextTick(() => (this.$refs.picker.activePicker = "YEAR")); 568 val && this.$nextTick(() => (this.$refs.picker.activePicker = "YEAR"));
569 }, 569 },
570 menu1(val) { 570 menu1(val) {
571 val && this.$nextTick(() => (this.$refs.picker.activePicker = "YEAR")); 571 val && this.$nextTick(() => (this.$refs.picker.activePicker = "YEAR"));
572 } 572 }
573 }, 573 },
574 methods: { 574 methods: {
575 save(date) { 575 save(date) {
576 this.$refs.menu.save(date); 576 this.$refs.menu.save(date);
577 }, 577 },
578 save(date) { 578 save(date) {
579 this.$refs.menu1.save(date); 579 this.$refs.menu1.save(date);
580 }, 580 },
581 pickFile() { 581 pickFile() {
582 this.$refs.image.click(); 582 this.$refs.image.click();
583 }, 583 },
584 onFilePicked(e) { 584 onFilePicked(e) {
585 // console.log(e) 585 // console.log(e)
586 const files = e.target.files; 586 const files = e.target.files;
587 this.upload = e.target.files[0]; 587 this.upload = e.target.files[0];
588 console.log("imageData-upload========>", this.upload); 588 console.log("imageData-upload========>", this.upload);
589 if (files[0] !== undefined) { 589 if (files[0] !== undefined) {
590 this.imageName = files[0].name; 590 this.imageName = files[0].name;
591 if (this.imageName.lastIndexOf(".") <= 0) { 591 if (this.imageName.lastIndexOf(".") <= 0) {
592 return; 592 return;
593 } 593 }
594 const fr = new FileReader(); 594 const fr = new FileReader();
595 fr.readAsDataURL(files[0]); 595 fr.readAsDataURL(files[0]);
596 fr.addEventListener("load", () => { 596 fr.addEventListener("load", () => {
597 this.imageUrl = fr.result; 597 this.imageUrl = fr.result;
598 this.imageFile = files[0]; // this is an image file that can be sent to server... 598 this.imageFile = files[0]; // this is an image file that can be sent to server...
599 // this.imageData.imageUrl = URL.createObjectURL(this.imageFile); 599 // this.imageData.imageUrl = URL.createObjectURL(this.imageFile);
600 // console.log("upload=======>", this.imageData.imageUrl); 600 // console.log("upload=======>", this.imageData.imageUrl);
601 console.log("imageFile", this.imageUrl); 601 console.log("imageFile", this.imageUrl);
602 }); 602 });
603 } else { 603 } else {
604 this.imageName = ""; 604 this.imageName = "";
605 this.imageFile = ""; 605 this.imageFile = "";
606 this.imageUrl = ""; 606 this.imageUrl = "";
607 } 607 }
608 }, 608 },
609 dates: function(date) { 609 dates: function(date) {
610 return moment(date).format("MMMM DD, YYYY"); 610 return moment(date).format("MMMM DD, YYYY");
611 }, 611 },
612 getExpenseList() { 612 getExpenseList() {
613 this.showLoader = true; 613 this.showLoader = true;
614 var token = this.$store.state.token; 614 var token = this.$store.state.token;
615 http() 615 http()
616 .get("/getExpensesList", { 616 .get("/getExpensesList", {
617 params: { schoolId: this.$store.state.schoolId },
617 headers: { Authorization: "Bearer " + token } 618 headers: { Authorization: "Bearer " + token }
618 }) 619 })
619 .then(response => { 620 .then(response => {
620 this.expenseList = response.data.data; 621 this.expenseList = response.data.data;
621 this.showLoader = false; 622 this.showLoader = false;
622 // console.log("getTeacherList=====>",this.expenseList) 623 // console.log("getTeacherList=====>",this.expenseList)
623 }) 624 })
624 .catch(error => { 625 .catch(error => {
625 this.showLoader = false; 626 this.showLoader = false;
626 if (error.response.status === 401) { 627 if (error.response.status === 401) {
627 this.$router.replace({ path: "/" }); 628 this.$router.replace({ path: "/" });
628 this.$store.dispatch("setToken", null); 629 this.$store.dispatch("setToken", null);
629 this.$store.dispatch("Id", null); 630 this.$store.dispatch("Id", null);
630 } 631 }
631 }); 632 });
632 }, 633 },
633 editItem(item) { 634 editItem(item) {
634 this.editedIndex = this.expenseList.indexOf(item); 635 this.editedIndex = this.expenseList.indexOf(item);
635 this.editedItem = Object.assign({}, item); 636 this.editedItem = Object.assign({}, item);
636 // this.editedItem.dob =
637 // this.editedItem.dob != undefined
638 // ? (this.editedItem.dob = this.editedItem.dob.substring(0, 10))
639 // : (this.editedItem.dob = "");
640 this.editedItem.date = 637 this.editedItem.date =
641 this.editedItem.date != undefined 638 this.editedItem.date != undefined
642 ? (this.editedItem.date = this.editedItem.date.substring(0, 10)) 639 ? (this.editedItem.date = this.editedItem.date.substring(0, 10))
643 : (this.editedItem.date = ""); 640 : (this.editedItem.date = "");
644 641
645 this.dialog = true; 642 this.dialog = true;
646 }, 643 },
647 profile(item) { 644 profile(item) {
648 this.editedIndex = this.expenseList.indexOf(item); 645 this.editedIndex = this.expenseList.indexOf(item);
649 this.editedItem = Object.assign({}, item); 646 this.editedItem = Object.assign({}, item);
650 this.dialog1 = true; 647 this.dialog1 = true;
651 }, 648 },
652 deleteItem(item) { 649 deleteItem(item) {
653 let deleteExpense = { 650 let deleteExpense = {
654 expenseId: item._id 651 expenseId: item._id
655 }; 652 };
656 // console.log("deleteUers",deleteTeachers) 653 // console.log("deleteUers",deleteTeachers)
657 http() 654 http()
658 .delete( 655 .delete(
659 "/deleteExpense", 656 "/deleteExpense",
660 confirm("Are you sure you want to delete this?") && { 657 confirm("Are you sure you want to delete this?") && {
661 params: deleteExpense 658 params: deleteExpense
662 } 659 }
663 ) 660 )
664 .then(response => { 661 .then(response => {
665 // console.log("deleteUers",deleteTeachers) 662 // console.log("deleteUers",deleteTeachers)
666 if ((this.snackbar = true)) { 663 this.snackbar = true;
667 this.text = "Successfully delete Existing Expense"; 664 this.text = "Successfully delete Existing Expense";
668 }
669 this.getExpenseList(); 665 this.getExpenseList();
670 }) 666 })
671 .catch(error => { 667 .catch(error => {
672 console.log(error); 668 console.log(error);
673 }); 669 });
674 }, 670 },
675 activeTab(type) { 671 activeTab(type) {
676 switch (type) { 672 switch (type) {
677 case "existing": 673 case "existing":
678 this.newActive = false; 674 this.newActive = false;
679 this.isActive = true; 675 this.isActive = true;
680 break; 676 break;
681 677
682 default: 678 default:
683 this.newActive = true; 679 this.newActive = true;
684 this.isActive = false; 680 this.isActive = false;
685 break; 681 break;
686 } 682 }
687 }, 683 },
688 close() { 684 close() {
689 this.dialog = false; 685 this.dialog = false;
690 setTimeout(() => { 686 setTimeout(() => {
691 this.editedItem = Object.assign({}, this.defaultItem); 687 this.editedItem = Object.assign({}, this.defaultItem);
692 this.editedIndex = -1; 688 this.editedIndex = -1;
693 }, 300); 689 }, 300);
694 }, 690 },
695 close1() { 691 close1() {
696 this.dialog1 = false; 692 this.dialog1 = false;
697 }, 693 },
698 submit() { 694 submit() {
699 if (this.$refs.form.validate()) { 695 if (this.$refs.form.validate()) {
700 if (this.imageUrl) { 696 if (this.imageUrl) {
701 var str = this.imageUrl; 697 var str = this.imageUrl;
702 const [baseUrl, imageUrl] = str.split(/,/); 698 const [baseUrl, imageUrl] = str.split(/,/);
703 this.addExpense.upload = imageUrl; 699 this.addExpense.upload = imageUrl;
704 } 700 }
705 this.loading = true; 701 this.loading = true;
702 this.addExpense = this.$store.state.schoolId;
706 http() 703 http()
707 .post("/createExpense", this.addExpense) 704 .post("/createExpense", this.addExpense)
708 .then(response => { 705 .then(response => {
709 this.getExpenseList(); 706 this.getExpenseList();
710 if ((this.snackbar = true)) { 707 if ((this.snackbar = true)) {
711 this.text = "New Expense added successfully"; 708 this.text = "New Expense added successfully";
712 } 709 }
713 710
714 this.clear(); 711 this.clear();
715 this.loading = false; 712 this.loading = false;
716 }) 713 })
717 .catch(error => { 714 .catch(error => {
718 // console.log(error); 715 // console.log(error);
719 if ((this.snackbar = true)) { 716 if ((this.snackbar = true)) {
720 this.text = error.response.data.message; 717 this.text = error.response.data.message;
721 } 718 }
722 this.loading = false; 719 this.loading = false;
723 }); 720 });
724 } 721 }
725 }, 722 },
726 clear() { 723 clear() {
727 this.$refs.form.reset(); 724 this.$refs.form.reset();
728 }, 725 },
729 save() { 726 save() {
730 this.loading = true; 727 this.loading = true;
731 this.editedItem.expenseId = this.editedItem._id; 728 this.editedItem.expenseId = this.editedItem._id;
732 if (this.imageUrl) { 729 if (this.imageUrl) {
733 var str = this.imageUrl; 730 var str = this.imageUrl;
734 const [baseUrl, imageUrl] = str.split(/,/); 731 const [baseUrl, imageUrl] = str.split(/,/);
735 this.editedItem.upload = imageUrl; 732 this.editedItem.upload = imageUrl;
736 } 733 }
737 http() 734 http()
738 .put("/updateExpense", this.editedItem) 735 .put("/updateExpense", this.editedItem)
739 .then(response => { 736 .then(response => {
740 if ((this.snackbar = true)) { 737 if ((this.snackbar = true)) {
741 this.text = "Successfully Edit Expense"; 738 this.text = "Successfully Edit Expense";
742 } 739 }
743 this.loading = false; 740 this.loading = false;
744 this.getExpenseList(); 741 this.getExpenseList();
745 this.close(); 742 this.close();
746 }) 743 })
747 .catch(error => { 744 .catch(error => {
748 console.log(error); 745 console.log(error);
749 this.loading = false; 746 this.loading = false;
750 }); 747 });
751 } 748 }
752 }, 749 },
753 mounted() { 750 mounted() {
754 this.getExpenseList(); 751 this.getExpenseList();
755 }, 752 },
756 created() { 753 created() {
757 this.$root.$on("app:search", search => { 754 this.$root.$on("app:search", search => {
758 this.search = search; 755 this.search = search;
759 }); 756 });
760 }, 757 },
761 beforeDestroy() { 758 beforeDestroy() {
762 // dont forget to remove the listener 759 // dont forget to remove the listener
763 this.$root.$off("app:search"); 760 this.$root.$off("app:search");
764 } 761 }
765 }; 762 };
766 </script> 763 </script>
767 <style scoped> 764 <style scoped>
768 .active { 765 .active {
769 background-color: gray; 766 background-color: gray;
770 color: white !important; 767 color: white !important;
771 } 768 }
772 .activebtn { 769 .activebtn {
773 color: black !important; 770 color: black !important;
src/pages/Account/feeTypes.vue
Diff comments   View file @99cd791
1 <template> 1 <template>
2 <v-app id="pages-dasboard"> 2 <v-app id="pages-dasboard">
3 <v-tabs grow slider-color="gray"> 3 <v-tabs grow slider-color="gray">
4 <v-tab 4 <v-tab
5 ripple 5 ripple
6 @click="activeTab('existing')" 6 @click="activeTab('existing')"
7 v-bind:class="{ active: isActive }" 7 v-bind:class="{ active: isActive }"
8 id="tab" 8 id="tab"
9 class="subheading" 9 class="subheading"
10 >Existing Fee Type</v-tab> 10 >Existing Fee Type</v-tab>
11 <v-tab 11 <v-tab
12 ripple 12 ripple
13 @click="activeTab('new')" 13 @click="activeTab('new')"
14 v-bind:class="{ active: newActive }" 14 v-bind:class="{ active: newActive }"
15 id="tab1" 15 id="tab1"
16 User 16 User
17 class="subheading" 17 class="subheading"
18 >Add New Fee Type</v-tab> 18 >Add New Fee Type</v-tab>
19 19
20 <!-- ****** EDIT SECTION ****** --> 20 <!-- ****** EDIT SECTION ****** -->
21 <v-tab-item> 21 <v-tab-item>
22 <v-snackbar 22 <v-snackbar
23 :timeout="timeout" 23 :timeout="timeout"
24 :top="y === 'top'" 24 :top="y === 'top'"
25 :right="x === 'right'" 25 :right="x === 'right'"
26 :vertical="mode === 'vertical'" 26 :vertical="mode === 'vertical'"
27 v-model="snackbar" 27 v-model="snackbar"
28 color="success" 28 color="success"
29 >{{ text }}</v-snackbar> 29 >{{ text }}</v-snackbar>
30 <v-dialog v-model="dialog" max-width="600px"> 30 <v-dialog v-model="dialog" max-width="600px">
31 <v-toolbar color="grey lighten-2"> 31 <v-toolbar color="grey lighten-2">
32 <v-spacer></v-spacer> 32 <v-spacer></v-spacer>
33 <v-toolbar-title> 33 <v-toolbar-title>
34 <h3>Edit Fee Type</h3> 34 <h3>Edit Fee Type</h3>
35 </v-toolbar-title> 35 </v-toolbar-title>
36 <v-spacer></v-spacer> 36 <v-spacer></v-spacer>
37 </v-toolbar> 37 </v-toolbar>
38 <v-card> 38 <v-card>
39 <v-container fluid> 39 <v-container fluid>
40 <v-layout wrap justify-center> 40 <v-layout wrap justify-center>
41 <v-flex xs12 sm9> 41 <v-flex xs12 sm9>
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 pr-3">Fee Type:</label> 44 <label class="right pr-3">Fee Type:</label>
45 </v-flex> 45 </v-flex>
46 <v-flex xs8> 46 <v-flex xs8>
47 <v-text-field 47 <v-text-field
48 v-model="editedItem.feeType" 48 v-model="editedItem.feeType"
49 placeholder="fill your Fee Type" 49 placeholder="fill your Fee Type"
50 :rules="feetTypeRules" 50 :rules="feetTypeRules"
51 required 51 required
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">Note:</label> 57 <label class="right pr-3">Note:</label>
58 </v-flex> 58 </v-flex>
59 <v-flex xs8> 59 <v-flex xs8>
60 <v-textarea 60 <v-textarea
61 name="input-7-1" 61 name="input-7-1"
62 v-model="editedItem.note" 62 v-model="editedItem.note"
63 placeholder="fill your Note" 63 placeholder="fill your Note"
64 :rules="noteRules" 64 :rules="noteRules"
65 multi-line 65 multi-line
66 required 66 required
67 ></v-textarea> 67 ></v-textarea>
68 </v-flex> 68 </v-flex>
69 </v-layout> 69 </v-layout>
70 <v-card-actions> 70 <v-card-actions>
71 <v-btn round dark @click.native="close">Cancel</v-btn> 71 <v-btn round dark @click.native="close">Cancel</v-btn>
72 <v-spacer></v-spacer> 72 <v-spacer></v-spacer>
73 <v-btn round dark @click="save">Save</v-btn> 73 <v-btn round dark @click="save">Save</v-btn>
74 </v-card-actions> 74 </v-card-actions>
75 </v-flex> 75 </v-flex>
76 </v-layout> 76 </v-layout>
77 </v-container> 77 </v-container>
78 </v-card> 78 </v-card>
79 </v-dialog> 79 </v-dialog>
80 80
81 <!-- ****** PROFILE VIEW SECTION DATA ****** --> 81 <!-- ****** PROFILE VIEW SECTION DATA ****** -->
82 82
83 <v-dialog v-model="dialog1" max-width="600px"> 83 <v-dialog v-model="dialog1" max-width="600px">
84 <v-toolbar color="grey lighten-2"> 84 <v-toolbar color="grey lighten-2">
85 <v-spacer></v-spacer> 85 <v-spacer></v-spacer>
86 <v-toolbar-title> 86 <v-toolbar-title>
87 <h3>Fee Type</h3> 87 <h3>Fee Type</h3>
88 </v-toolbar-title> 88 </v-toolbar-title>
89 <v-spacer></v-spacer> 89 <v-spacer></v-spacer>
90 <v-icon @click="close1">close</v-icon> 90 <v-icon @click="close1">close</v-icon>
91 </v-toolbar> 91 </v-toolbar>
92 <v-card> 92 <v-card>
93 <v-card-text> 93 <v-card-text>
94 <v-container grid-list-md> 94 <v-container grid-list-md>
95 <v-layout wrap> 95 <v-layout wrap>
96 <v-flex> 96 <v-flex>
97 <v-layout> 97 <v-layout>
98 <v-flex xs5 sm6> 98 <v-flex xs5 sm6>
99 <h5 class="right my-1"> 99 <h5 class="right my-1">
100 <b>Fee Type:</b> 100 <b>Fee Type:</b>
101 </h5> 101 </h5>
102 </v-flex> 102 </v-flex>
103 <v-flex sm6 xs8> 103 <v-flex sm6 xs8>
104 <h5 class="my-1">{{ editedItem.feeType }}</h5> 104 <h5 class="my-1">{{ editedItem.feeType }}</h5>
105 </v-flex> 105 </v-flex>
106 </v-layout> 106 </v-layout>
107 <v-layout> 107 <v-layout>
108 <v-flex xs5 sm6> 108 <v-flex xs5 sm6>
109 <h5 class="right my-1"> 109 <h5 class="right my-1">
110 <b>Note:</b> 110 <b>Note:</b>
111 </h5> 111 </h5>
112 </v-flex> 112 </v-flex>
113 <v-flex sm6 xs8> 113 <v-flex sm6 xs8>
114 <h5 class="my-1">{{ editedItem.note }}</h5> 114 <h5 class="my-1">{{ editedItem.note }}</h5>
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-container> 119 </v-container>
120 </v-card-text> 120 </v-card-text>
121 </v-card> 121 </v-card>
122 </v-dialog> 122 </v-dialog>
123 123
124 <v-snackbar 124 <v-snackbar
125 :timeout="timeout" 125 :timeout="timeout"
126 :top="y === 'top'" 126 :top="y === 'top'"
127 :right="x === 'right'" 127 :right="x === 'right'"
128 :vertical="mode === 'vertical'" 128 :vertical="mode === 'vertical'"
129 v-model="snackbar" 129 v-model="snackbar"
130 color="success" 130 color="success"
131 >{{ text }}</v-snackbar> 131 >{{ text }}</v-snackbar>
132 132
133 <!-- ****** EXISTING-FEETYPE TABLE ****** --> 133 <!-- ****** EXISTING-FEETYPE TABLE ****** -->
134 134
135 <v-data-table 135 <v-data-table
136 :headers="headers" 136 :headers="headers"
137 :items="feeTypeList" 137 :items="feeTypeList"
138 :pagination.sync="pagination" 138 :pagination.sync="pagination"
139 :search="search" 139 :search="search"
140 > 140 >
141 <template slot="items" slot-scope="props"> 141 <template slot="items" slot-scope="props">
142 <td id="td" class="text-xs-center">{{ props.index + 1}}</td> 142 <td id="td" class="text-xs-center">{{ props.index + 1}}</td>
143 <td id="td" class="text-xs-center">{{ props.item.feeType }}</td> 143 <td id="td" class="text-xs-center">{{ props.item.feeType }}</td>
144 <td id="td" class="text-xs-center">{{ props.item.note }}</td> 144 <td id="td" class="text-xs-center">{{ props.item.note }}</td>
145 <!-- <td id="td" class="text-xs-center">{{ props.item.session}}</td> --> 145 <!-- <td id="td" class="text-xs-center">{{ props.item.session}}</td> -->
146 146
147 <td class="text-xs-center"> 147 <td class="text-xs-center">
148 <!-- <span> --> 148 <!-- <span> -->
149 <v-tooltip top> 149 <v-tooltip top>
150 <img 150 <img
151 slot="activator" 151 slot="activator"
152 style="cursor:pointer; width:25px; height:18px; " 152 style="cursor:pointer; width:25px; height:18px; "
153 class="mr-5" 153 class="mr-5"
154 @click="profile(props.item)" 154 @click="profile(props.item)"
155 src="/static/icon/eye1.png" 155 src="/static/icon/eye1.png"
156 /> 156 />
157 <span>View</span> 157 <span>View</span>
158 </v-tooltip> 158 </v-tooltip>
159 <v-tooltip top> 159 <v-tooltip top>
160 <img 160 <img
161 slot="activator" 161 slot="activator"
162 style="cursor:pointer; width:20px; height:18px; " 162 style="cursor:pointer; width:20px; height:18px; "
163 class="mr-5" 163 class="mr-5"
164 @click="editItem(props.item)" 164 @click="editItem(props.item)"
165 src="/static/icon/edit1.png" 165 src="/static/icon/edit1.png"
166 /> 166 />
167 <span>Edit</span> 167 <span>Edit</span>
168 </v-tooltip> 168 </v-tooltip>
169 <v-tooltip top> 169 <v-tooltip top>
170 <img 170 <img
171 slot="activator" 171 slot="activator"
172 style="cursor:pointer; width:20px; height:20px; " 172 style="cursor:pointer; width:20px; height:20px; "
173 class="mr-5" 173 class="mr-5"
174 @click="deleteItem(props.item)" 174 @click="deleteItem(props.item)"
175 src="/static/icon/delete1.png" 175 src="/static/icon/delete1.png"
176 /> 176 />
177 <span>Delete</span> 177 <span>Delete</span>
178 </v-tooltip> 178 </v-tooltip>
179 <!-- </span> --> 179 <!-- </span> -->
180 </td> 180 </td>
181 </template> 181 </template>
182 <v-alert 182 <v-alert
183 slot="no-results" 183 slot="no-results"
184 :value="true" 184 :value="true"
185 color="error" 185 color="error"
186 icon="warning" 186 icon="warning"
187 >Your search for "{{ search }}" found no results.</v-alert> 187 >Your search for "{{ search }}" found no results.</v-alert>
188 </v-data-table> 188 </v-data-table>
189 </v-tab-item> 189 </v-tab-item>
190 190
191 <!-- ****** ADD Fee Type ****** --> 191 <!-- ****** ADD Fee Type ****** -->
192 192
193 <v-tab-item> 193 <v-tab-item>
194 <v-container> 194 <v-container>
195 <v-snackbar 195 <v-snackbar
196 :timeout="timeout" 196 :timeout="timeout"
197 :top="y === 'top'" 197 :top="y === 'top'"
198 :right="x === 'right'" 198 :right="x === 'right'"
199 :vertical="mode === 'vertical'" 199 :vertical="mode === 'vertical'"
200 v-model="snackbar" 200 v-model="snackbar"
201 color="success" 201 color="success"
202 >{{ text }}</v-snackbar> 202 >{{ text }}</v-snackbar>
203 <v-flex xs12 sm8 offset-sm2 class="top"> 203 <v-flex xs12 sm8 offset-sm2 class="top">
204 <v-card flat> 204 <v-card flat>
205 <v-container fluid fill-height> 205 <v-container fluid fill-height>
206 <v-layout align-center> 206 <v-layout align-center>
207 <v-flex xs12 class="mt-4"> 207 <v-flex xs12 class="mt-4">
208 <v-form ref="form" v-model="valid" lazy-validation> 208 <v-form ref="form" v-model="valid" lazy-validation>
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">Fee Type:</label> 211 <label class="right">Fee Type:</label>
212 </v-flex> 212 </v-flex>
213 <v-flex xs6 class="ml-3"> 213 <v-flex xs6 class="ml-3">
214 <v-text-field 214 <v-text-field
215 v-model="feeTypeData.feeType" 215 v-model="feeTypeData.feeType"
216 placeholder="fill your Fee Type" 216 placeholder="fill your Fee Type"
217 type="text" 217 type="text"
218 :rules="feetTypeRules" 218 :rules="feetTypeRules"
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-layout> 223 <v-layout>
224 <v-flex xs4 class="pt-4 subheading"> 224 <v-flex xs4 class="pt-4 subheading">
225 <label class="right">Note:</label> 225 <label class="right">Note:</label>
226 </v-flex> 226 </v-flex>
227 <v-flex xs6 class="ml-3"> 227 <v-flex xs6 class="ml-3">
228 <v-textarea 228 <v-textarea
229 name="input-7-1" 229 name="input-7-1"
230 v-model="feeTypeData.note" 230 v-model="feeTypeData.note"
231 placeholder="fill your Note" 231 placeholder="fill your Note"
232 type="text" 232 type="text"
233 :rules="noteRules" 233 :rules="noteRules"
234 multi-line 234 multi-line
235 required 235 required
236 ></v-textarea> 236 ></v-textarea>
237 </v-flex> 237 </v-flex>
238 </v-layout> 238 </v-layout>
239 <!-- <v-layout> 239 <!-- <v-layout>
240 <v-flex xs4 class="pt-4 subheading"> 240 <v-flex xs4 class="pt-4 subheading">
241 <label class="right">Monthly:</label> 241 <label class="right">Monthly:</label>
242 </v-flex> 242 </v-flex>
243 <v-flex xs6 class="ml-3"> 243 <v-flex xs6 class="ml-3">
244 <v-checkbox 244 <v-checkbox
245 v-model="feeTypeData.monthly" 245 v-model="feeTypeData.monthly"
246 :rules="monthlyRules" 246 :rules="monthlyRules"
247 multi-line 247 multi-line
248 required 248 required
249 ></v-checkbox> 249 ></v-checkbox>
250 </v-flex> 250 </v-flex>
251 </v-layout>--> 251 </v-layout>-->
252 <v-layout> 252 <v-layout>
253 <v-flex xs12 sm9 offset-sm2> 253 <v-flex xs12 sm9 offset-sm2>
254 <v-card-actions> 254 <v-card-actions>
255 <v-btn @click="clear" round dark>clear</v-btn> 255 <v-btn @click="clear" round dark>clear</v-btn>
256 <v-spacer></v-spacer> 256 <v-spacer></v-spacer>
257 <v-btn @click="submit" round dark :loading="loading">Add</v-btn> 257 <v-btn @click="submit" round dark :loading="loading">Add</v-btn>
258 </v-card-actions> 258 </v-card-actions>
259 </v-flex> 259 </v-flex>
260 </v-layout> 260 </v-layout>
261 </v-form> 261 </v-form>
262 </v-flex> 262 </v-flex>
263 </v-layout> 263 </v-layout>
264 </v-container> 264 </v-container>
265 </v-card> 265 </v-card>
266 </v-flex> 266 </v-flex>
267 </v-container> 267 </v-container>
268 </v-tab-item> 268 </v-tab-item>
269 </v-tabs> 269 </v-tabs>
270 <div class="loader" v-if="showLoader"> 270 <div class="loader" v-if="showLoader">
271 <v-progress-circular indeterminate color="white"></v-progress-circular> 271 <v-progress-circular indeterminate color="white"></v-progress-circular>
272 </div> 272 </div>
273 </v-app> 273 </v-app>
274 </template> 274 </template>
275 275
276 <script> 276 <script>
277 import http from "@/Services/http.js"; 277 import http from "@/Services/http.js";
278 import Util from "@/util"; 278 import Util from "@/util";
279 279
280 export default { 280 export default {
281 data: () => ({ 281 data: () => ({
282 snackbar: false, 282 snackbar: false,
283 y: "top", 283 y: "top",
284 x: "right", 284 x: "right",
285 mode: "", 285 mode: "",
286 timeout: 3000, 286 timeout: 3000,
287 text: "", 287 text: "",
288 showLoader: false, 288 showLoader: false,
289 loading: false, 289 loading: false,
290 date: null, 290 date: null,
291 search: "", 291 search: "",
292 dialog: false, 292 dialog: false,
293 dialog1: false, 293 dialog1: false,
294 valid: true, 294 valid: true,
295 validEdit: true, 295 validEdit: true,
296 isActive: true, 296 isActive: true,
297 newActive: false, 297 newActive: false,
298 AddUsercredentials: {}, 298 AddUsercredentials: {},
299 pagination: { 299 pagination: {
300 rowsPerPage: 15 300 rowsPerPage: 15
301 }, 301 },
302 feetTypeRules: [v => !!v || " Fee Type Name is required"], 302 feetTypeRules: [v => !!v || " Fee Type Name is required"],
303 monthlyRules: [v => !!v || " Select Monthly"], 303 monthlyRules: [v => !!v || " Select Monthly"],
304 noteRules: [v => !!v || " Note is required"], 304 noteRules: [v => !!v || " Note is required"],
305 headers: [ 305 headers: [
306 { 306 {
307 text: "No", 307 text: "No",
308 align: "center", 308 align: "center",
309 sortable: false, 309 sortable: false,
310 value: "No" 310 value: "No"
311 }, 311 },
312 { 312 {
313 text: "fee Type", 313 text: "fee Type",
314 value: "feeType", 314 value: "feeType",
315 sortable: false, 315 sortable: false,
316 align: "center" 316 align: "center"
317 }, 317 },
318 { text: "Note", value: "note", sortable: false, align: "center" }, 318 { text: "Note", value: "note", sortable: false, align: "center" },
319 // { text: "Session", value: "session", sortable: false, align: "center" }, 319 // { text: "Session", value: "session", sortable: false, align: "center" },
320 { text: "Action", value: "", sortable: false, align: "center" } 320 { text: "Action", value: "", sortable: false, align: "center" }
321 ], 321 ],
322 feeTypeList: [], 322 feeTypeList: [],
323 select: "", 323 select: "",
324 token: "", 324 token: "",
325 editedItem: {}, 325 editedItem: {},
326 feeTypeData: {} 326 feeTypeData: {}
327 }), 327 }),
328 methods: { 328 methods: {
329 getFeeTypeList() { 329 getFeeTypeList() {
330 this.showLoader = true; 330 this.showLoader = true;
331 http() 331 http()
332 .get("/getFeesList", { 332 .get("/getFeesList", {
333 params: { schoolId: this.$store.state.schoolId },
333 headers: { Authorization: "Bearer " + this.token } 334 headers: { Authorization: "Bearer " + this.token }
334 }) 335 })
335 .then(response => { 336 .then(response => {
336 this.feeTypeList = response.data.data; 337 this.feeTypeList = response.data.data;
337 this.showLoader = false; 338 this.showLoader = false;
338 // console.log("getAllfeetypes=====>",response.data.data) 339 // console.log("getAllfeetypes=====>",response.data.data)
339 }) 340 })
340 .catch(error => { 341 .catch(error => {
341 // console.log("err====>", err); 342 // console.log("err====>", err);
342 this.showLoader = false; 343 this.showLoader = false;
343 if (error.response.status === 401) { 344 if (error.response.status === 401) {
344 this.$router.replace({ path: "/" }); 345 this.$router.replace({ path: "/" });
345 this.$store.dispatch("setToken", null); 346 this.$store.dispatch("setToken", null);
346 this.$store.dispatch("Id", null); 347 this.$store.dispatch("Id", null);
347 this.$store.dispatch("Role", null); 348 this.$store.dispatch("Role", null);
348 } 349 }
349 }); 350 });
350 }, 351 },
351 editItem(item) { 352 editItem(item) {
352 this.editedIndex = this.feeTypeList.indexOf(item); 353 this.editedIndex = this.feeTypeList.indexOf(item);
353 this.editedItem = Object.assign({}, item); 354 this.editedItem = Object.assign({}, item);
354 this.dialog = true; 355 this.dialog = true;
355 }, 356 },
356 profile(item) { 357 profile(item) {
357 this.editedIndex = this.feeTypeList.indexOf(item); 358 this.editedIndex = this.feeTypeList.indexOf(item);
358 this.editedItem = Object.assign({}, item); 359 this.editedItem = Object.assign({}, item);
359 this.dialog1 = true; 360 this.dialog1 = true;
360 }, 361 },
361 deleteItem(item) { 362 deleteItem(item) {
362 let deleteFeeType = { 363 let deleteFeeType = {
363 feeId: item._id 364 feeId: item._id
364 }; 365 };
365 http() 366 http()
366 .delete( 367 .delete(
367 "/deleteFee", 368 "/deleteFee",
368 confirm("Are you sure you want to delete this?") && { 369 confirm("Are you sure you want to delete this?") && {
369 params: deleteFeeType 370 params: deleteFeeType
370 } 371 }
371 ) 372 )
372 .then(response => { 373 .then(response => {
373 if ((this.snackbar = true)) { 374 if ((this.snackbar = true)) {
374 this.text = "Successfully delete Existing feetype"; 375 this.text = "Successfully delete Existing feetype";
375 } 376 }
376 this.getFeeTypeList(); 377 this.getFeeTypeList();
377 }) 378 })
378 .catch(error => { 379 .catch(error => {
379 // console.log(error); 380 // console.log(error);
380 }); 381 });
381 }, 382 },
382 activeTab(type) { 383 activeTab(type) {
383 switch (type) { 384 switch (type) {
384 case "existing": 385 case "existing":
385 this.newActive = false; 386 this.newActive = false;
386 this.isActive = true; 387 this.isActive = true;
387 break; 388 break;
388 389
389 default: 390 default:
390 this.newActive = true; 391 this.newActive = true;
391 this.isActive = false; 392 this.isActive = false;
392 break; 393 break;
393 } 394 }
394 }, 395 },
395 close() { 396 close() {
396 this.dialog = false; 397 this.dialog = false;
397 setTimeout(() => { 398 setTimeout(() => {
398 this.editedItem = Object.assign({}, this.defaultItem); 399 this.editedItem = Object.assign({}, this.defaultItem);
399 this.editedIndex = -1; 400 this.editedIndex = -1;
400 }, 300); 401 }, 300);
401 }, 402 },
402 close1() { 403 close1() {
403 this.dialog1 = false; 404 this.dialog1 = false;
404 }, 405 },
405 close2() { 406 close2() {
406 this.dialog2 = false; 407 this.dialog2 = false;
407 }, 408 },
408 submit() { 409 submit() {
409 if (this.$refs.form.validate()) { 410 if (this.$refs.form.validate()) {
410 this.loading = true; 411 this.loading = true;
412 this.schoolId = this.$store.state.schoolId;
411 http() 413 http()
412 .post("/createFee", this.feeTypeData) 414 .post("/createFee", this.feeTypeData)
413 .then(response => { 415 .then(response => {
414 console.log(response);
415 this.getFeeTypeList(); 416 this.getFeeTypeList();
416 if ((this.snackbar = true)) { 417 this.snackbar = true;
417 this.text = "New feetype added successfully"; 418 this.text = "New feetype added successfully";
418 }
419
420 this.clear(); 419 this.clear();
421 this.loading = false; 420 this.loading = false;
422 }) 421 })
423 .catch(error => { 422 .catch(error => {
424 // console.log(error); 423 // console.log(error);
425 if ((this.snackbar = true)) { 424 this.snackbar = true;
426 this.text = error.response.data.message; 425 this.text = error.response.data.message;
427 }
428 this.loading = false; 426 this.loading = false;
429 }); 427 });
430 } 428 }
431 }, 429 },
432 clear() { 430 clear() {
433 this.$refs.form.reset(); 431 this.$refs.form.reset();
434 }, 432 },
435 save() { 433 save() {
436 this.editedItem.feeId = this.editedItem._id; 434 this.editedItem.feeId = this.editedItem._id;
437 http() 435 http()
438 .put("/updateFee", this.editedItem) 436 .put("/updateFee", this.editedItem)
439 .then(response => { 437 .then(response => {
440 if ((this.snackbar = true)) { 438 if ((this.snackbar = true)) {
441 this.text = "Successfully Edit Existing Fee Type"; 439 this.text = "Successfully Edit Existing Fee Type";
442 } 440 }
443 this.getFeeTypeList(); 441 this.getFeeTypeList();
444 this.close(); 442 this.close();
445 }) 443 })
446 .catch(error => { 444 .catch(error => {
447 this.text = error.response.data.message; 445 this.text = error.response.data.message;
448 // console.log(error); 446 // console.log(error);
449 }); 447 });
450 } 448 }
451 }, 449 },
452 mounted() { 450 mounted() {
453 this.token = this.$store.state.token; 451 this.token = this.$store.state.token;
454 this.getFeeTypeList(); 452 this.getFeeTypeList();
455 }, 453 },
456 created() { 454 created() {
457 this.$root.$on("app:search", search => { 455 this.$root.$on("app:search", search => {
458 this.search = search; 456 this.search = search;
459 }); 457 });
460 }, 458 },
461 beforeDestroy() { 459 beforeDestroy() {
462 // dont forget to remove the listener 460 // dont forget to remove the listener
463 this.$root.$off("app:search"); 461 this.$root.$off("app:search");
464 } 462 }
465 }; 463 };
466 </script> 464 </script>
467 465
468 <style scoped> 466 <style scoped>
469 .active { 467 .active {
470 background-color: gray; 468 background-color: gray;
471 color: white !important; 469 color: white !important;
472 } 470 }
473 .activebtn { 471 .activebtn {
474 color: black !important; 472 color: black !important;
src/pages/Account/globalPayment.vue
Diff comments   View file @99cd791
1 <template> 1 <template>
2 <div> 2 <div>
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" 71 class="right mt-4"
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:'ViewInvoice',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 </v-container> 178 </v-container>
179 <div class="loader" v-if="showLoader"> 179 <div class="loader" v-if="showLoader">
180 <v-progress-circular indeterminate color="white"></v-progress-circular> 180 <v-progress-circular indeterminate color="white"></v-progress-circular>
181 </div> 181 </div>
182 </div> 182 </div>
183 </template> 183 </template>
184 184
185 <script> 185 <script>
186 import http from "@/Services/http.js"; 186 import http from "@/Services/http.js";
187 import moment from "moment"; 187 import moment from "moment";
188 188
189 export default { 189 export default {
190 data: () => ({ 190 data: () => ({
191 snackbar: false, 191 snackbar: false,
192 showInvoiceTable: false, 192 showInvoiceTable: false,
193 y: "top", 193 y: "top",
194 x: "right", 194 x: "right",
195 mode: "", 195 mode: "",
196 timeout: 3000, 196 timeout: 3000,
197 text: "", 197 text: "",
198 showLoader: false, 198 showLoader: false,
199 loading: false, 199 loading: false,
200 search: "", 200 search: "",
201 valid: true, 201 valid: true,
202 addclass: [], 202 addclass: [],
203 selectStudents: {}, 203 selectStudents: {},
204 addSection: [], 204 addSection: [],
205 classRules: [v => !!v || " Class Name is required"], 205 classRules: [v => !!v || " Class Name is required"],
206 sectionRules: [v => !!v || " Section Name is required"], 206 sectionRules: [v => !!v || " Section Name is required"],
207 studentRules: [v => !!v || "Student Name is required"], 207 studentRules: [v => !!v || "Student Name is required"],
208 headers: [ 208 headers: [
209 { 209 {
210 text: "Invoice Number", 210 text: "Invoice Number",
211 align: "center", 211 align: "center",
212 sortable: false, 212 sortable: false,
213 value: "invoiceNumber" 213 value: "invoiceNumber"
214 }, 214 },
215 { 215 {
216 text: "Total Pay", 216 text: "Total Pay",
217 value: "totalAmount", 217 value: "totalAmount",
218 sortable: false, 218 sortable: false,
219 align: "center" 219 align: "center"
220 }, 220 },
221 { 221 {
222 text: "Weaver", 222 text: "Weaver",
223 value: "totalDiscount", 223 value: "totalDiscount",
224 sortable: false, 224 sortable: false,
225 align: "center" 225 align: "center"
226 }, 226 },
227 { 227 {
228 text: " Total Collection", 228 text: " Total Collection",
229 value: "totalSubTotal", 229 value: "totalSubTotal",
230 sortable: false, 230 sortable: false,
231 align: "center" 231 align: "center"
232 }, 232 },
233 { 233 {
234 text: "Clearance", 234 text: "Clearance",
235 value: "paymentStatus", 235 value: "paymentStatus",
236 sortable: false, 236 sortable: false,
237 align: "center" 237 align: "center"
238 }, 238 },
239 { text: "Payment Date", value: "date", sortable: false, align: "center" }, 239 { text: "Payment Date", value: "date", sortable: false, align: "center" },
240 { text: "Action", value: "", sortable: false, align: "center" } 240 { text: "Action", value: "", sortable: false, align: "center" }
241 ], 241 ],
242 studentData: [], 242 studentData: [],
243 studentInvoiceData: [] 243 studentInvoiceData: []
244 }), 244 }),
245 methods: { 245 methods: {
246 dates: function(date) { 246 dates: function(date) {
247 return moment(date).format("MMMM DD, YYYY"); 247 return moment(date).format("MMMM DD, YYYY");
248 }, 248 },
249 getSection() { 249 getSection() {
250 var token = this.$store.state.token; 250 var token = this.$store.state.token;
251 this.showLoader = true; 251 this.showLoader = true;
252 http() 252 http()
253 .get( 253 .get(
254 "/getSectionsList", 254 "/getSectionsList",
255 { params: { classId: this.selectStudents.selectClassId } }, 255 {
256 params: {
257 classId: this.selectStudents.selectClassId,
258 schoolId: this.$store.state.schoolId
259 }
260 },
256 { 261 {
257 headers: { Authorization: "Bearer " + token } 262 headers: { Authorization: "Bearer " + token }
258 } 263 }
259 ) 264 )
260 .then(response => { 265 .then(response => {
261 this.addSection = response.data.data; 266 this.addSection = response.data.data;
262 this.showLoader = false; 267 this.showLoader = false;
263 // console.log("getSectionsList=====>", this.addSection); 268 // console.log("getSectionsList=====>", this.addSection);
264 }) 269 })
265 .catch(error => { 270 .catch(error => {
266 this.showLoader = false; 271 this.showLoader = false;
267 // console.log("err====>", err); 272 // console.log("err====>", err);
268 // this.$router.replace({ path: '/' }); 273 // this.$router.replace({ path: '/' });
269 }); 274 });
270 }, 275 },
271 getStudents() { 276 getStudents() {
272 this.showLoader = true; 277 this.showLoader = true;
273 http() 278 http()
274 .get("/getStudentWithClass", { 279 .get("/getStudentWithClass", {
275 params: { 280 params: {
276 classId: this.selectStudents.selectClassId, 281 classId: this.selectStudents.selectClassId,
277 sectionId: this.selectStudents.selectSection 282 sectionId: this.selectStudents.selectSection,
283 schoolId: this.$store.state.schoolId
278 } 284 }
279 }) 285 })
280 .then(response => { 286 .then(response => {
281 this.studentData = response.data.data; 287 this.studentData = response.data.data;
282 this.showLoader = false; 288 this.showLoader = false;
283 }) 289 })
284 .catch(err => { 290 .catch(err => {
285 console.log("err====>", err); 291 console.log("err====>", err);
286 this.showLoader = false; 292 this.showLoader = false;
287 }); 293 });
288 }, 294 },
289 getInvoicesData() { 295 getInvoicesData() {
290 this.showLoader = true; 296 this.showLoader = true;
291 this.showInvoiceTable = true; 297 this.showInvoiceTable = true;
292 http() 298 http()
293 .get("/getInvoicesList", { 299 .get("/getInvoicesList", {
294 params: { 300 params: {
295 classId: this.selectStudents.selectClassId, 301 classId: this.selectStudents.selectClassId,
296 studentId: this.selectStudents.selectId 302 studentId: this.selectStudents.selectId,
303 schoolId: this.$store.state.schoolId
297 } 304 }
298 }) 305 })
299 .then(response => { 306 .then(response => {
300 this.studentInvoiceData = response.data.data; 307 this.studentInvoiceData = response.data.data;
301 // console.log("this.studentInvoiceData", this.studentInvoiceData); 308 // console.log("this.studentInvoiceData", this.studentInvoiceData);
302 this.showLoader = false; 309 this.showLoader = false;
303 }) 310 })
304 .catch(err => { 311 .catch(err => {
305 console.log("err====>", err); 312 console.log("err====>", err);
306 this.showLoader = false; 313 this.showLoader = false;
307 }); 314 });
308 } 315 }
309 }, 316 },
310 mounted() { 317 mounted() {
311 var token = this.$store.state.token; 318 var token = this.$store.state.token;
312 http() 319 http()
313 .get("/getClassesList", { 320 .get("/getClassesList", {
321 params: {
322 schoolId: this.$store.state.schoolId
323 },
314 headers: { Authorization: "Bearer " + token } 324 headers: { Authorization: "Bearer " + token }
315 }) 325 })
316 .then(response => { 326 .then(response => {
317 this.addclass = response.data.data; 327 this.addclass = response.data.data;
318 }) 328 })
319 .catch(error => { 329 .catch(error => {
320 this.showLoader = false; 330 this.showLoader = false;
321 if (error.response.status === 401) { 331 if (error.response.status === 401) {
322 this.$router.replace({ path: "/" }); 332 this.$router.replace({ path: "/" });
323 this.$store.dispatch("setToken", null); 333 this.$store.dispatch("setToken", null);
324 this.$store.dispatch("Id", null); 334 this.$store.dispatch("Id", null);
325 this.$store.dispatch("Role", null); 335 this.$store.dispatch("Role", null);
326 } 336 }
327 }); 337 });
328 }, 338 },
329 created() { 339 created() {
330 this.$root.$on("app:search", search => { 340 this.$root.$on("app:search", search => {
331 this.search = search; 341 this.search = search;
332 }); 342 });
333 }, 343 },
334 beforeDestroy() { 344 beforeDestroy() {
335 // dont forget to remove the listener 345 // dont forget to remove the listener
336 this.$root.$off("app:search"); 346 this.$root.$off("app:search");
337 } 347 }
338 }; 348 };
339 </script> 349 </script>
340 350
341 351
342 <style scoped> 352 <style scoped>
343 .studentProfile { 353 .studentProfile {
344 border: 1px solid lightgrey; 354 border: 1px solid lightgrey;
345 } 355 }
346 </style> 356 </style>
src/pages/Account/income.vue
Diff comments   View file @99cd791
1 <template> 1 <template>
2 <v-app id="pages-dasboard"> 2 <v-app id="pages-dasboard">
3 <v-tabs grow slider-color="gray"> 3 <v-tabs grow slider-color="gray">
4 <v-tab 4 <v-tab
5 ripple 5 ripple
6 @click="activeTab('existing')" 6 @click="activeTab('existing')"
7 v-bind:class="{ active: isActive }" 7 v-bind:class="{ active: isActive }"
8 id="tab" 8 id="tab"
9 class="subheading" 9 class="subheading"
10 >Existing Income</v-tab> 10 >Existing Income</v-tab>
11 <v-tab 11 <v-tab
12 ripple 12 ripple
13 @click="activeTab('new')" 13 @click="activeTab('new')"
14 v-bind:class="{ active: newActive }" 14 v-bind:class="{ active: newActive }"
15 id="tab1" 15 id="tab1"
16 User 16 User
17 class="subheading" 17 class="subheading"
18 >Add New Income</v-tab> 18 >Add New Income</v-tab>
19 <!-- ****** EDIT Income DETAILS ****** --> 19 <!-- ****** EDIT Income DETAILS ****** -->
20 <v-tab-item> 20 <v-tab-item>
21 <v-snackbar 21 <v-snackbar
22 :timeout="timeout" 22 :timeout="timeout"
23 :top="y === 'top'" 23 :top="y === 'top'"
24 :right="x === 'right'" 24 :right="x === 'right'"
25 :vertical="mode === 'vertical'" 25 :vertical="mode === 'vertical'"
26 v-model="snackbar" 26 v-model="snackbar"
27 color="success" 27 color="success"
28 >{{ text }}</v-snackbar> 28 >{{ text }}</v-snackbar>
29 <v-dialog v-model="dialog" max-width="600px" scrollable> 29 <v-dialog v-model="dialog" max-width="600px" scrollable>
30 <v-card flat> 30 <v-card flat>
31 <v-toolbar color="grey lighten-2" flat> 31 <v-toolbar color="grey lighten-2" flat>
32 <v-spacer></v-spacer> 32 <v-spacer></v-spacer>
33 <v-toolbar-title>Edit Income Profile</v-toolbar-title> 33 <v-toolbar-title>Edit Income Profile</v-toolbar-title>
34 <v-spacer></v-spacer> 34 <v-spacer></v-spacer>
35 </v-toolbar> 35 </v-toolbar>
36 <v-card-text style="height: 600px;"> 36 <v-card-text style="height: 600px;">
37 <v-layout> 37 <v-layout>
38 <v-flex 38 <v-flex
39 xs12 39 xs12
40 class="text-xs-center text-sm-center text-md-center text-lg-center my-4 mr-4" 40 class="text-xs-center text-sm-center text-md-center text-lg-center my-4 mr-4"
41 > 41 >
42 <v-avatar size="160px"> 42 <v-avatar size="160px">
43 <img src="/static/icon/user.png" v-if="!editedItem.fileUrl && !imageUrl" /> 43 <img src="/static/icon/user.png" v-if="!editedItem.fileUrl && !imageUrl" />
44 <img :src="editedItem.fileUrl" v-else-if="editedItem.fileUrl && !imageUrl" /> 44 <img :src="editedItem.fileUrl" v-else-if="editedItem.fileUrl && !imageUrl" />
45 <img 45 <img
46 v-if="imageUrl" 46 v-if="imageUrl"
47 :src="imageUrl" 47 :src="imageUrl"
48 height="150" 48 height="150"
49 style="border-radius:50%; width:200px" 49 style="border-radius:50%; width:200px"
50 /> 50 />
51 </v-avatar> 51 </v-avatar>
52 <input 52 <input
53 type="file" 53 type="file"
54 style="display:none" 54 style="display:none"
55 ref="image" 55 ref="image"
56 accept="image/*" 56 accept="image/*"
57 @change="onFilePicked" 57 @change="onFilePicked"
58 /> 58 />
59 </v-flex> 59 </v-flex>
60 </v-layout> 60 </v-layout>
61 <v-layout wrap> 61 <v-layout wrap>
62 <v-flex xs12 sm12> 62 <v-flex xs12 sm12>
63 <v-layout> 63 <v-layout>
64 <v-flex xs4 class="pt-4 subheading"> 64 <v-flex xs4 class="pt-4 subheading">
65 <label class="right">Name:</label> 65 <label class="right">Name:</label>
66 </v-flex> 66 </v-flex>
67 <v-flex xs8 sm6 class="ml-3"> 67 <v-flex xs8 sm6 class="ml-3">
68 <v-text-field 68 <v-text-field
69 v-model="editedItem.name" 69 v-model="editedItem.name"
70 placeholder="fill your full Name" 70 placeholder="fill your full Name"
71 name="name" 71 name="name"
72 type="text" 72 type="text"
73 required 73 required
74 ></v-text-field> 74 ></v-text-field>
75 </v-flex> 75 </v-flex>
76 </v-layout> 76 </v-layout>
77 </v-flex> 77 </v-flex>
78 </v-layout> 78 </v-layout>
79 <v-layout wrap> 79 <v-layout wrap>
80 <v-flex xs12> 80 <v-flex xs12>
81 <v-layout> 81 <v-layout>
82 <v-flex xs4 class="pt-4 subheading"> 82 <v-flex xs4 class="pt-4 subheading">
83 <label class="right">Date:</label> 83 <label class="right">Date:</label>
84 </v-flex> 84 </v-flex>
85 <v-flex xs8 sm6 class="ml-3"> 85 <v-flex xs8 sm6 class="ml-3">
86 <v-menu 86 <v-menu
87 ref="menu" 87 ref="menu"
88 :close-on-content-click="false" 88 :close-on-content-click="false"
89 v-model="menu3" 89 v-model="menu3"
90 :nudge-right="40" 90 :nudge-right="40"
91 lazy 91 lazy
92 transition="scale-transition" 92 transition="scale-transition"
93 offset-y 93 offset-y
94 full-width 94 full-width
95 min-width="290px" 95 min-width="290px"
96 > 96 >
97 <v-text-field 97 <v-text-field
98 slot="activator" 98 slot="activator"
99 v-model="editedItem.date" 99 v-model="editedItem.date"
100 placeholder="Select date" 100 placeholder="Select date"
101 ></v-text-field> 101 ></v-text-field>
102 <v-date-picker 102 <v-date-picker
103 ref="picker" 103 ref="picker"
104 v-model="editedItem.date" 104 v-model="editedItem.date"
105 @input="$refs.menu.save(editedItem.date)" 105 @input="$refs.menu.save(editedItem.date)"
106 ></v-date-picker> 106 ></v-date-picker>
107 </v-menu> 107 </v-menu>
108 </v-flex> 108 </v-flex>
109 </v-layout> 109 </v-layout>
110 </v-flex> 110 </v-flex>
111 <v-layout wrap> 111 <v-layout wrap>
112 <v-flex xs12 sm12> 112 <v-flex xs12 sm12>
113 <v-layout> 113 <v-layout>
114 <v-flex xs4 class="pt-4 subheading"> 114 <v-flex xs4 class="pt-4 subheading">
115 <label class="right">Amount:</label> 115 <label class="right">Amount:</label>
116 </v-flex> 116 </v-flex>
117 <v-flex xs8 sm6 class="ml-3"> 117 <v-flex xs8 sm6 class="ml-3">
118 <v-text-field v-model="editedItem.amount" required></v-text-field> 118 <v-text-field v-model="editedItem.amount" required></v-text-field>
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-flex xs12> 123 <v-flex xs12>
124 <v-layout> 124 <v-layout>
125 <v-flex xs4 class="pt-4 subheading"> 125 <v-flex xs4 class="pt-4 subheading">
126 <label class="right hidden-xs-only hidden-sm-only">Uplaod Image:</label> 126 <label class="right hidden-xs-only hidden-sm-only">Uplaod Image:</label>
127 <label class="right hidden-lg-only hidden-md-only hidden-xl-only">Uplaod:</label> 127 <label class="right hidden-lg-only hidden-md-only hidden-xl-only">Uplaod:</label>
128 </v-flex> 128 </v-flex>
129 <v-flex xs8 sm6 class="ml-3"> 129 <v-flex xs8 sm6 class="ml-3">
130 <v-text-field 130 <v-text-field
131 label="Select Image" 131 label="Select Image"
132 @click="pickFile" 132 @click="pickFile"
133 v-model="imageName" 133 v-model="imageName"
134 append-icon="attach_file" 134 append-icon="attach_file"
135 ></v-text-field> 135 ></v-text-field>
136 </v-flex> 136 </v-flex>
137 </v-layout> 137 </v-layout>
138 </v-flex> 138 </v-flex>
139 <v-flex xs12> 139 <v-flex xs12>
140 <v-layout> 140 <v-layout>
141 <v-flex xs4 class="pt-4 subheading"> 141 <v-flex xs4 class="pt-4 subheading">
142 <label class="right">Note:</label> 142 <label class="right">Note:</label>
143 </v-flex> 143 </v-flex>
144 <v-flex xs8 sm6 class="ml-3"> 144 <v-flex xs8 sm6 class="ml-3">
145 <v-textarea 145 <v-textarea
146 name="input-7-1" 146 name="input-7-1"
147 v-model="editedItem.note" 147 v-model="editedItem.note"
148 placeholder="fill your Note" 148 placeholder="fill your Note"
149 type="text" 149 type="text"
150 :rules="noteRules" 150 :rules="noteRules"
151 multi-line 151 multi-line
152 required 152 required
153 ></v-textarea> 153 ></v-textarea>
154 </v-flex> 154 </v-flex>
155 </v-layout> 155 </v-layout>
156 </v-flex> 156 </v-flex>
157 </v-layout> 157 </v-layout>
158 <v-layout> 158 <v-layout>
159 <v-flex xs12 sm12> 159 <v-flex xs12 sm12>
160 <v-card-actions> 160 <v-card-actions>
161 <v-btn round dark @click.native="close">Cancel</v-btn> 161 <v-btn round dark @click.native="close">Cancel</v-btn>
162 <v-spacer></v-spacer> 162 <v-spacer></v-spacer>
163 <v-btn round dark :loading="loading" @click="save">Save</v-btn> 163 <v-btn round dark :loading="loading" @click="save">Save</v-btn>
164 </v-card-actions> 164 </v-card-actions>
165 </v-flex> 165 </v-flex>
166 </v-layout> 166 </v-layout>
167 </v-card-text> 167 </v-card-text>
168 </v-card> 168 </v-card>
169 </v-dialog> 169 </v-dialog>
170 170
171 <!-- ****** PROFILE VIEW INCOME DETAILS ****** --> 171 <!-- ****** PROFILE VIEW INCOME DETAILS ****** -->
172 172
173 <v-dialog v-model="dialog1" max-width="600px" scrollable> 173 <v-dialog v-model="dialog1" max-width="600px" scrollable>
174 <v-card> 174 <v-card>
175 <v-toolbar color="grey lighten-2" flat> 175 <v-toolbar color="grey lighten-2" flat>
176 <v-spacer></v-spacer> 176 <v-spacer></v-spacer>
177 <v-toolbar-title> 177 <v-toolbar-title>
178 <h3>Income Profile</h3> 178 <h3>Income Profile</h3>
179 </v-toolbar-title> 179 </v-toolbar-title>
180 <v-spacer></v-spacer> 180 <v-spacer></v-spacer>
181 <v-icon @click="close1">close</v-icon> 181 <v-icon @click="close1">close</v-icon>
182 </v-toolbar> 182 </v-toolbar>
183 <v-card-text style="height: 460px;"> 183 <v-card-text style="height: 460px;">
184 <v-container grid-list-md> 184 <v-container grid-list-md>
185 <v-layout wrap> 185 <v-layout wrap>
186 <v-flex> 186 <v-flex>
187 <v-flex align-center justify-center layout text-xs-center> 187 <v-flex align-center justify-center layout text-xs-center>
188 <v-avatar size="160px"> 188 <v-avatar size="160px">
189 <img src="/static/icon/user.png" v-if="!editedItem.fileUrl" /> 189 <img src="/static/icon/user.png" v-if="!editedItem.fileUrl" />
190 <img :src="editedItem.fileUrl" v-else-if="editedItem.fileUrl" /> 190 <img :src="editedItem.fileUrl" v-else-if="editedItem.fileUrl" />
191 </v-avatar> 191 </v-avatar>
192 </v-flex> 192 </v-flex>
193 <v-layout> 193 <v-layout>
194 <v-flex xs5 sm6> 194 <v-flex xs5 sm6>
195 <h5 class="right my-1"> 195 <h5 class="right my-1">
196 <b>Name:</b> 196 <b>Name:</b>
197 </h5> 197 </h5>
198 </v-flex> 198 </v-flex>
199 <v-flex sm6 xs8> 199 <v-flex sm6 xs8>
200 <h5 class="my-1">{{ editedItem.name }}</h5> 200 <h5 class="my-1">{{ editedItem.name }}</h5>
201 </v-flex> 201 </v-flex>
202 </v-layout> 202 </v-layout>
203 <v-layout> 203 <v-layout>
204 <v-flex xs5 sm6> 204 <v-flex xs5 sm6>
205 <h5 class="right my-1"> 205 <h5 class="right my-1">
206 <b>Amount:</b> 206 <b>Amount:</b>
207 </h5> 207 </h5>
208 </v-flex> 208 </v-flex>
209 <v-flex sm6 xs8> 209 <v-flex sm6 xs8>
210 <h5 class="my-1">{{ editedItem.amount }}</h5> 210 <h5 class="my-1">{{ editedItem.amount }}</h5>
211 </v-flex> 211 </v-flex>
212 </v-layout> 212 </v-layout>
213 <v-layout> 213 <v-layout>
214 <v-flex xs5 sm6> 214 <v-flex xs5 sm6>
215 <h5 class="right my-1"> 215 <h5 class="right my-1">
216 <b>Date:</b> 216 <b>Date:</b>
217 </h5> 217 </h5>
218 </v-flex> 218 </v-flex>
219 <v-flex sm6 xs8> 219 <v-flex sm6 xs8>
220 <h5 class="my-1">{{ dates(editedItem.date) }}</h5> 220 <h5 class="my-1">{{ dates(editedItem.date) }}</h5>
221 </v-flex> 221 </v-flex>
222 </v-layout> 222 </v-layout>
223 <v-layout> 223 <v-layout>
224 <v-flex xs5 sm6> 224 <v-flex xs5 sm6>
225 <h5 class="right my-1"> 225 <h5 class="right my-1">
226 <b>Note:</b> 226 <b>Note:</b>
227 </h5> 227 </h5>
228 </v-flex> 228 </v-flex>
229 <v-flex sm6 xs8> 229 <v-flex sm6 xs8>
230 <h5 class="my-1">{{ editedItem.note }}</h5> 230 <h5 class="my-1">{{ editedItem.note }}</h5>
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-container> 235 </v-container>
236 </v-card-text> 236 </v-card-text>
237 </v-card> 237 </v-card>
238 </v-dialog> 238 </v-dialog>
239 <v-snackbar 239 <v-snackbar
240 :timeout="timeout" 240 :timeout="timeout"
241 :top="y === 'top'" 241 :top="y === 'top'"
242 :right="x === 'right'" 242 :right="x === 'right'"
243 :vertical="mode === 'vertical'" 243 :vertical="mode === 'vertical'"
244 v-model="snackbar" 244 v-model="snackbar"
245 color="success" 245 color="success"
246 >{{ text }}</v-snackbar> 246 >{{ text }}</v-snackbar>
247 247
248 <!-- ****** EXISTING-EXPENSE TABLE DATA****** --> 248 <!-- ****** EXISTING-EXPENSE TABLE DATA****** -->
249 249
250 <v-data-table 250 <v-data-table
251 :headers="headers" 251 :headers="headers"
252 :items="incomeList" 252 :items="incomeList"
253 :pagination.sync="pagination" 253 :pagination.sync="pagination"
254 :search="search" 254 :search="search"
255 > 255 >
256 <template slot="items" slot-scope="props"> 256 <template slot="items" slot-scope="props">
257 <td id="td" class="text-xs-center">{{ props.index + 1}}</td> 257 <td id="td" class="text-xs-center">{{ props.index + 1}}</td>
258 <td id="td" class="text-xs-center"> 258 <td id="td" class="text-xs-center">
259 <v-avatar> 259 <v-avatar>
260 <img :src="props.item.fileUrl" v-if="props.item.fileUrl" /> 260 <img :src="props.item.fileUrl" v-if="props.item.fileUrl" />
261 <img src="/static/icon/user.png" v-else-if="!props.item.fileUrl" /> 261 <img src="/static/icon/user.png" v-else-if="!props.item.fileUrl" />
262 </v-avatar> 262 </v-avatar>
263 </td> 263 </td>
264 <td id="td" class="text-xs-center">{{ props.item.name}}</td> 264 <td id="td" class="text-xs-center">{{ props.item.name}}</td>
265 <td id="td" class="text-xs-center">{{ dates(props.item.date) }}</td> 265 <td id="td" class="text-xs-center">{{ dates(props.item.date) }}</td>
266 <td id="td" class="text-xs-center">{{ props.item.user }}</td> 266 <td id="td" class="text-xs-center">{{ props.item.user }}</td>
267 <td id="td" class="text-xs-center">{{ props.item.amount }}</td> 267 <td id="td" class="text-xs-center">{{ props.item.amount }}</td>
268 <td id="td" class="text-xs-center">{{ props.item.note }}</td> 268 <td id="td" class="text-xs-center">{{ props.item.note }}</td>
269 <td class="text-xs-center"> 269 <td class="text-xs-center">
270 <span> 270 <span>
271 <v-tooltip top> 271 <v-tooltip top>
272 <img 272 <img
273 slot="activator" 273 slot="activator"
274 style="cursor:pointer; width:25px; height:18px; " 274 style="cursor:pointer; width:25px; height:18px; "
275 class="mr5" 275 class="mr5"
276 @click="profile(props.item)" 276 @click="profile(props.item)"
277 src="/static/icon/eye1.png" 277 src="/static/icon/eye1.png"
278 /> 278 />
279 <span>View</span> 279 <span>View</span>
280 </v-tooltip> 280 </v-tooltip>
281 <v-tooltip top> 281 <v-tooltip top>
282 <img 282 <img
283 slot="activator" 283 slot="activator"
284 style="cursor:pointer; width:20px; height:18px; " 284 style="cursor:pointer; width:20px; height:18px; "
285 class="mr5" 285 class="mr5"
286 @click="editItem(props.item)" 286 @click="editItem(props.item)"
287 src="/static/icon/edit1.png" 287 src="/static/icon/edit1.png"
288 /> 288 />
289 <span>Edit</span> 289 <span>Edit</span>
290 </v-tooltip> 290 </v-tooltip>
291 <v-tooltip top> 291 <v-tooltip top>
292 <img 292 <img
293 slot="activator" 293 slot="activator"
294 style="cursor:pointer; width:20px; height:20px; " 294 style="cursor:pointer; width:20px; height:20px; "
295 class="mr5" 295 class="mr5"
296 @click="deleteItem(props.item)" 296 @click="deleteItem(props.item)"
297 src="/static/icon/delete1.png" 297 src="/static/icon/delete1.png"
298 /> 298 />
299 <span>Delete</span> 299 <span>Delete</span>
300 </v-tooltip> 300 </v-tooltip>
301 </span> 301 </span>
302 </td> 302 </td>
303 </template> 303 </template>
304 <v-alert 304 <v-alert
305 slot="no-results" 305 slot="no-results"
306 :value="true" 306 :value="true"
307 color="error" 307 color="error"
308 icon="warning" 308 icon="warning"
309 >Your search for "{{ search }}" found no results.</v-alert> 309 >Your search for "{{ search }}" found no results.</v-alert>
310 </v-data-table> 310 </v-data-table>
311 </v-tab-item> 311 </v-tab-item>
312 312
313 <!-- ****** Add Income Data****** --> 313 <!-- ****** Add Income Data****** -->
314 <v-tab-item> 314 <v-tab-item>
315 <v-container> 315 <v-container>
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="success" 322 color="success"
323 >{{ text }}</v-snackbar> 323 >{{ text }}</v-snackbar>
324 <v-flex xs12 sm12 class="my-4"> 324 <v-flex xs12 sm12 class="my-4">
325 <v-card flat> 325 <v-card flat>
326 <v-form ref="form" v-model="valid" lazy-validation> 326 <v-form ref="form" v-model="valid" lazy-validation>
327 <v-container fluid> 327 <v-container fluid>
328 <v-layout> 328 <v-layout>
329 <v-flex 329 <v-flex
330 xs12 330 xs12
331 class="text-xs-center text-sm-center text-md-center text-lg-center my-4 mr-4" 331 class="text-xs-center text-sm-center text-md-center text-lg-center my-4 mr-4"
332 > 332 >
333 <v-avatar size="100px"> 333 <v-avatar size="100px">
334 <img src="/static/icon/user.png" v-if="!imageUrl" /> 334 <img src="/static/icon/user.png" v-if="!imageUrl" />
335 </v-avatar> 335 </v-avatar>
336 <img 336 <img
337 :src="imageUrl" 337 :src="imageUrl"
338 height="150" 338 height="150"
339 v-if="imageUrl" 339 v-if="imageUrl"
340 style="border-radius:50%; width:200px" 340 style="border-radius:50%; width:200px"
341 /> 341 />
342 </v-flex> 342 </v-flex>
343 </v-layout> 343 </v-layout>
344 <v-layout> 344 <v-layout>
345 <v-flex xs12 sm12> 345 <v-flex xs12 sm12>
346 <v-layout> 346 <v-layout>
347 <v-flex xs4 class="pt-4 subheading"> 347 <v-flex xs4 class="pt-4 subheading">
348 <label class="right">Name:</label> 348 <label class="right">Name:</label>
349 </v-flex> 349 </v-flex>
350 <v-flex xs8 sm4 class="ml-3"> 350 <v-flex xs8 sm4 class="ml-3">
351 <v-text-field 351 <v-text-field
352 v-model="addIncome.name" 352 v-model="addIncome.name"
353 placeholder="fill your full Name" 353 placeholder="fill your full Name"
354 name="name" 354 name="name"
355 type="text" 355 type="text"
356 :rules="nameRules" 356 :rules="nameRules"
357 required 357 required
358 ></v-text-field> 358 ></v-text-field>
359 </v-flex> 359 </v-flex>
360 </v-layout> 360 </v-layout>
361 </v-flex> 361 </v-flex>
362 </v-layout> 362 </v-layout>
363 <v-layout> 363 <v-layout>
364 <v-flex xs12 sm12> 364 <v-flex xs12 sm12>
365 <v-layout> 365 <v-layout>
366 <v-flex xs4 class="pt-4 subheading"> 366 <v-flex xs4 class="pt-4 subheading">
367 <label class="right">Amount:</label> 367 <label class="right">Amount:</label>
368 </v-flex> 368 </v-flex>
369 <v-flex xs8 sm4 class="ml-3"> 369 <v-flex xs8 sm4 class="ml-3">
370 <v-text-field 370 <v-text-field
371 v-model="addIncome.amount" 371 v-model="addIncome.amount"
372 placeholder="fill your Amount" 372 placeholder="fill your Amount"
373 name="name" 373 name="name"
374 type="text" 374 type="text"
375 :rules="amountRules" 375 :rules="amountRules"
376 required 376 required
377 ></v-text-field> 377 ></v-text-field>
378 </v-flex> 378 </v-flex>
379 </v-layout> 379 </v-layout>
380 </v-flex> 380 </v-flex>
381 </v-layout> 381 </v-layout>
382 <v-layout> 382 <v-layout>
383 <v-flex xs12 sm12> 383 <v-flex xs12 sm12>
384 <v-layout> 384 <v-layout>
385 <v-flex xs4 class="pt-4 subheading"> 385 <v-flex xs4 class="pt-4 subheading">
386 <label class="right">Date</label> 386 <label class="right">Date</label>
387 </v-flex> 387 </v-flex>
388 <v-flex xs8 sm4 class="ml-3"> 388 <v-flex xs8 sm4 class="ml-3">
389 <v-menu 389 <v-menu
390 ref="menu1" 390 ref="menu1"
391 :close-on-content-click="false" 391 :close-on-content-click="false"
392 v-model="menu1" 392 v-model="menu1"
393 :nudge-right="40" 393 :nudge-right="40"
394 lazy 394 lazy
395 transition="scale-transition" 395 transition="scale-transition"
396 offset-y 396 offset-y
397 full-width 397 full-width
398 min-width="290px" 398 min-width="290px"
399 > 399 >
400 <v-text-field 400 <v-text-field
401 slot="activator" 401 slot="activator"
402 :rules="joinDateRules" 402 :rules="joinDateRules"
403 v-model="addIncome.date" 403 v-model="addIncome.date"
404 placeholder="Select date" 404 placeholder="Select date"
405 ></v-text-field> 405 ></v-text-field>
406 <v-date-picker 406 <v-date-picker
407 ref="picker" 407 ref="picker"
408 v-model="addIncome.date" 408 v-model="addIncome.date"
409 @input="$refs.menu1.save(addIncome.date)" 409 @input="$refs.menu1.save(addIncome.date)"
410 ></v-date-picker> 410 ></v-date-picker>
411 </v-menu> 411 </v-menu>
412 </v-flex> 412 </v-flex>
413 </v-layout> 413 </v-layout>
414 </v-flex> 414 </v-flex>
415 <v-flex xs12 sm12> 415 <v-flex xs12 sm12>
416 <v-layout> 416 <v-layout>
417 <v-flex xs4 class="pt-4 subheading"> 417 <v-flex xs4 class="pt-4 subheading">
418 <label class="right">File:</label> 418 <label class="right">File:</label>
419 </v-flex> 419 </v-flex>
420 <v-flex xs8 sm4 class="ml-3"> 420 <v-flex xs8 sm4 class="ml-3">
421 <v-text-field 421 <v-text-field
422 label="Select file" 422 label="Select file"
423 @click="pickFile" 423 @click="pickFile"
424 v-model="imageName" 424 v-model="imageName"
425 append-icon="attach_file" 425 append-icon="attach_file"
426 ></v-text-field> 426 ></v-text-field>
427 <input 427 <input
428 type="file" 428 type="file"
429 style="display:none" 429 style="display:none"
430 ref="image" 430 ref="image"
431 accept="image/*" 431 accept="image/*"
432 @change="onFilePicked" 432 @change="onFilePicked"
433 /> 433 />
434 </v-flex> 434 </v-flex>
435 </v-layout> 435 </v-layout>
436 </v-flex> 436 </v-flex>
437 <v-layout> 437 <v-layout>
438 <v-flex xs12 sm12> 438 <v-flex xs12 sm12>
439 <v-layout> 439 <v-layout>
440 <v-flex xs4 class="pt-4 subheading"> 440 <v-flex xs4 class="pt-4 subheading">
441 <label class="right">Note:</label> 441 <label class="right">Note:</label>
442 </v-flex> 442 </v-flex>
443 <v-flex xs8 sm4 class="ml-3"> 443 <v-flex xs8 sm4 class="ml-3">
444 <v-textarea 444 <v-textarea
445 name="input-7-1" 445 name="input-7-1"
446 v-model="addIncome.note" 446 v-model="addIncome.note"
447 placeholder="fill your Note" 447 placeholder="fill your Note"
448 type="text" 448 type="text"
449 :rules="noteRules" 449 :rules="noteRules"
450 multi-line 450 multi-line
451 required 451 required
452 ></v-textarea> 452 ></v-textarea>
453 </v-flex> 453 </v-flex>
454 </v-layout> 454 </v-layout>
455 </v-flex> 455 </v-flex>
456 </v-layout> 456 </v-layout>
457 </v-layout> 457 </v-layout>
458 <v-layout> 458 <v-layout>
459 <v-flex xs12 sm5 offset-sm3> 459 <v-flex xs12 sm5 offset-sm3>
460 <v-layout> 460 <v-layout>
461 <v-flex xs6> 461 <v-flex xs6>
462 <v-btn @click="clear" round class="ml-3" dark>clear</v-btn> 462 <v-btn @click="clear" round class="ml-3" dark>clear</v-btn>
463 </v-flex> 463 </v-flex>
464 <v-flex xs6> 464 <v-flex xs6>
465 <v-btn @click="submit" round dark :loading="loading" class="right">Add</v-btn> 465 <v-btn @click="submit" round dark :loading="loading" class="right">Add</v-btn>
466 </v-flex> 466 </v-flex>
467 </v-layout> 467 </v-layout>
468 </v-flex> 468 </v-flex>
469 </v-layout> 469 </v-layout>
470 </v-container> 470 </v-container>
471 </v-form> 471 </v-form>
472 </v-card> 472 </v-card>
473 </v-flex> 473 </v-flex>
474 </v-container> 474 </v-container>
475 </v-tab-item> 475 </v-tab-item>
476 </v-tabs> 476 </v-tabs>
477 <div class="loader" v-if="showLoader"> 477 <div class="loader" v-if="showLoader">
478 <v-progress-circular indeterminate color="white"></v-progress-circular> 478 <v-progress-circular indeterminate color="white"></v-progress-circular>
479 </div> 479 </div>
480 </v-app> 480 </v-app>
481 </template> 481 </template>
482 482
483 <script> 483 <script>
484 import http from "@/Services/http.js"; 484 import http from "@/Services/http.js";
485 import Util from "@/util"; 485 import Util from "@/util";
486 import moment from "moment"; 486 import moment from "moment";
487 487
488 export default { 488 export default {
489 data: () => ({ 489 data: () => ({
490 component: "report-generate", 490 component: "report-generate",
491 snackbar: false, 491 snackbar: false,
492 y: "top", 492 y: "top",
493 x: "right", 493 x: "right",
494 mode: "", 494 mode: "",
495 timeout: 3000, 495 timeout: 3000,
496 text: "", 496 text: "",
497 showLoader: false, 497 showLoader: false,
498 loading: false, 498 loading: false,
499 date: null, 499 date: null,
500 search: "", 500 search: "",
501 menu: false, 501 menu: false,
502 menu1: false, 502 menu1: false,
503 menu2: false, 503 menu2: false,
504 menu3: false, 504 menu3: false,
505 dialog: false, 505 dialog: false,
506 dialog1: false, 506 dialog1: false,
507 valid: true, 507 valid: true,
508 isActive: true, 508 isActive: true,
509 newActive: false, 509 newActive: false,
510 pagination: { 510 pagination: {
511 rowsPerPage: 15 511 rowsPerPage: 15
512 }, 512 },
513 imageData: {}, 513 imageData: {},
514 imageName: "", 514 imageName: "",
515 imageUrl: "", 515 imageUrl: "",
516 imageFile: "", 516 imageFile: "",
517 nameRules: [v => !!v || " Full Name is required"], 517 nameRules: [v => !!v || " Full Name is required"],
518 amountRules: [v => !!v || "Amount is required"], 518 amountRules: [v => !!v || "Amount is required"],
519 noteRules: [v => !!v || "Note Name is required"], 519 noteRules: [v => !!v || "Note Name is required"],
520 joinDateRules: [v => !!v || "Date is required"], 520 joinDateRules: [v => !!v || "Date is required"],
521 errorMessages: "", 521 errorMessages: "",
522 headers: [ 522 headers: [
523 { 523 {
524 text: "No", 524 text: "No",
525 align: "center", 525 align: "center",
526 sortable: false, 526 sortable: false,
527 value: "No" 527 value: "No"
528 }, 528 },
529 { 529 {
530 text: "Profile Pic", 530 text: "Profile Pic",
531 value: "profilePicUrl", 531 value: "profilePicUrl",
532 sortable: false, 532 sortable: false,
533 align: "center" 533 align: "center"
534 }, 534 },
535 { text: "Name", value: "name", sortable: false, align: "center" }, 535 { text: "Name", value: "name", sortable: false, align: "center" },
536 { text: "Date", value: "date", sortable: false, align: "center" }, 536 { text: "Date", value: "date", sortable: false, align: "center" },
537 { text: "User", value: "user", sortable: false, align: "center" }, 537 { text: "User", value: "user", sortable: false, align: "center" },
538 { text: "Amount", value: "amount", sortable: false, align: "center" }, 538 { text: "Amount", value: "amount", sortable: false, align: "center" },
539 { text: "Note", value: "note", sortable: false, align: "center" }, 539 { text: "Note", value: "note", sortable: false, align: "center" },
540 { text: "Action", value: "", sortable: false, align: "center" } 540 { text: "Action", value: "", sortable: false, align: "center" }
541 ], 541 ],
542 incomeList: [], 542 incomeList: [],
543 editedIndex: -1, 543 editedIndex: -1,
544 upload: "", 544 upload: "",
545 editedItem: {}, 545 editedItem: {},
546 addIncome: {} 546 addIncome: {}
547 }), 547 }),
548 watch: { 548 watch: {
549 menu(val) { 549 menu(val) {
550 val && this.$nextTick(() => (this.$refs.picker.activePicker = "YEAR")); 550 val && this.$nextTick(() => (this.$refs.picker.activePicker = "YEAR"));
551 }, 551 },
552 menu1(val) { 552 menu1(val) {
553 val && this.$nextTick(() => (this.$refs.picker.activePicker = "YEAR")); 553 val && this.$nextTick(() => (this.$refs.picker.activePicker = "YEAR"));
554 } 554 }
555 }, 555 },
556 methods: { 556 methods: {
557 save(date) { 557 save(date) {
558 this.$refs.menu.save(date); 558 this.$refs.menu.save(date);
559 }, 559 },
560 save(date) { 560 save(date) {
561 this.$refs.menu1.save(date); 561 this.$refs.menu1.save(date);
562 }, 562 },
563 pickFile() { 563 pickFile() {
564 this.$refs.image.click(); 564 this.$refs.image.click();
565 }, 565 },
566 onFilePicked(e) { 566 onFilePicked(e) {
567 // console.log(e) 567 // console.log(e)
568 const files = e.target.files; 568 const files = e.target.files;
569 this.upload = e.target.files[0]; 569 this.upload = e.target.files[0];
570 console.log("imageData-upload========>", this.upload); 570 console.log("imageData-upload========>", this.upload);
571 if (files[0] !== undefined) { 571 if (files[0] !== undefined) {
572 this.imageName = files[0].name; 572 this.imageName = files[0].name;
573 if (this.imageName.lastIndexOf(".") <= 0) { 573 if (this.imageName.lastIndexOf(".") <= 0) {
574 return; 574 return;
575 } 575 }
576 const fr = new FileReader(); 576 const fr = new FileReader();
577 fr.readAsDataURL(files[0]); 577 fr.readAsDataURL(files[0]);
578 fr.addEventListener("load", () => { 578 fr.addEventListener("load", () => {
579 this.imageUrl = fr.result; 579 this.imageUrl = fr.result;
580 this.imageFile = files[0]; // this is an image file that can be sent to server... 580 this.imageFile = files[0]; // this is an image file that can be sent to server...
581 // this.imageData.imageUrl = URL.createObjectURL(this.imageFile); 581 // this.imageData.imageUrl = URL.createObjectURL(this.imageFile);
582 // console.log("upload=======>", this.imageData.imageUrl); 582 // console.log("upload=======>", this.imageData.imageUrl);
583 console.log("imageFile", this.imageUrl); 583 console.log("imageFile", this.imageUrl);
584 }); 584 });
585 } else { 585 } else {
586 this.imageName = ""; 586 this.imageName = "";
587 this.imageFile = ""; 587 this.imageFile = "";
588 this.imageUrl = ""; 588 this.imageUrl = "";
589 } 589 }
590 }, 590 },
591 dates: function(date) { 591 dates: function(date) {
592 return moment(date).format("MMMM DD, YYYY"); 592 return moment(date).format("MMMM DD, YYYY");
593 }, 593 },
594 getIncomeList() { 594 getIncomeList() {
595 this.showLoader = true; 595 this.showLoader = true;
596 var token = this.$store.state.token; 596 var token = this.$store.state.token;
597 http() 597 http()
598 .get("/getIncomesList", { 598 .get("/getIncomesList", {
599 params: { schoolId: this.$store.state.schoolId },
599 headers: { Authorization: "Bearer " + token } 600 headers: { Authorization: "Bearer " + token }
600 }) 601 })
601 .then(response => { 602 .then(response => {
602 this.incomeList = response.data.data; 603 this.incomeList = response.data.data;
603 this.showLoader = false; 604 this.showLoader = false;
604 // console.log("getTeacherList=====>",this.incomeList) 605 // console.log("getTeacherList=====>",this.incomeList)
605 }) 606 })
606 .catch(error => { 607 .catch(error => {
607 this.showLoader = false; 608 this.showLoader = false;
608 if (error.response.status === 401) { 609 if (error.response.status === 401) {
609 this.$router.replace({ path: "/" }); 610 this.$router.replace({ path: "/" });
610 this.$store.dispatch("setToken", null); 611 this.$store.dispatch("setToken", null);
611 this.$store.dispatch("Id", null); 612 this.$store.dispatch("Id", null);
612 } 613 }
613 }); 614 });
614 }, 615 },
615 editItem(item) { 616 editItem(item) {
616 this.editedIndex = this.incomeList.indexOf(item); 617 this.editedIndex = this.incomeList.indexOf(item);
617 this.editedItem = Object.assign({}, item); 618 this.editedItem = Object.assign({}, item);
618 this.editedItem.date = 619 this.editedItem.date =
619 this.editedItem.date != undefined 620 this.editedItem.date != undefined
620 ? (this.editedItem.date = this.editedItem.date.substring(0, 10)) 621 ? (this.editedItem.date = this.editedItem.date.substring(0, 10))
621 : (this.editedItem.date = ""); 622 : (this.editedItem.date = "");
622 623
623 this.dialog = true; 624 this.dialog = true;
624 }, 625 },
625 profile(item) { 626 profile(item) {
626 this.editedIndex = this.incomeList.indexOf(item); 627 this.editedIndex = this.incomeList.indexOf(item);
627 this.editedItem = Object.assign({}, item); 628 this.editedItem = Object.assign({}, item);
628 this.dialog1 = true; 629 this.dialog1 = true;
629 }, 630 },
630 deleteItem(item) { 631 deleteItem(item) {
631 let deleteIncome = { 632 let deleteIncome = {
632 incomeId: item._id 633 incomeId: item._id
633 }; 634 };
634 http() 635 http()
635 .delete( 636 .delete(
636 "/deleteIncome", 637 "/deleteIncome",
637 confirm("Are you sure you want to delete this?") && { 638 confirm("Are you sure you want to delete this?") && {
638 params: deleteIncome 639 params: deleteIncome
639 } 640 }
640 ) 641 )
641 .then(response => { 642 .then(response => {
642 // console.log("deleteUers",deleteTeachers) 643 // console.log("deleteUers",deleteTeachers)
643 if ((this.snackbar = true)) { 644 if ((this.snackbar = true)) {
644 this.text = "Successfully delete Existing Income"; 645 this.text = "Successfully delete Existing Income";
645 } 646 }
646 this.getIncomeList(); 647 this.getIncomeList();
647 }) 648 })
648 .catch(error => { 649 .catch(error => {
649 console.log(error); 650 console.log(error);
650 }); 651 });
651 }, 652 },
652 activeTab(type) { 653 activeTab(type) {
653 switch (type) { 654 switch (type) {
654 case "existing": 655 case "existing":
655 this.newActive = false; 656 this.newActive = false;
656 this.isActive = true; 657 this.isActive = true;
657 break; 658 break;
658 659
659 default: 660 default:
660 this.newActive = true; 661 this.newActive = true;
661 this.isActive = false; 662 this.isActive = false;
662 break; 663 break;
663 } 664 }
664 }, 665 },
665 close() { 666 close() {
666 this.dialog = false; 667 this.dialog = false;
667 setTimeout(() => { 668 setTimeout(() => {
668 this.editedItem = Object.assign({}, this.defaultItem); 669 this.editedItem = Object.assign({}, this.defaultItem);
669 this.editedIndex = -1; 670 this.editedIndex = -1;
670 }, 300); 671 }, 300);
671 }, 672 },
672 close1() { 673 close1() {
673 this.dialog1 = false; 674 this.dialog1 = false;
674 }, 675 },
675 submit() { 676 submit() {
676 if (this.$refs.form.validate()) { 677 if (this.$refs.form.validate()) {
677 if (this.imageUrl) { 678 if (this.imageUrl) {
678 var str = this.imageUrl; 679 var str = this.imageUrl;
679 const [baseUrl, imageUrl] = str.split(/,/); 680 const [baseUrl, imageUrl] = str.split(/,/);
680 this.addIncome.upload = imageUrl; 681 this.addIncome.upload = imageUrl;
681 } 682 }
682 this.loading = true; 683 this.loading = true;
684 this.addIncome = this.$store.state.schoolId;
683 http() 685 http()
684 .post("/createIncome", this.addIncome) 686 .post("/createIncome", this.addIncome)
685 .then(response => { 687 .then(response => {
686 this.getIncomeList(); 688 this.getIncomeList();
687 if ((this.snackbar = true)) { 689 if ((this.snackbar = true)) {
688 this.text = "New Income added successfully"; 690 this.text = "New Income added successfully";
689 } 691 }
690 692
691 this.clear(); 693 this.clear();
692 this.loading = false; 694 this.loading = false;
693 }) 695 })
694 .catch(error => { 696 .catch(error => {
695 // console.log(error); 697 // console.log(error);
696 if ((this.snackbar = true)) { 698 if ((this.snackbar = true)) {
697 this.text = error.response.data.message; 699 this.text = error.response.data.message;
698 } 700 }
699 this.loading = false; 701 this.loading = false;
700 }); 702 });
701 } 703 }
702 }, 704 },
703 clear() { 705 clear() {
704 this.$refs.form.reset(); 706 this.$refs.form.reset();
705 }, 707 },
706 save() { 708 save() {
707 this.loading = true; 709 this.loading = true;
708 this.editedItem.incomeId = this.editedItem._id; 710 this.editedItem.incomeId = this.editedItem._id;
709 if (this.imageUrl) { 711 if (this.imageUrl) {
710 var str = this.imageUrl; 712 var str = this.imageUrl;
711 const [baseUrl, imageUrl] = str.split(/,/); 713 const [baseUrl, imageUrl] = str.split(/,/);
712 this.editedItem.upload = imageUrl; 714 this.editedItem.upload = imageUrl;
713 } 715 }
714 http() 716 http()
715 .put("/updateIncome", this.editedItem) 717 .put("/updateIncome", this.editedItem)
716 .then(response => { 718 .then(response => {
717 if ((this.snackbar = true)) { 719 if ((this.snackbar = true)) {
718 this.text = "Successfully Edit Income"; 720 this.text = "Successfully Edit Income";
719 } 721 }
720 this.loading = false; 722 this.loading = false;
721 this.getIncomeList(); 723 this.getIncomeList();
722 this.close(); 724 this.close();
723 }) 725 })
724 .catch(error => { 726 .catch(error => {
725 console.log(error); 727 console.log(error);
726 this.loading = false; 728 this.loading = false;
727 }); 729 });
728 } 730 }
729 }, 731 },
730 mounted() { 732 mounted() {
731 this.getIncomeList(); 733 this.getIncomeList();
732 }, 734 },
733 created() { 735 created() {
734 this.$root.$on("app:search", search => { 736 this.$root.$on("app:search", search => {
735 this.search = search; 737 this.search = search;
736 }); 738 });
737 }, 739 },
738 beforeDestroy() { 740 beforeDestroy() {
739 // dont forget to remove the listener 741 // dont forget to remove the listener
740 this.$root.$off("app:search"); 742 this.$root.$off("app:search");
741 } 743 }
742 }; 744 };
743 </script> 745 </script>
744 <style scoped> 746 <style scoped>
745 .active { 747 .active {
746 background-color: gray; 748 background-color: gray;
747 color: white !important; 749 color: white !important;
748 } 750 }
749 .activebtn { 751 .activebtn {
750 color: black !important; 752 color: black !important;
751 } 753 }
752 </style> 754 </style>
src/pages/Account/invoice.vue
Diff comments   View file @99cd791
1 <template> 1 <template>
2 <v-app id="pages-dasboard"> 2 <v-app id="pages-dasboard">
3 <v-tabs grow slider-color="gray"> 3 <v-tabs grow slider-color="gray">
4 <v-tab 4 <v-tab
5 ripple 5 ripple
6 @click="activeTab('existing')" 6 @click="activeTab('existing')"
7 v-bind:class="{ active: isActive }" 7 v-bind:class="{ active: isActive }"
8 id="tab" 8 id="tab"
9 class="subheading" 9 class="subheading"
10 >Existing Invoice</v-tab> 10 >Existing Invoice</v-tab>
11 <v-tab 11 <v-tab
12 ripple 12 ripple
13 @click="activeTab('new')" 13 @click="activeTab('new')"
14 v-bind:class="{ active: newActive }" 14 v-bind:class="{ active: newActive }"
15 id="tab1" 15 id="tab1"
16 User 16 User
17 class="subheading" 17 class="subheading"
18 >Add New Invoice</v-tab> 18 >Add New Invoice</v-tab>
19 19
20 <!-- ****** EDIT SECTION ****** --> 20 <!-- ****** EDIT SECTION ****** -->
21 <v-tab-item> 21 <v-tab-item>
22 <!-- ****** PROFILE VIEW SECTION DATA ****** --> 22 <!-- ****** PROFILE VIEW SECTION DATA ****** -->
23 <v-dialog v-model="dialog1" max-width="600px"> 23 <v-dialog v-model="dialog1" max-width="600px">
24 <v-toolbar color="grey lighten-2"> 24 <v-toolbar color="grey lighten-2">
25 <v-spacer></v-spacer> 25 <v-spacer></v-spacer>
26 <v-toolbar-title> 26 <v-toolbar-title>
27 <h3>Invoice</h3> 27 <h3>Invoice</h3>
28 </v-toolbar-title> 28 </v-toolbar-title>
29 <v-spacer></v-spacer> 29 <v-spacer></v-spacer>
30 <v-icon @click="close1">close</v-icon> 30 <v-icon @click="close1">close</v-icon>
31 </v-toolbar> 31 </v-toolbar>
32 <v-card> 32 <v-card>
33 <v-flex align-center justify-center layout text-xs-center> 33 <v-flex align-center justify-center layout text-xs-center>
34 <v-avatar size="50px" style="position:absolute; top:20px;"> 34 <v-avatar size="50px" style="position:absolute; top:20px;">
35 <img src="/static/icon/user.png" /> 35 <img src="/static/icon/user.png" />
36 </v-avatar> 36 </v-avatar>
37 </v-flex> 37 </v-flex>
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> 41 <v-flex>
42 <br /> 42 <br />
43 <br /> 43 <br />
44 <v-layout> 44 <v-layout>
45 <v-flex xs5 sm6> 45 <v-flex xs5 sm6>
46 <h5 class="right my-1"> 46 <h5 class="right my-1">
47 <b>Class Name:</b> 47 <b>Class Name:</b>
48 </h5> 48 </h5>
49 </v-flex> 49 </v-flex>
50 <v-flex sm6 xs8> 50 <v-flex sm6 xs8>
51 <!-- <h5 class="my-1">{{ editedItem.classData.classNum }}</h5> --> 51 <!-- <h5 class="my-1">{{ editedItem.classData.classNum }}</h5> -->
52 </v-flex> 52 </v-flex>
53 </v-layout> 53 </v-layout>
54 <v-layout> 54 <v-layout>
55 <v-flex xs5 sm6> 55 <v-flex xs5 sm6>
56 <h5 class="right my-1"> 56 <h5 class="right my-1">
57 <b>Name:</b> 57 <b>Name:</b>
58 </h5> 58 </h5>
59 </v-flex> 59 </v-flex>
60 <v-flex sm6 xs8> 60 <v-flex sm6 xs8>
61 <h5 class="my-1">{{ editedItem.name }}</h5> 61 <h5 class="my-1">{{ editedItem.name }}</h5>
62 </v-flex> 62 </v-flex>
63 </v-layout> 63 </v-layout>
64 <v-layout> 64 <v-layout>
65 <v-flex xs5 sm6> 65 <v-flex xs5 sm6>
66 <h5 class="right my-1"> 66 <h5 class="right my-1">
67 <b>Class Incharge:</b> 67 <b>Class Incharge:</b>
68 </h5> 68 </h5>
69 </v-flex> 69 </v-flex>
70 <v-flex sm6 xs8> 70 <v-flex sm6 xs8>
71 <h5 class="my-1">{{ editedItem.name }}</h5> 71 <h5 class="my-1">{{ editedItem.name }}</h5>
72 </v-flex> 72 </v-flex>
73 </v-layout> 73 </v-layout>
74 <v-layout> 74 <v-layout>
75 <v-flex xs5 sm6> 75 <v-flex xs5 sm6>
76 <h5 class="right my-1"> 76 <h5 class="right my-1">
77 <b>Session:</b> 77 <b>Session:</b>
78 </h5> 78 </h5>
79 </v-flex> 79 </v-flex>
80 <v-flex sm6 xs8> 80 <v-flex sm6 xs8>
81 <h5 class="my-1">{{ editedItem.paymentStatus }}</h5> 81 <h5 class="my-1">{{ editedItem.paymentStatus }}</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 <!-- ****** EXISTING-USERS StudentS Table ****** --> 90 <!-- ****** EXISTING-USERS StudentS Table ****** -->
91 <v-data-table 91 <v-data-table
92 :headers="headers" 92 :headers="headers"
93 :items="invoiceList" 93 :items="invoiceList"
94 :pagination.sync="pagination" 94 :pagination.sync="pagination"
95 :search="search" 95 :search="search"
96 > 96 >
97 <template slot="items" slot-scope="props"> 97 <template slot="items" slot-scope="props">
98 <td id="td" class="text-xs-center">{{ props.index + 1 }}</td> 98 <td id="td" class="text-xs-center">{{ props.index + 1 }}</td>
99 <td id="td" class="text-xs-center">{{ props.item.studentId.name }}</td> 99 <td id="td" class="text-xs-center">{{ props.item.studentId.name }}</td>
100 <td id="td" class="text-xs-center">{{ props.item.classId.classNum }}</td> 100 <td id="td" class="text-xs-center">{{ props.item.classId.classNum }}</td>
101 <td id="td" class="text-xs-center">{{ props.item.totalAmount }}</td> 101 <td id="td" class="text-xs-center">{{ props.item.totalAmount }}</td>
102 <td 102 <td
103 id="td" 103 id="td"
104 class="text-xs-center" 104 class="text-xs-center"
105 >{{ props.item.totalAmount - props.item.totalSubTotal }}</td> 105 >{{ props.item.totalAmount - props.item.totalSubTotal }}</td>
106 <td 106 <td
107 id="td" 107 id="td"
108 class="text-xs-center" 108 class="text-xs-center"
109 >{{ props.item.totalPaidAmount ? props.item.totalPaidAmount : 0}}</td> 109 >{{ props.item.totalPaidAmount ? props.item.totalPaidAmount : 0}}</td>
110 <td 110 <td
111 id="td" 111 id="td"
112 class="text-xs-center" 112 class="text-xs-center"
113 >{{ props.item.totalPaidAmount ? props.item.totalSubTotal - props.item.totalPaidAmount : props.item.totalSubTotal }}</td> 113 >{{ props.item.totalPaidAmount ? props.item.totalSubTotal - props.item.totalPaidAmount : props.item.totalSubTotal }}</td>
114 <td id="td" class="text-xs-center" v-if="props.item.paymentStatus === 'NOT_PAID'"> 114 <td id="td" class="text-xs-center" v-if="props.item.paymentStatus === 'NOT_PAID'">
115 <span 115 <span
116 class="red lighten-1 pa-2 white--text paymentStatus" 116 class="red lighten-1 pa-2 white--text paymentStatus"
117 >{{ props.item.paymentStatus }}</span> 117 >{{ props.item.paymentStatus }}</span>
118 </td> 118 </td>
119 <td id="td" class="text-xs-center" v-if="props.item.paymentStatus != 'NOT_PAID'"> 119 <td id="td" class="text-xs-center" v-if="props.item.paymentStatus != 'NOT_PAID'">
120 <span 120 <span
121 class="green lighten-1 pa-2 white--text paymentStatus" 121 class="green lighten-1 pa-2 white--text paymentStatus"
122 >{{ props.item.paymentStatus }}</span> 122 >{{ props.item.paymentStatus }}</span>
123 </td> 123 </td>
124 <td id="td" class="text-xs-center">{{ dates(props.item.date) }}</td> 124 <td id="td" class="text-xs-center">{{ dates(props.item.date) }}</td>
125 <td> 125 <td>
126 <router-link :to="{ name:'ViewInvoice',params: { viewInvoiceId:props.item._id } }"> 126 <router-link :to="{ name:'ViewInvoice',params: { viewInvoiceId:props.item._id } }">
127 <v-tooltip top> 127 <v-tooltip top>
128 <img 128 <img
129 slot="activator" 129 slot="activator"
130 style="cursor:pointer; width:25px; height:18px; " 130 style="cursor:pointer; width:25px; height:18px; "
131 class="mr-5" 131 class="mr-5"
132 src="/static/icon/eye1.png" 132 src="/static/icon/eye1.png"
133 /> 133 />
134 <span>View</span> 134 <span>View</span>
135 </v-tooltip> 135 </v-tooltip>
136 </router-link> 136 </router-link>
137 <span v-if="props.item.paymentStatus === 'NOT_PAID'"> 137 <span v-if="props.item.paymentStatus === 'NOT_PAID'">
138 <router-link :to="{ name:'EditInvoice',params: { invoiceid:props.item._id }}" exact> 138 <router-link :to="{ name:'EditInvoice',params: { invoiceid:props.item._id }}" exact>
139 <v-tooltip top> 139 <v-tooltip top>
140 <img 140 <img
141 slot="activator" 141 slot="activator"
142 style="cursor:pointer; width:20px; height:18px; " 142 style="cursor:pointer; width:20px; height:18px; "
143 class="mr-5" 143 class="mr-5"
144 src="/static/icon/edit1.png" 144 src="/static/icon/edit1.png"
145 /> 145 />
146 <span>Edit</span> 146 <span>Edit</span>
147 </v-tooltip> 147 </v-tooltip>
148 </router-link> 148 </router-link>
149 <v-tooltip top> 149 <v-tooltip top>
150 <img 150 <img
151 slot="activator" 151 slot="activator"
152 style="cursor:pointer;width:20px; height:20px; " 152 style="cursor:pointer;width:20px; height:20px; "
153 class="mr-5" 153 class="mr-5"
154 @click="deleteItem(props.item)" 154 @click="deleteItem(props.item)"
155 src="/static/icon/delete1.png" 155 src="/static/icon/delete1.png"
156 /> 156 />
157 <span>Delete</span> 157 <span>Delete</span>
158 </v-tooltip> 158 </v-tooltip>
159 </span> 159 </span>
160 </td> 160 </td>
161 </template> 161 </template>
162 <v-alert 162 <v-alert
163 slot="no-results" 163 slot="no-results"
164 :value="true" 164 :value="true"
165 color="error" 165 color="error"
166 icon="warning" 166 icon="warning"
167 >Your search for "{{ search }}" found no results.</v-alert> 167 >Your search for "{{ search }}" found no results.</v-alert>
168 </v-data-table> 168 </v-data-table>
169 </v-tab-item> 169 </v-tab-item>
170 <!-- ****** ADD multiple INVOICE ****** --> 170 <!-- ****** ADD multiple INVOICE ****** -->
171 <v-tab-item> 171 <v-tab-item>
172 <v-container fluid grid-list-md> 172 <v-container fluid grid-list-md>
173 <v-snackbar 173 <v-snackbar
174 :timeout="timeout" 174 :timeout="timeout"
175 :top="y === 'top'" 175 :top="y === 'top'"
176 :right="x === 'right'" 176 :right="x === 'right'"
177 :vertical="mode === 'vertical'" 177 :vertical="mode === 'vertical'"
178 v-model="snackbar" 178 v-model="snackbar"
179 color="success" 179 color="success"
180 >{{ text }}</v-snackbar> 180 >{{ text }}</v-snackbar>
181 <v-flex xs12 sm12> 181 <v-flex xs12 sm12>
182 <v-container fluid> 182 <v-container fluid>
183 <v-layout wrap> 183 <v-layout wrap>
184 <v-flex xs12 sm12 md5 class="mt-4"> 184 <v-flex xs12 sm12 md5 class="mt-4">
185 <v-card flat> 185 <v-card flat>
186 <v-toolbar dark class="fixcolors" flat> 186 <v-toolbar dark class="fixcolors" flat>
187 <v-spacer></v-spacer> 187 <v-spacer></v-spacer>
188 <v-toolbar-title> 188 <v-toolbar-title>
189 <h3>Invoice</h3> 189 <h3>Invoice</h3>
190 </v-toolbar-title> 190 </v-toolbar-title>
191 <v-spacer></v-spacer> 191 <v-spacer></v-spacer>
192 </v-toolbar> 192 </v-toolbar>
193 <v-form ref="form" v-model="valid" lazy-validation class="py-4"> 193 <v-form ref="form" v-model="valid" lazy-validation class="py-4">
194 <v-layout> 194 <v-layout>
195 <v-flex xs4 class="pt-4 subheading"> 195 <v-flex xs4 class="pt-4 subheading">
196 <label class="right hidden-xs-only hidden-sm-only">Select Class:</label> 196 <label class="right hidden-xs-only hidden-sm-only">Select Class:</label>
197 <label class="right hidden-lg-only hidden-md-only hidden-xl-only">Class:</label> 197 <label class="right hidden-lg-only hidden-md-only hidden-xl-only">Class:</label>
198 </v-flex> 198 </v-flex>
199 <v-flex xs6 class="ml-3"> 199 <v-flex xs6 class="ml-3">
200 <v-select 200 <v-select
201 :items="addclass" 201 :items="addclass"
202 label="Select Class" 202 label="Select Class"
203 v-model="invoiceData.classNum" 203 v-model="invoiceData.classNum"
204 item-text="classNum" 204 item-text="classNum"
205 item-value="_id" 205 item-value="_id"
206 @change="getAllStudents()" 206 @change="getAllStudents()"
207 :rules="classRules" 207 :rules="classRules"
208 required 208 required
209 ></v-select> 209 ></v-select>
210 </v-flex> 210 </v-flex>
211 </v-layout> 211 </v-layout>
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-xs-only hidden-sm-only">Select Student:</label> 214 <label class="right hidden-xs-only hidden-sm-only">Select Student:</label>
215 <label class="right hidden-lg-only hidden-md-only hidden-xl-only">Student:</label> 215 <label class="right hidden-lg-only hidden-md-only hidden-xl-only">Student:</label>
216 </v-flex> 216 </v-flex>
217 <v-flex xs6 class="ml-3"> 217 <v-flex xs6 class="ml-3">
218 <v-select 218 <v-select
219 :items="studentList" 219 :items="studentList"
220 label="Select Incharge" 220 label="Select Incharge"
221 v-model="invoiceData.sectionId" 221 v-model="invoiceData.sectionId"
222 item-text="name" 222 item-text="name"
223 item-value="_id" 223 item-value="_id"
224 :rules="inchargeRules" 224 :rules="inchargeRules"
225 required 225 required
226 ></v-select> 226 ></v-select>
227 </v-flex> 227 </v-flex>
228 </v-layout> 228 </v-layout>
229 <v-layout> 229 <v-layout>
230 <v-flex xs4 class="pt-4 subheading"> 230 <v-flex xs4 class="pt-4 subheading">
231 <label class="right">Date:</label> 231 <label class="right">Date:</label>
232 </v-flex> 232 </v-flex>
233 <v-flex xs6 class="ml-3"> 233 <v-flex xs6 class="ml-3">
234 <v-menu 234 <v-menu
235 ref="menu1" 235 ref="menu1"
236 :close-on-content-click="false" 236 :close-on-content-click="false"
237 v-model="menu1" 237 v-model="menu1"
238 :nudge-right="40" 238 :nudge-right="40"
239 lazy 239 lazy
240 :return-value.sync="invoiceData.date" 240 :return-value.sync="invoiceData.date"
241 transition="scale-transition" 241 transition="scale-transition"
242 offset-y 242 offset-y
243 full-width 243 full-width
244 min-width="290px" 244 min-width="290px"
245 > 245 >
246 <v-text-field 246 <v-text-field
247 slot="activator" 247 slot="activator"
248 :rules="dateRules" 248 :rules="dateRules"
249 v-model="invoiceData.date" 249 v-model="invoiceData.date"
250 placeholder="Select date" 250 placeholder="Select date"
251 ></v-text-field> 251 ></v-text-field>
252 <v-date-picker 252 <v-date-picker
253 v-model="invoiceData.date" 253 v-model="invoiceData.date"
254 @input="$refs.menu1.save(invoiceData.date)" 254 @input="$refs.menu1.save(invoiceData.date)"
255 ></v-date-picker> 255 ></v-date-picker>
256 </v-menu> 256 </v-menu>
257 </v-flex> 257 </v-flex>
258 </v-layout> 258 </v-layout>
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 hidden-xs-only hidden-sm-only">Payment Status:</label> 261 <label class="right hidden-xs-only hidden-sm-only">Payment Status:</label>
262 <label class="right hidden-lg-only hidden-md-only hidden-xl-only">Payment:</label> 262 <label class="right hidden-lg-only hidden-md-only hidden-xl-only">Payment:</label>
263 </v-flex> 263 </v-flex>
264 <v-flex xs6 class="ml-3"> 264 <v-flex xs6 class="ml-3">
265 <v-select 265 <v-select
266 :items="paymentStatus" 266 :items="paymentStatus"
267 v-model="invoiceData.paymentStatus" 267 v-model="invoiceData.paymentStatus"
268 item-text="name" 268 item-text="name"
269 item-value="value" 269 item-value="value"
270 label="Select Payment Status" 270 label="Select Payment Status"
271 @change="getPayMethodList" 271 @change="getPayMethodList"
272 :rules="paymentStatusRules" 272 :rules="paymentStatusRules"
273 required 273 required
274 ></v-select> 274 ></v-select>
275 </v-flex> 275 </v-flex>
276 </v-layout> 276 </v-layout>
277 <v-layout v-show="showPayMethods"> 277 <v-layout v-show="showPayMethods">
278 <v-flex xs4 class="pt-4 subheading"> 278 <v-flex xs4 class="pt-4 subheading">
279 <label class="right">Payment Method:</label> 279 <label class="right">Payment Method:</label>
280 </v-flex> 280 </v-flex>
281 <v-flex xs6 class="ml-3"> 281 <v-flex xs6 class="ml-3">
282 <v-select 282 <v-select
283 :items="paymentMethods" 283 :items="paymentMethods"
284 v-model="invoiceData.paymentMethod" 284 v-model="invoiceData.paymentMethod"
285 label="Select Payment Method" 285 label="Select Payment Method"
286 required 286 required
287 ></v-select> 287 ></v-select>
288 </v-flex> 288 </v-flex>
289 </v-layout> 289 </v-layout>
290 <v-layout> 290 <v-layout>
291 <v-flex xs12 sm10 offset-sm1> 291 <v-flex xs12 sm10 offset-sm1>
292 <v-card-actions> 292 <v-card-actions>
293 <v-btn @click="clear" round dark>clear</v-btn> 293 <v-btn @click="clear" round dark>clear</v-btn>
294 <v-spacer></v-spacer> 294 <v-spacer></v-spacer>
295 <v-btn @click="submit" round dark :loading="loading">Add</v-btn> 295 <v-btn @click="submit" round dark :loading="loading">Add</v-btn>
296 </v-card-actions> 296 </v-card-actions>
297 </v-flex> 297 </v-flex>
298 </v-layout> 298 </v-layout>
299 </v-form> 299 </v-form>
300 </v-card> 300 </v-card>
301 </v-flex> 301 </v-flex>
302 <v-flex xs12 sm12 md7 class="mt-4"> 302 <v-flex xs12 sm12 md7 class="mt-4">
303 <v-card> 303 <v-card>
304 <v-toolbar dark class="fixcolors" flat> 304 <v-toolbar dark class="fixcolors" flat>
305 <v-spacer></v-spacer> 305 <v-spacer></v-spacer>
306 <v-toolbar-title> 306 <v-toolbar-title>
307 <h3>Fee Type List</h3> 307 <h3>Fee Type List</h3>
308 </v-toolbar-title> 308 </v-toolbar-title>
309 <v-spacer></v-spacer> 309 <v-spacer></v-spacer>
310 </v-toolbar> 310 </v-toolbar>
311 <v-layout> 311 <v-layout>
312 <v-flex xs4 sm2 class="mt-4"> 312 <v-flex xs4 sm2 class="mt-4">
313 <label class="right title">Fee Type:</label> 313 <label class="right title">Fee Type:</label>
314 </v-flex> 314 </v-flex>
315 <v-flex xs4 sm4> 315 <v-flex xs4 sm4>
316 <v-select 316 <v-select
317 :items="feeTypes" 317 :items="feeTypes"
318 v-model="feeType.feeTypeName" 318 v-model="feeType.feeTypeName"
319 item-text="feeType" 319 item-text="feeType"
320 item-value="feeType" 320 item-value="feeType"
321 label="Select Fee Type" 321 label="Select Fee Type"
322 ></v-select> 322 ></v-select>
323 </v-flex> 323 </v-flex>
324 <v-flex xs4 sm6> 324 <v-flex xs4 sm6>
325 <v-btn color="black" dark class="right mt-3" @click="selectFeeType">ADD</v-btn> 325 <v-btn color="black" dark class="right mt-3" @click="selectFeeType">ADD</v-btn>
326 </v-flex> 326 </v-flex>
327 </v-layout> 327 </v-layout>
328 <table class="feeTypeTable tableRsponsive"> 328 <table class="feeTypeTable tableRsponsive">
329 <tr class="info white--text"> 329 <tr class="info white--text">
330 <th>#</th> 330 <th>#</th>
331 <th>Fee Type</th> 331 <th>Fee Type</th>
332 <th>Amount</th> 332 <th>Amount</th>
333 <th>Discount(%)</th> 333 <th>Discount(%)</th>
334 <th>Subtotal</th> 334 <th>Subtotal</th>
335 <th>Paid Amount</th> 335 <th>Paid Amount</th>
336 <th>Action</th> 336 <th>Action</th>
337 </tr> 337 </tr>
338 <tr 338 <tr
339 v-show="showFeeType" 339 v-show="showFeeType"
340 v-for="(feeType, index) in feeTypeData" 340 v-for="(feeType, index) in feeTypeData"
341 :key="index" 341 :key="index"
342 v-on:keyup="getAmmountDetails(feeType)" 342 v-on:keyup="getAmmountDetails(feeType)"
343 > 343 >
344 <td style="width:40px">{{ index + 1 }}</td> 344 <td style="width:40px">{{ index + 1 }}</td>
345 <td style="width:120px">{{ feeType.feeTypeName }}</td> 345 <td style="width:120px">{{ feeType.feeTypeName }}</td>
346 <td> 346 <td>
347 <v-text-field 347 <v-text-field
348 placeholder="fill your Amount" 348 placeholder="fill your Amount"
349 v-model="feeType.amount" 349 v-model="feeType.amount"
350 type="number" 350 type="number"
351 ></v-text-field> 351 ></v-text-field>
352 </td> 352 </td>
353 <td> 353 <td>
354 <v-text-field 354 <v-text-field
355 placeholder="fill your Discount" 355 placeholder="fill your Discount"
356 v-model="feeType.discount" 356 v-model="feeType.discount"
357 type="number" 357 type="number"
358 ></v-text-field> 358 ></v-text-field>
359 </td> 359 </td>
360 <td>{{ feeType.subTotal }}</td> 360 <td>{{ feeType.subTotal }}</td>
361 <td v-if="invoiceData.paymentStatus === 'NOT_PAID'"> 361 <td v-if="invoiceData.paymentStatus === 'NOT_PAID'">
362 <v-text-field 362 <v-text-field
363 placeholder="fill your Paid Amount" 363 placeholder="fill your Paid Amount"
364 v-model="feeType.paidAmount" 364 v-model="feeType.paidAmount"
365 type="number" 365 type="number"
366 :disabled="disabled" 366 :disabled="disabled"
367 ></v-text-field> 367 ></v-text-field>
368 </td> 368 </td>
369 <td v-if="invoiceData.paymentStatus == ''"> 369 <td v-if="invoiceData.paymentStatus == ''">
370 <v-text-field 370 <v-text-field
371 placeholder="fill your Paid Amount" 371 placeholder="fill your Paid Amount"
372 v-model="feeType.paidAmount" 372 v-model="feeType.paidAmount"
373 type="number" 373 type="number"
374 :disabled="disabled" 374 :disabled="disabled"
375 ></v-text-field> 375 ></v-text-field>
376 </td> 376 </td>
377 <td 377 <td
378 v-if="invoiceData.paymentStatus != 'NOT_PAID' && invoiceData.paymentStatus != ''" 378 v-if="invoiceData.paymentStatus != 'NOT_PAID' && invoiceData.paymentStatus != ''"
379 > 379 >
380 <v-text-field 380 <v-text-field
381 placeholder="fill your Paid Amount" 381 placeholder="fill your Paid Amount"
382 v-model="feeType.paidAmount" 382 v-model="feeType.paidAmount"
383 type="number" 383 type="number"
384 ></v-text-field> 384 ></v-text-field>
385 </td> 385 </td>
386 <td> 386 <td>
387 <v-icon color="error" @click="deleteSelectFee(index)">delete</v-icon> 387 <v-icon color="error" @click="deleteSelectFee(index)">delete</v-icon>
388 </td> 388 </td>
389 </tr> 389 </tr>
390 <tfoot> 390 <tfoot>
391 <tr> 391 <tr>
392 <td colspan="2">Total:</td> 392 <td colspan="2">Total:</td>
393 <td>{{ feeType.amount }}</td> 393 <td>{{ feeType.amount }}</td>
394 <td>{{ feeType.discount }}</td> 394 <td>{{ feeType.discount }}</td>
395 <td>{{ feeType.subTotal }}</td> 395 <td>{{ feeType.subTotal }}</td>
396 <td>{{ feeType.paidAmount }}</td> 396 <td>{{ feeType.paidAmount }}</td>
397 </tr> 397 </tr>
398 </tfoot> 398 </tfoot>
399 </table> 399 </table>
400 </v-card> 400 </v-card>
401 </v-flex> 401 </v-flex>
402 </v-layout> 402 </v-layout>
403 </v-container> 403 </v-container>
404 </v-flex> 404 </v-flex>
405 </v-container> 405 </v-container>
406 </v-tab-item> 406 </v-tab-item>
407 </v-tabs> 407 </v-tabs>
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-app> 411 </v-app>
412 </template> 412 </template>
413 413
414 <script> 414 <script>
415 import http from "@/Services/http.js"; 415 import http from "@/Services/http.js";
416 import Util from "@/util"; 416 import Util from "@/util";
417 import moment from "moment"; 417 import moment from "moment";
418 418
419 export default { 419 export default {
420 data: () => ({ 420 data: () => ({
421 snackbar: false, 421 snackbar: false,
422 showPayMethods: false, 422 showPayMethods: false,
423 y: "top", 423 y: "top",
424 x: "right", 424 x: "right",
425 mode: "", 425 mode: "",
426 timeout: 3000, 426 timeout: 3000,
427 text: "", 427 text: "",
428 showLoader: false, 428 showLoader: false,
429 loading: false, 429 loading: false,
430 date: null, 430 date: null,
431 search: "", 431 search: "",
432 dialog: false, 432 dialog: false,
433 dialog1: false, 433 dialog1: false,
434 valid: true, 434 valid: true,
435 validEdit: true, 435 validEdit: true,
436 isActive: true, 436 isActive: true,
437 newActive: false, 437 newActive: false,
438 showFeeType: false, 438 showFeeType: false,
439 disabled: true, 439 disabled: true,
440 details: [], 440 details: [],
441 feeTypes: [], 441 feeTypes: [],
442 menu1: false, 442 menu1: false,
443 paymentMethods: ["Cash", "Cheque"], 443 paymentMethods: ["Cash", "Cheque"],
444 feeType: { 444 feeType: {
445 amount: "0.00", 445 amount: "0.00",
446 discount: "0.00", 446 discount: "0.00",
447 paidAmount: 0.0, 447 paidAmount: 0.0,
448 subTotal: "0.00", 448 subTotal: "0.00",
449 feeTypeName: "" 449 feeTypeName: ""
450 }, 450 },
451 feeTypeData: [], 451 feeTypeData: [],
452 pagination: { 452 pagination: {
453 rowsPerPage: 15 453 rowsPerPage: 15
454 }, 454 },
455 classRules: [v => !!v || " Class Name is required"], 455 classRules: [v => !!v || " Class Name is required"],
456 inchargeRules: [v => !!v || "Student Name is required"], 456 inchargeRules: [v => !!v || "Student Name is required"],
457 dateRules: [v => !!v || " Date is required"], 457 dateRules: [v => !!v || " Date is required"],
458 paymentStatusRules: [v => !!v || "Payment Status is required"], 458 paymentStatusRules: [v => !!v || "Payment Status is required"],
459 paymentMethodsRules: [v => !!v || "payment Method is required"], 459 paymentMethodsRules: [v => !!v || "payment Method is required"],
460 headers: [ 460 headers: [
461 { 461 {
462 text: "No", 462 text: "No",
463 align: "center", 463 align: "center",
464 sortable: false, 464 sortable: false,
465 value: "No" 465 value: "No"
466 }, 466 },
467 { 467 {
468 text: "Student", 468 text: "Student",
469 value: "student", 469 value: "student",
470 sortable: false, 470 sortable: false,
471 align: "center" 471 align: "center"
472 }, 472 },
473 { text: "Class", value: "class", sortable: false, align: "center" }, 473 { text: "Class", value: "class", sortable: false, align: "center" },
474 { text: "Total", value: "subtotal", sortable: false, align: "center" }, 474 { text: "Total", value: "subtotal", sortable: false, align: "center" },
475 { text: "Discount", value: "discount", sortable: false, align: "center" }, 475 { text: "Discount", value: "discount", sortable: false, align: "center" },
476 { 476 {
477 text: "Paid Amount", 477 text: "Paid Amount",
478 value: "paidAmount", 478 value: "paidAmount",
479 sortable: false, 479 sortable: false,
480 align: "center" 480 align: "center"
481 }, 481 },
482 { 482 {
483 text: "Balance", 483 text: "Balance",
484 value: "Balance", 484 value: "Balance",
485 sortable: false, 485 sortable: false,
486 align: "center" 486 align: "center"
487 }, 487 },
488 { 488 {
489 text: "Status", 489 text: "Status",
490 value: "paymentStatus", 490 value: "paymentStatus",
491 sortable: false, 491 sortable: false,
492 align: "center" 492 align: "center"
493 }, 493 },
494 { 494 {
495 text: "Date", 495 text: "Date",
496 value: "date", 496 value: "date",
497 sortable: false, 497 sortable: false,
498 align: "center" 498 align: "center"
499 }, 499 },
500 { text: "Action", value: "", sortable: false, align: "center" } 500 { text: "Action", value: "", sortable: false, align: "center" }
501 ], 501 ],
502 invoiceList: [], 502 invoiceList: [],
503 token: "", 503 token: "",
504 editedItem: {}, 504 editedItem: {},
505 invoiceData: { 505 invoiceData: {
506 paymentStatus: "" 506 paymentStatus: ""
507 }, 507 },
508 addclass: [], 508 addclass: [],
509 studentList: [], 509 studentList: [],
510 paymentStatus: [ 510 paymentStatus: [
511 { 511 {
512 name: "Not Paid", 512 name: "Not Paid",
513 value: "NOT_PAID" 513 value: "NOT_PAID"
514 }, 514 },
515 { 515 {
516 name: "Partially Paid", 516 name: "Partially Paid",
517 value: "PARTIALLY_PAID" 517 value: "PARTIALLY_PAID"
518 }, 518 },
519 { 519 {
520 name: "Fully Paid", 520 name: "Fully Paid",
521 value: "FULLY_PAID" 521 value: "FULLY_PAID"
522 } 522 }
523 ] 523 ]
524 }), 524 }),
525 methods: { 525 methods: {
526 save(date) { 526 save(date) {
527 this.$refs.menu1.save(date); 527 this.$refs.menu1.save(date);
528 }, 528 },
529 dates: function(date) { 529 dates: function(date) {
530 return moment(date).format("MMMM DD, YYYY"); 530 return moment(date).format("MMMM DD, YYYY");
531 }, 531 },
532 // profile(item) { 532 // profile(item) {
533 // this.editedIndex = this.InvoiceList.indexOf(item); 533 // this.editedIndex = this.InvoiceList.indexOf(item);
534 // this.editedItem = Object.assign({}, item); 534 // this.editedItem = Object.assign({}, item);
535 // this.dialog1 = true; 535 // this.dialog1 = true;
536 // }, 536 // },
537 deleteItem(item) { 537 deleteItem(item) {
538 let deleteInvoice = { 538 let deleteInvoice = {
539 invoiceId: item._id 539 invoiceId: item._id
540 }; 540 };
541 http() 541 http()
542 .delete( 542 .delete(
543 "/deleteInvoice", 543 "/deleteInvoice",
544 confirm("Are you sure you want to delete this?") && { 544 confirm("Are you sure you want to delete this?") && {
545 params: deleteInvoice 545 params: deleteInvoice
546 } 546 }
547 ) 547 )
548 .then(response => { 548 .then(response => {
549 if ((this.snackbar = true)) { 549 if ((this.snackbar = true)) {
550 this.text = "Successfully delete Existing Invoice"; 550 this.text = "Successfully delete Existing Invoice";
551 } 551 }
552 this.getInvoiceList(); 552 this.getInvoiceList();
553 }) 553 })
554 .catch(error => { 554 .catch(error => {
555 // console.log(error); 555 // console.log(error);
556 }); 556 });
557 }, 557 },
558 activeTab(type) { 558 activeTab(type) {
559 switch (type) { 559 switch (type) {
560 case "existing": 560 case "existing":
561 this.newActive = false; 561 this.newActive = false;
562 this.isActive = true; 562 this.isActive = true;
563 break; 563 break;
564 564
565 default: 565 default:
566 this.newActive = true; 566 this.newActive = true;
567 this.isActive = false; 567 this.isActive = false;
568 break; 568 break;
569 } 569 }
570 }, 570 },
571 close() { 571 close() {
572 this.dialog = false; 572 this.dialog = false;
573 setTimeout(() => { 573 setTimeout(() => {
574 this.editedItem = Object.assign({}, this.defaultItem); 574 this.editedItem = Object.assign({}, this.defaultItem);
575 this.editedIndex = -1; 575 this.editedIndex = -1;
576 }, 300); 576 }, 300);
577 }, 577 },
578 close1() { 578 close1() {
579 this.dialog1 = false; 579 this.dialog1 = false;
580 }, 580 },
581 submit() { 581 submit() {
582 let feeTypeId = ""; 582 let feeTypeId = "";
583 for (let i = 0; i < this.feeTypes.length; i++) { 583 for (let i = 0; i < this.feeTypes.length; i++) {
584 if (this.feeTypes[i].feeType === this.feeType.feeTypeName) { 584 if (this.feeTypes[i].feeType === this.feeType.feeTypeName) {
585 feeTypeId = this.feeTypes[i]._id; 585 feeTypeId = this.feeTypes[i]._id;
586 } 586 }
587 } 587 }
588 if (this.$refs.form.validate()) { 588 if (this.$refs.form.validate()) {
589 let invoiceData = { 589 let invoiceData = {
590 classId: this.invoiceData.classNum, 590 classId: this.invoiceData.classNum,
591 studentId: this.invoiceData.sectionId, 591 studentId: this.invoiceData.sectionId,
592 date: this.invoiceData.date, 592 date: this.invoiceData.date,
593 paymentStatus: this.invoiceData.paymentStatus, 593 paymentStatus: this.invoiceData.paymentStatus,
594 paymentMethod: this.invoiceData.paymentMethod, 594 paymentMethod: this.invoiceData.paymentMethod,
595 feeType: this.feeTypeData, 595 feeType: this.feeTypeData,
596 totalAmount: this.feeType.amount, 596 totalAmount: this.feeType.amount,
597 totalDiscount: this.feeType.discount, 597 totalDiscount: this.feeType.discount,
598 totalSubTotal: this.feeType.subTotal, 598 totalSubTotal: this.feeType.subTotal,
599 totalPaidAmount: this.feeType.paidAmount 599 totalPaidAmount: this.feeType.paidAmount
600 }; 600 };
601 if (invoiceData.paymentStatus == "NOT_PAID") { 601 if (invoiceData.paymentStatus == "NOT_PAID") {
602 delete invoiceData.totalPaidAmount; 602 delete invoiceData.totalPaidAmount;
603 } 603 }
604 http() 604 http()
605 .post("/createInvoice", invoiceData) 605 .post("/createInvoice", invoiceData)
606 .then(response => { 606 .then(response => {
607 this.getInvoiceList(); 607 this.getInvoiceList();
608 this.snackbar = true; 608 this.snackbar = true;
609 this.text = "New Invoice added successfully"; 609 this.text = "New Invoice added successfully";
610 this.clear(); 610 this.clear();
611 this.feeTypeData = []; 611 this.feeTypeData = [];
612 if (this.feeTypeData.length == 0) { 612 if (this.feeTypeData.length == 0) {
613 this.feeType = { 613 this.feeType = {
614 amount: "0.00", 614 amount: "0.00",
615 discount: "0.00", 615 discount: "0.00",
616 paidAmount: "0.00", 616 paidAmount: "0.00",
617 subTotal: "0.00", 617 subTotal: "0.00",
618 feeTypeList: "" 618 feeTypeList: ""
619 }; 619 };
620 } 620 }
621 this.loading = false; 621 this.loading = false;
622 }) 622 })
623 .catch(error => { 623 .catch(error => {
624 // console.log(error); 624 // console.log(error);
625 if ((this.snackbar = true)) { 625 this.snackbar = true;
626 this.text = error.response.data.message; 626 this.text = error.response.data.message;
627 }
628 this.loading = false; 627 this.loading = false;
629 }); 628 });
630 } 629 }
631 }, 630 },
632 clear() { 631 clear() {
633 this.$refs.form.reset(); 632 this.$refs.form.reset();
634 }, 633 },
635 getInvoiceList() { 634 getInvoiceList() {
636 this.showLoader = true; 635 this.showLoader = true;
637 http() 636 http()
638 .get("/getInvoicesList", { 637 .get("/getInvoicesList", {
638 params: { schoolId: this.$store.state.schoolId },
639 headers: { Authorization: "Bearer " + this.token } 639 headers: { Authorization: "Bearer " + this.token }
640 }) 640 })
641 .then(response => { 641 .then(response => {
642 this.invoiceList = response.data.data; 642 this.invoiceList = response.data.data;
643 this.showLoader = false; 643 this.showLoader = false;
644 }) 644 })
645 .catch(error => { 645 .catch(error => {
646 // console.log("err====>", err); 646 // console.log("err====>", err);
647 this.showLoader = false; 647 this.showLoader = false;
648 if (error.response.status === 401) { 648 if (error.response.status === 401) {
649 this.$router.replace({ path: "/" }); 649 this.$router.replace({ path: "/" });
650 this.$store.dispatch("setToken", null); 650 this.$store.dispatch("setToken", null);
651 this.$store.dispatch("Id", null); 651 this.$store.dispatch("Id", null);
652 } 652 }
653 }); 653 });
654 }, 654 },
655 selectFeeType() { 655 selectFeeType() {
656 this.showFeeType = true; 656 this.showFeeType = true;
657 this.feeTypeData.push({ feeTypeName: this.feeType.feeTypeName }); 657 this.feeTypeData.push({ feeTypeName: this.feeType.feeTypeName });
658 // console.log("this.feeType.feeTypeListC", this.feeTypeData.feeTypeName);
659 }, 658 },
660 deleteSelectFee: function(index) { 659 deleteSelectFee: function(index) {
661 this.feeTypeData.splice(index, 1); 660 this.feeTypeData.splice(index, 1);
662 // console.log("this.feeTypeData", this.feeTypeData);
663 // if (index === 1)
664 for (let i = 0; i < this.feeTypeData.length; i++) { 661 for (let i = 0; i < this.feeTypeData.length; i++) {
665 this.feeType = this.feeTypeData[i]; 662 this.feeType = this.feeTypeData[i];
666 } 663 }
667 if (this.feeTypeData.length == 0) { 664 if (this.feeTypeData.length == 0) {
668 this.feeType = { 665 this.feeType = {
669 amount: "0.00", 666 amount: "0.00",
670 discount: "0.00", 667 discount: "0.00",
671 paidAmount: "0.00", 668 paidAmount: "0.00",
672 subTotal: "0.00", 669 subTotal: "0.00",
673 feeTypeName: "" 670 feeTypeName: ""
674 }; 671 };
675 } 672 }
676 }, 673 },
677 getAllClasses() { 674 getAllClasses() {
678 http() 675 http()
679 .get("/getClassesList", { 676 .get("/getClassesList", {
677 params: { schoolId: this.$store.state.schoolId },
680 headers: { Authorization: "Bearer " + this.token } 678 headers: { Authorization: "Bearer " + this.token }
681 }) 679 })
682 .then(response => { 680 .then(response => {
683 this.addclass = response.data.data; 681 this.addclass = response.data.data;
684 }) 682 })
685 .catch(err => { 683 .catch(err => {
686 // console.log("err====>", err); 684 // console.log("err====>", err);
687 // this.$router.replace({ path: "/" }); 685 // this.$router.replace({ path: "/" });
688 }); 686 });
689 }, 687 },
690 getAllStudents() { 688 getAllStudents() {
691 http() 689 http()
692 .get("/getStudentsList", { 690 .get("/getStudentsList", {
693 params: { classId: this.invoiceData.classNum }, 691 params: {
692 classId: this.invoiceData.classNum,
693 schoolId: this.$store.state.schoolId
694 },
694 headers: { Authorization: "Bearer " + this.token } 695 headers: { Authorization: "Bearer " + this.token }
695 }) 696 })
696 .then(response => { 697 .then(response => {
697 this.studentList = response.data.data; 698 this.studentList = response.data.data;
698 }) 699 })
699 .catch(err => { 700 .catch(err => {
700 // console.log("err====>", err); 701 // console.log("err====>", err);
701 // this.$router.replace({ path: "/" }); 702 // this.$router.replace({ path: "/" });
702 }); 703 });
703 }, 704 },
704 getfeeType() { 705 getfeeType() {
705 http() 706 http()
706 .get("/getFeesList", { 707 .get("/getFeesList", {
708 params: {
709 schoolId: this.$store.state.schoolId
710 },
707 headers: { Authorization: "Bearer " + this.token } 711 headers: { Authorization: "Bearer " + this.token }
708 }) 712 })
709 .then(response => { 713 .then(response => {
710 this.feeTypes = response.data.data; 714 this.feeTypes = response.data.data;
711 }) 715 })
712 .catch(err => { 716 .catch(err => {
713 // console.log("err====>", err); 717 // console.log("err====>", err);
714 // this.$router.replace({ path: "/" }); 718 // this.$router.replace({ path: "/" });
715 }); 719 });
716 }, 720 },
717 getAmmountDetails(feeTyp) { 721 getAmmountDetails(feeTyp) {
718 let feeType = { 722 let feeType = {
719 amount: "", 723 amount: "",
720 discount: "", 724 discount: "",
721 subTotal: "", 725 subTotal: "",
722 subParticularTotal: "", 726 subParticularTotal: "",
723 paidAmount: "" 727 paidAmount: ""
724 }; 728 };
725 for (let i = 0; i < this.feeTypeData.length; i++) { 729 for (let i = 0; i < this.feeTypeData.length; i++) {
726 // *********** AMOUNT *********** 730 // *********** AMOUNT ***********
727 731
728 feeType.amount = 732 feeType.amount =
729 Number(feeType.amount) + Number(this.feeTypeData[i].amount); 733 Number(feeType.amount) + Number(this.feeTypeData[i].amount);
730 // console.log("feeType.amount ", feeType.amount); 734 // console.log("feeType.amount ", feeType.amount);
731 this.feeType.amount = feeType.amount; 735 this.feeType.amount = feeType.amount;
732 this.feeType.subTotal = feeType.amount; 736 this.feeType.subTotal = feeType.amount;
733 this.feeTypeData[i].subTotal = this.feeTypeData[i].amount; 737 this.feeTypeData[i].subTotal = this.feeTypeData[i].amount;
734 738
735 // *********** DISCOUNT *********** 739 // *********** DISCOUNT ***********
736 740
737 if (this.feeTypeData[i].discount) { 741 if (this.feeTypeData[i].discount) {
738 feeType.discount = 742 feeType.discount =
739 Number(feeType.discount) + Number(this.feeTypeData[i].discount); 743 Number(feeType.discount) + Number(this.feeTypeData[i].discount);
740 // console.log("feeType.discount", feeType.discount); 744 // console.log("feeType.discount", feeType.discount);
741 this.feeType.discount = feeType.discount; 745 this.feeType.discount = feeType.discount;
742 feeType.subParticularTotal = 746 feeType.subParticularTotal =
743 this.feeTypeData[i].amount - 747 this.feeTypeData[i].amount -
744 (this.feeTypeData[i].amount * this.feeTypeData[i].discount) / 100; 748 (this.feeTypeData[i].amount * this.feeTypeData[i].discount) / 100;
745 // console.log("feeType.subTotal", feeType.subTotal); 749 // console.log("feeType.subTotal", feeType.subTotal);
746 this.feeTypeData[i].subTotal = feeType.subParticularTotal.toFixed(2); 750 this.feeTypeData[i].subTotal = feeType.subParticularTotal.toFixed(2);
747 } 751 }
748 752
749 // *********** SUBTOTAL *********** 753 // *********** SUBTOTAL ***********
750 754
751 feeType.subTotal = 755 feeType.subTotal =
752 Number(feeType.subTotal) + Number(this.feeTypeData[i].subTotal); 756 Number(feeType.subTotal) + Number(this.feeTypeData[i].subTotal);
753 this.feeType.subTotal = feeType.subTotal.toFixed(2); 757 this.feeType.subTotal = feeType.subTotal.toFixed(2);
754 758
755 // *********** PAID-AMOUNT *********** 759 // *********** PAID-AMOUNT ***********
756 760
757 feeType.paidAmount = 761 feeType.paidAmount =
758 Number(feeType.paidAmount) + Number(this.feeTypeData[i].paidAmount); 762 Number(feeType.paidAmount) + Number(this.feeTypeData[i].paidAmount);
759 this.feeType.paidAmount = feeType.paidAmount.toFixed(2); 763 this.feeType.paidAmount = feeType.paidAmount.toFixed(2);
760 } 764 }
761 }, 765 },
762 getPayMethodList() { 766 getPayMethodList() {
763 if (this.invoiceData.paymentStatus == "PARTIALLY_PAID") { 767 if (this.invoiceData.paymentStatus == "PARTIALLY_PAID") {
764 this.showPayMethods = true; 768 this.showPayMethods = true;
765 } else if (this.invoiceData.paymentStatus == "FULLY_PAID") { 769 } else if (this.invoiceData.paymentStatus == "FULLY_PAID") {
766 this.showPayMethods = true; 770 this.showPayMethods = true;
767 } else { 771 } else {
768 this.showPayMethods = false; 772 this.showPayMethods = false;
769 } 773 }
770 } 774 }
771 }, 775 },
772 mounted() { 776 mounted() {
773 this.token = this.$store.state.token; 777 this.token = this.$store.state.token;
774 this.getInvoiceList(); 778 this.getInvoiceList();
775 this.getAllClasses(); 779 this.getAllClasses();
776 this.getfeeType(); 780 this.getfeeType();
777 }, 781 },
778 created() { 782 created() {
779 this.$root.$on("app:search", search => { 783 this.$root.$on("app:search", search => {
780 this.search = search; 784 this.search = search;
781 }); 785 });
782 }, 786 },
783 beforeDestroy() { 787 beforeDestroy() {
784 // dont forget to remove the listener 788 // dont forget to remove the listener
785 this.$root.$off("app:search"); 789 this.$root.$off("app:search");
786 } 790 }
787 }; 791 };
788 </script> 792 </script>
789 793
790 794
791 <style scoped> 795 <style scoped>
792 .active { 796 .active {
793 background-color: gray; 797 background-color: gray;
794 color: white !important; 798 color: white !important;
795 } 799 }
796 .activebtn { 800 .activebtn {
797 color: black !important; 801 color: black !important;
798 } 802 }
799 table { 803 table {
800 border-collapse: collapse; 804 border-collapse: collapse;
801 border: 1px solid #e2e7eb; 805 border: 1px solid #e2e7eb;
802 } 806 }
803 807
804 th, 808 th,
805 td { 809 td {
806 border: 1px solid #e2e7eb; 810 border: 1px solid #e2e7eb;
807 padding: 10px; 811 padding: 10px;
808 text-align: center; 812 text-align: center;
809 } 813 }
810 table.feeTypeTable { 814 table.feeTypeTable {
src/pages/Account/paymentHistory.vue
Diff comments   View file @99cd791
1 <template> 1 <template>
2 <v-app id="pages-dasboard"> 2 <v-app id="pages-dasboard">
3 <!-- ****** EXISTING-USER TABLE DATA****** --> 3 <!-- ****** EXISTING-USER TABLE DATA****** -->
4 <v-card flat> 4 <v-card flat>
5 <v-card-actions> 5 <v-card-actions>
6 <v-layout> 6 <v-layout>
7 <h4 class="right mt-2 ml-2">Payment History</h4> 7 <h4 class="right mt-2 ml-2">Payment History</h4>
8 </v-layout> 8 </v-layout>
9 <v-spacer></v-spacer> 9 <v-spacer></v-spacer>
10 </v-card-actions> 10 </v-card-actions>
11 </v-card> 11 </v-card>
12 <v-data-table 12 <v-data-table
13 :headers="headers" 13 :headers="headers"
14 :items="paymentHistory" 14 :items="paymentHistory"
15 :pagination.sync="pagination" 15 :pagination.sync="pagination"
16 :search="search" 16 :search="search"
17 > 17 >
18 <template slot="items" slot-scope="props"> 18 <template slot="items" slot-scope="props">
19 <td id="td" class="text-xs-center">{{ props.index + 1 }}</td> 19 <td id="td" class="text-xs-center">{{ props.index + 1 }}</td>
20 <td id="td" class="text-xs-center">{{ props.item.studentId.name }}</td> 20 <td id="td" class="text-xs-center">{{ props.item.studentId.name }}</td>
21 <td id="td" class="text-xs-center">{{ props.item.classId.classNum }}</td> 21 <td id="td" class="text-xs-center">{{ props.item.classId.classNum }}</td>
22 <td id="td" class="text-xs-center">{{ props.item.feeType[0].feeTypeName }}</td> 22 <td id="td" class="text-xs-center">{{ props.item.feeType[0].feeTypeName }}</td>
23 <td id="td" class="text-xs-center">{{ props.item.paymentMethod }}</td> 23 <td id="td" class="text-xs-center">{{ props.item.paymentMethod }}</td>
24 <!-- <td id="td" class="text-xs-center">{{ props.item.feeType[0].discount }}</td> --> 24 <!-- <td id="td" class="text-xs-center">{{ props.item.feeType[0].discount }}</td> -->
25 <td id="td" class="text-xs-center">{{ props.item.totalPaidAmount }}</td> 25 <td id="td" class="text-xs-center">{{ props.item.totalPaidAmount }}</td>
26 <td id="td" class="text-xs-center">{{ dates(props.item.date) }}</td> 26 <td id="td" class="text-xs-center">{{ dates(props.item.date) }}</td>
27 <!-- <td class="text-xs-center"> 27 <!-- <td class="text-xs-center">
28 <span> 28 <span>
29 <v-tooltip top> 29 <v-tooltip top>
30 <img 30 <img
31 slot="activator" 31 slot="activator"
32 style="cursor:pointer; width:20px; height:18px; " 32 style="cursor:pointer; width:20px; height:18px; "
33 class="mr-5" 33 class="mr-5"
34 @click="editItem(props.item)" 34 @click="editItem(props.item)"
35 src="/static/icon/edit1.png" 35 src="/static/icon/edit1.png"
36 /> 36 />
37 <span>Edit</span> 37 <span>Edit</span>
38 </v-tooltip> 38 </v-tooltip>
39 <v-tooltip top> 39 <v-tooltip top>
40 <img 40 <img
41 slot="activator" 41 slot="activator"
42 style="cursor:pointer;width:20px; height:20px; " 42 style="cursor:pointer;width:20px; height:20px; "
43 class="mr-5" 43 class="mr-5"
44 @click="deleteItem(props.item)" 44 @click="deleteItem(props.item)"
45 src="/static/icon/delete1.png" 45 src="/static/icon/delete1.png"
46 /> 46 />
47 <span>Delete</span> 47 <span>Delete</span>
48 </v-tooltip> 48 </v-tooltip>
49 </span> 49 </span>
50 </td> --> 50 </td>-->
51 </template> 51 </template>
52 <v-alert 52 <v-alert
53 slot="no-results" 53 slot="no-results"
54 :value="true" 54 :value="true"
55 color="error" 55 color="error"
56 icon="warning" 56 icon="warning"
57 >Your search for "{{ search }}" found no results.</v-alert> 57 >Your search for "{{ search }}" found no results.</v-alert>
58 </v-data-table> 58 </v-data-table>
59 <div class="loader" v-if="showLoader"> 59 <div class="loader" v-if="showLoader">
60 <v-progress-circular indeterminate color="white"></v-progress-circular> 60 <v-progress-circular indeterminate color="white"></v-progress-circular>
61 </div> 61 </div>
62 </v-app> 62 </v-app>
63 </template> 63 </template>
64 64
65 <script> 65 <script>
66 import http from "@/Services/http.js"; 66 import http from "@/Services/http.js";
67 import moment from "moment"; 67 import moment from "moment";
68 68
69 export default { 69 export default {
70 data: () => ({ 70 data: () => ({
71 showLoader: false, 71 showLoader: false,
72 search: "", 72 search: "",
73 pagination: { 73 pagination: {
74 rowsPerPage: 15 74 rowsPerPage: 15
75 }, 75 },
76 headers: [ 76 headers: [
77 { 77 {
78 text: "No", 78 text: "No",
79 align: "center", 79 align: "center",
80 sortable: false, 80 sortable: false,
81 value: "No" 81 value: "No"
82 }, 82 },
83 { 83 {
84 text: "Student", 84 text: "Student",
85 value: "student", 85 value: "student",
86 sortable: false, 86 sortable: false,
87 align: "center" 87 align: "center"
88 }, 88 },
89 { text: "Class", value: "class", sortable: false, align: "center" }, 89 { text: "Class", value: "class", sortable: false, align: "center" },
90 { 90 {
91 text: "Fee Type", 91 text: "Fee Type",
92 value: "feeTypeName", 92 value: "feeTypeName",
93 sortable: false, 93 sortable: false,
94 align: "center" 94 align: "center"
95 }, 95 },
96 { 96 {
97 text: "Method", 97 text: "Method",
98 value: "paymentMethod", 98 value: "paymentMethod",
99 sortable: false, 99 sortable: false,
100 align: "center" 100 align: "center"
101 }, 101 },
102 { 102 {
103 text: "Paid Amount", 103 text: "Paid Amount",
104 value: "totalPaidAmount", 104 value: "totalPaidAmount",
105 sortable: false, 105 sortable: false,
106 align: "center" 106 align: "center"
107 }, 107 },
108 { 108 {
109 text: "Date", 109 text: "Date",
110 value: "date", 110 value: "date",
111 sortable: false, 111 sortable: false,
112 align: "center" 112 align: "center"
113 }, 113 }
114 // { text: "Action", value: "", sortable: false, align: "center" } 114 // { text: "Action", value: "", sortable: false, align: "center" }
115 ], 115 ],
116 paymentHistory: [] 116 paymentHistory: []
117 }), 117 }),
118 methods: { 118 methods: {
119 dates: function(date) { 119 dates: function(date) {
120 return moment(date).format("MMMM DD, YYYY"); 120 return moment(date).format("MMMM DD, YYYY");
121 }, 121 },
122 getPaymentHistory() { 122 getPaymentHistory() {
123 this.showLoader = true; 123 this.showLoader = true;
124 var token = this.$store.state.token; 124 var token = this.$store.state.token;
125 http() 125 http()
126 .get("/getInvoicesList", { 126 .get("/getInvoicesList", {
127 params: { paymentStatus: "FULLY_PAID" }, 127 params: {
128 paymentStatus: "FULLY_PAID",
129 schoolId: this.$store.state.schoolId
130 },
128 headers: { Authorization: "Bearer " + token } 131 headers: { Authorization: "Bearer " + token }
129 }) 132 })
130 .then(response => { 133 .then(response => {
131 this.paymentHistory = response.data.data; 134 this.paymentHistory = response.data.data;
132 this.showLoader = false; 135 this.showLoader = false;
133 }) 136 })
134 .catch(error => { 137 .catch(error => {
135 this.showLoader = false; 138 this.showLoader = false;
136 if (error.response.status === 401) { 139 if (error.response.status === 401) {
137 this.$router.replace({ path: "/" }); 140 this.$router.replace({ path: "/" });
138 this.$store.dispatch("setToken", null); 141 this.$store.dispatch("setToken", null);
139 this.$store.dispatch("Id", null); 142 this.$store.dispatch("Id", null);
140 this.$store.dispatch("Role", null); 143 this.$store.dispatch("Role", null);
141 } 144 }
142 }); 145 });
143 } 146 }
144 // getRole() { 147 // getRole() {
145 // this.showLoader = true; 148 // this.showLoader = true;
146 // var token = this.$store.state.token; 149 // var token = this.$store.state.token;
147 // http() 150 // http()
148 // .get("/getRolesList", { 151 // .get("/getRolesList", {
149 // headers: { Authorization: "Bearer " + token } 152 // headers: { Authorization: "Bearer " + token }
150 // }) 153 // })
151 // .then(response => { 154 // .then(response => {
152 // this.userRole = response.data.data; 155 // this.userRole = response.data.data;
153 // this.showLoader = false; 156 // this.showLoader = false;
154 // // console.log("UserList=====>",this.desserts) 157 // // console.log("UserList=====>",this.desserts)
155 // }) 158 // })
156 // .catch(error => { 159 // .catch(error => {
157 // this.showLoader = false; 160 // this.showLoader = false;
158 // if (error.response.status === 401) { 161 // if (error.response.status === 401) {
159 // this.$router.replace({ path: "/" }); 162 // this.$router.replace({ path: "/" });
160 // this.$store.dispatch("setToken", null); 163 // this.$store.dispatch("setToken", null);
161 // this.$store.dispatch("Id", null); 164 // this.$store.dispatch("Id", null);
162 // } 165 // }
163 // }); 166 // });
164 // } 167 // }
165 }, 168 },
166 mounted() { 169 mounted() {
167 this.getPaymentHistory(); 170 this.getPaymentHistory();
168 // this.getRole(); 171 // this.getRole();
169 }, 172 },
170 created() { 173 created() {
171 this.$root.$on("app:search", search => { 174 this.$root.$on("app:search", search => {
172 this.search = search; 175 this.search = search;
173 }); 176 });
174 }, 177 },
175 beforeDestroy() { 178 beforeDestroy() {
176 // dont forget to remove the listener 179 // dont forget to remove the listener
177 this.$root.$off("app:search"); 180 this.$root.$off("app:search");
178 } 181 }
179 }; 182 };
180 </script> 183 </script>
181 <style scoped> 184 <style scoped>
182 .active { 185 .active {
183 background-color: gray; 186 background-color: gray;
184 color: white !important; 187 color: white !important;
185 } 188 }
186 .activebtn { 189 .activebtn {
187 color: black !important; 190 color: black !important;
188 } 191 }
189 </style> 192 </style>
src/pages/Account/viewInvoice.vue
Diff comments   View file @99cd791
1 <template> 1 <template>
2 <v-app id="pages-dasboard"> 2 <v-app id="pages-dasboard">
3 <!-- ****** Edit multiple INVOICE ****** --> 3 <!-- ****** Edit INVOICE ****** -->
4 <v-container fluid grid-list-md> 4 <v-container fluid grid-list-md>
5 <v-card> 5 <v-card>
6 <v-layout wrap> 6 <v-layout wrap>
7 <v-flex 12> 7 <v-flex 12>
8 <br /> 8 <br />
9 <v-layout wrap> 9 <v-layout wrap>
10 <v-flex xs12 sm6> 10 <v-flex xs12 sm6>
11 <v-layout> 11 <v-layout>
12 <v-flex xs4 sm2> 12 <v-flex xs4 sm2>
13 <h5 class="right my-1"> 13 <h5 class="right my-1">
14 <b>invoice:</b> 14 <b>invoice:</b>
15 </h5> 15 </h5>
16 </v-flex> 16 </v-flex>
17 <v-flex sm11 xs8> 17 <v-flex sm11 xs8>
18 <h5 class="my-1">#{{ invoiceParticularData.invoiceNumber }}</h5> 18 <h5 class="my-1">#{{ invoiceParticularData.invoiceNumber }}</h5>
19 </v-flex> 19 </v-flex>
20 </v-layout> 20 </v-layout>
21 <v-layout> 21 <v-layout>
22 <v-flex xs4 sm2> 22 <v-flex xs4 sm2>
23 <h5 class="right my-1"> 23 <h5 class="right my-1">
24 <b>Name:</b> 24 <b>Name:</b>
25 </h5> 25 </h5>
26 </v-flex> 26 </v-flex>
27 <v-flex sm11 xs8> 27 <v-flex sm11 xs8>
28 <h5 class="my-1">{{ invoiceParticularData.studentId.name }}</h5> 28 <h5 class="my-1">{{ invoiceParticularData.studentId.name }}</h5>
29 </v-flex> 29 </v-flex>
30 </v-layout> 30 </v-layout>
31 <v-layout> 31 <v-layout>
32 <v-flex xs4 sm2> 32 <v-flex xs4 sm2>
33 <h5 class="right my-1"> 33 <h5 class="right my-1">
34 <b>Class:</b> 34 <b>Class:</b>
35 </h5> 35 </h5>
36 </v-flex> 36 </v-flex>
37 <v-flex sm11 xs8> 37 <v-flex sm11 xs8>
38 <h5 class="my-1">{{ invoiceParticularData.classId.classNum }}</h5> 38 <h5 class="my-1">{{ invoiceParticularData.classId.classNum }}</h5>
39 </v-flex> 39 </v-flex>
40 </v-layout> 40 </v-layout>
41 </v-flex> 41 </v-flex>
42 <v-flex xs12 sm6> 42 <v-flex xs12 sm6>
43 <v-layout> 43 <v-layout>
44 <v-flex xs4 sm2> 44 <v-flex xs4 sm2>
45 <h5 class="right my-1"> 45 <h5 class="right my-1">
46 <b>Roll No:</b> 46 <b>Roll No:</b>
47 </h5> 47 </h5>
48 </v-flex> 48 </v-flex>
49 <v-flex sm6 xs8> 49 <v-flex sm6 xs8>
50 <h5 class="my-1">{{ invoiceParticularData.studentId.rollNo }}</h5> 50 <h5 class="my-1">{{ invoiceParticularData.studentId.rollNo }}</h5>
51 </v-flex> 51 </v-flex>
52 </v-layout> 52 </v-layout>
53 <v-layout> 53 <v-layout>
54 <v-flex xs4 sm2> 54 <v-flex xs4 sm2>
55 <h5 class="right my-1"> 55 <h5 class="right my-1">
56 <b>email:</b> 56 <b>email:</b>
57 </h5> 57 </h5>
58 </v-flex> 58 </v-flex>
59 <v-flex sm6 xs8> 59 <v-flex sm6 xs8>
60 <h5 class="my-1 linkCover">{{ invoiceParticularData.studentId.email }}</h5> 60 <h5 class="my-1 linkCover">{{ invoiceParticularData.studentId.email }}</h5>
61 </v-flex> 61 </v-flex>
62 </v-layout> 62 </v-layout>
63 <v-layout> 63 <v-layout>
64 <v-flex xs4 sm2> 64 <v-flex xs4 sm2>
65 <h5 class="right my-1"> 65 <h5 class="right my-1">
66 <b>Status :</b> 66 <b>Status :</b>
67 </h5> 67 </h5>
68 </v-flex> 68 </v-flex>
69 <v-flex sm6 xs8> 69 <v-flex sm6 xs8>
70 <h5 class="my-1">{{ invoiceParticularData.paymentStatus }}</h5> 70 <h5 class="my-1">{{ invoiceParticularData.paymentStatus }}</h5>
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-flex> 75 </v-flex>
76 </v-layout> 76 </v-layout>
77 </v-card> 77 </v-card>
78 <table class="feeTypeTable tableRsponsive"> 78 <table class="feeTypeTable tableRsponsive">
79 <tr class="info white--text"> 79 <tr class="info white--text">
80 <th>#</th> 80 <th>#</th>
81 <th>Fee Type</th> 81 <th>Fee Type</th>
82 <th>Amount</th> 82 <th>Amount</th>
83 <th>Discount</th> 83 <th>Discount</th>
84 <th>Subtotal</th> 84 <th>Subtotal</th>
85 </tr> 85 </tr>
86 <tr 86 <tr
87 v-for="(feeType, index) in feeTypeData" 87 v-for="(feeType, index) in feeTypeData"
88 :key="index" 88 :key="index"
89 v-on:keyup="getAmmountDetails(feeType)" 89 v-on:keyup="getAmmountDetails(feeType)"
90 > 90 >
91 <td style="width:40px">{{ index + 1 }}</td> 91 <td style="width:40px">{{ index + 1 }}</td>
92 <td style="width:120px">{{ feeType.feeTypeName }}</td> 92 <td style="width:120px">{{ feeType.feeTypeName }}</td>
93 <td style="width:120px">{{ feeType.amount }}</td> 93 <td style="width:120px">{{ feeType.amount }}</td>
94 <td style="width:120px">{{ feeType.amount-feeType.subTotal }}</td> 94 <td style="width:120px">{{ feeType.amount-feeType.subTotal }}</td>
95 <td style="width:120px">{{ feeType.subTotal }}</td> 95 <td style="width:120px">{{ feeType.subTotal }}</td>
96 </tr> 96 </tr>
97 <tfoot> 97 <tfoot>
98 <tr> 98 <tr>
99 <td colspan="4"> 99 <td colspan="4">
100 <span class="right subheding">Total Amount (RS) :</span> 100 <span class="right subheding">Total Amount (RS) :</span>
101 </td> 101 </td>
102 <td>{{ feeType.subTotal }}</td> 102 <td>{{ feeType.subTotal }}</td>
103 </tr> 103 </tr>
104 <tr> 104 <tr>
105 <td colspan="4"> 105 <td colspan="4">
106 <span class="right subheding">Paid (RS) :</span> 106 <span class="right subheding">Paid (RS) :</span>
107 </td> 107 </td>
108 <td>{{ feeType.totalPaidAmount ? feeType.totalPaidAmount : 0 }}</td> 108 <td>{{ feeType.totalPaidAmount ? feeType.totalPaidAmount : 0 }}</td>
109 </tr> 109 </tr>
110 <tr> 110 <tr>
111 <td colspan="4"> 111 <td colspan="4">
112 <span class="right subheding">Balance (RS) :</span> 112 <span class="right subheding">Balance (RS) :</span>
113 </td> 113 </td>
114 <td>{{ feeType.totalPaidAmount ? feeType.subTotal - feeType.totalPaidAmount : feeType.subTotal }}</td> 114 <td>{{ feeType.totalPaidAmount ? feeType.subTotal - feeType.totalPaidAmount : feeType.subTotal }}</td>
115 </tr> 115 </tr>
116 </tfoot> 116 </tfoot>
117 </table> 117 </table>
118 <!-- </v-card> --> 118 <!-- </v-card> -->
119 <!-- </v-flex> --> 119 <!-- </v-flex> -->
120 <!-- </v-layout> --> 120 <!-- </v-layout> -->
121 <!-- </v-container> --> 121 <!-- </v-container> -->
122 <!-- </v-flex> --> 122 <!-- </v-flex> -->
123 </v-container> 123 </v-container>
124 <div class="loader" v-if="showLoader"> 124 <div class="loader" v-if="showLoader">
125 <v-progress-circular indeterminate color="white"></v-progress-circular> 125 <v-progress-circular indeterminate color="white"></v-progress-circular>
126 </div> 126 </div>
127 </v-app> 127 </v-app>
128 </template> 128 </template>
129 129
130 <script> 130 <script>
131 import http from "@/Services/http.js"; 131 import http from "@/Services/http.js";
132 import moment from "moment"; 132 import moment from "moment";
133 133
134 export default { 134 export default {
135 data: () => ({ 135 data: () => ({
136 showLoader: false, 136 showLoader: false,
137 feeTypes: [], 137 feeTypes: [],
138 invoiceData: {}, 138 invoiceData: {},
139 feeType: { 139 feeType: {
140 amount: "", 140 amount: "",
141 discount: "", 141 discount: "",
142 totalPaidAmount: "", 142 totalPaidAmount: "",
143 subTotal: "", 143 subTotal: "",
144 feeTypeName: "" 144 feeTypeName: ""
145 }, 145 },
146 feeTypeData: [], 146 feeTypeData: [],
147 token: "", 147 token: "",
148 invoiceParticularData: {} 148 invoiceParticularData: {}
149 }), 149 }),
150 150
151 methods: { 151 methods: {
152 getInvoiceList() { 152 getInvoiceList() {
153 http() 153 http()
154 .get("/getParticularInvoice", { 154 .get("/getParticularInvoice", {
155 params: { invoiceId: this.$route.params.viewInvoiceId }, 155 params: {
156 invoiceId: this.$route.params.viewInvoiceId,
157 schoolId: this.$store.state.schoolId
158 },
156 headers: { Authorization: "Bearer " + this.token } 159 headers: { Authorization: "Bearer " + this.token }
157 }) 160 })
158 .then(response => { 161 .then(response => {
159 this.invoiceParticularData = response.data.data; 162 this.invoiceParticularData = response.data.data;
160 this.invoiceData = this.invoiceParticularData; 163 this.invoiceData = this.invoiceParticularData;
161 this.invoiceData.date = this.invoiceParticularData.date.slice(0, 10); 164 this.invoiceData.date = this.invoiceParticularData.date.slice(0, 10);
162 this.feeTypeData = this.invoiceParticularData.feeType; 165 this.feeTypeData = this.invoiceParticularData.feeType;
163 (this.feeType.amount = response.data.data.totalAmount), 166 (this.feeType.amount = response.data.data.totalAmount),
164 (this.feeType.discount = response.data.data.totalDiscount), 167 (this.feeType.discount = response.data.data.totalDiscount),
165 (this.feeType.subTotal = response.data.data.totalSubTotal), 168 (this.feeType.subTotal = response.data.data.totalSubTotal),
166 (this.feeType.totalPaidAmount = response.data.data.totalPaidAmount( 169 (this.feeType.totalPaidAmount = response.data.data.totalPaidAmount(
167 // console.log("response.data.data.totalPaidAmount",response.data.data.totalPaidAmount) 170 // console.log("response.data.data.totalPaidAmount",response.data.data.totalPaidAmount)
168 (this.showLoader = false) 171 (this.showLoader = false)
169 )); 172 ));
170 }) 173 })
171 .catch(error => { 174 .catch(error => {
172 this.showLoader = false; 175 this.showLoader = false;
173 if (error.response.status === 401) { 176 if (error.response.status === 401) {
174 this.$router.replace({ path: "/" }); 177 this.$router.replace({ path: "/" });
175 this.$store.dispatch("setToken", null); 178 this.$store.dispatch("setToken", null);
176 this.$store.dispatch("Id", null); 179 this.$store.dispatch("Id", null);
177 this.$store.dispatch("Role", null); 180 this.$store.dispatch("Role", null);
178 } 181 }
179 }); 182 });
180 }, 183 },
181 getfeeType() { 184 getfeeType() {
182 http() 185 http()
183 .get("/getFeesList", { 186 .get("/getFeesList", {
187 params: { schoolId: this.$store.state.schoolId },
184 headers: { Authorization: "Bearer " + this.token } 188 headers: { Authorization: "Bearer " + this.token }
185 }) 189 })
186 .then(response => { 190 .then(response => {
187 this.feeTypes = response.data.data; 191 this.feeTypes = response.data.data;
188 }) 192 })
189 .catch(err => { 193 .catch(err => {
190 // console.log("err====>", err); 194 // console.log("err====>", err);
191 }); 195 });
192 }, 196 },
193 getAmmountDetails(feeTyp) { 197 getAmmountDetails(feeTyp) {
194 let feeType = { 198 let feeType = {
195 subTotal: "", 199 subTotal: "",
196 subParticularTotal: "", 200 subParticularTotal: "",
197 paidAmount: "" 201 paidAmount: ""
198 }; 202 };
199 // *********** SUBTOTAL *********** 203 // *********** SUBTOTAL ***********
200 feeType.subTotal = 204 feeType.subTotal =
201 Number(feeType.subTotal) + Number(this.feeTypeData[i].subTotal); 205 Number(feeType.subTotal) + Number(this.feeTypeData[i].subTotal);
202 this.feeType.subTotal = feeType.subTotal.toFixed(2); 206 this.feeType.subTotal = feeType.subTotal.toFixed(2);
203 // *********** PAID-AMOUNT *********** 207 // *********** PAID-AMOUNT ***********
204 feeType.paidAmount = 208 feeType.paidAmount =
205 Number(feeType.paidAmount) + Number(this.feeTypeData[i].paidAmount); 209 Number(feeType.paidAmount) + Number(this.feeTypeData[i].paidAmount);
206 this.feeType.paidAmount = feeType.paidAmount.toFixed(2); 210 this.feeType.paidAmount = feeType.paidAmount.toFixed(2);
207 } 211 }
208 }, 212 },
209 mounted() { 213 mounted() {
210 this.token = this.$store.state.token; 214 this.token = this.$store.state.token;
211 this.getInvoiceList(); 215 this.getInvoiceList();
212 this.getfeeType(); 216 this.getfeeType();
213 }, 217 },
214 created() { 218 created() {
215 this.$root.$on("app:search", search => { 219 this.$root.$on("app:search", search => {
216 this.search = search; 220 this.search = search;
217 }); 221 });
218 }, 222 },
219 beforeDestroy() { 223 beforeDestroy() {
220 // dont forget to remove the listener 224 // dont forget to remove the listener
221 this.$root.$off("app:search"); 225 this.$root.$off("app:search");
222 } 226 }
223 }; 227 };
224 </script> 228 </script>
225 229
226 230
227 <style scoped> 231 <style scoped>
228 .active { 232 .active {
229 background-color: gray; 233 background-color: gray;
230 color: white !important; 234 color: white !important;
231 } 235 }
232 .activebtn { 236 .activebtn {
233 color: black !important; 237 color: black !important;
234 } 238 }
235 table { 239 table {
236 border-collapse: collapse; 240 border-collapse: collapse;
237 border: 1px solid #e2e7eb; 241 border: 1px solid #e2e7eb;
238 } 242 }
239 243
240 th, 244 th,
241 td { 245 td {
242 border: 1px solid #e2e7eb; 246 border: 1px solid #e2e7eb;
243 padding: 10px; 247 padding: 10px;
244 text-align: center; 248 text-align: center;
245 } 249 }
246 table.feeTypeTable { 250 table.feeTypeTable {
247 table-layout: auto !important; 251 table-layout: auto !important;
248 width: 100% !important; 252 width: 100% !important;
249 } 253 }
250 @media screen and (max-width: 380px) { 254 @media screen and (max-width: 380px) {
251 .tableRsponsive { 255 .tableRsponsive {
252 display: block; 256 display: block;
253 position: relative; 257 position: relative;
254 overflow: scroll; 258 overflow: scroll;
255 } 259 }
256 } 260 }
257 </style> 261 </style>
src/pages/Authentication/Login.vue
Diff comments   View file @99cd791
1 <template> 1 <template>
2 <v-app id="login"> 2 <v-app id="login">
3 <v-toolbar class="fixcolors"> 3 <v-toolbar class="fixcolors">
4 <v-toolbar-items> 4 <v-toolbar-items>
5 <img src="/static/logoIntrack.png" height="40" width="140" alt="logo" /> 5 <img src="/static/logoIntrack.png" height="40" width="140" alt="logo" />
6 <!-- <h3 class="white--text my-3 ml-5 logoSchool">School-Management</h3> --> 6 <!-- <h3 class="white--text my-3 ml-5 logoSchool">School-Management</h3> -->
7 </v-toolbar-items> 7 </v-toolbar-items>
8 </v-toolbar> 8 </v-toolbar>
9 <v-content> 9 <v-content>
10 <v-container fluid fill-height> 10 <v-container fluid fill-height>
11 <v-snackbar 11 <v-snackbar
12 :timeout="timeout" 12 :timeout="timeout"
13 :top="y === 'top'" 13 :top="y === 'top'"
14 :right="x === 'right'" 14 :right="x === 'right'"
15 :vertical="mode === 'vertical'" 15 :vertical="mode === 'vertical'"
16 v-model="snackbar" 16 v-model="snackbar"
17 :color="color" 17 :color="color"
18 >{{ text }}</v-snackbar> 18 >{{ text }}</v-snackbar>
19 <v-layout align-center justify-center> 19 <v-layout align-center justify-center>
20 <v-flex xs12 sm10 md6 lg4> 20 <v-flex xs12 sm10 md6 lg4>
21 <v-toolbar class="fixcolors" dark> 21 <v-toolbar class="fixcolors" dark>
22 <v-spacer></v-spacer> 22 <v-spacer></v-spacer>
23 <v-toolbar-title>School Login</v-toolbar-title> 23 <v-toolbar-title>School Login</v-toolbar-title>
24 <v-spacer></v-spacer> 24 <v-spacer></v-spacer>
25 </v-toolbar> 25 </v-toolbar>
26 26
27 <v-card class="elevation-1 pa-1"> 27 <v-card class="elevation-1 pa-1">
28 <v-card-text> 28 <v-card-text>
29 <v-flex xs12 sm12 md12 lg12> 29 <v-flex xs12 sm12 md12 lg12>
30 <v-form ref="form" v-model="valid" lazy-validation> 30 <v-form ref="form" v-model="valid" lazy-validation>
31 <v-text-field 31 <v-text-field
32 v-model="userLogincredentials.email" 32 v-model="userLogincredentials.email"
33 :rules="nameRules" 33 :rules="nameRules"
34 label="Username" 34 label="Username"
35 required 35 required
36 ></v-text-field> 36 ></v-text-field>
37 <v-text-field 37 <v-text-field
38 :rules="[rules.required]" 38 :rules="[rules.required]"
39 v-model="userLogincredentials.password" 39 v-model="userLogincredentials.password"
40 :append-icon="e1 ? 'visibility_off' : 'visibility'" 40 :append-icon="e1 ? 'visibility_off' : 'visibility'"
41 :append-icon-cb="() => (e1 = !e1)" 41 :append-icon-cb="() => (e1 = !e1)"
42 :type="e1 ? 'password' : 'text'" 42 :type="e1 ? 'password' : 'text'"
43 name="input-10-1" 43 name="input-10-1"
44 label="Password" 44 label="Password"
45 @keyup.enter="login" 45 @keyup.enter="login"
46 counter 46 counter
47 ></v-text-field> 47 ></v-text-field>
48 </v-form> 48 </v-form>
49 <v-layout row wrap> 49 <v-layout row wrap>
50 <v-flex xs6> 50 <v-flex xs6>
51 <!-- <v-checkbox :label="`Remember me`" v-model="remember"></v-checkbox> --> 51 <!-- <v-checkbox :label="`Remember me`" v-model="remember"></v-checkbox> -->
52 </v-flex> 52 </v-flex>
53 <v-flex xs6> 53 <v-flex xs6>
54 <h5 class="right mt-4"> 54 <h5 class="right mt-4">
55 <router-link 55 <router-link
56 class="link" 56 class="link"
57 to="/forgetpassword" 57 to="/forgetpassword"
58 style="border-bottom: 2px solid #aaa;" 58 style="border-bottom: 2px solid #aaa;"
59 >Forgot Password</router-link> 59 >Forgot Password</router-link>
60 </h5> 60 </h5>
61 </v-flex> 61 </v-flex>
62 </v-layout> 62 </v-layout>
63 </v-flex> 63 </v-flex>
64 </v-card-text> 64 </v-card-text>
65 <v-layout> 65 <v-layout>
66 <v-flex sm12 class="my-3"> 66 <v-flex sm12 class="my-3">
67 <v-btn 67 <v-btn
68 style="margin: auto;display: block;b" 68 style="margin: auto;display: block;b"
69 class="fixcolors" 69 class="fixcolors"
70 round 70 round
71 dark 71 dark
72 large 72 large
73 @click="login" 73 @click="login"
74 :loading="loading" 74 :loading="loading"
75 >Login</v-btn> 75 >Login</v-btn>
76 </v-flex> 76 </v-flex>
77 </v-layout> 77 </v-layout>
78 <v-layout></v-layout> 78 <v-layout></v-layout>
79 </v-card> 79 </v-card>
80 </v-flex> 80 </v-flex>
81 </v-layout> 81 </v-layout>
82 </v-container> 82 </v-container>
83 </v-content> 83 </v-content>
84 <v-footer class="pa-4 fixcolors"></v-footer> 84 <v-footer class="pa-4 fixcolors"></v-footer>
85 </v-app> 85 </v-app>
86 </template> 86 </template>
87 87
88 <script> 88 <script>
89 import http from "@/Services/http.js"; 89 import http from "@/Services/http.js";
90 export default { 90 export default {
91 data() { 91 data() {
92 return { 92 return {
93 snackbar: false, 93 snackbar: false,
94 y: "top", 94 y: "top",
95 x: "right", 95 x: "right",
96 mode: "", 96 mode: "",
97 timeout: 3000, 97 timeout: 3000,
98 text: "", 98 text: "",
99 e1: true, 99 e1: true,
100 loading: false, 100 loading: false,
101 remember: false, 101 remember: false,
102 valid: false, 102 valid: false,
103 userLogincredentials: {}, 103 userLogincredentials: {},
104 nameRules: [v => !!v || "Username is required"], 104 nameRules: [v => !!v || "Username is required"],
105 password: "", 105 password: "",
106 email: "", 106 email: "",
107 rules: { 107 rules: {
108 required: value => !!value || "password is Required." 108 required: value => !!value || "password is Required."
109 } 109 }
110 }; 110 };
111 }, 111 },
112 methods: { 112 methods: {
113 login() { 113 login() {
114 this.loading = true; 114 this.loading = true;
115 var userdata = { 115 var userdata = {
116 email: this.userLogincredentials.email, 116 email: this.userLogincredentials.email,
117 password: this.userLogincredentials.password, 117 password: this.userLogincredentials.password
118 role: "ADMIN"
119 }; 118 };
120 http() 119 http()
121 .post("/schoolLogin", userdata) 120 .post("/schoolLogin", userdata)
122 .then(response => { 121 .then(response => {
123 this.$store.dispatch("setToken", response.data.data.token); 122 this.$store.dispatch("setToken", response.data.data.token);
124 this.$store.dispatch("Id", response.data.data.id); 123 this.$store.dispatch("Id", response.data.data.id);
125 this.$store.dispatch("Role", response.data.data.role); 124 this.$store.dispatch("Role", response.data.data.role);
125 this.$store.dispatch("SchoolId", response.data.data.schoolId);
126 this.loading = false; 126 this.loading = false;
127 // console.log("{this.$store.state.state.role}",this.$store.state.role) 127 // console.log("{this.$store.state.state.role}",this.$store.state.role)
128 if (this.$store.state.role === "ADMIN") { 128 if (this.$store.state.role === "ADMIN") {
129 this.$router.push("/dashboard"); 129 this.$router.push("/dashboard");
130 } else if (this.$store.state.role === "SUPERADMIN") { 130 } else if (this.$store.state.role === "SUPERADMIN") {
131 this.$router.push("/school"); 131 this.$router.push("/school");
132 } else if (this.$store.state.role === "LIBRARIAN") {
133 this.$router.push("/libraryMember");
134 } else if (this.$store.state.role === "ACCOUNTANT") {
135 this.$router.push("/feeTypes");
132 } 136 }
133 }) 137 })
134 .catch(error => { 138 .catch(error => {
135 if (error) { 139 if (error) {
136 this.text = "Server appears to be offline"; 140 this.text = "Server appears to be offline";
137 this.snackbar = true; 141 this.snackbar = true;
138 this.loading = false; 142 this.loading = false;
139 } 143 }
140 if (error.response.data.message) { 144 if (error.response.data.message) {
141 this.text = error.response.data.message; 145 this.text = error.response.data.message;
142 this.snackbar = true; 146 this.snackbar = true;
143 } 147 }
144 this.loading = false; 148 this.loading = false;
145 }); 149 });
146 } 150 }
147 }, 151 },
148 mounted() { 152 mounted() {
149 if (this.$store.state.isUserLoggedIn == true) { 153 if (this.$store.state.isUserLoggedIn == true) {
150 this.$router.push("/dashboard"); 154 this.$router.push("/dashboard");
151 } 155 }
152 }, 156 },
153 computed: { 157 computed: {
154 color() { 158 color() {
155 return this.loading ? "success" : "error"; 159 return this.loading ? "success" : "error";
156 } 160 }
157 } 161 }
158 }; 162 };
159 </script> 163 </script>
160 164
161 <style scoped lang="css"> 165 <style scoped lang="css">
162 #login { 166 #login {
163 width: 100%; 167 width: 100%;
164 position: absolute; 168 position: absolute;
165 top: 0; 169 top: 0;
166 left: 0; 170 left: 0;
167 content: ""; 171 content: "";
168 z-index: 0; 172 z-index: 0;
169 } 173 }
170 </style> 174 </style>
171 <style scoped> 175 <style scoped>
172 img { 176 img {
173 position: absolute; 177 position: absolute;
174 top: 13px; 178 top: 13px;
175 left: 8px; 179 left: 8px;
176 } 180 }
177 .v-btn--large { 181 .v-btn--large {
178 padding: 0px 84px; 182 padding: 0px 84px;
179 } 183 }
180 .link { 184 .link {
181 text-decoration: none; 185 text-decoration: none;
182 } 186 }
183 a { 187 a {
184 color: #696969; 188 color: #696969;
185 } 189 }
186 .forget { 190 .forget {
187 margin-top: 20px; 191 margin-top: 20px;
188 } 192 }
189 .mt-4 { 193 .mt-4 {
190 margin-top: 21px !important; 194 margin-top: 21px !important;
191 } 195 }
192 @media screen and (max-width: 600px) { 196 @media screen and (max-width: 600px) {
193 .forget { 197 .forget {
194 margin-top: none; 198 margin-top: none;
195 margin-left: 18px; 199 margin-left: 18px;
196 } 200 }
197 img { 201 img {
198 left: 10px; 202 left: 10px;
199 height: 34px; 203 height: 34px;
200 width: 120px; 204 width: 120px;
201 } 205 }
202 .logoSchool { 206 .logoSchool {
203 font-size: 18px; 207 font-size: 18px;
204 margin-top: 20px !important; 208 margin-top: 20px !important;
205 } 209 }
206 h5 { 210 h5 {
207 font-size: 14px !important; 211 font-size: 14px !important;
208 } 212 }
209 } 213 }
src/pages/Library/books.vue
Diff comments   View file @99cd791
1 <template> 1 <template>
2 <v-app id="pages-dasboard"> 2 <v-app id="pages-dasboard">
3 <v-tabs grow slider-color="gray"> 3 <v-tabs grow slider-color="gray">
4 <v-tab 4 <v-tab
5 ripple 5 ripple
6 @click="activeTab('existing')" 6 @click="activeTab('existing')"
7 v-bind:class="{ active: isActive }" 7 v-bind:class="{ active: isActive }"
8 id="tab" 8 id="tab"
9 class="subheading" 9 class="subheading"
10 >Existing Books</v-tab> 10 >Existing Books</v-tab>
11 <v-tab 11 <v-tab
12 ripple 12 ripple
13 @click="activeTab('new')" 13 @click="activeTab('new')"
14 v-bind:class="{ active: newActive }" 14 v-bind:class="{ active: newActive }"
15 id="tab1" 15 id="tab1"
16 User 16 User
17 class="subheading" 17 class="subheading"
18 >Add New Books</v-tab> 18 >Add New Books</v-tab>
19 19
20 <!-- ****** EDIT SECTION ****** --> 20 <!-- ****** EDIT SECTION ****** -->
21 <v-tab-item> 21 <v-tab-item>
22 <v-snackbar 22 <v-snackbar
23 :timeout="timeout" 23 :timeout="timeout"
24 :top="y === 'top'" 24 :top="y === 'top'"
25 :right="x === 'right'" 25 :right="x === 'right'"
26 :vertical="mode === 'vertical'" 26 :vertical="mode === 'vertical'"
27 v-model="snackbar" 27 v-model="snackbar"
28 color="success" 28 color="success"
29 >{{ text }}</v-snackbar> 29 >{{ text }}</v-snackbar>
30 <v-dialog v-model="dialog" max-width="600px"> 30 <v-dialog v-model="dialog" max-width="600px">
31 <v-toolbar color="grey lighten-2"> 31 <v-toolbar color="grey lighten-2">
32 <v-spacer></v-spacer> 32 <v-spacer></v-spacer>
33 <v-toolbar-title> 33 <v-toolbar-title>
34 <h3>Edit Books</h3> 34 <h3>Edit Books</h3>
35 </v-toolbar-title> 35 </v-toolbar-title>
36 <v-spacer></v-spacer> 36 <v-spacer></v-spacer>
37 </v-toolbar> 37 </v-toolbar>
38 <v-card> 38 <v-card>
39 <v-card-text> 39 <v-card-text>
40 <v-container> 40 <v-container>
41 <v-layout wrap justify-center> 41 <v-layout wrap justify-center>
42 <v-flex xs12 sm9> 42 <v-flex xs12 sm9>
43 <v-form> 43 <v-form>
44 <v-layout> 44 <v-layout>
45 <v-flex xs4 class="pt-4 subheading"> 45 <v-flex xs4 class="pt-4 subheading">
46 <label class="right pr-3">Name:</label> 46 <label class="right pr-3">Name:</label>
47 </v-flex> 47 </v-flex>
48 <v-flex xs8> 48 <v-flex xs8>
49 <v-text-field v-model="editedItem.name" placeholder="fill your Name"></v-text-field> 49 <v-text-field v-model="editedItem.name" placeholder="fill your Name"></v-text-field>
50 </v-flex> 50 </v-flex>
51 </v-layout> 51 </v-layout>
52 <v-layout> 52 <v-layout>
53 <v-flex xs4 class="pt-4 subheading"> 53 <v-flex xs4 class="pt-4 subheading">
54 <label class="right pr-3">Author:</label> 54 <label class="right pr-3">Author:</label>
55 </v-flex> 55 </v-flex>
56 <v-flex xs8> 56 <v-flex xs8>
57 <v-text-field 57 <v-text-field
58 v-model="editedItem.author" 58 v-model="editedItem.author"
59 placeholder="fill your Author Name" 59 placeholder="fill your Author Name"
60 ></v-text-field> 60 ></v-text-field>
61 </v-flex> 61 </v-flex>
62 </v-layout> 62 </v-layout>
63 <v-layout> 63 <v-layout>
64 <v-flex xs4 class="pt-4 subheading"> 64 <v-flex xs4 class="pt-4 subheading">
65 <label class="right pr-3">Subject Code:</label> 65 <label class="right pr-3">Subject Code:</label>
66 </v-flex> 66 </v-flex>
67 <v-flex xs8> 67 <v-flex xs8>
68 <v-text-field 68 <v-text-field
69 v-model="editedItem.subjectCode" 69 v-model="editedItem.subjectCode"
70 placeholder="fill your Subject Code" 70 placeholder="fill your Subject Code"
71 ></v-text-field> 71 ></v-text-field>
72 </v-flex> 72 </v-flex>
73 </v-layout> 73 </v-layout>
74 <v-layout> 74 <v-layout>
75 <v-flex xs4 class="pt-4 subheading"> 75 <v-flex xs4 class="pt-4 subheading">
76 <label class="right pr-3">Price:</label> 76 <label class="right pr-3">Price:</label>
77 </v-flex> 77 </v-flex>
78 <v-flex xs8> 78 <v-flex xs8>
79 <v-text-field 79 <v-text-field
80 v-model="editedItem.price" 80 v-model="editedItem.price"
81 placeholder="fill your Subject Code" 81 placeholder="fill your Subject Code"
82 ></v-text-field> 82 ></v-text-field>
83 </v-flex> 83 </v-flex>
84 </v-layout> 84 </v-layout>
85 <v-layout> 85 <v-layout>
86 <v-flex xs4 class="pt-4 subheading"> 86 <v-flex xs4 class="pt-4 subheading">
87 <label class="right pr-3">Quantity:</label> 87 <label class="right pr-3">Quantity:</label>
88 </v-flex> 88 </v-flex>
89 <v-flex xs8> 89 <v-flex xs8>
90 <v-text-field 90 <v-text-field
91 v-model="editedItem.quantity" 91 v-model="editedItem.quantity"
92 type="number" 92 type="number"
93 placeholder="fill your Quantity" 93 placeholder="fill your Quantity"
94 ></v-text-field> 94 ></v-text-field>
95 </v-flex> 95 </v-flex>
96 </v-layout> 96 </v-layout>
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 pr-3">Rack No:</label> 99 <label class="right pr-3">Rack No:</label>
100 </v-flex> 100 </v-flex>
101 <v-flex xs8> 101 <v-flex xs8>
102 <v-text-field v-model="editedItem.rackNo" placeholder="fill your Rack No"></v-text-field> 102 <v-text-field v-model="editedItem.rackNo" placeholder="fill your Rack No"></v-text-field>
103 </v-flex> 103 </v-flex>
104 </v-layout> 104 </v-layout>
105 <v-card-actions> 105 <v-card-actions>
106 <v-btn round dark @click.native="close">Cancel</v-btn> 106 <v-btn round dark @click.native="close">Cancel</v-btn>
107 <v-spacer></v-spacer> 107 <v-spacer></v-spacer>
108 <v-btn round dark @click="save">Save</v-btn> 108 <v-btn round dark @click="save">Save</v-btn>
109 </v-card-actions> 109 </v-card-actions>
110 </v-form> 110 </v-form>
111 </v-flex> 111 </v-flex>
112 </v-layout> 112 </v-layout>
113 </v-container> 113 </v-container>
114 </v-card-text> 114 </v-card-text>
115 </v-card> 115 </v-card>
116 </v-dialog> 116 </v-dialog>
117 117
118 <!-- ****** PROFILE VIEW BOOKS DATA ****** --> 118 <!-- ****** PROFILE VIEW BOOKS DATA ****** -->
119 119
120 <v-dialog v-model="dialog1" max-width="600px"> 120 <v-dialog v-model="dialog1" max-width="600px">
121 <v-toolbar color="grey lighten-2"> 121 <v-toolbar color="grey lighten-2">
122 <v-spacer></v-spacer> 122 <v-spacer></v-spacer>
123 <v-toolbar-title> 123 <v-toolbar-title>
124 <h3>Books</h3> 124 <h3>Books</h3>
125 </v-toolbar-title> 125 </v-toolbar-title>
126 <v-spacer></v-spacer> 126 <v-spacer></v-spacer>
127 <v-icon @click="close1">close</v-icon> 127 <v-icon @click="close1">close</v-icon>
128 </v-toolbar> 128 </v-toolbar>
129 <v-card> 129 <v-card>
130 <v-card-text> 130 <v-card-text>
131 <v-container grid-list-md> 131 <v-container grid-list-md>
132 <v-layout wrap> 132 <v-layout wrap>
133 <v-flex> 133 <v-flex>
134 <v-layout> 134 <v-layout>
135 <v-flex xs5 sm6> 135 <v-flex xs5 sm6>
136 <h5 class="right my-1"> 136 <h5 class="right my-1">
137 <b>Name :</b> 137 <b>Name :</b>
138 </h5> 138 </h5>
139 </v-flex> 139 </v-flex>
140 <v-flex sm6 xs8> 140 <v-flex sm6 xs8>
141 <h5 class="my-1">{{ editedItem.name }}</h5> 141 <h5 class="my-1">{{ editedItem.name }}</h5>
142 </v-flex> 142 </v-flex>
143 </v-layout> 143 </v-layout>
144 <v-layout> 144 <v-layout>
145 <v-flex xs5 sm6> 145 <v-flex xs5 sm6>
146 <h5 class="right my-1"> 146 <h5 class="right my-1">
147 <b>Author :</b> 147 <b>Author :</b>
148 </h5> 148 </h5>
149 </v-flex> 149 </v-flex>
150 <v-flex sm6 xs8> 150 <v-flex sm6 xs8>
151 <h5 class="my-1">{{ editedItem.author }}</h5> 151 <h5 class="my-1">{{ editedItem.author }}</h5>
152 </v-flex> 152 </v-flex>
153 </v-layout> 153 </v-layout>
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>Subject Code :</b> 157 <b>Subject Code :</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.subjectCode }}</h5> 161 <h5 class="my-1">{{ editedItem.subjectCode }}</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>Price :</b> 167 <b>Price :</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.price }}</h5> 171 <h5 class="my-1">{{ editedItem.price }}</h5>
172 </v-flex> 172 </v-flex>
173 </v-layout> 173 </v-layout>
174 <v-layout> 174 <v-layout>
175 <v-flex xs5 sm6> 175 <v-flex xs5 sm6>
176 <h5 class="right my-1"> 176 <h5 class="right my-1">
177 <b>Quantity :</b> 177 <b>Quantity :</b>
178 </h5> 178 </h5>
179 </v-flex> 179 </v-flex>
180 <v-flex sm6 xs8> 180 <v-flex sm6 xs8>
181 <h5 class="my-1">{{ editedItem.quantity}}</h5> 181 <h5 class="my-1">{{ editedItem.quantity}}</h5>
182 </v-flex> 182 </v-flex>
183 </v-layout> 183 </v-layout>
184 <v-layout> 184 <v-layout>
185 <v-flex xs5 sm6> 185 <v-flex xs5 sm6>
186 <h5 class="right my-1"> 186 <h5 class="right my-1">
187 <b>Rack No :</b> 187 <b>Rack No :</b>
188 </h5> 188 </h5>
189 </v-flex> 189 </v-flex>
190 <v-flex sm6 xs8> 190 <v-flex sm6 xs8>
191 <h5 class="my-1">{{ editedItem.rackNo}}</h5> 191 <h5 class="my-1">{{ editedItem.rackNo}}</h5>
192 </v-flex> 192 </v-flex>
193 </v-layout> 193 </v-layout>
194 </v-flex> 194 </v-flex>
195 </v-layout> 195 </v-layout>
196 </v-container> 196 </v-container>
197 </v-card-text> 197 </v-card-text>
198 </v-card> 198 </v-card>
199 </v-dialog> 199 </v-dialog>
200 200
201 <v-snackbar 201 <v-snackbar
202 :timeout="timeout" 202 :timeout="timeout"
203 :top="y === 'top'" 203 :top="y === 'top'"
204 :right="x === 'right'" 204 :right="x === 'right'"
205 :vertical="mode === 'vertical'" 205 :vertical="mode === 'vertical'"
206 v-model="snackbar" 206 v-model="snackbar"
207 color="success" 207 color="success"
208 >{{ text }}</v-snackbar> 208 >{{ text }}</v-snackbar>
209 209
210 <!-- ****** EXISTING-BOOKS TABLE ****** --> 210 <!-- ****** EXISTING-BOOKS TABLE ****** -->
211 211
212 <v-data-table 212 <v-data-table
213 :headers="headers" 213 :headers="headers"
214 :items="bookData" 214 :items="bookData"
215 :pagination.sync="pagination" 215 :pagination.sync="pagination"
216 :search="search" 216 :search="search"
217 > 217 >
218 <template slot="items" slot-scope="props"> 218 <template slot="items" slot-scope="props">
219 <td id="td" class="text-xs-center">{{ props.index + 1}}</td> 219 <td id="td" class="text-xs-center">{{ props.index + 1}}</td>
220 <td id="td" class="text-xs-center">{{ props.item.name }}</td> 220 <td id="td" class="text-xs-center">{{ props.item.name }}</td>
221 <td id="td" class="text-xs-center">{{ props.item.author }}</td> 221 <td id="td" class="text-xs-center">{{ props.item.author }}</td>
222 <td id="td" class="text-xs-center">{{ props.item.subjectCode }}</td> 222 <td id="td" class="text-xs-center">{{ props.item.subjectCode }}</td>
223 <td id="td" class="text-xs-center">{{ props.item.price }}</td> 223 <td id="td" class="text-xs-center">{{ props.item.price }}</td>
224 <td id="td" class="text-xs-center">{{ props.item.quantity }}</td> 224 <td id="td" class="text-xs-center">{{ props.item.quantity }}</td>
225 <td id="td" class="text-xs-center">{{ props.item.rackNo }}</td> 225 <td id="td" class="text-xs-center">{{ props.item.rackNo }}</td>
226 <td id="td" class="text-xs-center"> 226 <td id="td" class="text-xs-center">
227 <span class="green lighten-1 pa-2 white--text paymentStatus">{{ props.item.status }}</span> 227 <span class="green lighten-1 pa-2 white--text paymentStatus">{{ props.item.status }}</span>
228 </td> 228 </td>
229 <!-- <td id="td" class="text-xs-center">{{ props.item.session}}</td> --> 229 <!-- <td id="td" class="text-xs-center">{{ props.item.session}}</td> -->
230 230
231 <td class="text-xs-center"> 231 <td class="text-xs-center">
232 <span> 232 <span>
233 <v-tooltip top> 233 <v-tooltip top>
234 <img 234 <img
235 slot="activator" 235 slot="activator"
236 style="cursor:pointer; width:25px; height:18px; " 236 style="cursor:pointer; width:25px; height:18px; "
237 class="mr5" 237 class="mr5"
238 @click="profile(props.item)" 238 @click="profile(props.item)"
239 src="/static/icon/eye1.png" 239 src="/static/icon/eye1.png"
240 /> 240 />
241 <span>View</span> 241 <span>View</span>
242 </v-tooltip> 242 </v-tooltip>
243 <v-tooltip top> 243 <v-tooltip top>
244 <img 244 <img
245 slot="activator" 245 slot="activator"
246 style="cursor:pointer; width:20px; height:18px; " 246 style="cursor:pointer; width:20px; height:18px; "
247 class="mr5" 247 class="mr5"
248 @click="editItem(props.item)" 248 @click="editItem(props.item)"
249 src="/static/icon/edit1.png" 249 src="/static/icon/edit1.png"
250 /> 250 />
251 <span>Edit</span> 251 <span>Edit</span>
252 </v-tooltip> 252 </v-tooltip>
253 <v-tooltip top> 253 <v-tooltip top>
254 <img 254 <img
255 slot="activator" 255 slot="activator"
256 style="cursor:pointer; width:20px; height:20px; " 256 style="cursor:pointer; width:20px; height:20px; "
257 class="mr5" 257 class="mr5"
258 @click="deleteItem(props.item)" 258 @click="deleteItem(props.item)"
259 src="/static/icon/delete1.png" 259 src="/static/icon/delete1.png"
260 /> 260 />
261 <span>Delete</span> 261 <span>Delete</span>
262 </v-tooltip> 262 </v-tooltip>
263 </span> 263 </span>
264 </td> 264 </td>
265 </template> 265 </template>
266 <v-alert 266 <v-alert
267 slot="no-results" 267 slot="no-results"
268 :value="true" 268 :value="true"
269 color="error" 269 color="error"
270 icon="warning" 270 icon="warning"
271 >Your search for "{{ search }}" found no results.</v-alert> 271 >Your search for "{{ search }}" found no results.</v-alert>
272 </v-data-table> 272 </v-data-table>
273 </v-tab-item> 273 </v-tab-item>
274 274
275 <!-- ****** ADD multiple Students ****** --> 275 <!-- ****** ADD multiple Students ****** -->
276 276
277 <v-tab-item> 277 <v-tab-item>
278 <v-container> 278 <v-container>
279 <v-snackbar 279 <v-snackbar
280 :timeout="timeout" 280 :timeout="timeout"
281 :top="y === 'top'" 281 :top="y === 'top'"
282 :right="x === 'right'" 282 :right="x === 'right'"
283 :vertical="mode === 'vertical'" 283 :vertical="mode === 'vertical'"
284 v-model="snackbar" 284 v-model="snackbar"
285 color="success" 285 color="success"
286 >{{ text }}</v-snackbar> 286 >{{ text }}</v-snackbar>
287 <v-flex xs12 sm8 offset-sm2 class="top"> 287 <v-flex xs12 sm8 offset-sm2 class="top">
288 <v-card flat> 288 <v-card flat>
289 <v-container fluid fill-height> 289 <v-container fluid fill-height>
290 <v-layout align-center> 290 <v-layout align-center>
291 <v-flex xs12 class="mt-4"> 291 <v-flex xs12 class="mt-4">
292 <v-form ref="form" v-model="valid" lazy-validation> 292 <v-form ref="form" v-model="valid" lazy-validation>
293 <v-layout> 293 <v-layout>
294 <v-flex xs4 class="pt-4 subheading"> 294 <v-flex xs4 class="pt-4 subheading">
295 <label class="right">Name:</label> 295 <label class="right">Name:</label>
296 </v-flex> 296 </v-flex>
297 <v-flex xs6 class="ml-3"> 297 <v-flex xs6 class="ml-3">
298 <v-text-field 298 <v-text-field
299 v-model="BooksData.name" 299 v-model="BooksData.name"
300 placeholder="fill your Name" 300 placeholder="fill your Name"
301 type="text" 301 type="text"
302 :rules="nameRules" 302 :rules="nameRules"
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-layout> 307 <v-layout>
308 <v-flex xs4 class="pt-4 subheading"> 308 <v-flex xs4 class="pt-4 subheading">
309 <label class="right">Author:</label> 309 <label class="right">Author:</label>
310 </v-flex> 310 </v-flex>
311 <v-flex xs6 class="ml-3"> 311 <v-flex xs6 class="ml-3">
312 <v-text-field 312 <v-text-field
313 v-model="BooksData.author" 313 v-model="BooksData.author"
314 placeholder="fill your Author Name" 314 placeholder="fill your Author Name"
315 type="text" 315 type="text"
316 :rules="authorRules" 316 :rules="authorRules"
317 required 317 required
318 ></v-text-field> 318 ></v-text-field>
319 </v-flex> 319 </v-flex>
320 </v-layout> 320 </v-layout>
321 <v-layout> 321 <v-layout>
322 <v-flex xs4 class="pt-4 subheading"> 322 <v-flex xs4 class="pt-4 subheading">
323 <label class="right">Subject Code:</label> 323 <label class="right">Subject Code:</label>
324 </v-flex> 324 </v-flex>
325 <v-flex xs6 class="ml-3"> 325 <v-flex xs6 class="ml-3">
326 <v-text-field 326 <v-text-field
327 v-model="BooksData.subjectCode" 327 v-model="BooksData.subjectCode"
328 placeholder="fill your Subject Code" 328 placeholder="fill your Subject Code"
329 type="text" 329 type="text"
330 :rules="subjectRules" 330 :rules="subjectRules"
331 required 331 required
332 ></v-text-field> 332 ></v-text-field>
333 </v-flex> 333 </v-flex>
334 </v-layout> 334 </v-layout>
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">Price:</label> 337 <label class="right">Price:</label>
338 </v-flex> 338 </v-flex>
339 <v-flex xs6 class="ml-3"> 339 <v-flex xs6 class="ml-3">
340 <v-text-field 340 <v-text-field
341 v-model="BooksData.price" 341 v-model="BooksData.price"
342 placeholder="fill your Price" 342 placeholder="fill your Price"
343 :rules="priceRules" 343 :rules="priceRules"
344 required 344 required
345 ></v-text-field> 345 ></v-text-field>
346 </v-flex> 346 </v-flex>
347 </v-layout> 347 </v-layout>
348 <v-layout> 348 <v-layout>
349 <v-flex xs4 class="pt-4 subheading"> 349 <v-flex xs4 class="pt-4 subheading">
350 <label class="right">Quantity:</label> 350 <label class="right">Quantity:</label>
351 </v-flex> 351 </v-flex>
352 <v-flex xs6 class="ml-3"> 352 <v-flex xs6 class="ml-3">
353 <v-text-field 353 <v-text-field
354 v-model="BooksData.quantity" 354 v-model="BooksData.quantity"
355 placeholder="fill your Quantity" 355 placeholder="fill your Quantity"
356 :rules="quantityRules" 356 :rules="quantityRules"
357 required 357 required
358 ></v-text-field> 358 ></v-text-field>
359 </v-flex> 359 </v-flex>
360 </v-layout> 360 </v-layout>
361 <v-layout> 361 <v-layout>
362 <v-flex xs4 class="pt-4 subheading"> 362 <v-flex xs4 class="pt-4 subheading">
363 <label class="right">Rack No:</label> 363 <label class="right">Rack No:</label>
364 </v-flex> 364 </v-flex>
365 <v-flex xs6 class="ml-3"> 365 <v-flex xs6 class="ml-3">
366 <v-text-field 366 <v-text-field
367 v-model="BooksData.rackNo" 367 v-model="BooksData.rackNo"
368 placeholder="fill your Rack No" 368 placeholder="fill your Rack No"
369 :rules="rackNoRules" 369 :rules="rackNoRules"
370 required 370 required
371 ></v-text-field> 371 ></v-text-field>
372 </v-flex> 372 </v-flex>
373 </v-layout> 373 </v-layout>
374 <v-layout> 374 <v-layout>
375 <v-flex xs12 sm9 offset-sm2> 375 <v-flex xs12 sm9 offset-sm2>
376 <v-card-actions> 376 <v-card-actions>
377 <v-btn @click="clear" round dark>clear</v-btn> 377 <v-btn @click="clear" round dark>clear</v-btn>
378 <v-spacer></v-spacer> 378 <v-spacer></v-spacer>
379 <v-btn @click="submit" round dark :loading="loading">Add</v-btn> 379 <v-btn @click="submit" round dark :loading="loading">Add</v-btn>
380 </v-card-actions> 380 </v-card-actions>
381 </v-flex> 381 </v-flex>
382 </v-layout> 382 </v-layout>
383 </v-form> 383 </v-form>
384 </v-flex> 384 </v-flex>
385 </v-layout> 385 </v-layout>
386 </v-container> 386 </v-container>
387 </v-card> 387 </v-card>
388 </v-flex> 388 </v-flex>
389 </v-container> 389 </v-container>
390 </v-tab-item> 390 </v-tab-item>
391 </v-tabs> 391 </v-tabs>
392 <div class="loader" v-if="showLoader"> 392 <div class="loader" v-if="showLoader">
393 <v-progress-circular indeterminate color="white"></v-progress-circular> 393 <v-progress-circular indeterminate color="white"></v-progress-circular>
394 </div> 394 </div>
395 </v-app> 395 </v-app>
396 </template> 396 </template>
397 397
398 <script> 398 <script>
399 import http from "@/Services/http.js"; 399 import http from "@/Services/http.js";
400 import Util from "@/util"; 400 import Util from "@/util";
401 401
402 export default { 402 export default {
403 data: () => ({ 403 data: () => ({
404 snackbar: false, 404 snackbar: false,
405 y: "top", 405 y: "top",
406 x: "right", 406 x: "right",
407 mode: "", 407 mode: "",
408 timeout: 3000, 408 timeout: 3000,
409 text: "", 409 text: "",
410 showLoader: false, 410 showLoader: false,
411 loading: false, 411 loading: false,
412 date: null, 412 date: null,
413 search: "", 413 search: "",
414 dialog: false, 414 dialog: false,
415 dialog1: false, 415 dialog1: false,
416 valid: true, 416 valid: true,
417 validEdit: true, 417 validEdit: true,
418 isActive: true, 418 isActive: true,
419 newActive: false, 419 newActive: false,
420 pagination: { 420 pagination: {
421 rowsPerPage: 15 421 rowsPerPage: 15
422 }, 422 },
423 nameRules: [v => !!v || " Name is required"], 423 nameRules: [v => !!v || " Name is required"],
424 authorRules: [v => !!v || "Author Name Monthly"], 424 authorRules: [v => !!v || "Author Name Monthly"],
425 subjectRules: [v => !!v || "Subject Code is required"], 425 subjectRules: [v => !!v || "Subject Code is required"],
426 priceRules: [v => !!v || "Price is required"], 426 priceRules: [v => !!v || "Price is required"],
427 quantityRules: [v => !!v || "Quantity is required"], 427 quantityRules: [v => !!v || "Quantity is required"],
428 rackNoRules: [v => !!v || "Rack No. is required"], 428 rackNoRules: [v => !!v || "Rack No. is required"],
429 429
430 headers: [ 430 headers: [
431 { 431 {
432 text: "No", 432 text: "No",
433 align: "center", 433 align: "center",
434 sortable: false, 434 sortable: false,
435 value: "No" 435 value: "No"
436 }, 436 },
437 { 437 {
438 text: "Name", 438 text: "Name",
439 value: "name", 439 value: "name",
440 sortable: false, 440 sortable: false,
441 align: "center" 441 align: "center"
442 }, 442 },
443 { text: "Authour", value: "author", sortable: false, align: "center" }, 443 { text: "Authour", value: "author", sortable: false, align: "center" },
444 { 444 {
445 text: "Subject Code", 445 text: "Subject Code",
446 value: "subjectCode", 446 value: "subjectCode",
447 sortable: false, 447 sortable: false,
448 align: "center" 448 align: "center"
449 }, 449 },
450 { text: "Price", value: "price", sortable: false, align: "center" }, 450 { text: "Price", value: "price", sortable: false, align: "center" },
451 { text: "Quantity", value: "quantity", sortable: false, align: "center" }, 451 { text: "Quantity", value: "quantity", sortable: false, align: "center" },
452 { text: "Rack No", value: "rackNo", sortable: false, align: "center" }, 452 { text: "Rack No", value: "rackNo", sortable: false, align: "center" },
453 { text: "Status", value: "status", sortable: false, align: "center" }, 453 { text: "Status", value: "status", sortable: false, align: "center" },
454 454
455 // { text: "Session", value: "session", sortable: false, align: "center" }, 455 // { text: "Session", value: "session", sortable: false, align: "center" },
456 { text: "Action", value: "", sortable: false, align: "center" } 456 { text: "Action", value: "", sortable: false, align: "center" }
457 ], 457 ],
458 bookData: [], 458 bookData: [],
459 select: "", 459 select: "",
460 token: "", 460 token: "",
461 editedItem: {}, 461 editedItem: {},
462 BooksData: {} 462 BooksData: {}
463 }), 463 }),
464 methods: { 464 methods: {
465 getBookData() { 465 getBookData() {
466 this.showLoader = true; 466 this.showLoader = true;
467 http() 467 http()
468 .get("/getBooksList", { 468 .get("/getBooksList", {
469 params: {
470 schoolId: this.$store.state.schoolId
471 },
469 headers: { Authorization: "Bearer " + this.token } 472 headers: { Authorization: "Bearer " + this.token }
470 }) 473 })
471 .then(response => { 474 .then(response => {
472 this.bookData = response.data.data; 475 this.bookData = response.data.data;
473 this.showLoader = false; 476 this.showLoader = false;
474 // console.log("getAllfeetypes=====>",response.data.data) 477 // console.log("getAllfeetypes=====>",response.data.data)
475 }) 478 })
476 .catch(error => { 479 .catch(error => {
477 // console.log("err====>", err); 480 // console.log("err====>", err);
478 this.showLoader = false; 481 this.showLoader = false;
479 if (error.response.status === 401) { 482 if (error.response.status === 401) {
480 this.$router.replace({ path: "/" }); 483 this.$router.replace({ path: "/" });
481 this.$store.dispatch("setToken", null); 484 this.$store.dispatch("setToken", null);
482 this.$store.dispatch("Id", null); 485 this.$store.dispatch("Id", null);
483 } 486 }
484 }); 487 });
485 }, 488 },
486 editItem(item) { 489 editItem(item) {
487 this.editedIndex = this.bookData.indexOf(item); 490 this.editedIndex = this.bookData.indexOf(item);
488 this.editedItem = Object.assign({}, item); 491 this.editedItem = Object.assign({}, item);
489 console.log(this.editedItem); 492 console.log(this.editedItem);
490 this.dialog = true; 493 this.dialog = true;
491 }, 494 },
492 profile(item) { 495 profile(item) {
493 this.editedIndex = this.bookData.indexOf(item); 496 this.editedIndex = this.bookData.indexOf(item);
494 this.editedItem = Object.assign({}, item); 497 this.editedItem = Object.assign({}, item);
495 this.dialog1 = true; 498 this.dialog1 = true;
496 }, 499 },
497 deleteItem(item) { 500 deleteItem(item) {
498 let deleteStudent = { 501 let deleteStudent = {
499 bookId: item._id 502 bookId: item._id
500 }; 503 };
501 http() 504 http()
502 .delete( 505 .delete(
503 "/deleteBook", 506 "/deleteBook",
504 confirm("Are you sure you want to delete this?") && { 507 confirm("Are you sure you want to delete this?") && {
505 params: deleteStudent 508 params: deleteStudent
506 } 509 }
507 ) 510 )
508 .then(response => { 511 .then(response => {
509 if ((this.snackbar = true)) { 512 if ((this.snackbar = true)) {
510 this.text = "Successfully delete Existing Delete Student "; 513 this.text = "Successfully delete Existing Delete Student ";
511 } 514 }
512 this.getBookData(); 515 this.getBookData();
513 }) 516 })
514 .catch(error => { 517 .catch(error => {
515 // console.log(error); 518 // console.log(error);
516 }); 519 });
517 }, 520 },
518 activeTab(type) { 521 activeTab(type) {
519 switch (type) { 522 switch (type) {
520 case "existing": 523 case "existing":
521 this.newActive = false; 524 this.newActive = false;
522 this.isActive = true; 525 this.isActive = true;
523 break; 526 break;
524 527
525 default: 528 default:
526 this.newActive = true; 529 this.newActive = true;
527 this.isActive = false; 530 this.isActive = false;
528 break; 531 break;
529 } 532 }
530 }, 533 },
531 close() { 534 close() {
532 this.dialog = false; 535 this.dialog = false;
533 setTimeout(() => { 536 setTimeout(() => {
534 this.editedItem = Object.assign({}, this.defaultItem); 537 this.editedItem = Object.assign({}, this.defaultItem);
535 this.editedIndex = -1; 538 this.editedIndex = -1;
536 }, 300); 539 }, 300);
537 }, 540 },
538 close1() { 541 close1() {
539 this.dialog1 = false; 542 this.dialog1 = false;
540 }, 543 },
541 close2() { 544 close2() {
542 this.dialog2 = false; 545 this.dialog2 = false;
543 }, 546 },
544 submit() { 547 submit() {
545 this.BooksData.quantity = Number(this.BooksData.quantity); 548 this.BooksData.quantity = Number(this.BooksData.quantity);
549 this.BooksData.schoolId = this.$store.state.schoolId;
546 if (this.$refs.form.validate()) { 550 if (this.$refs.form.validate()) {
547 this.loading = true; 551 this.loading = true;
548 http() 552 http()
549 .post("/createBook", this.BooksData) 553 .post("/createBook", this.BooksData)
550 .then(response => { 554 .then(response => {
551 console.log(response); 555 console.log(response);
552 this.getBookData(); 556 this.getBookData();
553 if ((this.snackbar = true)) { 557 if ((this.snackbar = true)) {
554 this.text = "New Book added successfully"; 558 this.text = "New Book added successfully";
555 } 559 }
556 560
557 this.clear(); 561 this.clear();
558 this.loading = false; 562 this.loading = false;
559 }) 563 })
560 .catch(error => { 564 .catch(error => {
561 // console.log(error); 565 // console.log(error);
562 if ((this.snackbar = true)) { 566 if ((this.snackbar = true)) {
563 this.text = error.response.data.message; 567 this.text = error.response.data.message;
564 } 568 }
565 this.loading = false; 569 this.loading = false;
566 }); 570 });
567 } 571 }
568 }, 572 },
569 clear() { 573 clear() {
570 this.$refs.form.reset(); 574 this.$refs.form.reset();
571 }, 575 },
572 save() { 576 save() {
573 this.editedItem.bookId = this.editedItem._id; 577 this.editedItem.bookId = this.editedItem._id;
574 http() 578 http()
575 .put("/updateBook", this.editedItem) 579 .put("/updateBook", this.editedItem)
576 .then(response => { 580 .then(response => {
577 if ((this.snackbar = true)) { 581 if ((this.snackbar = true)) {
578 this.text = "Successfully Edit Existing Book"; 582 this.text = "Successfully Edit Existing Book";
579 } 583 }
580 this.getBookData(); 584 this.getBookData();
581 this.close(); 585 this.close();
582 }) 586 })
583 .catch(error => { 587 .catch(error => {
584 this.text = error.response.data.message; 588 this.text = error.response.data.message;
585 // console.log(error); 589 // console.log(error);
586 }); 590 });
587 } 591 }
588 }, 592 },
589 mounted() { 593 mounted() {
590 this.token = this.$store.state.token; 594 this.token = this.$store.state.token;
591 this.getBookData(); 595 this.getBookData();
592 }, 596 },
593 created() { 597 created() {
594 this.$root.$on("app:search", search => { 598 this.$root.$on("app:search", search => {
595 this.search = search; 599 this.search = search;
596 }); 600 });
597 }, 601 },
598 beforeDestroy() { 602 beforeDestroy() {
599 // dont forget to remove the listener 603 // dont forget to remove the listener
600 this.$root.$off("app:search"); 604 this.$root.$off("app:search");
601 } 605 }
602 }; 606 };
603 </script> 607 </script>
604 608
605 <style scoped> 609 <style scoped>
606 .active { 610 .active {
607 background-color: gray; 611 background-color: gray;
608 color: white !important; 612 color: white !important;
609 } 613 }
610 .activebtn { 614 .activebtn {
611 color: black !important; 615 color: black !important;
612 } 616 }
613 </style> 617 </style>
src/pages/Library/eBook.vue
Diff comments   View file @99cd791
1 <template> 1 <template>
2 <v-app id="pages-dasboard"> 2 <v-app id="pages-dasboard">
3 <v-tabs grow slider-color="gray"> 3 <v-tabs grow slider-color="gray">
4 <v-tab 4 <v-tab
5 ripple 5 ripple
6 @click="activeTab('existing')" 6 @click="activeTab('existing')"
7 v-bind:class="{ active: isActive }" 7 v-bind:class="{ active: isActive }"
8 id="tab" 8 id="tab"
9 class="subheading" 9 class="subheading"
10 >Existing E-Books</v-tab> 10 >Existing E-Books</v-tab>
11 <v-tab 11 <v-tab
12 ripple 12 ripple
13 @click="activeTab('new')" 13 @click="activeTab('new')"
14 v-bind:class="{ active: newActive }" 14 v-bind:class="{ active: newActive }"
15 id="tab1" 15 id="tab1"
16 User 16 User
17 class="subheading" 17 class="subheading"
18 >Add E-Books</v-tab> 18 >Add E-Books</v-tab>
19 19
20 <!-- ****** EDITS ALL NEWS DETAILS ****** --> 20 <!-- ****** EDITS ALL NEWS DETAILS ****** -->
21 21
22 <v-tab-item> 22 <v-tab-item>
23 <v-snackbar 23 <v-snackbar
24 :timeout="timeout" 24 :timeout="timeout"
25 :top="y === 'top'" 25 :top="y === 'top'"
26 :right="x === 'right'" 26 :right="x === 'right'"
27 :vertical="mode === 'vertical'" 27 :vertical="mode === 'vertical'"
28 v-model="snackbar" 28 v-model="snackbar"
29 color="success" 29 color="success"
30 >{{ text }}</v-snackbar> 30 >{{ text }}</v-snackbar>
31 <v-dialog v-model="dialog" max-width="1000px" scrollable> 31 <v-dialog v-model="dialog" max-width="1000px" scrollable>
32 <v-card flat> 32 <v-card flat>
33 <v-toolbar class="grey lighten-2" flat> 33 <v-toolbar class="grey lighten-2" flat>
34 <v-spacer></v-spacer> 34 <v-spacer></v-spacer>
35 <v-toolbar-title> 35 <v-toolbar-title>
36 <h3>Edit E-Books</h3> 36 <h3>Edit E-Books</h3>
37 </v-toolbar-title> 37 </v-toolbar-title>
38 <v-spacer></v-spacer> 38 <v-spacer></v-spacer>
39 </v-toolbar> 39 </v-toolbar>
40 <v-card-text style="height:760px;"> 40 <v-card-text style="height:760px;">
41 <v-form ref="form"> 41 <v-form ref="form">
42 <v-container fluid> 42 <v-container fluid>
43 <v-layout row> 43 <v-layout row>
44 <v-flex 44 <v-flex
45 xs12 45 xs12
46 class="text-xs-center text-sm-center text-md-center text-lg-center mr-4" 46 class="text-xs-center text-sm-center text-md-center text-lg-center mr-4"
47 > 47 >
48 <input 48 <input
49 type="file" 49 type="file"
50 style="display: none" 50 style="display: none"
51 ref="image" 51 ref="image"
52 accept="image/*" 52 accept="image/*"
53 multiple 53 multiple
54 @change="onImagePicked" 54 @change="onImagePicked"
55 /> 55 />
56 <v-layout justify-center> 56 <v-layout justify-center>
57 <v-flex v-if="files != ''"> 57 <v-flex v-if="files != ''">
58 <img :src="files" height="450" width="500;" /> 58 <img :src="files" height="200" width="160;" />
59 </v-flex> 59 </v-flex>
60 </v-layout> 60 </v-layout>
61 <img 61 <img
62 v-if="editedItem.coverPhotoUrl && files == '' " 62 v-if="editedItem.coverPhotoUrl && files == '' "
63 :src="editedItem.coverPhotoUrl" 63 :src="editedItem.coverPhotoUrl"
64 height="450" 64 height="200"
65 width="500" 65 width="160"
66 alt="eBooks" 66 alt="eBooks"
67 class="pa-2" 67 class="pa-2"
68 /> 68 />
69 <!-- <v-layout justify-center> 69 <!-- <v-layout justify-center>
70 <v-flex 70 <v-flex
71 xs3 71 xs3
72 v-for="Image in editedItem.newsImageUrl" 72 v-for="Image in editedItem.newsImageUrl"
73 :key="Image._id" 73 :key="Image._id"
74 v-if="editedItem.newsImageUrl" 74 v-if="editedItem.newsImageUrl"
75 class="profile-image-wrapper" 75 class="profile-image-wrapper"
76 > 76 >
77 77
78 <v-icon 78 <v-icon
79 class="red edit-profile-icon" 79 class="red edit-profile-icon"
80 dark 80 dark
81 @click="deleteImage(Image._id,editedItem._id)" 81 @click="deleteImage(Image._id,editedItem._id)"
82 >close</v-icon> 82 >close</v-icon>
83 </v-flex> 83 </v-flex>
84 <v-flex v-for="(file, index) in files" :key="index"> 84 <v-flex v-for="(file, index) in files" :key="index">
85 <img :src="file" height="160" width="160" class="pa-2" /> 85 <img :src="file" height="160" width="160" class="pa-2" />
86 </v-flex> 86 </v-flex>
87 </v-layout>--> 87 </v-layout>-->
88 <img 88 <img
89 src="/static/icon/user.png" 89 src="/static/icon/user.png"
90 v-if="editedItem.coverPhotoUrl == ''" 90 v-if="editedItem.coverPhotoUrl == ''"
91 height="160" 91 height="160"
92 width="160" 92 width="160"
93 alt="Books" 93 alt="Books"
94 /> 94 />
95 </v-flex> 95 </v-flex>
96 </v-layout> 96 </v-layout>
97 <v-layout> 97 <v-layout>
98 <v-flex xs12 sm12> 98 <v-flex xs12 sm12>
99 <v-layout> 99 <v-layout>
100 <v-flex xs4 class="pt-4 subheading"> 100 <v-flex xs4 class="pt-4 subheading">
101 <label class="right">Name:</label> 101 <label class="right">Name:</label>
102 </v-flex> 102 </v-flex>
103 <v-flex xs5 class="ml-3"> 103 <v-flex xs5 class="ml-3">
104 <v-text-field 104 <v-text-field
105 v-model="editedItem.name" 105 v-model="editedItem.name"
106 placeholder="fill your Name" 106 placeholder="fill your Name"
107 type="text" 107 type="text"
108 ></v-text-field> 108 ></v-text-field>
109 </v-flex> 109 </v-flex>
110 </v-layout> 110 </v-layout>
111 </v-flex> 111 </v-flex>
112 <v-flex xs12 sm12> 112 <v-flex xs12 sm12>
113 <v-layout> 113 <v-layout>
114 <v-flex xs4 class="pt-4 subheading"> 114 <v-flex xs4 class="pt-4 subheading">
115 <label class="right">Author:</label> 115 <label class="right">Author:</label>
116 </v-flex> 116 </v-flex>
117 <v-flex xs5 class="ml-3"> 117 <v-flex xs5 class="ml-3">
118 <v-text-field placeholder="fill your Author" v-model="editedItem.author"></v-text-field> 118 <v-text-field placeholder="fill your Author" v-model="editedItem.author"></v-text-field>
119 </v-flex> 119 </v-flex>
120 </v-layout> 120 </v-layout>
121 </v-flex> 121 </v-flex>
122 <v-flex xs12 sm12> 122 <v-flex xs12 sm12>
123 <v-layout> 123 <v-layout>
124 <v-flex xs4 class="pt-4 subheading"> 124 <v-flex xs4 class="pt-4 subheading">
125 <label class="right">Class:</label> 125 <label class="right">Class:</label>
126 </v-flex> 126 </v-flex>
127 <v-flex xs5 class="ml-3"> 127 <v-flex xs5 class="ml-3">
128 <v-text-field 128 <v-text-field
129 v-model="editedItem.className" 129 v-model="editedItem.className"
130 :items="addClass" 130 :items="addClass"
131 label="Select Class" 131 label="Select Class"
132 item-text="classNum" 132 item-text="classNum"
133 item-value="_id" 133 item-value="_id"
134 ></v-text-field> 134 ></v-text-field>
135 </v-flex> 135 </v-flex>
136 </v-layout> 136 </v-layout>
137 </v-flex> 137 </v-flex>
138 <v-flex xs12 sm12> 138 <v-flex xs12 sm12>
139 <v-layout> 139 <v-layout>
140 <v-flex xs4 class="pt-4 subheading"> 140 <v-flex xs4 class="pt-4 subheading">
141 <label class="right">Upload Image:</label> 141 <label class="right">Upload Image:</label>
142 </v-flex> 142 </v-flex>
143 <v-flex xs5 class="ml-3"> 143 <v-flex xs5 class="ml-3">
144 <v-text-field 144 <v-text-field
145 label="Select Image" 145 label="Select Image"
146 @click="pickImage" 146 @click="pickImage"
147 v-model="imageName" 147 v-model="imageName"
148 append-icon="attach_file" 148 append-icon="attach_file"
149 multiple 149 multiple
150 ></v-text-field> 150 ></v-text-field>
151 </v-flex> 151 </v-flex>
152 </v-layout> 152 </v-layout>
153 </v-flex> 153 </v-flex>
154 <v-flex xs12 sm12> 154 <v-flex xs12 sm12>
155 <v-layout> 155 <v-layout>
156 <v-flex xs4 class="pt-4 subheading"> 156 <v-flex xs4 class="pt-4 subheading">
157 <label class="right">Upload File:</label> 157 <label class="right">Upload File:</label>
158 </v-flex> 158 </v-flex>
159 <v-flex xs5 class="ml-3"> 159 <v-flex xs5 class="ml-3">
160 <input 160 <input
161 type="file" 161 type="file"
162 style="display: none" 162 style="display: none"
163 ref="file" 163 ref="file"
164 @change="onFilePicked" 164 @change="onFilePicked"
165 /> 165 />
166 <v-text-field 166 <v-text-field
167 label="Select File" 167 label="Select File"
168 @click="pickFile" 168 @click="pickFile"
169 v-model="fileName" 169 v-model="fileName"
170 append-icon="attach_file" 170 append-icon="attach_file"
171 multiple 171 multiple
172 ></v-text-field> 172 ></v-text-field>
173 </v-flex> 173 </v-flex>
174 </v-layout> 174 </v-layout>
175 </v-flex> 175 </v-flex>
176 <v-flex xs12 sm12> 176 <v-flex xs12 sm12>
177 <v-layout> 177 <v-layout>
178 <v-flex xs4 class="pt-4 subheading"> 178 <v-flex xs4 class="pt-4 subheading">
179 <label class="right">Private:</label> 179 <label class="right">Private:</label>
180 </v-flex> 180 </v-flex>
181 <v-flex xs5 class="ml-3"> 181 <v-flex xs5 class="ml-3">
182 <v-checkbox v-model="editedItem.private"></v-checkbox> 182 <v-checkbox v-model="editedItem.private"></v-checkbox>
183 </v-flex> 183 </v-flex>
184 </v-layout> 184 </v-layout>
185 </v-flex> 185 </v-flex>
186 </v-layout> 186 </v-layout>
187 <v-layout> 187 <v-layout>
188 <v-flex xs12 sm8 offset-sm2> 188 <v-flex xs12 sm8 offset-sm2>
189 <v-card-actions> 189 <v-card-actions>
190 <v-btn round dark @click.native="close">Cancel</v-btn> 190 <v-btn round dark @click.native="close">Cancel</v-btn>
191 <v-spacer></v-spacer> 191 <v-spacer></v-spacer>
192 <v-btn round dark @click="save" :loading="loadingUpadte">Save</v-btn> 192 <v-btn round dark @click="save" :loading="loadingUpadte">Save</v-btn>
193 </v-card-actions> 193 </v-card-actions>
194 </v-flex> 194 </v-flex>
195 </v-layout> 195 </v-layout>
196 </v-container> 196 </v-container>
197 </v-form> 197 </v-form>
198 </v-card-text> 198 </v-card-text>
199 </v-card> 199 </v-card>
200 </v-dialog> 200 </v-dialog>
201 201
202 <!-- ****** PROFILE VIEW ALL NEWS DEATILS ****** --> 202 <!-- ****** PROFILE VIEW ALL NEWS DEATILS ****** -->
203 203
204 <v-dialog v-model="dialog1" max-width="800px" scrollable> 204 <v-dialog v-model="dialog1" max-width="800px" scrollable>
205 <v-card style="height: 700px;"> 205 <v-card style="height: 700px;">
206 <v-toolbar color="grey lighten-2" flat> 206 <v-toolbar color="grey lighten-2" flat>
207 <v-spacer></v-spacer> 207 <v-spacer></v-spacer>
208 <v-toolbar-title> 208 <v-toolbar-title>
209 <h3>E-Books</h3> 209 <h3>E-Books</h3>
210 </v-toolbar-title> 210 </v-toolbar-title>
211 <v-spacer></v-spacer> 211 <v-spacer></v-spacer>
212 <v-icon @click="close1">close</v-icon> 212 <v-icon @click="close1">close</v-icon>
213 </v-toolbar> 213 </v-toolbar>
214 <v-card-text> 214 <v-card-text>
215 <v-container> 215 <v-container>
216 <v-layout wrap> 216 <v-layout wrap>
217 <v-flex sm12 xs12> 217 <v-flex sm12 xs12>
218 <iframe :src="editedItem.fileUrl" height="600" width="100%"></iframe> 218 <iframe :src="editedItem.fileUrl" height="600" width="100%"></iframe>
219 </v-flex> 219 </v-flex>
220 </v-layout> 220 </v-layout>
221 </v-container> 221 </v-container>
222 </v-card-text> 222 </v-card-text>
223 </v-card> 223 </v-card>
224 </v-dialog> 224 </v-dialog>
225 <!-- ****** EXISTING-USERS NEWS TABLE ****** --> 225 <!-- ****** EXISTING-USERS NEWS TABLE ****** -->
226 <v-data-table 226 <v-data-table
227 :headers="headers" 227 :headers="headers"
228 :items="eBookData" 228 :items="eBookData"
229 :pagination.sync="pagination" 229 :pagination.sync="pagination"
230 :search="search" 230 :search="search"
231 > 231 >
232 <template slot="items" slot-scope="props"> 232 <template slot="items" slot-scope="props">
233 <td class="text-xs-center">{{ props.index + 1}}</td> 233 <td class="text-xs-center">{{ props.index + 1}}</td>
234 <td id="td" class="text-xs-center"> 234 <td id="td" class="text-xs-center">
235 <img :src="props.item.coverPhotoUrl" alt="newsImage" width="100" height="70" /> 235 <img :src="props.item.coverPhotoUrl" alt="newsImage" width="100" height="70" />
236 </td> 236 </td>
237 <td id="td" class="text-xs-center">{{ props.item.name}}</td> 237 <td id="td" class="text-xs-center">{{ props.item.name}}</td>
238 <td id="td" class="text-xs-center">{{ props.item.author}}</td> 238 <td id="td" class="text-xs-center">{{ props.item.author}}</td>
239 <td id="td" class="text-xs-center">{{ props.item.classId.classNum}}</td> 239 <td id="td" class="text-xs-center">{{ props.item.classId.classNum}}</td>
240 240
241 <td class="text-xs-center"> 241 <td class="text-xs-center">
242 <span> 242 <span>
243 <v-tooltip top> 243 <v-tooltip top>
244 <img 244 <img
245 slot="activator" 245 slot="activator"
246 style="cursor:pointer; width:25px; height:18px; " 246 style="cursor:pointer; width:25px; height:18px; "
247 class="mr5" 247 class="mr5"
248 @click="profile(props.item)" 248 @click="profile(props.item)"
249 src="/static/icon/eye1.png" 249 src="/static/icon/eye1.png"
250 /> 250 />
251 <span>View</span> 251 <span>View</span>
252 </v-tooltip> 252 </v-tooltip>
253 <v-tooltip top> 253 <v-tooltip top>
254 <img 254 <img
255 slot="activator" 255 slot="activator"
256 style="cursor:pointer; width:20px; height:18px; " 256 style="cursor:pointer; width:20px; height:18px; "
257 class="mr5" 257 class="mr5"
258 @click="editItem(props.item)" 258 @click="editItem(props.item)"
259 src="/static/icon/edit1.png" 259 src="/static/icon/edit1.png"
260 /> 260 />
261 <span>Edit</span> 261 <span>Edit</span>
262 </v-tooltip> 262 </v-tooltip>
263 <v-tooltip top> 263 <v-tooltip top>
264 <img 264 <img
265 slot="activator" 265 slot="activator"
266 style="cursor:pointer; width:20px; height:20px; " 266 style="cursor:pointer; width:20px; height:20px; "
267 class="mr5" 267 class="mr5"
268 @click="deleteItem(props.item)" 268 @click="deleteItem(props.item)"
269 src="/static/icon/delete1.png" 269 src="/static/icon/delete1.png"
270 /> 270 />
271 <span>Delete</span> 271 <span>Delete</span>
272 </v-tooltip> 272 </v-tooltip>
273 </span> 273 </span>
274 </td> 274 </td>
275 </template> 275 </template>
276 <v-alert 276 <v-alert
277 slot="no-results" 277 slot="no-results"
278 :value="true" 278 :value="true"
279 color="error" 279 color="error"
280 icon="warning" 280 icon="warning"
281 >Your search for "{{ search }}" found no results.</v-alert> 281 >Your search for "{{ search }}" found no results.</v-alert>
282 </v-data-table> 282 </v-data-table>
283 </v-tab-item> 283 </v-tab-item>
284 284
285 <!-- ****** ADD MULTIPLE E-BOOK ****** --> 285 <!-- ****** ADD MULTIPLE E-BOOK ****** -->
286 286
287 <v-tab-item> 287 <v-tab-item>
288 <v-container> 288 <v-container>
289 <v-snackbar 289 <v-snackbar
290 :timeout="timeout" 290 :timeout="timeout"
291 :top="y === 'top'" 291 :top="y === 'top'"
292 :right="x === 'right'" 292 :right="x === 'right'"
293 :vertical="mode === 'vertical'" 293 :vertical="mode === 'vertical'"
294 v-model="snackbar" 294 v-model="snackbar"
295 color="success" 295 color="success"
296 >{{ text }}</v-snackbar> 296 >{{ text }}</v-snackbar>
297 <v-flex xs12 sm12 class="my-4"> 297 <v-flex xs12 sm12 class="my-4">
298 <v-card flat> 298 <v-card flat>
299 <v-form ref="form" v-model="valid" lazy-validation> 299 <v-form ref="form" v-model="valid" lazy-validation>
300 <v-container fluid> 300 <v-container fluid>
301 <v-layout> 301 <v-layout>
302 <v-flex 302 <v-flex
303 xs12 303 xs12
304 class="text-xs-center text-sm-center text-md-center text-lg-center my-4 mr-4" 304 class="text-xs-center text-sm-center text-md-center text-lg-center my-4 mr-4"
305 > 305 >
306 <input 306 <input
307 type="file" 307 type="file"
308 style="display: none" 308 style="display: none"
309 ref="image" 309 ref="image"
310 accept="image/*" 310 accept="image/*"
311 @change="onImagePicked" 311 @change="onImagePicked"
312 /> 312 />
313 <v-layout justify-center> 313 <v-layout justify-center>
314 <v-flex v-if="files != ''"> 314 <v-flex v-if="files != ''">
315 <img :src="files" height="240" width="260px;" /> 315 <img :src="files" height="240" width="260px;" />
316 </v-flex> 316 </v-flex>
317 </v-layout> 317 </v-layout>
318 <img 318 <img
319 src="/static/icon/user.png" 319 src="/static/icon/user.png"
320 v-if="files ==''" 320 v-if="files ==''"
321 height="140" 321 height="140"
322 width="180px;" 322 width="180px;"
323 /> 323 />
324 </v-flex> 324 </v-flex>
325 </v-layout> 325 </v-layout>
326 <v-flex xs12> 326 <v-flex xs12>
327 <v-layout> 327 <v-layout>
328 <v-flex xs4 class="pt-4 subheading"> 328 <v-flex xs4 class="pt-4 subheading">
329 <label class="right">Name:</label> 329 <label class="right">Name:</label>
330 </v-flex> 330 </v-flex>
331 <v-flex xs4 class="ml-3"> 331 <v-flex xs4 class="ml-3">
332 <v-text-field 332 <v-text-field
333 v-model="addEBooks.name" 333 v-model="addEBooks.name"
334 placeholder="fill your Title" 334 placeholder="fill your Title"
335 name="name" 335 name="name"
336 type="text" 336 type="text"
337 :rules="titleRules" 337 :rules="titleRules"
338 required 338 required
339 ></v-text-field> 339 ></v-text-field>
340 </v-flex> 340 </v-flex>
341 </v-layout> 341 </v-layout>
342 </v-flex> 342 </v-flex>
343 <v-flex xs12> 343 <v-flex xs12>
344 <v-layout> 344 <v-layout>
345 <v-flex xs4 class="pt-4 subheading"> 345 <v-flex xs4 class="pt-4 subheading">
346 <label class="right">Author:</label> 346 <label class="right">Author:</label>
347 </v-flex> 347 </v-flex>
348 <v-flex xs4 class="ml-3"> 348 <v-flex xs4 class="ml-3">
349 <v-text-field 349 <v-text-field
350 v-model="addEBooks.author" 350 v-model="addEBooks.author"
351 placeholder="fill your Author Name" 351 placeholder="fill your Author Name"
352 name="name" 352 name="name"
353 type="text" 353 type="text"
354 :rules="titleRules" 354 :rules="titleRules"
355 required 355 required
356 ></v-text-field> 356 ></v-text-field>
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 xs4 class="pt-4 subheading"> 362 <v-flex xs4 class="pt-4 subheading">
363 <label class="right">Class:</label> 363 <label class="right">Class:</label>
364 </v-flex> 364 </v-flex>
365 <v-flex xs4 class="ml-3"> 365 <v-flex xs4 class="ml-3">
366 <v-select 366 <v-select
367 v-model="addEBooks.classId" 367 v-model="addEBooks.classId"
368 :items="addClass" 368 :items="addClass"
369 label="Select Class" 369 label="Select Class"
370 item-text="classNum" 370 item-text="classNum"
371 item-value="_id" 371 item-value="_id"
372 :rules="titleRules" 372 :rules="titleRules"
373 required 373 required
374 ></v-select> 374 ></v-select>
375 </v-flex> 375 </v-flex>
376 </v-layout> 376 </v-layout>
377 </v-flex> 377 </v-flex>
378 <v-flex xs12> 378 <v-flex xs12>
379 <v-layout> 379 <v-layout>
380 <v-flex xs4 class="pt-4 subheading"> 380 <v-flex xs4 class="pt-4 subheading">
381 <label class="right">Upload Image:</label> 381 <label class="right">Upload Image:</label>
382 </v-flex> 382 </v-flex>
383 <v-flex xs4 class="ml-3"> 383 <v-flex xs4 class="ml-3">
384 <v-text-field 384 <v-text-field
385 label="Select Image" 385 label="Select Image"
386 @click="pickImage" 386 @click="pickImage"
387 v-model="imageName" 387 v-model="imageName"
388 append-icon="attach_file" 388 append-icon="attach_file"
389 multiple 389 multiple
390 ></v-text-field> 390 ></v-text-field>
391 </v-flex> 391 </v-flex>
392 </v-layout> 392 </v-layout>
393 </v-flex> 393 </v-flex>
394 <v-flex xs12> 394 <v-flex xs12>
395 <v-layout> 395 <v-layout>
396 <v-flex xs4 class="pt-4 subheading"> 396 <v-flex xs4 class="pt-4 subheading">
397 <label class="right">Upload File:</label> 397 <label class="right">Upload File:</label>
398 </v-flex> 398 </v-flex>
399 <v-flex xs4 class="ml-3"> 399 <v-flex xs4 class="ml-3">
400 <input type="file" style="display: none" ref="file" @change="onFilePicked" /> 400 <input type="file" style="display: none" ref="file" @change="onFilePicked" />
401 <v-text-field 401 <v-text-field
402 label="Select File" 402 label="Select File"
403 @click="pickFile" 403 @click="pickFile"
404 v-model="fileName" 404 v-model="fileName"
405 append-icon="attach_file" 405 append-icon="attach_file"
406 multiple 406 multiple
407 ></v-text-field> 407 ></v-text-field>
408 </v-flex> 408 </v-flex>
409 </v-layout> 409 </v-layout>
410 </v-flex> 410 </v-flex>
411 <v-flex xs12> 411 <v-flex xs12>
412 <v-layout> 412 <v-layout>
413 <v-flex xs4 class="pt-3 subheading"> 413 <v-flex xs4 class="pt-3 subheading">
414 <label class="right">Private:</label> 414 <label class="right">Private:</label>
415 </v-flex> 415 </v-flex>
416 <v-flex xs4 class="ml-3"> 416 <v-flex xs4 class="ml-3">
417 <v-checkbox v-model="addEBooks.private"></v-checkbox> 417 <v-checkbox v-model="addEBooks.private"></v-checkbox>
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-flex xs12 sm7 offset-sm2> 422 <v-flex xs12 sm7 offset-sm2>
423 <v-card-actions> 423 <v-card-actions>
424 <v-btn @click="clear" round dark>clear</v-btn> 424 <v-btn @click="clear" round dark>clear</v-btn>
425 <v-spacer></v-spacer> 425 <v-spacer></v-spacer>
426 <v-btn @click="submit" round dark :loading="loading">Add</v-btn> 426 <v-btn @click="submit" round dark :loading="loading">Add</v-btn>
427 </v-card-actions> 427 </v-card-actions>
428 </v-flex> 428 </v-flex>
429 </v-layout> 429 </v-layout>
430 </v-container> 430 </v-container>
431 </v-form> 431 </v-form>
432 </v-card> 432 </v-card>
433 </v-flex> 433 </v-flex>
434 </v-container> 434 </v-container>
435 </v-tab-item> 435 </v-tab-item>
436 </v-tabs> 436 </v-tabs>
437 <div class="loader" v-if="showLoader"> 437 <div class="loader" v-if="showLoader">
438 <v-progress-circular indeterminate color="white"></v-progress-circular> 438 <v-progress-circular indeterminate color="white"></v-progress-circular>
439 </div> 439 </div>
440 </v-app> 440 </v-app>
441 </template> 441 </template>
442 442
443 <script> 443 <script>
444 import http from "@/Services/http.js"; 444 import http from "@/Services/http.js";
445 import Util from "@/util"; 445 import Util from "@/util";
446 446
447 export default { 447 export default {
448 data: () => ({ 448 data: () => ({
449 snackbar: false, 449 snackbar: false,
450 y: "top", 450 y: "top",
451 x: "right", 451 x: "right",
452 mode: "", 452 mode: "",
453 timeout: 3000, 453 timeout: 3000,
454 text: "", 454 text: "",
455 loading: false, 455 loading: false,
456 loadingUpadte: false, 456 loadingUpadte: false,
457 date: null, 457 date: null,
458 search: "", 458 search: "",
459 showLoader: false, 459 showLoader: false,
460 dialog: false, 460 dialog: false,
461 dialog1: false, 461 dialog1: false,
462 valid: true, 462 valid: true,
463 isActive: true, 463 isActive: true,
464 newActive: false, 464 newActive: false,
465 addClass: [], 465 addClass: [],
466 addSection: [], 466 addSection: [],
467 AddUsercredentials: {}, 467 AddUsercredentials: {},
468 pagination: { 468 pagination: {
469 rowsPerPage: 15 469 rowsPerPage: 15
470 }, 470 },
471 imageName: "", 471 imageName: "",
472 fileName: "", 472 fileName: "",
473 imageUrl: "", 473 imageUrl: "",
474 imageFile: "", 474 imageFile: "",
475 image: [], 475 image: [],
476 upload: "", 476 upload: "",
477 files: "", 477 files: "",
478 anyFile: "", 478 anyFile: "",
479 titleRules: [v => !!v || " Tilte is required"], 479 titleRules: [v => !!v || " Tilte is required"],
480 descriptionRules: [v => !!v || " Description is required"], 480 descriptionRules: [v => !!v || " Description is required"],
481 headers: [ 481 headers: [
482 { 482 {
483 align: "justify-center", 483 align: "justify-center",
484 text: "No", 484 text: "No",
485 sortable: false, 485 sortable: false,
486 value: "No" 486 value: "No"
487 }, 487 },
488 { text: "Photo", vaue: "fileUrl", sortable: false, align: "center" }, 488 { text: "Photo", vaue: "fileUrl", sortable: false, align: "center" },
489 { text: "Name", vaue: "name", sortable: false, align: "center" }, 489 { text: "Name", vaue: "name", sortable: false, align: "center" },
490 { text: "Author", value: "author", sortable: false, align: "center" }, 490 { text: "Author", value: "author", sortable: false, align: "center" },
491 { 491 {
492 text: "Class", 492 text: "Class",
493 value: "classId", 493 value: "classId",
494 sortable: false, 494 sortable: false,
495 align: "center" 495 align: "center"
496 }, 496 },
497 { text: "Action", value: "", sortable: false, align: "center" } 497 { text: "Action", value: "", sortable: false, align: "center" }
498 ], 498 ],
499 eBookData: [], 499 eBookData: [],
500 editedIndex: -1, 500 editedIndex: -1,
501 addEBooks: { 501 addEBooks: {
502 private: false 502 private: false
503 }, 503 },
504 editedItem: {}, 504 editedItem: {},
505 token: "" 505 token: ""
506 }), 506 }),
507 methods: { 507 methods: {
508 pickImage() { 508 pickImage() {
509 this.$refs.image.click(); 509 this.$refs.image.click();
510 }, 510 },
511 pickFile() { 511 pickFile() {
512 this.$refs.file.click(); 512 this.$refs.file.click();
513 }, 513 },
514 onImagePicked(e) { 514 onImagePicked(e) {
515 // console.log(e) 515 // console.log(e)
516 const files = e.target.files; 516 const files = e.target.files;
517 /** fetch Image Name **/ 517 /** fetch Image Name **/
518 if (files[0] !== undefined) { 518 if (files[0] !== undefined) {
519 this.imageName = files[0].name; 519 this.imageName = files[0].name;
520 if (this.imageName.lastIndexOf(".") <= 0) { 520 if (this.imageName.lastIndexOf(".") <= 0) {
521 return; 521 return;
522 } 522 }
523 /** Select many image and showing many image add to news card **/ 523 /** Select many image and showing many image add to news card **/
524 const fr = new FileReader(); 524 const fr = new FileReader();
525 fr.readAsDataURL(files[0]); 525 fr.readAsDataURL(files[0]);
526 fr.addEventListener("load", () => { 526 fr.addEventListener("load", () => {
527 this.files = fr.result; 527 this.files = fr.result;
528 }); 528 });
529 } else { 529 } else {
530 this.imageName = ""; 530 this.imageName = "";
531 this.imageFile = ""; 531 this.imageFile = "";
532 this.files = ""; 532 this.files = "";
533 this.imageUrl = ""; 533 this.imageUrl = "";
534 } 534 }
535 }, 535 },
536 getEBooksList() { 536 getEBooksList() {
537 this.showLoader = true; 537 this.showLoader = true;
538 http() 538 http()
539 .get("/getEBooksList", { 539 .get("/getEBooksList", {
540 params: { schoolId: this.$store.state.schoolId },
540 headers: { Authorization: "Bearer " + this.token } 541 headers: { Authorization: "Bearer " + this.token }
541 }) 542 })
542 .then(response => { 543 .then(response => {
543 this.eBookData = response.data.data; 544 this.eBookData = response.data.data;
544 this.showLoader = false; 545 this.showLoader = false;
545 }) 546 })
546 .catch(error => { 547 .catch(error => {
547 // console.log("err====>", err); 548 // console.log("err====>", err);
548 this.showLoader = false; 549 this.showLoader = false;
549 if (error.response.status === 401) { 550 if (error.response.status === 401) {
550 this.$router.replace({ path: "/" }); 551 this.$router.replace({ path: "/" });
551 this.$store.dispatch("setToken", null); 552 this.$store.dispatch("setToken", null);
552 this.$store.dispatch("Id", null); 553 this.$store.dispatch("Id", null);
553 } 554 }
554 }); 555 });
555 }, 556 },
556 onFilePicked(e) { 557 onFilePicked(e) {
557 // console.log(e) 558 // console.log(e)
558 const files = e.target.files; 559 const files = e.target.files;
559 /** fetch Image Name **/ 560 /** fetch Image Name **/
560 if (files[0] !== undefined) { 561 if (files[0] !== undefined) {
561 this.fileName = files[0].name; 562 this.fileName = files[0].name;
562 if (this.fileName.lastIndexOf(".") <= 0) { 563 if (this.fileName.lastIndexOf(".") <= 0) {
563 return; 564 return;
564 } 565 }
565 const fr = new FileReader(); 566 const fr = new FileReader();
566 fr.readAsDataURL(files[0]); 567 fr.readAsDataURL(files[0]);
567 fr.addEventListener("load", () => { 568 fr.addEventListener("load", () => {
568 this.anyFile = fr.result; 569 this.anyFile = fr.result;
569 // console.log(" this.anyFile Url", this.anyFile ) 570 // console.log(" this.anyFile Url", this.anyFile )
570 }); 571 });
571 } else { 572 } else {
572 this.anyFile = ""; 573 this.anyFile = "";
573 this.fileName = ""; 574 this.fileName = "";
574 } 575 }
575 }, 576 },
576 editItem(item) { 577 editItem(item) {
577 this.files = []; 578 this.files = [];
578 this.editedIndex = this.eBookData.indexOf(item); 579 this.editedIndex = this.eBookData.indexOf(item);
579 this.editedItem = Object.assign({}, item); 580 this.editedItem = Object.assign({}, item);
580 this.editedItem.className = item.classId.classNum; 581 this.editedItem.className = item.classId.classNum;
581 this.dialog = true; 582 this.dialog = true;
582 }, 583 },
583 profile(item) { 584 profile(item) {
584 this.editedIndex = this.eBookData.indexOf(item); 585 this.editedIndex = this.eBookData.indexOf(item);
585 this.editedItem = Object.assign({}, item); 586 this.editedItem = Object.assign({}, item);
586 this.dialog1 = true; 587 this.dialog1 = true;
587 }, 588 },
588 deleteItem(item) { 589 deleteItem(item) {
589 let deleteEBooks = { 590 let deleteEBooks = {
590 ebookId: item._id 591 ebookId: item._id
591 }; 592 };
592 http() 593 http()
593 .delete( 594 .delete(
594 "/deleteEBook", 595 "/deleteEBook",
595 confirm("Are you sure you want to delete this?") && { 596 confirm("Are you sure you want to delete this?") && {
596 params: deleteEBooks 597 params: deleteEBooks
597 } 598 }
598 ) 599 )
599 .then(response => { 600 .then(response => {
600 this.snackbar = true; 601 this.snackbar = true;
601 this.text = "Successfully delete Existing News"; 602 this.text = "Successfully delete Existing News";
602 this.getEBooksList(); 603 this.getEBooksList();
603 }) 604 })
604 .catch(error => { 605 .catch(error => {
605 this.snackbar = true; 606 this.snackbar = true;
606 this.text = error.response.data.message; 607 this.text = error.response.data.message;
607 }); 608 });
608 }, 609 },
609 activeTab(type) { 610 activeTab(type) {
610 switch (type) { 611 switch (type) {
611 case "existing": 612 case "existing":
612 this.newActive = false; 613 this.newActive = false;
613 this.isActive = true; 614 this.isActive = true;
614 break; 615 break;
615 616
616 default: 617 default:
617 this.newActive = true; 618 this.newActive = true;
618 this.isActive = false; 619 this.isActive = false;
619 break; 620 break;
620 } 621 }
621 }, 622 },
622 close() { 623 close() {
623 this.dialog = false; 624 this.dialog = false;
624 setTimeout(() => { 625 setTimeout(() => {
625 this.editedItem = Object.assign({}, this.defaultItem); 626 this.editedItem = Object.assign({}, this.defaultItem);
626 this.editedIndex = -1; 627 this.editedIndex = -1;
627 }, 300); 628 }, 300);
628 }, 629 },
629 close1() { 630 close1() {
630 this.dialog1 = false; 631 this.dialog1 = false;
631 }, 632 },
632 submit() { 633 submit() {
633 this.loading = true; 634 this.loading = true;
634 if (this.$refs.form.validate()) { 635 if (this.$refs.form.validate()) {
635 if (this.files) { 636 if (this.files) {
636 const [baseUrl, imageUrl] = this.files.split(/,/); 637 const [baseUrl, imageUrl] = this.files.split(/,/);
637 this.addEBooks.uploadCover = imageUrl; 638 this.addEBooks.uploadCover = imageUrl;
638 // console.log("anyFile.split(/,/)", this.addEBooks.uploadCover); 639 // console.log("anyFile.split(/,/)", this.addEBooks.uploadCover);
639 } 640 }
640 if (this.anyFile) { 641 if (this.anyFile) {
641 const [baseUrl, fileUrl] = this.anyFile.split(/,/); 642 const [baseUrl, fileUrl] = this.anyFile.split(/,/);
642 this.addEBooks.uploadFile = fileUrl; 643 this.addEBooks.uploadFile = fileUrl;
643 // console.log("anyFile.split(/,/)", this.addEBooks.uploadFile); 644 // console.log("anyFile.split(/,/)", this.addEBooks.uploadFile);
644 } 645 }
646 this.addEBooks = this.$store.state.schoolId;
645 http() 647 http()
646 .post("/createEBook", this.addEBooks) 648 .post("/createEBook", this.addEBooks)
647 .then(response => { 649 .then(response => {
648 this.snackbar = true; 650 this.snackbar = true;
649 this.text = "New E-Book added successfully"; 651 this.text = "New E-Book added successfully";
650 this.addEBooks.uploadCover = ""; 652 this.addEBooks.uploadCover = "";
651 this.addEBooks.uploadFile = ""; 653 this.addEBooks.uploadFile = "";
652 this.files = ""; 654 this.files = "";
653 this.getEBooksList(); 655 this.getEBooksList();
654 this.loading = false; 656 this.loading = false;
655 this.clear(); 657 this.clear();
656 }) 658 })
657 .catch(error => { 659 .catch(error => {
658 this.snackbar = true; 660 this.snackbar = true;
659 this.text = error.response.data.message; 661 this.text = error.response.data.message;
660 }); 662 });
661 } 663 }
662 }, 664 },
663 clear() { 665 clear() {
664 this.$refs.form.reset(); 666 this.$refs.form.reset();
665 this.addEBooks.uploadCover = ""; 667 this.addEBooks.uploadCover = "";
666 this.files = ""; 668 this.files = "";
667 }, 669 },
668 save() { 670 save() {
669 this.loadingUpadte = true; 671 this.loadingUpadte = true;
670 if (this.files.length > 0) { 672 if (this.files.length > 0) {
671 const [baseUrl, imageUrl] = this.files.split(/,/); 673 const [baseUrl, imageUrl] = this.files.split(/,/);
672 this.editedItem.uploadCover = imageUrl; 674 this.editedItem.uploadCover = imageUrl;
673 // console.log("anyFile.split(/,/)", this.addEBooks.uploadCover); 675 // console.log("anyFile.split(/,/)", this.addEBooks.uploadCover);
674 } 676 }
675 if (this.anyFile) { 677 if (this.anyFile) {
676 const [baseUrl, fileUrl] = this.anyFile.split(/,/); 678 const [baseUrl, fileUrl] = this.anyFile.split(/,/);
677 this.editedItem.uploadFile = fileUrl; 679 this.editedItem.uploadFile = fileUrl;
678 // console.log("anyFile.split(/,/)", this.addEBooks.uploadFile); 680 // console.log("anyFile.split(/,/)", this.addEBooks.uploadFile);
679 } 681 }
680 this.editedItem.ebookId = this.editedItem._id; 682 this.editedItem.ebookId = this.editedItem._id;
681 http() 683 http()
682 .put("/updateEBook", this.editedItem) 684 .put("/updateEBook", this.editedItem)
683 .then(response => { 685 .then(response => {
684 this.loadingUpadte = false; 686 this.loadingUpadte = false;
685 this.snackbar = true; 687 this.snackbar = true;
686 this.text = "Successfully Edit Existing E-Book"; 688 this.text = "Successfully Edit Existing E-Book";
687 this.getEBooksList(); 689 this.getEBooksList();
688 this.editedItem.uploadFile = ""; 690 this.editedItem.uploadFile = "";
689 this.editedItem.uploadCover = ""; 691 this.editedItem.uploadCover = "";
690 this.anyFile = ""; 692 this.anyFile = "";
691 this.files = ""; 693 this.files = "";
692 this.close(); 694 this.close();
693 }) 695 })
694 .catch(error => { 696 .catch(error => {
695 this.loadingUpadte = false; 697 this.loadingUpadte = false;
696 this.snackbar = true; 698 this.snackbar = true;
697 this.text = error.response.data.message; 699 this.text = error.response.data.message;
698 // console.log(error); 700 // console.log(error);
699 }); 701 });
700 }, 702 },
701 getAllClass() { 703 getAllClass() {
702 http() 704 http()
703 .get("/getClassesList", { 705 .get("/getClassesList", {
704 headers: { Authorization: "Bearer " + this.token } 706 headers: { Authorization: "Bearer " + this.token }
705 }) 707 })
706 .then(response => { 708 .then(response => {
707 this.addClass = response.data.data; 709 this.addClass = response.data.data;
708 }) 710 })
709 .catch(err => { 711 .catch(err => {
710 // console.log("err====>", err); 712 // console.log("err====>", err);
711 // this.$router.replace({ path: "/" }); 713 // this.$router.replace({ path: "/" });
712 }); 714 });
713 } 715 }
714 }, 716 },
715 mounted() { 717 mounted() {
716 this.token = this.$store.state.token; 718 this.token = this.$store.state.token;
717 this.getEBooksList(); 719 this.getEBooksList();
718 this.getAllClass(); 720 this.getAllClass();
719 // this.getBookData(); 721 // this.getBookData();
720 // this.editItem; 722 // this.editItem;
721 }, 723 },
722 created() { 724 created() {
723 this.$root.$on("app:search", search => { 725 this.$root.$on("app:search", search => {
724 this.search = search; 726 this.search = search;
725 }); 727 });
726 }, 728 },
727 beforeDestroy() { 729 beforeDestroy() {
728 // dont forget to remove the listener 730 // dont forget to remove the listener
729 this.$root.$off("app:search"); 731 this.$root.$off("app:search");
730 } 732 }
731 }; 733 };
732 </script> 734 </script>
733 <style scoped> 735 <style scoped>
734 .active { 736 .active {
735 background-color: gray; 737 background-color: gray;
736 color: white !important; 738 color: white !important;
737 } 739 }
738 .activebtn { 740 .activebtn {
739 color: black !important; 741 color: black !important;
740 } 742 }
741 </style> 743 </style>
src/pages/Library/issue.vue
Diff comments   View file @99cd791
1 <template> 1 <template>
2 <v-app id="pages-dasboard"> 2 <v-app id="pages-dasboard">
3 <v-tabs grow slider-color="gray"> 3 <v-tabs grow slider-color="gray">
4 <v-tab 4 <v-tab
5 ripple 5 ripple
6 @click="activeTab('existing')" 6 @click="activeTab('existing')"
7 v-bind:class="{ active: isActive }" 7 v-bind:class="{ active: isActive }"
8 id="tab" 8 id="tab"
9 class="subheading" 9 class="subheading"
10 >Existing Issue</v-tab> 10 >Existing Issue</v-tab>
11 <v-tab 11 <v-tab
12 ripple 12 ripple
13 @click="activeTab('new')" 13 @click="activeTab('new')"
14 v-bind:class="{ active: newActive }" 14 v-bind:class="{ active: newActive }"
15 id="tab1" 15 id="tab1"
16 User 16 User
17 class="subheading" 17 class="subheading"
18 >Add Issue a book</v-tab> 18 >Add Issue a book</v-tab>
19 19
20 <!-- ****** EDIT ISSUE A BOOK ****** --> 20 <!-- ****** EDIT ISSUE A BOOK ****** -->
21 21
22 <v-tab-item> 22 <v-tab-item>
23 <v-snackbar 23 <v-snackbar
24 :timeout="timeout" 24 :timeout="timeout"
25 :top="y === 'top'" 25 :top="y === 'top'"
26 :right="x === 'right'" 26 :right="x === 'right'"
27 :vertical="mode === 'vertical'" 27 :vertical="mode === 'vertical'"
28 v-model="snackbar" 28 v-model="snackbar"
29 color="success" 29 color="success"
30 >{{ text }}</v-snackbar> 30 >{{ text }}</v-snackbar>
31 <v-dialog v-model="dialog" max-width="1000px" scrollable> 31 <v-dialog v-model="dialog" max-width="1000px" scrollable>
32 <v-card flat> 32 <v-card flat>
33 <v-toolbar class="grey lighten-2" flat> 33 <v-toolbar class="grey lighten-2" flat>
34 <v-spacer></v-spacer> 34 <v-spacer></v-spacer>
35 <v-toolbar-title> 35 <v-toolbar-title>
36 <h3>Edit Issue</h3> 36 <h3>Edit Issue</h3>
37 </v-toolbar-title> 37 </v-toolbar-title>
38 <v-spacer></v-spacer> 38 <v-spacer></v-spacer>
39 </v-toolbar> 39 </v-toolbar>
40 <v-card-text style="height:600px;"> 40 <v-card-text style="height:600px;">
41 <v-form ref="form"> 41 <v-form ref="form">
42 <v-container fluid> 42 <v-container fluid>
43 <v-layout> 43 <v-layout>
44 <v-flex xs12 sm12> 44 <v-flex xs12 sm12>
45 <v-layout> 45 <v-layout>
46 <v-flex xs4 class="pt-4 subheading"> 46 <v-flex xs4 class="pt-4 subheading">
47 <label class="right">Library Id:</label> 47 <label class="right">Library Id:</label>
48 </v-flex> 48 </v-flex>
49 <v-flex xs5 class="ml-3"> 49 <v-flex xs5 class="ml-3">
50 <v-text-field 50 <v-text-field
51 v-model="editedItem.libraryId" 51 v-model="editedItem.libraryId"
52 placeholder="fill your Library Id" 52 placeholder="fill your Library Id"
53 name="name" 53 name="name"
54 type="text" 54 type="text"
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 sm12> 59 <v-flex xs12 sm12>
60 <v-layout> 60 <v-layout>
61 <v-flex xs4 class="pt-4 subheading"> 61 <v-flex xs4 class="pt-4 subheading">
62 <label class="right">Book:</label> 62 <label class="right">Book:</label>
63 </v-flex> 63 </v-flex>
64 <v-flex xs5 class="ml-3"> 64 <v-flex xs5 class="ml-3">
65 <v-text-field 65 <v-text-field
66 v-model="editedItem.name" 66 v-model="editedItem.name"
67 placeholder="fill your Book name" 67 placeholder="fill your Book name"
68 name="name" 68 name="name"
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">Author:</label> 77 <label class="right">Author:</label>
78 </v-flex> 78 </v-flex>
79 <v-flex xs5 class="ml-3"> 79 <v-flex xs5 class="ml-3">
80 <v-text-field 80 <v-text-field
81 placeholder="fill your Author Name" 81 placeholder="fill your Author Name"
82 v-model="editedItem.author" 82 v-model="editedItem.author"
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">Subject Code:</label> 91 <label class="right">Subject Code:</label>
92 </v-flex> 92 </v-flex>
93 <v-flex xs5 class="ml-3"> 93 <v-flex xs5 class="ml-3">
94 <v-text-field 94 <v-text-field
95 placeholder="fill your Subject Codes" 95 placeholder="fill your Subject Codes"
96 v-model="editedItem.subjectCode" 96 v-model="editedItem.subjectCode"
97 type="text" 97 type="text"
98 ></v-text-field> 98 ></v-text-field>
99 </v-flex> 99 </v-flex>
100 </v-layout> 100 </v-layout>
101 </v-flex> 101 </v-flex>
102 <v-flex xs12 sm12> 102 <v-flex xs12 sm12>
103 <v-layout> 103 <v-layout>
104 <v-flex xs4 class="pt-4 subheading"> 104 <v-flex xs4 class="pt-4 subheading">
105 <label class="right">Serial Number:</label> 105 <label class="right">Serial Number:</label>
106 </v-flex> 106 </v-flex>
107 <v-flex xs5 class="ml-3"> 107 <v-flex xs5 class="ml-3">
108 <v-text-field 108 <v-text-field
109 placeholder="fill your Serial Number" 109 placeholder="fill your Serial Number"
110 v-model="editedItem.serialNumber" 110 v-model="editedItem.serialNumber"
111 type="text" 111 type="text"
112 ></v-text-field> 112 ></v-text-field>
113 </v-flex> 113 </v-flex>
114 </v-layout> 114 </v-layout>
115 </v-flex> 115 </v-flex>
116 <v-flex xs12 sm12> 116 <v-flex xs12 sm12>
117 <v-layout> 117 <v-layout>
118 <v-flex xs4 class="pt-4 subheading"> 118 <v-flex xs4 class="pt-4 subheading">
119 <label class="right">due Date:</label> 119 <label class="right">due Date:</label>
120 </v-flex> 120 </v-flex>
121 <v-flex xs5 class="ml-3"> 121 <v-flex xs5 class="ml-3">
122 <v-menu 122 <v-menu
123 ref="menu1" 123 ref="menu1"
124 :close-on-content-click="false" 124 :close-on-content-click="false"
125 v-model="menu1" 125 v-model="menu1"
126 :nudge-right="40" 126 :nudge-right="40"
127 :return-value.sync="menu1" 127 :return-value.sync="menu1"
128 lazy 128 lazy
129 transition="scale-transition" 129 transition="scale-transition"
130 offset-y 130 offset-y
131 full-width 131 full-width
132 min-width="290px" 132 min-width="290px"
133 > 133 >
134 <v-text-field 134 <v-text-field
135 slot="activator" 135 slot="activator"
136 v-model="editedItem.dueDate" 136 v-model="editedItem.dueDate"
137 label="Select Due Date" 137 label="Select Due Date"
138 append-icon="event" 138 append-icon="event"
139 readonly 139 readonly
140 ></v-text-field> 140 ></v-text-field>
141 <v-date-picker v-model="editedItem.dueDate" @input="menu1 = false"></v-date-picker> 141 <v-date-picker v-model="editedItem.dueDate" @input="menu1 = false"></v-date-picker>
142 </v-menu> 142 </v-menu>
143 </v-flex> 143 </v-flex>
144 </v-layout> 144 </v-layout>
145 </v-flex> 145 </v-flex>
146 <v-flex xs12 sm12> 146 <v-flex xs12 sm12>
147 <v-layout> 147 <v-layout>
148 <v-flex xs4 class="pt-4 subheading"> 148 <v-flex xs4 class="pt-4 subheading">
149 <label class="right">Note:</label> 149 <label class="right">Note:</label>
150 </v-flex> 150 </v-flex>
151 <v-flex xs5 class="ml-3"> 151 <v-flex xs5 class="ml-3">
152 <v-text-field 152 <v-text-field
153 placeholder="fill your Serial Number" 153 placeholder="fill your Serial Number"
154 v-model="editedItem.note" 154 v-model="editedItem.note"
155 type="text" 155 type="text"
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-layout> 160 </v-layout>
161 <v-layout> 161 <v-layout>
162 <v-flex xs12 sm8 offset-sm2> 162 <v-flex xs12 sm8 offset-sm2>
163 <v-card-actions> 163 <v-card-actions>
164 <v-btn round dark @click.native="close">Cancel</v-btn> 164 <v-btn round dark @click.native="close">Cancel</v-btn>
165 <v-spacer></v-spacer> 165 <v-spacer></v-spacer>
166 <v-btn round dark @click="save">Save</v-btn> 166 <v-btn round dark @click="save">Save</v-btn>
167 </v-card-actions> 167 </v-card-actions>
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-text> 172 </v-card-text>
173 </v-card> 173 </v-card>
174 </v-dialog> 174 </v-dialog>
175 175
176 <!-- ****** PROFILE VIEW PARTICULAR ISSUE DATA ****** --> 176 <!-- ****** PROFILE VIEW PARTICULAR ISSUE DATA ****** -->
177 177
178 <v-dialog v-model="dialog1" max-width="800px"> 178 <v-dialog v-model="dialog1" max-width="800px">
179 <v-card> 179 <v-card>
180 <v-toolbar color="grey lighten-2" flat> 180 <v-toolbar color="grey lighten-2" flat>
181 <v-spacer></v-spacer> 181 <v-spacer></v-spacer>
182 <v-toolbar-title> 182 <v-toolbar-title>
183 <h3>Issue a Book</h3> 183 <h3>Issue a Book</h3>
184 </v-toolbar-title> 184 </v-toolbar-title>
185 <v-spacer></v-spacer> 185 <v-spacer></v-spacer>
186 <v-icon @click="close1">close</v-icon> 186 <v-icon @click="close1">close</v-icon>
187 </v-toolbar> 187 </v-toolbar>
188 <v-card-text> 188 <v-card-text>
189 <v-container grid-list-md> 189 <v-container grid-list-md>
190 <v-layout wrap> 190 <v-layout wrap>
191 <v-flex> 191 <v-flex>
192 <v-layout> 192 <v-layout>
193 <v-flex xs5 sm6> 193 <v-flex xs5 sm6>
194 <h5 class="right my-1"> 194 <h5 class="right my-1">
195 <b>Book:</b> 195 <b>Book:</b>
196 </h5> 196 </h5>
197 </v-flex> 197 </v-flex>
198 <v-flex sm6 xs8> 198 <v-flex sm6 xs8>
199 <h5 class="my-1">{{ editedItem.name }}</h5> 199 <h5 class="my-1">{{ editedItem.name }}</h5>
200 </v-flex> 200 </v-flex>
201 </v-layout> 201 </v-layout>
202 <v-layout> 202 <v-layout>
203 <v-flex xs5 sm6> 203 <v-flex xs5 sm6>
204 <h5 class="right my-1"> 204 <h5 class="right my-1">
205 <b>Serial Number:</b> 205 <b>Serial Number:</b>
206 </h5> 206 </h5>
207 </v-flex> 207 </v-flex>
208 <v-flex sm6 xs8> 208 <v-flex sm6 xs8>
209 <h5 class="my-1">{{ editedItem.serialNumber }}</h5> 209 <h5 class="my-1">{{ editedItem.serialNumber }}</h5>
210 </v-flex> 210 </v-flex>
211 </v-layout> 211 </v-layout>
212 <v-layout> 212 <v-layout>
213 <v-flex xs5 sm6> 213 <v-flex xs5 sm6>
214 <h5 class="right my-1"> 214 <h5 class="right my-1">
215 <b>Issue date:</b> 215 <b>Issue date:</b>
216 </h5> 216 </h5>
217 </v-flex> 217 </v-flex>
218 <v-flex sm6 xs8> 218 <v-flex sm6 xs8>
219 <h5 class="my-1">{{ dates(editedItem.creted) }}</h5> 219 <h5 class="my-1">{{ dates(editedItem.creted) }}</h5>
220 </v-flex> 220 </v-flex>
221 </v-layout> 221 </v-layout>
222 <v-layout> 222 <v-layout>
223 <v-flex xs5 sm6> 223 <v-flex xs5 sm6>
224 <h5 class="right my-1"> 224 <h5 class="right my-1">
225 <b>Due date:</b> 225 <b>Due date:</b>
226 </h5> 226 </h5>
227 </v-flex> 227 </v-flex>
228 <v-flex sm6 xs8> 228 <v-flex sm6 xs8>
229 <h5 class="my-1">{{ dates(editedItem.dueDate) }}</h5> 229 <h5 class="my-1">{{ dates(editedItem.dueDate) }}</h5>
230 </v-flex> 230 </v-flex>
231 </v-layout> 231 </v-layout>
232 <v-layout> 232 <v-layout>
233 <v-flex xs5 sm6> 233 <v-flex xs5 sm6>
234 <h5 class="right my-1"> 234 <h5 class="right my-1">
235 <b>Status:</b> 235 <b>Status:</b>
236 </h5> 236 </h5>
237 </v-flex> 237 </v-flex>
238 <v-flex sm6 xs8> 238 <v-flex sm6 xs8>
239 <h5 class="my-1">{{ editedItem.status }}</h5> 239 <h5 class="my-1">{{ editedItem.status }}</h5>
240 </v-flex> 240 </v-flex>
241 </v-layout> 241 </v-layout>
242 </v-flex> 242 </v-flex>
243 </v-layout> 243 </v-layout>
244 </v-container> 244 </v-container>
245 </v-card-text> 245 </v-card-text>
246 </v-card> 246 </v-card>
247 </v-dialog> 247 </v-dialog>
248 248
249 <v-snackbar 249 <v-snackbar
250 :timeout="timeout" 250 :timeout="timeout"
251 :top="y === 'top'" 251 :top="y === 'top'"
252 :right="x === 'right'" 252 :right="x === 'right'"
253 :vertical="mode === 'vertical'" 253 :vertical="mode === 'vertical'"
254 v-model="snackbar" 254 v-model="snackbar"
255 color="success" 255 color="success"
256 >{{ text }}</v-snackbar> 256 >{{ text }}</v-snackbar>
257 257
258 <!-- ****** EXISTING ISSUE TABLE****** --> 258 <!-- ****** EXISTING ISSUE TABLE****** -->
259 <v-card> 259 <v-card>
260 <v-layout> 260 <v-layout>
261 <v-flex lg1 xs4 md4 xl1 class="hidden-xs-only"> 261 <v-flex lg1 xs4 md4 xl1 class="hidden-xs-only">
262 <label class="right pt-4">Library ID:</label> 262 <label class="right pt-4">Library ID:</label>
263 </v-flex> 263 </v-flex>
264 <v-flex lg2 md3 xs7> 264 <v-flex lg2 md3 xs7>
265 <v-text-field 265 <v-text-field
266 class="pl-3" 266 class="pl-3"
267 @keyup.enter="getIssueList" 267 @keyup.enter="getIssueList"
268 v-model="libraryId" 268 v-model="libraryId"
269 placeholder="fill your library Id" 269 placeholder="fill your library Id"
270 ></v-text-field> 270 ></v-text-field>
271 </v-flex> 271 </v-flex>
272 <v-flex lg9 md3 xs5> 272 <v-flex lg9 md3 xs5>
273 <v-btn 273 <v-btn
274 round 274 round
275 class="black mt-1 right hidden-xs-only" 275 class="black mt-1 right hidden-xs-only"
276 @click="getIssueList" 276 @click="getIssueList"
277 :loading="loadingSearch" 277 :loading="loadingSearch"
278 dark 278 dark
279 >Search</v-btn> 279 >Search</v-btn>
280 <v-btn 280 <v-btn
281 round 281 round
282 class="black mt-4 right hidden-sm-only hidden-xl-only hidden-md-only hidden-lg-only" 282 class="black mt-4 right hidden-sm-only hidden-xl-only hidden-md-only hidden-lg-only"
283 :loading="loadingSearch" 283 :loading="loadingSearch"
284 @click="getIssueList" 284 @click="getIssueList"
285 small 285 small
286 dark 286 dark
287 >Search</v-btn> 287 >Search</v-btn>
288 </v-flex> 288 </v-flex>
289 </v-layout> 289 </v-layout>
290 </v-card> 290 </v-card>
291 <v-data-table 291 <v-data-table
292 :headers="headers" 292 :headers="headers"
293 :items="desserts" 293 :items="desserts"
294 :pagination.sync="pagination" 294 :pagination.sync="pagination"
295 :search="search" 295 :search="search"
296 > 296 >
297 <template slot="items" slot-scope="props" v-if="props.item.isReturn != true"> 297 <template slot="items" slot-scope="props" v-if="props.item.isReturn != true">
298 <td class="text-xs-center">{{ props.index + 1}}</td> 298 <td class="text-xs-center">{{ props.index + 1}}</td>
299 <td id="td" class="text-xs-center">{{ props.item.bookId.name}}</td> 299 <td id="td" class="text-xs-center">{{ props.item.bookId.name}}</td>
300 <td id="td" class="text-xs-center">{{ props.item.serialNumber}}</td> 300 <td id="td" class="text-xs-center">{{ props.item.serialNumber}}</td>
301 <td id="td" class="text-xs-center">{{ dates(props.item.created) }}</td> 301 <td id="td" class="text-xs-center">{{ dates(props.item.created) }}</td>
302 <td id="td" class="text-xs-center">{{ dates(props.item.dueDate) }}</td> 302 <td id="td" class="text-xs-center">{{ dates(props.item.dueDate) }}</td>
303 <td id="td" class="text-xs-center"> 303 <td id="td" class="text-xs-center">
304 <span 304 <span
305 class="green lighten-1 pa-2 white--text paymentStatus" 305 class="green lighten-1 pa-2 white--text paymentStatus"
306 >{{ props.item.bookId.status}}</span> 306 >{{ props.item.bookId.status}}</span>
307 </td> 307 </td>
308 <td class="text-xs-center"> 308 <td class="text-xs-center">
309 <span> 309 <span>
310 <v-tooltip top> 310 <v-tooltip top>
311 <img 311 <img
312 slot="activator" 312 slot="activator"
313 style="cursor:pointer; width:25px; height:18px; " 313 style="cursor:pointer; width:25px; height:18px; "
314 class="mr5" 314 class="mr5"
315 @click="profile(props.item)" 315 @click="profile(props.item)"
316 src="/static/icon/eye1.png" 316 src="/static/icon/eye1.png"
317 /> 317 />
318 <span>View</span> 318 <span>View</span>
319 </v-tooltip> 319 </v-tooltip>
320 <v-tooltip top> 320 <v-tooltip top>
321 <img 321 <img
322 slot="activator" 322 slot="activator"
323 style="cursor:pointer; width:20px; height:18px; " 323 style="cursor:pointer; width:20px; height:18px; "
324 class="mr5" 324 class="mr5"
325 @click="editItem(props.item)" 325 @click="editItem(props.item)"
326 src="/static/icon/edit1.png" 326 src="/static/icon/edit1.png"
327 /> 327 />
328 <span>Edit</span> 328 <span>Edit</span>
329 </v-tooltip> 329 </v-tooltip>
330 <v-tooltip top> 330 <v-tooltip top>
331 <img 331 <img
332 slot="activator" 332 slot="activator"
333 style="cursor:pointer; width:20px; height:20px; " 333 style="cursor:pointer; width:20px; height:20px; "
334 class="mr5" 334 class="mr5"
335 @click="deleteItem(props.item)" 335 @click="deleteItem(props.item)"
336 src="/static/icon/delete1.png" 336 src="/static/icon/delete1.png"
337 /> 337 />
338 <span>Delete</span> 338 <span>Delete</span>
339 </v-tooltip> 339 </v-tooltip>
340 </span> 340 </span>
341 </td> 341 </td>
342 </template> 342 </template>
343 <v-alert 343 <v-alert
344 slot="no-results" 344 slot="no-results"
345 :value="true" 345 :value="true"
346 color="error" 346 color="error"
347 icon="warning" 347 icon="warning"
348 >Your search for "{{ search }}" found no results.</v-alert> 348 >Your search for "{{ search }}" found no results.</v-alert>
349 </v-data-table> 349 </v-data-table>
350 </v-tab-item> 350 </v-tab-item>
351 351
352 <!-- ****** ADD Issue ****** --> 352 <!-- ****** ADD Issue ****** -->
353 353
354 <v-tab-item> 354 <v-tab-item>
355 <v-container> 355 <v-container>
356 <v-snackbar 356 <v-snackbar
357 :timeout="timeout" 357 :timeout="timeout"
358 :top="y === 'top'" 358 :top="y === 'top'"
359 :right="x === 'right'" 359 :right="x === 'right'"
360 :vertical="mode === 'vertical'" 360 :vertical="mode === 'vertical'"
361 v-model="snackbar" 361 v-model="snackbar"
362 :color="color" 362 :color="color"
363 >{{ text }}</v-snackbar> 363 >{{ text }}</v-snackbar>
364 <v-flex xs12 sm12 class="my-4"> 364 <v-flex xs12 sm12 class="my-4">
365 <v-card flat> 365 <v-card flat>
366 <v-form ref="form" v-model="valid" lazy-validation> 366 <v-form ref="form" v-model="valid" lazy-validation>
367 <v-container fluid> 367 <v-container fluid>
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">Library ID:</label> 371 <label class="right">Library ID:</label>
372 </v-flex> 372 </v-flex>
373 <v-flex xs4 class="ml-3"> 373 <v-flex xs4 class="ml-3">
374 <v-text-field 374 <v-text-field
375 v-model="libraryID" 375 v-model="libraryID"
376 placeholder="fill your Library ID" 376 placeholder="fill your Library ID"
377 :rules="libraryIDRules" 377 :rules="libraryIDRules"
378 required 378 required
379 ></v-text-field> 379 ></v-text-field>
380 </v-flex> 380 </v-flex>
381 </v-layout> 381 </v-layout>
382 </v-flex> 382 </v-flex>
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">Book:</label> 386 <label class="right">Book:</label>
387 </v-flex> 387 </v-flex>
388 <v-flex xs4 class="ml-3"> 388 <v-flex xs4 class="ml-3">
389 <v-select 389 <v-select
390 label="Select Book Name" 390 label="Select Book Name"
391 :rules="bookRules" 391 :rules="bookRules"
392 :items="books" 392 :items="books"
393 item-text="name" 393 item-text="name"
394 item-value="_id" 394 item-value="_id"
395 v-model="bookId" 395 v-model="bookId"
396 @change="getParticularBookData(bookId)" 396 @change="getParticularBookData(bookId)"
397 required 397 required
398 ></v-select> 398 ></v-select>
399 </v-flex> 399 </v-flex>
400 </v-layout> 400 </v-layout>
401 </v-flex> 401 </v-flex>
402 <v-flex xs12> 402 <v-flex xs12>
403 <v-layout> 403 <v-layout>
404 <v-flex xs4 class="pt-4 subheading"> 404 <v-flex xs4 class="pt-4 subheading">
405 <label class="right">Author:</label> 405 <label class="right">Author:</label>
406 </v-flex> 406 </v-flex>
407 <v-flex xs4 class="ml-3"> 407 <v-flex xs4 class="ml-3">
408 <v-text-field 408 <v-text-field
409 placeholder="fill your Author" 409 placeholder="fill your Author"
410 :rules="authorRules" 410 :rules="authorRules"
411 v-model="addIssue.author" 411 v-model="addIssue.author"
412 ></v-text-field> 412 ></v-text-field>
413 </v-flex> 413 </v-flex>
414 </v-layout> 414 </v-layout>
415 </v-flex> 415 </v-flex>
416 <v-flex xs12> 416 <v-flex xs12>
417 <v-layout> 417 <v-layout>
418 <v-flex xs4 class="pt-4 subheading"> 418 <v-flex xs4 class="pt-4 subheading">
419 <label class="right">Subject Code:</label> 419 <label class="right">Subject Code:</label>
420 </v-flex> 420 </v-flex>
421 <v-flex xs4 class="ml-3"> 421 <v-flex xs4 class="ml-3">
422 <v-text-field 422 <v-text-field
423 placeholder="fill your Subject Code" 423 placeholder="fill your Subject Code"
424 :rules="subjectCodeRules" 424 :rules="subjectCodeRules"
425 v-model="addIssue.subjectCode" 425 v-model="addIssue.subjectCode"
426 ></v-text-field> 426 ></v-text-field>
427 </v-flex> 427 </v-flex>
428 </v-layout> 428 </v-layout>
429 </v-flex> 429 </v-flex>
430 <v-flex xs12> 430 <v-flex xs12>
431 <v-layout> 431 <v-layout>
432 <v-flex xs4 class="pt-4 subheading"> 432 <v-flex xs4 class="pt-4 subheading">
433 <label class="right">Serial No:</label> 433 <label class="right">Serial No:</label>
434 </v-flex> 434 </v-flex>
435 <v-flex xs4 class="ml-3"> 435 <v-flex xs4 class="ml-3">
436 <v-text-field 436 <v-text-field
437 placeholder="fill your Serial No" 437 placeholder="fill your Serial No"
438 :rules="authorRules" 438 :rules="authorRules"
439 v-model="serialNo" 439 v-model="serialNo"
440 ></v-text-field> 440 ></v-text-field>
441 </v-flex> 441 </v-flex>
442 </v-layout> 442 </v-layout>
443 </v-flex> 443 </v-flex>
444 <v-flex xs12> 444 <v-flex xs12>
445 <v-layout> 445 <v-layout>
446 <v-flex xs4 class="pt-4 subheading"> 446 <v-flex xs4 class="pt-4 subheading">
447 <label class="right">Due Date:</label> 447 <label class="right">Due Date:</label>
448 </v-flex> 448 </v-flex>
449 <v-flex xs4 class="ml-3"> 449 <v-flex xs4 class="ml-3">
450 <v-menu 450 <v-menu
451 ref="menu2" 451 ref="menu2"
452 :close-on-content-click="false" 452 :close-on-content-click="false"
453 v-model="menu2" 453 v-model="menu2"
454 :nudge-right="40" 454 :nudge-right="40"
455 :return-value.sync="date" 455 :return-value.sync="date"
456 lazy 456 lazy
457 transition="scale-transition" 457 transition="scale-transition"
458 offset-y 458 offset-y
459 full-width 459 full-width
460 min-width="290px" 460 min-width="290px"
461 > 461 >
462 <v-text-field 462 <v-text-field
463 slot="activator" 463 slot="activator"
464 v-model="date" 464 v-model="date"
465 label="Select Due Date" 465 label="Select Due Date"
466 append-icon="event" 466 append-icon="event"
467 readonly 467 readonly
468 ></v-text-field> 468 ></v-text-field>
469 <v-date-picker v-model="date" @input="$refs.menu2.save(date)"></v-date-picker> 469 <v-date-picker v-model="date" @input="$refs.menu2.save(date)"></v-date-picker>
470 </v-menu> 470 </v-menu>
471 </v-flex> 471 </v-flex>
472 </v-layout> 472 </v-layout>
473 </v-flex> 473 </v-flex>
474 <v-flex xs12> 474 <v-flex xs12>
475 <v-layout> 475 <v-layout>
476 <v-flex xs4 class="pt-4 subheading"> 476 <v-flex xs4 class="pt-4 subheading">
477 <label class="right">Note:</label> 477 <label class="right">Note:</label>
478 </v-flex> 478 </v-flex>
479 <v-flex xs4 class="ml-3"> 479 <v-flex xs4 class="ml-3">
480 <v-text-field 480 <v-text-field
481 placeholder="fill your Note" 481 placeholder="fill your Note"
482 :rules="noteRules" 482 :rules="noteRules"
483 v-model="note" 483 v-model="note"
484 ></v-text-field> 484 ></v-text-field>
485 </v-flex> 485 </v-flex>
486 </v-layout> 486 </v-layout>
487 </v-flex> 487 </v-flex>
488 <v-layout> 488 <v-layout>
489 <v-flex xs12 sm6 offset-sm3> 489 <v-flex xs12 sm6 offset-sm3>
490 <v-card-actions> 490 <v-card-actions>
491 <v-btn @click="clear" round dark>clear</v-btn> 491 <v-btn @click="clear" round dark>clear</v-btn>
492 <v-spacer></v-spacer> 492 <v-spacer></v-spacer>
493 <v-btn @click="submit" round dark :loading="loading" :disabled="disable">Add</v-btn> 493 <v-btn @click="submit" round dark :loading="loading" :disabled="disable">Add</v-btn>
494 </v-card-actions> 494 </v-card-actions>
495 </v-flex> 495 </v-flex>
496 </v-layout> 496 </v-layout>
497 </v-container> 497 </v-container>
498 </v-form> 498 </v-form>
499 </v-card> 499 </v-card>
500 </v-flex> 500 </v-flex>
501 </v-container> 501 </v-container>
502 </v-tab-item> 502 </v-tab-item>
503 </v-tabs> 503 </v-tabs>
504 <div class="loader" v-if="showLoader"> 504 <div class="loader" v-if="showLoader">
505 <v-progress-circular indeterminate color="white"></v-progress-circular> 505 <v-progress-circular indeterminate color="white"></v-progress-circular>
506 </div> 506 </div>
507 </v-app> 507 </v-app>
508 </template> 508 </template>
509 509
510 <script> 510 <script>
511 import http from "@/Services/http.js"; 511 import http from "@/Services/http.js";
512 import moment from "moment"; 512 import moment from "moment";
513 513
514 export default { 514 export default {
515 data: () => ({ 515 data: () => ({
516 snackbar: false, 516 snackbar: false,
517 date: null, 517 date: null,
518 menu1: false, 518 menu1: false,
519 menu2: false, 519 menu2: false,
520 color: "", 520 color: "",
521 dueDate: null, 521 dueDate: null,
522 y: "top", 522 y: "top",
523 x: "right", 523 x: "right",
524 mode: "", 524 mode: "",
525 timeout: 10000, 525 timeout: 10000,
526 text: "", 526 text: "",
527 libraryId: "", 527 libraryId: "",
528 loading: false, 528 loading: false,
529 loadingSearch: false, 529 loadingSearch: false,
530 date: null, 530 date: null,
531 search: "", 531 search: "",
532 showLoader: false, 532 showLoader: false,
533 dialog: false, 533 dialog: false,
534 dialog1: false, 534 dialog1: false,
535 valid: true, 535 valid: true,
536 isActive: true, 536 isActive: true,
537 newActive: false, 537 newActive: false,
538 addclass: [], 538 addclass: [],
539 addSection: [], 539 addSection: [],
540 pagination: { 540 pagination: {
541 rowsPerPage: 15 541 rowsPerPage: 15
542 }, 542 },
543 libraryIDRules: [v => !!v || " Library ID is required"], 543 libraryIDRules: [v => !!v || " Library ID is required"],
544 bookRules: [v => !!v || " book Name is required"], 544 bookRules: [v => !!v || " book Name is required"],
545 authorRules: [v => !!v || "Author Name is required"], 545 authorRules: [v => !!v || "Author Name is required"],
546 subjectCodeRules: [v => !!v || "Subject Code is required"], 546 subjectCodeRules: [v => !!v || "Subject Code is required"],
547 authorRules: [v => !!v || "Author is required"], 547 authorRules: [v => !!v || "Author is required"],
548 noteRules: [v => !!v || "Note is required"], 548 noteRules: [v => !!v || "Note is required"],
549 headers: [ 549 headers: [
550 { 550 {
551 align: "justify-center", 551 align: "justify-center",
552 text: "No", 552 text: "No",
553 sortable: false, 553 sortable: false,
554 value: "No" 554 value: "No"
555 }, 555 },
556 { text: "Book", vaue: "name", sortable: false, align: "center" }, 556 { text: "Book", vaue: "name", sortable: false, align: "center" },
557 { 557 {
558 text: "Serial Number", 558 text: "Serial Number",
559 value: "serialNumber", 559 value: "serialNumber",
560 sortable: false, 560 sortable: false,
561 align: "center" 561 align: "center"
562 }, 562 },
563 { 563 {
564 text: "Issue Date", 564 text: "Issue Date",
565 value: "created", 565 value: "created",
566 sortable: false, 566 sortable: false,
567 align: "center" 567 align: "center"
568 }, 568 },
569 { 569 {
570 text: "Due Date", 570 text: "Due Date",
571 value: "dueDate", 571 value: "dueDate",
572 sortable: false, 572 sortable: false,
573 align: "center" 573 align: "center"
574 }, 574 },
575 { 575 {
576 text: "Status", 576 text: "Status",
577 value: "status", 577 value: "status",
578 sortable: false, 578 sortable: false,
579 align: "center" 579 align: "center"
580 }, 580 },
581 { text: "Action", value: "", sortable: false, align: "center" } 581 { text: "Action", value: "", sortable: false, align: "center" }
582 ], 582 ],
583 desserts: [], 583 desserts: [],
584 addIssue: {}, 584 addIssue: {},
585 bookId: "", 585 bookId: "",
586 libraryID: "", 586 libraryID: "",
587 serialNo: "", 587 serialNo: "",
588 note: "", 588 note: "",
589 editedItem: {}, 589 editedItem: {},
590 books: [], 590 books: [],
591 token: "", 591 token: "",
592 disable: false 592 disable: false
593 }), 593 }),
594 methods: { 594 methods: {
595 dates: function(date) { 595 dates: function(date) {
596 return moment(date).format("MMMM DD, YYYY"); 596 return moment(date).format("MMMM DD, YYYY");
597 }, 597 },
598 pickFile() { 598 pickFile() {
599 this.$refs.image.click(); 599 this.$refs.image.click();
600 }, 600 },
601 getIssueList() { 601 getIssueList() {
602 this.showLoader = true; 602 this.showLoader = true;
603 this.loadingSearch = true; 603 this.loadingSearch = true;
604 http() 604 http()
605 .get( 605 .get(
606 "/getBooksIssueList", 606 "/getBooksIssueList",
607 { 607 {
608 params: { libraryId: this.libraryId } 608 params: {
609 libraryId: this.libraryId,
610 schoolId: this.$store.state.schoolId
611 }
609 }, 612 },
610 { 613 {
611 headers: { Authorization: "Bearer " + this.token } 614 headers: { Authorization: "Bearer " + this.token }
612 } 615 }
613 ) 616 )
614 .then(response => { 617 .then(response => {
615 this.desserts = response.data.data; 618 this.desserts = response.data.data;
616 this.showLoader = false; 619 this.showLoader = false;
617 this.loadingSearch = false; 620 this.loadingSearch = false;
618 }) 621 })
619 .catch(error => { 622 .catch(error => {
620 // console.log("err====>", err); 623 // console.log("err====>", err);
621 this.showLoader = false; 624 this.showLoader = false;
622 this.loadingSearch = false; 625 this.loadingSearch = false;
623 this.snackbar = true; 626 this.snackbar = true;
624 this.text = error.response.data.message; 627 this.text = error.response.data.message;
625 if (error.response.status === 401) { 628 if (error.response.status === 401) {
626 this.$router.replace({ path: "/" }); 629 this.$router.replace({ path: "/" });
627 this.$store.dispatch("setToken", null); 630 this.$store.dispatch("setToken", null);
628 this.$store.dispatch("Id", null); 631 this.$store.dispatch("Id", null);
629 this.$store.dispatch("Role", null); 632 this.$store.dispatch("Role", null);
630 } 633 }
631 }); 634 });
632 }, 635 },
633 editItem(item) { 636 editItem(item) {
634 console.log("item", item); 637 console.log("item", item);
635 this.editedIndex = this.desserts.indexOf(item); 638 this.editedIndex = this.desserts.indexOf(item);
636 this.editedItem = Object.assign({}, item); 639 this.editedItem = Object.assign({}, item);
637 this.editedItem.name = item.bookId.name; 640 this.editedItem.name = item.bookId.name;
638 this.editedItem.status = item.bookId.status; 641 this.editedItem.status = item.bookId.status;
639 this.editedItem.dueDate = 642 this.editedItem.dueDate =
640 this.editedItem.dueDate != undefined 643 this.editedItem.dueDate != undefined
641 ? (this.editedItem.dueDate = this.editedItem.dueDate.substring(0, 10)) 644 ? (this.editedItem.dueDate = this.editedItem.dueDate.substring(0, 10))
642 : (this.editedItem.dueDate = ""); 645 : (this.editedItem.dueDate = "");
643 this.dialog = true; 646 this.dialog = true;
644 }, 647 },
645 profile(item) { 648 profile(item) {
646 this.editedIndex = this.desserts.indexOf(item); 649 this.editedIndex = this.desserts.indexOf(item);
647 this.editedItem = Object.assign({}, item); 650 this.editedItem = Object.assign({}, item);
648 this.editedItem.name = item.bookId.name; 651 this.editedItem.name = item.bookId.name;
649 this.editedItem.status = item.bookId.status; 652 this.editedItem.status = item.bookId.status;
650 653
651 this.dialog1 = true; 654 this.dialog1 = true;
652 }, 655 },
653 returnBook(item) { 656 returnBook(item) {
654 let returnBook = { 657 let returnBook = {
655 bookIssueId: item._id 658 bookIssueId: item._id
656 }; 659 };
657 http() 660 http()
658 .put( 661 .put(
659 "/returnBook", 662 "/returnBook",
660 confirm("Are you sure you want to return this?") && returnBook 663 confirm("Are you sure you want to return this?") && returnBook
661 ) 664 )
662 .then(response => { 665 .then(response => {
663 this.snackbar = true; 666 this.snackbar = true;
664 this.text = "Successfully return Issue a Book "; 667 this.text = "Successfully return Issue a Book ";
665 this.getIssueList(); 668 this.getIssueList();
666 }) 669 })
667 .catch(error => { 670 .catch(error => {
668 // console.log(error); 671 // console.log(error);
669 }); 672 });
670 }, 673 },
671 activeTab(type) { 674 activeTab(type) {
672 switch (type) { 675 switch (type) {
673 case "existing": 676 case "existing":
674 this.newActive = false; 677 this.newActive = false;
675 this.isActive = true; 678 this.isActive = true;
676 break; 679 break;
677 680
678 default: 681 default:
679 this.newActive = true; 682 this.newActive = true;
680 this.isActive = false; 683 this.isActive = false;
681 break; 684 break;
682 } 685 }
683 }, 686 },
684 close() { 687 close() {
685 this.dialog = false; 688 this.dialog = false;
686 }, 689 },
687 close1() { 690 close1() {
688 this.dialog1 = false; 691 this.dialog1 = false;
689 }, 692 },
690 submit() { 693 submit() {
691 this.loading = true; 694 this.loading = true;
692 if (this.$refs.form.validate()) { 695 if (this.$refs.form.validate()) {
693 let createBook = { 696 let createBook = {
694 bookId: this.bookId, 697 bookId: this.bookId,
695 author: this.addIssue.author, 698 author: this.addIssue.author,
696 subjectCode: this.addIssue.subjectCode, 699 subjectCode: this.addIssue.subjectCode,
697 libraryId: this.libraryID, 700 libraryId: this.libraryID,
698 serialNumber: this.serialNo, 701 serialNumber: this.serialNo,
699 note: this.note, 702 note: this.note,
700 dueDate: this.date 703 dueDate: this.date,
704 schoolId: this.$store.state.schoolId
701 }; 705 };
702 console.log("====================", createBook); 706 console.log("====================", createBook);
703 http() 707 http()
704 .post("/createBookIssue", createBook) 708 .post("/createBookIssue", createBook)
705 .then(response => { 709 .then(response => {
706 this.snackbar = true; 710 this.snackbar = true;
707 this.text = "New Issue a Book added successfully"; 711 this.text = "New Issue a Book added successfully";
708 this.getIssueList(); 712 this.getIssueList();
709 this.color = "succses"; 713 this.color = "succses";
710 this.loading = false; 714 this.loading = false;
711 this.clear(); 715 this.clear();
712 }) 716 })
713 .catch(error => { 717 .catch(error => {
714 if ((this.snackbar = true)) { 718 if ((this.snackbar = true)) {
715 this.text = error.response.data.message; 719 this.text = error.response.data.message;
716 this.color = "red"; 720 this.color = "red";
717 } 721 }
718 }); 722 });
719 } 723 }
720 }, 724 },
721 clear() { 725 clear() {
722 this.$refs.form.reset(); 726 this.$refs.form.reset();
723 this.disable = false; 727 this.disable = false;
724 }, 728 },
725 save() { 729 save() {
726 this.editedItem.bookIssueId = this.editedItem._id; 730 this.editedItem.bookIssueId = this.editedItem._id;
727 this.editedItem.bookId = this.editedItem.bookId._id 731 this.editedItem.bookId = this.editedItem.bookId._id;
728 http() 732 http()
729 .put("/updateBookIssue", this.editedItem) 733 .put("/updateBookIssue", this.editedItem)
730 .then(response => { 734 .then(response => {
731 console.log("updateIssue", response); 735 console.log("updateIssue", response);
732 this.snackbar = true; 736 this.snackbar = true;
733 this.text = "Successfully Edit Issue a Book"; 737 this.text = "Successfully Edit Issue a Book";
734 this.color = "green"; 738 this.color = "green";
735 this.getIssueList(); 739 this.getIssueList();
736 this.close(); 740 this.close();
737 }) 741 })
738 .catch(error => { 742 .catch(error => {
739 // console.log(error); 743 // console.log(error);
740 if ((this.snackbar = true)) { 744 if ((this.snackbar = true)) {
741 this.text = error.response.data.message; 745 this.text = error.response.data.message;
742 this.color = "red"; 746 this.color = "red";
743 } 747 }
744 }); 748 });
745 }, 749 },
746 getBookData() { 750 getBookData() {
747 this.showLoader = true; 751 this.showLoader = true;
748 http() 752 http()
749 .get("/getBooksList", { 753 .get("/getBooksList", {
754 params: {
755 schoolId: this.$store.state.schoolId
756 },
750 headers: { Authorization: "Bearer " + this.token } 757 headers: { Authorization: "Bearer " + this.token }
751 }) 758 })
752 .then(response => { 759 .then(response => {
753 this.books = response.data.data; 760 this.books = response.data.data;
754 this.showLoader = false; 761 this.showLoader = false;
755 // console.log("getAllfeetypes=====>",response.data.data) 762 // console.log("getAllfeetypes=====>",response.data.data)
756 }) 763 })
757 .catch(error => { 764 .catch(error => {
758 // console.log("err====>", err); 765 // console.log("err====>", err);
759 this.showLoader = false; 766 this.showLoader = false;
760 if (error.response.status === 401) { 767 if (error.response.status === 401) {
761 this.$router.replace({ path: "/" }); 768 this.$router.replace({ path: "/" });
762 this.$store.dispatch("setToken", null); 769 this.$store.dispatch("setToken", null);
763 this.$store.dispatch("Id", null); 770 this.$store.dispatch("Id", null);
764 } 771 }
765 }); 772 });
766 }, 773 },
767 getParticularBookData(books) { 774 getParticularBookData(books) {
768 console.log("books", books);
769 for (let i = 0; i < this.books.length; i++) { 775 for (let i = 0; i < this.books.length; i++) {
770 if (books == this.books[i]._id) { 776 if (books == this.books[i]._id) {
771 console.log("books", this.books[i].remaining);
772 if (this.books[i].remaining <= 0) { 777 if (this.books[i].remaining <= 0) {
773 this.snackbar = true; 778 this.snackbar = true;
774 this.text = "Book is unavailable"; 779 this.text = "Book is unavailable";
775 this.color = "red"; 780 this.color = "red";
776 this.disable = true; 781 this.disable = true;
777 } else if (this.books[i].remaining > 0) { 782 } else if (this.books[i].remaining > 0) {
778 this.disable = false; 783 this.disable = false;
779 } 784 }
780 this.addIssue = { 785 this.addIssue = {
781 author: this.books[i].author, 786 author: this.books[i].author,
782 subjectCode: this.books[i].subjectCode 787 subjectCode: this.books[i].subjectCode
783 }; 788 };
784 } 789 }
785 } 790 }
786 this.addIssue.boojk = books; 791 this.addIssue.boojk = books;
787 } 792 }
788 }, 793 },
789 mounted() { 794 mounted() {
790 this.token = this.$store.state.token; 795 this.token = this.$store.state.token;
791 this.getBookData(); 796 this.getBookData();
792 }, 797 },
793 created() { 798 created() {
794 this.$root.$on("app:search", search => { 799 this.$root.$on("app:search", search => {
795 this.search = search; 800 this.search = search;
796 }); 801 });
797 }, 802 },
798 beforeDestroy() { 803 beforeDestroy() {
799 // dont forget to remove the listener 804 // dont forget to remove the listener
800 this.$root.$off("app:search"); 805 this.$root.$off("app:search");
801 } 806 }
802 }; 807 };
803 </script> 808 </script>
804 <style scoped> 809 <style scoped>
805 .active { 810 .active {
806 background-color: gray; 811 background-color: gray;
807 color: white !important; 812 color: white !important;
808 } 813 }
809 .activebtn { 814 .activebtn {
810 color: black !important; 815 color: black !important;
src/pages/Library/member.vue
Diff comments   View file @99cd791
1 <template> 1 <template>
2 <div> 2 <div>
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 11
12 <!-- ****** PROFILE VIEW STUDENTS LIBRARY MEMBER DEATILS ****** --> 12 <!-- ****** PROFILE VIEW STUDENTS LIBRARY MEMBER DEATILS ****** -->
13 13
14 <v-dialog v-model="dialogStudents" max-width="1100px" scrollable> 14 <v-dialog v-model="dialogStudents" max-width="1100px" scrollable>
15 <v-card> 15 <v-card>
16 <v-toolbar color="grey lighten-2" flat> 16 <v-toolbar color="grey lighten-2" flat>
17 <v-spacer></v-spacer> 17 <v-spacer></v-spacer>
18 <v-toolbar-title>Student Profile</v-toolbar-title> 18 <v-toolbar-title>Student Profile</v-toolbar-title>
19 <v-spacer></v-spacer> 19 <v-spacer></v-spacer>
20 <v-icon @click="closeViewStudent">close</v-icon> 20 <v-icon @click="closeViewStudent">close</v-icon>
21 </v-toolbar> 21 </v-toolbar>
22 <v-card-text style="height: 700px;"> 22 <v-card-text style="height: 700px;">
23 <v-flex align-center justify-center layout text-xs-center class="mt-3"> 23 <v-flex align-center justify-center layout text-xs-center class="mt-3">
24 <v-avatar size="160px"> 24 <v-avatar size="160px">
25 <img src="/static/icon/user.png" v-if="!editedItem.profilePicUrl" /> 25 <img src="/static/icon/user.png" v-if="!editedItem.profilePicUrl" />
26 <img :src="editedItem.profilePicUrl" v-else-if="editedItem.profilePicUrl" /> 26 <img :src="editedItem.profilePicUrl" v-else-if="editedItem.profilePicUrl" />
27 </v-avatar> 27 </v-avatar>
28 </v-flex> 28 </v-flex>
29 <v-container grid-list-md> 29 <v-container grid-list-md>
30 <v-layout wrap> 30 <v-layout wrap>
31 <v-flex xs12> 31 <v-flex xs12>
32 <v-layout wrap> 32 <v-layout wrap>
33 <v-flex xs12 sm6> 33 <v-flex xs12 sm6>
34 <v-layout> 34 <v-layout>
35 <v-flex xs6 sm5> 35 <v-flex xs6 sm5>
36 <h5 class="right my-1"> 36 <h5 class="right my-1">
37 <b>Full Name:</b> 37 <b>Full Name:</b>
38 </h5> 38 </h5>
39 </v-flex> 39 </v-flex>
40 <v-flex sm7 xs6> 40 <v-flex sm7 xs6>
41 <h5 class="my-1 left">{{ editedItem.name }}</h5> 41 <h5 class="my-1 left">{{ editedItem.name }}</h5>
42 </v-flex> 42 </v-flex>
43 </v-layout> 43 </v-layout>
44 </v-flex> 44 </v-flex>
45 <v-flex xs12 sm6> 45 <v-flex xs12 sm6>
46 <v-layout> 46 <v-layout>
47 <v-flex xs6 sm4> 47 <v-flex xs6 sm4>
48 <h5 class="right my-1"> 48 <h5 class="right my-1">
49 <b>Email:</b> 49 <b>Email:</b>
50 </h5> 50 </h5>
51 </v-flex> 51 </v-flex>
52 <v-flex sm8 xs6> 52 <v-flex sm8 xs6>
53 <h5 class="my-1 left">{{ editedItem.email }}</h5> 53 <h5 class="my-1 left">{{ editedItem.email }}</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-layout wrap> 58 <v-layout wrap>
59 <v-flex xs12 sm6> 59 <v-flex xs12 sm6>
60 <v-layout> 60 <v-layout>
61 <v-flex xs6 sm5> 61 <v-flex xs6 sm5>
62 <b> 62 <b>
63 <h5 class="right my-1"> 63 <h5 class="right my-1">
64 <b>Gender:</b> 64 <b>Gender:</b>
65 </h5> 65 </h5>
66 </b> 66 </b>
67 </v-flex> 67 </v-flex>
68 <v-flex sm7 xs6> 68 <v-flex sm7 xs6>
69 <h5 class="my-1 left">{{ editedItem.gender }}</h5> 69 <h5 class="my-1 left">{{ editedItem.gender }}</h5>
70 </v-flex> 70 </v-flex>
71 </v-layout> 71 </v-layout>
72 </v-flex> 72 </v-flex>
73 <v-flex xs12 sm6> 73 <v-flex xs12 sm6>
74 <v-layout> 74 <v-layout>
75 <v-flex xs6 sm4> 75 <v-flex xs6 sm4>
76 <b> 76 <b>
77 <h5 class="right my-1"> 77 <h5 class="right my-1">
78 <b>D.O.B:</b> 78 <b>D.O.B:</b>
79 </h5> 79 </h5>
80 </b> 80 </b>
81 </v-flex> 81 </v-flex>
82 <v-flex sm7 xs6> 82 <v-flex sm7 xs6>
83 <h5 class="my-1">{{ dates(editedItem.dob) }}</h5> 83 <h5 class="my-1">{{ dates(editedItem.dob) }}</h5>
84 </v-flex> 84 </v-flex>
85 </v-layout> 85 </v-layout>
86 </v-flex> 86 </v-flex>
87 </v-layout> 87 </v-layout>
88 <v-layout wrap> 88 <v-layout wrap>
89 <v-flex xs12 sm6> 89 <v-flex xs12 sm6>
90 <v-layout> 90 <v-layout>
91 <v-flex xs6 sm5> 91 <v-flex xs6 sm5>
92 <b> 92 <b>
93 <h5 class="right my-1"> 93 <h5 class="right my-1">
94 <b>Blood Group:</b> 94 <b>Blood Group:</b>
95 </h5> 95 </h5>
96 </b> 96 </b>
97 </v-flex> 97 </v-flex>
98 <v-flex sm7 xs6> 98 <v-flex sm7 xs6>
99 <h5 class="my-1 left">{{ editedItem.bloodGroup }}</h5> 99 <h5 class="my-1 left">{{ editedItem.bloodGroup }}</h5>
100 </v-flex> 100 </v-flex>
101 </v-layout> 101 </v-layout>
102 </v-flex> 102 </v-flex>
103 <v-flex xs12 sm6> 103 <v-flex xs12 sm6>
104 <v-layout> 104 <v-layout>
105 <v-flex xs6 sm4> 105 <v-flex xs6 sm4>
106 <b> 106 <b>
107 <h5 class="right my-1"> 107 <h5 class="right my-1">
108 <b>Allergies:</b> 108 <b>Allergies:</b>
109 </h5> 109 </h5>
110 </b> 110 </b>
111 </v-flex> 111 </v-flex>
112 <v-flex sm8 xs6> 112 <v-flex sm8 xs6>
113 <h5 class="my-1">{{ editedItem.allergies }}</h5> 113 <h5 class="my-1">{{ editedItem.allergies }}</h5>
114 </v-flex> 114 </v-flex>
115 </v-layout> 115 </v-layout>
116 </v-flex> 116 </v-flex>
117 </v-layout> 117 </v-layout>
118 <v-layout wrap> 118 <v-layout wrap>
119 <v-flex xs12 sm6> 119 <v-flex xs12 sm6>
120 <v-layout> 120 <v-layout>
121 <v-flex xs6 sm5> 121 <v-flex xs6 sm5>
122 <b> 122 <b>
123 <h5 class="right my-1"> 123 <h5 class="right my-1">
124 <b>Height:</b> 124 <b>Height:</b>
125 </h5> 125 </h5>
126 </b> 126 </b>
127 </v-flex> 127 </v-flex>
128 <v-flex sm7 xs6> 128 <v-flex sm7 xs6>
129 <h5 class="my-1 left">{{ editedItem.height }}</h5> 129 <h5 class="my-1 left">{{ editedItem.height }}</h5>
130 </v-flex> 130 </v-flex>
131 </v-layout> 131 </v-layout>
132 </v-flex> 132 </v-flex>
133 <v-flex xs12 sm6> 133 <v-flex xs12 sm6>
134 <v-layout> 134 <v-layout>
135 <v-flex xs6 sm4> 135 <v-flex xs6 sm4>
136 <b> 136 <b>
137 <h5 class="right my-1"> 137 <h5 class="right my-1">
138 <b>Weight:</b> 138 <b>Weight:</b>
139 </h5> 139 </h5>
140 </b> 140 </b>
141 </v-flex> 141 </v-flex>
142 <v-flex sm8 xs6> 142 <v-flex sm8 xs6>
143 <h5 class="my-1">{{ editedItem.weight }}</h5> 143 <h5 class="my-1">{{ editedItem.weight }}</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-layout wrap> 148 <v-layout wrap>
149 <v-flex xs12 sm6> 149 <v-flex xs12 sm6>
150 <v-layout> 150 <v-layout>
151 <v-flex xs6 sm5> 151 <v-flex xs6 sm5>
152 <b> 152 <b>
153 <h5 class="right my-1"> 153 <h5 class="right my-1">
154 <b>City:</b> 154 <b>City:</b>
155 </h5> 155 </h5>
156 </b> 156 </b>
157 </v-flex> 157 </v-flex>
158 <v-flex sm7 xs6> 158 <v-flex sm7 xs6>
159 <h5 class="my-1 left">{{ editedItem.city }}</h5> 159 <h5 class="my-1 left">{{ editedItem.city }}</h5>
160 </v-flex> 160 </v-flex>
161 </v-layout> 161 </v-layout>
162 </v-flex> 162 </v-flex>
163 <v-flex xs12 sm6> 163 <v-flex xs12 sm6>
164 <v-layout> 164 <v-layout>
165 <v-flex xs6 sm4> 165 <v-flex xs6 sm4>
166 <b> 166 <b>
167 <h5 class="right my-1"> 167 <h5 class="right my-1">
168 <b>State:</b> 168 <b>State:</b>
169 </h5> 169 </h5>
170 </b> 170 </b>
171 </v-flex> 171 </v-flex>
172 <v-flex sm8 xs6> 172 <v-flex sm8 xs6>
173 <h5 class="my-1">{{ editedItem.state }}</h5> 173 <h5 class="my-1">{{ editedItem.state }}</h5>
174 </v-flex> 174 </v-flex>
175 </v-layout> 175 </v-layout>
176 </v-flex> 176 </v-flex>
177 </v-layout> 177 </v-layout>
178 <v-layout wrap> 178 <v-layout wrap>
179 <v-flex xs12 sm6> 179 <v-flex xs12 sm6>
180 <v-layout> 180 <v-layout>
181 <v-flex xs6 sm5> 181 <v-flex xs6 sm5>
182 <b> 182 <b>
183 <h5 class="right my-1"> 183 <h5 class="right my-1">
184 <b>Pincode:</b> 184 <b>Pincode:</b>
185 </h5> 185 </h5>
186 </b> 186 </b>
187 </v-flex> 187 </v-flex>
188 <v-flex sm7 xs6> 188 <v-flex sm7 xs6>
189 <h5 class="my-1">{{ editedItem.pincode }}</h5> 189 <h5 class="my-1">{{ editedItem.pincode }}</h5>
190 </v-flex> 190 </v-flex>
191 </v-layout> 191 </v-layout>
192 </v-flex> 192 </v-flex>
193 <v-flex xs12 sm5> 193 <v-flex xs12 sm5>
194 <v-layout> 194 <v-layout>
195 <v-flex xs6 sm5> 195 <v-flex xs6 sm5>
196 <b> 196 <b>
197 <h5 class="right my-1"> 197 <h5 class="right my-1">
198 <b>Country:</b> 198 <b>Country:</b>
199 </h5> 199 </h5>
200 </b> 200 </b>
201 </v-flex> 201 </v-flex>
202 <v-flex sm7 xs6> 202 <v-flex sm7 xs6>
203 <h5 class="my-1">{{ editedItem.country }}</h5> 203 <h5 class="my-1">{{ editedItem.country }}</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-layout wrap> 208 <v-layout wrap>
209 <v-flex xs12 sm6> 209 <v-flex xs12 sm6>
210 <v-layout> 210 <v-layout>
211 <v-flex sm5 xs6> 211 <v-flex sm5 xs6>
212 <b> 212 <b>
213 <h5 class="right my-1"> 213 <h5 class="right my-1">
214 <b>Mobile No:</b> 214 <b>Mobile No:</b>
215 </h5> 215 </h5>
216 </b> 216 </b>
217 </v-flex> 217 </v-flex>
218 <v-flex sm6 xs6> 218 <v-flex sm6 xs6>
219 <h5 class="my-1">{{ editedItem.mobile }}</h5> 219 <h5 class="my-1">{{ editedItem.mobile }}</h5>
220 </v-flex> 220 </v-flex>
221 </v-layout> 221 </v-layout>
222 </v-flex> 222 </v-flex>
223 <v-flex xs12 sm6> 223 <v-flex xs12 sm6>
224 <v-layout> 224 <v-layout>
225 <v-flex xs6 sm4> 225 <v-flex xs6 sm4>
226 <b> 226 <b>
227 <h5 class="right my-1"> 227 <h5 class="right my-1">
228 <b>Library ID :</b> 228 <b>Library ID :</b>
229 </h5> 229 </h5>
230 </b> 230 </b>
231 </v-flex> 231 </v-flex>
232 <v-flex sm8 xs6> 232 <v-flex sm8 xs6>
233 <h5 class="my-1">{{ editedItem.libraryId }}</h5> 233 <h5 class="my-1">{{ editedItem.libraryId }}</h5>
234 </v-flex> 234 </v-flex>
235 </v-layout> 235 </v-layout>
236 </v-flex> 236 </v-flex>
237 </v-layout> 237 </v-layout>
238 <v-layout wrap> 238 <v-layout wrap>
239 <v-flex xs12 sm5> 239 <v-flex xs12 sm5>
240 <v-layout> 240 <v-layout>
241 <v-flex xs6 sm6> 241 <v-flex xs6 sm6>
242 <b> 242 <b>
243 <h5 class="right my-1"> 243 <h5 class="right my-1">
244 <b>Library Fee:</b> 244 <b>Library Fee:</b>
245 </h5> 245 </h5>
246 </b> 246 </b>
247 </v-flex> 247 </v-flex>
248 <v-flex sm6 xs6> 248 <v-flex sm6 xs6>
249 <h5 class="my-1">{{ editedItem.libraryFee }}</h5> 249 <h5 class="my-1">{{ editedItem.libraryFee }}</h5>
250 </v-flex> 250 </v-flex>
251 </v-layout> 251 </v-layout>
252 </v-flex> 252 </v-flex>
253 <v-flex xs12 sm6> 253 <v-flex xs12 sm6>
254 <v-layout> 254 <v-layout>
255 <v-flex xs6 sm6> 255 <v-flex xs6 sm6>
256 <b> 256 <b>
257 <h5 class="my-1 right"> 257 <h5 class="my-1 right">
258 <b>Academic Year:</b> 258 <b>Academic Year:</b>
259 </h5> 259 </h5>
260 </b> 260 </b>
261 </v-flex> 261 </v-flex>
262 <v-flex sm5 xs6> 262 <v-flex sm5 xs6>
263 <h5 class="my-1">{{ editedItem.establishmentYear }}</h5> 263 <h5 class="my-1">{{ editedItem.establishmentYear }}</h5>
264 </v-flex> 264 </v-flex>
265 </v-layout> 265 </v-layout>
266 </v-flex> 266 </v-flex>
267 </v-layout> 267 </v-layout>
268 <v-layout wrap> 268 <v-layout wrap>
269 <v-flex xs12 sm5> 269 <v-flex xs12 sm5>
270 <v-layout> 270 <v-layout>
271 <v-flex xs6 sm6> 271 <v-flex xs6 sm6>
272 <b> 272 <b>
273 <h5 class="my-1 right"> 273 <h5 class="my-1 right">
274 <b>Medical Notes:</b> 274 <b>Medical Notes:</b>
275 </h5> 275 </h5>
276 </b> 276 </b>
277 </v-flex> 277 </v-flex>
278 <v-flex sm5 xs6> 278 <v-flex sm5 xs6>
279 <h5 class="my-1">{{ editedItem.medicalNotes }}</h5> 279 <h5 class="my-1">{{ editedItem.medicalNotes }}</h5>
280 </v-flex> 280 </v-flex>
281 </v-layout> 281 </v-layout>
282 </v-flex> 282 </v-flex>
283 <v-flex xs12 sm6> 283 <v-flex xs12 sm6>
284 <v-layout> 284 <v-layout>
285 <v-flex xs6 sm6> 285 <v-flex xs6 sm6>
286 <b> 286 <b>
287 <h5 class="right my-1"> 287 <h5 class="right my-1">
288 <b>Roll No. :</b> 288 <b>Roll No. :</b>
289 </h5> 289 </h5>
290 </b> 290 </b>
291 </v-flex> 291 </v-flex>
292 <v-flex sm6 xs8> 292 <v-flex sm6 xs8>
293 <h5 class="my-1">{{ editedItem.rollNo }}</h5> 293 <h5 class="my-1">{{ editedItem.rollNo }}</h5>
294 </v-flex> 294 </v-flex>
295 </v-layout> 295 </v-layout>
296 </v-flex> 296 </v-flex>
297 </v-layout> 297 </v-layout>
298 <v-layout wrap> 298 <v-layout wrap>
299 <v-flex xs12 sm5> 299 <v-flex xs12 sm5>
300 <v-layout> 300 <v-layout>
301 <v-flex xs6 sm6> 301 <v-flex xs6 sm6>
302 <b> 302 <b>
303 <h5 class="my-1 right"> 303 <h5 class="my-1 right">
304 <b>present Address:</b> 304 <b>present Address:</b>
305 </h5> 305 </h5>
306 </b> 306 </b>
307 </v-flex> 307 </v-flex>
308 <v-flex sm5 xs6> 308 <v-flex sm5 xs6>
309 <h5 class="my-1">{{ editedItem.presentAddress }}</h5> 309 <h5 class="my-1">{{ editedItem.presentAddress }}</h5>
310 </v-flex> 310 </v-flex>
311 </v-layout> 311 </v-layout>
312 </v-flex> 312 </v-flex>
313 <v-flex xs12 sm6> 313 <v-flex xs12 sm6>
314 <v-layout> 314 <v-layout>
315 <v-flex xs6 sm6> 315 <v-flex xs6 sm6>
316 <b> 316 <b>
317 <h5 class="right my-1"> 317 <h5 class="right my-1">
318 <b>present Address:</b> 318 <b>present Address:</b>
319 </h5> 319 </h5>
320 </b> 320 </b>
321 </v-flex> 321 </v-flex>
322 <v-flex sm6 xs8> 322 <v-flex sm6 xs8>
323 <h5 class="my-1">{{ editedItem.permanentAddress }}</h5> 323 <h5 class="my-1">{{ editedItem.permanentAddress }}</h5>
324 </v-flex> 324 </v-flex>
325 </v-layout> 325 </v-layout>
326 </v-flex> 326 </v-flex>
327 </v-layout> 327 </v-layout>
328 </v-flex> 328 </v-flex>
329 </v-layout> 329 </v-layout>
330 </v-container> 330 </v-container>
331 </v-card-text> 331 </v-card-text>
332 </v-card> 332 </v-card>
333 </v-dialog> 333 </v-dialog>
334 334
335 <!-- Edit Student Library Member Dialog --> 335 <!-- Edit Student Library Member Dialog -->
336 336
337 <v-dialog v-model="editStudentdialog" max-width="600px" scrollable> 337 <v-dialog v-model="editStudentdialog" max-width="600px" scrollable>
338 <v-card flat> 338 <v-card flat>
339 <v-toolbar color="grey lighten-2" flat> 339 <v-toolbar color="grey lighten-2" flat>
340 <v-spacer></v-spacer> 340 <v-spacer></v-spacer>
341 <v-toolbar-title> 341 <v-toolbar-title>
342 <h3>Edit Student Profile</h3> 342 <h3>Edit Student Profile</h3>
343 </v-toolbar-title> 343 </v-toolbar-title>
344 <v-spacer></v-spacer> 344 <v-spacer></v-spacer>
345 </v-toolbar> 345 </v-toolbar>
346 <v-card-text style="height: 426px;"> 346 <v-card-text style="height: 426px;">
347 <v-form ref="form"> 347 <v-form ref="form">
348 <v-container fluid> 348 <v-container fluid>
349 <v-layout> 349 <v-layout>
350 <v-flex 350 <v-flex
351 xs12 351 xs12
352 class="text-xs-center text-sm-center text-md-center text-lg-center mr-4" 352 class="text-xs-center text-sm-center text-md-center text-lg-center mr-4"
353 > 353 >
354 <v-avatar size="160px"> 354 <v-avatar size="160px">
355 <img src="/static/icon/user.png" v-if="!editedItem.profilePicUrl && !imageUrl" /> 355 <img src="/static/icon/user.png" v-if="!editedItem.profilePicUrl && !imageUrl" />
356 <img 356 <img
357 :src="editedItem.profilePicUrl" 357 :src="editedItem.profilePicUrl"
358 v-else-if="editedItem.profilePicUrl && !imageUrl" 358 v-else-if="editedItem.profilePicUrl && !imageUrl"
359 /> 359 />
360 <img 360 <img
361 v-if="imageUrl" 361 v-if="imageUrl"
362 :src="imageUrl" 362 :src="imageUrl"
363 height="150" 363 height="150"
364 style="border-radius:50%; width:200px" 364 style="border-radius:50%; width:200px"
365 /> 365 />
366 </v-avatar> 366 </v-avatar>
367 </v-flex> 367 </v-flex>
368 </v-layout> 368 </v-layout>
369 <v-layout wrap> 369 <v-layout wrap>
370 <v-flex xs12 sm12 md10> 370 <v-flex xs12 sm12 md10>
371 <v-layout> 371 <v-layout>
372 <v-flex xs4 class="pt-4 subheading"> 372 <v-flex xs4 class="pt-4 subheading">
373 <label class="right hidden-xs-only hidden-sm-only">Library ID:</label> 373 <label class="right hidden-xs-only hidden-sm-only">Library ID:</label>
374 <label class="right hidden-lg-only hidden-md-only hidden-xl-only">Library ID:</label> 374 <label class="right hidden-lg-only hidden-md-only hidden-xl-only">Library ID:</label>
375 </v-flex> 375 </v-flex>
376 <v-flex xs8 class="ml-3"> 376 <v-flex xs8 class="ml-3">
377 <v-text-field 377 <v-text-field
378 v-model="editedItem.libraryId" 378 v-model="editedItem.libraryId"
379 placeholder="fill your Library ID" 379 placeholder="fill your Library ID"
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 sm12 md10> 384 <v-flex xs12 sm12 md10>
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 hidden-xs-only hidden-sm-only">Library Fee:</label> 387 <label class="right hidden-xs-only hidden-sm-only">Library Fee:</label>
388 <label class="right hidden-lg-only hidden-md-only hidden-xl-only">Library Fee:</label> 388 <label class="right hidden-lg-only hidden-md-only hidden-xl-only">Library Fee:</label>
389 </v-flex> 389 </v-flex>
390 <v-flex xs8 class="ml-3"> 390 <v-flex xs8 class="ml-3">
391 <v-text-field 391 <v-text-field
392 v-model="editedItem.libraryFee" 392 v-model="editedItem.libraryFee"
393 placeholder="fill your Library Fee" 393 placeholder="fill your Library Fee"
394 ></v-text-field> 394 ></v-text-field>
395 </v-flex> 395 </v-flex>
396 </v-layout> 396 </v-layout>
397 </v-flex> 397 </v-flex>
398 </v-layout> 398 </v-layout>
399 <v-layout> 399 <v-layout>
400 <v-flex xs12 sm12> 400 <v-flex xs12 sm12>
401 <v-layout> 401 <v-layout>
402 <v-flex xs6> 402 <v-flex xs6>
403 <v-btn round dark @click.native="closeEditStudentDialog">Cancel</v-btn> 403 <v-btn round dark @click.native="closeEditStudentDialog">Cancel</v-btn>
404 </v-flex> 404 </v-flex>
405 <v-flex xs6> 405 <v-flex xs6>
406 <v-btn @click="save" round dark :loading="loading" class="right">Save</v-btn> 406 <v-btn @click="save" round dark :loading="loading" class="right">Save</v-btn>
407 </v-flex> 407 </v-flex>
408 </v-layout> 408 </v-layout>
409 </v-flex> 409 </v-flex>
410 </v-layout> 410 </v-layout>
411 </v-container> 411 </v-container>
412 </v-form> 412 </v-form>
413 </v-card-text> 413 </v-card-text>
414 </v-card> 414 </v-card>
415 </v-dialog> 415 </v-dialog>
416 <!-- Add Student Library Member Dialog --> 416 <!-- Add Student Library Member Dialog -->
417 417
418 <v-dialog v-model="addLibrary" max-width="600px"> 418 <v-dialog v-model="addLibrary" max-width="600px">
419 <v-toolbar color="grey lighten-2"> 419 <v-toolbar color="grey lighten-2">
420 <v-spacer></v-spacer> 420 <v-spacer></v-spacer>
421 <v-toolbar-title> 421 <v-toolbar-title>
422 <h3>Library Member</h3> 422 <h3>Library Member</h3>
423 </v-toolbar-title> 423 </v-toolbar-title>
424 <v-spacer></v-spacer> 424 <v-spacer></v-spacer>
425 </v-toolbar> 425 </v-toolbar>
426 <v-card> 426 <v-card>
427 <v-card-text> 427 <v-card-text>
428 <v-layout wrap justify-center> 428 <v-layout wrap justify-center>
429 <v-flex xs12 sm12 md10> 429 <v-flex xs12 sm12 md10>
430 <v-form ref="form" v-model="valid" lazy-validation> 430 <v-form ref="form" v-model="valid" lazy-validation>
431 <v-layout> 431 <v-layout>
432 <v-flex xs4 class="pt-4 subheading"> 432 <v-flex xs4 class="pt-4 subheading">
433 <label class="right pr-3">Library Id:</label> 433 <label class="right pr-3">Library Id:</label>
434 </v-flex> 434 </v-flex>
435 <v-flex xs8> 435 <v-flex xs8>
436 <v-text-field 436 <v-text-field
437 v-model="addBook.libraryId" 437 v-model="addBook.libraryId"
438 :rules="libraryIdRules" 438 :rules="libraryIdRules"
439 type="number" 439 type="number"
440 placeholder="fill your Library ID" 440 placeholder="fill your Library ID"
441 ></v-text-field> 441 ></v-text-field>
442 </v-flex> 442 </v-flex>
443 </v-layout> 443 </v-layout>
444 <v-layout> 444 <v-layout>
445 <v-flex xs4 class="pt-4 subheading"> 445 <v-flex xs4 class="pt-4 subheading">
446 <label class="right pr-3">Library Fee:</label> 446 <label class="right pr-3">Library Fee:</label>
447 </v-flex> 447 </v-flex>
448 <v-flex xs8> 448 <v-flex xs8>
449 <v-text-field 449 <v-text-field
450 v-model="addBook.libraryFee" 450 v-model="addBook.libraryFee"
451 type="number" 451 type="number"
452 :rules="libraryFeeRules" 452 :rules="libraryFeeRules"
453 placeholder="fill your Library Fee" 453 placeholder="fill your Library Fee"
454 ></v-text-field> 454 ></v-text-field>
455 </v-flex> 455 </v-flex>
456 </v-layout> 456 </v-layout>
457 <v-card-actions> 457 <v-card-actions>
458 <v-btn round dark @click.native="addLibrary = false">Cancel</v-btn> 458 <v-btn round dark @click.native="addLibrary = false">Cancel</v-btn>
459 <v-spacer></v-spacer> 459 <v-spacer></v-spacer>
460 <v-btn round dark @click="submit" :loading="loading">Add Member</v-btn> 460 <v-btn round dark @click="submit" :loading="loading">Add Member</v-btn>
461 </v-card-actions> 461 </v-card-actions>
462 </v-form> 462 </v-form>
463 </v-flex> 463 </v-flex>
464 </v-layout> 464 </v-layout>
465 </v-card-text> 465 </v-card-text>
466 </v-card> 466 </v-card>
467 </v-dialog> 467 </v-dialog>
468 <!-- ****** EXISTING MEMBER TABLE ****** --> 468 <!-- ****** EXISTING MEMBER TABLE ****** -->
469 <v-card flat> 469 <v-card flat>
470 <h4 470 <h4
471 class="text-xs-center pt-4 ml-2 hidden-lg-only hidden-xl-only hidden-md-only" 471 class="text-xs-center pt-4 ml-2 hidden-lg-only hidden-xl-only hidden-md-only"
472 >Library Member</h4> 472 >Library Member</h4>
473 <v-card-actions> 473 <v-card-actions>
474 <h3 class="right mt-2 ml-2 hidden-sm-only hidden-xs-only">Library Member</h3> 474 <h3 class="right mt-2 ml-2 hidden-sm-only hidden-xs-only">Library Member</h3>
475 <v-spacer></v-spacer> 475 <v-spacer></v-spacer>
476 <v-flex xs12 sm4 md2> 476 <v-flex xs12 sm4 md2>
477 <v-select 477 <v-select
478 outline 478 outline
479 small 479 small
480 :items="addclass" 480 :items="addclass"
481 label="Select Class" 481 label="Select Class"
482 v-model="selectStudents" 482 v-model="selectStudents"
483 item-text="classNum" 483 item-text="classNum"
484 item-value="_id" 484 item-value="_id"
485 name="Select Class" 485 name="Select Class"
486 @change="getAllStudents(selectStudents)" 486 @change="getAllStudents(selectStudents)"
487 class="px-2" 487 class="px-2"
488 required 488 required
489 ></v-select> 489 ></v-select>
490 </v-flex> 490 </v-flex>
491 </v-card-actions> 491 </v-card-actions>
492 </v-card> 492 </v-card>
493 <v-data-table 493 <v-data-table
494 :headers="headers" 494 :headers="headers"
495 :items="studentData" 495 :items="studentData"
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 <td id="td" class="text-xs-center">{{ props.index}}</td> 500 <td id="td" class="text-xs-center">{{ props.index}}</td>
501 <td id="td" class="text-xs-center"> 501 <td id="td" class="text-xs-center">
502 <v-avatar> 502 <v-avatar>
503 <img :src="props.item.profilePicUrl" v-if="props.item.profilePicUrl" /> 503 <img :src="props.item.profilePicUrl" v-if="props.item.profilePicUrl" />
504 <img src="/static/icon/user.png" v-else-if="!props.item.profilePicUrl" /> 504 <img src="/static/icon/user.png" v-else-if="!props.item.profilePicUrl" />
505 </v-avatar> 505 </v-avatar>
506 </td> 506 </td>
507 <td id="td" class="text-xs-center">{{ props.item.name}}</td> 507 <td id="td" class="text-xs-center">{{ props.item.name}}</td>
508 <td id="td" class="text-xs-center">{{ props.item.rollNo }}</td> 508 <td id="td" class="text-xs-center">{{ props.item.rollNo }}</td>
509 <td id="td" class="text-xs-center">{{ props.item.email }}</td> 509 <td id="td" class="text-xs-center">{{ props.item.email }}</td>
510 <td class="text-xs-center"> 510 <td class="text-xs-center">
511 <v-tooltip top> 511 <v-tooltip top>
512 <img 512 <img
513 slot="activator" 513 slot="activator"
514 v-if="!props.item.libraryId" 514 v-if="!props.item.libraryId"
515 style="cursor:pointer; width:25px; height:18px; " 515 style="cursor:pointer; width:25px; height:18px; "
516 @click="addLibraryData(props.item)" 516 @click="addLibraryData(props.item)"
517 src="/static/icon/add.png" 517 src="/static/icon/add.png"
518 /> 518 />
519 <span>Add</span> 519 <span>Add</span>
520 </v-tooltip> 520 </v-tooltip>
521 <span v-if="props.item.libraryId"> 521 <span v-if="props.item.libraryId">
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:18px; " 525 style="cursor:pointer; width:25px; height:18px; "
526 class="mr5" 526 class="mr5"
527 @click="profile(props.item)" 527 @click="profile(props.item)"
528 src="/static/icon/eye1.png" 528 src="/static/icon/eye1.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="mr5" 536 class="mr5"
537 @click="editItem(props.item)" 537 @click="editItem(props.item)"
538 src="/static/icon/edit1.png" 538 src="/static/icon/edit1.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 class="mr5" 546 class="mr5"
547 @click="deleteItem(props.item)" 547 @click="deleteItem(props.item)"
548 src="/static/icon/delete1.png" 548 src="/static/icon/delete1.png"
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 </template> 554 </template>
555 <v-alert 555 <v-alert
556 slot="no-results" 556 slot="no-results"
557 :value="true" 557 :value="true"
558 color="error" 558 color="error"
559 icon="warning" 559 icon="warning"
560 >Your search for "{{ search }}" found no results.</v-alert> 560 >Your search for "{{ search }}" found no results.</v-alert>
561 </v-data-table> 561 </v-data-table>
562 <div class="loader" v-if="showLoader"> 562 <div class="loader" v-if="showLoader">
563 <v-progress-circular indeterminate color="white"></v-progress-circular> 563 <v-progress-circular indeterminate color="white"></v-progress-circular>
564 </div> 564 </div>
565 </div> 565 </div>
566 </template> 566 </template>
567 567
568 <script> 568 <script>
569 import http from "@/Services/http.js"; 569 import http from "@/Services/http.js";
570 import Util from "@/util"; 570 import Util from "@/util";
571 import moment from "moment"; 571 import moment from "moment";
572 572
573 export default { 573 export default {
574 data: () => ({ 574 data: () => ({
575 snackbar: false, 575 snackbar: false,
576 y: "top", 576 y: "top",
577 x: "right", 577 x: "right",
578 mode: "", 578 mode: "",
579 timeout: 3000, 579 timeout: 3000,
580 text: "", 580 text: "",
581 showLoader: false, 581 showLoader: false,
582 loading: false, 582 loading: false,
583 addLibrary: false, 583 addLibrary: false,
584 dialogStudents: false, 584 dialogStudents: false,
585 editStudentdialog: false, 585 editStudentdialog: false,
586 valid: true, 586 valid: true,
587 libraryIdRules: [v => !!v || "Library Id Fee is required"], 587 libraryIdRules: [v => !!v || "Library Id Fee is required"],
588 libraryFeeRules: [v => !!v || "Library Fee is required"], 588 libraryFeeRules: [v => !!v || "Library Fee is required"],
589 date: null, 589 date: null,
590 search: "", 590 search: "",
591 addclass: [], 591 addclass: [],
592 pagination: { 592 pagination: {
593 rowsPerPage: 15 593 rowsPerPage: 15
594 }, 594 },
595 addBook: {}, 595 addBook: {},
596 imageName: "", 596 imageName: "",
597 imageUrl: "", 597 imageUrl: "",
598 imageFile: "", 598 imageFile: "",
599 headers: [ 599 headers: [
600 { 600 {
601 text: "No", 601 text: "No",
602 align: "center", 602 align: "center",
603 sortable: false, 603 sortable: false,
604 value: "index" 604 value: "index"
605 }, 605 },
606 { 606 {
607 text: "Photo", 607 text: "Photo",
608 value: "uploadCover", 608 value: "uploadCover",
609 sortable: false, 609 sortable: false,
610 align: "center" 610 align: "center"
611 }, 611 },
612 { text: "Name", value: "name", sortable: false, align: "center" }, 612 { text: "Name", value: "name", sortable: false, align: "center" },
613 { text: "Roll No.", value: "rollNo", sortable: false, align: "center" }, 613 { text: "Roll No.", value: "rollNo", sortable: false, align: "center" },
614 { text: "Email", value: "email", sortable: false, align: "center" }, 614 { text: "Email", value: "email", sortable: false, align: "center" },
615 { text: "Action", value: "", sortable: false, align: "center" } 615 { text: "Action", value: "", sortable: false, align: "center" }
616 ], 616 ],
617 studentData: [], 617 studentData: [],
618 editedItem: {}, 618 editedItem: {},
619 parentId: "", 619 parentId: "",
620 token: "", 620 token: "",
621 selectStudents: {}, 621 selectStudents: {},
622 editedIndex: -1 622 editedIndex: -1
623 }), 623 }),
624 methods: { 624 methods: {
625 getAllStudents() { 625 getAllStudents() {
626 this.showLoader = true; 626 this.showLoader = true;
627 http() 627 http()
628 .get("/getStudentsList", { 628 .get("/getStudentsList", {
629 params: { classId: this.selectStudents }, 629 params: {
630 classId: this.selectStudents,
631 schoolId: this.$store.state.schoolId
632 },
630 headers: { Authorization: "Bearer " + this.token } 633 headers: { Authorization: "Bearer " + this.token }
631 }) 634 })
632 .then(response => { 635 .then(response => {
633 this.studentData = response.data.data; 636 this.studentData = response.data.data;
634 this.showLoader = false; 637 this.showLoader = false;
635 }) 638 })
636 .catch(error => { 639 .catch(error => {
637 // console.log("err====>", err); 640 // console.log("err====>", err);
638 if (error.response.status === 401) { 641 if (error.response.status === 401) {
639 this.$router.replace({ path: "/" }); 642 this.$router.replace({ path: "/" });
640 this.$store.dispatch("setToken", null); 643 this.$store.dispatch("setToken", null);
641 this.$store.dispatch("Id", null); 644 this.$store.dispatch("Id", null);
642 this.$store.dispatch("Role", null); 645 this.$store.dispatch("Role", null);
643 } 646 }
644 }); 647 });
645 }, 648 },
646 addLibraryData(item) { 649 addLibraryData(item) {
647 this.addBook.studentId = item._id; 650 this.addBook.studentId = item._id;
648 this.addLibrary = true; 651 this.addLibrary = true;
649 }, 652 },
650 editItem(item) { 653 editItem(item) {
651 this.editedIndex = this.studentData.indexOf(item); 654 this.editedIndex = this.studentData.indexOf(item);
652 this.editedItem = Object.assign({}, item); 655 this.editedItem = Object.assign({}, item);
653 this.editStudentdialog = true; 656 this.editStudentdialog = true;
654 }, 657 },
655 dates: function(date) { 658 dates: function(date) {
656 return moment(date).format("MMMM DD, YYYY"); 659 return moment(date).format("MMMM DD, YYYY");
657 }, 660 },
658 profile(item) { 661 profile(item) {
659 console.log("item", item); 662 console.log("item", item);
660 this.editedIndex = this.studentData.indexOf(item); 663 this.editedIndex = this.studentData.indexOf(item);
661 this.editedItem = Object.assign({}, item); 664 this.editedItem = Object.assign({}, item);
662 this.dialogStudents = true; 665 this.dialogStudents = true;
663 }, 666 },
664 deleteItem(item) { 667 deleteItem(item) {
665 let deleteStudentLibraryData = { 668 let deleteStudentLibraryData = {
666 studentId: item._id, 669 studentId: item._id,
667 libraryId: item.libraryId 670 libraryId: item.libraryId
668 }; 671 };
669 http() 672 http()
670 .put( 673 .put(
671 "/deleteLibrary", 674 "/deleteLibrary",
672 confirm("Are you sure you want to delete this?") && 675 confirm("Are you sure you want to delete this?") &&
673 deleteStudentLibraryData 676 deleteStudentLibraryData
674 ) 677 )
675 .then(response => { 678 .then(response => {
676 this.snackbar = true; 679 this.snackbar = true;
677 this.text = "Delete Successfully"; 680 this.text = "Delete Successfully";
678 this.getAllStudents(); 681 this.getAllStudents();
679 }) 682 })
680 .catch(error => { 683 .catch(error => {
681 // console.log(error); 684 // console.log(error);
682 }); 685 });
683 }, 686 },
684 close() { 687 close() {
685 this.dialog = false; 688 this.dialog = false;
686 }, 689 },
687 closeEditStudentDialog() { 690 closeEditStudentDialog() {
688 this.editStudentdialog = false; 691 this.editStudentdialog = false;
689 }, 692 },
690 closeViewStudent() { 693 closeViewStudent() {
691 this.dialogStudents = false; 694 this.dialogStudents = false;
692 }, 695 },
693 submit() { 696 submit() {
694 if (this.$refs.form.validate()) { 697 if (this.$refs.form.validate()) {
695 this.loading = true; 698 this.loading = true;
699 this.addBook.schoolId = this.$store.state.schoolId;
696 http() 700 http()
697 .put("/addLibrary", this.addBook) 701 .put("/addLibrary", this.addBook)
698 .then(response => { 702 .then(response => {
699 this.snackbar = true; 703 this.snackbar = true;
700 this.text = "New Library Member added successfully"; 704 this.text = "New Library Member added successfully";
701 this.getAllStudents(); 705 this.getAllStudents();
702 this.clear(); 706 this.clear();
703 this.addLibrary = false; 707 this.addLibrary = false;
704 this.loading = false; 708 this.loading = false;
705 }) 709 })
706 .catch(error => { 710 .catch(error => {
707 // console.log(error); 711 // console.log(error);
708 this.snackbar = true; 712 this.snackbar = true;
709 this.text = error.response.data.message; 713 this.text = error.response.data.message;
710 this.loading = false; 714 this.loading = false;
711 }); 715 });
712 } 716 }
713 }, 717 },
714 clear() { 718 clear() {
715 this.$refs.form.reset(); 719 this.$refs.form.reset();
716 }, 720 },
717 save() { 721 save() {
718 this.editedItem.studentId = this.editedItem._id; 722 this.editedItem.studentId = this.editedItem._id;
719 http() 723 http()
720 .put("/updateLibrary", this.editedItem) 724 .put("/updateLibrary", this.editedItem)
721 .then(response => { 725 .then(response => {
722 this.snackbar = true; 726 this.snackbar = true;
723 this.text = "Edit Library Member Successfully"; 727 this.text = "Edit Library Member Successfully";
724 this.getAllStudents(); 728 this.getAllStudents();
725 this.closeEditStudentDialog(); 729 this.closeEditStudentDialog();
726 }) 730 })
727 .catch(error => { 731 .catch(error => {
728 this.snackbar = true; 732 this.snackbar = true;
729 this.text = error.response.data.statusText; 733 this.text = error.response.data.statusText;
730 }); 734 });
731 }, 735 },
732 getAllClass() { 736 getAllClass() {
733 http() 737 http()
734 .get("/getClassesList", { 738 .get("/getClassesList", {
739 params: {
740 schoolId: this.$store.state.schoolId
741 },
735 headers: { Authorization: "Bearer " + this.token } 742 headers: { Authorization: "Bearer " + this.token }
736 }) 743 })
737 .then(response => { 744 .then(response => {
738 this.addclass = response.data.data; 745 this.addclass = response.data.data;
739 }) 746 })
740 .catch(err => { 747 .catch(err => {
741 // console.log("err====>", err); 748 // console.log("err====>", err);
742 this.$router.replace({ path: "/" }); 749 this.$router.replace({ path: "/" });
743 }); 750 });
744 } 751 }
745 }, 752 },
746 mounted() { 753 mounted() {
747 // this.getStudentList(); 754 // this.getStudentList();
748 this.token = this.$store.state.token; 755 this.token = this.$store.state.token;
749 this.getAllClass(); 756 this.getAllClass();
750 }, 757 },
751 created() { 758 created() {
752 this.$root.$on("app:search", search => { 759 this.$root.$on("app:search", search => {
753 this.search = search; 760 this.search = search;
754 }); 761 });
755 }, 762 },
756 beforeDestroy() { 763 beforeDestroy() {
757 // dont forget to remove the listener 764 // dont forget to remove the listener
758 this.$root.$off("app:search"); 765 this.$root.$off("app:search");
759 } 766 }
760 }; 767 };
761 </script> 768 </script>
762 <style scoped> 769 <style scoped>
763 .active { 770 .active {
764 background-color: gray; 771 background-color: gray;
765 color: white !important; 772 color: white !important;
766 } 773 }
767 .activebtn { 774 .activebtn {
768 color: black !important; 775 color: black !important;
769 } 776 }
770 </style> 777 </style>
src/pages/Subjects/subjects.vue
Diff comments   View file @99cd791
1 <template> 1 <template>
2 <v-app id="pages-dasboard"> 2 <v-app id="pages-dasboard">
3 <v-tabs grow slider-color="gray"> 3 <v-tabs grow slider-color="gray">
4 <v-tab 4 <v-tab
5 ripple 5 ripple
6 @click="activeTab('existing')" 6 @click="activeTab('existing')"
7 v-bind:class="{ active: isActive }" 7 v-bind:class="{ active: isActive }"
8 id="tab" 8 id="tab"
9 class="subheading" 9 class="subheading"
10 >Existing Subjects</v-tab> 10 >Existing Subjects</v-tab>
11 <v-tab 11 <v-tab
12 ripple 12 ripple
13 @click="activeTab('new')" 13 @click="activeTab('new')"
14 v-bind:class="{ active: newActive }" 14 v-bind:class="{ active: newActive }"
15 id="tab1" 15 id="tab1"
16 User 16 User
17 class="subheading" 17 class="subheading"
18 >Add New Subject</v-tab> 18 >Add New Subject</v-tab>
19 19
20 <!-- ****** EDIT Subject ****** --> 20 <!-- ****** EDIT Subject ****** -->
21 21
22 <v-tab-item> 22 <v-tab-item>
23 <v-snackbar 23 <v-snackbar
24 :timeout="timeout" 24 :timeout="timeout"
25 :top="y === 'top'" 25 :top="y === 'top'"
26 :right="x === 'right'" 26 :right="x === 'right'"
27 :vertical="mode === 'vertical'" 27 :vertical="mode === 'vertical'"
28 v-model="snackbar" 28 v-model="snackbar"
29 color="success" 29 color="success"
30 >{{ text }}</v-snackbar> 30 >{{ text }}</v-snackbar>
31 <v-dialog v-model="dialog" max-width="600px"> 31 <v-dialog v-model="dialog" max-width="600px">
32 <v-flex xs12 sm12 class> 32 <v-flex xs12 sm12 class>
33 <v-toolbar color="v-toolbar"> 33 <v-toolbar color="v-toolbar">
34 <v-spacer></v-spacer> 34 <v-spacer></v-spacer>
35 <v-toolbar-title> 35 <v-toolbar-title>
36 <h3>Edit Subject</h3> 36 <h3>Edit Subject</h3>
37 </v-toolbar-title> 37 </v-toolbar-title>
38 <v-spacer></v-spacer> 38 <v-spacer></v-spacer>
39 </v-toolbar> 39 </v-toolbar>
40 <v-card flat> 40 <v-card flat>
41 <v-container fluid> 41 <v-container fluid>
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">Class:</label> 44 <label class="right">Class:</label>
45 </v-flex> 45 </v-flex>
46 <v-flex xs6 class="ml-3"> 46 <v-flex xs6 class="ml-3">
47 <v-select 47 <v-select
48 :items="classList" 48 :items="classList"
49 label="Select Class" 49 label="Select Class"
50 v-model="addSubject.selectName" 50 v-model="addSubject.selectName"
51 item-text="classNum" 51 item-text="classNum"
52 item-value="_id" 52 item-value="_id"
53 name="Select Class" 53 name="Select Class"
54 :rules="nameRules" 54 :rules="nameRules"
55 required 55 required
56 ></v-select> 56 ></v-select>
57 </v-flex> 57 </v-flex>
58 </v-layout> 58 </v-layout>
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">Subject:</label> 61 <label class="right">Subject:</label>
62 </v-flex> 62 </v-flex>
63 <v-flex xs6 class="ml-3"> 63 <v-flex xs6 class="ml-3">
64 <v-text-field 64 <v-text-field
65 placeholder="fill your Subject" 65 placeholder="fill your Subject"
66 v-model="editedItem.subjectName" 66 v-model="editedItem.subjectName"
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 xs12 sm9 offset-sm2> 73 <v-flex xs12 sm9 offset-sm2>
74 <v-card-actions> 74 <v-card-actions>
75 <v-btn round dark @click.native="close">Cancel</v-btn> 75 <v-btn round dark @click.native="close">Cancel</v-btn>
76 <v-spacer></v-spacer> 76 <v-spacer></v-spacer>
77 <v-btn round dark @click="save">Save</v-btn> 77 <v-btn round dark @click="save">Save</v-btn>
78 </v-card-actions> 78 </v-card-actions>
79 </v-flex> 79 </v-flex>
80 </v-container> 80 </v-container>
81 </v-card> 81 </v-card>
82 </v-flex> 82 </v-flex>
83 </v-dialog> 83 </v-dialog>
84 84
85 <!-- ****** VIEW PROFIL NOTICE BOARD ****** --> 85 <!-- ****** VIEW PROFIL NOTICE BOARD ****** -->
86 86
87 <v-dialog v-model="dialog1" max-width="600px"> 87 <v-dialog v-model="dialog1" max-width="600px">
88 <v-toolbar color="v-toolbar"> 88 <v-toolbar color="v-toolbar">
89 <v-spacer></v-spacer> 89 <v-spacer></v-spacer>
90 <v-toolbar-title> 90 <v-toolbar-title>
91 <h3>Subject</h3> 91 <h3>Subject</h3>
92 </v-toolbar-title> 92 </v-toolbar-title>
93 <v-spacer></v-spacer> 93 <v-spacer></v-spacer>
94 <v-icon @click="close1">close</v-icon> 94 <v-icon @click="close1">close</v-icon>
95 </v-toolbar> 95 </v-toolbar>
96 <v-card> 96 <v-card>
97 <v-card-text> 97 <v-card-text>
98 <v-container grid-list-md> 98 <v-container grid-list-md>
99 <v-layout wrap> 99 <v-layout wrap>
100 <v-flex> 100 <v-flex>
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>Subject Name:</b> 104 <b>Subject 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.subjectName }}</h5> 108 <h5 class="my-1">{{ editedItem.subjectName }}</h5>
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-container> 113 </v-container>
114 </v-card-text> 114 </v-card-text>
115 </v-card> 115 </v-card>
116 </v-dialog> 116 </v-dialog>
117 117
118 <v-snackbar 118 <v-snackbar
119 :timeout="timeout" 119 :timeout="timeout"
120 :top="y === 'top'" 120 :top="y === 'top'"
121 :right="x === 'right'" 121 :right="x === 'right'"
122 :vertical="mode === 'vertical'" 122 :vertical="mode === 'vertical'"
123 v-model="snackbar" 123 v-model="snackbar"
124 color="success" 124 color="success"
125 >{{ text }}</v-snackbar> 125 >{{ text }}</v-snackbar>
126 126
127 <!-- ****** EXISTING SUBJECTS TABLE ****** --> 127 <!-- ****** EXISTING SUBJECTS TABLE ****** -->
128 <v-card flat> 128 <v-card flat>
129 <v-card-actions> 129 <v-card-actions>
130 <v-layout> 130 <v-layout>
131 <v-flex xs4 sm2 lg1> 131 <v-flex xs4 sm2 lg1>
132 <label class="right mt-4">Select Class:</label> 132 <label class="right mt-4">Select Class:</label>
133 </v-flex> 133 </v-flex>
134 <v-flex xs8 sm4 lg3> 134 <v-flex xs8 sm4 lg3>
135 <v-select 135 <v-select
136 :items="classList" 136 :items="classList"
137 label="Select Class" 137 label="Select Class"
138 v-model="selectClassId" 138 v-model="selectClassId"
139 item-text="classNum" 139 item-text="classNum"
140 item-value="_id" 140 item-value="_id"
141 name="Select Class" 141 name="Select Class"
142 :rules="nameRules" 142 :rules="nameRules"
143 @change="getClassSubject" 143 @change="getClassSubject"
144 class="px-4" 144 class="px-4"
145 required 145 required
146 ></v-select> 146 ></v-select>
147 </v-flex> 147 </v-flex>
148 </v-layout> 148 </v-layout>
149 </v-card-actions> 149 </v-card-actions>
150 </v-card> 150 </v-card>
151 <v-data-table 151 <v-data-table
152 :headers="headers" 152 :headers="headers"
153 :items="subjectList.subjects" 153 :items="subjectList.subjects"
154 :pagination.sync="pagination" 154 :pagination.sync="pagination"
155 :search="search" 155 :search="search"
156 > 156 >
157 <template slot="items" slot-scope="props"> 157 <template slot="items" slot-scope="props">
158 <td id="td" class="text-xs-center">{{ props.index + 1}}</td> 158 <td id="td" class="text-xs-center">{{ props.index + 1}}</td>
159 <td id="td" class="text-xs-center">{{ props.item.subjectName}}</td> 159 <td id="td" class="text-xs-center">{{ props.item.subjectName}}</td>
160 160
161 <td class="text-xs-center"> 161 <td class="text-xs-center">
162 <span> 162 <span>
163 <v-tooltip top> 163 <v-tooltip top>
164 <img 164 <img
165 slot="activator" 165 slot="activator"
166 style="cursor:pointer; width:25px; height:18px; " 166 style="cursor:pointer; width:25px; height:18px; "
167 class="mr5" 167 class="mr5"
168 @click="profile(props.item)" 168 @click="profile(props.item)"
169 src="/static/icon/eye1.png" 169 src="/static/icon/eye1.png"
170 /> 170 />
171 <span>View</span> 171 <span>View</span>
172 </v-tooltip> 172 </v-tooltip>
173 <v-tooltip top> 173 <v-tooltip top>
174 <img 174 <img
175 slot="activator" 175 slot="activator"
176 style="cursor:pointer; width:20px; height:18px; " 176 style="cursor:pointer; width:20px; height:18px; "
177 class="mr5" 177 class="mr5"
178 @click="editItem(props.item)" 178 @click="editItem(props.item)"
179 src="/static/icon/edit1.png" 179 src="/static/icon/edit1.png"
180 /> 180 />
181 <span>Edit</span> 181 <span>Edit</span>
182 </v-tooltip> 182 </v-tooltip>
183 <v-tooltip top> 183 <v-tooltip top>
184 <img 184 <img
185 slot="activator" 185 slot="activator"
186 style="cursor:pointer; width:20px; height:20px; " 186 style="cursor:pointer; width:20px; height:20px; "
187 class="mr5" 187 class="mr5"
188 @click="deleteItem(props.item)" 188 @click="deleteItem(props.item)"
189 src="/static/icon/delete1.png" 189 src="/static/icon/delete1.png"
190 /> 190 />
191 <span>Delete</span> 191 <span>Delete</span>
192 </v-tooltip> 192 </v-tooltip>
193 </span> 193 </span>
194 </td> 194 </td>
195 </template> 195 </template>
196 <v-alert 196 <v-alert
197 slot="no-results" 197 slot="no-results"
198 :value="true" 198 :value="true"
199 color="error" 199 color="error"
200 icon="warning" 200 icon="warning"
201 >Your search for "{{ search }}" found no results.</v-alert> 201 >Your search for "{{ search }}" found no results.</v-alert>
202 </v-data-table> 202 </v-data-table>
203 </v-tab-item> 203 </v-tab-item>
204 204
205 <!-- ****** ADD MULTIPLE Subject ****** --> 205 <!-- ****** ADD MULTIPLE Subject ****** -->
206 206
207 <v-tab-item> 207 <v-tab-item>
208 <v-container> 208 <v-container>
209 <v-snackbar 209 <v-snackbar
210 :timeout="timeout" 210 :timeout="timeout"
211 :top="y === 'top'" 211 :top="y === 'top'"
212 :right="x === 'right'" 212 :right="x === 'right'"
213 :vertical="mode === 'vertical'" 213 :vertical="mode === 'vertical'"
214 v-model="snackbar" 214 v-model="snackbar"
215 :color="color" 215 :color="color"
216 >{{ text }}</v-snackbar> 216 >{{ text }}</v-snackbar>
217 <v-flex xs12 sm8 offset-sm2 class="top"> 217 <v-flex xs12 sm8 offset-sm2 class="top">
218 <v-card flat> 218 <v-card flat>
219 <v-container fluid fill-height> 219 <v-container fluid fill-height>
220 <v-layout align-center> 220 <v-layout align-center>
221 <v-flex xs12> 221 <v-flex xs12>
222 <v-form ref="form" v-model="valid" lazy-validation> 222 <v-form ref="form" v-model="valid" lazy-validation>
223 <v-layout> 223 <v-layout>
224 <v-flex xs4 sm4 class="pt-4 subheading"> 224 <v-flex xs4 sm4 class="pt-4 subheading">
225 <label class="right">Class:</label> 225 <label class="right">Class:</label>
226 </v-flex> 226 </v-flex>
227 <v-flex xs8 sm6 class="ml-3"> 227 <v-flex xs8 sm6 class="ml-3">
228 <v-select 228 <v-select
229 v-model="addSubject.classId" 229 v-model="addSubject.classId"
230 label="Select your class" 230 label="Select your class"
231 type="text" 231 type="text"
232 :items="classList" 232 :items="classList"
233 item-text="classNum" 233 item-text="classNum"
234 item-value="_id" 234 item-value="_id"
235 :rules="nameRules" 235 :rules="nameRules"
236 required 236 required
237 ></v-select> 237 ></v-select>
238 </v-flex> 238 </v-flex>
239 </v-layout> 239 </v-layout>
240 <v-layout> 240 <v-layout>
241 <v-flex xs4 sm4 class="pt-4 subheading"> 241 <v-flex xs4 sm4 class="pt-4 subheading">
242 <label class="right">Subject:</label> 242 <label class="right">Subject:</label>
243 </v-flex> 243 </v-flex>
244 <v-flex xs8 sm6 class="ml-3"> 244 <v-flex xs8 sm6 class="ml-3">
245 <v-text-field 245 <v-text-field
246 v-model="addSubject.subjectName" 246 v-model="addSubject.subjectName"
247 placeholder="fill your Subject Name" 247 placeholder="fill your Subject Name"
248 name="name" 248 name="name"
249 type="text" 249 type="text"
250 :rules="subjectRules" 250 :rules="subjectRules"
251 required 251 required
252 ></v-text-field> 252 ></v-text-field>
253 </v-flex> 253 </v-flex>
254 </v-layout> 254 </v-layout>
255 <v-layout> 255 <v-layout>
256 <v-flex xs12 sm9 offset-sm2> 256 <v-flex xs12 sm9 offset-sm2>
257 <v-card-actions> 257 <v-card-actions>
258 <v-btn @click="clear" round dark>clear</v-btn> 258 <v-btn @click="clear" round dark>clear</v-btn>
259 <v-spacer></v-spacer> 259 <v-spacer></v-spacer>
260 <v-btn @click="submit" round dark :loading="loading">Add</v-btn> 260 <v-btn @click="submit" round dark :loading="loading">Add</v-btn>
261 </v-card-actions> 261 </v-card-actions>
262 </v-flex> 262 </v-flex>
263 </v-layout> 263 </v-layout>
264 </v-form> 264 </v-form>
265 </v-flex> 265 </v-flex>
266 </v-layout> 266 </v-layout>
267 </v-container> 267 </v-container>
268 </v-card> 268 </v-card>
269 </v-flex> 269 </v-flex>
270 </v-container> 270 </v-container>
271 </v-tab-item> 271 </v-tab-item>
272 </v-tabs> 272 </v-tabs>
273 <div class="loader" v-if="showLoader"> 273 <div class="loader" v-if="showLoader">
274 <v-progress-circular indeterminate color="white"></v-progress-circular> 274 <v-progress-circular indeterminate color="white"></v-progress-circular>
275 </div> 275 </div>
276 </v-app> 276 </v-app>
277 </template> 277 </template>
278 278
279 <script> 279 <script>
280 import http from "@/Services/http.js"; 280 import http from "@/Services/http.js";
281 import Util from "@/util"; 281 import Util from "@/util";
282 282
283 export default { 283 export default {
284 data: () => ({ 284 data: () => ({
285 snackbar: false, 285 snackbar: false,
286 y: "top", 286 y: "top",
287 x: "right", 287 x: "right",
288 mode: "", 288 mode: "",
289 timeout: 3000, 289 timeout: 3000,
290 text: "", 290 text: "",
291 color: "", 291 color: "",
292 showLoader: false, 292 showLoader: false,
293 loading: false, 293 loading: false,
294 date: null, 294 date: null,
295 search: "", 295 search: "",
296 dialog: false, 296 dialog: false,
297 dialog1: false, 297 dialog1: false,
298 valid: true, 298 valid: true,
299 isActive: true, 299 isActive: true,
300 newActive: false, 300 newActive: false,
301 gender: ["Male", "Female"], 301 gender: ["Male", "Female"],
302 pagination: { 302 pagination: {
303 rowsPerPage: 19 303 rowsPerPage: 19
304 }, 304 },
305 token: "", 305 token: "",
306 nameRules: [v => !!v || " Class Name is required"], 306 nameRules: [v => !!v || " Class Name is required"],
307 subjectRules: [v => !!v || " Subject Name is required"], 307 subjectRules: [v => !!v || " Subject Name is required"],
308 headers: [ 308 headers: [
309 { 309 {
310 text: "No", 310 text: "No",
311 align: "center", 311 align: "center",
312 sortable: false, 312 sortable: false,
313 value: "No" 313 value: "No"
314 }, 314 },
315 { 315 {
316 text: "Subject Name", 316 text: "Subject Name",
317 value: "subjectName", 317 value: "subjectName",
318 sortable: false, 318 sortable: false,
319 align: "center" 319 align: "center"
320 }, 320 },
321 { text: "Action", value: "", sortable: false, align: "center" } 321 { text: "Action", value: "", sortable: false, align: "center" }
322 ], 322 ],
323 subjectList: [], 323 subjectList: [],
324 classList: [], 324 classList: [],
325 editedIndex: -1, 325 editedIndex: -1,
326 addSubject: {}, 326 addSubject: {},
327 selectClassId: "", 327 selectClassId: "",
328 selectClassId: "", 328 selectClassId: "",
329 editedItem: { 329 editedItem: {
330 subjectName: "" 330 subjectName: ""
331 } 331 }
332 }), 332 }),
333 methods: { 333 methods: {
334 pickFile() { 334 pickFile() {
335 this.$refs.image.click(); 335 this.$refs.image.click();
336 }, 336 },
337 337
338 editItem(item) { 338 editItem(item) {
339 this.editedItem = Object.assign({}, item); 339 this.editedItem = Object.assign({}, item);
340 this.dialog = true; 340 this.dialog = true;
341 }, 341 },
342 profile(item) { 342 profile(item) {
343 this.editedItem = Object.assign({}, item); 343 this.editedItem = Object.assign({}, item);
344 this.dialog1 = true; 344 this.dialog1 = true;
345 }, 345 },
346 deleteItem(item) { 346 deleteItem(item) {
347 let deleteSubject = { 347 let deleteSubject = {
348 classId: this.selectClassId, 348 classId: this.selectClassId,
349 subjectId: item._id 349 subjectId: item._id
350 }; 350 };
351 http() 351 http()
352 .delete( 352 .delete(
353 "/deleteSubject", 353 "/deleteSubject",
354 confirm("Are you sure you want to delete this?") && { 354 confirm("Are you sure you want to delete this?") && {
355 params: deleteSubject 355 params: deleteSubject
356 } 356 }
357 ) 357 )
358 .then(response => { 358 .then(response => {
359 this.getClassSubject(); 359 this.getClassSubject();
360 this.snackbar = true; 360 this.snackbar = true;
361 this.text = "Successfully delete Existing Subject"; 361 this.text = "Successfully delete Existing Subject";
362 }) 362 })
363 .catch(error => { 363 .catch(error => {
364 // console.log(error); 364 // console.log(error);
365 }); 365 });
366 }, 366 },
367 activeTab(type) { 367 activeTab(type) {
368 switch (type) { 368 switch (type) {
369 case "existing": 369 case "existing":
370 this.newActive = false; 370 this.newActive = false;
371 this.isActive = true; 371 this.isActive = true;
372 break; 372 break;
373 373
374 default: 374 default:
375 this.newActive = true; 375 this.newActive = true;
376 this.isActive = false; 376 this.isActive = false;
377 break; 377 break;
378 } 378 }
379 }, 379 },
380 close() { 380 close() {
381 this.dialog = false; 381 this.dialog = false;
382 setTimeout(() => { 382 setTimeout(() => {
383 this.editedItem = Object.assign({}, this.defaultItem); 383 this.editedItem = Object.assign({}, this.defaultItem);
384 this.editedIndex = -1; 384 this.editedIndex = -1;
385 }, 300); 385 }, 300);
386 }, 386 },
387 close1() { 387 close1() {
388 this.dialog1 = false; 388 this.dialog1 = false;
389 }, 389 },
390 submit() { 390 submit() {
391 if (this.$refs.form.validate()) { 391 if (this.$refs.form.validate()) {
392 http() 392 http()
393 .post("/addSubject", this.addSubject) 393 .post("/addSubject", this.addSubject)
394 .then(response => { 394 .then(response => {
395 this.getClassSubject(); 395 this.getClassSubject();
396 this.snackbar = true; 396 this.snackbar = true;
397 this.text = "New Subject added successfully"; 397 this.text = "New Subject added successfully";
398 this.clear(); 398 this.clear();
399 this.color = "green"; 399 this.color = "green";
400 }) 400 })
401 .catch(error => { 401 .catch(error => {
402 // console.log(error); 402 // console.log(error);
403 this.snackbar = true; 403 this.snackbar = true;
404 this.text = error.response.data.message; 404 this.text = error.response.data.message;
405 this.color = "error"; 405 this.color = "error";
406 }); 406 });
407 } 407 }
408 }, 408 },
409 clear() { 409 clear() {
410 this.$refs.form.reset(); 410 this.$refs.form.reset();
411 }, 411 },
412 save() { 412 save() {
413 let editSubject = { 413 let editSubject = {
414 classId: this.addSubject.selectName, 414 classId: this.addSubject.selectName,
415 subjectId: this.editedItem._id, 415 subjectId: this.editedItem._id,
416 subjectName: this.editedItem.subjectName 416 subjectName: this.editedItem.subjectName
417 }; 417 };
418 http() 418 http()
419 .put("/updateSubject", editSubject) 419 .put("/updateSubject", editSubject)
420 .then(response => { 420 .then(response => {
421 // console.log("editEvent",editEvent); 421 // console.log("editEvent",editEvent);
422 if ((this.snackbar = true)) { 422 if ((this.snackbar = true)) {
423 this.text = "Successfully Edit Existing Subject"; 423 this.text = "Successfully Edit Existing Subject";
424 } 424 }
425 // this.getClassSubject(); 425 // this.getClassSubject();
426 http() 426 http()
427 .get( 427 .get(
428 "/getParticularClass", 428 "/getParticularClass",
429 { params: { classId: this.selectClassId } }, 429 { params: { classId: this.selectClassId } },
430 { 430 {
431 headers: { Authorization: "Bearer " + this.token } 431 headers: { Authorization: "Bearer " + this.token }
432 } 432 }
433 ) 433 )
434 .then(response => { 434 .then(response => {
435 this.subjectList = response.data.data; 435 this.subjectList = response.data.data;
436 this.getClassSubject();
437 this.snackbar = true;
438 this.color = "green";
439 this.text = response.data.message;
436 }) 440 })
437 .catch(err => { 441 .catch(err => {
438 console.log("err====>", err); 442 console.log("err====>", err);
439 }); 443 });
440 }) 444 })
441 .catch(error => { 445 .catch(error => {
442 // console.log(error); 446 // console.log(error);
443 }); 447 });
444 this.close(); 448 this.close();
445 }, 449 },
446 getClassSubject() { 450 getClassSubject() {
447 this.selectClassId = this.selectClassId; 451 this.selectClassId = this.selectClassId;
448 http() 452 http()
449 .get( 453 .get(
450 "/getParticularClass", 454 "/getParticularClass",
451 { params: { classId: this.selectClassId } }, 455 { params: { classId: this.selectClassId } },
452 { 456 {
453 headers: { Authorization: "Bearer " + this.token } 457 headers: { Authorization: "Bearer " + this.token }
454 } 458 }
455 ) 459 )
456 .then(response => { 460 .then(response => {
457 this.subjectList = response.data.data; 461 this.subjectList = response.data.data;
458 }) 462 })
459 .catch(err => { 463 .catch(err => {
460 console.log("err====>", err); 464 console.log("err====>", err);
461 }); 465 });
462 }, 466 },
463 getClass() { 467 getClass() {
464 http() 468 http()
465 .get("/getClassesList", { 469 .get("/getClassesList", {
466 headers: { Authorization: "Bearer " + this.token } 470 headers: { Authorization: "Bearer " + this.token }
467 }) 471 })
468 .then(response => { 472 .then(response => {
469 this.classList = response.data.data; 473 this.classList = response.data.data;
470 }) 474 })
471 .catch(error => { 475 .catch(error => {
472 if (error.response.status === 401) { 476 if (error.response.status === 401) {
473 this.$router.replace({ path: "/" }); 477 this.$router.replace({ path: "/" });
474 this.$store.dispatch("setToken", null); 478 this.$store.dispatch("setToken", null);
475 this.$store.dispatch("Id", null); 479 this.$store.dispatch("Id", null);
476 } 480 }
477 }); 481 });
478 } 482 }
479 }, 483 },
480 mounted() { 484 mounted() {
481 this.token = this.$store.state.token; 485 this.token = this.$store.state.token;
482 // this.getNoticeDataList(); 486 // this.getNoticeDataList();
483 this.getClass(); 487 this.getClass();
484 }, 488 },
485 created() { 489 created() {
486 this.$root.$on("app:search", search => { 490 this.$root.$on("app:search", search => {
487 this.search = search; 491 this.search = search;
488 }); 492 });
489 }, 493 },
490 beforeDestroy() { 494 beforeDestroy() {
491 // dont forget to remove the listener 495 // dont forget to remove the listener
492 this.$root.$off("app:search"); 496 this.$root.$off("app:search");
493 } 497 }
494 }; 498 };
495 </script> 499 </script>
496 <style scoped> 500 <style scoped>
497 .active { 501 .active {
498 background-color: gray; 502 background-color: gray;
499 color: white !important; 503 color: white !important;
500 } 504 }
501 .activebtn { 505 .activebtn {
502 color: black !important; 506 color: black !important;
503 } 507 }
504 </style> 508 </style>
src/pages/User/user.vue
Diff comments   View file @99cd791
1 <template> 1 <template>
2 <v-app id="pages-dasboard"> 2 <v-app id="pages-dasboard">
3 <v-tabs grow slider-color="gray"> 3 <v-tabs grow slider-color="gray">
4 <v-tab 4 <v-tab
5 ripple 5 ripple
6 @click="activeTab('existing')" 6 @click="activeTab('existing')"
7 v-bind:class="{ active: isActive }" 7 v-bind:class="{ active: isActive }"
8 id="tab" 8 id="tab"
9 class="subheading" 9 class="subheading"
10 >Existing User</v-tab> 10 >Existing User</v-tab>
11 <v-tab 11 <v-tab
12 ripple 12 ripple
13 @click="activeTab('new')" 13 @click="activeTab('new')"
14 v-bind:class="{ active: newActive }" 14 v-bind:class="{ active: newActive }"
15 id="tab1" 15 id="tab1"
16 User 16 User
17 class="subheading" 17 class="subheading"
18 >Add New User</v-tab> 18 >Add New User</v-tab>
19 <!-- ****** EDIT USERS DETAILS ****** --> 19 <!-- ****** EDIT USERS DETAILS ****** -->
20 <v-tab-item> 20 <v-tab-item>
21 <v-snackbar 21 <v-snackbar
22 :timeout="timeout" 22 :timeout="timeout"
23 :top="y === 'top'" 23 :top="y === 'top'"
24 :right="x === 'right'" 24 :right="x === 'right'"
25 :vertical="mode === 'vertical'" 25 :vertical="mode === 'vertical'"
26 v-model="snackbar" 26 v-model="snackbar"
27 color="success" 27 color="success"
28 >{{ text }}</v-snackbar> 28 >{{ text }}</v-snackbar>
29 <v-dialog v-model="dialog" max-width="1100px" scrollable> 29 <v-dialog v-model="dialog" max-width="1100px" scrollable>
30 <v-card flat> 30 <v-card flat>
31 <v-toolbar color="grey lighten-2" flat> 31 <v-toolbar color="grey lighten-2" flat>
32 <v-spacer></v-spacer> 32 <v-spacer></v-spacer>
33 <v-toolbar-title>Edit User Profile</v-toolbar-title> 33 <v-toolbar-title>Edit User Profile</v-toolbar-title>
34 <v-spacer></v-spacer> 34 <v-spacer></v-spacer>
35 </v-toolbar> 35 </v-toolbar>
36 <v-card-text style="height: 680px;"> 36 <v-card-text style="height: 680px;">
37 <v-layout> 37 <v-layout>
38 <v-flex 38 <v-flex
39 xs12 39 xs12
40 class="text-xs-center text-sm-center text-md-center text-lg-center my-4" 40 class="text-xs-center text-sm-center text-md-center text-lg-center my-4"
41 > 41 >
42 <v-avatar size="160px"> 42 <v-avatar size="160px">
43 <img src="/static/icon/user.png" v-if="!editedItem.profilePicUrl && !imageUrl" /> 43 <img src="/static/icon/user.png" v-if="!editedItem.profilePicUrl && !imageUrl" />
44 <img 44 <img
45 :src="editedItem.profilePicUrl" 45 :src="editedItem.profilePicUrl"
46 v-else-if="editedItem.profilePicUrl && !imageUrl" 46 v-else-if="editedItem.profilePicUrl && !imageUrl"
47 /> 47 />
48 <img 48 <img
49 v-if="imageUrl" 49 v-if="imageUrl"
50 :src="imageUrl" 50 :src="imageUrl"
51 height="150" 51 height="150"
52 style="border-radius:50%; width:200px" 52 style="border-radius:50%; width:200px"
53 /> 53 />
54 </v-avatar> 54 </v-avatar>
55 <input 55 <input
56 type="file" 56 type="file"
57 style="display:none" 57 style="display:none"
58 ref="image" 58 ref="image"
59 accept="image/*" 59 accept="image/*"
60 @change="onFilePicked" 60 @change="onFilePicked"
61 /> 61 />
62 </v-flex> 62 </v-flex>
63 </v-layout> 63 </v-layout>
64 <v-layout wrap> 64 <v-layout wrap>
65 <v-flex xs12 sm6> 65 <v-flex xs12 sm6>
66 <v-layout> 66 <v-layout>
67 <v-flex xs4 class="pt-4 subheading"> 67 <v-flex xs4 class="pt-4 subheading">
68 <label class="right">Name:</label> 68 <label class="right">Name:</label>
69 </v-flex> 69 </v-flex>
70 <v-flex xs8 class="ml-3"> 70 <v-flex xs8 class="ml-3">
71 <v-text-field 71 <v-text-field
72 v-model="editedItem.name" 72 v-model="editedItem.name"
73 placeholder="fill your Name" 73 placeholder="fill your Name"
74 name="name" 74 name="name"
75 type="text" 75 type="text"
76 required 76 required
77 ></v-text-field> 77 ></v-text-field>
78 </v-flex> 78 </v-flex>
79 </v-layout> 79 </v-layout>
80 </v-flex> 80 </v-flex>
81 <v-flex xs12 sm6> 81 <v-flex xs12 sm6>
82 <v-layout> 82 <v-layout>
83 <v-flex xs4 class="pt-4 subheading"> 83 <v-flex xs4 class="pt-4 subheading">
84 <label class="right">Email ID:</label> 84 <label class="right">Email ID:</label>
85 </v-flex> 85 </v-flex>
86 <v-flex xs8 class="ml-3"> 86 <v-flex xs8 class="ml-3">
87 <v-text-field 87 <v-text-field
88 placeholder="fill your email" 88 placeholder="fill your email"
89 v-model="editedItem.email" 89 v-model="editedItem.email"
90 type="text" 90 type="text"
91 name="email" 91 name="email"
92 required 92 required
93 ></v-text-field> 93 ></v-text-field>
94 </v-flex> 94 </v-flex>
95 </v-layout> 95 </v-layout>
96 </v-flex> 96 </v-flex>
97 </v-layout> 97 </v-layout>
98 <v-layout wrap> 98 <v-layout wrap>
99 <v-flex xs12 sm6> 99 <v-flex xs12 sm6>
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-sm-only hidden-xs-only">Date of Birth:</label> 102 <label class="right hidden-sm-only hidden-xs-only">Date of Birth:</label>
103 <label class="right hidden-lg-only hidden-xl-only hidden-md-only">D.O.B:</label> 103 <label class="right hidden-lg-only hidden-xl-only hidden-md-only">D.O.B:</label>
104 </v-flex> 104 </v-flex>
105 <v-flex xs8 class="ml-3"> 105 <v-flex xs8 class="ml-3">
106 <v-menu 106 <v-menu
107 ref="menu" 107 ref="menu"
108 :close-on-content-click="false" 108 :close-on-content-click="false"
109 v-model="menu2" 109 v-model="menu2"
110 :nudge-right="40" 110 :nudge-right="40"
111 lazy 111 lazy
112 transition="scale-transition" 112 transition="scale-transition"
113 offset-y 113 offset-y
114 full-width 114 full-width
115 min-width="290px" 115 min-width="290px"
116 > 116 >
117 <v-text-field 117 <v-text-field
118 slot="activator" 118 slot="activator"
119 v-model="editedItem.dob" 119 v-model="editedItem.dob"
120 placeholder="Select date" 120 placeholder="Select date"
121 ></v-text-field> 121 ></v-text-field>
122 <v-date-picker 122 <v-date-picker
123 ref="picker" 123 ref="picker"
124 v-model="editedItem.dob" 124 v-model="editedItem.dob"
125 :max="new Date().toISOString().substr(0, 10)" 125 :max="new Date().toISOString().substr(0, 10)"
126 min="1950-01-01" 126 min="1950-01-01"
127 @input="menu2 = false" 127 @input="menu2 = false"
128 ></v-date-picker> 128 ></v-date-picker>
129 </v-menu> 129 </v-menu>
130 </v-flex> 130 </v-flex>
131 </v-layout> 131 </v-layout>
132 </v-flex> 132 </v-flex>
133 <v-flex xs12 sm6> 133 <v-flex xs12 sm6>
134 <v-layout> 134 <v-layout>
135 <v-flex xs4 class="pt-4 subheading"> 135 <v-flex xs4 class="pt-4 subheading">
136 <label class="right">Gender:</label> 136 <label class="right">Gender:</label>
137 </v-flex> 137 </v-flex>
138 <v-flex xs8 class="ml-3"> 138 <v-flex xs8 class="ml-3">
139 <v-select 139 <v-select
140 :items="gender" 140 :items="gender"
141 v-model="editedItem.gender" 141 v-model="editedItem.gender"
142 label="Select gender" 142 label="Select gender"
143 name="gender" 143 name="gender"
144 required 144 required
145 ></v-select> 145 ></v-select>
146 </v-flex> 146 </v-flex>
147 </v-layout> 147 </v-layout>
148 </v-flex> 148 </v-flex>
149 </v-layout> 149 </v-layout>
150 <v-layout wrap> 150 <v-layout wrap>
151 <v-flex xs12 sm6> 151 <v-flex xs12 sm6>
152 <v-layout> 152 <v-layout>
153 <v-flex xs4 class="pt-4 subheading"> 153 <v-flex xs4 class="pt-4 subheading">
154 <label class="right">Religion:</label> 154 <label class="right">Religion:</label>
155 </v-flex> 155 </v-flex>
156 <v-flex xs8 class="ml-3"> 156 <v-flex xs8 class="ml-3">
157 <v-text-field 157 <v-text-field
158 v-model="editedItem.religion" 158 v-model="editedItem.religion"
159 placeholder="fill your Religion" 159 placeholder="fill your Religion"
160 name="religion" 160 name="religion"
161 type="text" 161 type="text"
162 required 162 required
163 ></v-text-field> 163 ></v-text-field>
164 </v-flex> 164 </v-flex>
165 </v-layout> 165 </v-layout>
166 </v-flex> 166 </v-flex>
167 <v-flex xs12 sm6> 167 <v-flex xs12 sm6>
168 <v-layout> 168 <v-layout>
169 <v-flex xs4 class="pt-4 subheading"> 169 <v-flex xs4 class="pt-4 subheading">
170 <label class="right">JoiningDate:</label> 170 <label class="right">JoiningDate:</label>
171 </v-flex> 171 </v-flex>
172 <v-flex xs8 class="ml-3"> 172 <v-flex xs8 class="ml-3">
173 <v-menu 173 <v-menu
174 ref="menu" 174 ref="menu"
175 :close-on-content-click="false" 175 :close-on-content-click="false"
176 v-model="menu3" 176 v-model="menu3"
177 :nudge-right="40" 177 :nudge-right="40"
178 lazy 178 lazy
179 transition="scale-transition" 179 transition="scale-transition"
180 offset-y 180 offset-y
181 full-width 181 full-width
182 min-width="290px" 182 min-width="290px"
183 > 183 >
184 <v-text-field 184 <v-text-field
185 slot="activator" 185 slot="activator"
186 v-model="editedItem.joiningDate" 186 v-model="editedItem.joiningDate"
187 placeholder="Select date" 187 placeholder="Select date"
188 ></v-text-field> 188 ></v-text-field>
189 <v-date-picker 189 <v-date-picker
190 ref="picker" 190 ref="picker"
191 v-model="editedItem.joiningDate" 191 v-model="editedItem.joiningDate"
192 :max="new Date().toISOString().substr(0, 10)" 192 :max="new Date().toISOString().substr(0, 10)"
193 min="1950-01-01" 193 min="1950-01-01"
194 @input="menu3 = false" 194 @input="menu3 = false"
195 ></v-date-picker> 195 ></v-date-picker>
196 </v-menu> 196 </v-menu>
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 wrap> 201 <v-layout wrap>
202 <v-flex xs12 sm6> 202 <v-flex xs12 sm6>
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">Phone:</label> 205 <label class="right">Phone:</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.phone" 209 v-model="editedItem.phone"
210 placeholder="fill your MobileNo" 210 placeholder="fill your MobileNo"
211 name="mobileNo" 211 name="mobileNo"
212 type="number" 212 type="number"
213 required 213 required
214 ></v-text-field> 214 ></v-text-field>
215 </v-flex> 215 </v-flex>
216 </v-layout> 216 </v-layout>
217 </v-flex> 217 </v-flex>
218 <v-flex xs12 sm6> 218 <v-flex xs12 sm6>
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 hidden-sm-only hidden-xs-only">Select Role:</label> 221 <label class="right hidden-sm-only hidden-xs-only">Select Role:</label>
222 <label class="right hidden-lg-only hidden-xl-only hidden-md-only">Role:</label> 222 <label class="right hidden-lg-only hidden-xl-only hidden-md-only">Role:</label>
223 </v-flex> 223 </v-flex>
224 <v-flex xs8 class="ml-3"> 224 <v-flex xs8 class="ml-3">
225 <v-autocomplete 225 <v-autocomplete
226 v-model="editedItem.role" 226 v-model="editedItem.role"
227 :label="editedItem.role" 227 :label="editedItem.role"
228 :items="userRole" 228 :items="userRole"
229 item-text="name" 229 item-text="name"
230 item-value="role" 230 item-value="role"
231 required 231 required
232 ></v-autocomplete> 232 ></v-autocomplete>
233 </v-flex> 233 </v-flex>
234 </v-layout> 234 </v-layout>
235 </v-flex> 235 </v-flex>
236 </v-layout> 236 </v-layout>
237 <v-layout wrap> 237 <v-layout wrap>
238 <v-flex xs12 sm6> 238 <v-flex xs12 sm6>
239 <v-layout> 239 <v-layout>
240 <v-flex xs4 class="pt-4 subheading"> 240 <v-flex xs4 class="pt-4 subheading">
241 <label class="right hidden-sm-only hidden-xs-only">Uplaod Image:</label> 241 <label class="right hidden-sm-only hidden-xs-only">Uplaod Image:</label>
242 <label class="right hidden-lg-only hidden-xl-only hidden-md-only">Uplaod:</label> 242 <label class="right hidden-lg-only hidden-xl-only hidden-md-only">Uplaod:</label>
243 </v-flex> 243 </v-flex>
244 <v-flex xs8 class="ml-3"> 244 <v-flex xs8 class="ml-3">
245 <v-text-field 245 <v-text-field
246 label="Select Image" 246 label="Select Image"
247 @click="pickFile" 247 @click="pickFile"
248 v-model="imageName" 248 v-model="imageName"
249 append-icon="attach_file" 249 append-icon="attach_file"
250 ></v-text-field> 250 ></v-text-field>
251 </v-flex> 251 </v-flex>
252 </v-layout> 252 </v-layout>
253 </v-flex> 253 </v-flex>
254 <v-flex xs12 sm6> 254 <v-flex xs12 sm6>
255 <v-layout> 255 <v-layout>
256 <v-flex xs4 class="pt-4 subheading"> 256 <v-flex xs4 class="pt-4 subheading">
257 <label class="right">Address:</label> 257 <label class="right">Address:</label>
258 </v-flex> 258 </v-flex>
259 <v-flex xs8 class="ml-3"> 259 <v-flex xs8 class="ml-3">
260 <v-text-field 260 <v-text-field
261 name="input-4-3" 261 name="input-4-3"
262 v-model="editedItem.address" 262 v-model="editedItem.address"
263 placeholder="fill Your Address" 263 placeholder="fill Your Address"
264 required 264 required
265 ></v-text-field> 265 ></v-text-field>
266 </v-flex> 266 </v-flex>
267 </v-layout> 267 </v-layout>
268 </v-flex> 268 </v-flex>
269 </v-layout> 269 </v-layout>
270 <v-layout> 270 <v-layout>
271 <v-flex xs12 sm12> 271 <v-flex xs12 sm12>
272 <v-card-actions> 272 <v-card-actions>
273 <v-btn round dark @click.native="close">Cancel</v-btn> 273 <v-btn round dark @click.native="close">Cancel</v-btn>
274 <v-spacer></v-spacer> 274 <v-spacer></v-spacer>
275 <v-btn round dark :loading="loading" @click="save">Save</v-btn> 275 <v-btn round dark :loading="loading" @click="save">Save</v-btn>
276 </v-card-actions> 276 </v-card-actions>
277 </v-flex> 277 </v-flex>
278 </v-layout> 278 </v-layout>
279 </v-card-text> 279 </v-card-text>
280 </v-card> 280 </v-card>
281 </v-dialog> 281 </v-dialog>
282 282
283 <!-- ****** PROFILE VIEW User DETAILS ****** --> 283 <!-- ****** PROFILE VIEW User DETAILS ****** -->
284 284
285 <v-dialog v-model="dialog1" max-width="600px" scrollable> 285 <v-dialog v-model="dialog1" max-width="600px" scrollable>
286 <v-card> 286 <v-card>
287 <v-toolbar color="grey lighten-2" flat> 287 <v-toolbar color="grey lighten-2" flat>
288 <v-spacer></v-spacer> 288 <v-spacer></v-spacer>
289 <v-toolbar-title> 289 <v-toolbar-title>
290 <h3>User Profile</h3> 290 <h3>User Profile</h3>
291 </v-toolbar-title> 291 </v-toolbar-title>
292 <v-spacer></v-spacer> 292 <v-spacer></v-spacer>
293 <v-icon @click="close1">close</v-icon> 293 <v-icon @click="close1">close</v-icon>
294 </v-toolbar> 294 </v-toolbar>
295 <v-card-text style="height: 600px;"> 295 <v-card-text style="height: 600px;">
296 <v-container grid-list-md> 296 <v-container grid-list-md>
297 <v-layout wrap> 297 <v-layout wrap>
298 <v-flex> 298 <v-flex>
299 <v-flex align-center justify-center layout text-xs-center> 299 <v-flex align-center justify-center layout text-xs-center>
300 <v-avatar size="160px"> 300 <v-avatar size="160px">
301 <img src="/static/icon/user.png" v-if="!editedItem.profilePicUrl" /> 301 <img src="/static/icon/user.png" v-if="!editedItem.profilePicUrl" />
302 <img :src="editedItem.profilePicUrl" v-else-if="editedItem.profilePicUrl" /> 302 <img :src="editedItem.profilePicUrl" v-else-if="editedItem.profilePicUrl" />
303 </v-avatar> 303 </v-avatar>
304 </v-flex> 304 </v-flex>
305 <v-layout> 305 <v-layout>
306 <v-flex xs4 sm6> 306 <v-flex xs4 sm6>
307 <h5 class="right my-1"> 307 <h5 class="right my-1">
308 <b>Name:</b> 308 <b>Name:</b>
309 </h5> 309 </h5>
310 </v-flex> 310 </v-flex>
311 <v-flex sm6 xs8> 311 <v-flex sm6 xs8>
312 <h5 class="my-1">{{ editedItem.name }}</h5> 312 <h5 class="my-1">{{ editedItem.name }}</h5>
313 </v-flex> 313 </v-flex>
314 </v-layout> 314 </v-layout>
315 <v-layout> 315 <v-layout>
316 <v-flex xs4 sm6> 316 <v-flex xs4 sm6>
317 <h5 class="right my-1"> 317 <h5 class="right my-1">
318 <b>Email:</b> 318 <b>Email:</b>
319 </h5> 319 </h5>
320 </v-flex> 320 </v-flex>
321 <v-flex sm6 xs8> 321 <v-flex sm6 xs8>
322 <h5 class="my-1">{{ editedItem.email }}</h5> 322 <h5 class="my-1">{{ editedItem.email }}</h5>
323 </v-flex> 323 </v-flex>
324 </v-layout> 324 </v-layout>
325 <v-layout> 325 <v-layout>
326 <v-flex xs4 sm6> 326 <v-flex xs4 sm6>
327 <h5 class="right my-1"> 327 <h5 class="right my-1">
328 <b>Gender:</b> 328 <b>Gender:</b>
329 </h5> 329 </h5>
330 </v-flex> 330 </v-flex>
331 <v-flex sm6 xs8> 331 <v-flex sm6 xs8>
332 <h5 class="my-1">{{ editedItem.gender }}</h5> 332 <h5 class="my-1">{{ editedItem.gender }}</h5>
333 </v-flex> 333 </v-flex>
334 </v-layout> 334 </v-layout>
335 <v-layout> 335 <v-layout>
336 <v-flex xs4 sm6> 336 <v-flex xs4 sm6>
337 <h5 class="right my-1"> 337 <h5 class="right my-1">
338 <b>Religion:</b> 338 <b>Religion:</b>
339 </h5> 339 </h5>
340 </v-flex> 340 </v-flex>
341 <v-flex sm6 xs8> 341 <v-flex sm6 xs8>
342 <h5 class="my-1">{{ editedItem.religion }}</h5> 342 <h5 class="my-1">{{ editedItem.religion }}</h5>
343 </v-flex> 343 </v-flex>
344 </v-layout> 344 </v-layout>
345 <v-layout> 345 <v-layout>
346 <v-flex xs4 sm6> 346 <v-flex xs4 sm6>
347 <h5 class="right my-1"> 347 <h5 class="right my-1">
348 <b>Role:</b> 348 <b>Role:</b>
349 </h5> 349 </h5>
350 </v-flex> 350 </v-flex>
351 <v-flex sm6 xs8> 351 <v-flex sm6 xs8>
352 <h5 class="my-1">{{ editedItem.role }}</h5> 352 <h5 class="my-1">{{ editedItem.role }}</h5>
353 </v-flex> 353 </v-flex>
354 </v-layout> 354 </v-layout>
355 <v-layout> 355 <v-layout>
356 <v-flex xs4 sm6> 356 <v-flex xs4 sm6>
357 <h5 class="right my-1"> 357 <h5 class="right my-1">
358 <b>Phone:</b> 358 <b>Phone:</b>
359 </h5> 359 </h5>
360 </v-flex> 360 </v-flex>
361 <v-flex sm6 xs8> 361 <v-flex sm6 xs8>
362 <h5 class="my-1">{{ editedItem.phone }}</h5> 362 <h5 class="my-1">{{ editedItem.phone }}</h5>
363 </v-flex> 363 </v-flex>
364 </v-layout> 364 </v-layout>
365 <v-layout> 365 <v-layout>
366 <v-flex xs4 sm6> 366 <v-flex xs4 sm6>
367 <h5 class="right my-1"> 367 <h5 class="right my-1">
368 <b>JoiningDate:</b> 368 <b>JoiningDate:</b>
369 </h5> 369 </h5>
370 </v-flex> 370 </v-flex>
371 <v-flex sm6 xs8> 371 <v-flex sm6 xs8>
372 <h5 class="my-1">{{ dates(editedItem.joiningDate) }}</h5> 372 <h5 class="my-1">{{ dates(editedItem.joiningDate) }}</h5>
373 </v-flex> 373 </v-flex>
374 </v-layout> 374 </v-layout>
375 <v-layout> 375 <v-layout>
376 <v-flex xs4 sm6> 376 <v-flex xs4 sm6>
377 <h5 class="right my-1"> 377 <h5 class="right my-1">
378 <label class="right hidden-sm-only hidden-xs-only"> 378 <label class="right hidden-sm-only hidden-xs-only">
379 <b>Date of Birth:</b> 379 <b>Date of Birth:</b>
380 </label> 380 </label>
381 <label class="right hidden-lg-only hidden-xl-only hidden-md-only"> 381 <label class="right hidden-lg-only hidden-xl-only hidden-md-only">
382 <b>D.O.B:</b> 382 <b>D.O.B:</b>
383 </label> 383 </label>
384 </h5> 384 </h5>
385 </v-flex> 385 </v-flex>
386 <v-flex sm6 xs8> 386 <v-flex sm6 xs8>
387 <h5 class="my-1">{{ dates(editedItem.dob) }}</h5> 387 <h5 class="my-1">{{ dates(editedItem.dob) }}</h5>
388 </v-flex> 388 </v-flex>
389 </v-layout> 389 </v-layout>
390 <v-layout> 390 <v-layout>
391 <v-flex xs4 sm6> 391 <v-flex xs4 sm6>
392 <h5 class="right my-1"> 392 <h5 class="right my-1">
393 <b>Address:</b> 393 <b>Address:</b>
394 </h5> 394 </h5>
395 </v-flex> 395 </v-flex>
396 <v-flex sm6 xs8> 396 <v-flex sm6 xs8>
397 <h5 class="my-1">{{ editedItem.address }}</h5> 397 <h5 class="my-1">{{ editedItem.address }}</h5>
398 </v-flex> 398 </v-flex>
399 </v-layout> 399 </v-layout>
400 </v-flex> 400 </v-flex>
401 </v-layout> 401 </v-layout>
402 </v-container> 402 </v-container>
403 </v-card-text> 403 </v-card-text>
404 </v-card> 404 </v-card>
405 </v-dialog> 405 </v-dialog>
406 <v-snackbar 406 <v-snackbar
407 :timeout="timeout" 407 :timeout="timeout"
408 :top="y === 'top'" 408 :top="y === 'top'"
409 :right="x === 'right'" 409 :right="x === 'right'"
410 :vertical="mode === 'vertical'" 410 :vertical="mode === 'vertical'"
411 v-model="snackbar" 411 v-model="snackbar"
412 color="success" 412 color="success"
413 >{{ text }}</v-snackbar> 413 >{{ text }}</v-snackbar>
414 414
415 <!-- ****** EXISTING-USER TABLE DATA****** --> 415 <!-- ****** EXISTING-USER TABLE DATA****** -->
416 416
417 <v-data-table 417 <v-data-table
418 :headers="headers" 418 :headers="headers"
419 :items="desserts" 419 :items="desserts"
420 :pagination.sync="pagination" 420 :pagination.sync="pagination"
421 :search="search" 421 :search="search"
422 > 422 >
423 <template slot="items" slot-scope="props"> 423 <template slot="items" slot-scope="props">
424 <td id="td" class="text-xs-center">{{ props.index + 1 }}</td> 424 <td id="td" class="text-xs-center">{{ props.index + 1 }}</td>
425 <td id="td" class="text-xs-center"> 425 <td id="td" class="text-xs-center">
426 <v-avatar> 426 <v-avatar>
427 <img :src="props.item.profilePicUrl" v-if="props.item.profilePicUrl" /> 427 <img :src="props.item.profilePicUrl" v-if="props.item.profilePicUrl" />
428 <img src="/static/icon/user.png" v-else-if="!props.item.profilePicUrl" /> 428 <img src="/static/icon/user.png" v-else-if="!props.item.profilePicUrl" />
429 </v-avatar> 429 </v-avatar>
430 </td> 430 </td>
431 <td id="td" class="text-xs-center">{{ props.item.name}}</td> 431 <td id="td" class="text-xs-center">{{ props.item.name}}</td>
432 <td id="td" class="text-xs-center">{{ props.item.email }}</td> 432 <td id="td" class="text-xs-center">{{ props.item.email }}</td>
433 <td id="td" class="text-xs-center">{{ dates(props.item.dob) }}</td> 433 <td id="td" class="text-xs-center">{{ dates(props.item.dob) }}</td>
434 <td id="td" class="text-xs-center">{{ dates(props.item.joiningDate)}}</td> 434 <td id="td" class="text-xs-center">{{ dates(props.item.joiningDate)}}</td>
435 <td id="td" class="text-xs-center">{{ props.item.phone }}</td> 435 <td id="td" class="text-xs-center">{{ props.item.phone }}</td>
436 <td class="text-xs-center"> 436 <td class="text-xs-center">
437 <span> 437 <span>
438 <v-tooltip top> 438 <v-tooltip top>
439 <img 439 <img
440 slot="activator" 440 slot="activator"
441 style="cursor:pointer; width:25px; height:18px; " 441 style="cursor:pointer; width:25px; height:18px; "
442 class="mr5" 442 class="mr5"
443 @click="profile(props.item)" 443 @click="profile(props.item)"
444 src="/static/icon/eye1.png" 444 src="/static/icon/eye1.png"
445 /> 445 />
446 <span>View</span> 446 <span>View</span>
447 </v-tooltip> 447 </v-tooltip>
448 <v-tooltip top> 448 <v-tooltip top>
449 <img 449 <img
450 slot="activator" 450 slot="activator"
451 style="cursor:pointer; width:20px; height:18px; " 451 style="cursor:pointer; width:20px; height:18px; "
452 class="mr5" 452 class="mr5"
453 @click="editItem(props.item)" 453 @click="editItem(props.item)"
454 src="/static/icon/edit1.png" 454 src="/static/icon/edit1.png"
455 /> 455 />
456 <span>Edit</span> 456 <span>Edit</span>
457 </v-tooltip> 457 </v-tooltip>
458 <v-tooltip top> 458 <v-tooltip top>
459 <img 459 <img
460 slot="activator" 460 slot="activator"
461 style="cursor:pointer; width:20px; height:20px; " 461 style="cursor:pointer; width:20px; height:20px; "
462 class="mr5" 462 class="mr5"
463 @click="deleteItem(props.item)" 463 @click="deleteItem(props.item)"
464 src="/static/icon/delete1.png" 464 src="/static/icon/delete1.png"
465 /> 465 />
466 <span>Delete</span> 466 <span>Delete</span>
467 </v-tooltip> 467 </v-tooltip>
468 </span> 468 </span>
469 </td> 469 </td>
470 </template> 470 </template>
471 <v-alert 471 <v-alert
472 slot="no-results" 472 slot="no-results"
473 :value="true" 473 :value="true"
474 color="error" 474 color="error"
475 icon="warning" 475 icon="warning"
476 >Your search for "{{ search }}" found no results.</v-alert> 476 >Your search for "{{ search }}" found no results.</v-alert>
477 </v-data-table> 477 </v-data-table>
478 </v-tab-item> 478 </v-tab-item>
479 479
480 <!-- ****** Add User Data****** --> 480 <!-- ****** Add User Data****** -->
481 <v-tab-item> 481 <v-tab-item>
482 <v-container> 482 <v-container>
483 <v-snackbar 483 <v-snackbar
484 :timeout="timeout" 484 :timeout="timeout"
485 :top="y === 'top'" 485 :top="y === 'top'"
486 :right="x === 'right'" 486 :right="x === 'right'"
487 :vertical="mode === 'vertical'" 487 :vertical="mode === 'vertical'"
488 v-model="snackbar" 488 v-model="snackbar"
489 color="success" 489 color="success"
490 >{{ text }}</v-snackbar> 490 >{{ text }}</v-snackbar>
491 <v-flex xs12 sm12 class="my-4"> 491 <v-flex xs12 sm12 class="my-4">
492 <v-card flat> 492 <v-card flat>
493 <v-form ref="form" v-model="valid" lazy-validation> 493 <v-form ref="form" v-model="valid" lazy-validation>
494 <v-container fluid> 494 <v-container fluid>
495 <v-layout> 495 <v-layout>
496 <v-flex 496 <v-flex
497 xs12 497 xs12
498 class="text-xs-center text-sm-center text-md-center text-lg-center my-4 mr-4" 498 class="text-xs-center text-sm-center text-md-center text-lg-center my-4 mr-4"
499 > 499 >
500 <v-avatar size="100px"> 500 <v-avatar size="100px">
501 <img src="/static/icon/user.png" v-if="!imageUrl" /> 501 <img src="/static/icon/user.png" v-if="!imageUrl" />
502 </v-avatar> 502 </v-avatar>
503 <img 503 <img
504 :src="imageUrl" 504 :src="imageUrl"
505 height="150" 505 height="150"
506 v-if="imageUrl" 506 v-if="imageUrl"
507 style="border-radius:50%; width:200px" 507 style="border-radius:50%; width:200px"
508 /> 508 />
509 </v-flex> 509 </v-flex>
510 </v-layout> 510 </v-layout>
511 <v-layout> 511 <v-layout>
512 <v-flex xs12 sm6> 512 <v-flex xs12 sm6>
513 <v-layout> 513 <v-layout>
514 <v-flex xs4 class="pt-4 subheading"> 514 <v-flex xs4 class="pt-4 subheading">
515 <label class="right">Name:</label> 515 <label class="right">Name:</label>
516 </v-flex> 516 </v-flex>
517 <v-flex xs8 class="ml-3"> 517 <v-flex xs8 class="ml-3">
518 <v-text-field 518 <v-text-field
519 v-model="addUser.name" 519 v-model="addUser.name"
520 placeholder="fill your Name" 520 placeholder="fill your Name"
521 name="name" 521 name="name"
522 type="text" 522 type="text"
523 :rules="nameRules" 523 :rules="nameRules"
524 required 524 required
525 ></v-text-field> 525 ></v-text-field>
526 </v-flex> 526 </v-flex>
527 </v-layout> 527 </v-layout>
528 </v-flex> 528 </v-flex>
529 <v-flex xs12 sm6> 529 <v-flex xs12 sm6>
530 <v-layout> 530 <v-layout>
531 <v-flex xs4 class="pt-4 subheading"> 531 <v-flex xs4 class="pt-4 subheading">
532 <label class="right">Email ID:</label> 532 <label class="right">Email ID:</label>
533 </v-flex> 533 </v-flex>
534 <v-flex xs8 class="ml-3"> 534 <v-flex xs8 class="ml-3">
535 <v-text-field 535 <v-text-field
536 placeholder="fill your email" 536 placeholder="fill your email"
537 :rules="emailRules" 537 :rules="emailRules"
538 v-model="addUser.email" 538 v-model="addUser.email"
539 type="text" 539 type="text"
540 name="email" 540 name="email"
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 hidden-sm-only hidden-xs-only">Date of Birth:</label> 551 <label class="right hidden-sm-only hidden-xs-only">Date of Birth:</label>
552 <label class="right hidden-lg-only hidden-xl-only hidden-md-only">D.O.B:</label> 552 <label class="right hidden-lg-only hidden-xl-only hidden-md-only">D.O.B:</label>
553 </v-flex> 553 </v-flex>
554 <v-flex xs8 class="ml-3"> 554 <v-flex xs8 class="ml-3">
555 <v-menu 555 <v-menu
556 ref="menu" 556 ref="menu"
557 :close-on-content-click="false" 557 :close-on-content-click="false"
558 v-model="menu" 558 v-model="menu"
559 :nudge-right="40" 559 :nudge-right="40"
560 lazy 560 lazy
561 transition="scale-transition" 561 transition="scale-transition"
562 offset-y 562 offset-y
563 full-width 563 full-width
564 min-width="290px" 564 min-width="290px"
565 > 565 >
566 <v-text-field 566 <v-text-field
567 slot="activator" 567 slot="activator"
568 :rules="dateRules" 568 :rules="dateRules"
569 v-model="addUser.dob" 569 v-model="addUser.dob"
570 placeholder="Select DOB" 570 placeholder="Select DOB"
571 ></v-text-field> 571 ></v-text-field>
572 <v-date-picker 572 <v-date-picker
573 ref="picker" 573 ref="picker"
574 v-model="addUser.dob" 574 v-model="addUser.dob"
575 :max="new Date().toISOString().substr(0, 10)" 575 :max="new Date().toISOString().substr(0, 10)"
576 min="1950-01-01" 576 min="1950-01-01"
577 @input="menu = false" 577 @input="menu = false"
578 ></v-date-picker> 578 ></v-date-picker>
579 </v-menu> 579 </v-menu>
580 </v-flex> 580 </v-flex>
581 </v-layout> 581 </v-layout>
582 </v-flex> 582 </v-flex>
583 <v-flex xs12 sm6> 583 <v-flex xs12 sm6>
584 <v-layout> 584 <v-layout>
585 <v-flex xs4 class="pt-4 subheading"> 585 <v-flex xs4 class="pt-4 subheading">
586 <label class="right">Gender:</label> 586 <label class="right">Gender:</label>
587 </v-flex> 587 </v-flex>
588 <v-flex xs8 class="ml-3"> 588 <v-flex xs8 class="ml-3">
589 <v-select 589 <v-select
590 v-model="addUser.gender" 590 v-model="addUser.gender"
591 :items="gender" 591 :items="gender"
592 label="Selct Gender " 592 label="Selct Gender "
593 :rules="genderRules" 593 :rules="genderRules"
594 required 594 required
595 ></v-select> 595 ></v-select>
596 </v-flex> 596 </v-flex>
597 </v-layout> 597 </v-layout>
598 </v-flex> 598 </v-flex>
599 </v-layout> 599 </v-layout>
600 <v-layout> 600 <v-layout>
601 <v-flex xs12 sm6> 601 <v-flex xs12 sm6>
602 <v-layout> 602 <v-layout>
603 <v-flex xs4 class="pt-4 subheading"> 603 <v-flex xs4 class="pt-4 subheading">
604 <label class="right">Religion:</label> 604 <label class="right">Religion:</label>
605 </v-flex> 605 </v-flex>
606 <v-flex xs8 class="ml-3"> 606 <v-flex xs8 class="ml-3">
607 <v-text-field 607 <v-text-field
608 v-model="addUser.religion" 608 v-model="addUser.religion"
609 placeholder="fill your Religion" 609 placeholder="fill your Religion"
610 name="Religion" 610 name="Religion"
611 type="text" 611 type="text"
612 :rules="religionRules" 612 :rules="religionRules"
613 required 613 required
614 ></v-text-field> 614 ></v-text-field>
615 </v-flex> 615 </v-flex>
616 </v-layout> 616 </v-layout>
617 </v-flex> 617 </v-flex>
618 <v-flex xs12 sm6> 618 <v-flex xs12 sm6>
619 <v-layout> 619 <v-layout>
620 <v-flex xs4 class="pt-4 subheading"> 620 <v-flex xs4 class="pt-4 subheading">
621 <label class="right">JoiningDate:</label> 621 <label class="right">JoiningDate:</label>
622 </v-flex> 622 </v-flex>
623 <v-flex xs8 class="ml-3"> 623 <v-flex xs8 class="ml-3">
624 <v-menu 624 <v-menu
625 ref="menu1" 625 ref="menu1"
626 :close-on-content-click="false" 626 :close-on-content-click="false"
627 v-model="menu1" 627 v-model="menu1"
628 :nudge-right="40" 628 :nudge-right="40"
629 lazy 629 lazy
630 transition="scale-transition" 630 transition="scale-transition"
631 offset-y 631 offset-y
632 full-width 632 full-width
633 min-width="290px" 633 min-width="290px"
634 > 634 >
635 <v-text-field 635 <v-text-field
636 slot="activator" 636 slot="activator"
637 :rules="joinDateRules" 637 :rules="joinDateRules"
638 v-model="addUser.joinDate" 638 v-model="addUser.joinDate"
639 placeholder="Select date" 639 placeholder="Select date"
640 ></v-text-field> 640 ></v-text-field>
641 <v-date-picker 641 <v-date-picker
642 ref="picker" 642 ref="picker"
643 v-model="addUser.joinDate" 643 v-model="addUser.joinDate"
644 :max="new Date().toISOString().substr(0, 10)" 644 :max="new Date().toISOString().substr(0, 10)"
645 min="1950-01-01" 645 min="1950-01-01"
646 @input="menu1 = false" 646 @input="menu1 = false"
647 ></v-date-picker> 647 ></v-date-picker>
648 </v-menu> 648 </v-menu>
649 </v-flex> 649 </v-flex>
650 </v-layout> 650 </v-layout>
651 </v-flex> 651 </v-flex>
652 </v-layout> 652 </v-layout>
653 <v-layout> 653 <v-layout>
654 <v-flex xs12 sm6> 654 <v-flex xs12 sm6>
655 <v-layout> 655 <v-layout>
656 <v-flex xs4 class="pt-4 subheading"> 656 <v-flex xs4 class="pt-4 subheading">
657 <label class="right">Phone :</label> 657 <label class="right">Phone :</label>
658 </v-flex> 658 </v-flex>
659 <v-flex xs8 class="ml-3"> 659 <v-flex xs8 class="ml-3">
660 <v-text-field 660 <v-text-field
661 v-model="addUser.mobileNo" 661 v-model="addUser.mobileNo"
662 placeholder="fill your Phone Number" 662 placeholder="fill your Phone Number"
663 name="mobileNo" 663 name="mobileNo"
664 type="number" 664 type="number"
665 :rules="mobileNoRules" 665 :rules="mobileNoRules"
666 required 666 required
667 ></v-text-field> 667 ></v-text-field>
668 </v-flex> 668 </v-flex>
669 </v-layout> 669 </v-layout>
670 </v-flex> 670 </v-flex>
671 <v-flex xs12 sm6> 671 <v-flex xs12 sm6>
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-sm-only hidden-xs-only">Select Role:</label> 674 <label class="right hidden-sm-only hidden-xs-only">Select Role:</label>
675 <label class="right hidden-lg-only hidden-xl-only hidden-md-only">Role:</label> 675 <label class="right hidden-lg-only hidden-xl-only hidden-md-only">Role:</label>
676 </v-flex> 676 </v-flex>
677 <v-flex xs8 class="ml-3"> 677 <v-flex xs8 class="ml-3">
678 <v-autocomplete 678 <v-autocomplete
679 v-model="addUser.role" 679 v-model="addUser.role"
680 :rules="role" 680 :rules="role"
681 :items="userRole" 681 :items="userRole"
682 item-text="name" 682 item-text="name"
683 item-value="name" 683 item-value="name"
684 placeholder="Select Role Name" 684 placeholder="Select Role Name"
685 required 685 required
686 ></v-autocomplete> 686 ></v-autocomplete>
687 </v-flex> 687 </v-flex>
688 </v-layout> 688 </v-layout>
689 </v-flex> 689 </v-flex>
690 </v-layout> 690 </v-layout>
691 <v-layout> 691 <v-layout>
692 <v-flex xs12 sm6> 692 <v-flex xs12 sm6>
693 <v-layout> 693 <v-layout>
694 <v-flex xs4 class="pt-4 subheading"> 694 <v-flex xs4 class="pt-4 subheading">
695 <label class="right">Username:</label> 695 <label class="right">Username:</label>
696 </v-flex> 696 </v-flex>
697 <v-flex xs8 class="ml-3"> 697 <v-flex xs8 class="ml-3">
698 <v-text-field 698 <v-text-field
699 v-model="addUser.userName" 699 v-model="addUser.userName"
700 placeholder="fill your User Name" 700 placeholder="fill your User Name"
701 type="text" 701 type="text"
702 :rules="userNameRules" 702 :rules="userNameRules"
703 required 703 required
704 ></v-text-field> 704 ></v-text-field>
705 </v-flex> 705 </v-flex>
706 </v-layout> 706 </v-layout>
707 </v-flex> 707 </v-flex>
708 <v-flex xs12 sm6> 708 <v-flex xs12 sm6>
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">Password:</label>
712 </v-flex>
713 <v-flex xs8 class="ml-3">
714 <v-text-field
715 v-model="addUser.password"
716 placeholder="fill your Password"
717 :rules="passwordRules"
718 required
719 ></v-text-field>
720 </v-flex>
721 </v-layout>
722 </v-flex>
723 </v-layout>
724 <v-layout>
725 <v-flex xs12 sm6>
726 <v-layout>
727 <v-flex xs4 class="pt-4 subheading">
728 <label class="right hidden-sm-only hidden-xs-only">Uplaod Image:</label> 711 <label class="right hidden-sm-only hidden-xs-only">Uplaod Image:</label>
729 <label class="right hidden-lg-only hidden-xl-only hidden-md-only">Image:</label> 712 <label class="right hidden-lg-only hidden-xl-only hidden-md-only">Image:</label>
730 </v-flex> 713 </v-flex>
731 <v-flex xs8 class="ml-3"> 714 <v-flex xs8 class="ml-3">
732 <v-text-field 715 <v-text-field
733 label="Select Image" 716 label="Select Image"
734 @click="pickFile" 717 @click="pickFile"
735 v-model="imageName" 718 v-model="imageName"
736 append-icon="attach_file" 719 append-icon="attach_file"
737 ></v-text-field> 720 ></v-text-field>
738 <input 721 <input
739 type="file" 722 type="file"
740 style="display:none" 723 style="display:none"
741 ref="image" 724 ref="image"
742 accept="image/*" 725 accept="image/*"
743 @change="onFilePicked" 726 @change="onFilePicked"
744 /> 727 />
745 </v-flex> 728 </v-flex>
746 </v-layout> 729 </v-layout>
747 </v-flex> 730 </v-flex>
748 <v-flex xs12 sm6> 731 <v-flex xs12 sm6>
749 <v-layout> 732 <v-layout>
750 <v-flex xs4 class="pt-4 subheading"> 733 <v-flex xs4 class="pt-4 subheading">
751 <label class="right">Address:</label> 734 <label class="right">Address:</label>
752 </v-flex> 735 </v-flex>
753 <v-flex xs8 class="ml-3"> 736 <v-flex xs8 class="ml-3">
754 <v-text-field 737 <v-text-field
755 name="input-4-3" 738 name="input-4-3"
756 v-model="addUser.presentAddress" 739 v-model="addUser.presentAddress"
757 :rules="presentAddress" 740 :rules="presentAddress"
758 placeholder="fill Your present Address" 741 placeholder="fill Your present Address"
759 required 742 required
760 ></v-text-field> 743 ></v-text-field>
761 </v-flex> 744 </v-flex>
762 </v-layout> 745 </v-layout>
763 </v-flex> 746 </v-flex>
764 </v-layout> 747 </v-layout>
765 <v-layout> 748 <v-layout>
766 <v-flex xs12 sm12> 749 <v-flex xs12 sm12>
767 <v-layout> 750 <v-layout>
768 <v-flex xs6> 751 <v-flex xs6>
769 <v-btn @click="clear" round class="ml-3" dark>clear</v-btn> 752 <v-btn @click="clear" round class="ml-3" dark>clear</v-btn>
770 </v-flex> 753 </v-flex>
771 <v-flex xs6> 754 <v-flex xs6>
772 <v-btn @click="submit" round dark :loading="loading" class="right">Add</v-btn> 755 <v-btn @click="submit" round dark :loading="loading" class="right">Add</v-btn>
773 </v-flex> 756 </v-flex>
774 </v-layout> 757 </v-layout>
775 </v-flex> 758 </v-flex>
776 </v-layout> 759 </v-layout>
777 </v-container> 760 </v-container>
778 </v-form> 761 </v-form>
779 </v-card> 762 </v-card>
780 </v-flex> 763 </v-flex>
781 </v-container> 764 </v-container>
782 </v-tab-item> 765 </v-tab-item>
783 </v-tabs> 766 </v-tabs>
784 <div class="loader" v-if="showLoader"> 767 <div class="loader" v-if="showLoader">
785 <v-progress-circular indeterminate color="white"></v-progress-circular> 768 <v-progress-circular indeterminate color="white"></v-progress-circular>
786 </div> 769 </div>
787 </v-app> 770 </v-app>
788 </template> 771 </template>
789 772
790 <script> 773 <script>
791 import http from "@/Services/http.js"; 774 import http from "@/Services/http.js";
792 import Util from "@/util"; 775 import Util from "@/util";
793 import moment from "moment"; 776 import moment from "moment";
794 777
795 export default { 778 export default {
796 data: () => ({ 779 data: () => ({
797 component: "report-generate", 780 component: "report-generate",
798 snackbar: false, 781 snackbar: false,
799 y: "top", 782 y: "top",
800 x: "right", 783 x: "right",
801 mode: "", 784 mode: "",
802 timeout: 3000, 785 timeout: 3000,
803 text: "", 786 text: "",
804 showLoader: false, 787 showLoader: false,
805 loading: false, 788 loading: false,
806 date: null, 789 date: null,
807 search: "", 790 search: "",
808 menu: false, 791 menu: false,
809 menu1: false, 792 menu1: false,
810 menu2: false, 793 menu2: false,
811 menu3: false, 794 menu3: false,
812 dialog: false, 795 dialog: false,
813 dialog1: false, 796 dialog1: false,
814 valid: true, 797 valid: true,
815 isActive: true, 798 isActive: true,
816 newActive: false, 799 newActive: false,
817 pagination: { 800 pagination: {
818 rowsPerPage: 15 801 rowsPerPage: 15
819 }, 802 },
820 imageData: {}, 803 imageData: {},
821 imageName: "", 804 imageName: "",
822 imageUrl: "", 805 imageUrl: "",
823 imageFile: "", 806 imageFile: "",
824 nameRules: [v => !!v || "Name is required"], 807 nameRules: [v => !!v || "Name is required"],
825 dateRules: [v => !!v || " DOB is required"], 808 dateRules: [v => !!v || " DOB is required"],
826 genderRules: [v => !!v || " Gender Name is required"], 809 genderRules: [v => !!v || " Gender Name is required"],
827 pincode: [v => !!v || " Pincode is required"], 810 pincode: [v => !!v || " Pincode is required"],
828 role: [v => !!v || "Role Name is required"], 811 role: [v => !!v || "Role Name is required"],
829 permanentAddress: [v => !!v || " Permanent Address is required"], 812 permanentAddress: [v => !!v || " Permanent Address is required"],
830 presentAddress: [v => !!v || " Present Address is required"], 813 presentAddress: [v => !!v || " Present Address is required"],
831 mobileNoRules: [v => !!v || "Phone Number is required"], 814 mobileNoRules: [v => !!v || "Phone Number is required"],
832 religionRules: [v => !!v || "Religion Name is required"], 815 religionRules: [v => !!v || "Religion Name is required"],
833 joinDateRules: [v => !!v || " Join Date is required"], 816 joinDateRules: [v => !!v || " Join Date is required"],
834 userNameRules: [v => !!v || " User Name is required"], 817 userNameRules: [v => !!v || " User Name is required"],
835 passwordRules: [v => !!v || " Password is required"], 818 passwordRules: [v => !!v || " Password is required"],
836 errorMessages: "", 819 errorMessages: "",
837 userRole: [], 820 userRole: [],
838 emailRules: [ 821 emailRules: [
839 v => !!v || "E-mail is required", 822 v => !!v || "E-mail is required",
840 v => 823 v =>
841 /^\w+([.-]?\w+)*@\w+([.-]?\w+)*(\.\w{2,3})+$/.test(v) || 824 /^\w+([.-]?\w+)*@\w+([.-]?\w+)*(\.\w{2,3})+$/.test(v) ||
842 "E-mail must be valid" 825 "E-mail must be valid"
843 ], 826 ],
844 gender: ["Male", "Female"], 827 gender: ["Male", "Female"],
845 headers: [ 828 headers: [
846 { 829 {
847 text: "No", 830 text: "No",
848 align: "center", 831 align: "center",
849 sortable: false, 832 sortable: false,
850 value: "No" 833 value: "No"
851 }, 834 },
852 { 835 {
853 text: "Profile Pic", 836 text: "Profile Pic",
854 value: "profilePicUrl", 837 value: "profilePicUrl",
855 sortable: false, 838 sortable: false,
856 align: "center" 839 align: "center"
857 }, 840 },
858 { text: "Name", value: "name", sortable: false, align: "center" }, 841 { text: "Name", value: "name", sortable: false, align: "center" },
859 { text: "Email", value: "email", sortable: false, align: "center" }, 842 { text: "Email", value: "email", sortable: false, align: "center" },
860 { text: "DOB", value: "dob", sortable: false, align: "center" }, 843 { text: "DOB", value: "dob", sortable: false, align: "center" },
861 { 844 {
862 text: "Joining Date", 845 text: "Joining Date",
863 value: "joiningDate", 846 value: "joiningDate",
864 sortable: false, 847 sortable: false,
865 align: "center" 848 align: "center"
866 }, 849 },
867 { 850 {
868 text: "Phone", 851 text: "Phone",
869 value: "phone", 852 value: "phone",
870 sortable: false, 853 sortable: false,
871 align: "center" 854 align: "center"
872 }, 855 },
873 { text: "Action", value: "", sortable: false, align: "center" } 856 { text: "Action", value: "", sortable: false, align: "center" }
874 ], 857 ],
875 desserts: [], 858 desserts: [],
876 editedIndex: -1, 859 editedIndex: -1,
877 upload: "", 860 upload: "",
878 editedItem: { 861 editedItem: {
879 role: "", 862 role: "",
880 name: "", 863 name: "",
881 email: "", 864 email: "",
882 dob: null, 865 dob: null,
883 gender: "", 866 gender: "",
884 role: "", 867 role: "",
885 address: "", 868 address: "",
886 phone: "", 869 phone: "",
887 religion: "", 870 religion: "",
888 joiningDate: null 871 joiningDate: null
889 }, 872 },
890 addUser: { 873 addUser: {
891 role: "", 874 role: "",
892 name: "", 875 name: "",
893 email: "", 876 email: "",
894 dob: null, 877 dob: null,
895 gender: "", 878 gender: "",
896 pincode: "", 879 pincode: "",
897 role: "", 880 role: "",
898 permanentAddress: "", 881 permanentAddress: "",
899 presentAddress: "", 882 presentAddress: "",
900 mobileNo: "", 883 mobileNo: "",
901 religion: "", 884 religion: "",
902 joiningDate: null 885 joiningDate: null
903 } 886 }
904 }), 887 }),
905 watch: { 888 watch: {
906 menu(val) { 889 menu(val) {
907 val && this.$nextTick(() => (this.$refs.picker.activePicker = "YEAR")); 890 val && this.$nextTick(() => (this.$refs.picker.activePicker = "YEAR"));
908 }, 891 },
909 menu1(val) { 892 menu1(val) {
910 val && this.$nextTick(() => (this.$refs.picker.activePicker = "YEAR")); 893 val && this.$nextTick(() => (this.$refs.picker.activePicker = "YEAR"));
911 } 894 }
912 }, 895 },
913 methods: { 896 methods: {
914 save(date) { 897 save(date) {
915 this.$refs.menu.save(date); 898 this.$refs.menu.save(date);
916 }, 899 },
917 save(date) { 900 save(date) {
918 this.$refs.menu1.save(date); 901 this.$refs.menu1.save(date);
919 }, 902 },
920 pickFile() { 903 pickFile() {
921 this.$refs.image.click(); 904 this.$refs.image.click();
922 }, 905 },
923 onFilePicked(e) { 906 onFilePicked(e) {
924 // console.log(e) 907 // console.log(e)
925 const files = e.target.files; 908 const files = e.target.files;
926 this.upload = e.target.files[0]; 909 this.upload = e.target.files[0];
927 console.log("imageData-upload========>", this.upload); 910 console.log("imageData-upload========>", this.upload);
928 if (files[0] !== undefined) { 911 if (files[0] !== undefined) {
929 this.imageName = files[0].name; 912 this.imageName = files[0].name;
930 if (this.imageName.lastIndexOf(".") <= 0) { 913 if (this.imageName.lastIndexOf(".") <= 0) {
931 return; 914 return;
932 } 915 }
933 const fr = new FileReader(); 916 const fr = new FileReader();
934 fr.readAsDataURL(files[0]); 917 fr.readAsDataURL(files[0]);
935 fr.addEventListener("load", () => { 918 fr.addEventListener("load", () => {
936 this.imageUrl = fr.result; 919 this.imageUrl = fr.result;
937 this.imageFile = files[0]; // this is an image file that can be sent to server... 920 this.imageFile = files[0]; // this is an image file that can be sent to server...
938 // this.imageData.imageUrl = URL.createObjectURL(this.imageFile); 921 // this.imageData.imageUrl = URL.createObjectURL(this.imageFile);
939 // console.log("upload=======>", this.imageData.imageUrl); 922 // console.log("upload=======>", this.imageData.imageUrl);
940 console.log("imageFile", this.imageUrl); 923 console.log("imageFile", this.imageUrl);
941 }); 924 });
942 } else { 925 } else {
943 this.imageName = ""; 926 this.imageName = "";
944 this.imageFile = ""; 927 this.imageFile = "";
945 this.imageUrl = ""; 928 this.imageUrl = "";
946 } 929 }
947 }, 930 },
948 dates: function(date) { 931 dates: function(date) {
949 return moment(date).format("MMMM DD, YYYY"); 932 return moment(date).format("MMMM DD, YYYY");
950 }, 933 },
951 getUsersList() { 934 getUsersList() {
952 this.showLoader = true; 935 this.showLoader = true;
953 var token = this.$store.state.token; 936 var token = this.$store.state.token;
954 http() 937 http()
955 .get("/getUsersList", { 938 .get("/getUsersList", {
956 headers: { Authorization: "Bearer " + token } 939 headers: { Authorization: "Bearer " + token }
957 }) 940 })
958 .then(response => { 941 .then(response => {
959 this.desserts = response.data.data; 942 this.desserts = response.data.data;
960 this.showLoader = false; 943 this.showLoader = false;
961 console.log("UserList=====>", this.desserts); 944 console.log("UserList=====>", this.desserts);
962 }) 945 })
963 .catch(error => { 946 .catch(error => {
964 this.showLoader = false; 947 this.showLoader = false;
965 if (error.response.status === 401) { 948 if (error.response.status === 401) {
966 this.$router.replace({ path: "/" }); 949 this.$router.replace({ path: "/" });
967 this.$store.dispatch("setToken", null); 950 this.$store.dispatch("setToken", null);
968 this.$store.dispatch("Id", null); 951 this.$store.dispatch("Id", null);
969 } 952 }
970 }); 953 });
971 }, 954 },
972 editItem(item) { 955 editItem(item) {
973 this.editedIndex = this.desserts.indexOf(item); 956 this.editedIndex = this.desserts.indexOf(item);
974 this.editedItem = Object.assign({}, item); 957 this.editedItem = Object.assign({}, item);
975 this.editedItem.dob = 958 this.editedItem.dob =
976 this.editedItem.dob != undefined 959 this.editedItem.dob != undefined
977 ? (this.editedItem.dob = this.editedItem.dob.substring(0, 10)) 960 ? (this.editedItem.dob = this.editedItem.dob.substring(0, 10))
978 : (this.editedItem.dob = ""); 961 : (this.editedItem.dob = "");
979 for (let i = 0; i < this.userRole.length; i++) { 962 for (let i = 0; i < this.userRole.length; i++) {
980 if (this.userRole[i].role === this.editedItem.role) { 963 if (this.userRole[i].role === this.editedItem.role) {
981 this.editedItem.role = this.userRole[i].name; 964 this.editedItem.role = this.userRole[i].name;
982 } 965 }
983 } 966 }
984 this.dialog = true; 967 this.dialog = true;
985 }, 968 },
986 profile(item) { 969 profile(item) {
987 this.editedIndex = this.desserts.indexOf(item); 970 this.editedIndex = this.desserts.indexOf(item);
988 this.editedItem = Object.assign({}, item); 971 this.editedItem = Object.assign({}, item);
989 this.dialog1 = true; 972 this.dialog1 = true;
990 for (let i = 0; i < this.userRole.length; i++) { 973 for (let i = 0; i < this.userRole.length; i++) {
991 if (this.userRole[i].role === this.editedItem.role) { 974 if (this.userRole[i].role === this.editedItem.role) {
992 this.editedItem.role = this.userRole[i].name; 975 this.editedItem.role = this.userRole[i].name;
993 } 976 }
994 } 977 }
995 }, 978 },
996 deleteItem(item) { 979 deleteItem(item) {
997 let deleteUser = { 980 let deleteUser = {
998 UserId: item._id 981 userId: item._id
999 }; 982 };
1000 // console.log("deleteUers",deleteUser)
1001 http() 983 http()
1002 .delete( 984 .delete(
1003 "/deleteUser", 985 "/deleteUser",
1004 confirm("Are you sure you want to delete this?") && { 986 confirm("Are you sure you want to delete this?") && {
1005 params: deleteUser 987 params: deleteUser
1006 } 988 }
1007 ) 989 )
1008 .then(response => { 990 .then(response => {
1009 // console.log("deleteUers",deleteUser) 991 // console.log("deleteUers",deleteUser)
1010 if ((this.snackbar = true)) { 992 this.snackbar = true;
1011 this.text = "Successfully delete Existing User"; 993 this.text = "Successfully delete Existing User";
1012 }
1013 this.getUsersList(); 994 this.getUsersList();
1014 }) 995 })
1015 .catch(error => { 996 .catch(error => {
1016 console.log(error); 997 console.log(error);
1017 }); 998 });
1018 }, 999 },
1019 activeTab(type) { 1000 activeTab(type) {
1020 switch (type) { 1001 switch (type) {
1021 case "existing": 1002 case "existing":
1022 this.newActive = false; 1003 this.newActive = false;
1023 this.isActive = true; 1004 this.isActive = true;
1024 break; 1005 break;
1025 1006
1026 default: 1007 default:
1027 this.newActive = true; 1008 this.newActive = true;
1028 this.isActive = false; 1009 this.isActive = false;
1029 break; 1010 break;
1030 } 1011 }
1031 }, 1012 },
1032 close() { 1013 close() {
1033 this.dialog = false; 1014 this.dialog = false;
1034 setTimeout(() => { 1015 setTimeout(() => {
1035 this.editedItem = Object.assign({}, this.defaultItem); 1016 this.editedItem = Object.assign({}, this.defaultItem);
1036 this.editedIndex = -1; 1017 this.editedIndex = -1;
1037 }, 300); 1018 }, 300);
1038 }, 1019 },
1039 close1() { 1020 close1() {
1040 this.dialog1 = false; 1021 this.dialog1 = false;
1041 }, 1022 },
1042 submit() { 1023 submit() {
1043 if (this.$refs.form.validate()) { 1024 if (this.$refs.form.validate()) {
1044 let addUserData = { 1025 let addUserData = {
1045 name: this.addUser.name, 1026 name: this.addUser.name,
1046 email: this.addUser.email, 1027 email: this.addUser.email,
1047 dob: this.addUser.dob, 1028 dob: this.addUser.dob,
1048 gender: this.addUser.gender, 1029 gender: this.addUser.gender,
1049 religion: this.addUser.religion, 1030 religion: this.addUser.religion,
1050 role: this.addUser.role, 1031 role: this.addUser.role,
1051 address: this.addUser.presentAddress, 1032 address: this.addUser.presentAddress,
1052 phone: this.addUser.mobileNo, 1033 phone: this.addUser.mobileNo,
1053 religion: this.addUser.religion, 1034 religion: this.addUser.religion,
1054 joiningDate: this.addUser.joinDate 1035 joiningDate: this.addUser.joinDate
1055 }; 1036 };
1056 if (this.imageUrl) { 1037 if (this.imageUrl) {
1057 var str = this.imageUrl; 1038 var str = this.imageUrl;
1058 const [baseUrl, imageUrl] = str.split(/,/); 1039 const [baseUrl, imageUrl] = str.split(/,/);
1059 addUserData.profilePicUrl = imageUrl; 1040 addUserData.profilePicUrl = imageUrl;
1060 } 1041 }
1061 this.loading = true; 1042 this.loading = true;
1062 http() 1043 http()
1063 .post("/createUser", addUserData) 1044 .post("/createUser", addUserData)
1064 .then(response => { 1045 .then(response => {
1065 this.imageUrl = ""; 1046 this.imageUrl = "";
1066 this.getUsersList(); 1047 this.getUsersList();
1067 this.snackbar = true; 1048 this.snackbar = true;
1068 this.text = "New User added successfully"; 1049 this.text = "New User added successfully";
1069 this.clear(); 1050 this.clear();
1070 this.loading = false; 1051 this.loading = false;
1071 }) 1052 })
1072 .catch(error => { 1053 .catch(error => {
1073 // console.log(error); 1054 // console.log(error);
1074 if ((this.snackbar = true)) { 1055 if ((this.snackbar = true)) {
1075 this.text = error.response.data.message; 1056 this.text = error.response.data.message;
1076 } 1057 }
1077 this.loading = false; 1058 this.loading = false;
1078 }); 1059 });
1079 } 1060 }
1080 }, 1061 },
1081 clear() { 1062 clear() {
1082 this.$refs.form.reset(); 1063 this.$refs.form.reset();
1083 this.imageUrl = ""; 1064 this.imageUrl = "";
1084 }, 1065 },
1085 save() { 1066 save() {
1086 this.loading = true; 1067 this.loading = true;
1087 for (let i = 0; i < this.userRole.length; i++) { 1068 for (let i = 0; i < this.userRole.length; i++) {
1088 if (this.userRole[i].name === this.editedItem.role) { 1069 if (this.userRole[i].name === this.editedItem.role) {
1089 this.editedItem.role = this.userRole[i].role; 1070 this.editedItem.role = this.userRole[i].role;
1090 } 1071 }
1091 } 1072 }
1092 this.editedItem.userId = this.editedItem._id; 1073 this.editedItem.userId = this.editedItem._id;
1093 if (this.imageUrl) { 1074 if (this.imageUrl) {
1094 var str = this.imageUrl; 1075 var str = this.imageUrl;
1095 const [baseUrl, imageUrl] = str.split(/,/); 1076 const [baseUrl, imageUrl] = str.split(/,/);
1096 this.editedItem.upload = imageUrl; 1077 this.editedItem.upload = imageUrl;
1097 } 1078 }
1098 http() 1079 http()
1099 .put("/updateUser", this.editedItem) 1080 .put("/updateUser", this.editedItem)
1100 .then(response => { 1081 .then(response => {
1101 if ((this.snackbar = true)) { 1082 if ((this.snackbar = true)) {
1102 this.text = "Successfully Edit Existing User"; 1083 this.text = "Successfully Edit Existing User";
1103 } 1084 }
1104 this.loading = false; 1085 this.loading = false;
1105 this.getUsersList(); 1086 this.getUsersList();
1106 this.close(); 1087 this.close();
1107 }) 1088 })
1108 .catch(error => { 1089 .catch(error => {
1109 console.log(error); 1090 console.log(error);
1110 this.loading = false; 1091 this.loading = false;
1111 }); 1092 });
1112 }, 1093 },
1113 getRole() { 1094 getRole() {
1114 this.showLoader = true; 1095 this.showLoader = true;
1115 var token = this.$store.state.token; 1096 var token = this.$store.state.token;
1116 http() 1097 http()
1117 .get("/getRolesList", { 1098 .get("/getRolesList", {
1118 headers: { Authorization: "Bearer " + token } 1099 headers: { Authorization: "Bearer " + token }
1119 }) 1100 })
1120 .then(response => { 1101 .then(response => {
1121 this.userRole = response.data.data; 1102 this.userRole = response.data.data;
1122 this.showLoader = false; 1103 this.showLoader = false;
1123 // console.log("UserList=====>",this.desserts) 1104 // console.log("UserList=====>",this.desserts)
1124 }) 1105 })
1125 .catch(error => { 1106 .catch(error => {
1126 this.showLoader = false; 1107 this.showLoader = false;
1127 if (error.response.status === 401) { 1108 if (error.response.status === 401) {
1128 this.$router.replace({ path: "/" }); 1109 this.$router.replace({ path: "/" });
1129 this.$store.dispatch("setToken", null); 1110 this.$store.dispatch("setToken", null);
1130 this.$store.dispatch("Id", null); 1111 this.$store.dispatch("Id", null);
1131 } 1112 }
1132 }); 1113 });
1133 } 1114 }
1134 }, 1115 },
1135 mounted() { 1116 mounted() {
1136 this.getUsersList(); 1117 this.getUsersList();
1137 this.getRole(); 1118 this.getRole();
1138 }, 1119 },
1139 created() { 1120 created() {
1140 this.$root.$on("app:search", search => { 1121 this.$root.$on("app:search", search => {
1141 this.search = search; 1122 this.search = search;
1142 }); 1123 });
1143 }, 1124 },
1144 beforeDestroy() { 1125 beforeDestroy() {
1145 // dont forget to remove the listener 1126 // dont forget to remove the listener
1146 this.$root.$off("app:search"); 1127 this.$root.$off("app:search");
1147 } 1128 }
1148 }; 1129 };
1149 </script> 1130 </script>
1150 <style scoped> 1131 <style scoped>
1151 .active { 1132 .active {
1152 background-color: gray; 1133 background-color: gray;
1153 color: white !important; 1134 color: white !important;
1154 } 1135 }
1155 .activebtn { 1136 .activebtn {
1156 color: black !important; 1137 color: black !important;
1157 } 1138 }
1158 </style> 1139 </style>
src/store/store.js
Diff comments   View file @99cd791
1 import Vue from 'vue' 1 import Vue from 'vue'
2 import Vuex from 'vuex' 2 import Vuex from 'vuex'
3 import createPersistedState from 'vuex-persistedstate' 3 import createPersistedState from 'vuex-persistedstate'
4 4
5 Vue.use(Vuex) 5 Vue.use(Vuex)
6 6
7 export default new Vuex.Store({ 7 export default new Vuex.Store({
8 strict: true, 8 strict: true,
9 plugins: [ 9 plugins: [
10 createPersistedState() 10 createPersistedState()
11 ], 11 ],
12 state: { 12 state: {
13 token: null, 13 token: null,
14 data: null, 14 data: null,
15 isUserLoggedIn: false, 15 isUserLoggedIn: false,
16 id: null, 16 id: null,
17 role: null 17 role: null,
18 schoolId: null
18 }, 19 },
19 // serve as the one and only way to change the state of the data in the state object 20 // serve as the one and only way to change the state of the data in the state object
20 mutations: { 21 mutations: {
21 setToken(state, token) { 22 setToken(state, token) {
22 state.token = token 23 state.token = token
23 //state.isUserLoggedIn = !!(token) 24 //state.isUserLoggedIn = !!(token)
24 if (token != null) { 25 if (token != null) {
25 state.isUserLoggedIn = true 26 state.isUserLoggedIn = true
26 } else { 27 } else {
27 state.isUserLoggedIn = false 28 state.isUserLoggedIn = false
28 } 29 }
29 }, 30 },
30 setUser(state, data) { 31 setUser(state, data) {
31 state.data = data 32 state.data = data
32 }, 33 },
33 Id(state, id) { 34 Id(state, id) {
34 state.id = id 35 state.id = id
35 }, 36 },
36 Role(state, role) { 37 Role(state, role) {
37 state.role = role 38 state.role = role
39 },
40 SchoolId(state, schoolId) {
41 state.schoolId = schoolId
38 } 42 }
39 }, 43 },
40 //Action methods are referred to as being "dispatched" 44 //Action methods are referred to as being "dispatched"
41 actions: { 45 actions: {
42 setToken({ commit }, token) { 46 setToken({ commit }, token) {
43 commit('setToken', token) 47 commit('setToken', token)
44 }, 48 },
45 setUser({ commit }, data) { 49 setUser({ commit }, data) {
46 commit('setUser', data) 50 commit('setUser', data)
47 }, 51 },
48 Id({ commit }, id) { 52 Id({ commit }, id) {
49 commit('Id', id) 53 commit('Id', id)
50 }, 54 },
51 Role({ commit }, role) { 55 Role({ commit }, role) {
52 commit('Role', role) 56 commit('Role', role)
57 },
58 SchoolId({ commit }, schoolId) {
59 commit('SchoolId', schoolId)
53 } 60 }
54 61
55 } 62 }
56 63
57 }) 64 })