viithiisys / School-Management-dashboard

Download as
Browse Code ยป

Commit 495e4037c6307dfe060ab9b653dfe72357d999ee

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

update

Showing 36 changed files with 1579 additions and 1631 deletions   Show diff stats
1 const Menu = [ 1 const Menu = [
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 ] 94 ]
95 }, 95 },
96 { 96 {
97 title: 'Notice Board', 97 title: 'Notice Board',
98 path: '/NoticeBoard', 98 path: '/NoticeBoard',
99 icon: '/static/schoolIcons/Notice_board.png', 99 icon: '/static/schoolIcons/Notice_board.png',
100 }, 100 },
101 { 101 {
102 title: 'News', 102 title: 'News',
103 path: '/news', 103 path: '/news',
104 icon: '/static/schoolIcons/News.png', 104 icon: '/static/schoolIcons/News.png',
105 }, 105 },
106 // { 106 // {
107 // title: 'Reminder', 107 // title: 'Reminder',
108 // name: 'reminder', 108 // name: 'reminder',
109 // icon: 'alarm_add', 109 // icon: 'alarm_add',
110 // }, 110 // },
111 { 111 {
112 title: 'Time Table', 112 title: 'Time Table',
113 path: '/timeTable', 113 path: '/timeTable',
114 icon: '/static/schoolIcons/Time_table.png', 114 icon: '/static/schoolIcons/Time_table.png',
115 }, 115 },
116 { 116 {
117 title: 'Library', 117 title: 'Library',
118 group: 'Library', 118 group: 'Library',
119 component: 'Library', 119 component: 'Library',
120 icon: '/static/schoolIcons/Library.png', 120 icon: '/static/schoolIcons/Library.png',
121 items: [ 121 items: [
122 { name: 'libraryMember', title: ' Library Member', component: 'libraryMember', action: '', }, 122 { name: 'libraryMember', title: ' Library Member', component: 'libraryMember', action: '', },
123 { name: 'Books', title: 'Books', component: 'Books', action: '', }, 123 { name: 'Books', title: 'Books', component: 'Books', action: '', },
124 { name: 'Issue', title: ' Issue', component: 'Issue', action: '', }, 124 { name: 'Issue', title: ' Issue', component: 'Issue', action: '', },
125 { name: 'eBooks', title: 'E-Books', component: 'eBooks', action: '', } 125 { name: 'eBooks', title: 'E-Books', component: 'eBooks', action: '', }
126 126
127 ] 127 ]
128 }, 128 },
129 { 129 {
130 title: 'Report', 130 title: 'Report',
131 group: 'Report', 131 group: 'Report',
132 component: 'Report', 132 component: 'Report',
133 icon: '/static/schoolIcons/reports.png', 133 icon: '/static/schoolIcons/reports.png',
134 items: [ 134 items: [
135 { name: 'studentReport', title: 'Student Report', component: 'studentReport', action: '', }, 135 { name: 'studentReport', title: 'Student Report', component: 'studentReport', action: '', },
136 { name: 'markSheetReport', title: 'Mark Sheet Report', component: 'markSheetReport', action: '', } 136 { name: 'progressCardReport', title: 'Progress Card Report', component: 'progressCardReport', action: '', }
137 ] 137 ]
138 }, 138 },
139 { 139 {
140 title: 'Notification', 140 title: 'Notification',
141 path: '/notification', 141 path: '/notification',
142 icon: '/static/schoolIcons/Notification.png', 142 icon: '/static/schoolIcons/Notification.png',
143 }, 143 },
144 { 144 {
145 title: 'Social Media', 145 title: 'Social Media',
146 path: '/SocialMedia', 146 path: '/SocialMedia',
147 icon: '/static/schoolIcons/Social_Media.png', 147 icon: '/static/schoolIcons/Social_Media.png',
148 }, 148 },
149 { 149 {
150 title: 'Gallery', 150 title: 'Gallery',
151 path: '/Gallery', 151 path: '/Gallery',
152 icon: '/static/schoolIcons/Gallery.png', 152 icon: '/static/schoolIcons/Gallery.png',
153 }, 153 },
154 { 154 {
155 title: 'Event', 155 title: 'Event',
156 path: '/Event', 156 path: '/Event',
157 icon: '/static/schoolIcons/Events.png', 157 icon: '/static/schoolIcons/Events.png',
158 }, 158 },
159 { 159 {
160 title: 'Holiday', 160 title: 'Holiday',
161 path: '/Holiday', 161 path: '/Holiday',
162 icon: '/static/schoolIcons/Holidays.png', 162 icon: '/static/schoolIcons/Holidays.png',
163 }, 163 },
164 { 164 {
165 title: 'Account', 165 title: 'Account',
166 group: 'Account', 166 group: 'Account',
167 component: 'Account', 167 component: 'Account',
168 icon: '/static/schoolIcons/Account.png', 168 icon: '/static/schoolIcons/Account.png',
169 items: [ 169 items: [
170 { name: 'feeTypes', title: 'Fee Types', component: 'feeTypes', action: '', }, 170 { name: 'feeTypes', title: 'Fee Types', component: 'feeTypes', action: '', },
171 { name: 'Invoice', title: 'Invoice', component: 'Invoice', action: '', }, 171 { name: 'Invoice', title: 'Invoice', component: 'Invoice', action: '', },
172 { name: 'paymentHistory', title: 'Payment History', component: 'paymentHistory', action: '', }, 172 { name: 'paymentHistory', title: 'Payment History', component: 'paymentHistory', action: '', },
173 { name: 'Expense', title: 'Expense', component: 'Expense', action: '', }, 173 { name: 'Expense', title: 'Expense', component: 'Expense', action: '', },
174 { name: 'Income', title: 'Income', component: 'Income', action: '', }, 174 { name: 'Income', title: 'Income', component: 'Income', action: '', },
175 ] 175 ]
176 } 176 }
177 ]; 177 ];
178 178
179 179
180 // reorder menu 180 // reorder menu
181 Menu.forEach((item) => { 181 Menu.forEach((item) => {
182 // if (item.items) { 182 // if (item.items) {
183 // item.items.sort((x, y) => { 183 // item.items.sort((x, y) => {
184 // let textA = x.title.toUpperCase(); 184 // let textA = x.title.toUpperCase();
185 // let textB = y.title.toUpperCase(); 185 // let textB = y.title.toUpperCase();
186 // return (textA < textB) ? -1 : (textA > textB) ? 1 : 0; 186 // return (textA < textB) ? -1 : (textA > textB) ? 1 : 0;
187 // }); 187 // });
188 // } 188 // }
189 }); 189 });
190 190
191 export default Menu; 191 export default Menu;
src/pages/Account/expense.vue
Diff comments   View file @495e403
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 />
51 </v-avatar>
52 <input
53 type="file"
54 style="display:none"
55 ref="image"
56 accept="image/*"
57 @change="onFilePicked"
58 /> 50 />
59 </v-flex> 51 </v-avatar>
60 </v-layout> 52 <input
61 <v-layout wrap> 53 type="file"
62 <v-flex xs12 sm12> 54 style="display:none"
63 <v-layout> 55 ref="image"
64 <v-flex xs4 class="pt-4 subheading"> 56 accept="image/*"
65 <label class="right">Name:</label> 57 @change="onFilePicked"
66 </v-flex> 58 />
67 <v-flex xs6 class="ml-3"> 59 </v-flex>
60 </v-layout>
61 <v-layout wrap>
62 <v-flex xs12 sm12>
63 <v-layout>
64 <v-flex xs4 class="pt-4 subheading">
65 <label class="right">Name:</label>
66 </v-flex>
67 <v-flex xs6 class="ml-3">
68 <v-text-field
69 v-model="editedItem.name"
70 placeholder="fill your full Name"
71 name="name"
72 type="text"
73 required
74 ></v-text-field>
75 </v-flex>
76 </v-layout>
77 </v-flex>
78 </v-layout>
79 <v-layout wrap>
80 <v-flex xs12>
81 <v-layout>
82 <v-flex xs4 class="pt-4 subheading">
83 <label class="right">Date:</label>
84 </v-flex>
85 <v-flex xs6 class="ml-3">
86 <v-menu
87 ref="menu"
88 :close-on-content-click="false"
89 v-model="menu3"
90 :nudge-right="40"
91 lazy
92 transition="scale-transition"
93 offset-y
94 full-width
95 min-width="290px"
96 >
68 <v-text-field 97 <v-text-field
69 v-model="editedItem.name" 98 slot="activator"
70 placeholder="fill your full Name" 99 v-model="editedItem.date"
71 name="name" 100 placeholder="Select date"
72 type="text"
73 required
74 ></v-text-field> 101 ></v-text-field>
75 </v-flex> 102 <v-date-picker
76 </v-layout> 103 ref="picker"
77 </v-flex> 104 v-model="editedItem.date"
78 </v-layout> 105 @input="$refs.menu.save(editedItem.date)"
106 ></v-date-picker>
107 </v-menu>
108 </v-flex>
109 </v-layout>
110 </v-flex>
79 <v-layout wrap> 111 <v-layout wrap>
80 <v-flex xs12> 112 <v-flex xs12 sm12>
81 <v-layout> 113 <v-layout>
82 <v-flex xs4 class="pt-4 subheading"> 114 <v-flex xs4 class="pt-4 subheading">
83 <label class="right">Date:</label> 115 <label class="right">Amount:</label>
84 </v-flex> 116 </v-flex>
85 <v-flex xs6 class="ml-3"> 117 <v-flex xs6 class="ml-3">
86 <v-menu 118 <v-text-field v-model="editedItem.amount" required></v-text-field>
87 ref="menu"
88 :close-on-content-click="false"
89 v-model="menu3"
90 :nudge-right="40"
91 lazy
92 transition="scale-transition"
93 offset-y
94 full-width
95 min-width="290px"
96 >
97 <v-text-field
98 slot="activator"
99 v-model="editedItem.date"
100 placeholder="Select date"
101 ></v-text-field>
102 <v-date-picker
103 ref="picker"
104 v-model="editedItem.date"
105 @input="$refs.menu.save(editedItem.date)"
106 ></v-date-picker>
107 </v-menu>
108 </v-flex> 119 </v-flex>
109 </v-layout> 120 </v-layout>
110 </v-flex> 121 </v-flex>
122 </v-layout>
123 <v-flex xs12>
111 <v-layout wrap> 124 <v-layout wrap>
112 <v-flex xs12 sm12> 125 <v-flex xs4 class="pt-4 subheading">
113 <v-layout> 126 <label class="right hidden-xs-only hidden-sm-only">Uplaod Image:</label>
114 <v-flex xs4 class="pt-4 subheading"> 127 <label class="right hidden-lg-only hidden-md-only hidden-xl-only">Uplaod:</label>
115 <label class="right">Amount:</label> 128 </v-flex>
116 </v-flex> 129 <v-flex xs6 class="ml-3">
117 <v-flex xs6 class="ml-3"> 130 <v-text-field
118 <v-text-field v-model="editedItem.amount" required></v-text-field> 131 label="Select Image"
119 </v-flex> 132 @click="pickFile"
120 </v-layout> 133 v-model="imageName"
134 append-icon="attach_file"
135 ></v-text-field>
121 </v-flex> 136 </v-flex>
122 </v-layout> 137 </v-layout>
123 <v-flex xs12> 138 </v-flex>
124 <v-layout wrap> 139 <v-flex xs12>
125 <v-flex xs4 class="pt-4 subheading"> 140 <v-layout>
126 <label class="right hidden-xs-only hidden-sm-only">Uplaod Image:</label> 141 <v-flex xs4 class="pt-4 subheading">
127 <label class="right hidden-lg-only hidden-md-only hidden-xl-only">Uplaod:</label> 142 <label class="right">Note:</label>
128 </v-flex> 143 </v-flex>
129 <v-flex xs6 class="ml-3"> 144 <v-flex xs6 class="ml-3">
130 <v-text-field 145 <v-textarea
131 label="Select Image" 146 name="input-7-1"
132 @click="pickFile" 147 v-model="editedItem.note"
133 v-model="imageName" 148 placeholder="fill your Note"
134 append-icon="attach_file" 149 type="text"
135 ></v-text-field> 150 :rules="noteRules"
136 </v-flex> 151 multi-line
137 </v-layout> 152 required
138 </v-flex> 153 ></v-textarea>
139 <v-flex xs12> 154 </v-flex>
140 <v-layout> 155 </v-layout>
141 <v-flex xs4 class="pt-4 subheading"> 156 </v-flex>
142 <label class="right">Note:</label> 157 </v-layout>
143 </v-flex> 158 <v-layout>
144 <v-flex xs6 class="ml-3"> 159 <v-flex xs12 sm12>
145 <v-textarea 160 <v-card-actions>
146 name="input-7-1" 161 <v-btn round dark @click.native="close">Cancel</v-btn>
147 v-model="editedItem.note" 162 <v-spacer></v-spacer>
148 placeholder="fill your Note" 163 <v-btn round dark :loading="loading" @click="save">Save</v-btn>
149 type="text" 164 </v-card-actions>
150 :rules="noteRules" 165 </v-flex>
151 multi-line 166 </v-layout>
152 required
153 ></v-textarea>
154 </v-flex>
155 </v-layout>
156 </v-flex>
157 </v-layout>
158 <v-layout>
159 <v-flex xs12 sm12>
160 <v-card-actions>
161 <v-btn round dark @click.native="close">Cancel</v-btn>
162 <v-spacer></v-spacer>
163 <v-btn round dark :loading="loading" @click="save">Save</v-btn>
164 </v-card-actions>
165 </v-flex>
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 <img 271 <v-tooltip top>
272 style="cursor:pointer; width:25px; height:18px; " 272 <img
273 class="mr-5" 273 slot="activator"
274 @click="profile(props.item)" 274 style="cursor:pointer; width:25px; height:18px; "
275 src="/static/icon/eye1.png" 275 class="mr5"
276 /> 276 @click="profile(props.item)"
277 <img 277 src="/static/icon/eye1.png"
278 style="cursor:pointer; width:20px; height:18px; " 278 />
279 class="mr-5" 279 <span>View</span>
280 @click="editItem(props.item)" 280 </v-tooltip>
281 src="/static/icon/edit1.png" 281 <v-tooltip top>
282 /> 282 <img
283 <img 283 slot="activator"
284 style="cursor:pointer;width:20px; height:20px; " 284 style="cursor:pointer; width:20px; height:18px; "
285 class="mr-5" 285 class="mr5"
286 @click="deleteItem(props.item)" 286 @click="editItem(props.item)"
287 src="/static/icon/delete1.png" 287 src="/static/icon/edit1.png"
288 /> 288 />
289 <span>Edit</span>
290 </v-tooltip>
291 <v-tooltip top>
292 <img
293 slot="activator"
294 style="cursor:pointer; width:20px; height:20px; "
295 class="mr5"
296 @click="deleteItem(props.item)"
297 src="/static/icon/delete1.png"
298 />
299 <span>Delete</span>
300 </v-tooltip>
289 </span> 301 </span>
290 </td> 302 </td>
291 </template> 303 </template>
292 <v-alert 304 <v-alert
293 slot="no-results" 305 slot="no-results"
294 :value="true" 306 :value="true"
295 color="error" 307 color="error"
296 icon="warning" 308 icon="warning"
297 >Your search for "{{ search }}" found no results.</v-alert> 309 >Your search for "{{ search }}" found no results.</v-alert>
298 </v-data-table> 310 </v-data-table>
299 </v-tab-item> 311 </v-tab-item>
300 312
301 <!-- ****** Add Expense Data ****** --> 313 <!-- ****** Add Expense Data ****** -->
302 <v-tab-item> 314 <v-tab-item>
303 <v-container> 315 <v-container>
304 <v-snackbar 316 <v-snackbar
305 :timeout="timeout" 317 :timeout="timeout"
306 :top="y === 'top'" 318 :top="y === 'top'"
307 :right="x === 'right'" 319 :right="x === 'right'"
308 :vertical="mode === 'vertical'" 320 :vertical="mode === 'vertical'"
309 v-model="snackbar" 321 v-model="snackbar"
310 color="success" 322 color="success"
311 >{{ text }}</v-snackbar> 323 >{{ text }}</v-snackbar>
312 <v-flex xs12 sm12 class="my-4"> 324 <v-flex xs12 sm12 class="my-4">
313 <v-card flat> 325 <v-card flat>
314 <v-form ref="form" v-model="valid" lazy-validation> 326 <v-form ref="form" v-model="valid" lazy-validation>
315 <v-container fluid> 327 <v-container fluid>
316 <v-layout> 328 <v-layout>
317 <v-flex 329 <v-flex
318 xs12 330 xs12
319 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"
320 > 332 >
321 <v-avatar size="100px"> 333 <v-avatar size="100px">
322 <img src="/static/icon/user.png" v-if="!imageUrl" /> 334 <img src="/static/icon/user.png" v-if="!imageUrl" />
323 </v-avatar> 335 </v-avatar>
324 <img 336 <img
325 :src="imageUrl" 337 :src="imageUrl"
326 height="150" 338 height="150"
327 v-if="imageUrl" 339 v-if="imageUrl"
328 style="border-radius:50%; width:200px" 340 style="border-radius:50%; width:200px"
329 /> 341 />
330 </v-flex> 342 </v-flex>
331 </v-layout> 343 </v-layout>
332 <v-layout> 344 <v-layout>
333 <v-flex xs12 sm12> 345 <v-flex xs12 sm12>
334 <v-layout> 346 <v-layout>
335 <v-flex xs4 class="pt-4 subheading"> 347 <v-flex xs4 class="pt-4 subheading">
336 <label class="right">Name:</label> 348 <label class="right">Name:</label>
337 </v-flex> 349 </v-flex>
338 <v-flex xs8 sm4 class="ml-3"> 350 <v-flex xs8 sm4 class="ml-3">
339 <v-text-field 351 <v-text-field
340 v-model="addExpense.name" 352 v-model="addExpense.name"
341 placeholder="fill your full Name" 353 placeholder="fill your full Name"
342 name="name" 354 name="name"
343 type="text" 355 type="text"
344 :rules="nameRules" 356 :rules="nameRules"
345 required 357 required
346 ></v-text-field> 358 ></v-text-field>
347 </v-flex> 359 </v-flex>
348 </v-layout> 360 </v-layout>
349 </v-flex> 361 </v-flex>
350 </v-layout> 362 </v-layout>
351 <v-layout> 363 <v-layout>
352 <v-flex xs12 sm12> 364 <v-flex xs12 sm12>
353 <v-layout> 365 <v-layout>
354 <v-flex xs4 class="pt-4 subheading"> 366 <v-flex xs4 class="pt-4 subheading">
355 <label class="right">Amount:</label> 367 <label class="right">Amount:</label>
356 </v-flex> 368 </v-flex>
357 <v-flex xs8 sm4 class="ml-3"> 369 <v-flex xs8 sm4 class="ml-3">
358 <v-text-field 370 <v-text-field
359 v-model="addExpense.amount" 371 v-model="addExpense.amount"
360 placeholder="fill your Amount" 372 placeholder="fill your Amount"
361 name="name" 373 name="name"
362 type="text" 374 type="text"
363 :rules="amountRules" 375 :rules="amountRules"
364 required 376 required
365 ></v-text-field> 377 ></v-text-field>
366 </v-flex> 378 </v-flex>
367 </v-layout> 379 </v-layout>
368 </v-flex> 380 </v-flex>
369 </v-layout> 381 </v-layout>
370 <v-layout> 382 <v-layout>
371 <v-flex xs12 sm12> 383 <v-flex xs12 sm12>
372 <v-layout> 384 <v-layout>
373 <v-flex xs4 class="pt-4 subheading"> 385 <v-flex xs4 class="pt-4 subheading">
374 <label class="right">Date</label> 386 <label class="right">Date</label>
375 </v-flex> 387 </v-flex>
376 <v-flex xs8 sm4 class="ml-3"> 388 <v-flex xs8 sm4 class="ml-3">
377 <v-menu 389 <v-menu
378 ref="menu1" 390 ref="menu1"
379 :close-on-content-click="false" 391 :close-on-content-click="false"
380 v-model="menu1" 392 v-model="menu1"
381 :nudge-right="40" 393 :nudge-right="40"
382 lazy 394 lazy
383 transition="scale-transition" 395 transition="scale-transition"
384 offset-y 396 offset-y
385 full-width 397 full-width
386 min-width="290px" 398 min-width="290px"
387 > 399 >
388 <v-text-field 400 <v-text-field
389 slot="activator" 401 slot="activator"
390 :rules="joinDateRules" 402 :rules="joinDateRules"
391 v-model="addExpense.date" 403 v-model="addExpense.date"
392 placeholder="Select date" 404 placeholder="Select date"
393 ></v-text-field> 405 ></v-text-field>
394 <v-date-picker 406 <v-date-picker
395 ref="picker" 407 ref="picker"
396 v-model="addExpense.date" 408 v-model="addExpense.date"
397 @input="$refs.menu1.save(addExpense.date)" 409 @input="$refs.menu1.save(addExpense.date)"
398 ></v-date-picker> 410 ></v-date-picker>
399 </v-menu> 411 </v-menu>
400 </v-flex> 412 </v-flex>
401 </v-layout> 413 </v-layout>
402 </v-flex> 414 </v-flex>
403 <v-flex xs12 sm12> 415 <v-flex xs12 sm12>
404 <v-layout> 416 <v-layout>
405 <v-flex xs4 class="pt-4 subheading"> 417 <v-flex xs4 class="pt-4 subheading">
406 <label class="right">File:</label> 418 <label class="right">File:</label>
407 </v-flex> 419 </v-flex>
408 <v-flex xs8 sm4 class="ml-3"> 420 <v-flex xs8 sm4 class="ml-3">
409 <v-text-field 421 <v-text-field
410 label="Select file" 422 label="Select file"
411 @click="pickFile" 423 @click="pickFile"
412 v-model="imageName" 424 v-model="imageName"
413 append-icon="attach_file" 425 append-icon="attach_file"
414 ></v-text-field> 426 ></v-text-field>
415 <input 427 <input
416 type="file" 428 type="file"
417 style="display:none" 429 style="display:none"
418 ref="image" 430 ref="image"
419 accept="image/*" 431 accept="image/*"
420 @change="onFilePicked" 432 @change="onFilePicked"
421 /> 433 />
422 </v-flex> 434 </v-flex>
423 </v-layout> 435 </v-layout>
424 </v-flex> 436 </v-flex>
425 <v-layout> 437 <v-layout>
426 <v-flex xs12 sm12> 438 <v-flex xs12 sm12>
427 <v-layout> 439 <v-layout>
428 <v-flex xs4 class="pt-4 subheading"> 440 <v-flex xs4 class="pt-4 subheading">
429 <label class="right">Note:</label> 441 <label class="right">Note:</label>
430 </v-flex> 442 </v-flex>
431 <v-flex xs8 sm4 class="ml-3"> 443 <v-flex xs8 sm4 class="ml-3">
432 <v-textarea 444 <v-textarea
433 name="input-7-1" 445 name="input-7-1"
434 v-model="addExpense.note" 446 v-model="addExpense.note"
435 placeholder="fill your Note" 447 placeholder="fill your Note"
436 type="text" 448 type="text"
437 :rules="noteRules" 449 :rules="noteRules"
438 multi-line 450 multi-line
439 required 451 required
440 ></v-textarea> 452 ></v-textarea>
441 </v-flex> 453 </v-flex>
442 </v-layout> 454 </v-layout>
443 </v-flex> 455 </v-flex>
444 </v-layout> 456 </v-layout>
445 </v-layout> 457 </v-layout>
446 <v-layout> 458 <v-layout>
447 <v-flex xs12 sm6 offset-sm3> 459 <v-flex xs12 sm6 offset-sm3>
448 <v-layout> 460 <v-layout>
449 <v-flex xs6> 461 <v-flex xs6>
450 <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>
451 </v-flex> 463 </v-flex>
452 <v-flex xs6> 464 <v-flex xs6>
453 <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>
454 </v-flex> 466 </v-flex>
455 </v-layout> 467 </v-layout>
456 </v-flex> 468 </v-flex>
457 </v-layout> 469 </v-layout>
458 </v-container> 470 </v-container>
459 </v-form> 471 </v-form>
460 </v-card> 472 </v-card>
461 </v-flex> 473 </v-flex>
462 </v-container> 474 </v-container>
463 </v-tab-item> 475 </v-tab-item>
464 </v-tabs> 476 </v-tabs>
465 <div class="loader" v-if="showLoader"> 477 <div class="loader" v-if="showLoader">
466 <v-progress-circular indeterminate color="white"></v-progress-circular> 478 <v-progress-circular indeterminate color="white"></v-progress-circular>
467 </div> 479 </div>
468 </v-app> 480 </v-app>
469 </template> 481 </template>
470 482
471 <script> 483 <script>
472 import http from "@/Services/http.js"; 484 import http from "@/Services/http.js";
473 import Util from "@/util"; 485 import Util from "@/util";
474 import moment from "moment"; 486 import moment from "moment";
475 487
476 export default { 488 export default {
477 data: () => ({ 489 data: () => ({
478 component: "report-generate", 490 component: "report-generate",
479 snackbar: false, 491 snackbar: false,
480 y: "top", 492 y: "top",
481 x: "right", 493 x: "right",
482 mode: "", 494 mode: "",
483 timeout: 3000, 495 timeout: 3000,
484 text: "", 496 text: "",
485 showLoader: false, 497 showLoader: false,
486 loading: false, 498 loading: false,
487 date: null, 499 date: null,
488 search: "", 500 search: "",
489 menu: false, 501 menu: false,
490 menu1: false, 502 menu1: false,
491 menu2: false, 503 menu2: false,
492 menu3: false, 504 menu3: false,
493 dialog: false, 505 dialog: false,
494 dialog1: false, 506 dialog1: false,
495 valid: true, 507 valid: true,
496 isActive: true, 508 isActive: true,
497 newActive: false, 509 newActive: false,
498 pagination: { 510 pagination: {
499 rowsPerPage: 15 511 rowsPerPage: 15
500 }, 512 },
501 imageData: {}, 513 imageData: {},
502 imageName: "", 514 imageName: "",
503 imageUrl: "", 515 imageUrl: "",
504 imageFile: "", 516 imageFile: "",
505 nameRules: [v => !!v || " Full Name is required"], 517 nameRules: [v => !!v || " Full Name is required"],
506 amountRules: [v => !!v || "Amount is required"], 518 amountRules: [v => !!v || "Amount is required"],
507 noteRules: [v => !!v || "Note Name is required"], 519 noteRules: [v => !!v || "Note Name is required"],
508 joinDateRules: [v => !!v || "Date is required"], 520 joinDateRules: [v => !!v || "Date is required"],
509 errorMessages: "", 521 errorMessages: "",
510 headers: [ 522 headers: [
511 { 523 {
512 text: "No", 524 text: "No",
513 align: "center", 525 align: "center",
514 sortable: false, 526 sortable: false,
515 value: "No" 527 value: "No"
516 }, 528 },
517 { 529 {
518 text: "Profile Pic", 530 text: "Profile Pic",
519 value: "profilePicUrl", 531 value: "profilePicUrl",
520 sortable: false, 532 sortable: false,
521 align: "center" 533 align: "center"
522 }, 534 },
523 { text: "Name", value: "name", sortable: false, align: "center" }, 535 { text: "Name", value: "name", sortable: false, align: "center" },
524 { text: "Date", value: "date", sortable: false, align: "center" }, 536 { text: "Date", value: "date", sortable: false, align: "center" },
525 { text: "User", value: "user", sortable: false, align: "center" }, 537 { text: "User", value: "user", sortable: false, align: "center" },
526 { text: "Amount", value: "amount", sortable: false, align: "center" }, 538 { text: "Amount", value: "amount", sortable: false, align: "center" },
527 { text: "Note", value: "note", sortable: false, align: "center" }, 539 { text: "Note", value: "note", sortable: false, align: "center" },
528 { text: "Action", value: "", sortable: false, align: "center" } 540 { text: "Action", value: "", sortable: false, align: "center" }
529 ], 541 ],
530 expenseList: [], 542 expenseList: [],
531 editedIndex: -1, 543 editedIndex: -1,
532 upload: "", 544 upload: "",
533 editedItem: { 545 editedItem: {
534 role: "TEACHER", 546 role: "TEACHER",
535 name: "", 547 name: "",
536 email: "", 548 email: "",
537 date: null, 549 date: null,
538 city: "", 550 city: "",
539 pincode: "", 551 pincode: "",
540 country: "", 552 country: "",
541 permanentAddress: "", 553 permanentAddress: "",
542 presentAddress: "", 554 presentAddress: "",
543 mobileNo: "", 555 mobileNo: "",
544 state: "", 556 state: "",
545 joinDate: null 557 joinDate: null
546 }, 558 },
547 addExpense: {}, 559 addExpense: {},
548 defaultItem: { 560 defaultItem: {
549 role: "TEACHER", 561 role: "TEACHER",
550 name: "", 562 name: "",
551 email: "" 563 email: ""
552 } 564 }
553 }), 565 }),
554 watch: { 566 watch: {
555 menu(val) { 567 menu(val) {
556 val && this.$nextTick(() => (this.$refs.picker.activePicker = "YEAR")); 568 val && this.$nextTick(() => (this.$refs.picker.activePicker = "YEAR"));
557 }, 569 },
558 menu1(val) { 570 menu1(val) {
559 val && this.$nextTick(() => (this.$refs.picker.activePicker = "YEAR")); 571 val && this.$nextTick(() => (this.$refs.picker.activePicker = "YEAR"));
560 } 572 }
561 }, 573 },
562 methods: { 574 methods: {
563 save(date) { 575 save(date) {
564 this.$refs.menu.save(date); 576 this.$refs.menu.save(date);
565 }, 577 },
566 save(date) { 578 save(date) {
567 this.$refs.menu1.save(date); 579 this.$refs.menu1.save(date);
568 }, 580 },
569 pickFile() { 581 pickFile() {
570 this.$refs.image.click(); 582 this.$refs.image.click();
571 }, 583 },
572 onFilePicked(e) { 584 onFilePicked(e) {
573 // console.log(e) 585 // console.log(e)
574 const files = e.target.files; 586 const files = e.target.files;
575 this.upload = e.target.files[0]; 587 this.upload = e.target.files[0];
576 console.log("imageData-upload========>", this.upload); 588 console.log("imageData-upload========>", this.upload);
577 if (files[0] !== undefined) { 589 if (files[0] !== undefined) {
578 this.imageName = files[0].name; 590 this.imageName = files[0].name;
579 if (this.imageName.lastIndexOf(".") <= 0) { 591 if (this.imageName.lastIndexOf(".") <= 0) {
580 return; 592 return;
581 } 593 }
582 const fr = new FileReader(); 594 const fr = new FileReader();
583 fr.readAsDataURL(files[0]); 595 fr.readAsDataURL(files[0]);
584 fr.addEventListener("load", () => { 596 fr.addEventListener("load", () => {
585 this.imageUrl = fr.result; 597 this.imageUrl = fr.result;
586 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...
587 // this.imageData.imageUrl = URL.createObjectURL(this.imageFile); 599 // this.imageData.imageUrl = URL.createObjectURL(this.imageFile);
588 // console.log("upload=======>", this.imageData.imageUrl); 600 // console.log("upload=======>", this.imageData.imageUrl);
589 console.log("imageFile", this.imageUrl); 601 console.log("imageFile", this.imageUrl);
590 }); 602 });
591 } else { 603 } else {
592 this.imageName = ""; 604 this.imageName = "";
593 this.imageFile = ""; 605 this.imageFile = "";
594 this.imageUrl = ""; 606 this.imageUrl = "";
595 } 607 }
596 }, 608 },
597 dates: function(date) { 609 dates: function(date) {
598 return moment(date).format("MMMM DD, YYYY"); 610 return moment(date).format("MMMM DD, YYYY");
599 }, 611 },
600 getExpenseList() { 612 getExpenseList() {
601 this.showLoader = true; 613 this.showLoader = true;
602 var token = this.$store.state.token; 614 var token = this.$store.state.token;
603 http() 615 http()
604 .get("/getExpensesList", { 616 .get("/getExpensesList", {
605 headers: { Authorization: "Bearer " + token } 617 headers: { Authorization: "Bearer " + token }
606 }) 618 })
607 .then(response => { 619 .then(response => {
608 this.expenseList = response.data.data; 620 this.expenseList = response.data.data;
609 this.showLoader = false; 621 this.showLoader = false;
610 // console.log("getTeacherList=====>",this.expenseList) 622 // console.log("getTeacherList=====>",this.expenseList)
611 }) 623 })
612 .catch(error => { 624 .catch(error => {
613 this.showLoader = false; 625 this.showLoader = false;
614 if (error.response.status === 401) { 626 if (error.response.status === 401) {
615 this.$router.replace({ path: "/" }); 627 this.$router.replace({ path: "/" });
616 this.$store.dispatch("setToken", null); 628 this.$store.dispatch("setToken", null);
617 this.$store.dispatch("Id", null); 629 this.$store.dispatch("Id", null);
618 } 630 }
619 }); 631 });
620 }, 632 },
621 editItem(item) { 633 editItem(item) {
622 this.editedIndex = this.expenseList.indexOf(item); 634 this.editedIndex = this.expenseList.indexOf(item);
623 this.editedItem = Object.assign({}, item); 635 this.editedItem = Object.assign({}, item);
624 // this.editedItem.dob = 636 // this.editedItem.dob =
625 // this.editedItem.dob != undefined 637 // this.editedItem.dob != undefined
626 // ? (this.editedItem.dob = this.editedItem.dob.substring(0, 10)) 638 // ? (this.editedItem.dob = this.editedItem.dob.substring(0, 10))
627 // : (this.editedItem.dob = ""); 639 // : (this.editedItem.dob = "");
628 this.editedItem.date = 640 this.editedItem.date =
629 this.editedItem.date != undefined 641 this.editedItem.date != undefined
630 ? (this.editedItem.date = this.editedItem.date.substring(0, 10)) 642 ? (this.editedItem.date = this.editedItem.date.substring(0, 10))
631 : (this.editedItem.date = ""); 643 : (this.editedItem.date = "");
632 644
633 this.dialog = true; 645 this.dialog = true;
634 }, 646 },
635 profile(item) { 647 profile(item) {
636 this.editedIndex = this.expenseList.indexOf(item); 648 this.editedIndex = this.expenseList.indexOf(item);
637 this.editedItem = Object.assign({}, item); 649 this.editedItem = Object.assign({}, item);
638 this.dialog1 = true; 650 this.dialog1 = true;
639 }, 651 },
640 deleteItem(item) { 652 deleteItem(item) {
641 let deleteExpense = { 653 let deleteExpense = {
642 expenseId: item._id 654 expenseId: item._id
643 }; 655 };
644 // console.log("deleteUers",deleteTeachers) 656 // console.log("deleteUers",deleteTeachers)
645 http() 657 http()
646 .delete( 658 .delete(
647 "/deleteExpense", 659 "/deleteExpense",
648 confirm("Are you sure you want to delete this?") && { 660 confirm("Are you sure you want to delete this?") && {
649 params: deleteExpense 661 params: deleteExpense
650 } 662 }
651 ) 663 )
652 .then(response => { 664 .then(response => {
653 // console.log("deleteUers",deleteTeachers) 665 // console.log("deleteUers",deleteTeachers)
654 if ((this.snackbar = true)) { 666 if ((this.snackbar = true)) {
655 this.text = "Successfully delete Existing Expense"; 667 this.text = "Successfully delete Existing Expense";
656 } 668 }
657 this.getExpenseList(); 669 this.getExpenseList();
658 }) 670 })
659 .catch(error => { 671 .catch(error => {
660 console.log(error); 672 console.log(error);
661 }); 673 });
662 }, 674 },
663 activeTab(type) { 675 activeTab(type) {
664 switch (type) { 676 switch (type) {
665 case "existing": 677 case "existing":
666 this.newActive = false; 678 this.newActive = false;
667 this.isActive = true; 679 this.isActive = true;
668 break; 680 break;
669 681
670 default: 682 default:
671 this.newActive = true; 683 this.newActive = true;
672 this.isActive = false; 684 this.isActive = false;
673 break; 685 break;
674 } 686 }
675 }, 687 },
676 close() { 688 close() {
677 this.dialog = false; 689 this.dialog = false;
678 setTimeout(() => { 690 setTimeout(() => {
679 this.editedItem = Object.assign({}, this.defaultItem); 691 this.editedItem = Object.assign({}, this.defaultItem);
680 this.editedIndex = -1; 692 this.editedIndex = -1;
681 }, 300); 693 }, 300);
682 }, 694 },
683 close1() { 695 close1() {
684 this.dialog1 = false; 696 this.dialog1 = false;
685 }, 697 },
686 submit() { 698 submit() {
687 if (this.$refs.form.validate()) { 699 if (this.$refs.form.validate()) {
688 if (this.imageUrl) { 700 if (this.imageUrl) {
689 var str = this.imageUrl; 701 var str = this.imageUrl;
690 const [baseUrl, imageUrl] = str.split(/,/); 702 const [baseUrl, imageUrl] = str.split(/,/);
691 this.addExpense.upload = imageUrl; 703 this.addExpense.upload = imageUrl;
692 } 704 }
693 this.loading = true; 705 this.loading = true;
694 http() 706 http()
695 .post("/createExpense", this.addExpense) 707 .post("/createExpense", this.addExpense)
696 .then(response => { 708 .then(response => {
697 this.getExpenseList(); 709 this.getExpenseList();
698 if ((this.snackbar = true)) { 710 if ((this.snackbar = true)) {
699 this.text = "New Expense added successfully"; 711 this.text = "New Expense added successfully";
700 } 712 }
701 713
702 this.clear(); 714 this.clear();
703 this.loading = false; 715 this.loading = false;
704 }) 716 })
705 .catch(error => { 717 .catch(error => {
706 // console.log(error); 718 // console.log(error);
707 if ((this.snackbar = true)) { 719 if ((this.snackbar = true)) {
708 this.text = error.response.data.message; 720 this.text = error.response.data.message;
709 } 721 }
710 this.loading = false; 722 this.loading = false;
711 }); 723 });
712 } 724 }
713 }, 725 },
714 clear() { 726 clear() {
715 this.$refs.form.reset(); 727 this.$refs.form.reset();
716 }, 728 },
717 save() { 729 save() {
src/pages/Account/income.vue
Diff comments   View file @495e403
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 <img 271 <v-tooltip top>
272 style="cursor:pointer; width:25px; height:18px; " 272 <img
273 class="mr-5" 273 slot="activator"
274 @click="profile(props.item)" 274 style="cursor:pointer; width:25px; height:18px; "
275 src="/static/icon/eye1.png" 275 class="mr5"
276 /> 276 @click="profile(props.item)"
277 <img 277 src="/static/icon/eye1.png"
278 style="cursor:pointer; width:20px; height:18px; " 278 />
279 class="mr-5" 279 <span>View</span>
280 @click="editItem(props.item)" 280 </v-tooltip>
281 src="/static/icon/edit1.png" 281 <v-tooltip top>
282 /> 282 <img
283 <img 283 slot="activator"
284 style="cursor:pointer;width:20px; height:20px; " 284 style="cursor:pointer; width:20px; height:18px; "
285 class="mr-5" 285 class="mr5"
286 @click="deleteItem(props.item)" 286 @click="editItem(props.item)"
287 src="/static/icon/delete1.png" 287 src="/static/icon/edit1.png"
288 /> 288 />
289 <span>Edit</span>
290 </v-tooltip>
291 <v-tooltip top>
292 <img
293 slot="activator"
294 style="cursor:pointer; width:20px; height:20px; "
295 class="mr5"
296 @click="deleteItem(props.item)"
297 src="/static/icon/delete1.png"
298 />
299 <span>Delete</span>
300 </v-tooltip>
289 </span> 301 </span>
290 </td> 302 </td>
291 </template> 303 </template>
292 <v-alert 304 <v-alert
293 slot="no-results" 305 slot="no-results"
294 :value="true" 306 :value="true"
295 color="error" 307 color="error"
296 icon="warning" 308 icon="warning"
297 >Your search for "{{ search }}" found no results.</v-alert> 309 >Your search for "{{ search }}" found no results.</v-alert>
298 </v-data-table> 310 </v-data-table>
299 </v-tab-item> 311 </v-tab-item>
300 312
301 <!-- ****** Add Income Data****** --> 313 <!-- ****** Add Income Data****** -->
302 <v-tab-item> 314 <v-tab-item>
303 <v-container> 315 <v-container>
304 <v-snackbar 316 <v-snackbar
305 :timeout="timeout" 317 :timeout="timeout"
306 :top="y === 'top'" 318 :top="y === 'top'"
307 :right="x === 'right'" 319 :right="x === 'right'"
308 :vertical="mode === 'vertical'" 320 :vertical="mode === 'vertical'"
309 v-model="snackbar" 321 v-model="snackbar"
310 color="success" 322 color="success"
311 >{{ text }}</v-snackbar> 323 >{{ text }}</v-snackbar>
312 <v-flex xs12 sm12 class="my-4"> 324 <v-flex xs12 sm12 class="my-4">
313 <v-card flat> 325 <v-card flat>
314 <v-form ref="form" v-model="valid" lazy-validation> 326 <v-form ref="form" v-model="valid" lazy-validation>
315 <v-container fluid> 327 <v-container fluid>
316 <v-layout> 328 <v-layout>
317 <v-flex 329 <v-flex
318 xs12 330 xs12
319 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"
320 > 332 >
321 <v-avatar size="100px"> 333 <v-avatar size="100px">
322 <img src="/static/icon/user.png" v-if="!imageUrl" /> 334 <img src="/static/icon/user.png" v-if="!imageUrl" />
323 </v-avatar> 335 </v-avatar>
324 <img 336 <img
325 :src="imageUrl" 337 :src="imageUrl"
326 height="150" 338 height="150"
327 v-if="imageUrl" 339 v-if="imageUrl"
328 style="border-radius:50%; width:200px" 340 style="border-radius:50%; width:200px"
329 /> 341 />
330 </v-flex> 342 </v-flex>
331 </v-layout> 343 </v-layout>
332 <v-layout> 344 <v-layout>
333 <v-flex xs12 sm12> 345 <v-flex xs12 sm12>
334 <v-layout> 346 <v-layout>
335 <v-flex xs4 class="pt-4 subheading"> 347 <v-flex xs4 class="pt-4 subheading">
336 <label class="right">Name:</label> 348 <label class="right">Name:</label>
337 </v-flex> 349 </v-flex>
338 <v-flex xs8 sm4 class="ml-3"> 350 <v-flex xs8 sm4 class="ml-3">
339 <v-text-field 351 <v-text-field
340 v-model="addIncome.name" 352 v-model="addIncome.name"
341 placeholder="fill your full Name" 353 placeholder="fill your full Name"
342 name="name" 354 name="name"
343 type="text" 355 type="text"
344 :rules="nameRules" 356 :rules="nameRules"
345 required 357 required
346 ></v-text-field> 358 ></v-text-field>
347 </v-flex> 359 </v-flex>
348 </v-layout> 360 </v-layout>
349 </v-flex> 361 </v-flex>
350 </v-layout> 362 </v-layout>
351 <v-layout> 363 <v-layout>
352 <v-flex xs12 sm12> 364 <v-flex xs12 sm12>
353 <v-layout> 365 <v-layout>
354 <v-flex xs4 class="pt-4 subheading"> 366 <v-flex xs4 class="pt-4 subheading">
355 <label class="right">Amount:</label> 367 <label class="right">Amount:</label>
356 </v-flex> 368 </v-flex>
357 <v-flex xs8 sm4 class="ml-3"> 369 <v-flex xs8 sm4 class="ml-3">
358 <v-text-field 370 <v-text-field
359 v-model="addIncome.amount" 371 v-model="addIncome.amount"
360 placeholder="fill your Amount" 372 placeholder="fill your Amount"
361 name="name" 373 name="name"
362 type="text" 374 type="text"
363 :rules="amountRules" 375 :rules="amountRules"
364 required 376 required
365 ></v-text-field> 377 ></v-text-field>
366 </v-flex> 378 </v-flex>
367 </v-layout> 379 </v-layout>
368 </v-flex> 380 </v-flex>
369 </v-layout> 381 </v-layout>
370 <v-layout> 382 <v-layout>
371 <v-flex xs12 sm12> 383 <v-flex xs12 sm12>
372 <v-layout> 384 <v-layout>
373 <v-flex xs4 class="pt-4 subheading"> 385 <v-flex xs4 class="pt-4 subheading">
374 <label class="right">Date</label> 386 <label class="right">Date</label>
375 </v-flex> 387 </v-flex>
376 <v-flex xs8 sm4 class="ml-3"> 388 <v-flex xs8 sm4 class="ml-3">
377 <v-menu 389 <v-menu
378 ref="menu1" 390 ref="menu1"
379 :close-on-content-click="false" 391 :close-on-content-click="false"
380 v-model="menu1" 392 v-model="menu1"
381 :nudge-right="40" 393 :nudge-right="40"
382 lazy 394 lazy
383 transition="scale-transition" 395 transition="scale-transition"
384 offset-y 396 offset-y
385 full-width 397 full-width
386 min-width="290px" 398 min-width="290px"
387 > 399 >
388 <v-text-field 400 <v-text-field
389 slot="activator" 401 slot="activator"
390 :rules="joinDateRules" 402 :rules="joinDateRules"
391 v-model="addIncome.date" 403 v-model="addIncome.date"
392 placeholder="Select date" 404 placeholder="Select date"
393 ></v-text-field> 405 ></v-text-field>
394 <v-date-picker 406 <v-date-picker
395 ref="picker" 407 ref="picker"
396 v-model="addIncome.date" 408 v-model="addIncome.date"
397 @input="$refs.menu1.save(addIncome.date)" 409 @input="$refs.menu1.save(addIncome.date)"
398 ></v-date-picker> 410 ></v-date-picker>
399 </v-menu> 411 </v-menu>
400 </v-flex> 412 </v-flex>
401 </v-layout> 413 </v-layout>
402 </v-flex> 414 </v-flex>
403 <v-flex xs12 sm12> 415 <v-flex xs12 sm12>
404 <v-layout> 416 <v-layout>
405 <v-flex xs4 class="pt-4 subheading"> 417 <v-flex xs4 class="pt-4 subheading">
406 <label class="right">File:</label> 418 <label class="right">File:</label>
407 </v-flex> 419 </v-flex>
408 <v-flex xs8 sm4 class="ml-3"> 420 <v-flex xs8 sm4 class="ml-3">
409 <v-text-field 421 <v-text-field
410 label="Select file" 422 label="Select file"
411 @click="pickFile" 423 @click="pickFile"
412 v-model="imageName" 424 v-model="imageName"
413 append-icon="attach_file" 425 append-icon="attach_file"
414 ></v-text-field> 426 ></v-text-field>
415 <input 427 <input
416 type="file" 428 type="file"
417 style="display:none" 429 style="display:none"
418 ref="image" 430 ref="image"
419 accept="image/*" 431 accept="image/*"
420 @change="onFilePicked" 432 @change="onFilePicked"
421 /> 433 />
422 </v-flex> 434 </v-flex>
423 </v-layout> 435 </v-layout>
424 </v-flex> 436 </v-flex>
425 <v-layout> 437 <v-layout>
426 <v-flex xs12 sm12> 438 <v-flex xs12 sm12>
427 <v-layout> 439 <v-layout>
428 <v-flex xs4 class="pt-4 subheading"> 440 <v-flex xs4 class="pt-4 subheading">
429 <label class="right">Note:</label> 441 <label class="right">Note:</label>
430 </v-flex> 442 </v-flex>
431 <v-flex xs8 sm4 class="ml-3"> 443 <v-flex xs8 sm4 class="ml-3">
432 <v-textarea 444 <v-textarea
433 name="input-7-1" 445 name="input-7-1"
434 v-model="addIncome.note" 446 v-model="addIncome.note"
435 placeholder="fill your Note" 447 placeholder="fill your Note"
436 type="text" 448 type="text"
437 :rules="noteRules" 449 :rules="noteRules"
438 multi-line 450 multi-line
439 required 451 required
440 ></v-textarea> 452 ></v-textarea>
441 </v-flex> 453 </v-flex>
442 </v-layout> 454 </v-layout>
443 </v-flex> 455 </v-flex>
444 </v-layout> 456 </v-layout>
445 </v-layout> 457 </v-layout>
446 <v-layout> 458 <v-layout>
447 <v-flex xs12 sm5 offset-sm3> 459 <v-flex xs12 sm5 offset-sm3>
448 <v-layout> 460 <v-layout>
449 <v-flex xs6> 461 <v-flex xs6>
450 <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>
451 </v-flex> 463 </v-flex>
452 <v-flex xs6> 464 <v-flex xs6>
453 <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>
454 </v-flex> 466 </v-flex>
455 </v-layout> 467 </v-layout>
456 </v-flex> 468 </v-flex>
457 </v-layout> 469 </v-layout>
458 </v-container> 470 </v-container>
459 </v-form> 471 </v-form>
460 </v-card> 472 </v-card>
461 </v-flex> 473 </v-flex>
462 </v-container> 474 </v-container>
463 </v-tab-item> 475 </v-tab-item>
464 </v-tabs> 476 </v-tabs>
465 <div class="loader" v-if="showLoader"> 477 <div class="loader" v-if="showLoader">
466 <v-progress-circular indeterminate color="white"></v-progress-circular> 478 <v-progress-circular indeterminate color="white"></v-progress-circular>
467 </div> 479 </div>
468 </v-app> 480 </v-app>
469 </template> 481 </template>
470 482
471 <script> 483 <script>
472 import http from "@/Services/http.js"; 484 import http from "@/Services/http.js";
473 import Util from "@/util"; 485 import Util from "@/util";
474 import moment from "moment"; 486 import moment from "moment";
475 487
476 export default { 488 export default {
477 data: () => ({ 489 data: () => ({
478 component: "report-generate", 490 component: "report-generate",
479 snackbar: false, 491 snackbar: false,
480 y: "top", 492 y: "top",
481 x: "right", 493 x: "right",
482 mode: "", 494 mode: "",
483 timeout: 3000, 495 timeout: 3000,
484 text: "", 496 text: "",
485 showLoader: false, 497 showLoader: false,
486 loading: false, 498 loading: false,
487 date: null, 499 date: null,
488 search: "", 500 search: "",
489 menu: false, 501 menu: false,
490 menu1: false, 502 menu1: false,
491 menu2: false, 503 menu2: false,
492 menu3: false, 504 menu3: false,
493 dialog: false, 505 dialog: false,
494 dialog1: false, 506 dialog1: false,
495 valid: true, 507 valid: true,
496 isActive: true, 508 isActive: true,
497 newActive: false, 509 newActive: false,
498 pagination: { 510 pagination: {
499 rowsPerPage: 15 511 rowsPerPage: 15
500 }, 512 },
501 imageData: {}, 513 imageData: {},
502 imageName: "", 514 imageName: "",
503 imageUrl: "", 515 imageUrl: "",
504 imageFile: "", 516 imageFile: "",
505 nameRules: [v => !!v || " Full Name is required"], 517 nameRules: [v => !!v || " Full Name is required"],
506 amountRules: [v => !!v || "Amount is required"], 518 amountRules: [v => !!v || "Amount is required"],
507 noteRules: [v => !!v || "Note Name is required"], 519 noteRules: [v => !!v || "Note Name is required"],
508 joinDateRules: [v => !!v || "Date is required"], 520 joinDateRules: [v => !!v || "Date is required"],
509 errorMessages: "", 521 errorMessages: "",
510 headers: [ 522 headers: [
511 { 523 {
512 text: "No", 524 text: "No",
513 align: "center", 525 align: "center",
514 sortable: false, 526 sortable: false,
515 value: "No" 527 value: "No"
516 }, 528 },
517 { 529 {
518 text: "Profile Pic", 530 text: "Profile Pic",
519 value: "profilePicUrl", 531 value: "profilePicUrl",
520 sortable: false, 532 sortable: false,
521 align: "center" 533 align: "center"
522 }, 534 },
523 { text: "Name", value: "name", sortable: false, align: "center" }, 535 { text: "Name", value: "name", sortable: false, align: "center" },
524 { text: "Date", value: "date", sortable: false, align: "center" }, 536 { text: "Date", value: "date", sortable: false, align: "center" },
525 { text: "User", value: "user", sortable: false, align: "center" }, 537 { text: "User", value: "user", sortable: false, align: "center" },
526 { text: "Amount", value: "amount", sortable: false, align: "center" }, 538 { text: "Amount", value: "amount", sortable: false, align: "center" },
527 { text: "Note", value: "note", sortable: false, align: "center" }, 539 { text: "Note", value: "note", sortable: false, align: "center" },
528 { text: "Action", value: "", sortable: false, align: "center" } 540 { text: "Action", value: "", sortable: false, align: "center" }
529 ], 541 ],
530 incomeList: [], 542 incomeList: [],
531 editedIndex: -1, 543 editedIndex: -1,
532 upload: "", 544 upload: "",
533 editedItem: {}, 545 editedItem: {},
534 addIncome: {} 546 addIncome: {}
535 }), 547 }),
536 watch: { 548 watch: {
537 menu(val) { 549 menu(val) {
538 val && this.$nextTick(() => (this.$refs.picker.activePicker = "YEAR")); 550 val && this.$nextTick(() => (this.$refs.picker.activePicker = "YEAR"));
539 }, 551 },
540 menu1(val) { 552 menu1(val) {
541 val && this.$nextTick(() => (this.$refs.picker.activePicker = "YEAR")); 553 val && this.$nextTick(() => (this.$refs.picker.activePicker = "YEAR"));
542 } 554 }
543 }, 555 },
544 methods: { 556 methods: {
545 save(date) { 557 save(date) {
546 this.$refs.menu.save(date); 558 this.$refs.menu.save(date);
547 }, 559 },
548 save(date) { 560 save(date) {
549 this.$refs.menu1.save(date); 561 this.$refs.menu1.save(date);
550 }, 562 },
551 pickFile() { 563 pickFile() {
552 this.$refs.image.click(); 564 this.$refs.image.click();
553 }, 565 },
554 onFilePicked(e) { 566 onFilePicked(e) {
555 // console.log(e) 567 // console.log(e)
556 const files = e.target.files; 568 const files = e.target.files;
557 this.upload = e.target.files[0]; 569 this.upload = e.target.files[0];
558 console.log("imageData-upload========>", this.upload); 570 console.log("imageData-upload========>", this.upload);
559 if (files[0] !== undefined) { 571 if (files[0] !== undefined) {
560 this.imageName = files[0].name; 572 this.imageName = files[0].name;
561 if (this.imageName.lastIndexOf(".") <= 0) { 573 if (this.imageName.lastIndexOf(".") <= 0) {
562 return; 574 return;
563 } 575 }
564 const fr = new FileReader(); 576 const fr = new FileReader();
565 fr.readAsDataURL(files[0]); 577 fr.readAsDataURL(files[0]);
566 fr.addEventListener("load", () => { 578 fr.addEventListener("load", () => {
567 this.imageUrl = fr.result; 579 this.imageUrl = fr.result;
568 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...
569 // this.imageData.imageUrl = URL.createObjectURL(this.imageFile); 581 // this.imageData.imageUrl = URL.createObjectURL(this.imageFile);
570 // console.log("upload=======>", this.imageData.imageUrl); 582 // console.log("upload=======>", this.imageData.imageUrl);
571 console.log("imageFile", this.imageUrl); 583 console.log("imageFile", this.imageUrl);
572 }); 584 });
573 } else { 585 } else {
574 this.imageName = ""; 586 this.imageName = "";
575 this.imageFile = ""; 587 this.imageFile = "";
576 this.imageUrl = ""; 588 this.imageUrl = "";
577 } 589 }
578 }, 590 },
579 dates: function(date) { 591 dates: function(date) {
580 return moment(date).format("MMMM DD, YYYY"); 592 return moment(date).format("MMMM DD, YYYY");
581 }, 593 },
582 getIncomeList() { 594 getIncomeList() {
583 this.showLoader = true; 595 this.showLoader = true;
584 var token = this.$store.state.token; 596 var token = this.$store.state.token;
585 http() 597 http()
586 .get("/getIncomesList", { 598 .get("/getIncomesList", {
587 headers: { Authorization: "Bearer " + token } 599 headers: { Authorization: "Bearer " + token }
588 }) 600 })
589 .then(response => { 601 .then(response => {
590 this.incomeList = response.data.data; 602 this.incomeList = response.data.data;
591 this.showLoader = false; 603 this.showLoader = false;
592 // console.log("getTeacherList=====>",this.incomeList) 604 // console.log("getTeacherList=====>",this.incomeList)
593 }) 605 })
594 .catch(error => { 606 .catch(error => {
595 this.showLoader = false; 607 this.showLoader = false;
596 if (error.response.status === 401) { 608 if (error.response.status === 401) {
597 this.$router.replace({ path: "/" }); 609 this.$router.replace({ path: "/" });
598 this.$store.dispatch("setToken", null); 610 this.$store.dispatch("setToken", null);
599 this.$store.dispatch("Id", null); 611 this.$store.dispatch("Id", null);
600 } 612 }
601 }); 613 });
602 }, 614 },
603 editItem(item) { 615 editItem(item) {
604 this.editedIndex = this.incomeList.indexOf(item); 616 this.editedIndex = this.incomeList.indexOf(item);
605 this.editedItem = Object.assign({}, item); 617 this.editedItem = Object.assign({}, item);
606 this.editedItem.date = 618 this.editedItem.date =
607 this.editedItem.date != undefined 619 this.editedItem.date != undefined
608 ? (this.editedItem.date = this.editedItem.date.substring(0, 10)) 620 ? (this.editedItem.date = this.editedItem.date.substring(0, 10))
609 : (this.editedItem.date = ""); 621 : (this.editedItem.date = "");
610 622
611 this.dialog = true; 623 this.dialog = true;
612 }, 624 },
613 profile(item) { 625 profile(item) {
614 this.editedIndex = this.incomeList.indexOf(item); 626 this.editedIndex = this.incomeList.indexOf(item);
615 this.editedItem = Object.assign({}, item); 627 this.editedItem = Object.assign({}, item);
616 this.dialog1 = true; 628 this.dialog1 = true;
617 }, 629 },
618 deleteItem(item) { 630 deleteItem(item) {
619 let deleteIncome = { 631 let deleteIncome = {
620 incomeId: item._id 632 incomeId: item._id
621 }; 633 };
622 http() 634 http()
623 .delete( 635 .delete(
624 "/deleteIncome", 636 "/deleteIncome",
625 confirm("Are you sure you want to delete this?") && { 637 confirm("Are you sure you want to delete this?") && {
626 params: deleteIncome 638 params: deleteIncome
627 } 639 }
628 ) 640 )
629 .then(response => { 641 .then(response => {
630 // console.log("deleteUers",deleteTeachers) 642 // console.log("deleteUers",deleteTeachers)
631 if ((this.snackbar = true)) { 643 if ((this.snackbar = true)) {
632 this.text = "Successfully delete Existing Income"; 644 this.text = "Successfully delete Existing Income";
633 } 645 }
634 this.getIncomeList(); 646 this.getIncomeList();
635 }) 647 })
636 .catch(error => { 648 .catch(error => {
637 console.log(error); 649 console.log(error);
638 }); 650 });
639 }, 651 },
640 activeTab(type) { 652 activeTab(type) {
641 switch (type) { 653 switch (type) {
642 case "existing": 654 case "existing":
643 this.newActive = false; 655 this.newActive = false;
644 this.isActive = true; 656 this.isActive = true;
645 break; 657 break;
646 658
647 default: 659 default:
648 this.newActive = true; 660 this.newActive = true;
649 this.isActive = false; 661 this.isActive = false;
650 break; 662 break;
651 } 663 }
652 }, 664 },
653 close() { 665 close() {
654 this.dialog = false; 666 this.dialog = false;
655 setTimeout(() => { 667 setTimeout(() => {
656 this.editedItem = Object.assign({}, this.defaultItem); 668 this.editedItem = Object.assign({}, this.defaultItem);
657 this.editedIndex = -1; 669 this.editedIndex = -1;
658 }, 300); 670 }, 300);
659 }, 671 },
660 close1() { 672 close1() {
661 this.dialog1 = false; 673 this.dialog1 = false;
662 }, 674 },
663 submit() { 675 submit() {
664 if (this.$refs.form.validate()) { 676 if (this.$refs.form.validate()) {
665 if (this.imageUrl) { 677 if (this.imageUrl) {
666 var str = this.imageUrl; 678 var str = this.imageUrl;
667 const [baseUrl, imageUrl] = str.split(/,/); 679 const [baseUrl, imageUrl] = str.split(/,/);
668 this.addIncome.upload = imageUrl; 680 this.addIncome.upload = imageUrl;
669 } 681 }
670 this.loading = true; 682 this.loading = true;
671 http() 683 http()
672 .post("/createIncome", this.addIncome) 684 .post("/createIncome", this.addIncome)
673 .then(response => { 685 .then(response => {
674 this.getIncomeList(); 686 this.getIncomeList();
675 if ((this.snackbar = true)) { 687 if ((this.snackbar = true)) {
676 this.text = "New Income added successfully"; 688 this.text = "New Income added successfully";
677 } 689 }
678 690
679 this.clear(); 691 this.clear();
680 this.loading = false; 692 this.loading = false;
681 }) 693 })
682 .catch(error => { 694 .catch(error => {
683 // console.log(error); 695 // console.log(error);
684 if ((this.snackbar = true)) { 696 if ((this.snackbar = true)) {
685 this.text = error.response.data.message; 697 this.text = error.response.data.message;
686 } 698 }
687 this.loading = false; 699 this.loading = false;
688 }); 700 });
689 } 701 }
690 }, 702 },
691 clear() { 703 clear() {
692 this.$refs.form.reset(); 704 this.$refs.form.reset();
693 }, 705 },
694 save() { 706 save() {
695 this.loading = true; 707 this.loading = true;
696 this.editedItem.incomeId = this.editedItem._id; 708 this.editedItem.incomeId = this.editedItem._id;
697 if (this.imageUrl) { 709 if (this.imageUrl) {
698 var str = this.imageUrl; 710 var str = this.imageUrl;
699 const [baseUrl, imageUrl] = str.split(/,/); 711 const [baseUrl, imageUrl] = str.split(/,/);
700 this.editedItem.upload = imageUrl; 712 this.editedItem.upload = imageUrl;
701 } 713 }
702 http() 714 http()
703 .put("/updateIncome", this.editedItem) 715 .put("/updateIncome", this.editedItem)
704 .then(response => { 716 .then(response => {
705 if ((this.snackbar = true)) { 717 if ((this.snackbar = true)) {
706 this.text = "Successfully Edit Income"; 718 this.text = "Successfully Edit Income";
707 } 719 }
708 this.loading = false; 720 this.loading = false;
709 this.getIncomeList(); 721 this.getIncomeList();
710 this.close(); 722 this.close();
711 }) 723 })
712 .catch(error => { 724 .catch(error => {
713 console.log(error); 725 console.log(error);
714 this.loading = false; 726 this.loading = false;
715 }); 727 });
716 } 728 }
717 }, 729 },
718 mounted() { 730 mounted() {
719 this.getIncomeList(); 731 this.getIncomeList();
720 }, 732 },
721 created() { 733 created() {
722 this.$root.$on("app:search", search => { 734 this.$root.$on("app:search", search => {
723 this.search = search; 735 this.search = search;
724 }); 736 });
725 }, 737 },
726 beforeDestroy() { 738 beforeDestroy() {
727 // dont forget to remove the listener 739 // dont forget to remove the listener
728 this.$root.$off("app:search"); 740 this.$root.$off("app:search");
729 } 741 }
730 }; 742 };
731 </script> 743 </script>
732 <style scoped> 744 <style scoped>
733 .active { 745 .active {
734 background-color: gray; 746 background-color: gray;
735 color: white !important; 747 color: white !important;
736 } 748 }
737 .activebtn { 749 .activebtn {
738 color: black !important; 750 color: black !important;
739 } 751 }
740 </style> 752 </style>
src/pages/Administrator/academicYear.vue
Diff comments   View file @495e403
1 <template> 1 <template>
2 <v-app id="pages-dasboard"> 2 <v-app id="pages-dasboard">
3 <v-tabs grow slider-color="gary"> 3 <v-tabs grow slider-color="gary">
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 Academic Year</v-tab> 10 >Existing Academic Year</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 Academic Year</v-tab> 18 >Add New Academic Year</v-tab>
19 19
20 <!-- ****** EDIT ACADEMIC YEAR ****** --> 20 <!-- ****** EDIT ACADEMIC YEAR ****** -->
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> 32 <v-flex xs12 sm12>
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 Academic Year</h3> 36 <h3>Edit Academic Year</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-flex xs12 sm12> 42 <v-flex xs12 sm12>
43 <v-layout> 43 <v-layout>
44 <v-flex xs4 class="pt-4 subheading"> 44 <v-flex xs4 class="pt-4 subheading">
45 <label class="right">Year:</label> 45 <label class="right">Year:</label>
46 </v-flex> 46 </v-flex>
47 <v-flex xs8 sm5 class="ml-3"> 47 <v-flex xs8 sm5 class="ml-3">
48 <v-text-field 48 <v-text-field
49 v-model="editedItem.year" 49 v-model="editedItem.year"
50 placeholder="fill your Title" 50 placeholder="fill your Title"
51 name="name" 51 name="name"
52 type="text" 52 type="text"
53 ></v-text-field> 53 ></v-text-field>
54 </v-flex> 54 </v-flex>
55 </v-layout> 55 </v-layout>
56 </v-flex> 56 </v-flex>
57 <v-flex xs12 sm12> 57 <v-flex xs12 sm12>
58 <v-layout> 58 <v-layout>
59 <v-flex xs4 class="pt-4 subheading"> 59 <v-flex xs4 class="pt-4 subheading">
60 <label class="right">Year Title:</label> 60 <label class="right">Year Title:</label>
61 </v-flex> 61 </v-flex>
62 <v-flex xs8 sm5 class="ml-3"> 62 <v-flex xs8 sm5 class="ml-3">
63 <v-text-field 63 <v-text-field
64 v-model="editedItem.yearTitle" 64 v-model="editedItem.yearTitle"
65 placeholder="fill your Year Title" 65 placeholder="fill your Year Title"
66 name="name" 66 name="name"
67 type="text" 67 type="text"
68 ></v-text-field> 68 ></v-text-field>
69 </v-flex> 69 </v-flex>
70 </v-layout> 70 </v-layout>
71 </v-flex> 71 </v-flex>
72 <v-flex xs12 sm12> 72 <v-flex xs12 sm12>
73 <v-layout> 73 <v-layout>
74 <v-flex xs4 class="pt-4 subheading"> 74 <v-flex xs4 class="pt-4 subheading">
75 <label class="right">Date:</label> 75 <label class="right">Date:</label>
76 </v-flex> 76 </v-flex>
77 <v-flex xs8 sm5 class="ml-3"> 77 <v-flex xs8 sm5 class="ml-3">
78 <v-menu 78 <v-menu
79 ref="menu" 79 ref="menu"
80 :close-on-content-click="false" 80 :close-on-content-click="false"
81 v-model="menu" 81 v-model="menu"
82 :nudge-right="40" 82 :nudge-right="40"
83 lazy 83 lazy
84 transition="scale-transition" 84 transition="scale-transition"
85 offset-y 85 offset-y
86 full-width 86 full-width
87 min-width="290px" 87 min-width="290px"
88 > 88 >
89 <v-text-field 89 <v-text-field
90 slot="activator" 90 slot="activator"
91 v-model="editedItem.startingDate" 91 v-model="editedItem.startingDate"
92 placeholder="Select date" 92 placeholder="Select date"
93 ></v-text-field> 93 ></v-text-field>
94 <v-date-picker 94 <v-date-picker
95 color="info" 95 color="info"
96 ref="picker" 96 ref="picker"
97 v-model="editedItem.startingDate" 97 v-model="editedItem.startingDate"
98 @input="$refs.menu.save(editedItem.startingDate)" 98 @input="$refs.menu.save(editedItem.startingDate)"
99 ></v-date-picker> 99 ></v-date-picker>
100 </v-menu> 100 </v-menu>
101 </v-flex> 101 </v-flex>
102 </v-layout> 102 </v-layout>
103 </v-flex> 103 </v-flex>
104 <v-flex xs12 sm12> 104 <v-flex xs12 sm12>
105 <v-layout> 105 <v-layout>
106 <v-flex xs4 class="pt-4 subheading"> 106 <v-flex xs4 class="pt-4 subheading">
107 <label class="right">Date:</label> 107 <label class="right">Date:</label>
108 </v-flex> 108 </v-flex>
109 <v-flex xs8 sm5 class="ml-3"> 109 <v-flex xs8 sm5 class="ml-3">
110 <v-menu 110 <v-menu
111 ref="menuEndDate" 111 ref="menuEndDate"
112 :close-on-content-click="false" 112 :close-on-content-click="false"
113 v-model="menuEndDate" 113 v-model="menuEndDate"
114 :nudge-right="40" 114 :nudge-right="40"
115 lazy 115 lazy
116 transition="scale-transition" 116 transition="scale-transition"
117 offset-y 117 offset-y
118 full-width 118 full-width
119 min-width="290px" 119 min-width="290px"
120 > 120 >
121 <v-text-field 121 <v-text-field
122 slot="activator" 122 slot="activator"
123 v-model="editedItem.endingDate" 123 v-model="editedItem.endingDate"
124 placeholder="Select date" 124 placeholder="Select date"
125 ></v-text-field> 125 ></v-text-field>
126 <v-date-picker 126 <v-date-picker
127 color="info" 127 color="info"
128 ref="picker" 128 ref="picker"
129 v-model="editedItem.endingDate" 129 v-model="editedItem.endingDate"
130 @input="$refs.menuEndDate.save(editedItem.endingDate)" 130 @input="$refs.menuEndDate.save(editedItem.endingDate)"
131 ></v-date-picker> 131 ></v-date-picker>
132 </v-menu> 132 </v-menu>
133 </v-flex> 133 </v-flex>
134 </v-layout> 134 </v-layout>
135 </v-flex> 135 </v-flex>
136 <v-layout> 136 <v-layout>
137 <v-flex xs12 sm10 offset-sm1> 137 <v-flex xs12 sm10 offset-sm1>
138 <v-card-actions> 138 <v-card-actions>
139 <v-btn round dark @click.native="close">Cancel</v-btn> 139 <v-btn round dark @click.native="close">Cancel</v-btn>
140 <v-spacer></v-spacer> 140 <v-spacer></v-spacer>
141 <v-btn round dark @click="save">Save</v-btn> 141 <v-btn round dark @click="save">Save</v-btn>
142 </v-card-actions> 142 </v-card-actions>
143 </v-flex> 143 </v-flex>
144 </v-layout> 144 </v-layout>
145 </v-container> 145 </v-container>
146 </v-card> 146 </v-card>
147 </v-flex> 147 </v-flex>
148 </v-dialog> 148 </v-dialog>
149 149
150 <!-- ****** PROFILE ACADEMIC YEAR DEATILS ****** --> 150 <!-- ****** PROFILE ACADEMIC YEAR DEATILS ****** -->
151 151
152 <v-dialog v-model="dialog1" max-width="700px"> 152 <v-dialog v-model="dialog1" max-width="700px">
153 <v-toolbar color="white"> 153 <v-toolbar color="white">
154 <v-spacer></v-spacer> 154 <v-spacer></v-spacer>
155 <v-toolbar-title> 155 <v-toolbar-title>
156 <h3>Academic Year</h3> 156 <h3>Academic Year</h3>
157 </v-toolbar-title> 157 </v-toolbar-title>
158 <v-spacer></v-spacer> 158 <v-spacer></v-spacer>
159 <v-icon @click="close1">close</v-icon> 159 <v-icon @click="close1">close</v-icon>
160 </v-toolbar> 160 </v-toolbar>
161 <v-card> 161 <v-card>
162 <v-card-text> 162 <v-card-text>
163 <v-container grid-list-md> 163 <v-container grid-list-md>
164 <v-layout wrap> 164 <v-layout wrap>
165 <v-flex> 165 <v-flex>
166 <v-layout> 166 <v-layout>
167 <v-flex xs5 sm6> 167 <v-flex xs5 sm6>
168 <h5 class="right my-1"> 168 <h5 class="right my-1">
169 <b>Title:</b> 169 <b>Title:</b>
170 </h5> 170 </h5>
171 </v-flex> 171 </v-flex>
172 <v-flex sm6 xs8> 172 <v-flex sm6 xs8>
173 <h5 class="my-1">{{ editedItem.year }}</h5> 173 <h5 class="my-1">{{ editedItem.year }}</h5>
174 </v-flex> 174 </v-flex>
175 </v-layout> 175 </v-layout>
176 <v-layout> 176 <v-layout>
177 <v-flex xs5 sm6> 177 <v-flex xs5 sm6>
178 <h5 class="right my-1"> 178 <h5 class="right my-1">
179 <b>Date:</b> 179 <b>Date:</b>
180 </h5> 180 </h5>
181 </v-flex> 181 </v-flex>
182 <v-flex sm6 xs8> 182 <v-flex sm6 xs8>
183 <h5 class="my-1">{{ dates(editedItem.dateOfEvent) }}</h5> 183 <h5 class="my-1">{{ dates(editedItem.dateOfEvent) }}</h5>
184 </v-flex> 184 </v-flex>
185 </v-layout> 185 </v-layout>
186 <v-layout> 186 <v-layout>
187 <v-flex xs5 sm6> 187 <v-flex xs5 sm6>
188 <h5 class="right my-1"> 188 <h5 class="right my-1">
189 <b>Description:</b> 189 <b>Description:</b>
190 </h5> 190 </h5>
191 </v-flex> 191 </v-flex>
192 <v-flex sm6 xs8> 192 <v-flex sm6 xs8>
193 <h5 class="my-1">{{ editedItem.yearTitle }}</h5> 193 <h5 class="my-1">{{ editedItem.yearTitle }}</h5>
194 </v-flex> 194 </v-flex>
195 </v-layout> 195 </v-layout>
196 </v-flex> 196 </v-flex>
197 </v-layout> 197 </v-layout>
198 </v-container> 198 </v-container>
199 </v-card-text> 199 </v-card-text>
200 </v-card> 200 </v-card>
201 </v-dialog> 201 </v-dialog>
202 <v-snackbar 202 <v-snackbar
203 :timeout="timeout" 203 :timeout="timeout"
204 :top="y === 'top'" 204 :top="y === 'top'"
205 :right="x === 'right'" 205 :right="x === 'right'"
206 :vertical="mode === 'vertical'" 206 :vertical="mode === 'vertical'"
207 v-model="snackbar" 207 v-model="snackbar"
208 color="success" 208 color="success"
209 >{{ text }}</v-snackbar> 209 >{{ text }}</v-snackbar>
210 210
211 <!-- ****** EXISTING ACADEMIC YEAR TABLE ****** --> 211 <!-- ****** EXISTING ACADEMIC YEAR TABLE ****** -->
212 212
213 <v-data-table 213 <v-data-table
214 :headers="headers" 214 :headers="headers"
215 :items="getAcademicYearList" 215 :items="getAcademicYearList"
216 :pagination.sync="pagination" 216 :pagination.sync="pagination"
217 :search="search" 217 :search="search"
218 > 218 >
219 <template slot="items" slot-scope="props"> 219 <template slot="items" slot-scope="props">
220 <td id="td" class="text-xs-center">{{ props.index + 1}}</td> 220 <td id="td" class="text-xs-center">{{ props.index + 1}}</td>
221 <td id="td" class="text-xs-center">{{ props.item.year}}</td> 221 <td id="td" class="text-xs-center">{{ props.item.year}}</td>
222 <td id="td" class="text-xs-center">{{ props.item.yearTitle}}</td> 222 <td id="td" class="text-xs-center">{{ props.item.yearTitle}}</td>
223 <td id="td" class="text-xs-center">{{ dates(props.item.startingDate)}}</td> 223 <td id="td" class="text-xs-center">{{ dates(props.item.startingDate)}}</td>
224 <td id="td" class="text-xs-center">{{ dates(props.item.endingDate)}}</td> 224 <td id="td" class="text-xs-center">{{ dates(props.item.endingDate)}}</td>
225 <td id="td" class="text-xs-center"> 225 <td id="td" class="text-xs-center">
226 <span> 226 <span>
227 <img 227 <v-tooltip top>
228 style="cursor:pointer; width:25px; height:18px; " 228 <img
229 class="mr-5" 229 slot="activator"
230 @click="profile(props.item)" 230 style="cursor:pointer; width:25px; height:18px; "
231 src="/static/icon/eye1.png" 231 class="mr5"
232 /> 232 @click="profile(props.item)"
233 <img 233 src="/static/icon/eye1.png"
234 style="cursor:pointer; width:20px; height:18px; " 234 />
235 class="mr-5" 235 <span>View</span>
236 @click="editItem(props.item)" 236 </v-tooltip>
237 src="/static/icon/edit1.png" 237 <v-tooltip top>
238 /> 238 <img
239 <img 239 slot="activator"
240 style="cursor:pointer;width:20px; height:20px; " 240 style="cursor:pointer; width:20px; height:18px; "
241 class="mr-5" 241 class="mr5"
242 @click="deleteItem(props.item)" 242 @click="editItem(props.item)"
243 src="/static/icon/delete1.png" 243 src="/static/icon/edit1.png"
244 /> 244 />
245 <span>Edit</span>
246 </v-tooltip>
247 <v-tooltip top>
248 <img
249 slot="activator"
250 style="cursor:pointer; width:20px; height:20px; "
251 class="mr5"
252 @click="deleteItem(props.item)"
253 src="/static/icon/delete1.png"
254 />
255 <span>Delete</span>
256 </v-tooltip>
245 </span> 257 </span>
246 </td> 258 </td>
247 </template> 259 </template>
248 <v-alert 260 <v-alert
249 slot="no-results" 261 slot="no-results"
250 :value="true" 262 :value="true"
251 color="error" 263 color="error"
252 icon="warning" 264 icon="warning"
253 >Your search for "{{ search }}" found no results.</v-alert> 265 >Your search for "{{ search }}" found no results.</v-alert>
254 </v-data-table> 266 </v-data-table>
255 </v-tab-item> 267 </v-tab-item>
256 268
257 <!-- ****** ADD ACADEMIC YEAR ****** --> 269 <!-- ****** ADD ACADEMIC YEAR ****** -->
258 270
259 <v-tab-item> 271 <v-tab-item>
260 <v-container> 272 <v-container>
261 <v-snackbar 273 <v-snackbar
262 :timeout="timeout" 274 :timeout="timeout"
263 :top="y === 'top'" 275 :top="y === 'top'"
264 :right="x === 'right'" 276 :right="x === 'right'"
265 :vertical="mode === 'vertical'" 277 :vertical="mode === 'vertical'"
266 v-model="snackbar" 278 v-model="snackbar"
267 color="success" 279 color="success"
268 >{{ text }}</v-snackbar> 280 >{{ text }}</v-snackbar>
269 <v-flex xs12 sm12 md8 offset-md2 class="top"> 281 <v-flex xs12 sm12 md8 offset-md2 class="top">
270 <v-card flat> 282 <v-card flat>
271 <v-form ref="form" v-model="valid" lazy-validation> 283 <v-form ref="form" v-model="valid" lazy-validation>
272 <v-container fluid> 284 <v-container fluid>
273 <v-flex xs12> 285 <v-flex xs12>
274 <v-layout> 286 <v-layout>
275 <v-flex xs5 sm4 class="pt-4 subheading"> 287 <v-flex xs5 sm4 class="pt-4 subheading">
276 <label class="right">Year:</label> 288 <label class="right">Year:</label>
277 </v-flex> 289 </v-flex>
278 <v-flex xs7 sm6 class="ml-3"> 290 <v-flex xs7 sm6 class="ml-3">
279 <v-text-field 291 <v-text-field
280 v-model="addAcademicYear.year" 292 v-model="addAcademicYear.year"
281 placeholder="fill Year (2019-2020)" 293 placeholder="fill Year (2019-2020)"
282 type="text" 294 type="text"
283 :rules="yearRules" 295 :rules="yearRules"
284 required 296 required
285 ></v-text-field> 297 ></v-text-field>
286 </v-flex> 298 </v-flex>
287 </v-layout> 299 </v-layout>
288 </v-flex> 300 </v-flex>
289 <v-flex xs12> 301 <v-flex xs12>
290 <v-layout> 302 <v-layout>
291 <v-flex xs5 sm4 class="pt-4 subheading"> 303 <v-flex xs5 sm4 class="pt-4 subheading">
292 <label class="right">Year Title:</label> 304 <label class="right">Year Title:</label>
293 </v-flex> 305 </v-flex>
294 <v-flex xs7 sm6 class="ml-3"> 306 <v-flex xs7 sm6 class="ml-3">
295 <v-text-field 307 <v-text-field
296 placeholder="fill your Year Title" 308 placeholder="fill your Year Title"
297 :rules="yearTitleRules" 309 :rules="yearTitleRules"
298 v-model="addAcademicYear.yearTitle" 310 v-model="addAcademicYear.yearTitle"
299 type="text" 311 type="text"
300 required 312 required
301 ></v-text-field> 313 ></v-text-field>
302 </v-flex> 314 </v-flex>
303 </v-layout> 315 </v-layout>
304 </v-flex> 316 </v-flex>
305 <v-flex xs12> 317 <v-flex xs12>
306 <v-layout> 318 <v-layout>
307 <v-flex xs5 sm4 class="pt-4 subheading"> 319 <v-flex xs5 sm4 class="pt-4 subheading">
308 <label class="right">Starting Date:</label> 320 <label class="right">Starting Date:</label>
309 </v-flex> 321 </v-flex>
310 <v-flex xs7 sm6 class="ml-3"> 322 <v-flex xs7 sm6 class="ml-3">
311 <v-menu 323 <v-menu
312 ref="menuStart" 324 ref="menuStart"
313 :close-on-content-click="false" 325 :close-on-content-click="false"
314 v-model="menuStart" 326 v-model="menuStart"
315 :nudge-right="40" 327 :nudge-right="40"
316 :return-value.sync="addAcademicYear.startingDate" 328 :return-value.sync="addAcademicYear.startingDate"
317 app 329 app
318 lazy 330 lazy
319 transition="scale-transition" 331 transition="scale-transition"
320 offset-y 332 offset-y
321 full-width 333 full-width
322 min-width="290px" 334 min-width="290px"
323 > 335 >
324 <v-text-field 336 <v-text-field
325 slot="activator" 337 slot="activator"
326 :rules="startDateRules" 338 :rules="startDateRules"
327 v-model="addAcademicYear.startingDate" 339 v-model="addAcademicYear.startingDate"
328 append-icon="event" 340 append-icon="event"
329 placeholder="Select starting date" 341 placeholder="Select starting date"
330 ></v-text-field> 342 ></v-text-field>
331 <v-date-picker 343 <v-date-picker
332 color="info" 344 color="info"
333 v-model="addAcademicYear.startingDate" 345 v-model="addAcademicYear.startingDate"
334 @input="$refs.menuStart.save(addAcademicYear.startingDate)" 346 @input="$refs.menuStart.save(addAcademicYear.startingDate)"
335 ></v-date-picker> 347 ></v-date-picker>
336 </v-menu> 348 </v-menu>
337 </v-flex> 349 </v-flex>
338 </v-layout> 350 </v-layout>
339 </v-flex> 351 </v-flex>
340 <v-flex xs12> 352 <v-flex xs12>
341 <v-layout> 353 <v-layout>
342 <v-flex xs5 sm4 class="pt-4 subheading"> 354 <v-flex xs5 sm4 class="pt-4 subheading">
343 <label class="right">Ending Date:</label> 355 <label class="right">Ending Date:</label>
344 </v-flex> 356 </v-flex>
345 <v-flex xs7 sm6 class="ml-3"> 357 <v-flex xs7 sm6 class="ml-3">
346 <v-menu 358 <v-menu
347 ref="menu1" 359 ref="menu1"
348 :close-on-content-click="false" 360 :close-on-content-click="false"
349 v-model="menu1" 361 v-model="menu1"
350 :nudge-right="40" 362 :nudge-right="40"
351 :return-value.sync="addAcademicYear.endingDate" 363 :return-value.sync="addAcademicYear.endingDate"
352 app 364 app
353 lazy 365 lazy
354 transition="scale-transition" 366 transition="scale-transition"
355 offset-y 367 offset-y
356 full-width 368 full-width
357 min-width="290px" 369 min-width="290px"
358 > 370 >
359 <v-text-field 371 <v-text-field
360 slot="activator" 372 slot="activator"
361 :rules="endDateRules" 373 :rules="endDateRules"
362 v-model="addAcademicYear.endingDate" 374 v-model="addAcademicYear.endingDate"
363 append-icon="event" 375 append-icon="event"
364 placeholder="Select ending date" 376 placeholder="Select ending date"
365 ></v-text-field> 377 ></v-text-field>
366 <v-date-picker 378 <v-date-picker
367 color="info" 379 color="info"
368 v-model="addAcademicYear.endingDate" 380 v-model="addAcademicYear.endingDate"
369 @input="$refs.menu1.save(addAcademicYear.endingDate)" 381 @input="$refs.menu1.save(addAcademicYear.endingDate)"
370 ></v-date-picker> 382 ></v-date-picker>
371 </v-menu> 383 </v-menu>
372 </v-flex> 384 </v-flex>
373 </v-layout> 385 </v-layout>
374 </v-flex> 386 </v-flex>
375 <v-layout> 387 <v-layout>
376 <v-flex xs12 sm9 offset-sm2> 388 <v-flex xs12 sm9 offset-sm2>
377 <v-layout> 389 <v-layout>
378 <v-flex xs6> 390 <v-flex xs6>
379 <v-btn @click="clear" round class="ml-3" dark>clear</v-btn> 391 <v-btn @click="clear" round class="ml-3" dark>clear</v-btn>
380 </v-flex> 392 </v-flex>
381 <v-flex xs6> 393 <v-flex xs6>
382 <v-btn @click="submit" round dark :loading="loading" class="right">Add</v-btn> 394 <v-btn @click="submit" round dark :loading="loading" class="right">Add</v-btn>
383 </v-flex> 395 </v-flex>
384 </v-layout> 396 </v-layout>
385 </v-flex> 397 </v-flex>
386 </v-layout> 398 </v-layout>
387 </v-container> 399 </v-container>
388 </v-form> 400 </v-form>
389 </v-card> 401 </v-card>
390 </v-flex> 402 </v-flex>
391 </v-container> 403 </v-container>
392 </v-tab-item> 404 </v-tab-item>
393 </v-tabs> 405 </v-tabs>
394 <div class="loader" v-if="showLoader"> 406 <div class="loader" v-if="showLoader">
395 <v-progress-circular indeterminate color="white"></v-progress-circular> 407 <v-progress-circular indeterminate color="white"></v-progress-circular>
396 </div> 408 </div>
397 </v-app> 409 </v-app>
398 </template> 410 </template>
399 411
400 <script> 412 <script>
401 import http from "@/Services/http.js"; 413 import http from "@/Services/http.js";
402 import Util from "@/util"; 414 import Util from "@/util";
403 import moment from "moment"; 415 import moment from "moment";
404 416
405 export default { 417 export default {
406 data: () => ({ 418 data: () => ({
407 snackbar: false, 419 snackbar: false,
408 y: "top", 420 y: "top",
409 x: "right", 421 x: "right",
410 mode: "", 422 mode: "",
411 timeout: 3000, 423 timeout: 3000,
412 text: "", 424 text: "",
413 loading: false, 425 loading: false,
414 date: null, 426 date: null,
415 search: "", 427 search: "",
416 showLoader: false, 428 showLoader: false,
417 dialog: false, 429 dialog: false,
418 dialog1: false, 430 dialog1: false,
419 valid: true, 431 valid: true,
420 isActive: true, 432 isActive: true,
421 newActive: false, 433 newActive: false,
422 pagination: { 434 pagination: {
423 rowsPerPage: 15 435 rowsPerPage: 15
424 }, 436 },
425 date: null, 437 date: null,
426 menu1: false, 438 menu1: false,
427 menu: false, 439 menu: false,
428 menuStart: false, 440 menuStart: false,
429 menuEndDate: false, 441 menuEndDate: false,
430 yearRules: [v => !!v || "Year is required"], 442 yearRules: [v => !!v || "Year is required"],
431 yearTitleRules: [v => !!v || "Year Title is required"], 443 yearTitleRules: [v => !!v || "Year Title is required"],
432 startDateRules: [v => !!v || "startDate is required"], 444 startDateRules: [v => !!v || "startDate is required"],
433 endDateRules: [v => !!v || "endDate is required"], 445 endDateRules: [v => !!v || "endDate is required"],
434 headers: [ 446 headers: [
435 { 447 {
436 text: "No", 448 text: "No",
437 align: "center", 449 align: "center",
438 sortable: false, 450 sortable: false,
439 value: "No" 451 value: "No"
440 }, 452 },
441 { text: "Year", value: "year", sortable: false, align: "center" }, 453 { text: "Year", value: "year", sortable: false, align: "center" },
442 { 454 {
443 text: "Year Title", 455 text: "Year Title",
444 value: "yearTitle", 456 value: "yearTitle",
445 sortable: false, 457 sortable: false,
446 align: "center" 458 align: "center"
447 }, 459 },
448 460
449 { 461 {
450 text: "Starting Date", 462 text: "Starting Date",
451 value: "startingDate", 463 value: "startingDate",
452 sortable: false, 464 sortable: false,
453 align: "center" 465 align: "center"
454 }, 466 },
455 { 467 {
456 text: "Ending Date", 468 text: "Ending Date",
457 value: "endingDate", 469 value: "endingDate",
458 sortable: false, 470 sortable: false,
459 align: "center" 471 align: "center"
460 }, 472 },
461 { text: "Action", value: "", sortable: false, align: "center" } 473 { text: "Action", value: "", sortable: false, align: "center" }
462 ], 474 ],
463 getAcademicYearList: [], 475 getAcademicYearList: [],
464 editedIndex: -1, 476 editedIndex: -1,
465 addAcademicYear: {}, 477 addAcademicYear: {},
466 editedItem: {}, 478 editedItem: {},
467 token: "" 479 token: ""
468 }), 480 }),
469 methods: { 481 methods: {
470 dates: function(date) { 482 dates: function(date) {
471 return moment(date).format("MMMM DD, YYYY"); 483 return moment(date).format("MMMM DD, YYYY");
472 }, 484 },
473 getAcademicYear() { 485 getAcademicYear() {
474 this.showLoader = true; 486 this.showLoader = true;
475 http() 487 http()
476 .get("/getAcademicsList", { 488 .get("/getAcademicsList", {
477 headers: { Authorization: "Bearer " + this.token } 489 headers: { Authorization: "Bearer " + this.token }
478 }) 490 })
479 .then(response => { 491 .then(response => {
480 this.getAcademicYearList = response.data.data; 492 this.getAcademicYearList = response.data.data;
481 this.showLoader = false; 493 this.showLoader = false;
482 }) 494 })
483 .catch(error => { 495 .catch(error => {
484 this.showLoader = false; 496 this.showLoader = false;
485 if (error.response.status === 401) { 497 if (error.response.status === 401) {
486 this.$router.replace({ path: "/" }); 498 this.$router.replace({ path: "/" });
487 this.$store.dispatch("setToken", null); 499 this.$store.dispatch("setToken", null);
488 this.$store.dispatch("Id", null); 500 this.$store.dispatch("Id", null);
489 } 501 }
490 }); 502 });
491 }, 503 },
492 editItem(item) { 504 editItem(item) {
493 this.editedIndex = this.getAcademicYearList.indexOf(item); 505 this.editedIndex = this.getAcademicYearList.indexOf(item);
494 this.editedItem = Object.assign({}, item); 506 this.editedItem = Object.assign({}, item);
495 this.editedItem.schoolEventId = item._id; 507 this.editedItem.schoolEventId = item._id;
496 this.dialog = true; 508 this.dialog = true;
497 }, 509 },
498 profile(item) { 510 profile(item) {
499 this.editedIndex = this.getAcademicYearList.indexOf(item); 511 this.editedIndex = this.getAcademicYearList.indexOf(item);
500 this.editedItem = Object.assign({}, item); 512 this.editedItem = Object.assign({}, item);
501 this.dialog1 = true; 513 this.dialog1 = true;
502 }, 514 },
503 515
504 deleteItem(item) { 516 deleteItem(item) {
505 let deleteAcademic = { 517 let deleteAcademic = {
506 academicId: item._id 518 academicId: item._id
507 }; 519 };
508 http() 520 http()
509 .delete( 521 .delete(
510 "/deleteAcademic", 522 "/deleteAcademic",
511 confirm("Are you sure you want to delete this?") && { 523 confirm("Are you sure you want to delete this?") && {
512 params: deleteAcademic 524 params: deleteAcademic
513 } 525 }
514 ) 526 )
515 .then(response => { 527 .then(response => {
516 this.snackbar = true; 528 this.snackbar = true;
517 this.text = response.data.message; 529 this.text = response.data.message;
518 this.getAcademicYear(); 530 this.getAcademicYear();
519 }) 531 })
520 .catch(error => { 532 .catch(error => {
521 console.log(error); 533 console.log(error);
522 }); 534 });
523 }, 535 },
524 activeTab(type) { 536 activeTab(type) {
525 switch (type) { 537 switch (type) {
526 case "existing": 538 case "existing":
527 this.newActive = false; 539 this.newActive = false;
528 this.isActive = true; 540 this.isActive = true;
529 break; 541 break;
530 542
531 default: 543 default:
532 this.newActive = true; 544 this.newActive = true;
533 this.isActive = false; 545 this.isActive = false;
534 break; 546 break;
535 } 547 }
536 }, 548 },
537 close() { 549 close() {
538 this.dialog = false; 550 this.dialog = false;
539 setTimeout(() => { 551 setTimeout(() => {
540 this.editedItem = Object.assign({}, this.defaultItem); 552 this.editedItem = Object.assign({}, this.defaultItem);
541 this.editedIndex = -1; 553 this.editedIndex = -1;
542 }, 300); 554 }, 300);
543 }, 555 },
544 close1() { 556 close1() {
545 this.dialog1 = false; 557 this.dialog1 = false;
546 }, 558 },
547 submit() { 559 submit() {
548 if (this.$refs.form.validate()) { 560 if (this.$refs.form.validate()) {
549 this.loading = true; 561 this.loading = true;
550 http() 562 http()
551 .post("/createAcademic", this.addAcademicYear) 563 .post("/createAcademic", this.addAcademicYear)
552 .then(response => { 564 .then(response => {
553 if ((this.snackbar = true)) { 565 if ((this.snackbar = true)) {
554 this.text = response.data.message; 566 this.text = response.data.message;
555 } 567 }
556 this.getAcademicYear(); 568 this.getAcademicYear();
557 this.clear(); 569 this.clear();
558 this.loading = false; 570 this.loading = false;
559 }) 571 })
560 .catch(error => { 572 .catch(error => {
561 if ((this.snackbar = true)) { 573 if ((this.snackbar = true)) {
562 this.text = error.response.data.message; 574 this.text = error.response.data.message;
563 } 575 }
564 this.loading = false; 576 this.loading = false;
565 }); 577 });
566 } 578 }
567 }, 579 },
568 clear() { 580 clear() {
569 this.$refs.form.reset(); 581 this.$refs.form.reset();
570 }, 582 },
571 save() { 583 save() {
572 this.editedItem.academicId = this.editedItem._id; 584 this.editedItem.academicId = this.editedItem._id;
573 http() 585 http()
574 .put("/updateAcademic", this.editedItem, { 586 .put("/updateAcademic", this.editedItem, {
575 headers: { Authorization: "Bearer " + this.token } 587 headers: { Authorization: "Bearer " + this.token }
576 }) 588 })
577 .then(response => { 589 .then(response => {
578 this.snackbar = true; 590 this.snackbar = true;
579 this.text = response.data.message; 591 this.text = response.data.message;
580 this.getAcademicYear(); 592 this.getAcademicYear();
581 this.close(); 593 this.close();
582 }) 594 })
583 .catch(error => { 595 .catch(error => {
584 console.log(error); 596 console.log(error);
585 }); 597 });
586 } 598 }
587 }, 599 },
588 mounted() { 600 mounted() {
589 this.token = this.$store.state.token; 601 this.token = this.$store.state.token;
590 this.getAcademicYear(); 602 this.getAcademicYear();
591 }, 603 },
592 created() { 604 created() {
593 this.$root.$on("app:search", search => { 605 this.$root.$on("app:search", search => {
594 this.search = search; 606 this.search = search;
595 }); 607 });
596 }, 608 },
597 beforeDestroy() { 609 beforeDestroy() {
598 // dont forget to remove the listener 610 // dont forget to remove the listener
599 this.$root.$off("app:search"); 611 this.$root.$off("app:search");
600 } 612 }
601 }; 613 };
602 </script> 614 </script>
603 <style scoped> 615 <style scoped>
604 #td { 616 #td {
605 max-width: 200px; 617 max-width: 200px;
606 } 618 }
607 .active { 619 .active {
608 background-color: gray; 620 background-color: gray;
609 color: white !important; 621 color: white !important;
610 } 622 }
611 .activebtn { 623 .activebtn {
612 color: black !important; 624 color: black !important;
613 } 625 }
614 </style> 626 </style>
src/pages/Administrator/role.vue
Diff comments   View file @495e403
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 Role</v-tab> 10 >Existing Role</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 Role</v-tab> 18 >Add New Role</v-tab>
19 19
20 <!-- ****** EDITS Role Distribution DETAILS ****** --> 20 <!-- ****** EDITS Role Distribution 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="600px"> 31 <v-dialog v-model="dialog" max-width="600px">
32 <v-flex xs12 sm12> 32 <v-flex xs12 sm12>
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 Role</h3> 36 <h3>Edit Role</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-form ref="form"> 41 <v-form ref="form">
42 <v-container fluid> 42 <v-container fluid>
43 <v-flex xs12 sm12> 43 <v-flex xs12 sm12>
44 <v-layout> 44 <v-layout>
45 <v-flex xs4 class="pt-4 subheading"> 45 <v-flex xs4 class="pt-4 subheading">
46 <label class="right">Role:</label> 46 <label class="right">Role:</label>
47 </v-flex> 47 </v-flex>
48 <v-flex xs8 sm6 class="ml-3"> 48 <v-flex xs8 sm6 class="ml-3">
49 <v-text-field v-model="editedItem.name" placeholder="fill your Role"></v-text-field> 49 <v-text-field v-model="editedItem.name" placeholder="fill your Role"></v-text-field>
50 </v-flex> 50 </v-flex>
51 </v-layout> 51 </v-layout>
52 </v-flex> 52 </v-flex>
53 <v-layout> 53 <v-layout>
54 <v-flex xs12 sm10 offset-sm1> 54 <v-flex xs12 sm10 offset-sm1>
55 <v-card-actions> 55 <v-card-actions>
56 <v-btn round dark @click.native="close">Cancel</v-btn> 56 <v-btn round dark @click.native="close">Cancel</v-btn>
57 <v-spacer></v-spacer> 57 <v-spacer></v-spacer>
58 <v-btn round dark @click="save">Save</v-btn> 58 <v-btn round dark @click="save">Save</v-btn>
59 </v-card-actions> 59 </v-card-actions>
60 </v-flex> 60 </v-flex>
61 </v-layout> 61 </v-layout>
62 </v-container> 62 </v-container>
63 </v-form> 63 </v-form>
64 </v-card> 64 </v-card>
65 </v-flex> 65 </v-flex>
66 </v-dialog> 66 </v-dialog>
67 67
68 <!-- ****** EXISTING-USERS REMINDER TABLE ****** --> 68 <!-- ****** EXISTING-USERS REMINDER TABLE ****** -->
69 69
70 <v-data-table 70 <v-data-table
71 :headers="headers" 71 :headers="headers"
72 :items="getRole" 72 :items="getRole"
73 :pagination.sync="pagination" 73 :pagination.sync="pagination"
74 :search="search" 74 :search="search"
75 > 75 >
76 <template slot="items" slot-scope="props"> 76 <template slot="items" slot-scope="props">
77 <td id="tabeleData" class="text-xs-center">{{ props.index + 1}}</td> 77 <td id="tabeleData" class="text-xs-center">{{ props.index + 1}}</td>
78 <td id="tabeleData" class="text-xs-center">{{ props.item.name}}</td> 78 <td id="tabeleData" class="text-xs-center">{{ props.item.name}}</td>
79 <td id="tabeleData" class="text-xs-center"> 79 <td id="tabeleData" class="text-xs-center">
80 <span> 80 <span>
81 <img 81 <v-tooltip top>
82 style="cursor:pointer; width:20px; height:18px; " 82 <img
83 class="mr-5" 83 slot="activator"
84 @click="editItem(props.item)" 84 style="cursor:pointer; width:20px; height:18px; "
85 src="/static/icon/edit1.png" 85 class="mr5"
86 /> 86 @click="editItem(props.item)"
87 <img 87 src="/static/icon/edit1.png"
88 style="cursor:pointer;width:20px; height:20px; " 88 />
89 class="mr-5" 89 <span>Edit</span>
90 @click="deleteItem(props.item)" 90 </v-tooltip>
91 src="/static/icon/delete1.png" 91 <v-tooltip top>
92 /> 92 <img
93 slot="activator"
94 style="cursor:pointer; width:20px; height:20px; "
95 class="mr5"
96 @click="deleteItem(props.item)"
97 src="/static/icon/delete1.png"
98 />
99 <span>Delete</span>
100 </v-tooltip>
93 </span> 101 </span>
94 </td> 102 </td>
95 </template> 103 </template>
96 <v-alert 104 <v-alert
97 slot="no-results" 105 slot="no-results"
98 :value="true" 106 :value="true"
99 color="error" 107 color="error"
100 icon="warning" 108 icon="warning"
101 >Your search for "{{ search }}" found no results.</v-alert> 109 >Your search for "{{ search }}" found no results.</v-alert>
102 </v-data-table> 110 </v-data-table>
103 </v-tab-item> 111 </v-tab-item>
104 112
105 <!-- ****** ADD ROLE ****** --> 113 <!-- ****** ADD ROLE ****** -->
106 114
107 <v-tab-item> 115 <v-tab-item>
108 <v-container> 116 <v-container>
109 <v-snackbar 117 <v-snackbar
110 :timeout="timeout" 118 :timeout="timeout"
111 :top="y === 'top'" 119 :top="y === 'top'"
112 :right="x === 'right'" 120 :right="x === 'right'"
113 :vertical="mode === 'vertical'" 121 :vertical="mode === 'vertical'"
114 v-model="snackbar" 122 v-model="snackbar"
115 color="success" 123 color="success"
116 >{{ text }}</v-snackbar> 124 >{{ text }}</v-snackbar>
117 <v-flex xs12 sm8 class="top" offset-sm2> 125 <v-flex xs12 sm8 class="top" offset-sm2>
118 <v-card flat> 126 <v-card flat>
119 <v-form ref="form" v-model="valid" lazy-validation> 127 <v-form ref="form" v-model="valid" lazy-validation>
120 <v-container fluid> 128 <v-container fluid>
121 <v-flex xs12> 129 <v-flex xs12>
122 <v-layout> 130 <v-layout>
123 <v-flex xs4 class="pt-4 subheading"> 131 <v-flex xs4 class="pt-4 subheading">
124 <label class="right">Role:</label> 132 <label class="right">Role:</label>
125 </v-flex> 133 </v-flex>
126 <v-flex xs8 sm4 class="ml-3"> 134 <v-flex xs8 sm4 class="ml-3">
127 <v-text-field 135 <v-text-field
128 v-model="addrole.name" 136 v-model="addrole.name"
129 placeholder="fill your Role" 137 placeholder="fill your Role"
130 :rules="roleRules" 138 :rules="roleRules"
131 ></v-text-field> 139 ></v-text-field>
132 </v-flex> 140 </v-flex>
133 </v-layout> 141 </v-layout>
134 </v-flex> 142 </v-flex>
135 <v-layout> 143 <v-layout>
136 <v-flex xs12 sm12> 144 <v-flex xs12 sm12>
137 <v-layout> 145 <v-layout>
138 <v-flex xs5> 146 <v-flex xs5>
139 <v-btn @click="clear" round class="right" dark>clear</v-btn> 147 <v-btn @click="clear" round class="right" dark>clear</v-btn>
140 </v-flex> 148 </v-flex>
141 <v-flex xs8 sm4> 149 <v-flex xs8 sm4>
142 <v-btn @click="submit" round dark :loading="loading" class="right">Add</v-btn> 150 <v-btn @click="submit" round dark :loading="loading" class="right">Add</v-btn>
143 </v-flex> 151 </v-flex>
144 </v-layout> 152 </v-layout>
145 </v-flex> 153 </v-flex>
146 </v-layout> 154 </v-layout>
147 </v-container> 155 </v-container>
148 </v-form> 156 </v-form>
149 </v-card> 157 </v-card>
150 </v-flex> 158 </v-flex>
151 </v-container> 159 </v-container>
152 </v-tab-item> 160 </v-tab-item>
153 </v-tabs> 161 </v-tabs>
154 <div class="loader" v-if="showLoader"> 162 <div class="loader" v-if="showLoader">
155 <v-progress-circular indeterminate color="white"></v-progress-circular> 163 <v-progress-circular indeterminate color="white"></v-progress-circular>
156 </div> 164 </div>
157 </v-app> 165 </v-app>
158 </template> 166 </template>
159 167
160 <script> 168 <script>
161 import http from "@/Services/http.js"; 169 import http from "@/Services/http.js";
162 import Util from "@/util"; 170 import Util from "@/util";
163 171
164 export default { 172 export default {
165 data: () => ({ 173 data: () => ({
166 snackbar: false, 174 snackbar: false,
167 y: "top", 175 y: "top",
168 x: "right", 176 x: "right",
169 mode: "", 177 mode: "",
170 timeout: 3000, 178 timeout: 3000,
171 text: "", 179 text: "",
172 loading: false, 180 loading: false,
173 search: "", 181 search: "",
174 showLoader: false, 182 showLoader: false,
175 dialog: false, 183 dialog: false,
176 valid: true, 184 valid: true,
177 isActive: true, 185 isActive: true,
178 newActive: false, 186 newActive: false,
179 pagination: { 187 pagination: {
180 rowsPerPage: 15 188 rowsPerPage: 15
181 }, 189 },
182 roleRules: [v => !!v || "Role is required"], 190 roleRules: [v => !!v || "Role is required"],
183 headers: [ 191 headers: [
184 { 192 {
185 text: "No", 193 text: "No",
186 align: "center", 194 align: "center",
187 sortable: false, 195 sortable: false,
188 value: "No" 196 value: "No"
189 }, 197 },
190 { text: "Role", value: "role", sortable: false, align: "center" }, 198 { text: "Role", value: "role", sortable: false, align: "center" },
191 { text: "Action", value: "", sortable: false, align: "center" } 199 { text: "Action", value: "", sortable: false, align: "center" }
192 ], 200 ],
193 getRole: [], 201 getRole: [],
194 editedIndex: -1, 202 editedIndex: -1,
195 token: "", 203 token: "",
196 addrole: {}, 204 addrole: {},
197 editedItem: {} 205 editedItem: {}
198 }), 206 }),
199 methods: { 207 methods: {
200 getRole() { 208 getRole() {
201 this.showLoader = true; 209 this.showLoader = true;
202 http() 210 http()
203 .get("/getRolesList", { 211 .get("/getRolesList", {
204 headers: { Authorization: "Bearer " + this.token } 212 headers: { Authorization: "Bearer " + this.token }
205 }) 213 })
206 .then(response => { 214 .then(response => {
207 this.getRole = response.data.data; 215 this.getRole = response.data.data;
208 this.showLoader = false; 216 this.showLoader = false;
209 }) 217 })
210 .catch(error => { 218 .catch(error => {
211 this.showLoader = false; 219 this.showLoader = false;
212 if (error.response.status === 401) { 220 if (error.response.status === 401) {
213 this.$router.replace({ path: "/" }); 221 this.$router.replace({ path: "/" });
214 this.$store.dispatch("setToken", null); 222 this.$store.dispatch("setToken", null);
215 this.$store.dispatch("Id", null); 223 this.$store.dispatch("Id", null);
216 } 224 }
217 }); 225 });
218 }, 226 },
219 editItem(item) { 227 editItem(item) {
220 this.editedIndex = this.getRole.indexOf(item); 228 this.editedIndex = this.getRole.indexOf(item);
221 this.editedItem = Object.assign({}, item); 229 this.editedItem = Object.assign({}, item);
222 this.dialog = true; 230 this.dialog = true;
223 }, 231 },
224 deleteItem(item) { 232 deleteItem(item) {
225 let deleteRoleId = { 233 let deleteRoleId = {
226 roleId: item._id 234 roleId: item._id
227 }; 235 };
228 http() 236 http()
229 .delete( 237 .delete(
230 "/deleteRole", 238 "/deleteRole",
231 confirm("Are you sure you want to delete this?") && { 239 confirm("Are you sure you want to delete this?") && {
232 params: deleteRoleId 240 params: deleteRoleId
233 }, 241 },
234 { 242 {
235 headers: { 243 headers: {
236 Authorization: "Bearer " + this.token 244 Authorization: "Bearer " + this.token
237 } 245 }
238 } 246 }
239 ) 247 )
240 .then(response => { 248 .then(response => {
241 this.text = response.data.message; 249 this.text = response.data.message;
242 this.getRole(); 250 this.getRole();
243 }) 251 })
244 .catch(error => { 252 .catch(error => {
245 console.log(error); 253 console.log(error);
246 }); 254 });
247 }, 255 },
248 activeTab(type) { 256 activeTab(type) {
249 switch (type) { 257 switch (type) {
250 case "existing": 258 case "existing":
251 this.newActive = false; 259 this.newActive = false;
252 this.isActive = true; 260 this.isActive = true;
253 break; 261 break;
254 262
255 default: 263 default:
256 this.newActive = true; 264 this.newActive = true;
257 this.isActive = false; 265 this.isActive = false;
258 break; 266 break;
259 } 267 }
260 }, 268 },
261 close() { 269 close() {
262 this.dialog = false; 270 this.dialog = false;
263 setTimeout(() => { 271 setTimeout(() => {
264 this.editedItem = Object.assign({}, this.defaultItem); 272 this.editedItem = Object.assign({}, this.defaultItem);
265 this.editedIndex = -1; 273 this.editedIndex = -1;
266 }, 300); 274 }, 300);
267 }, 275 },
268 // close1() { 276 // close1() {
269 // this.dialog1 = false; 277 // this.dialog1 = false;
270 // }, 278 // },
271 submit() { 279 submit() {
272 if (this.$refs.form.validate()) { 280 if (this.$refs.form.validate()) {
273 this.loading = true; 281 this.loading = true;
274 http() 282 http()
275 .post("/createRole", this.addrole) 283 .post("/createRole", this.addrole)
276 .then(response => { 284 .then(response => {
277 this.snackbar = true; 285 this.snackbar = true;
278 this.text = response.data.message; 286 this.text = response.data.message;
279 // this.getRole(); 287 // this.getRole();
280 this.clear(); 288 this.clear();
281 this.loading = false; 289 this.loading = false;
282 }) 290 })
283 .catch(error => { 291 .catch(error => {
284 this.snackbar = true; 292 this.snackbar = true;
285 this.text = error.response.data.message; 293 this.text = error.response.data.message;
286 this.loading = false; 294 this.loading = false;
287 }); 295 });
288 } 296 }
289 }, 297 },
290 clear() { 298 clear() {
291 this.$refs.form.reset(); 299 this.$refs.form.reset();
292 }, 300 },
293 save() { 301 save() {
294 (this.editedItem.roleId = this.editedItem._id), 302 (this.editedItem.roleId = this.editedItem._id),
295 http() 303 http()
296 .put("/updateRole", this.editedItem, { 304 .put("/updateRole", this.editedItem, {
297 headers: { 305 headers: {
298 Authorization: "Bearer " + this.token 306 Authorization: "Bearer " + this.token
299 } 307 }
300 }) 308 })
301 .then(response => { 309 .then(response => {
302 this.text = "Successfully Edit Notification"; 310 this.text = "Successfully Edit Notification";
303 this.getRole(); 311 this.getRole();
304 this.close(); 312 this.close();
305 }) 313 })
306 .catch(error => { 314 .catch(error => {
307 console.log(error); 315 console.log(error);
308 }); 316 });
309 } 317 }
310 }, 318 },
311 mounted() { 319 mounted() {
312 this.token = this.$store.state.token; 320 this.token = this.$store.state.token;
313 this.getRole(); 321 this.getRole();
314 }, 322 },
315 created() { 323 created() {
316 this.$root.$on("app:search", search => { 324 this.$root.$on("app:search", search => {
317 this.search = search; 325 this.search = search;
318 }); 326 });
319 }, 327 },
320 beforeDestroy() { 328 beforeDestroy() {
321 // dont forget to remove the listener 329 // dont forget to remove the listener
322 this.$root.$off("app:search"); 330 this.$root.$off("app:search");
323 } 331 }
324 }; 332 };
325 </script> 333 </script>
326 <style scoped> 334 <style scoped>
327 #tabeleData { 335 #tabeleData {
328 border: 1px solid #dddddd; 336 border: 1px solid #dddddd;
329 text-align: left; 337 text-align: left;
330 padding: 8px 0px; 338 padding: 8px 0px;
331 max-width: 200px !important; 339 max-width: 200px !important;
332 } 340 }
333 .active { 341 .active {
334 background-color: gray; 342 background-color: gray;
335 color: white !important; 343 color: white !important;
336 } 344 }
337 .activebtn { 345 .activebtn {
338 color: black !important; 346 color: black !important;
339 } 347 }
340 </style> 348 </style>
src/pages/Administrator/systemAdmin.vue
Diff comments   View file @495e403
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 System Admin</v-tab> 10 >Existing System Admin</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 System Admin</v-tab> 18 >Add New System Admin</v-tab>
19 <!-- ****** EDIT System Admin DETAILS ****** --> 19 <!-- ****** EDIT System Admin 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 System Admin Profile</v-toolbar-title> 33 <v-toolbar-title>Edit System Admin 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: 800px;"> 36 <v-card-text style="height: 800px;">
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 sm4 class="pt-4 subheading"> 67 <v-flex xs4 sm4 class="pt-4 subheading">
68 <label class="right hidden-xs-only hidden-sm-only">Full Name:</label> 68 <label class="right hidden-xs-only hidden-sm-only">Full Name:</label>
69 <label class="right hidden-lg-only hidden-md-only hidden-xl-only">Name:</label> 69 <label class="right hidden-lg-only hidden-md-only hidden-xl-only">Name:</label>
70 </v-flex> 70 </v-flex>
71 <v-flex xs8 sm6 class="ml-3"> 71 <v-flex xs8 sm6 class="ml-3">
72 <v-text-field 72 <v-text-field
73 v-model="editedItem.name" 73 v-model="editedItem.name"
74 placeholder="fill your full Name" 74 placeholder="fill your full 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 sm4 class="pt-4 subheading"> 83 <v-flex xs4 sm4 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 sm6 class="ml-3"> 86 <v-flex xs8 sm6 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 required 91 required
92 ></v-text-field> 92 ></v-text-field>
93 </v-flex> 93 </v-flex>
94 </v-layout> 94 </v-layout>
95 </v-flex> 95 </v-flex>
96 </v-layout> 96 </v-layout>
97 <v-layout wrap> 97 <v-layout wrap>
98 <v-flex xs12 sm6> 98 <v-flex xs12 sm6>
99 <v-layout> 99 <v-layout>
100 <v-flex xs4 sm4 class="pt-4 subheading"> 100 <v-flex xs4 sm4 class="pt-4 subheading">
101 <label class="right hidden-sm-only hidden-xs-only">Date of Birth:</label> 101 <label class="right hidden-sm-only hidden-xs-only">Date of Birth:</label>
102 <label class="right hidden-lg-only hidden-xl-only hidden-md-only">D.O.B:</label> 102 <label class="right hidden-lg-only hidden-xl-only hidden-md-only">D.O.B:</label>
103 </v-flex> 103 </v-flex>
104 <v-flex xs8 sm6 class="ml-3"> 104 <v-flex xs8 sm6 class="ml-3">
105 <v-menu 105 <v-menu
106 ref="menu" 106 ref="menu"
107 :close-on-content-click="false" 107 :close-on-content-click="false"
108 v-model="menu2" 108 v-model="menu2"
109 :nudge-right="40" 109 :nudge-right="40"
110 lazy 110 lazy
111 transition="scale-transition" 111 transition="scale-transition"
112 offset-y 112 offset-y
113 full-width 113 full-width
114 min-width="290px" 114 min-width="290px"
115 > 115 >
116 <v-text-field 116 <v-text-field
117 slot="activator" 117 slot="activator"
118 v-model="editedItem.dob" 118 v-model="editedItem.dob"
119 placeholder="Select date" 119 placeholder="Select date"
120 ></v-text-field> 120 ></v-text-field>
121 <v-date-picker 121 <v-date-picker
122 ref="picker" 122 ref="picker"
123 v-model="editedItem.dob" 123 v-model="editedItem.dob"
124 :max="new Date().toISOString().substr(0, 10)" 124 :max="new Date().toISOString().substr(0, 10)"
125 min="1950-01-01" 125 min="1950-01-01"
126 @input="menu2 = false" 126 @input="menu2 = false"
127 ></v-date-picker> 127 ></v-date-picker>
128 </v-menu> 128 </v-menu>
129 </v-flex> 129 </v-flex>
130 </v-layout> 130 </v-layout>
131 </v-flex> 131 </v-flex>
132 <v-flex xs12 sm6> 132 <v-flex xs12 sm6>
133 <v-layout> 133 <v-layout>
134 <v-flex xs4 class="pt-4 subheading"> 134 <v-flex xs4 class="pt-4 subheading">
135 <label class="right">City:</label> 135 <label class="right">City:</label>
136 </v-flex> 136 </v-flex>
137 <v-flex xs8 sm6 class="ml-3"> 137 <v-flex xs8 sm6 class="ml-3">
138 <v-text-field 138 <v-text-field
139 v-model="editedItem.city" 139 v-model="editedItem.city"
140 placeholder="fill your City Name" 140 placeholder="fill your City Name"
141 type="text" 141 type="text"
142 required 142 required
143 ></v-text-field> 143 ></v-text-field>
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 xs4 class="pt-4 subheading"> 151 <v-flex xs4 class="pt-4 subheading">
152 <label class="right">State:</label> 152 <label class="right">State:</label>
153 </v-flex> 153 </v-flex>
154 <v-flex xs8 sm6 class="ml-3"> 154 <v-flex xs8 sm6 class="ml-3">
155 <v-text-field 155 <v-text-field
156 v-model="editedItem.state" 156 v-model="editedItem.state"
157 placeholder="fill your State Name" 157 placeholder="fill your State Name"
158 type="text" 158 type="text"
159 required 159 required
160 ></v-text-field> 160 ></v-text-field>
161 </v-flex> 161 </v-flex>
162 </v-layout> 162 </v-layout>
163 </v-flex> 163 </v-flex>
164 <v-flex xs12 sm6> 164 <v-flex xs12 sm6>
165 <v-layout> 165 <v-layout>
166 <v-flex xs4 class="pt-4 subheading"> 166 <v-flex xs4 class="pt-4 subheading">
167 <label class="right">PinCode:</label> 167 <label class="right">PinCode:</label>
168 </v-flex> 168 </v-flex>
169 <v-flex xs8 sm6 class="ml-3"> 169 <v-flex xs8 sm6 class="ml-3">
170 <v-text-field 170 <v-text-field
171 v-model="editedItem.pincode" 171 v-model="editedItem.pincode"
172 placeholder="fill your pincode" 172 placeholder="fill your pincode"
173 type="number" 173 type="number"
174 required 174 required
175 ></v-text-field> 175 ></v-text-field>
176 </v-flex> 176 </v-flex>
177 </v-layout> 177 </v-layout>
178 </v-flex> 178 </v-flex>
179 </v-layout> 179 </v-layout>
180 <v-layout wrap> 180 <v-layout wrap>
181 <v-flex xs12 sm6> 181 <v-flex xs12 sm6>
182 <v-layout> 182 <v-layout>
183 <v-flex xs4 class="pt-4 subheading"> 183 <v-flex xs4 class="pt-4 subheading">
184 <label class="right hidden-xs-only hidden-sm-only">Mobile No:</label> 184 <label class="right hidden-xs-only hidden-sm-only">Mobile No:</label>
185 <label class="right hidden-lg-only hidden-md-only hidden-xl-only">Mobile:</label> 185 <label class="right hidden-lg-only hidden-md-only hidden-xl-only">Mobile:</label>
186 </v-flex> 186 </v-flex>
187 <v-flex xs8 sm6 class="ml-3"> 187 <v-flex xs8 sm6 class="ml-3">
188 <v-text-field 188 <v-text-field
189 v-model="editedItem.mobileNo" 189 v-model="editedItem.mobileNo"
190 placeholder="fill your MobileNo" 190 placeholder="fill your MobileNo"
191 type="number" 191 type="number"
192 required 192 required
193 ></v-text-field> 193 ></v-text-field>
194 </v-flex> 194 </v-flex>
195 </v-layout> 195 </v-layout>
196 </v-flex> 196 </v-flex>
197 <v-flex xs12 sm6> 197 <v-flex xs12 sm6>
198 <v-layout> 198 <v-layout>
199 <v-flex xs4 class="pt-4 subheading"> 199 <v-flex xs4 class="pt-4 subheading">
200 <label class="right hidden-xs-only hidden-sm-only">Select Country:</label> 200 <label class="right hidden-xs-only hidden-sm-only">Select Country:</label>
201 <label class="right hidden-lg-only hidden-md-only hidden-xl-only">Country:</label> 201 <label class="right hidden-lg-only hidden-md-only hidden-xl-only">Country:</label>
202 </v-flex> 202 </v-flex>
203 <v-flex xs8 sm6 class="ml-3"> 203 <v-flex xs8 sm6 class="ml-3">
204 <v-autocomplete 204 <v-autocomplete
205 v-model="editedItem.country" 205 v-model="editedItem.country"
206 :items="countries" 206 :items="countries"
207 placeholder="Select Country Name" 207 placeholder="Select Country Name"
208 required 208 required
209 ></v-autocomplete> 209 ></v-autocomplete>
210 </v-flex> 210 </v-flex>
211 </v-layout> 211 </v-layout>
212 </v-flex> 212 </v-flex>
213 </v-layout> 213 </v-layout>
214 <v-layout wrap> 214 <v-layout wrap>
215 <v-flex xs12 sm6> 215 <v-flex xs12 sm6>
216 <v-layout> 216 <v-layout>
217 <v-flex xs4 class="pt-4 subheading"> 217 <v-flex xs4 class="pt-4 subheading">
218 <label class="right">Join Date:</label> 218 <label class="right">Join Date:</label>
219 </v-flex> 219 </v-flex>
220 <v-flex xs8 sm6 class="ml-3"> 220 <v-flex xs8 sm6 class="ml-3">
221 <v-menu 221 <v-menu
222 ref="menu" 222 ref="menu"
223 :close-on-content-click="false" 223 :close-on-content-click="false"
224 v-model="menu3" 224 v-model="menu3"
225 :nudge-right="40" 225 :nudge-right="40"
226 lazy 226 lazy
227 transition="scale-transition" 227 transition="scale-transition"
228 offset-y 228 offset-y
229 full-width 229 full-width
230 min-width="290px" 230 min-width="290px"
231 > 231 >
232 <v-text-field 232 <v-text-field
233 slot="activator" 233 slot="activator"
234 v-model="editedItem.joinDate" 234 v-model="editedItem.joinDate"
235 placeholder="Select date" 235 placeholder="Select date"
236 ></v-text-field> 236 ></v-text-field>
237 <v-date-picker 237 <v-date-picker
238 ref="picker" 238 ref="picker"
239 v-model="editedItem.joinDate" 239 v-model="editedItem.joinDate"
240 :max="new Date().toISOString().substr(0, 10)" 240 :max="new Date().toISOString().substr(0, 10)"
241 min="1950-01-01" 241 min="1950-01-01"
242 @input="menu3 = false" 242 @input="menu3 = false"
243 ></v-date-picker> 243 ></v-date-picker>
244 </v-menu> 244 </v-menu>
245 </v-flex> 245 </v-flex>
246 </v-layout> 246 </v-layout>
247 </v-flex> 247 </v-flex>
248 <v-flex xs12 sm6> 248 <v-flex xs12 sm6>
249 <v-layout> 249 <v-layout>
250 <v-flex xs4 class="pt-4 subheading"> 250 <v-flex xs4 class="pt-4 subheading">
251 <label class="right hidden-xs-only hidden-sm-only">Uplaod Image:</label> 251 <label class="right hidden-xs-only hidden-sm-only">Uplaod Image:</label>
252 <label class="right hidden-lg-only hidden-md-only hidden-xl-only">Uplaod :</label> 252 <label class="right hidden-lg-only hidden-md-only hidden-xl-only">Uplaod :</label>
253 </v-flex> 253 </v-flex>
254 <v-flex xs8 sm6 class="ml-3"> 254 <v-flex xs8 sm6 class="ml-3">
255 <v-text-field 255 <v-text-field
256 label="Select Image" 256 label="Select Image"
257 @click="pickFile" 257 @click="pickFile"
258 v-model="imageName" 258 v-model="imageName"
259 append-icon="attach_file" 259 append-icon="attach_file"
260 ></v-text-field> 260 ></v-text-field>
261 </v-flex> 261 </v-flex>
262 </v-layout> 262 </v-layout>
263 </v-flex> 263 </v-flex>
264 </v-layout> 264 </v-layout>
265 <v-layout class="hidden-xs-only hidden-sm-only" wrap> 265 <v-layout class="hidden-xs-only hidden-sm-only" wrap>
266 <v-flex xs12 sm12> 266 <v-flex xs12 sm12>
267 <v-layout> 267 <v-layout>
268 <v-flex xs4 sm2 class="pt-4 subheading ml-5"> 268 <v-flex xs4 sm2 class="pt-4 subheading ml-5">
269 <label class="right pr-2">Present Address:</label> 269 <label class="right pr-2">Present Address:</label>
270 </v-flex> 270 </v-flex>
271 <v-flex xs8 sm10> 271 <v-flex xs8 sm10>
272 <v-text-field 272 <v-text-field
273 name="input-4-3" 273 name="input-4-3"
274 v-model="editedItem.presentAddress" 274 v-model="editedItem.presentAddress"
275 placeholder="fill Your present Address" 275 placeholder="fill Your present Address"
276 required 276 required
277 ></v-text-field> 277 ></v-text-field>
278 </v-flex> 278 </v-flex>
279 </v-layout> 279 </v-layout>
280 </v-flex> 280 </v-flex>
281 <v-flex xs12 sm12> 281 <v-flex xs12 sm12>
282 <v-layout> 282 <v-layout>
283 <v-flex xs4 sm2 class="pt-4 subheading ml-5 addressForm"> 283 <v-flex xs4 sm2 class="pt-4 subheading ml-5 addressForm">
284 <label class="pr-2">Permanent Address:</label> 284 <label class="pr-2">Permanent Address:</label>
285 </v-flex> 285 </v-flex>
286 <v-flex xs12 sm10> 286 <v-flex xs12 sm10>
287 <v-text-field 287 <v-text-field
288 name="input-4-3" 288 name="input-4-3"
289 v-model="editedItem.permanentAddress" 289 v-model="editedItem.permanentAddress"
290 placeholder="fill Your Permanent Address" 290 placeholder="fill Your Permanent Address"
291 required 291 required
292 ></v-text-field> 292 ></v-text-field>
293 </v-flex> 293 </v-flex>
294 </v-layout> 294 </v-layout>
295 </v-flex> 295 </v-flex>
296 </v-layout> 296 </v-layout>
297 <v-layout class="hidden-lg-only hidden-md-only hidden-xl-only" wrap> 297 <v-layout class="hidden-lg-only hidden-md-only hidden-xl-only" wrap>
298 <v-flex xs12 sm12> 298 <v-flex xs12 sm12>
299 <v-layout> 299 <v-layout>
300 <v-flex xs12 sm3 class="pt-4 subheading text-xs-center"> 300 <v-flex xs12 sm3 class="pt-4 subheading text-xs-center">
301 <label class>Present Address:</label> 301 <label class>Present Address:</label>
302 </v-flex> 302 </v-flex>
303 </v-layout> 303 </v-layout>
304 <v-layout> 304 <v-layout>
305 <v-flex xs12 sm12> 305 <v-flex xs12 sm12>
306 <v-textarea 306 <v-textarea
307 name="input-4-3" 307 name="input-4-3"
308 v-model="editedItem.presentAddress" 308 v-model="editedItem.presentAddress"
309 placeholder="fill Your present Address" 309 placeholder="fill Your present Address"
310 required 310 required
311 ></v-textarea> 311 ></v-textarea>
312 </v-flex> 312 </v-flex>
313 </v-layout> 313 </v-layout>
314 </v-flex> 314 </v-flex>
315 <v-flex xs12 sm12> 315 <v-flex xs12 sm12>
316 <v-layout> 316 <v-layout>
317 <v-flex xs12 sm3 class="pt-4 pr-4 subheading text-xs-center addressForm"> 317 <v-flex xs12 sm3 class="pt-4 pr-4 subheading text-xs-center addressForm">
318 <label>Permanent Address:</label> 318 <label>Permanent Address:</label>
319 </v-flex> 319 </v-flex>
320 </v-layout> 320 </v-layout>
321 <v-layout> 321 <v-layout>
322 <v-flex xs12 sm12> 322 <v-flex xs12 sm12>
323 <v-textarea 323 <v-textarea
324 name="input-4-3" 324 name="input-4-3"
325 v-model="editedItem.permanentAddress" 325 v-model="editedItem.permanentAddress"
326 placeholder="fill Your Permanent Address" 326 placeholder="fill Your Permanent Address"
327 required 327 required
328 ></v-textarea> 328 ></v-textarea>
329 </v-flex> 329 </v-flex>
330 </v-layout> 330 </v-layout>
331 </v-flex> 331 </v-flex>
332 </v-layout> 332 </v-layout>
333 <v-layout> 333 <v-layout>
334 <v-flex xs12 sm12> 334 <v-flex xs12 sm12>
335 <v-layout> 335 <v-layout>
336 <v-flex xs6> 336 <v-flex xs6>
337 <v-btn round dark @click.native="close">Cancel</v-btn> 337 <v-btn round dark @click.native="close">Cancel</v-btn>
338 </v-flex> 338 </v-flex>
339 <v-flex xs6> 339 <v-flex xs6>
340 <v-btn @click="save" round dark :loading="loading" class="right">Save</v-btn> 340 <v-btn @click="save" round dark :loading="loading" class="right">Save</v-btn>
341 </v-flex> 341 </v-flex>
342 </v-layout> 342 </v-layout>
343 </v-flex> 343 </v-flex>
344 </v-layout> 344 </v-layout>
345 </v-card-text> 345 </v-card-text>
346 </v-card> 346 </v-card>
347 </v-dialog> 347 </v-dialog>
348 348
349 <!-- ****** PROFILE VIEW System Admin DETAILS ****** --> 349 <!-- ****** PROFILE VIEW System Admin DETAILS ****** -->
350 350
351 <v-dialog v-model="dialog1" max-width="600px" scrollable> 351 <v-dialog v-model="dialog1" max-width="600px" scrollable>
352 <v-card> 352 <v-card>
353 <v-toolbar color="grey lighten-2" flat> 353 <v-toolbar color="grey lighten-2" flat>
354 <v-spacer></v-spacer> 354 <v-spacer></v-spacer>
355 <v-toolbar-title> 355 <v-toolbar-title>
356 <h3> System Admin</h3> 356 <h3> System Admin</h3>
357 </v-toolbar-title> 357 </v-toolbar-title>
358 <v-spacer></v-spacer> 358 <v-spacer></v-spacer>
359 <v-icon @click="close1">close</v-icon> 359 <v-icon @click="close1">close</v-icon>
360 </v-toolbar> 360 </v-toolbar>
361 <v-card-text style="height: 700px;"> 361 <v-card-text style="height: 700px;">
362 <v-container grid-list-md> 362 <v-container grid-list-md>
363 <v-layout wrap> 363 <v-layout wrap>
364 <v-flex> 364 <v-flex>
365 <v-flex align-center justify-center layout text-xs-center> 365 <v-flex align-center justify-center layout text-xs-center>
366 <v-avatar size="160px"> 366 <v-avatar size="160px">
367 <img src="/static/icon/user.png" v-if="!editedItem.profilePicUrl" /> 367 <img src="/static/icon/user.png" v-if="!editedItem.profilePicUrl" />
368 <img :src="editedItem.profilePicUrl" v-else-if="editedItem.profilePicUrl" /> 368 <img :src="editedItem.profilePicUrl" v-else-if="editedItem.profilePicUrl" />
369 </v-avatar> 369 </v-avatar>
370 </v-flex> 370 </v-flex>
371 <v-layout> 371 <v-layout>
372 <v-flex xs5 sm6> 372 <v-flex xs5 sm6>
373 <h5 class="right my-1"> 373 <h5 class="right my-1">
374 <b>Full Name:</b> 374 <b>Full Name:</b>
375 </h5> 375 </h5>
376 </v-flex> 376 </v-flex>
377 <v-flex sm6 xs8> 377 <v-flex sm6 xs8>
378 <h5 class="my-1">{{ editedItem.name }}</h5> 378 <h5 class="my-1">{{ editedItem.name }}</h5>
379 </v-flex> 379 </v-flex>
380 </v-layout> 380 </v-layout>
381 <v-layout> 381 <v-layout>
382 <v-flex xs5 sm6> 382 <v-flex xs5 sm6>
383 <h5 class="right my-1"> 383 <h5 class="right my-1">
384 <b>Email:</b> 384 <b>Email:</b>
385 </h5> 385 </h5>
386 </v-flex> 386 </v-flex>
387 <v-flex sm6 xs8> 387 <v-flex sm6 xs8>
388 <h5 class="my-1">{{ editedItem.email }}</h5> 388 <h5 class="my-1">{{ editedItem.email }}</h5>
389 </v-flex> 389 </v-flex>
390 </v-layout> 390 </v-layout>
391 <v-layout> 391 <v-layout>
392 <v-flex xs5 sm6> 392 <v-flex xs5 sm6>
393 <h5 class="right my-1"> 393 <h5 class="right my-1">
394 <b>City:</b> 394 <b>City:</b>
395 </h5> 395 </h5>
396 </v-flex> 396 </v-flex>
397 <v-flex sm6 xs8> 397 <v-flex sm6 xs8>
398 <h5 class="my-1">{{ editedItem.city }}</h5> 398 <h5 class="my-1">{{ editedItem.city }}</h5>
399 </v-flex> 399 </v-flex>
400 </v-layout> 400 </v-layout>
401 <v-layout> 401 <v-layout>
402 <v-flex xs5 sm6> 402 <v-flex xs5 sm6>
403 <h5 class="right my-1"> 403 <h5 class="right my-1">
404 <b>State:</b> 404 <b>State:</b>
405 </h5> 405 </h5>
406 </v-flex> 406 </v-flex>
407 <v-flex sm6 xs8> 407 <v-flex sm6 xs8>
408 <h5 class="my-1">{{ editedItem.state }}</h5> 408 <h5 class="my-1">{{ editedItem.state }}</h5>
409 </v-flex> 409 </v-flex>
410 </v-layout> 410 </v-layout>
411 <v-layout> 411 <v-layout>
412 <v-flex xs5 sm6> 412 <v-flex xs5 sm6>
413 <h5 class="right my-1"> 413 <h5 class="right my-1">
414 <b>Country:</b> 414 <b>Country:</b>
415 </h5> 415 </h5>
416 </v-flex> 416 </v-flex>
417 <v-flex sm6 xs8> 417 <v-flex sm6 xs8>
418 <h5 class="my-1">{{ editedItem.country }}</h5> 418 <h5 class="my-1">{{ editedItem.country }}</h5>
419 </v-flex> 419 </v-flex>
420 </v-layout> 420 </v-layout>
421 <v-layout> 421 <v-layout>
422 <v-flex xs5 sm6> 422 <v-flex xs5 sm6>
423 <h5 class="right my-1"> 423 <h5 class="right my-1">
424 <b>Pincode:</b> 424 <b>Pincode:</b>
425 </h5> 425 </h5>
426 </v-flex> 426 </v-flex>
427 <v-flex sm6 xs8> 427 <v-flex sm6 xs8>
428 <h5 class="my-1">{{ editedItem.pincode }}</h5> 428 <h5 class="my-1">{{ editedItem.pincode }}</h5>
429 </v-flex> 429 </v-flex>
430 </v-layout> 430 </v-layout>
431 <v-layout> 431 <v-layout>
432 <v-flex xs5 sm6> 432 <v-flex xs5 sm6>
433 <h5 class="right my-1"> 433 <h5 class="right my-1">
434 <b>Mobile No:</b> 434 <b>Mobile No:</b>
435 </h5> 435 </h5>
436 </v-flex> 436 </v-flex>
437 <v-flex sm6 xs8> 437 <v-flex sm6 xs8>
438 <h5 class="my-1">{{ editedItem.mobileNo }}</h5> 438 <h5 class="my-1">{{ editedItem.mobileNo }}</h5>
439 </v-flex> 439 </v-flex>
440 </v-layout> 440 </v-layout>
441 <v-layout> 441 <v-layout>
442 <v-flex xs5 sm6> 442 <v-flex xs5 sm6>
443 <h5 class="right my-1"> 443 <h5 class="right my-1">
444 <b>Join Date:</b> 444 <b>Join Date:</b>
445 </h5> 445 </h5>
446 </v-flex> 446 </v-flex>
447 <v-flex sm6 xs8> 447 <v-flex sm6 xs8>
448 <h5 class="my-1">{{ dates(editedItem.joinDate) }}</h5> 448 <h5 class="my-1">{{ dates(editedItem.joinDate) }}</h5>
449 </v-flex> 449 </v-flex>
450 </v-layout> 450 </v-layout>
451 <v-layout> 451 <v-layout>
452 <v-flex xs5 sm6> 452 <v-flex xs5 sm6>
453 <h5 class="right my-1"> 453 <h5 class="right my-1">
454 <b>D.O.B :</b> 454 <b>D.O.B :</b>
455 </h5> 455 </h5>
456 </v-flex> 456 </v-flex>
457 <v-flex sm6 xs8> 457 <v-flex sm6 xs8>
458 <h5 class="my-1">{{ dates(editedItem.dob) }}</h5> 458 <h5 class="my-1">{{ dates(editedItem.dob) }}</h5>
459 </v-flex> 459 </v-flex>
460 </v-layout> 460 </v-layout>
461 <v-layout> 461 <v-layout>
462 <v-flex xs6 sm6> 462 <v-flex xs6 sm6>
463 <h5 class="right my-1"> 463 <h5 class="right my-1">
464 <b>Permanent Address:</b> 464 <b>Permanent Address:</b>
465 </h5> 465 </h5>
466 </v-flex> 466 </v-flex>
467 <v-flex sm6 xs8> 467 <v-flex sm6 xs8>
468 <h5 class="my-1">{{ editedItem.permanentAddress }}</h5> 468 <h5 class="my-1">{{ editedItem.permanentAddress }}</h5>
469 </v-flex> 469 </v-flex>
470 </v-layout> 470 </v-layout>
471 <v-layout> 471 <v-layout>
472 <v-flex xs6 sm6> 472 <v-flex xs6 sm6>
473 <h5 class="right my-1"> 473 <h5 class="right my-1">
474 <b>present Address:</b> 474 <b>present Address:</b>
475 </h5> 475 </h5>
476 </v-flex> 476 </v-flex>
477 <v-flex sm6 xs8> 477 <v-flex sm6 xs8>
478 <h5 class="my-1">{{ editedItem.presentAddress }}</h5> 478 <h5 class="my-1">{{ editedItem.presentAddress }}</h5>
479 </v-flex> 479 </v-flex>
480 </v-layout> 480 </v-layout>
481 </v-flex> 481 </v-flex>
482 </v-layout> 482 </v-layout>
483 </v-container> 483 </v-container>
484 </v-card-text> 484 </v-card-text>
485 </v-card> 485 </v-card>
486 </v-dialog> 486 </v-dialog>
487 <v-snackbar 487 <v-snackbar
488 :timeout="timeout" 488 :timeout="timeout"
489 :top="y === 'top'" 489 :top="y === 'top'"
490 :right="x === 'right'" 490 :right="x === 'right'"
491 :vertical="mode === 'vertical'" 491 :vertical="mode === 'vertical'"
492 v-model="snackbar" 492 v-model="snackbar"
493 color="success" 493 color="success"
494 >{{ text }}</v-snackbar> 494 >{{ text }}</v-snackbar>
495 495
496 <!-- ****** EXISTING System Admin TABLE ****** --> 496 <!-- ****** EXISTING System Admin TABLE ****** -->
497 497
498 <v-data-table 498 <v-data-table
499 :headers="headers" 499 :headers="headers"
500 :items="desserts" 500 :items="desserts"
501 :pagination.sync="pagination" 501 :pagination.sync="pagination"
502 :search="search" 502 :search="search"
503 > 503 >
504 <template slot="items" slot-scope="props"> 504 <template slot="items" slot-scope="props">
505 <td id="td" class="text-xs-center">{{ props.index + 1}}</td> 505 <td id="td" class="text-xs-center">{{ props.index + 1}}</td>
506 <td id="td" class="text-xs-center"> 506 <td id="td" class="text-xs-center">
507 <v-avatar> 507 <v-avatar>
508 <img :src="props.item.profilePicUrl" v-if="props.item.profilePicUrl" /> 508 <img :src="props.item.profilePicUrl" v-if="props.item.profilePicUrl" />
509 <img src="/static/icon/user.png" v-else-if="!props.item.profilePicUrl" /> 509 <img src="/static/icon/user.png" v-else-if="!props.item.profilePicUrl" />
510 </v-avatar> 510 </v-avatar>
511 </td> 511 </td>
512 <td id="td" class="text-xs-center">{{ props.item.name}}</td> 512 <td id="td" class="text-xs-center">{{ props.item.name}}</td>
513 <td id="td" class="text-xs-center">{{ props.item.email }}</td> 513 <td id="td" class="text-xs-center">{{ props.item.email }}</td>
514 <td id="td" class="text-xs-center">{{ props.item.role }}</td> 514 <td id="td" class="text-xs-center">{{ props.item.role }}</td>
515 <td id="td" class="text-xs-center">{{ props.item.status }}</td> 515 <td id="td" class="text-xs-center">{{ props.item.status }}</td>
516 <!-- <td id="td" class="text-xs-center">{{ props.item.mobileNo }}</td> --> 516 <!-- <td id="td" class="text-xs-center">{{ props.item.mobileNo }}</td> -->
517 <td class="text-xs-center"> 517 <td class="text-xs-center">
518 <span> 518 <span>
519 <img 519 <v-tooltip top>
520 style="cursor:pointer; width:25px; height:18px; " 520 <img
521 class="mr-5" 521 slot="activator"
522 @click="profile(props.item)" 522 style="cursor:pointer; width:25px; height:18px; "
523 src="/static/icon/eye1.png" 523 class="mr5"
524 /> 524 @click="profile(props.item)"
525 <img 525 src="/static/icon/eye1.png"
526 style="cursor:pointer; width:20px; height:18px; " 526 />
527 class="mr-5" 527 <span>View</span>
528 @click="editItem(props.item)" 528 </v-tooltip>
529 src="/static/icon/edit1.png" 529 <v-tooltip top>
530 /> 530 <img
531 <img 531 slot="activator"
532 style="cursor:pointer;width:20px; height:20px; " 532 style="cursor:pointer; width:20px; height:18px; "
533 class="mr-5" 533 class="mr5"
534 @click="deleteItem(props.item)" 534 @click="editItem(props.item)"
535 src="/static/icon/delete1.png" 535 src="/static/icon/edit1.png"
536 /> 536 />
537 <span>Edit</span>
538 </v-tooltip>
539 <v-tooltip top>
540 <img
541 slot="activator"
542 style="cursor:pointer; width:20px; height:20px; "
543 class="mr5"
544 @click="deleteItem(props.item)"
545 src="/static/icon/delete1.png"
546 />
547 <span>Delete</span>
548 </v-tooltip>
537 </span> 549 </span>
538 </td> 550 </td>
539 </template> 551 </template>
540 <v-alert 552 <v-alert
541 slot="no-results" 553 slot="no-results"
542 :value="true" 554 :value="true"
543 color="error" 555 color="error"
544 icon="warning" 556 icon="warning"
545 >Your search for "{{ search }}" found no results.</v-alert> 557 >Your search for "{{ search }}" found no results.</v-alert>
546 </v-data-table> 558 </v-data-table>
547 </v-tab-item> 559 </v-tab-item>
548 560
549 <!-- ****** Add System Admin Data****** --> 561 <!-- ****** Add System Admin Data****** -->
550 <v-tab-item> 562 <v-tab-item>
551 <v-container fluid> 563 <v-container fluid>
552 <v-snackbar 564 <v-snackbar
553 :timeout="timeout" 565 :timeout="timeout"
554 :top="y === 'top'" 566 :top="y === 'top'"
555 :right="x === 'right'" 567 :right="x === 'right'"
556 :vertical="mode === 'vertical'" 568 :vertical="mode === 'vertical'"
557 v-model="snackbar" 569 v-model="snackbar"
558 color="success" 570 color="success"
559 >{{ text }}</v-snackbar> 571 >{{ text }}</v-snackbar>
560 <v-flex xs12 sm12 class="my-4"> 572 <v-flex xs12 sm12 class="my-4">
561 <v-card flat> 573 <v-card flat>
562 <v-form ref="form" v-model="valid" lazy-validation> 574 <v-form ref="form" v-model="valid" lazy-validation>
563 <v-container fluid> 575 <v-container fluid>
564 <v-layout> 576 <v-layout>
565 <v-flex 577 <v-flex
566 xs12 578 xs12
567 class="text-xs-center text-sm-center text-md-center text-lg-center my-4" 579 class="text-xs-center text-sm-center text-md-center text-lg-center my-4"
568 > 580 >
569 <v-avatar size="100px"> 581 <v-avatar size="100px">
570 <img src="/static/icon/user.png" v-if="!imageUrl" /> 582 <img src="/static/icon/user.png" v-if="!imageUrl" />
571 </v-avatar> 583 </v-avatar>
572 <img 584 <img
573 :src="imageUrl" 585 :src="imageUrl"
574 height="150" 586 height="150"
575 v-if="imageUrl" 587 v-if="imageUrl"
576 style="border-radius:50%; width:200px" 588 style="border-radius:50%; width:200px"
577 /> 589 />
578 </v-flex> 590 </v-flex>
579 </v-layout> 591 </v-layout>
580 <v-layout> 592 <v-layout>
581 <v-flex xs12 sm6> 593 <v-flex xs12 sm6>
582 <v-layout> 594 <v-layout>
583 <v-flex xs4 class="pt-4 subheading"> 595 <v-flex xs4 class="pt-4 subheading">
584 <label class="right hidden-sm-only hidden-xs-only">Name:</label> 596 <label class="right hidden-sm-only hidden-xs-only">Name:</label>
585 <label 597 <label
586 class="right hidden-lg-only hidden-xl-only hidden-md-only" 598 class="right hidden-lg-only hidden-xl-only hidden-md-only"
587 >Name</label> 599 >Name</label>
588 </v-flex> 600 </v-flex>
589 <v-flex xs8 class="ml-3"> 601 <v-flex xs8 class="ml-3">
590 <v-text-field 602 <v-text-field
591 v-model="addSystemAdmin.name" 603 v-model="addSystemAdmin.name"
592 placeholder="fill your full Name" 604 placeholder="fill your full Name"
593 name="name" 605 name="name"
594 type="text" 606 type="text"
595 :rules="nameRules" 607 :rules="nameRules"
596 required 608 required
597 ></v-text-field> 609 ></v-text-field>
598 </v-flex> 610 </v-flex>
599 </v-layout> 611 </v-layout>
600 </v-flex> 612 </v-flex>
601 <v-flex xs12 sm6> 613 <v-flex xs12 sm6>
602 <v-layout> 614 <v-layout>
603 <v-flex xs4 class="pt-4 subheading"> 615 <v-flex xs4 class="pt-4 subheading">
604 <label class="right">Email ID:</label> 616 <label class="right">Email ID:</label>
605 </v-flex> 617 </v-flex>
606 <v-flex xs8 class="ml-3"> 618 <v-flex xs8 class="ml-3">
607 <v-text-field 619 <v-text-field
608 placeholder="fill your email" 620 placeholder="fill your email"
609 :rules="emailRules" 621 :rules="emailRules"
610 v-model="addSystemAdmin.email" 622 v-model="addSystemAdmin.email"
611 type="text" 623 type="text"
612 name="email" 624 name="email"
613 required 625 required
614 ></v-text-field> 626 ></v-text-field>
615 </v-flex> 627 </v-flex>
616 </v-layout> 628 </v-layout>
617 </v-flex> 629 </v-flex>
618 </v-layout> 630 </v-layout>
619 <v-layout> 631 <v-layout>
620 <v-flex xs12 sm6> 632 <v-flex xs12 sm6>
621 <v-layout> 633 <v-layout>
622 <v-flex xs4 sm4 class="pt-4 subheading"> 634 <v-flex xs4 sm4 class="pt-4 subheading">
623 <label class="right hidden-sm-only hidden-xs-only">Date of Birth:</label> 635 <label class="right hidden-sm-only hidden-xs-only">Date of Birth:</label>
624 <label class="right hidden-lg-only hidden-xl-only hidden-md-only">D.O.B:</label> 636 <label class="right hidden-lg-only hidden-xl-only hidden-md-only">D.O.B:</label>
625 </v-flex> 637 </v-flex>
626 <v-flex xs8 class="ml-3"> 638 <v-flex xs8 class="ml-3">
627 <v-menu 639 <v-menu
628 ref="menu" 640 ref="menu"
629 :close-on-content-click="false" 641 :close-on-content-click="false"
630 v-model="menu" 642 v-model="menu"
631 :nudge-right="40" 643 :nudge-right="40"
632 lazy 644 lazy
633 transition="scale-transition" 645 transition="scale-transition"
634 offset-y 646 offset-y
635 full-width 647 full-width
636 min-width="290px" 648 min-width="290px"
637 > 649 >
638 <v-text-field 650 <v-text-field
639 slot="activator" 651 slot="activator"
640 :rules="dateRules" 652 :rules="dateRules"
641 v-model="addSystemAdmin.date" 653 v-model="addSystemAdmin.date"
642 placeholder="Select date" 654 placeholder="Select date"
643 ></v-text-field> 655 ></v-text-field>
644 <v-date-picker 656 <v-date-picker
645 ref="picker" 657 ref="picker"
646 v-model="addSystemAdmin.date" 658 v-model="addSystemAdmin.date"
647 :max="new Date().toISOString().substr(0, 10)" 659 :max="new Date().toISOString().substr(0, 10)"
648 min="1950-01-01" 660 min="1950-01-01"
649 @input="menu = false" 661 @input="menu = false"
650 ></v-date-picker> 662 ></v-date-picker>
651 </v-menu> 663 </v-menu>
652 </v-flex> 664 </v-flex>
653 </v-layout> 665 </v-layout>
654 </v-flex> 666 </v-flex>
655 <v-flex xs12 sm6> 667 <v-flex xs12 sm6>
656 <v-layout> 668 <v-layout>
657 <v-flex xs4 class="pt-4 subheading"> 669 <v-flex xs4 class="pt-4 subheading">
658 <label class="right">Gender:</label> 670 <label class="right">Gender:</label>
659 </v-flex> 671 </v-flex>
660 <v-flex xs8 class="ml-3"> 672 <v-flex xs8 class="ml-3">
661 <v-select 673 <v-select
662 v-model="addSystemAdmin.gender" 674 v-model="addSystemAdmin.gender"
663 :items="gender" 675 :items="gender"
664 label="Select your City Name" 676 label="Select your City Name"
665 :rules="cityRules" 677 :rules="cityRules"
666 required 678 required
667 ></v-select> 679 ></v-select>
668 </v-flex> 680 </v-flex>
669 </v-layout> 681 </v-layout>
670 </v-flex> 682 </v-flex>
671 </v-layout> 683 </v-layout>
672 <v-layout> 684 <v-layout>
673 <v-flex xs12 sm6> 685 <v-flex xs12 sm6>
674 <v-layout> 686 <v-layout>
675 <v-flex xs4 class="pt-4 subheading"> 687 <v-flex xs4 class="pt-4 subheading">
676 <label class="right hidden-xs-only hidden-sm-only">Mobile No:</label> 688 <label class="right hidden-xs-only hidden-sm-only">Mobile No:</label>
677 <label class="right hidden-lg-only hidden-md-only hidden-xl-only">Mobile:</label> 689 <label class="right hidden-lg-only hidden-md-only hidden-xl-only">Mobile:</label>
678 </v-flex> 690 </v-flex>
679 <v-flex xs8 class="ml-3"> 691 <v-flex xs8 class="ml-3">
680 <v-text-field 692 <v-text-field
681 v-model="addSystemAdmin.mobileNo" 693 v-model="addSystemAdmin.mobileNo"
682 placeholder="fill your Mobile No." 694 placeholder="fill your Mobile No."
683 name="mobileNo" 695 name="mobileNo"
684 type="number" 696 type="number"
685 :rules="mobileNoRules" 697 :rules="mobileNoRules"
686 required 698 required
687 ></v-text-field> 699 ></v-text-field>
688 </v-flex> 700 </v-flex>
689 </v-layout> 701 </v-layout>
690 </v-flex> 702 </v-flex>
691 <v-flex xs12 sm6> 703 <v-flex xs12 sm6>
692 <v-layout> 704 <v-layout>
693 <v-flex xs4 class="pt-4 subheading"> 705 <v-flex xs4 class="pt-4 subheading">
694 <label class="right hidden-xs-only hidden-sm-only">Religion:</label> 706 <label class="right hidden-xs-only hidden-sm-only">Religion:</label>
695 <label class="right hidden-lg-only hidden-md-only hidden-xl-only">Religion:</label> 707 <label class="right hidden-lg-only hidden-md-only hidden-xl-only">Religion:</label>
696 </v-flex> 708 </v-flex>
697 <v-flex xs8 class="ml-3"> 709 <v-flex xs8 class="ml-3">
698 <v-text-field 710 <v-text-field
699 v-model="addSystemAdmin.religion" 711 v-model="addSystemAdmin.religion"
700 :rules="religion" 712 :rules="religion"
701 placeholder="fill your Religion" 713 placeholder="fill your Religion"
702 required 714 required
703 ></v-text-field> 715 ></v-text-field>
704 </v-flex> 716 </v-flex>
705 </v-layout> 717 </v-layout>
706 </v-flex> 718 </v-flex>
707 </v-layout> 719 </v-layout>
708 <v-layout> 720 <v-layout>
709 <v-flex xs12 sm6> 721 <v-flex xs12 sm6>
710 <v-layout> 722 <v-layout>
711 <v-flex xs4 class="pt-4 subheading"> 723 <v-flex xs4 class="pt-4 subheading">
712 <label class="right">Join Date:</label> 724 <label class="right">Join Date:</label>
713 </v-flex> 725 </v-flex>
714 <v-flex xs8 class="ml-3"> 726 <v-flex xs8 class="ml-3">
715 <v-menu 727 <v-menu
716 ref="menu1" 728 ref="menu1"
717 :close-on-content-click="false" 729 :close-on-content-click="false"
718 v-model="menu1" 730 v-model="menu1"
719 :nudge-right="40" 731 :nudge-right="40"
720 lazy 732 lazy
721 transition="scale-transition" 733 transition="scale-transition"
722 offset-y 734 offset-y
723 full-width 735 full-width
724 min-width="290px" 736 min-width="290px"
725 > 737 >
726 <v-text-field 738 <v-text-field
727 slot="activator" 739 slot="activator"
728 :rules="joinDateRules" 740 :rules="joinDateRules"
729 v-model="addSystemAdmin.joinDate" 741 v-model="addSystemAdmin.joinDate"
730 placeholder="Select date" 742 placeholder="Select date"
731 ></v-text-field> 743 ></v-text-field>
732 <v-date-picker 744 <v-date-picker
733 ref="picker" 745 ref="picker"
734 v-model="addSystemAdmin.joinDate" 746 v-model="addSystemAdmin.joinDate"
735 :max="new Date().toISOString().substr(0, 10)" 747 :max="new Date().toISOString().substr(0, 10)"
736 min="1950-01-01" 748 min="1950-01-01"
737 @input="menu1 = false" 749 @input="menu1 = false"
738 ></v-date-picker> 750 ></v-date-picker>
739 </v-menu> 751 </v-menu>
740 </v-flex> 752 </v-flex>
741 </v-layout> 753 </v-layout>
742 </v-flex> 754 </v-flex>
743 <v-flex xs12 sm6> 755 <v-flex xs12 sm6>
744 <v-layout> 756 <v-layout>
745 <v-flex xs4 class="pt-4 subheading"> 757 <v-flex xs4 class="pt-4 subheading">
746 <label class="right hidden-xs-only hidden-sm-only">Uplaod Image:</label> 758 <label class="right hidden-xs-only hidden-sm-only">Uplaod Image:</label>
747 <label class="right hidden-lg-only hidden-md-only hidden-xl-only">Uplaod:</label> 759 <label class="right hidden-lg-only hidden-md-only hidden-xl-only">Uplaod:</label>
748 </v-flex> 760 </v-flex>
749 <v-flex xs8 class="ml-3"> 761 <v-flex xs8 class="ml-3">
750 <v-text-field 762 <v-text-field
751 label="Select Image" 763 label="Select Image"
752 @click="pickFile" 764 @click="pickFile"
753 v-model="imageName" 765 v-model="imageName"
754 append-icon="attach_file" 766 append-icon="attach_file"
755 ></v-text-field> 767 ></v-text-field>
756 <input 768 <input
757 type="file" 769 type="file"
758 style="display:none" 770 style="display:none"
759 ref="image" 771 ref="image"
760 accept="image/*" 772 accept="image/*"
761 @change="onFilePicked" 773 @change="onFilePicked"
762 /> 774 />
763 </v-flex> 775 </v-flex>
764 </v-layout> 776 </v-layout>
765 </v-flex> 777 </v-flex>
766 </v-layout> 778 </v-layout>
767 <v-layout> 779 <v-layout>
768 <v-flex xs12 sm6> 780 <v-flex xs12 sm6>
769 <v-layout> 781 <v-layout>
770 <v-flex xs4 class="pt-4 subheading"> 782 <v-flex xs4 class="pt-4 subheading">
771 <label class="right">Username:</label> 783 <label class="right">Username:</label>
772 </v-flex> 784 </v-flex>
773 <v-flex xs8 class="ml-3"> 785 <v-flex xs8 class="ml-3">
774 <v-text-field 786 <v-text-field
775 v-model="addSystemAdmin.username" 787 v-model="addSystemAdmin.username"
776 placeholder="fill your Username" 788 placeholder="fill your Username"
777 name="state" 789 name="state"
778 :rules="userNameRules" 790 :rules="userNameRules"
779 required 791 required
780 ></v-text-field> 792 ></v-text-field>
781 </v-flex> 793 </v-flex>
782 </v-layout> 794 </v-layout>
783 </v-flex> 795 </v-flex>
784 <v-flex xs12 sm6> 796 <v-flex xs12 sm6>
785 <v-layout> 797 <v-layout>
786 <v-flex xs4 class="pt-4 subheading"> 798 <v-flex xs4 class="pt-4 subheading">
787 <label class="right">Password:</label> 799 <label class="right">Password:</label>
788 </v-flex> 800 </v-flex>
789 <v-flex xs8 class="ml-3"> 801 <v-flex xs8 class="ml-3">
790 <v-text-field 802 <v-text-field
791 v-model="addSystemAdmin.Password" 803 v-model="addSystemAdmin.Password"
792 placeholder="fill your Password" 804 placeholder="fill your Password"
793 :rules="password" 805 :rules="password"
794 required 806 required
795 ></v-text-field> 807 ></v-text-field>
796 </v-flex> 808 </v-flex>
797 </v-layout> 809 </v-layout>
798 </v-flex> 810 </v-flex>
799 </v-layout> 811 </v-layout>
800 <v-layout class="hidden-xs-only hidden-sm-only"> 812 <v-layout class="hidden-xs-only hidden-sm-only">
801 <v-flex xs12 sm6> 813 <v-flex xs12 sm6>
802 <v-layout> 814 <v-layout>
803 <v-flex xs4 md4 class="pt-4 subheading"> 815 <v-flex xs4 md4 class="pt-4 subheading">
804 <label class="right">Address:</label> 816 <label class="right">Address:</label>
805 </v-flex> 817 </v-flex>
806 <v-flex xs8 md8 class="ml-3"> 818 <v-flex xs8 md8 class="ml-3">
807 <v-text-field 819 <v-text-field
808 name="input-4-3" 820 name="input-4-3"
809 v-model="addSystemAdmin.address" 821 v-model="addSystemAdmin.address"
810 :rules="address" 822 :rules="address"
811 placeholder="fill Your Address" 823 placeholder="fill Your Address"
812 required 824 required
813 ></v-text-field> 825 ></v-text-field>
814 </v-flex> 826 </v-flex>
815 </v-layout> 827 </v-layout>
816 </v-flex> 828 </v-flex>
817 </v-layout> 829 </v-layout>
818 <v-layout class="hidden-lg-only hidden-md-only hidden-xl-only"> 830 <v-layout class="hidden-lg-only hidden-md-only hidden-xl-only">
819 <v-flex xs12 sm12> 831 <v-flex xs12 sm12>
820 <v-layout> 832 <v-layout>
821 <v-flex xs12 sm12 class="pt-4 subheading text-xs-center"> 833 <v-flex xs12 sm12 class="pt-4 subheading text-xs-center">
822 <label class>Addres:</label> 834 <label class>Addres:</label>
823 </v-flex> 835 </v-flex>
824 </v-layout> 836 </v-layout>
825 <v-layout> 837 <v-layout>
826 <v-flex xs12 sm12> 838 <v-flex xs12 sm12>
827 <v-textarea 839 <v-textarea
828 name="input-4-3" 840 name="input-4-3"
829 v-model="addSystemAdmin.address" 841 v-model="addSystemAdmin.address"
830 :rules="address" 842 :rules="address"
831 placeholder="fill Your present Address" 843 placeholder="fill Your present Address"
832 required 844 required
833 ></v-textarea> 845 ></v-textarea>
834 </v-flex> 846 </v-flex>
835 </v-layout> 847 </v-layout>
836 </v-flex> 848 </v-flex>
837 <!-- <v-flex xs12 sm12> 849 <!-- <v-flex xs12 sm12>
838 <v-layout> 850 <v-layout>
839 <v-flex xs12 sm12 class="pt-4 pr-4 subheading text-xs-center addressForm"> 851 <v-flex xs12 sm12 class="pt-4 pr-4 subheading text-xs-center addressForm">
840 <label>Permanent Address:</label> 852 <label>Permanent Address:</label>
841 </v-flex> 853 </v-flex>
842 </v-layout> 854 </v-layout>
843 <v-layout> 855 <v-layout>
844 <v-flex xs12 sm12> 856 <v-flex xs12 sm12>
845 <v-textarea 857 <v-textarea
846 name="input-4-3" 858 name="input-4-3"
847 v-model="addSystemAdmin.permanentAddress" 859 v-model="addSystemAdmin.permanentAddress"
848 :rules="permanentAddress" 860 :rules="permanentAddress"
849 placeholder="fill Your Permanent Address" 861 placeholder="fill Your Permanent Address"
850 required 862 required
851 ></v-textarea> 863 ></v-textarea>
852 </v-flex> 864 </v-flex>
853 </v-layout> 865 </v-layout>
854 </v-flex> --> 866 </v-flex> -->
855 </v-layout> 867 </v-layout>
856 <v-layout class="mx-2"> 868 <v-layout class="mx-2">
857 <v-flex xs12 sm12> 869 <v-flex xs12 sm12 offset-sm1>
858 <v-layout> 870 <v-layout>
859 <v-flex xs6> 871 <v-flex xs6>
860 <v-btn @click="clear" round dark>clear</v-btn> 872 <v-btn @click="clear" round dark>clear</v-btn>
861 </v-flex> 873 </v-flex>
862 <v-flex xs6> 874 <v-flex xs6>
863 <v-btn @click="submit" round dark :loading="loading" class="right">Add</v-btn> 875 <v-btn @click="submit" round dark :loading="loading" class="right">Add</v-btn>
864 </v-flex> 876 </v-flex>
865 </v-layout> 877 </v-layout>
866 </v-flex> 878 </v-flex>
867 </v-layout> 879 </v-layout>
868 </v-container> 880 </v-container>
869 </v-form> 881 </v-form>
870 </v-card> 882 </v-card>
871 </v-flex> 883 </v-flex>
872 </v-container> 884 </v-container>
873 </v-tab-item> 885 </v-tab-item>
874 </v-tabs> 886 </v-tabs>
875 <div class="loader" v-if="showLoader"> 887 <div class="loader" v-if="showLoader">
876 <v-progress-circular indeterminate color="white"></v-progress-circular> 888 <v-progress-circular indeterminate color="white"></v-progress-circular>
877 </div> 889 </div>
878 </v-app> 890 </v-app>
879 </template> 891 </template>
880 892
881 <script> 893 <script>
882 import http from "@/Services/http.js"; 894 import http from "@/Services/http.js";
883 import moment from "moment"; 895 import moment from "moment";
884 896
885 export default { 897 export default {
886 data: () => ({ 898 data: () => ({
887 component: "report-generate", 899 component: "report-generate",
888 snackbar: false, 900 snackbar: false,
889 y: "top", 901 y: "top",
890 x: "right", 902 x: "right",
891 mode: "", 903 mode: "",
892 timeout: 3000, 904 timeout: 3000,
893 text: "", 905 text: "",
894 showLoader: false, 906 showLoader: false,
895 loading: false, 907 loading: false,
896 date: null, 908 date: null,
897 search: "", 909 search: "",
898 menu: false, 910 menu: false,
899 menu1: false, 911 menu1: false,
900 menu2: false, 912 menu2: false,
901 menu3: false, 913 menu3: false,
902 dialog: false, 914 dialog: false,
903 dialog1: false, 915 dialog1: false,
904 valid: true, 916 valid: true,
905 isActive: true, 917 isActive: true,
906 newActive: false, 918 newActive: false,
907 pagination: { 919 pagination: {
908 rowsPerPage: 15 920 rowsPerPage: 15
909 }, 921 },
910 imageData: {}, 922 imageData: {},
911 imageName: "", 923 imageName: "",
912 imageUrl: "", 924 imageUrl: "",
913 imageFile: "", 925 imageFile: "",
914 nameRules: [v => !!v || " Full Name is required"], 926 nameRules: [v => !!v || " Full Name is required"],
915 dateRules: [v => !!v || " DOB is required"], 927 dateRules: [v => !!v || " DOB is required"],
916 cityRules: [v => !!v || " City Name is required"], 928 cityRules: [v => !!v || " City Name is required"],
917 password: [v => !!v || " Password is required"], 929 password: [v => !!v || " Password is required"],
918 religion: [v => !!v || "Religion Name is required"], 930 religion: [v => !!v || "Religion Name is required"],
919 permanentAddress: [v => !!v || " Permanent Address is required"], 931 permanentAddress: [v => !!v || " Permanent Address is required"],
920 address: [v => !!v || "Address is required"], 932 address: [v => !!v || "Address is required"],
921 mobileNoRules: [v => !!v || "Mobile Number is required"], 933 mobileNoRules: [v => !!v || "Mobile Number is required"],
922 userNameRules: [v => !!v || "Username Name is required"], 934 userNameRules: [v => !!v || "Username Name is required"],
923 joinDateRules: [v => !!v || " Join Date is required"], 935 joinDateRules: [v => !!v || " Join Date is required"],
924 errorMessages: "", 936 errorMessages: "",
925 emailRules: [ 937 emailRules: [
926 v => !!v || "E-mail is required", 938 v => !!v || "E-mail is required",
927 v => 939 v =>
928 /^\w+([.-]?\w+)*@\w+([.-]?\w+)*(\.\w{2,3})+$/.test(v) || 940 /^\w+([.-]?\w+)*@\w+([.-]?\w+)*(\.\w{2,3})+$/.test(v) ||
929 "E-mail must be valid" 941 "E-mail must be valid"
930 ], 942 ],
931 countries: [], 943 countries: [],
932 headers: [ 944 headers: [
933 { 945 {
934 text: "No", 946 text: "No",
935 align: "center", 947 align: "center",
936 sortable: false, 948 sortable: false,
937 value: "No" 949 value: "No"
938 }, 950 },
939 { 951 {
940 text: "Profile Pic", 952 text: "Profile Pic",
941 value: "profilePicUrl", 953 value: "profilePicUrl",
942 sortable: false, 954 sortable: false,
943 align: "center" 955 align: "center"
944 }, 956 },
945 { text: "Name", value: "name", sortable: false, align: "center" }, 957 { text: "Name", value: "name", sortable: false, align: "center" },
946 { text: "Email", value: "email", sortable: false, align: "center" }, 958 { text: "Email", value: "email", sortable: false, align: "center" },
947 { text: "Role", value: "role", sortable: false, align: "center" }, 959 { text: "Role", value: "role", sortable: false, align: "center" },
948 { 960 {
949 text: "Status", 961 text: "Status",
950 value: "status", 962 value: "status",
951 sortable: false, 963 sortable: false,
952 align: "center" 964 align: "center"
953 }, 965 },
954 { text: "Action", value: "", sortable: false, align: "center" } 966 { text: "Action", value: "", sortable: false, align: "center" }
955 ], 967 ],
956 gender:['Male','Female'], 968 gender:['Male','Female'],
957 desserts: [], 969 desserts: [],
958 editedIndex: -1, 970 editedIndex: -1,
959 upload: "", 971 upload: "",
960 editedItem: {}, 972 editedItem: {},
961 addSystemAdmin: {}, 973 addSystemAdmin: {},
962 }), 974 }),
963 watch: { 975 watch: {
964 menu(val) { 976 menu(val) {
965 val && this.$nextTick(() => (this.$refs.picker.activePicker = "YEAR")); 977 val && this.$nextTick(() => (this.$refs.picker.activePicker = "YEAR"));
966 }, 978 },
967 menu1(val) { 979 menu1(val) {
968 val && this.$nextTick(() => (this.$refs.picker.activePicker = "YEAR")); 980 val && this.$nextTick(() => (this.$refs.picker.activePicker = "YEAR"));
969 } 981 }
970 }, 982 },
971 methods: { 983 methods: {
972 save(date) { 984 save(date) {
973 this.$refs.menu.save(date); 985 this.$refs.menu.save(date);
974 }, 986 },
975 save(date) { 987 save(date) {
976 this.$refs.menu1.save(date); 988 this.$refs.menu1.save(date);
977 }, 989 },
978 pickFile() { 990 pickFile() {
979 this.$refs.image.click(); 991 this.$refs.image.click();
980 }, 992 },
981 onFilePicked(e) { 993 onFilePicked(e) {
982 // console.log(e) 994 // console.log(e)
983 const files = e.target.files; 995 const files = e.target.files;
984 this.upload = e.target.files[0]; 996 this.upload = e.target.files[0];
985 console.log("imageData-upload========>", this.upload); 997 console.log("imageData-upload========>", this.upload);
986 if (files[0] !== undefined) { 998 if (files[0] !== undefined) {
987 this.imageName = files[0].name; 999 this.imageName = files[0].name;
988 if (this.imageName.lastIndexOf(".") <= 0) { 1000 if (this.imageName.lastIndexOf(".") <= 0) {
989 return; 1001 return;
990 } 1002 }
991 const fr = new FileReader(); 1003 const fr = new FileReader();
992 fr.readAsDataURL(files[0]); 1004 fr.readAsDataURL(files[0]);
993 fr.addEventListener("load", () => { 1005 fr.addEventListener("load", () => {
994 this.imageUrl = fr.result; 1006 this.imageUrl = fr.result;
995 this.imageFile = files[0]; // this is an image file that can be sent to server... 1007 this.imageFile = files[0]; // this is an image file that can be sent to server...
996 // this.imageData.imageUrl = URL.createObjectURL(this.imageFile); 1008 // this.imageData.imageUrl = URL.createObjectURL(this.imageFile);
997 // console.log("upload=======>", this.imageData.imageUrl); 1009 // console.log("upload=======>", this.imageData.imageUrl);
998 console.log("imageFile", this.imageUrl); 1010 console.log("imageFile", this.imageUrl);
999 }); 1011 });
1000 } else { 1012 } else {
1001 this.imageName = ""; 1013 this.imageName = "";
1002 this.imageFile = ""; 1014 this.imageFile = "";
1003 this.imageUrl = ""; 1015 this.imageUrl = "";
1004 } 1016 }
1005 }, 1017 },
1006 dates: function(date) { 1018 dates: function(date) {
1007 return moment(date).format("MMMM DD, YYYY"); 1019 return moment(date).format("MMMM DD, YYYY");
1008 }, 1020 },
1009 getSystemAdminList() { 1021 getSystemAdminList() {
1010 this.showLoader = true; 1022 this.showLoader = true;
1011 var token = this.$store.state.token; 1023 var token = this.$store.state.token;
1012 http() 1024 http()
1013 .get("/getTeachersList", { 1025 .get("/getTeachersList", {
1014 headers: { Authorization: "Bearer " + token } 1026 headers: { Authorization: "Bearer " + token }
1015 }) 1027 })
1016 .then(response => { 1028 .then(response => {
1017 this.desserts = response.data.data; 1029 this.desserts = response.data.data;
1018 this.showLoader = false; 1030 this.showLoader = false;
1019 // console.log("getTeacherList=====>",this.desserts) 1031 // console.log("getTeacherList=====>",this.desserts)
1020 }) 1032 })
1021 .catch(error => { 1033 .catch(error => {
1022 this.showLoader = false; 1034 this.showLoader = false;
1023 if (error.response.status === 401) { 1035 if (error.response.status === 401) {
1024 this.$router.replace({ path: "/" }); 1036 this.$router.replace({ path: "/" });
1025 this.$store.dispatch("setToken", null); 1037 this.$store.dispatch("setToken", null);
1026 this.$store.dispatch("Id", null); 1038 this.$store.dispatch("Id", null);
1027 } 1039 }
1028 }); 1040 });
1029 }, 1041 },
1030 editItem(item) { 1042 editItem(item) {
1031 this.editedIndex = this.desserts.indexOf(item); 1043 this.editedIndex = this.desserts.indexOf(item);
1032 this.editedItem = Object.assign({}, item); 1044 this.editedItem = Object.assign({}, item);
1033 this.editedItem.dob = 1045 this.editedItem.dob =
1034 this.editedItem.dob != undefined 1046 this.editedItem.dob != undefined
1035 ? (this.editedItem.dob = this.editedItem.dob.substring(0, 10)) 1047 ? (this.editedItem.dob = this.editedItem.dob.substring(0, 10))
1036 : (this.editedItem.dob = ""); 1048 : (this.editedItem.dob = "");
1037 this.editedItem.joinDate = 1049 this.editedItem.joinDate =
1038 this.editedItem.joinDate != undefined 1050 this.editedItem.joinDate != undefined
1039 ? (this.editedItem.joinDate = this.editedItem.joinDate.substring( 1051 ? (this.editedItem.joinDate = this.editedItem.joinDate.substring(
1040 0, 1052 0,
1041 10 1053 10
1042 )) 1054 ))
1043 : (this.editedItem.joinDate = ""); 1055 : (this.editedItem.joinDate = "");
1044 1056
1045 this.dialog = true; 1057 this.dialog = true;
1046 }, 1058 },
1047 profile(item) { 1059 profile(item) {
1048 this.editedIndex = this.desserts.indexOf(item); 1060 this.editedIndex = this.desserts.indexOf(item);
1049 this.editedItem = Object.assign({}, item); 1061 this.editedItem = Object.assign({}, item);
1050 this.dialog1 = true; 1062 this.dialog1 = true;
1051 }, 1063 },
1052 deleteItem(item) { 1064 deleteItem(item) {
1053 let deleteTeachers = { 1065 let deleteTeachers = {
1054 teacherId: item._id 1066 teacherId: item._id
1055 }; 1067 };
1056 // console.log("deleteUers",deleteTeachers) 1068 // console.log("deleteUers",deleteTeachers)
1057 http() 1069 http()
1058 .delete( 1070 .delete(
1059 "/deleteTeacher", 1071 "/deleteTeacher",
1060 confirm("Are you sure you want to delete this?") && { 1072 confirm("Are you sure you want to delete this?") && {
1061 params: deleteTeachers 1073 params: deleteTeachers
1062 } 1074 }
1063 ) 1075 )
1064 .then(response => { 1076 .then(response => {
1065 // console.log("deleteUers",deleteTeachers) 1077 // console.log("deleteUers",deleteTeachers)
1066 if ((this.snackbar = true)) { 1078 if ((this.snackbar = true)) {
1067 this.text = "Successfully delete Existing Teacher"; 1079 this.text = "Successfully delete Existing Teacher";
1068 } 1080 }
1069 this.getSystemAdminList(); 1081 this.getSystemAdminList();
1070 }) 1082 })
1071 .catch(error => { 1083 .catch(error => {
1072 console.log(error); 1084 console.log(error);
1073 }); 1085 });
1074 }, 1086 },
1075 activeTab(type) { 1087 activeTab(type) {
1076 switch (type) { 1088 switch (type) {
1077 case "existing": 1089 case "existing":
1078 this.newActive = false; 1090 this.newActive = false;
1079 this.isActive = true; 1091 this.isActive = true;
1080 break; 1092 break;
1081 1093
1082 default: 1094 default:
1083 this.newActive = true; 1095 this.newActive = true;
1084 this.isActive = false; 1096 this.isActive = false;
1085 break; 1097 break;
1086 } 1098 }
1087 }, 1099 },
1088 close() { 1100 close() {
1089 this.dialog = false; 1101 this.dialog = false;
1090 setTimeout(() => { 1102 setTimeout(() => {
1091 this.editedItem = Object.assign({}, this.defaultItem); 1103 this.editedItem = Object.assign({}, this.defaultItem);
1092 this.editedIndex = -1; 1104 this.editedIndex = -1;
1093 }, 300); 1105 }, 300);
1094 }, 1106 },
1095 close1() { 1107 close1() {
1096 this.dialog1 = false; 1108 this.dialog1 = false;
1097 }, 1109 },
1098 submit() { 1110 submit() {
1099 if (this.$refs.form.validate()) { 1111 if (this.$refs.form.validate()) {
1100 let addTeacher = { 1112 let addTeacher = {
1101 // name: this.addTeachers.name, 1113 // name: this.addTeachers.name,
1102 // email: this.addTeachers.email, 1114 // email: this.addTeachers.email,
1103 // role: this.addTeachers.role, 1115 // role: this.addTeachers.role,
1104 // dob: this.addTeachers.date, 1116 // dob: this.addTeachers.date,
1105 // city: this.addTeachers.city, 1117 // city: this.addTeachers.city,
1106 // pincode: this.addTeachers.pincode, 1118 // pincode: this.addTeachers.pincode,
1107 // country: this.addTeachers.country, 1119 // country: this.addTeachers.country,
1108 // permanentAddress: this.addTeachers.permanentAddress, 1120 // permanentAddress: this.addTeachers.permanentAddress,
1109 // presentAddress: this.addTeachers.presentAddress, 1121 // presentAddress: this.addTeachers.presentAddress,
1110 // mobileNo: this.addTeachers.mobileNo, 1122 // mobileNo: this.addTeachers.mobileNo,
1111 // state: this.addTeachers.state, 1123 // state: this.addTeachers.state,
1112 // joinDate: this.addTeachers.joinDate 1124 // joinDate: this.addTeachers.joinDate
1113 }; 1125 };
1114 if (this.imageUrl) { 1126 if (this.imageUrl) {
1115 var str = this.imageUrl; 1127 var str = this.imageUrl;
1116 const [baseUrl, imageUrl] = str.split(/,/); 1128 const [baseUrl, imageUrl] = str.split(/,/);
1117 addTeacher.upload = imageUrl; 1129 addTeacher.upload = imageUrl;
1118 } 1130 }
1119 this.loading = true; 1131 this.loading = true;
1120 http() 1132 http()
1121 .post("/createTeacher", addTeacher) 1133 .post("/createTeacher", addTeacher)
1122 .then(response => { 1134 .then(response => {
1123 this.imageUrl = ""; 1135 this.imageUrl = "";
1124 this.getTeacherList(); 1136 this.getTeacherList();
1125 this.snackbar = true; 1137 this.snackbar = true;
1126 this.text = "New Teacher added successfully"; 1138 this.text = "New Teacher added successfully";
1127 this.clear(); 1139 this.clear();
1128 this.loading = false; 1140 this.loading = false;
1129 }) 1141 })
1130 .catch(error => { 1142 .catch(error => {
1131 // console.log(error); 1143 // console.log(error);
1132 if ((this.snackbar = true)) { 1144 if ((this.snackbar = true)) {
1133 this.text = error.response.data.message; 1145 this.text = error.response.data.message;
1134 } 1146 }
1135 this.loading = false; 1147 this.loading = false;
1136 }); 1148 });
1137 } 1149 }
1138 }, 1150 },
1139 clear() { 1151 clear() {
1140 this.$refs.form.reset(); 1152 this.$refs.form.reset();
1141 this.imageUrl = ""; 1153 this.imageUrl = "";
1142 }, 1154 },
1143 save() { 1155 save() {
1144 this.loading = true; 1156 this.loading = true;
1145 let editTeacher = {}; 1157 let editTeacher = {};
1146 if (this.imageUrl) { 1158 if (this.imageUrl) {
1147 var str = this.imageUrl; 1159 var str = this.imageUrl;
1148 const [baseUrl, imageUrl] = str.split(/,/); 1160 const [baseUrl, imageUrl] = str.split(/,/);
1149 editTeacher.upload = imageUrl; 1161 editTeacher.upload = imageUrl;
1150 } 1162 }
1151 http() 1163 http()
1152 .put("/updateTeacher", editTeacher) 1164 .put("/updateTeacher", editTeacher)
1153 .then(response => { 1165 .then(response => {
1154 console.log("editTeacher", editTeacher); 1166 console.log("editTeacher", editTeacher);
1155 this.snackbar = true; 1167 this.snackbar = true;
1156 this.text = "Successfully Edit Existing Teacher"; 1168 this.text = "Successfully Edit Existing Teacher";
1157 this.loading = false; 1169 this.loading = false;
1158 this.getTeacherList(); 1170 this.getTeacherList();
1159 this.close(); 1171 this.close();
1160 }) 1172 })
1161 .catch(error => { 1173 .catch(error => {
1162 console.log(error); 1174 console.log(error);
1163 this.loading = false; 1175 this.loading = false;
1164 }); 1176 });
1165 } 1177 }
1166 }, 1178 },
1167 mounted() { 1179 mounted() {
1168 // this.getSystemAdminList(); 1180 // this.getSystemAdminList();
1169 }, 1181 },
1170 created() { 1182 created() {
1171 this.$root.$on("app:search", search => { 1183 this.$root.$on("app:search", search => {
1172 this.search = search; 1184 this.search = search;
1173 }); 1185 });
1174 }, 1186 },
1175 beforeDestroy() { 1187 beforeDestroy() {
1176 // dont forget to remove the listener 1188 // dont forget to remove the listener
1177 this.$root.$off("app:search"); 1189 this.$root.$off("app:search");
1178 } 1190 }
1179 }; 1191 };
1180 </script> 1192 </script>
1181 <style scoped> 1193 <style scoped>
1182 .active { 1194 .active {
1183 background-color: gray; 1195 background-color: gray;
1184 color: white !important; 1196 color: white !important;
1185 } 1197 }
1186 .activebtn { 1198 .activebtn {
1187 color: black !important; 1199 color: black !important;
1188 } 1200 }
1189 </style> 1201 </style>
src/pages/Attendence/studentAttendence.vue
Diff comments   View file @495e403
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 <!-- ****** EXISTING STUDENTS TABLE ****** --> 12 <!-- ****** EXISTING STUDENTS TABLE ****** -->
13 13
14 <v-card flat> 14 <v-card flat>
15 <h4 15 <h4
16 class="text-xs-center pt-4 ml-2 hidden-lg-only hidden-xl-only hidden-md-only" 16 class="text-xs-center pt-4 ml-2 hidden-lg-only hidden-xl-only hidden-md-only"
17 >Student Attendence</h4> 17 >Student Attendence</h4>
18 <v-card-actions> 18 <v-card-actions>
19 <v-layout> 19 <v-layout>
20 <h3 class="right mt-2 ml-2 hidden-sm-only hidden-xs-only">Student Attendence</h3> 20 <h3 class="right mt-2 ml-2 hidden-sm-only hidden-xs-only">Student Attendence</h3>
21 <!-- <download-csv :data="json_data"> 21 <!-- <download-csv :data="json_data">
22 <v-btn>Download Data</v-btn> 22 <v-btn>Download Data</v-btn>
23 </download-csv>--> 23 </download-csv>-->
24 </v-layout> 24 </v-layout>
25 <v-spacer></v-spacer> 25 <v-spacer></v-spacer>
26 <v-flex xs12 sm4 md2> 26 <v-flex xs12 sm4 md2>
27 <v-select 27 <v-select
28 outline 28 outline
29 small 29 small
30 :items="addclass" 30 :items="addclass"
31 label="Select Class" 31 label="Select Class"
32 v-model="selectStudents.select" 32 v-model="selectStudents.select"
33 item-text="classNum" 33 item-text="classNum"
34 item-value="_id" 34 item-value="_id"
35 name="Select Class" 35 name="Select Class"
36 @change="getSections(selectStudents.select)" 36 @change="getSections(selectStudents.select)"
37 class="px-2" 37 class="px-2"
38 required 38 required
39 ></v-select> 39 ></v-select>
40 </v-flex> 40 </v-flex>
41 </v-card-actions> 41 </v-card-actions>
42 </v-card> 42 </v-card>
43 <v-data-table 43 <v-data-table
44 :headers="headers" 44 :headers="headers"
45 :items="studentsList" 45 :items="studentsList"
46 :pagination.sync="pagination" 46 :pagination.sync="pagination"
47 :search="search" 47 :search="search"
48 > 48 >
49 <template slot="items" slot-scope="props"> 49 <template slot="items" slot-scope="props">
50 <td id="td" class="text-xs-center">{{ props.index + 1}}</td> 50 <td id="td" class="text-xs-center">{{ props.index + 1}}</td>
51 <td id="td" class="text-xs-center"> 51 <td id="td" class="text-xs-center">
52 <v-avatar> 52 <v-avatar>
53 <img :src="props.item.profilePicUrl" v-if="props.item.profilePicUrl" /> 53 <img :src="props.item.profilePicUrl" v-if="props.item.profilePicUrl" />
54 <img src="/static/icon/user.png" v-else-if="!props.item.profilePicUrl" /> 54 <img src="/static/icon/user.png" v-else-if="!props.item.profilePicUrl" />
55 </v-avatar> 55 </v-avatar>
56 </td> 56 </td>
57 <td id="td" class="text-xs-center">{{ props.item.name}}</td> 57 <td id="td" class="text-xs-center">{{ props.item.name}}</td>
58 <td id="td" class="text-xs-center">{{ props.item.rollNo}}</td> 58 <td id="td" class="text-xs-center">{{ props.item.rollNo}}</td>
59 <td id="td" class="text-xs-center">{{ props.item.email }}</td> 59 <td id="td" class="text-xs-center">{{ props.item.email }}</td>
60 <td class="text-xs-center"> 60 <td class="text-xs-center">
61 <router-link :to="{ name:'ViewStudentsAttendence',params: { id:props.item._id } }"> 61 <router-link :to="{ name:'ViewStudentsAttendence',params: { id:props.item._id } }">
62 <v-tooltip top>
63 <img
64 slot="activator"
65 style="cursor:pointer; width:20px; height:18px; "
66 class="mr-5"
67 src="/static/icon/edit1.png"
68 />
69 <span>Edit</span>
70 </v-tooltip>
71 </router-link>
72 <v-tooltip top>
62 <img 73 <img
63 style="cursor:pointer; width:20px; height:18px; " 74 slot="activator"
64 class="mr-5" 75 style="cursor:pointer; width:20px; height:20px; "
65 src="/static/icon/edit1.png" 76 class="mr5"
77 @click="deleteItem(props.item)"
78 src="/static/icon/delete1.png"
66 /> 79 />
67 </router-link> 80 <span>Delete</span>
68 <img 81 </v-tooltip>
69 style="cursor:pointer;width:20px; height:20px; "
70 class="mr-5"
71 @click="deleteItem(props.item)"
72 src="/static/icon/delete1.png"
73 />
74 <!-- </span> --> 82 <!-- </span> -->
75 </td> 83 </td>
76 </template> 84 </template>
77 <v-alert 85 <v-alert
78 slot="no-results" 86 slot="no-results"
79 :value="true" 87 :value="true"
80 color="error" 88 color="error"
81 icon="warning" 89 icon="warning"
82 >Your search for "{{ search }}" found no results.</v-alert> 90 >Your search for "{{ search }}" found no results.</v-alert>
83 </v-data-table> 91 </v-data-table>
84 <div class="loader" v-if="showLoader"> 92 <div class="loader" v-if="showLoader">
85 <v-progress-circular indeterminate color="white"></v-progress-circular> 93 <v-progress-circular indeterminate color="white"></v-progress-circular>
86 </div> 94 </div>
87 </div> 95 </div>
88 </template> 96 </template>
89 97
90 <script> 98 <script>
91 import http from "@/Services/http.js"; 99 import http from "@/Services/http.js";
92 // import Util from "@/util"; 100 // import Util from "@/util";
93 import moment from "moment"; 101 import moment from "moment";
94 102
95 export default { 103 export default {
96 data: () => ({ 104 data: () => ({
97 snackbar: false, 105 snackbar: false,
98 y: "top", 106 y: "top",
99 x: "right", 107 x: "right",
100 mode: "", 108 mode: "",
101 timeout: 3000, 109 timeout: 3000,
102 text: "", 110 text: "",
103 showLoader: false, 111 showLoader: false,
104 loading: false, 112 loading: false,
105 date: null, 113 date: null,
106 search: "", 114 search: "",
107 addclass: [], 115 addclass: [],
108 pagination: { 116 pagination: {
109 rowsPerPage: 15 117 rowsPerPage: 15
110 }, 118 },
111 imageData: {}, 119 imageData: {},
112 imageName: "", 120 imageName: "",
113 imageUrl: "", 121 imageUrl: "",
114 imageFile: "", 122 imageFile: "",
115 headers: [ 123 headers: [
116 { 124 {
117 text: "No", 125 text: "No",
118 align: "center", 126 align: "center",
119 sortable: false, 127 sortable: false,
120 value: "index" 128 value: "index"
121 }, 129 },
122 { 130 {
123 text: "Profile Pic", 131 text: "Profile Pic",
124 value: "profilprofilePicUrlePicUrl", 132 value: "profilprofilePicUrlePicUrl",
125 sortable: false, 133 sortable: false,
126 align: "center" 134 align: "center"
127 }, 135 },
128 { text: "Name", value: "name", sortable: false, align: "center" }, 136 { text: "Name", value: "name", sortable: false, align: "center" },
129 { text: "Roll No", value: "rollNo", sortable: false, align: "center" }, 137 { text: "Roll No", value: "rollNo", sortable: false, align: "center" },
130 { text: "Email", value: "email", sortable: false, align: "center" }, 138 { text: "Email", value: "email", sortable: false, align: "center" },
131 { text: "Action", value: "", sortable: false, align: "center" } 139 { text: "Action", value: "", sortable: false, align: "center" }
132 ], 140 ],
133 // json_data: [], 141 // json_data: [],
134 studentsList: [], 142 studentsList: [],
135 parentId: "", 143 parentId: "",
136 token: "", 144 token: "",
137 selectStudents: { 145 selectStudents: {
138 select: "", 146 select: "",
139 selectSection: "" 147 selectSection: ""
140 } 148 }
141 }), 149 }),
142 methods: { 150 methods: {
143 getSections(_id) { 151 getSections(_id) {
144 this.showLoader = true; 152 this.showLoader = true;
145 var token = this.$store.state.token; 153 var token = this.$store.state.token;
146 http() 154 http()
147 .get( 155 .get(
148 "/getStudentsList", 156 "/getStudentsList",
149 { params: { classId: _id } }, 157 { params: { classId: _id } },
150 { 158 {
151 headers: { Authorization: "Bearer " + token } 159 headers: { Authorization: "Bearer " + token }
152 } 160 }
153 ) 161 )
154 .then(response => { 162 .then(response => {
155 this.showLoader = false; 163 this.showLoader = false;
156 this.studentsList = response.data.data; 164 this.studentsList = response.data.data;
157 console.log("getSectionsList=====>", response.data.data); 165 console.log("getSectionsList=====>", response.data.data);
158 }) 166 })
159 .catch(error => { 167 .catch(error => {
160 // console.log("err====>", err); 168 // console.log("err====>", err);
161 this.showLoader = false; 169 this.showLoader = false;
162 if (error.response.status === 401) { 170 if (error.response.status === 401) {
163 this.$router.replace({ path: "/" }); 171 this.$router.replace({ path: "/" });
164 this.$store.dispatch("setToken", null); 172 this.$store.dispatch("setToken", null);
165 this.$store.dispatch("Id", null); 173 this.$store.dispatch("Id", null);
166 } 174 }
167 }); 175 });
168 }, 176 },
169 getAllClass() { 177 getAllClass() {
170 http() 178 http()
171 .get("/getClassesList", { 179 .get("/getClassesList", {
172 headers: { Authorization: "Bearer " + this.token } 180 headers: { Authorization: "Bearer " + this.token }
173 }) 181 })
174 .then(response => { 182 .then(response => {
175 this.addclass = response.data.data; 183 this.addclass = response.data.data;
176 }) 184 })
177 .catch(err => { 185 .catch(err => {
178 // console.log("err====>", err); 186 // console.log("err====>", err);
179 // this.$router.replace({ path: "/" }); 187 // this.$router.replace({ path: "/" });
180 }); 188 });
181 } 189 }
182 }, 190 },
183 mounted() { 191 mounted() {
184 // this.getStudentList(); 192 // this.getStudentList();
185 this.token = this.$store.state.token; 193 this.token = this.$store.state.token;
186 this.getAllClass(); 194 this.getAllClass();
187 }, 195 },
188 created() { 196 created() {
189 this.$root.$on("app:search", search => { 197 this.$root.$on("app:search", search => {
190 this.search = search; 198 this.search = search;
191 }); 199 });
192 }, 200 },
193 beforeDestroy() { 201 beforeDestroy() {
194 // dont forget to remove the listener 202 // dont forget to remove the listener
195 this.$root.$off("app:search"); 203 this.$root.$off("app:search");
196 } 204 }
197 }; 205 };
198 </script> 206 </script>
199 <style scoped> 207 <style scoped>
200 .active { 208 .active {
201 background-color: gray; 209 background-color: gray;
202 color: white !important; 210 color: white !important;
src/pages/Class/addclass.vue
Diff comments   View file @495e403
1 <template> 1 <template>
2 <div> 2 <div>
3 <v-tabs grow slider-color="gary"> 3 <v-tabs grow slider-color="gary">
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 Class</v-tab> 10 >Existing Class</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 Class</v-tab> 18 >Add New Class</v-tab>
19 19
20 <!-- ****** EDIT ClASS ****** --> 20 <!-- ****** EDIT ClASS ****** -->
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="500px"> 30 <v-dialog v-model="dialog" max-width="500px">
31 <v-flex xs12 sm12 class> 31 <v-flex xs12 sm12 class>
32 <v-toolbar color="grey lighten-2"> 32 <v-toolbar color="grey lighten-2">
33 <v-spacer></v-spacer> 33 <v-spacer></v-spacer>
34 <v-toolbar-title> 34 <v-toolbar-title>
35 <h3>Edit Class</h3> 35 <h3>Edit Class</h3>
36 </v-toolbar-title> 36 </v-toolbar-title>
37 <v-spacer></v-spacer> 37 <v-spacer></v-spacer>
38 </v-toolbar> 38 </v-toolbar>
39 <v-card> 39 <v-card>
40 <v-container fluid> 40 <v-container fluid>
41 <v-layout justify-center> 41 <v-layout justify-center>
42 <v-flex xs12 sm9> 42 <v-flex xs12 sm9>
43 <v-layout style="position:relative;"> 43 <v-layout style="position:relative;">
44 <v-flex xs3 lg2 class="pt-4 subheading"> 44 <v-flex xs3 lg2 class="pt-4 subheading">
45 <label class="right">Class:</label> 45 <label class="right">Class:</label>
46 </v-flex> 46 </v-flex>
47 <v-flex xs9 class="ml-2"> 47 <v-flex xs9 class="ml-2">
48 <v-autocomplete 48 <v-autocomplete
49 v-model="editedItem.classNum" 49 v-model="editedItem.classNum"
50 :label="editedItem.classNum" 50 :label="editedItem.classNum"
51 :items="classList" 51 :items="classList"
52 :rules="nameRules" 52 :rules="nameRules"
53 ></v-autocomplete> 53 ></v-autocomplete>
54 </v-flex> 54 </v-flex>
55 </v-layout> 55 </v-layout>
56 <v-card-actions> 56 <v-card-actions>
57 <v-btn round dark @click.native="close">Cancel</v-btn> 57 <v-btn round dark @click.native="close">Cancel</v-btn>
58 <v-spacer></v-spacer> 58 <v-spacer></v-spacer>
59 <v-btn round dark @click="save">Save</v-btn> 59 <v-btn round dark @click="save">Save</v-btn>
60 </v-card-actions> 60 </v-card-actions>
61 </v-flex> 61 </v-flex>
62 </v-layout> 62 </v-layout>
63 </v-container> 63 </v-container>
64 </v-card> 64 </v-card>
65 </v-flex> 65 </v-flex>
66 </v-dialog> 66 </v-dialog>
67 67
68 <!-- ****** PROFILE VIEW STUDENTS ****** --> 68 <!-- ****** PROFILE VIEW STUDENTS ****** -->
69 <v-dialog v-model="dialog1" max-width="600px"> 69 <v-dialog v-model="dialog1" max-width="600px">
70 <v-toolbar color="grey lighten-2"> 70 <v-toolbar color="grey lighten-2">
71 <v-spacer></v-spacer> 71 <v-spacer></v-spacer>
72 <v-toolbar-title> 72 <v-toolbar-title>
73 <h3>Class</h3> 73 <h3>Class</h3>
74 </v-toolbar-title> 74 </v-toolbar-title>
75 <v-spacer></v-spacer> 75 <v-spacer></v-spacer>
76 <v-icon @click="close1">close</v-icon> 76 <v-icon @click="close1">close</v-icon>
77 </v-toolbar> 77 </v-toolbar>
78 <v-card> 78 <v-card>
79 <v-card-text> 79 <v-card-text>
80 <v-container grid-list-md> 80 <v-container grid-list-md>
81 <v-layout wrap> 81 <v-layout wrap>
82 <v-flex> 82 <v-flex>
83 <v-layout> 83 <v-layout>
84 <v-flex xs6 sm6> 84 <v-flex xs6 sm6>
85 <h5 class="right my-1"> 85 <h5 class="right my-1">
86 <b>Class Name:</b> 86 <b>Class Name:</b>
87 </h5> 87 </h5>
88 </v-flex> 88 </v-flex>
89 <v-flex sm6 xs6> 89 <v-flex sm6 xs6>
90 <h5 class="my-1">{{ editedItem.classNum }}</h5> 90 <h5 class="my-1">{{ editedItem.classNum }}</h5>
91 </v-flex> 91 </v-flex>
92 </v-layout> 92 </v-layout>
93 </v-flex> 93 </v-flex>
94 </v-layout> 94 </v-layout>
95 </v-container> 95 </v-container>
96 </v-card-text> 96 </v-card-text>
97 </v-card> 97 </v-card>
98 </v-dialog> 98 </v-dialog>
99 99
100 <v-snackbar 100 <v-snackbar
101 :timeout="timeout" 101 :timeout="timeout"
102 :top="y === 'top'" 102 :top="y === 'top'"
103 :right="x === 'right'" 103 :right="x === 'right'"
104 :vertical="mode === 'vertical'" 104 :vertical="mode === 'vertical'"
105 v-model="snackbar" 105 v-model="snackbar"
106 color="success" 106 color="success"
107 >{{ text }}</v-snackbar> 107 >{{ text }}</v-snackbar>
108 108
109 <!-- ****** EXISTING-USERS Classess Table ****** --> 109 <!-- ****** EXISTING-USERS Classess Table ****** -->
110 <v-data-table 110 <v-data-table
111 :headers="headers" 111 :headers="headers"
112 :items="desserts" 112 :items="desserts"
113 :pagination.sync="pagination" 113 :pagination.sync="pagination"
114 :search="search" 114 :search="search"
115 > 115 >
116 <template slot="items" slot-scope="props"> 116 <template slot="items" slot-scope="props">
117 <td>{{ props.index + 1 }}</td> 117 <td>{{ props.index + 1 }}</td>
118 <td class="text-xs-center">{{ props.item.classNum}}</td> 118 <td class="text-xs-center">{{ props.item.classNum}}</td>
119 <td class="text-xs-center"> 119 <td class="text-xs-center">
120 <span> 120 <span>
121 <img 121 <v-tooltip top>
122 style="cursor:pointer; width:25px; height:18px; " 122 <img
123 class="mr5" 123 slot="activator"
124 @click="profile(props.item)" 124 style="cursor:pointer; width:25px; height:18px; "
125 src="/static/icon/eye1.png" 125 class="mr5"
126 /> 126 @click="profile(props.item)"
127 <img 127 src="/static/icon/eye1.png"
128 style="cursor:pointer; width:20px; height:18px; " 128 />
129 class="mr5" 129 <span>View</span>
130 @click="editItem(props.item)" 130 </v-tooltip>
131 src="/static/icon/edit1.png" 131 <v-tooltip top>
132 /> 132 <img
133 <img 133 slot="activator"
134 style="cursor:pointer; width:20px; height:20px; " 134 style="cursor:pointer; width:20px; height:18px; "
135 class="mr5" 135 class="mr5"
136 @click="deleteItem(props.item)" 136 @click="editItem(props.item)"
137 src="/static/icon/delete1.png" 137 src="/static/icon/edit1.png"
138 /> 138 />
139 <span>Edit</span>
140 </v-tooltip>
141 <v-tooltip top>
142 <img
143 slot="activator"
144 style="cursor:pointer; width:20px; height:20px; "
145 class="mr5"
146 @click="deleteItem(props.item)"
147 src="/static/icon/delete1.png"
148 />
149 <span>Delete</span>
150 </v-tooltip>
139 </span> 151 </span>
140 </td> 152 </td>
141 </template> 153 </template>
142 <v-alert 154 <v-alert
143 slot="no-results" 155 slot="no-results"
144 :value="true" 156 :value="true"
145 color="error" 157 color="error"
146 icon="warning" 158 icon="warning"
147 >Your search for "{{ search }}" found no results.</v-alert> 159 >Your search for "{{ search }}" found no results.</v-alert>
148 </v-data-table> 160 </v-data-table>
149 </v-tab-item> 161 </v-tab-item>
150 162
151 <!-- ****** ADD multiple Classess ****** --> 163 <!-- ****** ADD multiple Classess ****** -->
152 <v-tab-item> 164 <v-tab-item>
153 <v-container> 165 <v-container>
154 <v-snackbar 166 <v-snackbar
155 :timeout="timeout" 167 :timeout="timeout"
156 :top="y === 'top'" 168 :top="y === 'top'"
157 :right="x === 'right'" 169 :right="x === 'right'"
158 :vertical="mode === 'vertical'" 170 :vertical="mode === 'vertical'"
159 v-model="snackbar" 171 v-model="snackbar"
160 color="success" 172 color="success"
161 >{{ text }}</v-snackbar> 173 >{{ text }}</v-snackbar>
162 <v-flex xs12 sm8 offset-sm2 class="top"> 174 <v-flex xs12 sm8 offset-sm2 class="top">
163 <v-card flat> 175 <v-card flat>
164 <v-container fluid fill-height> 176 <v-container fluid fill-height>
165 <v-layout align-center> 177 <v-layout align-center>
166 <v-flex xs12 class="mt-4"> 178 <v-flex xs12 class="mt-4">
167 <v-form ref="form" v-model="valid" lazy-validation> 179 <v-form ref="form" v-model="valid" lazy-validation>
168 <v-layout> 180 <v-layout>
169 <v-flex xs4 class="pt-4 subheading"> 181 <v-flex xs4 class="pt-4 subheading">
170 <label class="right">Class :</label> 182 <label class="right">Class :</label>
171 </v-flex> 183 </v-flex>
172 <v-flex xs6 class="ml-3"> 184 <v-flex xs6 class="ml-3">
173 <v-autocomplete 185 <v-autocomplete
174 v-model="addclasses.classNum" 186 v-model="addclasses.classNum"
175 placeholder="fill your class Name" 187 placeholder="fill your class Name"
176 type="text" 188 type="text"
177 :items="classList" 189 :items="classList"
178 :rules="nameRules" 190 :rules="nameRules"
179 required 191 required
180 ></v-autocomplete> 192 ></v-autocomplete>
181 </v-flex> 193 </v-flex>
182 </v-layout> 194 </v-layout>
183 <v-layout> 195 <v-layout>
184 <v-flex xs12 sm9 offset-sm2> 196 <v-flex xs12 sm9 offset-sm2>
185 <v-card-actions> 197 <v-card-actions>
186 <v-spacer></v-spacer> 198 <v-spacer></v-spacer>
187 <v-btn @click="submit" round dark :loading="loading">Add</v-btn> 199 <v-btn @click="submit" round dark :loading="loading">Add</v-btn>
188 <v-spacer></v-spacer> 200 <v-spacer></v-spacer>
189 </v-card-actions> 201 </v-card-actions>
190 </v-flex> 202 </v-flex>
191 </v-layout> 203 </v-layout>
192 </v-form> 204 </v-form>
193 </v-flex> 205 </v-flex>
194 </v-layout> 206 </v-layout>
195 </v-container> 207 </v-container>
196 </v-card> 208 </v-card>
197 </v-flex> 209 </v-flex>
198 </v-container> 210 </v-container>
199 </v-tab-item> 211 </v-tab-item>
200 </v-tabs> 212 </v-tabs>
201 <div class="loader" v-if="showLoader"> 213 <div class="loader" v-if="showLoader">
202 <v-progress-circular indeterminate color="white"></v-progress-circular> 214 <v-progress-circular indeterminate color="white"></v-progress-circular>
203 </div> 215 </div>
204 </div> 216 </div>
205 </template> 217 </template>
206 218
207 <script> 219 <script>
208 import http from "@/Services/http.js"; 220 import http from "@/Services/http.js";
209 import Util from "@/util"; 221 import Util from "@/util";
210 222
211 export default { 223 export default {
212 data: () => ({ 224 data: () => ({
213 snackbar: false, 225 snackbar: false,
214 y: "top", 226 y: "top",
215 x: "right", 227 x: "right",
216 mode: "", 228 mode: "",
217 timeout: 3000, 229 timeout: 3000,
218 text: "", 230 text: "",
219 showLoader: false, 231 showLoader: false,
220 loading: false, 232 loading: false,
221 date: null, 233 date: null,
222 search: "", 234 search: "",
223 dialog: false, 235 dialog: false,
224 dialog1: false, 236 dialog1: false,
225 valid: true, 237 valid: true,
226 isActive: true, 238 isActive: true,
227 newActive: false, 239 newActive: false,
228 AddUsercredentials: {}, 240 AddUsercredentials: {},
229 pagination: { 241 pagination: {
230 rowsPerPage: 15 242 rowsPerPage: 15
231 }, 243 },
232 nameRules: [v => !!v || " Class Name is required"], 244 nameRules: [v => !!v || " Class Name is required"],
233 headers: [ 245 headers: [
234 { 246 {
235 text: "No", 247 text: "No",
236 align: "left", 248 align: "left",
237 sortable: false, 249 sortable: false,
238 value: "No" 250 value: "No"
239 }, 251 },
240 { text: "Class No", value: "classNum", sortable: false, align: "center" }, 252 { text: "Class No", value: "classNum", sortable: false, align: "center" },
241 253
242 { text: "Action", value: "", sortable: false, align: "center" } 254 { text: "Action", value: "", sortable: false, align: "center" }
243 ], 255 ],
244 desserts: [], 256 desserts: [],
245 classList: ["1", "2", "3", "4", "5", "6", "7", "8", "9", "10", "11", "12"], 257 classList: ["1", "2", "3", "4", "5", "6", "7", "8", "9", "10", "11", "12"],
246 editedIndex: -1, 258 editedIndex: -1,
247 editedItem: { 259 editedItem: {
248 classNum: "" 260 classNum: ""
249 }, 261 },
250 addclasses: { 262 addclasses: {
251 classNum: "" 263 classNum: ""
252 } 264 }
253 }), 265 }),
254 methods: { 266 methods: {
255 getClassList() { 267 getClassList() {
256 this.showLoader = true; 268 this.showLoader = true;
257 var token = this.$store.state.token; 269 var token = this.$store.state.token;
258 http() 270 http()
259 .get("/getClassesList") 271 .get("/getClassesList")
260 .then(response => { 272 .then(response => {
261 this.desserts = response.data.data; 273 this.desserts = response.data.data;
262 this.showLoader = false; 274 this.showLoader = false;
263 }) 275 })
264 .catch(err => { 276 .catch(err => {
265 console.log("err====>", err); 277 console.log("err====>", err);
266 this.showLoader = false; 278 this.showLoader = false;
267 if (error.response.status === 401) { 279 if (error.response.status === 401) {
268 this.$router.replace({ path: "/" }); 280 this.$router.replace({ path: "/" });
269 this.$store.dispatch("setToken", null); 281 this.$store.dispatch("setToken", null);
270 this.$store.dispatch("Id", null); 282 this.$store.dispatch("Id", null);
271 } 283 }
272 }); 284 });
273 }, 285 },
274 editItem(item) { 286 editItem(item) {
275 this.editedIndex = this.desserts.indexOf(item); 287 this.editedIndex = this.desserts.indexOf(item);
276 this.editedItem = Object.assign({}, item); 288 this.editedItem = Object.assign({}, item);
277 this.dialog = true; 289 this.dialog = true;
278 }, 290 },
279 profile(item) { 291 profile(item) {
280 this.editedIndex = this.desserts.indexOf(item); 292 this.editedIndex = this.desserts.indexOf(item);
281 this.editedItem = Object.assign({}, item); 293 this.editedItem = Object.assign({}, item);
282 this.dialog1 = true; 294 this.dialog1 = true;
283 }, 295 },
284 deleteItem(item) { 296 deleteItem(item) {
285 let deleteStudent = { 297 let deleteStudent = {
286 classId: item._id 298 classId: item._id
287 }; 299 };
288 http() 300 http()
289 .delete( 301 .delete(
290 "/deleteClass", 302 "/deleteClass",
291 confirm("Are you sure you want to delete this?") && { 303 confirm("Are you sure you want to delete this?") && {
292 params: deleteStudent 304 params: deleteStudent
293 } 305 }
294 ) 306 )
295 .then(response => { 307 .then(response => {
296 // console.log("deleteUers",deleteStudent) 308 // console.log("deleteUers",deleteStudent)
297 if ((this.snackbar = true)) { 309 if ((this.snackbar = true)) {
298 this.text = "Successfully delete Existing Class"; 310 this.text = "Successfully delete Existing Class";
299 } 311 }
300 this.getClassList(); 312 this.getClassList();
301 }) 313 })
302 .catch(error => { 314 .catch(error => {
303 // console.log(error); 315 // console.log(error);
304 }); 316 });
305 }, 317 },
306 activeTab(type) { 318 activeTab(type) {
307 switch (type) { 319 switch (type) {
308 case "existing": 320 case "existing":
309 this.newActive = false; 321 this.newActive = false;
310 this.isActive = true; 322 this.isActive = true;
311 break; 323 break;
312 324
313 default: 325 default:
314 this.newActive = true; 326 this.newActive = true;
315 this.isActive = false; 327 this.isActive = false;
316 break; 328 break;
317 } 329 }
318 }, 330 },
319 close() { 331 close() {
320 this.dialog = false; 332 this.dialog = false;
321 setTimeout(() => { 333 setTimeout(() => {
322 this.editedItem = Object.assign({}, this.defaultItem); 334 this.editedItem = Object.assign({}, this.defaultItem);
323 this.editedIndex = -1; 335 this.editedIndex = -1;
324 }, 300); 336 }, 300);
325 }, 337 },
326 close1() { 338 close1() {
327 this.dialog1 = false; 339 this.dialog1 = false;
328 }, 340 },
329 submit() { 341 submit() {
330 if (this.$refs.form.validate()) { 342 if (this.$refs.form.validate()) {
331 let addClass = { 343 let addClass = {
332 classNum: this.addclasses.classNum 344 classNum: this.addclasses.classNum
333 }; 345 };
334 console.log(addClass); 346 console.log(addClass);
335 this.loading = true; 347 this.loading = true;
336 http() 348 http()
337 .post("/createClass", addClass) 349 .post("/createClass", addClass)
338 .then(response => { 350 .then(response => {
339 this.getClassList(); 351 this.getClassList();
340 if ((this.snackbar = true)) { 352 if ((this.snackbar = true)) {
341 this.text = "New class added successfully"; 353 this.text = "New class added successfully";
342 } 354 }
343 this.clear(); 355 this.clear();
344 this.loading = false; 356 this.loading = false;
345 }) 357 })
346 .catch(error => { 358 .catch(error => {
347 // console.log(error); 359 // console.log(error);
348 this.loading = false; 360 this.loading = false;
349 if ((this.snackbar = true)) { 361 if ((this.snackbar = true)) {
350 this.text = error.response.data.message; 362 this.text = error.response.data.message;
351 } 363 }
352 }); 364 });
353 } 365 }
354 }, 366 },
355 clear() { 367 clear() {
356 this.$refs.form.reset(); 368 this.$refs.form.reset();
357 }, 369 },
358 save() { 370 save() {
359 let editClass = { 371 let editClass = {
360 classId: this.editedItem._id, 372 classId: this.editedItem._id,
361 classNum: this.editedItem.classNum 373 classNum: this.editedItem.classNum
362 }; 374 };
363 http() 375 http()
364 .put("/updateClass", editClass) 376 .put("/updateClass", editClass)
365 .then(response => { 377 .then(response => {
366 if ((this.snackbar = true)) { 378 if ((this.snackbar = true)) {
367 this.text = "Successfully Edit Existing Class"; 379 this.text = "Successfully Edit Existing Class";
368 } 380 }
369 this.getClassList(); 381 this.getClassList();
370 }) 382 })
371 .catch(error => { 383 .catch(error => {
372 // console.log(error); 384 // console.log(error);
373 }); 385 });
374 this.close(); 386 this.close();
375 } 387 }
376 }, 388 },
377 mounted() { 389 mounted() {
378 this.getClassList(); 390 this.getClassList();
379 // console.log("this.search",this.search) 391 // console.log("this.search",this.search)
380 }, 392 },
381 created() { 393 created() {
382 this.$root.$on("app:search", search => { 394 this.$root.$on("app:search", search => {
383 this.search = search; 395 this.search = search;
384 }); 396 });
385 }, 397 },
386 beforeDestroy() { 398 beforeDestroy() {
387 // dont forget to remove the listener 399 // dont forget to remove the listener
388 this.$root.$off("app:search"); 400 this.$root.$off("app:search");
389 } 401 }
390 }; 402 };
391 </script> 403 </script>
392 <style> 404 <style>
393 .active { 405 .active {
394 background-color: gray; 406 background-color: gray;
395 color: white !important; 407 color: white !important;
396 } 408 }
397 .activebtn { 409 .activebtn {
398 color: black !important; 410 color: black !important;
399 } 411 }
400 </style> 412 </style>
src/pages/Event/event.vue
Diff comments   View file @495e403
1 <template> 1 <template>
2 <v-app id="pages-dasboard"> 2 <v-app id="pages-dasboard">
3 <v-tabs grow slider-color="gary"> 3 <v-tabs grow slider-color="gary">
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 Event</v-tab> 10 >Existing Event</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 Event</v-tab> 18 >Add New Event</v-tab>
19 19
20 <!-- ****** EDITS EVENT DETAILS ****** --> 20 <!-- ****** EDITS EVENT 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="600px"> 31 <v-dialog v-model="dialog" max-width="600px">
32 <v-flex xs12 sm12> 32 <v-flex xs12 sm12>
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 Event</h3> 36 <h3>Edit Event</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-flex xs12 sm12> 42 <v-flex xs12 sm12>
43 <v-layout> 43 <v-layout>
44 <v-flex xs4 class="pt-4 subheading"> 44 <v-flex xs4 class="pt-4 subheading">
45 <label class="right">Title:</label> 45 <label class="right">Title:</label>
46 </v-flex> 46 </v-flex>
47 <v-flex xs8 sm5 class="ml-3"> 47 <v-flex xs8 sm5 class="ml-3">
48 <v-text-field 48 <v-text-field
49 v-model="editedItem.title" 49 v-model="editedItem.title"
50 placeholder="fill your Title" 50 placeholder="fill your Title"
51 name="name" 51 name="name"
52 type="text" 52 type="text"
53 ></v-text-field> 53 ></v-text-field>
54 </v-flex> 54 </v-flex>
55 </v-layout> 55 </v-layout>
56 </v-flex> 56 </v-flex>
57 <v-flex xs12 sm12> 57 <v-flex xs12 sm12>
58 <v-layout> 58 <v-layout>
59 <v-flex xs4 class="pt-4 subheading"> 59 <v-flex xs4 class="pt-4 subheading">
60 <label class="right">Date:</label> 60 <label class="right">Date:</label>
61 </v-flex> 61 </v-flex>
62 <v-flex xs8 sm5 class="ml-3"> 62 <v-flex xs8 sm5 class="ml-3">
63 <v-menu 63 <v-menu
64 ref="menu" 64 ref="menu"
65 :close-on-content-click="false" 65 :close-on-content-click="false"
66 v-model="menu" 66 v-model="menu"
67 :nudge-right="40" 67 :nudge-right="40"
68 lazy 68 lazy
69 transition="scale-transition" 69 transition="scale-transition"
70 offset-y 70 offset-y
71 full-width 71 full-width
72 min-width="290px" 72 min-width="290px"
73 > 73 >
74 <v-text-field
75 slot="activator"
76 :rules="dateRules"
77 v-model="editedItem.dateOfEvent"
78 placeholder="Select date"
79 ></v-text-field>
80 <v-date-picker
81 color="info"
82 ref="picker"
83 v-model="editedItem.dateOfEvent"
84 @input="$refs.menu.save(editedItem.dateOfEvent)"
85 ></v-date-picker>
86 </v-menu>
87 </v-flex>
88 </v-layout>
89 </v-flex>
90 <v-flex xs12 sm12>
91 <v-layout>
92 <v-flex xs4 class="pt-4 subheading">
93 <label class="right">Description:</label>
94 </v-flex>
95 <v-flex xs8 sm5 class="ml-3">
96 <v-text-field 74 <v-text-field
97 placeholder="fill your Description" 75 slot="activator"
98 v-model="editedItem.description" 76 :rules="dateRules"
99 type="text" 77 v-model="editedItem.dateOfEvent"
78 placeholder="Select date"
100 ></v-text-field> 79 ></v-text-field>
101 </v-flex> 80 <v-date-picker
102 </v-layout> 81 color="info"
103 </v-flex> 82 ref="picker"
83 v-model="editedItem.dateOfEvent"
84 @input="$refs.menu.save(editedItem.dateOfEvent)"
85 ></v-date-picker>
86 </v-menu>
87 </v-flex>
88 </v-layout>
89 </v-flex>
90 <v-flex xs12 sm12>
104 <v-layout> 91 <v-layout>
105 <v-flex xs12 sm10 offset-sm1> 92 <v-flex xs4 class="pt-4 subheading">
106 <v-card-actions> 93 <label class="right">Description:</label>
107 <v-btn round dark @click.native="close">Cancel</v-btn> 94 </v-flex>
108 <v-spacer></v-spacer> 95 <v-flex xs8 sm5 class="ml-3">
109 <v-btn round dark @click="save">Save</v-btn> 96 <v-text-field
110 </v-card-actions> 97 placeholder="fill your Description"
98 v-model="editedItem.description"
99 type="text"
100 ></v-text-field>
111 </v-flex> 101 </v-flex>
112 </v-layout> 102 </v-layout>
113 </v-container> 103 </v-flex>
104 <v-layout>
105 <v-flex xs12 sm10 offset-sm1>
106 <v-card-actions>
107 <v-btn round dark @click.native="close">Cancel</v-btn>
108 <v-spacer></v-spacer>
109 <v-btn round dark @click="save">Save</v-btn>
110 </v-card-actions>
111 </v-flex>
112 </v-layout>
113 </v-container>
114 </v-card> 114 </v-card>
115 </v-flex> 115 </v-flex>
116 </v-dialog> 116 </v-dialog>
117 117
118 <!-- ****** PROFILE VIEW EVENT DEATILS ****** --> 118 <!-- ****** PROFILE VIEW EVENT DEATILS ****** -->
119 119
120 <v-dialog v-model="dialog1" max-width="700px"> 120 <v-dialog v-model="dialog1" max-width="700px">
121 <v-toolbar color="white"> 121 <v-toolbar color="white">
122 <v-spacer></v-spacer> 122 <v-spacer></v-spacer>
123 <v-toolbar-title> 123 <v-toolbar-title>
124 <h3>Event</h3> 124 <h3>Event</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>Title:</b> 137 <b>Title:</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.title }}</h5> 141 <h5 class="my-1">{{ editedItem.title }}</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>Date:</b> 147 <b>Date:</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">{{ dates(editedItem.dateOfEvent) }}</h5> 151 <h5 class="my-1">{{ dates(editedItem.dateOfEvent) }}</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>Description:</b> 157 <b>Description:</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.description }}</h5> 161 <h5 class="my-1">{{ editedItem.description }}</h5>
162 </v-flex> 162 </v-flex>
163 </v-layout> 163 </v-layout>
164 </v-flex> 164 </v-flex>
165 </v-layout> 165 </v-layout>
166 </v-container> 166 </v-container>
167 </v-card-text> 167 </v-card-text>
168 </v-card> 168 </v-card>
169 </v-dialog> 169 </v-dialog>
170 <v-snackbar 170 <v-snackbar
171 :timeout="timeout" 171 :timeout="timeout"
172 :top="y === 'top'" 172 :top="y === 'top'"
173 :right="x === 'right'" 173 :right="x === 'right'"
174 :vertical="mode === 'vertical'" 174 :vertical="mode === 'vertical'"
175 v-model="snackbar" 175 v-model="snackbar"
176 color="success" 176 color="success"
177 >{{ text }}</v-snackbar> 177 >{{ text }}</v-snackbar>
178 178
179 <!-- ****** EXISTING-USERS EVENT TABLE ****** --> 179 <!-- ****** EXISTING-USERS EVENT TABLE ****** -->
180 180
181 <v-data-table 181 <v-data-table
182 :headers="headers" 182 :headers="headers"
183 :items="desserts" 183 :items="desserts"
184 :pagination.sync="pagination" 184 :pagination.sync="pagination"
185 :search="search" 185 :search="search"
186 > 186 >
187 <template slot="items" slot-scope="props"> 187 <template slot="items" slot-scope="props">
188 <td id="td" class="text-xs-center">{{ props.index + 1}}</td> 188 <td id="td" class="text-xs-center">{{ props.index + 1}}</td>
189 <td id="td" class="text-xs-center">{{ props.item.title}}</td> 189 <td id="td" class="text-xs-center">{{ props.item.title}}</td>
190 <td id="td" class="text-xs-center">{{ dates(props.item.dateOfEvent)}}</td> 190 <td id="td" class="text-xs-center">{{ dates(props.item.dateOfEvent)}}</td>
191 <td id="td" class="text-xs-center">{{ props.item.description}}</td> 191 <td id="td" class="text-xs-center">{{ props.item.description}}</td>
192 192
193 <td id="td" class="text-xs-center"> 193 <td id="td" class="text-xs-center">
194 <span> 194 <span>
195 <img 195 <v-tooltip top>
196 style="cursor:pointer; width:25px; height:18px; " 196 <img
197 class="mr-5" 197 slot="activator"
198 @click="profile(props.item)" 198 style="cursor:pointer; width:25px; height:18px; "
199 src="/static/icon/eye1.png" 199 class="mr5"
200 /> 200 @click="profile(props.item)"
201 <img 201 src="/static/icon/eye1.png"
202 style="cursor:pointer; width:20px; height:18px; " 202 />
203 class="mr-5" 203 <span>View</span>
204 @click="editItem(props.item)" 204 </v-tooltip>
205 src="/static/icon/edit1.png" 205 <v-tooltip top>
206 /> 206 <img
207 <img 207 slot="activator"
208 style="cursor:pointer;width:20px; height:20px; " 208 style="cursor:pointer; width:20px; height:18px; "
209 class="mr-5" 209 class="mr5"
210 @click="deleteItem(props.item)" 210 @click="editItem(props.item)"
211 src="/static/icon/delete1.png" 211 src="/static/icon/edit1.png"
212 /> 212 />
213 <span>Edit</span>
214 </v-tooltip>
215 <v-tooltip top>
216 <img
217 slot="activator"
218 style="cursor:pointer; width:20px; height:20px; "
219 class="mr5"
220 @click="deleteItem(props.item)"
221 src="/static/icon/delete1.png"
222 />
223 <span>Delete</span>
224 </v-tooltip>
213 </span> 225 </span>
214 </td> 226 </td>
215 </template> 227 </template>
216 <v-alert 228 <v-alert
217 slot="no-results" 229 slot="no-results"
218 :value="true" 230 :value="true"
219 color="error" 231 color="error"
220 icon="warning" 232 icon="warning"
221 >Your search for "{{ search }}" found no results.</v-alert> 233 >Your search for "{{ search }}" found no results.</v-alert>
222 </v-data-table> 234 </v-data-table>
223 </v-tab-item> 235 </v-tab-item>
224 236
225 <!-- ****** ADD MULTIPLE EVENT ****** --> 237 <!-- ****** ADD MULTIPLE EVENT ****** -->
226 238
227 <v-tab-item> 239 <v-tab-item>
228 <v-container> 240 <v-container>
229 <v-snackbar 241 <v-snackbar
230 :timeout="timeout" 242 :timeout="timeout"
231 :top="y === 'top'" 243 :top="y === 'top'"
232 :right="x === 'right'" 244 :right="x === 'right'"
233 :vertical="mode === 'vertical'" 245 :vertical="mode === 'vertical'"
234 v-model="snackbar" 246 v-model="snackbar"
235 color="success" 247 color="success"
236 >{{ text }}</v-snackbar> 248 >{{ text }}</v-snackbar>
237 <v-flex xs12 sm12 md8 offset-md2 class="top"> 249 <v-flex xs12 sm12 md8 offset-md2 class="top">
238 <v-card flat> 250 <v-card flat>
239 <v-form ref="form" v-model="valid" lazy-validation> 251 <v-form ref="form" v-model="valid" lazy-validation>
240 <v-container fluid> 252 <v-container fluid>
241 <v-flex xs12> 253 <v-flex xs12>
242 <v-layout> 254 <v-layout>
243 <v-flex xs4 class="pt-4 subheading"> 255 <v-flex xs4 class="pt-4 subheading">
244 <label class="right">Title:</label> 256 <label class="right">Title:</label>
245 </v-flex> 257 </v-flex>
246 <v-flex xs8 sm6 class="ml-3"> 258 <v-flex xs8 sm6 class="ml-3">
247 <v-text-field 259 <v-text-field
248 v-model="addEvent.title" 260 v-model="addEvent.title"
249 placeholder="fill your Title" 261 placeholder="fill your Title"
250 type="text" 262 type="text"
251 :rules="titleRules" 263 :rules="titleRules"
252 required 264 required
253 ></v-text-field> 265 ></v-text-field>
254 </v-flex> 266 </v-flex>
255 </v-layout> 267 </v-layout>
256 </v-flex> 268 </v-flex>
257 <v-flex xs12> 269 <v-flex xs12>
258 <v-layout> 270 <v-layout>
259 <v-flex xs4 class="pt-4 subheading"> 271 <v-flex xs4 class="pt-4 subheading">
260 <label class="right">Date:</label> 272 <label class="right">Date:</label>
261 </v-flex> 273 </v-flex>
262 <v-flex xs8 sm6 class="ml-3"> 274 <v-flex xs8 sm6 class="ml-3">
263 <v-menu 275 <v-menu
264 ref="menu1" 276 ref="menu1"
265 :close-on-content-click="false" 277 :close-on-content-click="false"
266 v-model="menu1" 278 v-model="menu1"
267 :nudge-right="40" 279 :nudge-right="40"
268 :return-value.sync="addEvent.dateOfEvent" 280 :return-value.sync="addEvent.dateOfEvent"
269 app 281 app
270 lazy 282 lazy
271 transition="scale-transition" 283 transition="scale-transition"
272 offset-y 284 offset-y
273 full-width 285 full-width
274 min-width="290px" 286 min-width="290px"
275 > 287 >
276 <v-text-field 288 <v-text-field
277 slot="activator" 289 slot="activator"
278 :rules="dateRules" 290 :rules="dateRules"
279 v-model="addEvent.dateOfEvent" 291 v-model="addEvent.dateOfEvent"
280 append-icon="event" 292 append-icon="event"
281 placeholder="Select date" 293 placeholder="Select date"
282 ></v-text-field> 294 ></v-text-field>
283 <v-date-picker 295 <v-date-picker
284 color="info" 296 color="info"
285 v-model="addEvent.dateOfEvent" 297 v-model="addEvent.dateOfEvent"
286 @input="$refs.menu1.save(addEvent.dateOfEvent)" 298 @input="$refs.menu1.save(addEvent.dateOfEvent)"
287 ></v-date-picker> 299 ></v-date-picker>
288 </v-menu> 300 </v-menu>
289 </v-flex> 301 </v-flex>
290 </v-layout> 302 </v-layout>
291 </v-flex> 303 </v-flex>
292 <v-flex xs12> 304 <v-flex xs12>
293 <v-layout> 305 <v-layout>
294 <v-flex xs4 class="pt-4 subheading"> 306 <v-flex xs4 class="pt-4 subheading">
295 <label class="right">Description:</label> 307 <label class="right">Description:</label>
296 </v-flex> 308 </v-flex>
297 <v-flex xs8 sm6 class="ml-3"> 309 <v-flex xs8 sm6 class="ml-3">
298 <v-text-field 310 <v-text-field
299 placeholder="fill your Description" 311 placeholder="fill your Description"
300 :rules="descriptionRules" 312 :rules="descriptionRules"
301 v-model="addEvent.description" 313 v-model="addEvent.description"
302 type="text" 314 type="text"
303 required 315 required
304 ></v-text-field> 316 ></v-text-field>
305 </v-flex> 317 </v-flex>
306 </v-layout> 318 </v-layout>
307 </v-flex> 319 </v-flex>
308 <v-layout> 320 <v-layout>
309 <v-flex xs12 sm9 offset-sm2> 321 <v-flex xs12 sm9 offset-sm2>
310 <v-layout> 322 <v-layout>
311 <v-flex xs6> 323 <v-flex xs6>
312 <v-btn @click="clear" round class="ml-3" dark>clear</v-btn> 324 <v-btn @click="clear" round class="ml-3" dark>clear</v-btn>
313 </v-flex> 325 </v-flex>
314 <v-flex xs6> 326 <v-flex xs6>
315 <v-btn @click="submit" round dark :loading="loading" class="right">Add</v-btn> 327 <v-btn @click="submit" round dark :loading="loading" class="right">Add</v-btn>
316 </v-flex> 328 </v-flex>
317 </v-layout> 329 </v-layout>
318 </v-flex> 330 </v-flex>
319 </v-layout> 331 </v-layout>
320 </v-container> 332 </v-container>
321 </v-form> 333 </v-form>
322 </v-card> 334 </v-card>
323 </v-flex> 335 </v-flex>
324 </v-container> 336 </v-container>
325 </v-tab-item> 337 </v-tab-item>
326 </v-tabs> 338 </v-tabs>
327 <div class="loader" v-if="showLoader"> 339 <div class="loader" v-if="showLoader">
328 <v-progress-circular indeterminate color="white"></v-progress-circular> 340 <v-progress-circular indeterminate color="white"></v-progress-circular>
329 </div> 341 </div>
330 </v-app> 342 </v-app>
331 </template> 343 </template>
332 344
333 <script> 345 <script>
334 import http from "@/Services/http.js"; 346 import http from "@/Services/http.js";
335 import Util from "@/util"; 347 import Util from "@/util";
336 import moment from "moment"; 348 import moment from "moment";
337 349
338 export default { 350 export default {
339 data: () => ({ 351 data: () => ({
340 snackbar: false, 352 snackbar: false,
341 y: "top", 353 y: "top",
342 x: "right", 354 x: "right",
343 mode: "", 355 mode: "",
344 timeout: 3000, 356 timeout: 3000,
345 text: "", 357 text: "",
346 loading: false, 358 loading: false,
347 date: null, 359 date: null,
348 search: "", 360 search: "",
349 showLoader: false, 361 showLoader: false,
350 dialog: false, 362 dialog: false,
351 dialog1: false, 363 dialog1: false,
352 valid: true, 364 valid: true,
353 isActive: true, 365 isActive: true,
354 newActive: false, 366 newActive: false,
355 pagination: { 367 pagination: {
356 rowsPerPage: 15 368 rowsPerPage: 15
357 }, 369 },
358 date: null, 370 date: null,
359 menu1: false, 371 menu1: false,
360 menu: false, 372 menu: false,
361 titleRules: [v => !!v || " Tilte is required"], 373 titleRules: [v => !!v || " Tilte is required"],
362 descriptionRules: [v => !!v || " Discription is required"], 374 descriptionRules: [v => !!v || " Discription is required"],
363 dateRules: [v => !!v || "Date is required"], 375 dateRules: [v => !!v || "Date is required"],
364 headers: [ 376 headers: [
365 { 377 {
366 text: "No", 378 text: "No",
367 align: "center", 379 align: "center",
368 sortable: false, 380 sortable: false,
369 value: "No" 381 value: "No"
370 }, 382 },
371 { text: "Title", value: "title", sortable: false, align: "center" }, 383 { text: "Title", value: "title", sortable: false, align: "center" },
372 { text: "Date", value: "date", sortable: false, align: "center" }, 384 { text: "Date", value: "date", sortable: false, align: "center" },
373 385
374 { 386 {
375 text: "Description", 387 text: "Description",
376 value: "description", 388 value: "description",
377 sortable: false, 389 sortable: false,
378 align: "center" 390 align: "center"
379 }, 391 },
380 { text: "Action", value: "", sortable: false, align: "center" } 392 { text: "Action", value: "", sortable: false, align: "center" }
381 ], 393 ],
382 desserts: [], 394 desserts: [],
383 editedIndex: -1, 395 editedIndex: -1,
384 addEvent: {}, 396 addEvent: {},
385 editedItem: {} 397 editedItem: {}
386 }), 398 }),
387 methods: { 399 methods: {
388 dates: function(date) { 400 dates: function(date) {
389 return moment(date).format("MMMM DD, YYYY"); 401 return moment(date).format("MMMM DD, YYYY");
390 }, 402 },
391 getEvents() { 403 getEvents() {
392 this.showLoader = true; 404 this.showLoader = true;
393 var token = this.$store.state.token; 405 var token = this.$store.state.token;
394 http() 406 http()
395 .get("/getSchoolEventsList", { 407 .get("/getSchoolEventsList", {
396 headers: { Authorization: "Bearer " + token } 408 headers: { Authorization: "Bearer " + token }
397 }) 409 })
398 .then(response => { 410 .then(response => {
399 this.desserts = response.data.data; 411 this.desserts = response.data.data;
400 this.showLoader = false; 412 this.showLoader = false;
401 }) 413 })
402 .catch(err => { 414 .catch(err => {
403 // console.log("err====>", err); 415 // console.log("err====>", err);
404 this.showLoader = false; 416 this.showLoader = false;
405 if (error.response.status === 401) { 417 if (error.response.status === 401) {
406 this.$router.replace({ path: "/" }); 418 this.$router.replace({ path: "/" });
407 this.$store.dispatch("setToken", null); 419 this.$store.dispatch("setToken", null);
408 this.$store.dispatch("Id", null); 420 this.$store.dispatch("Id", null);
409 } 421 }
410 }); 422 });
411 }, 423 },
412 editItem(item) { 424 editItem(item) {
413 this.editedIndex = this.desserts.indexOf(item); 425 this.editedIndex = this.desserts.indexOf(item);
414 this.editedItem = Object.assign({}, item); 426 this.editedItem = Object.assign({}, item);
415 this.editedItem.schoolEventId = item._id; 427 this.editedItem.schoolEventId = item._id;
416 this.dialog = true; 428 this.dialog = true;
417 }, 429 },
418 profile(item) { 430 profile(item) {
419 this.editedIndex = this.desserts.indexOf(item); 431 this.editedIndex = this.desserts.indexOf(item);
420 this.editedItem = Object.assign({}, item); 432 this.editedItem = Object.assign({}, item);
421 this.dialog1 = true; 433 this.dialog1 = true;
422 }, 434 },
423 435
424 deleteItem(item) { 436 deleteItem(item) {
425 let deleteEvent = { 437 let deleteEvent = {
426 schoolEventId: item._id 438 schoolEventId: item._id
427 }; 439 };
428 http() 440 http()
429 .delete( 441 .delete(
430 "/deleteSchoolEvent", 442 "/deleteSchoolEvent",
431 confirm("Are you sure you want to delete this?") && { 443 confirm("Are you sure you want to delete this?") && {
432 params: deleteEvent 444 params: deleteEvent
433 } 445 }
434 ) 446 )
435 .then(response => { 447 .then(response => {
436 if ((this.snackbar = true)) { 448 if ((this.snackbar = true)) {
437 this.text = response.data.message; 449 this.text = response.data.message;
438 } 450 }
439 this.getEvents(); 451 this.getEvents();
440 }) 452 })
441 .catch(error => { 453 .catch(error => {
442 console.log(error); 454 console.log(error);
443 }); 455 });
444 }, 456 },
445 activeTab(type) { 457 activeTab(type) {
446 switch (type) { 458 switch (type) {
447 case "existing": 459 case "existing":
448 this.newActive = false; 460 this.newActive = false;
449 this.isActive = true; 461 this.isActive = true;
450 break; 462 break;
451 463
452 default: 464 default:
453 this.newActive = true; 465 this.newActive = true;
454 this.isActive = false; 466 this.isActive = false;
455 break; 467 break;
456 } 468 }
457 }, 469 },
458 close() { 470 close() {
459 this.dialog = false; 471 this.dialog = false;
460 setTimeout(() => { 472 setTimeout(() => {
461 this.editedItem = Object.assign({}, this.defaultItem); 473 this.editedItem = Object.assign({}, this.defaultItem);
462 this.editedIndex = -1; 474 this.editedIndex = -1;
463 }, 300); 475 }, 300);
464 }, 476 },
465 close1() { 477 close1() {
466 this.dialog1 = false; 478 this.dialog1 = false;
467 }, 479 },
468 submit() { 480 submit() {
469 if (this.$refs.form.validate()) { 481 if (this.$refs.form.validate()) {
470 this.loading = true; 482 this.loading = true;
471 http() 483 http()
472 .post("/createSchoolEvent", this.addEvent) 484 .post("/createSchoolEvent", this.addEvent)
473 .then(response => { 485 .then(response => {
474 if ((this.snackbar = true)) { 486 if ((this.snackbar = true)) {
475 this.text = response.data.message; 487 this.text = response.data.message;
476 } 488 }
477 this.getEvents(); 489 this.getEvents();
478 this.clear(); 490 this.clear();
479 this.loading = false; 491 this.loading = false;
480 }) 492 })
481 .catch(error => { 493 .catch(error => {
482 if ((this.snackbar = true)) { 494 if ((this.snackbar = true)) {
483 this.text = error.response.data.message; 495 this.text = error.response.data.message;
484 } 496 }
485 this.loading = false; 497 this.loading = false;
486 }); 498 });
487 } 499 }
488 }, 500 },
489 clear() { 501 clear() {
490 this.$refs.form.reset(); 502 this.$refs.form.reset();
491 }, 503 },
492 save() { 504 save() {
493 http() 505 http()
494 .put("/updateSchoolEvent", this.editedItem) 506 .put("/updateSchoolEvent", this.editedItem)
495 .then(response => { 507 .then(response => {
496 this.snackbar = true; 508 this.snackbar = true;
497 this.text = response.data.message; 509 this.text = response.data.message;
498 this.getEvents(); 510 this.getEvents();
499 this.close(); 511 this.close();
500 }) 512 })
501 .catch(error => { 513 .catch(error => {
502 // console.log(error); 514 // console.log(error);
503 }); 515 });
504 } 516 }
505 }, 517 },
506 mounted() { 518 mounted() {
507 this.getEvents(); 519 this.getEvents();
508 }, 520 },
509 created() { 521 created() {
src/pages/Exam/exam.vue
Diff comments   View file @495e403
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 Exam</v-tab> 10 >Existing Exam</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 Exam</v-tab> 18 >Add Exam</v-tab>
19 19
20 <!-- ****** EDIT EXAM ****** --> 20 <!-- ****** EDIT EXAM ****** -->
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" scrollable> 31 <v-dialog v-model="dialog" max-width="600px" 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 Exam</h3> 36 <h3>Edit Exam</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:360px;"> 40 <v-card-text style="height:360px;">
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">Exam Name:</label> 47 <label class="right">Exam Name:</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 placeholder="fill your Serial Number" 51 placeholder="fill your Serial Number"
52 v-model="editedItem.examName" 52 v-model="editedItem.examName"
53 type="text" 53 type="text"
54 ></v-text-field> 54 ></v-text-field>
55 </v-flex> 55 </v-flex>
56 </v-layout> 56 </v-layout>
57 </v-flex> 57 </v-flex>
58 <v-flex xs12 sm12> 58 <v-flex xs12 sm12>
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">Date:</label> 61 <label class="right">Date:</label>
62 </v-flex> 62 </v-flex>
63 <v-flex xs5 class="ml-3"> 63 <v-flex xs5 class="ml-3">
64 <v-menu 64 <v-menu
65 ref="menu1" 65 ref="menu1"
66 :close-on-content-click="false" 66 :close-on-content-click="false"
67 v-model="menu1" 67 v-model="menu1"
68 :nudge-right="40" 68 :nudge-right="40"
69 :return-value.sync="menu1" 69 :return-value.sync="menu1"
70 lazy 70 lazy
71 transition="scale-transition" 71 transition="scale-transition"
72 offset-y 72 offset-y
73 full-width 73 full-width
74 min-width="290px" 74 min-width="290px"
75 > 75 >
76 <v-text-field 76 <v-text-field
77 slot="activator" 77 slot="activator"
78 v-model="editedItem.date" 78 v-model="editedItem.date"
79 label="Select Date" 79 label="Select Date"
80 append-icon="event" 80 append-icon="event"
81 readonly 81 readonly
82 ></v-text-field> 82 ></v-text-field>
83 <v-date-picker v-model="editedItem.date" @input="menu1 = false"></v-date-picker> 83 <v-date-picker v-model="editedItem.date" @input="menu1 = false"></v-date-picker>
84 </v-menu> 84 </v-menu>
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">Note:</label> 91 <label class="right">Note:</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 Serial Number" 95 placeholder="fill your Serial Number"
96 v-model="editedItem.note" 96 v-model="editedItem.note"
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-layout> 102 </v-layout>
103 <v-layout> 103 <v-layout>
104 <v-flex xs12 sm8 offset-sm2> 104 <v-flex xs12 sm8 offset-sm2>
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-flex> 110 </v-flex>
111 </v-layout> 111 </v-layout>
112 </v-container> 112 </v-container>
113 </v-form> 113 </v-form>
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 PARTICULAR EXAM DATA ****** --> 118 <!-- ****** PROFILE VIEW PARTICULAR EXAM DATA ****** -->
119 119
120 <v-dialog v-model="dialog1" max-width="600px"> 120 <v-dialog v-model="dialog1" max-width="600px">
121 <v-card> 121 <v-card>
122 <v-toolbar color="grey lighten-2" flat> 122 <v-toolbar color="grey lighten-2" flat>
123 <v-spacer></v-spacer> 123 <v-spacer></v-spacer>
124 <v-toolbar-title> 124 <v-toolbar-title>
125 <h3>Exam</h3> 125 <h3>Exam</h3>
126 </v-toolbar-title> 126 </v-toolbar-title>
127 <v-spacer></v-spacer> 127 <v-spacer></v-spacer>
128 <v-icon @click="close1">close</v-icon> 128 <v-icon @click="close1">close</v-icon>
129 </v-toolbar> 129 </v-toolbar>
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>Exam Name:</b> 137 <b>Exam 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.examName }}</h5> 141 <h5 class="my-1">{{ editedItem.examName }}</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>Date:</b> 147 <b>Date:</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">{{ dates(editedItem.date) }}</h5> 151 <h5 class="my-1">{{ dates(editedItem.date) }}</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>Note:</b> 157 <b>Note:</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.note }}</h5> 161 <h5 class="my-1">{{ editedItem.note }}</h5>
162 </v-flex> 162 </v-flex>
163 </v-layout> 163 </v-layout>
164 </v-flex> 164 </v-flex>
165 </v-layout> 165 </v-layout>
166 </v-container> 166 </v-container>
167 </v-card-text> 167 </v-card-text>
168 </v-card> 168 </v-card>
169 </v-dialog> 169 </v-dialog>
170 170
171 <v-snackbar 171 <v-snackbar
172 :timeout="timeout" 172 :timeout="timeout"
173 :top="y === 'top'" 173 :top="y === 'top'"
174 :right="x === 'right'" 174 :right="x === 'right'"
175 :vertical="mode === 'vertical'" 175 :vertical="mode === 'vertical'"
176 v-model="snackbar" 176 v-model="snackbar"
177 color="success" 177 color="success"
178 >{{ text }}</v-snackbar> 178 >{{ text }}</v-snackbar>
179 179
180 <!-- ****** EXISTING EXAM TABLE****** --> 180 <!-- ****** EXISTING EXAM TABLE****** -->
181 <v-card></v-card> 181 <v-card></v-card>
182 <v-data-table 182 <v-data-table
183 :headers="headers" 183 :headers="headers"
184 :items="examData" 184 :items="examData"
185 :pagination.sync="pagination" 185 :pagination.sync="pagination"
186 :search="search" 186 :search="search"
187 > 187 >
188 <template slot="items" slot-scope="props"> 188 <template slot="items" slot-scope="props">
189 <td class="text-xs-center">{{ props.index + 1}}</td> 189 <td class="text-xs-center">{{ props.index + 1}}</td>
190 <!-- <td id="td" class="text-xs-center">{{ props.item.bookId.name}}</td> --> 190 <!-- <td id="td" class="text-xs-center">{{ props.item.bookId.name}}</td> -->
191 <td id="td" class="text-xs-center">{{ props.item.examName}}</td> 191 <td id="td" class="text-xs-center">{{ props.item.examName}}</td>
192 <td id="td" class="text-xs-center">{{ dates(props.item.date) }}</td> 192 <td id="td" class="text-xs-center">{{ dates(props.item.date) }}</td>
193 <td id="td" class="text-xs-center">{{ props.item.note}}</td> 193 <td id="td" class="text-xs-center">{{ props.item.note}}</td>
194 <td class="text-xs-center"> 194 <td class="text-xs-center">
195 <span> 195 <span>
196 <img 196 <v-tooltip top>
197 style="cursor:pointer; width:25px; height:18px; " 197 <img
198 class="mr-5" 198 slot="activator"
199 @click="profile(props.item)" 199 style="cursor:pointer; width:25px; height:18px; "
200 src="/static/icon/eye1.png" 200 class="mr5"
201 /> 201 @click="profile(props.item)"
202 <img 202 src="/static/icon/eye1.png"
203 style="cursor:pointer; width:20px; height:18px; " 203 />
204 class="mr-5" 204 <span>View</span>
205 @click="editItem(props.item)" 205 </v-tooltip>
206 src="/static/icon/edit1.png" 206 <v-tooltip top>
207 /> 207 <img
208 <img 208 slot="activator"
209 style="cursor:pointer;width:20px; height:20px; " 209 style="cursor:pointer; width:20px; height:18px; "
210 class="mr-5" 210 class="mr5"
211 @click="deleteExam(props.item)" 211 @click="editItem(props.item)"
212 src="/static/icon/delete1.png" 212 src="/static/icon/edit1.png"
213 /> 213 />
214 <span>Edit</span>
215 </v-tooltip>
216 <v-tooltip top>
217 <img
218 slot="activator"
219 style="cursor:pointer; width:20px; height:20px; "
220 class="mr5"
221 @click="deleteItem(props.item)"
222 src="/static/icon/delete1.png"
223 />
224 <span>Delete</span>
225 </v-tooltip>
214 </span> 226 </span>
215 </td> 227 </td>
216 </template> 228 </template>
217 <v-alert 229 <v-alert
218 slot="no-results" 230 slot="no-results"
219 :value="true" 231 :value="true"
220 color="error" 232 color="error"
221 icon="warning" 233 icon="warning"
222 >Your search for "{{ search }}" found no results.</v-alert> 234 >Your search for "{{ search }}" found no results.</v-alert>
223 </v-data-table> 235 </v-data-table>
224 </v-tab-item> 236 </v-tab-item>
225 237
226 <!-- ****** ADD EXAM ****** --> 238 <!-- ****** ADD EXAM ****** -->
227 239
228 <v-tab-item> 240 <v-tab-item>
229 <v-container> 241 <v-container>
230 <v-snackbar 242 <v-snackbar
231 :timeout="timeout" 243 :timeout="timeout"
232 :top="y === 'top'" 244 :top="y === 'top'"
233 :right="x === 'right'" 245 :right="x === 'right'"
234 :vertical="mode === 'vertical'" 246 :vertical="mode === 'vertical'"
235 v-model="snackbar" 247 v-model="snackbar"
236 :color="color" 248 :color="color"
237 >{{ text }}</v-snackbar> 249 >{{ text }}</v-snackbar>
238 <v-flex xs12 sm12 class="my-4"> 250 <v-flex xs12 sm12 class="my-4">
239 <v-card flat> 251 <v-card flat>
240 <v-form ref="form" v-model="valid" lazy-validation> 252 <v-form ref="form" v-model="valid" lazy-validation>
241 <v-container fluid> 253 <v-container fluid>
242 <v-flex xs12> 254 <v-flex xs12>
243 <v-layout> 255 <v-layout>
244 <v-flex xs4 class="pt-4 subheading"> 256 <v-flex xs4 class="pt-4 subheading">
245 <label class="right hidden-xs-only">Exam Name:</label> 257 <label class="right hidden-xs-only">Exam Name:</label>
246 <label 258 <label
247 class="right hidden-sm-only hidden-md-only hidden-lg-only hidden-xl-only" 259 class="right hidden-sm-only hidden-md-only hidden-lg-only hidden-xl-only"
248 >ExamName:</label> 260 >ExamName:</label>
249 </v-flex> 261 </v-flex>
250 <v-flex xs8 sm6 md4 class="ml-3"> 262 <v-flex xs8 sm6 md4 class="ml-3">
251 <v-text-field 263 <v-text-field
252 placeholder="fill your Exam Name" 264 placeholder="fill your Exam Name"
253 :rules="authorRules" 265 :rules="authorRules"
254 v-model="addExam.examName" 266 v-model="addExam.examName"
255 ></v-text-field> 267 ></v-text-field>
256 </v-flex> 268 </v-flex>
257 </v-layout> 269 </v-layout>
258 </v-flex> 270 </v-flex>
259 <v-flex xs12> 271 <v-flex xs12>
260 <v-layout> 272 <v-layout>
261 <v-flex xs4 class="pt-4 subheading"> 273 <v-flex xs4 class="pt-4 subheading">
262 <label class="right">Date:</label> 274 <label class="right">Date:</label>
263 </v-flex> 275 </v-flex>
264 <v-flex xs8 sm6 md4 class="ml-3"> 276 <v-flex xs8 sm6 md4 class="ml-3">
265 <v-menu 277 <v-menu
266 ref="menu2" 278 ref="menu2"
267 :close-on-content-click="false" 279 :close-on-content-click="false"
268 v-model="menu2" 280 v-model="menu2"
269 :nudge-right="40" 281 :nudge-right="40"
270 :return-value.sync="addExam.date" 282 :return-value.sync="addExam.date"
271 lazy 283 lazy
272 transition="scale-transition" 284 transition="scale-transition"
273 offset-y 285 offset-y
274 full-width 286 full-width
275 min-width="290px" 287 min-width="290px"
276 > 288 >
277 <v-text-field 289 <v-text-field
278 slot="activator" 290 slot="activator"
279 v-model="addExam.date" 291 v-model="addExam.date"
280 label="Select Date" 292 label="Select Date"
281 append-icon="event" 293 append-icon="event"
282 readonly 294 readonly
283 ></v-text-field> 295 ></v-text-field>
284 <v-date-picker 296 <v-date-picker
285 v-model="addExam.date" 297 v-model="addExam.date"
286 @input="$refs.menu2.save(addExam.date)" 298 @input="$refs.menu2.save(addExam.date)"
287 ></v-date-picker> 299 ></v-date-picker>
288 </v-menu> 300 </v-menu>
289 </v-flex> 301 </v-flex>
290 </v-layout> 302 </v-layout>
291 </v-flex> 303 </v-flex>
292 <v-flex xs12> 304 <v-flex xs12>
293 <v-layout> 305 <v-layout>
294 <v-flex xs4 class="pt-4 subheading"> 306 <v-flex xs4 class="pt-4 subheading">
295 <label class="right">Note:</label> 307 <label class="right">Note:</label>
296 </v-flex> 308 </v-flex>
297 <v-flex xs8 sm6 md4 class="ml-3"> 309 <v-flex xs8 sm6 md4 class="ml-3">
298 <v-text-field 310 <v-text-field
299 placeholder="fill your Note" 311 placeholder="fill your Note"
300 :rules="noteRules" 312 :rules="noteRules"
301 v-model="addExam.note" 313 v-model="addExam.note"
302 ></v-text-field> 314 ></v-text-field>
303 </v-flex> 315 </v-flex>
304 </v-layout> 316 </v-layout>
305 </v-flex> 317 </v-flex>
306 <v-layout> 318 <v-layout>
307 <v-flex xs12 sm6 offset-sm3> 319 <v-flex xs12 sm6 offset-sm3>
308 <v-card-actions> 320 <v-card-actions>
309 <v-btn @click="clear" round dark>clear</v-btn> 321 <v-btn @click="clear" round dark>clear</v-btn>
310 <v-spacer class="hidden-xs-only"></v-spacer> 322 <v-spacer class="hidden-xs-only"></v-spacer>
311 <v-btn @click="submit" round dark :loading="loading">Add</v-btn> 323 <v-btn @click="submit" round dark :loading="loading">Add</v-btn>
312 </v-card-actions> 324 </v-card-actions>
313 </v-flex> 325 </v-flex>
314 </v-layout> 326 </v-layout>
315 </v-container> 327 </v-container>
316 </v-form> 328 </v-form>
317 </v-card> 329 </v-card>
318 </v-flex> 330 </v-flex>
319 </v-container> 331 </v-container>
320 </v-tab-item> 332 </v-tab-item>
321 </v-tabs> 333 </v-tabs>
322 <div class="loader" v-if="showLoader"> 334 <div class="loader" v-if="showLoader">
323 <v-progress-circular indeterminate color="white"></v-progress-circular> 335 <v-progress-circular indeterminate color="white"></v-progress-circular>
324 </div> 336 </div>
325 </v-app> 337 </v-app>
326 </template> 338 </template>
327 339
328 <script> 340 <script>
329 import http from "@/Services/http.js"; 341 import http from "@/Services/http.js";
330 import moment from "moment"; 342 import moment from "moment";
331 343
332 export default { 344 export default {
333 data: () => ({ 345 data: () => ({
334 snackbar: false, 346 snackbar: false,
335 date: null, 347 date: null,
336 menu1: false, 348 menu1: false,
337 menu2: false, 349 menu2: false,
338 color: "", 350 color: "",
339 y: "top", 351 y: "top",
340 x: "right", 352 x: "right",
341 mode: "", 353 mode: "",
342 timeout: 10000, 354 timeout: 10000,
343 text: "", 355 text: "",
344 libraryId: "", 356 libraryId: "",
345 loading: false, 357 loading: false,
346 loadingSearch: false, 358 loadingSearch: false,
347 date: null, 359 date: null,
348 search: "", 360 search: "",
349 showLoader: false, 361 showLoader: false,
350 dialog: false, 362 dialog: false,
351 dialog1: false, 363 dialog1: false,
352 valid: true, 364 valid: true,
353 isActive: true, 365 isActive: true,
354 newActive: false, 366 newActive: false,
355 // addclass: [], 367 // addclass: [],
356 // addSection: [], 368 // addSection: [],
357 // AddUsercredentials: {}, 369 // AddUsercredentials: {},
358 pagination: { 370 pagination: {
359 rowsPerPage: 15 371 rowsPerPage: 15
360 }, 372 },
361 libraryIDRules: [v => !!v || " Library ID is required"], 373 libraryIDRules: [v => !!v || " Library ID is required"],
362 bookRules: [v => !!v || " book Name is required"], 374 bookRules: [v => !!v || " book Name is required"],
363 authorRules: [v => !!v || "Author Name is required"], 375 authorRules: [v => !!v || "Author Name is required"],
364 subjectCodeRules: [v => !!v || "Subject Code is required"], 376 subjectCodeRules: [v => !!v || "Subject Code is required"],
365 authorRules: [v => !!v || "Author is required"], 377 authorRules: [v => !!v || "Author is required"],
366 noteRules: [v => !!v || "Note is required"], 378 noteRules: [v => !!v || "Note is required"],
367 headers: [ 379 headers: [
368 { 380 {
369 align: "justify-center", 381 align: "justify-center",
370 text: "No", 382 text: "No",
371 sortable: false, 383 sortable: false,
372 value: "No" 384 value: "No"
373 }, 385 },
374 { text: "Exam Name", vaue: "examName", sortable: false, align: "center" }, 386 { text: "Exam Name", vaue: "examName", sortable: false, align: "center" },
375 { 387 {
376 text: "Date", 388 text: "Date",
377 value: "date", 389 value: "date",
378 sortable: false, 390 sortable: false,
379 align: "center" 391 align: "center"
380 }, 392 },
381 { 393 {
382 text: "Note", 394 text: "Note",
383 value: "note", 395 value: "note",
384 sortable: false, 396 sortable: false,
385 align: "center" 397 align: "center"
386 }, 398 },
387 { text: "Action", value: "", sortable: false, align: "center" } 399 { text: "Action", value: "", sortable: false, align: "center" }
388 ], 400 ],
389 examData: [], 401 examData: [],
390 addExam: {}, 402 addExam: {},
391 editedItem: {}, 403 editedItem: {},
392 token: "" 404 token: ""
393 }), 405 }),
394 methods: { 406 methods: {
395 dates: function(date) { 407 dates: function(date) {
396 return moment(date).format("MMMM DD, YYYY"); 408 return moment(date).format("MMMM DD, YYYY");
397 }, 409 },
398 pickFile() { 410 pickFile() {
399 this.$refs.image.click(); 411 this.$refs.image.click();
400 }, 412 },
401 getExamList() { 413 getExamList() {
402 this.showLoader = true; 414 this.showLoader = true;
403 this.loadingSearch = true; 415 this.loadingSearch = true;
404 http() 416 http()
405 .get("/getExamsList", { 417 .get("/getExamsList", {
406 headers: { Authorization: "Bearer " + this.token } 418 headers: { Authorization: "Bearer " + this.token }
407 }) 419 })
408 .then(response => { 420 .then(response => {
409 this.examData = response.data.data; 421 this.examData = response.data.data;
410 this.showLoader = false; 422 this.showLoader = false;
411 this.loadingSearch = false; 423 this.loadingSearch = false;
412 }) 424 })
413 .catch(error => { 425 .catch(error => {
414 // console.log("err====>", err); 426 // console.log("err====>", err);
415 this.showLoader = false; 427 this.showLoader = false;
416 this.loadingSearch = false; 428 this.loadingSearch = false;
417 this.snackbar = true; 429 this.snackbar = true;
418 this.text = error.response.data.message; 430 this.text = error.response.data.message;
419 if (error.response.status === 401) { 431 if (error.response.status === 401) {
420 this.$router.replace({ path: "/" }); 432 this.$router.replace({ path: "/" });
421 this.$store.dispatch("setToken", null); 433 this.$store.dispatch("setToken", null);
422 this.$store.dispatch("Id", null); 434 this.$store.dispatch("Id", null);
423 } 435 }
424 }); 436 });
425 }, 437 },
426 editItem(item) { 438 editItem(item) {
427 console.log("item", item); 439 console.log("item", item);
428 this.editedIndex = this.examData.indexOf(item); 440 this.editedIndex = this.examData.indexOf(item);
429 this.editedItem = Object.assign({}, item); 441 this.editedItem = Object.assign({}, item);
430 this.editedItem.date = 442 this.editedItem.date =
431 this.editedItem.date != undefined 443 this.editedItem.date != undefined
432 ? (this.editedItem.date = this.editedItem.date.substring(0, 10)) 444 ? (this.editedItem.date = this.editedItem.date.substring(0, 10))
433 : (this.editedItem.date = ""); 445 : (this.editedItem.date = "");
434 this.dialog = true; 446 this.dialog = true;
435 }, 447 },
436 profile(item) { 448 profile(item) {
437 this.editedIndex = this.examData.indexOf(item); 449 this.editedIndex = this.examData.indexOf(item);
438 this.editedItem = Object.assign({}, item); 450 this.editedItem = Object.assign({}, item);
439 this.dialog1 = true; 451 this.dialog1 = true;
440 }, 452 },
441 deleteExam(item) { 453 deleteExam(item) {
442 let Exam = { 454 let Exam = {
443 examId: item._id 455 examId: item._id
444 }; 456 };
445 http() 457 http()
446 .delete( 458 .delete(
447 "/deleteExam", 459 "/deleteExam",
448 confirm("Are you sure you want to Delete this?") && { 460 confirm("Are you sure you want to Delete this?") && {
449 params: Exam 461 params: Exam
450 } 462 }
451 ) 463 )
452 .then(response => { 464 .then(response => {
453 this.snackbar = true; 465 this.snackbar = true;
454 this.text = "Successfully Delete Exam "; 466 this.text = "Successfully Delete Exam ";
455 this.getExamList(); 467 this.getExamList();
456 }) 468 })
457 .catch(error => { 469 .catch(error => {
458 // console.log(error); 470 // console.log(error);
459 }); 471 });
460 }, 472 },
461 activeTab(type) { 473 activeTab(type) {
462 switch (type) { 474 switch (type) {
463 case "existing": 475 case "existing":
464 this.newActive = false; 476 this.newActive = false;
465 this.isActive = true; 477 this.isActive = true;
466 break; 478 break;
467 479
468 default: 480 default:
469 this.newActive = true; 481 this.newActive = true;
470 this.isActive = false; 482 this.isActive = false;
471 break; 483 break;
472 } 484 }
473 }, 485 },
474 close() { 486 close() {
475 this.dialog = false; 487 this.dialog = false;
476 }, 488 },
477 close1() { 489 close1() {
478 this.dialog1 = false; 490 this.dialog1 = false;
479 }, 491 },
480 submit() { 492 submit() {
481 this.loading = true; 493 this.loading = true;
482 if (this.$refs.form.validate()) { 494 if (this.$refs.form.validate()) {
483 http() 495 http()
484 .post("/createExam", this.addExam) 496 .post("/createExam", this.addExam)
485 .then(response => { 497 .then(response => {
486 this.snackbar = true; 498 this.snackbar = true;
487 this.text = "New Exam added successfully"; 499 this.text = "New Exam added successfully";
488 this.getExamList(); 500 this.getExamList();
489 this.color = "succses"; 501 this.color = "succses";
490 this.loading = false; 502 this.loading = false;
491 this.clear(); 503 this.clear();
492 }) 504 })
493 .catch(error => { 505 .catch(error => {
494 if ((this.snackbar = true)) { 506 if ((this.snackbar = true)) {
495 this.text = error.response.data.message; 507 this.text = error.response.data.message;
496 this.color = "red"; 508 this.color = "red";
497 } 509 }
498 }); 510 });
499 } 511 }
500 }, 512 },
501 clear() { 513 clear() {
502 this.$refs.form.reset(); 514 this.$refs.form.reset();
503 this.disable = false; 515 this.disable = false;
504 }, 516 },
505 save() { 517 save() {
506 this.editedItem.examId = this.editedItem._id; 518 this.editedItem.examId = this.editedItem._id;
507 http() 519 http()
508 .put("/updateExam", this.editedItem) 520 .put("/updateExam", this.editedItem)
509 .then(response => { 521 .then(response => {
510 this.snackbar = true; 522 this.snackbar = true;
511 this.text = "Successfully Edit Exam"; 523 this.text = "Successfully Edit Exam";
512 this.color = "green"; 524 this.color = "green";
513 this.getExamList(); 525 this.getExamList();
514 this.close(); 526 this.close();
515 }) 527 })
516 .catch(error => { 528 .catch(error => {
517 this.snackbar = true; 529 this.snackbar = true;
518 this.text = error.response.data.message; 530 this.text = error.response.data.message;
519 this.color = "red"; 531 this.color = "red";
520 }); 532 });
521 } 533 }
522 }, 534 },
523 mounted() { 535 mounted() {
524 this.token = this.$store.state.token; 536 this.token = this.$store.state.token;
525 this.getExamList(); 537 this.getExamList();
526 }, 538 },
527 created() { 539 created() {
528 this.$root.$on("app:search", search => { 540 this.$root.$on("app:search", search => {
529 this.search = search; 541 this.search = search;
530 }); 542 });
531 }, 543 },
532 beforeDestroy() { 544 beforeDestroy() {
533 // dont forget to remove the listener 545 // dont forget to remove the listener
534 this.$root.$off("app:search"); 546 this.$root.$off("app:search");
535 } 547 }
536 }; 548 };
537 </script> 549 </script>
538 <style scoped> 550 <style scoped>
539 .active { 551 .active {
540 background-color: gray; 552 background-color: gray;
541 color: white !important; 553 color: white !important;
542 } 554 }
543 .activebtn { 555 .activebtn {
544 color: black !important; 556 color: black !important;
545 } 557 }
546 </style> 558 </style>
src/pages/Exam/examSchedule.vue
Diff comments   View file @495e403
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 Exam Schedule</v-tab> 10 >Existing Exam Schedule</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 Exam Schedule</v-tab> 18 >Add Exam Schedule</v-tab>
19 19
20 <!-- ****** Edit Exam Schedule****** --> 20 <!-- ****** Edit Exam Schedule****** -->
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="800px" scrollable> 31 <v-dialog v-model="dialog" max-width="800px" 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 Exam Schedule</h3> 36 <h3>Edit Exam Schedule</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:670px;"> 40 <v-card-text style="height:670px;">
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">Exam Name:</label> 47 <label class="right">Exam Name:</label>
48 </v-flex> 48 </v-flex>
49 <v-flex xs5 class="ml-3"> 49 <v-flex xs5 class="ml-3">
50 <v-select 50 <v-select
51 :rules="examNameRules" 51 :rules="examNameRules"
52 :items="examList" 52 :items="examList"
53 v-model="editedItem.examName" 53 v-model="editedItem.examName"
54 label="Select your Exam Name" 54 label="Select your Exam Name"
55 item-text="examName" 55 item-text="examName"
56 item-value="examName" 56 item-value="examName"
57 ></v-select> 57 ></v-select>
58 </v-flex> 58 </v-flex>
59 </v-layout> 59 </v-layout>
60 </v-flex> 60 </v-flex>
61 <v-flex xs12 sm12> 61 <v-flex xs12 sm12>
62 <v-layout> 62 <v-layout>
63 <v-flex xs4 class="pt-4 subheading"> 63 <v-flex xs4 class="pt-4 subheading">
64 <label class="right">Class:</label> 64 <label class="right">Class:</label>
65 </v-flex> 65 </v-flex>
66 <v-flex xs5 class="ml-3"> 66 <v-flex xs5 class="ml-3">
67 <v-select 67 <v-select
68 v-model="editedItem.classId" 68 v-model="editedItem.classId"
69 label="Select your Class" 69 label="Select your Class"
70 type="text" 70 type="text"
71 :items="classList" 71 :items="classList"
72 item-text="classNum" 72 item-text="classNum"
73 item-value="_id" 73 item-value="_id"
74 @change="getSections(editedItem.classId)" 74 @change="getSections(editedItem.classId)"
75 required 75 required
76 ></v-select> 76 ></v-select>
77 </v-flex> 77 </v-flex>
78 </v-layout> 78 </v-layout>
79 </v-flex> 79 </v-flex>
80 <v-flex xs12 sm12> 80 <v-flex xs12 sm12>
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">Section:</label> 83 <label class="right">Section:</label>
84 </v-flex> 84 </v-flex>
85 <v-flex xs5 class="ml-3"> 85 <v-flex xs5 class="ml-3">
86 <v-select 86 <v-select
87 :items="addSection" 87 :items="addSection"
88 label="Select your section" 88 label="Select your section"
89 v-model="editedItem.sectionId" 89 v-model="editedItem.sectionId"
90 item-text="name" 90 item-text="name"
91 item-value="_id" 91 item-value="_id"
92 name="Select Section" 92 name="Select Section"
93 required 93 required
94 ></v-select> 94 ></v-select>
95 </v-flex> 95 </v-flex>
96 </v-layout> 96 </v-layout>
97 </v-flex> 97 </v-flex>
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">Subject Name:</label> 101 <label class="right">Subject Name:</label>
102 </v-flex> 102 </v-flex>
103 <v-flex xs5 class="ml-3"> 103 <v-flex xs5 class="ml-3">
104 <v-select 104 <v-select
105 :items="subjects" 105 :items="subjects"
106 label="Select your Subject Name" 106 label="Select your Subject Name"
107 v-model="editedItem.subjectName" 107 v-model="editedItem.subjectName"
108 item-text="subjectName" 108 item-text="subjectName"
109 item-value="subjectName" 109 item-value="subjectName"
110 name="Select Section" 110 name="Select Section"
111 required 111 required
112 ></v-select> 112 ></v-select>
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">Date:</label> 119 <label class="right">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="editDate" 123 ref="editDate"
124 :close-on-content-click="false" 124 :close-on-content-click="false"
125 v-model="editDate" 125 v-model="editDate"
126 :nudge-right="40" 126 :nudge-right="40"
127 :return-value.sync="editDate" 127 :return-value.sync="editDate"
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.date" 136 v-model="editedItem.date"
137 label="Select Date" 137 label="Select 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.date" @input="editDate = false"></v-date-picker> 141 <v-date-picker v-model="editedItem.date" @input="editDate = 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">Time From:</label> 149 <label class="right">Time From:</label>
150 </v-flex> 150 </v-flex>
151 <v-flex xs5 class="ml-3"> 151 <v-flex xs5 class="ml-3">
152 <v-menu 152 <v-menu
153 ref="menuEdit" 153 ref="menuEdit"
154 :close-on-content-click="false" 154 :close-on-content-click="false"
155 v-model="menuEdit" 155 v-model="menuEdit"
156 :nudge-right="40" 156 :nudge-right="40"
157 :return-value.sync="editedItem.timeFrom" 157 :return-value.sync="editedItem.timeFrom"
158 lazy 158 lazy
159 transition="scale-transition" 159 transition="scale-transition"
160 offset-y 160 offset-y
161 full-width 161 full-width
162 max-width="290px" 162 max-width="290px"
163 min-width="290px" 163 min-width="290px"
164 > 164 >
165 <v-text-field 165 <v-text-field
166 slot="activator" 166 slot="activator"
167 v-model="editedItem.timeFrom" 167 v-model="editedItem.timeFrom"
168 label="Select your time From" 168 label="Select your time From"
169 append-icon="access_time" 169 append-icon="access_time"
170 ></v-text-field> 170 ></v-text-field>
171 <v-time-picker 171 <v-time-picker
172 v-model="editedItem.timeIn" 172 v-model="editedItem.timeIn"
173 @change="$refs.menuEdit.save(editedItem.timeIn)" 173 @change="$refs.menuEdit.save(editedItem.timeIn)"
174 ></v-time-picker> 174 ></v-time-picker>
175 </v-menu> 175 </v-menu>
176 </v-flex> 176 </v-flex>
177 </v-layout> 177 </v-layout>
178 </v-flex> 178 </v-flex>
179 <v-flex xs12 sm12> 179 <v-flex xs12 sm12>
180 <v-layout> 180 <v-layout>
181 <v-flex xs4 class="pt-4 subheading"> 181 <v-flex xs4 class="pt-4 subheading">
182 <label class="right">Time To:</label> 182 <label class="right">Time To:</label>
183 </v-flex> 183 </v-flex>
184 <v-flex xs5 class="ml-3"> 184 <v-flex xs5 class="ml-3">
185 <v-menu 185 <v-menu
186 ref="timeToEdit" 186 ref="timeToEdit"
187 :close-on-content-click="false" 187 :close-on-content-click="false"
188 v-model="timeToEdit" 188 v-model="timeToEdit"
189 :nudge-right="40" 189 :nudge-right="40"
190 :return-value.sync="editedItem.timeTo" 190 :return-value.sync="editedItem.timeTo"
191 lazy 191 lazy
192 transition="scale-transition" 192 transition="scale-transition"
193 offset-y 193 offset-y
194 full-width 194 full-width
195 max-width="290px" 195 max-width="290px"
196 min-width="290px" 196 min-width="290px"
197 > 197 >
198 <v-text-field 198 <v-text-field
199 slot="activator" 199 slot="activator"
200 v-model="editedItem.timeTo" 200 v-model="editedItem.timeTo"
201 label="Select your Time To" 201 label="Select your Time To"
202 append-icon="access_time" 202 append-icon="access_time"
203 ></v-text-field> 203 ></v-text-field>
204 <v-time-picker 204 <v-time-picker
205 v-model="editedItem.timeTo" 205 v-model="editedItem.timeTo"
206 @change="$refs.timeToEdit.save(editedItem.timeTo)" 206 @change="$refs.timeToEdit.save(editedItem.timeTo)"
207 ></v-time-picker> 207 ></v-time-picker>
208 </v-menu> 208 </v-menu>
209 </v-flex> 209 </v-flex>
210 </v-layout> 210 </v-layout>
211 </v-flex> 211 </v-flex>
212 <v-flex xs12 sm12> 212 <v-flex xs12 sm12>
213 <v-layout> 213 <v-layout>
214 <v-flex xs4 class="pt-4 subheading"> 214 <v-flex xs4 class="pt-4 subheading">
215 <label class="right">Room:</label> 215 <label class="right">Room:</label>
216 </v-flex> 216 </v-flex>
217 <v-flex xs5 class="ml-3"> 217 <v-flex xs5 class="ml-3">
218 <v-text-field 218 <v-text-field
219 placeholder="fill your room" 219 placeholder="fill your room"
220 v-model="editedItem.room" 220 v-model="editedItem.room"
221 @keyup.enter="save" 221 @keyup.enter="save"
222 ></v-text-field> 222 ></v-text-field>
223 </v-flex> 223 </v-flex>
224 </v-layout> 224 </v-layout>
225 </v-flex> 225 </v-flex>
226 </v-layout> 226 </v-layout>
227 <v-layout> 227 <v-layout>
228 <v-flex xs12 sm8 offset-sm2> 228 <v-flex xs12 sm8 offset-sm2>
229 <v-card-actions> 229 <v-card-actions>
230 <v-btn round dark @click.native="close">Close</v-btn> 230 <v-btn round dark @click.native="close">Close</v-btn>
231 <v-spacer></v-spacer> 231 <v-spacer></v-spacer>
232 <v-btn round dark @click="save">Save</v-btn> 232 <v-btn round dark @click="save">Save</v-btn>
233 </v-card-actions> 233 </v-card-actions>
234 </v-flex> 234 </v-flex>
235 </v-layout> 235 </v-layout>
236 </v-container> 236 </v-container>
237 </v-form> 237 </v-form>
238 </v-card-text> 238 </v-card-text>
239 </v-card> 239 </v-card>
240 </v-dialog> 240 </v-dialog>
241 241
242 <!-- ****** PROFILE VIEW Exam Schedule DATA ****** --> 242 <!-- ****** PROFILE VIEW Exam Schedule DATA ****** -->
243 243
244 <v-dialog v-model="dialog1" max-width="600px"> 244 <v-dialog v-model="dialog1" max-width="600px">
245 <v-card> 245 <v-card>
246 <v-toolbar color="grey lighten-2" flat> 246 <v-toolbar color="grey lighten-2" flat>
247 <v-spacer></v-spacer> 247 <v-spacer></v-spacer>
248 <v-toolbar-title> 248 <v-toolbar-title>
249 <h3>Exam Schedule</h3> 249 <h3>Exam Schedule</h3>
250 </v-toolbar-title> 250 </v-toolbar-title>
251 <v-spacer></v-spacer> 251 <v-spacer></v-spacer>
252 <v-icon @click="close1">close</v-icon> 252 <v-icon @click="close1">close</v-icon>
253 </v-toolbar> 253 </v-toolbar>
254 <v-card-text> 254 <v-card-text>
255 <v-container grid-list-md> 255 <v-container grid-list-md>
256 <v-layout wrap> 256 <v-layout wrap>
257 <v-flex> 257 <v-flex>
258 <v-layout> 258 <v-layout>
259 <v-flex xs5 sm6> 259 <v-flex xs5 sm6>
260 <h5 class="right my-1"> 260 <h5 class="right my-1">
261 <b>Exam Name:</b> 261 <b>Exam Name:</b>
262 </h5> 262 </h5>
263 </v-flex> 263 </v-flex>
264 <v-flex sm6 xs8> 264 <v-flex sm6 xs8>
265 <h5 class="my-1">{{ editedItem.examName }}</h5> 265 <h5 class="my-1">{{ editedItem.examName }}</h5>
266 </v-flex> 266 </v-flex>
267 </v-layout> 267 </v-layout>
268 <v-layout> 268 <v-layout>
269 <v-flex xs5 sm6> 269 <v-flex xs5 sm6>
270 <h5 class="right my-1"> 270 <h5 class="right my-1">
271 <b>Class:</b> 271 <b>Class:</b>
272 </h5> 272 </h5>
273 </v-flex> 273 </v-flex>
274 <v-flex sm6 xs8> 274 <v-flex sm6 xs8>
275 <h5 class="my-1">{{ editedItem.classId }}</h5> 275 <h5 class="my-1">{{ editedItem.classId }}</h5>
276 </v-flex> 276 </v-flex>
277 </v-layout> 277 </v-layout>
278 <v-layout> 278 <v-layout>
279 <v-flex xs5 sm6> 279 <v-flex xs5 sm6>
280 <h5 class="right my-1"> 280 <h5 class="right my-1">
281 <b>Section:</b> 281 <b>Section:</b>
282 </h5> 282 </h5>
283 </v-flex> 283 </v-flex>
284 <v-flex sm6 xs8> 284 <v-flex sm6 xs8>
285 <h5 class="my-1">{{ editedItem.sectionId }}</h5> 285 <h5 class="my-1">{{ editedItem.sectionId }}</h5>
286 </v-flex> 286 </v-flex>
287 </v-layout> 287 </v-layout>
288 <v-layout> 288 <v-layout>
289 <v-flex xs5 sm6> 289 <v-flex xs5 sm6>
290 <h5 class="right my-1"> 290 <h5 class="right my-1">
291 <b>Subject Name:</b> 291 <b>Subject Name:</b>
292 </h5> 292 </h5>
293 </v-flex> 293 </v-flex>
294 <v-flex sm6 xs8> 294 <v-flex sm6 xs8>
295 <h5 class="my-1">{{ editedItem.subjectName }}</h5> 295 <h5 class="my-1">{{ editedItem.subjectName }}</h5>
296 </v-flex> 296 </v-flex>
297 </v-layout> 297 </v-layout>
298 <v-layout> 298 <v-layout>
299 <v-flex xs5 sm6> 299 <v-flex xs5 sm6>
300 <h5 class="right my-1"> 300 <h5 class="right my-1">
301 <b>Date:</b> 301 <b>Date:</b>
302 </h5> 302 </h5>
303 </v-flex> 303 </v-flex>
304 <v-flex sm6 xs8> 304 <v-flex sm6 xs8>
305 <h5 class="my-1">{{ dates(editedItem.date) }}</h5> 305 <h5 class="my-1">{{ dates(editedItem.date) }}</h5>
306 </v-flex> 306 </v-flex>
307 </v-layout> 307 </v-layout>
308 <v-layout> 308 <v-layout>
309 <v-flex xs5 sm6> 309 <v-flex xs5 sm6>
310 <h5 class="right my-1"> 310 <h5 class="right my-1">
311 <b>Time From:</b> 311 <b>Time From:</b>
312 </h5> 312 </h5>
313 </v-flex> 313 </v-flex>
314 <v-flex sm6 xs8> 314 <v-flex sm6 xs8>
315 <h5 class="my-1">{{ editedItem.timeFrom }}</h5> 315 <h5 class="my-1">{{ editedItem.timeFrom }}</h5>
316 </v-flex> 316 </v-flex>
317 </v-layout> 317 </v-layout>
318 <v-layout> 318 <v-layout>
319 <v-flex xs5 sm6> 319 <v-flex xs5 sm6>
320 <h5 class="right my-1"> 320 <h5 class="right my-1">
321 <b>Time To:</b> 321 <b>Time To:</b>
322 </h5> 322 </h5>
323 </v-flex> 323 </v-flex>
324 <v-flex sm6 xs8> 324 <v-flex sm6 xs8>
325 <h5 class="my-1">{{ editedItem.timeTo }}</h5> 325 <h5 class="my-1">{{ editedItem.timeTo }}</h5>
326 </v-flex> 326 </v-flex>
327 </v-layout> 327 </v-layout>
328 <v-layout> 328 <v-layout>
329 <v-flex xs5 sm6> 329 <v-flex xs5 sm6>
330 <h5 class="right my-1"> 330 <h5 class="right my-1">
331 <b>Room:</b> 331 <b>Room:</b>
332 </h5> 332 </h5>
333 </v-flex> 333 </v-flex>
334 <v-flex sm6 xs8> 334 <v-flex sm6 xs8>
335 <h5 class="my-1">{{ editedItem.room }}</h5> 335 <h5 class="my-1">{{ editedItem.room }}</h5>
336 </v-flex> 336 </v-flex>
337 </v-layout> 337 </v-layout>
338 </v-flex> 338 </v-flex>
339 </v-layout> 339 </v-layout>
340 </v-container> 340 </v-container>
341 </v-card-text> 341 </v-card-text>
342 </v-card> 342 </v-card>
343 </v-dialog> 343 </v-dialog>
344 344
345 <v-snackbar 345 <v-snackbar
346 :timeout="timeout" 346 :timeout="timeout"
347 :top="y === 'top'" 347 :top="y === 'top'"
348 :right="x === 'right'" 348 :right="x === 'right'"
349 :vertical="mode === 'vertical'" 349 :vertical="mode === 'vertical'"
350 v-model="snackbar" 350 v-model="snackbar"
351 color="success" 351 color="success"
352 >{{ text }}</v-snackbar> 352 >{{ text }}</v-snackbar>
353 353
354 <!-- ****** EXISTING Exam Schedule TABLE****** --> 354 <!-- ****** EXISTING Exam Schedule TABLE****** -->
355 <v-card flat> 355 <v-card flat>
356 <v-layout> 356 <v-layout>
357 <v-flex xs12> 357 <v-flex xs12>
358 <v-layout> 358 <v-layout>
359 <v-flex xs2 sm1 md1 class="pt-4 subheading"> 359 <v-flex xs2 sm1 md1 class="pt-4 subheading">
360 <label class="right">Class:</label> 360 <label class="right">Class:</label>
361 </v-flex> 361 </v-flex>
362 <v-flex xs8 sm3 md2 class="ml-3"> 362 <v-flex xs8 sm3 md2 class="ml-3">
363 <v-select 363 <v-select
364 v-model="getScheduleData.classId" 364 v-model="getScheduleData.classId"
365 label="Select your class" 365 label="Select your class"
366 type="text" 366 type="text"
367 :items="classList" 367 :items="classList"
368 item-text="classNum" 368 item-text="classNum"
369 item-value="_id" 369 item-value="_id"
370 @change="getSchedulesList()" 370 @change="getSchedulesList()"
371 required 371 required
372 ></v-select> 372 ></v-select>
373 </v-flex> 373 </v-flex>
374 </v-layout> 374 </v-layout>
375 </v-flex> 375 </v-flex>
376 </v-layout> 376 </v-layout>
377 </v-card> 377 </v-card>
378 <v-data-table 378 <v-data-table
379 :headers="headers" 379 :headers="headers"
380 :items="ScheduleData" 380 :items="ScheduleData"
381 :pagination.sync="pagination" 381 :pagination.sync="pagination"
382 :search="search" 382 :search="search"
383 > 383 >
384 <template slot="items" slot-scope="props"> 384 <template slot="items" slot-scope="props">
385 <td class="text-xs-center">{{ props.index + 1}}</td> 385 <td class="text-xs-center">{{ props.index + 1}}</td>
386 <!-- <td id="td" class="text-xs-center">{{ props.item.bookId.name}}</td> --> 386 <!-- <td id="td" class="text-xs-center">{{ props.item.bookId.name}}</td> -->
387 <td id="td" class="text-xs-center">{{ props.item.examName}}</td> 387 <td id="td" class="text-xs-center">{{ props.item.examName}}</td>
388 <td id="td" class="text-xs-center">{{ props.item.classId.classNum}}</td> 388 <td id="td" class="text-xs-center">{{ props.item.classId.classNum}}</td>
389 <td id="td" class="text-xs-center">{{ props.item.sectionId.name }}</td> 389 <td id="td" class="text-xs-center">{{ props.item.sectionId.name }}</td>
390 <td id="td" class="text-xs-center">{{ props.item.subjectName }}</td> 390 <td id="td" class="text-xs-center">{{ props.item.subjectName }}</td>
391 <td id="td" class="text-xs-center">{{ dates(props.item.date) }}</td> 391 <td id="td" class="text-xs-center">{{ dates(props.item.date) }}</td>
392 <td id="td" class="text-xs-center">{{ props.item.timeFrom }} - {{ props.item.timeTo }}</td> 392 <td id="td" class="text-xs-center">{{ props.item.timeFrom }} - {{ props.item.timeTo }}</td>
393 <td id="td" class="text-xs-center">{{ props.item.room }}</td> 393 <td id="td" class="text-xs-center">{{ props.item.room }}</td>
394 <td class="text-xs-center"> 394 <td class="text-xs-center">
395 <span> 395 <span>
396 <img 396 <v-tooltip top>
397 style="cursor:pointer; width:25px; height:18px; " 397 <img
398 class="mr-5" 398 slot="activator"
399 @click="profile(props.item)" 399 style="cursor:pointer; width:25px; height:18px; "
400 src="/static/icon/eye1.png" 400 class="mr5"
401 /> 401 @click="profile(props.item)"
402 <img 402 src="/static/icon/eye1.png"
403 style="cursor:pointer; width:20px; height:18px; " 403 />
404 class="mr-5" 404 <span>View</span>
405 @click="editItem(props.item)" 405 </v-tooltip>
406 src="/static/icon/edit1.png" 406 <v-tooltip top>
407 /> 407 <img
408 <img 408 slot="activator"
409 style="cursor:pointer;width:20px; height:20px; " 409 style="cursor:pointer; width:20px; height:18px; "
410 class="mr-5" 410 class="mr5"
411 @click="deleteSchedule(props.item)" 411 @click="editItem(props.item)"
412 src="/static/icon/delete1.png" 412 src="/static/icon/edit1.png"
413 /> 413 />
414 <span>Edit</span>
415 </v-tooltip>
416 <v-tooltip top>
417 <img
418 slot="activator"
419 style="cursor:pointer; width:20px; height:20px; "
420 class="mr5"
421 @click="deleteItem(props.item)"
422 src="/static/icon/delete1.png"
423 />
424 <span>Delete</span>
425 </v-tooltip>
414 </span> 426 </span>
415 </td> 427 </td>
416 </template> 428 </template>
417 <v-alert 429 <v-alert
418 slot="no-results" 430 slot="no-results"
419 :value="true" 431 :value="true"
420 color="error" 432 color="error"
421 icon="warning" 433 icon="warning"
422 >Your search for "{{ search }}" found no results.</v-alert> 434 >Your search for "{{ search }}" found no results.</v-alert>
423 </v-data-table> 435 </v-data-table>
424 </v-tab-item> 436 </v-tab-item>
425 437
426 <!-- ****** ADD Exam Schedule ****** --> 438 <!-- ****** ADD Exam Schedule ****** -->
427 439
428 <v-tab-item> 440 <v-tab-item>
429 <v-container> 441 <v-container>
430 <v-snackbar 442 <v-snackbar
431 :timeout="timeout" 443 :timeout="timeout"
432 :top="y === 'top'" 444 :top="y === 'top'"
433 :right="x === 'right'" 445 :right="x === 'right'"
434 :vertical="mode === 'vertical'" 446 :vertical="mode === 'vertical'"
435 v-model="snackbar" 447 v-model="snackbar"
436 :color="color" 448 :color="color"
437 >{{ text }}</v-snackbar> 449 >{{ text }}</v-snackbar>
438 <v-flex xs12 sm12 class="my-4"> 450 <v-flex xs12 sm12 class="my-4">
439 <v-card flat> 451 <v-card flat>
440 <v-form ref="form" v-model="valid" lazy-validation> 452 <v-form ref="form" v-model="valid" lazy-validation>
441 <v-container fluid> 453 <v-container fluid>
442 <v-flex xs12> 454 <v-flex xs12>
443 <v-layout> 455 <v-layout>
444 <v-flex xs5 class="pt-4 subheading"> 456 <v-flex xs5 class="pt-4 subheading">
445 <label class="right">Exam Name:</label> 457 <label class="right">Exam Name:</label>
446 </v-flex> 458 </v-flex>
447 <v-flex xs7 sm4 class="ml-3"> 459 <v-flex xs7 sm4 class="ml-3">
448 <v-select 460 <v-select
449 label="Select your Exam Name" 461 label="Select your Exam Name"
450 :rules="examNameRules" 462 :rules="examNameRules"
451 :items="examList" 463 :items="examList"
452 v-model="addSchedule.examName" 464 v-model="addSchedule.examName"
453 item-text="examName" 465 item-text="examName"
454 item-value="examName" 466 item-value="examName"
455 ></v-select> 467 ></v-select>
456 </v-flex> 468 </v-flex>
457 </v-layout> 469 </v-layout>
458 </v-flex> 470 </v-flex>
459 <v-flex xs12> 471 <v-flex xs12>
460 <v-layout> 472 <v-layout>
461 <v-flex xs5 class="pt-4 subheading"> 473 <v-flex xs5 class="pt-4 subheading">
462 <label class="right">Class:</label> 474 <label class="right">Class:</label>
463 </v-flex> 475 </v-flex>
464 <v-flex xs7 sm4 class="ml-3"> 476 <v-flex xs7 sm4 class="ml-3">
465 <v-select 477 <v-select
466 v-model="addSchedule.classId" 478 v-model="addSchedule.classId"
467 label="Select your class" 479 label="Select your class"
468 type="text" 480 type="text"
469 :items="classList" 481 :items="classList"
470 item-text="classNum" 482 item-text="classNum"
471 item-value="_id" 483 item-value="_id"
472 :rules="classRules" 484 :rules="classRules"
473 @change="getSections(addSchedule.classId)" 485 @change="getSections(addSchedule.classId)"
474 required 486 required
475 ></v-select> 487 ></v-select>
476 </v-flex> 488 </v-flex>
477 </v-layout> 489 </v-layout>
478 </v-flex> 490 </v-flex>
479 <v-flex xs12> 491 <v-flex xs12>
480 <v-layout> 492 <v-layout>
481 <v-flex xs5 class="pt-4 subheading"> 493 <v-flex xs5 class="pt-4 subheading">
482 <label class="right">Section:</label> 494 <label class="right">Section:</label>
483 </v-flex> 495 </v-flex>
484 <v-flex xs7 sm4 class="ml-3"> 496 <v-flex xs7 sm4 class="ml-3">
485 <v-select 497 <v-select
486 :items="addSection" 498 :items="addSection"
487 label="Select Section" 499 label="Select Section"
488 v-model="addSchedule.sectionId" 500 v-model="addSchedule.sectionId"
489 item-text="name" 501 item-text="name"
490 item-value="_id" 502 item-value="_id"
491 name="Select Section" 503 name="Select Section"
492 :rules="sectionRules" 504 :rules="sectionRules"
493 required 505 required
494 ></v-select> 506 ></v-select>
495 </v-flex> 507 </v-flex>
496 </v-layout> 508 </v-layout>
497 </v-flex> 509 </v-flex>
498 <v-flex xs12> 510 <v-flex xs12>
499 <v-layout> 511 <v-layout>
500 <v-flex xs5 class="pt-4 subheading"> 512 <v-flex xs5 class="pt-4 subheading">
501 <label class="right">Subject Name:</label> 513 <label class="right">Subject Name:</label>
502 </v-flex> 514 </v-flex>
503 <v-flex xs7 sm4 class="ml-3"> 515 <v-flex xs7 sm4 class="ml-3">
504 <v-select 516 <v-select
505 :items="subjects" 517 :items="subjects"
506 label="Select Subject" 518 label="Select Subject"
507 v-model="addSchedule.subjectName" 519 v-model="addSchedule.subjectName"
508 item-text="subjectName" 520 item-text="subjectName"
509 item-value="subjectName" 521 item-value="subjectName"
510 name="Select Section" 522 name="Select Section"
511 :rules="subjectRules" 523 :rules="subjectRules"
512 required 524 required
513 ></v-select> 525 ></v-select>
514 </v-flex> 526 </v-flex>
515 </v-layout> 527 </v-layout>
516 </v-flex> 528 </v-flex>
517 <v-flex xs12> 529 <v-flex xs12>
518 <v-layout> 530 <v-layout>
519 <v-flex xs5 class="pt-4 subheading"> 531 <v-flex xs5 class="pt-4 subheading">
520 <label class="right">Date:</label> 532 <label class="right">Date:</label>
521 </v-flex> 533 </v-flex>
522 <v-flex xs7 sm4 class="ml-3"> 534 <v-flex xs7 sm4 class="ml-3">
523 <v-menu 535 <v-menu
524 ref="menu2" 536 ref="menu2"
525 :close-on-content-click="false" 537 :close-on-content-click="false"
526 v-model="menu2" 538 v-model="menu2"
527 :nudge-right="40" 539 :nudge-right="40"
528 :return-value.sync="addSchedule.date" 540 :return-value.sync="addSchedule.date"
529 lazy 541 lazy
530 transition="scale-transition" 542 transition="scale-transition"
531 offset-y 543 offset-y
532 full-width 544 full-width
533 min-width="290px" 545 min-width="290px"
534 > 546 >
535 <v-text-field 547 <v-text-field
536 slot="activator" 548 slot="activator"
537 v-model="addSchedule.date" 549 v-model="addSchedule.date"
538 label="Select Date" 550 label="Select Date"
539 append-icon="event" 551 append-icon="event"
540 readonly 552 readonly
541 ></v-text-field> 553 ></v-text-field>
542 <v-date-picker 554 <v-date-picker
543 v-model="addSchedule.date" 555 v-model="addSchedule.date"
544 @input="$refs.menu2.save(addSchedule.date)" 556 @input="$refs.menu2.save(addSchedule.date)"
545 ></v-date-picker> 557 ></v-date-picker>
546 </v-menu> 558 </v-menu>
547 </v-flex> 559 </v-flex>
548 </v-layout> 560 </v-layout>
549 </v-flex> 561 </v-flex>
550 <v-flex xs12> 562 <v-flex xs12>
551 <v-layout> 563 <v-layout>
552 <v-flex xs5 class="pt-4 subheading"> 564 <v-flex xs5 class="pt-4 subheading">
553 <label class="right">Time From:</label> 565 <label class="right">Time From:</label>
554 </v-flex> 566 </v-flex>
555 <v-flex xs7 sm4 class="ml-3"> 567 <v-flex xs7 sm4 class="ml-3">
556 <v-menu 568 <v-menu
557 ref="menuA" 569 ref="menuA"
558 :close-on-content-click="false" 570 :close-on-content-click="false"
559 v-model="menuB" 571 v-model="menuB"
560 :nudge-right="40" 572 :nudge-right="40"
561 :return-value.sync="addSchedule.timeFrom" 573 :return-value.sync="addSchedule.timeFrom"
562 lazy 574 lazy
563 transition="scale-transition" 575 transition="scale-transition"
564 offset-y 576 offset-y
565 full-width 577 full-width
566 max-width="290px" 578 max-width="290px"
567 min-width="290px" 579 min-width="290px"
568 > 580 >
569 <v-text-field 581 <v-text-field
570 slot="activator" 582 slot="activator"
571 v-model="addSchedule.timeIn" 583 v-model="addSchedule.timeIn"
572 label="Select your time From" 584 label="Select your time From"
573 append-icon="access_time" 585 append-icon="access_time"
574 :rules="timeInRules" 586 :rules="timeInRules"
575 ></v-text-field> 587 ></v-text-field>
576 <v-time-picker 588 <v-time-picker
577 v-model="addSchedule.timeIn" 589 v-model="addSchedule.timeIn"
578 @change="$refs.menuA.save(addSchedule.timeIn)" 590 @change="$refs.menuA.save(addSchedule.timeIn)"
579 ></v-time-picker> 591 ></v-time-picker>
580 </v-menu> 592 </v-menu>
581 </v-flex> 593 </v-flex>
582 </v-layout> 594 </v-layout>
583 </v-flex> 595 </v-flex>
584 <v-flex xs12> 596 <v-flex xs12>
585 <v-layout> 597 <v-layout>
586 <v-flex xs5 class="pt-4 subheading"> 598 <v-flex xs5 class="pt-4 subheading">
587 <label class="right">Time To:</label> 599 <label class="right">Time To:</label>
588 </v-flex> 600 </v-flex>
589 <v-flex xs7 sm4 class="ml-3"> 601 <v-flex xs7 sm4 class="ml-3">
590 <v-menu 602 <v-menu
591 ref="menu" 603 ref="menu"
592 :close-on-content-click="false" 604 :close-on-content-click="false"
593 v-model="menu1" 605 v-model="menu1"
594 :nudge-right="40" 606 :nudge-right="40"
595 :return-value.sync="addSchedule.timeTo" 607 :return-value.sync="addSchedule.timeTo"
596 lazy 608 lazy
597 transition="scale-transition" 609 transition="scale-transition"
598 offset-y 610 offset-y
599 full-width 611 full-width
600 max-width="290px" 612 max-width="290px"
601 min-width="290px" 613 min-width="290px"
602 > 614 >
603 <v-text-field 615 <v-text-field
604 slot="activator" 616 slot="activator"
605 v-model="addSchedule.timeTo" 617 v-model="addSchedule.timeTo"
606 label="Select your Time To" 618 label="Select your Time To"
607 append-icon="access_time" 619 append-icon="access_time"
608 :rules="timeOutRules" 620 :rules="timeOutRules"
609 ></v-text-field> 621 ></v-text-field>
610 <v-time-picker 622 <v-time-picker
611 v-model="addSchedule.timeTo" 623 v-model="addSchedule.timeTo"
612 @change="$refs.menu.save(addSchedule.timeTo)" 624 @change="$refs.menu.save(addSchedule.timeTo)"
613 ></v-time-picker> 625 ></v-time-picker>
614 </v-menu> 626 </v-menu>
615 </v-flex> 627 </v-flex>
616 </v-layout> 628 </v-layout>
617 </v-flex> 629 </v-flex>
618 <v-flex xs12> 630 <v-flex xs12>
619 <v-layout> 631 <v-layout>
620 <v-flex xs5 class="pt-4 subheading"> 632 <v-flex xs5 class="pt-4 subheading">
621 <label class="right">Room:</label> 633 <label class="right">Room:</label>
622 </v-flex> 634 </v-flex>
623 <v-flex xs7 sm4 class="ml-3"> 635 <v-flex xs7 sm4 class="ml-3">
624 <v-text-field 636 <v-text-field
625 placeholder="fill your room" 637 placeholder="fill your room"
626 :rules="roomRules" 638 :rules="roomRules"
627 v-model="addSchedule.room" 639 v-model="addSchedule.room"
628 @keyup.enter="submit" 640 @keyup.enter="submit"
629 ></v-text-field> 641 ></v-text-field>
630 </v-flex> 642 </v-flex>
631 </v-layout> 643 </v-layout>
632 </v-flex> 644 </v-flex>
633 <v-layout> 645 <v-layout>
634 <v-flex xs12 sm7 offset-sm3> 646 <v-flex xs12 sm7 offset-sm3>
635 <v-card-actions> 647 <v-card-actions>
636 <v-btn @click="clear" round dark>clear</v-btn> 648 <v-btn @click="clear" round dark>clear</v-btn>
637 <v-spacer class="hidden-xs-only"></v-spacer> 649 <v-spacer class="hidden-xs-only"></v-spacer>
638 <v-btn @click="submit" round dark :loading="loading">Add</v-btn> 650 <v-btn @click="submit" round dark :loading="loading">Add</v-btn>
639 </v-card-actions> 651 </v-card-actions>
640 </v-flex> 652 </v-flex>
641 </v-layout> 653 </v-layout>
642 </v-container> 654 </v-container>
643 </v-form> 655 </v-form>
644 </v-card> 656 </v-card>
645 </v-flex> 657 </v-flex>
646 </v-container> 658 </v-container>
647 </v-tab-item> 659 </v-tab-item>
648 </v-tabs> 660 </v-tabs>
649 <div class="loader" v-if="showLoader"> 661 <div class="loader" v-if="showLoader">
650 <v-progress-circular indeterminate color="white"></v-progress-circular> 662 <v-progress-circular indeterminate color="white"></v-progress-circular>
651 </div> 663 </div>
652 </v-app> 664 </v-app>
653 </template> 665 </template>
654 666
655 <script> 667 <script>
656 import http from "@/Services/http.js"; 668 import http from "@/Services/http.js";
657 import moment from "moment"; 669 import moment from "moment";
658 670
659 export default { 671 export default {
660 data: () => ({ 672 data: () => ({
661 snackbar: false, 673 snackbar: false,
662 date: null, 674 date: null,
663 editDate: false, 675 editDate: false,
664 menu1: false, 676 menu1: false,
665 menuB: false, 677 menuB: false,
666 menu2: false, 678 menu2: false,
667 menuEdit: false, 679 menuEdit: false,
668 timeToEdit: false, 680 timeToEdit: false,
669 color: "", 681 color: "",
670 y: "top", 682 y: "top",
671 x: "right", 683 x: "right",
672 mode: "", 684 mode: "",
673 timeout: 10000, 685 timeout: 10000,
674 text: "", 686 text: "",
675 loading: false, 687 loading: false,
676 date: null, 688 date: null,
677 search: "", 689 search: "",
678 showLoader: false, 690 showLoader: false,
679 dialog: false, 691 dialog: false,
680 dialog1: false, 692 dialog1: false,
681 valid: true, 693 valid: true,
682 isActive: true, 694 isActive: true,
683 newActive: false, 695 newActive: false,
684 addSection: [], 696 addSection: [],
685 pagination: { 697 pagination: {
686 rowsPerPage: 15 698 rowsPerPage: 15
687 }, 699 },
688 examNameRules: [v => !!v || "Exam Name is required"], 700 examNameRules: [v => !!v || "Exam Name is required"],
689 classRules: [v => !!v || "Class Name is required"], 701 classRules: [v => !!v || "Class Name is required"],
690 sectionRules: [v => !!v || "section is required"], 702 sectionRules: [v => !!v || "section is required"],
691 subjectRules: [v => !!v || "Subject is required"], 703 subjectRules: [v => !!v || "Subject is required"],
692 timeInRules: [v => !!v || "Time In is required"], 704 timeInRules: [v => !!v || "Time In is required"],
693 timeOutRules: [v => !!v || "time Out s is required"], 705 timeOutRules: [v => !!v || "time Out s is required"],
694 roomRules: [v => !!v || "Room is required"], 706 roomRules: [v => !!v || "Room is required"],
695 headers: [ 707 headers: [
696 { 708 {
697 align: "justify-center", 709 align: "justify-center",
698 text: "No", 710 text: "No",
699 sortable: false, 711 sortable: false,
700 value: "No" 712 value: "No"
701 }, 713 },
702 { 714 {
703 text: "Exam Name", 715 text: "Exam Name",
704 vaue: "examName", 716 vaue: "examName",
705 sortable: false, 717 sortable: false,
706 align: "center" 718 align: "center"
707 }, 719 },
708 { 720 {
709 text: "Class", 721 text: "Class",
710 value: "classId.classNum", 722 value: "classId.classNum",
711 sortable: false, 723 sortable: false,
712 align: "center" 724 align: "center"
713 }, 725 },
714 { 726 {
715 text: "Section", 727 text: "Section",
716 value: "sectionId.name", 728 value: "sectionId.name",
717 sortable: false, 729 sortable: false,
718 align: "center" 730 align: "center"
719 }, 731 },
720 { 732 {
721 text: "Subject Name", 733 text: "Subject Name",
722 value: "subjectName", 734 value: "subjectName",
723 sortable: false, 735 sortable: false,
724 align: "center" 736 align: "center"
725 }, 737 },
726 { 738 {
727 text: "Date", 739 text: "Date",
728 value: "date", 740 value: "date",
729 sortable: false, 741 sortable: false,
730 align: "center" 742 align: "center"
731 }, 743 },
732 { 744 {
733 text: "Time", 745 text: "Time",
734 value: "timeFrom", 746 value: "timeFrom",
735 sortable: false, 747 sortable: false,
736 align: "center" 748 align: "center"
737 }, 749 },
738 { 750 {
739 text: "Room", 751 text: "Room",
740 value: "room", 752 value: "room",
741 sortable: false, 753 sortable: false,
742 align: "center" 754 align: "center"
743 }, 755 },
744 { text: "Action", value: "", sortable: false, align: "center" } 756 { text: "Action", value: "", sortable: false, align: "center" }
745 ], 757 ],
746 classList: [], 758 classList: [],
747 examList: [], 759 examList: [],
748 subjects: [], 760 subjects: [],
749 addSchedule: {}, 761 addSchedule: {},
750 editedItem: {}, 762 editedItem: {},
751 getScheduleData: {}, 763 getScheduleData: {},
752 ScheduleData: [], 764 ScheduleData: [],
753 token: "" 765 token: ""
754 }), 766 }),
755 methods: { 767 methods: {
756 dates: function(date) { 768 dates: function(date) {
757 return moment(date).format("MMMM DD, YYYY"); 769 return moment(date).format("MMMM DD, YYYY");
758 }, 770 },
759 pickFile() { 771 pickFile() {
760 this.$refs.image.click(); 772 this.$refs.image.click();
761 }, 773 },
762 getSchedulesList() { 774 getSchedulesList() {
763 this.showLoader = true; 775 this.showLoader = true;
764 http() 776 http()
765 .get("/getSchedulesList", { 777 .get("/getSchedulesList", {
766 params: { classId: this.getScheduleData.classId }, 778 params: { classId: this.getScheduleData.classId },
767 headers: { Authorization: "Bearer " + this.token } 779 headers: { Authorization: "Bearer " + this.token }
768 }) 780 })
769 .then(response => { 781 .then(response => {
770 this.ScheduleData = response.data.data; 782 this.ScheduleData = response.data.data;
771 this.showLoader = false; 783 this.showLoader = false;
772 }) 784 })
773 .catch(error => { 785 .catch(error => {
774 // console.log("err====>", err); 786 // console.log("err====>", err);
775 this.showLoader = false; 787 this.showLoader = false;
776 this.loadingSearch = false; 788 this.loadingSearch = false;
777 this.snackbar = true; 789 this.snackbar = true;
778 this.text = error.response.data.message; 790 this.text = error.response.data.message;
779 if (error.response.status === 401) { 791 if (error.response.status === 401) {
780 this.$router.replace({ path: "/" }); 792 this.$router.replace({ path: "/" });
781 this.$store.dispatch("setToken", null); 793 this.$store.dispatch("setToken", null);
782 this.$store.dispatch("Id", null); 794 this.$store.dispatch("Id", null);
783 } 795 }
784 }); 796 });
785 }, 797 },
786 editItem(item) { 798 editItem(item) {
787 console.log("item", item); 799 console.log("item", item);
788 this.editedIndex = this.ScheduleData.indexOf(item); 800 this.editedIndex = this.ScheduleData.indexOf(item);
789 this.editedItem = Object.assign({}, item); 801 this.editedItem = Object.assign({}, item);
790 this.editedItem.classId = this.editedItem.classId._id; 802 this.editedItem.classId = this.editedItem.classId._id;
791 this.editedItem.sectionId = this.editedItem.sectionId._id; 803 this.editedItem.sectionId = this.editedItem.sectionId._id;
792 this.editedItem.date = 804 this.editedItem.date =
793 this.editedItem.date != undefined 805 this.editedItem.date != undefined
794 ? (this.editedItem.date = this.editedItem.date.substring(0, 10)) 806 ? (this.editedItem.date = this.editedItem.date.substring(0, 10))
795 : (this.editedItem.date = ""); 807 : (this.editedItem.date = "");
796 this.dialog = true; 808 this.dialog = true;
797 }, 809 },
798 profile(item) { 810 profile(item) {
799 this.editedIndex = this.ScheduleData.indexOf(item); 811 this.editedIndex = this.ScheduleData.indexOf(item);
800 this.editedItem = Object.assign({}, item); 812 this.editedItem = Object.assign({}, item);
801 this.editedItem.classId = this.editedItem.classId.classNum; 813 this.editedItem.classId = this.editedItem.classId.classNum;
802 this.editedItem.sectionId = this.editedItem.sectionId.name; 814 this.editedItem.sectionId = this.editedItem.sectionId.name;
803 this.dialog1 = true; 815 this.dialog1 = true;
804 }, 816 },
805 deleteSchedule(item) { 817 deleteSchedule(item) {
806 let deleteSchedule = { 818 let deleteSchedule = {
807 scheduleId: item._id 819 scheduleId: item._id
808 }; 820 };
809 http() 821 http()
810 .delete( 822 .delete(
811 "/deleteSchedule", 823 "/deleteSchedule",
812 confirm("Are you sure you want to Delete this?") && { 824 confirm("Are you sure you want to Delete this?") && {
813 params: deleteSchedule 825 params: deleteSchedule
814 } 826 }
815 ) 827 )
816 .then(response => { 828 .then(response => {
817 this.snackbar = true; 829 this.snackbar = true;
818 this.text = "Successfully Delete Schedule "; 830 this.text = "Successfully Delete Schedule ";
819 this.getSchedulesList(); 831 this.getSchedulesList();
820 }) 832 })
821 .catch(error => { 833 .catch(error => {
822 // console.log(error); 834 // console.log(error);
823 }); 835 });
824 }, 836 },
825 activeTab(type) { 837 activeTab(type) {
826 switch (type) { 838 switch (type) {
827 case "existing": 839 case "existing":
828 this.newActive = false; 840 this.newActive = false;
829 this.isActive = true; 841 this.isActive = true;
830 break; 842 break;
831 843
832 default: 844 default:
833 this.newActive = true; 845 this.newActive = true;
834 this.isActive = false; 846 this.isActive = false;
835 break; 847 break;
836 } 848 }
837 }, 849 },
838 close() { 850 close() {
839 this.dialog = false; 851 this.dialog = false;
840 }, 852 },
841 close1() { 853 close1() {
842 this.dialog1 = false; 854 this.dialog1 = false;
843 }, 855 },
844 submit() { 856 submit() {
845 this.loading = true; 857 this.loading = true;
846 if (this.$refs.form.validate()) { 858 if (this.$refs.form.validate()) {
847 http() 859 http()
848 .post("/createSchedule", this.addSchedule) 860 .post("/createSchedule", this.addSchedule)
849 .then(response => { 861 .then(response => {
850 this.snackbar = true; 862 this.snackbar = true;
851 this.text = "New Exam Schedule added successfully"; 863 this.text = "New Exam Schedule added successfully";
852 this.getSchedulesList(); 864 this.getSchedulesList();
853 this.color = "succses"; 865 this.color = "succses";
854 this.loading = false; 866 this.loading = false;
855 this.clear(); 867 this.clear();
856 }) 868 })
857 .catch(error => { 869 .catch(error => {
858 if ((this.snackbar = true)) { 870 if ((this.snackbar = true)) {
859 this.text = error.response.data.message; 871 this.text = error.response.data.message;
860 this.color = "red"; 872 this.color = "red";
861 } 873 }
862 }); 874 });
863 } 875 }
864 }, 876 },
865 clear() { 877 clear() {
866 this.$refs.form.reset(); 878 this.$refs.form.reset();
867 this.disable = false; 879 this.disable = false;
868 this.loading = false; 880 this.loading = false;
869 }, 881 },
870 save() { 882 save() {
871 this.editedItem.scheduleId = this.editedItem._id; 883 this.editedItem.scheduleId = this.editedItem._id;
872 http() 884 http()
873 .put("/updateSchedule", this.editedItem) 885 .put("/updateSchedule", this.editedItem)
874 .then(response => { 886 .then(response => {
875 this.snackbar = true; 887 this.snackbar = true;
876 this.text = "Successfully Edit Exam Schedule"; 888 this.text = "Successfully Edit Exam Schedule";
877 this.color = "green"; 889 this.color = "green";
878 this.getSchedulesList(); 890 this.getSchedulesList();
879 this.close(); 891 this.close();
880 }) 892 })
881 .catch(error => { 893 .catch(error => {
882 this.snackbar = true; 894 this.snackbar = true;
883 this.text = error.response.data.message; 895 this.text = error.response.data.message;
884 this.color = "red"; 896 this.color = "red";
885 }); 897 });
886 }, 898 },
887 getClass() { 899 getClass() {
888 http() 900 http()
889 .get("/getClassesList", { 901 .get("/getClassesList", {
890 headers: { Authorization: "Bearer " + this.token } 902 headers: { Authorization: "Bearer " + this.token }
891 }) 903 })
892 .then(response => { 904 .then(response => {
893 this.classList = response.data.data; 905 this.classList = response.data.data;
894 // console.log("getClassesList=====>",this.addclass) 906 // console.log("getClassesList=====>",this.addclass)
895 }) 907 })
896 .catch(err => { 908 .catch(err => {
897 // console.log("err====>", err); 909 // console.log("err====>", err);
898 }); 910 });
899 }, 911 },
900 getSections(_id) { 912 getSections(_id) {
901 console.log(_id); 913 console.log(_id);
902 for (let i = 0; i < this.classList.length; i++) { 914 for (let i = 0; i < this.classList.length; i++) {
903 if (_id == this.classList[i]._id) { 915 if (_id == this.classList[i]._id) {
904 // console.log(this.classList[i].subjects); 916 // console.log(this.classList[i].subjects);
905 this.subjects = this.classList[i].subjects; 917 this.subjects = this.classList[i].subjects;
906 } 918 }
907 } 919 }
908 http() 920 http()
909 .get( 921 .get(
910 "/getSectionsList", 922 "/getSectionsList",
911 { params: { classId: _id } }, 923 { params: { classId: _id } },
912 { 924 {
913 headers: { Authorization: "Bearer " + this.token } 925 headers: { Authorization: "Bearer " + this.token }
914 } 926 }
915 ) 927 )
916 .then(response => { 928 .then(response => {
917 this.addSection = response.data.data; 929 this.addSection = response.data.data;
918 }) 930 })
919 .catch(err => { 931 .catch(err => {
920 // console.log("err====>", err); 932 // console.log("err====>", err);
921 }); 933 });
922 }, 934 },
923 getExamList() { 935 getExamList() {
924 this.showLoader = true; 936 this.showLoader = true;
925 this.loadingSearch = true; 937 this.loadingSearch = true;
926 http() 938 http()
927 .get("/getExamsList", { 939 .get("/getExamsList", {
928 headers: { Authorization: "Bearer " + this.token } 940 headers: { Authorization: "Bearer " + this.token }
929 }) 941 })
930 .then(response => { 942 .then(response => {
931 this.examList = response.data.data; 943 this.examList = response.data.data;
932 this.showLoader = false; 944 this.showLoader = false;
933 this.loadingSearch = false; 945 this.loadingSearch = false;
934 }) 946 })
935 .catch(error => { 947 .catch(error => {
936 // console.log("err====>", err); 948 // console.log("err====>", err);
937 this.showLoader = false; 949 this.showLoader = false;
938 this.loadingSearch = false; 950 this.loadingSearch = false;
939 this.snackbar = true; 951 this.snackbar = true;
940 this.text = error.response.data.message; 952 this.text = error.response.data.message;
941 if (error.response.status === 401) { 953 if (error.response.status === 401) {
942 this.$router.replace({ path: "/" }); 954 this.$router.replace({ path: "/" });
943 this.$store.dispatch("setToken", null); 955 this.$store.dispatch("setToken", null);
944 this.$store.dispatch("Id", null); 956 this.$store.dispatch("Id", null);
945 } 957 }
946 }); 958 });
947 } 959 }
948 }, 960 },
949 mounted() { 961 mounted() {
950 this.token = this.$store.state.token; 962 this.token = this.$store.state.token;
951 // this.getSchedulesList(); 963 // this.getSchedulesList();
952 this.getClass(); 964 this.getClass();
953 this.getExamList(); 965 this.getExamList();
954 }, 966 },
955 created() { 967 created() {
956 this.$root.$on("app:search", search => { 968 this.$root.$on("app:search", search => {
957 this.search = search; 969 this.search = search;
958 }); 970 });
959 }, 971 },
960 beforeDestroy() { 972 beforeDestroy() {
961 // dont forget to remove the listener 973 // dont forget to remove the listener
962 this.$root.$off("app:search"); 974 this.$root.$off("app:search");
963 } 975 }
964 }; 976 };
965 </script> 977 </script>
966 <style scoped> 978 <style scoped>
967 .active { 979 .active {
968 background-color: gray; 980 background-color: gray;
969 color: white !important; 981 color: white !important;
970 } 982 }
971 .activebtn { 983 .activebtn {
972 color: black !important; 984 color: black !important;
973 } 985 }
974 </style> 986 </style>
src/pages/Exam/grade.vue
Diff comments   View file @495e403
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 Grade</v-tab> 10 >Existing Grade</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 Grade</v-tab> 18 >Add Grade</v-tab>
19 19
20 <!-- ****** EDIT GRADE ****** --> 20 <!-- ****** EDIT GRADE ****** -->
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="800px" scrollable> 31 <v-dialog v-model="dialog" max-width="800px" 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 Grade</h3> 36 <h3>Edit Grade</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:470px;"> 40 <v-card-text style="height:470px;">
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">Grade Name:</label> 47 <label class="right">Grade Name:</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 placeholder="fill your Grade Name" 51 placeholder="fill your Grade Name"
52 v-model="editedItem.gradeName" 52 v-model="editedItem.gradeName"
53 type="text" 53 type="text"
54 ></v-text-field> 54 ></v-text-field>
55 </v-flex> 55 </v-flex>
56 </v-layout> 56 </v-layout>
57 </v-flex> 57 </v-flex>
58 <v-flex xs12 sm12> 58 <v-flex xs12 sm12>
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">Grade Point:</label> 61 <label class="right">Grade Point:</label>
62 </v-flex> 62 </v-flex>
63 <v-flex xs5 class="ml-3"> 63 <v-flex xs5 class="ml-3">
64 <v-text-field 64 <v-text-field
65 placeholder="fill your Grade Point" 65 placeholder="fill your Grade Point"
66 v-model="editedItem.gradePoint" 66 v-model="editedItem.gradePoint"
67 type="text" 67 type="text"
68 ></v-text-field> 68 ></v-text-field>
69 </v-flex> 69 </v-flex>
70 </v-layout> 70 </v-layout>
71 </v-flex> 71 </v-flex>
72 <v-flex xs12 sm12> 72 <v-flex xs12 sm12>
73 <v-layout> 73 <v-layout>
74 <v-flex xs4 class="pt-4 subheading"> 74 <v-flex xs4 class="pt-4 subheading">
75 <label class="right">Mark From:</label> 75 <label class="right">Mark From:</label>
76 </v-flex> 76 </v-flex>
77 <v-flex xs5 class="ml-3"> 77 <v-flex xs5 class="ml-3">
78 <v-text-field 78 <v-text-field
79 placeholder="fill your Mark From" 79 placeholder="fill your Mark From"
80 v-model="editedItem.marksFrom" 80 v-model="editedItem.marksFrom"
81 type="text" 81 type="text"
82 ></v-text-field> 82 ></v-text-field>
83 </v-flex> 83 </v-flex>
84 </v-layout> 84 </v-layout>
85 </v-flex> 85 </v-flex>
86 <v-flex xs12 sm12> 86 <v-flex xs12 sm12>
87 <v-layout> 87 <v-layout>
88 <v-flex xs4 class="pt-4 subheading"> 88 <v-flex xs4 class="pt-4 subheading">
89 <label class="right">Mark Upto:</label> 89 <label class="right">Mark Upto:</label>
90 </v-flex> 90 </v-flex>
91 <v-flex xs5 class="ml-3"> 91 <v-flex xs5 class="ml-3">
92 <v-text-field 92 <v-text-field
93 placeholder="fill your Mark From" 93 placeholder="fill your Mark From"
94 v-model="editedItem.marksUpTo" 94 v-model="editedItem.marksUpTo"
95 type="text" 95 type="text"
96 ></v-text-field> 96 ></v-text-field>
97 </v-flex> 97 </v-flex>
98 </v-layout> 98 </v-layout>
99 </v-flex> 99 </v-flex>
100 <v-flex xs12 sm12> 100 <v-flex xs12 sm12>
101 <v-layout> 101 <v-layout>
102 <v-flex xs4 class="pt-4 subheading"> 102 <v-flex xs4 class="pt-4 subheading">
103 <label class="right">Note:</label> 103 <label class="right">Note:</label>
104 </v-flex> 104 </v-flex>
105 <v-flex xs5 class="ml-3"> 105 <v-flex xs5 class="ml-3">
106 <v-text-field 106 <v-text-field
107 placeholder="fill your Serial Number" 107 placeholder="fill your Serial Number"
108 v-model="editedItem.note" 108 v-model="editedItem.note"
109 type="text" 109 type="text"
110 ></v-text-field> 110 ></v-text-field>
111 </v-flex> 111 </v-flex>
112 </v-layout> 112 </v-layout>
113 </v-flex> 113 </v-flex>
114 </v-layout> 114 </v-layout>
115 <v-layout> 115 <v-layout>
116 <v-flex xs12 sm8 offset-sm2> 116 <v-flex xs12 sm8 offset-sm2>
117 <v-card-actions> 117 <v-card-actions>
118 <v-btn round dark @click.native="close">Close</v-btn> 118 <v-btn round dark @click.native="close">Close</v-btn>
119 <v-spacer></v-spacer> 119 <v-spacer></v-spacer>
120 <v-btn round dark @click="save">Save</v-btn> 120 <v-btn round dark @click="save">Save</v-btn>
121 </v-card-actions> 121 </v-card-actions>
122 </v-flex> 122 </v-flex>
123 </v-layout> 123 </v-layout>
124 </v-container> 124 </v-container>
125 </v-form> 125 </v-form>
126 </v-card-text> 126 </v-card-text>
127 </v-card> 127 </v-card>
128 </v-dialog> 128 </v-dialog>
129 129
130 <!-- ****** PROFILE VIEW PARTICULAR GRDAE DATA ****** --> 130 <!-- ****** PROFILE VIEW PARTICULAR GRDAE DATA ****** -->
131 131
132 <v-dialog v-model="dialog1" max-width="600px"> 132 <v-dialog v-model="dialog1" max-width="600px">
133 <v-card> 133 <v-card>
134 <v-toolbar color="grey lighten-2" flat> 134 <v-toolbar color="grey lighten-2" flat>
135 <v-spacer></v-spacer> 135 <v-spacer></v-spacer>
136 <v-toolbar-title> 136 <v-toolbar-title>
137 <h3>Grade</h3> 137 <h3>Grade</h3>
138 </v-toolbar-title> 138 </v-toolbar-title>
139 <v-spacer></v-spacer> 139 <v-spacer></v-spacer>
140 <v-icon @click="close1">close</v-icon> 140 <v-icon @click="close1">close</v-icon>
141 </v-toolbar> 141 </v-toolbar>
142 <v-card-text> 142 <v-card-text>
143 <v-container grid-list-md> 143 <v-container grid-list-md>
144 <v-layout wrap> 144 <v-layout wrap>
145 <v-flex> 145 <v-flex>
146 <v-layout> 146 <v-layout>
147 <v-flex xs5 sm6> 147 <v-flex xs5 sm6>
148 <h5 class="right my-1"> 148 <h5 class="right my-1">
149 <b>Grade Name:</b> 149 <b>Grade Name:</b>
150 </h5> 150 </h5>
151 </v-flex> 151 </v-flex>
152 <v-flex sm6 xs8> 152 <v-flex sm6 xs8>
153 <h5 class="my-1">{{ editedItem.gradeName }}</h5> 153 <h5 class="my-1">{{ editedItem.gradeName }}</h5>
154 </v-flex> 154 </v-flex>
155 </v-layout> 155 </v-layout>
156 <v-layout> 156 <v-layout>
157 <v-flex xs5 sm6> 157 <v-flex xs5 sm6>
158 <h5 class="right my-1"> 158 <h5 class="right my-1">
159 <b>Grade Point:</b> 159 <b>Grade Point:</b>
160 </h5> 160 </h5>
161 </v-flex> 161 </v-flex>
162 <v-flex sm6 xs8> 162 <v-flex sm6 xs8>
163 <h5 class="my-1">{{ editedItem.gradePoint }}</h5> 163 <h5 class="my-1">{{ editedItem.gradePoint }}</h5>
164 </v-flex> 164 </v-flex>
165 </v-layout> 165 </v-layout>
166 <v-layout> 166 <v-layout>
167 <v-flex xs5 sm6> 167 <v-flex xs5 sm6>
168 <h5 class="right my-1"> 168 <h5 class="right my-1">
169 <b>Mark From:</b> 169 <b>Mark From:</b>
170 </h5> 170 </h5>
171 </v-flex> 171 </v-flex>
172 <v-flex sm6 xs8> 172 <v-flex sm6 xs8>
173 <h5 class="my-1">{{ editedItem.marksFrom }}</h5> 173 <h5 class="my-1">{{ editedItem.marksFrom }}</h5>
174 </v-flex> 174 </v-flex>
175 </v-layout> 175 </v-layout>
176 <v-layout> 176 <v-layout>
177 <v-flex xs5 sm6> 177 <v-flex xs5 sm6>
178 <h5 class="right my-1"> 178 <h5 class="right my-1">
179 <b>Mark Upto:</b> 179 <b>Mark Upto:</b>
180 </h5> 180 </h5>
181 </v-flex> 181 </v-flex>
182 <v-flex sm6 xs8> 182 <v-flex sm6 xs8>
183 <h5 class="my-1">{{ editedItem.marksUpTo }}</h5> 183 <h5 class="my-1">{{ editedItem.marksUpTo }}</h5>
184 </v-flex> 184 </v-flex>
185 </v-layout> 185 </v-layout>
186 <v-layout> 186 <v-layout>
187 <v-flex xs5 sm6> 187 <v-flex xs5 sm6>
188 <h5 class="right my-1"> 188 <h5 class="right my-1">
189 <b>Note:</b> 189 <b>Note:</b>
190 </h5> 190 </h5>
191 </v-flex> 191 </v-flex>
192 <v-flex sm6 xs8> 192 <v-flex sm6 xs8>
193 <h5 class="my-1">{{ editedItem.note }}</h5> 193 <h5 class="my-1">{{ editedItem.note }}</h5>
194 </v-flex> 194 </v-flex>
195 </v-layout> 195 </v-layout>
196 </v-flex> 196 </v-flex>
197 </v-layout> 197 </v-layout>
198 </v-container> 198 </v-container>
199 </v-card-text> 199 </v-card-text>
200 </v-card> 200 </v-card>
201 </v-dialog> 201 </v-dialog>
202 202
203 <v-snackbar 203 <v-snackbar
204 :timeout="timeout" 204 :timeout="timeout"
205 :top="y === 'top'" 205 :top="y === 'top'"
206 :right="x === 'right'" 206 :right="x === 'right'"
207 :vertical="mode === 'vertical'" 207 :vertical="mode === 'vertical'"
208 v-model="snackbar" 208 v-model="snackbar"
209 color="success" 209 color="success"
210 >{{ text }}</v-snackbar> 210 >{{ text }}</v-snackbar>
211 211
212 <!-- ****** EXISTING GRADE TABLE****** --> 212 <!-- ****** EXISTING GRADE TABLE****** -->
213
213 <v-card></v-card> 214 <v-card></v-card>
214 <v-data-table 215 <v-data-table
215 :headers="headers" 216 :headers="headers"
216 :items="gradeData" 217 :items="gradeData"
217 :pagination.sync="pagination" 218 :pagination.sync="pagination"
218 :search="search" 219 :search="search"
219 > 220 >
220 <template slot="items" slot-scope="props"> 221 <template slot="items" slot-scope="props">
221 <td class="text-xs-center">{{ props.index + 1}}</td> 222 <td class="text-xs-center">{{ props.index + 1}}</td>
222 <!-- <td id="td" class="text-xs-center">{{ props.item.bookId.name}}</td> --> 223 <!-- <td id="td" class="text-xs-center">{{ props.item.bookId.name}}</td> -->
223 <td id="td" class="text-xs-center">{{ props.item.gradeName}}</td> 224 <td id="td" class="text-xs-center">{{ props.item.gradeName}}</td>
224 <td id="td" class="text-xs-center">{{ props.item.gradePoint }}</td> 225 <td id="td" class="text-xs-center">{{ props.item.gradePoint }}</td>
225 <td id="td" class="text-xs-center">{{ props.item.marksFrom }}</td> 226 <td id="td" class="text-xs-center">{{ props.item.marksFrom }}</td>
226 <td id="td" class="text-xs-center">{{ props.item.marksUpTo }}</td> 227 <td id="td" class="text-xs-center">{{ props.item.marksUpTo }}</td>
227 <td id="td" class="text-xs-center">{{ props.item.note }}</td> 228 <td id="td" class="text-xs-center">{{ props.item.note }}</td>
228 <td class="text-xs-center"> 229 <td class="text-xs-center">
229 <span> 230 <span>
230 <img 231 <v-tooltip top>
231 style="cursor:pointer; width:25px; height:18px; " 232 <img
232 class="mr-5" 233 slot="activator"
233 @click="profile(props.item)" 234 style="cursor:pointer; width:25px; height:18px; "
234 src="/static/icon/eye1.png" 235 class="mr5"
235 /> 236 @click="profile(props.item)"
236 <img 237 src="/static/icon/eye1.png"
237 style="cursor:pointer; width:20px; height:18px; " 238 />
238 class="mr-5" 239 <span>View</span>
239 @click="editItem(props.item)" 240 </v-tooltip>
240 src="/static/icon/edit1.png" 241 <v-tooltip top>
241 /> 242 <img
242 <img 243 slot="activator"
243 style="cursor:pointer;width:20px; height:20px; " 244 style="cursor:pointer; width:20px; height:18px; "
244 class="mr-5" 245 class="mr5"
245 @click="deleteGrade(props.item)" 246 @click="editItem(props.item)"
246 src="/static/icon/delete1.png" 247 src="/static/icon/edit1.png"
247 /> 248 />
249 <span>Edit</span>
250 </v-tooltip>
251 <v-tooltip top>
252 <img
253 slot="activator"
254 style="cursor:pointer; width:20px; height:20px; "
255 class="mr5"
256 @click="deleteItem(props.item)"
257 src="/static/icon/delete1.png"
258 />
259 <span>Delete</span>
260 </v-tooltip>
248 </span> 261 </span>
249 </td> 262 </td>
250 </template> 263 </template>
251 <v-alert 264 <v-alert
252 slot="no-results" 265 slot="no-results"
253 :value="true" 266 :value="true"
254 color="error" 267 color="error"
255 icon="warning" 268 icon="warning"
256 >Your search for "{{ search }}" found no results.</v-alert> 269 >Your search for "{{ search }}" found no results.</v-alert>
257 </v-data-table> 270 </v-data-table>
258 </v-tab-item> 271 </v-tab-item>
259 272
260 <!-- ****** ADD GRADE ****** --> 273 <!-- ****** ADD GRADE ****** -->
261 274
262 <v-tab-item> 275 <v-tab-item>
263 <v-container> 276 <v-container>
264 <v-snackbar 277 <v-snackbar
265 :timeout="timeout" 278 :timeout="timeout"
266 :top="y === 'top'" 279 :top="y === 'top'"
267 :right="x === 'right'" 280 :right="x === 'right'"
268 :vertical="mode === 'vertical'" 281 :vertical="mode === 'vertical'"
269 v-model="snackbar" 282 v-model="snackbar"
270 :color="color" 283 :color="color"
271 >{{ text }}</v-snackbar> 284 >{{ text }}</v-snackbar>
272 <v-flex xs12 sm12 class="my-4"> 285 <v-flex xs12 sm12 class="my-4">
273 <v-card flat> 286 <v-card flat>
274 <v-form ref="form" v-model="valid" lazy-validation> 287 <v-form ref="form" v-model="valid" lazy-validation>
275 <v-container fluid> 288 <v-container fluid>
276 <v-flex xs12> 289 <v-flex xs12>
277 <v-layout> 290 <v-layout>
278 <v-flex xs5 class="pt-4 subheading"> 291 <v-flex xs5 class="pt-4 subheading">
279 <label class="right">Grade Name:</label> 292 <label class="right">Grade Name:</label>
280 </v-flex> 293 </v-flex>
281 <v-flex xs7 sm4 class="ml-3"> 294 <v-flex xs7 sm4 class="ml-3">
282 <v-text-field 295 <v-text-field
283 placeholder="fill your Grade Name" 296 placeholder="fill your Grade Name"
284 :rules="gradeNameRules" 297 :rules="gradeNameRules"
285 v-model="addGrade.gradeName" 298 v-model="addGrade.gradeName"
286 ></v-text-field> 299 ></v-text-field>
287 </v-flex> 300 </v-flex>
288 </v-layout> 301 </v-layout>
289 </v-flex> 302 </v-flex>
290 <v-flex xs12> 303 <v-flex xs12>
291 <v-layout> 304 <v-layout>
292 <v-flex xs5 class="pt-4 subheading"> 305 <v-flex xs5 class="pt-4 subheading">
293 <label class="right">Grade Point:</label> 306 <label class="right">Grade Point:</label>
294 </v-flex> 307 </v-flex>
295 <v-flex xs7 sm4 class="ml-3"> 308 <v-flex xs7 sm4 class="ml-3">
296 <v-text-field 309 <v-text-field
297 placeholder="fill your Grade Point" 310 placeholder="fill your Grade Point"
298 v-model="addGrade.gradePoint" 311 v-model="addGrade.gradePoint"
299 :rules="gradePointRules" 312 :rules="gradePointRules"
300 ></v-text-field> 313 ></v-text-field>
301 </v-flex> 314 </v-flex>
302 </v-layout> 315 </v-layout>
303 </v-flex> 316 </v-flex>
304 <v-flex xs12> 317 <v-flex xs12>
305 <v-layout> 318 <v-layout>
306 <v-flex xs5 class="pt-4 subheading"> 319 <v-flex xs5 class="pt-4 subheading">
307 <label class="right">Mark From:</label> 320 <label class="right">Mark From:</label>
308 </v-flex> 321 </v-flex>
309 <v-flex xs7 sm4 class="ml-3"> 322 <v-flex xs7 sm4 class="ml-3">
310 <v-text-field 323 <v-text-field
311 placeholder="fill your Mark From" 324 placeholder="fill your Mark From"
312 :rules="markFromRules" 325 :rules="markFromRules"
313 v-model="addGrade.marksFrom" 326 v-model="addGrade.marksFrom"
314 ></v-text-field> 327 ></v-text-field>
315 </v-flex> 328 </v-flex>
316 </v-layout> 329 </v-layout>
317 </v-flex> 330 </v-flex>
318 <v-flex xs12> 331 <v-flex xs12>
319 <v-layout> 332 <v-layout>
320 <v-flex xs5 class="pt-4 subheading"> 333 <v-flex xs5 class="pt-4 subheading">
321 <label class="right">Mark Upto:</label> 334 <label class="right">Mark Upto:</label>
322 </v-flex> 335 </v-flex>
323 <v-flex xs7 sm4 class="ml-3"> 336 <v-flex xs7 sm4 class="ml-3">
324 <v-text-field 337 <v-text-field
325 placeholder="fill your Mark Upto" 338 placeholder="fill your Mark Upto"
326 :rules="markUptoRules" 339 :rules="markUptoRules"
327 v-model="addGrade.marksUpTo" 340 v-model="addGrade.marksUpTo"
328 ></v-text-field> 341 ></v-text-field>
329 </v-flex> 342 </v-flex>
330 </v-layout> 343 </v-layout>
331 </v-flex> 344 </v-flex>
332 <v-flex xs12> 345 <v-flex xs12>
333 <v-layout> 346 <v-layout>
334 <v-flex xs5 class="pt-4 subheading"> 347 <v-flex xs5 class="pt-4 subheading">
335 <label class="right">Note:</label> 348 <label class="right">Note:</label>
336 </v-flex> 349 </v-flex>
337 <v-flex xs7 sm4 class="ml-3"> 350 <v-flex xs7 sm4 class="ml-3">
338 <v-text-field 351 <v-text-field
339 placeholder="fill your Note" 352 placeholder="fill your Note"
340 :rules="noteRules" 353 :rules="noteRules"
341 v-model="addGrade.note" 354 v-model="addGrade.note"
342 @keyup.enter="submit" 355 @keyup.enter="submit"
343 ></v-text-field> 356 ></v-text-field>
344 </v-flex> 357 </v-flex>
345 </v-layout> 358 </v-layout>
346 </v-flex> 359 </v-flex>
347 <v-layout> 360 <v-layout>
348 <v-flex xs12 sm7 offset-sm3> 361 <v-flex xs12 sm7 offset-sm3>
349 <v-card-actions> 362 <v-card-actions>
350 <v-btn @click="clear" round dark>clear</v-btn> 363 <v-btn @click="clear" round dark>clear</v-btn>
351 <v-spacer class="hidden-xs-only"></v-spacer> 364 <v-spacer class="hidden-xs-only"></v-spacer>
352 <v-btn @click="submit" round dark :loading="loading">Add</v-btn> 365 <v-btn @click="submit" round dark :loading="loading">Add</v-btn>
353 </v-card-actions> 366 </v-card-actions>
354 </v-flex> 367 </v-flex>
355 </v-layout> 368 </v-layout>
356 </v-container> 369 </v-container>
357 </v-form> 370 </v-form>
358 </v-card> 371 </v-card>
359 </v-flex> 372 </v-flex>
360 </v-container> 373 </v-container>
361 </v-tab-item> 374 </v-tab-item>
362 </v-tabs> 375 </v-tabs>
363 <div class="loader" v-if="showLoader"> 376 <div class="loader" v-if="showLoader">
364 <v-progress-circular indeterminate color="white"></v-progress-circular> 377 <v-progress-circular indeterminate color="white"></v-progress-circular>
365 </div> 378 </div>
366 </v-app> 379 </v-app>
367 </template> 380 </template>
368 381
369 <script> 382 <script>
370 import http from "@/Services/http.js"; 383 import http from "@/Services/http.js";
371 import moment from "moment"; 384 import moment from "moment";
372 385
373 export default { 386 export default {
374 data: () => ({ 387 data: () => ({
375 snackbar: false, 388 snackbar: false,
376 date: null, 389 date: null,
377 menu1: false, 390 menu1: false,
378 menu2: false, 391 menu2: false,
379 color: "", 392 color: "",
380 y: "top", 393 y: "top",
381 x: "right", 394 x: "right",
382 mode: "", 395 mode: "",
383 timeout: 10000, 396 timeout: 10000,
384 text: "", 397 text: "",
385 // libraryId: "",s 398 // libraryId: "",s
386 loading: false, 399 loading: false,
387 loadingSearch: false, 400 loadingSearch: false,
388 date: null, 401 date: null,
389 search: "", 402 search: "",
390 showLoader: false, 403 showLoader: false,
391 dialog: false, 404 dialog: false,
392 dialog1: false, 405 dialog1: false,
393 valid: true, 406 valid: true,
394 isActive: true, 407 isActive: true,
395 newActive: false, 408 newActive: false,
396 // addclass: [],
397 // addSection: [],
398 // AddUsercredentials: {},
399 pagination: { 409 pagination: {
400 rowsPerPage: 15 410 rowsPerPage: 15
401 }, 411 },
402 gradeNameRules: [v => !!v || "Grade Name is required"], 412 gradeNameRules: [v => !!v || "Grade Name is required"],
403 gradePointRules: [v => !!v || "Grade Pointis required"], 413 gradePointRules: [v => !!v || "Grade Point required"],
404 markFromRules: [v => !!v || "Mark From is required"], 414 markFromRules: [v => !!v || "Mark From is required"],
405 markUptoRules: [v => !!v || "Mark Upto is required"], 415 markUptoRules: [v => !!v || "Mark Upto is required"],
406 authorRules: [v => !!v || "Author is required"], 416 authorRules: [v => !!v || "Author is required"],
407 noteRules: [v => !!v || "Note is required"], 417 noteRules: [v => !!v || "Note is required"],
408 headers: [ 418 headers: [
409 { 419 {
410 align: "justify-center", 420 align: "justify-center",
411 text: "No", 421 text: "No",
412 sortable: false, 422 sortable: false,
413 value: "No" 423 value: "No"
414 }, 424 },
415 { 425 {
416 text: "Grade Name", 426 text: "Grade Name",
417 vaue: "gradeName", 427 vaue: "gradeName",
418 sortable: false, 428 sortable: false,
419 align: "center" 429 align: "center"
420 }, 430 },
421 { 431 {
422 text: "Grade Point", 432 text: "Grade Point",
423 value: "gradePoint", 433 value: "gradePoint",
424 sortable: false, 434 sortable: false,
425 align: "center" 435 align: "center"
426 }, 436 },
427 { 437 {
428 text: "Mark From", 438 text: "Mark From",
429 value: "marksFrom", 439 value: "marksFrom",
430 sortable: false, 440 sortable: false,
431 align: "center" 441 align: "center"
432 }, 442 },
433 { 443 {
434 text: "Mark Upto", 444 text: "Mark Upto",
435 value: "marksUpTo", 445 value: "marksUpTo",
436 sortable: false, 446 sortable: false,
437 align: "center" 447 align: "center"
438 }, 448 },
439 { 449 {
440 text: "Note", 450 text: "Note",
441 value: "note", 451 value: "note",
442 sortable: false, 452 sortable: false,
443 align: "center" 453 align: "center"
444 }, 454 },
445 { text: "Action", value: "", sortable: false, align: "center" } 455 { text: "Action", value: "", sortable: false, align: "center" }
446 ], 456 ],
447 gradeData: [], 457 gradeData: [],
448 addGrade: {}, 458 addGrade: {},
449 editedItem: {}, 459 editedItem: {},
450 token: "" 460 token: ""
451 }), 461 }),
452 methods: { 462 methods: {
453 dates: function(date) { 463 dates: function(date) {
454 return moment(date).format("MMMM DD, YYYY"); 464 return moment(date).format("MMMM DD, YYYY");
455 }, 465 },
456 pickFile() { 466 pickFile() {
457 this.$refs.image.click(); 467 this.$refs.image.click();
458 }, 468 },
459 getGradeList() { 469 getGradeList() {
460 this.showLoader = true; 470 this.showLoader = true;
461 this.loadingSearch = true; 471 this.loadingSearch = true;
462 http() 472 http()
463 .get("/getGradesList", { 473 .get("/getGradesList", {
464 headers: { Authorization: "Bearer " + this.token } 474 headers: { Authorization: "Bearer " + this.token }
465 }) 475 })
466 .then(response => { 476 .then(response => {
467 this.gradeData = response.data.data; 477 this.gradeData = response.data.data;
468 this.showLoader = false; 478 this.showLoader = false;
469 this.loadingSearch = false; 479 this.loadingSearch = false;
470 }) 480 })
471 .catch(error => { 481 .catch(error => {
472 // console.log("err====>", err); 482 // console.log("err====>", err);
473 this.showLoader = false; 483 this.showLoader = false;
474 this.loadingSearch = false; 484 this.loadingSearch = false;
475 this.snackbar = true; 485 this.snackbar = true;
476 this.text = error.response.data.message; 486 this.text = error.response.data.message;
477 if (error.response.status === 401) { 487 if (error.response.status === 401) {
478 this.$router.replace({ path: "/" }); 488 this.$router.replace({ path: "/" });
479 this.$store.dispatch("setToken", null); 489 this.$store.dispatch("setToken", null);
480 this.$store.dispatch("Id", null); 490 this.$store.dispatch("Id", null);
481 } 491 }
482 }); 492 });
483 }, 493 },
484 editItem(item) { 494 editItem(item) {
485 console.log("item", item); 495 console.log("item", item);
486 this.editedIndex = this.gradeData.indexOf(item); 496 this.editedIndex = this.gradeData.indexOf(item);
487 this.editedItem = Object.assign({}, item); 497 this.editedItem = Object.assign({}, item);
488 this.editedItem.date = 498 this.editedItem.date =
489 this.editedItem.date != undefined 499 this.editedItem.date != undefined
490 ? (this.editedItem.date = this.editedItem.date.substring(0, 10)) 500 ? (this.editedItem.date = this.editedItem.date.substring(0, 10))
491 : (this.editedItem.date = ""); 501 : (this.editedItem.date = "");
492 this.dialog = true; 502 this.dialog = true;
493 }, 503 },
494 profile(item) { 504 profile(item) {
495 this.editedIndex = this.gradeData.indexOf(item); 505 this.editedIndex = this.gradeData.indexOf(item);
496 this.editedItem = Object.assign({}, item); 506 this.editedItem = Object.assign({}, item);
497 this.dialog1 = true; 507 this.dialog1 = true;
498 }, 508 },
499 deleteGrade(item) { 509 deleteGrade(item) {
500 let deleteGrade = { 510 let deleteGrade = {
501 gradeId: item._id 511 gradeId: item._id
502 }; 512 };
503 http() 513 http()
504 .delete( 514 .delete(
505 "/deleteGrade", 515 "/deleteGrade",
506 confirm("Are you sure you want to Delete this?") && { 516 confirm("Are you sure you want to Delete this?") && {
507 params: deleteGrade 517 params: deleteGrade
508 } 518 }
509 ) 519 )
510 .then(response => { 520 .then(response => {
511 this.snackbar = true; 521 this.snackbar = true;
512 this.text = "Successfully Delete Grade "; 522 this.text = "Successfully Delete Grade ";
513 this.getGradeList(); 523 this.getGradeList();
514 }) 524 })
515 .catch(error => { 525 .catch(error => {
516 // console.log(error); 526 // console.log(error);
517 }); 527 });
518 }, 528 },
519 activeTab(type) { 529 activeTab(type) {
520 switch (type) { 530 switch (type) {
521 case "existing": 531 case "existing":
522 this.newActive = false; 532 this.newActive = false;
523 this.isActive = true; 533 this.isActive = true;
524 break; 534 break;
525 535
526 default: 536 default:
527 this.newActive = true; 537 this.newActive = true;
528 this.isActive = false; 538 this.isActive = false;
529 break; 539 break;
530 } 540 }
531 }, 541 },
532 close() { 542 close() {
533 this.dialog = false; 543 this.dialog = false;
534 }, 544 },
535 close1() { 545 close1() {
536 this.dialog1 = false; 546 this.dialog1 = false;
537 }, 547 },
538 submit() { 548 submit() {
539 this.loading = true; 549 this.loading = true;
540 if (this.$refs.form.validate()) { 550 if (this.$refs.form.validate()) {
541 http() 551 http()
542 .post("/createGrade", this.addGrade) 552 .post("/createGrade", this.addGrade)
543 .then(response => { 553 .then(response => {
544 this.snackbar = true; 554 this.snackbar = true;
545 this.text = "New Grade added successfully"; 555 this.text = "New Grade added successfully";
546 this.getGradeList(); 556 this.getGradeList();
547 this.color = "succses"; 557 this.color = "succses";
548 this.loading = false; 558 this.loading = false;
549 this.clear(); 559 this.clear();
550 }) 560 })
551 .catch(error => { 561 .catch(error => {
552 if ((this.snackbar = true)) { 562 if ((this.snackbar = true)) {
553 this.text = error.response.data.message; 563 this.text = error.response.data.message;
554 this.color = "red"; 564 this.color = "red";
555 } 565 }
556 }); 566 });
557 } 567 }
558 }, 568 },
559 clear() { 569 clear() {
560 this.$refs.form.reset(); 570 this.$refs.form.reset();
561 this.disable = false; 571 this.disable = false;
562 this.loading = false; 572 this.loading = false;
563 }, 573 },
564 save() { 574 save() {
565 this.editedItem.gradeId = this.editedItem._id; 575 this.editedItem.gradeId = this.editedItem._id;
566 http() 576 http()
567 .put("/updateGrade", this.editedItem) 577 .put("/updateGrade", this.editedItem)
568 .then(response => { 578 .then(response => {
569 this.snackbar = true; 579 this.snackbar = true;
570 this.text = "Successfully Edit Grade"; 580 this.text = "Successfully Edit Grade";
571 this.color = "green"; 581 this.color = "green";
572 this.getGradeList(); 582 this.getGradeList();
573 this.close(); 583 this.close();
574 }) 584 })
575 .catch(error => { 585 .catch(error => {
576 this.snackbar = true; 586 this.snackbar = true;
577 this.text = error.response.data.message; 587 this.text = error.response.data.message;
578 this.color = "red"; 588 this.color = "red";
579 }); 589 });
580 } 590 }
581 }, 591 },
582 mounted() { 592 mounted() {
583 this.token = this.$store.state.token; 593 this.token = this.$store.state.token;
584 this.getGradeList(); 594 this.getGradeList();
585 }, 595 },
586 created() { 596 created() {
587 this.$root.$on("app:search", search => { 597 this.$root.$on("app:search", search => {
588 this.search = search; 598 this.search = search;
589 }); 599 });
590 }, 600 },
591 beforeDestroy() { 601 beforeDestroy() {
592 // dont forget to remove the listener 602 // dont forget to remove the listener
593 this.$root.$off("app:search"); 603 this.$root.$off("app:search");
594 } 604 }
595 }; 605 };
596 </script> 606 </script>
597 <style scoped> 607 <style scoped>
598 .active { 608 .active {
599 background-color: gray; 609 background-color: gray;
600 color: white !important; 610 color: white !important;
601 } 611 }
602 .activebtn { 612 .activebtn {
src/pages/Gallery/gallery.vue
Diff comments   View file @495e403
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 Gallery</v-tab> 10 >Existing Gallery</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 Gallery</v-tab> 18 >Add Gallery</v-tab>
19 19
20 <!-- ****** EDITS ALL Gallery DETAILS ****** --> 20 <!-- ****** EDITS ALL Gallery 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 Gallery</h3> 36 <h3>Edit Gallery</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:700px;"> 40 <v-card-text style="height:700px;">
41 <v-layout row> 41 <v-layout row>
42 <v-flex 42 <v-flex
43 xs12 43 xs12
44 class="text-xs-center text-sm-center text-md-center text-lg-center my-4" 44 class="text-xs-center text-sm-center text-md-center text-lg-center my-4"
45 > 45 >
46 <input 46 <input
47 type="file" 47 type="file"
48 style="display: none" 48 style="display: none"
49 ref="editImage" 49 ref="editImage"
50 accept="image/*" 50 accept="image/*"
51 multiple 51 multiple
52 @change="editFilePicked" 52 @change="editFilePicked"
53 /> 53 />
54 <v-layout justify-center> 54 <v-layout justify-center>
55 <v-flex 55 <v-flex
56 xs6 56 xs6
57 sm12 57 sm12
58 md3 58 md3
59 v-for="Image in editedItem.imageUrl" 59 v-for="Image in editedItem.imageUrl"
60 :key="Image._id" 60 :key="Image._id"
61 v-if="editedItem.imageUrl" 61 v-if="editedItem.imageUrl"
62 class="profile-image-wrapper imgNews" 62 class="profile-image-wrapper imgNews"
63 > 63 >
64 <img 64 <img
65 :src="Image.imageLink" 65 :src="Image.imageLink"
66 height="160" 66 height="160"
67 width="160" 67 width="160"
68 alt="Gallery" 68 alt="Gallery"
69 class="pa-2 imgNews" 69 class="pa-2 imgNews"
70 /> 70 />
71 <v-icon 71 <v-icon
72 class="red edit-profile-icon" 72 class="red edit-profile-icon"
73 dark 73 dark
74 @click="deleteImage(Image._id,editedItem._id)" 74 @click="deleteImage(Image._id,editedItem._id)"
75 >close</v-icon> 75 >close</v-icon>
76 </v-flex> 76 </v-flex>
77 <v-flex v-for="(file, index) in editFiles" :key="index"> 77 <v-flex v-for="(file, index) in editFiles" :key="index">
78 <img :src="file" height="160" width="160" class="pa-2 imgNews" /> 78 <img :src="file" height="160" width="160" class="pa-2 imgNews" />
79 </v-flex> 79 </v-flex>
80 </v-layout> 80 </v-layout>
81 <img 81 <img
82 src="/static/icon/user.png" 82 src="/static/icon/user.png"
83 v-if="editedItem.imageUrl == '' && editFiles == ''" 83 v-if="editedItem.imageUrl == '' && editFiles == ''"
84 height="160" 84 height="160"
85 width="160" 85 width="160"
86 alt="Gallery" 86 alt="Gallery"
87 /> 87 />
88 </v-flex> 88 </v-flex>
89 </v-layout> 89 </v-layout>
90 <v-layout wrap> 90 <v-layout wrap>
91 <v-flex xs12 sm12> 91 <v-flex xs12 sm12>
92 <v-layout> 92 <v-layout>
93 <v-flex xs4 class="pt-4 subheading"> 93 <v-flex xs4 class="pt-4 subheading">
94 <label class="right">Title:</label> 94 <label class="right">Title:</label>
95 </v-flex> 95 </v-flex>
96 <v-flex xs8 sm5 class="ml-3"> 96 <v-flex xs8 sm5 class="ml-3">
97 <v-text-field 97 <v-text-field
98 v-model="editedItem.title" 98 v-model="editedItem.title"
99 placeholder="fill your Title" 99 placeholder="fill your Title"
100 name="name" 100 name="name"
101 type="text" 101 type="text"
102 required 102 required
103 ></v-text-field> 103 ></v-text-field>
104 </v-flex> 104 </v-flex>
105 </v-layout> 105 </v-layout>
106 </v-flex> 106 </v-flex>
107 <v-flex xs12 sm12> 107 <v-flex xs12 sm12>
108 <v-layout> 108 <v-layout>
109 <v-flex xs4 class="pt-4 subheading"> 109 <v-flex xs4 class="pt-4 subheading">
110 <label class="right">Description:</label> 110 <label class="right">Description:</label>
111 </v-flex> 111 </v-flex>
112 <v-flex xs8 sm5 class="ml-3"> 112 <v-flex xs8 sm5 class="ml-3">
113 <v-text-field 113 <v-text-field
114 placeholder="fill your Description" 114 placeholder="fill your Description"
115 v-model="editedItem.description" 115 v-model="editedItem.description"
116 type="text" 116 type="text"
117 name="email" 117 name="email"
118 required 118 required
119 ></v-text-field> 119 ></v-text-field>
120 </v-flex> 120 </v-flex>
121 </v-layout> 121 </v-layout>
122 </v-flex> 122 </v-flex>
123 <v-layout> 123 <v-layout>
124 <v-flex xs4 class="pt-4 subheading"> 124 <v-flex xs4 class="pt-4 subheading">
125 <label class="right hidden-xs-only hidden-sm-only">Select Class:</label> 125 <label class="right hidden-xs-only hidden-sm-only">Select Class:</label>
126 <label class="right hidden-lg-only hidden-md-only hidden-xl-only">Class:</label> 126 <label class="right hidden-lg-only hidden-md-only hidden-xl-only">Class:</label>
127 </v-flex> 127 </v-flex>
128 <v-flex xs8 sm5 class="ml-3"> 128 <v-flex xs8 sm5 class="ml-3">
129 <v-select 129 <v-select
130 :items="addclass" 130 :items="addclass"
131 label="Select Class" 131 label="Select Class"
132 v-model="editedItem.classNum" 132 v-model="editedItem.classNum"
133 item-text="classNum" 133 item-text="classNum"
134 item-value="_id" 134 item-value="_id"
135 name="Select Class" 135 name="Select Class"
136 required 136 required
137 ></v-select> 137 ></v-select>
138 </v-flex> 138 </v-flex>
139 </v-layout> 139 </v-layout>
140 <v-flex xs12> 140 <v-flex xs12>
141 <v-layout> 141 <v-layout>
142 <v-flex xs4 class="pt-4 subheading"> 142 <v-flex xs4 class="pt-4 subheading">
143 <label class="right hidden-xs-only hidden-sm-only">Add New Images:</label> 143 <label class="right hidden-xs-only hidden-sm-only">Add New Images:</label>
144 <label class="right hidden-lg-only hidden-md-only hidden-xl-only">Upload:</label> 144 <label class="right hidden-lg-only hidden-md-only hidden-xl-only">Upload:</label>
145 </v-flex> 145 </v-flex>
146 <v-flex xs8 sm5 class="ml-3"> 146 <v-flex xs8 sm5 class="ml-3">
147 <v-text-field 147 <v-text-field
148 label="Select Image" 148 label="Select Image"
149 @click="editPickFile" 149 @click="editPickFile"
150 v-model="editImageName" 150 v-model="editImageName"
151 append-icon="attach_file" 151 append-icon="attach_file"
152 multiple 152 multiple
153 ></v-text-field> 153 ></v-text-field>
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-flex xs12> 158 <v-flex xs12>
159 <div 159 <div
160 v-for="(editImage,index) in editedItem.youTubeLinkUrl" 160 v-for="(editImage,index) in editedItem.youTubeLinkUrl"
161 :key="index" 161 :key="index"
162 v-if="editImage.youTubeLink !=[]" 162 v-if="editImage.youTubeLink !=[]"
163 > 163 >
164 <v-layout> 164 <v-layout>
165 <v-flex xs4 class="pt-4 subheading"> 165 <v-flex xs4 class="pt-4 subheading">
166 <label class="right">You Tube Link Url:</label> 166 <label class="right">You Tube Link Url:</label>
167 </v-flex> 167 </v-flex>
168 <v-flex xs8 sm5 class="ml-3"> 168 <v-flex xs8 sm5 class="ml-3">
169 <v-text-field 169 <v-text-field
170 v-model="editImage.youTubeLink" 170 v-model="editImage.youTubeLink"
171 type="text" 171 type="text"
172 name="link" 172 name="link"
173 required 173 required
174 ></v-text-field> 174 ></v-text-field>
175 </v-flex> 175 </v-flex>
176 <v-flex xs2 class="pt-4"> 176 <v-flex xs2 class="pt-4">
177 <v-icon @click="deleteUrl(index,editImage._id,editedItem._id)">cancel</v-icon> 177 <v-icon @click="deleteUrl(index,editImage._id,editedItem._id)">cancel</v-icon>
178 </v-flex> 178 </v-flex>
179 </v-layout> 179 </v-layout>
180 </div> 180 </div>
181 </v-flex> 181 </v-flex>
182 <v-flex xs12> 182 <v-flex xs12>
183 <div v-for="(updateImage,index) in updates" :key="index"> 183 <div v-for="(updateImage,index) in updates" :key="index">
184 <v-layout> 184 <v-layout>
185 <v-flex xs4 class="pt-4 subheading"> 185 <v-flex xs4 class="pt-4 subheading">
186 <label class="right">You Tube Url:</label> 186 <label class="right">You Tube Url:</label>
187 </v-flex> 187 </v-flex>
188 <v-flex xs5 sm5 class="ml-3"> 188 <v-flex xs5 sm5 class="ml-3">
189 <v-text-field 189 <v-text-field
190 v-model="updateImage.youTubeLink" 190 v-model="updateImage.youTubeLink"
191 label="Upload new you tube link url" 191 label="Upload new you tube link url"
192 required 192 required
193 ></v-text-field> 193 ></v-text-field>
194 </v-flex> 194 </v-flex>
195 <v-flex xs2 class="pt-4"> 195 <v-flex xs2 class="pt-4">
196 <v-icon @click="deleteUpdate(index)" v-if="index !=0">cancel</v-icon> 196 <v-icon @click="deleteUpdate(index)" v-if="index !=0">cancel</v-icon>
197 <v-icon @click="update">add_circle</v-icon> 197 <v-icon @click="update">add_circle</v-icon>
198 </v-flex> 198 </v-flex>
199 </v-layout> 199 </v-layout>
200 </div> 200 </div>
201 </v-flex> 201 </v-flex>
202 <v-layout> 202 <v-layout>
203 <v-flex xs12 sm8 offset-sm2> 203 <v-flex xs12 sm8 offset-sm2>
204 <v-card-actions> 204 <v-card-actions>
205 <v-btn round dark @click.native="close">Cancel</v-btn> 205 <v-btn round dark @click.native="close">Cancel</v-btn>
206 <v-spacer></v-spacer> 206 <v-spacer></v-spacer>
207 <v-btn round dark @click="save">Save</v-btn> 207 <v-btn round dark @click="save">Save</v-btn>
208 </v-card-actions> 208 </v-card-actions>
209 </v-flex> 209 </v-flex>
210 </v-layout> 210 </v-layout>
211 <!-- </v-container> 211 <!-- </v-container>
212 </v-form>--> 212 </v-form>-->
213 </v-card-text> 213 </v-card-text>
214 </v-card> 214 </v-card>
215 </v-dialog> 215 </v-dialog>
216 216
217 <!-- ****** PROFILE VIEW Gallery ****** --> 217 <!-- ****** PROFILE VIEW Gallery ****** -->
218 218
219 <v-dialog v-model="dialog1" max-width="940px"> 219 <v-dialog v-model="dialog1" max-width="940px">
220 <v-card> 220 <v-card>
221 <v-toolbar color="grey lighten-2" flat> 221 <v-toolbar color="grey lighten-2" flat>
222 <v-spacer></v-spacer> 222 <v-spacer></v-spacer>
223 <v-toolbar-title> 223 <v-toolbar-title>
224 <h3>Gallery</h3> 224 <h3>Gallery</h3>
225 </v-toolbar-title> 225 </v-toolbar-title>
226 <v-spacer></v-spacer> 226 <v-spacer></v-spacer>
227 <v-icon @click="close1">close</v-icon> 227 <v-icon @click="close1">close</v-icon>
228 </v-toolbar> 228 </v-toolbar>
229 <v-flex align-center justify-center layout text-xs-center> 229 <v-flex align-center justify-center layout text-xs-center>
230 <v-avatar size="100" v-if="editedItem.imageUrl == ''" class="mt-4 pa-2"> 230 <v-avatar size="100" v-if="editedItem.imageUrl == ''" class="mt-4 pa-2">
231 <img src="/static/icon/user.png" width="240" height="180" /> 231 <img src="/static/icon/user.png" width="240" height="180" />
232 </v-avatar> 232 </v-avatar>
233 <span 233 <span
234 v-for="(image,i) in editedItem.imageUrl" 234 v-for="(image,i) in editedItem.imageUrl"
235 :key="i" 235 :key="i"
236 class="mt-4 pa-2" 236 class="mt-4 pa-2"
237 v-if="editedItem.imageUrl" 237 v-if="editedItem.imageUrl"
238 > 238 >
239 <img :src="image.imageLink" alt="Gallery" width="240" height="180" class="imgNews" /> 239 <img :src="image.imageLink" alt="Gallery" width="240" height="180" class="imgNews" />
240 </span> 240 </span>
241 </v-flex> 241 </v-flex>
242 <v-card-text> 242 <v-card-text>
243 <v-container grid-list-md> 243 <v-container grid-list-md>
244 <v-layout wrap> 244 <v-layout wrap>
245 <v-flex> 245 <v-flex>
246 <v-layout> 246 <v-layout>
247 <v-flex xs5 sm6> 247 <v-flex xs5 sm6>
248 <h5 class="right my-1"> 248 <h5 class="right my-1">
249 <b>Title:</b> 249 <b>Title:</b>
250 </h5> 250 </h5>
251 </v-flex> 251 </v-flex>
252 <v-flex sm6 xs8> 252 <v-flex sm6 xs8>
253 <h5 class="my-1">{{ editedItem.title }}</h5> 253 <h5 class="my-1">{{ editedItem.title }}</h5>
254 </v-flex> 254 </v-flex>
255 </v-layout> 255 </v-layout>
256 <v-layout> 256 <v-layout>
257 <v-flex xs5 sm6> 257 <v-flex xs5 sm6>
258 <h5 class="right my-1"> 258 <h5 class="right my-1">
259 <b>Description:</b> 259 <b>Description:</b>
260 </h5> 260 </h5>
261 </v-flex> 261 </v-flex>
262 <v-flex sm6 xs8> 262 <v-flex sm6 xs8>
263 <h5 class="my-1">{{ editedItem.description }}</h5> 263 <h5 class="my-1">{{ editedItem.description }}</h5>
264 </v-flex> 264 </v-flex>
265 </v-layout> 265 </v-layout>
266 <v-layout> 266 <v-layout>
267 <v-flex xs5 sm6> 267 <v-flex xs5 sm6>
268 <h5 class="right my-1"> 268 <h5 class="right my-1">
269 <b>You Tube Link Url:</b> 269 <b>You Tube Link Url:</b>
270 </h5> 270 </h5>
271 </v-flex> 271 </v-flex>
272 <v-flex sm6 xs8> 272 <v-flex sm6 xs8>
273 <h5 class="my-1 ml-3"> 273 <h5 class="my-1 ml-3">
274 <ul v-for="youTubeLinkUrl in editedItem.youTubeLinkUrl"> 274 <ul v-for="youTubeLinkUrl in editedItem.youTubeLinkUrl">
275 <li>{{ youTubeLinkUrl.youTubeLink }}</li> 275 <li>{{ youTubeLinkUrl.youTubeLink }}</li>
276 </ul> 276 </ul>
277 </h5> 277 </h5>
278 </v-flex> 278 </v-flex>
279 </v-layout> 279 </v-layout>
280 </v-flex> 280 </v-flex>
281 </v-layout> 281 </v-layout>
282 </v-container> 282 </v-container>
283 </v-card-text> 283 </v-card-text>
284 </v-card> 284 </v-card>
285 </v-dialog> 285 </v-dialog>
286 286
287 <v-snackbar 287 <v-snackbar
288 :timeout="timeout" 288 :timeout="timeout"
289 :top="y === 'top'" 289 :top="y === 'top'"
290 :right="x === 'right'" 290 :right="x === 'right'"
291 :vertical="mode === 'vertical'" 291 :vertical="mode === 'vertical'"
292 v-model="snackbar" 292 v-model="snackbar"
293 color="success" 293 color="success"
294 >{{ text }}</v-snackbar> 294 >{{ text }}</v-snackbar>
295 295
296 <!-- ****** EXISTING-USERS Gallery TABLE ****** --> 296 <!-- ****** EXISTING-USERS Gallery TABLE ****** -->
297 <v-data-table 297 <v-data-table
298 :headers="headers" 298 :headers="headers"
299 :items="desserts" 299 :items="desserts"
300 :pagination.sync="pagination" 300 :pagination.sync="pagination"
301 :search="search" 301 :search="search"
302 > 302 >
303 <template slot="items" slot-scope="props"> 303 <template slot="items" slot-scope="props">
304 <td class="text-xs-center">{{ props.index + 1}}</td> 304 <td class="text-xs-center">{{ props.index + 1}}</td>
305 <td id="td" class="text-xs-center"> 305 <td id="td" class="text-xs-center">
306 <span v-for="(image,_id) in props.item.imageUrl" class="pa-2"> 306 <span v-for="(image,_id) in props.item.imageUrl" class="pa-2">
307 <img :src="image.imageLink" alt="newsImage" width="100" height="70" /> 307 <img :src="image.imageLink" alt="newsImage" width="100" height="70" />
308 </span> 308 </span>
309 </td> 309 </td>
310 <td id="td" class="text-xs-center">{{ props.item.title}}</td> 310 <td id="td" class="text-xs-center">{{ props.item.title}}</td>
311 <td id="td" class="text-xs-center">{{ props.item.description}}</td> 311 <td id="td" class="text-xs-center">{{ props.item.description}}</td>
312 312
313 <td id="td" class="text-xs-center"> 313 <td id="td" class="text-xs-center">
314 <span> 314 <span>
315 <img 315 <v-tooltip top>
316 style="cursor:pointer; width:25px; height:18px; " 316 <img
317 class="mr-5" 317 slot="activator"
318 @click="profile(props.item)" 318 style="cursor:pointer; width:25px; height:18px; "
319 src="/static/icon/eye1.png" 319 class="mr5"
320 /> 320 @click="profile(props.item)"
321 <img 321 src="/static/icon/eye1.png"
322 style="cursor:pointer; width:20px; height:18px; " 322 />
323 class="mr-5" 323 <span>View</span>
324 @click="editItem(props.item)" 324 </v-tooltip>
325 src="/static/icon/edit1.png" 325 <v-tooltip top>
326 /> 326 <img
327 <img 327 slot="activator"
328 style="cursor:pointer;width:20px; height:20px; " 328 style="cursor:pointer; width:20px; height:18px; "
329 class="mr-5" 329 class="mr5"
330 @click="deleteItem(props.item)" 330 @click="editItem(props.item)"
331 src="/static/icon/delete1.png" 331 src="/static/icon/edit1.png"
332 /> 332 />
333 <span>Edit</span>
334 </v-tooltip>
335 <v-tooltip top>
336 <img
337 slot="activator"
338 style="cursor:pointer; width:20px; height:20px; "
339 class="mr5"
340 @click="deleteItem(props.item)"
341 src="/static/icon/delete1.png"
342 />
343 <span>Delete</span>
344 </v-tooltip>
333 </span> 345 </span>
334 </td> 346 </td>
335 </template> 347 </template>
336 <v-alert 348 <v-alert
337 slot="no-results" 349 slot="no-results"
338 :value="true" 350 :value="true"
339 color="error" 351 color="error"
340 icon="warning" 352 icon="warning"
341 >Your search for "{{ search }}" found no results.</v-alert> 353 >Your search for "{{ search }}" found no results.</v-alert>
342 </v-data-table> 354 </v-data-table>
343 </v-tab-item> 355 </v-tab-item>
344 356
345 <!-- ****** ADD MULTIPLE Gallery Data ****** --> 357 <!-- ****** ADD MULTIPLE Gallery Data ****** -->
346 358
347 <v-tab-item> 359 <v-tab-item>
348 <v-container> 360 <v-container>
349 <v-snackbar 361 <v-snackbar
350 :timeout="timeout" 362 :timeout="timeout"
351 :top="y === 'top'" 363 :top="y === 'top'"
352 :right="x === 'right'" 364 :right="x === 'right'"
353 :vertical="mode === 'vertical'" 365 :vertical="mode === 'vertical'"
354 v-model="snackbar" 366 v-model="snackbar"
355 color="success" 367 color="success"
356 >{{ text }}</v-snackbar> 368 >{{ text }}</v-snackbar>
357 <v-flex xs12 sm12 class="my-4"> 369 <v-flex xs12 sm12 class="my-4">
358 <v-card flat> 370 <v-card flat>
359 <v-form ref="form" v-model="valid" lazy-validation> 371 <v-form ref="form" v-model="valid" lazy-validation>
360 <v-container fluid> 372 <v-container fluid>
361 <v-layout> 373 <v-layout>
362 <v-flex 374 <v-flex
363 xs12 375 xs12
364 class="text-xs-center text-sm-center text-md-center text-lg-center my-4" 376 class="text-xs-center text-sm-center text-md-center text-lg-center my-4"
365 > 377 >
366 <input 378 <input
367 type="file" 379 type="file"
368 style="display: none" 380 style="display: none"
369 ref="image" 381 ref="image"
370 accept="image/*" 382 accept="image/*"
371 multiple 383 multiple
372 @change="onFilePicked" 384 @change="onFilePicked"
373 /> 385 />
374 <v-layout justify-center> 386 <v-layout justify-center>
375 <v-flex v-for="(file,index) in files" :key="index" v-if="files"> 387 <v-flex v-for="(file,index) in files" :key="index" v-if="files">
376 <img :src="file" height="160" width="160px;" class="imgNews" /> 388 <img :src="file" height="160" width="160px;" class="imgNews" />
377 </v-flex> 389 </v-flex>
378 </v-layout> 390 </v-layout>
379 <img 391 <img
380 src="/static/icon/user.png" 392 src="/static/icon/user.png"
381 v-if="files ==''" 393 v-if="files ==''"
382 height="140" 394 height="140"
383 width="180px;" 395 width="180px;"
384 class="imgNews" 396 class="imgNews"
385 /> 397 />
386 </v-flex> 398 </v-flex>
387 </v-layout> 399 </v-layout>
388 <v-flex xs12> 400 <v-flex xs12>
389 <v-layout> 401 <v-layout>
390 <v-flex xs4 class="pt-4 subheading"> 402 <v-flex xs4 class="pt-4 subheading">
391 <label class="right">Title:</label> 403 <label class="right">Title:</label>
392 </v-flex> 404 </v-flex>
393 <v-flex xs8 sm4 class="ml-3"> 405 <v-flex xs8 sm4 class="ml-3">
394 <v-text-field 406 <v-text-field
395 v-model="addGallery.title" 407 v-model="addGallery.title"
396 placeholder="fill your Title" 408 placeholder="fill your Title"
397 name="name" 409 name="name"
398 type="text" 410 type="text"
399 :rules="titleRules" 411 :rules="titleRules"
400 required 412 required
401 ></v-text-field> 413 ></v-text-field>
402 </v-flex> 414 </v-flex>
403 </v-layout> 415 </v-layout>
404 </v-flex> 416 </v-flex>
405 <v-flex xs12> 417 <v-flex xs12>
406 <v-layout> 418 <v-layout>
407 <v-flex xs4 class="pt-4 subheading"> 419 <v-flex xs4 class="pt-4 subheading">
408 <label class="right">Description:</label> 420 <label class="right">Description:</label>
409 </v-flex> 421 </v-flex>
410 <v-flex xs8 sm4 class="ml-3"> 422 <v-flex xs8 sm4 class="ml-3">
411 <v-text-field 423 <v-text-field
412 placeholder="fill your Description" 424 placeholder="fill your Description"
413 :rules="descriptionRules" 425 :rules="descriptionRules"
414 v-model="addGallery.description" 426 v-model="addGallery.description"
415 type="text" 427 type="text"
416 name="email" 428 name="email"
417 required 429 required
418 ></v-text-field> 430 ></v-text-field>
419 </v-flex> 431 </v-flex>
420 </v-layout> 432 </v-layout>
421 </v-flex> 433 </v-flex>
422 <v-flex xs12> 434 <v-flex xs12>
423 <v-layout> 435 <v-layout>
424 <v-flex xs4 class="pt-4 subheading"> 436 <v-flex xs4 class="pt-4 subheading">
425 <label class="right hidden-xs-only hidden-sm-only">Select Class:</label> 437 <label class="right hidden-xs-only hidden-sm-only">Select Class:</label>
426 <label class="right hidden-lg-only hidden-md-only hidden-xl-only">Class:</label> 438 <label class="right hidden-lg-only hidden-md-only hidden-xl-only">Class:</label>
427 </v-flex> 439 </v-flex>
428 <v-flex xs8 sm4 class="ml-3"> 440 <v-flex xs8 sm4 class="ml-3">
429 <v-select 441 <v-select
430 :items="addclass" 442 :items="addclass"
431 label="Select Class" 443 label="Select Class"
432 v-model="addGallery.classNum" 444 v-model="addGallery.classNum"
433 item-text="classNum" 445 item-text="classNum"
434 item-value="_id" 446 item-value="_id"
435 name="Select Class" 447 name="Select Class"
436 required 448 required
437 ></v-select> 449 ></v-select>
438 </v-flex> 450 </v-flex>
439 </v-layout> 451 </v-layout>
440 </v-flex> 452 </v-flex>
441 <v-flex xs12> 453 <v-flex xs12>
442 <v-layout> 454 <v-layout>
443 <v-flex xs4 class="pt-4 subheading"> 455 <v-flex xs4 class="pt-4 subheading">
444 <label class="right hidden-xs-only hidden-sm-only">Uplaod Image:</label> 456 <label class="right hidden-xs-only hidden-sm-only">Uplaod Image:</label>
445 <label class="right hidden-lg-only hidden-md-only hidden-xl-only">Uplaod:</label> 457 <label class="right hidden-lg-only hidden-md-only hidden-xl-only">Uplaod:</label>
446 </v-flex> 458 </v-flex>
447 <v-flex xs8 sm4 class="ml-3"> 459 <v-flex xs8 sm4 class="ml-3">
448 <v-text-field 460 <v-text-field
449 label="Select Image" 461 label="Select Image"
450 @click="pickFile" 462 @click="pickFile"
451 v-model="imageName" 463 v-model="imageName"
452 append-icon="attach_file" 464 append-icon="attach_file"
453 multiple 465 multiple
454 ></v-text-field> 466 ></v-text-field>
455 </v-flex> 467 </v-flex>
456 </v-layout> 468 </v-layout>
457 </v-flex> 469 </v-flex>
458 <v-layout> 470 <v-layout>
459 <v-flex xs12> 471 <v-flex xs12>
460 <div v-for="(youTubeLink,index) in finds" :key="index"> 472 <div v-for="(youTubeLink,index) in finds" :key="index">
461 <v-layout> 473 <v-layout>
462 <v-flex xs4 class="pt-4 subheading"> 474 <v-flex xs4 class="pt-4 subheading">
463 <label class="right">You Tube Url:</label> 475 <label class="right">You Tube Url:</label>
464 </v-flex> 476 </v-flex>
465 <v-flex xs6 sm4 class="ml-3"> 477 <v-flex xs6 sm4 class="ml-3">
466 <v-text-field 478 <v-text-field
467 placeholder="fill your youtube link" 479 placeholder="fill your youtube link"
468 v-model="youTubeLink.value" 480 v-model="youTubeLink.value"
469 type="text" 481 type="text"
470 name="link" 482 name="link"
471 required 483 required
472 ></v-text-field> 484 ></v-text-field>
473 </v-flex> 485 </v-flex>
474 <v-flex xs2 class="pt-4"> 486 <v-flex xs2 class="pt-4">
475 <v-icon @click="deleteFind(index)" v-if="index !=0 ">cancel</v-icon> 487 <v-icon @click="deleteFind(index)" v-if="index !=0 ">cancel</v-icon>
476 <v-icon @click="addFind">add_circle</v-icon> 488 <v-icon @click="addFind">add_circle</v-icon>
477 </v-flex> 489 </v-flex>
478 </v-layout> 490 </v-layout>
479 </div> 491 </div>
480 </v-flex> 492 </v-flex>
481 <v-layout> 493 <v-layout>
482 <v-flex xs12 sm5 offset-sm3> 494 <v-flex xs12 sm5 offset-sm3>
483 <v-layout> 495 <v-layout>
484 <v-flex xs6> 496 <v-flex xs6>
485 <v-btn @click="clear" round class="ml-3" dark>clear</v-btn> 497 <v-btn @click="clear" round class="ml-3" dark>clear</v-btn>
486 </v-flex> 498 </v-flex>
487 <v-flex xs6> 499 <v-flex xs6>
488 <v-btn @click="submit" round dark :loading="loading" class="right">Add</v-btn> 500 <v-btn @click="submit" round dark :loading="loading" class="right">Add</v-btn>
489 </v-flex> 501 </v-flex>
490 </v-layout> 502 </v-layout>
491 </v-flex> 503 </v-flex>
492 </v-layout> 504 </v-layout>
493 </v-layout> 505 </v-layout>
494 </v-container> 506 </v-container>
495 </v-form> 507 </v-form>
496 </v-card> 508 </v-card>
497 </v-flex> 509 </v-flex>
498 </v-container> 510 </v-container>
499 </v-tab-item> 511 </v-tab-item>
500 </v-tabs> 512 </v-tabs>
501 <div class="loader" v-if="showLoader"> 513 <div class="loader" v-if="showLoader">
502 <v-progress-circular indeterminate color="white"></v-progress-circular> 514 <v-progress-circular indeterminate color="white"></v-progress-circular>
503 </div> 515 </div>
504 </v-app> 516 </v-app>
505 </template> 517 </template>
506 518
507 <script> 519 <script>
508 import http from "@/Services/http.js"; 520 import http from "@/Services/http.js";
509 import Util from "@/util"; 521 import Util from "@/util";
510 522
511 export default { 523 export default {
512 data: () => ({ 524 data: () => ({
513 snackbar: false, 525 snackbar: false,
514 y: "top", 526 y: "top",
515 x: "right", 527 x: "right",
516 mode: "", 528 mode: "",
517 timeout: 3000, 529 timeout: 3000,
518 text: "", 530 text: "",
519 loading: false, 531 loading: false,
520 date: null, 532 date: null,
521 search: "", 533 search: "",
522 showLoader: false, 534 showLoader: false,
523 dialog: false, 535 dialog: false,
524 dialog1: false, 536 dialog1: false,
525 valid: true, 537 valid: true,
526 isActive: true, 538 isActive: true,
527 newActive: false, 539 newActive: false,
528 addclass: [], 540 addclass: [],
529 addSection: [], 541 addSection: [],
530 finds: [{ value: "" }], 542 finds: [{ value: "" }],
531 updates: [{ youTubeLink: "" }], 543 updates: [{ youTubeLink: "" }],
532 youTubeLink: {}, 544 youTubeLink: {},
533 addGallery: { 545 addGallery: {
534 youTubeLinkUrl: [] 546 youTubeLinkUrl: []
535 }, 547 },
536 pagination: { 548 pagination: {
537 rowsPerPage: 15 549 rowsPerPage: 15
538 }, 550 },
539 imageName: "", 551 imageName: "",
540 imageUrl: "", 552 imageUrl: "",
541 imageFile: "", 553 imageFile: "",
542 image: [], 554 image: [],
543 upload: "", 555 upload: "",
544 editImageName: "", 556 editImageName: "",
545 editFiles: [], 557 editFiles: [],
546 files: [], 558 files: [],
547 token: "", 559 token: "",
548 titleRules: [v => !!v || " Tilte is required"], 560 titleRules: [v => !!v || " Tilte is required"],
549 descriptionRules: [v => !!v || " Description is required"], 561 descriptionRules: [v => !!v || " Description is required"],
550 headers: [ 562 headers: [
551 { 563 {
552 align: "justify-center", 564 align: "justify-center",
553 text: "No", 565 text: "No",
554 sortable: false, 566 sortable: false,
555 value: "index" 567 value: "index"
556 }, 568 },
557 { text: "Image", vaue: "image", sortable: false, align: "center" }, 569 { text: "Image", vaue: "image", sortable: false, align: "center" },
558 { text: "Title", value: "title", sortable: false, align: "center" }, 570 { text: "Title", value: "title", sortable: false, align: "center" },
559 { 571 {
560 text: "Description", 572 text: "Description",
561 value: "description", 573 value: "description",
562 sortable: false, 574 sortable: false,
563 align: "center" 575 align: "center"
564 }, 576 },
565 { text: "Action", value: "", sortable: false, align: "center" } 577 { text: "Action", value: "", sortable: false, align: "center" }
566 ], 578 ],
567 desserts: [], 579 desserts: [],
568 editedIndex: -1, 580 editedIndex: -1,
569 editedItem: {}, 581 editedItem: {},
570 index: "" 582 index: ""
571 }), 583 }),
572 methods: { 584 methods: {
573 pickFile() { 585 pickFile() {
574 this.$refs.image.click(); 586 this.$refs.image.click();
575 }, 587 },
576 editPickFile() { 588 editPickFile() {
577 this.$refs.editImage.click(); 589 this.$refs.editImage.click();
578 }, 590 },
579 onFilePicked(e) { 591 onFilePicked(e) {
580 const files = e.target.files; 592 const files = e.target.files;
581 /** fetch Image Name **/ 593 /** fetch Image Name **/
582 if (files[0] !== undefined) { 594 if (files[0] !== undefined) {
583 this.imageName = files[0].name; 595 this.imageName = files[0].name;
584 if (this.imageName.lastIndexOf(".") <= 0) { 596 if (this.imageName.lastIndexOf(".") <= 0) {
585 return; 597 return;
586 } 598 }
587 this.files = []; 599 this.files = [];
588 // console.log("files", this.files); 600 // console.log("files", this.files);
589 /** Select many image and showing many image add to Gallery card **/ 601 /** Select many image and showing many image add to Gallery card **/
590 const test = Array.from(files).forEach((file, idx) => { 602 const test = Array.from(files).forEach((file, idx) => {
591 const fr = new FileReader(); 603 const fr = new FileReader();
592 const getResult = new Promise(resolve => { 604 const getResult = new Promise(resolve => {
593 fr.onload = e => { 605 fr.onload = e => {
594 this.files.push( 606 this.files.push(
595 // id: idx, 607 // id: idx,
596 e.target.result 608 e.target.result
597 ); 609 );
598 }; 610 };
599 console.log("uploadImage=======>", this.files); 611 console.log("uploadImage=======>", this.files);
600 }); 612 });
601 fr.readAsDataURL(file); 613 fr.readAsDataURL(file);
602 return getResult.then(file => { 614 return getResult.then(file => {
603 return file; 615 return file;
604 }); 616 });
605 }); 617 });
606 const fr = new FileReader(); 618 const fr = new FileReader();
607 fr.readAsDataURL(files[0]); 619 fr.readAsDataURL(files[0]);
608 fr.addEventListener("load", () => { 620 fr.addEventListener("load", () => {
609 this.imageFile = files; // this is an image file that can be sent to server... 621 this.imageFile = files; // this is an image file that can be sent to server...
610 }); 622 });
611 } else { 623 } else {
612 this.imageName = ""; 624 this.imageName = "";
613 this.imageFile = ""; 625 this.imageFile = "";
614 this.imageUrl = ""; 626 this.imageUrl = "";
615 } 627 }
616 }, 628 },
617 editFilePicked(e) { 629 editFilePicked(e) {
618 const files = e.target.files; 630 const files = e.target.files;
619 /** fetch Image Name **/ 631 /** fetch Image Name **/
620 if (files[0] !== undefined) { 632 if (files[0] !== undefined) {
621 this.editImageName = files[0].name; 633 this.editImageName = files[0].name;
622 if (this.editImageName.lastIndexOf(".") <= 0) { 634 if (this.editImageName.lastIndexOf(".") <= 0) {
623 return; 635 return;
624 } 636 }
625 /** Select many image and showing many image add to Gallery card **/ 637 /** Select many image and showing many image add to Gallery card **/
626 const test = Array.from(files).forEach((file, idx) => { 638 const test = Array.from(files).forEach((file, idx) => {
627 const fr = new FileReader(); 639 const fr = new FileReader();
628 const getResult = new Promise(resolve => { 640 const getResult = new Promise(resolve => {
629 fr.onload = e => { 641 fr.onload = e => {
630 this.editFiles.push( 642 this.editFiles.push(
631 // id: idx, 643 // id: idx,
632 e.target.result 644 e.target.result
633 ); 645 );
634 }; 646 };
635 console.log("uploadImage=======>", this.files); 647 console.log("uploadImage=======>", this.files);
636 }); 648 });
637 fr.readAsDataURL(file); 649 fr.readAsDataURL(file);
638 return getResult.then(file => { 650 return getResult.then(file => {
639 return file; 651 return file;
640 }); 652 });
641 }); 653 });
642 const fr = new FileReader(); 654 const fr = new FileReader();
643 fr.readAsDataURL(files[0]); 655 fr.readAsDataURL(files[0]);
644 // fr.addEventListener("load", () => { 656 // fr.addEventListener("load", () => {
645 // this.imageFile = files; // this is an image file that can be sent to server... 657 // this.imageFile = files; // this is an image file that can be sent to server...
646 // }); 658 // });
647 } else { 659 } else {
648 this.editImageName = ""; 660 this.editImageName = "";
649 this.editFiles = ""; 661 this.editFiles = "";
650 } 662 }
651 }, 663 },
652 getGalleryList() { 664 getGalleryList() {
653 this.showLoader = true; 665 this.showLoader = true;
654 http() 666 http()
655 .get("/getGalleryList", { 667 .get("/getGalleryList", {
656 headers: { Authorization: "Bearer " + this.token } 668 headers: { Authorization: "Bearer " + this.token }
657 }) 669 })
658 .then(response => { 670 .then(response => {
659 this.desserts = response.data.data; 671 this.desserts = response.data.data;
660 this.showLoader = false; 672 this.showLoader = false;
661 }) 673 })
662 .catch(error => { 674 .catch(error => {
663 // console.log("err====>", err); 675 // console.log("err====>", err);
664 this.showLoader = false; 676 this.showLoader = false;
665 if (error.response.status === 401) { 677 if (error.response.status === 401) {
666 this.$router.replace({ path: "/" }); 678 this.$router.replace({ path: "/" });
667 this.$store.dispatch("setToken", null); 679 this.$store.dispatch("setToken", null);
668 this.$store.dispatch("Id", null); 680 this.$store.dispatch("Id", null);
669 } 681 }
670 }); 682 });
671 }, 683 },
672 editItem(item) { 684 editItem(item) {
673 this.files = []; 685 this.files = [];
674 this.editedIndex = this.desserts.indexOf(item); 686 this.editedIndex = this.desserts.indexOf(item);
675 this.editedItem = Object.assign({}, item); 687 this.editedItem = Object.assign({}, item);
676 this.dialog = true; 688 this.dialog = true;
677 }, 689 },
678 profile(item) { 690 profile(item) {
679 this.editedIndex = this.desserts.indexOf(item); 691 this.editedIndex = this.desserts.indexOf(item);
680 this.editedItem = Object.assign({}, item); 692 this.editedItem = Object.assign({}, item);
681 this.dialog1 = true; 693 this.dialog1 = true;
682 }, 694 },
683 deleteItem(item) { 695 deleteItem(item) {
684 let deleteGallery = { 696 let deleteGallery = {
685 galleryId: item._id 697 galleryId: item._id
686 }; 698 };
687 http() 699 http()
688 .delete( 700 .delete(
689 "/deleteGallery", 701 "/deleteGallery",
690 confirm("Are you sure you want to delete this?") && { 702 confirm("Are you sure you want to delete this?") && {
691 params: deleteGallery, 703 params: deleteGallery,
692 headers: { 704 headers: {
693 Authorization: "Bearer " + this.token 705 Authorization: "Bearer " + this.token
694 } 706 }
695 } 707 }
696 ) 708 )
697 .then(response => { 709 .then(response => {
698 if ((this.snackbar = true)) { 710 if ((this.snackbar = true)) {
699 this.text = "Successfully delete Existing Gallery"; 711 this.text = "Successfully delete Existing Gallery";
700 } 712 }
701 this.getGalleryList(); 713 this.getGalleryList();
702 }) 714 })
703 .catch(error => { 715 .catch(error => {
704 // console.log(error); 716 // console.log(error);
705 }); 717 });
706 }, 718 },
707 deleteImage(imageId, id) { 719 deleteImage(imageId, id) {
708 console.log("imageId", imageId, "id", id); 720 console.log("imageId", imageId, "id", id);
709 let deleteImages = { 721 let deleteImages = {
710 galleryId: id, 722 galleryId: id,
711 imageId: imageId 723 imageId: imageId
712 }; 724 };
713 http() 725 http()
714 .put("/deleteImage", deleteImages) 726 .put("/deleteImage", deleteImages)
715 .then(response => { 727 .then(response => {
716 this.snackbar = true; 728 this.snackbar = true;
717 this.text = response.data.message; 729 this.text = response.data.message;
718 this.getGalleryList(); 730 this.getGalleryList();
719 this.close(); 731 this.close();
720 }) 732 })
721 .catch(error => { 733 .catch(error => {
722 console.log(error); 734 console.log(error);
723 }); 735 });
724 }, 736 },
725 activeTab(type) { 737 activeTab(type) {
726 switch (type) { 738 switch (type) {
727 case "existing": 739 case "existing":
728 this.newActive = false; 740 this.newActive = false;
729 this.isActive = true; 741 this.isActive = true;
730 break; 742 break;
731 743
732 default: 744 default:
733 this.newActive = true; 745 this.newActive = true;
734 this.isActive = false; 746 this.isActive = false;
735 break; 747 break;
736 } 748 }
737 }, 749 },
738 close() { 750 close() {
739 this.dialog = false; 751 this.dialog = false;
740 setTimeout(() => { 752 setTimeout(() => {
741 this.editedItem = Object.assign({}, this.defaultItem); 753 this.editedItem = Object.assign({}, this.defaultItem);
742 this.editedIndex = -1; 754 this.editedIndex = -1;
743 }, 300); 755 }, 300);
744 }, 756 },
745 close1() { 757 close1() {
746 this.dialog1 = false; 758 this.dialog1 = false;
747 }, 759 },
748 submit() { 760 submit() {
749 this.loading = true; 761 this.loading = true;
750 for (let i = 0; i < this.finds.length; i++) { 762 for (let i = 0; i < this.finds.length; i++) {
751 this.addGallery.youTubeLinkUrl.push(this.finds[i].value); 763 this.addGallery.youTubeLinkUrl.push(this.finds[i].value);
752 } 764 }
753 if (this.$refs.form.validate()) { 765 if (this.$refs.form.validate()) {
754 if (this.files) { 766 if (this.files) {
755 var ary = []; 767 var ary = [];
756 var imageData = []; 768 var imageData = [];
757 ary = this.files; 769 ary = this.files;
758 for (let i = 0; i < ary.length; i++) { 770 for (let i = 0; i < ary.length; i++) {
759 const [baseUrl, imageUrl] = ary[i].split(/,/); 771 const [baseUrl, imageUrl] = ary[i].split(/,/);
760 imageData.push(imageUrl); 772 imageData.push(imageUrl);
761 this.addGallery.upload = imageData; 773 this.addGallery.upload = imageData;
762 } 774 }
763 } 775 }
764 if (this.addGallery.youTubeLinkUrl == "") { 776 if (this.addGallery.youTubeLinkUrl == "") {
765 var galleryData = { 777 var galleryData = {
766 classId: this.addGallery.classNum, 778 classId: this.addGallery.classNum,
767 title: this.addGallery.title, 779 title: this.addGallery.title,
768 description: this.addGallery.description, 780 description: this.addGallery.description,
769 upload: this.addGallery.upload 781 upload: this.addGallery.upload
770 }; 782 };
771 http() 783 http()
772 .post("/createGallery", galleryData) 784 .post("/createGallery", galleryData)
773 .then(response => { 785 .then(response => {
774 this.getGalleryList(); 786 this.getGalleryList();
775 this.loading = false; 787 this.loading = false;
776 this.snackbar = true; 788 this.snackbar = true;
777 this.text = response.data.message; 789 this.text = response.data.message;
778 this.clear(); 790 this.clear();
779 this.files = ""; 791 this.files = "";
780 }) 792 })
781 .catch(error => { 793 .catch(error => {
782 if ((this.snackbar = true)) { 794 if ((this.snackbar = true)) {
783 this.text = error.response.data.message; 795 this.text = error.response.data.message;
784 } 796 }
785 }); 797 });
786 } else if (this.addGallery.youTubeLinkUrl) { 798 } else if (this.addGallery.youTubeLinkUrl) {
787 http() 799 http()
788 .post("/createGallery", this.addGallery) 800 .post("/createGallery", this.addGallery)
789 .then(response => { 801 .then(response => {
790 this.getGalleryList(); 802 this.getGalleryList();
791 this.files = []; 803 this.files = [];
792 this.loading = false; 804 this.loading = false;
793 this.snackbar = true; 805 this.snackbar = true;
794 this.text = response.data.message; 806 this.text = response.data.message;
795 this.clear(); 807 this.clear();
796 this.files = ""; 808 this.files = "";
797 }) 809 })
798 .catch(error => { 810 .catch(error => {
799 if ((this.snackbar = true)) { 811 if ((this.snackbar = true)) {
800 this.text = error.response.data.message; 812 this.text = error.response.data.message;
801 } 813 }
802 }); 814 });
803 } 815 }
804 } 816 }
805 }, 817 },
806 clear() { 818 clear() {
807 this.$refs.form.reset(); 819 this.$refs.form.reset();
808 this.files = []; 820 this.files = [];
809 }, 821 },
810 save() { 822 save() {
811 this.editedItem.gelleryId = this.editedItem._id; 823 this.editedItem.gelleryId = this.editedItem._id;
812 var linkUrl = []; 824 var linkUrl = [];
813 for (let i = 0; i < this.updates.length; i++) { 825 for (let i = 0; i < this.updates.length; i++) {
814 linkUrl.push(this.updates[i].youTubeLink); 826 linkUrl.push(this.updates[i].youTubeLink);
815 } 827 }
816 if (this.editFiles) { 828 if (this.editFiles) {
817 var ary = []; 829 var ary = [];
818 var imageData = []; 830 var imageData = [];
819 ary = this.editFiles; 831 ary = this.editFiles;
820 for (let i = 0; i < ary.length; i++) { 832 for (let i = 0; i < ary.length; i++) {
821 const [baseUrl, imageUrl] = ary[i].split(/,/); 833 const [baseUrl, imageUrl] = ary[i].split(/,/);
822 imageData.push(imageUrl); 834 imageData.push(imageUrl);
823 this.editedItem.editFiles = imageData; 835 this.editedItem.editFiles = imageData;
824 } 836 }
825 } 837 }
826 if (linkUrl != "") { 838 if (linkUrl != "") {
827 var updateData = { 839 var updateData = {
828 galleryId: this.editedItem._id, 840 galleryId: this.editedItem._id,
829 description: this.editedItem.description, 841 description: this.editedItem.description,
830 classId: this.editedItem.classNum, 842 classId: this.editedItem.classNum,
831 uploadImage: this.editedItem.editFiles, 843 uploadImage: this.editedItem.editFiles,
832 title: this.editedItem.title, 844 title: this.editedItem.title,
833 updateYouTubeLinkUrl: linkUrl 845 updateYouTubeLinkUrl: linkUrl
834 }; 846 };
835 } else if (linkUrl == "") { 847 } else if (linkUrl == "") {
836 var updateData = { 848 var updateData = {
837 galleryId: this.editedItem._id, 849 galleryId: this.editedItem._id,
838 description: this.editedItem.description, 850 description: this.editedItem.description,
839 classId: this.editedItem.classNum, 851 classId: this.editedItem.classNum,
840 uploadImage: this.editedItem.editFiles, 852 uploadImage: this.editedItem.editFiles,
841 title: this.editedItem.title 853 title: this.editedItem.title
842 }; 854 };
843 } 855 }
844 http() 856 http()
845 .put("/updateGallery", updateData) 857 .put("/updateGallery", updateData)
846 .then(response => { 858 .then(response => {
847 this.getGalleryList(); 859 this.getGalleryList();
848 this.close(); 860 this.close();
849 this.snackbar = true; 861 this.snackbar = true;
850 this.text = response.data.message; 862 this.text = response.data.message;
851 }) 863 })
852 .catch(error => { 864 .catch(error => {
853 console.log(error); 865 console.log(error);
854 }); 866 });
855 }, 867 },
856 getAllClasses() { 868 getAllClasses() {
857 http() 869 http()
858 .get("/getClassesList", { 870 .get("/getClassesList", {
859 headers: { Authorization: "Bearer " + this.token } 871 headers: { Authorization: "Bearer " + this.token }
860 }) 872 })
861 .then(response => { 873 .then(response => {
862 this.addclass = response.data.data; 874 this.addclass = response.data.data;
863 }) 875 })
864 .catch(err => { 876 .catch(err => {
865 // console.log("err====>", err); 877 // console.log("err====>", err);
866 }); 878 });
867 }, 879 },
868 addFind: function() { 880 addFind: function() {
869 this.finds.push({ value: "" }); 881 this.finds.push({ value: "" });
870 }, 882 },
871 update: function() { 883 update: function() {
872 this.updates.push({ youTubeLink: "" }); 884 this.updates.push({ youTubeLink: "" });
873 }, 885 },
874 deleteFind: function(index) { 886 deleteFind: function(index) {
875 this.finds.splice(index, 1); 887 this.finds.splice(index, 1);
876 if (index === 0) this.addFind(); 888 if (index === 0) this.addFind();
877 }, 889 },
878 deleteUpdate: function(index) { 890 deleteUpdate: function(index) {
879 this.updates.splice(index, 1); 891 this.updates.splice(index, 1);
880 if (index === 0) this.update(); 892 if (index === 0) this.update();
881 }, 893 },
882 deleteUrl: function(index, youTubelinkId, id) { 894 deleteUrl: function(index, youTubelinkId, id) {
883 this.editedItem.youTubeLinkUrl.splice(index, 1); 895 this.editedItem.youTubeLinkUrl.splice(index, 1);
884 if (index === 0) this.update(); 896 if (index === 0) this.update();
885 let deleteYouTubeUrl = { 897 let deleteYouTubeUrl = {
886 galleryId: id, 898 galleryId: id,
887 youTubeId: youTubelinkId 899 youTubeId: youTubelinkId
888 }; 900 };
889 http() 901 http()
890 .put("/deleteYoutubeLink", deleteYouTubeUrl) 902 .put("/deleteYoutubeLink", deleteYouTubeUrl)
891 .then(response => { 903 .then(response => {
892 this.snackbar = true; 904 this.snackbar = true;
893 this.text = response.data.message; 905 this.text = response.data.message;
894 this.getGalleryList(); 906 this.getGalleryList();
895 this.close(); 907 this.close();
896 }) 908 })
897 .catch(error => { 909 .catch(error => {
898 console.log(error); 910 console.log(error);
899 }); 911 });
900 } 912 }
901 }, 913 },
902 mounted() { 914 mounted() {
903 this.token = this.$store.state.token; 915 this.token = this.$store.state.token;
904 this.getAllClasses(); 916 this.getAllClasses();
905 this.getGalleryList(); 917 this.getGalleryList();
906 // console.log("index",index); 918 // console.log("index",index);
907 }, 919 },
908 created() { 920 created() {
909 this.$root.$on("app:search", search => { 921 this.$root.$on("app:search", search => {
910 this.search = search; 922 this.search = search;
911 }); 923 });
912 }, 924 },
913 beforeDestroy() { 925 beforeDestroy() {
914 // dont forget to remove the listener 926 // dont forget to remove the listener
915 this.$root.$off("app:search"); 927 this.$root.$off("app:search");
916 } 928 }
917 }; 929 };
918 </script> 930 </script>
919 <style scoped> 931 <style scoped>
920 #td { 932 #td {
921 border: 1px solid #dddddd; 933 border: 1px solid #dddddd;
922 text-align: left; 934 text-align: left;
923 padding: 2px 0px; 935 padding: 2px 0px;
924 max-width: 200px; 936 max-width: 200px;
925 } 937 }
926 .active { 938 .active {
927 background-color: gray; 939 background-color: gray;
928 color: white !important; 940 color: white !important;
929 } 941 }
930 .activebtn { 942 .activebtn {
931 color: black !important; 943 color: black !important;
932 } 944 }
933 </style> 945 </style>
src/pages/Holiday/holiday.vue
Diff comments   View file @495e403
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 Holiday</v-tab> 10 >Existing Holiday</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 Holiday</v-tab> 18 >Add New Holiday</v-tab>
19 19
20 <!-- ****** EDITS Holiday DETAILS ****** --> 20 <!-- ****** EDIT HOLIDAY DATA ****** -->
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> 32 <v-flex xs12 sm12>
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 Holiday</h3> 36 <h3>Edit Holiday</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-flex xs12 sm12> 42 <v-flex xs12 sm12>
43 <v-layout> 43 <v-layout>
44 <v-flex xs4 class="pt-4 subheading"> 44 <v-flex xs4 class="pt-4 subheading">
45 <label class="right">Occasion:</label> 45 <label class="right">Occasion:</label>
46 </v-flex> 46 </v-flex>
47 <v-flex xs8 sm5 class="ml-3"> 47 <v-flex xs8 sm5 class="ml-3">
48 <v-text-field 48 <v-text-field
49 v-model="editedItem.occasion" 49 v-model="editedItem.occasion"
50 placeholder="fill your Occasion" 50 placeholder="fill your Occasion"
51 name="name" 51 name="name"
52 type="text" 52 type="text"
53 ></v-text-field> 53 ></v-text-field>
54 </v-flex> 54 </v-flex>
55 </v-layout> 55 </v-layout>
56 </v-flex> 56 </v-flex>
57 <v-flex xs12 sm12> 57 <v-flex xs12 sm12>
58 <v-layout> 58 <v-layout>
59 <v-flex xs4 class="pt-4 subheading"> 59 <v-flex xs4 class="pt-4 subheading">
60 <label class="right">Date:</label> 60 <label class="right">Date:</label>
61 </v-flex> 61 </v-flex>
62 <v-flex xs8 sm5 class="ml-3"> 62 <v-flex xs8 sm5 class="ml-3">
63 <v-menu 63 <v-menu
64 ref="menu" 64 ref="menu"
65 :close-on-content-click="false" 65 :close-on-content-click="false"
66 :return-value.sync="editedItem.dateOfHoliday" 66 :return-value.sync="editedItem.dateOfHoliday"
67 v-model="menu" 67 v-model="menu"
68 :nudge-right="40" 68 :nudge-right="40"
69 lazy 69 lazy
70 transition="scale-transition" 70 transition="scale-transition"
71 offset-y 71 offset-y
72 full-width 72 full-width
73 min-width="290px" 73 min-width="290px"
74 > 74 >
75 <v-text-field 75 <v-text-field
76 slot="activator" 76 slot="activator"
77 :rules="dateRules" 77 :rules="dateRules"
78 v-model="editedItem.dateOfHoliday" 78 v-model="editedItem.dateOfHoliday"
79 append-icon="event" 79 append-icon="event"
80 placeholder="Select date" 80 placeholder="Select date"
81 ></v-text-field> 81 ></v-text-field>
82 <v-date-picker 82 <v-date-picker
83 ref="picker" 83 ref="picker"
84 color="info" 84 color="info"
85 v-model="editedItem.dateOfHoliday" 85 v-model="editedItem.dateOfHoliday"
86 @input="menu = false" 86 @input="menu = false"
87 ></v-date-picker> 87 ></v-date-picker>
88 </v-menu> 88 </v-menu>
89 </v-flex> 89 </v-flex>
90 </v-layout> 90 </v-layout>
91 </v-flex> 91 </v-flex>
92 <v-layout> 92 <v-layout>
93 <v-flex xs12 sm10 offset-sm1> 93 <v-flex xs12 sm10 offset-sm1>
94 <v-card-actions> 94 <v-card-actions>
95 <v-btn round dark @click.native="close">Cancel</v-btn> 95 <v-btn round dark @click.native="close">Cancel</v-btn>
96 <v-spacer></v-spacer> 96 <v-spacer></v-spacer>
97 <v-btn round dark @click="save">Save</v-btn> 97 <v-btn round dark @click="save">Save</v-btn>
98 </v-card-actions> 98 </v-card-actions>
99 </v-flex> 99 </v-flex>
100 </v-layout> 100 </v-layout>
101 </v-container> 101 </v-container>
102 </v-card> 102 </v-card>
103 </v-flex> 103 </v-flex>
104 </v-dialog> 104 </v-dialog>
105 105
106 <!-- ****** PROFILE VIEW Holiday DEATILS ****** --> 106 <!-- ****** PROFILE VIEW Holiday DEATILS ****** -->
107 107
108 <v-dialog v-model="dialog1" max-width="700px"> 108 <v-dialog v-model="dialog1" max-width="500px">
109 <v-toolbar class="v-toolbar"> 109 <v-toolbar class="v-toolbar">
110 <v-spacer></v-spacer> 110 <v-spacer></v-spacer>
111 <v-toolbar-title> 111 <v-toolbar-title>
112 <h3>Holiday</h3> 112 <h3>Holiday</h3>
113 </v-toolbar-title> 113 </v-toolbar-title>
114 <v-spacer></v-spacer> 114 <v-spacer></v-spacer>
115 <v-icon @click="close1">close</v-icon> 115 <v-icon @click="close1">close</v-icon>
116 </v-toolbar> 116 </v-toolbar>
117 <v-card> 117 <v-card>
118 <v-card-text> 118 <v-card-text>
119 <v-container grid-list-md> 119 <v-container grid-list-md>
120 <v-layout wrap> 120 <v-layout wrap>
121 <v-flex> 121 <v-flex>
122 <v-layout> 122 <v-layout>
123 <v-flex xs4 sm6> 123 <v-flex xs4 sm6>
124 <h5 class="right my-1"> 124 <h5 class="right my-1">
125 <b>Occasion:</b> 125 <b>Occasion:</b>
126 </h5> 126 </h5>
127 </v-flex> 127 </v-flex>
128 <v-flex sm6 xs8> 128 <v-flex sm6 xs8>
129 <h5 class="my-1">{{ editedItem.occasion }}</h5> 129 <h5 class="my-1">{{ editedItem.occasion }}</h5>
130 </v-flex> 130 </v-flex>
131 </v-layout> 131 </v-layout>
132 <v-layout> 132 <v-layout>
133 <v-flex xs4 sm6> 133 <v-flex xs4 sm6>
134 <h5 class="right my-1"> 134 <h5 class="right my-1">
135 <b>Date:</b> 135 <b>Date:</b>
136 </h5> 136 </h5>
137 </v-flex> 137 </v-flex>
138 <v-flex sm6 xs8> 138 <v-flex sm6 xs8>
139 <h5 class="my-1">{{ editedItem.dateOfHoliday }}</h5> 139 <h5 class="my-1">{{ editedItem.dateOfHoliday }}</h5>
140 </v-flex> 140 </v-flex>
141 </v-layout> 141 </v-layout>
142 </v-flex> 142 </v-flex>
143 </v-layout> 143 </v-layout>
144 </v-container> 144 </v-container>
145 </v-card-text> 145 </v-card-text>
146 </v-card> 146 </v-card>
147 </v-dialog> 147 </v-dialog>
148 <v-snackbar 148 <v-snackbar
149 :timeout="timeout" 149 :timeout="timeout"
150 :top="y === 'top'" 150 :top="y === 'top'"
151 :right="x === 'right'" 151 :right="x === 'right'"
152 :vertical="mode === 'vertical'" 152 :vertical="mode === 'vertical'"
153 v-model="snackbar" 153 v-model="snackbar"
154 color="success" 154 color="success"
155 >{{ text }}</v-snackbar> 155 >{{ text }}</v-snackbar>
156 156
157 <!-- ****** EXISTING-USERS Holiday TABLE ****** --> 157 <!-- ****** EXISTING-USERS Holiday TABLE ****** -->
158 158
159 <v-data-table 159 <v-data-table
160 :headers="headers" 160 :headers="headers"
161 :items="desserts" 161 :items="desserts"
162 :pagination.sync="pagination" 162 :pagination.sync="pagination"
163 :search="search" 163 :search="search"
164 > 164 >
165 <template slot="items" slot-scope="props"> 165 <template slot="items" slot-scope="props">
166 <td id="td" class="text-xs-center">{{ props.index + 1}}</td> 166 <td id="td" class="text-xs-center">{{ props.index + 1}}</td>
167 <td id="td" class="text-xs-center">{{ props.item.occasion}}</td> 167 <td id="td" class="text-xs-center">{{ props.item.occasion}}</td>
168 <td id="td" class="text-xs-center">{{ dates(props.item.dateOfHoliday) }}</td> 168 <td id="td" class="text-xs-center">{{ dates(props.item.dateOfHoliday) }}</td>
169 169
170 <td id="td" class="text-xs-center"> 170 <td id="td" class="text-xs-center">
171 <span> 171 <span>
172 <img 172 <v-tooltip top>
173 style="cursor:pointer; width:25px; height:18px; " 173 <img
174 class="mr-5" 174 slot="activator"
175 @click="profile(props.item)" 175 style="cursor:pointer; width:25px; height:18px; "
176 src="/static/icon/eye1.png" 176 class="mr5"
177 /> 177 @click="profile(props.item)"
178 <img 178 src="/static/icon/eye1.png"
179 style="cursor:pointer; width:20px; height:18px; " 179 />
180 class="mr-5" 180 <span>View</span>
181 @click="editItem(props.item)" 181 </v-tooltip>
182 src="/static/icon/edit1.png" 182 <v-tooltip top>
183 /> 183 <img
184 <img 184 slot="activator"
185 style="cursor:pointer;width:20px; height:20px; " 185 style="cursor:pointer; width:20px; height:18px; "
186 class="mr-5" 186 class="mr5"
187 @click="deleteItem(props.item)" 187 @click="editItem(props.item)"
188 src="/static/icon/delete1.png" 188 src="/static/icon/edit1.png"
189 /> 189 />
190 <span>Edit</span>
191 </v-tooltip>
192 <v-tooltip top>
193 <img
194 slot="activator"
195 style="cursor:pointer; width:20px; height:20px; "
196 class="mr5"
197 @click="deleteItem(props.item)"
198 src="/static/icon/delete1.png"
199 />
200 <span>Delete</span>
201 </v-tooltip>
190 </span> 202 </span>
191 </td> 203 </td>
192 </template> 204 </template>
193 <v-alert 205 <v-alert
194 slot="no-results" 206 slot="no-results"
195 :value="true" 207 :value="true"
196 color="error" 208 color="error"
197 icon="warning" 209 icon="warning"
198 >Your search for "{{ search }}" found no results.</v-alert> 210 >Your search for "{{ search }}" found no results.</v-alert>
199 </v-data-table> 211 </v-data-table>
200 </v-tab-item> 212 </v-tab-item>
201 213
202 <!-- ****** ADD MULTIPLE Holiday ****** --> 214 <!-- ****** ADD MULTIPLE Holiday ****** -->
203 215
204 <v-tab-item> 216 <v-tab-item>
205 <v-container> 217 <v-container>
206 <v-snackbar 218 <v-snackbar
207 :timeout="timeout" 219 :timeout="timeout"
208 :top="y === 'top'" 220 :top="y === 'top'"
209 :right="x === 'right'" 221 :right="x === 'right'"
210 :vertical="mode === 'vertical'" 222 :vertical="mode === 'vertical'"
211 v-model="snackbar" 223 v-model="snackbar"
212 color="success" 224 color="success"
213 >{{ text }}</v-snackbar> 225 >{{ text }}</v-snackbar>
214 <v-flex xs12 sm8 class="my-4" offset-sm2> 226 <v-flex xs12 sm8 class="my-4" offset-sm2>
215 <v-card flat> 227 <v-card flat>
216 <v-form ref="form" v-model="valid" lazy-validation> 228 <v-form ref="form" v-model="valid" lazy-validation>
217 <v-container fluid> 229 <v-container fluid>
218 <v-flex xs12> 230 <v-flex xs12>
219 <v-layout> 231 <v-layout>
220 <v-flex xs4 class="pt-4 subheading"> 232 <v-flex xs4 class="pt-4 subheading">
221 <label class="right">Occasion:</label> 233 <label class="right">Occasion:</label>
222 </v-flex> 234 </v-flex>
223 <v-flex xs8 sm4 class="ml-3"> 235 <v-flex xs8 sm4 class="ml-3">
224 <v-text-field 236 <v-text-field
225 v-model="addHoliday.occasion" 237 v-model="addHoliday.occasion"
226 placeholder="fill your Occasion" 238 placeholder="fill your Occasion"
227 type="text" 239 type="text"
228 :rules="occasionRules" 240 :rules="occasionRules"
229 required 241 required
230 ></v-text-field> 242 ></v-text-field>
231 </v-flex> 243 </v-flex>
232 </v-layout> 244 </v-layout>
233 </v-flex> 245 </v-flex>
234 <v-flex xs12> 246 <v-flex xs12>
235 <v-layout> 247 <v-layout>
236 <v-flex xs4 class="pt-4 subheading"> 248 <v-flex xs4 class="pt-4 subheading">
237 <label class="right">Date:</label> 249 <label class="right">Date:</label>
238 </v-flex> 250 </v-flex>
239 <v-flex xs8 sm4 class="ml-3"> 251 <v-flex xs8 sm4 class="ml-3">
240 <v-menu 252 <v-menu
241 ref="menu1" 253 ref="menu1"
242 :close-on-content-click="false" 254 :close-on-content-click="false"
243 v-model="menu1" 255 v-model="menu1"
244 :nudge-right="40" 256 :nudge-right="40"
245 :return-value.sync="addHoliday.dateOfHoliday" 257 :return-value.sync="addHoliday.dateOfHoliday"
246 lazy 258 lazy
247 transition="scale-transition" 259 transition="scale-transition"
248 offset-y 260 offset-y
249 full-width 261 full-width
250 min-width="290px" 262 min-width="290px"
251 > 263 >
252 <v-text-field 264 <v-text-field
253 slot="activator" 265 slot="activator"
254 :rules="dateRules" 266 :rules="dateRules"
255 v-model="addHoliday.dateOfHoliday" 267 v-model="addHoliday.dateOfHoliday"
256 append-icon="event" 268 append-icon="event"
257 label="Select date" 269 label="Select date"
258 ></v-text-field> 270 ></v-text-field>
259 <v-date-picker 271 <v-date-picker
260 ref="picker" 272 ref="picker"
261 color="info" 273 color="info"
262 v-model="addHoliday.dateOfHoliday" 274 v-model="addHoliday.dateOfHoliday"
263 @input="$refs.menu1.save(addHoliday.dateOfHoliday)" 275 @input="$refs.menu1.save(addHoliday.dateOfHoliday)"
264 ></v-date-picker> 276 ></v-date-picker>
265 </v-menu> 277 </v-menu>
266 </v-flex> 278 </v-flex>
267 </v-layout> 279 </v-layout>
268 </v-flex> 280 </v-flex>
269 <v-flex xs12 sm7 offset-sm2> 281 <v-flex xs12 sm7 offset-sm2>
270 <v-layout> 282 <v-layout>
271 <v-flex xs6> 283 <v-flex xs6>
272 <v-btn @click="clear" round class="ml-3" dark>clear</v-btn> 284 <v-btn @click="clear" round class="ml-3" dark>clear</v-btn>
273 </v-flex> 285 </v-flex>
274 <v-flex xs6> 286 <v-flex xs6>
275 <v-btn @click="submit" round dark :loading="loading" class="right">Add</v-btn> 287 <v-btn @click="submit" round dark :loading="loading" class="right">Add</v-btn>
276 </v-flex> 288 </v-flex>
277 </v-layout> 289 </v-layout>
278 </v-flex> 290 </v-flex>
279 </v-layout>
280 </v-container> 291 </v-container>
281 </v-form> 292 </v-form>
282 </v-card> 293 </v-card>
283 </v-flex> 294 </v-flex>
284 </v-container> 295 </v-container>
285 </v-tab-item> 296 </v-tab-item>
286 </v-tabs> 297 </v-tabs>
287 <div class="loader" v-if="showLoader"> 298 <div class="loader" v-if="showLoader">
288 <v-progress-circular indeterminate color="white"></v-progress-circular> 299 <v-progress-circular indeterminate color="white"></v-progress-circular>
289 </div> 300 </div>
290 </v-app> 301 </v-app>
291 </template> 302 </template>
292 303
293 <script> 304 <script>
294 import http from "@/Services/http.js"; 305 import http from "@/Services/http.js";
295 import moment from "moment"; 306 import moment from "moment";
296 307
297 export default { 308 export default {
298 data: () => ({ 309 data: () => ({
299 snackbar: false, 310 snackbar: false,
300 y: "top", 311 y: "top",
301 x: "right", 312 x: "right",
302 mode: "", 313 mode: "",
303 timeout: 3000, 314 timeout: 3000,
304 text: "", 315 text: "",
305 loading: false, 316 loading: false,
306 date: null, 317 date: null,
307 search: "", 318 search: "",
308 showLoader: false, 319 showLoader: false,
309 dialog: false, 320 dialog: false,
310 dialog1: false, 321 dialog1: false,
311 valid: true, 322 valid: true,
312 isActive: true, 323 isActive: true,
313 newActive: false, 324 newActive: false,
314 pagination: { 325 pagination: {
315 rowsPerPage: 15 326 rowsPerPage: 15
316 }, 327 },
317 date: null, 328 date: null,
318 menu1: false, 329 menu1: false,
319 menu: false, 330 menu: false,
320 occasionRules: [v => !!v || "Occasion is required"], 331 occasionRules: [v => !!v || "Occasion is required"],
321 dateRules: [v => !!v || "Date is required"], 332 dateRules: [v => !!v || "Date is required"],
322 headers: [ 333 headers: [
323 { 334 {
324 text: "No", 335 text: "No",
325 align: "center", 336 align: "center",
326 sortable: false, 337 sortable: false,
327 value: "No" 338 value: "No"
328 }, 339 },
329 { text: "Occasion", value: "occasion", sortable: false, align: "center" }, 340 { text: "Occasion", value: "occasion", sortable: false, align: "center" },
330 { 341 {
331 text: "Date Of Holiday", 342 text: "Date Of Holiday",
332 value: "dateOfHoliday", 343 value: "dateOfHoliday",
333 sortable: false, 344 sortable: false,
334 align: "center" 345 align: "center"
335 }, 346 },
336 { text: "Action", value: "", sortable: false, align: "center" } 347 { text: "Action", value: "", sortable: false, align: "center" }
337 ], 348 ],
338 desserts: [], 349 desserts: [],
339 editedIndex: -1, 350 editedIndex: -1,
340 addHoliday: {}, 351 addHoliday: {},
341 editedItem: {} 352 editedItem: {}
342 }), 353 }),
343 methods: { 354 methods: {
344 dates: function(date) { 355 dates: function(date) {
345 return moment(date).format("MMMM DD, YYYY"); 356 return moment(date).format("MMMM DD, YYYY");
346 }, 357 },
347 getHolidays() { 358 getHolidays() {
348 this.showLoader = true; 359 this.showLoader = true;
349 var token = this.$store.state.token; 360 var token = this.$store.state.token;
350 http() 361 http()
351 .get("/getHolidaysList", { 362 .get("/getHolidaysList", {
352 headers: { Authorization: "Bearer " + token } 363 headers: { Authorization: "Bearer " + token }
353 }) 364 })
354 .then(response => { 365 .then(response => {
355 this.desserts = response.data.data; 366 this.desserts = response.data.data;
356 this.showLoader = false; 367 this.showLoader = false;
357 }) 368 })
358 .catch(err => { 369 .catch(err => {
359 // console.log("err====>", err); 370 // console.log("err====>", err);
360 this.showLoader = false; 371 this.showLoader = false;
361 if (error.response.status === 401) { 372 if (error.response.status === 401) {
362 this.$router.replace({ path: "/" }); 373 this.$router.replace({ path: "/" });
363 this.$store.dispatch("setToken", null); 374 this.$store.dispatch("setToken", null);
364 this.$store.dispatch("Id", null); 375 this.$store.dispatch("Id", null);
365 } 376 }
366 }); 377 });
367 }, 378 },
368 editItem(item) { 379 editItem(item) {
369 this.editedIndex = this.desserts.indexOf(item); 380 this.editedIndex = this.desserts.indexOf(item);
370 this.editedItem = Object.assign({}, item); 381 this.editedItem = Object.assign({}, item);
371 this.editedItem.holidayId = item._id; 382 this.editedItem.holidayId = item._id;
372 this.dialog = true; 383 this.dialog = true;
373 }, 384 },
374 profile(item) { 385 profile(item) {
375 this.editedIndex = this.desserts.indexOf(item); 386 this.editedIndex = this.desserts.indexOf(item);
376 this.editedItem = Object.assign({}, item); 387 this.editedItem = Object.assign({}, item);
377 this.dialog1 = true; 388 this.dialog1 = true;
378 }, 389 },
379 390
380 deleteItem(item) { 391 deleteItem(item) {
381 let deleteHoliday = { 392 let deleteHoliday = {
382 holidayId: item._id 393 holidayId: item._id
383 }; 394 };
384 http() 395 http()
385 .delete( 396 .delete(
386 "/deleteHoliday", 397 "/deleteHoliday",
387 confirm("Are you sure you want to delete this?") && { 398 confirm("Are you sure you want to delete this?") && {
388 params: deleteHoliday 399 params: deleteHoliday
389 } 400 }
390 ) 401 )
391 .then(response => { 402 .then(response => {
392 this.snackbar = true; 403 this.snackbar = true;
393 this.text = response.data.message; 404 this.text = response.data.message;
394 this.getHolidays(); 405 this.getHolidays();
395 }) 406 })
396 .catch(error => { 407 .catch(error => {
397 console.log(error); 408 console.log(error);
398 }); 409 });
399 }, 410 },
400 activeTab(type) { 411 activeTab(type) {
401 switch (type) { 412 switch (type) {
402 case "existing": 413 case "existing":
403 this.newActive = false; 414 this.newActive = false;
404 this.isActive = true; 415 this.isActive = true;
405 break; 416 break;
406 417
407 default: 418 default:
408 this.newActive = true; 419 this.newActive = true;
409 this.isActive = false; 420 this.isActive = false;
410 break; 421 break;
411 } 422 }
412 }, 423 },
413 close() { 424 close() {
414 this.dialog = false; 425 this.dialog = false;
415 setTimeout(() => { 426 setTimeout(() => {
416 this.editedItem = Object.assign({}, this.defaultItem); 427 this.editedItem = Object.assign({}, this.defaultItem);
417 this.editedIndex = -1; 428 this.editedIndex = -1;
418 }, 300); 429 }, 300);
419 }, 430 },
420 close1() { 431 close1() {
421 this.dialog1 = false; 432 this.dialog1 = false;
422 }, 433 },
423 submit() { 434 submit() {
424 if (this.$refs.form.validate()) { 435 if (this.$refs.form.validate()) {
425 this.loading = true; 436 this.loading = true;
426 http() 437 http()
427 .post("/createHoliday", this.addHoliday) 438 .post("/createHoliday", this.addHoliday)
428 .then(response => { 439 .then(response => {
429 this.snackbar = true; 440 this.snackbar = true;
430 this.text = response.data.message; 441 this.text = response.data.message;
431 this.getHolidays(); 442 this.getHolidays();
432 this.clear(); 443 this.clear();
433 this.loading = false; 444 this.loading = false;
434 }) 445 })
435 .catch(error => { 446 .catch(error => {
436 // console.log(error); 447 // console.log(error);
437 if ((this.snackbar = true)) { 448 if ((this.snackbar = true)) {
438 this.text = error.response.data.message; 449 this.text = error.response.data.message;
439 } 450 }
440 this.loading = false; 451 this.loading = false;
441 }); 452 });
442 } 453 }
443 }, 454 },
444 clear() { 455 clear() {
445 this.$refs.form.reset(); 456 this.$refs.form.reset();
446 }, 457 },
447 save() { 458 save() {
448 http() 459 http()
449 .put("/updateHoliday", this.editedItem) 460 .put("/updateHoliday", this.editedItem)
450 .then(response => { 461 .then(response => {
451 if ((this.snackbar = true)) { 462 if ((this.snackbar = true)) {
452 this.text = response.data.message; 463 this.text = response.data.message;
453 } 464 }
454 this.getHolidays(); 465 this.getHolidays();
455 }) 466 })
456 .catch(error => { 467 .catch(error => {
457 // console.log(error); 468 // console.log(error);
458 }); 469 });
459 this.close(); 470 this.close();
460 } 471 }
461 }, 472 },
462 mounted() { 473 mounted() {
463 this.getHolidays(); 474 this.getHolidays();
464 }, 475 },
465 created() { 476 created() {
466 this.$root.$on("app:search", search => { 477 this.$root.$on("app:search", search => {
467 this.search = search; 478 this.search = search;
468 }); 479 });
469 }, 480 },
470 beforeDestroy() { 481 beforeDestroy() {
471 // dont forget to remove the listener 482 // dont forget to remove the listener
472 this.$root.$off("app:search"); 483 this.$root.$off("app:search");
473 } 484 }
474 }; 485 };
475 </script> 486 </script>
476 <style scoped> 487 <style scoped>
477 #td { 488 #td {
478 max-width: 200px; 489 max-width: 200px;
479 } 490 }
480 .active { 491 .active {
481 background-color: gray; 492 background-color: gray;
482 color: white !important; 493 color: white !important;
483 } 494 }
484 .activebtn { 495 .activebtn {
485 color: black !important; 496 color: black !important;
486 } 497 }
src/pages/Library/books.vue
Diff comments   View file @495e403
1 <template> 1 <template>
2 <v-app id="pages-dasboard"> 2 <v-app id="pages-dasboard">
3 <v-tabs grow slider-color="gray"> 3 <v-tabs grow slider-color="gray">
4 <v-tab 4 <v-tab
5 ripple 5 ripple
6 @click="activeTab('existing')" 6 @click="activeTab('existing')"
7 v-bind:class="{ active: isActive }" 7 v-bind:class="{ active: isActive }"
8 id="tab" 8 id="tab"
9 class="subheading" 9 class="subheading"
10 >Existing Books</v-tab> 10 >Existing Books</v-tab>
11 <v-tab 11 <v-tab
12 ripple 12 ripple
13 @click="activeTab('new')" 13 @click="activeTab('new')"
14 v-bind:class="{ active: newActive }" 14 v-bind:class="{ active: newActive }"
15 id="tab1" 15 id="tab1"
16 User 16 User
17 class="subheading" 17 class="subheading"
18 >Add New Books</v-tab> 18 >Add New Books</v-tab>
19 19
20 <!-- ****** EDIT SECTION ****** --> 20 <!-- ****** EDIT SECTION ****** -->
21 <v-tab-item> 21 <v-tab-item>
22 <v-snackbar 22 <v-snackbar
23 :timeout="timeout" 23 :timeout="timeout"
24 :top="y === 'top'" 24 :top="y === 'top'"
25 :right="x === 'right'" 25 :right="x === 'right'"
26 :vertical="mode === 'vertical'" 26 :vertical="mode === 'vertical'"
27 v-model="snackbar" 27 v-model="snackbar"
28 color="success" 28 color="success"
29 >{{ text }}</v-snackbar> 29 >{{ text }}</v-snackbar>
30 <v-dialog v-model="dialog" max-width="600px"> 30 <v-dialog v-model="dialog" max-width="600px">
31 <v-toolbar color="grey lighten-2"> 31 <v-toolbar color="grey lighten-2">
32 <v-spacer></v-spacer> 32 <v-spacer></v-spacer>
33 <v-toolbar-title> 33 <v-toolbar-title>
34 <h3>Edit Books</h3> 34 <h3>Edit Books</h3>
35 </v-toolbar-title> 35 </v-toolbar-title>
36 <v-spacer></v-spacer> 36 <v-spacer></v-spacer>
37 </v-toolbar> 37 </v-toolbar>
38 <v-card> 38 <v-card>
39 <v-card-text> 39 <v-card-text>
40 <v-container> 40 <v-container>
41 <v-layout wrap justify-center> 41 <v-layout wrap justify-center>
42 <v-flex xs12 sm9> 42 <v-flex xs12 sm9>
43 <v-form> 43 <v-form>
44 <v-layout> 44 <v-layout>
45 <v-flex xs4 class="pt-4 subheading"> 45 <v-flex xs4 class="pt-4 subheading">
46 <label class="right pr-3">Name:</label> 46 <label class="right pr-3">Name:</label>
47 </v-flex> 47 </v-flex>
48 <v-flex xs8> 48 <v-flex xs8>
49 <v-text-field v-model="editedItem.name" placeholder="fill your Name"></v-text-field> 49 <v-text-field v-model="editedItem.name" placeholder="fill your Name"></v-text-field>
50 </v-flex> 50 </v-flex>
51 </v-layout> 51 </v-layout>
52 <v-layout> 52 <v-layout>
53 <v-flex xs4 class="pt-4 subheading"> 53 <v-flex xs4 class="pt-4 subheading">
54 <label class="right pr-3">Author:</label> 54 <label class="right pr-3">Author:</label>
55 </v-flex> 55 </v-flex>
56 <v-flex xs8> 56 <v-flex xs8>
57 <v-text-field 57 <v-text-field
58 v-model="editedItem.author" 58 v-model="editedItem.author"
59 placeholder="fill your Author Name" 59 placeholder="fill your Author Name"
60 ></v-text-field> 60 ></v-text-field>
61 </v-flex> 61 </v-flex>
62 </v-layout> 62 </v-layout>
63 <v-layout> 63 <v-layout>
64 <v-flex xs4 class="pt-4 subheading"> 64 <v-flex xs4 class="pt-4 subheading">
65 <label class="right pr-2">Subject Code:</label> 65 <label class="right pr-2">Subject Code:</label>
66 </v-flex> 66 </v-flex>
67 <v-flex xs8> 67 <v-flex xs8>
68 <v-text-field 68 <v-text-field
69 v-model="editedItem.subjectCode" 69 v-model="editedItem.subjectCode"
70 placeholder="fill your Subject Code" 70 placeholder="fill your Subject Code"
71 ></v-text-field> 71 ></v-text-field>
72 </v-flex> 72 </v-flex>
73 </v-layout> 73 </v-layout>
74 <v-layout> 74 <v-layout>
75 <v-flex xs4 class="pt-4 subheading"> 75 <v-flex xs4 class="pt-4 subheading">
76 <label class="right pr-3">Price :</label> 76 <label class="right pr-3">Price :</label>
77 </v-flex> 77 </v-flex>
78 <v-flex xs8> 78 <v-flex xs8>
79 <v-text-field 79 <v-text-field
80 v-model="editedItem.price" 80 v-model="editedItem.price"
81 placeholder="fill your Subject Code" 81 placeholder="fill your Subject Code"
82 ></v-text-field> 82 ></v-text-field>
83 </v-flex> 83 </v-flex>
84 </v-layout> 84 </v-layout>
85 <v-layout> 85 <v-layout>
86 <v-flex xs4 class="pt-4 subheading"> 86 <v-flex xs4 class="pt-4 subheading">
87 <label class="right pr-3">Quantity:</label> 87 <label class="right pr-3">Quantity:</label>
88 </v-flex> 88 </v-flex>
89 <v-flex xs8> 89 <v-flex xs8>
90 <v-text-field 90 <v-text-field
91 v-model="editedItem.quantity" 91 v-model="editedItem.quantity"
92 type="number" 92 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 <img 233 <v-tooltip top>
234 style="cursor:pointer; width:25px; height:18px; " 234 <img
235 class="mr-5" 235 slot="activator"
236 @click="profile(props.item)" 236 style="cursor:pointer; width:25px; height:18px; "
237 src="/static/icon/eye1.png" 237 class="mr5"
238 /> 238 @click="profile(props.item)"
239 <img 239 src="/static/icon/eye1.png"
240 style="cursor:pointer; width:20px; height:18px; " 240 />
241 class="mr-5" 241 <span>View</span>
242 @click="editItem(props.item)" 242 </v-tooltip>
243 src="/static/icon/edit1.png" 243 <v-tooltip top>
244 /> 244 <img
245 <img 245 slot="activator"
246 style="cursor:pointer; width:20px; height:20px; " 246 style="cursor:pointer; width:20px; height:18px; "
247 class="mr-5" 247 class="mr5"
248 @click="deleteItem(props.item)" 248 @click="editItem(props.item)"
249 src="/static/icon/delete1.png" 249 src="/static/icon/edit1.png"
250 /> 250 />
251 </span> 251 <span>Edit</span>
252 </v-tooltip>
253 <v-tooltip top>
254 <img
255 slot="activator"
256 style="cursor:pointer; width:20px; height:20px; "
257 class="mr5"
258 @click="deleteItem(props.item)"
259 src="/static/icon/delete1.png"
260 />
261 <span>Delete</span>
262 </v-tooltip>
263 </span>
252 </td> 264 </td>
253 </template> 265 </template>
254 <v-alert 266 <v-alert
255 slot="no-results" 267 slot="no-results"
256 :value="true" 268 :value="true"
257 color="error" 269 color="error"
258 icon="warning" 270 icon="warning"
259 >Your search for "{{ search }}" found no results.</v-alert> 271 >Your search for "{{ search }}" found no results.</v-alert>
260 </v-data-table> 272 </v-data-table>
261 </v-tab-item> 273 </v-tab-item>
262 274
263 <!-- ****** ADD multiple Students ****** --> 275 <!-- ****** ADD multiple Students ****** -->
264 276
265 <v-tab-item> 277 <v-tab-item>
266 <v-container> 278 <v-container>
267 <v-snackbar 279 <v-snackbar
268 :timeout="timeout" 280 :timeout="timeout"
269 :top="y === 'top'" 281 :top="y === 'top'"
270 :right="x === 'right'" 282 :right="x === 'right'"
271 :vertical="mode === 'vertical'" 283 :vertical="mode === 'vertical'"
272 v-model="snackbar" 284 v-model="snackbar"
273 color="success" 285 color="success"
274 >{{ text }}</v-snackbar> 286 >{{ text }}</v-snackbar>
275 <v-flex xs12 sm8 offset-sm2 class="top"> 287 <v-flex xs12 sm8 offset-sm2 class="top">
276 <v-card flat> 288 <v-card flat>
277 <v-container fluid fill-height> 289 <v-container fluid fill-height>
278 <v-layout align-center> 290 <v-layout align-center>
279 <v-flex xs12 class="mt-4"> 291 <v-flex xs12 class="mt-4">
280 <v-form ref="form" v-model="valid" lazy-validation> 292 <v-form ref="form" v-model="valid" lazy-validation>
281 <v-layout> 293 <v-layout>
282 <v-flex xs4 class="pt-4 subheading"> 294 <v-flex xs4 class="pt-4 subheading">
283 <label class="right">Name:</label> 295 <label class="right">Name:</label>
284 </v-flex> 296 </v-flex>
285 <v-flex xs6 class="ml-3"> 297 <v-flex xs6 class="ml-3">
286 <v-text-field 298 <v-text-field
287 v-model="BooksData.name" 299 v-model="BooksData.name"
288 placeholder="fill your Name" 300 placeholder="fill your Name"
289 type="text" 301 type="text"
290 :rules="nameRules" 302 :rules="nameRules"
291 required 303 required
292 ></v-text-field> 304 ></v-text-field>
293 </v-flex> 305 </v-flex>
294 </v-layout> 306 </v-layout>
295 <v-layout> 307 <v-layout>
296 <v-flex xs4 class="pt-4 subheading"> 308 <v-flex xs4 class="pt-4 subheading">
297 <label class="right">Author:</label> 309 <label class="right">Author:</label>
298 </v-flex> 310 </v-flex>
299 <v-flex xs6 class="ml-3"> 311 <v-flex xs6 class="ml-3">
300 <v-text-field 312 <v-text-field
301 v-model="BooksData.author" 313 v-model="BooksData.author"
302 placeholder="fill your Author Name" 314 placeholder="fill your Author Name"
303 type="text" 315 type="text"
304 :rules="authorRules" 316 :rules="authorRules"
305 required 317 required
306 ></v-text-field> 318 ></v-text-field>
307 </v-flex> 319 </v-flex>
308 </v-layout> 320 </v-layout>
309 <v-layout> 321 <v-layout>
310 <v-flex xs4 class="pt-4 subheading"> 322 <v-flex xs4 class="pt-4 subheading">
311 <label class="right">Subject Code :</label> 323 <label class="right">Subject Code :</label>
312 </v-flex> 324 </v-flex>
313 <v-flex xs6 class="ml-3"> 325 <v-flex xs6 class="ml-3">
314 <v-text-field 326 <v-text-field
315 v-model="BooksData.subjectCode" 327 v-model="BooksData.subjectCode"
316 placeholder="fill your Subject Code" 328 placeholder="fill your Subject Code"
317 type="text" 329 type="text"
318 :rules="subjectRules" 330 :rules="subjectRules"
319 required 331 required
320 ></v-text-field> 332 ></v-text-field>
321 </v-flex> 333 </v-flex>
322 </v-layout> 334 </v-layout>
323 <v-layout> 335 <v-layout>
324 <v-flex xs4 class="pt-4 subheading"> 336 <v-flex xs4 class="pt-4 subheading">
325 <label class="right">Price:</label> 337 <label class="right">Price:</label>
326 </v-flex> 338 </v-flex>
327 <v-flex xs6 class="ml-3"> 339 <v-flex xs6 class="ml-3">
328 <v-text-field 340 <v-text-field
329 v-model="BooksData.price" 341 v-model="BooksData.price"
330 placeholder="fill your Price" 342 placeholder="fill your Price"
331 :rules="priceRules" 343 :rules="priceRules"
332 required 344 required
333 ></v-text-field> 345 ></v-text-field>
334 </v-flex> 346 </v-flex>
335 </v-layout> 347 </v-layout>
336 <v-layout> 348 <v-layout>
337 <v-flex xs4 class="pt-4 subheading"> 349 <v-flex xs4 class="pt-4 subheading">
338 <label class="right">Quantity:</label> 350 <label class="right">Quantity:</label>
339 </v-flex> 351 </v-flex>
340 <v-flex xs6 class="ml-3"> 352 <v-flex xs6 class="ml-3">
341 <v-text-field 353 <v-text-field
342 v-model="BooksData.quantity" 354 v-model="BooksData.quantity"
343 placeholder="fill your Quantity" 355 placeholder="fill your Quantity"
344 :rules="quantityRules" 356 :rules="quantityRules"
345 required 357 required
346 ></v-text-field> 358 ></v-text-field>
347 </v-flex> 359 </v-flex>
348 </v-layout> 360 </v-layout>
349 <v-layout> 361 <v-layout>
350 <v-flex xs4 class="pt-4 subheading"> 362 <v-flex xs4 class="pt-4 subheading">
351 <label class="right">Rack No:</label> 363 <label class="right">Rack No:</label>
352 </v-flex> 364 </v-flex>
353 <v-flex xs6 class="ml-3"> 365 <v-flex xs6 class="ml-3">
354 <v-text-field 366 <v-text-field
355 v-model="BooksData.rackNo" 367 v-model="BooksData.rackNo"
356 placeholder="fill your Rack No" 368 placeholder="fill your Rack No"
357 :rules="rackNoRules" 369 :rules="rackNoRules"
358 required 370 required
359 ></v-text-field> 371 ></v-text-field>
360 </v-flex> 372 </v-flex>
361 </v-layout> 373 </v-layout>
362 <v-layout> 374 <v-layout>
363 <v-flex xs12 sm9 offset-sm2> 375 <v-flex xs12 sm9 offset-sm2>
364 <v-card-actions> 376 <v-card-actions>
365 <v-btn @click="clear" round dark>clear</v-btn> 377 <v-btn @click="clear" round dark>clear</v-btn>
366 <v-spacer></v-spacer> 378 <v-spacer></v-spacer>
367 <v-btn @click="submit" round dark :loading="loading">Add</v-btn> 379 <v-btn @click="submit" round dark :loading="loading">Add</v-btn>
368 </v-card-actions> 380 </v-card-actions>
369 </v-flex> 381 </v-flex>
370 </v-layout> 382 </v-layout>
371 </v-form> 383 </v-form>
372 </v-flex> 384 </v-flex>
373 </v-layout> 385 </v-layout>
374 </v-container> 386 </v-container>
375 </v-card> 387 </v-card>
376 </v-flex> 388 </v-flex>
377 </v-container> 389 </v-container>
378 </v-tab-item> 390 </v-tab-item>
379 </v-tabs> 391 </v-tabs>
380 <div class="loader" v-if="showLoader"> 392 <div class="loader" v-if="showLoader">
381 <v-progress-circular indeterminate color="white"></v-progress-circular> 393 <v-progress-circular indeterminate color="white"></v-progress-circular>
382 </div> 394 </div>
383 </v-app> 395 </v-app>
384 </template> 396 </template>
385 397
386 <script> 398 <script>
387 import http from "@/Services/http.js"; 399 import http from "@/Services/http.js";
388 import Util from "@/util"; 400 import Util from "@/util";
389 401
390 export default { 402 export default {
391 data: () => ({ 403 data: () => ({
392 snackbar: false, 404 snackbar: false,
393 y: "top", 405 y: "top",
394 x: "right", 406 x: "right",
395 mode: "", 407 mode: "",
396 timeout: 3000, 408 timeout: 3000,
397 text: "", 409 text: "",
398 showLoader: false, 410 showLoader: false,
399 loading: false, 411 loading: false,
400 date: null, 412 date: null,
401 search: "", 413 search: "",
402 dialog: false, 414 dialog: false,
403 dialog1: false, 415 dialog1: false,
404 valid: true, 416 valid: true,
405 validEdit: true, 417 validEdit: true,
406 isActive: true, 418 isActive: true,
407 newActive: false, 419 newActive: false,
408 pagination: { 420 pagination: {
409 rowsPerPage: 15 421 rowsPerPage: 15
410 }, 422 },
411 nameRules: [v => !!v || " Name is required"], 423 nameRules: [v => !!v || " Name is required"],
412 authorRules: [v => !!v || "Author Name Monthly"], 424 authorRules: [v => !!v || "Author Name Monthly"],
413 subjectRules: [v => !!v || "Subject Code is required"], 425 subjectRules: [v => !!v || "Subject Code is required"],
414 priceRules: [v => !!v || "Price is required"], 426 priceRules: [v => !!v || "Price is required"],
415 quantityRules: [v => !!v || "Quantity is required"], 427 quantityRules: [v => !!v || "Quantity is required"],
416 rackNoRules: [v => !!v || "Rack No. is required"], 428 rackNoRules: [v => !!v || "Rack No. is required"],
417 429
418 headers: [ 430 headers: [
419 { 431 {
420 text: "No", 432 text: "No",
421 align: "center", 433 align: "center",
422 sortable: false, 434 sortable: false,
423 value: "No" 435 value: "No"
424 }, 436 },
425 { 437 {
426 text: "Name", 438 text: "Name",
427 value: "name", 439 value: "name",
428 sortable: false, 440 sortable: false,
429 align: "center" 441 align: "center"
430 }, 442 },
431 { text: "Authour", value: "author", sortable: false, align: "center" }, 443 { text: "Authour", value: "author", sortable: false, align: "center" },
432 { 444 {
433 text: "Subject Code", 445 text: "Subject Code",
434 value: "subjectCode", 446 value: "subjectCode",
435 sortable: false, 447 sortable: false,
436 align: "center" 448 align: "center"
437 }, 449 },
438 { text: "Price", value: "price", sortable: false, align: "center" }, 450 { text: "Price", value: "price", sortable: false, align: "center" },
439 { text: "Quantity", value: "quantity", sortable: false, align: "center" }, 451 { text: "Quantity", value: "quantity", sortable: false, align: "center" },
440 { text: "Rack No", value: "rackNo", sortable: false, align: "center" }, 452 { text: "Rack No", value: "rackNo", sortable: false, align: "center" },
441 { text: "Status", value: "status", sortable: false, align: "center" }, 453 { text: "Status", value: "status", sortable: false, align: "center" },
442 454
443 // { text: "Session", value: "session", sortable: false, align: "center" }, 455 // { text: "Session", value: "session", sortable: false, align: "center" },
444 { text: "Action", value: "", sortable: false, align: "center" } 456 { text: "Action", value: "", sortable: false, align: "center" }
445 ], 457 ],
446 bookData: [], 458 bookData: [],
447 select: "", 459 select: "",
448 token: "", 460 token: "",
449 editedItem: {}, 461 editedItem: {},
450 BooksData: {} 462 BooksData: {}
451 }), 463 }),
452 methods: { 464 methods: {
453 getBookData() { 465 getBookData() {
454 this.showLoader = true; 466 this.showLoader = true;
455 http() 467 http()
456 .get("/getBooksList", { 468 .get("/getBooksList", {
457 headers: { Authorization: "Bearer " + this.token } 469 headers: { Authorization: "Bearer " + this.token }
458 }) 470 })
459 .then(response => { 471 .then(response => {
460 this.bookData = response.data.data; 472 this.bookData = response.data.data;
461 this.showLoader = false; 473 this.showLoader = false;
462 // console.log("getAllfeetypes=====>",response.data.data) 474 // console.log("getAllfeetypes=====>",response.data.data)
463 }) 475 })
464 .catch(error => { 476 .catch(error => {
465 // console.log("err====>", err); 477 // console.log("err====>", err);
466 this.showLoader = false; 478 this.showLoader = false;
467 if (error.response.status === 401) { 479 if (error.response.status === 401) {
468 this.$router.replace({ path: "/" }); 480 this.$router.replace({ path: "/" });
469 this.$store.dispatch("setToken", null); 481 this.$store.dispatch("setToken", null);
470 this.$store.dispatch("Id", null); 482 this.$store.dispatch("Id", null);
471 } 483 }
472 }); 484 });
473 }, 485 },
474 editItem(item) { 486 editItem(item) {
475 this.editedIndex = this.bookData.indexOf(item); 487 this.editedIndex = this.bookData.indexOf(item);
476 this.editedItem = Object.assign({}, item); 488 this.editedItem = Object.assign({}, item);
477 console.log(this.editedItem); 489 console.log(this.editedItem);
478 this.dialog = true; 490 this.dialog = true;
479 }, 491 },
480 profile(item) { 492 profile(item) {
481 this.editedIndex = this.bookData.indexOf(item); 493 this.editedIndex = this.bookData.indexOf(item);
482 this.editedItem = Object.assign({}, item); 494 this.editedItem = Object.assign({}, item);
483 this.dialog1 = true; 495 this.dialog1 = true;
484 }, 496 },
485 deleteItem(item) { 497 deleteItem(item) {
486 let deleteStudent = { 498 let deleteStudent = {
487 bookId: item._id 499 bookId: item._id
488 }; 500 };
489 http() 501 http()
490 .delete( 502 .delete(
491 "/deleteBook", 503 "/deleteBook",
492 confirm("Are you sure you want to delete this?") && { 504 confirm("Are you sure you want to delete this?") && {
493 params: deleteStudent 505 params: deleteStudent
494 } 506 }
495 ) 507 )
496 .then(response => { 508 .then(response => {
497 if ((this.snackbar = true)) { 509 if ((this.snackbar = true)) {
498 this.text = "Successfully delete Existing Delete Student "; 510 this.text = "Successfully delete Existing Delete Student ";
499 } 511 }
500 this.getBookData(); 512 this.getBookData();
501 }) 513 })
502 .catch(error => { 514 .catch(error => {
503 // console.log(error); 515 // console.log(error);
504 }); 516 });
505 }, 517 },
506 activeTab(type) { 518 activeTab(type) {
507 switch (type) { 519 switch (type) {
508 case "existing": 520 case "existing":
509 this.newActive = false; 521 this.newActive = false;
510 this.isActive = true; 522 this.isActive = true;
511 break; 523 break;
512 524
513 default: 525 default:
514 this.newActive = true; 526 this.newActive = true;
515 this.isActive = false; 527 this.isActive = false;
516 break; 528 break;
517 } 529 }
518 }, 530 },
519 close() { 531 close() {
520 this.dialog = false; 532 this.dialog = false;
521 setTimeout(() => { 533 setTimeout(() => {
522 this.editedItem = Object.assign({}, this.defaultItem); 534 this.editedItem = Object.assign({}, this.defaultItem);
523 this.editedIndex = -1; 535 this.editedIndex = -1;
524 }, 300); 536 }, 300);
525 }, 537 },
526 close1() { 538 close1() {
527 this.dialog1 = false; 539 this.dialog1 = false;
528 }, 540 },
529 close2() { 541 close2() {
530 this.dialog2 = false; 542 this.dialog2 = false;
531 }, 543 },
532 submit() { 544 submit() {
533 this.BooksData.quantity = Number(this.BooksData.quantity); 545 this.BooksData.quantity = Number(this.BooksData.quantity);
534 if (this.$refs.form.validate()) { 546 if (this.$refs.form.validate()) {
535 this.loading = true; 547 this.loading = true;
536 http() 548 http()
537 .post("/createBook", this.BooksData) 549 .post("/createBook", this.BooksData)
538 .then(response => { 550 .then(response => {
539 console.log(response); 551 console.log(response);
540 this.getBookData(); 552 this.getBookData();
541 if ((this.snackbar = true)) { 553 if ((this.snackbar = true)) {
542 this.text = "New Book added successfully"; 554 this.text = "New Book added successfully";
543 } 555 }
544 556
545 this.clear(); 557 this.clear();
546 this.loading = false; 558 this.loading = false;
547 }) 559 })
548 .catch(error => { 560 .catch(error => {
549 // console.log(error); 561 // console.log(error);
550 if ((this.snackbar = true)) { 562 if ((this.snackbar = true)) {
551 this.text = error.response.data.message; 563 this.text = error.response.data.message;
552 } 564 }
553 this.loading = false; 565 this.loading = false;
554 }); 566 });
555 } 567 }
556 }, 568 },
557 clear() { 569 clear() {
558 this.$refs.form.reset(); 570 this.$refs.form.reset();
559 }, 571 },
560 save() { 572 save() {
561 this.editedItem.bookId = this.editedItem._id; 573 this.editedItem.bookId = this.editedItem._id;
562 http() 574 http()
563 .put("/updateBook", this.editedItem) 575 .put("/updateBook", this.editedItem)
564 .then(response => { 576 .then(response => {
565 if ((this.snackbar = true)) { 577 if ((this.snackbar = true)) {
566 this.text = "Successfully Edit Existing Book"; 578 this.text = "Successfully Edit Existing Book";
567 } 579 }
568 this.getBookData(); 580 this.getBookData();
569 this.close(); 581 this.close();
570 }) 582 })
571 .catch(error => { 583 .catch(error => {
572 this.text = error.response.data.message; 584 this.text = error.response.data.message;
573 // console.log(error); 585 // console.log(error);
574 }); 586 });
575 } 587 }
576 }, 588 },
577 mounted() { 589 mounted() {
578 this.token = this.$store.state.token; 590 this.token = this.$store.state.token;
579 this.getBookData(); 591 this.getBookData();
580 }, 592 },
581 created() { 593 created() {
582 this.$root.$on("app:search", search => { 594 this.$root.$on("app:search", search => {
583 this.search = search; 595 this.search = search;
584 }); 596 });
585 }, 597 },
586 beforeDestroy() { 598 beforeDestroy() {
587 // dont forget to remove the listener 599 // dont forget to remove the listener
588 this.$root.$off("app:search"); 600 this.$root.$off("app:search");
589 } 601 }
590 }; 602 };
591 </script> 603 </script>
592 604
593 <style scoped> 605 <style scoped>
594 .active { 606 .active {
595 background-color: gray; 607 background-color: gray;
596 color: white !important; 608 color: white !important;
597 } 609 }
598 .activebtn { 610 .activebtn {
599 color: black !important; 611 color: black !important;
600 } 612 }
601 </style> 613 </style>
src/pages/Library/eBook.vue
Diff comments   View file @495e403
1 <template> 1 <template>
2 <v-app id="pages-dasboard"> 2 <v-app id="pages-dasboard">
3 <v-tabs grow slider-color="gray"> 3 <v-tabs grow slider-color="gray">
4 <v-tab 4 <v-tab
5 ripple 5 ripple
6 @click="activeTab('existing')" 6 @click="activeTab('existing')"
7 v-bind:class="{ active: isActive }" 7 v-bind:class="{ active: isActive }"
8 id="tab" 8 id="tab"
9 class="subheading" 9 class="subheading"
10 >Existing E-Books</v-tab> 10 >Existing E-Books</v-tab>
11 <v-tab 11 <v-tab
12 ripple 12 ripple
13 @click="activeTab('new')" 13 @click="activeTab('new')"
14 v-bind:class="{ active: newActive }" 14 v-bind:class="{ active: newActive }"
15 id="tab1" 15 id="tab1"
16 User 16 User
17 class="subheading" 17 class="subheading"
18 >Add E-Books</v-tab> 18 >Add E-Books</v-tab>
19 19
20 <!-- ****** EDITS ALL NEWS DETAILS ****** --> 20 <!-- ****** EDITS ALL NEWS DETAILS ****** -->
21 21
22 <v-tab-item> 22 <v-tab-item>
23 <v-snackbar 23 <v-snackbar
24 :timeout="timeout" 24 :timeout="timeout"
25 :top="y === 'top'" 25 :top="y === 'top'"
26 :right="x === 'right'" 26 :right="x === 'right'"
27 :vertical="mode === 'vertical'" 27 :vertical="mode === 'vertical'"
28 v-model="snackbar" 28 v-model="snackbar"
29 color="success" 29 color="success"
30 >{{ text }}</v-snackbar> 30 >{{ text }}</v-snackbar>
31 <v-dialog v-model="dialog" max-width="1000px" scrollable> 31 <v-dialog v-model="dialog" max-width="1000px" scrollable>
32 <v-card flat> 32 <v-card flat>
33 <v-toolbar class="grey lighten-2" flat> 33 <v-toolbar class="grey lighten-2" flat>
34 <v-spacer></v-spacer> 34 <v-spacer></v-spacer>
35 <v-toolbar-title> 35 <v-toolbar-title>
36 <h3>Edit E-Books</h3> 36 <h3>Edit E-Books</h3>
37 </v-toolbar-title> 37 </v-toolbar-title>
38 <v-spacer></v-spacer> 38 <v-spacer></v-spacer>
39 </v-toolbar> 39 </v-toolbar>
40 <v-card-text style="height:760px;"> 40 <v-card-text style="height:760px;">
41 <v-form ref="form"> 41 <v-form ref="form">
42 <v-container fluid> 42 <v-container fluid>
43 <v-layout row> 43 <v-layout row>
44 <v-flex 44 <v-flex
45 xs12 45 xs12
46 class="text-xs-center text-sm-center text-md-center text-lg-center mr-4" 46 class="text-xs-center text-sm-center text-md-center text-lg-center mr-4"
47 > 47 >
48 <input 48 <input
49 type="file" 49 type="file"
50 style="display: none" 50 style="display: none"
51 ref="image" 51 ref="image"
52 accept="image/*" 52 accept="image/*"
53 multiple 53 multiple
54 @change="onImagePicked" 54 @change="onImagePicked"
55 /> 55 />
56 <v-layout justify-center> 56 <v-layout justify-center>
57 <v-flex v-if="files != ''"> 57 <v-flex v-if="files != ''">
58 <img :src="files" height="450" width="500;" /> 58 <img :src="files" height="450" width="500;" />
59 </v-flex> 59 </v-flex>
60 </v-layout> 60 </v-layout>
61 <img 61 <img
62 v-if="editedItem.coverPhotoUrl && files == '' " 62 v-if="editedItem.coverPhotoUrl && files == '' "
63 :src="editedItem.coverPhotoUrl" 63 :src="editedItem.coverPhotoUrl"
64 height="450" 64 height="450"
65 width="500" 65 width="500"
66 alt="eBooks" 66 alt="eBooks"
67 class="pa-2" 67 class="pa-2"
68 /> 68 />
69 <!-- <v-layout justify-center> 69 <!-- <v-layout justify-center>
70 <v-flex 70 <v-flex
71 xs3 71 xs3
72 v-for="Image in editedItem.newsImageUrl" 72 v-for="Image in editedItem.newsImageUrl"
73 :key="Image._id" 73 :key="Image._id"
74 v-if="editedItem.newsImageUrl" 74 v-if="editedItem.newsImageUrl"
75 class="profile-image-wrapper" 75 class="profile-image-wrapper"
76 > 76 >
77 77
78 <v-icon 78 <v-icon
79 class="red edit-profile-icon" 79 class="red edit-profile-icon"
80 dark 80 dark
81 @click="deleteImage(Image._id,editedItem._id)" 81 @click="deleteImage(Image._id,editedItem._id)"
82 >close</v-icon> 82 >close</v-icon>
83 </v-flex> 83 </v-flex>
84 <v-flex v-for="(file, index) in files" :key="index"> 84 <v-flex v-for="(file, index) in files" :key="index">
85 <img :src="file" height="160" width="160" class="pa-2" /> 85 <img :src="file" height="160" width="160" class="pa-2" />
86 </v-flex> 86 </v-flex>
87 </v-layout>--> 87 </v-layout>-->
88 <img 88 <img
89 src="/static/icon/user.png" 89 src="/static/icon/user.png"
90 v-if="editedItem.coverPhotoUrl == ''" 90 v-if="editedItem.coverPhotoUrl == ''"
91 height="160" 91 height="160"
92 width="160" 92 width="160"
93 alt="Books" 93 alt="Books"
94 /> 94 />
95 </v-flex> 95 </v-flex>
96 </v-layout> 96 </v-layout>
97 <v-layout> 97 <v-layout>
98 <v-flex xs12 sm12> 98 <v-flex xs12 sm12>
99 <v-layout> 99 <v-layout>
100 <v-flex xs4 class="pt-4 subheading"> 100 <v-flex xs4 class="pt-4 subheading">
101 <label class="right">Name:</label> 101 <label class="right">Name:</label>
102 </v-flex> 102 </v-flex>
103 <v-flex xs5 class="ml-3"> 103 <v-flex xs5 class="ml-3">
104 <v-text-field 104 <v-text-field
105 v-model="editedItem.name" 105 v-model="editedItem.name"
106 placeholder="fill your Name" 106 placeholder="fill your Name"
107 type="text" 107 type="text"
108 ></v-text-field> 108 ></v-text-field>
109 </v-flex> 109 </v-flex>
110 </v-layout> 110 </v-layout>
111 </v-flex> 111 </v-flex>
112 <v-flex xs12 sm12> 112 <v-flex xs12 sm12>
113 <v-layout> 113 <v-layout>
114 <v-flex xs4 class="pt-4 subheading"> 114 <v-flex xs4 class="pt-4 subheading">
115 <label class="right">Author:</label> 115 <label class="right">Author:</label>
116 </v-flex> 116 </v-flex>
117 <v-flex xs5 class="ml-3"> 117 <v-flex xs5 class="ml-3">
118 <v-text-field placeholder="fill your Author" v-model="editedItem.author"></v-text-field> 118 <v-text-field placeholder="fill your Author" v-model="editedItem.author"></v-text-field>
119 </v-flex> 119 </v-flex>
120 </v-layout> 120 </v-layout>
121 </v-flex> 121 </v-flex>
122 <v-flex xs12 sm12> 122 <v-flex xs12 sm12>
123 <v-layout> 123 <v-layout>
124 <v-flex xs4 class="pt-4 subheading"> 124 <v-flex xs4 class="pt-4 subheading">
125 <label class="right">Class:</label> 125 <label class="right">Class:</label>
126 </v-flex> 126 </v-flex>
127 <v-flex xs5 class="ml-3"> 127 <v-flex xs5 class="ml-3">
128 <v-text-field 128 <v-text-field
129 v-model="editedItem.className" 129 v-model="editedItem.className"
130 :items="addClass" 130 :items="addClass"
131 label="Select Class" 131 label="Select Class"
132 item-text="classNum" 132 item-text="classNum"
133 item-value="_id" 133 item-value="_id"
134 ></v-text-field> 134 ></v-text-field>
135 </v-flex> 135 </v-flex>
136 </v-layout> 136 </v-layout>
137 </v-flex> 137 </v-flex>
138 <v-flex xs12 sm12> 138 <v-flex xs12 sm12>
139 <v-layout> 139 <v-layout>
140 <v-flex xs4 class="pt-4 subheading"> 140 <v-flex xs4 class="pt-4 subheading">
141 <label class="right">Upload Image:</label> 141 <label class="right">Upload Image:</label>
142 </v-flex> 142 </v-flex>
143 <v-flex xs5 class="ml-3"> 143 <v-flex xs5 class="ml-3">
144 <v-text-field 144 <v-text-field
145 label="Select Image" 145 label="Select Image"
146 @click="pickImage" 146 @click="pickImage"
147 v-model="imageName" 147 v-model="imageName"
148 append-icon="attach_file" 148 append-icon="attach_file"
149 multiple 149 multiple
150 ></v-text-field> 150 ></v-text-field>
151 </v-flex> 151 </v-flex>
152 </v-layout> 152 </v-layout>
153 </v-flex> 153 </v-flex>
154 <v-flex xs12 sm12> 154 <v-flex xs12 sm12>
155 <v-layout> 155 <v-layout>
156 <v-flex xs4 class="pt-4 subheading"> 156 <v-flex xs4 class="pt-4 subheading">
157 <label class="right">Upload File:</label> 157 <label class="right">Upload File:</label>
158 </v-flex> 158 </v-flex>
159 <v-flex xs5 class="ml-3"> 159 <v-flex xs5 class="ml-3">
160 <input 160 <input
161 type="file" 161 type="file"
162 style="display: none" 162 style="display: none"
163 ref="file" 163 ref="file"
164 @change="onFilePicked" 164 @change="onFilePicked"
165 /> 165 />
166 <v-text-field 166 <v-text-field
167 label="Select File" 167 label="Select File"
168 @click="pickFile" 168 @click="pickFile"
169 v-model="fileName" 169 v-model="fileName"
170 append-icon="attach_file" 170 append-icon="attach_file"
171 multiple 171 multiple
172 ></v-text-field> 172 ></v-text-field>
173 </v-flex> 173 </v-flex>
174 </v-layout> 174 </v-layout>
175 </v-flex> 175 </v-flex>
176 <v-flex xs12 sm12> 176 <v-flex xs12 sm12>
177 <v-layout> 177 <v-layout>
178 <v-flex xs4 class="pt-4 subheading"> 178 <v-flex xs4 class="pt-4 subheading">
179 <label class="right">Private:</label> 179 <label class="right">Private:</label>
180 </v-flex> 180 </v-flex>
181 <v-flex xs5 class="ml-3"> 181 <v-flex xs5 class="ml-3">
182 <v-checkbox v-model="editedItem.private"></v-checkbox> 182 <v-checkbox v-model="editedItem.private"></v-checkbox>
183 </v-flex> 183 </v-flex>
184 </v-layout> 184 </v-layout>
185 </v-flex> 185 </v-flex>
186 </v-layout> 186 </v-layout>
187 <v-layout> 187 <v-layout>
188 <v-flex xs12 sm8 offset-sm2> 188 <v-flex xs12 sm8 offset-sm2>
189 <v-card-actions> 189 <v-card-actions>
190 <v-btn round dark @click.native="close">Cancel</v-btn> 190 <v-btn round dark @click.native="close">Cancel</v-btn>
191 <v-spacer></v-spacer> 191 <v-spacer></v-spacer>
192 <v-btn round dark @click="save" :loading="loadingUpadte">Save</v-btn> 192 <v-btn round dark @click="save" :loading="loadingUpadte">Save</v-btn>
193 </v-card-actions> 193 </v-card-actions>
194 </v-flex> 194 </v-flex>
195 </v-layout> 195 </v-layout>
196 </v-container> 196 </v-container>
197 </v-form> 197 </v-form>
198 </v-card-text> 198 </v-card-text>
199 </v-card> 199 </v-card>
200 </v-dialog> 200 </v-dialog>
201 201
202 <!-- ****** PROFILE VIEW ALL NEWS DEATILS ****** --> 202 <!-- ****** PROFILE VIEW ALL NEWS DEATILS ****** -->
203 203
204 <v-dialog v-model="dialog1" max-width="800px" scrollable> 204 <v-dialog v-model="dialog1" max-width="800px" scrollable>
205 <v-card style="height: 700px;"> 205 <v-card style="height: 700px;">
206 <v-toolbar color="grey lighten-2" flat> 206 <v-toolbar color="grey lighten-2" flat>
207 <v-spacer></v-spacer> 207 <v-spacer></v-spacer>
208 <v-toolbar-title> 208 <v-toolbar-title>
209 <h3>E-Books</h3> 209 <h3>E-Books</h3>
210 </v-toolbar-title> 210 </v-toolbar-title>
211 <v-spacer></v-spacer> 211 <v-spacer></v-spacer>
212 <v-icon @click="close1">close</v-icon> 212 <v-icon @click="close1">close</v-icon>
213 </v-toolbar> 213 </v-toolbar>
214 <v-card-text> 214 <v-card-text>
215 <v-container> 215 <v-container>
216 <v-layout wrap> 216 <v-layout wrap>
217 <v-flex sm12 xs12> 217 <v-flex sm12 xs12>
218 <iframe :src="editedItem.fileUrl" height="600" width="100%"></iframe> 218 <iframe :src="editedItem.fileUrl" height="600" width="100%"></iframe>
219 </v-flex> 219 </v-flex>
220 </v-layout> 220 </v-layout>
221 </v-container> 221 </v-container>
222 </v-card-text> 222 </v-card-text>
223 </v-card> 223 </v-card>
224 </v-dialog> 224 </v-dialog>
225 <!-- ****** EXISTING-USERS NEWS TABLE ****** --> 225 <!-- ****** EXISTING-USERS NEWS TABLE ****** -->
226 <v-data-table 226 <v-data-table
227 :headers="headers" 227 :headers="headers"
228 :items="eBookData" 228 :items="eBookData"
229 :pagination.sync="pagination" 229 :pagination.sync="pagination"
230 :search="search" 230 :search="search"
231 > 231 >
232 <template slot="items" slot-scope="props"> 232 <template slot="items" slot-scope="props">
233 <td class="text-xs-center">{{ props.index + 1}}</td> 233 <td class="text-xs-center">{{ props.index + 1}}</td>
234 <td id="td" class="text-xs-center"> 234 <td id="td" class="text-xs-center">
235 <img :src="props.item.coverPhotoUrl" alt="newsImage" width="100" height="70" /> 235 <img :src="props.item.coverPhotoUrl" alt="newsImage" width="100" height="70" />
236 </td> 236 </td>
237 <td id="td" class="text-xs-center">{{ props.item.name}}</td> 237 <td id="td" class="text-xs-center">{{ props.item.name}}</td>
238 <td id="td" class="text-xs-center">{{ props.item.author}}</td> 238 <td id="td" class="text-xs-center">{{ props.item.author}}</td>
239 <td id="td" class="text-xs-center">{{ props.item.classId.classNum}}</td> 239 <td id="td" class="text-xs-center">{{ props.item.classId.classNum}}</td>
240 240
241 <td class="text-xs-center"> 241 <td class="text-xs-center">
242 <span> 242 <span>
243 <img 243 <v-tooltip top>
244 style="cursor:pointer; width:25px; height:18px; " 244 <img
245 class="mr-5" 245 slot="activator"
246 @click="profile(props.item)" 246 style="cursor:pointer; width:25px; height:18px; "
247 src="/static/icon/eye1.png" 247 class="mr5"
248 /> 248 @click="profile(props.item)"
249 <img 249 src="/static/icon/eye1.png"
250 style="cursor:pointer; width:20px; height:18px; " 250 />
251 class="mr-5" 251 <span>View</span>
252 @click="editItem(props.item)" 252 </v-tooltip>
253 src="/static/icon/edit1.png" 253 <v-tooltip top>
254 /> 254 <img
255 <img 255 slot="activator"
256 style="cursor:pointer;width:20px; height:20px; " 256 style="cursor:pointer; width:20px; height:18px; "
257 class="mr-5" 257 class="mr5"
258 @click="deleteItem(props.item)" 258 @click="editItem(props.item)"
259 src="/static/icon/delete1.png" 259 src="/static/icon/edit1.png"
260 /> 260 />
261 <span>Edit</span>
262 </v-tooltip>
263 <v-tooltip top>
264 <img
265 slot="activator"
266 style="cursor:pointer; width:20px; height:20px; "
267 class="mr5"
268 @click="deleteItem(props.item)"
269 src="/static/icon/delete1.png"
270 />
271 <span>Delete</span>
272 </v-tooltip>
261 </span> 273 </span>
262 </td> 274 </td>
263 </template> 275 </template>
264 <v-alert 276 <v-alert
265 slot="no-results" 277 slot="no-results"
266 :value="true" 278 :value="true"
267 color="error" 279 color="error"
268 icon="warning" 280 icon="warning"
269 >Your search for "{{ search }}" found no results.</v-alert> 281 >Your search for "{{ search }}" found no results.</v-alert>
270 </v-data-table> 282 </v-data-table>
271 </v-tab-item> 283 </v-tab-item>
272 284
273 <!-- ****** ADD MULTIPLE E-BOOK ****** --> 285 <!-- ****** ADD MULTIPLE E-BOOK ****** -->
274 286
275 <v-tab-item> 287 <v-tab-item>
276 <v-container> 288 <v-container>
277 <v-snackbar 289 <v-snackbar
278 :timeout="timeout" 290 :timeout="timeout"
279 :top="y === 'top'" 291 :top="y === 'top'"
280 :right="x === 'right'" 292 :right="x === 'right'"
281 :vertical="mode === 'vertical'" 293 :vertical="mode === 'vertical'"
282 v-model="snackbar" 294 v-model="snackbar"
283 color="success" 295 color="success"
284 >{{ text }}</v-snackbar> 296 >{{ text }}</v-snackbar>
285 <v-flex xs12 sm12 class="my-4"> 297 <v-flex xs12 sm12 class="my-4">
286 <v-card flat> 298 <v-card flat>
287 <v-form ref="form" v-model="valid" lazy-validation> 299 <v-form ref="form" v-model="valid" lazy-validation>
288 <v-container fluid> 300 <v-container fluid>
289 <v-layout> 301 <v-layout>
290 <v-flex 302 <v-flex
291 xs12 303 xs12
292 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"
293 > 305 >
294 <input 306 <input
295 type="file" 307 type="file"
296 style="display: none" 308 style="display: none"
297 ref="image" 309 ref="image"
298 accept="image/*" 310 accept="image/*"
299 @change="onImagePicked" 311 @change="onImagePicked"
300 /> 312 />
301 <v-layout justify-center> 313 <v-layout justify-center>
302 <v-flex v-if="files != ''"> 314 <v-flex v-if="files != ''">
303 <img :src="files" height="240" width="260px;" /> 315 <img :src="files" height="240" width="260px;" />
304 </v-flex> 316 </v-flex>
305 </v-layout> 317 </v-layout>
306 <img 318 <img
307 src="/static/icon/user.png" 319 src="/static/icon/user.png"
308 v-if="files ==''" 320 v-if="files ==''"
309 height="140" 321 height="140"
310 width="180px;" 322 width="180px;"
311 /> 323 />
312 </v-flex> 324 </v-flex>
313 </v-layout> 325 </v-layout>
314 <v-flex xs12> 326 <v-flex xs12>
315 <v-layout> 327 <v-layout>
316 <v-flex xs4 class="pt-4 subheading"> 328 <v-flex xs4 class="pt-4 subheading">
317 <label class="right">Name:</label> 329 <label class="right">Name:</label>
318 </v-flex> 330 </v-flex>
319 <v-flex xs4 class="ml-3"> 331 <v-flex xs4 class="ml-3">
320 <v-text-field 332 <v-text-field
321 v-model="addEBooks.name" 333 v-model="addEBooks.name"
322 placeholder="fill your Title" 334 placeholder="fill your Title"
323 name="name" 335 name="name"
324 type="text" 336 type="text"
325 :rules="titleRules" 337 :rules="titleRules"
326 required 338 required
327 ></v-text-field> 339 ></v-text-field>
328 </v-flex> 340 </v-flex>
329 </v-layout> 341 </v-layout>
330 </v-flex> 342 </v-flex>
331 <v-flex xs12> 343 <v-flex xs12>
332 <v-layout> 344 <v-layout>
333 <v-flex xs4 class="pt-4 subheading"> 345 <v-flex xs4 class="pt-4 subheading">
334 <label class="right">Author:</label> 346 <label class="right">Author:</label>
335 </v-flex> 347 </v-flex>
336 <v-flex xs4 class="ml-3"> 348 <v-flex xs4 class="ml-3">
337 <v-text-field 349 <v-text-field
338 v-model="addEBooks.author" 350 v-model="addEBooks.author"
339 placeholder="fill your Author Name" 351 placeholder="fill your Author Name"
340 name="name" 352 name="name"
341 type="text" 353 type="text"
342 :rules="titleRules" 354 :rules="titleRules"
343 required 355 required
344 ></v-text-field> 356 ></v-text-field>
345 </v-flex> 357 </v-flex>
346 </v-layout> 358 </v-layout>
347 </v-flex> 359 </v-flex>
348 <v-flex xs12> 360 <v-flex xs12>
349 <v-layout> 361 <v-layout>
350 <v-flex xs4 class="pt-4 subheading"> 362 <v-flex xs4 class="pt-4 subheading">
351 <label class="right">Class:</label> 363 <label class="right">Class:</label>
352 </v-flex> 364 </v-flex>
353 <v-flex xs4 class="ml-3"> 365 <v-flex xs4 class="ml-3">
354 <v-select 366 <v-select
355 v-model="addEBooks.classId" 367 v-model="addEBooks.classId"
356 :items="addClass" 368 :items="addClass"
357 label="Select Class" 369 label="Select Class"
358 item-text="classNum" 370 item-text="classNum"
359 item-value="_id" 371 item-value="_id"
360 :rules="titleRules" 372 :rules="titleRules"
361 required 373 required
362 ></v-select> 374 ></v-select>
363 </v-flex> 375 </v-flex>
364 </v-layout> 376 </v-layout>
365 </v-flex> 377 </v-flex>
366 <v-flex xs12> 378 <v-flex xs12>
367 <v-layout> 379 <v-layout>
368 <v-flex xs4 class="pt-4 subheading"> 380 <v-flex xs4 class="pt-4 subheading">
369 <label class="right">Upload Image:</label> 381 <label class="right">Upload Image:</label>
370 </v-flex> 382 </v-flex>
371 <v-flex xs4 class="ml-3"> 383 <v-flex xs4 class="ml-3">
372 <v-text-field 384 <v-text-field
373 label="Select Image" 385 label="Select Image"
374 @click="pickImage" 386 @click="pickImage"
375 v-model="imageName" 387 v-model="imageName"
376 append-icon="attach_file" 388 append-icon="attach_file"
377 multiple 389 multiple
378 ></v-text-field> 390 ></v-text-field>
379 </v-flex> 391 </v-flex>
380 </v-layout> 392 </v-layout>
381 </v-flex> 393 </v-flex>
382 <v-flex xs12> 394 <v-flex xs12>
383 <v-layout> 395 <v-layout>
384 <v-flex xs4 class="pt-4 subheading"> 396 <v-flex xs4 class="pt-4 subheading">
385 <label class="right">Upload File:</label> 397 <label class="right">Upload File:</label>
386 </v-flex> 398 </v-flex>
387 <v-flex xs4 class="ml-3"> 399 <v-flex xs4 class="ml-3">
388 <input type="file" style="display: none" ref="file" @change="onFilePicked" /> 400 <input type="file" style="display: none" ref="file" @change="onFilePicked" />
389 <v-text-field 401 <v-text-field
390 label="Select File" 402 label="Select File"
391 @click="pickFile" 403 @click="pickFile"
392 v-model="fileName" 404 v-model="fileName"
393 append-icon="attach_file" 405 append-icon="attach_file"
394 multiple 406 multiple
395 ></v-text-field> 407 ></v-text-field>
396 </v-flex> 408 </v-flex>
397 </v-layout> 409 </v-layout>
398 </v-flex> 410 </v-flex>
399 <v-flex xs12> 411 <v-flex xs12>
400 <v-layout> 412 <v-layout>
401 <v-flex xs4 class="pt-3 subheading"> 413 <v-flex xs4 class="pt-3 subheading">
402 <label class="right">Private:</label> 414 <label class="right">Private:</label>
403 </v-flex> 415 </v-flex>
404 <v-flex xs4 class="ml-3"> 416 <v-flex xs4 class="ml-3">
405 <v-checkbox v-model="addEBooks.private"></v-checkbox> 417 <v-checkbox v-model="addEBooks.private"></v-checkbox>
406 </v-flex> 418 </v-flex>
407 </v-layout> 419 </v-layout>
408 </v-flex> 420 </v-flex>
409 <v-layout> 421 <v-layout>
410 <v-flex xs12 sm7 offset-sm2> 422 <v-flex xs12 sm7 offset-sm2>
411 <v-card-actions> 423 <v-card-actions>
412 <v-btn @click="clear" round dark>clear</v-btn> 424 <v-btn @click="clear" round dark>clear</v-btn>
413 <v-spacer></v-spacer> 425 <v-spacer></v-spacer>
414 <v-btn @click="submit" round dark :loading="loading">Add</v-btn> 426 <v-btn @click="submit" round dark :loading="loading">Add</v-btn>
415 </v-card-actions> 427 </v-card-actions>
416 </v-flex> 428 </v-flex>
417 </v-layout> 429 </v-layout>
418 </v-container> 430 </v-container>
419 </v-form> 431 </v-form>
420 </v-card> 432 </v-card>
421 </v-flex> 433 </v-flex>
422 </v-container> 434 </v-container>
423 </v-tab-item> 435 </v-tab-item>
424 </v-tabs> 436 </v-tabs>
425 <div class="loader" v-if="showLoader"> 437 <div class="loader" v-if="showLoader">
426 <v-progress-circular indeterminate color="white"></v-progress-circular> 438 <v-progress-circular indeterminate color="white"></v-progress-circular>
427 </div> 439 </div>
428 </v-app> 440 </v-app>
429 </template> 441 </template>
430 442
431 <script> 443 <script>
432 import http from "@/Services/http.js"; 444 import http from "@/Services/http.js";
433 import Util from "@/util"; 445 import Util from "@/util";
434 446
435 export default { 447 export default {
436 data: () => ({ 448 data: () => ({
437 snackbar: false, 449 snackbar: false,
438 y: "top", 450 y: "top",
439 x: "right", 451 x: "right",
440 mode: "", 452 mode: "",
441 timeout: 3000, 453 timeout: 3000,
442 text: "", 454 text: "",
443 loading: false, 455 loading: false,
444 loadingUpadte: false, 456 loadingUpadte: false,
445 date: null, 457 date: null,
446 search: "", 458 search: "",
447 showLoader: false, 459 showLoader: false,
448 dialog: false, 460 dialog: false,
449 dialog1: false, 461 dialog1: false,
450 valid: true, 462 valid: true,
451 isActive: true, 463 isActive: true,
452 newActive: false, 464 newActive: false,
453 addClass: [], 465 addClass: [],
454 addSection: [], 466 addSection: [],
455 AddUsercredentials: {}, 467 AddUsercredentials: {},
456 pagination: { 468 pagination: {
457 rowsPerPage: 15 469 rowsPerPage: 15
458 }, 470 },
459 imageName: "", 471 imageName: "",
460 fileName: "", 472 fileName: "",
461 imageUrl: "", 473 imageUrl: "",
462 imageFile: "", 474 imageFile: "",
463 image: [], 475 image: [],
464 upload: "", 476 upload: "",
465 files: "", 477 files: "",
466 anyFile: "", 478 anyFile: "",
467 titleRules: [v => !!v || " Tilte is required"], 479 titleRules: [v => !!v || " Tilte is required"],
468 descriptionRules: [v => !!v || " Description is required"], 480 descriptionRules: [v => !!v || " Description is required"],
469 headers: [ 481 headers: [
470 { 482 {
471 align: "justify-center", 483 align: "justify-center",
472 text: "No", 484 text: "No",
473 sortable: false, 485 sortable: false,
474 value: "No" 486 value: "No"
475 }, 487 },
476 { text: "Photo", vaue: "fileUrl", sortable: false, align: "center" }, 488 { text: "Photo", vaue: "fileUrl", sortable: false, align: "center" },
477 { text: "Name", vaue: "name", sortable: false, align: "center" }, 489 { text: "Name", vaue: "name", sortable: false, align: "center" },
478 { text: "Author", value: "author", sortable: false, align: "center" }, 490 { text: "Author", value: "author", sortable: false, align: "center" },
479 { 491 {
480 text: "Class", 492 text: "Class",
481 value: "classId", 493 value: "classId",
482 sortable: false, 494 sortable: false,
483 align: "center" 495 align: "center"
484 }, 496 },
485 { text: "Action", value: "", sortable: false, align: "center" } 497 { text: "Action", value: "", sortable: false, align: "center" }
486 ], 498 ],
487 eBookData: [], 499 eBookData: [],
488 editedIndex: -1, 500 editedIndex: -1,
489 addEBooks: { 501 addEBooks: {
490 private: false 502 private: false
491 }, 503 },
492 editedItem: {}, 504 editedItem: {},
493 token: "" 505 token: ""
494 }), 506 }),
495 methods: { 507 methods: {
496 pickImage() { 508 pickImage() {
497 this.$refs.image.click(); 509 this.$refs.image.click();
498 }, 510 },
499 pickFile() { 511 pickFile() {
500 this.$refs.file.click(); 512 this.$refs.file.click();
501 }, 513 },
502 onImagePicked(e) { 514 onImagePicked(e) {
503 // console.log(e) 515 // console.log(e)
504 const files = e.target.files; 516 const files = e.target.files;
505 /** fetch Image Name **/ 517 /** fetch Image Name **/
506 if (files[0] !== undefined) { 518 if (files[0] !== undefined) {
507 this.imageName = files[0].name; 519 this.imageName = files[0].name;
508 if (this.imageName.lastIndexOf(".") <= 0) { 520 if (this.imageName.lastIndexOf(".") <= 0) {
509 return; 521 return;
510 } 522 }
511 /** Select many image and showing many image add to news card **/ 523 /** Select many image and showing many image add to news card **/
512 const fr = new FileReader(); 524 const fr = new FileReader();
513 fr.readAsDataURL(files[0]); 525 fr.readAsDataURL(files[0]);
514 fr.addEventListener("load", () => { 526 fr.addEventListener("load", () => {
515 this.files = fr.result; 527 this.files = fr.result;
516 }); 528 });
517 } else { 529 } else {
518 this.imageName = ""; 530 this.imageName = "";
519 this.imageFile = ""; 531 this.imageFile = "";
520 this.files = ""; 532 this.files = "";
521 this.imageUrl = ""; 533 this.imageUrl = "";
522 } 534 }
523 }, 535 },
524 getEBooksList() { 536 getEBooksList() {
525 this.showLoader = true; 537 this.showLoader = true;
526 http() 538 http()
527 .get("/getEBooksList", { 539 .get("/getEBooksList", {
528 headers: { Authorization: "Bearer " + this.token } 540 headers: { Authorization: "Bearer " + this.token }
529 }) 541 })
530 .then(response => { 542 .then(response => {
531 this.eBookData = response.data.data; 543 this.eBookData = response.data.data;
532 this.showLoader = false; 544 this.showLoader = false;
533 }) 545 })
534 .catch(err => { 546 .catch(err => {
535 // console.log("err====>", err); 547 // console.log("err====>", err);
536 this.showLoader = false; 548 this.showLoader = false;
537 if (error.response.status === 401) { 549 if (error.response.status === 401) {
538 this.$router.replace({ path: "/" }); 550 this.$router.replace({ path: "/" });
539 this.$store.dispatch("setToken", null); 551 this.$store.dispatch("setToken", null);
540 this.$store.dispatch("Id", null); 552 this.$store.dispatch("Id", null);
541 } 553 }
542 }); 554 });
543 }, 555 },
544 onFilePicked(e) { 556 onFilePicked(e) {
545 // console.log(e) 557 // console.log(e)
546 const files = e.target.files; 558 const files = e.target.files;
547 /** fetch Image Name **/ 559 /** fetch Image Name **/
548 if (files[0] !== undefined) { 560 if (files[0] !== undefined) {
549 this.fileName = files[0].name; 561 this.fileName = files[0].name;
550 if (this.fileName.lastIndexOf(".") <= 0) { 562 if (this.fileName.lastIndexOf(".") <= 0) {
551 return; 563 return;
552 } 564 }
553 const fr = new FileReader(); 565 const fr = new FileReader();
554 fr.readAsDataURL(files[0]); 566 fr.readAsDataURL(files[0]);
555 fr.addEventListener("load", () => { 567 fr.addEventListener("load", () => {
556 this.anyFile = fr.result; 568 this.anyFile = fr.result;
557 // console.log(" this.anyFile Url", this.anyFile ) 569 // console.log(" this.anyFile Url", this.anyFile )
558 }); 570 });
559 } else { 571 } else {
560 this.anyFile = ""; 572 this.anyFile = "";
561 this.fileName = ""; 573 this.fileName = "";
562 } 574 }
563 }, 575 },
564 editItem(item) { 576 editItem(item) {
565 this.files = []; 577 this.files = [];
566 this.editedIndex = this.eBookData.indexOf(item); 578 this.editedIndex = this.eBookData.indexOf(item);
567 this.editedItem = Object.assign({}, item); 579 this.editedItem = Object.assign({}, item);
568 this.editedItem.className = item.classId.classNum; 580 this.editedItem.className = item.classId.classNum;
569 this.dialog = true; 581 this.dialog = true;
570 }, 582 },
571 profile(item) { 583 profile(item) {
572 this.editedIndex = this.eBookData.indexOf(item); 584 this.editedIndex = this.eBookData.indexOf(item);
573 this.editedItem = Object.assign({}, item); 585 this.editedItem = Object.assign({}, item);
574 this.dialog1 = true; 586 this.dialog1 = true;
575 }, 587 },
576 deleteItem(item) { 588 deleteItem(item) {
577 let deleteEBooks = { 589 let deleteEBooks = {
578 ebookId: item._id 590 ebookId: item._id
579 }; 591 };
580 http() 592 http()
581 .delete( 593 .delete(
582 "/deleteEBook", 594 "/deleteEBook",
583 confirm("Are you sure you want to delete this?") && { 595 confirm("Are you sure you want to delete this?") && {
584 params: deleteEBooks 596 params: deleteEBooks
585 } 597 }
586 ) 598 )
587 .then(response => { 599 .then(response => {
588 this.snackbar = true; 600 this.snackbar = true;
589 this.text = "Successfully delete Existing News"; 601 this.text = "Successfully delete Existing News";
590 this.getEBooksList(); 602 this.getEBooksList();
591 }) 603 })
592 .catch(error => { 604 .catch(error => {
593 this.snackbar = true; 605 this.snackbar = true;
594 this.text = error.response.data.message; 606 this.text = error.response.data.message;
595 }); 607 });
596 }, 608 },
597 activeTab(type) { 609 activeTab(type) {
598 switch (type) { 610 switch (type) {
599 case "existing": 611 case "existing":
600 this.newActive = false; 612 this.newActive = false;
601 this.isActive = true; 613 this.isActive = true;
602 break; 614 break;
603 615
604 default: 616 default:
605 this.newActive = true; 617 this.newActive = true;
606 this.isActive = false; 618 this.isActive = false;
607 break; 619 break;
608 } 620 }
609 }, 621 },
610 close() { 622 close() {
611 this.dialog = false; 623 this.dialog = false;
612 setTimeout(() => { 624 setTimeout(() => {
613 this.editedItem = Object.assign({}, this.defaultItem); 625 this.editedItem = Object.assign({}, this.defaultItem);
614 this.editedIndex = -1; 626 this.editedIndex = -1;
615 }, 300); 627 }, 300);
616 }, 628 },
617 close1() { 629 close1() {
618 this.dialog1 = false; 630 this.dialog1 = false;
619 }, 631 },
620 submit() { 632 submit() {
621 this.loading = true; 633 this.loading = true;
622 if (this.$refs.form.validate()) { 634 if (this.$refs.form.validate()) {
623 if (this.files) { 635 if (this.files) {
624 const [baseUrl, imageUrl] = this.files.split(/,/); 636 const [baseUrl, imageUrl] = this.files.split(/,/);
625 this.addEBooks.uploadCover = imageUrl; 637 this.addEBooks.uploadCover = imageUrl;
626 // console.log("anyFile.split(/,/)", this.addEBooks.uploadCover); 638 // console.log("anyFile.split(/,/)", this.addEBooks.uploadCover);
627 } 639 }
628 if (this.anyFile) { 640 if (this.anyFile) {
629 const [baseUrl, fileUrl] = this.anyFile.split(/,/); 641 const [baseUrl, fileUrl] = this.anyFile.split(/,/);
630 this.addEBooks.uploadFile = fileUrl; 642 this.addEBooks.uploadFile = fileUrl;
631 // console.log("anyFile.split(/,/)", this.addEBooks.uploadFile); 643 // console.log("anyFile.split(/,/)", this.addEBooks.uploadFile);
632 } 644 }
633 http() 645 http()
634 .post("/createEBook", this.addEBooks) 646 .post("/createEBook", this.addEBooks)
635 .then(response => { 647 .then(response => {
636 this.snackbar = true; 648 this.snackbar = true;
637 this.text = "New E-Book added successfully"; 649 this.text = "New E-Book added successfully";
638 this.addEBooks.uploadCover = ""; 650 this.addEBooks.uploadCover = "";
639 this.addEBooks.uploadFile = ""; 651 this.addEBooks.uploadFile = "";
640 this.files = ""; 652 this.files = "";
641 this.getEBooksList(); 653 this.getEBooksList();
642 this.loading = false; 654 this.loading = false;
643 this.clear(); 655 this.clear();
644 }) 656 })
645 .catch(error => { 657 .catch(error => {
646 this.snackbar = true; 658 this.snackbar = true;
647 this.text = error.response.data.message; 659 this.text = error.response.data.message;
648 }); 660 });
649 } 661 }
650 }, 662 },
651 clear() { 663 clear() {
652 this.$refs.form.reset(); 664 this.$refs.form.reset();
653 this.addEBooks.uploadCover = "" 665 this.addEBooks.uploadCover = "";
654 this.files = "" 666 this.files = "";
655 }, 667 },
656 save() { 668 save() {
657 this.loadingUpadte = true; 669 this.loadingUpadte = true;
658 if (this.files.length > 0) { 670 if (this.files.length > 0) {
659 const [baseUrl, imageUrl] = this.files.split(/,/); 671 const [baseUrl, imageUrl] = this.files.split(/,/);
660 this.editedItem.uploadCover = imageUrl; 672 this.editedItem.uploadCover = imageUrl;
661 // console.log("anyFile.split(/,/)", this.addEBooks.uploadCover); 673 // console.log("anyFile.split(/,/)", this.addEBooks.uploadCover);
662 } 674 }
663 if (this.anyFile) { 675 if (this.anyFile) {
664 const [baseUrl, fileUrl] = this.anyFile.split(/,/); 676 const [baseUrl, fileUrl] = this.anyFile.split(/,/);
665 this.editedItem.uploadFile = fileUrl; 677 this.editedItem.uploadFile = fileUrl;
666 // console.log("anyFile.split(/,/)", this.addEBooks.uploadFile); 678 // console.log("anyFile.split(/,/)", this.addEBooks.uploadFile);
667 } 679 }
668 this.editedItem.ebookId = this.editedItem._id; 680 this.editedItem.ebookId = this.editedItem._id;
669 http() 681 http()
670 .put("/updateEBook", this.editedItem) 682 .put("/updateEBook", this.editedItem)
671 .then(response => { 683 .then(response => {
672 this.loadingUpadte = false; 684 this.loadingUpadte = false;
673 this.snackbar = true; 685 this.snackbar = true;
674 this.text = "Successfully Edit Existing E-Book"; 686 this.text = "Successfully Edit Existing E-Book";
675 this.getEBooksList(); 687 this.getEBooksList();
676 this.editedItem.uploadFile = ""; 688 this.editedItem.uploadFile = "";
677 this.editedItem.uploadCover = ""; 689 this.editedItem.uploadCover = "";
678 this.anyFile = ""; 690 this.anyFile = "";
679 this.files = ""; 691 this.files = "";
680 this.close(); 692 this.close();
681 }) 693 })
682 .catch(error => { 694 .catch(error => {
683 this.loadingUpadte = false; 695 this.loadingUpadte = false;
684 this.snackbar = true; 696 this.snackbar = true;
685 this.text = error.response.data.message; 697 this.text = error.response.data.message;
686 // console.log(error); 698 // console.log(error);
687 }); 699 });
688 }, 700 },
689 getAllClass() { 701 getAllClass() {
690 http() 702 http()
691 .get("/getClassesList", { 703 .get("/getClassesList", {
692 headers: { Authorization: "Bearer " + this.token } 704 headers: { Authorization: "Bearer " + this.token }
693 }) 705 })
694 .then(response => { 706 .then(response => {
695 this.addClass = response.data.data; 707 this.addClass = response.data.data;
696 }) 708 })
697 .catch(err => { 709 .catch(err => {
698 // console.log("err====>", err); 710 // console.log("err====>", err);
699 // this.$router.replace({ path: "/" }); 711 // this.$router.replace({ path: "/" });
700 }); 712 });
701 } 713 }
702 }, 714 },
703 mounted() { 715 mounted() {
704 this.token = this.$store.state.token; 716 this.token = this.$store.state.token;
705 this.getEBooksList(); 717 this.getEBooksList();
706 this.getAllClass(); 718 this.getAllClass();
707 // this.getBookData(); 719 // this.getBookData();
708 // this.editItem; 720 // this.editItem;
709 }, 721 },
710 created() { 722 created() {
711 this.$root.$on("app:search", search => { 723 this.$root.$on("app:search", search => {
712 this.search = search; 724 this.search = search;
713 }); 725 });
714 }, 726 },
715 beforeDestroy() { 727 beforeDestroy() {
716 // dont forget to remove the listener 728 // dont forget to remove the listener
717 this.$root.$off("app:search"); 729 this.$root.$off("app:search");
718 } 730 }
719 }; 731 };
720 </script> 732 </script>
721 <style scoped> 733 <style scoped>
722 .active { 734 .active {
723 background-color: gray; 735 background-color: gray;
724 color: white !important; 736 color: white !important;
725 } 737 }
726 .activebtn { 738 .activebtn {
727 color: black !important; 739 color: black !important;
728 } 740 }
729 </style> 741 </style>
src/pages/Library/issue.vue
Diff comments   View file @495e403
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 <img 310 <v-tooltip top>
311 style="cursor:pointer; width:25px; height:18px; " 311 <img
312 class="mr-5" 312 slot="activator"
313 @click="profile(props.item)" 313 style="cursor:pointer; width:25px; height:18px; "
314 src="/static/icon/eye1.png" 314 class="mr5"
315 /> 315 @click="profile(props.item)"
316 <img 316 src="/static/icon/eye1.png"
317 style="cursor:pointer; width:20px; height:18px; " 317 />
318 class="mr-5" 318 <span>View</span>
319 @click="editItem(props.item)" 319 </v-tooltip>
320 src="/static/icon/edit1.png" 320 <v-tooltip top>
321 /> 321 <img
322 <img 322 slot="activator"
323 style="cursor:pointer;width:20px; height:20px; " 323 style="cursor:pointer; width:20px; height:18px; "
324 class="mr-5" 324 class="mr5"
325 @click="returnBook(props.item)" 325 @click="editItem(props.item)"
326 src="/static/icon/return.jpg" 326 src="/static/icon/edit1.png"
327 /> 327 />
328 <span>Edit</span>
329 </v-tooltip>
330 <v-tooltip top>
331 <img
332 slot="activator"
333 style="cursor:pointer; width:20px; height:20px; "
334 class="mr5"
335 @click="deleteItem(props.item)"
336 src="/static/icon/delete1.png"
337 />
338 <span>Delete</span>
339 </v-tooltip>
328 </span> 340 </span>
329 </td> 341 </td>
330 </template> 342 </template>
331 <v-alert 343 <v-alert
332 slot="no-results" 344 slot="no-results"
333 :value="true" 345 :value="true"
334 color="error" 346 color="error"
335 icon="warning" 347 icon="warning"
336 >Your search for "{{ search }}" found no results.</v-alert> 348 >Your search for "{{ search }}" found no results.</v-alert>
337 </v-data-table> 349 </v-data-table>
338 </v-tab-item> 350 </v-tab-item>
339 351
340 <!-- ****** ADD Issue ****** --> 352 <!-- ****** ADD Issue ****** -->
341 353
342 <v-tab-item> 354 <v-tab-item>
343 <v-container> 355 <v-container>
344 <v-snackbar 356 <v-snackbar
345 :timeout="timeout" 357 :timeout="timeout"
346 :top="y === 'top'" 358 :top="y === 'top'"
347 :right="x === 'right'" 359 :right="x === 'right'"
348 :vertical="mode === 'vertical'" 360 :vertical="mode === 'vertical'"
349 v-model="snackbar" 361 v-model="snackbar"
350 :color="color" 362 :color="color"
351 >{{ text }}</v-snackbar> 363 >{{ text }}</v-snackbar>
352 <v-flex xs12 sm12 class="my-4"> 364 <v-flex xs12 sm12 class="my-4">
353 <v-card flat> 365 <v-card flat>
354 <v-form ref="form" v-model="valid" lazy-validation> 366 <v-form ref="form" v-model="valid" lazy-validation>
355 <v-container fluid> 367 <v-container fluid>
356 <v-flex xs12> 368 <v-flex xs12>
357 <v-layout> 369 <v-layout>
358 <v-flex xs4 class="pt-4 subheading"> 370 <v-flex xs4 class="pt-4 subheading">
359 <label class="right">Library ID:</label> 371 <label class="right">Library ID:</label>
360 </v-flex> 372 </v-flex>
361 <v-flex xs4 class="ml-3"> 373 <v-flex xs4 class="ml-3">
362 <v-text-field 374 <v-text-field
363 v-model="libraryID" 375 v-model="libraryID"
364 placeholder="fill your Library ID" 376 placeholder="fill your Library ID"
365 :rules="libraryIDRules" 377 :rules="libraryIDRules"
366 required 378 required
367 ></v-text-field> 379 ></v-text-field>
368 </v-flex> 380 </v-flex>
369 </v-layout> 381 </v-layout>
370 </v-flex> 382 </v-flex>
371 <v-flex xs12> 383 <v-flex xs12>
372 <v-layout> 384 <v-layout>
373 <v-flex xs4 class="pt-4 subheading"> 385 <v-flex xs4 class="pt-4 subheading">
374 <label class="right">Book:</label> 386 <label class="right">Book:</label>
375 </v-flex> 387 </v-flex>
376 <v-flex xs4 class="ml-3"> 388 <v-flex xs4 class="ml-3">
377 <v-select 389 <v-select
378 label="Select Book Name" 390 label="Select Book Name"
379 :rules="bookRules" 391 :rules="bookRules"
380 :items="books" 392 :items="books"
381 item-text="name" 393 item-text="name"
382 item-value="_id" 394 item-value="_id"
383 v-model="bookId" 395 v-model="bookId"
384 @change="getParticularBookData(bookId)" 396 @change="getParticularBookData(bookId)"
385 required 397 required
386 ></v-select> 398 ></v-select>
387 </v-flex> 399 </v-flex>
388 </v-layout> 400 </v-layout>
389 </v-flex> 401 </v-flex>
390 <v-flex xs12> 402 <v-flex xs12>
391 <v-layout> 403 <v-layout>
392 <v-flex xs4 class="pt-4 subheading"> 404 <v-flex xs4 class="pt-4 subheading">
393 <label class="right">Author:</label> 405 <label class="right">Author:</label>
394 </v-flex> 406 </v-flex>
395 <v-flex xs4 class="ml-3"> 407 <v-flex xs4 class="ml-3">
396 <v-text-field 408 <v-text-field
397 placeholder="fill your Author" 409 placeholder="fill your Author"
398 :rules="authorRules" 410 :rules="authorRules"
399 v-model="addIssue.author" 411 v-model="addIssue.author"
400 ></v-text-field> 412 ></v-text-field>
401 </v-flex> 413 </v-flex>
402 </v-layout> 414 </v-layout>
403 </v-flex> 415 </v-flex>
404 <v-flex xs12> 416 <v-flex xs12>
405 <v-layout> 417 <v-layout>
406 <v-flex xs4 class="pt-4 subheading"> 418 <v-flex xs4 class="pt-4 subheading">
407 <label class="right">Subject Code:</label> 419 <label class="right">Subject Code:</label>
408 </v-flex> 420 </v-flex>
409 <v-flex xs4 class="ml-3"> 421 <v-flex xs4 class="ml-3">
410 <v-text-field 422 <v-text-field
411 placeholder="fill your Subject Code" 423 placeholder="fill your Subject Code"
412 :rules="subjectCodeRules" 424 :rules="subjectCodeRules"
413 v-model="addIssue.subjectCode" 425 v-model="addIssue.subjectCode"
414 ></v-text-field> 426 ></v-text-field>
415 </v-flex> 427 </v-flex>
416 </v-layout> 428 </v-layout>
417 </v-flex> 429 </v-flex>
418 <v-flex xs12> 430 <v-flex xs12>
419 <v-layout> 431 <v-layout>
420 <v-flex xs4 class="pt-4 subheading"> 432 <v-flex xs4 class="pt-4 subheading">
421 <label class="right">Serial No:</label> 433 <label class="right">Serial No:</label>
422 </v-flex> 434 </v-flex>
423 <v-flex xs4 class="ml-3"> 435 <v-flex xs4 class="ml-3">
424 <v-text-field 436 <v-text-field
425 placeholder="fill your Serial No" 437 placeholder="fill your Serial No"
426 :rules="authorRules" 438 :rules="authorRules"
427 v-model="serialNo" 439 v-model="serialNo"
428 ></v-text-field> 440 ></v-text-field>
429 </v-flex> 441 </v-flex>
430 </v-layout> 442 </v-layout>
431 </v-flex> 443 </v-flex>
432 <v-flex xs12> 444 <v-flex xs12>
433 <v-layout> 445 <v-layout>
434 <v-flex xs4 class="pt-4 subheading"> 446 <v-flex xs4 class="pt-4 subheading">
435 <label class="right">Due Date:</label> 447 <label class="right">Due Date:</label>
436 </v-flex> 448 </v-flex>
437 <v-flex xs4 class="ml-3"> 449 <v-flex xs4 class="ml-3">
438 <v-menu 450 <v-menu
439 ref="menu2" 451 ref="menu2"
440 :close-on-content-click="false" 452 :close-on-content-click="false"
441 v-model="menu2" 453 v-model="menu2"
442 :nudge-right="40" 454 :nudge-right="40"
443 :return-value.sync="date" 455 :return-value.sync="date"
444 lazy 456 lazy
445 transition="scale-transition" 457 transition="scale-transition"
446 offset-y 458 offset-y
447 full-width 459 full-width
448 min-width="290px" 460 min-width="290px"
449 > 461 >
450 <v-text-field 462 <v-text-field
451 slot="activator" 463 slot="activator"
452 v-model="date" 464 v-model="date"
453 label="Select Due Date" 465 label="Select Due Date"
454 append-icon="event" 466 append-icon="event"
455 readonly 467 readonly
456 ></v-text-field> 468 ></v-text-field>
457 <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>
458 </v-menu> 470 </v-menu>
459 </v-flex> 471 </v-flex>
460 </v-layout> 472 </v-layout>
461 </v-flex> 473 </v-flex>
462 <v-flex xs12> 474 <v-flex xs12>
463 <v-layout> 475 <v-layout>
464 <v-flex xs4 class="pt-4 subheading"> 476 <v-flex xs4 class="pt-4 subheading">
465 <label class="right">Note:</label> 477 <label class="right">Note:</label>
466 </v-flex> 478 </v-flex>
467 <v-flex xs4 class="ml-3"> 479 <v-flex xs4 class="ml-3">
468 <v-text-field 480 <v-text-field
469 placeholder="fill your Note" 481 placeholder="fill your Note"
470 :rules="noteRules" 482 :rules="noteRules"
471 v-model="note" 483 v-model="note"
472 ></v-text-field> 484 ></v-text-field>
473 </v-flex> 485 </v-flex>
474 </v-layout> 486 </v-layout>
475 </v-flex> 487 </v-flex>
476 <v-layout> 488 <v-layout>
477 <v-flex xs12 sm6 offset-sm3> 489 <v-flex xs12 sm6 offset-sm3>
478 <v-card-actions> 490 <v-card-actions>
479 <v-btn @click="clear" round dark>clear</v-btn> 491 <v-btn @click="clear" round dark>clear</v-btn>
480 <v-spacer></v-spacer> 492 <v-spacer></v-spacer>
481 <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>
482 </v-card-actions> 494 </v-card-actions>
483 </v-flex> 495 </v-flex>
484 </v-layout> 496 </v-layout>
485 </v-container> 497 </v-container>
486 </v-form> 498 </v-form>
487 </v-card> 499 </v-card>
488 </v-flex> 500 </v-flex>
489 </v-container> 501 </v-container>
490 </v-tab-item> 502 </v-tab-item>
491 </v-tabs> 503 </v-tabs>
492 <div class="loader" v-if="showLoader"> 504 <div class="loader" v-if="showLoader">
493 <v-progress-circular indeterminate color="white"></v-progress-circular> 505 <v-progress-circular indeterminate color="white"></v-progress-circular>
494 </div> 506 </div>
495 </v-app> 507 </v-app>
496 </template> 508 </template>
497 509
498 <script> 510 <script>
499 import http from "@/Services/http.js"; 511 import http from "@/Services/http.js";
500 import moment from "moment"; 512 import moment from "moment";
501 513
502 export default { 514 export default {
503 data: () => ({ 515 data: () => ({
504 snackbar: false, 516 snackbar: false,
505 date: null, 517 date: null,
506 menu1: false, 518 menu1: false,
507 menu2: false, 519 menu2: false,
508 color: "", 520 color: "",
509 dueDate: null, 521 dueDate: null,
510 y: "top", 522 y: "top",
511 x: "right", 523 x: "right",
512 mode: "", 524 mode: "",
513 timeout: 10000, 525 timeout: 10000,
514 text: "", 526 text: "",
515 libraryId: "", 527 libraryId: "",
516 loading: false, 528 loading: false,
517 loadingSearch: false, 529 loadingSearch: false,
518 date: null, 530 date: null,
519 search: "", 531 search: "",
520 showLoader: false, 532 showLoader: false,
521 dialog: false, 533 dialog: false,
522 dialog1: false, 534 dialog1: false,
523 valid: true, 535 valid: true,
524 isActive: true, 536 isActive: true,
525 newActive: false, 537 newActive: false,
526 addclass: [], 538 addclass: [],
527 addSection: [], 539 addSection: [],
528 AddUsercredentials: {},
529 pagination: { 540 pagination: {
530 rowsPerPage: 15 541 rowsPerPage: 15
531 }, 542 },
532 libraryIDRules: [v => !!v || " Library ID is required"], 543 libraryIDRules: [v => !!v || " Library ID is required"],
533 bookRules: [v => !!v || " book Name is required"], 544 bookRules: [v => !!v || " book Name is required"],
534 authorRules: [v => !!v || "Author Name is required"], 545 authorRules: [v => !!v || "Author Name is required"],
535 subjectCodeRules: [v => !!v || "Subject Code is required"], 546 subjectCodeRules: [v => !!v || "Subject Code is required"],
536 authorRules: [v => !!v || "Author is required"], 547 authorRules: [v => !!v || "Author is required"],
537 noteRules: [v => !!v || "Note is required"], 548 noteRules: [v => !!v || "Note is required"],
538 headers: [ 549 headers: [
539 { 550 {
540 align: "justify-center", 551 align: "justify-center",
541 text: "No", 552 text: "No",
542 sortable: false, 553 sortable: false,
543 value: "No" 554 value: "No"
544 }, 555 },
545 { text: "Book", vaue: "name", sortable: false, align: "center" }, 556 { text: "Book", vaue: "name", sortable: false, align: "center" },
546 { 557 {
547 text: "Serial Number", 558 text: "Serial Number",
548 value: "serialNumber", 559 value: "serialNumber",
549 sortable: false, 560 sortable: false,
550 align: "center" 561 align: "center"
551 }, 562 },
552 { 563 {
553 text: "Issue Date", 564 text: "Issue Date",
554 value: "created", 565 value: "created",
555 sortable: false, 566 sortable: false,
556 align: "center" 567 align: "center"
557 }, 568 },
558 { 569 {
559 text: "Due Date", 570 text: "Due Date",
560 value: "dueDate", 571 value: "dueDate",
561 sortable: false, 572 sortable: false,
562 align: "center" 573 align: "center"
563 }, 574 },
564 { 575 {
565 text: "Status", 576 text: "Status",
566 value: "status", 577 value: "status",
567 sortable: false, 578 sortable: false,
568 align: "center" 579 align: "center"
569 }, 580 },
570 { text: "Action", value: "", sortable: false, align: "center" } 581 { text: "Action", value: "", sortable: false, align: "center" }
571 ], 582 ],
572 desserts: [], 583 desserts: [],
573 addIssue: {}, 584 addIssue: {},
574 bookId: "", 585 bookId: "",
575 libraryID: "", 586 libraryID: "",
576 serialNo: "", 587 serialNo: "",
577 note: "", 588 note: "",
578 editedItem: {}, 589 editedItem: {},
579 books: [], 590 books: [],
580 token: "", 591 token: "",
581 disable: false 592 disable: false
582 }), 593 }),
583 methods: { 594 methods: {
584 dates: function(date) { 595 dates: function(date) {
585 return moment(date).format("MMMM DD, YYYY"); 596 return moment(date).format("MMMM DD, YYYY");
586 }, 597 },
587 pickFile() { 598 pickFile() {
588 this.$refs.image.click(); 599 this.$refs.image.click();
589 }, 600 },
590 getIssueList() { 601 getIssueList() {
591 this.showLoader = true; 602 this.showLoader = true;
592 this.loadingSearch = true; 603 this.loadingSearch = true;
593 http() 604 http()
594 .get( 605 .get(
595 "/getBooksIssueList", 606 "/getBooksIssueList",
596 { 607 {
597 params: { libraryId: this.libraryId } 608 params: { libraryId: this.libraryId }
598 }, 609 },
599 { 610 {
600 headers: { Authorization: "Bearer " + this.token } 611 headers: { Authorization: "Bearer " + this.token }
601 } 612 }
602 ) 613 )
603 .then(response => { 614 .then(response => {
604 this.desserts = response.data.data; 615 this.desserts = response.data.data;
605 this.showLoader = false; 616 this.showLoader = false;
606 this.loadingSearch = false; 617 this.loadingSearch = false;
607 }) 618 })
608 .catch(error => { 619 .catch(error => {
609 // console.log("err====>", err); 620 // console.log("err====>", err);
610 this.showLoader = false; 621 this.showLoader = false;
611 this.loadingSearch = false; 622 this.loadingSearch = false;
612 this.snackbar = true; 623 this.snackbar = true;
613 this.text = error.response.data.message; 624 this.text = error.response.data.message;
614 if (error.response.status === 401) { 625 if (error.response.status === 401) {
615 this.$router.replace({ path: "/" }); 626 this.$router.replace({ path: "/" });
616 this.$store.dispatch("setToken", null); 627 this.$store.dispatch("setToken", null);
617 this.$store.dispatch("Id", null); 628 this.$store.dispatch("Id", null);
618 } 629 }
619 }); 630 });
620 }, 631 },
621 editItem(item) { 632 editItem(item) {
622 console.log("item", item); 633 console.log("item", item);
623 this.editedIndex = this.desserts.indexOf(item); 634 this.editedIndex = this.desserts.indexOf(item);
624 this.editedItem = Object.assign({}, item); 635 this.editedItem = Object.assign({}, item);
625 this.editedItem.name = item.bookId.name; 636 this.editedItem.name = item.bookId.name;
626 this.editedItem.status = item.bookId.status; 637 this.editedItem.status = item.bookId.status;
627 this.editedItem.dueDate = 638 this.editedItem.dueDate =
628 this.editedItem.dueDate != undefined 639 this.editedItem.dueDate != undefined
629 ? (this.editedItem.dueDate = this.editedItem.dueDate.substring(0, 10)) 640 ? (this.editedItem.dueDate = this.editedItem.dueDate.substring(0, 10))
630 : (this.editedItem.dueDate = ""); 641 : (this.editedItem.dueDate = "");
631 this.dialog = true; 642 this.dialog = true;
632 }, 643 },
633 profile(item) { 644 profile(item) {
634 this.editedIndex = this.desserts.indexOf(item); 645 this.editedIndex = this.desserts.indexOf(item);
635 this.editedItem = Object.assign({}, item); 646 this.editedItem = Object.assign({}, item);
636 this.editedItem.name = item.bookId.name; 647 this.editedItem.name = item.bookId.name;
637 this.editedItem.status = item.bookId.status; 648 this.editedItem.status = item.bookId.status;
638 649
639 this.dialog1 = true; 650 this.dialog1 = true;
640 }, 651 },
641 returnBook(item) { 652 returnBook(item) {
642 let returnBook = { 653 let returnBook = {
643 bookIssueId: item._id 654 bookIssueId: item._id
644 }; 655 };
645 http() 656 http()
646 .put( 657 .put(
647 "/returnBook", 658 "/returnBook",
648 confirm("Are you sure you want to return this?") && returnBook 659 confirm("Are you sure you want to return this?") && returnBook
649 ) 660 )
650 .then(response => { 661 .then(response => {
651 this.snackbar = true; 662 this.snackbar = true;
652 this.text = "Successfully return Issue a Book "; 663 this.text = "Successfully return Issue a Book ";
653 this.getIssueList(); 664 this.getIssueList();
654 }) 665 })
655 .catch(error => { 666 .catch(error => {
656 // console.log(error); 667 // console.log(error);
657 }); 668 });
658 }, 669 },
659 activeTab(type) { 670 activeTab(type) {
660 switch (type) { 671 switch (type) {
661 case "existing": 672 case "existing":
662 this.newActive = false; 673 this.newActive = false;
663 this.isActive = true; 674 this.isActive = true;
664 break; 675 break;
665 676
666 default: 677 default:
667 this.newActive = true; 678 this.newActive = true;
668 this.isActive = false; 679 this.isActive = false;
669 break; 680 break;
670 } 681 }
671 }, 682 },
672 close() { 683 close() {
673 this.dialog = false; 684 this.dialog = false;
674 }, 685 },
675 close1() { 686 close1() {
676 this.dialog1 = false; 687 this.dialog1 = false;
677 }, 688 },
678 submit() { 689 submit() {
679 this.loading = true; 690 this.loading = true;
680 if (this.$refs.form.validate()) { 691 if (this.$refs.form.validate()) {
681 let createBook = { 692 let createBook = {
682 bookId: this.bookId, 693 bookId: this.bookId,
683 author: this.addIssue.author, 694 author: this.addIssue.author,
684 subjectCode: this.addIssue.subjectCode, 695 subjectCode: this.addIssue.subjectCode,
685 libraryId: this.libraryID, 696 libraryId: this.libraryID,
686 serialNumber: this.serialNo, 697 serialNumber: this.serialNo,
687 note: this.note, 698 note: this.note,
688 dueDate: this.date 699 dueDate: this.date
689 }; 700 };
690 console.log("====================", createBook); 701 console.log("====================", createBook);
691 http() 702 http()
692 .post("/createBookIssue", createBook) 703 .post("/createBookIssue", createBook)
693 .then(response => { 704 .then(response => {
694 this.snackbar = true; 705 this.snackbar = true;
695 this.text = "New Issue a Book added successfully"; 706 this.text = "New Issue a Book added successfully";
696 this.getIssueList(); 707 this.getIssueList();
697 this.color = "succses"; 708 this.color = "succses";
698 this.loading = false; 709 this.loading = false;
699 this.clear(); 710 this.clear();
700 }) 711 })
701 .catch(error => { 712 .catch(error => {
702 if ((this.snackbar = true)) { 713 if ((this.snackbar = true)) {
703 this.text = error.response.data.message; 714 this.text = error.response.data.message;
704 this.color = "red"; 715 this.color = "red";
705 } 716 }
706 }); 717 });
707 } 718 }
708 }, 719 },
709 clear() { 720 clear() {
710 this.$refs.form.reset(); 721 this.$refs.form.reset();
711 this.disable = false; 722 this.disable = false;
712 }, 723 },
713 save() { 724 save() {
714 this.editedItem.bookIssueId = this.editedItem._id; 725 this.editedItem.bookIssueId = this.editedItem._id;
715 this.editedItem.bookId = this.editedItem.bookId._id 726 this.editedItem.bookId = this.editedItem.bookId._id
716 http() 727 http()
717 .put("/updateBookIssue", this.editedItem) 728 .put("/updateBookIssue", this.editedItem)
718 .then(response => { 729 .then(response => {
719 console.log("updateIssue", response); 730 console.log("updateIssue", response);
720 this.snackbar = true; 731 this.snackbar = true;
721 this.text = "Successfully Edit Issue a Book"; 732 this.text = "Successfully Edit Issue a Book";
722 this.color = "green"; 733 this.color = "green";
723 this.getIssueList(); 734 this.getIssueList();
724 this.close(); 735 this.close();
725 }) 736 })
726 .catch(error => { 737 .catch(error => {
727 // console.log(error); 738 // console.log(error);
728 if ((this.snackbar = true)) { 739 if ((this.snackbar = true)) {
729 this.text = error.response.data.message; 740 this.text = error.response.data.message;
730 this.color = "red"; 741 this.color = "red";
731 } 742 }
732 }); 743 });
733 }, 744 },
734 getBookData() { 745 getBookData() {
735 this.showLoader = true; 746 this.showLoader = true;
736 http() 747 http()
737 .get("/getBooksList", { 748 .get("/getBooksList", {
738 headers: { Authorization: "Bearer " + this.token } 749 headers: { Authorization: "Bearer " + this.token }
739 }) 750 })
740 .then(response => { 751 .then(response => {
741 this.books = response.data.data; 752 this.books = response.data.data;
742 this.showLoader = false; 753 this.showLoader = false;
743 // console.log("getAllfeetypes=====>",response.data.data) 754 // console.log("getAllfeetypes=====>",response.data.data)
744 }) 755 })
745 .catch(error => { 756 .catch(error => {
746 // console.log("err====>", err); 757 // console.log("err====>", err);
747 this.showLoader = false; 758 this.showLoader = false;
748 if (error.response.status === 401) { 759 if (error.response.status === 401) {
749 this.$router.replace({ path: "/" }); 760 this.$router.replace({ path: "/" });
750 this.$store.dispatch("setToken", null); 761 this.$store.dispatch("setToken", null);
751 this.$store.dispatch("Id", null); 762 this.$store.dispatch("Id", null);
752 } 763 }
753 }); 764 });
754 }, 765 },
755 getParticularBookData(books) { 766 getParticularBookData(books) {
756 console.log("books", books); 767 console.log("books", books);
757 for (let i = 0; i < this.books.length; i++) { 768 for (let i = 0; i < this.books.length; i++) {
758 if (books == this.books[i]._id) { 769 if (books == this.books[i]._id) {
759 console.log("books", this.books[i].remaining); 770 console.log("books", this.books[i].remaining);
760 if (this.books[i].remaining <= 0) { 771 if (this.books[i].remaining <= 0) {
761 this.snackbar = true; 772 this.snackbar = true;
762 this.text = "Book is unavailable"; 773 this.text = "Book is unavailable";
763 this.color = "red"; 774 this.color = "red";
764 this.disable = true; 775 this.disable = true;
765 } else if (this.books[i].remaining > 0) { 776 } else if (this.books[i].remaining > 0) {
766 this.disable = false; 777 this.disable = false;
767 } 778 }
768 this.addIssue = { 779 this.addIssue = {
769 author: this.books[i].author, 780 author: this.books[i].author,
770 subjectCode: this.books[i].subjectCode 781 subjectCode: this.books[i].subjectCode
771 }; 782 };
772 } 783 }
773 } 784 }
774 this.addIssue.boojk = books; 785 this.addIssue.boojk = books;
775 } 786 }
776 }, 787 },
777 mounted() { 788 mounted() {
778 this.token = this.$store.state.token; 789 this.token = this.$store.state.token;
779 this.getBookData(); 790 this.getBookData();
780 }, 791 },
781 created() { 792 created() {
782 this.$root.$on("app:search", search => { 793 this.$root.$on("app:search", search => {
783 this.search = search; 794 this.search = search;
784 }); 795 });
785 }, 796 },
786 beforeDestroy() { 797 beforeDestroy() {
787 // dont forget to remove the listener 798 // dont forget to remove the listener
788 this.$root.$off("app:search"); 799 this.$root.$off("app:search");
789 } 800 }
790 }; 801 };
791 </script> 802 </script>
792 <style scoped> 803 <style scoped>
793 .active { 804 .active {
794 background-color: gray; 805 background-color: gray;
795 color: white !important; 806 color: white !important;
796 } 807 }
797 .activebtn { 808 .activebtn {
798 color: black !important; 809 color: black !important;
799 } 810 }
src/pages/Library/member.vue
Diff comments   View file @495e403
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 <img 511 <v-tooltip top>
512 v-if="!props.item.libraryId"
513 style="cursor:pointer; width:25px; height:18px; "
514 @click="addLibraryData(props.item)"
515 src="/static/icon/add.png"
516 />
517 <span v-if="props.item.libraryId">
518 <img 512 <img
513 slot="activator"
514 v-if="!props.item.libraryId"
519 style="cursor:pointer; width:25px; height:18px; " 515 style="cursor:pointer; width:25px; height:18px; "
520 class="mr-5" 516 @click="addLibraryData(props.item)"
521 @click="profile(props.item)" 517 src="/static/icon/add.png"
522 src="/static/icon/eye1.png"
523 />
524 <img
525 style="cursor:pointer; width:20px; height:18px; "
526 class="mr-5"
527 @click="editItem(props.item)"
528 src="/static/icon/edit1.png"
529 />
530 <img
531 style="cursor:pointer;width:20px; height:20px; "
532 class="mr-5"
533 @click="deleteItem(props.item)"
534 src="/static/icon/delete1.png"
535 /> 518 />
519 <span>Add</span>
520 </v-tooltip>
521 <span v-if="props.item.libraryId">
522 <v-tooltip top>
523 <img
524 slot="activator"
525 style="cursor:pointer; width:25px; height:18px; "
526 class="mr5"
527 @click="profile(props.item)"
528 src="/static/icon/eye1.png"
529 />
530 <span>View</span>
531 </v-tooltip>
532 <v-tooltip top>
533 <img
534 slot="activator"
535 style="cursor:pointer; width:20px; height:18px; "
536 class="mr5"
537 @click="editItem(props.item)"
538 src="/static/icon/edit1.png"
539 />
540 <span>Edit</span>
541 </v-tooltip>
542 <v-tooltip top>
543 <img
544 slot="activator"
545 style="cursor:pointer; width:20px; height:20px; "
546 class="mr5"
547 @click="deleteItem(props.item)"
548 src="/static/icon/delete1.png"
549 />
550 <span>Delete</span>
551 </v-tooltip>
536 </span> 552 </span>
537 </td> 553 </td>
538 </template> 554 </template>
539 <v-alert 555 <v-alert
540 slot="no-results" 556 slot="no-results"
541 :value="true" 557 :value="true"
542 color="error" 558 color="error"
543 icon="warning" 559 icon="warning"
544 >Your search for "{{ search }}" found no results.</v-alert> 560 >Your search for "{{ search }}" found no results.</v-alert>
545 </v-data-table> 561 </v-data-table>
546 <div class="loader" v-if="showLoader"> 562 <div class="loader" v-if="showLoader">
547 <v-progress-circular indeterminate color="white"></v-progress-circular> 563 <v-progress-circular indeterminate color="white"></v-progress-circular>
548 </div> 564 </div>
549 </div> 565 </div>
550 </template> 566 </template>
551 567
552 <script> 568 <script>
553 import http from "@/Services/http.js"; 569 import http from "@/Services/http.js";
554 import Util from "@/util"; 570 import Util from "@/util";
555 import moment from "moment"; 571 import moment from "moment";
556 572
557 export default { 573 export default {
558 data: () => ({ 574 data: () => ({
559 snackbar: false, 575 snackbar: false,
560 y: "top", 576 y: "top",
561 x: "right", 577 x: "right",
562 mode: "", 578 mode: "",
563 timeout: 3000, 579 timeout: 3000,
564 text: "", 580 text: "",
565 showLoader: false, 581 showLoader: false,
566 loading: false, 582 loading: false,
567 addLibrary: false, 583 addLibrary: false,
568 dialogStudents: false, 584 dialogStudents: false,
569 editStudentdialog: false, 585 editStudentdialog: false,
570 valid: true, 586 valid: true,
571 libraryIdRules: [v => !!v || "Library Id Fee is required"], 587 libraryIdRules: [v => !!v || "Library Id Fee is required"],
572 libraryFeeRules: [v => !!v || "Library Fee is required"], 588 libraryFeeRules: [v => !!v || "Library Fee is required"],
573 date: null, 589 date: null,
574 search: "", 590 search: "",
575 addclass: [], 591 addclass: [],
576 pagination: { 592 pagination: {
577 rowsPerPage: 15 593 rowsPerPage: 15
578 }, 594 },
579 addBook: {}, 595 addBook: {},
580 imageName: "", 596 imageName: "",
581 imageUrl: "", 597 imageUrl: "",
582 imageFile: "", 598 imageFile: "",
583 headers: [ 599 headers: [
584 { 600 {
585 text: "No", 601 text: "No",
586 align: "center", 602 align: "center",
587 sortable: false, 603 sortable: false,
588 value: "index" 604 value: "index"
589 }, 605 },
590 { 606 {
591 text: "Photo", 607 text: "Photo",
592 value: "uploadCover", 608 value: "uploadCover",
593 sortable: false, 609 sortable: false,
594 align: "center" 610 align: "center"
595 }, 611 },
596 { text: "Name", value: "name", sortable: false, align: "center" }, 612 { text: "Name", value: "name", sortable: false, align: "center" },
597 { text: "Roll No.", value: "rollNo", sortable: false, align: "center" }, 613 { text: "Roll No.", value: "rollNo", sortable: false, align: "center" },
598 { text: "Email", value: "email", sortable: false, align: "center" }, 614 { text: "Email", value: "email", sortable: false, align: "center" },
599 { text: "Action", value: "", sortable: false, align: "center" } 615 { text: "Action", value: "", sortable: false, align: "center" }
600 ], 616 ],
601 studentData: [], 617 studentData: [],
602 editedItem: {}, 618 editedItem: {},
603 parentId: "", 619 parentId: "",
604 token: "", 620 token: "",
605 selectStudents: {}, 621 selectStudents: {},
606 editedIndex: -1 622 editedIndex: -1
607 }), 623 }),
608 methods: { 624 methods: {
609 getAllStudents() { 625 getAllStudents() {
610 this.showLoader = true; 626 this.showLoader = true;
611 http() 627 http()
612 .get("/getStudentsList", { 628 .get("/getStudentsList", {
613 params: { classId: this.selectStudents }, 629 params: { classId: this.selectStudents },
614 headers: { Authorization: "Bearer " + this.token } 630 headers: { Authorization: "Bearer " + this.token }
615 }) 631 })
616 .then(response => { 632 .then(response => {
617 this.studentData = response.data.data; 633 this.studentData = response.data.data;
618 this.showLoader = false; 634 this.showLoader = false;
619 }) 635 })
620 .catch(err => { 636 .catch(err => {
621 // console.log("err====>", err); 637 // console.log("err====>", err);
622 if (error.response.status === 401) { 638 if (error.response.status === 401) {
623 this.$router.replace({ path: "/" }); 639 this.$router.replace({ path: "/" });
624 this.$store.dispatch("setToken", null); 640 this.$store.dispatch("setToken", null);
625 this.$store.dispatch("Id", null); 641 this.$store.dispatch("Id", null);
626 } 642 }
627 }); 643 });
628 }, 644 },
629 addLibraryData(item) { 645 addLibraryData(item) {
630 this.addBook.studentId = item._id; 646 this.addBook.studentId = item._id;
631 this.addLibrary = true; 647 this.addLibrary = true;
632 }, 648 },
633 editItem(item) { 649 editItem(item) {
634 this.editedIndex = this.studentData.indexOf(item); 650 this.editedIndex = this.studentData.indexOf(item);
635 this.editedItem = Object.assign({}, item); 651 this.editedItem = Object.assign({}, item);
636 this.editStudentdialog = true; 652 this.editStudentdialog = true;
637 }, 653 },
638 dates: function(date) { 654 dates: function(date) {
639 return moment(date).format("MMMM DD, YYYY"); 655 return moment(date).format("MMMM DD, YYYY");
640 }, 656 },
641 profile(item) { 657 profile(item) {
642 console.log("item", item); 658 console.log("item", item);
643 this.editedIndex = this.studentData.indexOf(item); 659 this.editedIndex = this.studentData.indexOf(item);
644 this.editedItem = Object.assign({}, item); 660 this.editedItem = Object.assign({}, item);
645 this.dialogStudents = true; 661 this.dialogStudents = true;
646 }, 662 },
647 deleteItem(item) { 663 deleteItem(item) {
648 let deleteStudentLibraryData = { 664 let deleteStudentLibraryData = {
649 studentId: item._id, 665 studentId: item._id,
650 libraryId: item.libraryId 666 libraryId: item.libraryId
651 }; 667 };
652 http() 668 http()
653 .put( 669 .put(
654 "/deleteLibrary", 670 "/deleteLibrary",
655 confirm("Are you sure you want to delete this?") && 671 confirm("Are you sure you want to delete this?") &&
656 deleteStudentLibraryData 672 deleteStudentLibraryData
657 ) 673 )
658 .then(response => { 674 .then(response => {
659 this.snackbar = true; 675 this.snackbar = true;
660 this.text = "Delete Successfully"; 676 this.text = "Delete Successfully";
661 this.getAllStudents(); 677 this.getAllStudents();
662 }) 678 })
663 .catch(error => { 679 .catch(error => {
664 // console.log(error); 680 // console.log(error);
665 }); 681 });
666 }, 682 },
667 close() { 683 close() {
668 this.dialog = false; 684 this.dialog = false;
669 }, 685 },
670 closeEditStudentDialog() { 686 closeEditStudentDialog() {
671 this.editStudentdialog = false; 687 this.editStudentdialog = false;
672 }, 688 },
673 closeViewStudent() { 689 closeViewStudent() {
674 this.dialogStudents = false; 690 this.dialogStudents = false;
675 }, 691 },
676 submit() { 692 submit() {
677 if (this.$refs.form.validate()) { 693 if (this.$refs.form.validate()) {
678 this.loading = true; 694 this.loading = true;
679 http() 695 http()
680 .put("/addLibrary", this.addBook) 696 .put("/addLibrary", this.addBook)
681 .then(response => { 697 .then(response => {
682 this.snackbar = true; 698 this.snackbar = true;
683 this.text = "New Library Member added successfully"; 699 this.text = "New Library Member added successfully";
684 this.getAllStudents(); 700 this.getAllStudents();
685 this.clear(); 701 this.clear();
686 this.addLibrary = false; 702 this.addLibrary = false;
687 this.loading = false; 703 this.loading = false;
688 }) 704 })
689 .catch(error => { 705 .catch(error => {
690 // console.log(error); 706 // console.log(error);
691 this.snackbar = true; 707 this.snackbar = true;
692 this.text = error.response.data.message; 708 this.text = error.response.data.message;
693 this.loading = false; 709 this.loading = false;
694 }); 710 });
695 } 711 }
696 }, 712 },
697 clear() { 713 clear() {
698 this.$refs.form.reset(); 714 this.$refs.form.reset();
699 }, 715 },
700 save() { 716 save() {
701 this.editedItem.studentId = this.editedItem._id; 717 this.editedItem.studentId = this.editedItem._id;
702 http() 718 http()
703 .put("/updateLibrary", this.editedItem) 719 .put("/updateLibrary", this.editedItem)
704 .then(response => { 720 .then(response => {
705 this.snackbar = true; 721 this.snackbar = true;
706 this.text = "Edit Library Member Successfully"; 722 this.text = "Edit Library Member Successfully";
707 this.getAllStudents(); 723 this.getAllStudents();
708 this.closeEditStudentDialog(); 724 this.closeEditStudentDialog();
709 }) 725 })
710 .catch(error => { 726 .catch(error => {
711 this.snackbar = true; 727 this.snackbar = true;
712 this.text = error.response.data.statusText; 728 this.text = error.response.data.statusText;
713 }); 729 });
714 }, 730 },
715 getAllClass() { 731 getAllClass() {
716 http() 732 http()
717 .get("/getClassesList", { 733 .get("/getClassesList", {
718 headers: { Authorization: "Bearer " + this.token } 734 headers: { Authorization: "Bearer " + this.token }
719 }) 735 })
720 .then(response => { 736 .then(response => {
721 this.addclass = response.data.data; 737 this.addclass = response.data.data;
722 }) 738 })
723 .catch(err => { 739 .catch(err => {
724 // console.log("err====>", err); 740 // console.log("err====>", err);
725 this.$router.replace({ path: "/" }); 741 this.$router.replace({ path: "/" });
726 }); 742 });
727 } 743 }
728 }, 744 },
729 mounted() { 745 mounted() {
730 // this.getStudentList(); 746 // this.getStudentList();
731 this.token = this.$store.state.token; 747 this.token = this.$store.state.token;
732 this.getAllClass(); 748 this.getAllClass();
733 }, 749 },
734 created() { 750 created() {
src/pages/Mark/mark.vue
Diff comments   View file @495e403
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 Mark</v-tab> 10 >Existing Mark</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 Mark</v-tab> 18 >Add Mark</v-tab>
19 19
20 <!-- ****** Edit Mark ****** --> 20 <!-- ****** Edit Mark ****** -->
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="800px" scrollable> 31 <v-dialog v-model="dialog" max-width="800px" 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 Mark</h3> 36 <h3>Edit Mark</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:670px;"> 40 <v-card-text style="height:670px;">
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">Exam Name:</label> 47 <label class="right">Exam Name:</label>
48 </v-flex> 48 </v-flex>
49 <v-flex xs5 class="ml-3"> 49 <v-flex xs5 class="ml-3">
50 <v-select 50 <v-select
51 :rules="examNameRules" 51 :rules="examNameRules"
52 :items="examList" 52 :items="examList"
53 v-model="editedItem.examName" 53 v-model="editedItem.examName"
54 label="Select your Exam Name" 54 label="Select your Exam Name"
55 item-text="examName" 55 item-text="examName"
56 item-value="examName" 56 item-value="examName"
57 ></v-select> 57 ></v-select>
58 </v-flex> 58 </v-flex>
59 </v-layout> 59 </v-layout>
60 </v-flex> 60 </v-flex>
61 <v-flex xs12 sm12> 61 <v-flex xs12 sm12>
62 <v-layout> 62 <v-layout>
63 <v-flex xs4 class="pt-4 subheading"> 63 <v-flex xs4 class="pt-4 subheading">
64 <label class="right">Class:</label> 64 <label class="right">Class:</label>
65 </v-flex> 65 </v-flex>
66 <v-flex xs5 class="ml-3"> 66 <v-flex xs5 class="ml-3">
67 <v-select 67 <v-select
68 v-model="editedItem.classId" 68 v-model="editedItem.classId"
69 label="Select your Class" 69 label="Select your Class"
70 type="text" 70 type="text"
71 :items="classList" 71 :items="classList"
72 item-text="classNum" 72 item-text="classNum"
73 item-value="_id" 73 item-value="_id"
74 @change="getSections(editedItem.classId)" 74 @change="getSections(editedItem.classId)"
75 required 75 required
76 ></v-select> 76 ></v-select>
77 </v-flex> 77 </v-flex>
78 </v-layout> 78 </v-layout>
79 </v-flex> 79 </v-flex>
80 <v-flex xs12 sm12> 80 <v-flex xs12 sm12>
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">Section:</label> 83 <label class="right">Section:</label>
84 </v-flex> 84 </v-flex>
85 <v-flex xs5 class="ml-3"> 85 <v-flex xs5 class="ml-3">
86 <v-select 86 <v-select
87 :items="addSection" 87 :items="addSection"
88 label="Select your section" 88 label="Select your section"
89 v-model="editedItem.sectionId" 89 v-model="editedItem.sectionId"
90 item-text="name" 90 item-text="name"
91 item-value="_id" 91 item-value="_id"
92 name="Select Section" 92 name="Select Section"
93 :rules="sectionRules" 93 :rules="sectionRules"
94 required 94 required
95 ></v-select> 95 ></v-select>
96 </v-flex> 96 </v-flex>
97 </v-layout> 97 </v-layout>
98 </v-flex> 98 </v-flex>
99 <v-flex xs12 sm12> 99 <v-flex xs12 sm12>
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">Subject Name:</label> 102 <label class="right">Subject Name:</label>
103 </v-flex> 103 </v-flex>
104 <v-flex xs5 class="ml-3"> 104 <v-flex xs5 class="ml-3">
105 <v-select 105 <v-select
106 :items="subjects" 106 :items="subjects"
107 label="Select your Subject Name" 107 label="Select your Subject Name"
108 v-model="editedItem.subjectName" 108 v-model="editedItem.subjectName"
109 item-text="subjectName" 109 item-text="subjectName"
110 item-value="subjectName" 110 item-value="subjectName"
111 name="Select Section" 111 name="Select Section"
112 :rules="sectionRules" 112 :rules="sectionRules"
113 required 113 required
114 ></v-select> 114 ></v-select>
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-layout> 119 <v-layout>
120 <v-flex xs12 sm8 offset-sm2> 120 <v-flex xs12 sm8 offset-sm2>
121 <v-card-actions> 121 <v-card-actions>
122 <v-btn round dark @click.native="close">Close</v-btn> 122 <v-btn round dark @click.native="close">Close</v-btn>
123 <v-spacer></v-spacer> 123 <v-spacer></v-spacer>
124 <v-btn round dark @click="save">Save</v-btn> 124 <v-btn round dark @click="save">Save</v-btn>
125 </v-card-actions> 125 </v-card-actions>
126 </v-flex> 126 </v-flex>
127 </v-layout> 127 </v-layout>
128 </v-container> 128 </v-container>
129 </v-form> 129 </v-form>
130 </v-card-text> 130 </v-card-text>
131 </v-card> 131 </v-card>
132 </v-dialog>--> 132 </v-dialog>-->
133 133
134 <!-- ****** PROFILE VIEW Exam ****** --> 134 <!-- ****** PROFILE VIEW Exam ****** -->
135 135
136 <!-- <v-dialog v-model="dialog1" max-width="600px"> 136 <!-- <v-dialog v-model="dialog1" max-width="600px">
137 <v-card> 137 <v-card>
138 <v-toolbar color="grey lighten-2" flat> 138 <v-toolbar color="grey lighten-2" flat>
139 <v-spacer></v-spacer> 139 <v-spacer></v-spacer>
140 <v-toolbar-title> 140 <v-toolbar-title>
141 <h3>Mark</h3> 141 <h3>Mark</h3>
142 </v-toolbar-title> 142 </v-toolbar-title>
143 <v-spacer></v-spacer> 143 <v-spacer></v-spacer>
144 <v-icon @click="close1">close</v-icon> 144 <v-icon @click="close1">close</v-icon>
145 </v-toolbar> 145 </v-toolbar>
146 <v-card-text> 146 <v-card-text>
147 <v-container grid-list-md> 147 <v-container grid-list-md>
148 <v-layout wrap> 148 <v-layout wrap>
149 <v-flex> 149 <v-flex>
150 <v-layout> 150 <v-layout>
151 <v-flex xs5 sm6> 151 <v-flex xs5 sm6>
152 <h5 class="right my-1"> 152 <h5 class="right my-1">
153 <b>Exam Name:</b> 153 <b>Exam Name:</b>
154 </h5> 154 </h5>
155 </v-flex> 155 </v-flex>
156 <v-flex sm6 xs8> 156 <v-flex sm6 xs8>
157 <h5 class="my-1">{{ editedItem.examName }}</h5> 157 <h5 class="my-1">{{ editedItem.examName }}</h5>
158 </v-flex> 158 </v-flex>
159 </v-layout> 159 </v-layout>
160 <v-layout> 160 <v-layout>
161 <v-flex xs5 sm6> 161 <v-flex xs5 sm6>
162 <h5 class="right my-1"> 162 <h5 class="right my-1">
163 <b>Class:</b> 163 <b>Class:</b>
164 </h5> 164 </h5>
165 </v-flex> 165 </v-flex>
166 <v-flex sm6 xs8> 166 <v-flex sm6 xs8>
167 <h5 class="my-1">{{ editedItem.classId }}</h5> 167 <h5 class="my-1">{{ editedItem.classId }}</h5>
168 </v-flex> 168 </v-flex>
169 </v-layout> 169 </v-layout>
170 <v-layout> 170 <v-layout>
171 <v-flex xs5 sm6> 171 <v-flex xs5 sm6>
172 <h5 class="right my-1"> 172 <h5 class="right my-1">
173 <b>Section:</b> 173 <b>Section:</b>
174 </h5> 174 </h5>
175 </v-flex> 175 </v-flex>
176 <v-flex sm6 xs8> 176 <v-flex sm6 xs8>
177 <h5 class="my-1">{{ editedItem.sectionId }}</h5> 177 <h5 class="my-1">{{ editedItem.sectionId }}</h5>
178 </v-flex> 178 </v-flex>
179 </v-layout> 179 </v-layout>
180 <v-layout> 180 <v-layout>
181 <v-flex xs5 sm6> 181 <v-flex xs5 sm6>
182 <h5 class="right my-1"> 182 <h5 class="right my-1">
183 <b>Subject Name:</b> 183 <b>Subject Name:</b>
184 </h5> 184 </h5>
185 </v-flex> 185 </v-flex>
186 <v-flex sm6 xs8> 186 <v-flex sm6 xs8>
187 <h5 class="my-1">{{ editedItem.subjectName }}</h5> 187 <h5 class="my-1">{{ editedItem.subjectName }}</h5>
188 </v-flex> 188 </v-flex>
189 </v-layout> 189 </v-layout>
190 <v-layout> 190 <v-layout>
191 <v-flex xs5 sm6> 191 <v-flex xs5 sm6>
192 <h5 class="right my-1"> 192 <h5 class="right my-1">
193 <b>Date:</b> 193 <b>Date:</b>
194 </h5> 194 </h5>
195 </v-flex> 195 </v-flex>
196 <v-flex sm6 xs8> 196 <v-flex sm6 xs8>
197 <h5 class="my-1">{{ dates(editedItem.date) }}</h5> 197 <h5 class="my-1">{{ dates(editedItem.date) }}</h5>
198 </v-flex> 198 </v-flex>
199 </v-layout> 199 </v-layout>
200 <v-layout> 200 <v-layout>
201 <v-flex xs5 sm6> 201 <v-flex xs5 sm6>
202 <h5 class="right my-1"> 202 <h5 class="right my-1">
203 <b>Time From:</b> 203 <b>Time From:</b>
204 </h5> 204 </h5>
205 </v-flex> 205 </v-flex>
206 <v-flex sm6 xs8> 206 <v-flex sm6 xs8>
207 <h5 class="my-1">{{ editedItem.timeFrom }}</h5> 207 <h5 class="my-1">{{ editedItem.timeFrom }}</h5>
208 </v-flex> 208 </v-flex>
209 </v-layout> 209 </v-layout>
210 <v-layout> 210 <v-layout>
211 <v-flex xs5 sm6> 211 <v-flex xs5 sm6>
212 <h5 class="right my-1"> 212 <h5 class="right my-1">
213 <b>Time To:</b> 213 <b>Time To:</b>
214 </h5> 214 </h5>
215 </v-flex> 215 </v-flex>
216 <v-flex sm6 xs8> 216 <v-flex sm6 xs8>
217 <h5 class="my-1">{{ editedItem.timeTo }}</h5> 217 <h5 class="my-1">{{ editedItem.timeTo }}</h5>
218 </v-flex> 218 </v-flex>
219 </v-layout> 219 </v-layout>
220 <v-layout> 220 <v-layout>
221 <v-flex xs5 sm6> 221 <v-flex xs5 sm6>
222 <h5 class="right my-1"> 222 <h5 class="right my-1">
223 <b>Room:</b> 223 <b>Room:</b>
224 </h5> 224 </h5>
225 </v-flex> 225 </v-flex>
226 <v-flex sm6 xs8> 226 <v-flex sm6 xs8>
227 <h5 class="my-1">{{ editedItem.room }}</h5> 227 <h5 class="my-1">{{ editedItem.room }}</h5>
228 </v-flex> 228 </v-flex>
229 </v-layout> 229 </v-layout>
230 </v-flex> 230 </v-flex>
231 </v-layout> 231 </v-layout>
232 </v-container> 232 </v-container>
233 </v-card-text> 233 </v-card-text>
234 </v-card> 234 </v-card>
235 </v-dialog>--> 235 </v-dialog>-->
236 236
237 <v-snackbar 237 <v-snackbar
238 :timeout="timeout" 238 :timeout="timeout"
239 :top="y === 'top'" 239 :top="y === 'top'"
240 :right="x === 'right'" 240 :right="x === 'right'"
241 :vertical="mode === 'vertical'" 241 :vertical="mode === 'vertical'"
242 v-model="snackbar" 242 v-model="snackbar"
243 color="success" 243 color="success"
244 >{{ text }}</v-snackbar> 244 >{{ text }}</v-snackbar>
245 245
246 <!-- ****** EXISTING MARK TABLE ****** --> 246 <!-- ****** EXISTING MARK TABLE ****** -->
247 247
248 <v-card flat> 248 <v-card flat>
249 <v-flex xs12 sm12 lg12> 249 <v-flex xs12 sm12 lg12>
250 <v-layout wrap> 250 <v-layout wrap>
251 <v-flex xs12 sm12 lg3> 251 <v-flex xs12 sm12 lg3>
252 <v-layout> 252 <v-layout>
253 <v-flex xs3 sm6 lg2 class="subheading mt-4"> 253 <v-flex xs3 sm6 lg2 class="subheading mt-4">
254 <label class="right">Class:</label> 254 <label class="right">Class:</label>
255 </v-flex> 255 </v-flex>
256 <v-flex xs12 sm12 lg8 class="ml-2"> 256 <v-flex xs12 sm12 lg8 class="ml-2">
257 <v-select 257 <v-select
258 v-model="getMark.classId" 258 v-model="getMark.classId"
259 label="Select your class" 259 label="Select your class"
260 type="text" 260 type="text"
261 :items="classList" 261 :items="classList"
262 item-text="classNum" 262 item-text="classNum"
263 item-value="_id" 263 item-value="_id"
264 @change="getSections(getMark.classId)" 264 @change="getSections(getMark.classId)"
265 required 265 required
266 ></v-select> 266 ></v-select>
267 </v-flex> 267 </v-flex>
268 </v-layout> 268 </v-layout>
269 </v-flex> 269 </v-flex>
270 <v-flex xs12 sm12 lg3> 270 <v-flex xs12 sm12 lg3>
271 <v-layout> 271 <v-layout>
272 <v-flex xs3 sm6 lg2 class="subheading mt-4"> 272 <v-flex xs3 sm6 lg2 class="subheading mt-4">
273 <label class="right">Section:</label> 273 <label class="right">Section:</label>
274 </v-flex> 274 </v-flex>
275 <v-flex xs12 sm12 lg8 class="ml-2"> 275 <v-flex xs12 sm12 lg8 class="ml-2">
276 <v-select 276 <v-select
277 :items="addSection" 277 :items="addSection"
278 label="Select your Section" 278 label="Select your Section"
279 v-model="getMark.sectionId" 279 v-model="getMark.sectionId"
280 item-text="name" 280 item-text="name"
281 item-value="_id" 281 item-value="_id"
282 name="Select Section" 282 name="Select Section"
283 required 283 required
284 ></v-select> 284 ></v-select>
285 </v-flex> 285 </v-flex>
286 </v-layout> 286 </v-layout>
287 </v-flex> 287 </v-flex>
288 <v-flex xs12 sm12 lg6> 288 <v-flex xs12 sm12 lg6>
289 <v-btn @click="getStudents" round dark :loading="loading" class="right mt-4">Mark</v-btn> 289 <v-btn @click="getStudents" round dark :loading="loading" class="right mt-4">Mark</v-btn>
290 </v-flex> 290 </v-flex>
291 </v-layout> 291 </v-layout>
292 </v-flex> 292 </v-flex>
293 </v-card> 293 </v-card>
294 <v-data-table 294 <v-data-table
295 :headers="headers" 295 :headers="headers"
296 :items="getStudentsList" 296 :items="getStudentsList"
297 :pagination.sync="pagination" 297 :pagination.sync="pagination"
298 :search="search" 298 :search="search"
299 > 299 >
300 <template slot="items" slot-scope="props"> 300 <template slot="items" slot-scope="props">
301 <td class="text-xs-center">{{ props.index + 1}}</td> 301 <td class="text-xs-center">{{ props.index + 1}}</td>
302 <td id="td" class="text-xs-center"> 302 <td id="td" class="text-xs-center">
303 <v-avatar> 303 <v-avatar>
304 <img :src="props.item.profilePicUrl" v-if="props.item.profilePicUrl" /> 304 <img :src="props.item.profilePicUrl" v-if="props.item.profilePicUrl" />
305 <img src="/static/icon/user.png" v-else-if="!props.item.profilePicUrl" /> 305 <img src="/static/icon/user.png" v-else-if="!props.item.profilePicUrl" />
306 </v-avatar> 306 </v-avatar>
307 </td> 307 </td>
308 <td id="td" class="text-xs-center">{{ props.item.name}}</td> 308 <td id="td" class="text-xs-center">{{ props.item.name}}</td>
309 <td id="td" class="text-xs-center">{{ props.item.rollNo }}</td> 309 <td id="td" class="text-xs-center">{{ props.item.rollNo }}</td>
310 <td id="td" class="text-xs-center">{{ props.item.email }}</td> 310 <td id="td" class="text-xs-center">{{ props.item.email }}</td>
311 <td class="text-xs-center"> 311 <td class="text-xs-center">
312 <span> 312 <span>
313 <!-- <img 313 <!-- <img
314 style="cursor:pointer; width:25px; height:18px; " 314 style="cursor:pointer; width:25px; height:18px; "
315 class="mr-5" 315 class="mr-5"
316 @click="profile(props.item)" 316 @click="profile(props.item)"
317 src="/static/icon/eye1.png" 317 src="/static/icon/eye1.png"
318 />--> 318 />-->
319 <router-link :to="{ name:'viewMark',params: { markId:props.item._id } }"> 319 <router-link :to="{ name:'viewMark',params: { markId:props.item._id } }">
320 <img 320 <v-tooltip top>
321 style="cursor:pointer; width:20px; height:18px; " 321 <img
322 class="mr-5" 322 slot="activator"
323 src="/static/icon/edit1.png" 323 style="cursor:pointer; width:20px; height:18px; "
324 /> 324 class="mr-5"
325 src="/static/icon/edit1.png"
326 />
327 <span>Edit</span>
328 </v-tooltip>
325 </router-link> 329 </router-link>
326 <!-- <img 330 <!-- <img
327 style="cursor:pointer;width:20px; height:20px; " 331 style="cursor:pointer;width:20px; height:20px; "
328 class="mr-5" 332 class="mr-5"
329 @click="deleteSchedule(props.item)" 333 @click="deleteSchedule(props.item)"
330 src="/static/icon/delete1.png" 334 src="/static/icon/delete1.png"
331 />--> 335 />-->
332 </span> 336 </span>
333 </td> 337 </td>
334 </template> 338 </template>
335 <v-alert 339 <v-alert
336 slot="no-results" 340 slot="no-results"
337 :value="true" 341 :value="true"
338 color="error" 342 color="error"
339 icon="warning" 343 icon="warning"
340 >Your search for "{{ search }}" found no results.</v-alert> 344 >Your search for "{{ search }}" found no results.</v-alert>
341 </v-data-table> 345 </v-data-table>
342 </v-tab-item> 346 </v-tab-item>
343 347
344 <!-- ****** ADD Mark Schedule ****** --> 348 <!-- ****** ADD Mark Schedule ****** -->
345 349
346 <v-tab-item> 350 <v-tab-item>
347 <v-snackbar 351 <v-snackbar
348 :timeout="timeout" 352 :timeout="timeout"
349 :top="y === 'top'" 353 :top="y === 'top'"
350 :right="x === 'right'" 354 :right="x === 'right'"
351 :vertical="mode === 'vertical'" 355 :vertical="mode === 'vertical'"
352 v-model="snackbar" 356 v-model="snackbar"
353 :color="color" 357 :color="color"
354 >{{ text }}</v-snackbar> 358 >{{ text }}</v-snackbar>
355 <v-form ref="form" v-model="valid" lazy-validation> 359 <v-form ref="form" v-model="valid" lazy-validation>
356 <v-container fluid> 360 <v-container fluid>
357 <v-flex xs12 sm12 lg12> 361 <v-flex xs12 sm12 lg12>
358 <v-layout wrap> 362 <v-layout wrap>
359 <v-flex xs12 sm12 lg10> 363 <v-flex xs12 sm12 lg10>
360 <v-layout wrap> 364 <v-layout wrap>
361 <v-flex xs12 sm12 lg3> 365 <v-flex xs12 sm12 lg3>
362 <v-flex xs3 sm2 lg2 class="subheading"> 366 <v-flex xs3 sm2 lg2 class="subheading">
363 <label>Exam:</label> 367 <label>Exam:</label>
364 </v-flex> 368 </v-flex>
365 <v-flex xs12 sm12 lg10> 369 <v-flex xs12 sm12 lg10>
366 <v-select 370 <v-select
367 label="Select your Exam Name" 371 label="Select your Exam Name"
368 :items="examList" 372 :items="examList"
369 v-model="addMark.examId" 373 v-model="addMark.examId"
370 :rules="examRules" 374 :rules="examRules"
371 item-text="examName" 375 item-text="examName"
372 item-value="_id" 376 item-value="_id"
373 ></v-select> 377 ></v-select>
374 </v-flex> 378 </v-flex>
375 </v-flex> 379 </v-flex>
376 <v-flex xs12 sm12 lg3> 380 <v-flex xs12 sm12 lg3>
377 <v-flex xs3 sm6 lg2 class="subheading"> 381 <v-flex xs3 sm6 lg2 class="subheading">
378 <label>Class:</label> 382 <label>Class:</label>
379 </v-flex> 383 </v-flex>
380 <v-flex xs12 sm12 lg10 class> 384 <v-flex xs12 sm12 lg10 class>
381 <v-select 385 <v-select
382 v-model="addMark.classId" 386 v-model="addMark.classId"
383 label="Select your class" 387 label="Select your class"
384 type="text" 388 type="text"
385 :items="classList" 389 :items="classList"
386 item-text="classNum" 390 item-text="classNum"
387 item-value="_id" 391 item-value="_id"
388 :rules="classRules" 392 :rules="classRules"
389 @change="getSections(addMark.classId)" 393 @change="getSections(addMark.classId)"
390 required 394 required
391 ></v-select> 395 ></v-select>
392 </v-flex> 396 </v-flex>
393 </v-flex> 397 </v-flex>
394 <v-flex xs12 sm12 lg3> 398 <v-flex xs12 sm12 lg3>
395 <v-flex xs3 sm6 lg2 class="subheading"> 399 <v-flex xs3 sm6 lg2 class="subheading">
396 <label>Section:</label> 400 <label>Section:</label>
397 </v-flex> 401 </v-flex>
398 <v-flex xs12 sm12 lg10 class> 402 <v-flex xs12 sm12 lg10 class>
399 <v-select 403 <v-select
400 :items="addSection" 404 :items="addSection"
401 label="Select your Section" 405 label="Select your Section"
402 v-model="addMark.sectionId" 406 v-model="addMark.sectionId"
403 item-text="name" 407 item-text="name"
404 item-value="_id" 408 item-value="_id"
405 name="Select Section" 409 name="Select Section"
406 :rules="sectionRules" 410 :rules="sectionRules"
407 required 411 required
408 ></v-select> 412 ></v-select>
409 </v-flex> 413 </v-flex>
410 </v-flex> 414 </v-flex>
411 <v-flex xs12 sm12 lg3> 415 <v-flex xs12 sm12 lg3>
412 <v-flex xs3 sm6 lg2 class="subheading"> 416 <v-flex xs3 sm6 lg2 class="subheading">
413 <label>Subject:</label> 417 <label>Subject:</label>
414 </v-flex> 418 </v-flex>
415 <v-flex xs12 sm12 lg10 class> 419 <v-flex xs12 sm12 lg10 class>
416 <v-select 420 <v-select
417 :items="subjects" 421 :items="subjects"
418 label="Select your Subject" 422 label="Select your Subject"
419 v-model="addMark.subjectId" 423 v-model="addMark.subjectId"
420 item-text="subjectName" 424 item-text="subjectName"
421 item-value="_id" 425 item-value="_id"
422 name="Select Section" 426 name="Select Section"
423 :rules="subjectRules" 427 :rules="subjectRules"
424 required 428 required
425 ></v-select> 429 ></v-select>
426 </v-flex> 430 </v-flex>
427 </v-flex> 431 </v-flex>
428 </v-layout> 432 </v-layout>
429 </v-flex> 433 </v-flex>
430 <v-flex xs12 sm12 lg2> 434 <v-flex xs12 sm12 lg2>
431 <v-flex xs12 sm12 lg12> 435 <v-flex xs12 sm12 lg12>
432 <v-btn 436 <v-btn
433 @click="findStudents" 437 @click="findStudents"
434 round 438 round
435 dark 439 dark
436 :loading="loading" 440 :loading="loading"
437 class="right mt-4" 441 class="right mt-4"
438 >Mark</v-btn> 442 >Mark</v-btn>
439 </v-flex> 443 </v-flex>
440 </v-flex> 444 </v-flex>
441 </v-layout> 445 </v-layout>
442 </v-flex> 446 </v-flex>
443 <v-card class="mt-4"> 447 <v-card class="mt-4">
444 <v-data-table 448 <v-data-table
445 :headers="headerOfMark" 449 :headers="headerOfMark"
446 :items="getStudentData" 450 :items="getStudentData"
447 :pagination.sync="pagination" 451 :pagination.sync="pagination"
448 :search="search" 452 :search="search"
449 > 453 >
450 <template slot="items" slot-scope="props"> 454 <template slot="items" slot-scope="props">
451 <td class="text-xs-center">{{ props.index + 1}}</td> 455 <td class="text-xs-center">{{ props.index + 1}}</td>
452 <td id="td" class="text-xs-center"> 456 <td id="td" class="text-xs-center">
453 <v-avatar> 457 <v-avatar>
454 <img :src="props.item.profilePicUrl" v-if="props.item.profilePicUrl" /> 458 <img :src="props.item.profilePicUrl" v-if="props.item.profilePicUrl" />
455 <img src="/static/icon/user.png" v-else-if="!props.item.profilePicUrl" /> 459 <img src="/static/icon/user.png" v-else-if="!props.item.profilePicUrl" />
456 </v-avatar> 460 </v-avatar>
457 </td> 461 </td>
458 <td id="td" class="text-xs-center">{{ props.item.name}}</td> 462 <td id="td" class="text-xs-center">{{ props.item.name}}</td>
459 <td id="td" class="text-xs-center">{{ props.item.rollNo }}</td> 463 <td id="td" class="text-xs-center">{{ props.item.rollNo }}</td>
460 <td 464 <td
461 id="td" 465 id="td"
462 class="text-xs-center markTable" 466 class="text-xs-center markTable"
463 v-for="marks in props.item.marksObtained" 467 v-for="marks in props.item.marksObtained"
464 > 468 >
465 <v-text-field v-model="marks.marksScored"></v-text-field> 469 <v-text-field v-model="marks.marksScored"></v-text-field>
466 </td> 470 </td>
467 </template> 471 </template>
468 <v-alert 472 <v-alert
469 slot="no-results" 473 slot="no-results"
470 :value="true" 474 :value="true"
471 color="error" 475 color="error"
472 icon="warning" 476 icon="warning"
473 >Your search for "{{ search }}" found no results.</v-alert> 477 >Your search for "{{ search }}" found no results.</v-alert>
474 </v-data-table> 478 </v-data-table>
475 </v-card> 479 </v-card>
476 <v-layout class="mt-2"> 480 <v-layout class="mt-2">
477 <v-flex xs12 sm12> 481 <v-flex xs12 sm12>
478 <v-layout> 482 <v-layout>
479 <v-flex xs12> 483 <v-flex xs12>
480 <v-btn @click="submit" round dark :loading="loading" class="right">Add Mark</v-btn> 484 <v-btn @click="submit" round dark :loading="loading" class="right">Add Mark</v-btn>
481 </v-flex> 485 </v-flex>
482 </v-layout> 486 </v-layout>
483 </v-flex> 487 </v-flex>
484 </v-layout> 488 </v-layout>
485 </v-container> 489 </v-container>
486 </v-form> 490 </v-form>
487 </v-tab-item> 491 </v-tab-item>
488 </v-tabs> 492 </v-tabs>
489 <div class="loader" v-if="showLoader"> 493 <div class="loader" v-if="showLoader">
490 <v-progress-circular indeterminate color="white"></v-progress-circular> 494 <v-progress-circular indeterminate color="white"></v-progress-circular>
491 </div> 495 </div>
492 </v-app> 496 </v-app>
493 </template> 497 </template>
494 498
495 <script> 499 <script>
496 import http from "@/Services/http.js"; 500 import http from "@/Services/http.js";
497 import moment from "moment"; 501 import moment from "moment";
498 502
499 export default { 503 export default {
500 data: () => ({ 504 data: () => ({
501 snackbar: false, 505 snackbar: false,
502 date: null, 506 date: null,
503 // editDate: false, 507 // editDate: false,
504 // menu1: false, 508 // menu1: false,
505 // menuB: false, 509 // menuB: false,
506 // menu2: false, 510 // menu2: false,
507 // menuEdit: false, 511 // menuEdit: false,
508 // timeToEdit: false, 512 // timeToEdit: false,
509 color: "", 513 color: "",
510 y: "top", 514 y: "top",
511 x: "right", 515 x: "right",
512 mode: "", 516 mode: "",
513 timeout: 10000, 517 timeout: 10000,
514 text: "", 518 text: "",
515 loading: false, 519 loading: false,
516 // date: null, 520 // date: null,
517 search: "", 521 search: "",
518 showLoader: false, 522 showLoader: false,
519 dialog: false, 523 dialog: false,
520 dialog1: false, 524 dialog1: false,
521 valid: true, 525 valid: true,
522 isActive: true, 526 isActive: true,
523 newActive: false, 527 newActive: false,
524 addSection: [], 528 addSection: [],
525 pagination: { 529 pagination: {
526 rowsPerPage: 15 530 rowsPerPage: 15
527 }, 531 },
528 classRules: [v => !!v || "Class is required"], 532 classRules: [v => !!v || "Class is required"],
529 sectionRules: [v => !!v || "section is required"], 533 sectionRules: [v => !!v || "section is required"],
530 subjectRules: [v => !!v || "Subject is required"], 534 subjectRules: [v => !!v || "Subject is required"],
531 examRules: [v => !!v || "Exam is required"], 535 examRules: [v => !!v || "Exam is required"],
532 536
533 headerOfMark: [ 537 headerOfMark: [
534 // { 538 // {
535 // align: "justify-center", 539 // align: "justify-center",
536 // text: "#", 540 // text: "#",
537 // sortable: false, 541 // sortable: false,
538 // value: "index" 542 // value: "index"
539 // }, 543 // },
540 { 544 {
541 align: "justify-center", 545 align: "justify-center",
542 text: "No", 546 text: "No",
543 sortable: false, 547 sortable: false,
544 value: "No" 548 value: "No"
545 }, 549 },
546 { 550 {
547 text: "Profile Pic", 551 text: "Profile Pic",
548 vaue: "profilePicUrl", 552 vaue: "profilePicUrl",
549 sortable: false, 553 sortable: false,
550 align: "center" 554 align: "center"
551 }, 555 },
552 { 556 {
553 text: "Name", 557 text: "Name",
554 vaue: "name", 558 vaue: "name",
555 sortable: false, 559 sortable: false,
556 align: "center" 560 align: "center"
557 }, 561 },
558 { 562 {
559 text: "Roll No.", 563 text: "Roll No.",
560 value: "rollNo", 564 value: "rollNo",
561 sortable: false, 565 sortable: false,
562 align: "center" 566 align: "center"
563 } 567 }
564 // { 568 // {
565 // text: "Distribution Type", 569 // text: "Distribution Type",
566 // value: "distributionType", 570 // value: "distributionType",
567 // sortable: false, 571 // sortable: false,
568 // align: "center" 572 // align: "center"
569 // }, 573 // },
570 // { text: "markValue", value: "markValue", sortable: false, align: "center" }, 574 // { text: "markValue", value: "markValue", sortable: false, align: "center" },
571 // { 575 // {
572 // text: "Roll No.", 576 // text: "Roll No.",
573 // align: "center", 577 // align: "center",
574 // sortable: false, 578 // sortable: false,
575 // value: "rollNo" 579 // value: "rollNo"
576 // }, 580 // },
577 // { text: "Exam", value: "exam", sortable: false, align: "center" }, 581 // { text: "Exam", value: "exam", sortable: false, align: "center" },
578 // { 582 // {
579 // text: "ASSIGNMENT", 583 // text: "ASSIGNMENT",
580 // value: "assignment", 584 // value: "assignment",
581 // sortable: false, 585 // sortable: false,
582 // align: "center" 586 // align: "center"
583 // } 587 // }
584 ], 588 ],
585 headers: [ 589 headers: [
586 { 590 {
587 align: "justify-center", 591 align: "justify-center",
588 text: "No", 592 text: "No",
589 sortable: false, 593 sortable: false,
590 value: "No" 594 value: "No"
591 }, 595 },
592 { 596 {
593 text: "Profile Pic", 597 text: "Profile Pic",
594 vaue: "profilePicUrl", 598 vaue: "profilePicUrl",
595 sortable: false, 599 sortable: false,
596 align: "center" 600 align: "center"
597 }, 601 },
598 { 602 {
599 text: "Name", 603 text: "Name",
600 vaue: "name", 604 vaue: "name",
601 sortable: false, 605 sortable: false,
602 align: "center" 606 align: "center"
603 }, 607 },
604 { 608 {
605 text: "Roll No.", 609 text: "Roll No.",
606 value: "rollNo", 610 value: "rollNo",
607 sortable: false, 611 sortable: false,
608 align: "center" 612 align: "center"
609 }, 613 },
610 { 614 {
611 text: "Email", 615 text: "Email",
612 value: "email", 616 value: "email",
613 sortable: false, 617 sortable: false,
614 align: "center" 618 align: "center"
615 }, 619 },
616 { text: "Action", value: "", sortable: false, align: "center" } 620 { text: "Action", value: "", sortable: false, align: "center" }
617 ], 621 ],
618 classList: [], 622 classList: [],
619 examList: [], 623 examList: [],
620 subjects: [], 624 subjects: [],
621 addMark: {}, 625 addMark: {},
622 getMark: {}, 626 getMark: {},
623 // editedItem: {}, 627 // editedItem: {},
624 getScheduleData: {}, 628 getScheduleData: {},
625 markData: [], 629 markData: [],
626 getStudentData: [], 630 getStudentData: [],
627 getStudentsList: [], 631 getStudentsList: [],
628 token: "" 632 token: ""
629 }), 633 }),
630 methods: { 634 methods: {
631 // dates: function(date) { 635 // dates: function(date) {
632 // return moment(date).format("MMMM DD, YYYY"); 636 // return moment(date).format("MMMM DD, YYYY");
633 // }, 637 // },
634 // pickFile() { 638 // pickFile() {
635 // this.$refs.image.click(); 639 // this.$refs.image.click();
636 // }, 640 // },
637 // getStudentsList() { 641 // getStudentsList() {
638 // this.showLoader = true; 642 // this.showLoader = true;
639 // http() 643 // http()
640 // .get("/getStudentsList", { 644 // .get("/getStudentsList", {
641 // params: { classId: this.getScheduleData.classId }, 645 // params: { classId: this.getScheduleData.classId },
642 // headers: { Authorization: "Bearer " + this.token } 646 // headers: { Authorization: "Bearer " + this.token }
643 // }) 647 // })
644 // .then(response => { 648 // .then(response => {
645 // this.getStudentsList = response.data.data; 649 // this.getStudentsList = response.data.data;
646 // this.showLoader = false; 650 // this.showLoader = false;
647 // }) 651 // })
648 // .catch(error => { 652 // .catch(error => {
649 // // console.log("err====>", err); 653 // // console.log("err====>", err);
650 // this.showLoader = false; 654 // this.showLoader = false;
651 // this.loadingSearch = false; 655 // this.loadingSearch = false;
652 // this.snackbar = true; 656 // this.snackbar = true;
653 // this.text = error.response.data.message; 657 // this.text = error.response.data.message;
654 // if (error.response.status === 401) { 658 // if (error.response.status === 401) {
655 // this.$router.replace({ path: "/" }); 659 // this.$router.replace({ path: "/" });
656 // this.$store.dispatch("setToken", null); 660 // this.$store.dispatch("setToken", null);
657 // this.$store.dispatch("Id", null); 661 // this.$store.dispatch("Id", null);
658 // } 662 // }
659 // }); 663 // });
660 // }, 664 // },
661 // editItem(item) { 665 // editItem(item) {
662 // console.log("item", item); 666 // console.log("item", item);
663 // this.editedIndex = this.ScheduleData.indexOf(item); 667 // this.editedIndex = this.ScheduleData.indexOf(item);
664 // this.editedItem = Object.assign({}, item); 668 // this.editedItem = Object.assign({}, item);
665 // this.editedItem.classId = this.editedItem.classId._id; 669 // this.editedItem.classId = this.editedItem.classId._id;
666 // this.editedItem.sectionId = this.editedItem.sectionId._id; 670 // this.editedItem.sectionId = this.editedItem.sectionId._id;
667 // this.editedItem.date = 671 // this.editedItem.date =
668 // this.editedItem.date != undefined 672 // this.editedItem.date != undefined
669 // ? (this.editedItem.date = this.editedItem.date.substring(0, 10)) 673 // ? (this.editedItem.date = this.editedItem.date.substring(0, 10))
670 // : (this.editedItem.date = ""); 674 // : (this.editedItem.date = "");
671 // this.dialog = true; 675 // this.dialog = true;
672 // }, 676 // },
673 // profile(item) { 677 // profile(item) {
674 // this.editedIndex = this.ScheduleData.indexOf(item); 678 // this.editedIndex = this.ScheduleData.indexOf(item);
675 // this.editedItem = Object.assign({}, item); 679 // this.editedItem = Object.assign({}, item);
676 // this.editedItem.classId = this.editedItem.classId.classNum; 680 // this.editedItem.classId = this.editedItem.classId.classNum;
677 // this.editedItem.sectionId = this.editedItem.sectionId.name; 681 // this.editedItem.sectionId = this.editedItem.sectionId.name;
678 // this.dialog1 = true; 682 // this.dialog1 = true;
679 // }, 683 // },
680 // deleteSchedule(item) { 684 // deleteSchedule(item) {
681 // let deleteSchedule = { 685 // let deleteSchedule = {
682 // scheduleId: item._id 686 // scheduleId: item._id
683 // }; 687 // };
684 // http() 688 // http()
685 // .delete( 689 // .delete(
686 // "/deleteSchedule", 690 // "/deleteSchedule",
687 // confirm("Are you sure you want to Delete this?") && { 691 // confirm("Are you sure you want to Delete this?") && {
688 // params: deleteSchedule 692 // params: deleteSchedule
689 // } 693 // }
690 // ) 694 // )
691 // .then(response => { 695 // .then(response => {
692 // this.snackbar = true; 696 // this.snackbar = true;
693 // this.text = "Successfully Delete Schedule "; 697 // this.text = "Successfully Delete Schedule ";
694 // this.getStudentsList(); 698 // this.getStudentsList();
695 // }) 699 // })
696 // .catch(error => { 700 // .catch(error => {
697 // // console.log(error); 701 // // console.log(error);
698 // }); 702 // });
699 // }, 703 // },
700 activeTab(type) { 704 activeTab(type) {
701 switch (type) { 705 switch (type) {
702 case "existing": 706 case "existing":
703 this.newActive = false; 707 this.newActive = false;
704 this.isActive = true; 708 this.isActive = true;
705 break; 709 break;
706 710
707 default: 711 default:
708 this.newActive = true; 712 this.newActive = true;
709 this.isActive = false; 713 this.isActive = false;
710 break; 714 break;
711 } 715 }
712 }, 716 },
713 // close() { 717 // close() {
714 // this.dialog = false; 718 // this.dialog = false;
715 // }, 719 // },
716 // close1() { 720 // close1() {
717 // this.dialog1 = false; 721 // this.dialog1 = false;
718 // }, 722 // },
719 // clear() { 723 // clear() {
720 // this.$refs.form.reset(); 724 // this.$refs.form.reset();
721 // this.disable = false; 725 // this.disable = false;
722 // this.loading = false; 726 // this.loading = false;
723 // }, 727 // },
724 // save() { 728 // save() {
725 // this.editedItem.scheduleId = this.editedItem._id; 729 // this.editedItem.scheduleId = this.editedItem._id;
726 // http() 730 // http()
727 // .put("/updateSchedule", this.editedItem) 731 // .put("/updateSchedule", this.editedItem)
728 // .then(response => { 732 // .then(response => {
729 // this.snackbar = true; 733 // this.snackbar = true;
730 // this.text = "Successfully Edit Exam Schedule"; 734 // this.text = "Successfully Edit Exam Schedule";
731 // this.color = "green"; 735 // this.color = "green";
732 // this.getSchedulesList(); 736 // this.getSchedulesList();
733 // this.close(); 737 // this.close();
734 // }) 738 // })
735 // .catch(error => { 739 // .catch(error => {
736 // this.snackbar = true; 740 // this.snackbar = true;
737 // this.text = error.response.data.message; 741 // this.text = error.response.data.message;
738 // this.color = "red"; 742 // this.color = "red";
739 // }); 743 // });
740 // }, 744 // },
741 getClass() { 745 getClass() {
742 this.showLoader = true; 746 this.showLoader = true;
743 http() 747 http()
744 .get("/getClassesList", { 748 .get("/getClassesList", {
745 headers: { Authorization: "Bearer " + this.token } 749 headers: { Authorization: "Bearer " + this.token }
746 }) 750 })
747 .then(response => { 751 .then(response => {
748 this.classList = response.data.data; 752 this.classList = response.data.data;
749 this.showLoader = false; 753 this.showLoader = false;
750 // console.log("getClassesList=====>",this.addclass) 754 // console.log("getClassesList=====>",this.addclass)
751 }) 755 })
752 .catch(err => { 756 .catch(err => {
753 // console.log("err====>", err); 757 // console.log("err====>", err);
754 this.showLoader = false; 758 this.showLoader = false;
755 }); 759 });
756 }, 760 },
757 getSections(_id) { 761 getSections(_id) {
758 this.showLoader = true; 762 this.showLoader = true;
759 for (let i = 0; i < this.classList.length; i++) { 763 for (let i = 0; i < this.classList.length; i++) {
760 if (_id == this.classList[i]._id) { 764 if (_id == this.classList[i]._id) {
761 // console.log(this.classList[i].subjects); 765 // console.log(this.classList[i].subjects);
762 this.subjects = this.classList[i].subjects; 766 this.subjects = this.classList[i].subjects;
763 } 767 }
764 } 768 }
765 http() 769 http()
766 .get( 770 .get(
767 "/getSectionsList", 771 "/getSectionsList",
768 { params: { classId: _id } }, 772 { params: { classId: _id } },
769 { 773 {
770 headers: { Authorization: "Bearer " + this.token } 774 headers: { Authorization: "Bearer " + this.token }
771 } 775 }
772 ) 776 )
773 .then(response => { 777 .then(response => {
774 this.addSection = response.data.data; 778 this.addSection = response.data.data;
775 this.showLoader = false; 779 this.showLoader = false;
776 }) 780 })
777 .catch(err => { 781 .catch(err => {
778 // console.log("err====>", err); 782 // console.log("err====>", err);
779 }); 783 });
780 }, 784 },
781 getExamList() { 785 getExamList() {
782 this.showLoader = true; 786 this.showLoader = true;
783 this.loadingSearch = true; 787 this.loadingSearch = true;
784 http() 788 http()
785 .get("/getExamsList", { 789 .get("/getExamsList", {
786 headers: { Authorization: "Bearer " + this.token } 790 headers: { Authorization: "Bearer " + this.token }
787 }) 791 })
788 .then(response => { 792 .then(response => {
789 this.examList = response.data.data; 793 this.examList = response.data.data;
790 this.showLoader = false; 794 this.showLoader = false;
791 this.loadingSearch = false; 795 this.loadingSearch = false;
792 }) 796 })
793 .catch(error => { 797 .catch(error => {
794 // console.log("err====>", err); 798 // console.log("err====>", err);
795 this.showLoader = false; 799 this.showLoader = false;
796 this.loadingSearch = false; 800 this.loadingSearch = false;
797 this.snackbar = true; 801 this.snackbar = true;
798 this.text = error.response.data.message; 802 this.text = error.response.data.message;
799 if (error.response.status === 401) { 803 if (error.response.status === 401) {
800 this.$router.replace({ path: "/" }); 804 this.$router.replace({ path: "/" });
801 this.$store.dispatch("setToken", null); 805 this.$store.dispatch("setToken", null);
802 this.$store.dispatch("Id", null); 806 this.$store.dispatch("Id", null);
803 } 807 }
804 }); 808 });
805 }, 809 },
806 findStudents() { 810 findStudents() {
807 if (this.$refs.form.validate()) { 811 if (this.$refs.form.validate()) {
808 this.showLoader = true; 812 this.showLoader = true;
809 http() 813 http()
810 .get("/getStudentWithClass", { 814 .get("/getStudentWithClass", {
811 params: { 815 params: {
812 classId: this.addMark.classId, 816 classId: this.addMark.classId,
813 sectionId: this.addMark.sectionId 817 sectionId: this.addMark.sectionId
814 } 818 }
815 }) 819 })
816 .then(response => { 820 .then(response => {
817 this.getStudentData = response.data.data; 821 this.getStudentData = response.data.data;
818 this.showLoader = false; 822 this.showLoader = false;
819 // console.log("getSectionsList=====>", response.data.data); 823 // console.log("getSectionsList=====>", response.data.data);
820 this.showLoader = true; 824 this.showLoader = true;
821 http() 825 http()
822 .get("/getMarkDistributionsList", { 826 .get("/getMarkDistributionsList", {
823 params: this.addMark 827 params: this.addMark
824 }) 828 })
825 .then(response => { 829 .then(response => {
826 this.showLoader = false; 830 this.showLoader = false;
827 // console.log("getSectionsList=====>", response.data.data); 831 // console.log("getSectionsList=====>", response.data.data);
828 for (var i = 0; i < response.data.data.length; i++) { 832 for (var i = 0; i < response.data.data.length; i++) {
829 this.headerOfMark.push({ 833 this.headerOfMark.push({
830 text: 834 text:
831 response.data.data[i].distributionType + 835 response.data.data[i].distributionType +
832 " (" + 836 " (" +
833 response.data.data[i].markValue + 837 response.data.data[i].markValue +
834 ")", 838 ")",
835 sortable: false, 839 sortable: false,
836 align: "center" 840 align: "center"
837 }); 841 });
838 } 842 }
839 for (var i = 0; i < this.getStudentData.length; i++) { 843 for (var i = 0; i < this.getStudentData.length; i++) {
840 this.getStudentData[i].marksObtained = []; 844 this.getStudentData[i].marksObtained = [];
841 for (var j = 0; j < response.data.data.length; j++) { 845 for (var j = 0; j < response.data.data.length; j++) {
842 this.getStudentData[i].marksObtained.push({ 846 this.getStudentData[i].marksObtained.push({
843 markDistributionId: response.data.data[j]._id, 847 markDistributionId: response.data.data[j]._id,
844 marksScored: 0 848 marksScored: 0
845 }); 849 });
846 } 850 }
847 } 851 }
848 console.log("this.getStudentData", this.getStudentData); 852 console.log("this.getStudentData", this.getStudentData);
849 }) 853 })
850 .catch(error => { 854 .catch(error => {
851 console.log("err====>", error); 855 console.log("err====>", error);
852 this.showLoader = false; 856 this.showLoader = false;
853 }); 857 });
854 }) 858 })
855 .catch(error => { 859 .catch(error => {
856 console.log("err====>", error); 860 console.log("err====>", error);
857 this.showLoader = false; 861 this.showLoader = false;
858 }); 862 });
859 } 863 }
860 }, 864 },
861 submit() { 865 submit() {
862 let studentsMarks = []; 866 let studentsMarks = [];
863 for (var j = 0; j < this.getStudentData.length; j++) { 867 for (var j = 0; j < this.getStudentData.length; j++) {
864 studentsMarks.push({ 868 studentsMarks.push({
865 studentId: this.getStudentData[j]._id, 869 studentId: this.getStudentData[j]._id,
866 marksObtained: this.getStudentData[j].marksObtained 870 marksObtained: this.getStudentData[j].marksObtained
867 }); 871 });
868 } 872 }
869 // console.log("marksObtaine----marksObtained", studentsMarks); 873 // console.log("marksObtaine----marksObtained", studentsMarks);
870 let markData = { 874 let markData = {
871 examId: this.addMark.examId, 875 examId: this.addMark.examId,
872 classId: this.addMark.classId, 876 classId: this.addMark.classId,
873 sectionId: this.addMark.sectionId, 877 sectionId: this.addMark.sectionId,
874 subjectId: this.addMark.subjectId, 878 subjectId: this.addMark.subjectId,
875 studentsMarks: studentsMarks 879 studentsMarks: studentsMarks
876 }; 880 };
877 console.log("markData", markData); 881 console.log("markData", markData);
878 if (this.$refs.form.validate()) { 882 if (this.$refs.form.validate()) {
879 http() 883 http()
880 .post("/createMark", markData) 884 .post("/createMark", markData)
881 .then(response => { 885 .then(response => {
882 this.snackbar = true; 886 this.snackbar = true;
883 this.text = response.data.message; 887 this.text = response.data.message;
884 this.color = "green"; 888 this.color = "green";
885 this.loading = false; 889 this.loading = false;
886 this.clear(); 890 this.clear();
887 }) 891 })
888 .catch(error => { 892 .catch(error => {
889 if ((this.snackbar = true)) { 893 if ((this.snackbar = true)) {
890 this.text = error.response.data.message; 894 this.text = error.response.data.message;
891 this.color = "red"; 895 this.color = "red";
892 } 896 }
893 }); 897 });
894 } 898 }
895 }, 899 },
896 getStudents() { 900 getStudents() {
897 this.showLoader = true; 901 this.showLoader = true;
898 http() 902 http()
899 .get("/getStudentWithClass", { 903 .get("/getStudentWithClass", {
900 params: { 904 params: {
901 classId: this.getMark.classId, 905 classId: this.getMark.classId,
902 sectionId: this.getMark.sectionId 906 sectionId: this.getMark.sectionId
903 } 907 }
904 }) 908 })
905 .then(response => { 909 .then(response => {
906 this.getStudentsList = response.data.data; 910 this.getStudentsList = response.data.data;
907 this.showLoader = false; 911 this.showLoader = false;
908 // console.log("getSectionsList=====>", response.data.data); 912 // console.log("getSectionsList=====>", response.data.data);
909 }) 913 })
910 .catch(error => { 914 .catch(error => {
911 console.log("err====>", error); 915 console.log("err====>", error);
912 this.showLoader = false; 916 this.showLoader = false;
913 }); 917 });
914 } 918 }
915 }, 919 },
916 mounted() { 920 mounted() {
917 this.token = this.$store.state.token; 921 this.token = this.$store.state.token;
918 // this.getSchedulesList(); 922 // this.getSchedulesList();
919 this.getClass(); 923 this.getClass();
920 this.getExamList(); 924 this.getExamList();
921 }, 925 },
922 created() { 926 created() {
923 this.$root.$on("app:search", search => { 927 this.$root.$on("app:search", search => {
924 this.search = search; 928 this.search = search;
925 }); 929 });
926 }, 930 },
927 beforeDestroy() { 931 beforeDestroy() {
928 // dont forget to remove the listener 932 // dont forget to remove the listener
929 this.$root.$off("app:search"); 933 this.$root.$off("app:search");
930 } 934 }
931 }; 935 };
932 </script> 936 </script>
933 <style scoped> 937 <style scoped>
934 .active { 938 .active {
935 background-color: gray; 939 background-color: gray;
936 color: white !important; 940 color: white !important;
937 } 941 }
938 .activebtn { 942 .activebtn {
939 color: black !important; 943 color: black !important;
940 } 944 }
941 .markTable { 945 .markTable {
942 max-width: 80px !important; 946 max-width: 80px !important;
943 } 947 }
944 </style> 948 </style>
src/pages/Mark/promotion.vue
Diff comments   View file @495e403
1 <template> 1 <template>
2 <v-app id="login"> 2 <v-app id="login">
3 <v-container fluid> 3 <v-container fluid>
4 <v-layout>
5 <v-card-actions>
6 <v-layout>
7 <h3 class="right">Promotion</h3>
8 </v-layout>
9 <v-spacer></v-spacer>
10 </v-card-actions>
11 </v-layout>
4 <v-card class="px-3 grey lighten-2" flat> 12 <v-card class="px-3 grey lighten-2" flat>
5 <v-flex xs12> 13 <v-flex xs12>
6 <v-layout wrap> 14 <v-layout wrap>
7 <v-flex xs12 sm12 md3> 15 <v-flex xs12 sm12 md3>
8 <!-- <v-layout> -->
9 <v-flex md12 class="mt-4 body-1"> 16 <v-flex md12 class="mt-4 body-1">
10 <label>Academic Year :</label> 17 <label>Academic Year :</label>
11 </v-flex> 18 </v-flex>
12 <v-flex md10> 19 <v-flex md10>
13 <v-select :items="acedemicYear" label="Select Academic Year"></v-select> 20 <v-select :items="acedemicYear" label="Select Academic Year"></v-select>
14 </v-flex> 21 </v-flex>
15 <!-- </v-layout> -->
16 </v-flex> 22 </v-flex>
17 <v-flex xs12 sm12 md3> 23 <v-flex xs12 sm12 md3>
18 <!-- <v-layout> -->
19 <v-flex md12 class="mt-4 body-1"> 24 <v-flex md12 class="mt-4 body-1">
20 <label class>Class :</label> 25 <label class>Class :</label>
21 </v-flex> 26 </v-flex>
22 <v-flex md10 class="ml-2"> 27 <v-flex md10 class="ml-2">
23 <v-select :items="acedemicYear" label="Select Academic Year"></v-select> 28 <v-select
29 v-model="promtion.classId"
30 label="Select your class"
31 type="text"
32 :rules="classRules"
33 :items="classList"
34 item-text="classNum"
35 item-value="_id"
36 required
37 ></v-select>
24 </v-flex> 38 </v-flex>
25 <!-- </v-layout> -->
26 </v-flex> 39 </v-flex>
27 <v-flex xs12 sm12 md3> 40 <v-flex xs12 sm12 md3>
28 <v-flex md12 class="mt-4 body-1"> 41 <v-flex md12 class="mt-4 body-1">
29 <label>Promotion Academic Year :</label> 42 <label>Promotion Academic Year :</label>
30 </v-flex> 43 </v-flex>
31 <v-flex md10> 44 <v-flex md10>
32 <v-select :items="acedemicYear" label="Select Promotion Academic Year"></v-select> 45 <v-select :items="acedemicYear" label="Select Promotion Academic Year"></v-select>
33 </v-flex> 46 </v-flex>
34 </v-flex> 47 </v-flex>
35 <v-flex xs12 sm12 md3> 48 <v-flex xs12 sm12 md3>
36 <v-flex md12 class="mt-4 body-1"> 49 <v-flex md12 class="mt-4 body-1">
37 <label class>Promotion Class :</label> 50 <label class>Promotion Class :</label>
38 </v-flex> 51 </v-flex>
39 <v-flex md10 class="ml-2"> 52 <v-flex md10 class="ml-2">
40 <v-select :items="acedemicYear" label="Select Promotion Class"></v-select> 53 <v-select :items="acedemicYear" label="Select Promotion Class"></v-select>
41 </v-flex> 54 </v-flex>
42 </v-flex> 55 </v-flex>
43 </v-layout> 56 </v-layout>
44 </v-flex> 57 </v-flex>
45 </v-card> 58 </v-card>
46 <v-container class="pb-0 pt-5"> 59 <v-container class="pb-0">
47 <v-card class="px-3 grey lighten-2" flat> 60 <v-card class="px-3 grey lighten-2" flat>
48 <v-flex xs12> 61 <v-flex xs12>
49 <v-layout> 62 <v-layout>
50 <v-flex xs12 sm12 md12> 63 <v-flex xs12 sm12 md12>
51 <v-layout> 64 <v-layout>
52 <!-- <p>{{ radios || 'null' }}</p> -->
53 <v-radio-group v-model="radios" :mandatory="false"> 65 <v-radio-group v-model="radios" :mandatory="false">
54 <v-layout> 66 <v-layout>
55 <v-flex xs12 sm12 md6> 67 <v-flex xs12 sm12 md6>
56 <v-layout> 68 <v-layout>
57 <v-radio label="Normal" value="radio-1" class="mx-auto"></v-radio> 69 <v-radio label="Normal" value="radio-1" class="mx-auto"></v-radio>
58 </v-layout> 70 </v-layout>
59 </v-flex> 71 </v-flex>
60 <v-flex xs12 sm12 md6> 72 <v-flex xs12 sm12 md6>
61 <v-layout> 73 <v-layout>
62 <v-radio label="Advance" value="radio-2" class="mx-auto"></v-radio> 74 <v-radio label="Advance" value="radio-2" class="mx-auto"></v-radio>
63 </v-layout> 75 </v-layout>
64 </v-flex> 76 </v-flex>
65 </v-layout> 77 </v-layout>
66 </v-radio-group> 78 </v-radio-group>
67 </v-layout> 79 </v-layout>
68 </v-flex> 80 </v-flex>
69 </v-layout> 81 </v-layout>
70 </v-flex> 82 </v-flex>
71 </v-card> 83 </v-card>
72 </v-container> 84 </v-container>
73 <v-container fluid> 85 <v-container fluid>
74 <!-- <v-flex xs12> --> 86 <!-- <v-flex xs12> -->
75 <v-layout wrap> 87 <v-layout wrap>
76 <v-flex xs12 sm12 md6> 88 <v-flex xs12 sm12 md6>
77 <v-layout> 89 <v-layout>
78 <v-flex xs12 sm12 md11> 90 <v-flex xs12 sm12 md11>
79 <v-card class="px-3 grey lighten-2" flat> 91 <v-card class="px-3 grey lighten-2" flat>
80 <v-layout wrap> 92 <v-layout wrap>
81 <v-flex xs12 sm12 md5 class="mt-4 body-1"> 93 <v-flex xs12 sm12 md5 class="mt-4 body-1">
82 <label>Exam</label> 94 <label>Exam</label>
83 </v-flex> 95 </v-flex>
84 <v-flex sm12 xs12 md7> 96 <v-flex sm12 xs12 md7>
85 <!-- <p>{{ selected }}</p> -->
86 <v-checkbox v-model="selected" label="FIRST TERMINAL" value="John"></v-checkbox> 97 <v-checkbox v-model="selected" label="FIRST TERMINAL" value="John"></v-checkbox>
87 <v-checkbox 98 <v-checkbox
88 v-model="selected" 99 v-model="selected"
89 label="SECOND TERMINAL" 100 label="SECOND TERMINAL"
90 value="Jacob" 101 value="Jacob"
91 class="mt-0" 102 class="mt-0"
92 ></v-checkbox> 103 ></v-checkbox>
93 <v-checkbox v-model="selected" label="Test07" value="Jacob" class="mt-0"></v-checkbox> 104 <v-checkbox v-model="selected" label="Test07" value="Jacobs" class="mt-0"></v-checkbox>
94 </v-flex> 105 </v-flex>
95 </v-layout> 106 </v-layout>
96 </v-card> 107 </v-card>
97 </v-flex> 108 </v-flex>
98 </v-layout> 109 </v-layout>
99 </v-flex> 110 </v-flex>
100 <v-flex xs12 sm12 md6> 111 <v-flex xs12 sm12 md6>
101 <v-layout wrap> 112 <v-layout wrap>
102 <v-flex xs12 sm12 md12> 113 <v-flex xs12 sm12 md12>
103 <v-card class="px-3 grey lighten-2" flat height="160"> 114 <v-card class="px-3 grey lighten-2" flat height="160">
104 <v-layout wrap> 115 <v-layout wrap>
105 <v-flex xs12 sm12 md5 class="mt-4 body-1"> 116 <v-flex xs12 sm12 md5 class="mt-4 body-1">
106 <label>Mark Percentage</label> 117 <label>Mark Percentage</label>
107 </v-flex> 118 </v-flex>
108 <v-flex xs12 sm12 md7> 119 <v-flex xs12 sm12 md7>
109 <!-- <p>{{ selected }}</p> -->
110 <v-checkbox v-model="selected" label="Exam " value="John"></v-checkbox> 120 <v-checkbox v-model="selected" label="Exam " value="John"></v-checkbox>
111 <v-checkbox v-model="selected" label="ASSIGNMENT" value="Jacob" class="mt-0"></v-checkbox> 121 <v-checkbox v-model="selected" label="ASSIGNMENT" value="Jacob" class="mt-0"></v-checkbox>
112 </v-flex> 122 </v-flex>
113 </v-layout> 123 </v-layout>
114 </v-card> 124 </v-card>
115 </v-flex> 125 </v-flex>
116 </v-layout> 126 </v-layout>
117 </v-flex> 127 </v-flex>
118 </v-layout> 128 </v-layout>
119 </v-container> 129 </v-container>
120 <v-card class="px-3 grey lighten-2" flat> 130 <v-card class="px-3 grey lighten-2" flat>
121 <v-flex xs12> 131 <v-flex xs12>
122 <v-layout wrap> 132 <v-layout wrap>
123 <v-flex xs12 sm12 md3> 133 <v-flex xs12 sm12 md3>
124 <v-flex md12 class="mt-4 body-1"> 134 <v-flex md12 class="mt-4 body-1">
125 <label>HINDI Pass Mark :</label> 135 <label>HINDI Pass Mark :</label>
126 </v-flex> 136 </v-flex>
127 <v-flex md10> 137 <v-flex md10>
128 <v-text-field v-model="passmark.hindi" placeholder="fill Hindi Pass Mark"></v-text-field> 138 <v-text-field v-model="passmark.hindi" placeholder="fill Hindi Pass Mark"></v-text-field>
129 </v-flex> 139 </v-flex>
130 </v-flex> 140 </v-flex>
131 <v-flex xs12 sm12 md3> 141 <v-flex xs12 sm12 md3>
132 <v-flex md12 class="mt-4 body-1"> 142 <v-flex md12 class="mt-4 body-1">
133 <label class>ENGLISH Pass Mark :</label> 143 <label class>ENGLISH Pass Mark :</label>
134 </v-flex> 144 </v-flex>
135 <v-flex md10 class="ml-2"> 145 <v-flex md10 class="ml-2">
136 <v-text-field v-model="passmark.english" placeholder="fill English Pass Mark"></v-text-field> 146 <v-text-field v-model="passmark.english" placeholder="fill English Pass Mark"></v-text-field>
137 </v-flex> 147 </v-flex>
138 </v-flex> 148 </v-flex>
139 <v-flex xs12 sm12 md3> 149 <v-flex xs12 sm12 md3>
140 <v-flex md12 class="mt-4 body-1"> 150 <v-flex md12 class="mt-4 body-1">
141 <label>MATHEMATICS Pass Mark :</label> 151 <label>MATHEMATICS Pass Mark :</label>
142 </v-flex> 152 </v-flex>
143 <v-flex md10> 153 <v-flex md10>
144 <v-text-field v-model="passmark.mathematics" placeholder="fill Mathematics Pass Mark"></v-text-field> 154 <v-text-field
155 v-model="passmark.mathematics"
156 placeholder="fill Mathematics Pass Mark"
157 ></v-text-field>
145 </v-flex> 158 </v-flex>
146 </v-flex> 159 </v-flex>
147 <!-- <v-flex xs12 sm12 md3> 160 <!-- <v-flex xs12 sm12 md3>
148 <v-flex md12 class="mt-4 body-1"> 161 <v-flex md12 class="mt-4 body-1">
149 <label class>Promotion Class :</label> 162 <label class>Promotion Class :</label>
150 </v-flex> 163 </v-flex>
151 <v-flex md10 class="ml-2"> 164 <v-flex md10 class="ml-2">
152 <v-select :items="acedemicYear" label="Select Promotion Class"></v-select> 165 <v-select :items="acedemicYear" label="Select Promotion Class"></v-select>
153 </v-flex> 166 </v-flex>
154 </v-flex>--> 167 </v-flex>-->
155 </v-layout> 168 </v-layout>
156 </v-flex> 169 </v-flex>
157 </v-card> 170 </v-card>
158 <v-layout> 171 <v-layout>
159 <v-flex xs10 sm10 md4 class="mx-auto mt-4"> 172 <v-flex xs10 sm10 md4 class="mx-auto mt-4">
160 <v-btn class="black" dark block round>Promotion Mark Setting</v-btn> 173 <v-btn class="black" dark block round>Promotion Mark Setting</v-btn>
161 </v-flex> 174 </v-flex>
162 </v-layout> 175 </v-layout>
163 </v-container> 176 </v-container>
164 </v-app> 177 </v-app>
165 </template> 178 </template>
166 179
167 <script> 180 <script>
181 import http from "@/Services/http.js";
182
168 export default { 183 export default {
169 data() { 184 data() {
170 return { 185 return {
171 radios: "radio-1", 186 radios: "radio-1",
172 acedemicYear: [], 187 acedemicYear: [],
188 classList: [],
189 promtion: {},
173 passmark: { 190 passmark: {
174 hindi: "40", 191 hindi: "40",
175 english: "40", 192 english: "40",
176 mathematics: "40" 193 mathematics: "40"
177 }, 194 },
178 selected: ["John"] 195 selected: ["John", "Jacob", "Jacobs"],
196 token: ""
179 }; 197 };
198 },
199 mounted() {
200 this.token = this.$store.state.token;
201 this.getClass();
202 },
203 methods: {
204 getClass() {
205 http()
206 .get("/getClassesList", {
207 headers: { Authorization: "Bearer " + this.token }
208 })
209 .then(response => {
210 this.classList = response.data.data;
211 })
src/pages/Mark/viewMark.vue
Diff comments   View file @495e403
1 <template> 1 <template>
2 <v-app id="pages-dasboard"> 2 <v-app id="pages-dasboard">
3 <!-- ****** Edit multiple INVOICE ****** --> 3 <!-- ****** PROFILE MARK ****** -->
4
4 <v-container fluid grid-list-md> 5 <v-container fluid grid-list-md>
5 <v-flex xs12 sm12> 6 <v-flex xs12 sm12>
6 <v-container fluid> 7 <v-container fluid>
7 <v-layout wrap> 8 <v-layout wrap>
8 <v-flex xs12 sm12 md3 class="mt-4"> 9 <v-flex xs12 sm12 md3 class="mt-4">
9 <v-card flat> 10 <v-card flat>
10 <v-toolbar dark class="fixcolors" flat> 11 <v-toolbar dark class="fixcolors" flat>
11 <v-spacer></v-spacer> 12 <v-spacer></v-spacer>
12 <v-toolbar-title> 13 <v-toolbar-title>
13 <h3>Profile</h3> 14 <h3>Profile</h3>
14 </v-toolbar-title> 15 </v-toolbar-title>
15 <v-spacer></v-spacer> 16 <v-spacer></v-spacer>
16 </v-toolbar> 17 </v-toolbar>
17 <v-card-text> 18 <v-card-text>
18 <v-container> 19 <v-container>
19 <v-layout wrap v-for="(mark,i) in markData" :key="i"> 20 <v-layout wrap v-for="(mark,i) in markData" :key="i">
20 <v-flex xs12> 21 <v-flex xs12>
21 <v-layout> 22 <v-layout>
22 <v-flex 23 <v-flex
23 xs12 24 xs12
24 class="text-xs-center text-sm-center text-md-center text-lg-center" 25 class="text-xs-center text-sm-center text-md-center text-lg-center"
25 > 26 >
26 <v-avatar size="100px"> 27 <v-avatar size="100px">
27 <img 28 <img
28 src="/static/icon/user.png" 29 src="/static/icon/user.png"
29 v-if="!mark.studentsMarks[0].studentId.profilePicUrl" 30 v-if="!mark.studentsMarks[0].studentId.profilePicUrl"
30 /> 31 />
31 <img 32 <img
32 :src="mark.studentsMarks[0].studentId.profilePicUrl" 33 :src="mark.studentsMarks[0].studentId.profilePicUrl"
33 v-else-if="mark.studentsMarks[0].studentId.profilePicUrl" 34 v-else-if="mark.studentsMarks[0].studentId.profilePicUrl"
34 /> 35 />
35 </v-avatar> 36 </v-avatar>
36 </v-flex> 37 </v-flex>
37 </v-layout> 38 </v-layout>
38 <v-layout> 39 <v-layout>
39 <v-flex xs12 sm12> 40 <v-flex xs12 sm12>
40 <h3 class="text-xs-center"> 41 <h3 class="text-xs-center">
41 <b>{{ mark.studentsMarks[0].studentId.name }}</b> 42 <b>{{ mark.studentsMarks[0].studentId.name }}</b>
42 </h3> 43 </h3>
43 <p class="text-xs-center grey--text">Student</p> 44 <p class="text-xs-center grey--text">Student</p>
44 </v-flex> 45 </v-flex>
45 </v-layout> 46 </v-layout>
46 <v-layout style="border: 1px solid lightgrey;"> 47 <v-layout style="border: 1px solid lightgrey;">
47 <v-flex xs6 sm6 class="py-0"> 48 <v-flex xs6 sm6 class="py-0">
48 <h4 class="right"> 49 <h4 class="right">
49 <b>Roll No :</b> 50 <b>Roll No :</b>
50 </h4> 51 </h4>
51 </v-flex> 52 </v-flex>
52 <v-flex sm6 xs6 class="py-0"> 53 <v-flex sm6 xs6 class="py-0">
53 <h4>{{ mark.studentsMarks[0].studentId.rollNo }}</h4> 54 <h4>{{ mark.studentsMarks[0].studentId.rollNo }}</h4>
54 </v-flex> 55 </v-flex>
55 </v-layout> 56 </v-layout>
56 <v-layout style="border: 1px solid lightgrey;"> 57 <v-layout style="border: 1px solid lightgrey;">
57 <v-flex xs6 sm6 class="py-0"> 58 <v-flex xs6 sm6 class="py-0">
58 <h4 class="right"> 59 <h4 class="right">
59 <b>Class :</b> 60 <b>Class :</b>
60 </h4> 61 </h4>
61 </v-flex> 62 </v-flex>
62 <v-flex sm6 xs6 class="right py-0"> 63 <v-flex sm6 xs6 class="right py-0">
63 <h4>{{ mark.classId.classNum }}</h4> 64 <h4>{{ mark.classId.classNum }}</h4>
64 </v-flex> 65 </v-flex>
65 </v-layout> 66 </v-layout>
66 <v-layout style="border: 1px solid lightgrey;"> 67 <v-layout style="border: 1px solid lightgrey;">
67 <v-flex xs6 sm6 class="right py-0"> 68 <v-flex xs6 sm6 class="right py-0">
68 <h4 class="right"> 69 <h4 class="right">
69 <b>Section :</b> 70 <b>Section :</b>
70 </h4> 71 </h4>
71 </v-flex> 72 </v-flex>
72 <v-flex sm6 xs6 class="right py-0"> 73 <v-flex sm6 xs6 class="right py-0">
73 <h4>{{ mark.sectionId.name}}</h4> 74 <h4>{{ mark.sectionId.name}}</h4>
74 </v-flex> 75 </v-flex>
75 </v-layout> 76 </v-layout>
76 </v-flex> 77 </v-flex>
77 </v-layout> 78 </v-layout>
78 </v-container> 79 </v-container>
79 </v-card-text> 80 </v-card-text>
80 </v-card> 81 </v-card>
81 </v-flex> 82 </v-flex>
83
84 <!-- ****** TABLE DATA MARK ****** -->
85
82 <v-flex xs12 sm12 md9 class="mt-4"> 86 <v-flex xs12 sm12 md9 class="mt-4">
83 <v-card> 87 <v-card>
84 <v-toolbar dark class="fixcolors" flat> 88 <v-toolbar dark class="fixcolors" flat>
85 <v-spacer></v-spacer> 89 <v-spacer></v-spacer>
86 <v-toolbar-title> 90 <v-toolbar-title>
87 <h3>Mark</h3> 91 <h3>Mark</h3>
88 </v-toolbar-title> 92 </v-toolbar-title>
89 <v-spacer></v-spacer> 93 <v-spacer></v-spacer>
90 </v-toolbar> 94 </v-toolbar>
91 <v-card-title 95 <v-card-title
92 v-for="(markList,i) in markData" 96 v-for="(markList,i) in markData"
93 :key="i" 97 :key="i"
94 class="subheading" 98 class="subheading"
95 >{{ markList.examId.examName }}</v-card-title> 99 >{{ markList.examId.examName }}</v-card-title>
96 <table class="feeTypeTable tableRsponsive"> 100 <table class="feeTypeTable tableRsponsive">
97 <tr class="info white--text"> 101 <tr class="info white--text">
98 <th rowspan="2">Subject</th> 102 <th rowspan="2">Subject</th>
99 <th 103 <th
100 colspan="2" 104 colspan="2"
101 v-for="(markDistribution,i) in markDistributions" 105 v-for="(markDistribution,i) in markDistributions"
102 :key="i " 106 :key="i "
103 >{{ markDistribution.markDistributionId.distributionType}}</th> 107 >{{ markDistribution.markDistributionId.distributionType}}</th>
104 <!-- <th colspan="2">ASSIGNMENT</th> --> 108 <!-- <th colspan="2">ASSIGNMENT</th> -->
105 <th colspan="3">Total</th> 109 <th colspan="3">Total</th>
106 </tr> 110 </tr>
107 <tr class="info white--text"> 111 <tr class="info white--text">
108 <th 112 <th
109 class="bg-sky" 113 class="bg-sky"
110 v-for="(markDistribution,i) in markDistributions" 114 v-for="(markDistribution,i) in markDistributions"
111 :key="i" 115 :key="i"
112 >{{i === 0 ? 'Mark' : 'Highest Mark'}}</th> 116 >{{i === 0 ? 'Mark' : 'Highest Mark'}}</th>
113 <th 117 <th
114 class="bg-sky-light" 118 class="bg-sky-light"
115 v-for="(markDistribution,i) in markDistributions" 119 v-for="(markDistribution,i) in markDistributions"
116 :key="i" 120 :key="i"
117 >{{i === 0 ? 'Mark' : 'Highest Mark'}}</th> 121 >{{i === 0 ? 'Mark' : 'Highest Mark'}}</th>
118 <th class="bg-sky">Mark</th> 122 <th class="bg-sky">Mark</th>
119 <th class="bg-purple">Point</th> 123 <th class="bg-purple">Point</th>
120 <th class="bg-skyDark">Grade</th> 124 <th class="bg-skyDark">Grade</th>
121 </tr> 125 </tr>
122 <!-- </tr> --> 126 <!-- </tr> -->
123 <tr v-for="(mark,i) in markData" :key="i"> 127 <tr v-for="(mark,i) in markData" :key="i">
124 <td>{{mark.classId.subjects[0].subjectName}}</td> 128 <td>{{ mark.classId.subjects[0].subjectName }}</td>
125 <td 129 <td
126 v-for="(markDistribution,i) in markParticularDistributionData" 130 v-for="(markDistribution,i) in markParticularDistributionData"
127 :key="i" 131 :key="i"
128 >{{ markDistribution }}</td> 132 >{{ markDistribution }}</td>
129 <!-- <td> 133 <!-- <td>
130 10 134 10
131 </td> 135 </td>
132 <td> 136 <td>
133 10 137 10
134 </td> 138 </td>
135 <td> 139 <td>
136 83 140 83
137 </td> 141 </td>
138 <td> 142 <td>
139 8 143 8
140 </td> 144 </td>
141 <td>B 145 <td>B
142 </td>--> 146 </td>-->
143 </tr> 147 </tr>
144 <!-- <tfoot> 148 <!-- <tfoot>
145 <tr> 149 <tr>
146 <td colspan="2">Total:</td> 150 <td colspan="2">Total:</td>
147 <td></td> 151 <td></td>
148 <td></td> 152 <td></td>
149 <td></td> 153 <td></td>
150 <td></td> 154 <td></td>
151 </tr> 155 </tr>
152 </tfoot>--> 156 </tfoot>-->
153 </table> 157 </table>
154 </v-card> 158 </v-card>
155 </v-flex> 159 </v-flex>
156 </v-layout> 160 </v-layout>
157 </v-container> 161 </v-container>
158 </v-flex> 162 </v-flex>
159 </v-container> 163 </v-container>
160 <div class="loader" v-if="showLoader"> 164 <div class="loader" v-if="showLoader">
161 <v-progress-circular indeterminate color="white"></v-progress-circular> 165 <v-progress-circular indeterminate color="white"></v-progress-circular>
162 </div> 166 </div>
163 </v-app> 167 </v-app>
164 </template> 168 </template>
165 169
166 <script> 170 <script>
167 import http from "@/Services/http.js"; 171 import http from "@/Services/http.js";
168 import moment from "moment"; 172 import moment from "moment";
169 173
170 export default { 174 export default {
171 data: () => ({ 175 data: () => ({
172 showLoader: false, 176 showLoader: false,
173 markData: [], 177 markData: [],
174 token: "", 178 token: "",
175 markDistributions: [], 179 markDistributions: [],
176 markParticularDistributionData: [] 180 markParticularDistributionData: []
177 }), 181 }),
178 mounted() { 182 mounted() {
179 this.token = this.$store.state.token; 183 this.token = this.$store.state.token;
180 this.getMarkList(); 184 this.getMarkList();
181 }, 185 },
182 methods: { 186 methods: {
183 getMarkList() { 187 getMarkList() {
184 this.showLoader = true; 188 this.showLoader = true;
185 http() 189 http()
186 .get("/getParticularMark", { 190 .get("/getParticularMark", {
187 params: { studentId: this.$route.params.markId }, 191 params: { studentId: this.$route.params.markId },
188 headers: { Authorization: "Bearer " + this.token } 192 headers: { Authorization: "Bearer " + this.token }
189 }) 193 })
190 .then(response => { 194 .then(response => {
191 this.markData = response.data.data; 195 this.markData = response.data.data;
192 for (let i = 0; i < this.markData.length; i++) { 196 for (let i = 0; i < this.markData.length; i++) {
193 for (let j = 0; j < this.markData[i].studentsMarks.length; j++) { 197 for (let j = 0; j < this.markData[i].studentsMarks.length; j++) {
194 // console.log("this.studentsMarksSSSSSSSSSSSSS",this.markData[i].studentsMarks[j].marksObtained) 198 // console.log("this.studentsMarksSSSSSSSSSSSSS",this.markData[i].studentsMarks[j].marksObtained)
195 199
196 this.markDistributions = this.markData[i].studentsMarks[ 200 this.markDistributions = this.markData[i].studentsMarks[
197 j 201 j
198 ].marksObtained; 202 ].marksObtained;
199 for ( 203 for (
200 let k = 0; 204 let k = 0;
201 k < this.markData[i].studentsMarks[j].marksObtained.length; 205 k < this.markData[i].studentsMarks[j].marksObtained.length;
202 k++ 206 k++
203 ) { 207 ) {
204 this.markParticularDistributionData.push( 208 this.markParticularDistributionData.push(
205 this.markData[i].studentsMarks[j].marksObtained[k] 209 this.markData[i].studentsMarks[j].marksObtained[k].marksScored
206 .marksScored
207 ); 210 );
208 this.markParticularDistributionData.push( 211 this.markParticularDistributionData.push(
209 this.markData[i].studentsMarks[j].marksObtained[k] 212 this.markData[i].studentsMarks[j].marksObtained[k]
210 .markDistributionId.markValue, 213 .markDistributionId.markValue
211 ); 214 );
212 console.log( 215 console.log(
213 "this.markParticularDistributionData", 216 "this.markParticularDistributionData",
214 this.markParticularDistributionData 217 this.markParticularDistributionData
215 ); 218 );
216 } 219 }
217 } 220 }
218 } 221 }
219 this.showLoader = false; 222 this.showLoader = false;
220 }) 223 })
221 .catch(error => { 224 .catch(error => {
222 // console.log("err====>", err); 225 // console.log("err====>", err);
223 this.showLoader = false; 226 this.showLoader = false;
224 this.snackbar = true; 227 this.snackbar = true;
225 this.text = error.response.data.message; 228 this.text = error.response.data.message;
226 if (error.response.status === 401) { 229 if (error.response.status === 401) {
227 this.$router.replace({ path: "/" }); 230 this.$router.replace({ path: "/" });
228 this.$store.dispatch("setToken", null); 231 this.$store.dispatch("setToken", null);
229 this.$store.dispatch("Id", null); 232 this.$store.dispatch("Id", null);
230 } 233 }
231 }); 234 });
232 } 235 }
233 } 236 }
234 }; 237 };
235 </script> 238 </script>
236 239
237 <style scoped> 240 <style scoped>
238 table { 241 table {
239 border-collapse: collapse; 242 border-collapse: collapse;
240 border: 1px solid #e2e7eb; 243 border: 1px solid #e2e7eb;
241 } 244 }
242 245
243 th, 246 th,
244 td { 247 td {
245 border: 1px solid #e2e7eb; 248 border: 1px solid #e2e7eb;
246 padding: 10px; 249 padding: 10px;
247 text-align: center; 250 text-align: center;
248 } 251 }
249 table.feeTypeTable { 252 table.feeTypeTable {
250 table-layout: auto !important; 253 table-layout: auto !important;
251 width: 100% !important; 254 width: 100% !important;
252 } 255 }
253 .bg-sky { 256 .bg-sky {
254 background-color: #98b2cc !important; 257 background-color: #98b2cc !important;
255 } 258 }
256 .bg-sky-light { 259 .bg-sky-light {
257 background-color: #89a0b8; 260 background-color: #89a0b8;
258 } 261 }
259 .bg-purple { 262 .bg-purple {
260 background-color: #9583ac; 263 background-color: #9583ac;
261 } 264 }
262 .bg-skyDark { 265 .bg-skyDark {
263 background-color: #956785; 266 background-color: #956785;
264 } 267 }
265 @media screen and (max-width: 380px) { 268 @media screen and (max-width: 380px) {
266 .tableRsponsive { 269 .tableRsponsive {
267 display: block; 270 display: block;
268 position: relative; 271 position: relative;
269 overflow: scroll; 272 overflow: scroll;
270 } 273 }
271 } 274 }
src/pages/News/news.vue
Diff comments   View file @495e403
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 News</v-tab> 10 >Existing News</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 News</v-tab> 18 >Add News</v-tab>
19 19
20 <!-- ****** EDIT NEWS ****** --> 20 <!-- ****** EDIT NEWS ****** -->
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 News</h3> 36 <h3>Edit News</h3>
37 </v-toolbar-title> 37 </v-toolbar-title>
38 <v-spacer></v-spacer> 38 <v-spacer></v-spacer>
39 </v-toolbar> 39 </v-toolbar>
40 <v-card-text style="height:600px;"> 40 <v-card-text style="height:600px;">
41 <!-- <v-form ref="form"> 41 <!-- <v-form ref="form">
42 <v-container fluid>--> 42 <v-container fluid>-->
43 <v-layout row> 43 <v-layout row>
44 <v-flex 44 <v-flex
45 xs12 45 xs12
46 class="text-xs-center text-sm-center text-md-center text-lg-center my-4" 46 class="text-xs-center text-sm-center text-md-center text-lg-center my-4"
47 > 47 >
48 <input 48 <input
49 type="file" 49 type="file"
50 style="display: none" 50 style="display: none"
51 ref="image" 51 ref="image"
52 accept="image/*" 52 accept="image/*"
53 multiple 53 multiple
54 @change="onFilePicked" 54 @change="onFilePicked"
55 /> 55 />
56 <v-layout justify-center> 56 <v-layout justify-center>
57 <v-flex 57 <v-flex
58 xs12 58 xs12
59 sm12 59 sm12
60 md3 60 md3
61 v-for="Image in editedItem.newsImageUrl" 61 v-for="Image in editedItem.newsImageUrl"
62 :key="Image._id" 62 :key="Image._id"
63 v-if="editedItem.newsImageUrl" 63 v-if="editedItem.newsImageUrl"
64 class="profile-image-wrapper" 64 class="profile-image-wrapper"
65 > 65 >
66 <img 66 <img
67 :src="Image.imageUrl" 67 :src="Image.imageUrl"
68 height="160" 68 height="160"
69 width="160" 69 width="160"
70 alt="News" 70 alt="News"
71 class="pa-2 imgNews" 71 class="pa-2 imgNews"
72 /> 72 />
73 <v-icon 73 <v-icon
74 class="red edit-profile-icon" 74 class="red edit-profile-icon"
75 dark 75 dark
76 @click="deleteImage(Image._id,editedItem._id)" 76 @click="deleteImage(Image._id,editedItem._id)"
77 >close</v-icon> 77 >close</v-icon>
78 </v-flex> 78 </v-flex>
79 <v-flex v-for="(file, index) in files" :key="index"> 79 <v-flex v-for="(file, index) in files" :key="index">
80 <img :src="file" height="160" width="160" class="pa-2" /> 80 <img :src="file" height="160" width="160" class="pa-2" />
81 </v-flex> 81 </v-flex>
82 </v-layout> 82 </v-layout>
83 <img 83 <img
84 src="/static/icon/user.png" 84 src="/static/icon/user.png"
85 v-if="editedItem.newsImageUrl ==''" 85 v-if="editedItem.newsImageUrl ==''"
86 height="160" 86 height="160"
87 width="160" 87 width="160"
88 alt="News" 88 alt="News"
89 /> 89 />
90 </v-flex> 90 </v-flex>
91 </v-layout> 91 </v-layout>
92 <!-- </v-layout> --> 92 <!-- </v-layout> -->
93 <v-layout wrap> 93 <v-layout wrap>
94 <v-flex xs12 sm12> 94 <v-flex xs12 sm12>
95 <v-layout> 95 <v-layout>
96 <v-flex xs4 class="pt-4 subheading"> 96 <v-flex xs4 class="pt-4 subheading">
97 <label class="right">Title:</label> 97 <label class="right">Title:</label>
98 </v-flex> 98 </v-flex>
99 <v-flex sm5 xs8 class="ml-3"> 99 <v-flex sm5 xs8 class="ml-3">
100 <v-text-field 100 <v-text-field
101 v-model="editedItem.title" 101 v-model="editedItem.title"
102 placeholder="fill your Title" 102 placeholder="fill your Title"
103 name="name" 103 name="name"
104 type="text" 104 type="text"
105 required 105 required
106 ></v-text-field> 106 ></v-text-field>
107 </v-flex> 107 </v-flex>
108 </v-layout> 108 </v-layout>
109 </v-flex> 109 </v-flex>
110 <v-flex xs12 sm12> 110 <v-flex xs12 sm12>
111 <v-layout> 111 <v-layout>
112 <v-flex xs4 class="pt-4 subheading"> 112 <v-flex xs4 class="pt-4 subheading">
113 <label class="right">Description:</label> 113 <label class="right">Description:</label>
114 </v-flex> 114 </v-flex>
115 <v-flex sm5 xs8 class="ml-3"> 115 <v-flex sm5 xs8 class="ml-3">
116 <v-text-field 116 <v-text-field
117 placeholder="fill your Description" 117 placeholder="fill your Description"
118 v-model="editedItem.description" 118 v-model="editedItem.description"
119 type="text" 119 type="text"
120 name="email" 120 name="email"
121 required 121 required
122 ></v-text-field> 122 ></v-text-field>
123 </v-flex> 123 </v-flex>
124 </v-layout> 124 </v-layout>
125 </v-flex> 125 </v-flex>
126 <v-flex xs12> 126 <v-flex xs12>
127 <v-layout> 127 <v-layout>
128 <v-flex xs4 class="pt-4 subheading"> 128 <v-flex xs4 class="pt-4 subheading">
129 <label class="right hidden-xs-only hidden-sm-only">Add New Images:</label> 129 <label class="right hidden-xs-only hidden-sm-only">Add New Images:</label>
130 <label class="right hidden-lg-only hidden-md-only hidden-xl-only">Uplaod :</label> 130 <label class="right hidden-lg-only hidden-md-only hidden-xl-only">Uplaod :</label>
131 </v-flex> 131 </v-flex>
132 <v-flex sm5 xs8 class="ml-3"> 132 <v-flex sm5 xs8 class="ml-3">
133 <v-text-field 133 <v-text-field
134 label="Select Image" 134 label="Select Image"
135 @click="pickFile" 135 @click="pickFile"
136 v-model="imageName" 136 v-model="imageName"
137 append-icon="attach_file" 137 append-icon="attach_file"
138 multiple 138 multiple
139 ></v-text-field> 139 ></v-text-field>
140 </v-flex> 140 </v-flex>
141 </v-layout> 141 </v-layout>
142 </v-flex> 142 </v-flex>
143 </v-layout> 143 </v-layout>
144 <v-layout> 144 <v-layout>
145 <v-flex xs12 sm8 offset-sm2> 145 <v-flex xs12 sm8 offset-sm2>
146 <v-card-actions> 146 <v-card-actions>
147 <v-btn round dark @click.native="close">Cancel</v-btn> 147 <v-btn round dark @click.native="close">Cancel</v-btn>
148 <v-spacer></v-spacer> 148 <v-spacer></v-spacer>
149 <v-btn round dark @click="save">Save</v-btn> 149 <v-btn round dark @click="save">Save</v-btn>
150 </v-card-actions> 150 </v-card-actions>
151 </v-flex> 151 </v-flex>
152 </v-layout> 152 </v-layout>
153 </v-card-text> 153 </v-card-text>
154 </v-card> 154 </v-card>
155 </v-dialog> 155 </v-dialog>
156 156
157 <!-- ****** PROFILE VIEW ALL NEWS DEATILS ****** --> 157 <!-- ****** PROFILE VIEW ALL NEWS DEATILS ****** -->
158 158
159 <v-dialog v-model="dialog1" max-width="800px"> 159 <v-dialog v-model="dialog1" max-width="800px">
160 <v-card> 160 <v-card>
161 <v-toolbar color="grey lighten-2" flat> 161 <v-toolbar color="grey lighten-2" flat>
162 <v-spacer></v-spacer> 162 <v-spacer></v-spacer>
163 <v-toolbar-title> 163 <v-toolbar-title>
164 <h3>News</h3> 164 <h3>News</h3>
165 </v-toolbar-title> 165 </v-toolbar-title>
166 <v-spacer></v-spacer> 166 <v-spacer></v-spacer>
167 <v-icon @click="close1">close</v-icon> 167 <v-icon @click="close1">close</v-icon>
168 </v-toolbar> 168 </v-toolbar>
169 <v-flex align-center justify-center layout text-xs-center> 169 <v-flex align-center justify-center layout text-xs-center>
170 <span v-for="(image,i) in editedItem.newsImageUrl" :key="i" class="mt-4 pa-2"> 170 <span v-for="(image,i) in editedItem.newsImageUrl" :key="i" class="mt-4 pa-2">
171 <img :src="image.imageUrl" alt="News" width="240" height="180" class="imgNews" /> 171 <img :src="image.imageUrl" alt="News" width="240" height="180" class="imgNews" />
172 </span> 172 </span>
173 </v-flex> 173 </v-flex>
174 <v-card-text> 174 <v-card-text>
175 <v-container grid-list-md> 175 <v-container grid-list-md>
176 <v-layout wrap> 176 <v-layout wrap>
177 <v-flex> 177 <v-flex>
178 <v-layout> 178 <v-layout>
179 <v-flex xs5 sm6> 179 <v-flex xs5 sm6>
180 <h5 class="right my-1"> 180 <h5 class="right my-1">
181 <b>Title:</b> 181 <b>Title:</b>
182 </h5> 182 </h5>
183 </v-flex> 183 </v-flex>
184 <v-flex sm6 xs8> 184 <v-flex sm6 xs8>
185 <h5 class="my-1">{{ editedItem.title }}</h5> 185 <h5 class="my-1">{{ editedItem.title }}</h5>
186 </v-flex> 186 </v-flex>
187 </v-layout> 187 </v-layout>
188 <v-layout> 188 <v-layout>
189 <v-flex xs5 sm6> 189 <v-flex xs5 sm6>
190 <h5 class="right my-1"> 190 <h5 class="right my-1">
191 <b>Description:</b> 191 <b>Description:</b>
192 </h5> 192 </h5>
193 </v-flex> 193 </v-flex>
194 <v-flex sm6 xs8> 194 <v-flex sm6 xs8>
195 <h5 class="my-1">{{ editedItem.description }}</h5> 195 <h5 class="my-1">{{ editedItem.description }}</h5>
196 </v-flex> 196 </v-flex>
197 </v-layout> 197 </v-layout>
198 </v-flex> 198 </v-flex>
199 </v-layout> 199 </v-layout>
200 </v-container> 200 </v-container>
201 </v-card-text> 201 </v-card-text>
202 </v-card> 202 </v-card>
203 </v-dialog> 203 </v-dialog>
204 204
205 <v-snackbar 205 <v-snackbar
206 :timeout="timeout" 206 :timeout="timeout"
207 :top="y === 'top'" 207 :top="y === 'top'"
208 :right="x === 'right'" 208 :right="x === 'right'"
209 :vertical="mode === 'vertical'" 209 :vertical="mode === 'vertical'"
210 v-model="snackbar" 210 v-model="snackbar"
211 color="success" 211 color="success"
212 >{{ text }}</v-snackbar> 212 >{{ text }}</v-snackbar>
213 213
214 <!-- ****** EXISTING-USERS NEWS TABLE ****** --> 214 <!-- ****** EXISTING-USERS NEWS TABLE ****** -->
215 <v-data-table 215 <v-data-table
216 :headers="headers" 216 :headers="headers"
217 :items="desserts" 217 :items="desserts"
218 :pagination.sync="pagination" 218 :pagination.sync="pagination"
219 :search="search" 219 :search="search"
220 > 220 >
221 <template slot="items" slot-scope="props"> 221 <template slot="items" slot-scope="props">
222 <td class="text-xs-center">{{ props.index + 1}}</td> 222 <td class="text-xs-center">{{ props.index + 1}}</td>
223 <td id="td" class="text-xs-center"> 223 <td id="td" class="text-xs-center">
224 <span v-for="(image,_id) in props.item.newsImageUrl" class="pa-2"> 224 <span v-for="(image,_id) in props.item.newsImageUrl" class="pa-2">
225 <img :src="image.imageUrl" alt="newsImage" width="100" height="70" /> 225 <img :src="image.imageUrl" alt="newsImage" width="100" height="70" />
226 </span> 226 </span>
227 </td> 227 </td>
228 <td id="td" class="text-xs-center">{{ props.item.title}}</td> 228 <td id="td" class="text-xs-center">{{ props.item.title}}</td>
229 <td id="td" class="text-xs-center">{{ props.item.description}}</td> 229 <td id="td" class="text-xs-center">{{ props.item.description}}</td>
230 230
231 <td class="text-xs-center"> 231 <td class="text-xs-center">
232 <span> 232 <span>
233 <img 233 <v-tooltip top>
234 style="cursor:pointer; width:25px; height:18px; " 234 <img
235 class="mr-5" 235 slot="activator"
236 @click="profile(props.item)" 236 style="cursor:pointer; width:25px; height:18px; "
237 src="/static/icon/eye1.png" 237 class="mr5"
238 /> 238 @click="profile(props.item)"
239 <img 239 src="/static/icon/eye1.png"
240 style="cursor:pointer; width:20px; height:18px; " 240 />
241 class="mr-5" 241 <span>View</span>
242 @click="editItem(props.item)" 242 </v-tooltip>
243 src="/static/icon/edit1.png" 243 <v-tooltip top>
244 /> 244 <img
245 <img 245 slot="activator"
246 style="cursor:pointer;width:20px; height:20px; " 246 style="cursor:pointer; width:20px; height:18px; "
247 class="mr-5" 247 class="mr5"
248 @click="deleteItem(props.item)" 248 @click="editItem(props.item)"
249 src="/static/icon/delete1.png" 249 src="/static/icon/edit1.png"
250 /> 250 />
251 <span>Edit</span>
252 </v-tooltip>
253 <v-tooltip top>
254 <img
255 slot="activator"
256 style="cursor:pointer; width:20px; height:20px; "
257 class="mr5"
258 @click="deleteItem(props.item)"
259 src="/static/icon/delete1.png"
260 />
261 <span>Delete</span>
262 </v-tooltip>
251 </span> 263 </span>
252 </td> 264 </td>
253 </template> 265 </template>
254 <v-alert 266 <v-alert
255 slot="no-results" 267 slot="no-results"
256 :value="true" 268 :value="true"
257 color="error" 269 color="error"
258 icon="warning" 270 icon="warning"
259 >Your search for "{{ search }}" found no results.</v-alert> 271 >Your search for "{{ search }}" found no results.</v-alert>
260 </v-data-table> 272 </v-data-table>
261 </v-tab-item> 273 </v-tab-item>
262 274
263 <!-- ****** ADD MULTIPLE NEWS ****** --> 275 <!-- ****** ADD MULTIPLE NEWS ****** -->
264 276
265 <v-tab-item> 277 <v-tab-item>
266 <v-container> 278 <v-container>
267 <v-snackbar 279 <v-snackbar
268 :timeout="timeout" 280 :timeout="timeout"
269 :top="y === 'top'" 281 :top="y === 'top'"
270 :right="x === 'right'" 282 :right="x === 'right'"
271 :vertical="mode === 'vertical'" 283 :vertical="mode === 'vertical'"
272 v-model="snackbar" 284 v-model="snackbar"
273 color="success" 285 color="success"
274 >{{ text }}</v-snackbar> 286 >{{ text }}</v-snackbar>
275 <v-flex xs12 sm12 class="my-4"> 287 <v-flex xs12 sm12 class="my-4">
276 <v-card flat> 288 <v-card flat>
277 <v-form ref="form" v-model="valid" lazy-validation> 289 <v-form ref="form" v-model="valid" lazy-validation>
278 <v-container fluid> 290 <v-container fluid>
279 <v-layout> 291 <v-layout>
280 <v-flex 292 <v-flex
281 xs12 293 xs12
282 class="text-xs-center text-sm-center text-md-center text-lg-center my-4" 294 class="text-xs-center text-sm-center text-md-center text-lg-center my-4"
283 > 295 >
284 <input 296 <input
285 type="file" 297 type="file"
286 style="display: none" 298 style="display: none"
287 ref="image" 299 ref="image"
288 accept="image/*" 300 accept="image/*"
289 multiple 301 multiple
290 @change="onFilePicked" 302 @change="onFilePicked"
291 /> 303 />
292 <v-layout justify-center> 304 <v-layout justify-center>
293 <v-flex v-for="(file,index) in files" :key="index" v-if="files"> 305 <v-flex v-for="(file,index) in files" :key="index" v-if="files">
294 <img :src="file" height="160" width="160px;" class="imgNews" /> 306 <img :src="file" height="160" width="160px;" class="imgNews" />
295 </v-flex> 307 </v-flex>
296 </v-layout> 308 </v-layout>
297 <img 309 <img
298 src="/static/icon/user.png" 310 src="/static/icon/user.png"
299 v-if="files ==''" 311 v-if="files ==''"
300 height="140" 312 height="140"
301 width="180px;" 313 width="180px;"
302 /> 314 />
303 </v-flex> 315 </v-flex>
304 </v-layout> 316 </v-layout>
305 <v-flex xs12> 317 <v-flex xs12>
306 <v-layout> 318 <v-layout>
307 <v-flex xs4 sm4 class="pt-4 subheading"> 319 <v-flex xs4 sm4 class="pt-4 subheading">
308 <label class="right">Title:</label> 320 <label class="right">Title:</label>
309 </v-flex> 321 </v-flex>
310 <v-flex sm4 xs8 class="ml-3"> 322 <v-flex sm4 xs8 class="ml-3">
311 <v-text-field 323 <v-text-field
312 v-model="addNews.title" 324 v-model="addNews.title"
313 placeholder="fill your Title" 325 placeholder="fill your Title"
314 name="name" 326 name="name"
315 type="text" 327 type="text"
316 :rules="titleRules" 328 :rules="titleRules"
317 required 329 required
318 ></v-text-field> 330 ></v-text-field>
319 </v-flex> 331 </v-flex>
320 </v-layout> 332 </v-layout>
321 </v-flex> 333 </v-flex>
322 <v-flex xs12> 334 <v-flex xs12>
323 <v-layout> 335 <v-layout>
324 <v-flex xs4 class="pt-4 subheading"> 336 <v-flex xs4 class="pt-4 subheading">
325 <label class="right">Description:</label> 337 <label class="right">Description:</label>
326 </v-flex> 338 </v-flex>
327 <v-flex sm4 xs8 class="ml-3"> 339 <v-flex sm4 xs8 class="ml-3">
328 <v-text-field 340 <v-text-field
329 placeholder="fill your Description" 341 placeholder="fill your Description"
330 :rules="descriptionRules" 342 :rules="descriptionRules"
331 v-model="addNews.description" 343 v-model="addNews.description"
332 type="text" 344 type="text"
333 name="email" 345 name="email"
334 required 346 required
335 ></v-text-field> 347 ></v-text-field>
336 </v-flex> 348 </v-flex>
337 </v-layout> 349 </v-layout>
338 </v-flex> 350 </v-flex>
339 <v-flex xs12> 351 <v-flex xs12>
340 <v-layout> 352 <v-layout>
341 <v-flex xs4 class="pt-4 subheading"> 353 <v-flex xs4 class="pt-4 subheading">
342 <label class="right hidden-xs-only hidden-sm-only">Uplaod Image:</label> 354 <label class="right hidden-xs-only hidden-sm-only">Uplaod Image:</label>
343 <label class="right hidden-lg-only hidden-md-only hidden-xl-only">Uplaod :</label> 355 <label class="right hidden-lg-only hidden-md-only hidden-xl-only">Uplaod :</label>
344 </v-flex> 356 </v-flex>
345 <v-flex xs8 sm4 class="ml-3"> 357 <v-flex xs8 sm4 class="ml-3">
346 <v-text-field 358 <v-text-field
347 label="Select Image" 359 label="Select Image"
348 @click="pickFile" 360 @click="pickFile"
349 v-model="imageName" 361 v-model="imageName"
350 append-icon="attach_file" 362 append-icon="attach_file"
351 multiple 363 multiple
352 ></v-text-field> 364 ></v-text-field>
353 </v-flex> 365 </v-flex>
354 </v-layout> 366 </v-layout>
355 </v-flex> 367 </v-flex>
356 <v-layout> 368 <v-layout>
357 <v-flex xs12 sm5 offset-sm3> 369 <v-flex xs12 sm5 offset-sm3>
358 <v-layout> 370 <v-layout>
359 <v-flex xs6> 371 <v-flex xs6>
360 <v-btn @click="clear" round class="ml-3" dark>clear</v-btn> 372 <v-btn @click="clear" round class="ml-3" dark>clear</v-btn>
361 </v-flex> 373 </v-flex>
362 <v-flex xs6> 374 <v-flex xs6>
363 <v-btn @click="submit" round dark :loading="loading" class="right">Add</v-btn> 375 <v-btn @click="submit" round dark :loading="loading" class="right">Add</v-btn>
364 </v-flex> 376 </v-flex>
365 </v-layout> 377 </v-layout>
366 </v-flex> 378 </v-flex>
367 </v-layout> 379 </v-layout>
368 </v-container> 380 </v-container>
369 </v-form> 381 </v-form>
370 </v-card> 382 </v-card>
371 </v-flex> 383 </v-flex>
372 </v-container> 384 </v-container>
373 </v-tab-item> 385 </v-tab-item>
374 </v-tabs> 386 </v-tabs>
375 <div class="loader" v-if="showLoader"> 387 <div class="loader" v-if="showLoader">
376 <v-progress-circular indeterminate color="white"></v-progress-circular> 388 <v-progress-circular indeterminate color="white"></v-progress-circular>
377 </div> 389 </div>
378 </v-app> 390 </v-app>
379 </template> 391 </template>
380 392
381 <script> 393 <script>
382 import http from "@/Services/http.js"; 394 import http from "@/Services/http.js";
383 import Util from "@/util"; 395 import Util from "@/util";
384 396
385 export default { 397 export default {
386 data: () => ({ 398 data: () => ({
387 snackbar: false, 399 snackbar: false,
388 y: "top", 400 y: "top",
389 x: "right", 401 x: "right",
390 mode: "", 402 mode: "",
391 timeout: 3000, 403 timeout: 3000,
392 text: "", 404 text: "",
393 loading: false, 405 loading: false,
394 date: null, 406 date: null,
395 search: "", 407 search: "",
396 showLoader: false, 408 showLoader: false,
397 dialog: false, 409 dialog: false,
398 dialog1: false, 410 dialog1: false,
399 valid: true, 411 valid: true,
400 isActive: true, 412 isActive: true,
401 newActive: false, 413 newActive: false,
402 addclass: [], 414 addclass: [],
403 addSection: [], 415 addSection: [],
404 AddUsercredentials: {}, 416 AddUsercredentials: {},
405 pagination: { 417 pagination: {
406 rowsPerPage: 15 418 rowsPerPage: 15
407 }, 419 },
408 imageName: "", 420 imageName: "",
409 imageUrl: "", 421 imageUrl: "",
410 imageFile: "", 422 imageFile: "",
411 image: [], 423 image: [],
412 upload: "", 424 upload: "",
413 files: [], 425 files: [],
414 titleRules: [v => !!v || " Tilte is required"], 426 titleRules: [v => !!v || " Tilte is required"],
415 descriptionRules: [v => !!v || " Description is required"], 427 descriptionRules: [v => !!v || " Description is required"],
416 headers: [ 428 headers: [
417 { 429 {
418 align: "justify-center", 430 align: "justify-center",
419 text: "No", 431 text: "No",
420 sortable: false, 432 sortable: false,
421 value: "No" 433 value: "No"
422 }, 434 },
423 { text: "Image", vaue: "image", sortable: false, align: "center" }, 435 { text: "Image", vaue: "image", sortable: false, align: "center" },
424 { text: "Title", value: "title", sortable: false, align: "center" }, 436 { text: "Title", value: "title", sortable: false, align: "center" },
425 { 437 {
426 text: "Description", 438 text: "Description",
427 value: "description", 439 value: "description",
428 sortable: false, 440 sortable: false,
429 align: "center" 441 align: "center"
430 }, 442 },
431 { text: "Action", value: "", sortable: false, align: "center" } 443 { text: "Action", value: "", sortable: false, align: "center" }
432 ], 444 ],
433 desserts: [], 445 desserts: [],
434 editedIndex: -1, 446 editedIndex: -1,
435 addNews: { 447 addNews: {
436 title: "", 448 title: "",
437 description: "" 449 description: ""
438 }, 450 },
439 editedItem: { 451 editedItem: {
440 title: "", 452 title: "",
441 description: "" 453 description: ""
442 }, 454 },
443 defaultItem: { 455 defaultItem: {
444 title: "", 456 title: "",
445 description: "" 457 description: ""
446 } 458 }
447 }), 459 }),
448 methods: { 460 methods: {
449 getSections(_id) { 461 getSections(_id) {
450 console.log("_id", _id); 462 console.log("_id", _id);
451 var token = this.$store.state.token; 463 var token = this.$store.state.token;
452 http() 464 http()
453 .get( 465 .get(
454 "/getSectionsList", 466 "/getSectionsList",
455 { params: { classId: _id } }, 467 { params: { classId: _id } },
456 { 468 {
457 headers: { Authorization: "Bearer " + token } 469 headers: { Authorization: "Bearer " + token }
458 } 470 }
459 ) 471 )
460 .then(response => { 472 .then(response => {
461 this.addSection = response.data.data; 473 this.addSection = response.data.data;
462 // console.log("getSectionsList=====>", this.addSection); 474 // console.log("getSectionsList=====>", this.addSection);
463 }) 475 })
464 .catch(err => { 476 .catch(err => {
465 console.log("err====>", err); 477 console.log("err====>", err);
466 // this.$router.replace({ path: '/' }); 478 // this.$router.replace({ path: '/' });
467 }); 479 });
468 }, 480 },
469 pickFile() { 481 pickFile() {
470 this.$refs.image.click(); 482 this.$refs.image.click();
471 }, 483 },
472 onFilePicked(e) { 484 onFilePicked(e) {
473 // console.log(e) 485 // console.log(e)
474 const files = e.target.files; 486 const files = e.target.files;
475 /** fetch Image Name **/ 487 /** fetch Image Name **/
476 if (files[0] !== undefined) { 488 if (files[0] !== undefined) {
477 this.imageName = files[0].name; 489 this.imageName = files[0].name;
478 if (this.imageName.lastIndexOf(".") <= 0) { 490 if (this.imageName.lastIndexOf(".") <= 0) {
479 return; 491 return;
480 } 492 }
481 this.files = []; 493 this.files = [];
482 // console.log("files", this.files); 494 // console.log("files", this.files);
483 /** Select many image and showing many image add to news card **/ 495 /** Select many image and showing many image add to news card **/
484 const test = Array.from(files).forEach((file, idx) => { 496 const test = Array.from(files).forEach((file, idx) => {
485 const fr = new FileReader(); 497 const fr = new FileReader();
486 const getResult = new Promise(resolve => { 498 const getResult = new Promise(resolve => {
487 fr.onload = e => { 499 fr.onload = e => {
488 this.files.push( 500 this.files.push(
489 // id: idx, 501 // id: idx,
490 e.target.result 502 e.target.result
491 ); 503 );
492 }; 504 };
493 }); 505 });
494 fr.readAsDataURL(file); 506 fr.readAsDataURL(file);
495 return getResult.then(file => { 507 return getResult.then(file => {
496 return file; 508 return file;
497 }); 509 });
498 }); 510 });
499 const fr = new FileReader(); 511 const fr = new FileReader();
500 fr.readAsDataURL(files[0]); 512 fr.readAsDataURL(files[0]);
501 fr.addEventListener("load", () => { 513 fr.addEventListener("load", () => {
502 this.imageFile = files; // this is an image file that can be sent to server... 514 this.imageFile = files; // this is an image file that can be sent to server...
503 // console.log("uploadImage=======>", this.imageFile ); 515 // console.log("uploadImage=======>", this.imageFile );
504 }); 516 });
505 } else { 517 } else {
506 this.imageName = ""; 518 this.imageName = "";
507 this.imageFile = ""; 519 this.imageFile = "";
508 this.imageUrl = ""; 520 this.imageUrl = "";
509 } 521 }
510 }, 522 },
511 getNewsList() { 523 getNewsList() {
512 this.showLoader = true; 524 this.showLoader = true;
513 var token = this.$store.state.token; 525 var token = this.$store.state.token;
514 http() 526 http()
515 .get("/getNewsList", { 527 .get("/getNewsList", {
516 headers: { Authorization: "Bearer " + token } 528 headers: { Authorization: "Bearer " + token }
517 }) 529 })
518 .then(response => { 530 .then(response => {
519 this.desserts = response.data.data; 531 this.desserts = response.data.data;
520 this.showLoader = false; 532 this.showLoader = false;
521 // console.log("getNewsList=====>",this.desserts) 533 // console.log("getNewsList=====>",this.desserts)
522 }) 534 })
523 .catch(err => { 535 .catch(err => {
524 // console.log("err====>", err); 536 // console.log("err====>", err);
525 this.showLoader = false; 537 this.showLoader = false;
526 if (error.response.status === 401) { 538 if (error.response.status === 401) {
527 this.$router.replace({ path: "/" }); 539 this.$router.replace({ path: "/" });
528 this.$store.dispatch("setToken", null); 540 this.$store.dispatch("setToken", null);
529 this.$store.dispatch("Id", null); 541 this.$store.dispatch("Id", null);
530 } 542 }
531 }); 543 });
532 }, 544 },
533 editItem(item) { 545 editItem(item) {
534 this.files = []; 546 this.files = [];
535 this.editedIndex = this.desserts.indexOf(item); 547 this.editedIndex = this.desserts.indexOf(item);
536 this.editedItem = Object.assign({}, item); 548 this.editedItem = Object.assign({}, item);
537 this.dialog = true; 549 this.dialog = true;
538 }, 550 },
539 profile(item) { 551 profile(item) {
540 this.editedIndex = this.desserts.indexOf(item); 552 this.editedIndex = this.desserts.indexOf(item);
541 this.editedItem = Object.assign({}, item); 553 this.editedItem = Object.assign({}, item);
542 this.dialog1 = true; 554 this.dialog1 = true;
543 }, 555 },
544 deleteItem(item) { 556 deleteItem(item) {
545 let deleteNews = { 557 let deleteNews = {
546 newsId: item._id 558 newsId: item._id
547 }; 559 };
548 http() 560 http()
549 .delete( 561 .delete(
550 "/deleteNews", 562 "/deleteNews",
551 confirm("Are you sure you want to delete this?") && { 563 confirm("Are you sure you want to delete this?") && {
552 params: deleteNews 564 params: deleteNews
553 } 565 }
554 ) 566 )
555 .then(response => { 567 .then(response => {
556 // console.log("deleteNews",deleteNews) 568 // console.log("deleteNews",deleteNews)
557 if ((this.snackbar = true)) { 569 if ((this.snackbar = true)) {
558 this.text = "Successfully delete Existing News"; 570 this.text = "Successfully delete Existing News";
559 } 571 }
560 this.getNewsList(); 572 this.getNewsList();
561 }) 573 })
562 .catch(error => { 574 .catch(error => {
563 // console.log(error); 575 // console.log(error);
564 }); 576 });
565 }, 577 },
566 deleteImage(imageId, newsId) { 578 deleteImage(imageId, newsId) {
567 console.log(imageId, newsId); 579 console.log(imageId, newsId);
568 let deleteImages = { 580 let deleteImages = {
569 newsId: newsId, 581 newsId: newsId,
570 imageId: imageId 582 imageId: imageId
571 }; 583 };
572 http() 584 http()
573 .put("/deleteImages", deleteImages) 585 .put("/deleteImages", deleteImages)
574 .then(response => { 586 .then(response => {
575 console.log("deleteNews", deleteImages); 587 console.log("deleteNews", deleteImages);
576 if ((this.snackbar = true)) { 588 if ((this.snackbar = true)) {
577 this.text = "Image deleted Successfully"; 589 this.text = "Image deleted Successfully";
578 } 590 }
579 this.getNewsList(); 591 this.getNewsList();
580 this.close(); 592 this.close();
581 }) 593 })
582 .catch(error => { 594 .catch(error => {
583 console.log(error); 595 console.log(error);
584 }); 596 });
585 }, 597 },
586 activeTab(type) { 598 activeTab(type) {
587 switch (type) { 599 switch (type) {
588 case "existing": 600 case "existing":
589 this.newActive = false; 601 this.newActive = false;
590 this.isActive = true; 602 this.isActive = true;
591 break; 603 break;
592 604
593 default: 605 default:
594 this.newActive = true; 606 this.newActive = true;
595 this.isActive = false; 607 this.isActive = false;
596 break; 608 break;
597 } 609 }
598 }, 610 },
599 close() { 611 close() {
600 this.dialog = false; 612 this.dialog = false;
601 setTimeout(() => { 613 setTimeout(() => {
602 this.editedItem = Object.assign({}, this.defaultItem); 614 this.editedItem = Object.assign({}, this.defaultItem);
603 this.editedIndex = -1; 615 this.editedIndex = -1;
604 }, 300); 616 }, 300);
605 }, 617 },
606 close1() { 618 close1() {
607 this.dialog1 = false; 619 this.dialog1 = false;
608 }, 620 },
609 submit() { 621 submit() {
610 this.loading = true; 622 this.loading = true;
611 if (this.$refs.form.validate()) { 623 if (this.$refs.form.validate()) {
612 let newsData = { 624 let newsData = {
613 title: this.addNews.title, 625 title: this.addNews.title,
614 description: this.addNews.description 626 description: this.addNews.description
615 }; 627 };
616 if (this.files) { 628 if (this.files) {
617 var ary = []; 629 var ary = [];
618 var imageData = []; 630 var imageData = [];
619 ary = this.files; 631 ary = this.files;
620 for (let i = 0; i < ary.length; i++) { 632 for (let i = 0; i < ary.length; i++) {
621 const [baseUrl, imageUrl] = ary[i].split(/,/); 633 const [baseUrl, imageUrl] = ary[i].split(/,/);
622 imageData.push(imageUrl); 634 imageData.push(imageUrl);
623 newsData.upload = imageData; 635 newsData.upload = imageData;
624 } 636 }
625 } 637 }
626 http() 638 http()
627 .post("/createNews", newsData) 639 .post("/createNews", newsData)
628 .then(response => { 640 .then(response => {
629 this.files = []; 641 this.files = [];
630 this.snackbar = true; 642 this.snackbar = true;
631 this.text = "New News added successfully"; 643 this.text = "New News added successfully";
632 this.getNewsList(); 644 this.getNewsList();
633 this.loading = false; 645 this.loading = false;
634 this.clear(); 646 this.clear();
635 }) 647 })
636 .catch(error => { 648 .catch(error => {
637 this.snackbar = true; 649 this.snackbar = true;
638 this.text = error.response.data.message; 650 this.text = error.response.data.message;
639 }); 651 });
640 } 652 }
641 }, 653 },
642 clear() { 654 clear() {
643 this.$refs.form.reset(); 655 this.$refs.form.reset();
644 this.files = []; 656 this.files = [];
645 }, 657 },
646 save() { 658 save() {
647 let editNews = { 659 let editNews = {
648 title: this.editedItem.title, 660 title: this.editedItem.title,
649 description: this.editedItem.description, 661 description: this.editedItem.description,
650 newsId: this.editedItem._id 662 newsId: this.editedItem._id
651 }; 663 };
652 if (this.files) { 664 if (this.files) {
653 var ary = []; 665 var ary = [];
654 var imageData = []; 666 var imageData = [];
655 ary = this.files; 667 ary = this.files;
656 for (let i = 0; i < ary.length; i++) { 668 for (let i = 0; i < ary.length; i++) {
657 const [baseUrl, imageUrl] = ary[i].split(/,/); 669 const [baseUrl, imageUrl] = ary[i].split(/,/);
658 imageData.push(imageUrl); 670 imageData.push(imageUrl);
659 editNews.upload = imageData; 671 editNews.upload = imageData;
660 } 672 }
661 } 673 }
662 http() 674 http()
663 .put("/updateNews", editNews) 675 .put("/updateNews", editNews)
664 .then(response => { 676 .then(response => {
665 // console.log("updateNews",updateNews); 677 // console.log("updateNews",updateNews);
666 if ((this.snackbar = true)) { 678 if ((this.snackbar = true)) {
667 this.text = "Successfully Edit Existing News"; 679 this.text = "Successfully Edit Existing News";
668 } 680 }
669 this.getNewsList(); 681 this.getNewsList();
670 this.close(); 682 this.close();
671 }) 683 })
672 .catch(error => { 684 .catch(error => {
673 // console.log(error); 685 // console.log(error);
674 }); 686 });
675 } 687 }
676 }, 688 },
677 mounted() { 689 mounted() {
678 this.getNewsList(); 690 this.getNewsList();
679 this.editItem; 691 this.editItem;
680 }, 692 },
681 created() { 693 created() {
682 this.$root.$on("app:search", search => { 694 this.$root.$on("app:search", search => {
683 this.search = search; 695 this.search = search;
684 }); 696 });
685 }, 697 },
686 beforeDestroy() { 698 beforeDestroy() {
687 // dont forget to remove the listener 699 // dont forget to remove the listener
688 this.$root.$off("app:search"); 700 this.$root.$off("app:search");
689 } 701 }
690 }; 702 };
691 </script> 703 </script>
692 <style scoped> 704 <style scoped>
693 .active { 705 .active {
694 background-color: gray; 706 background-color: gray;
695 color: white !important; 707 color: white !important;
696 } 708 }
697 .activebtn { 709 .activebtn {
698 color: black !important; 710 color: black !important;
699 } 711 }
700 </style> 712 </style>
src/pages/NoticeBoard/noticeBoard.vue
Diff comments   View file @495e403
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 Notice Board</v-tab> 10 >Existing Notice Board</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 Notice Board</v-tab> 18 >Add New Notice Board</v-tab>
19 19
20 <!-- ****** Edit Notice Board ****** --> 20 <!-- ****** Edit Notice Board ****** -->
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="640px" scrollable> 31 <v-dialog v-model="dialog" max-width="640px" scrollable>
32 <v-card> 32 <v-card>
33 <v-toolbar color="grey lighten-2" flat> 33 <v-toolbar color="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 Notice Board</h3> 36 <h3>Edit Notice Board</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> 40 <v-card-text>
41 <v-layout> 41 <v-layout>
42 <v-flex xs12 class="text-xs-center text-sm-center text-md-center text-lg-center"> 42 <v-flex xs12 class="text-xs-center text-sm-center text-md-center text-lg-center">
43 <img 43 <img
44 src="/static/icon/user.png" 44 src="/static/icon/user.png"
45 v-if="!editedItem.eventImageUrl && !imageUrl" 45 v-if="!editedItem.eventImageUrl && !imageUrl"
46 width="150px" 46 width="150px"
47 /> 47 />
48 <img 48 <img
49 :src="editedItem.eventImageUrl" 49 :src="editedItem.eventImageUrl"
50 height="150" 50 height="150"
51 v-else-if="editedItem.eventImageUrl && !imageUrl" 51 v-else-if="editedItem.eventImageUrl && !imageUrl"
52 width="180px" 52 width="180px"
53 /> 53 />
54 <img 54 <img
55 v-if="imageUrl" 55 v-if="imageUrl"
56 :src="imageUrl" 56 :src="imageUrl"
57 height="150" 57 height="150"
58 style="border-radius:50%; width:200px" 58 style="border-radius:50%; width:200px"
59 /> 59 />
60 <input 60 <input
61 type="file" 61 type="file"
62 style="display: none" 62 style="display: none"
63 ref="image" 63 ref="image"
64 accept="image/*" 64 accept="image/*"
65 @change="onFilePicked" 65 @change="onFilePicked"
66 /> 66 />
67 </v-flex> 67 </v-flex>
68 </v-layout> 68 </v-layout>
69 <v-layout wrap> 69 <v-layout wrap>
70 <v-flex xs12> 70 <v-flex xs12>
71 <v-layout> 71 <v-layout>
72 <v-flex xs4 class="pt-4 subheading"> 72 <v-flex xs4 class="pt-4 subheading">
73 <label class="right">Title:</label> 73 <label class="right">Title:</label>
74 </v-flex> 74 </v-flex>
75 <v-flex xs6 class="ml-3"> 75 <v-flex xs6 class="ml-3">
76 <v-text-field 76 <v-text-field
77 v-model="editedItem.title" 77 v-model="editedItem.title"
78 placeholder="fill your Title" 78 placeholder="fill your Title"
79 name="name" 79 name="name"
80 type="text" 80 type="text"
81 required 81 required
82 ></v-text-field> 82 ></v-text-field>
83 </v-flex> 83 </v-flex>
84 </v-layout> 84 </v-layout>
85 </v-flex> 85 </v-flex>
86 <v-flex xs12> 86 <v-flex xs12>
87 <v-layout> 87 <v-layout>
88 <v-flex xs4 class="pt-4 subheading"> 88 <v-flex xs4 class="pt-4 subheading">
89 <label class="right">Description:</label> 89 <label class="right">Description:</label>
90 </v-flex> 90 </v-flex>
91 <v-flex xs6 class="ml-3"> 91 <v-flex xs6 class="ml-3">
92 <v-text-field 92 <v-text-field
93 placeholder="fill your Description" 93 placeholder="fill your Description"
94 v-model="editedItem.description" 94 v-model="editedItem.description"
95 type="text" 95 type="text"
96 name="email" 96 name="email"
97 required 97 required
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> 102 <v-flex xs12>
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 hidden-xs-only hidden-sm-only">Uplaod Image:</label> 105 <label class="right hidden-xs-only hidden-sm-only">Uplaod Image:</label>
106 <label class="right hidden-lg-only hidden-md-only hidden-xl-only">Uplaod :</label> 106 <label class="right hidden-lg-only hidden-md-only hidden-xl-only">Uplaod :</label>
107 </v-flex> 107 </v-flex>
108 <v-flex xs6 class="ml-3"> 108 <v-flex xs6 class="ml-3">
109 <v-text-field 109 <v-text-field
110 label="Select Image" 110 label="Select Image"
111 @click="pickFile" 111 @click="pickFile"
112 v-model="imageName" 112 v-model="imageName"
113 append-icon="attach_file" 113 append-icon="attach_file"
114 ></v-text-field> 114 ></v-text-field>
115 </v-flex> 115 </v-flex>
116 </v-layout> 116 </v-layout>
117 </v-flex> 117 </v-flex>
118 <v-flex xs12 sm9 offset-sm2> 118 <v-flex xs12 sm9 offset-sm2>
119 <v-card-actions> 119 <v-card-actions>
120 <v-btn round dark @click.native="close">Cancel</v-btn> 120 <v-btn round dark @click.native="close">Cancel</v-btn>
121 <v-spacer></v-spacer> 121 <v-spacer></v-spacer>
122 <v-btn round dark @click="save">Save</v-btn> 122 <v-btn round dark @click="save">Save</v-btn>
123 </v-card-actions> 123 </v-card-actions>
124 </v-flex> 124 </v-flex>
125 </v-layout> 125 </v-layout>
126 </v-card-text> 126 </v-card-text>
127 </v-card> 127 </v-card>
128 </v-dialog> 128 </v-dialog>
129 129
130 <!-- ****** VIEW PROFIL NOTICE BOARD ****** --> 130 <!-- ****** VIEW PROFIL NOTICE BOARD ****** -->
131 131
132 <v-dialog v-model="dialog1" max-width="640px" scrollable> 132 <v-dialog v-model="dialog1" max-width="640px" scrollable>
133 <v-card> 133 <v-card>
134 <v-toolbar color="grey lighten-2" flat> 134 <v-toolbar color="grey lighten-2" flat>
135 <v-spacer></v-spacer> 135 <v-spacer></v-spacer>
136 <v-toolbar-title> 136 <v-toolbar-title>
137 <h3>Notice Board</h3> 137 <h3>Notice Board</h3>
138 </v-toolbar-title> 138 </v-toolbar-title>
139 <v-spacer></v-spacer> 139 <v-spacer></v-spacer>
140 <v-icon @click="close1">close</v-icon> 140 <v-icon @click="close1">close</v-icon>
141 </v-toolbar> 141 </v-toolbar>
142 <v-card-text> 142 <v-card-text>
143 <v-layout> 143 <v-layout>
144 <v-flex align-center justify-center layout text-xs-center class="mt-2"> 144 <v-flex align-center justify-center layout text-xs-center class="mt-2">
145 <img src="/static/icon/user.png" v-if="!editedItem.eventImageUrl" width="130px" /> 145 <img src="/static/icon/user.png" v-if="!editedItem.eventImageUrl" width="130px" />
146 <img 146 <img
147 :src="editedItem.eventImageUrl" 147 :src="editedItem.eventImageUrl"
148 v-else-if="editedItem.eventImageUrl" 148 v-else-if="editedItem.eventImageUrl"
149 class="img" 149 class="img"
150 width="200" 150 width="200"
151 /> 151 />
152 </v-flex> 152 </v-flex>
153 </v-layout> 153 </v-layout>
154 <v-container grid-list-md> 154 <v-container grid-list-md>
155 <v-layout wrap> 155 <v-layout wrap>
156 <v-flex> 156 <v-flex>
157 <v-layout> 157 <v-layout>
158 <v-flex xs5 sm6> 158 <v-flex xs5 sm6>
159 <h5 class="right my-1"> 159 <h5 class="right my-1">
160 <b>Title:</b> 160 <b>Title:</b>
161 </h5> 161 </h5>
162 </v-flex> 162 </v-flex>
163 <v-flex sm6 xs8> 163 <v-flex sm6 xs8>
164 <h5 class="my-1">{{ editedItem.title }}</h5> 164 <h5 class="my-1">{{ editedItem.title }}</h5>
165 </v-flex> 165 </v-flex>
166 </v-layout> 166 </v-layout>
167 <v-layout> 167 <v-layout>
168 <v-flex xs5 sm6> 168 <v-flex xs5 sm6>
169 <h5 class="right my-1"> 169 <h5 class="right my-1">
170 <b>Description:</b> 170 <b>Description:</b>
171 </h5> 171 </h5>
172 </v-flex> 172 </v-flex>
173 <v-flex sm6 xs8> 173 <v-flex sm6 xs8>
174 <h5 class="my-1">{{ editedItem.description }}</h5> 174 <h5 class="my-1">{{ editedItem.description }}</h5>
175 </v-flex> 175 </v-flex>
176 </v-layout> 176 </v-layout>
177 </v-flex> 177 </v-flex>
178 </v-layout> 178 </v-layout>
179 </v-container> 179 </v-container>
180 </v-card-text> 180 </v-card-text>
181 </v-card> 181 </v-card>
182 </v-dialog> 182 </v-dialog>
183 183
184 <v-snackbar 184 <v-snackbar
185 :timeout="timeout" 185 :timeout="timeout"
186 :top="y === 'top'" 186 :top="y === 'top'"
187 :right="x === 'right'" 187 :right="x === 'right'"
188 :vertical="mode === 'vertical'" 188 :vertical="mode === 'vertical'"
189 v-model="snackbar" 189 v-model="snackbar"
190 color="success" 190 color="success"
191 >{{ text }}</v-snackbar> 191 >{{ text }}</v-snackbar>
192 192
193 <!-- ****** EXISTING-USERS Notice Board TABLE ****** --> 193 <!-- ****** EXISTING-USERS Notice Board TABLE ****** -->
194 194
195 <v-data-table 195 <v-data-table
196 :headers="headers" 196 :headers="headers"
197 :items="desserts" 197 :items="desserts"
198 :pagination.sync="pagination" 198 :pagination.sync="pagination"
199 :search="search" 199 :search="search"
200 > 200 >
201 <template slot="items" slot-scope="props"> 201 <template slot="items" slot-scope="props">
202 <td id="td" class="text-xs-center">{{ props.index + 1}}</td> 202 <td id="td" class="text-xs-center">{{ props.index + 1}}</td>
203 <td id="td" class="text-xs-center">{{ props.item.title}}</td> 203 <td id="td" class="text-xs-center">{{ props.item.title}}</td>
204 <td id="td" class="text-xs-center">{{ props.item.description}}</td> 204 <td id="td" class="text-xs-center">{{ props.item.description}}</td>
205 205
206 <td class="text-xs-center"> 206 <td class="text-xs-center">
207 <span> 207 <span>
208 <img 208 <v-tooltip top>
209 style="cursor:pointer; width:25px; height:18px; " 209 <img
210 class="mr-5" 210 slot="activator"
211 @click="profile(props.item)" 211 style="cursor:pointer; width:25px; height:18px; "
212 src="/static/icon/eye1.png" 212 class="mr5"
213 /> 213 @click="profile(props.item)"
214 <img 214 src="/static/icon/eye1.png"
215 style="cursor:pointer; width:20px; height:18px; " 215 />
216 class="mr-5" 216 <span>View</span>
217 @click="editItem(props.item)" 217 </v-tooltip>
218 src="/static/icon/edit1.png" 218 <v-tooltip top>
219 /> 219 <img
220 <img 220 slot="activator"
221 style="cursor:pointer;width:20px; height:20px; " 221 style="cursor:pointer; width:20px; height:18px; "
222 class="mr-5" 222 class="mr5"
223 @click="deleteItem(props.item)" 223 @click="editItem(props.item)"
224 src="/static/icon/delete1.png" 224 src="/static/icon/edit1.png"
225 /> 225 />
226 <span>Edit</span>
227 </v-tooltip>
228 <v-tooltip top>
229 <img
230 slot="activator"
231 style="cursor:pointer; width:20px; height:20px; "
232 class="mr5"
233 @click="deleteItem(props.item)"
234 src="/static/icon/delete1.png"
235 />
236 <span>Delete</span>
237 </v-tooltip>
226 </span> 238 </span>
227 </td> 239 </td>
228 </template> 240 </template>
229 <v-alert 241 <v-alert
230 slot="no-results" 242 slot="no-results"
231 :value="true" 243 :value="true"
232 color="error" 244 color="error"
233 icon="warning" 245 icon="warning"
234 >Your search for "{{ search }}" found no results.</v-alert> 246 >Your search for "{{ search }}" found no results.</v-alert>
235 </v-data-table> 247 </v-data-table>
236 </v-tab-item> 248 </v-tab-item>
237 249
238 <!-- ****** ADD MULTIPLE Notice Board ****** --> 250 <!-- ****** ADD MULTIPLE Notice Board ****** -->
239 251
240 <v-tab-item> 252 <v-tab-item>
241 <v-container> 253 <v-container>
242 <v-snackbar 254 <v-snackbar
243 :timeout="timeout" 255 :timeout="timeout"
244 :top="y === 'top'" 256 :top="y === 'top'"
245 :right="x === 'right'" 257 :right="x === 'right'"
246 :vertical="mode === 'vertical'" 258 :vertical="mode === 'vertical'"
247 v-model="snackbar" 259 v-model="snackbar"
248 color="success" 260 color="success"
249 >{{ text }}</v-snackbar> 261 >{{ text }}</v-snackbar>
250 <v-flex xs12 sm8 offset-sm2 class="top"> 262 <v-flex xs12 sm8 offset-sm2 class="top">
251 <v-card flat> 263 <v-card flat>
252 <v-container fluid fill-height> 264 <v-container fluid fill-height>
253 <v-layout align-center> 265 <v-layout align-center>
254 <v-flex xs12> 266 <v-flex xs12>
255 <v-form ref="form" v-model="valid" lazy-validation> 267 <v-form ref="form" v-model="valid" lazy-validation>
256 <v-layout> 268 <v-layout>
257 <v-flex 269 <v-flex
258 xs12 270 xs12
259 class="text-xs-center text-sm-center text-md-center text-lg-center my-4" 271 class="text-xs-center text-sm-center text-md-center text-lg-center my-4"
260 > 272 >
261 <v-avatar size="100px"> 273 <v-avatar size="100px">
262 <img src="/static/icon/user.png" v-if="!imageUrl" /> 274 <img src="/static/icon/user.png" v-if="!imageUrl" />
263 </v-avatar> 275 </v-avatar>
264 <input 276 <input
265 type="file" 277 type="file"
266 style="display: none" 278 style="display: none"
267 ref="image" 279 ref="image"
268 accept="image/*" 280 accept="image/*"
269 @change="onFilePicked" 281 @change="onFilePicked"
270 /> 282 />
271 <img 283 <img
272 :src="imageUrl" 284 :src="imageUrl"
273 height="150" 285 height="150"
274 v-if="imageUrl" 286 v-if="imageUrl"
275 style="border-radius:50%; width:200px" 287 style="border-radius:50%; width:200px"
276 /> 288 />
277 </v-flex> 289 </v-flex>
278 </v-layout> 290 </v-layout>
279 <v-layout> 291 <v-layout>
280 <v-flex xs4 class="pt-4 subheading"> 292 <v-flex xs4 class="pt-4 subheading">
281 <label class="right">Title:</label> 293 <label class="right">Title:</label>
282 </v-flex> 294 </v-flex>
283 <v-flex xs6 class="ml-3"> 295 <v-flex xs6 class="ml-3">
284 <v-text-field 296 <v-text-field
285 v-model="addNoticeBoard.title" 297 v-model="addNoticeBoard.title"
286 placeholder="fill your Title" 298 placeholder="fill your Title"
287 name="name" 299 name="name"
288 type="text" 300 type="text"
289 :rules="titleRules" 301 :rules="titleRules"
290 required 302 required
291 ></v-text-field> 303 ></v-text-field>
292 </v-flex> 304 </v-flex>
293 </v-layout> 305 </v-layout>
294 <v-layout> 306 <v-layout>
295 <v-flex xs4 class="pt-4 subheading"> 307 <v-flex xs4 class="pt-4 subheading">
296 <label class="right">Description:</label> 308 <label class="right">Description:</label>
297 </v-flex> 309 </v-flex>
298 <v-flex xs6 class="ml-3"> 310 <v-flex xs6 class="ml-3">
299 <v-text-field 311 <v-text-field
300 v-model="addNoticeBoard.description" 312 v-model="addNoticeBoard.description"
301 placeholder="fill your Description" 313 placeholder="fill your Description"
302 name="name" 314 name="name"
303 type="text" 315 type="text"
304 :rules="descriptionRules" 316 :rules="descriptionRules"
305 required 317 required
306 ></v-text-field> 318 ></v-text-field>
307 </v-flex> 319 </v-flex>
308 </v-layout> 320 </v-layout>
309 <v-layout> 321 <v-layout>
310 <v-flex xs4 class="pt-4 subheading"> 322 <v-flex xs4 class="pt-4 subheading">
311 <label class="right hidden-xs-only hidden-sm-only">Uplaod Image:</label> 323 <label class="right hidden-xs-only hidden-sm-only">Uplaod Image:</label>
312 <label class="right hidden-lg-only hidden-md-only hidden-xl-only">Uplaod :</label> 324 <label class="right hidden-lg-only hidden-md-only hidden-xl-only">Uplaod :</label>
313 </v-flex> 325 </v-flex>
314 <v-flex xs6 class="ml-3"> 326 <v-flex xs6 class="ml-3">
315 <v-text-field 327 <v-text-field
316 label="Select Image" 328 label="Select Image"
317 @click="pickFile" 329 @click="pickFile"
318 v-model="imageName" 330 v-model="imageName"
319 append-icon="attach_file" 331 append-icon="attach_file"
320 ></v-text-field> 332 ></v-text-field>
321 </v-flex> 333 </v-flex>
322 </v-layout> 334 </v-layout>
323 <v-layout> 335 <v-layout>
324 <v-flex xs12 sm9 offset-sm2> 336 <v-flex xs12 sm9 offset-sm2>
325 <v-card-actions> 337 <v-card-actions>
326 <v-btn @click="clear" round dark>clear</v-btn> 338 <v-btn @click="clear" round dark>clear</v-btn>
327 <v-spacer></v-spacer> 339 <v-spacer></v-spacer>
328 <v-btn @click="submit" round dark :loading="loading">Add</v-btn> 340 <v-btn @click="submit" round dark :loading="loading">Add</v-btn>
329 </v-card-actions> 341 </v-card-actions>
330 </v-flex> 342 </v-flex>
331 </v-layout> 343 </v-layout>
332 </v-form> 344 </v-form>
333 </v-flex> 345 </v-flex>
334 </v-layout> 346 </v-layout>
335 </v-container> 347 </v-container>
336 </v-card> 348 </v-card>
337 </v-flex> 349 </v-flex>
338 </v-container> 350 </v-container>
339 </v-tab-item> 351 </v-tab-item>
340 </v-tabs> 352 </v-tabs>
341 <div class="loader" v-if="showLoader"> 353 <div class="loader" v-if="showLoader">
342 <v-progress-circular indeterminate color="white"></v-progress-circular> 354 <v-progress-circular indeterminate color="white"></v-progress-circular>
343 </div> 355 </div>
344 </v-app> 356 </v-app>
345 </template> 357 </template>
346 358
347 <script> 359 <script>
348 import http from "@/Services/http.js"; 360 import http from "@/Services/http.js";
349 import Util from "@/util"; 361 import Util from "@/util";
350 362
351 export default { 363 export default {
352 data: () => ({ 364 data: () => ({
353 snackbar: false, 365 snackbar: false,
354 y: "top", 366 y: "top",
355 x: "right", 367 x: "right",
356 mode: "", 368 mode: "",
357 timeout: 3000, 369 timeout: 3000,
358 text: "", 370 text: "",
359 showLoader: false, 371 showLoader: false,
360 loading: false, 372 loading: false,
361 date: null, 373 date: null,
362 search: "", 374 search: "",
363 dialog: false, 375 dialog: false,
364 dialog1: false, 376 dialog1: false,
365 valid: true, 377 valid: true,
366 isActive: true, 378 isActive: true,
367 newActive: false, 379 newActive: false,
368 addclass: [], 380 addclass: [],
369 addSection: [], 381 addSection: [],
370 gender: ["Male", "Female"], 382 gender: ["Male", "Female"],
371 AddUsercredentials: {}, 383 AddUsercredentials: {},
372 pagination: { 384 pagination: {
373 rowsPerPage: 19 385 rowsPerPage: 19
374 }, 386 },
375 imageName: "", 387 imageName: "",
376 imageUrl: "", 388 imageUrl: "",
377 imageFile: "", 389 imageFile: "",
378 upload: "", 390 upload: "",
379 titleRules: [v => !!v || " Title is required"], 391 titleRules: [v => !!v || " Title is required"],
380 descriptionRules: [v => !!v || " Description is required"], 392 descriptionRules: [v => !!v || " Description is required"],
381 headers: [ 393 headers: [
382 { 394 {
383 text: "No", 395 text: "No",
384 align: "center", 396 align: "center",
385 sortable: false, 397 sortable: false,
386 value: "No" 398 value: "No"
387 }, 399 },
388 { text: "Title", value: "title", sortable: false, align: "center" }, 400 { text: "Title", value: "title", sortable: false, align: "center" },
389 { 401 {
390 text: "Description", 402 text: "Description",
391 value: "description", 403 value: "description",
392 sortable: false, 404 sortable: false,
393 align: "center" 405 align: "center"
394 }, 406 },
395 { text: "Action", value: "", sortable: false, align: "center" } 407 { text: "Action", value: "", sortable: false, align: "center" }
396 ], 408 ],
397 desserts: [], 409 desserts: [],
398 editedIndex: -1, 410 editedIndex: -1,
399 addNoticeBoard: {}, 411 addNoticeBoard: {},
400 editedItem: { 412 editedItem: {
401 title: "", 413 title: "",
402 description: "" 414 description: ""
403 }, 415 },
404 defaultItem: { 416 defaultItem: {
405 title: "", 417 title: "",
406 description: "" 418 description: ""
407 } 419 }
408 }), 420 }),
409 methods: { 421 methods: {
410 pickFile() { 422 pickFile() {
411 this.$refs.image.click(); 423 this.$refs.image.click();
412 }, 424 },
413 425
414 onFilePicked(e) { 426 onFilePicked(e) {
415 // console.log(e) 427 // console.log(e)
416 const files = e.target.files; 428 const files = e.target.files;
417 this.upload = e.target.files[0]; 429 this.upload = e.target.files[0];
418 console.log("thisupload==>", this.upload); 430 console.log("thisupload==>", this.upload);
419 if (files[0] !== undefined) { 431 if (files[0] !== undefined) {
420 this.imageName = files[0].name; 432 this.imageName = files[0].name;
421 if (this.imageName.lastIndexOf(".") <= 0) { 433 if (this.imageName.lastIndexOf(".") <= 0) {
422 return; 434 return;
423 } 435 }
424 const fr = new FileReader(); 436 const fr = new FileReader();
425 fr.readAsDataURL(files[0]); 437 fr.readAsDataURL(files[0]);
426 fr.addEventListener("load", () => { 438 fr.addEventListener("load", () => {
427 this.imageUrl = fr.result; 439 this.imageUrl = fr.result;
428 this.imageFile = files[0]; // this is an image file that can be sent to server... 440 this.imageFile = files[0]; // this is an image file that can be sent to server...
429 }); 441 });
430 } else { 442 } else {
431 this.imageName = ""; 443 this.imageName = "";
432 this.imageFile = ""; 444 this.imageFile = "";
433 this.imageUrl = ""; 445 this.imageUrl = "";
434 } 446 }
435 }, 447 },
436 getNoticeDataList() { 448 getNoticeDataList() {
437 this.showLoader = true; 449 this.showLoader = true;
438 var token = this.$store.state.token; 450 var token = this.$store.state.token;
439 http() 451 http()
440 .get("/getEventsList", { 452 .get("/getEventsList", {
441 headers: { Authorization: "Bearer " + token } 453 headers: { Authorization: "Bearer " + token }
442 }) 454 })
443 .then(response => { 455 .then(response => {
444 this.desserts = response.data.data; 456 this.desserts = response.data.data;
445 this.showLoader = false; 457 this.showLoader = false;
446 }) 458 })
447 .catch(err => { 459 .catch(err => {
448 this.showLoader = false; 460 this.showLoader = false;
449 if (error.response.status === 401) { 461 if (error.response.status === 401) {
450 this.$router.replace({ path: "/" }); 462 this.$router.replace({ path: "/" });
451 this.$store.dispatch("setToken", null); 463 this.$store.dispatch("setToken", null);
452 this.$store.dispatch("Id", null); 464 this.$store.dispatch("Id", null);
453 } 465 }
454 }); 466 });
455 }, 467 },
456 editItem(item) { 468 editItem(item) {
457 this.editedIndex = this.desserts.indexOf(item); 469 this.editedIndex = this.desserts.indexOf(item);
458 this.editedItem = Object.assign({}, item); 470 this.editedItem = Object.assign({}, item);
459 this.dialog = true; 471 this.dialog = true;
460 }, 472 },
461 profile(item) { 473 profile(item) {
462 this.editedIndex = this.desserts.indexOf(item); 474 this.editedIndex = this.desserts.indexOf(item);
463 this.editedItem = Object.assign({}, item); 475 this.editedItem = Object.assign({}, item);
464 this.dialog1 = true; 476 this.dialog1 = true;
465 }, 477 },
466 deleteItem(item) { 478 deleteItem(item) {
467 let deleteEvent = { 479 let deleteEvent = {
468 eventId: item._id 480 eventId: item._id
469 }; 481 };
470 http() 482 http()
471 .delete( 483 .delete(
472 "/deleteEvent", 484 "/deleteEvent",
473 confirm("Are you sure you want to delete this?") && { 485 confirm("Are you sure you want to delete this?") && {
474 params: deleteEvent 486 params: deleteEvent
475 } 487 }
476 ) 488 )
477 .then(response => { 489 .then(response => {
478 // console.log("deleteUers",deleteEvent) 490 // console.log("deleteUers",deleteEvent)
479 if ((this.snackbar = true)) { 491 if ((this.snackbar = true)) {
480 this.text = "Successfully delete Existing Notice Data"; 492 this.text = "Successfully delete Existing Notice Data";
481 } 493 }
482 this.getNoticeDataList(); 494 this.getNoticeDataList();
483 }) 495 })
484 .catch(error => { 496 .catch(error => {
485 // console.log(error); 497 // console.log(error);
486 }); 498 });
487 }, 499 },
488 activeTab(type) { 500 activeTab(type) {
489 switch (type) { 501 switch (type) {
490 case "existing": 502 case "existing":
491 this.newActive = false; 503 this.newActive = false;
492 this.isActive = true; 504 this.isActive = true;
493 break; 505 break;
494 506
495 default: 507 default:
496 this.newActive = true; 508 this.newActive = true;
497 this.isActive = false; 509 this.isActive = false;
498 break; 510 break;
499 } 511 }
500 }, 512 },
501 close() { 513 close() {
502 this.dialog = false; 514 this.dialog = false;
503 setTimeout(() => { 515 setTimeout(() => {
504 this.editedItem = Object.assign({}, this.defaultItem); 516 this.editedItem = Object.assign({}, this.defaultItem);
505 this.editedIndex = -1; 517 this.editedIndex = -1;
506 }, 300); 518 }, 300);
507 }, 519 },
508 close1() { 520 close1() {
509 this.dialog1 = false; 521 this.dialog1 = false;
510 }, 522 },
511 submit() { 523 submit() {
512 if (this.$refs.form.validate()) { 524 if (this.$refs.form.validate()) {
513 if (this.imageUrl) { 525 if (this.imageUrl) {
514 var str = this.imageUrl; 526 var str = this.imageUrl;
515 const [baseUrl, imageUrl] = str.split(/,/); 527 const [baseUrl, imageUrl] = str.split(/,/);
516 this.addNoticeBoard.upload = imageUrl; 528 this.addNoticeBoard.upload = imageUrl;
517 } 529 }
518 http() 530 http()
519 .post("/createEvent", this.addNoticeBoard) 531 .post("/createEvent", this.addNoticeBoard)
520 .then(response => { 532 .then(response => {
521 this.imageUrl = ""; 533 this.imageUrl = "";
522 this.snackbar = true; 534 this.snackbar = true;
523 this.text = "New Notice added successfully"; 535 this.text = "New Notice added successfully";
524 this.getNoticeDataList(); 536 this.getNoticeDataList();
525 this.clear(); 537 this.clear();
526 }) 538 })
527 .catch(error => { 539 .catch(error => {
528 // console.log(error); 540 // console.log(error);
529 this.snackbar = true; 541 this.snackbar = true;
530 this.text = error.response.data.message; 542 this.text = error.response.data.message;
531 }); 543 });
532 } 544 }
533 }, 545 },
534 clear() { 546 clear() {
535 this.$refs.form.reset(); 547 this.$refs.form.reset();
536 this.imageUrl = ""; 548 this.imageUrl = "";
537 }, 549 },
538 save() { 550 save() {
539 let editNoticeBoard = { 551 let editNoticeBoard = {
540 eventId: this.editedItem._id, 552 eventId: this.editedItem._id,
541 title: this.editedItem.title, 553 title: this.editedItem.title,
542 description: this.editedItem.description 554 description: this.editedItem.description
543 }; 555 };
544 if (this.imageUrl) { 556 if (this.imageUrl) {
545 var str = this.imageUrl; 557 var str = this.imageUrl;
546 const [baseUrl, imageUrl] = str.split(/,/); 558 const [baseUrl, imageUrl] = str.split(/,/);
547 editNoticeBoard.upload = imageUrl; 559 editNoticeBoard.upload = imageUrl;
548 } 560 }
549 http() 561 http()
550 .put("/updateEvent", editNoticeBoard) 562 .put("/updateEvent", editNoticeBoard)
551 .then(response => { 563 .then(response => {
552 if ((this.snackbar = true)) { 564 if ((this.snackbar = true)) {
553 this.text = "Successfully Edit Existing Notice Data"; 565 this.text = "Successfully Edit Existing Notice Data";
554 } 566 }
555 this.getNoticeDataList(); 567 this.getNoticeDataList();
556 this.close(); 568 this.close();
557 }) 569 })
558 .catch(error => { 570 .catch(error => {
559 // console.log(error); 571 // console.log(error);
560 }); 572 });
561 } 573 }
562 }, 574 },
563 mounted() { 575 mounted() {
564 this.getNoticeDataList(); 576 this.getNoticeDataList();
565 }, 577 },
566 created() { 578 created() {
567 this.$root.$on("app:search", search => { 579 this.$root.$on("app:search", search => {
568 this.search = search; 580 this.search = search;
569 }); 581 });
570 }, 582 },
571 beforeDestroy() { 583 beforeDestroy() {
572 // dont forget to remove the listener 584 // dont forget to remove the listener
573 this.$root.$off("app:search"); 585 this.$root.$off("app:search");
574 } 586 }
575 }; 587 };
576 </script> 588 </script>
577 <style scoped> 589 <style scoped>
578 .active { 590 .active {
579 background-color: gray; 591 background-color: gray;
580 color: white !important; 592 color: white !important;
581 } 593 }
582 .activebtn { 594 .activebtn {
583 color: black !important; 595 color: black !important;
584 } 596 }
585 </style> 597 </style>
src/pages/Notification/notification.vue
Diff comments   View file @495e403
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 Notifictaion</v-tab> 10 >Existing Notifictaion</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 Notifictaion</v-tab> 18 >Add New Notifictaion</v-tab>
19 19
20 <!-- ****** EDITS NOTIFICATION DETAILS ****** --> 20 <!-- ****** EDITS NOTIFICATION 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="600px"> 31 <v-dialog v-model="dialog" max-width="600px">
32 <v-flex xs12 sm12> 32 <v-flex xs12 sm12>
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 Notifictaion</h3> 36 <h3>Edit Notifictaion</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 class="pa-3"> 40 <v-card flat class="pa-3">
41 <v-flex xs12 sm12> 41 <v-flex xs12 sm12>
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">Title:</label> 44 <label class="right">Title:</label>
45 </v-flex> 45 </v-flex>
46 <v-flex xs8 sm5 class="ml-3"> 46 <v-flex xs8 sm5 class="ml-3">
47 <v-text-field 47 <v-text-field
48 v-model="editedItem.title" 48 v-model="editedItem.title"
49 placeholder="fill your Title" 49 placeholder="fill your Title"
50 name="name" 50 name="name"
51 type="text" 51 type="text"
52 ></v-text-field> 52 ></v-text-field>
53 </v-flex> 53 </v-flex>
54 </v-layout> 54 </v-layout>
55 </v-flex> 55 </v-flex>
56 <v-flex xs12 sm12> 56 <v-flex xs12 sm12>
57 <v-layout> 57 <v-layout>
58 <v-flex xs4 class="pt-4 subheading"> 58 <v-flex xs4 class="pt-4 subheading">
59 <label class="right">Description:</label> 59 <label class="right">Description:</label>
60 </v-flex> 60 </v-flex>
61 <v-flex xs8 sm5 class="ml-3"> 61 <v-flex xs8 sm5 class="ml-3">
62 <v-text-field 62 <v-text-field
63 placeholder="fill your Description" 63 placeholder="fill your Description"
64 v-model="editedItem.description" 64 v-model="editedItem.description"
65 type="text" 65 type="text"
66 ></v-text-field> 66 ></v-text-field>
67 </v-flex> 67 </v-flex>
68 </v-layout> 68 </v-layout>
69 </v-flex> 69 </v-flex>
70 <v-layout> 70 <v-layout>
71 <v-flex xs12 sm10 offset-sm1> 71 <v-flex xs12 sm10 offset-sm1>
72 <v-card-actions> 72 <v-card-actions>
73 <v-btn round dark @click.native="close">Cancel</v-btn> 73 <v-btn round dark @click.native="close">Cancel</v-btn>
74 <v-spacer></v-spacer> 74 <v-spacer></v-spacer>
75 <v-btn round dark @click="save">Save</v-btn> 75 <v-btn round dark @click="save">Save</v-btn>
76 </v-card-actions> 76 </v-card-actions>
77 </v-flex> 77 </v-flex>
78 </v-layout> 78 </v-layout>
79 </v-card> 79 </v-card>
80 </v-flex> 80 </v-flex>
81 </v-dialog> 81 </v-dialog>
82 82
83 <!-- ****** PROFILE VIEW NOTIFICATION DEATILS ****** --> 83 <!-- ****** PROFILE VIEW NOTIFICATION DEATILS ****** -->
84 84
85 <v-dialog v-model="dialog1" max-width="600px"> 85 <v-dialog v-model="dialog1" max-width="500px">
86 <v-toolbar color="v-toolbar"> 86 <v-toolbar color="v-toolbar">
87 <v-spacer></v-spacer> 87 <v-spacer></v-spacer>
88 <v-toolbar-title> 88 <v-toolbar-title>
89 <h3>Notification</h3> 89 <h3>Notification</h3>
90 </v-toolbar-title> 90 </v-toolbar-title>
91 <v-spacer></v-spacer> 91 <v-spacer></v-spacer>
92 <v-icon @click="close1">close</v-icon> 92 <v-icon @click="close1">close</v-icon>
93 </v-toolbar> 93 </v-toolbar>
94 <v-card> 94 <v-card>
95 <v-card-text> 95 <v-card-text>
96 <v-container grid-list-md> 96 <v-container grid-list-md>
97 <v-layout wrap> 97 <v-layout wrap>
98 <v-flex xs12> 98 <v-flex xs12>
99 <v-layout> 99 <v-layout>
100 <v-flex xs4 sm6> 100 <v-flex xs4 sm6>
101 <h5 class="right my-1"> 101 <h5 class="right my-1">
102 <b>Title:</b> 102 <b>Title:</b>
103 </h5> 103 </h5>
104 </v-flex> 104 </v-flex>
105 <v-flex sm6 xs8> 105 <v-flex sm6 xs8>
106 <h5 class="my-1">{{ editedItem.title }}</h5> 106 <h5 class="my-1">{{ editedItem.title }}</h5>
107 </v-flex> 107 </v-flex>
108 </v-layout> 108 </v-layout>
109 </v-flex> 109 </v-flex>
110 <v-layout> 110 <v-layout>
111 <v-flex xs4 sm6> 111 <v-flex xs4 sm6>
112 <h5 class="right my-1"> 112 <h5 class="right my-1">
113 <b>Description:</b> 113 <b>Description:</b>
114 </h5> 114 </h5>
115 </v-flex> 115 </v-flex>
116 <v-flex sm6 xs8> 116 <v-flex sm6 xs8>
117 <h5 class="my-1">{{ editedItem.description }}</h5> 117 <h5 class="my-1">{{ editedItem.description }}</h5>
118 </v-flex> 118 </v-flex>
119 </v-layout> 119 </v-layout>
120 </v-layout> 120 </v-layout>
121 </v-container> 121 </v-container>
122 </v-card-text> 122 </v-card-text>
123 </v-card> 123 </v-card>
124 </v-dialog> 124 </v-dialog>
125 <v-snackbar 125 <v-snackbar
126 :timeout="timeout" 126 :timeout="timeout"
127 :top="y === 'top'" 127 :top="y === 'top'"
128 :right="x === 'right'" 128 :right="x === 'right'"
129 :vertical="mode === 'vertical'" 129 :vertical="mode === 'vertical'"
130 v-model="snackbar" 130 v-model="snackbar"
131 color="success" 131 color="success"
132 >{{ text }}</v-snackbar> 132 >{{ text }}</v-snackbar>
133 133
134 <!-- ****** EXISTING-USERS NOTIFICATION TABLE ****** --> 134 <!-- ****** EXISTING-USERS NOTIFICATION TABLE ****** -->
135 135
136 <v-data-table 136 <v-data-table
137 :headers="headers" 137 :headers="headers"
138 :items="desserts" 138 :items="desserts"
139 :pagination.sync="pagination" 139 :pagination.sync="pagination"
140 :search="search" 140 :search="search"
141 > 141 >
142 <template slot="items" slot-scope="props"> 142 <template slot="items" slot-scope="props">
143 <td id="td" class="text-xs-center">{{ props.index + 1}}</td> 143 <td id="td" class="text-xs-center">{{ props.index + 1}}</td>
144 <td id="td" class="text-xs-center">{{ props.item.title}}</td> 144 <td id="td" class="text-xs-center">{{ props.item.title}}</td>
145 <td id="td" class="text-xs-center">{{ props.item.description}}</td> 145 <td id="td" class="text-xs-center">{{ props.item.description}}</td>
146 146
147 <td id="td" class="text-xs-center"> 147 <td id="td" class="text-xs-center">
148 <span> 148 <span>
149 <img 149 <v-tooltip top>
150 style="cursor:pointer; width:25px; height:18px; " 150 <img
151 class="mr-5" 151 slot="activator"
152 @click="profile(props.item)" 152 style="cursor:pointer; width:25px; height:18px; "
153 src="/static/icon/eye1.png" 153 class="mr5"
154 /> 154 @click="profile(props.item)"
155 <img 155 src="/static/icon/eye1.png"
156 style="cursor:pointer; width:20px; height:18px; " 156 />
157 class="mr-5" 157 <span>View</span>
158 @click="editItem(props.item)" 158 </v-tooltip>
159 src="/static/icon/edit1.png" 159 <v-tooltip top>
160 /> 160 <img
161 <img 161 slot="activator"
162 style="cursor:pointer;width:20px; height:20px; " 162 style="cursor:pointer; width:20px; height:18px; "
163 class="mr-5" 163 class="mr5"
164 @click="deleteItem(props.item)" 164 @click="editItem(props.item)"
165 src="/static/icon/delete1.png" 165 src="/static/icon/edit1.png"
166 /> 166 />
167 <span>Edit</span>
168 </v-tooltip>
169 <v-tooltip top>
170 <img
171 slot="activator"
172 style="cursor:pointer; width:20px; height:20px; "
173 class="mr5"
174 @click="deleteItem(props.item)"
175 src="/static/icon/delete1.png"
176 />
177 <span>Delete</span>
178 </v-tooltip>
167 </span> 179 </span>
168 </td> 180 </td>
169 </template> 181 </template>
170 <v-alert 182 <v-alert
171 slot="no-results" 183 slot="no-results"
172 :value="true" 184 :value="true"
173 color="error" 185 color="error"
174 icon="warning" 186 icon="warning"
175 >Your search for "{{ search }}" found no results.</v-alert> 187 >Your search for "{{ search }}" found no results.</v-alert>
176 </v-data-table> 188 </v-data-table>
177 </v-tab-item> 189 </v-tab-item>
178 190
179 <!-- ****** ADD MULTIPLE NOTIFICATION ****** --> 191 <!-- ****** ADD MULTIPLE NOTIFICATION ****** -->
180 192
181 <v-tab-item> 193 <v-tab-item>
182 <v-container> 194 <v-container>
183 <v-snackbar 195 <v-snackbar
184 :timeout="timeout" 196 :timeout="timeout"
185 :top="y === 'top'" 197 :top="y === 'top'"
186 :right="x === 'right'" 198 :right="x === 'right'"
187 :vertical="mode === 'vertical'" 199 :vertical="mode === 'vertical'"
188 v-model="snackbar" 200 v-model="snackbar"
189 color="success" 201 color="success"
190 >{{ text }}</v-snackbar> 202 >{{ text }}</v-snackbar>
191 <v-flex xs12 sm8 class="top" offset-sm2> 203 <v-flex xs12 sm8 class="top" offset-sm2>
192 <v-card flat> 204 <v-card flat>
193 <v-form ref="form" v-model="valid" lazy-validation> 205 <v-form ref="form" v-model="valid" lazy-validation>
194 <v-container> 206 <v-container>
195 <v-flex xs12> 207 <v-flex xs12>
196 <v-layout> 208 <v-layout>
197 <v-flex xs4 class="pt-4 subheading"> 209 <v-flex xs4 class="pt-4 subheading">
198 <label class="right">Title:</label> 210 <label class="right">Title:</label>
199 </v-flex> 211 </v-flex>
200 <v-flex xs8 sm6 class="ml-3"> 212 <v-flex xs8 sm6 class="ml-3">
201 <v-text-field 213 <v-text-field
202 v-model="addNotification.title" 214 v-model="addNotification.title"
203 placeholder="fill your Title" 215 placeholder="fill your Title"
204 type="text" 216 type="text"
205 :rules="titleRules" 217 :rules="titleRules"
206 required 218 required
207 ></v-text-field> 219 ></v-text-field>
208 </v-flex> 220 </v-flex>
209 </v-layout> 221 </v-layout>
210 </v-flex> 222 </v-flex>
211 <v-flex xs12> 223 <v-flex xs12>
212 <v-layout> 224 <v-layout>
213 <v-flex xs4 class="pt-4 subheading"> 225 <v-flex xs4 class="pt-4 subheading">
214 <label class="right">Description:</label> 226 <label class="right">Description:</label>
215 </v-flex> 227 </v-flex>
216 <v-flex xs10 sm6 class="ml-3"> 228 <v-flex xs10 sm6 class="ml-3">
217 <v-text-field 229 <v-text-field
218 placeholder="fill your Description" 230 placeholder="fill your Description"
219 :rules="descriptionRules" 231 :rules="descriptionRules"
220 v-model="addNotification.description" 232 v-model="addNotification.description"
221 type="text" 233 type="text"
222 required 234 required
223 ></v-text-field> 235 ></v-text-field>
224 </v-flex> 236 </v-flex>
225 </v-layout> 237 </v-layout>
226 </v-flex> 238 </v-flex>
227 <v-layout> 239 <v-layout>
228 <v-flex xs12 sm9 offset-sm2> 240 <v-flex xs12 sm9 offset-sm2>
229 <v-layout> 241 <v-layout>
230 <v-flex xs6> 242 <v-flex xs6>
231 <v-btn @click="clear" round class="ml-3" dark>clear</v-btn> 243 <v-btn @click="clear" round class="ml-3" dark>clear</v-btn>
232 </v-flex> 244 </v-flex>
233 <v-flex xs6> 245 <v-flex xs6>
234 <v-btn @click="submit" round dark :loading="loading" class="right">Add</v-btn> 246 <v-btn @click="submit" round dark :loading="loading" class="right">Add</v-btn>
235 </v-flex> 247 </v-flex>
236 </v-layout> 248 </v-layout>
237 </v-flex> 249 </v-flex>
238 </v-layout> 250 </v-layout>
239 </v-container> 251 </v-container>
240 </v-form> 252 </v-form>
241 </v-card> 253 </v-card>
242 </v-flex> 254 </v-flex>
243 </v-container> 255 </v-container>
244 </v-tab-item> 256 </v-tab-item>
245 </v-tabs> 257 </v-tabs>
246 <div class="loader" v-if="showLoader"> 258 <div class="loader" v-if="showLoader">
247 <v-progress-circular indeterminate color="white"></v-progress-circular> 259 <v-progress-circular indeterminate color="white"></v-progress-circular>
248 </div> 260 </div>
249 </v-app> 261 </v-app>
250 </template> 262 </template>
251 263
252 <script> 264 <script>
253 import http from "@/Services/http.js"; 265 import http from "@/Services/http.js";
254 import Util from "@/util"; 266 import Util from "@/util";
255 267
256 export default { 268 export default {
257 data: () => ({ 269 data: () => ({
258 snackbar: false, 270 snackbar: false,
259 y: "top", 271 y: "top",
260 x: "right", 272 x: "right",
261 mode: "", 273 mode: "",
262 timeout: 3000, 274 timeout: 3000,
263 text: "", 275 text: "",
264 loading: false, 276 loading: false,
265 date: null, 277 date: null,
266 search: "", 278 search: "",
267 showLoader: false, 279 showLoader: false,
268 dialog: false, 280 dialog: false,
269 dialog1: false, 281 dialog1: false,
270 valid: true, 282 valid: true,
271 isActive: true, 283 isActive: true,
272 newActive: false, 284 newActive: false,
273 pagination: { 285 pagination: {
274 rowsPerPage: 15 286 rowsPerPage: 15
275 }, 287 },
276 imageData: {}, 288 imageData: {},
277 imageName: "", 289 imageName: "",
278 imageUrl: "", 290 imageUrl: "",
279 imageFile: "", 291 imageFile: "",
280 titleRules: [v => !!v || " Tilte is required"], 292 titleRules: [v => !!v || " Tilte is required"],
281 descriptionRules: [v => !!v || " Description is required"], 293 descriptionRules: [v => !!v || " Description is required"],
282 headers: [ 294 headers: [
283 { 295 {
284 text: "No", 296 text: "No",
285 align: "center", 297 align: "center",
286 sortable: false, 298 sortable: false,
287 value: "No" 299 value: "No"
288 }, 300 },
289 { text: "Title", value: "title", sortable: false, align: "center" }, 301 { text: "Title", value: "title", sortable: false, align: "center" },
290 { 302 {
291 text: "Description", 303 text: "Description",
292 value: "description", 304 value: "description",
293 sortable: false, 305 sortable: false,
294 align: "center" 306 align: "center"
295 }, 307 },
296 { text: "Action", value: "", sortable: false, align: "center" } 308 { text: "Action", value: "", sortable: false, align: "center" }
297 ], 309 ],
298 desserts: [], 310 desserts: [],
299 editedIndex: -1, 311 editedIndex: -1,
300 addNotification: { 312 addNotification: {
301 title: "", 313 title: "",
302 description: "" 314 description: ""
303 }, 315 },
304 editedItem: { 316 editedItem: {
305 title: "", 317 title: "",
306 description: "" 318 description: ""
307 }, 319 },
308 defaultItem: { 320 defaultItem: {
309 title: "", 321 title: "",
310 description: "" 322 description: ""
311 } 323 }
312 }), 324 }),
313 methods: { 325 methods: {
314 pickFile() { 326 pickFile() {
315 this.$refs.image.click(); 327 this.$refs.image.click();
316 }, 328 },
317 329
318 onFilePicked(e) { 330 onFilePicked(e) {
319 // console.log(e) 331 // console.log(e)
320 const files = e.target.files; 332 const files = e.target.files;
321 this.imageData.upload = e.target.files[0]; 333 this.imageData.upload = e.target.files[0];
322 if (files[0] !== undefined) { 334 if (files[0] !== undefined) {
323 this.imageName = files[0].name; 335 this.imageName = files[0].name;
324 if (this.imageName.lastIndexOf(".") <= 0) { 336 if (this.imageName.lastIndexOf(".") <= 0) {
325 return; 337 return;
326 } 338 }
327 const fr = new FileReader(); 339 const fr = new FileReader();
328 fr.readAsDataURL(files[0]); 340 fr.readAsDataURL(files[0]);
329 fr.addEventListener("load", () => { 341 fr.addEventListener("load", () => {
330 this.imageUrl = fr.result; 342 this.imageUrl = fr.result;
331 this.imageFile = files[0]; // this is an image file that can be sent to server... 343 this.imageFile = files[0]; // this is an image file that can be sent to server...
332 this.imageData.imageUrl = URL.createObjectURL(this.imageFile); 344 this.imageData.imageUrl = URL.createObjectURL(this.imageFile);
333 console.log("upload=======>", this.imageData.imageUrl); 345 console.log("upload=======>", this.imageData.imageUrl);
334 console.log("imageFile", this.imageFile); 346 console.log("imageFile", this.imageFile);
335 }); 347 });
336 } else { 348 } else {
337 this.imageName = ""; 349 this.imageName = "";
338 this.imageFile = ""; 350 this.imageFile = "";
339 this.imageUrl = ""; 351 this.imageUrl = "";
340 } 352 }
341 }, 353 },
342 getNotifications() { 354 getNotifications() {
343 this.showLoader = true; 355 this.showLoader = true;
344 var token = this.$store.state.token; 356 var token = this.$store.state.token;
345 http() 357 http()
346 .get("/getNotificationsList", { 358 .get("/getNotificationsList", {
347 headers: { Authorization: "Bearer " + token } 359 headers: { Authorization: "Bearer " + token }
348 }) 360 })
349 .then(response => { 361 .then(response => {
350 this.desserts = response.data.data; 362 this.desserts = response.data.data;
351 this.showLoader = false; 363 this.showLoader = false;
352 // console.log("getNotifications=====>",this.desserts) 364 // console.log("getNotifications=====>",this.desserts)
353 }) 365 })
354 .catch(err => { 366 .catch(err => {
355 // console.log("err====>", err); 367 // console.log("err====>", err);
356 this.showLoader = false; 368 this.showLoader = false;
357 if (error.response.status === 401) { 369 if (error.response.status === 401) {
358 this.$router.replace({ path: "/" }); 370 this.$router.replace({ path: "/" });
359 this.$store.dispatch("setToken", null); 371 this.$store.dispatch("setToken", null);
360 this.$store.dispatch("Id", null); 372 this.$store.dispatch("Id", null);
361 } 373 }
362 }); 374 });
363 }, 375 },
364 editItem(item) { 376 editItem(item) {
365 this.editedIndex = this.desserts.indexOf(item); 377 this.editedIndex = this.desserts.indexOf(item);
366 this.editedItem = Object.assign({}, item); 378 this.editedItem = Object.assign({}, item);
367 this.dialog = true; 379 this.dialog = true;
368 }, 380 },
369 profile(item) { 381 profile(item) {
370 this.editedIndex = this.desserts.indexOf(item); 382 this.editedIndex = this.desserts.indexOf(item);
371 this.editedItem = Object.assign({}, item); 383 this.editedItem = Object.assign({}, item);
372 this.dialog1 = true; 384 this.dialog1 = true;
373 }, 385 },
374 386
375 deleteItem(item) { 387 deleteItem(item) {
376 let deleteNotification = { 388 let deleteNotification = {
377 notificationId: item._id 389 notificationId: item._id
378 }; 390 };
379 http() 391 http()
380 .delete( 392 .delete(
381 "/deleteNotification", 393 "/deleteNotification",
382 confirm("Are you sure you want to delete this?") && { 394 confirm("Are you sure you want to delete this?") && {
383 params: deleteNotification 395 params: deleteNotification
384 } 396 }
385 ) 397 )
386 .then(response => { 398 .then(response => {
387 // console.log("deleteNotification",deleteNotification) 399 // console.log("deleteNotification",deleteNotification)
388 if ((this.snackbar = true)) { 400 if ((this.snackbar = true)) {
389 this.text = "Successfully Delete Notification"; 401 this.text = "Successfully Delete Notification";
390 } 402 }
391 this.getNotifications(); 403 this.getNotifications();
392 }) 404 })
393 .catch(error => { 405 .catch(error => {
394 console.log(error); 406 console.log(error);
395 }); 407 });
396 }, 408 },
397 activeTab(type) { 409 activeTab(type) {
398 switch (type) { 410 switch (type) {
399 case "existing": 411 case "existing":
400 this.newActive = false; 412 this.newActive = false;
401 this.isActive = true; 413 this.isActive = true;
402 break; 414 break;
403 415
404 default: 416 default:
405 this.newActive = true; 417 this.newActive = true;
406 this.isActive = false; 418 this.isActive = false;
407 break; 419 break;
408 } 420 }
409 }, 421 },
410 close() { 422 close() {
411 this.dialog = false; 423 this.dialog = false;
412 setTimeout(() => { 424 setTimeout(() => {
413 this.editedItem = Object.assign({}, this.defaultItem); 425 this.editedItem = Object.assign({}, this.defaultItem);
414 this.editedIndex = -1; 426 this.editedIndex = -1;
415 }, 300); 427 }, 300);
416 }, 428 },
417 close1() { 429 close1() {
418 this.dialog1 = false; 430 this.dialog1 = false;
419 }, 431 },
420 submit() { 432 submit() {
421 if (this.$refs.form.validate()) { 433 if (this.$refs.form.validate()) {
422 let imageData = new FormData(); 434 let imageData = new FormData();
423 imageData.append("upload", this.imageFile); 435 imageData.append("upload", this.imageFile);
424 console.log(imageData); 436 console.log(imageData);
425 let create = { 437 let create = {
426 title: this.addNotification.title, 438 title: this.addNotification.title,
427 description: this.addNotification.description 439 description: this.addNotification.description
428 // imageData 440 // imageData
429 }; 441 };
430 console.log(create); 442 console.log(create);
431 this.loading = true; 443 this.loading = true;
432 http() 444 http()
433 .post("/createNotification", create) 445 .post("/createNotification", create)
434 .then(response => { 446 .then(response => {
435 console.log(create); 447 console.log(create);
436 if ((this.snackbar = true)) { 448 if ((this.snackbar = true)) {
437 this.text = "New Notification added successfully"; 449 this.text = "New Notification added successfully";
438 } 450 }
439 this.getNotifications(); 451 this.getNotifications();
440 this.clear(); 452 this.clear();
441 this.loading = false; 453 this.loading = false;
442 }) 454 })
443 .catch(error => { 455 .catch(error => {
444 // console.log(error); 456 // console.log(error);
445 if ((this.snackbar = true)) { 457 if ((this.snackbar = true)) {
446 this.text = error.response.data.message; 458 this.text = error.response.data.message;
447 } 459 }
448 this.loading = false; 460 this.loading = false;
449 }); 461 });
450 } 462 }
451 }, 463 },
452 clear() { 464 clear() {
453 this.$refs.form.reset(); 465 this.$refs.form.reset();
454 }, 466 },
455 save() { 467 save() {
456 let imageData = new FormData(); 468 let imageData = new FormData();
457 imageData.append("upload", this.imageFile); 469 imageData.append("upload", this.imageFile);
458 console.log(imageData); 470 console.log(imageData);
459 let editNotification = { 471 let editNotification = {
460 notificationId: this.editedItem._id, 472 notificationId: this.editedItem._id,
461 title: this.editedItem.title, 473 title: this.editedItem.title,
462 description: this.editedItem.description 474 description: this.editedItem.description
463 // imageData 475 // imageData
464 }; 476 };
465 http() 477 http()
466 .put("/updateNotification", editNotification) 478 .put("/updateNotification", editNotification)
467 .then(response => { 479 .then(response => {
468 // console.log("editNotification",editNotification); 480 // console.log("editNotification",editNotification);
469 if ((this.snackbar = true)) { 481 if ((this.snackbar = true)) {
470 this.text = "Successfully Edit Notification"; 482 this.text = "Successfully Edit Notification";
471 } 483 }
472 this.getNotifications(); 484 this.getNotifications();
473 }) 485 })
474 .catch(error => { 486 .catch(error => {
475 // console.log(error); 487 // console.log(error);
476 }); 488 });
477 this.close(); 489 this.close();
478 } 490 }
479 }, 491 },
480 mounted() { 492 mounted() {
481 this.getNotifications(); 493 this.getNotifications();
482 }, 494 },
483 created() { 495 created() {
484 this.$root.$on("app:search", search => { 496 this.$root.$on("app:search", search => {
485 this.search = search; 497 this.search = search;
486 }); 498 });
487 }, 499 },
488 beforeDestroy() { 500 beforeDestroy() {
489 // dont forget to remove the listener 501 // dont forget to remove the listener
490 this.$root.$off("app:search"); 502 this.$root.$off("app:search");
491 } 503 }
492 }; 504 };
493 </script> 505 </script>
494 <style scoped> 506 <style scoped>
495 #td { 507 #td {
496 max-width: 200px; 508 max-width: 200px;
497 } 509 }
498 .active { 510 .active {
499 background-color: gray; 511 background-color: gray;
500 color: white !important; 512 color: white !important;
501 } 513 }
502 .activebtn { 514 .activebtn {
503 color: black !important; 515 color: black !important;
504 } 516 }
505 </style> 517 </style>
src/pages/Parent/parents.vue
Diff comments   View file @495e403
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 Parents</v-tab> 10 >Existing Parents</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 Parents</v-tab> 18 >Add New Parents</v-tab>
19 19
20 <!-- ****** EDITS Parents DETAILS ****** --> 20 <!-- ****** EDITS Parents 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="600px" scrollable> 31 <v-dialog v-model="dialog" max-width="600px" scrollable>
32 <v-card flat> 32 <v-card flat>
33 <v-toolbar color="grey lighten-2" flat> 33 <v-toolbar color="grey lighten-2" flat>
34 <v-spacer></v-spacer> 34 <v-spacer></v-spacer>
35 <v-toolbar-title> 35 <v-toolbar-title>
36 <h3 class="hidden-xs-only">Edit Parent Profile</h3> 36 <h3 class="hidden-xs-only">Edit Parent Profile</h3>
37 <h5 37 <h5
38 class="hidden-sm-only hidden-md-only hidden-lg-only hidden-xl-only" 38 class="hidden-sm-only hidden-md-only hidden-lg-only hidden-xl-only"
39 >Edit Parent Profile</h5> 39 >Edit Parent Profile</h5>
40 </v-toolbar-title> 40 </v-toolbar-title>
41 <v-spacer></v-spacer> 41 <v-spacer></v-spacer>
42 <v-icon @click="close" class="hidden-xs-only pr-2">close</v-icon> 42 <v-icon @click="close" class="hidden-xs-only pr-2">close</v-icon>
43 <v-icon 43 <v-icon
44 @click="close" 44 @click="close"
45 size="26" 45 size="26"
46 class="hidden-sm-only hidden-md-only hidden-lg-only hidden-xl-only" 46 class="hidden-sm-only hidden-md-only hidden-lg-only hidden-xl-only"
47 >close</v-icon> 47 >close</v-icon>
48 </v-toolbar> 48 </v-toolbar>
49 <v-card-text style="height: 410px;"> 49 <v-card-text style="height: 410px;">
50 <v-flex xs12> 50 <v-flex xs12>
51 <v-layout> 51 <v-layout>
52 <v-flex xs3 sm4 class="pt-4 subheading"> 52 <v-flex xs3 sm4 class="pt-4 subheading">
53 <label class="right">Email ID:</label> 53 <label class="right">Email ID:</label>
54 </v-flex> 54 </v-flex>
55 <v-flex xs8 sm6 class="ml-3"> 55 <v-flex xs8 sm6 class="ml-3">
56 <v-text-field 56 <v-text-field
57 placeholder="fill your email" 57 placeholder="fill your email"
58 v-model="editedItem.email" 58 v-model="editedItem.email"
59 type="text" 59 type="text"
60 name="email" 60 name="email"
61 required 61 required
62 ></v-text-field> 62 ></v-text-field>
63 </v-flex> 63 </v-flex>
64 </v-layout> 64 </v-layout>
65 </v-flex> 65 </v-flex>
66 <v-flex xs12> 66 <v-flex xs12>
67 <v-layout> 67 <v-layout>
68 <v-flex xs3 sm4 class="pt-4 subheading"> 68 <v-flex xs3 sm4 class="pt-4 subheading">
69 <label class="right">Father Name:</label> 69 <label class="right">Father Name:</label>
70 </v-flex> 70 </v-flex>
71 <v-flex xs8 sm6 class="ml-3"> 71 <v-flex xs8 sm6 class="ml-3">
72 <v-text-field 72 <v-text-field
73 v-model="editedItem.fatherName" 73 v-model="editedItem.fatherName"
74 placeholder="fill your father Name" 74 placeholder="fill your father Name"
75 required 75 required
76 ></v-text-field> 76 ></v-text-field>
77 </v-flex> 77 </v-flex>
78 </v-layout> 78 </v-layout>
79 </v-flex> 79 </v-flex>
80 <v-flex xs12> 80 <v-flex xs12>
81 <v-layout> 81 <v-layout>
82 <v-flex xs3 sm4 class="pt-4 subheading"> 82 <v-flex xs3 sm4 class="pt-4 subheading">
83 <label class="right">Father Cell No:</label> 83 <label class="right">Father Cell No:</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-text-field 86 <v-text-field
87 v-model="editedItem.fatherCellNo" 87 v-model="editedItem.fatherCellNo"
88 placeholder="fill your father Cell Number" 88 placeholder="fill your father Cell Number"
89 type="number" 89 type="number"
90 required 90 required
91 ></v-text-field> 91 ></v-text-field>
92 </v-flex> 92 </v-flex>
93 </v-layout> 93 </v-layout>
94 </v-flex> 94 </v-flex>
95 <v-flex xs12> 95 <v-flex xs12>
96 <v-layout> 96 <v-layout>
97 <v-flex xs3 sm4 class="pt-4 subheading"> 97 <v-flex xs3 sm4 class="pt-4 subheading">
98 <label class="right">Mother Name:</label> 98 <label class="right">Mother Name:</label>
99 </v-flex> 99 </v-flex>
100 <v-flex xs8 sm6 class="ml-3"> 100 <v-flex xs8 sm6 class="ml-3">
101 <v-text-field 101 <v-text-field
102 v-model="editedItem.motherName" 102 v-model="editedItem.motherName"
103 placeholder="fill your Mother Name" 103 placeholder="fill your Mother Name"
104 type="text" 104 type="text"
105 required 105 required
106 ></v-text-field> 106 ></v-text-field>
107 </v-flex> 107 </v-flex>
108 </v-layout> 108 </v-layout>
109 </v-flex> 109 </v-flex>
110 <v-flex xs12> 110 <v-flex xs12>
111 <v-layout> 111 <v-layout>
112 <v-flex xs3 sm4 class="pt-4 subheading"> 112 <v-flex xs3 sm4 class="pt-4 subheading">
113 <label class="right">Mother Cell No:</label> 113 <label class="right">Mother Cell No:</label>
114 </v-flex> 114 </v-flex>
115 <v-flex xs8 sm6 class="ml-3"> 115 <v-flex xs8 sm6 class="ml-3">
116 <v-text-field 116 <v-text-field
117 v-model="editedItem.motherCellNo" 117 v-model="editedItem.motherCellNo"
118 placeholder="fill your Mother Cell Number" 118 placeholder="fill your Mother Cell Number"
119 type="number" 119 type="number"
120 required 120 required
121 ></v-text-field> 121 ></v-text-field>
122 </v-flex> 122 </v-flex>
123 </v-layout> 123 </v-layout>
124 </v-flex> 124 </v-flex>
125 <v-layout> 125 <v-layout>
126 <v-flex xs12 sm12> 126 <v-flex xs12 sm12>
127 <v-card-actions> 127 <v-card-actions>
128 <v-spacer></v-spacer> 128 <v-spacer></v-spacer>
129 <v-btn round dark @click="save">Save</v-btn> 129 <v-btn round dark @click="save">Save</v-btn>
130 <v-spacer></v-spacer> 130 <v-spacer></v-spacer>
131 </v-card-actions> 131 </v-card-actions>
132 </v-flex> 132 </v-flex>
133 </v-layout> 133 </v-layout>
134 <!-- </v-container> 134 <!-- </v-container>
135 </v-form>--> 135 </v-form>-->
136 </v-card-text> 136 </v-card-text>
137 </v-card> 137 </v-card>
138 </v-dialog> 138 </v-dialog>
139 139
140 <!-- ****** PROFILE VIEW Parents DEATILS ****** --> 140 <!-- ****** PROFILE VIEW Parents DEATILS ****** -->
141 141
142 <v-dialog v-model="dialog1" max-width="600px" scrollable> 142 <v-dialog v-model="dialog1" max-width="600px" scrollable>
143 <v-card> 143 <v-card>
144 <v-toolbar color="grey lighten-2" flat> 144 <v-toolbar color="grey lighten-2" flat>
145 <v-spacer></v-spacer> 145 <v-spacer></v-spacer>
146 <v-toolbar-title>Parent Profile</v-toolbar-title> 146 <v-toolbar-title>Parent Profile</v-toolbar-title>
147 <v-spacer></v-spacer> 147 <v-spacer></v-spacer>
148 <v-icon @click="close1">close</v-icon> 148 <v-icon @click="close1">close</v-icon>
149 </v-toolbar> 149 </v-toolbar>
150 <v-container grid-list-md> 150 <v-container grid-list-md>
151 <v-layout wrap> 151 <v-layout wrap>
152 <v-flex xs12> 152 <v-flex xs12>
153 <v-layout> 153 <v-layout>
154 <v-flex xs12 sm12> 154 <v-flex xs12 sm12>
155 <v-layout> 155 <v-layout>
156 <v-flex xs6> 156 <v-flex xs6>
157 <h5 class="right my-1"> 157 <h5 class="right my-1">
158 <b>Email:</b> 158 <b>Email:</b>
159 </h5> 159 </h5>
160 </v-flex> 160 </v-flex>
161 <v-flex xs6> 161 <v-flex xs6>
162 <h5 class="my-1">{{ editedItem.email }}</h5> 162 <h5 class="my-1">{{ editedItem.email }}</h5>
163 </v-flex> 163 </v-flex>
164 </v-layout> 164 </v-layout>
165 </v-flex> 165 </v-flex>
166 </v-layout> 166 </v-layout>
167 <v-layout> 167 <v-layout>
168 <v-flex xs12> 168 <v-flex xs12>
169 <v-layout> 169 <v-layout>
170 <v-flex xs6> 170 <v-flex xs6>
171 <b> 171 <b>
172 <h5 class="right my-1"> 172 <h5 class="right my-1">
173 <b>Fahter Name:</b> 173 <b>Fahter Name:</b>
174 </h5> 174 </h5>
175 </b> 175 </b>
176 </v-flex> 176 </v-flex>
177 <v-flex xs6> 177 <v-flex xs6>
178 <h5 class="my-1">{{ editedItem.fatherName }}</h5> 178 <h5 class="my-1">{{ editedItem.fatherName }}</h5>
179 </v-flex> 179 </v-flex>
180 </v-layout> 180 </v-layout>
181 </v-flex> 181 </v-flex>
182 </v-layout> 182 </v-layout>
183 <v-layout> 183 <v-layout>
184 <v-flex xs12> 184 <v-flex xs12>
185 <v-layout> 185 <v-layout>
186 <v-flex xs6> 186 <v-flex xs6>
187 <b> 187 <b>
188 <h5 class="right my-1"> 188 <h5 class="right my-1">
189 <b>Mother Name:</b> 189 <b>Mother Name:</b>
190 </h5> 190 </h5>
191 </b> 191 </b>
192 </v-flex> 192 </v-flex>
193 <v-flex xs6> 193 <v-flex xs6>
194 <h5 class="my-1">{{ editedItem.motherName }}</h5> 194 <h5 class="my-1">{{ editedItem.motherName }}</h5>
195 </v-flex> 195 </v-flex>
196 </v-layout> 196 </v-layout>
197 </v-flex> 197 </v-flex>
198 </v-layout> 198 </v-layout>
199 <v-layout> 199 <v-layout>
200 <v-flex xs12> 200 <v-flex xs12>
201 <v-layout> 201 <v-layout>
202 <v-flex sm6> 202 <v-flex sm6>
203 <b> 203 <b>
204 <h5 class="right my-1"> 204 <h5 class="right my-1">
205 <b>Father Cell No:</b> 205 <b>Father Cell No:</b>
206 </h5> 206 </h5>
207 </b> 207 </b>
208 </v-flex> 208 </v-flex>
209 <v-flex sm6> 209 <v-flex sm6>
210 <h5 class="my-1">{{ editedItem.fatherCellNo }}</h5> 210 <h5 class="my-1">{{ editedItem.fatherCellNo }}</h5>
211 </v-flex> 211 </v-flex>
212 </v-layout> 212 </v-layout>
213 </v-flex> 213 </v-flex>
214 </v-layout> 214 </v-layout>
215 <v-layout> 215 <v-layout>
216 <v-flex xs12> 216 <v-flex xs12>
217 <v-layout> 217 <v-layout>
218 <v-flex xs6> 218 <v-flex xs6>
219 <b> 219 <b>
220 <h5 class="right my-1"> 220 <h5 class="right my-1">
221 <b>Mother Cell No:</b> 221 <b>Mother Cell No:</b>
222 </h5> 222 </h5>
223 </b> 223 </b>
224 </v-flex> 224 </v-flex>
225 <v-flex xs6> 225 <v-flex xs6>
226 <h5 class="my-1">{{ editedItem.motherCellNo }}</h5> 226 <h5 class="my-1">{{ editedItem.motherCellNo }}</h5>
227 </v-flex> 227 </v-flex>
228 </v-layout> 228 </v-layout>
229 </v-flex> 229 </v-flex>
230 </v-layout> 230 </v-layout>
231 </v-flex> 231 </v-flex>
232 </v-layout> 232 </v-layout>
233 </v-container> 233 </v-container>
234 <!-- </v-card-text> --> 234 <!-- </v-card-text> -->
235 </v-card> 235 </v-card>
236 </v-dialog> 236 </v-dialog>
237 237
238 <v-snackbar 238 <v-snackbar
239 :timeout="timeout" 239 :timeout="timeout"
240 :top="y === 'top'" 240 :top="y === 'top'"
241 :right="x === 'right'" 241 :right="x === 'right'"
242 :vertical="mode === 'vertical'" 242 :vertical="mode === 'vertical'"
243 v-model="snackbar" 243 v-model="snackbar"
244 color="success" 244 color="success"
245 >{{ text }}</v-snackbar> 245 >{{ text }}</v-snackbar>
246 246
247 <!-- ****** EXISTING-USERS Parents TABLE ****** --> 247 <!-- ****** EXISTING-USERS Parents TABLE ****** -->
248 <v-data-table 248 <v-data-table
249 :headers="headers" 249 :headers="headers"
250 :items="parentsList" 250 :items="parentsList"
251 :pagination.sync="pagination" 251 :pagination.sync="pagination"
252 :search="search" 252 :search="search"
253 > 253 >
254 <template slot="items" slot-scope="props"> 254 <template slot="items" slot-scope="props">
255 <td id="td" class="text-xs-center">{{ props.index + 1}}</td> 255 <td id="td" class="text-xs-center">{{ props.index + 1}}</td>
256 <td id="td" class="text-xs-center">{{ props.item.email }}</td> 256 <td id="td" class="text-xs-center">{{ props.item.email }}</td>
257 <td id="td" class="text-xs-center">{{ props.item.fatherName }}</td> 257 <td id="td" class="text-xs-center">{{ props.item.fatherName }}</td>
258 <td id="td" class="text-xs-center">{{ props.item.fatherCellNo }}</td> 258 <td id="td" class="text-xs-center">{{ props.item.fatherCellNo }}</td>
259 <td id="td" class="text-xs-center">{{ props.item.motherName }}</td> 259 <td id="td" class="text-xs-center">{{ props.item.motherName }}</td>
260 <td id="td" class="text-xs-center">{{ props.item.motherCellNo }}</td> 260 <td id="td" class="text-xs-center">{{ props.item.motherCellNo }}</td>
261 <td class="text-xs-center"> 261 <td class="text-xs-center">
262 <span> 262 <span>
263 <img 263 <v-tooltip top>
264 style="cursor:pointer; width:25px; height:18px; " 264 <img
265 class="mr-5" 265 slot="activator"
266 @click="profile(props.item)" 266 style="cursor:pointer; width:25px; height:18px; "
267 src="/static/icon/eye1.png" 267 class="mr5"
268 /> 268 @click="profile(props.item)"
269 <img 269 src="/static/icon/eye1.png"
270 style="cursor:pointer; width:20px; height:18px; " 270 />
271 class="mr-5" 271 <span>View</span>
272 @click="editItem(props.item)" 272 </v-tooltip>
273 src="/static/icon/edit1.png" 273 <v-tooltip top>
274 /> 274 <img
275 slot="activator"
276 style="cursor:pointer; width:20px; height:18px; "
277 class="mr5"
278 @click="editItem(props.item)"
279 src="/static/icon/edit1.png"
280 />
281 <span>Edit</span>
282 </v-tooltip>
275 </span> 283 </span>
276 </td> 284 </td>
277 </template> 285 </template>
278 <v-alert 286 <v-alert
279 slot="no-results" 287 slot="no-results"
280 :value="true" 288 :value="true"
281 color="error" 289 color="error"
282 icon="warning" 290 icon="warning"
283 >Your search for "{{ search }}" found no results.</v-alert> 291 >Your search for "{{ search }}" found no results.</v-alert>
284 </v-data-table> 292 </v-data-table>
285 </v-tab-item> 293 </v-tab-item>
286 294
287 <!-- ****** ADD PARENTS DETAILS****** --> 295 <!-- ****** ADD PARENTS DETAILS****** -->
288 <v-tab-item> 296 <v-tab-item>
289 <v-container fluid class="mt-5"> 297 <v-container fluid class="mt-5">
290 <v-layout align-center justify-center fill-height> 298 <v-layout align-center justify-center fill-height>
291 <v-flex xs12 sm12 md10 lg11> 299 <v-flex xs12 sm12 md10 lg11>
292 <v-card> 300 <v-card>
293 <v-container fluid class> 301 <v-container fluid class>
294 <v-layout> 302 <v-layout>
295 <v-flex xs12> 303 <v-flex xs12>
296 <v-snackbar 304 <v-snackbar
297 :timeout="timeout" 305 :timeout="timeout"
298 :top="y === 'top'" 306 :top="y === 'top'"
299 :right="x === 'right'" 307 :right="x === 'right'"
300 :vertical="mode === 'vertical'" 308 :vertical="mode === 'vertical'"
301 v-model="snackbar" 309 v-model="snackbar"
302 color="success" 310 color="success"
303 >{{ text }}</v-snackbar> 311 >{{ text }}</v-snackbar>
304 <v-flex xs12 sm12> 312 <v-flex xs12 sm12>
305 <v-form ref="parentForm" v-model="valid" lazy-validation> 313 <v-form ref="parentForm" v-model="valid" lazy-validation>
306 <v-container fluid> 314 <v-container fluid>
307 <v-layout> 315 <v-layout>
308 <v-flex xs12 sm6> 316 <v-flex xs12 sm6>
309 <v-layout> 317 <v-layout>
310 <v-flex xs4 class="pt-4 subheading"> 318 <v-flex xs4 class="pt-4 subheading">
311 <label class="right">Parent Email Id:</label> 319 <label class="right">Parent Email Id:</label>
312 </v-flex> 320 </v-flex>
313 <v-flex xs8 class="ml-3"> 321 <v-flex xs8 class="ml-3">
314 <v-text-field 322 <v-text-field
315 placeholder="fill Parent email" 323 placeholder="fill Parent email"
316 :rules="emailRules" 324 :rules="emailRules"
317 v-model="parentData.email" 325 v-model="parentData.email"
318 type="text" 326 type="text"
319 v-on:keyup="getParentDetails" 327 v-on:keyup="getParentDetails"
320 name="email" 328 name="email"
321 required 329 required
322 ></v-text-field> 330 ></v-text-field>
323 </v-flex> 331 </v-flex>
324 </v-layout> 332 </v-layout>
325 </v-flex> 333 </v-flex>
326 <v-flex xs12 sm6> 334 <v-flex xs12 sm6>
327 <v-layout> 335 <v-layout>
328 <v-flex xs4 class="pt-4 subheading"> 336 <v-flex xs4 class="pt-4 subheading">
329 <label class="right">Father Name:</label> 337 <label class="right">Father Name:</label>
330 </v-flex> 338 </v-flex>
331 <v-flex xs8 class="ml-3"> 339 <v-flex xs8 class="ml-3">
332 <v-text-field 340 <v-text-field
333 v-model="parentData.fatherName" 341 v-model="parentData.fatherName"
334 :rules="fatherNameRules" 342 :rules="fatherNameRules"
335 placeholder="Fill your father Name" 343 placeholder="Fill your father Name"
336 required 344 required
337 ></v-text-field> 345 ></v-text-field>
338 </v-flex> 346 </v-flex>
339 </v-layout> 347 </v-layout>
340 </v-flex> 348 </v-flex>
341 </v-layout> 349 </v-layout>
342 <v-layout> 350 <v-layout>
343 <v-flex xs12 sm6> 351 <v-flex xs12 sm6>
344 <v-layout> 352 <v-layout>
345 <v-flex xs4 class="pt-4 subheading"> 353 <v-flex xs4 class="pt-4 subheading">
346 <label class="right">Father Cell No:</label> 354 <label class="right">Father Cell No:</label>
347 </v-flex> 355 </v-flex>
348 <v-flex xs8 class="ml-3"> 356 <v-flex xs8 class="ml-3">
349 <v-text-field 357 <v-text-field
350 v-model="parentData.fatherCellNo" 358 v-model="parentData.fatherCellNo"
351 placeholder="fill your father Cell Number" 359 placeholder="fill your father Cell Number"
352 name="state" 360 name="state"
353 type="number" 361 type="number"
354 :rules="fatheCellNoRules" 362 :rules="fatheCellNoRules"
355 required 363 required
356 ></v-text-field> 364 ></v-text-field>
357 </v-flex> 365 </v-flex>
358 </v-layout> 366 </v-layout>
359 </v-flex> 367 </v-flex>
360 <v-flex xs12 sm6> 368 <v-flex xs12 sm6>
361 <v-layout> 369 <v-layout>
362 <v-flex xs4 class="pt-4 subheading"> 370 <v-flex xs4 class="pt-4 subheading">
363 <label class="right">Mother Name:</label> 371 <label class="right">Mother Name:</label>
364 </v-flex> 372 </v-flex>
365 <v-flex xs8 class="ml-3"> 373 <v-flex xs8 class="ml-3">
366 <v-text-field 374 <v-text-field
367 v-model="parentData.motherName" 375 v-model="parentData.motherName"
368 placeholder="fill your Mother Name" 376 placeholder="fill your Mother Name"
369 name="state" 377 name="state"
370 type="text" 378 type="text"
371 :rules="motherNameRules" 379 :rules="motherNameRules"
372 required 380 required
373 ></v-text-field> 381 ></v-text-field>
374 </v-flex> 382 </v-flex>
375 </v-layout> 383 </v-layout>
376 </v-flex> 384 </v-flex>
377 </v-layout> 385 </v-layout>
378 <v-layout> 386 <v-layout>
379 <v-flex xs12 sm6> 387 <v-flex xs12 sm6>
380 <v-layout> 388 <v-layout>
381 <v-flex xs4 class="pt-4 subheading"> 389 <v-flex xs4 class="pt-4 subheading">
382 <label class="right">Mother Cell No:</label> 390 <label class="right">Mother Cell No:</label>
383 </v-flex> 391 </v-flex>
384 <v-flex xs8 class="ml-3"> 392 <v-flex xs8 class="ml-3">
385 <v-text-field 393 <v-text-field
386 v-model="parentData.motherCellNo" 394 v-model="parentData.motherCellNo"
387 placeholder="fill your Mother Cell Number" 395 placeholder="fill your Mother Cell Number"
388 name="state" 396 name="state"
389 type="number" 397 type="number"
390 :rules="motherCellNoRules" 398 :rules="motherCellNoRules"
391 required 399 required
392 ></v-text-field> 400 ></v-text-field>
393 </v-flex> 401 </v-flex>
394 </v-layout> 402 </v-layout>
395 </v-flex> 403 </v-flex>
396 </v-layout> 404 </v-layout>
397 <v-flex xs12 sm12> 405 <v-flex xs12 sm12>
398 <v-card-actions> 406 <v-layout>
399 <v-btn @click="clear" round dark class="ml-4">clear</v-btn> 407 <v-flex xs6 sm6 offset-sm1>
400 <v-spacer></v-spacer> 408 <v-btn @click="clear" round dark class="ml-4">clear</v-btn>
401 <v-btn 409 </v-flex>
402 @click="submitParentDetails" 410 <v-flex xs6 sm6>
403 round 411 <v-btn
404 dark 412 class="right"
405 :loading="loading" 413 @click="submitParentDetails"
406 v-show="showParent" 414 round
407 >Add</v-btn> 415 dark
408 </v-card-actions> 416 :loading="loading"
417 v-show="showParent"
418 >Add</v-btn>
419 </v-flex>
420 </v-layout>
409 </v-flex> 421 </v-flex>
410 </v-container> 422 </v-container>
411 </v-form> 423 </v-form>
412 </v-flex> 424 </v-flex>
413 </v-flex> 425 </v-flex>
414 </v-layout> 426 </v-layout>
415 </v-container> 427 </v-container>
416 </v-card> 428 </v-card>
417 </v-flex> 429 </v-flex>
418 </v-layout> 430 </v-layout>
419 </v-container> 431 </v-container>
420 </v-tab-item> 432 </v-tab-item>
421 </v-tabs> 433 </v-tabs>
422 <div class="loader" v-if="showLoader"> 434 <div class="loader" v-if="showLoader">
423 <v-progress-circular indeterminate color="white"></v-progress-circular> 435 <v-progress-circular indeterminate color="white"></v-progress-circular>
424 </div> 436 </div>
425 </v-app> 437 </v-app>
426 </template> 438 </template>
427 439
428 <script> 440 <script>
429 import http from "@/Services/http.js"; 441 import http from "@/Services/http.js";
430 import Util from "@/util"; 442 import Util from "@/util";
431 import moment from "moment"; 443 import moment from "moment";
432 444
433 export default { 445 export default {
434 data: () => ({ 446 data: () => ({
435 showParent: true, 447 showParent: true,
436 snackbar: false, 448 snackbar: false,
437 y: "top", 449 y: "top",
438 x: "right", 450 x: "right",
439 mode: "", 451 mode: "",
440 timeout: 3000, 452 timeout: 3000,
441 text: "", 453 text: "",
442 showLoader: false, 454 showLoader: false,
443 loading: false, 455 loading: false,
444 date: null, 456 date: null,
445 search: "", 457 search: "",
446 menu: false, 458 menu: false,
447 menu1: false, 459 menu1: false,
448 dialog: false, 460 dialog: false,
449 dialog1: false, 461 dialog1: false,
450 valid: true, 462 valid: true,
451 isActive: true, 463 isActive: true,
452 newActive: false, 464 newActive: false,
453 AddUsercredentials: {}, 465 AddUsercredentials: {},
454 pagination: { 466 pagination: {
455 rowsPerPage: 15 467 rowsPerPage: 15
456 }, 468 },
457 fatherNameRules: [v => !!v || " Father Name is required"], 469 fatherNameRules: [v => !!v || " Father Name is required"],
458 fatheCellNoRules: [v => !!v || " father Cell Number is required"], 470 fatheCellNoRules: [v => !!v || " father Cell Number is required"],
459 motherNameRules: [v => !!v || " Mother Name is required"], 471 motherNameRules: [v => !!v || " Mother Name is required"],
460 motherCellNoRules: [v => !!v || " Mother Cell Number is required"], 472 motherCellNoRules: [v => !!v || " Mother Cell Number is required"],
461 errorMessages: "", 473 errorMessages: "",
462 emailRules: [ 474 emailRules: [
463 v => !!v || "E-mail is required", 475 v => !!v || "E-mail is required",
464 v => 476 v =>
465 /^\w+([.-]?\w+)*@\w+([.-]?\w+)*(\.\w{2,3})+$/.test(v) || 477 /^\w+([.-]?\w+)*@\w+([.-]?\w+)*(\.\w{2,3})+$/.test(v) ||
466 "E-mail must be valid" 478 "E-mail must be valid"
467 ], 479 ],
468 headers: [ 480 headers: [
469 { 481 {
470 text: "No", 482 text: "No",
471 align: "center", 483 align: "center",
472 sortable: false, 484 sortable: false,
473 value: "No" 485 value: "No"
474 }, 486 },
475 { text: "Email", value: "email", sortable: false, align: "center" }, 487 { text: "Email", value: "email", sortable: false, align: "center" },
476 { 488 {
477 text: "Father Name", 489 text: "Father Name",
478 value: "fatherName", 490 value: "fatherName",
479 sortable: false, 491 sortable: false,
480 align: "center" 492 align: "center"
481 }, 493 },
482 { 494 {
483 text: "Father Cell No", 495 text: "Father Cell No",
484 value: "fatherName", 496 value: "fatherName",
485 sortable: false, 497 sortable: false,
486 align: "center" 498 align: "center"
487 }, 499 },
488 { 500 {
489 text: "Mother Name", 501 text: "Mother Name",
490 value: "motherName", 502 value: "motherName",
491 sortable: false, 503 sortable: false,
492 align: "center" 504 align: "center"
493 }, 505 },
494 { 506 {
495 text: "Mother Cell No", 507 text: "Mother Cell No",
496 value: "motherCellNo", 508 value: "motherCellNo",
497 sortable: false, 509 sortable: false,
498 align: "center" 510 align: "center"
499 }, 511 },
500 { text: "Action", value: "", sortable: false, align: "center" } 512 { text: "Action", value: "", sortable: false, align: "center" }
501 ], 513 ],
502 parentsList: [], 514 parentsList: [],
503 editedIndex: -1, 515 editedIndex: -1,
504 parentData: {}, 516 parentData: {},
505 editedItem: { 517 editedItem: {
506 fatherName: "", 518 fatherName: "",
507 fatherCellNo: "", 519 fatherCellNo: "",
508 motherName: "", 520 motherName: "",
509 motherCellNo: "", 521 motherCellNo: "",
510 email: "" 522 email: ""
511 } 523 }
512 }), 524 }),
513 watch: { 525 watch: {
514 menu(val) { 526 menu(val) {
515 val && this.$nextTick(() => (this.$refs.picker.activePicker = "YEAR")); 527 val && this.$nextTick(() => (this.$refs.picker.activePicker = "YEAR"));
516 }, 528 },
517 menu1(val) { 529 menu1(val) {
518 val && this.$nextTick(() => (this.$refs.picker.activePicker = "YEAR")); 530 val && this.$nextTick(() => (this.$refs.picker.activePicker = "YEAR"));
519 } 531 }
520 }, 532 },
521 methods: { 533 methods: {
522 editItem(item) { 534 editItem(item) {
523 this.editedIndex = this.parentsList.indexOf(item); 535 this.editedIndex = this.parentsList.indexOf(item);
524 this.editedItem = Object.assign({}, item); 536 this.editedItem = Object.assign({}, item);
525 this.dialog = true; 537 this.dialog = true;
526 }, 538 },
527 profile(item) { 539 profile(item) {
528 console.log("item", item); 540 console.log("item", item);
529 this.editedIndex = this.parentsList.indexOf(item); 541 this.editedIndex = this.parentsList.indexOf(item);
530 this.editedItem = Object.assign({}, item); 542 this.editedItem = Object.assign({}, item);
531 this.dialog1 = true; 543 this.dialog1 = true;
532 }, 544 },
533 activeTab(type) { 545 activeTab(type) {
534 switch (type) { 546 switch (type) {
535 case "existing": 547 case "existing":
536 this.newActive = false; 548 this.newActive = false;
537 this.isActive = true; 549 this.isActive = true;
538 break; 550 break;
539 551
540 default: 552 default:
541 this.newActive = true; 553 this.newActive = true;
542 this.isActive = false; 554 this.isActive = false;
543 break; 555 break;
544 } 556 }
545 }, 557 },
546 close() { 558 close() {
547 this.dialog = false; 559 this.dialog = false;
548 setTimeout(() => { 560 setTimeout(() => {
549 this.editedItem = Object.assign({}, this.defaultItem); 561 this.editedItem = Object.assign({}, this.defaultItem);
550 this.editedIndex = -1; 562 this.editedIndex = -1;
551 }, 300); 563 }, 300);
552 }, 564 },
553 close1() { 565 close1() {
554 this.dialog1 = false; 566 this.dialog1 = false;
555 }, 567 },
556 clear() { 568 clear() {
557 this.$refs.parentForm.reset(); 569 this.$refs.parentForm.reset();
558 }, 570 },
559 save() { 571 save() {
560 this.editedItem.parentId = this.editedItem._id; 572 this.editedItem.parentId = this.editedItem._id;
561 http() 573 http()
562 .put("/updateParent", this.editedItem) 574 .put("/updateParent", this.editedItem)
563 .then(response => { 575 .then(response => {
564 if ((this.snackbar = true)) { 576 if ((this.snackbar = true)) {
565 this.text = "Successfully Student Existing User"; 577 this.text = "Successfully Student Existing User";
566 } 578 }
567 this.getParentDetails(); 579 this.getParentDetails();
568 this.close(); 580 this.close();
569 }) 581 })
570 .catch(error => { 582 .catch(error => {
571 if ((this.snackbar = true)) { 583 if ((this.snackbar = true)) {
572 this.text = error.response.data.statusText; 584 this.text = error.response.data.statusText;
573 } 585 }
574 }); 586 });
575 }, 587 },
576 submitParentDetails() { 588 submitParentDetails() {
577 if (this.$refs.parentForm.validate()) { 589 if (this.$refs.parentForm.validate()) {
578 let addparentDetails = { 590 let addparentDetails = {
579 email: this.parentData.email, 591 email: this.parentData.email,
580 fatherName: this.parentData.fatherName, 592 fatherName: this.parentData.fatherName,
581 fatherCellNo: this.parentData.fatherCellNo, 593 fatherCellNo: this.parentData.fatherCellNo,
582 motherName: this.parentData.motherName, 594 motherName: this.parentData.motherName,
583 motherCellNo: this.parentData.motherCellNo, 595 motherCellNo: this.parentData.motherCellNo,
584 role: "PARENT" 596 role: "PARENT"
585 }; 597 };
586 this.loading = true; 598 this.loading = true;
587 http() 599 http()
588 .post("/createParent", addparentDetails) 600 .post("/createParent", addparentDetails)
589 .then(response => { 601 .then(response => {
590 this.parentId = response.data.data.id; 602 this.parentId = response.data.data.id;
591 if ((this.snackbar = true)) { 603 if ((this.snackbar = true)) {
592 this.text = "successfully"; 604 this.text = "successfully";
593 } 605 }
594 this.getParentDetails(); 606 this.getParentDetails();
595 this.clear(); 607 this.clear();
596 this.loading = false; 608 this.loading = false;
597 }) 609 })
598 .catch(error => { 610 .catch(error => {
599 console.log(error.response.data); 611 console.log(error.response.data);
600 if ((this.snackbar = true)) { 612 if ((this.snackbar = true)) {
601 this.text = error.response.data.message; 613 this.text = error.response.data.message;
602 this.text = error.response.data.statusText; 614 this.text = error.response.data.statusText;
603 } 615 }
604 this.loading = false; 616 this.loading = false;
605 }); 617 });
606 } 618 }
607 }, 619 },
608 getParentDetails() { 620 getParentDetails() {
609 http() 621 http()
610 .get("getParentsList", { 622 .get("getParentsList", {
611 headers: { 623 headers: {
612 Authorization: "Bearer " + this.$store.state.token 624 Authorization: "Bearer " + this.$store.state.token
613 } 625 }
614 }) 626 })
615 .then(response => { 627 .then(response => {
616 this.parentsList = response.data.data; 628 this.parentsList = response.data.data;
617 }) 629 })
618 .catch(error => { 630 .catch(error => {
619 console.log("err====>", error.response.data.message); 631 console.log("err====>", error.response.data.message);
620 }); 632 });
621 } 633 }
622 }, 634 },
623 mounted() { 635 mounted() {
624 this.getParentDetails(); 636 this.getParentDetails();
625 }, 637 },
626 created() { 638 created() {
627 this.$root.$on("app:search", search => { 639 this.$root.$on("app:search", search => {
628 this.search = search; 640 this.search = search;
629 }); 641 });
630 }, 642 },
631 beforeDestroy() { 643 beforeDestroy() {
632 // dont forget to remove the listener 644 // dont forget to remove the listener
633 this.$root.$off("app:search"); 645 this.$root.$off("app:search");
634 } 646 }
635 }; 647 };
636 </script> 648 </script>
637 <style scoped> 649 <style scoped>
638 .active { 650 .active {
639 background-color: gray; 651 background-color: gray;
640 color: white !important; 652 color: white !important;
641 } 653 }
642 .activebtn { 654 .activebtn {
643 color: black !important; 655 color: black !important;
644 } 656 }
645 </style> 657 </style>
src/pages/Report/markSheetReport.vue
View file @0065443
1 <template> File was deleted
2 <v-app id="pages-dasboard">
3 <v-snackbar
4 :timeout="timeout"
5 :top="y === 'top'"
6 :right="x === 'right'"
7 :vertical="mode === 'vertical'"
8 v-model="snackbar"
9 color="success"
10 >{{ text }}</v-snackbar>
11
12 <!-- ****** Mark Sheet Report TABLE****** -->
13 <v-card flat>
14 <v-card-actions>
15 <v-layout>
16 <h4 class="right mt-2 ml-2">Mark Sheet Report</h4>
17 </v-layout>
18 <v-spacer></v-spacer>
19 </v-card-actions>
20 </v-card>
21 <v-card flat>
22 <v-flex xs12 sm12 lg12>
23 <v-layout wrap>
24 <v-flex xs12 sm12 lg3>
25 <v-layout>
26 <v-flex xs3 sm6 lg2 class="subheading mt-4">
27 <label class="right">Exam:</label>
28 </v-flex>
29 <v-flex xs12 sm12 lg8 class="ml-2">
30 <v-select
31 v-model="getMark.exam"
32 label="Select your Exam"
33 type="text"
34 :items="examList"
35 item-text="classNum"
36 item-value="_id"
37 @change="getSections(getMark.classId)"
38 required
39 ></v-select>
40 </v-flex>
41 </v-layout>
42 </v-flex>
43 <v-flex xs12 sm12 lg3>
44 <v-layout>
45 <v-flex xs3 sm6 lg2 class="subheading mt-4">
46 <label class="right">Class:</label>
47 </v-flex>
48 <v-flex xs12 sm12 lg8 class="ml-2">
49 <v-select
50 v-model="getMark.classId"
51 label="Select your class"
52 type="text"
53 :items="classList"
54 item-text="classNum"
55 item-value="_id"
56 @change="getSections(getMark.classId)"
57 required
58 ></v-select>
59 </v-flex>
60 </v-layout>
61 </v-flex>
62 <v-flex xs12 sm12 lg3>
63 <v-layout>
64 <v-flex xs3 sm6 lg2 class="subheading mt-4">
65 <label class="right">Section:</label>
66 </v-flex>
67 <v-flex xs12 sm12 lg8 class="ml-2">
68 <v-select
69 :items="addSection"
70 label="Select your Section"
71 v-model="getMark.sectionId"
72 item-text="name"
73 item-value="_id"
74 name="Select Section"
75 required
76 ></v-select>
77 </v-flex>
78 </v-layout>
79 </v-flex>
80 <v-flex xs12 sm12 lg3>
81 <v-btn @click="getStudents" round dark :loading="loading" class="right mt-3">Get Report</v-btn>
82 </v-flex>
83 </v-layout>
84 </v-flex>
85 </v-card>
86 <v-data-table
87 :headers="headers"
88 :items="getStudentsList"
89 :pagination.sync="pagination"
90 :search="search"
91 >
92 <template slot="items" slot-scope="props">
93 <td class="text-xs-center">{{ props.index + 1}}</td>
94 <td id="td" class="text-xs-center">
95 <v-avatar>
96 <img :src="props.item.profilePicUrl" v-if="props.item.profilePicUrl" />
97 <img src="/static/icon/user.png" v-else-if="!props.item.profilePicUrl" />
98 </v-avatar>
99 </td>
100 <td id="td" class="text-xs-center">{{ props.item.name}}</td>
101 <td id="td" class="text-xs-center">{{ props.item.rollNo }}</td>
102 <td id="td" class="text-xs-center">{{ props.item.email }}</td>
103 <td class="text-xs-center">
104 <span>
105 <!-- <img
106 style="cursor:pointer; width:25px; height:18px; "
107 class="mr-5"
108 @click="profile(props.item)"
109 src="/static/icon/eye1.png"
110 />-->
111 <router-link :to="{ name:'viewMark',params: { markId:props.item._id } }">
112 <img
113 style="cursor:pointer; width:20px; height:18px; "
114 class="mr-5"
115 src="/static/icon/edit1.png"
116 />
117 </router-link>
118 <!-- <img
119 style="cursor:pointer;width:20px; height:20px; "
120 class="mr-5"
121 @click="deleteSchedule(props.item)"
122 src="/static/icon/delete1.png"
123 />-->
124 </span>
125 </td>
126 </template>
127 <v-alert
128 slot="no-results"
129 :value="true"
130 color="error"
131 icon="warning"
132 >Your search for "{{ search }}" found no results.</v-alert>
133 </v-data-table>
134 <div class="loader" v-if="showLoader">
135 <v-progress-circular indeterminate color="white"></v-progress-circular>
136 </div>
137 </v-app>
138 </template>
139
140 <script>
141 import http from "@/Services/http.js";
142 import moment from "moment";
143
144 export default {
145 data: () => ({
146 snackbar: false,
147 color: "",
148 y: "top",
149 x: "right",
150 mode: "",
151 timeout: 10000,
152 text: "",
153 loading: false,
154 search: "",
155 showLoader: false,
156 addSection: [],
157 pagination: {
158 rowsPerPage: 15
159 },
160 headers: [
161 {
162 align: "justify-center",
163 text: "No",
164 sortable: false,
165 value: "No"
166 },
167 {
168 text: "Profile Pic",
169 vaue: "profilePicUrl",
170 sortable: false,
171 align: "center"
172 },
173 {
174 text: "Name",
175 vaue: "name",
176 sortable: false,
177 align: "center"
178 },
179 {
180 text: "Roll No.",
181 value: "rollNo",
182 sortable: false,
183 align: "center"
184 },
185 {
186 text: "Email",
187 value: "email",
188 sortable: false,
189 align: "center"
190 },
191 { text: "Action", value: "", sortable: false, align: "center" }
192 ],
193 classList: [],
194 getMark: {},
195 markData: [],
196 examList: [],
197 getStudentsList: [],
198 token: ""
199 }),
200 methods: {
201 getClass() {
202 http()
203 .get("/getClassesList", {
204 headers: { Authorization: "Bearer " + this.token }
205 })
206 .then(response => {
207 this.classList = response.data.data;
208 })
209 .catch(err => {
210 // console.log("err====>", err);
211 });
212 },
213 getSections(_id) {
214 console.log(_id);
215 for (let i = 0; i < this.classList.length; i++) {
216 if (_id == this.classList[i]._id) {
217 this.subjects = this.classList[i].subjects;
218 }
219 }
220 http()
221 .get(
222 "/getSectionsList",
223 { params: { classId: _id } },
224 {
225 headers: { Authorization: "Bearer " + this.token }
226 }
227 )
228 .then(response => {
229 this.addSection = response.data.data;
230 })
231 .catch(err => {
232 // console.log("err====>", err);
233 });
234 },
235 getStudents() {
236 this.showLoader = true;
237 http()
238 .get("/getStudentWithClass", {
239 params: {
240 classId: this.getMark.classId,
241 sectionId: this.getMark.sectionId
242 }
243 })
244 .then(response => {
245 this.getStudentsList = response.data.data;
246 this.showLoader = false;
247 console.log("getSectionsList=====>", response.data.data);
248 })
249 .catch(error => {
250 console.log("err====>", error);
251 this.showLoader = false;
252 });
253 },
254 getExamList() {
255 this.showLoader = true;
256 http()
257 .get("/getExamsList", {
258 headers: { Authorization: "Bearer " + this.token }
259 })
260 .then(response => {
261 this.examList = response.data.data;
262 this.showLoader = false;
263 })
264 .catch(error => {
265 // console.log("err====>", err);
266 this.showLoader = false;
267 this.snackbar = true;
268 this.text = error.response.data.message;
269 if (error.response.status === 401) {
270 this.$router.replace({ path: "/" });
271 this.$store.dispatch("setToken", null);
272 this.$store.dispatch("Id", null);
273 }
274 });
275 }
276 },
277 mounted() {
278 this.token = this.$store.state.token;
279 this.getExamList();
280 this.getClass();
281 },
282 created() {
283 this.$root.$on("app:search", search => {
284 this.search = search;
285 });
286 },
287 beforeDestroy() {
288 // dont forget to remove the listener
289 this.$root.$off("app:search");
290 }
291 };
292 </script>
293 <style scoped>
294 .active {
295 background-color: gray;
296 color: white !important;
297 }
298 .activebtn {
299 color: black !important;
300 }
301 </style>s
src/pages/Report/progressCardReport.vue
Diff comments   View file @495e403
File was created 1 <template>
2 <v-app id="pages-dasboard">
3 <v-snackbar
4 :timeout="timeout"
5 :top="y === 'top'"
6 :right="x === 'right'"
7 :vertical="mode === 'vertical'"
8 v-model="snackbar"
9 color="success"
10 >{{ text }}</v-snackbar>
11
12 <!-- ****** Progress Card Report Table****** -->
13
14 <v-card flat>
15 <v-card-actions>
16 <v-layout>
17 <h4 class="ml-2">Progress Card Report</h4>
18 </v-layout>
19 </v-card-actions>
20 </v-card>
21 <v-card flat>
22 <v-form ref="form" v-model="valid" lazy-validation>
23 <v-flex xs12 sm12 lg12>
24 <v-layout wrap>
25 <v-flex xs12 sm12 lg3>
26 <v-layout>
27 <v-flex xs3 sm6 lg2 class="subheading mt-4">
28 <label class="right">Class:</label>
29 </v-flex>
30 <v-flex xs12 sm12 lg8 class="ml-2">
31 <v-select
32 v-model="getReport.classId"
33 label="Select your class"
34 type="text"
35 :items="classList"
36 item-text="classNum"
37 item-value="_id"
38 :rules="classRules"
39 @change="getSections(getReport.classId)"
40 required
41 ></v-select>
42 </v-flex>
43 </v-layout>
44 </v-flex>
45 <v-flex xs12 sm12 lg3>
46 <v-layout>
47 <v-flex xs3 sm6 lg2 class="subheading mt-4">
48 <label class="right">Section:</label>
49 </v-flex>
50 <v-flex xs12 sm12 lg8 class="ml-2">
51 <v-select
52 :items="addSection"
53 label="Select your Section"
54 v-model="getReport.sectionId"
55 item-text="name"
56 item-value="_id"
57 name="Select Section"
58 @change="getStudents"
59 :rules="sectionRules"
60 required
61 ></v-select>
62 </v-flex>
63 </v-layout>
64 </v-flex>
65 <v-flex xs12 sm12 lg3>
66 <v-layout>
67 <v-flex xs3 sm6 lg2 class="subheading mt-4">
68 <label class="right">Student:</label>
69 </v-flex>
70 <v-flex xs12 sm12 lg8 class="ml-2">
71 <v-select
72 :items="getStudentsList"
73 label="Select your student"
74 v-model="getReport.studentId"
75 item-text="name"
76 item-value="_id"
77 :rules="studentRules"
78 required
79 ></v-select>
80 </v-flex>
81 </v-layout>
82 </v-flex>
83 <v-flex xs12 sm12 lg3>
84 <v-btn @click="getReport" round dark :loading="loading" class="right mt-3">Get Report</v-btn>
85 </v-flex>
86 </v-layout>
87 </v-flex>
88 </v-form>
89 </v-card>
90 <!-- <v-data-table
91 :headers="headers"
92 :items="getStudentsList"
93 :pagination.sync="pagination"
94 :search="search"
95 >
96 <template slot="items" slot-scope="props">
97 <td class="text-xs-center">{{ props.index + 1}}</td>
98 <td id="td" class="text-xs-center">
99 <v-avatar>
100 <img :src="props.item.profilePicUrl" v-if="props.item.profilePicUrl" />
101 <img src="/static/icon/user.png" v-else-if="!props.item.profilePicUrl" />
102 </v-avatar>
103 </td>
104 <td id="td" class="text-xs-center">{{ props.item.name}}</td>
105 <td id="td" class="text-xs-center">{{ props.item.rollNo }}</td>
106 <td id="td" class="text-xs-center">{{ props.item.email }}</td>
107 <td class="text-xs-center">
108 <span>
109 <router-link :to="{ name:'viewMark',params: { markId:props.item._id } }">
110 <img
111 style="cursor:pointer; width:20px; height:18px; "
112 class="mr-5"
113 src="/static/icon/edit1.png"
114 />
115 </router-link>
116 </span>
117 </td>
118 </template>
119 <v-alert
120 slot="no-results"
121 :value="true"
122 color="error"
123 icon="warning"
124 >Your search for "{{ search }}" found no results.</v-alert>
125 </v-data-table>-->
126 <div class="loader" v-if="showLoader">
127 <v-progress-circular indeterminate color="white"></v-progress-circular>
128 </div>
129 </v-app>
130 </template>
131
132 <script>
133 import http from "@/Services/http.js";
134 import moment from "moment";
135
136 export default {
137 data: () => ({
138 snackbar: false,
139 color: "",
140 y: "top",
141 x: "right",
142 mode: "",
143 timeout: 10000,
144 text: "",
145 loading: false,
146 search: "",
147 showLoader: false,
148 valid: true,
149 addSection: [],
150 classRules: [v => !!v || "Class is required"],
151 sectionRules: [v => !!v || "Class is required"],
152 studentRules: [v => !!v || "Student is required"],
153 pagination: {
154 rowsPerPage: 15
155 },
156 headers: [
157 {
158 align: "justify-center",
159 text: "No",
160 sortable: false,
161 value: "No"
162 },
163 {
164 text: "Profile Pic",
165 vaue: "profilePicUrl",
166 sortable: false,
167 align: "center"
168 },
169 {
170 text: "Name",
171 vaue: "name",
172 sortable: false,
173 align: "center"
174 },
175 {
176 text: "Roll No.",
177 value: "rollNo",
178 sortable: false,
179 align: "center"
180 },
181 {
182 text: "Email",
183 value: "email",
184 sortable: false,
185 align: "center"
186 },
187 { text: "Action", value: "", sortable: false, align: "center" }
188 ],
189 classList: [],
190 getReport: {},
191 markData: [],
192 examList: [],
193 getStudentsList: [],
194 token: ""
195 }),
196 methods: {
197 clear() {
198 this.$refs.form.reset();
199 },
200 getClass() {
201 http()
202 .get("/getClassesList", {
203 headers: { Authorization: "Bearer " + this.token }
204 })
205 .then(response => {
206 this.classList = response.data.data;
207 })
208 .catch(err => {
209 // console.log("err====>", err);
210 });
211 },
212 getSections(_id) {
213 http()
214 .get(
215 "/getSectionsList",
216 { params: { classId: _id } },
217 {
218 headers: { Authorization: "Bearer " + this.token }
219 }
220 )
221 .then(response => {
222 this.addSection = response.data.data;
223 })
224 .catch(err => {
225 // console.log("err====>", err);
226 });
227 },
228 getStudents() {
229 this.showLoader = true;
230 http()
231 .get("/getStudentWithClass", {
232 params: {
233 classId: this.getReport.classId,
234 sectionId: this.getReport.sectionId
235 }
236 })
237 .then(response => {
238 this.getStudentsList = response.data.data;
239 this.showLoader = false;
240 console.log("getSectionsList=====>", response.data.data);
241 })
242 .catch(error => {
243 console.log("err====>", error);
244 this.showLoader = false;
245 });
246 },
247 getReport() {
248 if (this.$refs.form.validate()) {
249 this.showLoader = true;
250 http()
251 .get("/getParticularMark", {
252 params: { studentId: this.getReport.studentId },
253 headers: { Authorization: "Bearer " + this.token }
254 })
255 .then(response => {
256 console.log("response.data.data", response.data.data);
257 // this.examList = response.data.data;
258 this.showLoader = false;
259 this.clear();
260 })
261 .catch(error => {
262 console.log("err====>", error);
263 this.showLoader = false;
264 // this.snackbar = true;
265 // this.text = error.response.data.message;
266 // if (error.response.status === 401) {
267 // this.$router.replace({ path: "/" });
268 // this.$store.dispatch("setToken", null);
269 // this.$store.dispatch("Id", null);
270 // }
271 });
272 }
273 }
274 },
275 mounted() {
276 this.token = this.$store.state.token;
277 // this.getExamList();
278 this.getClass();
279 },
280 created() {
281 this.$root.$on("app:search", search => {
282 this.search = search;
283 });
284 },
285 beforeDestroy() {
286 // dont forget to remove the listener
287 this.$root.$off("app:search");
288 }
289 };
290 </script>
291 <style scoped>
292 .active {
293 background-color: gray;
294 color: white !important;
295 }
296 .activebtn {
297 color: black !important;
298 }
299 </style>s
src/pages/Report/studentReport.vue
Diff comments   View file @495e403
1 <template> 1 <template>
2 <v-app id="pages-dasboard"> 2 <v-app id="pages-dasboard">
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 <!-- ****** Student Report TABLE****** --> 12 <!-- ****** Student Report TABLE****** -->
13 <v-card flat> 13 <v-card flat>
14 <v-card-actions> 14 <v-card-actions>
15 <v-layout> 15 <v-layout>
16 <h4 class="right mt-2 ml-2">Student Report</h4> 16 <h4 class="right mt-2 ml-2">Student Report</h4>
17 </v-layout> 17 </v-layout>
18 <v-spacer></v-spacer> 18 <v-spacer></v-spacer>
19 </v-card-actions> 19 </v-card-actions>
20 </v-card> 20 </v-card>
21 <v-card flat> 21 <v-card flat class="elevation-0">
22 <v-form ref="form" v-model="valid" lazy-validation> 22 <v-form ref="form" v-model="valid" lazy-validation>
23 <v-flex xs12 sm12 lg12> 23 <v-flex xs12 sm12 lg12>
24 <v-layout wrap> 24 <v-layout wrap>
25 <v-flex xs12 sm12 lg4> 25 <v-flex xs12 sm12 lg4>
26 <v-layout> 26 <v-layout>
27 <v-flex xs3 sm6 lg3 class="subheading mt-4"> 27 <v-flex xs4 sm4 lg3 class="subheading mt-4">
28 <label class="right">Report For :</label> 28 <label class="right">Report For :</label>
29 </v-flex> 29 </v-flex>
30 <v-flex xs12 sm12 lg8 class="ml-2"> 30 <v-flex xs7 sm6 lg8 class="ml-2">
31 <v-select 31 <v-select
32 v-model="report.form" 32 v-model="report.form"
33 label="Select your report for" 33 label="Select your report for"
34 :items="formList" 34 :items="formList"
35 item-text="name" 35 item-text="name"
36 item-value="value" 36 item-value="value"
37 @change="getReport(report.form)" 37 @change="getReport(report.form)"
38 :rules="formRules" 38 :rules="formRules"
39 required 39 required
40 ></v-select> 40 ></v-select>
41 </v-flex> 41 </v-flex>
42 </v-layout> 42 </v-layout>
43 </v-flex> 43 </v-flex>
44 <v-flex xs12 sm12 lg4 v-if="bloodGroup"> 44 <v-flex xs12 sm12 lg4 v-if="bloodGroup">
45 <v-layout> 45 <v-layout>
46 <v-flex xs3 sm6 lg4 class="subheading mt-4"> 46 <v-flex xs4 sm4 lg4 class="subheading mt-4">
47 <label class="right">Blood Group :</label> 47 <label class="right">Blood Group :</label>
48 </v-flex> 48 </v-flex>
49 <v-flex xs12 sm12 lg8 class="ml-2"> 49 <v-flex xs7 sm6 lg8 class="ml-2">
50 <v-select 50 <v-select
51 v-model="report.bloodGroup" 51 v-model="report.bloodGroup"
52 label="Select your Blood Group " 52 label="Select your Blood Group "
53 :items="bloodGroupList" 53 :items="bloodGroupList"
54 :rules="bloodGroupRules" 54 :rules="bloodGroupRules"
55 required 55 required
56 ></v-select> 56 ></v-select>
57 </v-flex> 57 </v-flex>
58 </v-layout> 58 </v-layout>
59 </v-flex> 59 </v-flex>
60 <v-flex xs12 sm12 lg4 v-if="genderShow"> 60 <v-flex xs12 sm12 lg4 v-if="genderShow">
61 <v-layout> 61 <v-layout>
62 <v-flex xs3 sm6 lg4 class="subheading mt-4"> 62 <v-flex xs4 sm4 lg4 class="subheading mt-4">
63 <label class="right">Gender:</label> 63 <label class="right">Gender:</label>
64 </v-flex> 64 </v-flex>
65 <v-flex xs12 sm12 lg8 class="ml-2"> 65 <v-flex xs7 sm6 lg8 class="ml-2">
66 <v-select 66 <v-select
67 v-model="report.gender" 67 v-model="report.gender"
68 label="Select your gender " 68 label="Select your gender "
69 :items="gender" 69 :items="gender"
70 :rules="genderRules" 70 :rules="genderRules"
71 required 71 required
72 ></v-select> 72 ></v-select>
73 </v-flex> 73 </v-flex>
74 </v-layout> 74 </v-layout>
75 </v-flex> 75 </v-flex>
76 <v-flex xs12 sm12 lg4 v-if="TransportShow"> 76 <v-flex xs12 sm12 lg4 v-if="TransportShow">
77 <v-layout> 77 <v-layout>
78 <v-flex xs3 sm6 lg4 class="subheading mt-4"> 78 <v-flex xs4 sm4 lg4 class="subheading mt-4">
79 <label class="right">Route:</label> 79 <label class="right">Route:</label>
80 </v-flex> 80 </v-flex>
81 <v-flex xs12 sm12 lg8 class="ml-2"> 81 <v-flex xs7 sm6 lg8 class="ml-2">
82 <v-select 82 <v-select
83 v-model="report.route" 83 v-model="report.route"
84 label="Select your gender " 84 label="Select your gender "
85 :items="route" 85 :items="route"
86 :rules="routeRules" 86 :rules="routeRules"
87 required 87 required
88 ></v-select> 88 ></v-select>
89 </v-flex> 89 </v-flex>
90 </v-layout> 90 </v-layout>
91 </v-flex> 91 </v-flex>
92 <v-flex xs12 sm12 lg4 v-if="HostelShow"> 92 <v-flex xs12 sm12 lg4 v-if="HostelShow">
93 <v-layout> 93 <v-layout>
94 <v-flex xs3 sm6 lg4 class="subheading mt-4"> 94 <v-flex xs4 sm4 lg4 class="subheading mt-4">
95 <label class="right">Hostel:</label> 95 <label class="right">Hostel:</label>
96 </v-flex> 96 </v-flex>
97 <v-flex xs12 sm12 lg8 class="ml-2"> 97 <v-flex xs7 sm6 lg8 class="ml-2">
98 <v-select 98 <v-select
99 v-model="report.route" 99 v-model="report.route"
100 label="Select your hostel " 100 label="Select your hostel "
101 :items="hostelList" 101 :items="hostelList"
102 :rules="hostelRules" 102 :rules="hostelRules"
103 required 103 required
104 ></v-select> 104 ></v-select>
105 </v-flex> 105 </v-flex>
106 </v-layout> 106 </v-layout>
107 </v-flex> 107 </v-flex>
108 <v-flex xs12 sm12 lg4 v-if="countryShow"> 108 <v-flex xs12 sm12 lg4 v-if="countryShow">
109 <v-layout> 109 <v-layout>
110 <v-flex xs3 sm6 lg4 class="subheading mt-4"> 110 <v-flex xs4 sm4 lg4 class="subheading mt-4">
111 <label class="right">Country :</label> 111 <label class="right">Country :</label>
112 </v-flex> 112 </v-flex>
113 <v-flex xs12 sm12 lg8 class="ml-2"> 113 <v-flex xs7 sm6 lg8 class="ml-2">
114 <v-select 114 <v-select
115 v-model="report.country" 115 v-model="report.country"
116 label="Select your Country " 116 label="Select your Country "
117 :items="countryList" 117 :items="countryList"
118 :rules="countryRules" 118 :rules="countryRules"
119 required 119 required
120 ></v-select> 120 ></v-select>
121 </v-flex> 121 </v-flex>
122 </v-layout> 122 </v-layout>
123 </v-flex> 123 </v-flex>
124 <!-- <v-flex xs12 sm12 lg4 v-show="BirthdayShow"> 124 <!-- <v-flex xs12 sm12 lg4 v-show="BirthdayShow">
125 <v-layout> 125 <v-layout>
126 <v-flex xs3 sm6 lg4 class="subheading mt-4"> 126 <v-flex xs3 sm6 lg4 class="subheading mt-4">
127 <label class="right">Country :</label> 127 <label class="right">Country :</label>
128 </v-flex> 128 </v-flex>
129 <v-flex xs12 sm12 lg8 class="ml-2"> 129 <v-flex xs12 sm12 lg8 class="ml-2">
130 <v-select 130 <v-select
131 v-model="report.country" 131 v-model="report.country"
132 label="Select your Country " 132 label="Select your Country "
133 :items="countryList" 133 :items="countryList"
134 required 134 required
135 ></v-select> 135 ></v-select>
136 </v-flex> 136 </v-flex>
137 </v-layout> 137 </v-layout>
138 </v-flex>--> 138 </v-flex>-->
139 <v-flex xs12 sm12 lg4> 139 <v-flex xs12 sm12 lg4>
140 <v-layout> 140 <v-layout>
141 <v-flex xs3 sm6 lg3 class="subheading mt-4"> 141 <v-flex xs4 sm4 lg3 class="subheading mt-4">
142 <label class="right">Class:</label> 142 <label class="right">Class:</label>
143 </v-flex> 143 </v-flex>
144 <v-flex xs12 sm12 lg8 class="ml-2"> 144 <v-flex xs7 sm6 lg8 class="ml-2">
145 <v-select 145 <v-select
146 v-model="report.classId" 146 v-model="report.classId"
147 label="Select your class" 147 label="Select your class"
148 type="text" 148 type="text"
149 :rules="classRules" 149 :rules="classRules"
150 :items="classList" 150 :items="classList"
151 item-text="classNum" 151 item-text="classNum"
152 item-value="_id" 152 item-value="_id"
153 @change="getSections(report.classId)" 153 @change="getSections(report.classId)"
154 required 154 required
155 ></v-select> 155 ></v-select>
156 </v-flex> 156 </v-flex>
157 </v-layout> 157 </v-layout>
158 </v-flex> 158 </v-flex>
159 <v-flex xs12 sm12 lg4 v-if="sectionShow"> 159 <v-flex xs12 sm12 lg4 v-if="sectionShow">
160 <v-layout> 160 <v-layout>
161 <v-flex xs3 sm6 lg3 class="subheading mt-4"> 161 <v-flex xs4 sm4 lg3 class="subheading mt-4">
162 <label class="right">Section:</label> 162 <label class="right">Section:</label>
163 </v-flex> 163 </v-flex>
164 <v-flex xs12 sm12 lg8 class="ml-2"> 164 <v-flex xs7 sm6 lg8 class="ml-2">
165 <v-select 165 <v-select
166 :items="addSection" 166 :items="addSection"
167 label="Select your Section" 167 label="Select your Section"
168 v-model="report.sectionId" 168 v-model="report.sectionId"
169 :rules="sectionRules" 169 :rules="sectionRules"
170 item-text="name" 170 item-text="name"
171 item-value="_id" 171 item-value="_id"
172 name="Select Section" 172 name="Select Section"
173 required 173 required
174 ></v-select> 174 ></v-select>
175 </v-flex> 175 </v-flex>
176 </v-layout> 176 </v-layout>
177 </v-flex> 177 </v-flex>
178 <v-flex xs12 sm12 lg4> 178 <v-flex xs12 sm12 lg4 class="hidden-xs-only hidden-sm-only">
179 <v-btn @click="getStudents" round dark :loading="loading" class="mt-3 ml-5">Get Report</v-btn> 179 <v-btn @click="getStudents" round dark :loading="loading" class="mt-3 ml-5">Get Report</v-btn>
180 </v-flex> 180 </v-flex>
181 <v-flex xs12 sm12 lg4 class="hidden-lg-only hidden-md-only hidden-xl-only">
182 <v-btn @click="getStudents" round dark :loading="loading" class="mt-3 right">Get Report</v-btn>
183 </v-flex>
181 </v-layout> 184 </v-layout>
182 </v-flex> 185 </v-flex>
183 </v-form> 186 </v-form>
184 </v-card> 187 </v-card>
185 <v-card flat v-if="getStudentsReportList"> 188 <v-card flat v-if="getStudentsReportList">
186 <v-card-actions> 189 <v-flex xs12>
187 <v-layout> 190 <v-layout v-for="(student,i) in getStudentsReportList" :key="i">
188 <h5 class="right mt-2 ml-2">Student Report</h5> 191 <v-flex xs12 sm12 md6>
189 <!-- <h5 class="right mt-2 ml-2">: {{ getStudentsReportList[0].classId.classNum }}</h5> --> 192 <h5 class="mt-2 ml-2">Student Report</h5>
193 <h5 class="right mt-2 ml-2">: {{ student.classId.classNum }}</h5>
194 </v-flex>
195 <v-flex xs12 sm12 md6>
196 <h5 class="right mt-2 ml-2">Student Report</h5>
197 <h5 class="mt-2 ml-2">: {{ student.sectionId.name }}</h5>
198 </v-flex>
190 </v-layout> 199 </v-layout>
191 <v-spacer></v-spacer> 200 </v-flex>
192 <v-layout>
193 <h5 class=" mt-2 ml-2">Student Report</h5>
194 <!-- <h5 class=" mt-2 ml-2">: {{ getStudentsReportList[0].sectionId.name }}</h5> -->
195 </v-layout>
196 </v-card-actions>
197 </v-card> 201 </v-card>
198 <v-data-table 202 <v-data-table
199 :headers="headers" 203 :headers="headers"
200 :items="getStudentsReportList" 204 :items="getStudentsReportList"
201 :pagination.sync="pagination" 205 :pagination.sync="pagination"
202 :search="search" 206 :search="search"
207 v-show="showTable"
203 > 208 >
204 <template slot="items" slot-scope="props"> 209 <template slot="items" slot-scope="props">
205 <td class="text-xs-center">{{ props.index + 1}}</td> 210 <td class="text-xs-center">{{ props.index + 1}}</td>
206 <td id="td" class="text-xs-center"> 211 <td id="td" class="text-xs-center">
207 <v-avatar> 212 <v-avatar>
208 <img :src="props.item.profilePicUrl" v-if="props.item.profilePicUrl" /> 213 <img :src="props.item.profilePicUrl" v-if="props.item.profilePicUrl" />
209 <img src="/static/icon/user.png" v-else-if="!props.item.profilePicUrl" /> 214 <img src="/static/icon/user.png" v-else-if="!props.item.profilePicUrl" />
210 </v-avatar> 215 </v-avatar>
211 </td> 216 </td>
212 <td id="td" class="text-xs-center">{{ props.item.name}}</td> 217 <td id="td" class="text-xs-center">{{ props.item.name}}</td>
213 <td id="td" class="text-xs-center">{{ props.item.rollNo }}</td> 218 <td id="td" class="text-xs-center">{{ props.item.rollNo }}</td>
214 <td id="td" class="text-xs-center">{{ props.item.email }}</td> 219 <td id="td" class="text-xs-center">{{ props.item.email }}</td>
215 </template> 220 </template>
216 <v-alert 221 <v-alert
217 slot="no-results" 222 slot="no-results"
218 :value="true" 223 :value="true"
219 color="error" 224 color="error"
220 icon="warning" 225 icon="warning"
221 >Your search for "{{ search }}" found no results.</v-alert> 226 >Your search for "{{ search }}" found no results.</v-alert>
222 </v-data-table> 227 </v-data-table>
223 <div class="loader" v-if="showLoader"> 228 <div class="loader" v-if="showLoader">
224 <v-progress-circular indeterminate color="white"></v-progress-circular> 229 <v-progress-circular indeterminate color="white"></v-progress-circular>
225 </div> 230 </div>
226 </v-app> 231 </v-app>
227 </template> 232 </template>
228 233
229 <script> 234 <script>
230 import http from "@/Services/http.js"; 235 import http from "@/Services/http.js";
231 import countryList from "@/script/country.js"; 236 import countryList from "@/script/country.js";
232 237
233 import moment from "moment"; 238 import moment from "moment";
234 239
235 export default { 240 export default {
236 data: () => ({ 241 data: () => ({
237 snackbar: false, 242 snackbar: false,
238 color: "", 243 color: "",
239 y: "top", 244 y: "top",
240 x: "right", 245 x: "right",
241 mode: "", 246 mode: "",
242 timeout: 10000, 247 timeout: 10000,
243 text: "", 248 text: "",
244 loading: false, 249 loading: false,
245 valid: true, 250 valid: true,
246 search: "", 251 search: "",
247 showLoader: false, 252 showLoader: false,
248 bloodGroup: false, 253 bloodGroup: false,
249 genderShow: false, 254 genderShow: false,
250 countryShow: false, 255 countryShow: false,
251 TransportShow: false, 256 TransportShow: false,
252 HostelShow: false, 257 HostelShow: false,
253 BirthdayShow: false, 258 BirthdayShow: false,
254 sectionShow: false, 259 sectionShow: false,
255 showTable: false, 260 showTable: false,
256 addSection: [], 261 addSection: [],
257 pagination: { 262 pagination: {
258 rowsPerPage: 15 263 rowsPerPage: 15
259 }, 264 },
260 formRules: [v => !!v || "Form For is required"], 265 formRules: [v => !!v || "Form For is required"],
261 bloodGroupRules: [v => !!v || "Blood group is required"], 266 bloodGroupRules: [v => !!v || "Blood group is required"],
262 classRules: [v => !!v || "Class is required"], 267 classRules: [v => !!v || "Class is required"],
263 sectionRules: [v => !!v || "Class is required"], 268 sectionRules: [v => !!v || "Class is required"],
264 genderRules: [v => !!v || "Gender is required"], 269 genderRules: [v => !!v || "Gender is required"],
265 routeRules: [v => !!v || "RouteI is required"], 270 routeRules: [v => !!v || "RouteI is required"],
266 hostelRules: [v => !!v || "Hostel is required"], 271 hostelRules: [v => !!v || "Hostel is required"],
267 countryRules: [v => !!v || "Country is required"], 272 countryRules: [v => !!v || "Country is required"],
268 headers: [ 273 headers: [
269 { 274 {
270 align: "justify-center", 275 align: "justify-center",
271 text: "No", 276 text: "No",
272 sortable: false, 277 sortable: false,
273 value: "No" 278 value: "No"
274 }, 279 },
275 { 280 {
276 text: "Profile Pic", 281 text: "Profile Pic",
277 vaue: "profilePicUrl", 282 vaue: "profilePicUrl",
278 sortable: false, 283 sortable: false,
279 align: "center" 284 align: "center"
280 }, 285 },
281 { 286 {
282 text: "Name", 287 text: "Name",
283 vaue: "name", 288 vaue: "name",
284 sortable: false, 289 sortable: false,
285 align: "center" 290 align: "center"
286 }, 291 },
287 { 292 {
288 text: "Roll No.", 293 text: "Roll No.",
289 value: "rollNo", 294 value: "rollNo",
290 sortable: false, 295 sortable: false,
291 align: "center" 296 align: "center"
292 }, 297 },
293 { 298 {
294 text: "Email", 299 text: "Email",
295 value: "email", 300 value: "email",
296 sortable: false, 301 sortable: false,
297 align: "center" 302 align: "center"
298 } 303 }
299 ], 304 ],
300 classList: [], 305 classList: [],
301 report: {}, 306 report: {},
302 markData: [], 307 markData: [],
303 formList: [ 308 formList: [
304 { 309 {
305 name: "Blood Group", 310 name: "Blood Group",
306 value: "bloodGroup" 311 value: "bloodGroup"
307 }, 312 },
308 "Country", 313 "Country",
309 "Gender", 314 "Gender",
310 "Transport", 315 "Transport",
311 "Hostel" 316 "Hostel"
312 // "Birthday" 317 // "Birthday"
313 ], 318 ],
314 bloodGroupList: ["A+", "A-", "B+", "B-", "O+", "O-", "AB+", "AB-"], 319 bloodGroupList: ["A+", "A-", "B+", "B-", "O+", "O-", "AB+", "AB-"],
315 gender: ["Male", "female"], 320 gender: ["Male", "female"],
316 getStudentsReportList: [], 321 getStudentsReportList: [],
317 studentReort: "", 322 studentReort: "",
318 countryList: [], 323 countryList: [],
319 route: [], 324 route: [],
320 Hostel: [], 325 Hostel: [],
321 hostelList: [], 326 hostelList: [],
322 token: "" 327 token: ""
323 }), 328 }),
324 methods: { 329 methods: {
325 clear() { 330 clear() {
326 this.$refs.form.reset(); 331 this.$refs.form.reset();
327 // console.log("this.clear()", this.$refs.form.reset;
328 }, 332 },
329 getClass() { 333 getClass() {
330 http() 334 http()
331 .get("/getClassesList", { 335 .get("/getClassesList", {
332 headers: { Authorization: "Bearer " + this.token } 336 headers: { Authorization: "Bearer " + this.token }
333 }) 337 })
334 .then(response => { 338 .then(response => {
335 this.classList = response.data.data; 339 this.classList = response.data.data;
336 }) 340 })
337 .catch(err => { 341 .catch(err => {
338 // console.log("err====>", err); 342 // console.log("err====>", err);
339 }); 343 });
340 }, 344 },
341 getReport() { 345 getReport() {
342 if (this.report.form === "bloodGroup") { 346 if (this.report.form === "bloodGroup") {
343 this.bloodGroup = true; 347 this.bloodGroup = true;
344 this.genderShow = false; 348 this.genderShow = false;
345 this.TransportShow = false; 349 this.TransportShow = false;
346 this.countryShow = false; 350 this.countryShow = false;
347 this.BirthdayShow = false; 351 this.BirthdayShow = false;
348 this.HostelShow = false; 352 this.HostelShow = false;
349 } 353 }
350 if (this.report.form === "Gender") { 354 if (this.report.form === "Gender") {
351 this.genderShow = true; 355 this.genderShow = true;
352 this.bloodGroup = false; 356 this.bloodGroup = false;
353 this.TransportShow = false; 357 this.TransportShow = false;
354 this.BirthdayShow = false; 358 this.BirthdayShow = false;
355 this.countryShow = false; 359 this.countryShow = false;
356 this.HostelShow = false; 360 this.HostelShow = false;
357 } 361 }
358 if (this.report.form === "Transport") { 362 if (this.report.form === "Transport") {
359 this.TransportShow = true; 363 this.TransportShow = true;
360 this.genderShow = false; 364 this.genderShow = false;
361 this.bloodGroup = false; 365 this.bloodGroup = false;
362 this.BirthdayShow = false; 366 this.BirthdayShow = false;
363 this.countryShow = false; 367 this.countryShow = false;
364 this.HostelShow = false; 368 this.HostelShow = false;
365 } 369 }
366 if (this.report.form === "Country") { 370 if (this.report.form === "Country") {
367 this.countryShow = true; 371 this.countryShow = true;
368 this.TransportShow = false; 372 this.TransportShow = false;
369 this.genderShow = false; 373 this.genderShow = false;
370 this.bloodGroup = false; 374 this.bloodGroup = false;
371 this.BirthdayShow = false; 375 this.BirthdayShow = false;
372 this.HostelShow = false; 376 this.HostelShow = false;
373 } 377 }
374 if (this.report.form === "Hostel") { 378 if (this.report.form === "Hostel") {
375 this.HostelShow = true; 379 this.HostelShow = true;
376 this.TransportShow = false; 380 this.TransportShow = false;
377 this.genderShow = false; 381 this.genderShow = false;
378 this.bloodGroup = false; 382 this.bloodGroup = false;
379 this.countryShow = false; 383 this.countryShow = false;
380 this.BirthdayShow = false; 384 this.BirthdayShow = false;
381 } 385 }
382 if (this.report.form === "Birthday") { 386 if (this.report.form === "Birthday") {
383 this.BirthdayShow = true; 387 this.BirthdayShow = true;
384 this.TransportShow = false; 388 this.TransportShow = false;
385 this.genderShow = false; 389 this.genderShow = false;
386 this.HostelShow = false; 390 this.HostelShow = false;
387 this.bloodGroup = false; 391 this.bloodGroup = false;
388 this.countryShow = false; 392 this.countryShow = false;
389 } 393 }
390 }, 394 },
391 getStudents() { 395 getStudents() {
392 if (this.$refs.form.validate()) { 396 if (this.$refs.form.validate()) {
393 this.showLoader = true; 397 this.showLoader = true;
394 // for (let i = 0; i < this.classList.length; i++) {
395 // if (this.report.classId === this.classList[i]._id) {
396 // Number(this.studentReort.className) = this.classList[i].classNum;
397 // }
398 // }
399 // for (let i = 0; i < this.addSection.length; i++) {
400 // if (this.report.sectionId === this.addSection[i]._id) {
401 // this.studentReort.sectionName = this.addSection[i].name;
402 // }
403 // }
404 http() 398 http()
405 .get("/getStudentReport", { 399 .get("/getStudentReport", {
406 params: { 400 params: {
407 bloodGroup: this.report.bloodGroup, 401 bloodGroup: this.report.bloodGroup,
408 country: this.report.country, 402 country: this.report.country,
409 gender: this.report.gender, 403 gender: this.report.gender,
410 classId: this.report.classId, 404 classId: this.report.classId,
411 sectionId: this.report.sectionId 405 sectionId: this.report.sectionId
412 }, 406 },
413 headers: { Authorization: "Bearer " + this.token } 407 headers: { Authorization: "Bearer " + this.token }
414 }) 408 })
415 .then(response => { 409 .then(response => {
416 this.getStudentsReportList = response.data.data; 410 this.getStudentsReportList = response.data.data;
417 this.showTable = true; 411 this.showTable = true;
418 this.showLoader = false; 412 this.showLoader = false;
419 this.clear(); 413 this.clear();
420 // console.log("getSectionsList=====>", response.data.data); 414 // console.log("getSectionsList=====>", response.data.data);
421 }) 415 })
422 .catch(error => { 416 .catch(error => {
423 console.log("err====>", error); 417 console.log("err====>", error);
424 this.showLoader = false; 418 this.showLoader = false;
425 }); 419 });
426 } 420 }
427 }, 421 },
428 getSections() { 422 getSections() {
429 this.sectionShow = true; 423 this.sectionShow = true;
430 this.showLoader = true; 424 this.showLoader = true;
431 http() 425 http()
432 .get( 426 .get(
433 "/getSectionsList", 427 "/getSectionsList",
434 { params: { classId: this.report.classId } }, 428 { params: { classId: this.report.classId } },
435 { 429 {
436 headers: { Authorization: "Bearer " + this.token } 430 headers: { Authorization: "Bearer " + this.token }
437 } 431 }
438 ) 432 )
439 .then(response => { 433 .then(response => {
440 this.addSection = response.data.data; 434 this.addSection = response.data.data;
441 this.showLoader = false; 435 this.showLoader = false;
442 }) 436 })
443 .catch(error => { 437 .catch(error => {
444 console.log("err====>", error); 438 console.log("err====>", error);
445 this.showLoader = false; 439 this.showLoader = false;
446 }); 440 });
447 } 441 }
448 // getFormList() { 442 // getFormList() {
449 // this.showLoader = true; 443 // this.showLoader = true;
450 // http() 444 // http()
451 // .get("/getExamsList", { 445 // .get("/getExamsList", {
452 // headers: { Authorization: "Bearer " + this.token } 446 // headers: { Authorization: "Bearer " + this.token }
453 // }) 447 // })
454 // .then(response => { 448 // .then(response => {
455 // this.formList = response.data.data; 449 // this.formList = response.data.data;
456 // this.showLoader = false; 450 // this.showLoader = false;
457 // }) 451 // })
458 // .catch(error => { 452 // .catch(error => {
459 // // console.log("err====>", err); 453 // // console.log("err====>", err);
460 // this.showLoader = false; 454 // this.showLoader = false;
461 // this.snackbar = true; 455 // this.snackbar = true;
462 // this.text = error.response.data.message; 456 // this.text = error.response.data.message;
463 // if (error.response.status === 401) { 457 // if (error.response.status === 401) {
464 // this.$router.replace({ path: "/" }); 458 // this.$router.replace({ path: "/" });
465 // this.$store.dispatch("setToken", null); 459 // this.$store.dispatch("setToken", null);
466 // this.$store.dispatch("Id", null); 460 // this.$store.dispatch("Id", null);
467 // } 461 // }
468 // }); 462 // });
469 // } 463 // }
470 }, 464 },
471 mounted() { 465 mounted() {
472 this.token = this.$store.state.token; 466 this.token = this.$store.state.token;
473 const getindustryList = countryList(); 467 const getCountryList = countryList();
474 this.countryList = getindustryList; 468 this.countryList = getCountryList;
475 // console.log("getindustryList", this.countryList); 469 // console.log("getindustryList", this.countryList);
476 // this.getExamList(); 470 // this.getExamList();
477 this.getClass(); 471 this.getClass();
478 }, 472 },
479 created() { 473 created() {
480 this.$root.$on("app:search", search => { 474 this.$root.$on("app:search", search => {
481 this.search = search; 475 this.search = search;
482 }); 476 });
483 }, 477 },
484 beforeDestroy() { 478 beforeDestroy() {
485 // dont forget to remove the listener 479 // dont forget to remove the listener
486 this.$root.$off("app:search"); 480 this.$root.$off("app:search");
487 } 481 }
488 }; 482 };
src/pages/Section/section.vue
Diff comments   View file @495e403
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 Section</v-tab> 10 >Existing Section</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 Section</v-tab> 18 >Add New Section</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 Section</h3> 34 <h3>Edit Section</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> 39 <v-container>
40 <v-layout wrap justify-center> 40 <v-layout wrap justify-center>
41 <v-flex xs12 sm9> 41 <v-flex xs12 sm9>
42 <v-form> 42 <v-form>
43 <v-layout> 43 <v-layout>
44 <v-flex xs5 sm4 class="pt-4 subheading"> 44 <v-flex xs5 sm4 class="pt-4 subheading">
45 <label class="pl-3">Class Name:</label> 45 <label class="pl-3">Class Name:</label>
46 <!-- <label class="right hidden-lg-only hidden-md-only hidden-xl-only">Class:</label> --> 46 <!-- <label class="right hidden-lg-only hidden-md-only hidden-xl-only">Class:</label> -->
47 </v-flex> 47 </v-flex>
48 <v-flex xs7 sm8> 48 <v-flex xs7 sm8>
49 <v-select 49 <v-select
50 :items="addclass" 50 :items="addclass"
51 :label="editedItem.classData.classNum" 51 :label="editedItem.classData.classNum"
52 v-model="editItem.classId" 52 v-model="editItem.classId"
53 item-text="classNum" 53 item-text="classNum"
54 item-value="_id" 54 item-value="_id"
55 name="Select Class" 55 name="Select Class"
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 xs5 sm4 class="pt-4 subheading"> 60 <v-flex xs5 sm4 class="pt-4 subheading">
61 <label>Section Name:</label> 61 <label>Section Name:</label>
62 </v-flex> 62 </v-flex>
63 <v-flex xs7 sm8> 63 <v-flex xs7 sm8>
64 <v-autocomplete 64 <v-autocomplete
65 v-model="editedItem.name" 65 v-model="editedItem.name"
66 placeholder="fill your Section Name" 66 placeholder="fill your Section Name"
67 :items="SectionName" 67 :items="SectionName"
68 ></v-autocomplete> 68 ></v-autocomplete>
69 </v-flex> 69 </v-flex>
70 </v-layout> 70 </v-layout>
71 <v-layout> 71 <v-layout>
72 <v-flex xs5 sm4 class="pt-4 subheading"> 72 <v-flex xs5 sm4 class="pt-4 subheading">
73 <label>Class Incharge:</label> 73 <label>Class Incharge:</label>
74 </v-flex> 74 </v-flex>
75 <v-flex xs7 sm8> 75 <v-flex xs7 sm8>
76 <v-select 76 <v-select
77 :items="teacherList" 77 :items="teacherList"
78 v-model="editedItem.classInchargeId" 78 v-model="editedItem.classInchargeId"
79 :label="editedItem.teacherData[0].name" 79 :label="editedItem.teacherData[0].name"
80 item-text="name" 80 item-text="name"
81 item-value="_id" 81 item-value="_id"
82 ></v-select> 82 ></v-select>
83 </v-flex> 83 </v-flex>
84 </v-layout> 84 </v-layout>
85 <v-card-actions> 85 <v-card-actions>
86 <v-btn round dark @click.native="close">Cancel</v-btn> 86 <v-btn round dark @click.native="close">Cancel</v-btn>
87 <v-spacer></v-spacer> 87 <v-spacer></v-spacer>
88 <v-btn round dark @click="save">Save</v-btn> 88 <v-btn round dark @click="save">Save</v-btn>
89 </v-card-actions> 89 </v-card-actions>
90 </v-form> 90 </v-form>
91 </v-flex> 91 </v-flex>
92 </v-layout> 92 </v-layout>
93 </v-container> 93 </v-container>
94 </v-card> 94 </v-card>
95 </v-dialog> 95 </v-dialog>
96 96
97 <!-- ****** PROFILE VIEW SECTION DATA ****** --> 97 <!-- ****** PROFILE VIEW SECTION DATA ****** -->
98 98
99 <v-dialog v-model="dialog1" max-width="600px"> 99 <v-dialog v-model="dialog1" max-width="600px">
100 <v-toolbar color="grey lighten-2"> 100 <v-toolbar color="grey lighten-2">
101 <v-spacer></v-spacer> 101 <v-spacer></v-spacer>
102 <v-toolbar-title> 102 <v-toolbar-title>
103 <h3>Section</h3> 103 <h3>Section</h3>
104 </v-toolbar-title> 104 </v-toolbar-title>
105 <v-spacer></v-spacer> 105 <v-spacer></v-spacer>
106 <v-icon @click="close1">close</v-icon> 106 <v-icon @click="close1">close</v-icon>
107 </v-toolbar> 107 </v-toolbar>
108 <v-card> 108 <v-card>
109 <v-flex align-center justify-center layout text-xs-center> 109 <v-flex align-center justify-center layout text-xs-center>
110 <v-avatar size="50px" style="position:absolute; top:20px;"> 110 <v-avatar size="50px" style="position:absolute; top:20px;">
111 <img src="/static/icon/user.png" /> 111 <img src="/static/icon/user.png" />
112 </v-avatar> 112 </v-avatar>
113 </v-flex> 113 </v-flex>
114 <v-card-text> 114 <v-card-text>
115 <v-container grid-list-md> 115 <v-container grid-list-md>
116 <v-layout wrap> 116 <v-layout wrap>
117 <v-flex> 117 <v-flex>
118 <br /> 118 <br />
119 <br /> 119 <br />
120 <v-layout> 120 <v-layout>
121 <v-flex xs7 sm6> 121 <v-flex xs7 sm6>
122 <h5 class="right my-1 hidden-xs-only hidden-sm-only"> 122 <h5 class="right my-1 hidden-xs-only hidden-sm-only">
123 <b>Class Name:</b> 123 <b>Class Name:</b>
124 </h5> 124 </h5>
125 <h5 class="right my-1 hidden-lg-only hidden-md-only hidden-xl-only"> 125 <h5 class="right my-1 hidden-lg-only hidden-md-only hidden-xl-only">
126 <b>Class:</b> 126 <b>Class:</b>
127 </h5> 127 </h5>
128 </v-flex> 128 </v-flex>
129 <v-flex sm6 xs5> 129 <v-flex sm6 xs5>
130 <h5 class="my-1">{{ editedItem.classData.classNum }}</h5> 130 <h5 class="my-1">{{ editedItem.classData.classNum }}</h5>
131 </v-flex> 131 </v-flex>
132 </v-layout> 132 </v-layout>
133 <v-layout> 133 <v-layout>
134 <v-flex xs7 sm6> 134 <v-flex xs7 sm6>
135 <h5 class="right my-1"> 135 <h5 class="right my-1">
136 <b>Section Name:</b> 136 <b>Section Name:</b>
137 </h5> 137 </h5>
138 </v-flex> 138 </v-flex>
139 <v-flex sm6 xs5> 139 <v-flex sm6 xs5>
140 <h5 class="my-1">{{ editedItem.name }}</h5> 140 <h5 class="my-1">{{ editedItem.name }}</h5>
141 </v-flex> 141 </v-flex>
142 </v-layout> 142 </v-layout>
143 <v-layout> 143 <v-layout>
144 <v-flex xs7 sm6> 144 <v-flex xs7 sm6>
145 <h5 class="right my-1"> 145 <h5 class="right my-1">
146 <b>Class Incharge:</b> 146 <b>Class Incharge:</b>
147 </h5> 147 </h5>
148 </v-flex> 148 </v-flex>
149 <v-flex sm6 xs5> 149 <v-flex sm6 xs5>
150 <h5 class="my-1">{{ editedItem.teacherData[0].name }}</h5> 150 <h5 class="my-1">{{ editedItem.teacherData[0].name }}</h5>
151 </v-flex> 151 </v-flex>
152 </v-layout> 152 </v-layout>
153 <v-layout> 153 <v-layout>
154 <v-flex xs7 sm6> 154 <v-flex xs7 sm6>
155 <h5 class="right my-1"> 155 <h5 class="right my-1">
156 <b>Session:</b> 156 <b>Session:</b>
157 </h5> 157 </h5>
158 </v-flex> 158 </v-flex>
159 <v-flex sm6 xs5> 159 <v-flex sm6 xs5>
160 <h5 class="my-1">{{ editedItem.session }}</h5> 160 <h5 class="my-1">{{ editedItem.session }}</h5>
161 </v-flex> 161 </v-flex>
162 </v-layout> 162 </v-layout>
163 </v-flex> 163 </v-flex>
164 </v-layout> 164 </v-layout>
165 </v-container> 165 </v-container>
166 </v-card-text> 166 </v-card-text>
167 </v-card> 167 </v-card>
168 </v-dialog> 168 </v-dialog>
169 169
170 <v-snackbar 170 <v-snackbar
171 :timeout="timeout" 171 :timeout="timeout"
172 :top="y === 'top'" 172 :top="y === 'top'"
173 :right="x === 'right'" 173 :right="x === 'right'"
174 :vertical="mode === 'vertical'" 174 :vertical="mode === 'vertical'"
175 v-model="snackbar" 175 v-model="snackbar"
176 color="success" 176 color="success"
177 >{{ text }}</v-snackbar> 177 >{{ text }}</v-snackbar>
178 178
179 <!-- ****** EXISTING-USERS StudentS Table ****** --> 179 <!-- ****** EXISTING-USERS StudentS Table ****** -->
180 180
181 <v-data-table 181 <v-data-table
182 :headers="headers" 182 :headers="headers"
183 :items="desserts" 183 :items="desserts"
184 :pagination.sync="pagination" 184 :pagination.sync="pagination"
185 :search="search" 185 :search="search"
186 > 186 >
187 <template slot="items" slot-scope="props"> 187 <template slot="items" slot-scope="props">
188 <td id="td" class="text-xs-center">{{ props.index + 1}}</td> 188 <td id="td" class="text-xs-center">{{ props.index + 1}}</td>
189 <td id="td" class="text-xs-center">{{ props.item.classData.classNum}}</td> 189 <td id="td" class="text-xs-center">{{ props.item.classData.classNum}}</td>
190 <td id="td" class="text-xs-center">{{ props.item.name}}</td> 190 <td id="td" class="text-xs-center">{{ props.item.name}}</td>
191 <td id="td" class="text-xs-center">{{ props.item.session}}</td> 191 <td id="td" class="text-xs-center">{{ props.item.session}}</td>
192 192
193 <td class="text-xs-center"> 193 <td class="text-xs-center">
194 <span> 194 <span>
195 <img 195 <v-tooltip top>
196 style="cursor:pointer; width:25px; height:18px; " 196 <img
197 class="mr5" 197 slot="activator"
198 @click="profile(props.item)" 198 style="cursor:pointer; width:25px; height:18px; "
199 src="/static/icon/eye1.png" 199 class="mr5"
200 /> 200 @click="profile(props.item)"
201 <img 201 src="/static/icon/eye1.png"
202 style="cursor:pointer; width:20px; height:18px; " 202 />
203 class="mr5" 203 <span>View</span>
204 @click="editItem(props.item)" 204 </v-tooltip>
205 src="/static/icon/edit1.png" 205 <v-tooltip top>
206 /> 206 <img
207 <img 207 slot="activator"
208 style="cursor:pointer; width:20px; height:20px; " 208 style="cursor:pointer; width:20px; height:18px; "
209 class="mr5" 209 class="mr5"
210 @click="deleteItem(props.item)" 210 @click="editItem(props.item)"
211 src="/static/icon/delete1.png" 211 src="/static/icon/edit1.png"
212 /> 212 />
213 <span>Edit</span>
214 </v-tooltip>
215 <v-tooltip top>
216 <img
217 slot="activator"
218 style="cursor:pointer; width:20px; height:20px; "
219 class="mr5"
220 @click="deleteItem(props.item)"
221 src="/static/icon/delete1.png"
222 />
223 <span>Delete</span>
224 </v-tooltip>
213 </span> 225 </span>
214 </td> 226 </td>
215 </template> 227 </template>
216 <v-alert 228 <v-alert
217 slot="no-results" 229 slot="no-results"
218 :value="true" 230 :value="true"
219 color="error" 231 color="error"
220 icon="warning" 232 icon="warning"
221 >Your search for "{{ search }}" found no results.</v-alert> 233 >Your search for "{{ search }}" found no results.</v-alert>
222 </v-data-table> 234 </v-data-table>
223 </v-tab-item> 235 </v-tab-item>
224 236
225 <!-- ****** ADD multiple Students ****** --> 237 <!-- ****** ADD multiple Students ****** -->
226 238
227 <v-tab-item> 239 <v-tab-item>
228 <v-container> 240 <v-container>
229 <v-snackbar 241 <v-snackbar
230 :timeout="timeout" 242 :timeout="timeout"
231 :top="y === 'top'" 243 :top="y === 'top'"
232 :right="x === 'right'" 244 :right="x === 'right'"
233 :vertical="mode === 'vertical'" 245 :vertical="mode === 'vertical'"
234 v-model="snackbar" 246 v-model="snackbar"
235 color="success" 247 color="success"
236 >{{ text }}</v-snackbar> 248 >{{ text }}</v-snackbar>
237 <v-flex xs12 sm8 offset-sm2 class="top"> 249 <v-flex xs12 sm8 offset-sm2 class="top">
238 <v-card flat> 250 <v-card flat>
239 <v-container fluid fill-height> 251 <v-container fluid fill-height>
240 <v-layout align-center> 252 <v-layout align-center>
241 <v-flex xs12 class="mt-4"> 253 <v-flex xs12 class="mt-4">
242 <v-form ref="form" v-model="valid" lazy-validation> 254 <v-form ref="form" v-model="valid" lazy-validation>
243 <v-layout> 255 <v-layout>
244 <v-flex xs4 class="pt-4 subheading"> 256 <v-flex xs4 class="pt-4 subheading">
245 <label class="right">Section Name:</label> 257 <label class="right">Section Name:</label>
246 </v-flex> 258 </v-flex>
247 <v-flex xs6 class="ml-3"> 259 <v-flex xs6 class="ml-3">
248 <v-autocomplete 260 <v-autocomplete
249 v-model="sectionData.name" 261 v-model="sectionData.name"
250 placeholder="fill your Section Name" 262 placeholder="fill your Section Name"
251 :items="SectionName" 263 :items="SectionName"
252 :rules="nameRules" 264 :rules="nameRules"
253 required 265 required
254 ></v-autocomplete> 266 ></v-autocomplete>
255 </v-flex> 267 </v-flex>
256 </v-layout> 268 </v-layout>
257 <v-layout> 269 <v-layout>
258 <v-flex xs4 class="pt-4 subheading"> 270 <v-flex xs4 class="pt-4 subheading">
259 <label class="right">Select Class:</label> 271 <label class="right">Select Class:</label>
260 </v-flex> 272 </v-flex>
261 <v-flex xs6 class="ml-3"> 273 <v-flex xs6 class="ml-3">
262 <v-select 274 <v-select
263 :items="addclass" 275 :items="addclass"
264 label="Select Class" 276 label="Select Class"
265 v-model="sectionData.classNum" 277 v-model="sectionData.classNum"
266 item-text="classNum" 278 item-text="classNum"
267 item-value="_id" 279 item-value="_id"
268 name="Select Class" 280 name="Select Class"
269 :rules="classRules" 281 :rules="classRules"
270 required 282 required
271 ></v-select> 283 ></v-select>
272 </v-flex> 284 </v-flex>
273 </v-layout> 285 </v-layout>
274 <v-layout> 286 <v-layout>
275 <v-flex xs4 class="pt-4 subheading"> 287 <v-flex xs4 class="pt-4 subheading">
276 <label class="right">Select Incharge:</label> 288 <label class="right">Select Incharge:</label>
277 </v-flex> 289 </v-flex>
278 <v-flex xs6 class="ml-3"> 290 <v-flex xs6 class="ml-3">
279 <v-select 291 <v-select
280 :items="teacherList" 292 :items="teacherList"
281 label="Select Incharge" 293 label="Select Incharge"
282 v-model="sectionData.sectionId" 294 v-model="sectionData.sectionId"
283 item-text="name" 295 item-text="name"
284 item-value="_id" 296 item-value="_id"
285 name="Select Class" 297 name="Select Class"
286 :rules="inchargeRules" 298 :rules="inchargeRules"
287 required 299 required
288 ></v-select> 300 ></v-select>
289 </v-flex> 301 </v-flex>
290 </v-layout> 302 </v-layout>
291 <v-layout> 303 <v-layout>
292 <v-flex xs4 class="pt-4 subheading"> 304 <v-flex xs4 class="pt-4 subheading">
293 <label class="right">Session:</label> 305 <label class="right">Session:</label>
294 </v-flex> 306 </v-flex>
295 <v-flex xs6 class="ml-3"> 307 <v-flex xs6 class="ml-3">
296 <v-text-field 308 <v-text-field
297 v-model="sectionData.session" 309 v-model="sectionData.session"
298 placeholder="fill your Session" 310 placeholder="fill your Session"
299 name="name" 311 name="name"
300 type="text" 312 type="text"
301 :rules="sessionRules" 313 :rules="sessionRules"
302 required 314 required
303 ></v-text-field> 315 ></v-text-field>
304 </v-flex> 316 </v-flex>
305 </v-layout> 317 </v-layout>
306 <v-layout> 318 <v-layout>
307 <v-flex xs12 sm9 offset-sm2> 319 <v-flex xs12 sm9 offset-sm2>
308 <v-card-actions> 320 <v-card-actions>
309 <v-btn @click="clear" round dark>clear</v-btn> 321 <v-btn @click="clear" round dark>clear</v-btn>
310 <v-spacer></v-spacer> 322 <v-spacer></v-spacer>
311 <v-btn @click="submit" round dark :loading="loading">Add</v-btn> 323 <v-btn @click="submit" round dark :loading="loading">Add</v-btn>
312 </v-card-actions> 324 </v-card-actions>
313 </v-flex> 325 </v-flex>
314 </v-layout> 326 </v-layout>
315 </v-form> 327 </v-form>
316 </v-flex> 328 </v-flex>
317 </v-layout> 329 </v-layout>
318 </v-container> 330 </v-container>
319 </v-card> 331 </v-card>
320 </v-flex> 332 </v-flex>
321 </v-container> 333 </v-container>
322 </v-tab-item> 334 </v-tab-item>
323 </v-tabs> 335 </v-tabs>
324 <div class="loader" v-if="showLoader"> 336 <div class="loader" v-if="showLoader">
325 <v-progress-circular indeterminate color="white"></v-progress-circular> 337 <v-progress-circular indeterminate color="white"></v-progress-circular>
326 </div> 338 </div>
327 </v-app> 339 </v-app>
328 </template> 340 </template>
329 341
330 <script> 342 <script>
331 import http from "@/Services/http.js"; 343 import http from "@/Services/http.js";
332 import Util from "@/util"; 344 import Util from "@/util";
333 345
334 export default { 346 export default {
335 data: () => ({ 347 data: () => ({
336 snackbar: false, 348 snackbar: false,
337 y: "top", 349 y: "top",
338 x: "right", 350 x: "right",
339 mode: "", 351 mode: "",
340 timeout: 3000, 352 timeout: 3000,
341 text: "", 353 text: "",
342 showLoader: false, 354 showLoader: false,
343 loading: false, 355 loading: false,
344 date: null, 356 date: null,
345 search: "", 357 search: "",
346 dialog: false, 358 dialog: false,
347 dialog1: false, 359 dialog1: false,
348 valid: true, 360 valid: true,
349 validEdit: true, 361 validEdit: true,
350 isActive: true, 362 isActive: true,
351 newActive: false, 363 newActive: false,
352 details: [], 364 details: [],
353 AddUsercredentials: {}, 365 AddUsercredentials: {},
354 pagination: { 366 pagination: {
355 rowsPerPage: 15 367 rowsPerPage: 15
356 }, 368 },
357 nameRules: [v => !!v || " Section Name is required"], 369 nameRules: [v => !!v || " Section Name is required"],
358 classRules: [v => !!v || " Class Name is required"], 370 classRules: [v => !!v || " Class Name is required"],
359 sessionRules: [v => !!v || " Session is required"], 371 sessionRules: [v => !!v || " Session is required"],
360 inchargeRules: [v => !!v || " Incharge Name is required"], 372 inchargeRules: [v => !!v || " Incharge Name is required"],
361 SectionName: ["A", "B", "C", "D", "E", "F"], 373 SectionName: ["A", "B", "C", "D", "E", "F"],
362 headers: [ 374 headers: [
363 { 375 {
364 text: "No", 376 text: "No",
365 align: "center", 377 align: "center",
366 sortable: false, 378 sortable: false,
367 value: "No" 379 value: "No"
368 }, 380 },
369 { 381 {
370 text: "Class Name", 382 text: "Class Name",
371 value: "classData.classNum", 383 value: "classData.classNum",
372 sortable: false, 384 sortable: false,
373 align: "center" 385 align: "center"
374 }, 386 },
375 { text: "Section Name", value: "name", sortable: false, align: "center" }, 387 { text: "Section Name", value: "name", sortable: false, align: "center" },
376 { text: "Session", value: "session", sortable: false, align: "center" }, 388 { text: "Session", value: "session", sortable: false, align: "center" },
377 { text: "Action", value: "", sortable: false, align: "center" } 389 { text: "Action", value: "", sortable: false, align: "center" }
378 ], 390 ],
379 desserts: [], 391 desserts: [],
380 addclass: [], 392 addclass: [],
381 teacherList: [], 393 teacherList: [],
382 select: "", 394 select: "",
383 selectId: "", 395 selectId: "",
384 token: "", 396 token: "",
385 editedIndex: -1, 397 editedIndex: -1,
386 editedItem: { 398 editedItem: {
387 classData: { 399 classData: {
388 classNum: "" 400 classNum: ""
389 }, 401 },
390 classId: "", 402 classId: "",
391 classInchargeId: "", 403 classInchargeId: "",
392 teacherData: [ 404 teacherData: [
393 { 405 {
394 name: "" 406 name: ""
395 } 407 }
396 ], 408 ],
397 name: "", 409 name: "",
398 session: new Date().getFullYear() 410 session: new Date().getFullYear()
399 }, 411 },
400 sectionData: { 412 sectionData: {
401 session: new Date().getFullYear() 413 session: new Date().getFullYear()
402 } 414 }
403 }), 415 }),
404 methods: { 416 methods: {
405 getSectionList() { 417 getSectionList() {
406 this.showLoader = true; 418 this.showLoader = true;
407 http() 419 http()
408 .get("/getAllSections", { 420 .get("/getAllSections", {
409 headers: { Authorization: "Bearer " + this.token } 421 headers: { Authorization: "Bearer " + this.token }
410 }) 422 })
411 .then(response => { 423 .then(response => {
412 this.desserts = response.data.data; 424 this.desserts = response.data.data;
413 this.showLoader = false; 425 this.showLoader = false;
414 // console.log("getAllSections=====>",response.data.data) 426 // console.log("getAllSections=====>",response.data.data)
415 }) 427 })
416 .catch(err => { 428 .catch(err => {
417 // console.log("err====>", err); 429 // console.log("err====>", err);
418 this.showLoader = false; 430 this.showLoader = false;
419 if (error.response.status === 401) { 431 if (error.response.status === 401) {
420 this.$router.replace({ path: "/" }); 432 this.$router.replace({ path: "/" });
421 this.$store.dispatch("setToken", null); 433 this.$store.dispatch("setToken", null);
422 this.$store.dispatch("Id", null); 434 this.$store.dispatch("Id", null);
423 } 435 }
424 }); 436 });
425 }, 437 },
426 editItem(item) { 438 editItem(item) {
427 this.editedIndex = this.desserts.indexOf(item); 439 this.editedIndex = this.desserts.indexOf(item);
428 this.editedItem = Object.assign({}, item); 440 this.editedItem = Object.assign({}, item);
429 console.log(this.editedItem); 441 console.log(this.editedItem);
430 this.dialog = true; 442 this.dialog = true;
431 }, 443 },
432 profile(item) { 444 profile(item) {
433 this.editedIndex = this.desserts.indexOf(item); 445 this.editedIndex = this.desserts.indexOf(item);
434 this.editedItem = Object.assign({}, item); 446 this.editedItem = Object.assign({}, item);
435 this.dialog1 = true; 447 this.dialog1 = true;
436 }, 448 },
437 deleteItem(item) { 449 deleteItem(item) {
438 let deleteStudent = { 450 let deleteStudent = {
439 sectionId: item._id 451 sectionId: item._id
440 }; 452 };
441 http() 453 http()
442 .delete( 454 .delete(
443 "/deleteSection", 455 "/deleteSection",
444 confirm("Are you sure you want to delete this?") && { 456 confirm("Are you sure you want to delete this?") && {
445 params: deleteStudent 457 params: deleteStudent
446 } 458 }
447 ) 459 )
448 .then(response => { 460 .then(response => {
449 if ((this.snackbar = true)) { 461 if ((this.snackbar = true)) {
450 this.text = "Successfully delete Existing Section"; 462 this.text = "Successfully delete Existing Section";
451 } 463 }
452 this.getSectionList(); 464 this.getSectionList();
453 }) 465 })
454 .catch(error => { 466 .catch(error => {
455 // console.log(error); 467 // console.log(error);
456 }); 468 });
457 }, 469 },
458 activeTab(type) { 470 activeTab(type) {
459 switch (type) { 471 switch (type) {
460 case "existing": 472 case "existing":
461 this.newActive = false; 473 this.newActive = false;
462 this.isActive = true; 474 this.isActive = true;
463 break; 475 break;
464 476
465 default: 477 default:
466 this.newActive = true; 478 this.newActive = true;
467 this.isActive = false; 479 this.isActive = false;
468 break; 480 break;
469 } 481 }
470 }, 482 },
471 close() { 483 close() {
472 this.dialog = false; 484 this.dialog = false;
473 setTimeout(() => { 485 setTimeout(() => {
474 this.editedItem = Object.assign({}, this.defaultItem); 486 this.editedItem = Object.assign({}, this.defaultItem);
475 this.editedIndex = -1; 487 this.editedIndex = -1;
476 }, 300); 488 }, 300);
477 }, 489 },
478 close1() { 490 close1() {
479 this.dialog1 = false; 491 this.dialog1 = false;
480 }, 492 },
481 close2() { 493 close2() {
482 this.dialog2 = false; 494 this.dialog2 = false;
483 }, 495 },
484 submit() { 496 submit() {
485 if (this.$refs.form.validate()) { 497 if (this.$refs.form.validate()) {
486 let addSection = { 498 let addSection = {
487 name: this.sectionData.name, 499 name: this.sectionData.name,
488 classId: this.sectionData.classNum, 500 classId: this.sectionData.classNum,
489 session: this.sectionData.session, 501 session: this.sectionData.session,
490 classInchargeId: this.sectionData._id 502 classInchargeId: this.sectionData._id
491 }; 503 };
492 this.loading = true; 504 this.loading = true;
493 http() 505 http()
494 .post("/createSection", addSection) 506 .post("/createSection", addSection)
495 .then(response => { 507 .then(response => {
496 console.log(response); 508 console.log(response);
497 this.getSectionList(); 509 this.getSectionList();
498 if ((this.snackbar = true)) { 510 if ((this.snackbar = true)) {
499 this.text = "New Section added successfully"; 511 this.text = "New Section added successfully";
500 } 512 }
501 513
502 this.clear(); 514 this.clear();
503 this.loading = false; 515 this.loading = false;
504 }) 516 })
505 .catch(error => { 517 .catch(error => {
506 // console.log(error); 518 // console.log(error);
507 if ((this.snackbar = true)) { 519 if ((this.snackbar = true)) {
508 this.text = error.response.data.message; 520 this.text = error.response.data.message;
509 } 521 }
510 this.loading = false; 522 this.loading = false;
511 }); 523 });
512 } 524 }
513 }, 525 },
514 clear() { 526 clear() {
515 this.$refs.form.reset(); 527 this.$refs.form.reset();
516 }, 528 },
517 save() { 529 save() {
518 this.editedItem.sectionId = this.editedItem._id; 530 this.editedItem.sectionId = this.editedItem._id;
519 http() 531 http()
520 .put("/updateSection", this.editedItem) 532 .put("/updateSection", this.editedItem)
521 .then(response => { 533 .then(response => {
522 // console.log("editStudent",editStudent); 534 // console.log("editStudent",editStudent);
523 if ((this.snackbar = true)) { 535 if ((this.snackbar = true)) {
524 this.text = "Successfully Edit Existing Section"; 536 this.text = "Successfully Edit Existing Section";
525 } 537 }
526 this.getSectionList(); 538 this.getSectionList();
527 this.close(); 539 this.close();
528 }) 540 })
529 .catch(error => { 541 .catch(error => {
530 this.text = error.response.data.message; 542 this.text = error.response.data.message;
531 // console.log(error); 543 // console.log(error);
532 }); 544 });
533 }, 545 },
534 getAllTeacher() { 546 getAllTeacher() {
535 http() 547 http()
536 .get("/getTeachersList", { 548 .get("/getTeachersList", {
537 headers: { Authorization: "Bearer " + this.token } 549 headers: { Authorization: "Bearer " + this.token }
538 }) 550 })
539 .then(response => { 551 .then(response => {
540 this.teacherList = response.data.data; 552 this.teacherList = response.data.data;
541 this.showLoader = false; 553 this.showLoader = false;
542 }) 554 })
543 .catch(err => { 555 .catch(err => {
544 // console.log("err====>", err); 556 // console.log("err====>", err);
545 this.showLoader = false; 557 this.showLoader = false;
546 }); 558 });
547 }, 559 },
548 getAllClasses() { 560 getAllClasses() {
549 http() 561 http()
550 .get("/getClassesList", { 562 .get("/getClassesList", {
551 headers: { Authorization: "Bearer " + this.token } 563 headers: { Authorization: "Bearer " + this.token }
552 }) 564 })
553 .then(response => { 565 .then(response => {
554 this.addclass = response.data.data; 566 this.addclass = response.data.data;
555 }) 567 })
556 .catch(err => { 568 .catch(err => {
557 // console.log("err====>", err); 569 // console.log("err====>", err);
558 // this.$router.replace({ path: "/" }); 570 // this.$router.replace({ path: "/" });
559 }); 571 });
560 } 572 }
561 }, 573 },
562 mounted() { 574 mounted() {
563 this.token = this.$store.state.token; 575 this.token = this.$store.state.token;
564 this.getSectionList(); 576 this.getSectionList();
565 this.getAllClasses(); 577 this.getAllClasses();
566 this.getAllTeacher(); 578 this.getAllTeacher();
567 }, 579 },
568 created() { 580 created() {
569 this.$root.$on("app:search", search => { 581 this.$root.$on("app:search", search => {
570 this.search = search; 582 this.search = search;
571 }); 583 });
572 }, 584 },
573 beforeDestroy() { 585 beforeDestroy() {
574 // dont forget to remove the listener 586 // dont forget to remove the listener
575 this.$root.$off("app:search"); 587 this.$root.$off("app:search");
576 } 588 }
577 }; 589 };
578 </script> 590 </script>
579 591
580 <style scoped> 592 <style scoped>
581 .active { 593 .active {
582 background-color: gray; 594 background-color: gray;
583 color: white !important; 595 color: white !important;
584 } 596 }
585 .activebtn { 597 .activebtn {
586 color: black !important; 598 color: black !important;
587 } 599 }
588 </style> 600 </style>
src/pages/Students/students.vue
Diff comments   View file @495e403
1 <template> 1 <template>
2 <div> 2 <div>
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 Students</v-tab> 10 >Existing Students</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 Students</v-tab> 18 >Add New Students</v-tab>
19 19
20 <!-- ****** EDITS STUDENTS DETAILS ****** --> 20 <!-- ****** EDITS STUDENTS 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="1500px" scrollable> 31 <v-dialog v-model="dialog" max-width="1500px" scrollable>
32 <v-card flat> 32 <v-card flat>
33 <v-toolbar color="grey lighten-2" flat> 33 <v-toolbar color="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 Student Profile</h3> 36 <h3>Edit Student Profile</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: 586px;"> 40 <v-card-text style="height: 586px;">
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 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 <v-avatar size="160px"> 48 <v-avatar size="160px">
49 <img 49 <img
50 src="/static/icon/user.png" 50 src="/static/icon/user.png"
51 v-if="!editedItem.profilePicUrl && !imageUrl" 51 v-if="!editedItem.profilePicUrl && !imageUrl"
52 /> 52 />
53 <img 53 <img
54 :src="editedItem.profilePicUrl" 54 :src="editedItem.profilePicUrl"
55 v-else-if="editedItem.profilePicUrl && !imageUrl" 55 v-else-if="editedItem.profilePicUrl && !imageUrl"
56 /> 56 />
57 <img 57 <img
58 v-if="imageUrl" 58 v-if="imageUrl"
59 :src="imageUrl" 59 :src="imageUrl"
60 height="150" 60 height="150"
61 style="border-radius:50%; width:200px" 61 style="border-radius:50%; width:200px"
62 /> 62 />
63 </v-avatar> 63 </v-avatar>
64 <input 64 <input
65 type="file" 65 type="file"
66 style="display: none" 66 style="display: none"
67 ref="image" 67 ref="image"
68 accept="image/*" 68 accept="image/*"
69 @change="onFilePicked" 69 @change="onFilePicked"
70 /> 70 />
71 </v-flex> 71 </v-flex>
72 </v-layout> 72 </v-layout>
73 <v-layout> 73 <v-layout>
74 <v-flex xs12 sm4> 74 <v-flex xs12 sm4>
75 <v-layout> 75 <v-layout>
76 <v-flex xs4 class="pt-4 subheading"> 76 <v-flex xs4 class="pt-4 subheading">
77 <label class="right hidden-xs-only hidden-sm-only">Select Class:</label> 77 <label class="right hidden-xs-only hidden-sm-only">Select Class:</label>
78 <label class="right hidden-lg-only hidden-md-only hidden-xl-only">Class:</label> 78 <label class="right hidden-lg-only hidden-md-only hidden-xl-only">Class:</label>
79 </v-flex> 79 </v-flex>
80 <v-flex xs8 class="ml-3"> 80 <v-flex xs8 class="ml-3">
81 <v-select 81 <v-select
82 :items="addclass" 82 :items="addclass"
83 label="Select Class" 83 label="Select Class"
84 v-model="editedItem.select" 84 v-model="editedItem.select"
85 item-text="classNum" 85 item-text="classNum"
86 item-value="_id" 86 item-value="_id"
87 name="Select Class" 87 name="Select Class"
88 @change="getSections(editedItem.select)" 88 @change="getSections(editedItem.select)"
89 required 89 required
90 ></v-select> 90 ></v-select>
91 </v-flex> 91 </v-flex>
92 </v-layout> 92 </v-layout>
93 </v-flex> 93 </v-flex>
94 <v-flex xs12 sm4> 94 <v-flex xs12 sm4>
95 <v-layout> 95 <v-layout>
96 <v-flex xs4 class="pt-4 subheading"> 96 <v-flex xs4 class="pt-4 subheading">
97 <label class="right hidden-xs-only hidden-sm-only">Select Section:</label> 97 <label class="right hidden-xs-only hidden-sm-only">Select Section:</label>
98 <label class="right hidden-lg-only hidden-md-only hidden-xl-only">Section:</label> 98 <label class="right hidden-lg-only hidden-md-only hidden-xl-only">Section:</label>
99 </v-flex> 99 </v-flex>
100 <v-flex xs8 class="ml-3"> 100 <v-flex xs8 class="ml-3">
101 <v-select 101 <v-select
102 :items="addSection" 102 :items="addSection"
103 label="Select Section" 103 label="Select Section"
104 v-model="editedItem.selectSection" 104 v-model="editedItem.selectSection"
105 item-text="name" 105 item-text="name"
106 item-value="_id" 106 item-value="_id"
107 name="Select Section" 107 name="Select Section"
108 required 108 required
109 ></v-select> 109 ></v-select>
110 </v-flex> 110 </v-flex>
111 </v-layout> 111 </v-layout>
112 </v-flex> 112 </v-flex>
113 <v-flex xs12 sm4> 113 <v-flex xs12 sm4>
114 <v-layout> 114 <v-layout>
115 <v-flex xs4 class="pt-4 subheading"> 115 <v-flex xs4 class="pt-4 subheading">
116 <label class="right hidden-xs-only hidden-sm-only">Full Name:</label> 116 <label class="right hidden-xs-only hidden-sm-only">Full Name:</label>
117 <label class="right hidden-lg-only hidden-md-only hidden-xl-only">Name:</label> 117 <label class="right hidden-lg-only hidden-md-only hidden-xl-only">Name:</label>
118 </v-flex> 118 </v-flex>
119 <v-flex xs8 class="ml-3"> 119 <v-flex xs8 class="ml-3">
120 <v-text-field 120 <v-text-field
121 v-model="editedItem.name" 121 v-model="editedItem.name"
122 placeholder="fill your full Name" 122 placeholder="fill your full Name"
123 name="name" 123 name="name"
124 type="text" 124 type="text"
125 required 125 required
126 ></v-text-field> 126 ></v-text-field>
127 </v-flex> 127 </v-flex>
128 </v-layout> 128 </v-layout>
129 </v-flex> 129 </v-flex>
130 </v-layout> 130 </v-layout>
131 <v-layout> 131 <v-layout>
132 <v-flex xs12 sm4> 132 <v-flex xs12 sm4>
133 <v-layout> 133 <v-layout>
134 <v-flex xs4 class="pt-4 subheading"> 134 <v-flex xs4 class="pt-4 subheading">
135 <label class="right">Email ID:</label> 135 <label class="right">Email ID:</label>
136 </v-flex> 136 </v-flex>
137 <v-flex xs8 class="ml-3"> 137 <v-flex xs8 class="ml-3">
138 <v-text-field 138 <v-text-field
139 placeholder="fill your email" 139 placeholder="fill your email"
140 v-model="editedItem.email" 140 v-model="editedItem.email"
141 type="text" 141 type="text"
142 name="email" 142 name="email"
143 required 143 required
144 ></v-text-field> 144 ></v-text-field>
145 </v-flex> 145 </v-flex>
146 </v-layout> 146 </v-layout>
147 </v-flex> 147 </v-flex>
148 <v-flex xs12 sm4> 148 <v-flex xs12 sm4>
149 <v-layout> 149 <v-layout>
150 <v-flex xs4 class="pt-4 subheading"> 150 <v-flex xs4 class="pt-4 subheading">
151 <label class="right hidden-sm-only hidden-xs-only">Date of Birth:</label> 151 <label class="right hidden-sm-only hidden-xs-only">Date of Birth:</label>
152 <label class="right hidden-lg-only hidden-xl-only hidden-md-only">D.O.B:</label> 152 <label class="right hidden-lg-only hidden-xl-only hidden-md-only">D.O.B:</label>
153 </v-flex> 153 </v-flex>
154 <v-flex xs8 class="ml-3"> 154 <v-flex xs8 class="ml-3">
155 <v-menu 155 <v-menu
156 ref="menu" 156 ref="menu"
157 :close-on-content-click="false" 157 :close-on-content-click="false"
158 v-model="menu1" 158 v-model="menu1"
159 :nudge-right="40" 159 :nudge-right="40"
160 lazy 160 lazy
161 transition="scale-transition" 161 transition="scale-transition"
162 offset-y 162 offset-y
163 full-width 163 full-width
164 min-width="290px" 164 min-width="290px"
165 > 165 >
166 <v-text-field 166 <v-text-field
167 slot="activator" 167 slot="activator"
168 v-model="editedItem.dob" 168 v-model="editedItem.dob"
169 placeholder="Select Dob" 169 placeholder="Select Dob"
170 ></v-text-field> 170 ></v-text-field>
171 <v-date-picker 171 <v-date-picker
172 ref="picker" 172 ref="picker"
173 v-model="editedItem.dob" 173 v-model="editedItem.dob"
174 :max="new Date().toISOString().substr(0, 10)" 174 :max="new Date().toISOString().substr(0, 10)"
175 min="1950-01-01" 175 min="1950-01-01"
176 @input="menu1 = false" 176 @input="menu1 = false"
177 ></v-date-picker> 177 ></v-date-picker>
178 </v-menu> 178 </v-menu>
179 </v-flex> 179 </v-flex>
180 </v-layout> 180 </v-layout>
181 </v-flex> 181 </v-flex>
182 <v-flex xs12 sm4> 182 <v-flex xs12 sm4>
183 <v-layout> 183 <v-layout>
184 <v-flex xs4 class="pt-4 subheading"> 184 <v-flex xs4 class="pt-4 subheading">
185 <label class="right">City:</label> 185 <label class="right">City:</label>
186 </v-flex> 186 </v-flex>
187 <v-flex xs8 class="ml-3"> 187 <v-flex xs8 class="ml-3">
188 <v-text-field 188 <v-text-field
189 v-model="editedItem.city" 189 v-model="editedItem.city"
190 placeholder="fill your City Name" 190 placeholder="fill your City Name"
191 name="City" 191 name="City"
192 type="text" 192 type="text"
193 required 193 required
194 ></v-text-field> 194 ></v-text-field>
195 </v-flex> 195 </v-flex>
196 </v-layout> 196 </v-layout>
197 </v-flex> 197 </v-flex>
198 </v-layout> 198 </v-layout>
199 <v-layout> 199 <v-layout>
200 <v-flex xs12 sm4> 200 <v-flex xs12 sm4>
201 <v-layout> 201 <v-layout>
202 <v-flex xs4 class="pt-4 subheading"> 202 <v-flex xs4 class="pt-4 subheading">
203 <label class="right hidden-xs-only hidden-sm-only">Blood Group:</label> 203 <label class="right hidden-xs-only hidden-sm-only">Blood Group:</label>
204 <label class="right hidden-lg-only hidden-md-only hidden-xl-only">Blood:</label> 204 <label class="right hidden-lg-only hidden-md-only hidden-xl-only">Blood:</label>
205 </v-flex> 205 </v-flex>
206 <v-flex xs8 class="ml-3"> 206 <v-flex xs8 class="ml-3">
207 <v-text-field 207 <v-text-field
208 v-model="editedItem.bloodGroup" 208 v-model="editedItem.bloodGroup"
209 placeholder="fill your BloodGroup" 209 placeholder="fill your BloodGroup"
210 name="state" 210 name="state"
211 type="text" 211 type="text"
212 required 212 required
213 ></v-text-field> 213 ></v-text-field>
214 </v-flex> 214 </v-flex>
215 </v-layout> 215 </v-layout>
216 </v-flex> 216 </v-flex>
217 <v-flex xs12 sm4> 217 <v-flex xs12 sm4>
218 <v-layout> 218 <v-layout>
219 <v-flex xs4 class="pt-4 subheading"> 219 <v-flex xs4 class="pt-4 subheading">
220 <label class="right">Allergies:</label> 220 <label class="right">Allergies:</label>
221 </v-flex> 221 </v-flex>
222 <v-flex xs8 class="ml-3"> 222 <v-flex xs8 class="ml-3">
223 <v-text-field 223 <v-text-field
224 v-model="editedItem.allergies" 224 v-model="editedItem.allergies"
225 placeholder="fill your Allergies" 225 placeholder="fill your Allergies"
226 name="pincode" 226 name="pincode"
227 required 227 required
228 ></v-text-field> 228 ></v-text-field>
229 </v-flex> 229 </v-flex>
230 </v-layout> 230 </v-layout>
231 </v-flex> 231 </v-flex>
232 <v-flex xs12 sm4> 232 <v-flex xs12 sm4>
233 <v-layout> 233 <v-layout>
234 <v-flex xs4 class="pt-4 subheading"> 234 <v-flex xs4 class="pt-4 subheading">
235 <label class="right">Medical Notes:</label> 235 <label class="right">Medical Notes:</label>
236 </v-flex> 236 </v-flex>
237 <v-flex xs8 class="ml-3"> 237 <v-flex xs8 class="ml-3">
238 <v-text-field 238 <v-text-field
239 v-model="editedItem.medicalNotes" 239 v-model="editedItem.medicalNotes"
240 placeholder="fill your medicalNotes" 240 placeholder="fill your medicalNotes"
241 name="mobileNo" 241 name="mobileNo"
242 required 242 required
243 ></v-text-field> 243 ></v-text-field>
244 </v-flex> 244 </v-flex>
245 </v-layout> 245 </v-layout>
246 </v-flex> 246 </v-flex>
247 </v-layout> 247 </v-layout>
248 <v-layout> 248 <v-layout>
249 <v-flex xs12 sm4> 249 <v-flex xs12 sm4>
250 <v-layout> 250 <v-layout>
251 <v-flex xs4 class="pt-4 subheading"> 251 <v-flex xs4 class="pt-4 subheading">
252 <label class="right">Height:</label> 252 <label class="right">Height:</label>
253 </v-flex> 253 </v-flex>
254 <v-flex xs8 class="ml-3"> 254 <v-flex xs8 class="ml-3">
255 <v-text-field 255 <v-text-field
256 v-model="editedItem.height" 256 v-model="editedItem.height"
257 placeholder="fill your Height" 257 placeholder="fill your Height"
258 name="state" 258 name="state"
259 type="text" 259 type="text"
260 required 260 required
261 ></v-text-field> 261 ></v-text-field>
262 </v-flex> 262 </v-flex>
263 </v-layout> 263 </v-layout>
264 </v-flex> 264 </v-flex>
265 <v-flex xs12 sm4> 265 <v-flex xs12 sm4>
266 <v-layout> 266 <v-layout>
267 <v-flex xs4 class="pt-4 subheading"> 267 <v-flex xs4 class="pt-4 subheading">
268 <label class="right">Weight:</label> 268 <label class="right">Weight:</label>
269 </v-flex> 269 </v-flex>
270 <v-flex xs8 class="ml-3"> 270 <v-flex xs8 class="ml-3">
271 <v-text-field 271 <v-text-field
272 v-model="editedItem.weight" 272 v-model="editedItem.weight"
273 placeholder="fill your Weight" 273 placeholder="fill your Weight"
274 name="pincode" 274 name="pincode"
275 required 275 required
276 ></v-text-field> 276 ></v-text-field>
277 </v-flex> 277 </v-flex>
278 </v-layout> 278 </v-layout>
279 </v-flex> 279 </v-flex>
280 <v-flex xs12 sm4> 280 <v-flex xs12 sm4>
281 <v-layout> 281 <v-layout>
282 <v-flex xs4 class="pt-4 subheading"> 282 <v-flex xs4 class="pt-4 subheading">
283 <label class="right hidden-xs-only hidden-sm-only">Uplaod Image:</label> 283 <label class="right hidden-xs-only hidden-sm-only">Uplaod Image:</label>
284 <label class="right hidden-lg-only hidden-md-only hidden-xl-only">Uplaod :</label> 284 <label class="right hidden-lg-only hidden-md-only hidden-xl-only">Uplaod :</label>
285 </v-flex> 285 </v-flex>
286 <v-flex xs8 class="ml-3"> 286 <v-flex xs8 class="ml-3">
287 <v-text-field 287 <v-text-field
288 label="Select Image" 288 label="Select Image"
289 @click="pickFile" 289 @click="pickFile"
290 v-model="imageName" 290 v-model="imageName"
291 append-icon="attach_file" 291 append-icon="attach_file"
292 ></v-text-field> 292 ></v-text-field>
293 </v-flex> 293 </v-flex>
294 </v-layout> 294 </v-layout>
295 </v-flex> 295 </v-flex>
296 </v-layout> 296 </v-layout>
297 <v-layout> 297 <v-layout>
298 <v-flex xs12 sm4> 298 <v-flex xs12 sm4>
299 <v-layout> 299 <v-layout>
300 <v-flex xs4 class="pt-4 subheading"> 300 <v-flex xs4 class="pt-4 subheading">
301 <label class="right">State:</label> 301 <label class="right">State:</label>
302 </v-flex> 302 </v-flex>
303 <v-flex xs8 class="ml-3"> 303 <v-flex xs8 class="ml-3">
304 <v-text-field 304 <v-text-field
305 v-model="editedItem.state" 305 v-model="editedItem.state"
306 placeholder="fill your State Name" 306 placeholder="fill your State Name"
307 name="state" 307 name="state"
308 type="text" 308 type="text"
309 required 309 required
310 ></v-text-field> 310 ></v-text-field>
311 </v-flex> 311 </v-flex>
312 </v-layout> 312 </v-layout>
313 </v-flex> 313 </v-flex>
314 <v-flex xs12 sm4> 314 <v-flex xs12 sm4>
315 <v-layout> 315 <v-layout>
316 <v-flex xs4 class="pt-4 subheading"> 316 <v-flex xs4 class="pt-4 subheading">
317 <label class="right">Pincode:</label> 317 <label class="right">Pincode:</label>
318 </v-flex> 318 </v-flex>
319 <v-flex xs8 class="ml-3"> 319 <v-flex xs8 class="ml-3">
320 <v-text-field 320 <v-text-field
321 v-model="editedItem.pincode" 321 v-model="editedItem.pincode"
322 placeholder="fill your pincode" 322 placeholder="fill your pincode"
323 name="pincode" 323 name="pincode"
324 type="number" 324 type="number"
325 required 325 required
326 ></v-text-field> 326 ></v-text-field>
327 </v-flex> 327 </v-flex>
328 </v-layout> 328 </v-layout>
329 </v-flex> 329 </v-flex>
330 <v-flex xs12 sm4> 330 <v-flex xs12 sm4>
331 <v-layout> 331 <v-layout>
332 <v-flex xs4 class="pt-4 subheading"> 332 <v-flex xs4 class="pt-4 subheading">
333 <label class="right hidden-xs-only hidden-sm-only">Mobile No:</label> 333 <label class="right hidden-xs-only hidden-sm-only">Mobile No:</label>
334 <label class="right hidden-lg-only hidden-md-only hidden-xl-only">Mobile:</label> 334 <label class="right hidden-lg-only hidden-md-only hidden-xl-only">Mobile:</label>
335 </v-flex> 335 </v-flex>
336 <v-flex xs8 class="ml-3"> 336 <v-flex xs8 class="ml-3">
337 <v-text-field 337 <v-text-field
338 v-model="editedItem.mobile" 338 v-model="editedItem.mobile"
339 placeholder="fill your MobileNo" 339 placeholder="fill your MobileNo"
340 name="mobileNo" 340 name="mobileNo"
341 type="number" 341 type="number"
342 required 342 required
343 ></v-text-field> 343 ></v-text-field>
344 </v-flex> 344 </v-flex>
345 </v-layout> 345 </v-layout>
346 </v-flex> 346 </v-flex>
347 </v-layout> 347 </v-layout>
348 <v-layout> 348 <v-layout>
349 <v-flex xs12 sm4> 349 <v-flex xs12 sm4>
350 <v-layout> 350 <v-layout>
351 <v-flex xs4 class="pt-4 subheading"> 351 <v-flex xs4 class="pt-4 subheading">
352 <label class="right hidden-xs-only hidden-sm-only">Select Country:</label> 352 <label class="right hidden-xs-only hidden-sm-only">Select Country:</label>
353 <label class="right hidden-lg-only hidden-md-only hidden-xl-only">Country:</label> 353 <label class="right hidden-lg-only hidden-md-only hidden-xl-only">Country:</label>
354 </v-flex> 354 </v-flex>
355 <v-flex xs8 class="ml-3"> 355 <v-flex xs8 class="ml-3">
356 <v-autocomplete 356 <v-autocomplete
357 v-model="editedItem.country" 357 v-model="editedItem.country"
358 :items="countries" 358 :items="countries"
359 placeholder="Select Country Name" 359 placeholder="Select Country Name"
360 required 360 required
361 ></v-autocomplete> 361 ></v-autocomplete>
362 </v-flex> 362 </v-flex>
363 </v-layout> 363 </v-layout>
364 </v-flex> 364 </v-flex>
365 <v-flex xs12 sm4> 365 <v-flex xs12 sm4>
366 <v-layout> 366 <v-layout>
367 <v-flex xs4 class="pt-4 subheading"> 367 <v-flex xs4 class="pt-4 subheading">
368 <label class="right">Gender:</label> 368 <label class="right">Gender:</label>
369 </v-flex> 369 </v-flex>
370 <v-flex xs8 class="ml-3"> 370 <v-flex xs8 class="ml-3">
371 <v-select 371 <v-select
372 :items="gender" 372 :items="gender"
373 v-model="editedItem.gender" 373 v-model="editedItem.gender"
374 placeholder="Select Gender" 374 placeholder="Select Gender"
375 required 375 required
376 ></v-select> 376 ></v-select>
377 </v-flex> 377 </v-flex>
378 </v-layout> 378 </v-layout>
379 </v-flex> 379 </v-flex>
380 <v-flex xs12 sm4> 380 <v-flex xs12 sm4>
381 <v-layout> 381 <v-layout>
382 <v-flex xs4 class="pt-4 subheading"> 382 <v-flex xs4 class="pt-4 subheading">
383 <label class="right hidden-xs-only hidden-sm-only">Roll Number:</label> 383 <label class="right hidden-xs-only hidden-sm-only">Roll Number:</label>
384 <label class="right hidden-lg-only hidden-md-only hidden-xl-only">Roll No:</label> 384 <label class="right hidden-lg-only hidden-md-only hidden-xl-only">Roll No:</label>
385 </v-flex> 385 </v-flex>
386 <v-flex xs8 class="ml-3"> 386 <v-flex xs8 class="ml-3">
387 <v-text-field 387 <v-text-field
388 :items="gender" 388 :items="gender"
389 v-model="editedItem.rollNo" 389 v-model="editedItem.rollNo"
390 placeholder="fill roll number" 390 placeholder="fill roll number"
391 required 391 required
392 ></v-text-field> 392 ></v-text-field>
393 </v-flex> 393 </v-flex>
394 </v-layout> 394 </v-layout>
395 </v-flex> 395 </v-flex>
396 </v-layout> 396 </v-layout>
397 <v-layout class="hidden-xs-only hidden-sm-only"> 397 <v-layout class="hidden-xs-only hidden-sm-only">
398 <v-flex xs12 sm12> 398 <v-flex xs12 sm12>
399 <v-layout> 399 <v-layout>
400 <v-flex xs4 sm2 class="pt-4 subheading ml-5"> 400 <v-flex xs4 sm2 class="pt-4 subheading ml-5">
401 <label class="right pr-4">Present Address:</label> 401 <label class="right pr-4">Present Address:</label>
402 </v-flex> 402 </v-flex>
403 <v-flex xs8 sm12> 403 <v-flex xs8 sm12>
404 <v-text-field 404 <v-text-field
405 name="input-4-3" 405 name="input-4-3"
406 v-model="editedItem.presentAddress" 406 v-model="editedItem.presentAddress"
407 placeholder="fill Your present Address" 407 placeholder="fill Your present Address"
408 required 408 required
409 ></v-text-field> 409 ></v-text-field>
410 </v-flex> 410 </v-flex>
411 </v-layout> 411 </v-layout>
412 </v-flex> 412 </v-flex>
413 <v-flex xs12 sm12> 413 <v-flex xs12 sm12>
414 <v-layout> 414 <v-layout>
415 <v-flex xs4 sm2 class="pt-4 subheading ml-5 addressForm"> 415 <v-flex xs4 sm2 class="pt-4 subheading ml-5 addressForm">
416 <label class>Permanent Address:</label> 416 <label class>Permanent Address:</label>
417 </v-flex> 417 </v-flex>
418 <v-flex xs12 sm12> 418 <v-flex xs12 sm12>
419 <v-text-field 419 <v-text-field
420 name="input-4-3" 420 name="input-4-3"
421 v-model="editedItem.permanentAddress" 421 v-model="editedItem.permanentAddress"
422 placeholder="fill Your Permanent Address" 422 placeholder="fill Your Permanent Address"
423 required 423 required
424 ></v-text-field> 424 ></v-text-field>
425 </v-flex> 425 </v-flex>
426 </v-layout> 426 </v-layout>
427 </v-flex> 427 </v-flex>
428 </v-layout> 428 </v-layout>
429 <v-layout class="hidden-lg-only hidden-md-only hidden-xl-only"> 429 <v-layout class="hidden-lg-only hidden-md-only hidden-xl-only">
430 <v-flex xs12 sm12> 430 <v-flex xs12 sm12>
431 <v-layout> 431 <v-layout>
432 <v-flex xs12 sm3 class="pt-4 subheading text-xs-center"> 432 <v-flex xs12 sm3 class="pt-4 subheading text-xs-center">
433 <label class>Present Address :</label> 433 <label class>Present Address :</label>
434 </v-flex> 434 </v-flex>
435 </v-layout> 435 </v-layout>
436 <v-layout> 436 <v-layout>
437 <v-flex xs12 sm12> 437 <v-flex xs12 sm12>
438 <v-textarea 438 <v-textarea
439 name="input-4-3" 439 name="input-4-3"
440 v-model="editedItem.presentAddress" 440 v-model="editedItem.presentAddress"
441 placeholder="fill Your present Address" 441 placeholder="fill Your present Address"
442 required 442 required
443 ></v-textarea> 443 ></v-textarea>
444 </v-flex> 444 </v-flex>
445 </v-layout> 445 </v-layout>
446 </v-flex> 446 </v-flex>
447 <v-flex xs12 sm12> 447 <v-flex xs12 sm12>
448 <v-layout> 448 <v-layout>
449 <v-flex xs12 sm3 class="pt-4 pr-4 subheading text-xs-center addressForm"> 449 <v-flex xs12 sm3 class="pt-4 pr-4 subheading text-xs-center addressForm">
450 <label>Permanent addr:</label> 450 <label>Permanent addr:</label>
451 </v-flex> 451 </v-flex>
452 </v-layout> 452 </v-layout>
453 <v-layout> 453 <v-layout>
454 <v-flex xs12 sm12> 454 <v-flex xs12 sm12>
455 <v-textarea 455 <v-textarea
456 name="input-4-3" 456 name="input-4-3"
457 v-model="editedItem.permanentAddress" 457 v-model="editedItem.permanentAddress"
458 placeholder="fill Your Permanent Address" 458 placeholder="fill Your Permanent Address"
459 required 459 required
460 ></v-textarea> 460 ></v-textarea>
461 </v-flex> 461 </v-flex>
462 </v-layout> 462 </v-layout>
463 </v-flex> 463 </v-flex>
464 </v-layout> 464 </v-layout>
465 <v-layout> 465 <v-layout>
466 <v-flex xs12 sm12> 466 <v-flex xs12 sm12>
467 <v-layout> 467 <v-layout>
468 <v-flex xs6> 468 <v-flex xs6>
469 <v-btn round dark @click.native="close">Cancel</v-btn> 469 <v-btn round dark @click.native="close">Cancel</v-btn>
470 </v-flex> 470 </v-flex>
471 <v-flex xs6> 471 <v-flex xs6>
472 <v-btn @click="save" round dark :loading="loading" class="right">Save</v-btn> 472 <v-btn @click="save" round dark :loading="loading" class="right">Save</v-btn>
473 </v-flex> 473 </v-flex>
474 </v-layout> 474 </v-layout>
475 </v-flex> 475 </v-flex>
476 </v-layout> 476 </v-layout>
477 </v-container> 477 </v-container>
478 </v-form> 478 </v-form>
479 </v-card-text> 479 </v-card-text>
480 </v-card> 480 </v-card>
481 </v-dialog> 481 </v-dialog>
482 482
483 <!-- ****** PROFILE VIEW STUDENTS DEATILS ****** --> 483 <!-- ****** PROFILE VIEW STUDENTS DEATILS ****** -->
484 484
485 <v-dialog v-model="dialog1" max-width="1100px" scrollable> 485 <v-dialog v-model="dialog1" max-width="1100px" scrollable>
486 <v-card> 486 <v-card>
487 <v-toolbar color="grey lighten-2" flat> 487 <v-toolbar color="grey lighten-2" flat>
488 <v-spacer></v-spacer> 488 <v-spacer></v-spacer>
489 <v-toolbar-title>Student Profile</v-toolbar-title> 489 <v-toolbar-title>Student Profile</v-toolbar-title>
490 <v-spacer></v-spacer> 490 <v-spacer></v-spacer>
491 <v-icon @click="close1">close</v-icon> 491 <v-icon @click="close1">close</v-icon>
492 </v-toolbar> 492 </v-toolbar>
493 <v-card-text style="height: 700px;"> 493 <v-card-text style="height: 700px;">
494 <v-flex align-center justify-center layout text-xs-center class="mt-3"> 494 <v-flex align-center justify-center layout text-xs-center class="mt-3">
495 <v-avatar size="160px"> 495 <v-avatar size="160px">
496 <img src="/static/icon/user.png" v-if="!editedItem.profilePicUrl" /> 496 <img src="/static/icon/user.png" v-if="!editedItem.profilePicUrl" />
497 <img :src="editedItem.profilePicUrl" v-else-if="editedItem.profilePicUrl" /> 497 <img :src="editedItem.profilePicUrl" v-else-if="editedItem.profilePicUrl" />
498 </v-avatar> 498 </v-avatar>
499 </v-flex> 499 </v-flex>
500 <v-container grid-list-md> 500 <v-container grid-list-md>
501 <v-layout wrap> 501 <v-layout wrap>
502 <v-flex xs12 sm6> 502 <v-flex xs12 sm6>
503 <v-layout> 503 <v-layout>
504 <v-flex xs6 sm5> 504 <v-flex xs6 sm5>
505 <h5 class="right my-1"> 505 <h5 class="right my-1">
506 <b>Full Name:</b> 506 <b>Full Name:</b>
507 </h5> 507 </h5>
508 </v-flex> 508 </v-flex>
509 <v-flex sm7 xs6> 509 <v-flex sm7 xs6>
510 <h5 class="my-1 left">{{ editedItem.name }}</h5> 510 <h5 class="my-1 left">{{ editedItem.name }}</h5>
511 </v-flex> 511 </v-flex>
512 </v-layout> 512 </v-layout>
513 </v-flex> 513 </v-flex>
514 <v-flex xs12 sm6> 514 <v-flex xs12 sm6>
515 <v-layout> 515 <v-layout>
516 <v-flex xs6 sm4> 516 <v-flex xs6 sm4>
517 <h5 class="right my-1"> 517 <h5 class="right my-1">
518 <b>Email:</b> 518 <b>Email:</b>
519 </h5> 519 </h5>
520 </v-flex> 520 </v-flex>
521 <v-flex sm8 xs6> 521 <v-flex sm8 xs6>
522 <h5 class="my-1 left">{{ editedItem.email }}</h5> 522 <h5 class="my-1 left">{{ editedItem.email }}</h5>
523 </v-flex> 523 </v-flex>
524 </v-layout> 524 </v-layout>
525 </v-flex> 525 </v-flex>
526 </v-layout> 526 </v-layout>
527 <v-layout wrap> 527 <v-layout wrap>
528 <v-flex xs12 sm6> 528 <v-flex xs12 sm6>
529 <v-layout> 529 <v-layout>
530 <v-flex xs6 sm5> 530 <v-flex xs6 sm5>
531 <b> 531 <b>
532 <h5 class="right my-1"> 532 <h5 class="right my-1">
533 <b>Gender:</b> 533 <b>Gender:</b>
534 </h5> 534 </h5>
535 </b> 535 </b>
536 </v-flex> 536 </v-flex>
537 <v-flex sm7 xs6> 537 <v-flex sm7 xs6>
538 <h5 class="my-1 left">{{ editedItem.gender }}</h5> 538 <h5 class="my-1 left">{{ editedItem.gender }}</h5>
539 </v-flex> 539 </v-flex>
540 </v-layout> 540 </v-layout>
541 </v-flex> 541 </v-flex>
542 <v-flex xs12 sm6> 542 <v-flex xs12 sm6>
543 <v-layout> 543 <v-layout>
544 <v-flex xs6 sm4> 544 <v-flex xs6 sm4>
545 <b> 545 <b>
546 <h5 class="right my-1"> 546 <h5 class="right my-1">
547 <b>D.O.B:</b> 547 <b>D.O.B:</b>
548 </h5> 548 </h5>
549 </b> 549 </b>
550 </v-flex> 550 </v-flex>
551 <v-flex sm7 xs6> 551 <v-flex sm7 xs6>
552 <h5 class="my-1">{{ dates(editedItem.dob) }}</h5> 552 <h5 class="my-1">{{ dates(editedItem.dob) }}</h5>
553 </v-flex> 553 </v-flex>
554 </v-layout> 554 </v-layout>
555 </v-flex> 555 </v-flex>
556 </v-layout> 556 </v-layout>
557 <v-layout wrap> 557 <v-layout wrap>
558 <v-flex xs12 sm6> 558 <v-flex xs12 sm6>
559 <v-layout> 559 <v-layout>
560 <v-flex xs6 sm5> 560 <v-flex xs6 sm5>
561 <b> 561 <b>
562 <h5 class="right my-1"> 562 <h5 class="right my-1">
563 <b>Blood Group:</b> 563 <b>Blood Group:</b>
564 </h5> 564 </h5>
565 </b> 565 </b>
566 </v-flex> 566 </v-flex>
567 <v-flex sm7 xs6> 567 <v-flex sm7 xs6>
568 <h5 class="my-1 left">{{ editedItem.bloodGroup }}</h5> 568 <h5 class="my-1 left">{{ editedItem.bloodGroup }}</h5>
569 </v-flex> 569 </v-flex>
570 </v-layout> 570 </v-layout>
571 </v-flex> 571 </v-flex>
572 <v-flex xs12 sm6> 572 <v-flex xs12 sm6>
573 <v-layout> 573 <v-layout>
574 <v-flex xs6 sm4> 574 <v-flex xs6 sm4>
575 <b> 575 <b>
576 <h5 class="right my-1"> 576 <h5 class="right my-1">
577 <b>Allergies:</b> 577 <b>Allergies:</b>
578 </h5> 578 </h5>
579 </b> 579 </b>
580 </v-flex> 580 </v-flex>
581 <v-flex sm8 xs6> 581 <v-flex sm8 xs6>
582 <h5 class="my-1">{{ editedItem.allergies }}</h5> 582 <h5 class="my-1">{{ editedItem.allergies }}</h5>
583 </v-flex> 583 </v-flex>
584 </v-layout> 584 </v-layout>
585 </v-flex> 585 </v-flex>
586 </v-layout> 586 </v-layout>
587 <v-layout wrap> 587 <v-layout wrap>
588 <v-flex xs12 sm6> 588 <v-flex xs12 sm6>
589 <v-layout> 589 <v-layout>
590 <v-flex xs6 sm5> 590 <v-flex xs6 sm5>
591 <b> 591 <b>
592 <h5 class="right my-1"> 592 <h5 class="right my-1">
593 <b>Height:</b> 593 <b>Height:</b>
594 </h5> 594 </h5>
595 </b> 595 </b>
596 </v-flex> 596 </v-flex>
597 <v-flex sm7 xs6> 597 <v-flex sm7 xs6>
598 <h5 class="my-1 left">{{ editedItem.height }}</h5> 598 <h5 class="my-1 left">{{ editedItem.height }}</h5>
599 </v-flex> 599 </v-flex>
600 </v-layout> 600 </v-layout>
601 </v-flex> 601 </v-flex>
602 <v-flex xs12 sm6> 602 <v-flex xs12 sm6>
603 <v-layout> 603 <v-layout>
604 <v-flex xs6 sm4> 604 <v-flex xs6 sm4>
605 <b> 605 <b>
606 <h5 class="right my-1"> 606 <h5 class="right my-1">
607 <b>Weight:</b> 607 <b>Weight:</b>
608 </h5> 608 </h5>
609 </b> 609 </b>
610 </v-flex> 610 </v-flex>
611 <v-flex sm8 xs6> 611 <v-flex sm8 xs6>
612 <h5 class="my-1">{{ editedItem.weight }}</h5> 612 <h5 class="my-1">{{ editedItem.weight }}</h5>
613 </v-flex> 613 </v-flex>
614 </v-layout> 614 </v-layout>
615 </v-flex> 615 </v-flex>
616 </v-layout> 616 </v-layout>
617 <v-layout wrap> 617 <v-layout wrap>
618 <v-flex xs12 sm6> 618 <v-flex xs12 sm6>
619 <v-layout> 619 <v-layout>
620 <v-flex xs6 sm5> 620 <v-flex xs6 sm5>
621 <b> 621 <b>
622 <h5 class="right my-1"> 622 <h5 class="right my-1">
623 <b>City:</b> 623 <b>City:</b>
624 </h5> 624 </h5>
625 </b> 625 </b>
626 </v-flex> 626 </v-flex>
627 <v-flex sm7 xs6> 627 <v-flex sm7 xs6>
628 <h5 class="my-1 left">{{ editedItem.city }}</h5> 628 <h5 class="my-1 left">{{ editedItem.city }}</h5>
629 </v-flex> 629 </v-flex>
630 </v-layout> 630 </v-layout>
631 </v-flex> 631 </v-flex>
632 <v-flex xs12 sm6> 632 <v-flex xs12 sm6>
633 <v-layout> 633 <v-layout>
634 <v-flex xs6 sm4> 634 <v-flex xs6 sm4>
635 <b> 635 <b>
636 <h5 class="right my-1"> 636 <h5 class="right my-1">
637 <b>State:</b> 637 <b>State:</b>
638 </h5> 638 </h5>
639 </b> 639 </b>
640 </v-flex> 640 </v-flex>
641 <v-flex sm8 xs6> 641 <v-flex sm8 xs6>
642 <h5 class="my-1">{{ editedItem.state }}</h5> 642 <h5 class="my-1">{{ editedItem.state }}</h5>
643 </v-flex> 643 </v-flex>
644 </v-layout> 644 </v-layout>
645 </v-flex> 645 </v-flex>
646 </v-layout> 646 </v-layout>
647 <v-layout wrap> 647 <v-layout wrap>
648 <v-flex xs12 sm6> 648 <v-flex xs12 sm6>
649 <v-layout> 649 <v-layout>
650 <v-flex xs6 sm5> 650 <v-flex xs6 sm5>
651 <b> 651 <b>
652 <h5 class="right my-1"> 652 <h5 class="right my-1">
653 <b>Pincode:</b> 653 <b>Pincode:</b>
654 </h5> 654 </h5>
655 </b> 655 </b>
656 </v-flex> 656 </v-flex>
657 <v-flex sm7 xs6> 657 <v-flex sm7 xs6>
658 <h5 class="my-1">{{ editedItem.pincode }}</h5> 658 <h5 class="my-1">{{ editedItem.pincode }}</h5>
659 </v-flex> 659 </v-flex>
660 </v-layout> 660 </v-layout>
661 </v-flex> 661 </v-flex>
662 <v-flex xs12 sm5> 662 <v-flex xs12 sm5>
663 <v-layout> 663 <v-layout>
664 <v-flex xs6 sm5> 664 <v-flex xs6 sm5>
665 <b> 665 <b>
666 <h5 class="right my-1"> 666 <h5 class="right my-1">
667 <b>Country:</b> 667 <b>Country:</b>
668 </h5> 668 </h5>
669 </b> 669 </b>
670 </v-flex> 670 </v-flex>
671 <v-flex sm7 xs6> 671 <v-flex sm7 xs6>
672 <h5 class="my-1">{{ editedItem.country }}</h5> 672 <h5 class="my-1">{{ editedItem.country }}</h5>
673 </v-flex> 673 </v-flex>
674 </v-layout> 674 </v-layout>
675 </v-flex> 675 </v-flex>
676 </v-layout> 676 </v-layout>
677 <v-layout wrap> 677 <v-layout wrap>
678 <v-flex xs12 sm6> 678 <v-flex xs12 sm6>
679 <v-layout> 679 <v-layout>
680 <v-flex sm5 xs6> 680 <v-flex sm5 xs6>
681 <b> 681 <b>
682 <h5 class="right my-1"> 682 <h5 class="right my-1">
683 <b>Mobile No:</b> 683 <b>Mobile No:</b>
684 </h5> 684 </h5>
685 </b> 685 </b>
686 </v-flex> 686 </v-flex>
687 <v-flex sm6 xs6> 687 <v-flex sm6 xs6>
688 <h5 class="my-1">{{ editedItem.mobile }}</h5> 688 <h5 class="my-1">{{ editedItem.mobile }}</h5>
689 </v-flex> 689 </v-flex>
690 </v-layout> 690 </v-layout>
691 </v-flex> 691 </v-flex>
692 <v-flex xs12 sm6> 692 <v-flex xs12 sm6>
693 <v-layout> 693 <v-layout>
694 <v-flex xs6 sm4> 694 <v-flex xs6 sm4>
695 <b> 695 <b>
696 <h5 class="right my-1"> 696 <h5 class="right my-1">
697 <b>Fahter Name:</b> 697 <b>Fahter Name:</b>
698 </h5> 698 </h5>
699 </b> 699 </b>
700 </v-flex> 700 </v-flex>
701 <v-flex sm8 xs6> 701 <v-flex sm8 xs6>
702 <h5 class="my-1">{{ editedItem.fatherName }}</h5> 702 <h5 class="my-1">{{ editedItem.fatherName }}</h5>
703 </v-flex> 703 </v-flex>
704 </v-layout> 704 </v-layout>
705 </v-flex> 705 </v-flex>
706 </v-layout> 706 </v-layout>
707 <v-layout wrap> 707 <v-layout wrap>
708 <v-flex xs12 sm5> 708 <v-flex xs12 sm5>
709 <v-layout> 709 <v-layout>
710 <v-flex xs6 sm6> 710 <v-flex xs6 sm6>
711 <b> 711 <b>
712 <h5 class="right my-1"> 712 <h5 class="right my-1">
713 <b>Mother Name:</b> 713 <b>Mother Name:</b>
714 </h5> 714 </h5>
715 </b> 715 </b>
716 </v-flex> 716 </v-flex>
717 <v-flex sm6 xs6> 717 <v-flex sm6 xs6>
718 <h5 class="my-1">{{ editedItem.motherName }}</h5> 718 <h5 class="my-1">{{ editedItem.motherName }}</h5>
719 </v-flex> 719 </v-flex>
720 </v-layout> 720 </v-layout>
721 </v-flex> 721 </v-flex>
722 <v-flex xs12 sm6> 722 <v-flex xs12 sm6>
723 <v-layout> 723 <v-layout>
724 <v-flex xs6 sm6> 724 <v-flex xs6 sm6>
725 <b> 725 <b>
726 <h5 class="right my-1"> 726 <h5 class="right my-1">
727 <b>Father Cell No:</b> 727 <b>Father Cell No:</b>
728 </h5> 728 </h5>
729 </b> 729 </b>
730 </v-flex> 730 </v-flex>
731 <v-flex sm6 xs6> 731 <v-flex sm6 xs6>
732 <h5 class="my-1">{{ editedItem.fatherCellNo }}</h5> 732 <h5 class="my-1">{{ editedItem.fatherCellNo }}</h5>
733 </v-flex> 733 </v-flex>
734 </v-layout> 734 </v-layout>
735 </v-flex> 735 </v-flex>
736 </v-layout> 736 </v-layout>
737 <v-layout wrap> 737 <v-layout wrap>
738 <v-flex xs12 sm5> 738 <v-flex xs12 sm5>
739 <v-layout> 739 <v-layout>
740 <v-flex xs6 sm6> 740 <v-flex xs6 sm6>
741 <b> 741 <b>
742 <h5 class="right my-1"> 742 <h5 class="right my-1">
743 <b>Mother Cell No:</b> 743 <b>Mother Cell No:</b>
744 </h5> 744 </h5>
745 </b> 745 </b>
746 </v-flex> 746 </v-flex>
747 <v-flex sm6 xs6> 747 <v-flex sm6 xs6>
748 <h5 class="my-1">{{ editedItem.motherCellNo }}</h5> 748 <h5 class="my-1">{{ editedItem.motherCellNo }}</h5>
749 </v-flex> 749 </v-flex>
750 </v-layout> 750 </v-layout>
751 </v-flex> 751 </v-flex>
752 <v-flex xs12 sm6> 752 <v-flex xs12 sm6>
753 <v-layout> 753 <v-layout>
754 <v-flex xs6 sm6> 754 <v-flex xs6 sm6>
755 <b> 755 <b>
756 <h5 class="my-1 right"> 756 <h5 class="my-1 right">
757 <b>Academic Year:</b> 757 <b>Academic Year:</b>
758 </h5> 758 </h5>
759 </b> 759 </b>
760 </v-flex> 760 </v-flex>
761 <v-flex sm5 xs6> 761 <v-flex sm5 xs6>
762 <h5 class="my-1">{{ editedItem.establishmentYear }}</h5> 762 <h5 class="my-1">{{ editedItem.establishmentYear }}</h5>
763 </v-flex> 763 </v-flex>
764 </v-layout> 764 </v-layout>
765 </v-flex> 765 </v-flex>
766 </v-layout> 766 </v-layout>
767 <v-layout wrap> 767 <v-layout wrap>
768 <v-flex xs12 sm5> 768 <v-flex xs12 sm5>
769 <v-layout> 769 <v-layout>
770 <v-flex xs6 sm6> 770 <v-flex xs6 sm6>
771 <b> 771 <b>
772 <h5 class="my-1 right"> 772 <h5 class="my-1 right">
773 <b>Medical Notes:</b> 773 <b>Medical Notes:</b>
774 </h5> 774 </h5>
775 </b> 775 </b>
776 </v-flex> 776 </v-flex>
777 <v-flex sm5 xs6> 777 <v-flex sm5 xs6>
778 <h5 class="my-1">{{ editedItem.medicalNotes }}</h5> 778 <h5 class="my-1">{{ editedItem.medicalNotes }}</h5>
779 </v-flex> 779 </v-flex>
780 </v-layout> 780 </v-layout>
781 </v-flex> 781 </v-flex>
782 <v-flex xs12 sm6> 782 <v-flex xs12 sm6>
783 <v-layout> 783 <v-layout>
784 <v-flex xs6 sm6> 784 <v-flex xs6 sm6>
785 <b> 785 <b>
786 <h5 class="right my-1"> 786 <h5 class="right my-1">
787 <b>Roll No. :</b> 787 <b>Roll No. :</b>
788 </h5> 788 </h5>
789 </b> 789 </b>
790 </v-flex> 790 </v-flex>
791 <v-flex sm6 xs6> 791 <v-flex sm6 xs6>
792 <h5 class="my-1">{{ editedItem.rollNo }}</h5> 792 <h5 class="my-1">{{ editedItem.rollNo }}</h5>
793 </v-flex> 793 </v-flex>
794 </v-layout> 794 </v-layout>
795 </v-flex> 795 </v-flex>
796 </v-layout> 796 </v-layout>
797 <v-layout wrap class="hidden-xs-only"> 797 <v-layout wrap class="hidden-xs-only">
798 <v-flex xs12 sm5> 798 <v-flex xs12 sm5>
799 <v-layout wrap> 799 <v-layout wrap>
800 <v-flex sm6> 800 <v-flex sm6>
801 <b> 801 <b>
802 <h5 class="my-1 right"> 802 <h5 class="my-1 right">
803 <b>present Address:</b> 803 <b>present Address:</b>
804 </h5> 804 </h5>
805 </b> 805 </b>
806 </v-flex> 806 </v-flex>
807 <v-flex sm5> 807 <v-flex sm5>
808 <h5 class="my-1">{{ editedItem.presentAddress }}</h5> 808 <h5 class="my-1">{{ editedItem.presentAddress }}</h5>
809 </v-flex> 809 </v-flex>
810 </v-layout> 810 </v-layout>
811 </v-flex> 811 </v-flex>
812 <v-flex sm6> 812 <v-flex sm6>
813 <v-layout wrap> 813 <v-layout wrap>
814 <v-flex sm6> 814 <v-flex sm6>
815 <b> 815 <b>
816 <h5 class="my-1 right"> 816 <h5 class="my-1 right">
817 <b>Permanent Address:</b> 817 <b>Permanent Address:</b>
818 </h5> 818 </h5>
819 </b> 819 </b>
820 </v-flex> 820 </v-flex>
821 <v-flex sm6> 821 <v-flex sm6>
822 <h5 class="my-1">{{ editedItem.permanentAddress }}</h5> 822 <h5 class="my-1">{{ editedItem.permanentAddress }}</h5>
823 </v-flex> 823 </v-flex>
824 </v-layout> 824 </v-layout>
825 </v-flex> 825 </v-flex>
826 </v-layout> 826 </v-layout>
827 <v-layout wrap class="hidden-sm-only hidden-md-only hidden-lg-only hidden-xl-only"> 827 <v-layout wrap class="hidden-sm-only hidden-md-only hidden-lg-only hidden-xl-only">
828 <v-flex xs12 sm5> 828 <v-flex xs12 sm5>
829 <v-layout wrap> 829 <v-layout wrap>
830 <v-flex xs8 sm6> 830 <v-flex xs8 sm6>
831 <b> 831 <b>
832 <h5 class="my-1"> 832 <h5 class="my-1">
833 <b>present Address:-</b> 833 <b>present Address:-</b>
834 </h5> 834 </h5>
835 </b> 835 </b>
836 </v-flex> 836 </v-flex>
837 <v-flex sm5 xs12> 837 <v-flex sm5 xs12>
838 <h5 class="my-1">{{ editedItem.presentAddress }}</h5> 838 <h5 class="my-1">{{ editedItem.presentAddress }}</h5>
839 </v-flex> 839 </v-flex>
840 </v-layout> 840 </v-layout>
841 </v-flex> 841 </v-flex>
842 <v-flex xs12 sm6> 842 <v-flex xs12 sm6>
843 <v-layout wrap> 843 <v-layout wrap>
844 <v-flex xs9 sm6> 844 <v-flex xs9 sm6>
845 <b> 845 <b>
846 <h5 class="my-1"> 846 <h5 class="my-1">
847 <b>Permanent Address:-</b> 847 <b>Permanent Address:-</b>
848 </h5> 848 </h5>
849 </b> 849 </b>
850 </v-flex> 850 </v-flex>
851 <v-flex sm6 xs12> 851 <v-flex sm6 xs12>
852 <h5 class="my-1">{{ editedItem.permanentAddress }}</h5> 852 <h5 class="my-1">{{ editedItem.permanentAddress }}</h5>
853 </v-flex> 853 </v-flex>
854 </v-layout> 854 </v-layout>
855 </v-flex> 855 </v-flex>
856 </v-layout> 856 </v-layout>
857 </v-container> 857 </v-container>
858 </v-card-text> 858 </v-card-text>
859 </v-card> 859 </v-card>
860 </v-dialog> 860 </v-dialog>
861 861
862 <v-snackbar 862 <v-snackbar
863 :timeout="timeout" 863 :timeout="timeout"
864 :top="y === 'top'" 864 :top="y === 'top'"
865 :right="x === 'right'" 865 :right="x === 'right'"
866 :vertical="mode === 'vertical'" 866 :vertical="mode === 'vertical'"
867 v-model="snackbar" 867 v-model="snackbar"
868 color="success" 868 color="success"
869 >{{ text }}</v-snackbar> 869 >{{ text }}</v-snackbar>
870 870
871 <!-- ****** EXISTING-USERS STUDENTS TABLE ****** --> 871 <!-- ****** EXISTING-USERS STUDENTS TABLE ****** -->
872 <v-card flat> 872 <v-card flat>
873 <v-card-actions class="hidden-xs-only hidden-sm-only"> 873 <v-card-actions class="hidden-xs-only hidden-sm-only">
874 <v-layout> 874 <v-layout>
875 <label class="right mt-4 ml-5">Select Class:</label> 875 <label class="right mt-4 ml-5">Select Class:</label>
876 <v-select 876 <v-select
877 :items="addclass" 877 :items="addclass"
878 label="Select Class" 878 label="Select Class"
879 v-model="selectStudents.select" 879 v-model="selectStudents.select"
880 item-text="classNum" 880 item-text="classNum"
881 item-value="_id" 881 item-value="_id"
882 name="Select Class" 882 name="Select Class"
883 :rules="classRules" 883 :rules="classRules"
884 @change="getSections(selectStudents.select)" 884 @change="getSections(selectStudents.select)"
885 class="px-4" 885 class="px-4"
886 required 886 required
887 ></v-select> 887 ></v-select>
888 <label class="right mt-4">Select Section:</label> 888 <label class="right mt-4">Select Section:</label>
889 <v-select 889 <v-select
890 :items="addSection" 890 :items="addSection"
891 label="Select Section" 891 label="Select Section"
892 v-model="selectStudents.selectSection" 892 v-model="selectStudents.selectSection"
893 item-text="name" 893 item-text="name"
894 item-value="_id" 894 item-value="_id"
895 name="Select Section" 895 name="Select Section"
896 :rules="sectionRules" 896 :rules="sectionRules"
897 class="pl-3" 897 class="pl-3"
898 required 898 required
899 ></v-select> 899 ></v-select>
900 </v-layout> 900 </v-layout>
901 <v-spacer></v-spacer> 901 <v-spacer></v-spacer>
902 <v-btn @click="findStudents()" round dark :loading="loading" class="left">Find</v-btn> 902 <v-btn @click="findStudents()" round dark :loading="loading" class="left">Find</v-btn>
903 </v-card-actions> 903 </v-card-actions>
904 <v-flex class="hidden-xl-only hidden-lg-only hidden-md-only"> 904 <v-flex class="hidden-xl-only hidden-lg-only hidden-md-only">
905 <v-layout> 905 <v-layout>
906 <v-flex xs4> 906 <v-flex xs4>
907 <label class="right mt-4">Select Class:</label> 907 <label class="right mt-4">Select Class:</label>
908 </v-flex> 908 </v-flex>
909 <v-flex xs8> 909 <v-flex xs8>
910 <v-select 910 <v-select
911 :items="addclass" 911 :items="addclass"
912 label="Select Class" 912 label="Select Class"
913 v-model="selectStudents.select" 913 v-model="selectStudents.select"
914 item-text="classNum" 914 item-text="classNum"
915 item-value="_id" 915 item-value="_id"
916 name="Select Class" 916 name="Select Class"
917 :rules="classRules" 917 :rules="classRules"
918 @change="getSections(selectStudents.select)" 918 @change="getSections(selectStudents.select)"
919 class="px-2" 919 class="px-2"
920 required 920 required
921 ></v-select> 921 ></v-select>
922 </v-flex> 922 </v-flex>
923 </v-layout> 923 </v-layout>
924 <v-layout> 924 <v-layout>
925 <v-flex xs4> 925 <v-flex xs4>
926 <label class="right mt-4">Select Section:</label> 926 <label class="right mt-4">Select Section:</label>
927 </v-flex> 927 </v-flex>
928 <v-flex xs8> 928 <v-flex xs8>
929 <v-select 929 <v-select
930 :items="addSection" 930 :items="addSection"
931 label="Select Section" 931 label="Select Section"
932 v-model="selectStudents.selectSection" 932 v-model="selectStudents.selectSection"
933 item-text="name" 933 item-text="name"
934 item-value="_id" 934 item-value="_id"
935 name="Select Section" 935 name="Select Section"
936 :rules="sectionRules" 936 :rules="sectionRules"
937 class="px-2" 937 class="px-2"
938 required 938 required
939 ></v-select> 939 ></v-select>
940 </v-flex> 940 </v-flex>
941 </v-layout> 941 </v-layout>
942 <v-layout> 942 <v-layout>
943 <v-flex xs5 class="mx-auto mb-2"> 943 <v-flex xs5 class="mx-auto mb-2">
944 <v-btn @click="findStudents()" block round dark :loading="loading">Find</v-btn> 944 <v-btn @click="findStudents()" block round dark :loading="loading">Find</v-btn>
945 </v-flex> 945 </v-flex>
946 </v-layout> 946 </v-layout>
947 </v-flex> 947 </v-flex>
948 </v-card> 948 </v-card>
949 <v-data-table 949 <v-data-table
950 :headers="headers" 950 :headers="headers"
951 :items="desserts" 951 :items="desserts"
952 :pagination.sync="pagination" 952 :pagination.sync="pagination"
953 :search="search" 953 :search="search"
954 > 954 >
955 <template slot="items" slot-scope="props"> 955 <template slot="items" slot-scope="props">
956 <td id="td" class="text-xs-center">{{ props.item.rollNo}}</td> 956 <td id="td" class="text-xs-center">{{ props.item.rollNo}}</td>
957 <td id="td" class="text-xs-center"> 957 <td id="td" class="text-xs-center">
958 <v-avatar> 958 <v-avatar>
959 <img :src="props.item.profilePicUrl" v-if="props.item.profilePicUrl" /> 959 <img :src="props.item.profilePicUrl" v-if="props.item.profilePicUrl" />
960 <img src="/static/icon/user.png" v-else-if="!props.item.profilePicUrl" /> 960 <img src="/static/icon/user.png" v-else-if="!props.item.profilePicUrl" />
961 </v-avatar> 961 </v-avatar>
962 </td> 962 </td>
963 <td id="td" class="text-xs-center">{{ props.item.name}}</td> 963 <td id="td" class="text-xs-center">{{ props.item.name}}</td>
964 <td id="td" class="text-xs-center">{{ props.item.email }}</td> 964 <td id="td" class="text-xs-center">{{ props.item.email }}</td>
965 <td id="td" class="text-xs-center">{{ dates(props.item.dob) }}</td> 965 <td id="td" class="text-xs-center">{{ dates(props.item.dob) }}</td>
966 <td id="td" class="text-xs-center">{{ props.item.gender }}</td> 966 <td id="td" class="text-xs-center">{{ props.item.gender }}</td>
967 <td id="td" class="text-xs-center">{{ props.item.parentId.fatherName }}</td> 967 <td id="td" class="text-xs-center">{{ props.item.parentId.fatherName }}</td>
968 <td id="td" class="text-xs-center">{{ props.item.parentId.motherName }}</td> 968 <td id="td" class="text-xs-center">{{ props.item.parentId.motherName }}</td>
969 <td id="td" class="text-xs-center">{{ props.item.establishmentYear }}</td> 969 <td id="td" class="text-xs-center">{{ props.item.establishmentYear }}</td>
970 <td id="td" class="text-xs-center">{{ props.item.mobile}}</td> 970 <td id="td" class="text-xs-center">{{ props.item.mobile}}</td>
971 971
972 <td class="text-xs-center"> 972 <td class="text-xs-center">
973 <span> 973 <span>
974 <img 974 <v-tooltip top>
975 style="cursor:pointer; width:25px; height:18px; " 975 <img
976 class="mr-5" 976 slot="activator"
977 @click="profile(props.item)" 977 style="cursor:pointer; width:25px; height:18px; "
978 src="/static/icon/eye1.png" 978 class="mr5"
979 /> 979 @click="profile(props.item)"
980 <img 980 src="/static/icon/eye1.png"
981 style="cursor:pointer; width:20px; height:18px; " 981 />
982 class="mr-5" 982 <span>View</span>
983 @click="editItem(props.item)" 983 </v-tooltip>
984 src="/static/icon/edit1.png" 984 <v-tooltip top>
985 /> 985 <img
986 <img 986 slot="activator"
987 style="cursor:pointer;width:20px; height:20px; " 987 style="cursor:pointer; width:20px; height:18px; "
988 class="mr-5" 988 class="mr5"
989 @click="deleteItem(props.item)" 989 @click="editItem(props.item)"
990 src="/static/icon/delete1.png" 990 src="/static/icon/edit1.png"
991 /> 991 />
992 <span>Edit</span>
993 </v-tooltip>
994 <v-tooltip top>
995 <img
996 slot="activator"
997 style="cursor:pointer; width:20px; height:20px; "
998 class="mr5"
999 @click="deleteItem(props.item)"
1000 src="/static/icon/delete1.png"
1001 />
1002 <span>Delete</span>
1003 </v-tooltip>
992 </span> 1004 </span>
993 </td> 1005 </td>
994 </template> 1006 </template>
995 <v-alert 1007 <v-alert
996 slot="no-results" 1008 slot="no-results"
997 :value="true" 1009 :value="true"
998 color="error" 1010 color="error"
999 icon="warning" 1011 icon="warning"
1000 >Your search for "{{ search }}" found no results.</v-alert> 1012 >Your search for "{{ search }}" found no results.</v-alert>
1001 </v-data-table> 1013 </v-data-table>
1002 </v-tab-item> 1014 </v-tab-item>
1003 1015
1004 <!-- ****** ADD STUDENTS DETAILS****** --> 1016 <!-- ****** ADD STUDENTS DETAILS****** -->
1005 <v-tab-item> 1017 <v-tab-item>
1006 <v-container fluid> 1018 <v-container fluid>
1007 <v-layout align-center justify-center fill-height> 1019 <v-layout align-center justify-center fill-height>
1008 <v-flex xs12 sm12 md10 lg11> 1020 <v-flex xs12 sm12 md10 lg11>
1009 <div> 1021 <div>
1010 <v-app> 1022 <v-app>
1011 <v-stepper v-model="e2"> 1023 <v-stepper v-model="e2">
1012 <v-stepper-header> 1024 <v-stepper-header>
1013 <v-stepper-step :complete="e2 > 1" step="1">Fill parent Details</v-stepper-step> 1025 <v-stepper-step :complete="e2 > 1" step="1">Fill parent Details</v-stepper-step>
1014 <v-divider></v-divider> 1026 <v-divider></v-divider>
1015 <v-stepper-step step="2">Fill Student Details</v-stepper-step> 1027 <v-stepper-step step="2">Fill Student Details</v-stepper-step>
1016 </v-stepper-header> 1028 </v-stepper-header>
1017 <v-stepper-items> 1029 <v-stepper-items>
1018 <v-stepper-content step="1"> 1030 <v-stepper-content step="1">
1019 <v-container fluid class> 1031 <v-container fluid class>
1020 <v-snackbar 1032 <v-snackbar
1021 :timeout="timeout" 1033 :timeout="timeout"
1022 :top="y === 'top'" 1034 :top="y === 'top'"
1023 :right="x === 'right'" 1035 :right="x === 'right'"
1024 :vertical="mode === 'vertical'" 1036 :vertical="mode === 'vertical'"
1025 v-model="snackbar" 1037 v-model="snackbar"
1026 color="success" 1038 color="success"
1027 >{{ text }}</v-snackbar> 1039 >{{ text }}</v-snackbar>
1028 <v-flex xs12 sm12> 1040 <v-flex xs12 sm12>
1029 <v-form ref="parentForm" v-model="valid" lazy-validation> 1041 <v-form ref="parentForm" v-model="valid" lazy-validation>
1030 <v-layout wrap> 1042 <v-layout wrap>
1031 <v-flex xs12 sm6> 1043 <v-flex xs12 sm6>
1032 <v-layout> 1044 <v-layout>
1033 <v-flex xs4 class="pt-4 subheading"> 1045 <v-flex xs4 class="pt-4 subheading">
1034 <label class="right">Parent Email Id:</label> 1046 <label class="right">Parent Email Id:</label>
1035 </v-flex> 1047 </v-flex>
1036 <v-flex xs8 class="ml-3"> 1048 <v-flex xs8 class="ml-3">
1037 <v-text-field 1049 <v-text-field
1038 placeholder="fill Parent email" 1050 placeholder="fill Parent email"
1039 :rules="emailRules" 1051 :rules="emailRules"
1040 v-model.trim="parentData.email" 1052 v-model.trim="parentData.email"
1041 type="text" 1053 type="text"
1042 v-on:keyup="getParentDetails" 1054 v-on:keyup="getParentDetails"
1043 name="email" 1055 name="email"
1044 required 1056 required
1045 ></v-text-field> 1057 ></v-text-field>
1046 </v-flex> 1058 </v-flex>
1047 </v-layout> 1059 </v-layout>
1048 </v-flex> 1060 </v-flex>
1049 <v-flex xs12 sm6> 1061 <v-flex xs12 sm6>
1050 <v-layout> 1062 <v-layout>
1051 <v-flex xs4 class="pt-4 subheading"> 1063 <v-flex xs4 class="pt-4 subheading">
1052 <label class="right">Father Name:</label> 1064 <label class="right">Father Name:</label>
1053 </v-flex> 1065 </v-flex>
1054 <v-flex xs8 class="ml-3"> 1066 <v-flex xs8 class="ml-3">
1055 <v-text-field 1067 <v-text-field
1056 v-model="parentData.fatherName" 1068 v-model="parentData.fatherName"
1057 :rules="fatherNameRules" 1069 :rules="fatherNameRules"
1058 placeholder="Fill your father Name" 1070 placeholder="Fill your father Name"
1059 required 1071 required
1060 ></v-text-field> 1072 ></v-text-field>
1061 </v-flex> 1073 </v-flex>
1062 </v-layout> 1074 </v-layout>
1063 </v-flex> 1075 </v-flex>
1064 </v-layout> 1076 </v-layout>
1065 <v-layout wrap> 1077 <v-layout wrap>
1066 <v-flex xs12 sm6> 1078 <v-flex xs12 sm6>
1067 <v-layout> 1079 <v-layout>
1068 <v-flex xs4 class="pt-4 subheading"> 1080 <v-flex xs4 class="pt-4 subheading">
1069 <label class="right">Father Cell No:</label> 1081 <label class="right">Father Cell No:</label>
1070 </v-flex> 1082 </v-flex>
1071 <v-flex xs8 class="ml-3"> 1083 <v-flex xs8 class="ml-3">
1072 <v-text-field 1084 <v-text-field
1073 v-model="parentData.fatherCellNo" 1085 v-model="parentData.fatherCellNo"
1074 placeholder="fill your father Cell Number" 1086 placeholder="fill your father Cell Number"
1075 name="state" 1087 name="state"
1076 type="number" 1088 type="number"
1077 :rules="fatheCellNoRules" 1089 :rules="fatheCellNoRules"
1078 required 1090 required
1079 ></v-text-field> 1091 ></v-text-field>
1080 </v-flex> 1092 </v-flex>
1081 </v-layout> 1093 </v-layout>
1082 </v-flex> 1094 </v-flex>
1083 <v-flex xs12 sm6> 1095 <v-flex xs12 sm6>
1084 <v-layout> 1096 <v-layout>
1085 <v-flex xs4 class="pt-4 subheading"> 1097 <v-flex xs4 class="pt-4 subheading">
1086 <label class="right">Mother Name:</label> 1098 <label class="right">Mother Name:</label>
1087 </v-flex> 1099 </v-flex>
1088 <v-flex xs8 class="ml-3"> 1100 <v-flex xs8 class="ml-3">
1089 <v-text-field 1101 <v-text-field
1090 v-model="parentData.motherName" 1102 v-model="parentData.motherName"
1091 placeholder="fill your Mother Name" 1103 placeholder="fill your Mother Name"
1092 name="state" 1104 name="state"
1093 type="text" 1105 type="text"
1094 :rules="motherNameRules" 1106 :rules="motherNameRules"
1095 required 1107 required
1096 ></v-text-field> 1108 ></v-text-field>
1097 </v-flex> 1109 </v-flex>
1098 </v-layout> 1110 </v-layout>
1099 </v-flex> 1111 </v-flex>
1100 </v-layout> 1112 </v-layout>
1101 <v-layout wrap> 1113 <v-layout wrap>
1102 <v-flex xs12 sm6> 1114 <v-flex xs12 sm6>
1103 <v-layout> 1115 <v-layout>
1104 <v-flex xs4 class="pt-4 subheading"> 1116 <v-flex xs4 class="pt-4 subheading">
1105 <label class="right">Mother Cell No:</label> 1117 <label class="right">Mother Cell No:</label>
1106 </v-flex> 1118 </v-flex>
1107 <v-flex xs8 class="ml-3"> 1119 <v-flex xs8 class="ml-3">
1108 <v-text-field 1120 <v-text-field
1109 v-model="parentData.motherCellNo" 1121 v-model="parentData.motherCellNo"
1110 placeholder="fill your Mother Cell Number" 1122 placeholder="fill your Mother Cell Number"
1111 name="state" 1123 name="state"
1112 type="number" 1124 type="number"
1113 :rules="motherCellNoRules" 1125 :rules="motherCellNoRules"
1114 required 1126 required
1115 ></v-text-field> 1127 ></v-text-field>
1116 </v-flex> 1128 </v-flex>
1117 </v-layout> 1129 </v-layout>
1118 </v-flex> 1130 </v-flex>
1119 </v-layout> 1131 </v-layout>
1120 <v-flex sm12 class="hidden-xs-only"> 1132 <v-flex sm12 class="hidden-xs-only">
1121 <v-card-actions> 1133 <v-card-actions>
1122 <v-spacer></v-spacer> 1134 <v-spacer></v-spacer>
1123 <v-btn 1135 <v-btn
1124 @click="submitParentDetails" 1136 @click="submitParentDetails"
1125 round 1137 round
1126 dark 1138 dark
1127 :loading="loading" 1139 :loading="loading"
1128 v-show="showParent" 1140 v-show="showParent"
1129 >Add</v-btn> 1141 >Add</v-btn>
1130 <v-btn v-show="showNext" @click="e2 = 2" round dark>Next</v-btn> 1142 <v-btn v-show="showNext" @click="e2 = 2" round dark>Next</v-btn>
1131 </v-card-actions> 1143 </v-card-actions>
1132 </v-flex> 1144 </v-flex>
1133 <v-flex 1145 <v-flex
1134 xs6 1146 xs6
1135 class="hidden-md-only hidden-sm-only hidden-lg-only hidden-xl-only mx-auto mt-2" 1147 class="hidden-md-only hidden-sm-only hidden-lg-only hidden-xl-only mx-auto mt-2"
1136 > 1148 >
1137 <v-btn 1149 <v-btn
1138 @click="submitParentDetails" 1150 @click="submitParentDetails"
1139 round 1151 round
1140 dark 1152 dark
1141 :loading="loading" 1153 :loading="loading"
1142 v-show="showParent" 1154 v-show="showParent"
1143 >Add</v-btn> 1155 >Add</v-btn>
1144 <v-btn v-show="showNext" @click="e2 = 2" round dark>Next</v-btn> 1156 <v-btn v-show="showNext" @click="e2 = 2" round dark>Next</v-btn>
1145 </v-flex> 1157 </v-flex>
1146 </v-form> 1158 </v-form>
1147 </v-flex> 1159 </v-flex>
1148 </v-container> 1160 </v-container>
1149 </v-stepper-content> 1161 </v-stepper-content>
1150 <v-stepper-content step="2"> 1162 <v-stepper-content step="2">
1151 <!-- <v-container fluid> --> 1163 <!-- <v-container fluid> -->
1152 <v-snackbar 1164 <v-snackbar
1153 :timeout="timeout" 1165 :timeout="timeout"
1154 :top="y === 'top'" 1166 :top="y === 'top'"
1155 :right="x === 'right'" 1167 :right="x === 'right'"
1156 :vertical="mode === 'vertical'" 1168 :vertical="mode === 'vertical'"
1157 v-model="snackbar" 1169 v-model="snackbar"
1158 color="success" 1170 color="success"
1159 >{{ text }}</v-snackbar> 1171 >{{ text }}</v-snackbar>
1160 <v-flex xs12 sm12> 1172 <v-flex xs12 sm12>
1161 <v-form ref="form" v-model="valid" lazy-validation> 1173 <v-form ref="form" v-model="valid" lazy-validation>
1162 <!-- <v-container fluid> --> 1174 <!-- <v-container fluid> -->
1163 <v-layout> 1175 <v-layout>
1164 <v-flex 1176 <v-flex
1165 xs12 1177 xs12
1166 class="text-xs-center text-sm-center text-md-center text-lg-center" 1178 class="text-xs-center text-sm-center text-md-center text-lg-center"
1167 > 1179 >
1168 <v-avatar size="100px"> 1180 <v-avatar size="100px">
1169 <img src="/static/icon/user.png" v-if="!imageUrl" /> 1181 <img src="/static/icon/user.png" v-if="!imageUrl" />
1170 </v-avatar> 1182 </v-avatar>
1171 <input 1183 <input
1172 type="file" 1184 type="file"
1173 style="display: none" 1185 style="display: none"
1174 ref="image" 1186 ref="image"
1175 accept="image/*" 1187 accept="image/*"
1176 @change="onFilePicked" 1188 @change="onFilePicked"
1177 /> 1189 />
1178 <img 1190 <img
1179 :src="imageData.imageUrl" 1191 :src="imageData.imageUrl"
1180 height="150" 1192 height="150"
1181 v-if="imageUrl" 1193 v-if="imageUrl"
1182 style="border-radius:50%; width:200px" 1194 style="border-radius:50%; width:200px"
1183 /> 1195 />
1184 </v-flex> 1196 </v-flex>
1185 </v-layout> 1197 </v-layout>
1186 <v-layout wrap> 1198 <v-layout wrap>
1187 <v-flex xs12 sm6> 1199 <v-flex xs12 sm6>
1188 <v-layout> 1200 <v-layout>
1189 <v-flex x4 sm4 class="pt-4 subheading"> 1201 <v-flex x4 sm4 class="pt-4 subheading">
1190 <label class="right hidden-xs-only hidden-sm-only">Select Class:</label> 1202 <label class="right hidden-xs-only hidden-sm-only">Select Class:</label>
1191 <label 1203 <label
1192 class="right hidden-lg-only hidden-md-only hidden-xl-only" 1204 class="right hidden-lg-only hidden-md-only hidden-xl-only"
1193 >Class:</label> 1205 >Class:</label>
1194 </v-flex> 1206 </v-flex>
1195 <v-flex xs8 sm8 class="ml-3"> 1207 <v-flex xs8 sm8 class="ml-3">
1196 <v-select 1208 <v-select
1197 :items="addclass" 1209 :items="addclass"
1198 label="Select Class" 1210 label="Select Class"
1199 v-model="addStudents.select" 1211 v-model="addStudents.select"
1200 item-text="classNum" 1212 item-text="classNum"
1201 item-value="_id" 1213 item-value="_id"
1202 name="Select Class" 1214 name="Select Class"
1203 :rules="classRules" 1215 :rules="classRules"
1204 @change="getSection(addStudents.select)" 1216 @change="getSection(addStudents.select)"
1205 required 1217 required
1206 ></v-select> 1218 ></v-select>
1207 </v-flex> 1219 </v-flex>
1208 </v-layout> 1220 </v-layout>
1209 </v-flex> 1221 </v-flex>
1210 <v-flex xs12 sm6> 1222 <v-flex xs12 sm6>
1211 <v-layout> 1223 <v-layout>
1212 <v-flex xs4 class="pt-4 subheading"> 1224 <v-flex xs4 class="pt-4 subheading">
1213 <label 1225 <label
1214 class="right hidden-xs-only hidden-sm-only" 1226 class="right hidden-xs-only hidden-sm-only"
1215 >Select Section:</label> 1227 >Select Section:</label>
1216 <label 1228 <label
1217 class="right hidden-lg-only hidden-md-only hidden-xl-only" 1229 class="right hidden-lg-only hidden-md-only hidden-xl-only"
1218 >Section:</label> 1230 >Section:</label>
1219 </v-flex> 1231 </v-flex>
1220 <v-flex xs8 class="ml-3"> 1232 <v-flex xs8 class="ml-3">
1221 <v-select 1233 <v-select
1222 :items="addSection" 1234 :items="addSection"
1223 label="Select Section" 1235 label="Select Section"
1224 v-model="addStudents.selectSection" 1236 v-model="addStudents.selectSection"
1225 item-text="name" 1237 item-text="name"
1226 item-value="_id" 1238 item-value="_id"
1227 name="Select Section" 1239 name="Select Section"
1228 :rules="sectionRules" 1240 :rules="sectionRules"
1229 required 1241 required
1230 ></v-select> 1242 ></v-select>
1231 </v-flex> 1243 </v-flex>
1232 </v-layout> 1244 </v-layout>
1233 </v-flex> 1245 </v-flex>
1234 </v-layout> 1246 </v-layout>
1235 <v-layout wrap> 1247 <v-layout wrap>
1236 <v-flex xs12 sm6> 1248 <v-flex xs12 sm6>
1237 <v-layout> 1249 <v-layout>
1238 <v-flex xs4 sm4 class="pt-4 subheading"> 1250 <v-flex xs4 sm4 class="pt-4 subheading">
1239 <label class="right hidden-xs-only hidden-sm-only">Full Name:</label> 1251 <label class="right hidden-xs-only hidden-sm-only">Full Name:</label>
1240 <label 1252 <label
1241 class="right hidden-lg-only hidden-md-only hidden-xl-only" 1253 class="right hidden-lg-only hidden-md-only hidden-xl-only"
1242 >Name:</label> 1254 >Name:</label>
1243 </v-flex> 1255 </v-flex>
1244 <v-flex xs8 sm8 class="ml-3"> 1256 <v-flex xs8 sm8 class="ml-3">
1245 <v-text-field 1257 <v-text-field
1246 v-model="addStudents.name" 1258 v-model="addStudents.name"
1247 placeholder="fill your full Name" 1259 placeholder="fill your full Name"
1248 name="name" 1260 name="name"
1249 type="text" 1261 type="text"
1250 :rules="nameRules" 1262 :rules="nameRules"
1251 required 1263 required
1252 ></v-text-field> 1264 ></v-text-field>
1253 </v-flex> 1265 </v-flex>
1254 </v-layout> 1266 </v-layout>
1255 </v-flex> 1267 </v-flex>
1256 <v-flex xs12 sm6> 1268 <v-flex xs12 sm6>
1257 <v-layout> 1269 <v-layout>
1258 <v-flex xs4 sm4 class="pt-4 subheading"> 1270 <v-flex xs4 sm4 class="pt-4 subheading">
1259 <label class="right">Email ID:</label> 1271 <label class="right">Email ID:</label>
1260 </v-flex> 1272 </v-flex>
1261 <v-flex xs8 sm8 class="ml-3"> 1273 <v-flex xs8 sm8 class="ml-3">
1262 <v-text-field 1274 <v-text-field
1263 placeholder="fill your email" 1275 placeholder="fill your email"
1264 :rules="emailRules" 1276 :rules="emailRules"
1265 v-model="addStudents.email" 1277 v-model="addStudents.email"
1266 type="text" 1278 type="text"
1267 name="email" 1279 name="email"
1268 required 1280 required
1269 ></v-text-field> 1281 ></v-text-field>
1270 </v-flex> 1282 </v-flex>
1271 </v-layout> 1283 </v-layout>
1272 </v-flex> 1284 </v-flex>
1273 </v-layout> 1285 </v-layout>
1274 <v-layout wrap> 1286 <v-layout wrap>
1275 <v-flex xs12 sm6> 1287 <v-flex xs12 sm6>
1276 <v-layout> 1288 <v-layout>
1277 <v-flex xs4 sm4 class="pt-4 subheading"> 1289 <v-flex xs4 sm4 class="pt-4 subheading">
1278 <label 1290 <label
1279 class="right hidden-sm-only hidden-xs-only" 1291 class="right hidden-sm-only hidden-xs-only"
1280 >Date of Birth:</label> 1292 >Date of Birth:</label>
1281 <label 1293 <label
1282 class="right hidden-lg-only hidden-xl-only hidden-md-only" 1294 class="right hidden-lg-only hidden-xl-only hidden-md-only"
1283 >D.O.B:</label> 1295 >D.O.B:</label>
1284 </v-flex> 1296 </v-flex>
1285 <v-flex xs8 sm8 class="ml-3"> 1297 <v-flex xs8 sm8 class="ml-3">
1286 <v-menu 1298 <v-menu
1287 ref="menu" 1299 ref="menu"
1288 :close-on-content-click="false" 1300 :close-on-content-click="false"
1289 v-model="menu" 1301 v-model="menu"
1290 :nudge-right="40" 1302 :nudge-right="40"
1291 lazy 1303 lazy
1292 transition="scale-transition" 1304 transition="scale-transition"
1293 offset-y 1305 offset-y
1294 full-width 1306 full-width
1295 min-width="290px" 1307 min-width="290px"
1296 > 1308 >
1297 <v-text-field 1309 <v-text-field
1298 slot="activator" 1310 slot="activator"
1299 :rules="dateRules" 1311 :rules="dateRules"
1300 v-model="addStudents.date" 1312 v-model="addStudents.date"
1301 placeholder="Select date" 1313 placeholder="Select date"
1302 ></v-text-field> 1314 ></v-text-field>
1303 <v-date-picker 1315 <v-date-picker
1304 ref="picker" 1316 ref="picker"
1305 v-model="addStudents.date" 1317 v-model="addStudents.date"
1306 :max="new Date().toISOString().substr(0, 10)" 1318 :max="new Date().toISOString().substr(0, 10)"
1307 min="1950-01-01" 1319 min="1950-01-01"
1308 @input="menu = false" 1320 @input="menu = false"
1309 ></v-date-picker> 1321 ></v-date-picker>
1310 </v-menu> 1322 </v-menu>
1311 </v-flex> 1323 </v-flex>
1312 </v-layout> 1324 </v-layout>
1313 </v-flex> 1325 </v-flex>
1314 <v-flex xs12 sm6> 1326 <v-flex xs12 sm6>
1315 <v-layout> 1327 <v-layout>
1316 <v-flex xs4 class="pt-4 subheading"> 1328 <v-flex xs4 class="pt-4 subheading">
1317 <label class="right">City:</label> 1329 <label class="right">City:</label>
1318 </v-flex> 1330 </v-flex>
1319 <v-flex xs8 class="ml-3"> 1331 <v-flex xs8 class="ml-3">
1320 <v-text-field 1332 <v-text-field
1321 v-model="addStudents.city" 1333 v-model="addStudents.city"
1322 placeholder="fill your City Name" 1334 placeholder="fill your City Name"
1323 name="City" 1335 name="City"
1324 type="text" 1336 type="text"
1325 :rules="cityRules" 1337 :rules="cityRules"
1326 required 1338 required
1327 ></v-text-field> 1339 ></v-text-field>
1328 </v-flex> 1340 </v-flex>
1329 </v-layout> 1341 </v-layout>
1330 </v-flex> 1342 </v-flex>
1331 </v-layout> 1343 </v-layout>
1332 <v-layout wrap> 1344 <v-layout wrap>
1333 <v-flex xs12 sm6> 1345 <v-flex xs12 sm6>
1334 <v-layout> 1346 <v-layout>
1335 <v-flex xs4 class="pt-4 subheading"> 1347 <v-flex xs4 class="pt-4 subheading">
1336 <label class="right">State:</label> 1348 <label class="right">State:</label>
1337 </v-flex> 1349 </v-flex>
1338 <v-flex xs8 class="ml-3"> 1350 <v-flex xs8 class="ml-3">
1339 <v-text-field 1351 <v-text-field
1340 v-model="addStudents.state" 1352 v-model="addStudents.state"
1341 placeholder="fill your State Name" 1353 placeholder="fill your State Name"
1342 name="state" 1354 name="state"
1343 type="text" 1355 type="text"
1344 :rules="stateRules" 1356 :rules="stateRules"
1345 required 1357 required
1346 ></v-text-field> 1358 ></v-text-field>
1347 </v-flex> 1359 </v-flex>
1348 </v-layout> 1360 </v-layout>
1349 </v-flex> 1361 </v-flex>
1350 <v-flex xs12 sm6> 1362 <v-flex xs12 sm6>
1351 <v-layout> 1363 <v-layout>
1352 <v-flex xs4 class="pt-4 subheading"> 1364 <v-flex xs4 class="pt-4 subheading">
1353 <label class="right">Pincode:</label> 1365 <label class="right">Pincode:</label>
1354 </v-flex> 1366 </v-flex>
1355 <v-flex xs8 class="ml-3"> 1367 <v-flex xs8 class="ml-3">
1356 <v-text-field 1368 <v-text-field
1357 v-model="addStudents.pincode" 1369 v-model="addStudents.pincode"
1358 placeholder="fill your pincode" 1370 placeholder="fill your pincode"
1359 name="pincode" 1371 name="pincode"
1360 type="number" 1372 type="number"
1361 :rules="pincode" 1373 :rules="pincode"
1362 required 1374 required
1363 ></v-text-field> 1375 ></v-text-field>
1364 </v-flex> 1376 </v-flex>
1365 </v-layout> 1377 </v-layout>
1366 </v-flex> 1378 </v-flex>
1367 </v-layout> 1379 </v-layout>
1368 <v-layout wrap> 1380 <v-layout wrap>
1369 <v-flex xs12 sm6> 1381 <v-flex xs12 sm6>
1370 <v-layout> 1382 <v-layout>
1371 <v-flex xs4 class="pt-4 subheading"> 1383 <v-flex xs4 class="pt-4 subheading">
1372 <label class="right hidden-xs-only hidden-sm-only">Mobile No:</label> 1384 <label class="right hidden-xs-only hidden-sm-only">Mobile No:</label>
1373 <label 1385 <label
1374 class="right hidden-lg-only hidden-md-only hidden-xl-only" 1386 class="right hidden-lg-only hidden-md-only hidden-xl-only"
1375 >Mobile:</label> 1387 >Mobile:</label>
1376 </v-flex> 1388 </v-flex>
1377 <v-flex xs8 class="ml-3"> 1389 <v-flex xs8 class="ml-3">
1378 <v-text-field 1390 <v-text-field
1379 v-model="addStudents.mobile" 1391 v-model="addStudents.mobile"
1380 placeholder="fill your MobileNo" 1392 placeholder="fill your MobileNo"
1381 name="mobileNo" 1393 name="mobileNo"
1382 type="number" 1394 type="number"
1383 :rules="mobileNoRules" 1395 :rules="mobileNoRules"
1384 required 1396 required
1385 ></v-text-field> 1397 ></v-text-field>
1386 </v-flex> 1398 </v-flex>
1387 </v-layout> 1399 </v-layout>
1388 </v-flex> 1400 </v-flex>
1389 <v-flex xs12 sm6> 1401 <v-flex xs12 sm6>
1390 <v-layout> 1402 <v-layout>
1391 <v-flex xs4 class="pt-4 subheading"> 1403 <v-flex xs4 class="pt-4 subheading">
1392 <label 1404 <label
1393 class="right hidden-xs-only hidden-sm-only" 1405 class="right hidden-xs-only hidden-sm-only"
1394 >Select Country:</label> 1406 >Select Country:</label>
1395 <label 1407 <label
1396 class="right hidden-lg-only hidden-md-only hidden-xl-only" 1408 class="right hidden-lg-only hidden-md-only hidden-xl-only"
1397 >Country:</label> 1409 >Country:</label>
1398 </v-flex> 1410 </v-flex>
1399 <v-flex xs8 class="ml-3"> 1411 <v-flex xs8 class="ml-3">
1400 <v-autocomplete 1412 <v-autocomplete
1401 v-model="addStudents.country" 1413 v-model="addStudents.country"
1402 :rules="country" 1414 :rules="country"
1403 :items="countries" 1415 :items="countries"
1404 placeholder="Select Country Name" 1416 placeholder="Select Country Name"
1405 required 1417 required
1406 ></v-autocomplete> 1418 ></v-autocomplete>
1407 </v-flex> 1419 </v-flex>
1408 </v-layout> 1420 </v-layout>
1409 </v-flex> 1421 </v-flex>
1410 </v-layout> 1422 </v-layout>
1411 <v-layout wrap> 1423 <v-layout wrap>
1412 <v-flex xs12 sm6> 1424 <v-flex xs12 sm6>
1413 <v-layout> 1425 <v-layout>
1414 <v-flex xs4 class="pt-4 subheading"> 1426 <v-flex xs4 class="pt-4 subheading">
1415 <label class="right">Gender:</label> 1427 <label class="right">Gender:</label>
1416 </v-flex> 1428 </v-flex>
1417 <v-flex xs8 class="ml-3"> 1429 <v-flex xs8 class="ml-3">
1418 <v-select 1430 <v-select
1419 :items="gender" 1431 :items="gender"
1420 v-model="addStudents.gender" 1432 v-model="addStudents.gender"
1421 :rules="genderRules" 1433 :rules="genderRules"
1422 label="Select Gender" 1434 label="Select Gender"
1423 required 1435 required
1424 ></v-select> 1436 ></v-select>
1425 </v-flex> 1437 </v-flex>
1426 </v-layout> 1438 </v-layout>
1427 </v-flex> 1439 </v-flex>
1428 <v-flex xs12 sm6> 1440 <v-flex xs12 sm6>
1429 <v-layout> 1441 <v-layout>
1430 <v-flex xs4 class="pt-4 subheading"> 1442 <v-flex xs4 class="pt-4 subheading">
1431 <label class="right hidden-xs-only hidden-sm-only">Blood Group:</label> 1443 <label class="right hidden-xs-only hidden-sm-only">Blood Group:</label>
1432 <label 1444 <label
1433 class="right hidden-lg-only hidden-md-only hidden-xl-only" 1445 class="right hidden-lg-only hidden-md-only hidden-xl-only"
1434 >Blood:</label> 1446 >Blood:</label>
1435 </v-flex> 1447 </v-flex>
1436 <v-flex xs8 class="ml-3"> 1448 <v-flex xs8 class="ml-3">
1437 <v-text-field 1449 <v-text-field
1438 v-model="addStudents.bloodGroup" 1450 v-model="addStudents.bloodGroup"
1439 placeholder="Fill your Blood Group" 1451 placeholder="Fill your Blood Group"
1440 required 1452 required
1441 ></v-text-field> 1453 ></v-text-field>
1442 </v-flex> 1454 </v-flex>
1443 </v-layout> 1455 </v-layout>
1444 </v-flex> 1456 </v-flex>
1445 </v-layout> 1457 </v-layout>
1446 <v-layout wrap> 1458 <v-layout wrap>
1447 <v-flex xs12 sm6> 1459 <v-flex xs12 sm6>
1448 <v-layout> 1460 <v-layout>
1449 <v-flex xs4 class="pt-4 subheading"> 1461 <v-flex xs4 class="pt-4 subheading">
1450 <label class="right">Allergies:</label> 1462 <label class="right">Allergies:</label>
1451 </v-flex> 1463 </v-flex>
1452 <v-flex xs8 class="ml-3"> 1464 <v-flex xs8 class="ml-3">
1453 <v-text-field 1465 <v-text-field
1454 v-model="addStudents.allergies" 1466 v-model="addStudents.allergies"
1455 placeholder="Fill your Allergies" 1467 placeholder="Fill your Allergies"
1456 required 1468 required
1457 ></v-text-field> 1469 ></v-text-field>
1458 </v-flex> 1470 </v-flex>
1459 </v-layout> 1471 </v-layout>
1460 </v-flex> 1472 </v-flex>
1461 <v-flex xs12 sm6> 1473 <v-flex xs12 sm6>
1462 <v-layout> 1474 <v-layout>
1463 <v-flex xs4 class="pt-4 subheading"> 1475 <v-flex xs4 class="pt-4 subheading">
1464 <label 1476 <label
1465 class="right hidden-xs-only hidden-sm-only" 1477 class="right hidden-xs-only hidden-sm-only"
1466 >Medical Notes:</label> 1478 >Medical Notes:</label>
1467 <label 1479 <label
1468 class="right hidden-lg-only hidden-md-only hidden-xl-only" 1480 class="right hidden-lg-only hidden-md-only hidden-xl-only"
1469 >Medical:</label> 1481 >Medical:</label>
1470 </v-flex> 1482 </v-flex>
1471 <v-flex xs8 class="ml-3"> 1483 <v-flex xs8 class="ml-3">
1472 <v-text-field 1484 <v-text-field
1473 v-model="addStudents.medicalNotes" 1485 v-model="addStudents.medicalNotes"
1474 placeholder="Fill your Medical Notes" 1486 placeholder="Fill your Medical Notes"
1475 required 1487 required
1476 ></v-text-field> 1488 ></v-text-field>
1477 </v-flex> 1489 </v-flex>
1478 </v-layout> 1490 </v-layout>
1479 </v-flex> 1491 </v-flex>
1480 </v-layout> 1492 </v-layout>
1481 <v-layout wrap> 1493 <v-layout wrap>
1482 <v-flex xs12 sm6> 1494 <v-flex xs12 sm6>
1483 <v-layout> 1495 <v-layout>
1484 <v-flex xs4 class="pt-4 subheading"> 1496 <v-flex xs4 class="pt-4 subheading">
1485 <label class="right">Height:</label> 1497 <label class="right">Height:</label>
1486 </v-flex> 1498 </v-flex>
1487 <v-flex xs8 class="ml-3"> 1499 <v-flex xs8 class="ml-3">
1488 <v-text-field 1500 <v-text-field
1489 v-model="addStudents.height" 1501 v-model="addStudents.height"
1490 placeholder="Fill your Height" 1502 placeholder="Fill your Height"
1491 required 1503 required
1492 ></v-text-field> 1504 ></v-text-field>
1493 </v-flex> 1505 </v-flex>
1494 </v-layout> 1506 </v-layout>
1495 </v-flex> 1507 </v-flex>
1496 <v-flex xs12 sm6> 1508 <v-flex xs12 sm6>
1497 <v-layout> 1509 <v-layout>
1498 <v-flex xs4 class="pt-4 subheading"> 1510 <v-flex xs4 class="pt-4 subheading">
1499 <label class="right">Weight:</label> 1511 <label class="right">Weight:</label>
1500 </v-flex> 1512 </v-flex>
1501 <v-flex xs8 class="ml-3"> 1513 <v-flex xs8 class="ml-3">
1502 <v-text-field 1514 <v-text-field
1503 v-model="addStudents.weight" 1515 v-model="addStudents.weight"
1504 placeholder="Fill your Weight" 1516 placeholder="Fill your Weight"
1505 required 1517 required
1506 ></v-text-field> 1518 ></v-text-field>
1507 </v-flex> 1519 </v-flex>
1508 </v-layout> 1520 </v-layout>
1509 </v-flex> 1521 </v-flex>
1510 </v-layout> 1522 </v-layout>
1511 <v-layout wrap> 1523 <v-layout wrap>
1512 <v-flex xs12 sm6> 1524 <v-flex xs12 sm6>
1513 <v-layout> 1525 <v-layout>
1514 <v-flex xs4 class="pt-4 subheading"> 1526 <v-flex xs4 class="pt-4 subheading">
1515 <label class="right hidden-xs-only hidden-sm-only">Uplaod Image:</label> 1527 <label class="right hidden-xs-only hidden-sm-only">Uplaod Image:</label>
1516 <label 1528 <label
1517 class="right hidden-lg-only hidden-md-only hidden-xl-only" 1529 class="right hidden-lg-only hidden-md-only hidden-xl-only"
1518 >Uplaod :</label> 1530 >Uplaod :</label>
1519 </v-flex> 1531 </v-flex>
1520 <v-flex xs8 class="ml-3"> 1532 <v-flex xs8 class="ml-3">
1521 <v-text-field 1533 <v-text-field
1522 label="Select Image" 1534 label="Select Image"
1523 @click="pickFile" 1535 @click="pickFile"
1524 v-model="imageName" 1536 v-model="imageName"
1525 append-icon="attach_file" 1537 append-icon="attach_file"
1526 ></v-text-field> 1538 ></v-text-field>
1527 </v-flex> 1539 </v-flex>
1528 </v-layout> 1540 </v-layout>
1529 </v-flex> 1541 </v-flex>
1530 <v-flex xs12 sm6> 1542 <v-flex xs12 sm6>
1531 <v-layout> 1543 <v-layout>
1532 <v-flex xs4 class="pt-4 subheading"> 1544 <v-flex xs4 class="pt-4 subheading">
1533 <label 1545 <label
1534 class="right hidden-xs-only hidden-sm-only" 1546 class="right hidden-xs-only hidden-sm-only"
1535 >Academic Year:</label> 1547 >Academic Year:</label>
1536 <label 1548 <label
1537 class="right hidden-lg-only hidden-md-only hidden-xl-only" 1549 class="right hidden-lg-only hidden-md-only hidden-xl-only"
1538 >Year:</label> 1550 >Year:</label>
1539 </v-flex> 1551 </v-flex>
1540 <v-flex xs8 class="ml-3"> 1552 <v-flex xs8 class="ml-3">
1541 <v-text-field 1553 <v-text-field
1542 v-model="addStudents.establishmentYear" 1554 v-model="addStudents.establishmentYear"
1543 placeholder="fill your Academic Year" 1555 placeholder="fill your Academic Year"
1544 name="state" 1556 name="state"
1545 type="number" 1557 type="number"
1546 :rules="establishmentYearRules" 1558 :rules="establishmentYearRules"
1547 required 1559 required
1548 ></v-text-field> 1560 ></v-text-field>
1549 </v-flex> 1561 </v-flex>
1550 </v-layout> 1562 </v-layout>
1551 </v-flex> 1563 </v-flex>
1552 </v-layout> 1564 </v-layout>
1553 <v-layout wrap> 1565 <v-layout wrap>
1554 <v-flex xs12 sm6> 1566 <v-flex xs12 sm6>
1555 <v-layout> 1567 <v-layout>
1556 <v-flex xs4 class="pt-4 subheading"> 1568 <v-flex xs4 class="pt-4 subheading">
1557 <label class="right hidden-xs-only hidden-sm-only">Roll Number:</label> 1569 <label class="right hidden-xs-only hidden-sm-only">Roll Number:</label>
1558 <label 1570 <label
1559 class="right hidden-lg-only hidden-md-only hidden-xl-only" 1571 class="right hidden-lg-only hidden-md-only hidden-xl-only"
1560 >Roll No:</label> 1572 >Roll No:</label>
1561 </v-flex> 1573 </v-flex>
1562 <v-flex xs8 class="ml-3"> 1574 <v-flex xs8 class="ml-3">
1563 <v-text-field 1575 <v-text-field
1564 v-model="addStudents.rollNo" 1576 v-model="addStudents.rollNo"
1565 placeholder="Fill your Roll Number" 1577 placeholder="Fill your Roll Number"
1566 required 1578 required
1567 ></v-text-field> 1579 ></v-text-field>
1568 </v-flex> 1580 </v-flex>
1569 </v-layout> 1581 </v-layout>
1570 </v-flex> 1582 </v-flex>
1571 <v-flex xs12 sm6 class="hidden-xs-only hidden-sm-only"> 1583 <v-flex xs12 sm6 class="hidden-xs-only hidden-sm-only">
1572 <v-layout> 1584 <v-layout>
1573 <v-flex xs4 sm4 class="pt-4 subheading"> 1585 <v-flex xs4 sm4 class="pt-4 subheading">
1574 <label class="right pr-4">Present Address:</label> 1586 <label class="right pr-4">Present Address:</label>
1575 </v-flex> 1587 </v-flex>
1576 <v-flex xs8 sm8 class="ml-3"> 1588 <v-flex xs8 sm8 class="ml-3">
1577 <v-text-field 1589 <v-text-field
1578 name="input-4-3" 1590 name="input-4-3"
1579 v-model="addStudents.presentAddress" 1591 v-model="addStudents.presentAddress"
1580 :rules="presentAddress" 1592 :rules="presentAddress"
1581 placeholder="fill Your present Address" 1593 placeholder="fill Your present Address"
1582 required 1594 required
1583 ></v-text-field> 1595 ></v-text-field>
1584 </v-flex> 1596 </v-flex>
1585 </v-layout> 1597 </v-layout>
1586 </v-flex> 1598 </v-flex>
1587 </v-layout> 1599 </v-layout>
1588 <v-layout class="hidden-xs-only hidden-sm-only" wrap> 1600 <v-layout class="hidden-xs-only hidden-sm-only" wrap>
1589 <v-flex xs12 sm6> 1601 <v-flex xs12 sm6>
1590 <v-layout> 1602 <v-layout>
1591 <v-flex xs4 sm4 class="pt-4 subheading addressForm"> 1603 <v-flex xs4 sm4 class="pt-4 subheading addressForm">
1592 <label class="right">Permanent Address:</label> 1604 <label class="right">Permanent Address:</label>
1593 </v-flex> 1605 </v-flex>
1594 <v-flex xs12 sm8 class="ml-3"> 1606 <v-flex xs12 sm8 class="ml-3">
1595 <v-text-field 1607 <v-text-field
1596 name="input-4-3" 1608 name="input-4-3"
1597 v-model="addStudents.permanentAddress" 1609 v-model="addStudents.permanentAddress"
1598 :rules="permanentAddress" 1610 :rules="permanentAddress"
1599 placeholder="fill Your Permanent Address" 1611 placeholder="fill Your Permanent Address"
1600 required 1612 required
1601 ></v-text-field> 1613 ></v-text-field>
1602 </v-flex> 1614 </v-flex>
1603 </v-layout> 1615 </v-layout>
1604 </v-flex> 1616 </v-flex>
1605 </v-layout> 1617 </v-layout>
1606 <v-layout class="hidden-lg-only hidden-md-only hidden-xl-only" wrap> 1618 <v-layout class="hidden-lg-only hidden-md-only hidden-xl-only" wrap>
1607 <v-flex xs12 sm12> 1619 <v-flex xs12 sm12>
1608 <v-layout> 1620 <v-layout>
1609 <v-flex xs12 sm12 class="pt-4 subheading text-xs-center"> 1621 <v-flex xs12 sm12 class="pt-4 subheading text-xs-center">
1610 <label class>Present Address :</label> 1622 <label class>Present Address :</label>
1611 </v-flex> 1623 </v-flex>
1612 </v-layout> 1624 </v-layout>
1613 <v-layout> 1625 <v-layout>
1614 <v-flex xs12 sm12> 1626 <v-flex xs12 sm12>
1615 <v-textarea 1627 <v-textarea
1616 name="input-4-3" 1628 name="input-4-3"
1617 v-model="addStudents.presentAddress" 1629 v-model="addStudents.presentAddress"
1618 :rules="presentAddress" 1630 :rules="presentAddress"
1619 placeholder="fill Your present Address" 1631 placeholder="fill Your present Address"
1620 required 1632 required
1621 ></v-textarea> 1633 ></v-textarea>
1622 </v-flex> 1634 </v-flex>
1623 </v-layout> 1635 </v-layout>
1624 </v-flex> 1636 </v-flex>
1625 <v-flex xs12 sm12> 1637 <v-flex xs12 sm12>
1626 <v-layout> 1638 <v-layout>
1627 <v-flex 1639 <v-flex
1628 xs12 1640 xs12
1629 sm12 1641 sm12
1630 class="pt-4 pr-4 subheading text-xs-center addressForm" 1642 class="pt-4 pr-4 subheading text-xs-center addressForm"
1631 > 1643 >
1632 <label>Permanent addr:</label> 1644 <label>Permanent addr:</label>
1633 </v-flex> 1645 </v-flex>
1634 </v-layout> 1646 </v-layout>
1635 <v-layout> 1647 <v-layout>
1636 <v-flex xs12 sm12> 1648 <v-flex xs12 sm12>
1637 <v-textarea 1649 <v-textarea
1638 name="input-4-3" 1650 name="input-4-3"
1639 v-model="addStudents.permanentAddress" 1651 v-model="addStudents.permanentAddress"
1640 :rules="permanentAddress" 1652 :rules="permanentAddress"
1641 placeholder="fill Your Permanent Address" 1653 placeholder="fill Your Permanent Address"
1642 required 1654 required
1643 ></v-textarea> 1655 ></v-textarea>
1644 </v-flex> 1656 </v-flex>
1645 </v-layout> 1657 </v-layout>
1646 </v-flex> 1658 </v-flex>
1647 </v-layout> 1659 </v-layout>
1648 <v-layout> 1660 <v-layout>
1649 <v-flex xs12 sm12> 1661 <v-flex xs12 sm12>
1650 <v-layout> 1662 <v-layout>
1651 <v-flex xs6> 1663 <v-flex xs6>
1652 <v-btn round dark @click="e2 = 1">Back</v-btn> 1664 <v-btn round dark @click="e2 = 1">Back</v-btn>
1653 </v-flex> 1665 </v-flex>
1654 <v-flex xs6> 1666 <v-flex xs6>
1655 <v-btn 1667 <v-btn
1656 @click="submit" 1668 @click="submit"
1657 round 1669 round
1658 dark 1670 dark
1659 :loading="loading" 1671 :loading="loading"
1660 class="right" 1672 class="right"
1661 >Add</v-btn> 1673 >Add</v-btn>
1662 </v-flex> 1674 </v-flex>
1663 </v-layout> 1675 </v-layout>
1664 </v-flex> 1676 </v-flex>
1665 </v-layout> 1677 </v-layout>
1666 <!-- </v-container> -->
1667 </v-form> 1678 </v-form>
1668 </v-flex> 1679 </v-flex>
1669 <!-- </v-container> -->
1670 </v-stepper-content> 1680 </v-stepper-content>
1671 </v-stepper-items> 1681 </v-stepper-items>
1672 </v-stepper> 1682 </v-stepper>
1673 </v-app> 1683 </v-app>
1674 </div> 1684 </div>
1675 </v-flex> 1685 </v-flex>
1676 </v-layout> 1686 </v-layout>
1677 </v-container> 1687 </v-container>
1678 </v-tab-item> 1688 </v-tab-item>
1679 </v-tabs> 1689 </v-tabs>
1680 <div class="loader" v-if="showLoader"> 1690 <div class="loader" v-if="showLoader">
1681 <v-progress-circular indeterminate color="white"></v-progress-circular> 1691 <v-progress-circular indeterminate color="white"></v-progress-circular>
1682 </div> 1692 </div>
1683 </div> 1693 </div>
1684 </template> 1694 </template>
1685 1695
1686 <script> 1696 <script>
1687 import http from "@/Services/http.js"; 1697 import http from "@/Services/http.js";
1688 import Util from "@/util";
1689 import moment from "moment"; 1698 import moment from "moment";
1699 import countryList from "@/script/country.js";
1690 1700
1691 export default { 1701 export default {
1692 data: () => ({ 1702 data: () => ({
1693 e2: 0, 1703 e2: 0,
1694 showParent: true, 1704 showParent: true,
1695 showNext: false, 1705 showNext: false,
1696 snackbar: false, 1706 snackbar: false,
1697 y: "top", 1707 y: "top",
1698 x: "right", 1708 x: "right",
1699 mode: "", 1709 mode: "",
1700 timeout: 3000, 1710 timeout: 3000,
1701 text: "", 1711 text: "",
1702 showLoader: false, 1712 showLoader: false,
1703 loading: false, 1713 loading: false,
1704 date: null, 1714 date: null,
1705 search: "", 1715 search: "",
1706 menu: false, 1716 menu: false,
1707 menu1: false, 1717 menu1: false,
1708 dialog: false, 1718 dialog: false,
1709 dialog1: false, 1719 dialog1: false,
1710 valid: true, 1720 valid: true,
1711 isActive: true, 1721 isActive: true,
1712 newActive: false, 1722 newActive: false,
1713 addclass: [], 1723 addclass: [],
1714 addSection: [], 1724 addSection: [],
1715 gender: ["Male", "Female"], 1725 gender: ["Male", "Female"],
1716 AddUsercredentials: {},
1717 pagination: { 1726 pagination: {
1718 rowsPerPage: 15 1727 rowsPerPage: 15
1719 }, 1728 },
1720 imageData: {}, 1729 imageData: {},
1721 imageName: "", 1730 imageName: "",
1722 imageUrl: "", 1731 imageUrl: "",
1723 imageFile: "", 1732 imageFile: "",
1724 nameRules: [v => !!v || " Full Name is required"], 1733 nameRules: [v => !!v || " Full Name is required"],
1725 dateRules: [v => !!v || " DOB is required"], 1734 dateRules: [v => !!v || " DOB is required"],
1726 cityRules: [v => !!v || " City Name is required"], 1735 cityRules: [v => !!v || " City Name is required"],
1727 pincode: [v => !!v || " Pincode is required"], 1736 pincode: [v => !!v || " Pincode is required"],
1728 country: [v => !!v || " Country Name is required"], 1737 country: [v => !!v || " Country Name is required"],
1729 permanentAddress: [v => !!v || " Permanent Address is required"], 1738 permanentAddress: [v => !!v || " Permanent Address is required"],
1730 presentAddress: [v => !!v || " Present Address is required"], 1739 presentAddress: [v => !!v || " Present Address is required"],
1731 mobileNoRules: [v => !!v || "Mobile Number is required"], 1740 mobileNoRules: [v => !!v || "Mobile Number is required"],
1732 stateRules: [v => !!v || "State Name is required"], 1741 stateRules: [v => !!v || "State Name is required"],
1733 classRules: [v => !!v || " Class Name is required"], 1742 classRules: [v => !!v || " Class Name is required"],
1734 sectionRules: [v => !!v || " Section Name is required"], 1743 sectionRules: [v => !!v || " Section Name is required"],
1735 genderRules: [v => !!v || " Select Gender is required"], 1744 genderRules: [v => !!v || " Select Gender is required"],
1736 fatherNameRules: [v => !!v || " Father Name is required"], 1745 fatherNameRules: [v => !!v || " Father Name is required"],
1737 fatheCellNoRules: [v => !!v || " father Cell Number is required"], 1746 fatheCellNoRules: [v => !!v || " father Cell Number is required"],
1738 motherNameRules: [v => !!v || " Mother Name is required"], 1747 motherNameRules: [v => !!v || " Mother Name is required"],
1739 motherCellNoRules: [v => !!v || " Mother Cell Number is required"], 1748 motherCellNoRules: [v => !!v || " Mother Cell Number is required"],
1740 establishmentYearRules: [v => !!v || " Academic Year is required"], 1749 establishmentYearRules: [v => !!v || " Academic Year is required"],
1741 errorMessages: "", 1750 errorMessages: "",
1742 emailRules: [ 1751 emailRules: [
1743 v => !!v || "E-mail is required", 1752 v => !!v || "E-mail is required",
1744 v => 1753 v =>
1745 /^\w+([.-]?\w+)*@\w+([.-]?\w+)*(\.\w{2,3})+$/.test(v) || 1754 /^\w+([.-]?\w+)*@\w+([.-]?\w+)*(\.\w{2,3})+$/.test(v) ||
1746 "E-mail must be valid" 1755 "E-mail must be valid"
1747 ], 1756 ],
1748 countries: [ 1757 countries: [],
1749 "Afghanistan",
1750 "Albania",
1751 "Algeria",
1752 "Andorra",
1753 "Angola",
1754 "Anguilla",
1755 "Antigua &amp; Barbuda",
1756 "Argentina",
1757 "Armenia",
1758 "Aruba",
1759 "Australia",
1760 "Austria",
1761 "Azerbaijan",
1762 "Bahamas",
1763 "Bahrain",
1764 "Bangladesh",
1765 "Barbados",
1766 "Belarus",
1767 "Belgium",
1768 "Belize",
1769 "Benin",
1770 "Bermuda",
1771 "Bhutan",
1772 "Bolivia",
1773 "Bosnia &amp; Herzegovina",
1774 "Botswana",
1775 "Brazil",
1776 "British Virgin Islands",
1777 "Brunei",
1778 "Bulgaria",
1779 "Burkina Faso",
1780 "Burundi",
1781 "Cambodia",
1782 "Cameroon",
1783 "Cape Verde",
1784 "Cayman Islands",
1785 "Chad",
1786 "Chile",
1787 "China",
1788 "Colombia",
1789 "Congo",
1790 "Cook Islands",
1791 "Costa Rica",
1792 "Cote D Ivoire",
1793 "Croatia",
1794 "Cruise Ship",
1795 "Cuba",
1796 "Cyprus",
1797 "Czech Republic",
1798 "Denmark",
1799 "Djibouti",
1800 "Dominica",
1801 "Dominican Republic",
1802 "Ecuador",
1803 "Egypt",
1804 "El Salvador",
1805 "Equatorial Guinea",
1806 "Estonia",
1807 "Ethiopia",
1808 "Falkland Islands",
1809 "Faroe Islands",
1810 "Fiji",
1811 "Finland",
1812 "France",
1813 "French Polynesia",
1814 "French West Indies",
1815 "Gabon",
1816 "Gambia",
1817 "Georgia",
1818 "Germany",
1819 "Ghana",
1820 "Gibraltar",
1821 "Greece",
1822 "Greenland",
1823 "Grenada",
1824 "Guam",
1825 "Guatemala",
1826 "Guernsey",
1827 "Guinea",
1828 "Guinea Bissau",
1829 "Guyana",
1830 "Haiti",
1831 "Honduras",
1832 "Hong Kong",
1833 "Hungary",
1834 "Iceland",
1835 "India",
1836 "Indonesia",
1837 "Iran",
1838 "Iraq",
1839 "Ireland",
1840 "Isle of Man",
1841 "Israel",
1842 "Italy",
1843 "Jamaica",
1844 "Japan",
1845 "Jersey",
1846 "Jordan",
1847 "Kazakhstan",
1848 "Kenya",
1849 "Kuwait",
1850 "Kyrgyz Republic",
1851 "Laos",
1852 "Latvia",
1853 "Lebanon",
1854 "Lesotho",
1855 "Liberia",
1856 "Libya",
1857 "Liechtenstein",
1858 "Lithuania",
1859 "Luxembourg",
1860 "Macau",
1861 "Macedonia",
1862 "Madagascar",
1863 "Malawi",
1864 "Malaysia",
1865 "Maldives",
1866 "Mali",
1867 "Malta",
1868 "Mauritania",
1869 "Mauritius",
1870 "Mexico",
1871 "Moldova",
1872 "Monaco",
1873 "Mongolia",
1874 "Montenegro",
1875 "Montserrat",
1876 "Morocco",
1877 "Mozambique",
1878 "Namibia",
1879 "Nepal",
1880 "Netherlands",
1881 "Netherlands Antilles",
1882 "New Caledonia",
1883 "New Zealand",
1884 "Nicaragua",
1885 "Niger",
1886 "Nigeria",
1887 "Norway",
1888 "Oman",
1889 "Pakistan",
1890 "Palestine",
1891 "Panama",
1892 "Papua New Guinea",
1893 "Paraguay",
1894 "Peru",
1895 "Philippines",
1896 "Poland",
1897 "Portugal",
1898 "Puerto Rico",
1899 "Qatar",
1900 "Reunion",
1901 "Romania",
1902 "Russia",
1903 "Rwanda",
1904 "Saint Pierre &amp; Miquelon",
1905 "Samoa",
1906 "San Marino",
1907 "Satellite",
1908 "Saudi Arabia",
1909 "Senegal",
1910 "Serbia",
1911 "Seychelles",
1912 "Sierra Leone",
1913 "Singapore",
1914 "Slovakia",
1915 "Slovenia",
1916 "South Africa",
1917 "South Korea",
1918 "Spain",
1919 "Sri Lanka",
1920 "St Kitts &amp; Nevis",
1921 "St Lucia",
1922 "St Vincent",
1923 "St. Lucia",
1924 "Sudan",
1925 "Suriname",
1926 "Swaziland",
1927 "Sweden",
1928 "Switzerland",
1929 "Syria",
1930 "Taiwan",
1931 "Tajikistan",
1932 "Tanzania",
1933 "Thailand",
1934 "Timor L'Este",
1935 "Togo",
1936 "Tonga",
1937 "Trinidad &amp; Tobago",
1938 "Tunisia",
1939 "Turkey",
1940 "Turkmenistan",
1941 "Turks &amp; Caicos",
1942 "Uganda",
1943 "Ukraine",
1944 "United Arab Emirates",
1945 "United Kingdom",
1946 "United States",
1947 "Uruguay",
1948 "Uzbekistan",
1949 "Venezuela",
1950 "Vietnam",
1951 "Virgin Islands (US)",
1952 "Yemen",
1953 "Zambia",
1954 "Zimbabwe"
1955 ],
1956 headers: [ 1758 headers: [
1957 { 1759 {
1958 text: "Roll No.", 1760 text: "Roll No.",
1959 align: "center", 1761 align: "center",
1960 sortable: false, 1762 sortable: false,
1961 value: "rollNo" 1763 value: "rollNo"
1962 }, 1764 },
1963 { 1765 {
1964 text: "Profile Pic", 1766 text: "Profile Pic",
1965 value: "profilePicUrl", 1767 value: "profilePicUrl",
1966 sortable: false, 1768 sortable: false,
1967 align: "center" 1769 align: "center"
1968 }, 1770 },
1969 { text: "Name", value: "name", sortable: false, align: "center" }, 1771 { text: "Name", value: "name", sortable: false, align: "center" },
1970 { text: "Email", value: "email", sortable: false, align: "center" }, 1772 { text: "Email", value: "email", sortable: false, align: "center" },
1971 { text: "Dob", value: "dob", sortable: false, align: "center" }, 1773 { text: "Dob", value: "dob", sortable: false, align: "center" },
1972 { text: "Gender", value: "gender", sortable: false, align: "center" }, 1774 { text: "Gender", value: "gender", sortable: false, align: "center" },
1973 { 1775 {
1974 text: "Father Name", 1776 text: "Father Name",
1975 value: "fatherName", 1777 value: "fatherName",
1976 sortable: false, 1778 sortable: false,
1977 align: "center" 1779 align: "center"
1978 }, 1780 },
1979 { 1781 {
1980 text: "Mother Name", 1782 text: "Mother Name",
1981 value: "motherName", 1783 value: "motherName",
1982 sortable: false, 1784 sortable: false,
1983 align: "center" 1785 align: "center"
1984 }, 1786 },
1985 { 1787 {
1986 text: "Academic Year", 1788 text: "Academic Year",
1987 value: "establishmentYear", 1789 value: "establishmentYear",
1988 sortable: false, 1790 sortable: false,
1989 align: "center" 1791 align: "center"
1990 }, 1792 },
1991 { text: "Mobile No", value: "mobile", sortable: false, align: "center" }, 1793 { text: "Mobile No", value: "mobile", sortable: false, align: "center" },
1992 { text: "Action", value: "", sortable: false, align: "center" } 1794 { text: "Action", value: "", sortable: false, align: "center" }
1993 ], 1795 ],
1994 desserts: [], 1796 desserts: [],
1995 parentId: "", 1797 parentId: "",
1996 editedIndex: -1, 1798 editedIndex: -1,
1997 parentData: {}, 1799 parentData: {},
1998 addStudents: { 1800 addStudents: {
1999 role: "STUDENT", 1801 role: "STUDENT",
2000 name: "", 1802 name: "",
2001 email: "", 1803 email: "",
2002 date: "", 1804 date: "",
2003 city: "", 1805 city: "",
2004 pincode: "", 1806 pincode: "",
2005 country: "", 1807 country: "",
2006 permanentAddress: "", 1808 permanentAddress: "",
2007 presentAddress: "", 1809 presentAddress: "",
2008 mobile: "", 1810 mobile: "",
2009 state: "", 1811 state: "",
2010 gender: "", 1812 gender: "",
2011 select: "", 1813 select: "",
2012 selectSection: "", 1814 selectSection: "",
2013 bloodGroup: "", 1815 bloodGroup: "",
2014 allergies: "", 1816 allergies: "",
2015 medicalNotes: "", 1817 medicalNotes: "",
2016 height: "", 1818 height: "",
2017 weight: "", 1819 weight: "",
2018 rollNo: "", 1820 rollNo: "",
2019 establishmentYear: new Date().getFullYear() 1821 establishmentYear: new Date().getFullYear()
2020 }, 1822 },
2021 selectStudents: { 1823 selectStudents: {
2022 select: "", 1824 select: "",
2023 selectSection: "" 1825 selectSection: ""
2024 }, 1826 },
2025 editedItem: { 1827 editedItem: {
2026 role: "STUDENT", 1828 role: "STUDENT",
2027 name: "", 1829 name: "",
2028 email: "", 1830 email: "",
2029 dob: "", 1831 dob: "",
2030 city: "", 1832 city: "",
2031 pincode: "", 1833 pincode: "",
2032 country: "", 1834 country: "",
2033 permanentAddress: "", 1835 permanentAddress: "",
2034 presentAddress: "", 1836 presentAddress: "",
2035 mobile: "", 1837 mobile: "",
2036 state: "", 1838 state: "",
2037 gender: "", 1839 gender: "",
2038 select: "", 1840 select: "",
2039 selectSection: "", 1841 selectSection: "",
2040 bloodGroup: "", 1842 bloodGroup: "",
2041 allergies: "", 1843 allergies: "",
2042 medicalNotes: "", 1844 medicalNotes: "",
2043 height: "", 1845 height: "",
2044 weight: "", 1846 weight: "",
2045 rollNo: "", 1847 rollNo: "",
2046 establishmentYear: new Date().getFullYear() 1848 establishmentYear: new Date().getFullYear()
2047 }, 1849 },
2048 defaultItem: {
2049 role: "STUDENT",
2050 name: "",
2051 email: ""
2052 }
2053 }), 1850 }),
2054 watch: { 1851 watch: {
2055 menu(val) { 1852 menu(val) {
2056 val && this.$nextTick(() => (this.$refs.picker.activePicker = "YEAR")); 1853 val && this.$nextTick(() => (this.$refs.picker.activePicker = "YEAR"));
2057 }, 1854 },
2058 menu1(val) { 1855 menu1(val) {
2059 val && this.$nextTick(() => (this.$refs.picker.activePicker = "YEAR")); 1856 val && this.$nextTick(() => (this.$refs.picker.activePicker = "YEAR"));
2060 } 1857 }
2061 }, 1858 },
2062 methods: { 1859 methods: {
2063 findStudents() { 1860 findStudents() {
2064 this.showLoader = true; 1861 this.showLoader = true;
2065 http() 1862 http()
2066 .get("/getStudentWithClass", { 1863 .get("/getStudentWithClass", {
2067 params: { 1864 params: {
2068 classId: this.selectStudents.select, 1865 classId: this.selectStudents.select,
2069 sectionId: this.selectStudents.selectSection 1866 sectionId: this.selectStudents.selectSection
2070 } 1867 }
2071 }) 1868 })
2072 .then(response => { 1869 .then(response => {
2073 this.desserts = response.data.data; 1870 this.desserts = response.data.data;
2074 this.showLoader = false; 1871 this.showLoader = false;
2075 console.log("getSectionsList=====>", this.addSection); 1872 console.log("getSectionsList=====>", this.addSection);
2076 }) 1873 })
2077 .catch(err => { 1874 .catch(err => {
2078 console.log("err====>", err); 1875 console.log("err====>", err);
2079 this.showLoader = false; 1876 this.showLoader = false;
2080 }); 1877 });
2081 }, 1878 },
2082 getSections(_id) { 1879 getSections(_id) {
2083 var token = this.$store.state.token; 1880 var token = this.$store.state.token;
2084 http() 1881 http()
2085 .get( 1882 .get(
2086 "/getSectionsList", 1883 "/getSectionsList",
2087 { params: { classId: _id } }, 1884 { params: { classId: _id } },
2088 { 1885 {
2089 headers: { Authorization: "Bearer " + token } 1886 headers: { Authorization: "Bearer " + token }
2090 } 1887 }
2091 ) 1888 )
2092 .then(response => { 1889 .then(response => {
2093 this.addSection = response.data.data; 1890 this.addSection = response.data.data;
2094 console.log("getSectionsList=====>", this.addSection); 1891 console.log("getSectionsList=====>", this.addSection);
2095 }) 1892 })
2096 .catch(err => { 1893 .catch(err => {
2097 // console.log("err====>", err); 1894 // console.log("err====>", err);
2098 // this.$router.replace({ path: '/' }); 1895 // this.$router.replace({ path: '/' });
2099 }); 1896 });
2100 }, 1897 },
2101 getSection(_id) { 1898 getSection(_id) {
2102 var token = this.$store.state.token; 1899 var token = this.$store.state.token;
2103 http() 1900 http()
2104 .get( 1901 .get(
2105 "/getSectionsList", 1902 "/getSectionsList",
2106 { params: { classId: _id } }, 1903 { params: { classId: _id } },
2107 { 1904 {
2108 headers: { Authorization: "Bearer " + token } 1905 headers: { Authorization: "Bearer " + token }
2109 } 1906 }
2110 ) 1907 )
2111 .then(response => { 1908 .then(response => {
2112 this.addSection = response.data.data; 1909 this.addSection = response.data.data;
2113 console.log("getSectionsList=====>", this.addSection); 1910 console.log("getSectionsList=====>", this.addSection);
2114 }) 1911 })
2115 .catch(err => { 1912 .catch(err => {
2116 // console.log("err====>", err); 1913 // console.log("err====>", err);
2117 // this.$router.replace({ path: '/' }); 1914 // this.$router.replace({ path: '/' });
2118 }); 1915 });
2119 }, 1916 },
2120 pickFile() { 1917 pickFile() {
2121 this.$refs.image.click(); 1918 this.$refs.image.click();
2122 }, 1919 },
2123 dates: function(date) { 1920 dates: function(date) {
2124 return moment(date).format("MMMM DD, YYYY"); 1921 return moment(date).format("MMMM DD, YYYY");
2125 }, 1922 },
2126 onFilePicked(e) { 1923 onFilePicked(e) {
2127 // console.log(e) 1924 // console.log(e)
2128 const files = e.target.files; 1925 const files = e.target.files;
2129 this.imageData.upload = e.target.files[0]; 1926 this.imageData.upload = e.target.files[0];
2130 if (files[0] !== undefined) { 1927 if (files[0] !== undefined) {
2131 this.imageName = files[0].name; 1928 this.imageName = files[0].name;
2132 if (this.imageName.lastIndexOf(".") <= 0) { 1929 if (this.imageName.lastIndexOf(".") <= 0) {
2133 return; 1930 return;
2134 } 1931 }
2135 const fr = new FileReader(); 1932 const fr = new FileReader();
2136 fr.readAsDataURL(files[0]); 1933 fr.readAsDataURL(files[0]);
2137 fr.addEventListener("load", () => { 1934 fr.addEventListener("load", () => {
2138 this.imageUrl = fr.result; 1935 this.imageUrl = fr.result;
2139 this.imageFile = files[0]; // this is an image file that can be sent to server... 1936 this.imageFile = files[0]; // this is an image file that can be sent to server...
2140 this.imageData.imageUrl = URL.createObjectURL(this.imageFile); 1937 this.imageData.imageUrl = URL.createObjectURL(this.imageFile);
2141 }); 1938 });
2142 } else { 1939 } else {
2143 this.imageName = ""; 1940 this.imageName = "";
2144 this.imageFile = ""; 1941 this.imageFile = "";
2145 this.imageUrl = ""; 1942 this.imageUrl = "";
2146 } 1943 }
2147 }, 1944 },
2148 // getStudentList() { 1945 // getStudentList() {
2149 // this.showLoader = true; 1946 // this.showLoader = true;
2150 // var token = this.$store.state.token; 1947 // var token = this.$store.state.token;
2151 // http() 1948 // http()
2152 // .get("/getStudentsList", { 1949 // .get("/getStudentsList", {
2153 // headers: { Authorization: "Bearer " + token } 1950 // headers: { Authorization: "Bearer " + token }
2154 // }) 1951 // })
2155 // .then(response => { 1952 // .then(response => {
2156 // this.desserts = response.data.data; 1953 // this.desserts = response.data.data;
2157 // this.showLoader = false; 1954 // this.showLoader = false;
2158 // // console.log("getStudentList=====>",this.desserts) 1955 // // console.log("getStudentList=====>",this.desserts)
2159 // }) 1956 // })
2160 // .catch(err => { 1957 // .catch(err => {
2161 // // console.log("err====>", err); 1958 // // console.log("err====>", err);
2162 // this.showLoader = false; 1959 // this.showLoader = false;
2163 // this.$router.replace({ path: "/" }); 1960 // this.$router.replace({ path: "/" });
2164 // }); 1961 // });
2165 // }, 1962 // },
2166 editItem(item) { 1963 editItem(item) {
2167 this.editedIndex = this.desserts.indexOf(item); 1964 this.editedIndex = this.desserts.indexOf(item);
2168 this.editedItem = Object.assign({}, item); 1965 this.editedItem = Object.assign({}, item);
2169 this.editedItem.fatherName = item.parentId.fatherName; 1966 this.editedItem.fatherName = item.parentId.fatherName;
2170 this.editedItem.fatherCellNo = item.parentId.fatherCellNo; 1967 this.editedItem.fatherCellNo = item.parentId.fatherCellNo;
2171 this.editedItem.motherName = item.parentId.motherName; 1968 this.editedItem.motherName = item.parentId.motherName;
2172 this.editedItem.motherCellNo = item.parentId.motherCellNo; 1969 this.editedItem.motherCellNo = item.parentId.motherCellNo;
2173 // if(this.editedItem.dob != undefined){ 1970 // if(this.editedItem.dob != undefined){
2174 // this.editedItem.dob = this.editedItem.dob.substring(0, 10) 1971 // this.editedItem.dob = this.editedItem.dob.substring(0, 10)
2175 // }else if(this.editedItem.dob = undefined){ 1972 // }else if(this.editedItem.dob = undefined){
2176 // this.editedItem.dob = '' 1973 // this.editedItem.dob = ''
2177 // } 1974 // }
2178 this.editedItem.dob = 1975 this.editedItem.dob =
2179 this.editedItem.dob != undefined 1976 this.editedItem.dob != undefined
2180 ? (this.editedItem.dob = this.editedItem.dob.substring(0, 10)) 1977 ? (this.editedItem.dob = this.editedItem.dob.substring(0, 10))
2181 : (this.editedItem.dob = ""); 1978 : (this.editedItem.dob = "");
2182 this.dialog = true; 1979 this.dialog = true;
2183 }, 1980 },
2184 profile(item) { 1981 profile(item) {
2185 console.log("item", item); 1982 console.log("item", item);
2186 this.editedIndex = this.desserts.indexOf(item); 1983 this.editedIndex = this.desserts.indexOf(item);
2187 this.editedItem = Object.assign({}, item); 1984 this.editedItem = Object.assign({}, item);
2188 this.editedItem.fatherName = item.parentId.fatherName; 1985 this.editedItem.fatherName = item.parentId.fatherName;
2189 this.editedItem.fatherCellNo = item.parentId.fatherCellNo; 1986 this.editedItem.fatherCellNo = item.parentId.fatherCellNo;
2190 this.editedItem.motherName = item.parentId.motherName; 1987 this.editedItem.motherName = item.parentId.motherName;
2191 this.editedItem.motherCellNo = item.parentId.motherCellNo; 1988 this.editedItem.motherCellNo = item.parentId.motherCellNo;
2192 1989
2193 this.dialog1 = true; 1990 this.dialog1 = true;
2194 }, 1991 },
2195 deleteItem(item) { 1992 deleteItem(item) {
2196 let deleteStudent = { 1993 let deleteStudent = {
2197 studentId: item._id 1994 studentId: item._id
2198 }; 1995 };
2199 http() 1996 http()
2200 .delete( 1997 .delete(
2201 "/deleteStudent", 1998 "/deleteStudent",
2202 confirm("Are you sure you want to delete this?") && { 1999 confirm("Are you sure you want to delete this?") && {
2203 params: deleteStudent 2000 params: deleteStudent
2204 } 2001 }
2205 ) 2002 )
2206 .then(response => { 2003 .then(response => {
2207 // console.log("deleteUers",deleteStudent) 2004 // console.log("deleteUers",deleteStudent)
2208 if ((this.snackbar = true)) { 2005 if ((this.snackbar = true)) {
2209 this.text = "Successfully delete Existing Student"; 2006 this.text = "Successfully delete Existing Student";
2210 } 2007 }
2211 this.getStudentList(); 2008 this.getStudentList();
2212 }) 2009 })
2213 .catch(error => { 2010 .catch(error => {
2214 // console.log(error); 2011 // console.log(error);
2215 }); 2012 });
2216 }, 2013 },
2217 activeTab(type) { 2014 activeTab(type) {
2218 switch (type) { 2015 switch (type) {
2219 case "existing": 2016 case "existing":
2220 this.newActive = false; 2017 this.newActive = false;
2221 this.isActive = true; 2018 this.isActive = true;
2222 break; 2019 break;
2223 2020
2224 default: 2021 default:
2225 this.newActive = true; 2022 this.newActive = true;
2226 this.isActive = false; 2023 this.isActive = false;
2227 break; 2024 break;
2228 } 2025 }
2229 }, 2026 },
2230 close() { 2027 close() {
2231 this.dialog = false; 2028 this.dialog = false;
2232 setTimeout(() => { 2029 setTimeout(() => {
2233 this.editedItem = Object.assign({}, this.defaultItem); 2030 this.editedItem = Object.assign({}, this.defaultItem);
2234 this.editedIndex = -1; 2031 this.editedIndex = -1;
2235 }, 300); 2032 }, 300);
2236 }, 2033 },
2237 close1() { 2034 close1() {
2238 this.dialog1 = false; 2035 this.dialog1 = false;
2239 }, 2036 },
2240 submit() { 2037 submit() {
2241 if (this.$refs.form.validate()) { 2038 if (this.$refs.form.validate()) {
2242 let addStudent = { 2039 let addStudent = {
2243 parentId: this.parentId, 2040 parentId: this.parentId,
2244 name: this.addStudents.name, 2041 name: this.addStudents.name,
2245 email: this.addStudents.email, 2042 email: this.addStudents.email,
2246 role: this.addStudents.role, 2043 role: this.addStudents.role,
2247 dob: this.addStudents.date, 2044 dob: this.addStudents.date,
2248 city: this.addStudents.city, 2045 city: this.addStudents.city,
2249 pincode: this.addStudents.pincode, 2046 pincode: this.addStudents.pincode,
2250 country: this.addStudents.country, 2047 country: this.addStudents.country,
2251 permanentAddress: this.addStudents.permanentAddress, 2048 permanentAddress: this.addStudents.permanentAddress,
2252 presentAddress: this.addStudents.presentAddress, 2049 presentAddress: this.addStudents.presentAddress,
2253 mobile: this.addStudents.mobile, 2050 mobile: this.addStudents.mobile,
2254 state: this.addStudents.state, 2051 state: this.addStudents.state,
2255 gender: this.addStudents.gender, 2052 gender: this.addStudents.gender,
2256 establishmentYear: this.addStudents.establishmentYear, 2053 establishmentYear: this.addStudents.establishmentYear,
2257 classId: this.addStudents.select, 2054 classId: this.addStudents.select,
2258 sectionId: this.addStudents.selectSection, 2055 sectionId: this.addStudents.selectSection,
2259 bloodGroup: this.addStudents.bloodGroup, 2056 bloodGroup: this.addStudents.bloodGroup,
2260 allergies: this.addStudents.allergies, 2057 allergies: this.addStudents.allergies,
2261 medicalNotes: this.addStudents.medicalNotes, 2058 medicalNotes: this.addStudents.medicalNotes,
2262 height: this.addStudents.height, 2059 height: this.addStudents.height,
2263 weight: this.addStudents.weight, 2060 weight: this.addStudents.weight,
2264 rollNo: this.addStudents.rollNo 2061 rollNo: this.addStudents.rollNo
2265 }; 2062 };
2266 if (this.imageUrl) { 2063 if (this.imageUrl) {
2267 var str = this.imageUrl; 2064 var str = this.imageUrl;
2268 const [baseUrl, imageUrl] = str.split(/,/); 2065 const [baseUrl, imageUrl] = str.split(/,/);
2269 addStudent.upload = imageUrl; 2066 addStudent.upload = imageUrl;
2270 } 2067 }
2271 this.loading = true; 2068 this.loading = true;
2272 http() 2069 http()
2273 .post("/createStudent", addStudent) 2070 .post("/createStudent", addStudent)
2274 .then(response => { 2071 .then(response => {
2275 console.log(addStudent); 2072 console.log(addStudent);
2276 if ((this.snackbar = true)) { 2073 if ((this.snackbar = true)) {
2277 this.text = "New Student added successfully"; 2074 this.text = "New Student added successfully";
2278 } 2075 }
2279 // this.getStudentList(); 2076 // this.getStudentList();
2280 this.clear(); 2077 this.clear();
2281 this.loading = false; 2078 this.loading = false;
2282 }) 2079 })
2283 .catch(error => { 2080 .catch(error => {
2284 // console.log(error); 2081 // console.log(error);
2285 if ((this.snackbar = true)) { 2082 if ((this.snackbar = true)) {
2286 this.text = error.response.data.message; 2083 this.text = error.response.data.message;
2287 } 2084 }
2288 this.loading = false; 2085 this.loading = false;
2289 }); 2086 });
2290 } 2087 }
2291 }, 2088 },
2292 clear() { 2089 clear() {
2293 this.$refs.form.reset(); 2090 this.$refs.form.reset();
2294 this.imageUrl = ""; 2091 this.imageUrl = "";
2295 }, 2092 },
2296 save() { 2093 save() {
2297 let editStudent = { 2094 let editStudent = {
2298 studentId: this.editedItem._id, 2095 studentId: this.editedItem._id,
2299 name: this.editedItem.name, 2096 name: this.editedItem.name,
2300 email: this.editedItem.email, 2097 email: this.editedItem.email,
2301 role: this.editedItem.role, 2098 role: this.editedItem.role,
2302 dob: this.editedItem.dob, 2099 dob: this.editedItem.dob,
2303 city: this.editedItem.city, 2100 city: this.editedItem.city,
2304 pincode: this.editedItem.pincode, 2101 pincode: this.editedItem.pincode,
2305 country: this.editedItem.country, 2102 country: this.editedItem.country,
2306 permanentAddress: this.editedItem.permanentAddress, 2103 permanentAddress: this.editedItem.permanentAddress,
2307 presentAddress: this.editedItem.presentAddress, 2104 presentAddress: this.editedItem.presentAddress,
2308 mobile: this.editedItem.mobile, 2105 mobile: this.editedItem.mobile,
2309 state: this.editedItem.state, 2106 state: this.editedItem.state,
2310 gender: this.editedItem.gender, 2107 gender: this.editedItem.gender,
2311 establishmentYear: this.editedItem.establishmentYear, 2108 establishmentYear: this.editedItem.establishmentYear,
2312 classId: this.editedItem.select, 2109 classId: this.editedItem.select,
2313 sectionId: this.editedItem.selectSection, 2110 sectionId: this.editedItem.selectSection,
2314 bloodGroup: this.editedItem.bloodGroup, 2111 bloodGroup: this.editedItem.bloodGroup,
2315 allergies: this.editedItem.allergies, 2112 allergies: this.editedItem.allergies,
2316 medicalNotes: this.editedItem.medicalNotes, 2113 medicalNotes: this.editedItem.medicalNotes,
2317 height: this.editedItem.height, 2114 height: this.editedItem.height,
2318 weight: this.editedItem.weight, 2115 weight: this.editedItem.weight,
2319 rollNo: this.editedItem.rollNo 2116 rollNo: this.editedItem.rollNo
2320 }; 2117 };
2321 if (this.imageUrl) { 2118 if (this.imageUrl) {
2322 var str = this.imageUrl; 2119 var str = this.imageUrl;
2323 const [baseUrl, imageUrl] = str.split(/,/); 2120 const [baseUrl, imageUrl] = str.split(/,/);
2324 editStudent.upload = imageUrl; 2121 editStudent.upload = imageUrl;
2325 } 2122 }
2326 http() 2123 http()
2327 .put("/updateStudent", editStudent) 2124 .put("/updateStudent", editStudent)
2328 .then(response => { 2125 .then(response => {
2329 this.snackbar = true; 2126 this.snackbar = true;
2330 this.text = "Successfully Student Existing User"; 2127 this.text = "Successfully Student Existing User";
2331 this.imageUrl = ""; 2128 this.imageUrl = "";
2332 this.findStudents(); 2129 this.findStudents();
2333 this.close(); 2130 this.close();
2334 }) 2131 })
2335 .catch(error => { 2132 .catch(error => {
2336 // console.log(error); 2133 // console.log(error);
2337 if ((this.snackbar = true)) { 2134 if ((this.snackbar = true)) {
2338 this.text = error.response.data.statusText; 2135 this.text = error.response.data.statusText;
2339 } 2136 }
2340 }); 2137 });
2341 }, 2138 },
2342 submitParentDetails() { 2139 submitParentDetails() {
2343 if (this.$refs.parentForm.validate()) { 2140 if (this.$refs.parentForm.validate()) {
2344 let addparentDetails = { 2141 let addparentDetails = {
2345 email: this.parentData.email, 2142 email: this.parentData.email,
2346 fatherName: this.parentData.fatherName, 2143 fatherName: this.parentData.fatherName,
2347 fatherCellNo: this.parentData.fatherCellNo, 2144 fatherCellNo: this.parentData.fatherCellNo,
2348 motherName: this.parentData.motherName, 2145 motherName: this.parentData.motherName,
2349 motherCellNo: this.parentData.motherCellNo, 2146 motherCellNo: this.parentData.motherCellNo,
2350 role: "PARENT" 2147 role: "PARENT"
2351 }; 2148 };
2352 this.loading = true; 2149 this.loading = true;
2353 http() 2150 http()
2354 .post("/createParent", addparentDetails) 2151 .post("/createParent", addparentDetails)
2355 .then(response => { 2152 .then(response => {
2356 this.parentId = response.data.data.id; 2153 this.parentId = response.data.data.id;
2357 this.e2 = 2; 2154 this.e2 = 2;
2358 if ((this.snackbar = true)) { 2155 if ((this.snackbar = true)) {
2359 this.text = "successfully"; 2156 this.text = "successfully";
2360 } 2157 }
2361 // this.getStudentList(); 2158 // this.getStudentList();
2362 this.clear(); 2159 this.clear();
2363 this.loading = false; 2160 this.loading = false;
2364 }) 2161 })
2365 .catch(error => { 2162 .catch(error => {
2366 console.log(error.response.data); 2163 console.log(error.response.data);
2367 if ((this.snackbar = true)) { 2164 if ((this.snackbar = true)) {
2368 this.text = error.response.data.message; 2165 this.text = error.response.data.message;
2369 this.text = error.response.data.statusText; 2166 this.text = error.response.data.statusText;
2370 } 2167 }
2371 this.loading = false; 2168 this.loading = false;
2372 }); 2169 });
2373 } 2170 }
2374 }, 2171 },
2375 getParentDetails() { 2172 getParentDetails() {
2376 if (this.parentData.email) { 2173 if (this.parentData.email) {
2377 http() 2174 http()
2378 .get("getParticularParent", { 2175 .get("getParticularParent", {
2379 params: { email: this.parentData.email }, 2176 params: { email: this.parentData.email },
2380 headers: { 2177 headers: {
2381 Authorization: "Bearer " + this.$store.state.token 2178 Authorization: "Bearer " + this.$store.state.token
2382 } 2179 }
2383 }) 2180 })
2384 .then(response => { 2181 .then(response => {
2385 this.showNext = true; 2182 this.showNext = true;
2386 this.showParent = false; 2183 this.showParent = false;
2387 this.parentData = response.data.data; 2184 this.parentData = response.data.data;
2388 this.parentId = response.data.data._id; 2185 this.parentId = response.data.data._id;
2389 }) 2186 })
2390 .catch(error => { 2187 .catch(error => {
2391 console.log("err====>", error.response.data.message); 2188 console.log("err====>", error.response.data.message);
2392 }); 2189 });
2393 } 2190 }
2394 } 2191 }
2395 }, 2192 },
2396 mounted() { 2193 mounted() {
2397 // this.getStudentList(); 2194 const getCountryList = countryList();
2195 this.countries = getCountryList;
2398 var token = this.$store.state.token; 2196 var token = this.$store.state.token;
2399 http() 2197 http()
2400 .get("/getClassesList", { 2198 .get("/getClassesList", {
2401 headers: { Authorization: "Bearer " + token } 2199 headers: { Authorization: "Bearer " + token }
2402 }) 2200 })
2403 .then(response => { 2201 .then(response => {
2404 this.addclass = response.data.data; 2202 this.addclass = response.data.data;
2405 }) 2203 })
2406 .catch(err => { 2204 .catch(err => {
2407 // console.log("err====>", err); 2205 // console.log("err====>", err);
2408 this.$router.replace({ path: "/" }); 2206 this.$router.replace({ path: "/" });
2409 }); 2207 });
2410 }, 2208 },
2411 created() { 2209 created() {
2412 this.$root.$on("app:search", search => { 2210 this.$root.$on("app:search", search => {
2413 this.search = search; 2211 this.search = search;
2414 }); 2212 });
2415 }, 2213 },
2416 beforeDestroy() { 2214 beforeDestroy() {
src/pages/Subjects/subjects.vue
Diff comments   View file @495e403
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>
46 <v-flex xs6 class="ml-3">
47 <v-select
48 :items="classList"
49 label="Select Class"
50 v-model="addSubject.selectName"
51 item-text="classNum"
52 item-value="_id"
53 name="Select Class"
54 :rules="nameRules"
55 required
56 ></v-select>
57 </v-flex>
58 </v-layout>
59 <v-layout>
60 <v-flex xs4 class="pt-4 subheading">
61 <label class="right">Subject:</label>
62 </v-flex>
63 <v-flex xs6 class="ml-3">
64 <v-text-field
65 placeholder="fill your Subject"
66 v-model="editedItem.subjectName"
67 type="text"
68 name="email"
69 required
70 ></v-text-field>
71 </v-flex>
72 </v-layout>
73 <v-flex xs12 sm9 offset-sm2>
74 <v-card-actions>
75 <v-btn round dark @click.native="close">Cancel</v-btn>
76 <v-spacer></v-spacer>
77 <v-btn round dark @click="save">Save</v-btn>
78 </v-card-actions>
79 </v-flex> 45 </v-flex>
80 </v-container> 46 <v-flex xs6 class="ml-3">
47 <v-select
48 :items="classList"
49 label="Select Class"
50 v-model="addSubject.selectName"
51 item-text="classNum"
52 item-value="_id"
53 name="Select Class"
54 :rules="nameRules"
55 required
56 ></v-select>
57 </v-flex>
58 </v-layout>
59 <v-layout>
60 <v-flex xs4 class="pt-4 subheading">
61 <label class="right">Subject:</label>
62 </v-flex>
63 <v-flex xs6 class="ml-3">
64 <v-text-field
65 placeholder="fill your Subject"
66 v-model="editedItem.subjectName"
67 type="text"
68 name="email"
69 required
70 ></v-text-field>
71 </v-flex>
72 </v-layout>
73 <v-flex xs12 sm9 offset-sm2>
74 <v-card-actions>
75 <v-btn round dark @click.native="close">Cancel</v-btn>
76 <v-spacer></v-spacer>
77 <v-btn round dark @click="save">Save</v-btn>
78 </v-card-actions>
79 </v-flex>
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 sm1> 131 <v-flex xs4 sm1>
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 sm3 > 134 <v-flex xs8 sm3>
135 <v-select 135 <v-select
136 :items="classList" 136 :items="classList"
137 label="Select Class" 137 label="Select Class"
138 v-model="addSubject.selectName" 138 v-model="addSubject.selectName"
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(addSubject.selectName)" 143 @change="getClassSubject(addSubject.selectName)"
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 <img 163 <v-tooltip top>
164 style="cursor:pointer; width:25px; height:18px; " 164 <img
165 class="mr-5" 165 slot="activator"
166 @click="profile(props.item)" 166 style="cursor:pointer; width:25px; height:18px; "
167 src="/static/icon/eye1.png" 167 class="mr5"
168 /> 168 @click="profile(props.item)"
169 <img 169 src="/static/icon/eye1.png"
170 style="cursor:pointer; width:20px; height:18px; " 170 />
171 class="mr-5" 171 <span>View</span>
172 @click="editItem(props.item)" 172 </v-tooltip>
173 src="/static/icon/edit1.png" 173 <v-tooltip top>
174 /> 174 <img
175 <img 175 slot="activator"
176 style="cursor:pointer;width:20px; height:20px; " 176 style="cursor:pointer; width:20px; height:18px; "
177 class="mr-5" 177 class="mr5"
178 @click="deleteItem(props.item)" 178 @click="editItem(props.item)"
179 src="/static/icon/delete1.png" 179 src="/static/icon/edit1.png"
180 /> 180 />
181 <span>Edit</span>
182 </v-tooltip>
183 <v-tooltip top>
184 <img
185 slot="activator"
186 style="cursor:pointer; width:20px; height:20px; "
187 class="mr5"
188 @click="deleteItem(props.item)"
189 src="/static/icon/delete1.png"
190 />
191 <span>Delete</span>
192 </v-tooltip>
181 </span> 193 </span>
182 </td> 194 </td>
183 </template> 195 </template>
184 <v-alert 196 <v-alert
185 slot="no-results" 197 slot="no-results"
186 :value="true" 198 :value="true"
187 color="error" 199 color="error"
188 icon="warning" 200 icon="warning"
189 >Your search for "{{ search }}" found no results.</v-alert> 201 >Your search for "{{ search }}" found no results.</v-alert>
190 </v-data-table> 202 </v-data-table>
191 </v-tab-item> 203 </v-tab-item>
192 204
193 <!-- ****** ADD MULTIPLE Subject ****** --> 205 <!-- ****** ADD MULTIPLE Subject ****** -->
194 206
195 <v-tab-item> 207 <v-tab-item>
196 <v-container> 208 <v-container>
197 <v-snackbar 209 <v-snackbar
198 :timeout="timeout" 210 :timeout="timeout"
199 :top="y === 'top'" 211 :top="y === 'top'"
200 :right="x === 'right'" 212 :right="x === 'right'"
201 :vertical="mode === 'vertical'" 213 :vertical="mode === 'vertical'"
202 v-model="snackbar" 214 v-model="snackbar"
203 color="success" 215 color="success"
204 >{{ text }}</v-snackbar> 216 >{{ text }}</v-snackbar>
205 <v-flex xs12 sm8 offset-sm2 class="top"> 217 <v-flex xs12 sm8 offset-sm2 class="top">
206 <v-card flat> 218 <v-card flat>
207 <v-container fluid fill-height> 219 <v-container fluid fill-height>
208 <v-layout align-center> 220 <v-layout align-center>
209 <v-flex xs12> 221 <v-flex xs12>
210 <v-form ref="form" v-model="valid" lazy-validation> 222 <v-form ref="form" v-model="valid" lazy-validation>
211 <v-layout> 223 <v-layout>
212 <v-flex xs4 sm4 class="pt-4 subheading"> 224 <v-flex xs4 sm4 class="pt-4 subheading">
213 <label class="right">Class:</label> 225 <label class="right">Class:</label>
214 </v-flex> 226 </v-flex>
215 <v-flex xs8 sm6 class="ml-3"> 227 <v-flex xs8 sm6 class="ml-3">
216 <v-select 228 <v-select
217 v-model="addSubject.classId" 229 v-model="addSubject.classId"
218 label="Select your class" 230 label="Select your class"
219 type="text" 231 type="text"
220 :items="classList" 232 :items="classList"
221 item-text="classNum" 233 item-text="classNum"
222 item-value="_id" 234 item-value="_id"
223 :rules="nameRules" 235 :rules="nameRules"
224 required 236 required
225 ></v-select> 237 ></v-select>
226 </v-flex> 238 </v-flex>
227 </v-layout> 239 </v-layout>
228 <v-layout> 240 <v-layout>
229 <v-flex xs4 sm4 class="pt-4 subheading"> 241 <v-flex xs4 sm4 class="pt-4 subheading">
230 <label class="right">Subject:</label> 242 <label class="right">Subject:</label>
231 </v-flex> 243 </v-flex>
232 <v-flex xs8 sm6 class="ml-3"> 244 <v-flex xs8 sm6 class="ml-3">
233 <v-text-field 245 <v-text-field
234 v-model="addSubject.subjectName" 246 v-model="addSubject.subjectName"
235 placeholder="fill your Subject Name" 247 placeholder="fill your Subject Name"
236 name="name" 248 name="name"
237 type="text" 249 type="text"
238 :rules="subjectRules" 250 :rules="subjectRules"
239 required 251 required
240 ></v-text-field> 252 ></v-text-field>
241 </v-flex> 253 </v-flex>
242 </v-layout> 254 </v-layout>
243 <v-layout> 255 <v-layout>
244 <v-flex xs12 sm9 offset-sm2> 256 <v-flex xs12 sm9 offset-sm2>
245 <v-card-actions> 257 <v-card-actions>
246 <v-btn @click="clear" round dark>clear</v-btn> 258 <v-btn @click="clear" round dark>clear</v-btn>
247 <v-spacer></v-spacer> 259 <v-spacer></v-spacer>
248 <v-btn @click="submit" round dark :loading="loading">Add</v-btn> 260 <v-btn @click="submit" round dark :loading="loading">Add</v-btn>
249 </v-card-actions> 261 </v-card-actions>
250 </v-flex> 262 </v-flex>
251 </v-layout> 263 </v-layout>
252 </v-form> 264 </v-form>
253 </v-flex> 265 </v-flex>
254 </v-layout> 266 </v-layout>
255 </v-container> 267 </v-container>
256 </v-card> 268 </v-card>
257 </v-flex> 269 </v-flex>
258 </v-container> 270 </v-container>
259 </v-tab-item> 271 </v-tab-item>
260 </v-tabs> 272 </v-tabs>
261 <div class="loader" v-if="showLoader"> 273 <div class="loader" v-if="showLoader">
262 <v-progress-circular indeterminate color="white"></v-progress-circular> 274 <v-progress-circular indeterminate color="white"></v-progress-circular>
263 </div> 275 </div>
264 </v-app> 276 </v-app>
265 </template> 277 </template>
266 278
267 <script> 279 <script>
268 import http from "@/Services/http.js"; 280 import http from "@/Services/http.js";
269 import Util from "@/util"; 281 import Util from "@/util";
270 282
271 export default { 283 export default {
272 data: () => ({ 284 data: () => ({
273 snackbar: false, 285 snackbar: false,
274 y: "top", 286 y: "top",
275 x: "right", 287 x: "right",
276 mode: "", 288 mode: "",
277 timeout: 3000, 289 timeout: 3000,
278 text: "", 290 text: "",
279 showLoader: false, 291 showLoader: false,
280 loading: false, 292 loading: false,
281 date: null, 293 date: null,
282 search: "", 294 search: "",
283 dialog: false, 295 dialog: false,
284 dialog1: false, 296 dialog1: false,
285 valid: true, 297 valid: true,
286 isActive: true, 298 isActive: true,
287 newActive: false, 299 newActive: false,
288 gender: ["Male", "Female"], 300 gender: ["Male", "Female"],
289 pagination: { 301 pagination: {
290 rowsPerPage: 19 302 rowsPerPage: 19
291 }, 303 },
292 token: "", 304 token: "",
293 nameRules: [v => !!v || " Class Name is required"], 305 nameRules: [v => !!v || " Class Name is required"],
294 subjectRules: [v => !!v || " Subject Name is required"], 306 subjectRules: [v => !!v || " Subject Name is required"],
295 headers: [ 307 headers: [
296 { 308 {
297 text: "No", 309 text: "No",
298 align: "center", 310 align: "center",
299 sortable: false, 311 sortable: false,
300 value: "No" 312 value: "No"
301 }, 313 },
302 { 314 {
303 text: "Subject Name", 315 text: "Subject Name",
304 value: "subjectName", 316 value: "subjectName",
305 sortable: false, 317 sortable: false,
306 align: "center" 318 align: "center"
307 }, 319 },
308 { text: "Action", value: "", sortable: false, align: "center" } 320 { text: "Action", value: "", sortable: false, align: "center" }
309 ], 321 ],
310 subjectList: [], 322 subjectList: [],
311 classList: [], 323 classList: [],
312 editedIndex: -1, 324 editedIndex: -1,
313 addSubject: {}, 325 addSubject: {},
314 selectClassId: "", 326 selectClassId: "",
315 editedItem: { 327 editedItem: {
316 subjectName: "" 328 subjectName: ""
317 } 329 }
318 }), 330 }),
319 methods: { 331 methods: {
320 pickFile() { 332 pickFile() {
321 this.$refs.image.click(); 333 this.$refs.image.click();
322 }, 334 },
323 335
324 editItem(item) { 336 editItem(item) {
325 this.editedItem = Object.assign({}, item); 337 this.editedItem = Object.assign({}, item);
326 console.log("this.editedItem._id", this.editedItem._id); 338 console.log("this.editedItem._id", this.editedItem._id);
327 this.dialog = true; 339 this.dialog = true;
328 }, 340 },
329 profile(item) { 341 profile(item) {
330 this.editedItem = Object.assign({}, item); 342 this.editedItem = Object.assign({}, item);
331 this.dialog1 = true; 343 this.dialog1 = true;
332 }, 344 },
333 deleteItem(item) { 345 deleteItem(item) {
334 let deleteSubject = { 346 let deleteSubject = {
335 classId: this.addSubject.selectName, 347 classId: this.addSubject.selectName,
336 subjectId: item._id 348 subjectId: item._id
337 }; 349 };
338 http() 350 http()
339 .delete( 351 .delete(
340 "/deleteSubject", 352 "/deleteSubject",
341 confirm("Are you sure you want to delete this?") && { 353 confirm("Are you sure you want to delete this?") && {
342 params: deleteSubject 354 params: deleteSubject
343 } 355 }
344 ) 356 )
345 .then(response => { 357 .then(response => {
346 if ((this.snackbar = true)) { 358 if ((this.snackbar = true)) {
347 this.text = "Successfully delete Existing Subject"; 359 this.text = "Successfully delete Existing Subject";
348 } 360 }
349 this.getEventList(); 361 this.getEventList();
350 }) 362 })
351 .catch(error => { 363 .catch(error => {
352 // console.log(error); 364 // console.log(error);
353 }); 365 });
354 }, 366 },
355 activeTab(type) { 367 activeTab(type) {
356 switch (type) { 368 switch (type) {
357 case "existing": 369 case "existing":
358 this.newActive = false; 370 this.newActive = false;
359 this.isActive = true; 371 this.isActive = true;
360 break; 372 break;
361 373
362 default: 374 default:
363 this.newActive = true; 375 this.newActive = true;
364 this.isActive = false; 376 this.isActive = false;
365 break; 377 break;
366 } 378 }
367 }, 379 },
368 close() { 380 close() {
369 this.dialog = false; 381 this.dialog = false;
370 setTimeout(() => { 382 setTimeout(() => {
371 this.editedItem = Object.assign({}, this.defaultItem); 383 this.editedItem = Object.assign({}, this.defaultItem);
372 this.editedIndex = -1; 384 this.editedIndex = -1;
373 }, 300); 385 }, 300);
374 }, 386 },
375 close1() { 387 close1() {
376 this.dialog1 = false; 388 this.dialog1 = false;
377 }, 389 },
378 submit() { 390 submit() {
379 if (this.$refs.form.validate()) { 391 if (this.$refs.form.validate()) {
380 http() 392 http()
381 .post("/addSubject", this.addSubject) 393 .post("/addSubject", this.addSubject)
382 .then(response => { 394 .then(response => {
383 if ((this.snackbar = true)) { 395 if ((this.snackbar = true)) {
384 this.text = "New Subject added successfully"; 396 this.text = "New Subject added successfully";
385 } 397 }
386 this.clear(); 398 this.clear();
387 }) 399 })
388 .catch(error => { 400 .catch(error => {
389 // console.log(error); 401 // console.log(error);
390 if ((this.snackbar = true)) { 402 if ((this.snackbar = true)) {
391 this.text = error.response.data.message; 403 this.text = error.response.data.message;
392 } 404 }
393 }); 405 });
394 } 406 }
395 }, 407 },
396 clear() { 408 clear() {
397 this.$refs.form.reset(); 409 this.$refs.form.reset();
398 }, 410 },
399 save() { 411 save() {
400 let editSubject = { 412 let editSubject = {
401 classId: this.addSubject.selectName, 413 classId: this.addSubject.selectName,
402 subjectId: this.editedItem._id, 414 subjectId: this.editedItem._id,
403 subjectName: this.editedItem.subjectName 415 subjectName: this.editedItem.subjectName
404 }; 416 };
405 http() 417 http()
406 .put("/updateSubject", editSubject) 418 .put("/updateSubject", editSubject)
407 .then(response => { 419 .then(response => {
408 // console.log("editEvent",editEvent); 420 // console.log("editEvent",editEvent);
409 if ((this.snackbar = true)) { 421 if ((this.snackbar = true)) {
410 this.text = "Successfully Edit Existing Subject"; 422 this.text = "Successfully Edit Existing Subject";
411 } 423 }
412 // this.getClassSubject(); 424 // this.getClassSubject();
413 http() 425 http()
414 .get( 426 .get(
415 "/getParticularClass", 427 "/getParticularClass",
416 { params: { classId: this.selectClassId } }, 428 { params: { classId: this.selectClassId } },
417 { 429 {
418 headers: { Authorization: "Bearer " + this.token } 430 headers: { Authorization: "Bearer " + this.token }
419 } 431 }
420 ) 432 )
421 .then(response => { 433 .then(response => {
422 this.subjectList = response.data.data; 434 this.subjectList = response.data.data;
423 }) 435 })
424 .catch(err => { 436 .catch(err => {
425 console.log("err====>", err); 437 console.log("err====>", err);
426 }); 438 });
427 }) 439 })
428 .catch(error => { 440 .catch(error => {
429 // console.log(error); 441 // console.log(error);
430 }); 442 });
431 this.close(); 443 this.close();
432 }, 444 },
433 getClassSubject(id) { 445 getClassSubject(id) {
434 this.selectClassId = id; 446 this.selectClassId = id;
435 http() 447 http()
436 .get( 448 .get(
437 "/getParticularClass", 449 "/getParticularClass",
438 { params: { classId: this.selectClassId } }, 450 { params: { classId: this.selectClassId } },
439 { 451 {
440 headers: { Authorization: "Bearer " + this.token } 452 headers: { Authorization: "Bearer " + this.token }
441 } 453 }
442 ) 454 )
443 .then(response => { 455 .then(response => {
444 this.subjectList = response.data.data; 456 this.subjectList = response.data.data;
445 }) 457 })
446 .catch(err => { 458 .catch(err => {
447 console.log("err====>", err); 459 console.log("err====>", err);
448 }); 460 });
449 }, 461 },
450 getClass() { 462 getClass() {
451 http() 463 http()
452 .get("/getClassesList", { 464 .get("/getClassesList", {
453 headers: { Authorization: "Bearer " + this.token } 465 headers: { Authorization: "Bearer " + this.token }
454 }) 466 })
455 .then(response => { 467 .then(response => {
456 this.classList = response.data.data; 468 this.classList = response.data.data;
457 }) 469 })
458 .catch(err => { 470 .catch(err => {
src/pages/Teachers/teachers.vue
Diff comments   View file @495e403
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 Teachers</v-tab> 10 >Existing Teachers</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 Teachers</v-tab> 18 >Add New Teachers</v-tab>
19 <!-- ****** EDIT TEACHERS DETAILS ****** --> 19 <!-- ****** EDIT TEACHERS 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 Teacher Profile</v-toolbar-title> 33 <v-toolbar-title>Edit Teacher 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: 800px;"> 36 <v-card-text style="height: 800px;">
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 sm4 class="pt-4 subheading"> 67 <v-flex xs4 sm4 class="pt-4 subheading">
68 <label class="right hidden-xs-only hidden-sm-only">Full Name:</label> 68 <label class="right hidden-xs-only hidden-sm-only">Full Name:</label>
69 <label class="right hidden-lg-only hidden-md-only hidden-xl-only">Name:</label> 69 <label class="right hidden-lg-only hidden-md-only hidden-xl-only">Name:</label>
70 </v-flex> 70 </v-flex>
71 <v-flex xs8 sm6 class="ml-3"> 71 <v-flex xs8 sm6 class="ml-3">
72 <v-text-field 72 <v-text-field
73 v-model="editedItem.name" 73 v-model="editedItem.name"
74 placeholder="fill your full Name" 74 placeholder="fill your full 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 sm4 class="pt-4 subheading"> 83 <v-flex xs4 sm4 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 sm6 class="ml-3"> 86 <v-flex xs8 sm6 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 required 91 required
92 ></v-text-field> 92 ></v-text-field>
93 </v-flex> 93 </v-flex>
94 </v-layout> 94 </v-layout>
95 </v-flex> 95 </v-flex>
96 </v-layout> 96 </v-layout>
97 <v-layout wrap> 97 <v-layout wrap>
98 <v-flex xs12 sm6> 98 <v-flex xs12 sm6>
99 <v-layout> 99 <v-layout>
100 <v-flex xs4 sm4 class="pt-4 subheading"> 100 <v-flex xs4 sm4 class="pt-4 subheading">
101 <label class="right hidden-sm-only hidden-xs-only">Date of Birth:</label> 101 <label class="right hidden-sm-only hidden-xs-only">Date of Birth:</label>
102 <label class="right hidden-lg-only hidden-xl-only hidden-md-only">D.O.B:</label> 102 <label class="right hidden-lg-only hidden-xl-only hidden-md-only">D.O.B:</label>
103 </v-flex> 103 </v-flex>
104 <v-flex xs8 sm6 class="ml-3"> 104 <v-flex xs8 sm6 class="ml-3">
105 <v-menu 105 <v-menu
106 ref="menu" 106 ref="menu"
107 :close-on-content-click="false" 107 :close-on-content-click="false"
108 v-model="menu2" 108 v-model="menu2"
109 :nudge-right="40" 109 :nudge-right="40"
110 lazy 110 lazy
111 transition="scale-transition" 111 transition="scale-transition"
112 offset-y 112 offset-y
113 full-width 113 full-width
114 min-width="290px" 114 min-width="290px"
115 > 115 >
116 <v-text-field 116 <v-text-field
117 slot="activator" 117 slot="activator"
118 v-model="editedItem.dob" 118 v-model="editedItem.dob"
119 placeholder="Select date" 119 placeholder="Select date"
120 ></v-text-field> 120 ></v-text-field>
121 <v-date-picker 121 <v-date-picker
122 ref="picker" 122 ref="picker"
123 v-model="editedItem.dob" 123 v-model="editedItem.dob"
124 :max="new Date().toISOString().substr(0, 10)" 124 :max="new Date().toISOString().substr(0, 10)"
125 min="1950-01-01" 125 min="1950-01-01"
126 @input="menu2 = false" 126 @input="menu2 = false"
127 ></v-date-picker> 127 ></v-date-picker>
128 </v-menu> 128 </v-menu>
129 </v-flex> 129 </v-flex>
130 </v-layout> 130 </v-layout>
131 </v-flex> 131 </v-flex>
132 <v-flex xs12 sm6> 132 <v-flex xs12 sm6>
133 <v-layout> 133 <v-layout>
134 <v-flex xs4 class="pt-4 subheading"> 134 <v-flex xs4 class="pt-4 subheading">
135 <label class="right">City:</label> 135 <label class="right">City:</label>
136 </v-flex> 136 </v-flex>
137 <v-flex xs8 sm6 class="ml-3"> 137 <v-flex xs8 sm6 class="ml-3">
138 <v-text-field 138 <v-text-field
139 v-model="editedItem.city" 139 v-model="editedItem.city"
140 placeholder="fill your City Name" 140 placeholder="fill your City Name"
141 type="text" 141 type="text"
142 required 142 required
143 ></v-text-field> 143 ></v-text-field>
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 xs4 class="pt-4 subheading"> 151 <v-flex xs4 class="pt-4 subheading">
152 <label class="right">State:</label> 152 <label class="right">State:</label>
153 </v-flex> 153 </v-flex>
154 <v-flex xs8 sm6 class="ml-3"> 154 <v-flex xs8 sm6 class="ml-3">
155 <v-text-field 155 <v-text-field
156 v-model="editedItem.state" 156 v-model="editedItem.state"
157 placeholder="fill your State Name" 157 placeholder="fill your State Name"
158 type="text" 158 type="text"
159 required 159 required
160 ></v-text-field> 160 ></v-text-field>
161 </v-flex> 161 </v-flex>
162 </v-layout> 162 </v-layout>
163 </v-flex> 163 </v-flex>
164 <v-flex xs12 sm6> 164 <v-flex xs12 sm6>
165 <v-layout> 165 <v-layout>
166 <v-flex xs4 class="pt-4 subheading"> 166 <v-flex xs4 class="pt-4 subheading">
167 <label class="right">PinCode:</label> 167 <label class="right">PinCode:</label>
168 </v-flex> 168 </v-flex>
169 <v-flex xs8 sm6 class="ml-3"> 169 <v-flex xs8 sm6 class="ml-3">
170 <v-text-field 170 <v-text-field
171 v-model="editedItem.pincode" 171 v-model="editedItem.pincode"
172 placeholder="fill your pincode" 172 placeholder="fill your pincode"
173 type="number" 173 type="number"
174 required 174 required
175 ></v-text-field> 175 ></v-text-field>
176 </v-flex> 176 </v-flex>
177 </v-layout> 177 </v-layout>
178 </v-flex> 178 </v-flex>
179 </v-layout> 179 </v-layout>
180 <v-layout wrap> 180 <v-layout wrap>
181 <v-flex xs12 sm6> 181 <v-flex xs12 sm6>
182 <v-layout> 182 <v-layout>
183 <v-flex xs4 class="pt-4 subheading"> 183 <v-flex xs4 class="pt-4 subheading">
184 <label class="right hidden-xs-only hidden-sm-only">Mobile No:</label> 184 <label class="right hidden-xs-only hidden-sm-only">Mobile No:</label>
185 <label class="right hidden-lg-only hidden-md-only hidden-xl-only">Mobile:</label> 185 <label class="right hidden-lg-only hidden-md-only hidden-xl-only">Mobile:</label>
186 </v-flex> 186 </v-flex>
187 <v-flex xs8 sm6 class="ml-3"> 187 <v-flex xs8 sm6 class="ml-3">
188 <v-text-field 188 <v-text-field
189 v-model="editedItem.mobileNo" 189 v-model="editedItem.mobileNo"
190 placeholder="fill your MobileNo" 190 placeholder="fill your MobileNo"
191 type="number" 191 type="number"
192 required 192 required
193 ></v-text-field> 193 ></v-text-field>
194 </v-flex> 194 </v-flex>
195 </v-layout> 195 </v-layout>
196 </v-flex> 196 </v-flex>
197 <v-flex xs12 sm6> 197 <v-flex xs12 sm6>
198 <v-layout> 198 <v-layout>
199 <v-flex xs4 class="pt-4 subheading"> 199 <v-flex xs4 class="pt-4 subheading">
200 <label class="right hidden-xs-only hidden-sm-only">Select Country:</label> 200 <label class="right hidden-xs-only hidden-sm-only">Select Country:</label>
201 <label class="right hidden-lg-only hidden-md-only hidden-xl-only">Country:</label> 201 <label class="right hidden-lg-only hidden-md-only hidden-xl-only">Country:</label>
202 </v-flex> 202 </v-flex>
203 <v-flex xs8 sm6 class="ml-3"> 203 <v-flex xs8 sm6 class="ml-3">
204 <v-autocomplete 204 <v-autocomplete
205 v-model="editedItem.country" 205 v-model="editedItem.country"
206 :items="countries" 206 :items="countries"
207 placeholder="Select Country Name" 207 placeholder="Select Country Name"
208 required 208 required
209 ></v-autocomplete> 209 ></v-autocomplete>
210 </v-flex> 210 </v-flex>
211 </v-layout> 211 </v-layout>
212 </v-flex> 212 </v-flex>
213 </v-layout> 213 </v-layout>
214 <v-layout wrap> 214 <v-layout wrap>
215 <v-flex xs12 sm6> 215 <v-flex xs12 sm6>
216 <v-layout> 216 <v-layout>
217 <v-flex xs4 class="pt-4 subheading"> 217 <v-flex xs4 class="pt-4 subheading">
218 <label class="right">Join Date:</label> 218 <label class="right">Join Date:</label>
219 </v-flex> 219 </v-flex>
220 <v-flex xs8 sm6 class="ml-3"> 220 <v-flex xs8 sm6 class="ml-3">
221 <v-menu 221 <v-menu
222 ref="menu" 222 ref="menu"
223 :close-on-content-click="false" 223 :close-on-content-click="false"
224 v-model="menu3" 224 v-model="menu3"
225 :nudge-right="40" 225 :nudge-right="40"
226 lazy 226 lazy
227 transition="scale-transition" 227 transition="scale-transition"
228 offset-y 228 offset-y
229 full-width 229 full-width
230 min-width="290px" 230 min-width="290px"
231 > 231 >
232 <v-text-field 232 <v-text-field
233 slot="activator" 233 slot="activator"
234 v-model="editedItem.joinDate" 234 v-model="editedItem.joinDate"
235 placeholder="Select date" 235 placeholder="Select date"
236 ></v-text-field> 236 ></v-text-field>
237 <v-date-picker 237 <v-date-picker
238 ref="picker" 238 ref="picker"
239 v-model="editedItem.joinDate" 239 v-model="editedItem.joinDate"
240 :max="new Date().toISOString().substr(0, 10)" 240 :max="new Date().toISOString().substr(0, 10)"
241 min="1950-01-01" 241 min="1950-01-01"
242 @input="menu3 = false" 242 @input="menu3 = false"
243 ></v-date-picker> 243 ></v-date-picker>
244 </v-menu> 244 </v-menu>
245 </v-flex> 245 </v-flex>
246 </v-layout> 246 </v-layout>
247 </v-flex> 247 </v-flex>
248 <v-flex xs12 sm6> 248 <v-flex xs12 sm6>
249 <v-layout> 249 <v-layout>
250 <v-flex xs4 class="pt-4 subheading"> 250 <v-flex xs4 class="pt-4 subheading">
251 <label class="right hidden-xs-only hidden-sm-only">Uplaod Image:</label> 251 <label class="right hidden-xs-only hidden-sm-only">Uplaod Image:</label>
252 <label class="right hidden-lg-only hidden-md-only hidden-xl-only">Uplaod :</label> 252 <label class="right hidden-lg-only hidden-md-only hidden-xl-only">Uplaod :</label>
253 </v-flex> 253 </v-flex>
254 <v-flex xs8 sm6 class="ml-3"> 254 <v-flex xs8 sm6 class="ml-3">
255 <v-text-field 255 <v-text-field
256 label="Select Image" 256 label="Select Image"
257 @click="pickFile" 257 @click="pickFile"
258 v-model="imageName" 258 v-model="imageName"
259 append-icon="attach_file" 259 append-icon="attach_file"
260 ></v-text-field> 260 ></v-text-field>
261 </v-flex> 261 </v-flex>
262 </v-layout> 262 </v-layout>
263 </v-flex> 263 </v-flex>
264 </v-layout> 264 </v-layout>
265 <v-layout class="hidden-xs-only hidden-sm-only" wrap> 265 <v-layout class="hidden-xs-only hidden-sm-only" wrap>
266 <v-flex xs12 sm12> 266 <v-flex xs12 sm12>
267 <v-layout> 267 <v-layout>
268 <v-flex xs4 sm2 class="pt-4 subheading ml-5"> 268 <v-flex xs4 sm2 class="pt-4 subheading ml-5">
269 <label class="right pr-2">Present Address:</label> 269 <label class="right pr-2">Present Address:</label>
270 </v-flex> 270 </v-flex>
271 <v-flex xs8 sm10> 271 <v-flex xs8 sm10>
272 <v-text-field 272 <v-text-field
273 name="input-4-3" 273 name="input-4-3"
274 v-model="editedItem.presentAddress" 274 v-model="editedItem.presentAddress"
275 placeholder="fill Your present Address" 275 placeholder="fill Your present Address"
276 required 276 required
277 ></v-text-field> 277 ></v-text-field>
278 </v-flex> 278 </v-flex>
279 </v-layout> 279 </v-layout>
280 </v-flex> 280 </v-flex>
281 <v-flex xs12 sm12> 281 <v-flex xs12 sm12>
282 <v-layout> 282 <v-layout>
283 <v-flex xs4 sm2 class="pt-4 subheading ml-5 addressForm"> 283 <v-flex xs4 sm2 class="pt-4 subheading ml-5 addressForm">
284 <label class="pr-2">Permanent Address:</label> 284 <label class="pr-2">Permanent Address:</label>
285 </v-flex> 285 </v-flex>
286 <v-flex xs12 sm10> 286 <v-flex xs12 sm10>
287 <v-text-field 287 <v-text-field
288 name="input-4-3" 288 name="input-4-3"
289 v-model="editedItem.permanentAddress" 289 v-model="editedItem.permanentAddress"
290 placeholder="fill Your Permanent Address" 290 placeholder="fill Your Permanent Address"
291 required 291 required
292 ></v-text-field> 292 ></v-text-field>
293 </v-flex> 293 </v-flex>
294 </v-layout> 294 </v-layout>
295 </v-flex> 295 </v-flex>
296 </v-layout> 296 </v-layout>
297 <v-layout class="hidden-lg-only hidden-md-only hidden-xl-only" wrap> 297 <v-layout class="hidden-lg-only hidden-md-only hidden-xl-only" wrap>
298 <v-flex xs12 sm12> 298 <v-flex xs12 sm12>
299 <v-layout> 299 <v-layout>
300 <v-flex xs12 sm3 class="pt-4 subheading text-xs-center"> 300 <v-flex xs12 sm3 class="pt-4 subheading text-xs-center">
301 <label class>Present Address:</label> 301 <label class>Present Address:</label>
302 </v-flex> 302 </v-flex>
303 </v-layout> 303 </v-layout>
304 <v-layout> 304 <v-layout>
305 <v-flex xs12 sm12> 305 <v-flex xs12 sm12>
306 <v-textarea 306 <v-textarea
307 name="input-4-3" 307 name="input-4-3"
308 v-model="editedItem.presentAddress" 308 v-model="editedItem.presentAddress"
309 placeholder="fill Your present Address" 309 placeholder="fill Your present Address"
310 required 310 required
311 ></v-textarea> 311 ></v-textarea>
312 </v-flex> 312 </v-flex>
313 </v-layout> 313 </v-layout>
314 </v-flex> 314 </v-flex>
315 <v-flex xs12 sm12> 315 <v-flex xs12 sm12>
316 <v-layout> 316 <v-layout>
317 <v-flex xs12 sm3 class="pt-4 pr-4 subheading text-xs-center addressForm"> 317 <v-flex xs12 sm3 class="pt-4 pr-4 subheading text-xs-center addressForm">
318 <label>Permanent Address:</label> 318 <label>Permanent Address:</label>
319 </v-flex> 319 </v-flex>
320 </v-layout> 320 </v-layout>
321 <v-layout> 321 <v-layout>
322 <v-flex xs12 sm12> 322 <v-flex xs12 sm12>
323 <v-textarea 323 <v-textarea
324 name="input-4-3" 324 name="input-4-3"
325 v-model="editedItem.permanentAddress" 325 v-model="editedItem.permanentAddress"
326 placeholder="fill Your Permanent Address" 326 placeholder="fill Your Permanent Address"
327 required 327 required
328 ></v-textarea> 328 ></v-textarea>
329 </v-flex> 329 </v-flex>
330 </v-layout> 330 </v-layout>
331 </v-flex> 331 </v-flex>
332 </v-layout> 332 </v-layout>
333 <v-layout> 333 <v-layout>
334 <v-flex xs12 sm12> 334 <v-flex xs12 sm12>
335 <v-layout> 335 <v-layout>
336 <v-flex xs6> 336 <v-flex xs6>
337 <v-btn round dark @click.native="close">Cancel</v-btn> 337 <v-btn round dark @click.native="close">Cancel</v-btn>
338 </v-flex> 338 </v-flex>
339 <v-flex xs6> 339 <v-flex xs6>
340 <v-btn @click="save" round dark :loading="loading" class="right">Save</v-btn> 340 <v-btn @click="save" round dark :loading="loading" class="right">Save</v-btn>
341 </v-flex> 341 </v-flex>
342 </v-layout> 342 </v-layout>
343 </v-flex> 343 </v-flex>
344 </v-layout> 344 </v-layout>
345 </v-card-text> 345 </v-card-text>
346 </v-card> 346 </v-card>
347 </v-dialog> 347 </v-dialog>
348 348
349 <!-- ****** PROFILE VIEW TEACHERS DETAILS ****** --> 349 <!-- ****** PROFILE VIEW TEACHERS DETAILS ****** -->
350 350
351 <v-dialog v-model="dialog1" max-width="600px" scrollable> 351 <v-dialog v-model="dialog1" max-width="600px" scrollable>
352 <v-card> 352 <v-card>
353 <v-toolbar color="grey lighten-2" flat> 353 <v-toolbar color="grey lighten-2" flat>
354 <v-spacer></v-spacer> 354 <v-spacer></v-spacer>
355 <v-toolbar-title> 355 <v-toolbar-title>
356 <h3>Teacher Profile</h3> 356 <h3>Teacher Profile</h3>
357 </v-toolbar-title> 357 </v-toolbar-title>
358 <v-spacer></v-spacer> 358 <v-spacer></v-spacer>
359 <v-icon @click="close1">close</v-icon> 359 <v-icon @click="close1">close</v-icon>
360 </v-toolbar> 360 </v-toolbar>
361 <v-card-text style="height: 700px;"> 361 <v-card-text style="height: 700px;">
362 <v-container grid-list-md> 362 <v-container grid-list-md>
363 <v-layout wrap> 363 <v-layout wrap>
364 <v-flex> 364 <v-flex>
365 <v-flex align-center justify-center layout text-xs-center> 365 <v-flex align-center justify-center layout text-xs-center>
366 <v-avatar size="160px"> 366 <v-avatar size="160px">
367 <img src="/static/icon/user.png" v-if="!editedItem.profilePicUrl" /> 367 <img src="/static/icon/user.png" v-if="!editedItem.profilePicUrl" />
368 <img :src="editedItem.profilePicUrl" v-else-if="editedItem.profilePicUrl" /> 368 <img :src="editedItem.profilePicUrl" v-else-if="editedItem.profilePicUrl" />
369 </v-avatar> 369 </v-avatar>
370 </v-flex> 370 </v-flex>
371 <v-layout> 371 <v-layout>
372 <v-flex xs5 sm6> 372 <v-flex xs5 sm6>
373 <h5 class="right my-1"> 373 <h5 class="right my-1">
374 <b>Full Name:</b> 374 <b>Full Name:</b>
375 </h5> 375 </h5>
376 </v-flex> 376 </v-flex>
377 <v-flex sm6 xs8> 377 <v-flex sm6 xs8>
378 <h5 class="my-1">{{ editedItem.name }}</h5> 378 <h5 class="my-1">{{ editedItem.name }}</h5>
379 </v-flex> 379 </v-flex>
380 </v-layout> 380 </v-layout>
381 <v-layout> 381 <v-layout>
382 <v-flex xs5 sm6> 382 <v-flex xs5 sm6>
383 <h5 class="right my-1"> 383 <h5 class="right my-1">
384 <b>Email:</b> 384 <b>Email:</b>
385 </h5> 385 </h5>
386 </v-flex> 386 </v-flex>
387 <v-flex sm6 xs8> 387 <v-flex sm6 xs8>
388 <h5 class="my-1">{{ editedItem.email }}</h5> 388 <h5 class="my-1">{{ editedItem.email }}</h5>
389 </v-flex> 389 </v-flex>
390 </v-layout> 390 </v-layout>
391 <v-layout> 391 <v-layout>
392 <v-flex xs5 sm6> 392 <v-flex xs5 sm6>
393 <h5 class="right my-1"> 393 <h5 class="right my-1">
394 <b>City:</b> 394 <b>City:</b>
395 </h5> 395 </h5>
396 </v-flex> 396 </v-flex>
397 <v-flex sm6 xs8> 397 <v-flex sm6 xs8>
398 <h5 class="my-1">{{ editedItem.city }}</h5> 398 <h5 class="my-1">{{ editedItem.city }}</h5>
399 </v-flex> 399 </v-flex>
400 </v-layout> 400 </v-layout>
401 <v-layout> 401 <v-layout>
402 <v-flex xs5 sm6> 402 <v-flex xs5 sm6>
403 <h5 class="right my-1"> 403 <h5 class="right my-1">
404 <b>State:</b> 404 <b>State:</b>
405 </h5> 405 </h5>
406 </v-flex> 406 </v-flex>
407 <v-flex sm6 xs8> 407 <v-flex sm6 xs8>
408 <h5 class="my-1">{{ editedItem.state }}</h5> 408 <h5 class="my-1">{{ editedItem.state }}</h5>
409 </v-flex> 409 </v-flex>
410 </v-layout> 410 </v-layout>
411 <v-layout> 411 <v-layout>
412 <v-flex xs5 sm6> 412 <v-flex xs5 sm6>
413 <h5 class="right my-1"> 413 <h5 class="right my-1">
414 <b>Country:</b> 414 <b>Country:</b>
415 </h5> 415 </h5>
416 </v-flex> 416 </v-flex>
417 <v-flex sm6 xs8> 417 <v-flex sm6 xs8>
418 <h5 class="my-1">{{ editedItem.country }}</h5> 418 <h5 class="my-1">{{ editedItem.country }}</h5>
419 </v-flex> 419 </v-flex>
420 </v-layout> 420 </v-layout>
421 <v-layout> 421 <v-layout>
422 <v-flex xs5 sm6> 422 <v-flex xs5 sm6>
423 <h5 class="right my-1"> 423 <h5 class="right my-1">
424 <b>Pincode:</b> 424 <b>Pincode:</b>
425 </h5> 425 </h5>
426 </v-flex> 426 </v-flex>
427 <v-flex sm6 xs8> 427 <v-flex sm6 xs8>
428 <h5 class="my-1">{{ editedItem.pincode }}</h5> 428 <h5 class="my-1">{{ editedItem.pincode }}</h5>
429 </v-flex> 429 </v-flex>
430 </v-layout> 430 </v-layout>
431 <v-layout> 431 <v-layout>
432 <v-flex xs5 sm6> 432 <v-flex xs5 sm6>
433 <h5 class="right my-1"> 433 <h5 class="right my-1">
434 <b>Mobile No:</b> 434 <b>Mobile No:</b>
435 </h5> 435 </h5>
436 </v-flex> 436 </v-flex>
437 <v-flex sm6 xs8> 437 <v-flex sm6 xs8>
438 <h5 class="my-1">{{ editedItem.mobileNo }}</h5> 438 <h5 class="my-1">{{ editedItem.mobileNo }}</h5>
439 </v-flex> 439 </v-flex>
440 </v-layout> 440 </v-layout>
441 <v-layout> 441 <v-layout>
442 <v-flex xs5 sm6> 442 <v-flex xs5 sm6>
443 <h5 class="right my-1"> 443 <h5 class="right my-1">
444 <b>Join Date:</b> 444 <b>Join Date:</b>
445 </h5> 445 </h5>
446 </v-flex> 446 </v-flex>
447 <v-flex sm6 xs8> 447 <v-flex sm6 xs8>
448 <h5 class="my-1">{{ dates(editedItem.joinDate) }}</h5> 448 <h5 class="my-1">{{ dates(editedItem.joinDate) }}</h5>
449 </v-flex> 449 </v-flex>
450 </v-layout> 450 </v-layout>
451 <v-layout> 451 <v-layout>
452 <v-flex xs5 sm6> 452 <v-flex xs5 sm6>
453 <h5 class="right my-1"> 453 <h5 class="right my-1">
454 <b>D.O.B :</b> 454 <b>D.O.B :</b>
455 </h5> 455 </h5>
456 </v-flex> 456 </v-flex>
457 <v-flex sm6 xs8> 457 <v-flex sm6 xs8>
458 <h5 class="my-1">{{ dates(editedItem.dob) }}</h5> 458 <h5 class="my-1">{{ dates(editedItem.dob) }}</h5>
459 </v-flex> 459 </v-flex>
460 </v-layout> 460 </v-layout>
461 <v-layout> 461 <v-layout>
462 <v-flex xs6 sm6> 462 <v-flex xs6 sm6>
463 <h5 class="right my-1"> 463 <h5 class="right my-1">
464 <b>Permanent Address:</b> 464 <b>Permanent Address:</b>
465 </h5> 465 </h5>
466 </v-flex> 466 </v-flex>
467 <v-flex sm6 xs8> 467 <v-flex sm6 xs8>
468 <h5 class="my-1">{{ editedItem.permanentAddress }}</h5> 468 <h5 class="my-1">{{ editedItem.permanentAddress }}</h5>
469 </v-flex> 469 </v-flex>
470 </v-layout> 470 </v-layout>
471 <v-layout> 471 <v-layout>
472 <v-flex xs6 sm6> 472 <v-flex xs6 sm6>
473 <h5 class="right my-1"> 473 <h5 class="right my-1">
474 <b>present Address:</b> 474 <b>present Address:</b>
475 </h5> 475 </h5>
476 </v-flex> 476 </v-flex>
477 <v-flex sm6 xs8> 477 <v-flex sm6 xs8>
478 <h5 class="my-1">{{ editedItem.presentAddress }}</h5> 478 <h5 class="my-1">{{ editedItem.presentAddress }}</h5>
479 </v-flex> 479 </v-flex>
480 </v-layout> 480 </v-layout>
481 </v-flex> 481 </v-flex>
482 </v-layout> 482 </v-layout>
483 </v-container> 483 </v-container>
484 </v-card-text> 484 </v-card-text>
485 </v-card> 485 </v-card>
486 </v-dialog> 486 </v-dialog>
487 <v-snackbar 487 <v-snackbar
488 :timeout="timeout" 488 :timeout="timeout"
489 :top="y === 'top'" 489 :top="y === 'top'"
490 :right="x === 'right'" 490 :right="x === 'right'"
491 :vertical="mode === 'vertical'" 491 :vertical="mode === 'vertical'"
492 v-model="snackbar" 492 v-model="snackbar"
493 color="success" 493 color="success"
494 >{{ text }}</v-snackbar> 494 >{{ text }}</v-snackbar>
495 495
496 <!-- ****** EXISTING-Teachers TABLE DATA****** --> 496 <!-- ****** EXISTING-Teachers TABLE DATA****** -->
497 497
498 <v-data-table 498 <v-data-table
499 :headers="headers" 499 :headers="headers"
500 :items="desserts" 500 :items="desserts"
501 :pagination.sync="pagination" 501 :pagination.sync="pagination"
502 :search="search" 502 :search="search"
503 > 503 >
504 <template slot="items" slot-scope="props"> 504 <template slot="items" slot-scope="props">
505 <td id="td" class="text-xs-center">{{ props.index + 1}}</td> 505 <td id="td" class="text-xs-center">{{ props.index + 1}}</td>
506 <td id="td" class="text-xs-center"> 506 <td id="td" class="text-xs-center">
507 <v-avatar> 507 <v-avatar>
508 <img :src="props.item.profilePicUrl" v-if="props.item.profilePicUrl" /> 508 <img :src="props.item.profilePicUrl" v-if="props.item.profilePicUrl" />
509 <img src="/static/icon/user.png" v-else-if="!props.item.profilePicUrl" /> 509 <img src="/static/icon/user.png" v-else-if="!props.item.profilePicUrl" />
510 </v-avatar> 510 </v-avatar>
511 </td> 511 </td>
512 <td id="td" class="text-xs-center">{{ props.item.name}}</td> 512 <td id="td" class="text-xs-center">{{ props.item.name}}</td>
513 <td id="td" class="text-xs-center">{{ props.item.email }}</td> 513 <td id="td" class="text-xs-center">{{ props.item.email }}</td>
514 <td id="td" class="text-xs-center">{{ dates(props.item.dob) }}</td> 514 <td id="td" class="text-xs-center">{{ dates(props.item.dob) }}</td>
515 <td id="td" class="text-xs-center">{{ dates(props.item.joinDate)}}</td> 515 <td id="td" class="text-xs-center">{{ dates(props.item.joinDate)}}</td>
516 <td id="td" class="text-xs-center">{{ props.item.mobileNo }}</td> 516 <td id="td" class="text-xs-center">{{ props.item.mobileNo }}</td>
517 <td class="text-xs-center"> 517 <td class="text-xs-center">
518 <span> 518 <span>
519 <img 519 <v-tooltip top>
520 style="cursor:pointer; width:25px; height:18px; " 520 <img
521 class="mr-5" 521 slot="activator"
522 @click="profile(props.item)" 522 style="cursor:pointer; width:25px; height:18px; "
523 src="/static/icon/eye1.png" 523 class="mr5"
524 /> 524 @click="profile(props.item)"
525 <img 525 src="/static/icon/eye1.png"
526 style="cursor:pointer; width:20px; height:18px; " 526 />
527 class="mr-5" 527 <span>View</span>
528 @click="editItem(props.item)" 528 </v-tooltip>
529 src="/static/icon/edit1.png" 529 <v-tooltip top>
530 /> 530 <img
531 <img 531 slot="activator"
532 style="cursor:pointer;width:20px; height:20px; " 532 style="cursor:pointer; width:20px; height:18px; "
533 class="mr-5" 533 class="mr5"
534 @click="deleteItem(props.item)" 534 @click="editItem(props.item)"
535 src="/static/icon/delete1.png" 535 src="/static/icon/edit1.png"
536 /> 536 />
537 <span>Edit</span>
538 </v-tooltip>
539 <v-tooltip top>
540 <img
541 slot="activator"
542 style="cursor:pointer; width:20px; height:20px; "
543 class="mr5"
544 @click="deleteItem(props.item)"
545 src="/static/icon/delete1.png"
546 />
547 <span>Delete</span>
548 </v-tooltip>
537 </span> 549 </span>
538 </td> 550 </td>
539 </template> 551 </template>
540 <v-alert 552 <v-alert
541 slot="no-results" 553 slot="no-results"
542 :value="true" 554 :value="true"
543 color="error" 555 color="error"
544 icon="warning" 556 icon="warning"
545 >Your search for "{{ search }}" found no results.</v-alert> 557 >Your search for "{{ search }}" found no results.</v-alert>
546 </v-data-table> 558 </v-data-table>
547 </v-tab-item> 559 </v-tab-item>
548 560
549 <!-- ****** Add Teachers Data****** --> 561 <!-- ****** Add Teachers Data****** -->
550 <v-tab-item> 562 <v-tab-item>
551 <v-container fluid> 563 <v-container fluid>
552 <v-snackbar 564 <v-snackbar
553 :timeout="timeout" 565 :timeout="timeout"
554 :top="y === 'top'" 566 :top="y === 'top'"
555 :right="x === 'right'" 567 :right="x === 'right'"
556 :vertical="mode === 'vertical'" 568 :vertical="mode === 'vertical'"
557 v-model="snackbar" 569 v-model="snackbar"
558 color="success" 570 color="success"
559 >{{ text }}</v-snackbar> 571 >{{ text }}</v-snackbar>
560 <v-flex xs12 sm12 class="my-4"> 572 <v-flex xs12 sm12 class="my-4">
561 <v-card flat> 573 <v-card flat>
562 <v-form ref="form" v-model="valid" lazy-validation> 574 <v-form ref="form" v-model="valid" lazy-validation>
563 <v-container fluid> 575 <v-container fluid>
564 <v-layout> 576 <v-layout>
565 <v-flex 577 <v-flex
566 xs12 578 xs12
567 class="text-xs-center text-sm-center text-md-center text-lg-center my-4" 579 class="text-xs-center text-sm-center text-md-center text-lg-center my-4"
568 > 580 >
569 <v-avatar size="100px"> 581 <v-avatar size="100px">
570 <img src="/static/icon/user.png" v-if="!imageUrl" /> 582 <img src="/static/icon/user.png" v-if="!imageUrl" />
571 </v-avatar> 583 </v-avatar>
572 <img 584 <img
573 :src="imageUrl" 585 :src="imageUrl"
574 height="150" 586 height="150"
575 v-if="imageUrl" 587 v-if="imageUrl"
576 style="border-radius:50%; width:200px" 588 style="border-radius:50%; width:200px"
577 /> 589 />
578 </v-flex> 590 </v-flex>
579 </v-layout> 591 </v-layout>
580 <v-layout> 592 <v-layout>
581 <v-flex xs12 sm6> 593 <v-flex xs12 sm6>
582 <v-layout> 594 <v-layout>
583 <v-flex xs4 class="pt-4 subheading"> 595 <v-flex xs4 class="pt-4 subheading">
584 <label class="right hidden-sm-only hidden-xs-only">Full Name:</label> 596 <label class="right hidden-sm-only hidden-xs-only">Full Name:</label>
585 <label 597 <label
586 class="right hidden-lg-only hidden-xl-only hidden-md-only" 598 class="right hidden-lg-only hidden-xl-only hidden-md-only"
587 >Full Name</label> 599 >Full Name</label>
588 </v-flex> 600 </v-flex>
589 <v-flex xs8 class="ml-3"> 601 <v-flex xs8 class="ml-3">
590 <v-text-field 602 <v-text-field
591 v-model="addTeachers.name" 603 v-model="addTeachers.name"
592 placeholder="fill your full Name" 604 placeholder="fill your full Name"
593 name="name" 605 name="name"
594 type="text" 606 type="text"
595 :rules="nameRules" 607 :rules="nameRules"
596 required 608 required
597 ></v-text-field> 609 ></v-text-field>
598 </v-flex> 610 </v-flex>
599 </v-layout> 611 </v-layout>
600 </v-flex> 612 </v-flex>
601 <v-flex xs12 sm6> 613 <v-flex xs12 sm6>
602 <v-layout> 614 <v-layout>
603 <v-flex xs4 class="pt-4 subheading"> 615 <v-flex xs4 class="pt-4 subheading">
604 <label class="right">Email ID:</label> 616 <label class="right">Email ID:</label>
605 </v-flex> 617 </v-flex>
606 <v-flex xs8 class="ml-3"> 618 <v-flex xs8 class="ml-3">
607 <v-text-field 619 <v-text-field
608 placeholder="fill your email" 620 placeholder="fill your email"
609 :rules="emailRules" 621 :rules="emailRules"
610 v-model="addTeachers.email" 622 v-model="addTeachers.email"
611 type="text" 623 type="text"
612 name="email" 624 name="email"
613 required 625 required
614 ></v-text-field> 626 ></v-text-field>
615 </v-flex> 627 </v-flex>
616 </v-layout> 628 </v-layout>
617 </v-flex> 629 </v-flex>
618 </v-layout> 630 </v-layout>
619 <v-layout> 631 <v-layout>
620 <v-flex xs12 sm6> 632 <v-flex xs12 sm6>
621 <v-layout> 633 <v-layout>
622 <v-flex xs4 sm4 class="pt-4 subheading"> 634 <v-flex xs4 sm4 class="pt-4 subheading">
623 <label class="right hidden-sm-only hidden-xs-only">Date of Birth:</label> 635 <label class="right hidden-sm-only hidden-xs-only">Date of Birth:</label>
624 <label class="right hidden-lg-only hidden-xl-only hidden-md-only">D.O.B:</label> 636 <label class="right hidden-lg-only hidden-xl-only hidden-md-only">D.O.B:</label>
625 </v-flex> 637 </v-flex>
626 <v-flex xs8 class="ml-3"> 638 <v-flex xs8 class="ml-3">
627 <v-menu 639 <v-menu
628 ref="menu" 640 ref="menu"
629 :close-on-content-click="false" 641 :close-on-content-click="false"
630 v-model="menu" 642 v-model="menu"
631 :nudge-right="40" 643 :nudge-right="40"
632 lazy 644 lazy
633 transition="scale-transition" 645 transition="scale-transition"
634 offset-y 646 offset-y
635 full-width 647 full-width
636 min-width="290px" 648 min-width="290px"
637 > 649 >
638 <v-text-field 650 <v-text-field
639 slot="activator" 651 slot="activator"
640 :rules="dateRules" 652 :rules="dateRules"
641 v-model="addTeachers.date" 653 v-model="addTeachers.date"
642 placeholder="Select date" 654 placeholder="Select date"
643 ></v-text-field> 655 ></v-text-field>
644 <v-date-picker 656 <v-date-picker
645 ref="picker" 657 ref="picker"
646 v-model="addTeachers.date" 658 v-model="addTeachers.date"
647 :max="new Date().toISOString().substr(0, 10)" 659 :max="new Date().toISOString().substr(0, 10)"
648 min="1950-01-01" 660 min="1950-01-01"
649 @input="menu = false" 661 @input="menu = false"
650 ></v-date-picker> 662 ></v-date-picker>
651 </v-menu> 663 </v-menu>
652 </v-flex> 664 </v-flex>
653 </v-layout> 665 </v-layout>
654 </v-flex> 666 </v-flex>
655 <v-flex xs12 sm6> 667 <v-flex xs12 sm6>
656 <v-layout> 668 <v-layout>
657 <v-flex xs4 class="pt-4 subheading"> 669 <v-flex xs4 class="pt-4 subheading">
658 <label class="right">City:</label> 670 <label class="right">City:</label>
659 </v-flex> 671 </v-flex>
660 <v-flex xs8 class="ml-3"> 672 <v-flex xs8 class="ml-3">
661 <v-text-field 673 <v-text-field
662 v-model="addTeachers.city" 674 v-model="addTeachers.city"
663 placeholder="fill your City Name" 675 placeholder="fill your City Name"
664 name="City" 676 name="City"
665 type="text" 677 type="text"
666 :rules="cityRules" 678 :rules="cityRules"
667 required 679 required
668 ></v-text-field> 680 ></v-text-field>
669 </v-flex> 681 </v-flex>
670 </v-layout> 682 </v-layout>
671 </v-flex> 683 </v-flex>
672 </v-layout> 684 </v-layout>
673 <v-layout> 685 <v-layout>
674 <v-flex xs12 sm6> 686 <v-flex xs12 sm6>
675 <v-layout> 687 <v-layout>
676 <v-flex xs4 class="pt-4 subheading"> 688 <v-flex xs4 class="pt-4 subheading">
677 <label class="right">State:</label> 689 <label class="right">State:</label>
678 </v-flex> 690 </v-flex>
679 <v-flex xs8 class="ml-3"> 691 <v-flex xs8 class="ml-3">
680 <v-text-field 692 <v-text-field
681 v-model="addTeachers.state" 693 v-model="addTeachers.state"
682 placeholder="fill your State Name" 694 placeholder="fill your State Name"
683 name="state" 695 name="state"
684 type="text" 696 type="text"
685 :rules="stateRules" 697 :rules="stateRules"
686 required 698 required
687 ></v-text-field> 699 ></v-text-field>
688 </v-flex> 700 </v-flex>
689 </v-layout> 701 </v-layout>
690 </v-flex> 702 </v-flex>
691 <v-flex xs12 sm6> 703 <v-flex xs12 sm6>
692 <v-layout> 704 <v-layout>
693 <v-flex xs4 class="pt-4 subheading"> 705 <v-flex xs4 class="pt-4 subheading">
694 <label class="right">PinCode:</label> 706 <label class="right">PinCode:</label>
695 </v-flex> 707 </v-flex>
696 <v-flex xs8 class="ml-3"> 708 <v-flex xs8 class="ml-3">
697 <v-text-field 709 <v-text-field
698 v-model="addTeachers.pincode" 710 v-model="addTeachers.pincode"
699 placeholder="fill your pincode" 711 placeholder="fill your pincode"
700 name="pincode" 712 name="pincode"
701 type="number" 713 type="number"
702 :rules="pincode" 714 :rules="pincode"
703 required 715 required
704 ></v-text-field> 716 ></v-text-field>
705 </v-flex> 717 </v-flex>
706 </v-layout> 718 </v-layout>
707 </v-flex> 719 </v-flex>
708 </v-layout> 720 </v-layout>
709 <v-layout> 721 <v-layout>
710 <v-flex xs12 sm6> 722 <v-flex xs12 sm6>
711 <v-layout> 723 <v-layout>
712 <v-flex xs4 class="pt-4 subheading"> 724 <v-flex xs4 class="pt-4 subheading">
713 <label class="right hidden-xs-only hidden-sm-only">Mobile No:</label> 725 <label class="right hidden-xs-only hidden-sm-only">Mobile No:</label>
714 <label class="right hidden-lg-only hidden-md-only hidden-xl-only">Mobile:</label> 726 <label class="right hidden-lg-only hidden-md-only hidden-xl-only">Mobile:</label>
715 </v-flex> 727 </v-flex>
716 <v-flex xs8 class="ml-3"> 728 <v-flex xs8 class="ml-3">
717 <v-text-field 729 <v-text-field
718 v-model="addTeachers.mobileNo" 730 v-model="addTeachers.mobileNo"
719 placeholder="fill your Mobile No." 731 placeholder="fill your Mobile No."
720 name="mobileNo" 732 name="mobileNo"
721 type="number" 733 type="number"
722 :rules="mobileNoRules" 734 :rules="mobileNoRules"
723 required 735 required
724 ></v-text-field> 736 ></v-text-field>
725 </v-flex> 737 </v-flex>
726 </v-layout> 738 </v-layout>
727 </v-flex> 739 </v-flex>
728 <v-flex xs12 sm6> 740 <v-flex xs12 sm6>
729 <v-layout> 741 <v-layout>
730 <v-flex xs4 class="pt-4 subheading"> 742 <v-flex xs4 class="pt-4 subheading">
731 <label class="right hidden-xs-only hidden-sm-only">Select Country:</label> 743 <label class="right hidden-xs-only hidden-sm-only">Select Country:</label>
732 <label class="right hidden-lg-only hidden-md-only hidden-xl-only">Country:</label> 744 <label class="right hidden-lg-only hidden-md-only hidden-xl-only">Country:</label>
733 </v-flex> 745 </v-flex>
734 <v-flex xs8 class="ml-3"> 746 <v-flex xs8 class="ml-3">
735 <v-autocomplete 747 <v-autocomplete
736 v-model="addTeachers.country" 748 v-model="addTeachers.country"
737 :rules="country" 749 :rules="country"
738 :items="countries" 750 :items="countries"
739 placeholder="Select Country Name" 751 placeholder="Select Country Name"
740 required 752 required
741 ></v-autocomplete> 753 ></v-autocomplete>
742 </v-flex> 754 </v-flex>
743 </v-layout> 755 </v-layout>
744 </v-flex> 756 </v-flex>
745 </v-layout> 757 </v-layout>
746 <v-layout> 758 <v-layout>
747 <v-flex xs12 sm6> 759 <v-flex xs12 sm6>
748 <v-layout> 760 <v-layout>
749 <v-flex xs4 class="pt-4 subheading"> 761 <v-flex xs4 class="pt-4 subheading">
750 <label class="right">Join Date:</label> 762 <label class="right">Join Date:</label>
751 </v-flex> 763 </v-flex>
752 <v-flex xs8 class="ml-3"> 764 <v-flex xs8 class="ml-3">
753 <v-menu 765 <v-menu
754 ref="menu1" 766 ref="menu1"
755 :close-on-content-click="false" 767 :close-on-content-click="false"
756 v-model="menu1" 768 v-model="menu1"
757 :nudge-right="40" 769 :nudge-right="40"
758 lazy 770 lazy
759 transition="scale-transition" 771 transition="scale-transition"
760 offset-y 772 offset-y
761 full-width 773 full-width
762 min-width="290px" 774 min-width="290px"
763 > 775 >
764 <v-text-field 776 <v-text-field
765 slot="activator" 777 slot="activator"
766 :rules="joinDateRules" 778 :rules="joinDateRules"
767 v-model="addTeachers.joinDate" 779 v-model="addTeachers.joinDate"
768 placeholder="Select date" 780 placeholder="Select date"
769 ></v-text-field> 781 ></v-text-field>
770 <v-date-picker 782 <v-date-picker
771 ref="picker" 783 ref="picker"
772 v-model="addTeachers.joinDate" 784 v-model="addTeachers.joinDate"
773 :max="new Date().toISOString().substr(0, 10)" 785 :max="new Date().toISOString().substr(0, 10)"
774 min="1950-01-01" 786 min="1950-01-01"
775 @input="menu1 = false" 787 @input="menu1 = false"
776 ></v-date-picker> 788 ></v-date-picker>
777 </v-menu> 789 </v-menu>
778 </v-flex> 790 </v-flex>
779 </v-layout> 791 </v-layout>
780 </v-flex> 792 </v-flex>
781 <v-flex xs12 sm6> 793 <v-flex xs12 sm6>
782 <v-layout> 794 <v-layout>
783 <v-flex xs4 class="pt-4 subheading"> 795 <v-flex xs4 class="pt-4 subheading">
784 <label class="right hidden-xs-only hidden-sm-only">Uplaod Image:</label> 796 <label class="right hidden-xs-only hidden-sm-only">Uplaod Image:</label>
785 <label class="right hidden-lg-only hidden-md-only hidden-xl-only">Uplaod:</label> 797 <label class="right hidden-lg-only hidden-md-only hidden-xl-only">Uplaod:</label>
786 </v-flex> 798 </v-flex>
787 <v-flex xs8 class="ml-3"> 799 <v-flex xs8 class="ml-3">
788 <v-text-field 800 <v-text-field
789 label="Select Image" 801 label="Select Image"
790 @click="pickFile" 802 @click="pickFile"
791 v-model="imageName" 803 v-model="imageName"
792 append-icon="attach_file" 804 append-icon="attach_file"
793 ></v-text-field> 805 ></v-text-field>
794 <input 806 <input
795 type="file" 807 type="file"
796 style="display:none" 808 style="display:none"
797 ref="image" 809 ref="image"
798 accept="image/*" 810 accept="image/*"
799 @change="onFilePicked" 811 @change="onFilePicked"
800 /> 812 />
801 </v-flex> 813 </v-flex>
802 </v-layout> 814 </v-layout>
803 </v-flex> 815 </v-flex>
804 </v-layout> 816 </v-layout>
805 <v-layout class="hidden-xs-only hidden-sm-only"> 817 <v-layout class="hidden-xs-only hidden-sm-only">
806 <v-flex xs12 sm6> 818 <v-flex xs12 sm6>
807 <v-layout> 819 <v-layout>
808 <v-flex xs4 md4 class="pt-4 subheading"> 820 <v-flex xs4 md4 class="pt-4 subheading">
809 <label class="right">Present Address:</label> 821 <label class="right">Present Address:</label>
810 </v-flex> 822 </v-flex>
811 <v-flex xs8 md8 class="ml-3"> 823 <v-flex xs8 md8 class="ml-3">
812 <v-text-field 824 <v-text-field
813 name="input-4-3" 825 name="input-4-3"
814 v-model="addTeachers.presentAddress" 826 v-model="addTeachers.presentAddress"
815 :rules="presentAddress" 827 :rules="presentAddress"
816 placeholder="fill Your present Address" 828 placeholder="fill Your present Address"
817 required 829 required
818 ></v-text-field> 830 ></v-text-field>
819 </v-flex> 831 </v-flex>
820 </v-layout> 832 </v-layout>
821 </v-flex> 833 </v-flex>
822 <v-flex xs12 sm6> 834 <v-flex xs12 sm6>
823 <v-layout> 835 <v-layout>
824 <v-flex xs4 md4 class="pt-4 subheading addressForm"> 836 <v-flex xs4 md4 class="pt-4 subheading addressForm">
825 <label class="right">Permanent Address:</label> 837 <label class="right">Permanent Address:</label>
826 </v-flex> 838 </v-flex>
827 <v-flex xs12 md8 class="ml-3"> 839 <v-flex xs12 md8 class="ml-3">
828 <v-text-field 840 <v-text-field
829 name="input-4-3" 841 name="input-4-3"
830 v-model="addTeachers.permanentAddress" 842 v-model="addTeachers.permanentAddress"
831 :rules="permanentAddress" 843 :rules="permanentAddress"
832 placeholder="fill Your Permanent Address" 844 placeholder="fill Your Permanent Address"
833 required 845 required
834 ></v-text-field> 846 ></v-text-field>
835 </v-flex> 847 </v-flex>
836 </v-layout> 848 </v-layout>
837 </v-flex> 849 </v-flex>
838 </v-layout> 850 </v-layout>
839 <v-layout class="hidden-lg-only hidden-md-only hidden-xl-only"> 851 <v-layout class="hidden-lg-only hidden-md-only hidden-xl-only">
840 <v-flex xs12 sm12> 852 <v-flex xs12 sm12>
841 <v-layout> 853 <v-layout>
842 <v-flex xs12 sm12 class="pt-4 subheading text-xs-center"> 854 <v-flex xs12 sm12 class="pt-4 subheading text-xs-center">
843 <label class>Present Addres:</label> 855 <label class>Present Addres:</label>
844 </v-flex> 856 </v-flex>
845 </v-layout> 857 </v-layout>
846 <v-layout> 858 <v-layout>
847 <v-flex xs12 sm12> 859 <v-flex xs12 sm12>
848 <v-textarea 860 <v-textarea
849 name="input-4-3" 861 name="input-4-3"
850 v-model="addTeachers.presentAddress" 862 v-model="addTeachers.presentAddress"
851 :rules="presentAddress" 863 :rules="presentAddress"
852 placeholder="fill Your present Address" 864 placeholder="fill Your present Address"
853 required 865 required
854 ></v-textarea> 866 ></v-textarea>
855 </v-flex> 867 </v-flex>
856 </v-layout> 868 </v-layout>
857 </v-flex> 869 </v-flex>
858 <v-flex xs12 sm12> 870 <v-flex xs12 sm12>
859 <v-layout> 871 <v-layout>
860 <v-flex xs12 sm12 class="pt-4 pr-4 subheading text-xs-center addressForm"> 872 <v-flex xs12 sm12 class="pt-4 pr-4 subheading text-xs-center addressForm">
861 <label>Permanent Address:</label> 873 <label>Permanent Address:</label>
862 </v-flex> 874 </v-flex>
863 </v-layout> 875 </v-layout>
864 <v-layout> 876 <v-layout>
865 <v-flex xs12 sm12> 877 <v-flex xs12 sm12>
866 <v-textarea 878 <v-textarea
867 name="input-4-3" 879 name="input-4-3"
868 v-model="addTeachers.permanentAddress" 880 v-model="addTeachers.permanentAddress"
869 :rules="permanentAddress" 881 :rules="permanentAddress"
870 placeholder="fill Your Permanent Address" 882 placeholder="fill Your Permanent Address"
871 required 883 required
872 ></v-textarea> 884 ></v-textarea>
873 </v-flex> 885 </v-flex>
874 </v-layout> 886 </v-layout>
875 </v-flex> 887 </v-flex>
876 </v-layout> 888 </v-layout>
877 <v-layout class="mx-2"> 889 <v-layout class="mx-2">
878 <v-flex xs12 sm11 offset-sm1> 890 <v-flex xs12 sm11 offset-sm1>
879 <v-layout> 891 <v-layout>
880 <v-flex xs6 class=""> 892 <v-flex xs6 class>
881 <v-btn @click="clear" round dark>clear</v-btn> 893 <v-btn @click="clear" round dark>clear</v-btn>
882 </v-flex> 894 </v-flex>
883 <v-flex xs6> 895 <v-flex xs6>
884 <v-btn @click="submit" round dark :loading="loading" class="right">Add</v-btn> 896 <v-btn @click="submit" round dark :loading="loading" class="right">Add</v-btn>
885 </v-flex> 897 </v-flex>
886 </v-layout> 898 </v-layout>
887 </v-flex> 899 </v-flex>
888 </v-layout> 900 </v-layout>
889 </v-container> 901 </v-container>
890 </v-form> 902 </v-form>
891 </v-card> 903 </v-card>
892 </v-flex> 904 </v-flex>
893 </v-container> 905 </v-container>
894 </v-tab-item> 906 </v-tab-item>
895 </v-tabs> 907 </v-tabs>
896 <div class="loader" v-if="showLoader"> 908 <div class="loader" v-if="showLoader">
897 <v-progress-circular indeterminate color="white"></v-progress-circular> 909 <v-progress-circular indeterminate color="white"></v-progress-circular>
898 </div> 910 </div>
899 </v-app> 911 </v-app>
900 </template> 912 </template>
901 913
902 <script> 914 <script>
903 import http from "@/Services/http.js"; 915 import http from "@/Services/http.js";
904 import Util from "@/util";
905 import moment from "moment"; 916 import moment from "moment";
917 import countryList from "@/script/country.js";
906 918
907 export default { 919 export default {
908 data: () => ({ 920 data: () => ({
909 component: "report-generate", 921 component: "report-generate",
910 snackbar: false, 922 snackbar: false,
911 y: "top", 923 y: "top",
912 x: "right", 924 x: "right",
913 mode: "", 925 mode: "",
914 timeout: 3000, 926 timeout: 3000,
915 text: "", 927 text: "",
916 showLoader: false, 928 showLoader: false,
917 loading: false, 929 loading: false,
918 date: null, 930 date: null,
919 search: "", 931 search: "",
920 menu: false, 932 menu: false,
921 menu1: false, 933 menu1: false,
922 menu2: false, 934 menu2: false,
923 menu3: false, 935 menu3: false,
924 dialog: false, 936 dialog: false,
925 dialog1: false, 937 dialog1: false,
926 valid: true, 938 valid: true,
927 isActive: true, 939 isActive: true,
928 newActive: false, 940 newActive: false,
929 pagination: { 941 pagination: {
930 rowsPerPage: 15 942 rowsPerPage: 15
931 }, 943 },
932 imageData: {}, 944 imageData: {},
933 imageName: "", 945 imageName: "",
934 imageUrl: "", 946 imageUrl: "",
935 imageFile: "", 947 imageFile: "",
936 nameRules: [v => !!v || " Full Name is required"], 948 nameRules: [v => !!v || " Full Name is required"],
937 dateRules: [v => !!v || " DOB is required"], 949 dateRules: [v => !!v || " DOB is required"],
938 cityRules: [v => !!v || " City Name is required"], 950 cityRules: [v => !!v || " City Name is required"],
939 pincode: [v => !!v || " Pincode is required"], 951 pincode: [v => !!v || " Pincode is required"],
940 country: [v => !!v || " Country Name is required"], 952 country: [v => !!v || " Country Name is required"],
941 permanentAddress: [v => !!v || " Permanent Address is required"], 953 permanentAddress: [v => !!v || " Permanent Address is required"],
942 presentAddress: [v => !!v || " Present Address is required"], 954 presentAddress: [v => !!v || " Present Address is required"],
943 mobileNoRules: [v => !!v || "Mobile Number is required"], 955 mobileNoRules: [v => !!v || "Mobile Number is required"],
944 stateRules: [v => !!v || "State Name is required"], 956 stateRules: [v => !!v || "State Name is required"],
945 joinDateRules: [v => !!v || " Join Date is required"], 957 joinDateRules: [v => !!v || " Join Date is required"],
946 errorMessages: "", 958 errorMessages: "",
947 emailRules: [ 959 emailRules: [
948 v => !!v || "E-mail is required", 960 v => !!v || "E-mail is required",
949 v => 961 v =>
950 /^\w+([.-]?\w+)*@\w+([.-]?\w+)*(\.\w{2,3})+$/.test(v) || 962 /^\w+([.-]?\w+)*@\w+([.-]?\w+)*(\.\w{2,3})+$/.test(v) ||
951 "E-mail must be valid" 963 "E-mail must be valid"
952 ], 964 ],
953 countries: [ 965 countries: [],
954 "Afghanistan",
955 "Albania",
956 "Algeria",
957 "Andorra",
958 "Angola",
959 "Anguilla",
960 "Antigua &amp; Barbuda",
961 "Argentina",
962 "Armenia",
963 "Aruba",
964 "Australia",
965 "Austria",
966 "Azerbaijan",
967 "Bahamas",
968 "Bahrain",
969 "Bangladesh",
970 "Barbados",
971 "Belarus",
972 "Belgium",
973 "Belize",
974 "Benin",
975 "Bermuda",
976 "Bhutan",
977 "Bolivia",
978 "Bosnia &amp; Herzegovina",
979 "Botswana",
980 "Brazil",
981 "British Virgin Islands",
982 "Brunei",
983 "Bulgaria",
984 "Burkina Faso",
985 "Burundi",
986 "Cambodia",
987 "Cameroon",
988 "Cape Verde",
989 "Cayman Islands",
990 "Chad",
991 "Chile",
992 "China",
993 "Colombia",
994 "Congo",
995 "Cook Islands",
996 "Costa Rica",
997 "Cote D Ivoire",
998 "Croatia",
999 "Cruise Ship",
1000 "Cuba",
1001 "Cyprus",
1002 "Czech Republic",
1003 "Denmark",
1004 "Djibouti",
1005 "Dominica",
1006 "Dominican Republic",
1007 "Ecuador",
1008 "Egypt",
1009 "El Salvador",
1010 "Equatorial Guinea",
1011 "Estonia",
1012 "Ethiopia",
1013 "Falkland Islands",
1014 "Faroe Islands",
1015 "Fiji",
1016 "Finland",
1017 "France",
1018 "French Polynesia",
1019 "French West Indies",
1020 "Gabon",
1021 "Gambia",
1022 "Georgia",
1023 "Germany",
1024 "Ghana",
1025 "Gibraltar",
1026 "Greece",
1027 "Greenland",
1028 "Grenada",
1029 "Guam",
1030 "Guatemala",
1031 "Guernsey",
1032 "Guinea",
1033 "Guinea Bissau",
1034 "Guyana",
1035 "Haiti",
1036 "Honduras",
1037 "Hong Kong",
1038 "Hungary",
1039 "Iceland",
1040 "India",
1041 "Indonesia",
1042 "Iran",
1043 "Iraq",
1044 "Ireland",
1045 "Isle of Man",
1046 "Israel",
1047 "Italy",
1048 "Jamaica",
1049 "Japan",
1050 "Jersey",
1051 "Jordan",
1052 "Kazakhstan",
1053 "Kenya",
1054 "Kuwait",
1055 "Kyrgyz Republic",
1056 "Laos",
1057 "Latvia",
1058 "Lebanon",
1059 "Lesotho",
1060 "Liberia",
1061 "Libya",
1062 "Liechtenstein",
1063 "Lithuania",
1064 "Luxembourg",
1065 "Macau",
1066 "Macedonia",
1067 "Madagascar",
1068 "Malawi",
1069 "Malaysia",
1070 "Maldives",
1071 "Mali",
1072 "Malta",
1073 "Mauritania",
1074 "Mauritius",
1075 "Mexico",
1076 "Moldova",
1077 "Monaco",
1078 "Mongolia",
1079 "Montenegro",
1080 "Montserrat",
1081 "Morocco",
1082 "Mozambique",
1083 "Namibia",
1084 "Nepal",
1085 "Netherlands",
1086 "Netherlands Antilles",
1087 "New Caledonia",
1088 "New Zealand",
1089 "Nicaragua",
1090 "Niger",
1091 "Nigeria",
1092 "Norway",
1093 "Oman",
1094 "Pakistan",
1095 "Palestine",
1096 "Panama",
1097 "Papua New Guinea",
1098 "Paraguay",
1099 "Peru",
1100 "Philippines",
1101 "Poland",
1102 "Portugal",
1103 "Puerto Rico",
1104 "Qatar",
1105 "Reunion",
1106 "Romania",
1107 "Russia",
1108 "Rwanda",
1109 "Saint Pierre &amp; Miquelon",
1110 "Samoa",
1111 "San Marino",
1112 "Satellite",
1113 "Saudi Arabia",
1114 "Senegal",
1115 "Serbia",
1116 "Seychelles",
1117 "Sierra Leone",
1118 "Singapore",
1119 "Slovakia",
1120 "Slovenia",
1121 "South Africa",
1122 "South Korea",
1123 "Spain",
1124 "Sri Lanka",
1125 "St Kitts &amp; Nevis",
1126 "St Lucia",
1127 "St Vincent",
1128 "St. Lucia",
1129 "Sudan",
1130 "Suriname",
1131 "Swaziland",
1132 "Sweden",
1133 "Switzerland",
1134 "Syria",
1135 "Taiwan",
1136 "Tajikistan",
1137 "Tanzania",
1138 "Thailand",
1139 "Timor L'Este",
1140 "Togo",
1141 "Tonga",
1142 "Trinidad &amp; Tobago",
1143 "Tunisia",
1144 "Turkey",
1145 "Turkmenistan",
1146 "Turks &amp; Caicos",
1147 "Uganda",
1148 "Ukraine",
1149 "United Arab Emirates",
1150 "United Kingdom",
1151 "United States",
1152 "Uruguay",
1153 "Uzbekistan",
1154 "Venezuela",
1155 "Vietnam",
1156 "Virgin Islands (US)",
1157 "Yemen",
1158 "Zambia",
1159 "Zimbabwe"
1160 ],
1161 headers: [ 966 headers: [
1162 { 967 {
1163 text: "No", 968 text: "No",
1164 align: "center", 969 align: "center",
1165 sortable: false, 970 sortable: false,
1166 value: "No" 971 value: "No"
1167 }, 972 },
1168 { 973 {
1169 text: "Profile Pic", 974 text: "Profile Pic",
1170 value: "profilePicUrl", 975 value: "profilePicUrl",
1171 sortable: false, 976 sortable: false,
1172 align: "center" 977 align: "center"
1173 }, 978 },
1174 { text: "Name", value: "name", sortable: false, align: "center" }, 979 { text: "Name", value: "name", sortable: false, align: "center" },
1175 { text: "Email", value: "email", sortable: false, align: "center" }, 980 { text: "Email", value: "email", sortable: false, align: "center" },
1176 { text: "DOB", value: "dob", sortable: false, align: "center" }, 981 { text: "DOB", value: "dob", sortable: false, align: "center" },
1177 { 982 {
1178 text: "Join Date", 983 text: "Join Date",
1179 value: "joinDate", 984 value: "joinDate",
1180 sortable: false, 985 sortable: false,
1181 align: "center" 986 align: "center"
1182 }, 987 },
1183 { 988 {
1184 text: "Mobile No", 989 text: "Mobile No",
1185 value: "mobileNo", 990 value: "mobileNo",
1186 sortable: false, 991 sortable: false,
1187 align: "center" 992 align: "center"
1188 }, 993 },
1189 { text: "Action", value: "", sortable: false, align: "center" } 994 { text: "Action", value: "", sortable: false, align: "center" }
1190 ], 995 ],
1191 desserts: [], 996 desserts: [],
1192 editedIndex: -1, 997 editedIndex: -1,
1193 upload: "", 998 upload: "",
1194 editedItem: { 999 editedItem: {
1195 role: "TEACHER", 1000 role: "TEACHER",
1196 name: "", 1001 name: "",
1197 email: "", 1002 email: "",
1198 date: null, 1003 date: null,
1199 city: "", 1004 city: "",
1200 pincode: "", 1005 pincode: "",
1201 country: "", 1006 country: "",
1202 permanentAddress: "", 1007 permanentAddress: "",
1203 presentAddress: "", 1008 presentAddress: "",
1204 mobileNo: "", 1009 mobileNo: "",
1205 state: "", 1010 state: "",
1206 joinDate: null 1011 joinDate: null
1207 }, 1012 },
1208 addTeachers: { 1013 addTeachers: {
1209 role: "TEACHER", 1014 role: "TEACHER",
1210 name: "", 1015 name: "",
1211 email: "", 1016 email: "",
1212 date: null, 1017 date: null,
1213 city: "", 1018 city: "",
1214 pincode: "", 1019 pincode: "",
1215 country: "", 1020 country: "",
1216 permanentAddress: "", 1021 permanentAddress: "",
1217 presentAddress: "", 1022 presentAddress: "",
1218 mobileNo: "", 1023 mobileNo: "",
1219 state: "", 1024 state: "",
1220 joinDate: null 1025 joinDate: null
1221 }, 1026 },
1222 defaultItem: { 1027 defaultItem: {
1223 role: "TEACHER", 1028 role: "TEACHER",
1224 name: "", 1029 name: "",
1225 email: "" 1030 email: ""
1226 } 1031 }
1227 }), 1032 }),
1228 watch: { 1033 watch: {
1229 menu(val) { 1034 menu(val) {
1230 val && this.$nextTick(() => (this.$refs.picker.activePicker = "YEAR")); 1035 val && this.$nextTick(() => (this.$refs.picker.activePicker = "YEAR"));
1231 }, 1036 },
1232 menu1(val) { 1037 menu1(val) {
1233 val && this.$nextTick(() => (this.$refs.picker.activePicker = "YEAR")); 1038 val && this.$nextTick(() => (this.$refs.picker.activePicker = "YEAR"));
1234 } 1039 }
1235 }, 1040 },
1236 methods: { 1041 methods: {
1237 save(date) { 1042 save(date) {
1238 this.$refs.menu.save(date); 1043 this.$refs.menu.save(date);
1239 }, 1044 },
1240 save(date) { 1045 save(date) {
1241 this.$refs.menu1.save(date); 1046 this.$refs.menu1.save(date);
1242 }, 1047 },
1243 pickFile() { 1048 pickFile() {
1244 this.$refs.image.click(); 1049 this.$refs.image.click();
1245 }, 1050 },
1246 onFilePicked(e) { 1051 onFilePicked(e) {
1247 // console.log(e) 1052 // console.log(e)
1248 const files = e.target.files; 1053 const files = e.target.files;
1249 this.upload = e.target.files[0]; 1054 this.upload = e.target.files[0];
1250 console.log("imageData-upload========>", this.upload); 1055 console.log("imageData-upload========>", this.upload);
1251 if (files[0] !== undefined) { 1056 if (files[0] !== undefined) {
1252 this.imageName = files[0].name; 1057 this.imageName = files[0].name;
1253 if (this.imageName.lastIndexOf(".") <= 0) { 1058 if (this.imageName.lastIndexOf(".") <= 0) {
1254 return; 1059 return;
1255 } 1060 }
1256 const fr = new FileReader(); 1061 const fr = new FileReader();
1257 fr.readAsDataURL(files[0]); 1062 fr.readAsDataURL(files[0]);
1258 fr.addEventListener("load", () => { 1063 fr.addEventListener("load", () => {
1259 this.imageUrl = fr.result; 1064 this.imageUrl = fr.result;
1260 this.imageFile = files[0]; // this is an image file that can be sent to server... 1065 this.imageFile = files[0]; // this is an image file that can be sent to server...
1261 // this.imageData.imageUrl = URL.createObjectURL(this.imageFile); 1066 // this.imageData.imageUrl = URL.createObjectURL(this.imageFile);
1262 // console.log("upload=======>", this.imageData.imageUrl); 1067 // console.log("upload=======>", this.imageData.imageUrl);
1263 console.log("imageFile", this.imageUrl); 1068 console.log("imageFile", this.imageUrl);
1264 }); 1069 });
1265 } else { 1070 } else {
1266 this.imageName = ""; 1071 this.imageName = "";
1267 this.imageFile = ""; 1072 this.imageFile = "";
1268 this.imageUrl = ""; 1073 this.imageUrl = "";
1269 } 1074 }
1270 }, 1075 },
1271 dates: function(date) { 1076 dates: function(date) {
1272 return moment(date).format("MMMM DD, YYYY"); 1077 return moment(date).format("MMMM DD, YYYY");
1273 }, 1078 },
1274 getTeacherList() { 1079 getTeacherList() {
1275 this.showLoader = true; 1080 this.showLoader = true;
1276 var token = this.$store.state.token; 1081 var token = this.$store.state.token;
1277 http() 1082 http()
1278 .get("/getTeachersList", { 1083 .get("/getTeachersList", {
1279 headers: { Authorization: "Bearer " + token } 1084 headers: { Authorization: "Bearer " + token }
1280 }) 1085 })
1281 .then(response => { 1086 .then(response => {
1282 this.desserts = response.data.data; 1087 this.desserts = response.data.data;
1283 this.showLoader = false; 1088 this.showLoader = false;
1284 // console.log("getTeacherList=====>",this.desserts) 1089 // console.log("getTeacherList=====>",this.desserts)
1285 }) 1090 })
1286 .catch(error => { 1091 .catch(error => {
1287 this.showLoader = false; 1092 this.showLoader = false;
1288 if (error.response.status === 401) { 1093 if (error.response.status === 401) {
1289 this.$router.replace({ path: "/" }); 1094 this.$router.replace({ path: "/" });
1290 this.$store.dispatch("setToken", null); 1095 this.$store.dispatch("setToken", null);
1291 this.$store.dispatch("Id", null); 1096 this.$store.dispatch("Id", null);
1292 } 1097 }
1293 }); 1098 });
1294 }, 1099 },
1295 editItem(item) { 1100 editItem(item) {
1296 this.editedIndex = this.desserts.indexOf(item); 1101 this.editedIndex = this.desserts.indexOf(item);
1297 this.editedItem = Object.assign({}, item); 1102 this.editedItem = Object.assign({}, item);
1298 this.editedItem.dob = 1103 this.editedItem.dob =
1299 this.editedItem.dob != undefined 1104 this.editedItem.dob != undefined
1300 ? (this.editedItem.dob = this.editedItem.dob.substring(0, 10)) 1105 ? (this.editedItem.dob = this.editedItem.dob.substring(0, 10))
1301 : (this.editedItem.dob = ""); 1106 : (this.editedItem.dob = "");
1302 this.editedItem.joinDate = 1107 this.editedItem.joinDate =
1303 this.editedItem.joinDate != undefined 1108 this.editedItem.joinDate != undefined
1304 ? (this.editedItem.joinDate = this.editedItem.joinDate.substring( 1109 ? (this.editedItem.joinDate = this.editedItem.joinDate.substring(
1305 0, 1110 0,
1306 10 1111 10
1307 )) 1112 ))
1308 : (this.editedItem.joinDate = ""); 1113 : (this.editedItem.joinDate = "");
1309 1114
1310 this.dialog = true; 1115 this.dialog = true;
1311 }, 1116 },
1312 profile(item) { 1117 profile(item) {
1313 this.editedIndex = this.desserts.indexOf(item); 1118 this.editedIndex = this.desserts.indexOf(item);
1314 this.editedItem = Object.assign({}, item); 1119 this.editedItem = Object.assign({}, item);
1315 this.dialog1 = true; 1120 this.dialog1 = true;
1316 }, 1121 },
1317 deleteItem(item) { 1122 deleteItem(item) {
1318 let deleteTeachers = { 1123 let deleteTeachers = {
1319 teacherId: item._id 1124 teacherId: item._id
1320 }; 1125 };
1321 // console.log("deleteUers",deleteTeachers) 1126 // console.log("deleteUers",deleteTeachers)
1322 http() 1127 http()
1323 .delete( 1128 .delete(
1324 "/deleteTeacher", 1129 "/deleteTeacher",
1325 confirm("Are you sure you want to delete this?") && { 1130 confirm("Are you sure you want to delete this?") && {
1326 params: deleteTeachers 1131 params: deleteTeachers
1327 } 1132 }
1328 ) 1133 )
1329 .then(response => { 1134 .then(response => {
1330 // console.log("deleteUers",deleteTeachers) 1135 // console.log("deleteUers",deleteTeachers)
1331 if ((this.snackbar = true)) { 1136 if ((this.snackbar = true)) {
1332 this.text = "Successfully delete Existing Teacher"; 1137 this.text = "Successfully delete Existing Teacher";
1333 } 1138 }
1334 this.getTeacherList(); 1139 this.getTeacherList();
1335 }) 1140 })
1336 .catch(error => { 1141 .catch(error => {
1337 console.log(error); 1142 console.log(error);
1338 }); 1143 });
1339 }, 1144 },
1340 activeTab(type) { 1145 activeTab(type) {
1341 switch (type) { 1146 switch (type) {
1342 case "existing": 1147 case "existing":
1343 this.newActive = false; 1148 this.newActive = false;
1344 this.isActive = true; 1149 this.isActive = true;
1345 break; 1150 break;
1346 1151
1347 default: 1152 default:
1348 this.newActive = true; 1153 this.newActive = true;
1349 this.isActive = false; 1154 this.isActive = false;
1350 break; 1155 break;
1351 } 1156 }
1352 }, 1157 },
1353 close() { 1158 close() {
1354 this.dialog = false; 1159 this.dialog = false;
1355 setTimeout(() => { 1160 setTimeout(() => {
1356 this.editedItem = Object.assign({}, this.defaultItem); 1161 this.editedItem = Object.assign({}, this.defaultItem);
1357 this.editedIndex = -1; 1162 this.editedIndex = -1;
1358 }, 300); 1163 }, 300);
1359 }, 1164 },
1360 close1() { 1165 close1() {
1361 this.dialog1 = false; 1166 this.dialog1 = false;
1362 }, 1167 },
1363 submit() { 1168 submit() {
1364 if (this.$refs.form.validate()) { 1169 if (this.$refs.form.validate()) {
1365 let addTeacher = { 1170 let addTeacher = {
1366 name: this.addTeachers.name, 1171 name: this.addTeachers.name,
1367 email: this.addTeachers.email, 1172 email: this.addTeachers.email,
1368 role: this.addTeachers.role, 1173 role: this.addTeachers.role,
1369 dob: this.addTeachers.date, 1174 dob: this.addTeachers.date,
1370 city: this.addTeachers.city, 1175 city: this.addTeachers.city,
1371 pincode: this.addTeachers.pincode, 1176 pincode: this.addTeachers.pincode,
1372 country: this.addTeachers.country, 1177 country: this.addTeachers.country,
1373 permanentAddress: this.addTeachers.permanentAddress, 1178 permanentAddress: this.addTeachers.permanentAddress,
1374 presentAddress: this.addTeachers.presentAddress, 1179 presentAddress: this.addTeachers.presentAddress,
1375 mobileNo: this.addTeachers.mobileNo, 1180 mobileNo: this.addTeachers.mobileNo,
1376 state: this.addTeachers.state, 1181 state: this.addTeachers.state,
1377 joinDate: this.addTeachers.joinDate 1182 joinDate: this.addTeachers.joinDate
1378 }; 1183 };
1379 if (this.imageUrl) { 1184 if (this.imageUrl) {
1380 var str = this.imageUrl; 1185 var str = this.imageUrl;
1381 const [baseUrl, imageUrl] = str.split(/,/); 1186 const [baseUrl, imageUrl] = str.split(/,/);
1382 addTeacher.upload = imageUrl; 1187 addTeacher.upload = imageUrl;
1383 } 1188 }
1384 this.loading = true; 1189 this.loading = true;
1385 http() 1190 http()
1386 .post("/createTeacher", addTeacher) 1191 .post("/createTeacher", addTeacher)
1387 .then(response => { 1192 .then(response => {
1388 this.imageUrl = ""; 1193 this.imageUrl = "";
1389 this.getTeacherList(); 1194 this.getTeacherList();
1390 this.snackbar = true; 1195 this.snackbar = true;
1391 this.text = "New Teacher added successfully"; 1196 this.text = "New Teacher added successfully";
1392 this.clear(); 1197 this.clear();
1393 this.loading = false; 1198 this.loading = false;
1394 }) 1199 })
1395 .catch(error => { 1200 .catch(error => {
1396 // console.log(error); 1201 // console.log(error);
1397 if ((this.snackbar = true)) { 1202 if ((this.snackbar = true)) {
1398 this.text = error.response.data.message; 1203 this.text = error.response.data.message;
1399 } 1204 }
1400 this.loading = false; 1205 this.loading = false;
1401 }); 1206 });
1402 } 1207 }
1403 }, 1208 },
1404 clear() { 1209 clear() {
1405 this.$refs.form.reset(); 1210 this.$refs.form.reset();
1406 this.imageUrl = ""; 1211 this.imageUrl = "";
1407 }, 1212 },
1408 save() { 1213 save() {
1409 this.loading = true; 1214 this.loading = true;
1410 let editTeacher = { 1215 let editTeacher = {
1411 teacherId: this.editedItem._id, 1216 teacherId: this.editedItem._id,
1412 name: this.editedItem.name, 1217 name: this.editedItem.name,
1413 email: this.editedItem.email, 1218 email: this.editedItem.email,
1414 role: this.editedItem.role, 1219 role: this.editedItem.role,
1415 dob: this.editedItem.date, 1220 dob: this.editedItem.date,
1416 city: this.editedItem.city, 1221 city: this.editedItem.city,
1417 pincode: this.editedItem.pincode, 1222 pincode: this.editedItem.pincode,
1418 country: this.editedItem.country, 1223 country: this.editedItem.country,
1419 permanentAddress: this.editedItem.permanentAddress, 1224 permanentAddress: this.editedItem.permanentAddress,
1420 presentAddress: this.editedItem.presentAddress, 1225 presentAddress: this.editedItem.presentAddress,
1421 mobileNo: this.editedItem.mobileNo, 1226 mobileNo: this.editedItem.mobileNo,
1422 state: this.editedItem.state, 1227 state: this.editedItem.state,
1423 joinDate: this.editedItem.joinDate 1228 joinDate: this.editedItem.joinDate
1424 }; 1229 };
1425 if (this.imageUrl) { 1230 if (this.imageUrl) {
1426 var str = this.imageUrl; 1231 var str = this.imageUrl;
1427 const [baseUrl, imageUrl] = str.split(/,/); 1232 const [baseUrl, imageUrl] = str.split(/,/);
1428 editTeacher.upload = imageUrl; 1233 editTeacher.upload = imageUrl;
1429 } 1234 }
1430 http() 1235 http()
1431 .put("/updateTeacher", editTeacher) 1236 .put("/updateTeacher", editTeacher)
1432 .then(response => { 1237 .then(response => {
1433 console.log("editTeacher", editTeacher); 1238 console.log("editTeacher", editTeacher);
1434 this.snackbar = true; 1239 this.snackbar = true;
1435 this.text = "Successfully Edit Existing Teacher"; 1240 this.text = "Successfully Edit Existing Teacher";
1436 this.loading = false; 1241 this.loading = false;
1437 this.getTeacherList(); 1242 this.getTeacherList();
1438 this.close(); 1243 this.close();
1439 }) 1244 })
1440 .catch(error => { 1245 .catch(error => {
1441 console.log(error); 1246 console.log(error);
1442 this.loading = false; 1247 this.loading = false;
1443 }); 1248 });
1444 } 1249 }
1445 }, 1250 },
1446 mounted() { 1251 mounted() {
1252 const getCountryList = countryList();
1253 this.countries = getCountryList;
1447 this.getTeacherList(); 1254 this.getTeacherList();
1448 }, 1255 },
1449 created() { 1256 created() {
1450 this.$root.$on("app:search", search => { 1257 this.$root.$on("app:search", search => {
1451 this.search = search; 1258 this.search = search;
1452 }); 1259 });
1453 }, 1260 },
src/pages/TimeTable/timeTable.vue
Diff comments   View file @495e403
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 Time Table</v-tab> 10 >Existing Time Table</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 Time Table</v-tab> 18 >Add New Time Table</v-tab>
19 19
20 <!-- ****** EDITS TIME-TABLE****** --> 20 <!-- ****** EDITS TIME-TABLE****** -->
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> 32 <v-flex xs12 sm12>
33 <v-toolbar color="grey lighten-2"> 33 <v-toolbar color="grey lighten-2">
34 <v-spacer></v-spacer> 34 <v-spacer></v-spacer>
35 <v-toolbar-title> 35 <v-toolbar-title>
36 <h3>Edit Time Table</h3> 36 <h3>Edit Time Table</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 class="pa-2"> 40 <v-card flat class="pa-2">
41 <!-- <v-layout> 41 <!-- <v-layout>
42 <v-flex 42 <v-flex
43 xs12 43 xs12
44 class="text-xs-center text-sm-center text-md-center text-lg-center" 44 class="text-xs-center text-sm-center text-md-center text-lg-center"
45 > 45 >
46 <v-avatar size="100px"> 46 <v-avatar size="100px">
47 <img src="/static/icon/user.png" v-if="!imageUrl" /> 47 <img src="/static/icon/user.png" v-if="!imageUrl" />
48 </v-avatar> 48 </v-avatar>
49 <input 49 <input
50 type="file" 50 type="file"
51 style="display: none" 51 style="display: none"
52 ref="image" 52 ref="image"
53 accept="image/*" 53 accept="image/*"
54 @change="onFilePicked" 54 @change="onFilePicked"
55 /> 55 />
56 <img 56 <img
57 :src="imageData.imageUrl" 57 :src="imageData.imageUrl"
58 height="150" 58 height="150"
59 v-if="imageUrl" 59 v-if="imageUrl"
60 style="border-radius:50%; width:200px" 60 style="border-radius:50%; width:200px"
61 /> 61 />
62 </v-flex> 62 </v-flex>
63 </v-layout>--> 63 </v-layout>-->
64 <v-flex xs12 sm12> 64 <v-flex xs12 sm12>
65 <v-layout> 65 <v-layout>
66 <v-flex xs4 class="pt-4 subheading"> 66 <v-flex xs4 class="pt-4 subheading">
67 <label class="right">class No:</label> 67 <label class="right">class No:</label>
68 </v-flex> 68 </v-flex>
69 <v-flex xs8 sm5 class="ml-3"> 69 <v-flex xs8 sm5 class="ml-3">
70 <v-select 70 <v-select
71 :items="addclass" 71 :items="addclass"
72 label="Select Class" 72 label="Select Class"
73 v-model="editedItem.classNum" 73 v-model="editedItem.classNum"
74 item-text="classNum" 74 item-text="classNum"
75 item-value="_id" 75 item-value="_id"
76 @change="getSections(editedItem.classNum)" 76 @change="getSections(editedItem.classNum)"
77 ></v-select> 77 ></v-select>
78 </v-flex> 78 </v-flex>
79 </v-layout> 79 </v-layout>
80 </v-flex> 80 </v-flex>
81 <v-flex xs12 sm12> 81 <v-flex xs12 sm12>
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 hidden-xs-only hidden-sm-only">Section Name:</label> 84 <label class="right hidden-xs-only hidden-sm-only">Section Name:</label>
85 <label class="right hidden-lg-only hidden-md-only hidden-xl-only">Section:</label> 85 <label class="right hidden-lg-only hidden-md-only hidden-xl-only">Section:</label>
86 </v-flex> 86 </v-flex>
87 <v-flex xs8 sm5 class="ml-3"> 87 <v-flex xs8 sm5 class="ml-3">
88 <v-select 88 <v-select
89 :items="addSection" 89 :items="addSection"
90 label="Select Section" 90 label="Select Section"
91 v-model="editedItem.selectSection" 91 v-model="editedItem.selectSection"
92 item-text="name" 92 item-text="name"
93 item-value="_id" 93 item-value="_id"
94 ></v-select> 94 ></v-select>
95 </v-flex> 95 </v-flex>
96 </v-layout> 96 </v-layout>
97 </v-flex> 97 </v-flex>
98 <v-layout> 98 <v-layout>
99 <v-flex xs12 sm9 offset-sm1> 99 <v-flex xs12 sm9 offset-sm1>
100 <v-card-actions> 100 <v-card-actions>
101 <v-btn round dark @click.native="close">Cancel</v-btn> 101 <v-btn round dark @click.native="close">Cancel</v-btn>
102 <v-spacer></v-spacer> 102 <v-spacer></v-spacer>
103 <v-btn round dark @click="save">Save</v-btn> 103 <v-btn round dark @click="save">Save</v-btn>
104 </v-card-actions> 104 </v-card-actions>
105 </v-flex> 105 </v-flex>
106 </v-layout> 106 </v-layout>
107 </v-card> 107 </v-card>
108 </v-flex> 108 </v-flex>
109 </v-dialog> 109 </v-dialog>
110 110
111 <!-- ****** ADD Dialog Schedule IN TIME-TABLE ****** --> 111 <!-- ****** ADD Dialog Schedule IN TIME-TABLE ****** -->
112 112
113 <v-dialog v-model="dialogSchedule" max-width="600px"> 113 <v-dialog v-model="dialogSchedule" max-width="600px">
114 <v-flex xs12 sm12> 114 <v-flex xs12 sm12>
115 <v-toolbar color="grey lighten-2"> 115 <v-toolbar color="grey lighten-2">
116 <v-spacer></v-spacer> 116 <v-spacer></v-spacer>
117 <v-toolbar-title> 117 <v-toolbar-title>
118 <h3>Add Schedule</h3> 118 <h3>Add Schedule</h3>
119 </v-toolbar-title> 119 </v-toolbar-title>
120 <v-spacer></v-spacer> 120 <v-spacer></v-spacer>
121 </v-toolbar> 121 </v-toolbar>
122 <v-card flat> 122 <v-card flat>
123 <v-form> 123 <v-form>
124 <v-container fluid> 124 <v-container fluid>
125 <v-flex xs12 sm12 class="py-3"> 125 <v-flex xs12 sm12 class="py-3">
126 <v-layout> 126 <v-layout>
127 <v-flex xs4 class="pt-4 subheading"> 127 <v-flex xs4 class="pt-4 subheading">
128 <label class="right hidden-xs-only hidden-sm-only">Select Day:</label> 128 <label class="right hidden-xs-only hidden-sm-only">Select Day:</label>
129 <label class="right hidden-lg-only hidden-md-only hidden-xl-only">Day:</label> 129 <label class="right hidden-lg-only hidden-md-only hidden-xl-only">Day:</label>
130 </v-flex> 130 </v-flex>
131 <v-flex xs12 sm5 class="pl-3"> 131 <v-flex xs12 sm5 class="pl-3">
132 <v-select 132 <v-select
133 :items="addOneDay" 133 :items="addOneDay"
134 label="Select Day" 134 label="Select Day"
135 v-model="schedule.selectDay" 135 v-model="schedule.selectDay"
136 ></v-select> 136 ></v-select>
137 </v-flex> 137 </v-flex>
138 </v-layout> 138 </v-layout>
139 </v-flex> 139 </v-flex>
140 <v-layout> 140 <v-layout>
141 <v-flex xs12 sm8 offset-sm2> 141 <v-flex xs12 sm8 offset-sm2>
142 <v-card-actions> 142 <v-card-actions>
143 <v-spacer></v-spacer> 143 <v-spacer></v-spacer>
144 <v-btn round dark @click="submitSchedule">Save</v-btn> 144 <v-btn round dark @click="submitSchedule">Save</v-btn>
145 <v-spacer></v-spacer> 145 <v-spacer></v-spacer>
146 </v-card-actions> 146 </v-card-actions>
147 </v-flex> 147 </v-flex>
148 </v-layout> 148 </v-layout>
149 </v-container> 149 </v-container>
150 </v-form> 150 </v-form>
151 </v-card> 151 </v-card>
152 </v-flex> 152 </v-flex>
153 </v-dialog> 153 </v-dialog>
154 154
155 <!-- ****** ADD LECTURES IN TIME-TABLE ****** --> 155 <!-- ****** ADD LECTURES IN TIME-TABLE ****** -->
156 156
157 <v-dialog v-model="dialogAddLecture" max-width="1000px"> 157 <v-dialog v-model="dialogAddLecture" max-width="1000px">
158 <v-flex xs12 sm12> 158 <v-flex xs12 sm12>
159 <v-toolbar color="grey lighten-2"> 159 <v-toolbar color="grey lighten-2">
160 <v-spacer></v-spacer> 160 <v-spacer></v-spacer>
161 <v-toolbar-title> 161 <v-toolbar-title>
162 <h3>Add Lecture</h3> 162 <h3>Add Lecture</h3>
163 </v-toolbar-title> 163 </v-toolbar-title>
164 <v-spacer></v-spacer> 164 <v-spacer></v-spacer>
165 </v-toolbar> 165 </v-toolbar>
166 <v-card flat> 166 <v-card flat>
167 <v-form ref="lectureForm" v-model="valid" lazy-validation> 167 <v-form ref="lectureForm" v-model="valid" lazy-validation>
168 <v-container fluid> 168 <v-container fluid>
169 <v-flex xs12 sm12> 169 <v-flex xs12 sm12>
170 <v-layout> 170 <v-layout>
171 <v-flex xs4 class="pt-4 subheading"> 171 <v-flex xs4 class="pt-4 subheading">
172 <label class="right">Subject Name:</label> 172 <label class="right">Subject Name:</label>
173 </v-flex> 173 </v-flex>
174 <v-flex xs5 class="ml-3"> 174 <v-flex xs5 class="ml-3">
175 <v-text-field 175 <v-text-field
176 v-model="addlectures.subjectName" 176 v-model="addlectures.subjectName"
177 :rules="subjectNameRules" 177 :rules="subjectNameRules"
178 placeholder="fill your Subject Name" 178 placeholder="fill your Subject Name"
179 type="text" 179 type="text"
180 ></v-text-field> 180 ></v-text-field>
181 </v-flex> 181 </v-flex>
182 </v-layout> 182 </v-layout>
183 </v-flex> 183 </v-flex>
184 <v-flex xs12 sm12> 184 <v-flex xs12 sm12>
185 <v-layout> 185 <v-layout>
186 <v-flex xs4 class="pt-4 subheading"> 186 <v-flex xs4 class="pt-4 subheading">
187 <label class="right">Time In:</label> 187 <label class="right">Time In:</label>
188 </v-flex> 188 </v-flex>
189 <v-flex xs5 class="ml-3"> 189 <v-flex xs5 class="ml-3">
190 <v-menu 190 <v-menu
191 ref="menuD" 191 ref="menuD"
192 :close-on-content-click="false" 192 :close-on-content-click="false"
193 v-model="menu5" 193 v-model="menu5"
194 :nudge-right="40" 194 :nudge-right="40"
195 lazy 195 lazy
196 transition="scale-transition" 196 transition="scale-transition"
197 offset-y 197 offset-y
198 full-width 198 full-width
199 max-width="290px" 199 max-width="290px"
200 min-width="290px" 200 min-width="290px"
201 > 201 >
202 <v-text-field 202 <v-text-field
203 slot="activator" 203 slot="activator"
204 v-model="addlectures.timeIn" 204 v-model="addlectures.timeIn"
205 label="Select your Time In" 205 label="Select your Time In"
206 append-icon="access_time" 206 append-icon="access_time"
207 :rules="timeInRules" 207 :rules="timeInRules"
208 ></v-text-field> 208 ></v-text-field>
209 <v-time-picker v-model="addlectures.timeIn" @change="menu5 = false"></v-time-picker> 209 <v-time-picker v-model="addlectures.timeIn" @change="menu5 = false"></v-time-picker>
210 </v-menu> 210 </v-menu>
211 </v-flex> 211 </v-flex>
212 </v-layout> 212 </v-layout>
213 </v-flex> 213 </v-flex>
214 <v-flex xs12 sm12> 214 <v-flex xs12 sm12>
215 <v-layout> 215 <v-layout>
216 <v-flex xs4 class="pt-4 subheading"> 216 <v-flex xs4 class="pt-4 subheading">
217 <label class="right">Time Out:</label> 217 <label class="right">Time Out:</label>
218 </v-flex> 218 </v-flex>
219 <v-flex xs5 class="ml-3"> 219 <v-flex xs5 class="ml-3">
220 <v-menu 220 <v-menu
221 ref="menuE" 221 ref="menuE"
222 :close-on-content-click="false" 222 :close-on-content-click="false"
223 v-model="menu6" 223 v-model="menu6"
224 :nudge-right="40" 224 :nudge-right="40"
225 lazy 225 lazy
226 transition="scale-transition" 226 transition="scale-transition"
227 offset-y 227 offset-y
228 full-width 228 full-width
229 max-width="290px" 229 max-width="290px"
230 min-width="290px" 230 min-width="290px"
231 > 231 >
232 <v-text-field 232 <v-text-field
233 slot="activator" 233 slot="activator"
234 :rules="timeOutRules" 234 :rules="timeOutRules"
235 v-model="addlectures.timeOut" 235 v-model="addlectures.timeOut"
236 label="Select your Time Out" 236 label="Select your Time Out"
237 append-icon="access_time" 237 append-icon="access_time"
238 ></v-text-field> 238 ></v-text-field>
239 <v-time-picker v-model="addlectures.timeOut" @change="menu6 = false"></v-time-picker> 239 <v-time-picker v-model="addlectures.timeOut" @change="menu6 = false"></v-time-picker>
240 </v-menu> 240 </v-menu>
241 </v-flex> 241 </v-flex>
242 </v-layout> 242 </v-layout>
243 </v-flex> 243 </v-flex>
244 <v-flex xs12 sm12> 244 <v-flex xs12 sm12>
245 <v-layout> 245 <v-layout>
246 <v-flex xs4 class="pt-4 subheading"> 246 <v-flex xs4 class="pt-4 subheading">
247 <label class="right">Select Teacher:</label> 247 <label class="right">Select Teacher:</label>
248 </v-flex> 248 </v-flex>
249 <v-flex xs5 class="ml-3"> 249 <v-flex xs5 class="ml-3">
250 <v-select 250 <v-select
251 :items="addTeachers" 251 :items="addTeachers"
252 v-model="addlectures.teacherId" 252 v-model="addlectures.teacherId"
253 :rules="subjectNameRules" 253 :rules="subjectNameRules"
254 item-text="name" 254 item-text="name"
255 item-value="_id" 255 item-value="_id"
256 required 256 required
257 ></v-select> 257 ></v-select>
258 </v-flex> 258 </v-flex>
259 </v-layout> 259 </v-layout>
260 </v-flex> 260 </v-flex>
261 <v-layout> 261 <v-layout>
262 <v-flex xs12 sm8 offset-sm2> 262 <v-flex xs12 sm8 offset-sm2>
263 <v-card-actions> 263 <v-card-actions>
264 <v-btn round dark @click.native="closedialogLecture">Cancel</v-btn> 264 <v-btn round dark @click.native="closedialogLecture">Cancel</v-btn>
265 <v-spacer></v-spacer> 265 <v-spacer></v-spacer>
266 <v-btn round dark @click="AddLecture">Save</v-btn> 266 <v-btn round dark @click="AddLecture">Save</v-btn>
267 </v-card-actions> 267 </v-card-actions>
268 </v-flex> 268 </v-flex>
269 </v-layout> 269 </v-layout>
270 </v-container> 270 </v-container>
271 </v-form> 271 </v-form>
272 </v-card> 272 </v-card>
273 </v-flex> 273 </v-flex>
274 </v-dialog> 274 </v-dialog>
275 275
276 <!-- ****** EDIT PARTICULAR LECTURES TIME-TABLE ****** --> 276 <!-- ****** EDIT PARTICULAR LECTURES TIME-TABLE ****** -->
277 277
278 <v-dialog v-model="dialogUpdateLectures" max-width="600px"> 278 <v-dialog v-model="dialogUpdateLectures" max-width="600px">
279 <v-flex xs12 sm12 class> 279 <v-flex xs12 sm12 class>
280 <v-toolbar color="grey lighten-2"> 280 <v-toolbar color="grey lighten-2">
281 <v-spacer></v-spacer> 281 <v-spacer></v-spacer>
282 <v-toolbar-title>Edit Lecture</v-toolbar-title> 282 <v-toolbar-title>Edit Lecture</v-toolbar-title>
283 <v-spacer></v-spacer> 283 <v-spacer></v-spacer>
284 </v-toolbar> 284 </v-toolbar>
285 <v-card flat class="pa-2"> 285 <v-card flat class="pa-2">
286 <v-flex xs12 sm12> 286 <v-flex xs12 sm12>
287 <v-layout> 287 <v-layout>
288 <v-flex xs5 sm4 class="pt-4 subheading"> 288 <v-flex xs5 sm4 class="pt-4 subheading">
289 <label class="right">Subject Name:</label> 289 <label class="right">Subject Name:</label>
290 </v-flex> 290 </v-flex>
291 <v-flex xs7 sm6 class="ml-3"> 291 <v-flex xs7 sm6 class="ml-3">
292 <v-text-field 292 <v-text-field
293 v-model="updateLectures.subjectName" 293 v-model="updateLectures.subjectName"
294 placeholder="fill your Subject Name" 294 placeholder="fill your Subject Name"
295 type="text" 295 type="text"
296 ></v-text-field> 296 ></v-text-field>
297 </v-flex> 297 </v-flex>
298 </v-layout> 298 </v-layout>
299 </v-flex> 299 </v-flex>
300 <v-flex xs12 sm12> 300 <v-flex xs12 sm12>
301 <v-layout> 301 <v-layout>
302 <v-flex xs5 sm4 class="pt-4 subheading"> 302 <v-flex xs5 sm4 class="pt-4 subheading">
303 <label class="right">Time In:</label> 303 <label class="right">Time In:</label>
304 </v-flex> 304 </v-flex>
305 <v-flex xs7 sm6 class="ml-3"> 305 <v-flex xs7 sm6 class="ml-3">
306 <v-menu 306 <v-menu
307 ref="menuC" 307 ref="menuC"
308 :close-on-content-click="false" 308 :close-on-content-click="false"
309 v-model="menu4" 309 v-model="menu4"
310 :nudge-right="40" 310 :nudge-right="40"
311 lazy 311 lazy
312 transition="scale-transition" 312 transition="scale-transition"
313 offset-y 313 offset-y
314 full-width 314 full-width
315 max-width="290px" 315 max-width="290px"
316 min-width="290px" 316 min-width="290px"
317 > 317 >
318 <v-text-field 318 <v-text-field
319 slot="activator" 319 slot="activator"
320 v-model="updateLectures.timeIn" 320 v-model="updateLectures.timeIn"
321 placeholder="Select your Time In" 321 placeholder="Select your Time In"
322 append-icon="access_time" 322 append-icon="access_time"
323 ></v-text-field> 323 ></v-text-field>
324 <v-time-picker v-model="updateLectures.timeIn" @change="menu4= false"></v-time-picker> 324 <v-time-picker v-model="updateLectures.timeIn" @change="menu4= false"></v-time-picker>
325 </v-menu> 325 </v-menu>
326 </v-flex> 326 </v-flex>
327 </v-layout> 327 </v-layout>
328 </v-flex> 328 </v-flex>
329 <v-flex xs12 sm12> 329 <v-flex xs12 sm12>
330 <v-layout> 330 <v-layout>
331 <v-flex xs5 sm4 class="pt-4 subheading"> 331 <v-flex xs5 sm4 class="pt-4 subheading">
332 <label class="right">Time Out:</label> 332 <label class="right">Time Out:</label>
333 </v-flex> 333 </v-flex>
334 <v-flex xs7 sm6 class="ml-3"> 334 <v-flex xs7 sm6 class="ml-3">
335 <v-menu 335 <v-menu
336 ref="menuB" 336 ref="menuB"
337 :close-on-content-click="false" 337 :close-on-content-click="false"
338 v-model="menu3" 338 v-model="menu3"
339 :nudge-right="40" 339 :nudge-right="40"
340 lazy 340 lazy
341 transition="scale-transition" 341 transition="scale-transition"
342 offset-y 342 offset-y
343 full-width 343 full-width
344 max-width="290px" 344 max-width="290px"
345 min-width="290px" 345 min-width="290px"
346 > 346 >
347 <v-text-field 347 <v-text-field
348 slot="activator" 348 slot="activator"
349 v-model="updateLectures.timeOut" 349 v-model="updateLectures.timeOut"
350 placeholder="Select your Time Out" 350 placeholder="Select your Time Out"
351 append-icon="access_time" 351 append-icon="access_time"
352 ></v-text-field> 352 ></v-text-field>
353 <v-time-picker v-model="updateLectures.timeOut" @change="menu3 = false"></v-time-picker> 353 <v-time-picker v-model="updateLectures.timeOut" @change="menu3 = false"></v-time-picker>
354 </v-menu> 354 </v-menu>
355 </v-flex> 355 </v-flex>
356 </v-layout> 356 </v-layout>
357 </v-flex> 357 </v-flex>
358 <v-flex xs12 sm12> 358 <v-flex xs12 sm12>
359 <v-layout> 359 <v-layout>
360 <v-flex xs5 sm4 class="pt-4 subheading"> 360 <v-flex xs5 sm4 class="pt-4 subheading">
361 <label class="right">Select Teacher:</label> 361 <label class="right">Select Teacher:</label>
362 </v-flex> 362 </v-flex>
363 <v-flex xs7 sm6 class="ml-3"> 363 <v-flex xs7 sm6 class="ml-3">
364 <v-select 364 <v-select
365 :items="addTeachers" 365 :items="addTeachers"
366 label="Select Teacher" 366 label="Select Teacher"
367 v-model="updateLectures.teacherId" 367 v-model="updateLectures.teacherId"
368 item-text="name" 368 item-text="name"
369 item-value="_id" 369 item-value="_id"
370 required 370 required
371 ></v-select> 371 ></v-select>
372 </v-flex> 372 </v-flex>
373 </v-layout> 373 </v-layout>
374 </v-flex> 374 </v-flex>
375 <v-layout> 375 <v-layout>
376 <v-flex xs12 sm10 offset-sm1> 376 <v-flex xs12 sm10 offset-sm1>
377 <v-card-actions> 377 <v-card-actions>
378 <v-btn round dark @click.native="closeUpdateLectures">Cancel</v-btn> 378 <v-btn round dark @click.native="closeUpdateLectures">Cancel</v-btn>
379 <v-spacer></v-spacer> 379 <v-spacer></v-spacer>
380 <v-btn 380 <v-btn
381 round 381 round
382 dark 382 dark
383 @click="updateParticularTable(updateLectures.timeIn,updateLectures.timeOut)" 383 @click="updateParticularTable(updateLectures.timeIn,updateLectures.timeOut)"
384 >Save</v-btn> 384 >Save</v-btn>
385 </v-card-actions> 385 </v-card-actions>
386 </v-flex> 386 </v-flex>
387 </v-layout> 387 </v-layout>
388 </v-card> 388 </v-card>
389 </v-flex> 389 </v-flex>
390 </v-dialog> 390 </v-dialog>
391 <v-snackbar 391 <v-snackbar
392 :timeout="timeout" 392 :timeout="timeout"
393 :top="y === 'top'" 393 :top="y === 'top'"
394 :right="x === 'right'" 394 :right="x === 'right'"
395 :vertical="mode === 'vertical'" 395 :vertical="mode === 'vertical'"
396 v-model="snackbar" 396 v-model="snackbar"
397 color="success" 397 color="success"
398 >{{ text }}</v-snackbar> 398 >{{ text }}</v-snackbar>
399 399
400 <!-- ****** EXISTING-USERS TIME-TABLE ****** --> 400 <!-- ****** EXISTING-USERS TIME-TABLE ****** -->
401 401
402 <v-card flat> 402 <v-card flat>
403 <v-card-actions class="hidden-xs-only hidden-sm-only"> 403 <v-card-actions class="hidden-xs-only hidden-sm-only">
404 <v-layout> 404 <v-layout>
405 <label class="right mt-4 ml-5">Select Class:</label> 405 <label class="right mt-4 ml-5">Select Class:</label>
406 <v-select 406 <v-select
407 :items="addclass" 407 :items="addclass"
408 label="Select Class" 408 label="Select Class"
409 v-model="selectTimeTable.select" 409 v-model="selectTimeTable.select"
410 item-text="classNum" 410 item-text="classNum"
411 item-value="_id" 411 item-value="_id"
412 name="Select Class" 412 name="Select Class"
413 @change="getSections(selectTimeTable.select)" 413 @change="getSections(selectTimeTable.select)"
414 class="px-4" 414 class="px-4"
415 required 415 required
416 ></v-select> 416 ></v-select>
417 <label class="right mt-4">Select Section:</label> 417 <label class="right mt-4">Select Section:</label>
418 <v-select 418 <v-select
419 :items="addSection" 419 :items="addSection"
420 label="Select Section" 420 label="Select Section"
421 v-model="selectTimeTable.selectSection" 421 v-model="selectTimeTable.selectSection"
422 item-text="name" 422 item-text="name"
423 item-value="_id" 423 item-value="_id"
424 name="Select Section" 424 name="Select Section"
425 class="pl-3" 425 class="pl-3"
426 required 426 required
427 ></v-select> 427 ></v-select>
428 </v-layout> 428 </v-layout>
429 <v-spacer></v-spacer> 429 <v-spacer></v-spacer>
430 <v-btn @click="findTimeTable()" round dark :loading="loading" class="left">Find</v-btn> 430 <v-btn @click="findTimeTable()" round dark :loading="loading" class="left">Find</v-btn>
431 </v-card-actions> 431 </v-card-actions>
432 <v-layout class="hidden-xl-only hidden-lg-only hidden-md-only"> 432 <v-layout class="hidden-xl-only hidden-lg-only hidden-md-only">
433 <v-flex xs4 sm2 class="mt-4 ml-2"> 433 <v-flex xs4 sm2 class="mt-4 ml-2">
434 <label>Select Class:</label> 434 <label>Select Class:</label>
435 </v-flex> 435 </v-flex>
436 <v-flex xs6 sm9> 436 <v-flex xs6 sm9>
437 <v-select 437 <v-select
438 :items="addclass" 438 :items="addclass"
439 label="Select Class" 439 label="Select Class"
440 v-model="selectTimeTable.select" 440 v-model="selectTimeTable.select"
441 item-text="classNum" 441 item-text="classNum"
442 item-value="_id" 442 item-value="_id"
443 name="Select Class" 443 name="Select Class"
444 @change="getSections(selectTimeTable.select)" 444 @change="getSections(selectTimeTable.select)"
445 required 445 required
446 ></v-select> 446 ></v-select>
447 </v-flex> 447 </v-flex>
448 </v-layout> 448 </v-layout>
449 <v-layout class="hidden-xl-only hidden-lg-only hidden-md-only"> 449 <v-layout class="hidden-xl-only hidden-lg-only hidden-md-only">
450 <v-flex xs4 sm2 class="mt-4 ml-2"> 450 <v-flex xs4 sm2 class="mt-4 ml-2">
451 <label>Select Section:</label> 451 <label>Select Section:</label>
452 </v-flex> 452 </v-flex>
453 <v-flex xs6 sm9> 453 <v-flex xs6 sm9>
454 <v-select 454 <v-select
455 :items="addSection" 455 :items="addSection"
456 label="Select Section" 456 label="Select Section"
457 v-model="selectTimeTable.selectSection" 457 v-model="selectTimeTable.selectSection"
458 item-text="name" 458 item-text="name"
459 item-value="_id" 459 item-value="_id"
460 name="Select Section" 460 name="Select Section"
461 required 461 required
462 ></v-select> 462 ></v-select>
463 </v-flex> 463 </v-flex>
464 </v-layout> 464 </v-layout>
465 <v-layout class="hidden-xl-only hidden-lg-only hidden-md-only"> 465 <v-layout class="hidden-xl-only hidden-lg-only hidden-md-only">
466 <v-flex xs12> 466 <v-flex xs12>
467 <v-btn 467 <v-btn
468 @click="findTimeTable()" 468 @click="findTimeTable()"
469 round 469 round
470 dark 470 dark
471 :loading="loading" 471 :loading="loading"
472 class="right mr-4 mb-2" 472 class="right mr-4 mb-2"
473 >Find</v-btn> 473 >Find</v-btn>
474 </v-flex> 474 </v-flex>
475 </v-layout> 475 </v-layout>
476 </v-card> 476 </v-card>
477 <v-flex xs12> 477 <v-flex xs12>
478 <v-data-table 478 <v-data-table
479 :headers="headers" 479 :headers="headers"
480 :items="desserts" 480 :items="desserts"
481 :pagination.sync="pagination" 481 :pagination.sync="pagination"
482 :search="search" 482 :search="search"
483 item-key="_id" 483 item-key="_id"
484 > 484 >
485 <template slot="items" slot-scope="props"> 485 <template slot="items" slot-scope="props">
486 <tr 486 <tr
487 style="cursor: pointer;" 487 style="cursor: pointer;"
488 @click="getTimeTable(props.item), props.expanded = !props.expanded" 488 @click="getTimeTable(props.item), props.expanded = !props.expanded"
489 > 489 >
490 <td class="text-xs-center">{{ props.index + 1}}</td> 490 <td class="text-xs-center">{{ props.index + 1}}</td>
491 <td class="text-xs-center">{{ props.item.classData.classNum}}</td> 491 <td class="text-xs-center">{{ props.item.classData.classNum}}</td>
492 <td class="text-xs-center">{{ props.item.sectionData.name }}</td> 492 <td class="text-xs-center">{{ props.item.sectionData.name }}</td>
493 <td class="text-xs-center"> 493 <td class="text-xs-center">
494 <span> 494 <span>
495 <img 495 <v-tooltip top>
496 style="cursor:pointer; width:20px; height:18px; " 496 <img
497 class="mr-3 mt-2" 497 slot="activator"
498 @click="editItem(props.item)" 498 style="cursor:pointer; width:20px; height:18px; "
499 src="/static/icon/edit1.png" 499 class="mr5"
500 /> 500 @click="editItem(props.item)"
501 <img 501 src="/static/icon/edit1.png"
502 style="cursor:pointer;width:20px; height:20px; " 502 />
503 class="mr-3" 503 <span>Edit</span>
504 @click="deleteItem(props.item)" 504 </v-tooltip>
505 src="/static/icon/delete1.png" 505 <v-tooltip top>
506 /> 506 <img
507 <img 507 slot="activator"
508 style="cursor:pointer; width:20px; height:20px; " 508 style="cursor:pointer; width:20px; height:20px; "
509 src="/static/icon/add1.png" 509 class="mr5"
510 @click="addSchedule(props.item._id)" 510 @click="deleteItem(props.item)"
511 /> 511 src="/static/icon/delete1.png"
512 />
513 <span>Delete</span>
514 </v-tooltip>
515 <v-tooltip top>
516 <img
517 slot="activator"
518 style="cursor:pointer; width:20px; height:20px; "
519 src="/static/icon/add1.png"
520 @click="addSchedule(props.item._id)"
521 />
522 <span>Add</span>
523 </v-tooltip>
512 <!-- <v-icon color="black" >add_circle_outline</v-icon> --> 524 <!-- <v-icon color="black" >add_circle_outline</v-icon> -->
513 </span> 525 </span>
514 </td> 526 </td>
515 </tr> 527 </tr>
516 </template> 528 </template>
517 <template slot="expand" slot-scope="props"> 529 <template slot="expand" slot-scope="props">
518 <v-data-table 530 <v-data-table
519 :items="timeTableList.schedule" 531 :items="timeTableList.schedule"
520 hide-actions 532 hide-actions
521 item-key="title" 533 item-key="title"
522 style="width: auto;" 534 style="width: auto;"
523 > 535 >
524 <template slot="items" slot-scope="props"> 536 <template slot="items" slot-scope="props">
525 <tr> 537 <tr>
526 <td class="text-xs-left subheading table-td"> 538 <td class="text-xs-left subheading table-td">
527 <b>{{ props.item.day }}</b> 539 <b>{{ props.item.day }}</b>
528 </td> 540 </td>
529 <td class="table-td"> 541 <td class="table-td">
530 <b>Subject</b> 542 <b>Subject</b>
531 <br /> 543 <br />
532 <b>Time In</b> 544 <b>Time In</b>
533 <br /> 545 <br />
534 <b>Time Out</b> 546 <b>Time Out</b>
535 </td> 547 </td>
536 <td v-for="list in props.item.lectures" class="table-td"> 548 <td v-for="list in props.item.lectures" class="table-td">
537 <b>{{ list.subjectName }}</b> 549 <b>{{ list.subjectName }}</b>
538 <img 550 <img
539 style="cursor:pointer; width:20px; height:18px; " 551 style="cursor:pointer; width:20px; height:18px; "
540 class="mr-2 ml-2" 552 class="mr-2 ml-2"
541 src="/static/icon/edit1.png" 553 src="/static/icon/edit1.png"
542 @click="updateTimeTable(list, timeTableList)" 554 @click="updateTimeTable(list, timeTableList)"
543 /> 555 />
544 <img 556 <img
545 style="cursor:pointer; width:20px; height:20px; " 557 style="cursor:pointer; width:20px; height:20px; "
546 src="/static/icon/delete1.png" 558 src="/static/icon/delete1.png"
547 @click="deleteTimeTable(list,props.item.lectures)" 559 @click="deleteTimeTable(list,props.item.lectures)"
548 /> 560 />
549 <br /> 561 <br />
550 {{list.timeIn}} 562 {{list.timeIn}}
551 <br /> 563 <br />
552 {{list.timeOut}} 564 {{list.timeOut}}
553 </td> 565 </td>
554 <td> 566 <td>
555 <v-icon 567 <v-tooltip top>
556 color="black" 568 <v-icon
557 @click="addLecture(props.item._id, timeTableList._id)" 569 slot="activator"
558 >add_circle_outline</v-icon> 570 color="black"
571 @click="addLecture(props.item._id, timeTableList._id)"
572 >add_circle_outline</v-icon>
573 <span>Add</span>
574 </v-tooltip>
559 </td> 575 </td>
560 </tr> 576 </tr>
561 </template> 577 </template>
562 </v-data-table> 578 </v-data-table>
563 </template> 579 </template>
564 <v-alert 580 <v-alert
565 slot="no-results" 581 slot="no-results"
566 :value="true" 582 :value="true"
567 color="error" 583 color="error"
568 icon="warning" 584 icon="warning"
569 >Your search for "{{ search }}" found no results.</v-alert> 585 >Your search for "{{ search }}" found no results.</v-alert>
570 </v-data-table> 586 </v-data-table>
571 <br /> 587 <br />
572 <br /> 588 <br />
573 </v-flex> 589 </v-flex>
574 </v-tab-item> 590 </v-tab-item>
575 591
576 <!-- ****** ADD MULTIPLE TIME-TABLE ****** --> 592 <!-- ****** ADD MULTIPLE TIME-TABLE ****** -->
577 593
578 <v-tab-item> 594 <v-tab-item>
579 <v-container> 595 <v-container>
580 <v-snackbar 596 <v-snackbar
581 :timeout="timeout" 597 :timeout="timeout"
582 :top="y === 'top'" 598 :top="y === 'top'"
583 :right="x === 'right'" 599 :right="x === 'right'"
584 :vertical="mode === 'vertical'" 600 :vertical="mode === 'vertical'"
585 v-model="snackbar" 601 v-model="snackbar"
586 color="success" 602 color="success"
587 >{{ text }}</v-snackbar> 603 >{{ text }}</v-snackbar>
588 <v-flex xs12 sm12 class="my-5"> 604 <v-flex xs12 sm12 class="my-5">
589 <v-card flat> 605 <v-card flat>
590 <v-form ref="form" v-model="valid" lazy-validation> 606 <v-form ref="form" v-model="valid" lazy-validation>
591 <v-container fluid class="pt-3"> 607 <v-container fluid class="pt-3">
592 <v-flex xs12> 608 <v-flex xs12>
593 <v-layout> 609 <v-layout>
594 <v-flex xs4 class="pt-4 subheading"> 610 <v-flex xs4 class="pt-4 subheading">
595 <label class="right hidden-xs-only hidden-sm-only">Select Class:</label> 611 <label class="right hidden-xs-only hidden-sm-only">Select Class:</label>
596 <label class="right hidden-lg-only hidden-md-only hidden-xl-only">Class:</label> 612 <label class="right hidden-lg-only hidden-md-only hidden-xl-only">Class:</label>
597 </v-flex> 613 </v-flex>
598 <v-flex xs8 sm4 class="ml-3"> 614 <v-flex xs8 sm4 class="ml-3">
599 <v-select 615 <v-select
600 :items="addclass" 616 :items="addclass"
601 label="Select Class" 617 label="Select Class"
602 v-model="timeTable.select" 618 v-model="timeTable.select"
603 item-text="classNum" 619 item-text="classNum"
604 item-value="_id" 620 item-value="_id"
605 @change="getSections(timeTable.select)" 621 @change="getSections(timeTable.select)"
606 required 622 required
607 ></v-select> 623 ></v-select>
608 </v-flex> 624 </v-flex>
609 </v-layout> 625 </v-layout>
610 </v-flex> 626 </v-flex>
611 <v-flex xs12> 627 <v-flex xs12>
612 <v-layout> 628 <v-layout>
613 <v-flex xs4 class="pt-4 subheading"> 629 <v-flex xs4 class="pt-4 subheading">
614 <label class="right hidden-xs-only hidden-sm-only">Select Section:</label> 630 <label class="right hidden-xs-only hidden-sm-only">Select Section:</label>
615 <label class="right hidden-lg-only hidden-md-only hidden-xl-only">Section:</label> 631 <label class="right hidden-lg-only hidden-md-only hidden-xl-only">Section:</label>
616 </v-flex> 632 </v-flex>
617 <v-flex sm4 xs8 class="ml-3"> 633 <v-flex sm4 xs8 class="ml-3">
618 <v-select 634 <v-select
619 :items="addSection" 635 :items="addSection"
620 label="Select Section" 636 label="Select Section"
621 v-model="timeTable.selectSection" 637 v-model="timeTable.selectSection"
622 item-text="name" 638 item-text="name"
623 item-value="_id" 639 item-value="_id"
624 required 640 required
625 ></v-select> 641 ></v-select>
626 </v-flex> 642 </v-flex>
627 </v-layout> 643 </v-layout>
628 </v-flex> 644 </v-flex>
629 <v-flex xs12> 645 <v-flex xs12>
630 <v-layout> 646 <v-layout>
631 <v-flex xs4 class="pt-4 subheading"> 647 <v-flex xs4 class="pt-4 subheading">
632 <label class="right hidden-xs-only hidden-sm-only">Select Teacher:</label> 648 <label class="right hidden-xs-only hidden-sm-only">Select Teacher:</label>
633 <label class="right hidden-lg-only hidden-md-only hidden-xl-only">Teacher:</label> 649 <label class="right hidden-lg-only hidden-md-only hidden-xl-only">Teacher:</label>
634 </v-flex> 650 </v-flex>
635 <v-flex xs8 sm4 class="ml-3"> 651 <v-flex xs8 sm4 class="ml-3">
636 <v-select 652 <v-select
637 :items="addTeachers" 653 :items="addTeachers"
638 label="Select Teacher" 654 label="Select Teacher"
639 v-model="timeTable.selectTeacher" 655 v-model="timeTable.selectTeacher"
640 item-text="name" 656 item-text="name"
641 item-value="_id" 657 item-value="_id"
642 required 658 required
643 ></v-select> 659 ></v-select>
644 </v-flex> 660 </v-flex>
645 </v-layout> 661 </v-layout>
646 </v-flex> 662 </v-flex>
647 <v-flex xs12> 663 <v-flex xs12>
648 <v-layout> 664 <v-layout>
649 <v-flex xs4 class="pt-4 subheading"> 665 <v-flex xs4 class="pt-4 subheading">
650 <label class="right">Select Day:</label> 666 <label class="right">Select Day:</label>
651 </v-flex> 667 </v-flex>
652 <v-flex xs8 sm4 class="ml-3"> 668 <v-flex xs8 sm4 class="ml-3">
653 <v-select 669 <v-select
654 :items="addOneDay" 670 :items="addOneDay"
655 label="Select Day" 671 label="Select Day"
656 v-model="timeTable.selectDay" 672 v-model="timeTable.selectDay"
657 item-text="name" 673 item-text="name"
658 item-value="_id" 674 item-value="_id"
659 required 675 required
660 ></v-select> 676 ></v-select>
661 </v-flex> 677 </v-flex>
662 </v-layout> 678 </v-layout>
663 </v-flex> 679 </v-flex>
664 <v-flex xs12> 680 <v-flex xs12>
665 <v-layout> 681 <v-layout>
666 <v-flex xs4 class="pt-4 subheading"> 682 <v-flex xs4 class="pt-4 subheading">
667 <label class="right hidden-xs-only hidden-sm-only">Subject Name:</label> 683 <label class="right hidden-xs-only hidden-sm-only">Subject Name:</label>
668 <label class="right hidden-lg-only hidden-md-only hidden-xl-only">Subject:</label> 684 <label class="right hidden-lg-only hidden-md-only hidden-xl-only">Subject:</label>
669 </v-flex> 685 </v-flex>
670 <v-flex xs8 sm4 class="ml-3"> 686 <v-flex xs8 sm4 class="ml-3">
671 <v-text-field 687 <v-text-field
672 placeholder="fill your Subject Name" 688 placeholder="fill your Subject Name"
673 :rules="subjectNameRules" 689 :rules="subjectNameRules"
674 v-model="timeTable.subjectName" 690 v-model="timeTable.subjectName"
675 type="text" 691 type="text"
676 required 692 required
677 ></v-text-field> 693 ></v-text-field>
678 </v-flex> 694 </v-flex>
679 </v-layout> 695 </v-layout>
680 </v-flex> 696 </v-flex>
681 <v-flex xs12> 697 <v-flex xs12>
682 <v-layout> 698 <v-layout>
683 <v-flex xs4 class="pt-4 subheading"> 699 <v-flex xs4 class="pt-4 subheading">
684 <label class="right">Time In:</label> 700 <label class="right">Time In:</label>
685 </v-flex> 701 </v-flex>
686 <v-flex xs8 sm4 class="ml-3"> 702 <v-flex xs8 sm4 class="ml-3">
687 <v-menu 703 <v-menu
688 ref="menuA" 704 ref="menuA"
689 :close-on-content-click="false" 705 :close-on-content-click="false"
690 v-model="menu2" 706 v-model="menu2"
691 :nudge-right="40" 707 :nudge-right="40"
692 :return-value.sync="timeTable.timeIn" 708 :return-value.sync="timeTable.timeIn"
693 lazy 709 lazy
694 transition="scale-transition" 710 transition="scale-transition"
695 offset-y 711 offset-y
696 full-width 712 full-width
697 max-width="290px" 713 max-width="290px"
698 min-width="290px" 714 min-width="290px"
699 > 715 >
700 <v-text-field 716 <v-text-field
701 slot="activator" 717 slot="activator"
702 v-model="timeTable.timeIn" 718 v-model="timeTable.timeIn"
703 label="Select your timeIn" 719 label="Select your timeIn"
704 append-icon="access_time" 720 append-icon="access_time"
705 ></v-text-field> 721 ></v-text-field>
706 <v-time-picker 722 <v-time-picker
707 v-model="timeTable.timeIn" 723 v-model="timeTable.timeIn"
708 @change="$refs.menuA.save(timeTable.timeIn)" 724 @change="$refs.menuA.save(timeTable.timeIn)"
709 ></v-time-picker> 725 ></v-time-picker>
710 </v-menu> 726 </v-menu>
711 </v-flex> 727 </v-flex>
712 </v-layout> 728 </v-layout>
713 </v-flex> 729 </v-flex>
714 <v-flex xs12> 730 <v-flex xs12>
715 <v-layout> 731 <v-layout>
716 <v-flex xs4 class="pt-4 subheading"> 732 <v-flex xs4 class="pt-4 subheading">
717 <label class="right">Time Out:</label> 733 <label class="right">Time Out:</label>
718 </v-flex> 734 </v-flex>
719 <v-flex xs8 sm4 class="ml-3"> 735 <v-flex xs8 sm4 class="ml-3">
720 <v-menu 736 <v-menu
721 ref="menu" 737 ref="menu"
722 :close-on-content-click="false" 738 :close-on-content-click="false"
723 v-model="menu1" 739 v-model="menu1"
724 :nudge-right="40" 740 :nudge-right="40"
725 :return-value.sync="timeTable.timeOut" 741 :return-value.sync="timeTable.timeOut"
726 lazy 742 lazy
727 transition="scale-transition" 743 transition="scale-transition"
728 offset-y 744 offset-y
729 full-width 745 full-width
730 max-width="290px" 746 max-width="290px"
731 min-width="290px" 747 min-width="290px"
732 > 748 >
733 <v-text-field 749 <v-text-field
734 slot="activator" 750 slot="activator"
735 v-model="timeTable.timeOut" 751 v-model="timeTable.timeOut"
736 label="Select your Time Out" 752 label="Select your Time Out"
737 append-icon="access_time" 753 append-icon="access_time"
738 ></v-text-field> 754 ></v-text-field>
739 <v-time-picker 755 <v-time-picker
740 v-model="timeTable.timeOut" 756 v-model="timeTable.timeOut"
741 @change="$refs.menu.save(timeTable.timeOut)" 757 @change="$refs.menu.save(timeTable.timeOut)"
742 ></v-time-picker> 758 ></v-time-picker>
743 </v-menu> 759 </v-menu>
744 </v-flex> 760 </v-flex>
745 </v-layout> 761 </v-layout>
746 </v-flex> 762 </v-flex>
747 <v-layout> 763 <v-layout>
748 <v-flex xs12 sm12> 764 <v-flex xs12 sm12>
749 <v-layout> 765 <v-layout>
750 <v-flex xs4 md4 class="ml-4"> 766 <v-flex xs4 md4 class="ml-4">
751 <v-btn @click="clear" round class="right" dark>clear</v-btn> 767 <v-btn @click="clear" round class="right" dark>clear</v-btn>
752 </v-flex> 768 </v-flex>
753 <v-flex xs8 sm5 md4> 769 <v-flex xs8 sm5 md4>
754 <v-btn @click="submit" round dark :loading="loading" class="right">Add</v-btn> 770 <v-btn @click="submit" round dark :loading="loading" class="right">Add</v-btn>
755 </v-flex> 771 </v-flex>
756 </v-layout> 772 </v-layout>
757 </v-flex> 773 </v-flex>
758 </v-layout> 774 </v-layout>
759 </v-container> 775 </v-container>
760 </v-form> 776 </v-form>
761 </v-card> 777 </v-card>
762 </v-flex> 778 </v-flex>
763 </v-container> 779 </v-container>
764 </v-tab-item> 780 </v-tab-item>
765 </v-tabs> 781 </v-tabs>
766 <div class="loader" v-if="showLoader"> 782 <div class="loader" v-if="showLoader">
767 <v-progress-circular indeterminate color="white"></v-progress-circular> 783 <v-progress-circular indeterminate color="white"></v-progress-circular>
768 </div> 784 </div>
769 </v-app> 785 </v-app>
770 </template> 786 </template>
771 <script> 787 <script>
772 import http from "@/Services/http.js"; 788 import http from "@/Services/http.js";
773 import Util from "@/util"; 789 import Util from "@/util";
774 790
775 export default { 791 export default {
776 data: () => ({ 792 data: () => ({
777 y: "top", 793 y: "top",
778 x: "right", 794 x: "right",
779 mode: "", 795 mode: "",
780 timeout: 3000, 796 timeout: 3000,
781 text: "", 797 text: "",
782 search: "", 798 search: "",
783 snackbar: false, 799 snackbar: false,
784 loading: false, 800 loading: false,
785 showLoader: false, 801 showLoader: false,
786 dialog: false, 802 dialog: false,
787 dialogAddLecture: false, 803 dialogAddLecture: false,
788 dialogUpdateLectures: false, 804 dialogUpdateLectures: false,
789 dialogSchedule: false, 805 dialogSchedule: false,
790 dialog1: false, 806 dialog1: false,
791 valid: true, 807 valid: true,
792 isActive: true, 808 isActive: true,
793 newActive: false, 809 newActive: false,
794 addclass: [], 810 addclass: [],
795 addSection: [], 811 addSection: [],
796 addTeachers: [], 812 addTeachers: [],
797 gender: ["Male", "Female"], 813 gender: ["Male", "Female"],
798 AddUsercredentials: {}, 814 AddUsercredentials: {},
799 pagination: { 815 pagination: {
800 rowsPerPage: 15 816 rowsPerPage: 15
801 }, 817 },
802 imageData: {}, 818 imageData: {},
803 imageName: "", 819 imageName: "",
804 imageUrl: "", 820 imageUrl: "",
805 imageFile: "", 821 imageFile: "",
806 timeInRules: [v => !!v || "Time In is required"], 822 timeInRules: [v => !!v || "Time In is required"],
807 timeOutRules: [v => !!v || "Time Out is required"], 823 timeOutRules: [v => !!v || "Time Out is required"],
808 lectureRules: [v => !!v || "Lecture No is required"], 824 lectureRules: [v => !!v || "Lecture No is required"],
809 subjectNameRules: [v => !!v || "Subject Name is required"], 825 subjectNameRules: [v => !!v || "Subject Name is required"],
810 getParticulerLecture: "", 826 getParticulerLecture: "",
811 headers: [ 827 headers: [
812 { 828 {
813 text: "No", 829 text: "No",
814 align: "center", 830 align: "center",
815 sortable: false, 831 sortable: false,
816 value: "No" 832 value: "No"
817 }, 833 },
818 { 834 {
819 text: "Class Name", 835 text: "Class Name",
820 value: "classData.classNum", 836 value: "classData.classNum",
821 sortable: false, 837 sortable: false,
822 align: "center" 838 align: "center"
823 }, 839 },
824 { 840 {
825 text: "Section Name", 841 text: "Section Name",
826 value: "sectionData.name", 842 value: "sectionData.name",
827 sortable: false, 843 sortable: false,
828 align: "center" 844 align: "center"
829 }, 845 },
830 { text: "Action", value: "", sortable: false, align: "center" } 846 { text: "Action", value: "", sortable: false, align: "center" }
831 ], 847 ],
832 daysHeaders: [ 848 daysHeaders: [
833 { text: "Day", value: "dayday", sortable: false, align: "center" }, 849 { text: "Day", value: "dayday", sortable: false, align: "center" },
834 { 850 {
835 text: "Subject Name", 851 text: "Subject Name",
836 value: "subjectName", 852 value: "subjectName",
837 sortable: false, 853 sortable: false,
838 align: "center" 854 align: "center"
839 }, 855 },
840 { text: "Time In", value: "timeIn", sortable: false, align: "center" }, 856 { text: "Time In", value: "timeIn", sortable: false, align: "center" },
841 { text: "Time Out", value: "timeOut", sortable: false, align: "center" } 857 { text: "Time Out", value: "timeOut", sortable: false, align: "center" }
842 ], 858 ],
843 addOneDay: [ 859 addOneDay: [
844 "Monday", 860 "Monday",
845 "Tuesday", 861 "Tuesday",
846 "Wednesday", 862 "Wednesday",
847 "Thursday", 863 "Thursday",
848 "Friday", 864 "Friday",
849 "Saturday", 865 "Saturday",
850 "Sunday" 866 "Sunday"
851 ], 867 ],
852 schedule: { 868 schedule: {
853 selectDay: "" 869 selectDay: ""
854 }, 870 },
855 desserts: [], 871 desserts: [],
856 timeTableList: [], 872 timeTableList: [],
857 editedIndex: -1, 873 editedIndex: -1,
858 selectTimeTable: { 874 selectTimeTable: {
859 select: "", 875 select: "",
860 selectSection: "" 876 selectSection: ""
861 }, 877 },
862 timeTable: { 878 timeTable: {
863 select: "", 879 select: "",
864 selectSection: "", 880 selectSection: "",
865 selectDay: "", 881 selectDay: "",
866 timeIn: null, 882 timeIn: null,
867 timeOut: null, 883 timeOut: null,
868 subjectName: "", 884 subjectName: "",
869 selectTeacher: "" 885 selectTeacher: ""
870 }, 886 },
871 editedItem: { 887 editedItem: {
872 classNum: "", 888 classNum: "",
873 selectSection: "" 889 selectSection: ""
874 }, 890 },
875 addlectures: { 891 addlectures: {
876 timeIn: null, 892 timeIn: null,
877 timeOut: null, 893 timeOut: null,
878 subjectName: "", 894 subjectName: "",
879 teacherId: "", 895 teacherId: "",
880 scheduleId: "", 896 scheduleId: "",
881 timeTableId: "" 897 timeTableId: ""
882 }, 898 },
883 updateLectures: { 899 updateLectures: {
884 timeIn: null, 900 timeIn: null,
885 timeOut: null, 901 timeOut: null,
886 subjectName: "", 902 subjectName: "",
887 teacherId: "" 903 teacherId: ""
888 }, 904 },
889 updateLecturesId: { 905 updateLecturesId: {
890 lectureId: "", 906 lectureId: "",
891 scheduleId: "" 907 scheduleId: ""
892 }, 908 },
893 menu1: false, 909 menu1: false,
894 menu2: false, 910 menu2: false,
895 menu3: false, 911 menu3: false,
896 menu4: false, 912 menu4: false,
897 menu5: false, 913 menu5: false,
898 menu6: false, 914 menu6: false,
899 scheduleDayId: "" 915 scheduleDayId: ""
900 }), 916 }),
901 methods: { 917 methods: {
902 findTimeTable() { 918 findTimeTable() {
903 http() 919 http()
904 .get("/getParticularClassTimeTable", { 920 .get("/getParticularClassTimeTable", {
905 params: { 921 params: {
906 sectionId: this.selectTimeTable.selectSection, 922 sectionId: this.selectTimeTable.selectSection,
907 classId: this.selectTimeTable.select 923 classId: this.selectTimeTable.select
908 } 924 }
909 }) 925 })
910 .then(response => { 926 .then(response => {
911 this.desserts = response.data.data; 927 this.desserts = response.data.data;
912 }) 928 })
913 .catch(error => { 929 .catch(error => {
914 console.log("err====>", error); 930 console.log("err====>", error);
915 if ((this.snackbar = true)) { 931 if ((this.snackbar = true)) {
916 this.text = error.response.data.message; 932 this.text = error.response.data.message;
917 this.text = error.response.data.statusText; 933 this.text = error.response.data.statusText;
918 } 934 }
919 }); 935 });
920 }, 936 },
921 getSections(_id) { 937 getSections(_id) {
922 var token = this.$store.state.token; 938 var token = this.$store.state.token;
923 http() 939 http()
924 .get( 940 .get(
925 "/getSectionsList", 941 "/getSectionsList",
926 { params: { classId: _id } }, 942 { params: { classId: _id } },
927 { 943 {
928 headers: { Authorization: "Bearer " + token } 944 headers: { Authorization: "Bearer " + token }
929 } 945 }
930 ) 946 )
931 .then(response => { 947 .then(response => {
932 this.addSection = response.data.data; 948 this.addSection = response.data.data;
933 }) 949 })
934 .catch(err => { 950 .catch(err => {
935 // console.log("err====>", err); 951 // console.log("err====>", err);
936 }); 952 });
937 }, 953 },
938 getTimeTable(item) { 954 getTimeTable(item) {
939 this.showLoader = true; 955 this.showLoader = true;
940 this.getParticulerLecture = item._id; 956 this.getParticulerLecture = item._id;
941 var token = this.$store.state.token; 957 var token = this.$store.state.token;
942 http() 958 http()
943 .get( 959 .get(
944 "/getParticularTimeTable", 960 "/getParticularTimeTable",
945 { params: { timeTableId: item._id } }, 961 { params: { timeTableId: item._id } },
946 { 962 {
947 headers: { Authorization: "Bearer " + token } 963 headers: { Authorization: "Bearer " + token }
948 } 964 }
949 ) 965 )
950 .then(response => { 966 .then(response => {
951 this.timeTableList = response.data.data; 967 this.timeTableList = response.data.data;
952 this.showLoader = false; 968 this.showLoader = false;
953 }) 969 })
954 .catch(err => { 970 .catch(err => {
955 this.showLoader = false; 971 this.showLoader = false;
956 // console.log("err====>", err); 972 // console.log("err====>", err);
957 }); 973 });
958 }, 974 },
959 pickFile() { 975 pickFile() {
960 this.$refs.image.click(); 976 this.$refs.image.click();
961 }, 977 },
962 978
963 onFilePicked(e) { 979 onFilePicked(e) {
964 const files = e.target.files; 980 const files = e.target.files;
965 this.imageData.upload = e.target.files[0]; 981 this.imageData.upload = e.target.files[0];
966 if (files[0] !== undefined) { 982 if (files[0] !== undefined) {
967 this.imageName = files[0].name; 983 this.imageName = files[0].name;
968 if (this.imageName.lastIndexOf(".") <= 0) { 984 if (this.imageName.lastIndexOf(".") <= 0) {
969 return; 985 return;
970 } 986 }
971 const fr = new FileReader(); 987 const fr = new FileReader();
972 fr.readAsDataURL(files[0]); 988 fr.readAsDataURL(files[0]);
973 fr.addEventListener("load", () => { 989 fr.addEventListener("load", () => {
974 this.imageUrl = fr.result; 990 this.imageUrl = fr.result;
975 this.imageFile = files[0]; // this is an image file that can be sent to server... 991 this.imageFile = files[0]; // this is an image file that can be sent to server...
976 this.imageData.imageUrl = URL.createObjectURL(this.imageFile); 992 this.imageData.imageUrl = URL.createObjectURL(this.imageFile);
977 }); 993 });
978 } else { 994 } else {
979 this.imageName = ""; 995 this.imageName = "";
980 this.imageFile = ""; 996 this.imageFile = "";
981 this.imageUrl = ""; 997 this.imageUrl = "";
982 } 998 }
983 }, 999 },
984 // getTimeTableList() { 1000 // getTimeTableList() {
985 // this.showLoader = true; 1001 // this.showLoader = true;
986 // var token = this.$store.state.token; 1002 // var token = this.$store.state.token;
987 // http() 1003 // http()
988 // .get("/getTimeTablesList", { 1004 // .get("/getTimeTablesList", {
989 // headers: { Authorization: "Bearer " + token } 1005 // headers: { Authorization: "Bearer " + token }
990 // }) 1006 // })
991 // .then(response => { 1007 // .then(response => {
992 // this.desserts = response.data.data; 1008 // this.desserts = response.data.data;
993 // this.showLoader = false; 1009 // this.showLoader = false;
994 // // console.log("getTimeTableList=====>", response.data.data); 1010 // // console.log("getTimeTableList=====>", response.data.data);
995 // }) 1011 // })
996 // .catch(err => { 1012 // .catch(err => {
997 // // console.log("err====>", err); 1013 // // console.log("err====>", err);
998 // this.showLoader = false; 1014 // this.showLoader = false;
999 // this.$router.replace({ path: "/" }); 1015 // this.$router.replace({ path: "/" });
1000 // }); 1016 // });
1001 // }, 1017 // },
1002 editItem(item) { 1018 editItem(item) {
1003 this.editedIndex = this.desserts.indexOf(item); 1019 this.editedIndex = this.desserts.indexOf(item);
1004 this.editedItem = Object.assign({}, item); 1020 this.editedItem = Object.assign({}, item);
1005 this.dialog = true; 1021 this.dialog = true;
1006 }, 1022 },
1007 updateTimeTable(timeToUpdate, classToUpdate) { 1023 updateTimeTable(timeToUpdate, classToUpdate) {
1008 console.log( 1024 console.log(
1009 "timeToUpdate, classToUpdate", 1025 "timeToUpdate, classToUpdate",
1010 timeToUpdate._id, 1026 timeToUpdate._id,
1011 classToUpdate.schedule 1027 classToUpdate.schedule
1012 ); 1028 );
1013 for (let i = 0; i < classToUpdate.schedule.length; i++) { 1029 for (let i = 0; i < classToUpdate.schedule.length; i++) {
1014 this.updateLecturesId.scheduleId = classToUpdate.schedule[i]._id; 1030 this.updateLecturesId.scheduleId = classToUpdate.schedule[i]._id;
1015 } 1031 }
1016 (this.updateLecturesId.lectureId = timeToUpdate._id), 1032 (this.updateLecturesId.lectureId = timeToUpdate._id),
1017 (this.updateLectures = timeToUpdate); 1033 (this.updateLectures = timeToUpdate);
1018 this.dialogUpdateLectures = true; 1034 this.dialogUpdateLectures = true;
1019 }, 1035 },
1020 addLecture(scheduleId, timeTableId) { 1036 addLecture(scheduleId, timeTableId) {
1021 this.addlectures.scheduleId = scheduleId; 1037 this.addlectures.scheduleId = scheduleId;
1022 this.addlectures.timeTableId = timeTableId; 1038 this.addlectures.timeTableId = timeTableId;
1023 this.dialogAddLecture = true; 1039 this.dialogAddLecture = true;
1024 }, 1040 },
1025 AddLecture() { 1041 AddLecture() {
1026 if (this.$refs.lectureForm.validate()) { 1042 if (this.$refs.lectureForm.validate()) {
1027 http() 1043 http()
1028 .post("/addLecture", this.addlectures) 1044 .post("/addLecture", this.addlectures)
1029 .then(response => { 1045 .then(response => {
1030 this.snackbar = true; 1046 this.snackbar = true;
1031 this.text = "New Add Lecture successfully"; 1047 this.text = "New Add Lecture successfully";
1032 var token = this.$store.state.token; 1048 var token = this.$store.state.token;
1033 http() 1049 http()
1034 .get( 1050 .get(
1035 "/getParticularTimeTable", 1051 "/getParticularTimeTable",
1036 { params: { timeTableId: this.getParticulerLecture } }, 1052 { params: { timeTableId: this.getParticulerLecture } },
1037 { 1053 {
1038 headers: { Authorization: "Bearer " + token } 1054 headers: { Authorization: "Bearer " + token }
1039 } 1055 }
1040 ) 1056 )
1041 .then(response => { 1057 .then(response => {
1042 this.timeTableList = response.data.data; 1058 this.timeTableList = response.data.data;
1043 this.showLoader = false; 1059 this.showLoader = false;
1044 }) 1060 })
1045 .catch(err => { 1061 .catch(err => {
1046 this.showLoader = false; 1062 this.showLoader = false;
1047 // console.log("err====>", err); 1063 // console.log("err====>", err);
1048 }); 1064 });
1049 this.closedialogLecture(); 1065 this.closedialogLecture();
1050 this.clearLeactureData(); 1066 this.clearLeactureData();
1051 }) 1067 })
1052 .catch(error => { 1068 .catch(error => {
1053 this.snackbar = true; 1069 this.snackbar = true;
1054 this.text = error.response.data.message; 1070 this.text = error.response.data.message;
1055 this.text = error.response.data.statusText; 1071 this.text = error.response.data.statusText;
1056 }); 1072 });
1057 } 1073 }
1058 }, 1074 },
1059 updateParticularTable() { 1075 updateParticularTable() {
1060 let EditLecture = { 1076 let EditLecture = {
1061 lectureId: this.updateLecturesId.lectureId, 1077 lectureId: this.updateLecturesId.lectureId,
1062 scheduleId: this.updateLecturesId.scheduleId, 1078 scheduleId: this.updateLecturesId.scheduleId,
1063 updatedLecture: { 1079 updatedLecture: {
1064 timeIn: this.updateLectures.timeIn, 1080 timeIn: this.updateLectures.timeIn,
1065 timeOut: this.updateLectures.timeOut, 1081 timeOut: this.updateLectures.timeOut,
1066 subjectName: this.updateLectures.subjectName, 1082 subjectName: this.updateLectures.subjectName,
1067 teacherId: this.updateLectures.teacherId 1083 teacherId: this.updateLectures.teacherId
1068 } 1084 }
1069 }; 1085 };
1070 http() 1086 http()
1071 .put("/updateLecture", EditLecture) 1087 .put("/updateLecture", EditLecture)
1072 .then(response => { 1088 .then(response => {
1073 console.log("updateLecture", EditLecture); 1089 console.log("updateLecture", EditLecture);
1074 if ((this.snackbar = true)) { 1090 if ((this.snackbar = true)) {
1075 this.text = "Successfully Edit Update Lecture"; 1091 this.text = "Successfully Edit Update Lecture";
1076 } 1092 }
1077 this.closeUpdateLectures(); 1093 this.closeUpdateLectures();
1078 }) 1094 })
1079 .catch(error => { 1095 .catch(error => {
1080 // console.log(error); 1096 // console.log(error);
1081 if ((this.snackbar = true)) { 1097 if ((this.snackbar = true)) {
1082 this.text = error.response.data.message; 1098 this.text = error.response.data.message;
1083 this.text = error.response.data.statusText; 1099 this.text = error.response.data.statusText;
1084 } 1100 }
1085 }); 1101 });
1086 }, 1102 },
1087 deleteItem(item) { 1103 deleteItem(item) {
1088 let deleteTimeTable = { 1104 let deleteTimeTable = {
1089 timeTableId: item._id 1105 timeTableId: item._id
1090 }; 1106 };
1091 http() 1107 http()
1092 .delete( 1108 .delete(
1093 "/deleteTimeTable", 1109 "/deleteTimeTable",
1094 confirm("Are you sure you want to delete this?") && { 1110 confirm("Are you sure you want to delete this?") && {
1095 params: deleteTimeTable 1111 params: deleteTimeTable
1096 } 1112 }
1097 ) 1113 )
1098 .then(response => { 1114 .then(response => {
1099 // console.log("deleteUers",deleteTimeTable) 1115 // console.log("deleteUers",deleteTimeTable)
1100 this.snackbar = true; 1116 this.snackbar = true;
1101 this.text = "Successfully delete Existing Time Table"; 1117 this.text = "Successfully delete Existing Time Table";
1102 this.findTimeTable(); 1118 this.findTimeTable();
1103 }) 1119 })
1104 .catch(error => { 1120 .catch(error => {
1105 // console.log(error); 1121 // console.log(error);
1106 }); 1122 });
1107 }, 1123 },
1108 activeTab(type) { 1124 activeTab(type) {
1109 switch (type) { 1125 switch (type) {
1110 case "existing": 1126 case "existing":
1111 this.newActive = false; 1127 this.newActive = false;
1112 this.isActive = true; 1128 this.isActive = true;
1113 break; 1129 break;
1114 1130
1115 default: 1131 default:
1116 this.newActive = true; 1132 this.newActive = true;
1117 this.isActive = false; 1133 this.isActive = false;
1118 break; 1134 break;
1119 } 1135 }
1120 }, 1136 },
1121 close() { 1137 close() {
1122 this.dialog = false; 1138 this.dialog = false;
1123 setTimeout(() => { 1139 setTimeout(() => {
1124 this.editedItem = Object.assign({}, this.defaultItem); 1140 this.editedItem = Object.assign({}, this.defaultItem);
1125 this.editedIndex = -1; 1141 this.editedIndex = -1;
1126 }, 300); 1142 }, 300);
1127 }, 1143 },
1128 close1() { 1144 close1() {
1129 this.dialog1 = false; 1145 this.dialog1 = false;
1130 }, 1146 },
1131 closedialogLecture() { 1147 closedialogLecture() {
1132 this.dialogAddLecture = false; 1148 this.dialogAddLecture = false;
1133 }, 1149 },
1134 closeUpdateLectures() { 1150 closeUpdateLectures() {
1135 this.dialogUpdateLectures = false; 1151 this.dialogUpdateLectures = false;
1136 }, 1152 },
1137 submit() { 1153 submit() {
1138 if (this.$refs.form.validate()) { 1154 if (this.$refs.form.validate()) {
1139 let imageData = new FormData(); 1155 let imageData = new FormData();
1140 imageData.append("upload", this.imageFile); 1156 imageData.append("upload", this.imageFile);
1141 let addTimeTable = { 1157 let addTimeTable = {
1142 sectionId: this.timeTable.selectSection, 1158 sectionId: this.timeTable.selectSection,
1143 classId: this.timeTable.select, 1159 classId: this.timeTable.select,
1144 schedule: [ 1160 schedule: [
1145 { 1161 {
1146 day: this.timeTable.selectDay, 1162 day: this.timeTable.selectDay,
1147 lectures: [ 1163 lectures: [
1148 { 1164 {
1149 timeIn: this.timeTable.timeIn, 1165 timeIn: this.timeTable.timeIn,
1150 timeOut: this.timeTable.timeOut, 1166 timeOut: this.timeTable.timeOut,
1151 subjectName: this.timeTable.subjectName, 1167 subjectName: this.timeTable.subjectName,
1152 teacherId: this.timeTable.selectTeacher 1168 teacherId: this.timeTable.selectTeacher
1153 } 1169 }
1154 ] 1170 ]
1155 } 1171 }
1156 ] 1172 ]
1157 }; 1173 };
1158 this.loading = true; 1174 this.loading = true;
1159 http() 1175 http()
1160 .post("/createTimeTable", addTimeTable) 1176 .post("/createTimeTable", addTimeTable)
1161 .then(response => { 1177 .then(response => {
1162 // console.log("addTimeTable=====>", addTimeTable); 1178 // console.log("addTimeTable=====>", addTimeTable);
1163 if ((this.snackbar = true)) { 1179 if ((this.snackbar = true)) {
1164 this.text = "New Time Table added successfully"; 1180 this.text = "New Time Table added successfully";
1165 } 1181 }
1166 this.clear(); 1182 this.clear();
1167 this.loading = false; 1183 this.loading = false;
1168 }) 1184 })
1169 .catch(error => { 1185 .catch(error => {
1170 // console.log(error); 1186 // console.log(error);
1171 if ((this.snackbar = true)) { 1187 if ((this.snackbar = true)) {
1172 this.text = error.response.data.message; 1188 this.text = error.response.data.message;
1173 } 1189 }
1174 this.loading = false; 1190 this.loading = false;
1175 }); 1191 });
1176 } 1192 }
1177 }, 1193 },
1178 clear() { 1194 clear() {
1179 this.$refs.form.reset(); 1195 this.$refs.form.reset();
1180 }, 1196 },
1181 clearLeactureData() { 1197 clearLeactureData() {
1182 this.$refs.lectureForm.reset(); 1198 this.$refs.lectureForm.reset();
1183 }, 1199 },
1184 save() { 1200 save() {
1185 let imageData = new FormData(); 1201 let imageData = new FormData();
1186 imageData.append("upload", this.imageFile); 1202 imageData.append("upload", this.imageFile);
1187 // console.log(imageData); 1203 // console.log(imageData);
1188 let editTimeTable = { 1204 let editTimeTable = {
1189 timeTableId: this.editedItem._id, 1205 timeTableId: this.editedItem._id,
1190 classId: this.editedItem.classNum, 1206 classId: this.editedItem.classNum,
1191 sectionId: this.editedItem.selectSection 1207 sectionId: this.editedItem.selectSection
1192 // imageData 1208 // imageData
1193 }; 1209 };
1194 http() 1210 http()
1195 .put("/updateTimeTable", editTimeTable) 1211 .put("/updateTimeTable", editTimeTable)
1196 .then(response => { 1212 .then(response => {
1197 console.log("editTimeTable", editTimeTable); 1213 console.log("editTimeTable", editTimeTable);
1198 if ((this.snackbar = true)) { 1214 if ((this.snackbar = true)) {
1199 this.text = "Successfully Edit Existing Time Table"; 1215 this.text = "Successfully Edit Existing Time Table";
1200 } 1216 }
1201 this.findTimeTable(); 1217 this.findTimeTable();
1202 }) 1218 })
1203 .catch(error => { 1219 .catch(error => {
1204 // console.log(error); 1220 // console.log(error);
1205 if ((this.snackbar = true)) { 1221 if ((this.snackbar = true)) {
1206 this.text = error.response.data.message; 1222 this.text = error.response.data.message;
1207 } 1223 }
1208 }); 1224 });
1209 this.close(); 1225 this.close();
1210 }, 1226 },
1211 deleteTimeTable(timeToDelete, deleteLectures) { 1227 deleteTimeTable(timeToDelete, deleteLectures) {
1212 let deleteLecture = { 1228 let deleteLecture = {
1213 lectureId: timeToDelete._id 1229 lectureId: timeToDelete._id
1214 }; 1230 };
1215 http() 1231 http()
1216 .delete( 1232 .delete(
1217 "/deleteLecture", 1233 "/deleteLecture",
1218 confirm("Are you sure you want to delete this?") && { 1234 confirm("Are you sure you want to delete this?") && {
1219 params: deleteLecture 1235 params: deleteLecture
1220 } 1236 }
1221 ) 1237 )
1222 .then(response => { 1238 .then(response => {
1223 if ((this.snackbar = true)) { 1239 if ((this.snackbar = true)) {
1224 this.text = "Successfully delete Existing User"; 1240 this.text = "Successfully delete Existing User";
1225 } 1241 }
1226 const index = this.timeTableList.schedule.indexOf(deleteLectures); 1242 const index = this.timeTableList.schedule.indexOf(deleteLectures);
1227 for (let i = 0; i < this.timeTableList.schedule.length; i++) { 1243 for (let i = 0; i < this.timeTableList.schedule.length; i++) {
1228 this.timeTableList.schedule[i].lectures.splice(index, 1); 1244 this.timeTableList.schedule[i].lectures.splice(index, 1);
1229 } 1245 }
1230 }) 1246 })
1231 .catch(error => { 1247 .catch(error => {
1232 console.log(error); 1248 console.log(error);
1233 }); 1249 });
1234 }, 1250 },
1235 addSchedule(id) { 1251 addSchedule(id) {
1236 this.scheduleDayId = id; 1252 this.scheduleDayId = id;
1237 this.dialogSchedule = true; 1253 this.dialogSchedule = true;
1238 }, 1254 },
1239 submitSchedule() { 1255 submitSchedule() {
1240 let scheduleDayData = { 1256 let scheduleDayData = {
1241 timeTableId: this.scheduleDayId, 1257 timeTableId: this.scheduleDayId,
1242 day: this.schedule.selectDay 1258 day: this.schedule.selectDay
1243 }; 1259 };
1244 http() 1260 http()
1245 .post("/addSchedule", scheduleDayData) 1261 .post("/addSchedule", scheduleDayData)
1246 .then(response => { 1262 .then(response => {
1247 if ((this.snackbar = true)) { 1263 if ((this.snackbar = true)) {
1248 this.text = "New Schedule Day added successfully"; 1264 this.text = "New Schedule Day added successfully";
1249 } 1265 }
1250 this.dialogSchedule = true; 1266 this.dialogSchedule = true;
1251 this.loading = false; 1267 this.loading = false;
1252 }) 1268 })
1253 .catch(error => { 1269 .catch(error => {
1254 // console.log(error); 1270 // console.log(error);
1255 if ((this.snackbar = true)) { 1271 if ((this.snackbar = true)) {
1256 this.text = error.response.data.message; 1272 this.text = error.response.data.message;
1257 } 1273 }
1258 this.loading = false; 1274 this.loading = false;
1259 }); 1275 });
1260 } 1276 }
1261 }, 1277 },
1262 mounted() { 1278 mounted() {
1263 // this.getTimeTableList(); 1279 // this.getTimeTableList();
1264 var token = this.$store.state.token; 1280 var token = this.$store.state.token;
1265 http() 1281 http()
1266 .get("/getClassesList", { 1282 .get("/getClassesList", {
1267 headers: { Authorization: "Bearer " + token } 1283 headers: { Authorization: "Bearer " + token }
1268 }) 1284 })
1269 .then(response => { 1285 .then(response => {
1270 this.addclass = response.data.data; 1286 this.addclass = response.data.data;
1271 // console.log("getClassesList=====>",this.addclass) 1287 // console.log("getClassesList=====>",this.addclass)
1272 }) 1288 })
1273 .catch(err => { 1289 .catch(err => {
1274 // console.log("err====>", err); 1290 // console.log("err====>", err);
1275 }); 1291 });
1276 1292
1277 http() 1293 http()
1278 .get("/getTeachersList", { 1294 .get("/getTeachersList", {
1279 headers: { Authorization: "Bearer " + token } 1295 headers: { Authorization: "Bearer " + token }
1280 }) 1296 })
1281 .then(response => { 1297 .then(response => {
1282 this.addTeachers = response.data.data; 1298 this.addTeachers = response.data.data;
1283 // console.log("getClassesList=====>",this.addTeachers) 1299 // console.log("getClassesList=====>",this.addTeachers)
1284 }) 1300 })
1285 .catch(err => { 1301 .catch(err => {
1286 // console.log("err====>", err); 1302 // console.log("err====>", err);
1287 }); 1303 });
1288 }, 1304 },
1289 created() { 1305 created() {
1290 this.$root.$on("app:search", search => { 1306 this.$root.$on("app:search", search => {
1291 this.search = search; 1307 this.search = search;
1292 }); 1308 });
1293 }, 1309 },
1294 beforeDestroy() { 1310 beforeDestroy() {
1295 // dont forget to remove the listener 1311 // dont forget to remove the listener
1296 this.$root.$off("app:search"); 1312 this.$root.$off("app:search");
1297 } 1313 }
1298 }; 1314 };
1299 </script> 1315 </script>
1300 <style scoped> 1316 <style scoped>
1301 .active { 1317 .active {
1302 background-color: gray; 1318 background-color: gray;
1303 color: white !important; 1319 color: white !important;
1304 } 1320 }
1305 .activebtn { 1321 .activebtn {
1306 color: black !important; 1322 color: black !important;
1307 } 1323 }
1308 </style> 1324 </style>
src/pages/User/user.vue
Diff comments   View file @495e403
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 <img 438 <v-tooltip top>
439 style="cursor:pointer; width:25px; height:18px; " 439 <img
440 class="mr-5" 440 slot="activator"
441 @click="profile(props.item)" 441 style="cursor:pointer; width:25px; height:18px; "
442 src="/static/icon/eye1.png" 442 class="mr5"
443 /> 443 @click="profile(props.item)"
444 <img 444 src="/static/icon/eye1.png"
445 style="cursor:pointer; width:20px; height:18px; " 445 />
446 class="mr-5" 446 <span>View</span>
447 @click="editItem(props.item)" 447 </v-tooltip>
448 src="/static/icon/edit1.png" 448 <v-tooltip top>
449 /> 449 <img
450 <img 450 slot="activator"
451 style="cursor:pointer;width:20px; height:20px; " 451 style="cursor:pointer; width:20px; height:18px; "
452 class="mr-5" 452 class="mr5"
453 @click="deleteItem(props.item)" 453 @click="editItem(props.item)"
454 src="/static/icon/delete1.png" 454 src="/static/icon/edit1.png"
455 /> 455 />
456 <span>Edit</span>
457 </v-tooltip>
458 <v-tooltip top>
459 <img
460 slot="activator"
461 style="cursor:pointer; width:20px; height:20px; "
462 class="mr5"
463 @click="deleteItem(props.item)"
464 src="/static/icon/delete1.png"
465 />
466 <span>Delete</span>
467 </v-tooltip>
456 </span> 468 </span>
457 </td> 469 </td>
458 </template> 470 </template>
459 <v-alert 471 <v-alert
460 slot="no-results" 472 slot="no-results"
461 :value="true" 473 :value="true"
462 color="error" 474 color="error"
463 icon="warning" 475 icon="warning"
464 >Your search for "{{ search }}" found no results.</v-alert> 476 >Your search for "{{ search }}" found no results.</v-alert>
465 </v-data-table> 477 </v-data-table>
466 </v-tab-item> 478 </v-tab-item>
467 479
468 <!-- ****** Add User Data****** --> 480 <!-- ****** Add User Data****** -->
469 <v-tab-item> 481 <v-tab-item>
470 <v-container> 482 <v-container>
471 <v-snackbar 483 <v-snackbar
472 :timeout="timeout" 484 :timeout="timeout"
473 :top="y === 'top'" 485 :top="y === 'top'"
474 :right="x === 'right'" 486 :right="x === 'right'"
475 :vertical="mode === 'vertical'" 487 :vertical="mode === 'vertical'"
476 v-model="snackbar" 488 v-model="snackbar"
477 color="success" 489 color="success"
478 >{{ text }}</v-snackbar> 490 >{{ text }}</v-snackbar>
479 <v-flex xs12 sm12 class="my-4"> 491 <v-flex xs12 sm12 class="my-4">
480 <v-card flat> 492 <v-card flat>
481 <v-form ref="form" v-model="valid" lazy-validation> 493 <v-form ref="form" v-model="valid" lazy-validation>
482 <v-container fluid> 494 <v-container fluid>
483 <v-layout> 495 <v-layout>
484 <v-flex 496 <v-flex
485 xs12 497 xs12
486 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"
487 > 499 >
488 <v-avatar size="100px"> 500 <v-avatar size="100px">
489 <img src="/static/icon/user.png" v-if="!imageUrl" /> 501 <img src="/static/icon/user.png" v-if="!imageUrl" />
490 </v-avatar> 502 </v-avatar>
491 <img 503 <img
492 :src="imageUrl" 504 :src="imageUrl"
493 height="150" 505 height="150"
494 v-if="imageUrl" 506 v-if="imageUrl"
495 style="border-radius:50%; width:200px" 507 style="border-radius:50%; width:200px"
496 /> 508 />
497 </v-flex> 509 </v-flex>
498 </v-layout> 510 </v-layout>
499 <v-layout> 511 <v-layout>
500 <v-flex xs12 sm6> 512 <v-flex xs12 sm6>
501 <v-layout> 513 <v-layout>
502 <v-flex xs4 class="pt-4 subheading"> 514 <v-flex xs4 class="pt-4 subheading">
503 <label class="right">Name:</label> 515 <label class="right">Name:</label>
504 </v-flex> 516 </v-flex>
505 <v-flex xs8 class="ml-3"> 517 <v-flex xs8 class="ml-3">
506 <v-text-field 518 <v-text-field
507 v-model="addUser.name" 519 v-model="addUser.name"
508 placeholder="fill your Name" 520 placeholder="fill your Name"
509 name="name" 521 name="name"
510 type="text" 522 type="text"
511 :rules="nameRules" 523 :rules="nameRules"
512 required 524 required
513 ></v-text-field> 525 ></v-text-field>
514 </v-flex> 526 </v-flex>
515 </v-layout> 527 </v-layout>
516 </v-flex> 528 </v-flex>
517 <v-flex xs12 sm6> 529 <v-flex xs12 sm6>
518 <v-layout> 530 <v-layout>
519 <v-flex xs4 class="pt-4 subheading"> 531 <v-flex xs4 class="pt-4 subheading">
520 <label class="right">Email ID:</label> 532 <label class="right">Email ID:</label>
521 </v-flex> 533 </v-flex>
522 <v-flex xs8 class="ml-3"> 534 <v-flex xs8 class="ml-3">
523 <v-text-field 535 <v-text-field
524 placeholder="fill your email" 536 placeholder="fill your email"
525 :rules="emailRules" 537 :rules="emailRules"
526 v-model="addUser.email" 538 v-model="addUser.email"
527 type="text" 539 type="text"
528 name="email" 540 name="email"
529 required 541 required
530 ></v-text-field> 542 ></v-text-field>
531 </v-flex> 543 </v-flex>
532 </v-layout> 544 </v-layout>
533 </v-flex> 545 </v-flex>
534 </v-layout> 546 </v-layout>
535 <v-layout> 547 <v-layout>
536 <v-flex xs12 sm6> 548 <v-flex xs12 sm6>
537 <v-layout> 549 <v-layout>
538 <v-flex xs4 class="pt-4 subheading"> 550 <v-flex xs4 class="pt-4 subheading">
539 <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>
540 <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>
541 </v-flex> 553 </v-flex>
542 <v-flex xs8 class="ml-3"> 554 <v-flex xs8 class="ml-3">
543 <v-menu 555 <v-menu
544 ref="menu" 556 ref="menu"
545 :close-on-content-click="false" 557 :close-on-content-click="false"
546 v-model="menu" 558 v-model="menu"
547 :nudge-right="40" 559 :nudge-right="40"
548 lazy 560 lazy
549 transition="scale-transition" 561 transition="scale-transition"
550 offset-y 562 offset-y
551 full-width 563 full-width
552 min-width="290px" 564 min-width="290px"
553 > 565 >
554 <v-text-field 566 <v-text-field
555 slot="activator" 567 slot="activator"
556 :rules="dateRules" 568 :rules="dateRules"
557 v-model="addUser.dob" 569 v-model="addUser.dob"
558 placeholder="Select DOB" 570 placeholder="Select DOB"
559 ></v-text-field> 571 ></v-text-field>
560 <v-date-picker 572 <v-date-picker
561 ref="picker" 573 ref="picker"
562 v-model="addUser.dob" 574 v-model="addUser.dob"
563 :max="new Date().toISOString().substr(0, 10)" 575 :max="new Date().toISOString().substr(0, 10)"
564 min="1950-01-01" 576 min="1950-01-01"
565 @input="menu = false" 577 @input="menu = false"
566 ></v-date-picker> 578 ></v-date-picker>
567 </v-menu> 579 </v-menu>
568 </v-flex> 580 </v-flex>
569 </v-layout> 581 </v-layout>
570 </v-flex> 582 </v-flex>
571 <v-flex xs12 sm6> 583 <v-flex xs12 sm6>
572 <v-layout> 584 <v-layout>
573 <v-flex xs4 class="pt-4 subheading"> 585 <v-flex xs4 class="pt-4 subheading">
574 <label class="right">Gender:</label> 586 <label class="right">Gender:</label>
575 </v-flex> 587 </v-flex>
576 <v-flex xs8 class="ml-3"> 588 <v-flex xs8 class="ml-3">
577 <v-select 589 <v-select
578 v-model="addUser.gender" 590 v-model="addUser.gender"
579 :items="gender" 591 :items="gender"
580 label="Selct Gender " 592 label="Selct Gender "
581 :rules="genderRules" 593 :rules="genderRules"
582 required 594 required
583 ></v-select> 595 ></v-select>
584 </v-flex> 596 </v-flex>
585 </v-layout> 597 </v-layout>
586 </v-flex> 598 </v-flex>
587 </v-layout> 599 </v-layout>
588 <v-layout> 600 <v-layout>
589 <v-flex xs12 sm6> 601 <v-flex xs12 sm6>
590 <v-layout> 602 <v-layout>
591 <v-flex xs4 class="pt-4 subheading"> 603 <v-flex xs4 class="pt-4 subheading">
592 <label class="right">Religion:</label> 604 <label class="right">Religion:</label>
593 </v-flex> 605 </v-flex>
594 <v-flex xs8 class="ml-3"> 606 <v-flex xs8 class="ml-3">
595 <v-text-field 607 <v-text-field
596 v-model="addUser.religion" 608 v-model="addUser.religion"
597 placeholder="fill your Religion" 609 placeholder="fill your Religion"
598 name="Religion" 610 name="Religion"
599 type="text" 611 type="text"
600 :rules="religionRules" 612 :rules="religionRules"
601 required 613 required
602 ></v-text-field> 614 ></v-text-field>
603 </v-flex> 615 </v-flex>
604 </v-layout> 616 </v-layout>
605 </v-flex> 617 </v-flex>
606 <v-flex xs12 sm6> 618 <v-flex xs12 sm6>
607 <v-layout> 619 <v-layout>
608 <v-flex xs4 class="pt-4 subheading"> 620 <v-flex xs4 class="pt-4 subheading">
609 <label class="right">JoiningDate:</label> 621 <label class="right">JoiningDate:</label>
610 </v-flex> 622 </v-flex>
611 <v-flex xs8 class="ml-3"> 623 <v-flex xs8 class="ml-3">
612 <v-menu 624 <v-menu
613 ref="menu1" 625 ref="menu1"
614 :close-on-content-click="false" 626 :close-on-content-click="false"
615 v-model="menu1" 627 v-model="menu1"
616 :nudge-right="40" 628 :nudge-right="40"
617 lazy 629 lazy
618 transition="scale-transition" 630 transition="scale-transition"
619 offset-y 631 offset-y
620 full-width 632 full-width
621 min-width="290px" 633 min-width="290px"
622 > 634 >
623 <v-text-field 635 <v-text-field
624 slot="activator" 636 slot="activator"
625 :rules="joinDateRules" 637 :rules="joinDateRules"
626 v-model="addUser.joinDate" 638 v-model="addUser.joinDate"
627 placeholder="Select date" 639 placeholder="Select date"
628 ></v-text-field> 640 ></v-text-field>
629 <v-date-picker 641 <v-date-picker
630 ref="picker" 642 ref="picker"
631 v-model="addUser.joinDate" 643 v-model="addUser.joinDate"
632 :max="new Date().toISOString().substr(0, 10)" 644 :max="new Date().toISOString().substr(0, 10)"
633 min="1950-01-01" 645 min="1950-01-01"
634 @input="menu1 = false" 646 @input="menu1 = false"
635 ></v-date-picker> 647 ></v-date-picker>
636 </v-menu> 648 </v-menu>
637 </v-flex> 649 </v-flex>
638 </v-layout> 650 </v-layout>
639 </v-flex> 651 </v-flex>
640 </v-layout> 652 </v-layout>
641 <v-layout> 653 <v-layout>
642 <v-flex xs12 sm6> 654 <v-flex xs12 sm6>
643 <v-layout> 655 <v-layout>
644 <v-flex xs4 class="pt-4 subheading"> 656 <v-flex xs4 class="pt-4 subheading">
645 <label class="right">Phone :</label> 657 <label class="right">Phone :</label>
646 </v-flex> 658 </v-flex>
647 <v-flex xs8 class="ml-3"> 659 <v-flex xs8 class="ml-3">
648 <v-text-field 660 <v-text-field
649 v-model="addUser.mobileNo" 661 v-model="addUser.mobileNo"
650 placeholder="fill your Phone Number" 662 placeholder="fill your Phone Number"
651 name="mobileNo" 663 name="mobileNo"
652 type="number" 664 type="number"
653 :rules="mobileNoRules" 665 :rules="mobileNoRules"
654 required 666 required
655 ></v-text-field> 667 ></v-text-field>
656 </v-flex> 668 </v-flex>
657 </v-layout> 669 </v-layout>
658 </v-flex> 670 </v-flex>
659 <v-flex xs12 sm6> 671 <v-flex xs12 sm6>
660 <v-layout> 672 <v-layout>
661 <v-flex xs4 class="pt-4 subheading"> 673 <v-flex xs4 class="pt-4 subheading">
662 <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>
663 <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>
664 </v-flex> 676 </v-flex>
665 <v-flex xs8 class="ml-3"> 677 <v-flex xs8 class="ml-3">
666 <v-autocomplete 678 <v-autocomplete
667 v-model="addUser.role" 679 v-model="addUser.role"
668 :rules="role" 680 :rules="role"
669 :items="userRole" 681 :items="userRole"
670 item-text="name" 682 item-text="name"
671 item-value="name" 683 item-value="name"
672 placeholder="Select Role Name" 684 placeholder="Select Role Name"
673 required 685 required
674 ></v-autocomplete> 686 ></v-autocomplete>
675 </v-flex> 687 </v-flex>
676 </v-layout> 688 </v-layout>
677 </v-flex> 689 </v-flex>
678 </v-layout> 690 </v-layout>
679 <v-layout> 691 <v-layout>
680 <v-flex xs12 sm6> 692 <v-flex xs12 sm6>
681 <v-layout> 693 <v-layout>
682 <v-flex xs4 class="pt-4 subheading"> 694 <v-flex xs4 class="pt-4 subheading">
683 <label class="right">Username:</label> 695 <label class="right">Username:</label>
684 </v-flex> 696 </v-flex>
685 <v-flex xs8 class="ml-3"> 697 <v-flex xs8 class="ml-3">
686 <v-text-field 698 <v-text-field
687 v-model="addUser.userName" 699 v-model="addUser.userName"
688 placeholder="fill your User Name" 700 placeholder="fill your User Name"
689 type="text" 701 type="text"
690 :rules="userNameRules" 702 :rules="userNameRules"
691 required 703 required
692 ></v-text-field> 704 ></v-text-field>
693 </v-flex> 705 </v-flex>
694 </v-layout> 706 </v-layout>
695 </v-flex> 707 </v-flex>
696 <v-flex xs12 sm6> 708 <v-flex xs12 sm6>
697 <v-layout> 709 <v-layout>
698 <v-flex xs4 class="pt-4 subheading"> 710 <v-flex xs4 class="pt-4 subheading">
699 <label class="right">Password:</label> 711 <label class="right">Password:</label>
700 </v-flex> 712 </v-flex>
701 <v-flex xs8 class="ml-3"> 713 <v-flex xs8 class="ml-3">
702 <v-text-field 714 <v-text-field
703 v-model="addUser.password" 715 v-model="addUser.password"
704 placeholder="fill your Password" 716 placeholder="fill your Password"
705 :rules="passwordRules" 717 :rules="passwordRules"
706 required 718 required
707 ></v-text-field> 719 ></v-text-field>
708 </v-flex> 720 </v-flex>
709 </v-layout> 721 </v-layout>
710 </v-flex> 722 </v-flex>
711 </v-layout> 723 </v-layout>
712 <v-layout> 724 <v-layout>
713 <v-flex xs12 sm6> 725 <v-flex xs12 sm6>
714 <v-layout> 726 <v-layout>
715 <v-flex xs4 class="pt-4 subheading"> 727 <v-flex xs4 class="pt-4 subheading">
716 <label class="right hidden-sm-only hidden-xs-only">Uplaod Image:</label> 728 <label class="right hidden-sm-only hidden-xs-only">Uplaod Image:</label>
717 <label class="right hidden-lg-only hidden-xl-only hidden-md-only">Image:</label> 729 <label class="right hidden-lg-only hidden-xl-only hidden-md-only">Image:</label>
718 </v-flex> 730 </v-flex>
719 <v-flex xs8 class="ml-3"> 731 <v-flex xs8 class="ml-3">
720 <v-text-field 732 <v-text-field
721 label="Select Image" 733 label="Select Image"
722 @click="pickFile" 734 @click="pickFile"
723 v-model="imageName" 735 v-model="imageName"
724 append-icon="attach_file" 736 append-icon="attach_file"
725 ></v-text-field> 737 ></v-text-field>
726 <input 738 <input
727 type="file" 739 type="file"
728 style="display:none" 740 style="display:none"
729 ref="image" 741 ref="image"
730 accept="image/*" 742 accept="image/*"
731 @change="onFilePicked" 743 @change="onFilePicked"
732 /> 744 />
733 </v-flex> 745 </v-flex>
734 </v-layout> 746 </v-layout>
735 </v-flex> 747 </v-flex>
736 <v-flex xs12 sm6> 748 <v-flex xs12 sm6>
737 <v-layout> 749 <v-layout>
738 <v-flex xs4 class="pt-4 subheading"> 750 <v-flex xs4 class="pt-4 subheading">
739 <label class="right">Address:</label> 751 <label class="right">Address:</label>
740 </v-flex> 752 </v-flex>
741 <v-flex xs8 class="ml-3"> 753 <v-flex xs8 class="ml-3">
742 <v-text-field 754 <v-text-field
743 name="input-4-3" 755 name="input-4-3"
744 v-model="addUser.presentAddress" 756 v-model="addUser.presentAddress"
745 :rules="presentAddress" 757 :rules="presentAddress"
746 placeholder="fill Your present Address" 758 placeholder="fill Your present Address"
747 required 759 required
748 ></v-text-field> 760 ></v-text-field>
749 </v-flex> 761 </v-flex>
750 </v-layout> 762 </v-layout>
751 </v-flex> 763 </v-flex>
752 </v-layout> 764 </v-layout>
753 <v-layout> 765 <v-layout>
754 <v-flex xs12 sm12> 766 <v-flex xs12 sm12>
755 <v-layout> 767 <v-layout>
756 <v-flex xs6> 768 <v-flex xs6>
757 <v-btn @click="clear" round class="ml-3" dark>clear</v-btn> 769 <v-btn @click="clear" round class="ml-3" dark>clear</v-btn>
758 </v-flex> 770 </v-flex>
759 <v-flex xs6> 771 <v-flex xs6>
760 <v-btn @click="submit" round dark :loading="loading" class="right">Add</v-btn> 772 <v-btn @click="submit" round dark :loading="loading" class="right">Add</v-btn>
761 </v-flex> 773 </v-flex>
762 </v-layout> 774 </v-layout>
763 </v-flex> 775 </v-flex>
764 </v-layout> 776 </v-layout>
765 </v-container> 777 </v-container>
766 </v-form> 778 </v-form>
767 </v-card> 779 </v-card>
768 </v-flex> 780 </v-flex>
769 </v-container> 781 </v-container>
770 </v-tab-item> 782 </v-tab-item>
771 </v-tabs> 783 </v-tabs>
772 <div class="loader" v-if="showLoader"> 784 <div class="loader" v-if="showLoader">
773 <v-progress-circular indeterminate color="white"></v-progress-circular> 785 <v-progress-circular indeterminate color="white"></v-progress-circular>
774 </div> 786 </div>
775 </v-app> 787 </v-app>
776 </template> 788 </template>
777 789
778 <script> 790 <script>
779 import http from "@/Services/http.js"; 791 import http from "@/Services/http.js";
780 import Util from "@/util"; 792 import Util from "@/util";
781 import moment from "moment"; 793 import moment from "moment";
782 794
783 export default { 795 export default {
784 data: () => ({ 796 data: () => ({
785 component: "report-generate", 797 component: "report-generate",
786 snackbar: false, 798 snackbar: false,
787 y: "top", 799 y: "top",
788 x: "right", 800 x: "right",
789 mode: "", 801 mode: "",
790 timeout: 3000, 802 timeout: 3000,
791 text: "", 803 text: "",
792 showLoader: false, 804 showLoader: false,
793 loading: false, 805 loading: false,
794 date: null, 806 date: null,
795 search: "", 807 search: "",
796 menu: false, 808 menu: false,
797 menu1: false, 809 menu1: false,
798 menu2: false, 810 menu2: false,
799 menu3: false, 811 menu3: false,
800 dialog: false, 812 dialog: false,
801 dialog1: false, 813 dialog1: false,
802 valid: true, 814 valid: true,
803 isActive: true, 815 isActive: true,
804 newActive: false, 816 newActive: false,
805 pagination: { 817 pagination: {
806 rowsPerPage: 15 818 rowsPerPage: 15
807 }, 819 },
808 imageData: {}, 820 imageData: {},
809 imageName: "", 821 imageName: "",
810 imageUrl: "", 822 imageUrl: "",
811 imageFile: "", 823 imageFile: "",
812 nameRules: [v => !!v || "Name is required"], 824 nameRules: [v => !!v || "Name is required"],
813 dateRules: [v => !!v || " DOB is required"], 825 dateRules: [v => !!v || " DOB is required"],
814 genderRules: [v => !!v || " Gender Name is required"], 826 genderRules: [v => !!v || " Gender Name is required"],
815 pincode: [v => !!v || " Pincode is required"], 827 pincode: [v => !!v || " Pincode is required"],
816 role: [v => !!v || "Role Name is required"], 828 role: [v => !!v || "Role Name is required"],
817 permanentAddress: [v => !!v || " Permanent Address is required"], 829 permanentAddress: [v => !!v || " Permanent Address is required"],
818 presentAddress: [v => !!v || " Present Address is required"], 830 presentAddress: [v => !!v || " Present Address is required"],
819 mobileNoRules: [v => !!v || "Phone Number is required"], 831 mobileNoRules: [v => !!v || "Phone Number is required"],
820 religionRules: [v => !!v || "Religion Name is required"], 832 religionRules: [v => !!v || "Religion Name is required"],
821 joinDateRules: [v => !!v || " Join Date is required"], 833 joinDateRules: [v => !!v || " Join Date is required"],
822 userNameRules: [v => !!v || " User Name is required"], 834 userNameRules: [v => !!v || " User Name is required"],
823 passwordRules: [v => !!v || " Password is required"], 835 passwordRules: [v => !!v || " Password is required"],
824 errorMessages: "", 836 errorMessages: "",
825 userRole: [], 837 userRole: [],
826 emailRules: [ 838 emailRules: [
827 v => !!v || "E-mail is required", 839 v => !!v || "E-mail is required",
828 v => 840 v =>
829 /^\w+([.-]?\w+)*@\w+([.-]?\w+)*(\.\w{2,3})+$/.test(v) || 841 /^\w+([.-]?\w+)*@\w+([.-]?\w+)*(\.\w{2,3})+$/.test(v) ||
830 "E-mail must be valid" 842 "E-mail must be valid"
831 ], 843 ],
832 gender: ["Male", "Female"], 844 gender: ["Male", "Female"],
833 headers: [ 845 headers: [
834 { 846 {
835 text: "No", 847 text: "No",
836 align: "center", 848 align: "center",
837 sortable: false, 849 sortable: false,
838 value: "No" 850 value: "No"
839 }, 851 },
840 { 852 {
841 text: "Profile Pic", 853 text: "Profile Pic",
842 value: "profilePicUrl", 854 value: "profilePicUrl",
843 sortable: false, 855 sortable: false,
844 align: "center" 856 align: "center"
845 }, 857 },
846 { text: "Name", value: "name", sortable: false, align: "center" }, 858 { text: "Name", value: "name", sortable: false, align: "center" },
847 { text: "Email", value: "email", sortable: false, align: "center" }, 859 { text: "Email", value: "email", sortable: false, align: "center" },
848 { text: "DOB", value: "dob", sortable: false, align: "center" }, 860 { text: "DOB", value: "dob", sortable: false, align: "center" },
849 { 861 {
850 text: "Joining Date", 862 text: "Joining Date",
851 value: "joiningDate", 863 value: "joiningDate",
852 sortable: false, 864 sortable: false,
853 align: "center" 865 align: "center"
854 }, 866 },
855 { 867 {
856 text: "Phone", 868 text: "Phone",
857 value: "phone", 869 value: "phone",
858 sortable: false, 870 sortable: false,
859 align: "center" 871 align: "center"
860 }, 872 },
861 { text: "Action", value: "", sortable: false, align: "center" } 873 { text: "Action", value: "", sortable: false, align: "center" }
862 ], 874 ],
863 desserts: [], 875 desserts: [],
864 editedIndex: -1, 876 editedIndex: -1,
865 upload: "", 877 upload: "",
866 editedItem: { 878 editedItem: {
867 role: "", 879 role: "",
868 name: "", 880 name: "",
869 email: "", 881 email: "",
870 dob: null, 882 dob: null,
871 gender: "", 883 gender: "",
872 role: "", 884 role: "",
873 address: "", 885 address: "",
874 phone: "", 886 phone: "",
875 religion: "", 887 religion: "",
876 joiningDate: null 888 joiningDate: null
877 }, 889 },
878 addUser: { 890 addUser: {
879 role: "", 891 role: "",
880 name: "", 892 name: "",
881 email: "", 893 email: "",
882 dob: null, 894 dob: null,
883 gender: "", 895 gender: "",
884 pincode: "", 896 pincode: "",
885 role: "", 897 role: "",
886 permanentAddress: "", 898 permanentAddress: "",
887 presentAddress: "", 899 presentAddress: "",
888 mobileNo: "", 900 mobileNo: "",
889 religion: "", 901 religion: "",
890 joiningDate: null 902 joiningDate: null
891 } 903 }
892 }), 904 }),
893 watch: { 905 watch: {
894 menu(val) { 906 menu(val) {
895 val && this.$nextTick(() => (this.$refs.picker.activePicker = "YEAR")); 907 val && this.$nextTick(() => (this.$refs.picker.activePicker = "YEAR"));
896 }, 908 },
897 menu1(val) { 909 menu1(val) {
898 val && this.$nextTick(() => (this.$refs.picker.activePicker = "YEAR")); 910 val && this.$nextTick(() => (this.$refs.picker.activePicker = "YEAR"));
899 } 911 }
900 }, 912 },
901 methods: { 913 methods: {
902 save(date) { 914 save(date) {
903 this.$refs.menu.save(date); 915 this.$refs.menu.save(date);
904 }, 916 },
905 save(date) { 917 save(date) {
906 this.$refs.menu1.save(date); 918 this.$refs.menu1.save(date);
907 }, 919 },
908 pickFile() { 920 pickFile() {
909 this.$refs.image.click(); 921 this.$refs.image.click();
910 }, 922 },
911 onFilePicked(e) { 923 onFilePicked(e) {
912 // console.log(e) 924 // console.log(e)
913 const files = e.target.files; 925 const files = e.target.files;
914 this.upload = e.target.files[0]; 926 this.upload = e.target.files[0];
915 console.log("imageData-upload========>", this.upload); 927 console.log("imageData-upload========>", this.upload);
916 if (files[0] !== undefined) { 928 if (files[0] !== undefined) {
917 this.imageName = files[0].name; 929 this.imageName = files[0].name;
918 if (this.imageName.lastIndexOf(".") <= 0) { 930 if (this.imageName.lastIndexOf(".") <= 0) {
919 return; 931 return;
920 } 932 }
921 const fr = new FileReader(); 933 const fr = new FileReader();
922 fr.readAsDataURL(files[0]); 934 fr.readAsDataURL(files[0]);
923 fr.addEventListener("load", () => { 935 fr.addEventListener("load", () => {
924 this.imageUrl = fr.result; 936 this.imageUrl = fr.result;
925 this.imageFile = files[0]; // this is an image file that can be sent to server... 937 this.imageFile = files[0]; // this is an image file that can be sent to server...
926 // this.imageData.imageUrl = URL.createObjectURL(this.imageFile); 938 // this.imageData.imageUrl = URL.createObjectURL(this.imageFile);
927 // console.log("upload=======>", this.imageData.imageUrl); 939 // console.log("upload=======>", this.imageData.imageUrl);
928 console.log("imageFile", this.imageUrl); 940 console.log("imageFile", this.imageUrl);
929 }); 941 });
930 } else { 942 } else {
931 this.imageName = ""; 943 this.imageName = "";
932 this.imageFile = ""; 944 this.imageFile = "";
933 this.imageUrl = ""; 945 this.imageUrl = "";
934 } 946 }
935 }, 947 },
936 dates: function(date) { 948 dates: function(date) {
937 return moment(date).format("MMMM DD, YYYY"); 949 return moment(date).format("MMMM DD, YYYY");
938 }, 950 },
939 getUsersList() { 951 getUsersList() {
940 this.showLoader = true; 952 this.showLoader = true;
941 var token = this.$store.state.token; 953 var token = this.$store.state.token;
942 http() 954 http()
943 .get("/getUsersList", { 955 .get("/getUsersList", {
944 headers: { Authorization: "Bearer " + token } 956 headers: { Authorization: "Bearer " + token }
945 }) 957 })
946 .then(response => { 958 .then(response => {
947 this.desserts = response.data.data; 959 this.desserts = response.data.data;
948 this.showLoader = false; 960 this.showLoader = false;
949 console.log("UserList=====>", this.desserts); 961 console.log("UserList=====>", this.desserts);
950 }) 962 })
951 .catch(error => { 963 .catch(error => {
952 this.showLoader = false; 964 this.showLoader = false;
953 if (error.response.status === 401) { 965 if (error.response.status === 401) {
954 this.$router.replace({ path: "/" }); 966 this.$router.replace({ path: "/" });
955 this.$store.dispatch("setToken", null); 967 this.$store.dispatch("setToken", null);
956 this.$store.dispatch("Id", null); 968 this.$store.dispatch("Id", null);
957 } 969 }
958 }); 970 });
959 }, 971 },
960 editItem(item) { 972 editItem(item) {
961 this.editedIndex = this.desserts.indexOf(item); 973 this.editedIndex = this.desserts.indexOf(item);
962 this.editedItem = Object.assign({}, item); 974 this.editedItem = Object.assign({}, item);
963 this.editedItem.dob = 975 this.editedItem.dob =
964 this.editedItem.dob != undefined 976 this.editedItem.dob != undefined
965 ? (this.editedItem.dob = this.editedItem.dob.substring(0, 10)) 977 ? (this.editedItem.dob = this.editedItem.dob.substring(0, 10))
966 : (this.editedItem.dob = ""); 978 : (this.editedItem.dob = "");
967 for (let i = 0; i < this.userRole.length; i++) { 979 for (let i = 0; i < this.userRole.length; i++) {
968 if (this.userRole[i].role === this.editedItem.role) { 980 if (this.userRole[i].role === this.editedItem.role) {
969 this.editedItem.role = this.userRole[i].name; 981 this.editedItem.role = this.userRole[i].name;
970 } 982 }
971 } 983 }
972 this.dialog = true; 984 this.dialog = true;
973 }, 985 },
974 profile(item) { 986 profile(item) {
975 this.editedIndex = this.desserts.indexOf(item); 987 this.editedIndex = this.desserts.indexOf(item);
976 this.editedItem = Object.assign({}, item); 988 this.editedItem = Object.assign({}, item);
977 this.dialog1 = true; 989 this.dialog1 = true;
978 for (let i = 0; i < this.userRole.length; i++) { 990 for (let i = 0; i < this.userRole.length; i++) {
979 if (this.userRole[i].role === this.editedItem.role) { 991 if (this.userRole[i].role === this.editedItem.role) {
980 this.editedItem.role = this.userRole[i].name; 992 this.editedItem.role = this.userRole[i].name;
981 } 993 }
982 } 994 }
983 }, 995 },
984 deleteItem(item) { 996 deleteItem(item) {
985 let deleteUser = { 997 let deleteUser = {
986 UserId: item._id 998 UserId: item._id
987 }; 999 };
988 // console.log("deleteUers",deleteUser) 1000 // console.log("deleteUers",deleteUser)
989 http() 1001 http()
990 .delete( 1002 .delete(
991 "/deleteUser", 1003 "/deleteUser",
992 confirm("Are you sure you want to delete this?") && { 1004 confirm("Are you sure you want to delete this?") && {
993 params: deleteUser 1005 params: deleteUser
994 } 1006 }
995 ) 1007 )
996 .then(response => { 1008 .then(response => {
997 // console.log("deleteUers",deleteUser) 1009 // console.log("deleteUers",deleteUser)
998 if ((this.snackbar = true)) { 1010 if ((this.snackbar = true)) {
999 this.text = "Successfully delete Existing User"; 1011 this.text = "Successfully delete Existing User";
1000 } 1012 }
1001 this.getUsersList(); 1013 this.getUsersList();
1002 }) 1014 })
1003 .catch(error => { 1015 .catch(error => {
1004 console.log(error); 1016 console.log(error);
1005 }); 1017 });
1006 }, 1018 },
1007 activeTab(type) { 1019 activeTab(type) {
1008 switch (type) { 1020 switch (type) {
1009 case "existing": 1021 case "existing":
1010 this.newActive = false; 1022 this.newActive = false;
1011 this.isActive = true; 1023 this.isActive = true;
1012 break; 1024 break;
1013 1025
1014 default: 1026 default:
1015 this.newActive = true; 1027 this.newActive = true;
1016 this.isActive = false; 1028 this.isActive = false;
1017 break; 1029 break;
1018 } 1030 }
1019 }, 1031 },
1020 close() { 1032 close() {
1021 this.dialog = false; 1033 this.dialog = false;
1022 setTimeout(() => { 1034 setTimeout(() => {
1023 this.editedItem = Object.assign({}, this.defaultItem); 1035 this.editedItem = Object.assign({}, this.defaultItem);
1024 this.editedIndex = -1; 1036 this.editedIndex = -1;
1025 }, 300); 1037 }, 300);
1026 }, 1038 },
1027 close1() { 1039 close1() {
1028 this.dialog1 = false; 1040 this.dialog1 = false;
1029 }, 1041 },
1030 submit() { 1042 submit() {
1031 if (this.$refs.form.validate()) { 1043 if (this.$refs.form.validate()) {
1032 let addUserData = { 1044 let addUserData = {
1033 name: this.addUser.name, 1045 name: this.addUser.name,
1034 email: this.addUser.email, 1046 email: this.addUser.email,
1035 dob: this.addUser.dob, 1047 dob: this.addUser.dob,
1036 gender: this.addUser.gender, 1048 gender: this.addUser.gender,
1037 religion: this.addUser.religion, 1049 religion: this.addUser.religion,
1038 role: this.addUser.role, 1050 role: this.addUser.role,
1039 address: this.addUser.presentAddress, 1051 address: this.addUser.presentAddress,
1040 phone: this.addUser.mobileNo, 1052 phone: this.addUser.mobileNo,
1041 religion: this.addUser.religion, 1053 religion: this.addUser.religion,
1042 joiningDate: this.addUser.joinDate 1054 joiningDate: this.addUser.joinDate
1043 }; 1055 };
1044 if (this.imageUrl) { 1056 if (this.imageUrl) {
1045 var str = this.imageUrl; 1057 var str = this.imageUrl;
1046 const [baseUrl, imageUrl] = str.split(/,/); 1058 const [baseUrl, imageUrl] = str.split(/,/);
1047 addUserData.profilePicUrl = imageUrl; 1059 addUserData.profilePicUrl = imageUrl;
1048 } 1060 }
1049 this.loading = true; 1061 this.loading = true;
1050 http() 1062 http()
1051 .post("/createUser", addUserData) 1063 .post("/createUser", addUserData)
1052 .then(response => { 1064 .then(response => {
1053 this.imageUrl = ""; 1065 this.imageUrl = "";
1054 this.getUsersList(); 1066 this.getUsersList();
1055 this.snackbar = true; 1067 this.snackbar = true;
1056 this.text = "New User added successfully"; 1068 this.text = "New User added successfully";
1057 this.clear(); 1069 this.clear();
1058 this.loading = false; 1070 this.loading = false;
1059 }) 1071 })
1060 .catch(error => { 1072 .catch(error => {
1061 // console.log(error); 1073 // console.log(error);
1062 if ((this.snackbar = true)) { 1074 if ((this.snackbar = true)) {
1063 this.text = error.response.data.message; 1075 this.text = error.response.data.message;
1064 } 1076 }
1065 this.loading = false; 1077 this.loading = false;
1066 }); 1078 });
1067 } 1079 }
1068 }, 1080 },
1069 clear() { 1081 clear() {
1070 this.$refs.form.reset(); 1082 this.$refs.form.reset();
1071 this.imageUrl = ""; 1083 this.imageUrl = "";
1072 }, 1084 },
1073 save() { 1085 save() {
1074 this.loading = true; 1086 this.loading = true;
1075 for (let i = 0; i < this.userRole.length; i++) { 1087 for (let i = 0; i < this.userRole.length; i++) {
1076 if (this.userRole[i].name === this.editedItem.role) { 1088 if (this.userRole[i].name === this.editedItem.role) {
1077 this.editedItem.role = this.userRole[i].role; 1089 this.editedItem.role = this.userRole[i].role;
1078 } 1090 }
1079 } 1091 }
1080 this.editedItem.userId = this.editedItem._id; 1092 this.editedItem.userId = this.editedItem._id;
1081 if (this.imageUrl) { 1093 if (this.imageUrl) {
1082 var str = this.imageUrl; 1094 var str = this.imageUrl;
1083 const [baseUrl, imageUrl] = str.split(/,/); 1095 const [baseUrl, imageUrl] = str.split(/,/);
1084 this.editedItem.upload = imageUrl; 1096 this.editedItem.upload = imageUrl;
1085 } 1097 }
1086 http() 1098 http()
1087 .put("/updateUser", this.editedItem) 1099 .put("/updateUser", this.editedItem)
1088 .then(response => { 1100 .then(response => {
1089 if ((this.snackbar = true)) { 1101 if ((this.snackbar = true)) {
1090 this.text = "Successfully Edit Existing User"; 1102 this.text = "Successfully Edit Existing User";
1091 } 1103 }
1092 this.loading = false; 1104 this.loading = false;
1093 this.getUsersList(); 1105 this.getUsersList();
1094 this.close(); 1106 this.close();
1095 }) 1107 })
1096 .catch(error => { 1108 .catch(error => {
1097 console.log(error); 1109 console.log(error);
1098 this.loading = false; 1110 this.loading = false;
1099 }); 1111 });
1100 }, 1112 },
1101 getRole() { 1113 getRole() {
1102 this.showLoader = true; 1114 this.showLoader = true;
1103 var token = this.$store.state.token; 1115 var token = this.$store.state.token;
1104 http() 1116 http()
1105 .get("/getRolesList", { 1117 .get("/getRolesList", {
1106 headers: { Authorization: "Bearer " + token } 1118 headers: { Authorization: "Bearer " + token }
1107 }) 1119 })
1108 .then(response => { 1120 .then(response => {
1109 this.userRole = response.data.data; 1121 this.userRole = response.data.data;
1110 this.showLoader = false; 1122 this.showLoader = false;
1111 // console.log("UserList=====>",this.desserts) 1123 // console.log("UserList=====>",this.desserts)
1112 }) 1124 })
1113 .catch(error => { 1125 .catch(error => {
1114 this.showLoader = false; 1126 this.showLoader = false;
1115 if (error.response.status === 401) { 1127 if (error.response.status === 401) {
1116 this.$router.replace({ path: "/" }); 1128 this.$router.replace({ path: "/" });
1117 this.$store.dispatch("setToken", null); 1129 this.$store.dispatch("setToken", null);
1118 this.$store.dispatch("Id", null); 1130 this.$store.dispatch("Id", null);
1119 } 1131 }
1120 }); 1132 });
1121 } 1133 }
1122 }, 1134 },
1123 mounted() { 1135 mounted() {
1124 this.getUsersList(); 1136 this.getUsersList();
1125 this.getRole(); 1137 this.getRole();
1126 }, 1138 },
1127 created() { 1139 created() {
1128 this.$root.$on("app:search", search => { 1140 this.$root.$on("app:search", search => {
1129 this.search = search; 1141 this.search = search;
1130 }); 1142 });
1131 }, 1143 },
1132 beforeDestroy() { 1144 beforeDestroy() {
1133 // dont forget to remove the listener 1145 // dont forget to remove the listener
1134 this.$root.$off("app:search"); 1146 this.$root.$off("app:search");
1135 } 1147 }
1136 }; 1148 };
1137 </script> 1149 </script>
1138 <style scoped> 1150 <style scoped>
1139 .active { 1151 .active {
1140 background-color: gray; 1152 background-color: gray;
1141 color: white !important; 1153 color: white !important;
1142 } 1154 }
1143 .activebtn { 1155 .activebtn {
1144 color: black !important; 1156 color: black !important;
1145 } 1157 }
1146 </style> 1158 </style>
src/pages/socialMedia/socialMedia.vue
Diff comments   View file @495e403
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 Social Media</v-tab> 10 >Existing Social Media</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 Social Media</v-tab> 18 >Add New Social Media</v-tab>
19 19
20 <!-- ****** EDITS Social Media DETAILS ****** --> 20 <!-- ****** EDITS Social Media 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="600px"> 31 <v-dialog v-model="dialog" max-width="600px">
32 <v-flex xs12 sm12> 32 <v-flex xs12 sm12>
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 Social Media</h3> 36 <h3>Edit Social Media</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-form ref="form"> 41 <v-form ref="form">
42 <v-container fluid> 42 <v-container fluid>
43 <v-flex xs12 sm12> 43 <v-flex xs12 sm12>
44 <v-layout> 44 <v-layout>
45 <v-flex xs4 class="pt-4 subheading"> 45 <v-flex xs4 class="pt-4 subheading">
46 <label class="right">Title:</label> 46 <label class="right">Title:</label>
47 </v-flex> 47 </v-flex>
48 <v-flex xs8 sm5 class="ml-3"> 48 <v-flex xs8 sm5 class="ml-3">
49 <v-select 49 <v-select
50 v-model="editedItem.type" 50 v-model="editedItem.type"
51 placeholder="fill your Title" 51 placeholder="fill your Title"
52 :items="socialLink" 52 :items="socialLink"
53 item-text="name" 53 item-text="name"
54 item-value="value" 54 item-value="value"
55 name="name" 55 name="name"
56 type="text" 56 type="text"
57 ></v-select> 57 ></v-select>
58 </v-flex> 58 </v-flex>
59 </v-layout> 59 </v-layout>
60 </v-flex> 60 </v-flex>
61 <v-flex xs12 sm12> 61 <v-flex xs12 sm12>
62 <v-layout> 62 <v-layout>
63 <v-flex xs4 class="pt-4 subheading"> 63 <v-flex xs4 class="pt-4 subheading">
64 <label class="right">Description:</label> 64 <label class="right">Description:</label>
65 </v-flex> 65 </v-flex>
66 <v-flex xs8 sm5 class="ml-3"> 66 <v-flex xs8 sm5 class="ml-3">
67 <v-text-field 67 <v-text-field
68 placeholder="fill your Description" 68 placeholder="fill your Description"
69 v-model="editedItem.linkUrl" 69 v-model="editedItem.linkUrl"
70 type="text" 70 type="text"
71 ></v-text-field> 71 ></v-text-field>
72 </v-flex> 72 </v-flex>
73 </v-layout> 73 </v-layout>
74 </v-flex> 74 </v-flex>
75 <v-layout> 75 <v-layout>
76 <v-flex xs12 sm10 offset-sm1> 76 <v-flex xs12 sm10 offset-sm1>
77 <v-card-actions> 77 <v-card-actions>
78 <v-btn round dark @click.native="close">Cancel</v-btn> 78 <v-btn round dark @click.native="close">Cancel</v-btn>
79 <v-spacer></v-spacer> 79 <v-spacer></v-spacer>
80 <v-btn round dark @click="save">Save</v-btn> 80 <v-btn round dark @click="save">Save</v-btn>
81 </v-card-actions> 81 </v-card-actions>
82 </v-flex> 82 </v-flex>
83 </v-layout> 83 </v-layout>
84 </v-container> 84 </v-container>
85 </v-form> 85 </v-form>
86 </v-card> 86 </v-card>
87 </v-flex> 87 </v-flex>
88 </v-dialog> 88 </v-dialog>
89 89
90 <!-- ****** PROFILE VIEW REMINDER DEATILS ****** --> 90 <!-- ****** PROFILE VIEW REMINDER DEATILS ****** -->
91 91
92 <v-dialog v-model="dialog1" max-width="600px"> 92 <v-dialog v-model="dialog1" max-width="600px">
93 <v-card> 93 <v-card>
94 <v-toolbar color="grey lighten-2" flat> 94 <v-toolbar color="grey lighten-2" flat>
95 <v-spacer></v-spacer> 95 <v-spacer></v-spacer>
96 <v-toolbar-title> 96 <v-toolbar-title>
97 <h3>Social Media</h3> 97 <h3>Social Media</h3>
98 </v-toolbar-title> 98 </v-toolbar-title>
99 <v-spacer></v-spacer> 99 <v-spacer></v-spacer>
100 <v-icon @click="close1">close</v-icon> 100 <v-icon @click="close1">close</v-icon>
101 </v-toolbar> 101 </v-toolbar>
102 <v-card-text> 102 <v-card-text>
103 <v-container grid-list-md> 103 <v-container grid-list-md>
104 <v-layout> 104 <v-layout>
105 <v-flex xs4 sm6> 105 <v-flex xs4 sm6>
106 <h5 class="right my-1"> 106 <h5 class="right my-1">
107 <b>Title:</b> 107 <b>Title:</b>
108 </h5> 108 </h5>
109 </v-flex> 109 </v-flex>
110 <v-flex sm6 xs8> 110 <v-flex sm6 xs8>
111 <h5 class="my-1">{{ editedItem.type }}</h5> 111 <h5 class="my-1">{{ editedItem.type }}</h5>
112 </v-flex> 112 </v-flex>
113 </v-layout> 113 </v-layout>
114 <v-layout> 114 <v-layout>
115 <v-flex xs5 sm6> 115 <v-flex xs5 sm6>
116 <h5 class="right my-1"> 116 <h5 class="right my-1">
117 <b>Description:</b> 117 <b>Description:</b>
118 </h5> 118 </h5>
119 </v-flex> 119 </v-flex>
120 <v-flex sm6 xs8> 120 <v-flex sm6 xs8>
121 <h5 class="my-1 linkCover">{{ editedItem.linkUrl }}</h5> 121 <h5 class="my-1 linkCover">{{ editedItem.linkUrl }}</h5>
122 </v-flex> 122 </v-flex>
123 </v-layout> 123 </v-layout>
124 </v-container> 124 </v-container>
125 </v-card-text> 125 </v-card-text>
126 </v-card> 126 </v-card>
127 </v-dialog> 127 </v-dialog>
128 <v-snackbar 128 <v-snackbar
129 :timeout="timeout" 129 :timeout="timeout"
130 :top="y === 'top'" 130 :top="y === 'top'"
131 :right="x === 'right'" 131 :right="x === 'right'"
132 :vertical="mode === 'vertical'" 132 :vertical="mode === 'vertical'"
133 v-model="snackbar" 133 v-model="snackbar"
134 color="success" 134 color="success"
135 >{{ text }}</v-snackbar> 135 >{{ text }}</v-snackbar>
136 136
137 <!-- ****** EXISTING-USERS REMINDER TABLE ****** --> 137 <!-- ****** EXISTING-USERS REMINDER TABLE ****** -->
138 138
139 <v-data-table 139 <v-data-table
140 :headers="headers" 140 :headers="headers"
141 :items="desserts" 141 :items="desserts"
142 :pagination.sync="pagination" 142 :pagination.sync="pagination"
143 :search="search" 143 :search="search"
144 > 144 >
145 <template slot="items" slot-scope="props"> 145 <template slot="items" slot-scope="props">
146 <td id="tabeleData" class="text-xs-center">{{ props.index + 1}}</td> 146 <td id="tabeleData" class="text-xs-center">{{ props.index + 1}}</td>
147 <td id="tabeleData" class="text-xs-center">{{ props.item.type}}</td> 147 <td id="tabeleData" class="text-xs-center">{{ props.item.type}}</td>
148 <td id="tabeleData" class="text-xs-center linkCover">{{ props.item.linkUrl}}</td> 148 <td id="tabeleData" class="text-xs-center linkCover">{{ props.item.linkUrl}}</td>
149 149
150 <td id="tabeleData" class="text-xs-center"> 150 <td id="tabeleData" class="text-xs-center">
151 <span> 151 <span>
152 <img 152 <v-tooltip top>
153 style="cursor:pointer; width:25px; height:18px; " 153 <img
154 class="mr-5" 154 slot="activator"
155 @click="profile(props.item)" 155 style="cursor:pointer; width:25px; height:18px; "
156 src="/static/icon/eye1.png" 156 class="mr5"
157 /> 157 @click="profile(props.item)"
158 <img 158 src="/static/icon/eye1.png"
159 style="cursor:pointer; width:20px; height:18px; " 159 />
160 class="mr-5" 160 <span>View</span>
161 @click="editItem(props.item)" 161 </v-tooltip>
162 src="/static/icon/edit1.png" 162 <v-tooltip top>
163 /> 163 <img
164 <img 164 slot="activator"
165 style="cursor:pointer;width:20px; height:20px; " 165 style="cursor:pointer; width:20px; height:18px; "
166 class="mr-5" 166 class="mr5"
167 @click="deleteItem(props.item)" 167 @click="editItem(props.item)"
168 src="/static/icon/delete1.png" 168 src="/static/icon/edit1.png"
169 /> 169 />
170 <span>Edit</span>
171 </v-tooltip>
172 <v-tooltip top>
173 <img
174 slot="activator"
175 style="cursor:pointer; width:20px; height:20px; "
176 class="mr5"
177 @click="deleteItem(props.item)"
178 src="/static/icon/delete1.png"
179 />
180 <span>Delete</span>
181 </v-tooltip>
170 </span> 182 </span>
171 </td> 183 </td>
172 </template> 184 </template>
173 <v-alert 185 <v-alert
174 slot="no-results" 186 slot="no-results"
175 :value="true" 187 :value="true"
176 color="error" 188 color="error"
177 icon="warning" 189 icon="warning"
178 >Your search for "{{ search }}" found no results.</v-alert> 190 >Your search for "{{ search }}" found no results.</v-alert>
179 </v-data-table> 191 </v-data-table>
180 </v-tab-item> 192 </v-tab-item>
181 193
182 <!-- ****** ADD MULTIPLE REMINDER ****** --> 194 <!-- ****** ADD MULTIPLE REMINDER ****** -->
183 195
184 <v-tab-item> 196 <v-tab-item>
185 <v-container> 197 <v-container>
186 <v-snackbar 198 <v-snackbar
187 :timeout="timeout" 199 :timeout="timeout"
188 :top="y === 'top'" 200 :top="y === 'top'"
189 :right="x === 'right'" 201 :right="x === 'right'"
190 :vertical="mode === 'vertical'" 202 :vertical="mode === 'vertical'"
191 v-model="snackbar" 203 v-model="snackbar"
192 color="success" 204 color="success"
193 >{{ text }}</v-snackbar> 205 >{{ text }}</v-snackbar>
194 <v-flex xs12 sm8 class="top" offset-sm2> 206 <v-flex xs12 sm8 class="top" offset-sm2>
195 <v-card flat> 207 <v-card flat>
196 <v-form ref="form" v-model="valid" lazy-validation> 208 <v-form ref="form" v-model="valid" lazy-validation>
197 <v-container fluid> 209 <v-container fluid>
198 <v-flex xs12> 210 <v-flex xs12>
199 <v-layout> 211 <v-layout>
200 <v-flex xs4 class="pt-4 subheading"> 212 <v-flex xs4 class="pt-4 subheading">
201 <label class="right">Type:</label> 213 <label class="right">Type:</label>
202 </v-flex> 214 </v-flex>
203 <v-flex xs8 sm4 class="ml-3"> 215 <v-flex xs8 sm4 class="ml-3">
204 <v-select 216 <v-select
205 v-model="socialMedia.type" 217 v-model="socialMedia.type"
206 :items="socialLink" 218 :items="socialLink"
207 item-text="name" 219 item-text="name"
208 item-value="value" 220 item-value="value"
209 label="Selct Type" 221 label="Selct Type"
210 type="text" 222 type="text"
211 :rules="socialRules" 223 :rules="socialRules"
212 required 224 required
213 ></v-select> 225 ></v-select>
214 </v-flex> 226 </v-flex>
215 </v-layout> 227 </v-layout>
216 </v-flex> 228 </v-flex>
217 <v-flex xs12> 229 <v-flex xs12>
218 <v-layout> 230 <v-layout>
219 <v-flex xs4 class="pt-4 subheading"> 231 <v-flex xs4 class="pt-4 subheading">
220 <label class="right">Link Url:</label> 232 <label class="right">Link Url:</label>
221 </v-flex> 233 </v-flex>
222 <v-flex xs8 sm4 class="ml-3"> 234 <v-flex xs8 sm4 class="ml-3">
223 <v-text-field 235 <v-text-field
224 placeholder="fill your link url" 236 placeholder="fill your link url"
225 :rules="linkUrlnRules" 237 :rules="linkUrlnRules"
226 v-model="socialMedia.linkUrl" 238 v-model="socialMedia.linkUrl"
227 type="text" 239 type="text"
228 required 240 required
229 ></v-text-field> 241 ></v-text-field>
230 </v-flex> 242 </v-flex>
231 </v-layout> 243 </v-layout>
232 </v-flex> 244 </v-flex>
233 <v-layout> 245 <v-layout>
234 <v-flex xs12 sm12> 246 <v-flex xs12 sm12>
235 <v-layout> 247 <v-layout>
236 <v-flex xs5> 248 <v-flex xs5>
237 <v-btn @click="clear" round class="right" dark>clear</v-btn> 249 <v-btn @click="clear" round class="right" dark>clear</v-btn>
238 </v-flex> 250 </v-flex>
239 <v-flex xs8 sm4> 251 <v-flex xs8 sm4>
240 <v-btn @click="submit" round dark :loading="loading" class="right">Add</v-btn> 252 <v-btn @click="submit" round dark :loading="loading" class="right">Add</v-btn>
241 </v-flex> 253 </v-flex>
242 </v-layout> 254 </v-layout>
243 </v-flex> 255 </v-flex>
244 </v-layout> 256 </v-layout>
245 </v-container> 257 </v-container>
246 </v-form> 258 </v-form>
247 </v-card> 259 </v-card>
248 </v-flex> 260 </v-flex>
249 </v-container> 261 </v-container>
250 </v-tab-item> 262 </v-tab-item>
251 </v-tabs> 263 </v-tabs>
252 <div class="loader" v-if="showLoader"> 264 <div class="loader" v-if="showLoader">
253 <v-progress-circular indeterminate color="white"></v-progress-circular> 265 <v-progress-circular indeterminate color="white"></v-progress-circular>
254 </div> 266 </div>
255 </v-app> 267 </v-app>
256 </template> 268 </template>
257 269
258 <script> 270 <script>
259 import http from "@/Services/http.js"; 271 import http from "@/Services/http.js";
260 import Util from "@/util"; 272 import Util from "@/util";
261 273
262 export default { 274 export default {
263 data: () => ({ 275 data: () => ({
264 snackbar: false, 276 snackbar: false,
265 y: "top", 277 y: "top",
266 x: "right", 278 x: "right",
267 mode: "", 279 mode: "",
268 timeout: 3000, 280 timeout: 3000,
269 text: "", 281 text: "",
270 loading: false, 282 loading: false,
271 date: null, 283 date: null,
272 search: "", 284 search: "",
273 showLoader: false, 285 showLoader: false,
274 dialog: false, 286 dialog: false,
275 dialog1: false, 287 dialog1: false,
276 valid: true, 288 valid: true,
277 isActive: true, 289 isActive: true,
278 newActive: false, 290 newActive: false,
279 pagination: { 291 pagination: {
280 rowsPerPage: 15 292 rowsPerPage: 15
281 }, 293 },
282 imageData: {}, 294 imageData: {},
283 imageName: "", 295 imageName: "",
284 imageUrl: "", 296 imageUrl: "",
285 imageFile: "", 297 imageFile: "",
286 socialRules: [v => !!v || " Social media type is required"], 298 socialRules: [v => !!v || " Social media type is required"],
287 linkUrlnRules: [v => !!v || " Link Url is required"], 299 linkUrlnRules: [v => !!v || " Link Url is required"],
288 headers: [ 300 headers: [
289 { 301 {
290 text: "No", 302 text: "No",
291 align: "center", 303 align: "center",
292 sortable: false, 304 sortable: false,
293 value: "No" 305 value: "No"
294 }, 306 },
295 { text: "Title", value: "type", sortable: false, align: "center" }, 307 { text: "Title", value: "type", sortable: false, align: "center" },
296 { 308 {
297 text: "Description", 309 text: "Description",
298 value: "linkUrl", 310 value: "linkUrl",
299 sortable: false, 311 sortable: false,
300 align: "center" 312 align: "center"
301 }, 313 },
302 { text: "Action", value: "", sortable: false, align: "center" } 314 { text: "Action", value: "", sortable: false, align: "center" }
303 ], 315 ],
304 desserts: [], 316 desserts: [],
305 editedIndex: -1, 317 editedIndex: -1,
306 socialMedia: {}, 318 socialMedia: {},
307 editedItem: {}, 319 editedItem: {},
308 socialLink: [ 320 socialLink: [
309 { 321 {
310 name: "Face Book", 322 name: "Face Book",
311 value: "FACEBOOK" 323 value: "FACEBOOK"
312 }, 324 },
313 { 325 {
314 name: "You Tube", 326 name: "You Tube",
315 value: "YOUTUBE" 327 value: "YOUTUBE"
316 } 328 }
317 // { 329 // {
318 // name: "Instagram", 330 // name: "Instagram",
319 // value: "INSTAGRAM" 331 // value: "INSTAGRAM"
320 // }, 332 // },
321 // { 333 // {
322 // name: "Linkedin", 334 // name: "Linkedin",
323 // value: "LINKEDIN" 335 // value: "LINKEDIN"
324 // } 336 // }
325 ], 337 ],
326 userName: "" 338 userName: ""
327 }), 339 }),
328 methods: { 340 methods: {
329 // pickFile() { 341 // pickFile() {
330 // this.$refs.image.click(); 342 // this.$refs.image.click();
331 // }, 343 // },
332 344
333 // onFilePicked(e) { 345 // onFilePicked(e) {
334 // // console.log(e) 346 // // console.log(e)
335 // const files = e.target.files; 347 // const files = e.target.files;
336 // this.imageData.upload = e.target.files[0]; 348 // this.imageData.upload = e.target.files[0];
337 // if (files[0] !== undefined) { 349 // if (files[0] !== undefined) {
338 // this.imageName = files[0].name; 350 // this.imageName = files[0].name;
339 // if (this.imageName.lastIndexOf(".") <= 0) { 351 // if (this.imageName.lastIndexOf(".") <= 0) {
340 // return; 352 // return;
341 // } 353 // }
342 // const fr = new FileReader(); 354 // const fr = new FileReader();
343 // fr.readAsDataURL(files[0]); 355 // fr.readAsDataURL(files[0]);
344 // fr.addEventListener("load", () => { 356 // fr.addEventListener("load", () => {
345 // this.imageUrl = fr.result; 357 // this.imageUrl = fr.result;
346 // this.imageFile = files[0]; // this is an image file that can be sent to server... 358 // this.imageFile = files[0]; // this is an image file that can be sent to server...
347 // this.imageData.imageUrl = URL.createObjectURL(this.imageFile); 359 // this.imageData.imageUrl = URL.createObjectURL(this.imageFile);
348 // console.log("upload=======>", this.imageData.imageUrl); 360 // console.log("upload=======>", this.imageData.imageUrl);
349 // console.log("imageFile", this.imageFile); 361 // console.log("imageFile", this.imageFile);
350 // }); 362 // });
351 // } else { 363 // } else {
352 // this.imageName = ""; 364 // this.imageName = "";
353 // this.imageFile = ""; 365 // this.imageFile = "";
354 // this.imageUrl = ""; 366 // this.imageUrl = "";
355 // } 367 // }
356 // }, 368 // },
357 getSocialMedia() { 369 getSocialMedia() {
358 this.showLoader = true; 370 this.showLoader = true;
359 var token = this.$store.state.token; 371 var token = this.$store.state.token;
360 http() 372 http()
361 .get("/getSocialList", { 373 .get("/getSocialList", {
362 headers: { Authorization: "Bearer " + token } 374 headers: { Authorization: "Bearer " + token }
363 }) 375 })
364 .then(response => { 376 .then(response => {
365 this.desserts = response.data.data; 377 this.desserts = response.data.data;
366 this.showLoader = false; 378 this.showLoader = false;
367 }) 379 })
368 .catch(error => { 380 .catch(error => {
369 this.showLoader = false; 381 this.showLoader = false;
370 if (error.response.status === 401) { 382 if (error.response.status === 401) {
371 this.$router.replace({ path: "/" }); 383 this.$router.replace({ path: "/" });
372 this.$store.dispatch("setToken", null); 384 this.$store.dispatch("setToken", null);
373 this.$store.dispatch("Id", null); 385 this.$store.dispatch("Id", null);
374 } 386 }
375 }); 387 });
376 }, 388 },
377 editItem(item) { 389 editItem(item) {
378 this.editedIndex = this.desserts.indexOf(item); 390 this.editedIndex = this.desserts.indexOf(item);
379 this.editedItem = Object.assign({}, item); 391 this.editedItem = Object.assign({}, item);
380 this.dialog = true; 392 this.dialog = true;
381 }, 393 },
382 profile(item) { 394 profile(item) {
383 this.editedIndex = this.desserts.indexOf(item); 395 this.editedIndex = this.desserts.indexOf(item);
384 this.editedItem = Object.assign({}, item); 396 this.editedItem = Object.assign({}, item);
385 this.dialog1 = true; 397 this.dialog1 = true;
386 }, 398 },
387 399
388 deleteItem(item) { 400 deleteItem(item) {
389 let deleteSocialMedia = { 401 let deleteSocialMedia = {
390 socialId: item._id 402 socialId: item._id
391 }; 403 };
392 http() 404 http()
393 .delete( 405 .delete(
394 "/deleteSocial", 406 "/deleteSocial",
395 confirm("Are you sure you want to delete this?") && { 407 confirm("Are you sure you want to delete this?") && {
396 params: deleteSocialMedia 408 params: deleteSocialMedia
397 } 409 }
398 ) 410 )
399 .then(response => { 411 .then(response => {
400 this.text = response.data.message; 412 this.text = response.data.message;
401 this.getSocialMedia(); 413 this.getSocialMedia();
402 }) 414 })
403 .catch(error => { 415 .catch(error => {
404 console.log(error); 416 console.log(error);
405 }); 417 });
406 }, 418 },
407 activeTab(type) { 419 activeTab(type) {
408 switch (type) { 420 switch (type) {
409 case "existing": 421 case "existing":
410 this.newActive = false; 422 this.newActive = false;
411 this.isActive = true; 423 this.isActive = true;
412 break; 424 break;
413 425
414 default: 426 default:
415 this.newActive = true; 427 this.newActive = true;
416 this.isActive = false; 428 this.isActive = false;
417 break; 429 break;
418 } 430 }
419 }, 431 },
420 close() { 432 close() {
421 this.dialog = false; 433 this.dialog = false;
422 setTimeout(() => { 434 setTimeout(() => {
423 this.editedItem = Object.assign({}, this.defaultItem); 435 this.editedItem = Object.assign({}, this.defaultItem);
424 this.editedIndex = -1; 436 this.editedIndex = -1;
425 }, 300); 437 }, 300);
426 }, 438 },
427 close1() { 439 close1() {
428 this.dialog1 = false; 440 this.dialog1 = false;
429 }, 441 },
430 submit() { 442 submit() {
431 if (this.$refs.form.validate()) { 443 if (this.$refs.form.validate()) {
432 this.loading = true; 444 this.loading = true;
433 http() 445 http()
434 .post("/addSocialLinks", this.socialMedia) 446 .post("/addSocialLinks", this.socialMedia)
435 .then(response => { 447 .then(response => {
436 this.snackbar = true; 448 this.snackbar = true;
437 this.text = response.data.message; 449 this.text = response.data.message;
438 this.getSocialMedia(); 450 this.getSocialMedia();
439 this.clear(); 451 this.clear();
440 this.loading = false; 452 this.loading = false;
441 }) 453 })
442 .catch(error => { 454 .catch(error => {
443 this.snackbar = true; 455 this.snackbar = true;
444 this.text = error.response.data.message; 456 this.text = error.response.data.message;
445 this.loading = false; 457 this.loading = false;
446 }); 458 });
447 } 459 }
448 }, 460 },
449 clear() { 461 clear() {
450 this.$refs.form.reset(); 462 this.$refs.form.reset();
451 }, 463 },
452 save() { 464 save() {
453 (this.editedItem.socialId = this.editedItem._id), 465 (this.editedItem.socialId = this.editedItem._id),
454 http() 466 http()
455 .put("/updateSocial", this.editedItem) 467 .put("/updateSocial", this.editedItem)
456 .then(response => { 468 .then(response => {
457 this.text = "Successfully Edit Notification"; 469 this.text = "Successfully Edit Notification";
458 this.getSocialMedia(); 470 this.getSocialMedia();
459 this.close(); 471 this.close();
460 }) 472 })
461 .catch(error => { 473 .catch(error => {
462 console.log(error); 474 console.log(error);
463 }); 475 });
464 } 476 }
465 }, 477 },
466 mounted() { 478 mounted() {
467 this.getSocialMedia(); 479 this.getSocialMedia();
468 }, 480 },
469 created() { 481 created() {
470 this.$root.$on("app:search", search => { 482 this.$root.$on("app:search", search => {
471 this.search = search; 483 this.search = search;
472 }); 484 });
473 }, 485 },
474 beforeDestroy() { 486 beforeDestroy() {
475 // dont forget to remove the listener 487 // dont forget to remove the listener
476 this.$root.$off("app:search"); 488 this.$root.$off("app:search");
477 } 489 }
478 }; 490 };
479 </script> 491 </script>
480 <style scoped> 492 <style scoped>
481 #tabeleData { 493 #tabeleData {
482 border: 1px solid #dddddd; 494 border: 1px solid #dddddd;
483 text-align: left; 495 text-align: left;
484 padding: 8px 0px; 496 padding: 8px 0px;
485 max-width: 200px !important; 497 max-width: 200px !important;
486 } 498 }
487 .active { 499 .active {
488 background-color: gray; 500 background-color: gray;
489 color: white !important; 501 color: white !important;
490 } 502 }
491 .activebtn { 503 .activebtn {
492 color: black !important; 504 color: black !important;
493 } 505 }
494 </style> 506 </style>
src/router/paths.js
Diff comments   View file @495e403
1 export default [{ 1 export default [{
2 path: '*', 2 path: '*',
3 meta: { 3 meta: {
4 public: true, 4 public: true,
5 }, 5 },
6 redirect: { 6 redirect: {
7 path: '/404' 7 path: '/404'
8 } 8 }
9 }, 9 },
10 { 10 {
11 path: '/404', 11 path: '/404',
12 meta: { 12 meta: {
13 public: true, 13 public: true,
14 }, 14 },
15 name: 'NotFound', 15 name: 'NotFound',
16 component: () => 16 component: () =>
17 import ( 17 import (
18 /* webpackChunkName: "routes" */ 18 /* webpackChunkName: "routes" */
19 /* webpackMode: "lazy-once" */ 19 /* webpackMode: "lazy-once" */
20 `@/pages/NotFound/NotFound.vue` 20 `@/pages/NotFound/NotFound.vue`
21 ) 21 )
22 }, 22 },
23 { 23 {
24 path: '/500', 24 path: '/500',
25 meta: { 25 meta: {
26 public: true, 26 public: true,
27 }, 27 },
28 name: 'ServerError', 28 name: 'ServerError',
29 component: () => 29 component: () =>
30 import ( 30 import (
31 /* webpackChunkName: "routes" */ 31 /* webpackChunkName: "routes" */
32 /* webpackMode: "lazy-once" */ 32 /* webpackMode: "lazy-once" */
33 `@/pages/NotFound/Error.vue` 33 `@/pages/NotFound/Error.vue`
34 ) 34 )
35 }, 35 },
36 { 36 {
37 path: '/changepassword', 37 path: '/changepassword',
38 meta: {}, 38 meta: {},
39 name: 'changepassword', 39 name: 'changepassword',
40 props: (route) => ({ type: route.query.type }), 40 props: (route) => ({ type: route.query.type }),
41 component: () => 41 component: () =>
42 import ( 42 import (
43 /* webpackChunkName: "routes" */ 43 /* webpackChunkName: "routes" */
44 /* webpackMode: "lazy-once" */ 44 /* webpackMode: "lazy-once" */
45 `@/pages/Authentication/changepassword.vue` 45 `@/pages/Authentication/changepassword.vue`
46 ) 46 )
47 }, 47 },
48 { 48 {
49 path: '/teachers', 49 path: '/teachers',
50 meta: { breadcrumb: false }, 50 meta: { breadcrumb: false },
51 name: 'teachers', 51 name: 'teachers',
52 component: () => 52 component: () =>
53 import ( 53 import (
54 /* webpackChunkName: "routes" */ 54 /* webpackChunkName: "routes" */
55 /* webpackMode: "lazy-once" */ 55 /* webpackMode: "lazy-once" */
56 `@/pages/Teachers/teachers.vue` 56 `@/pages/Teachers/teachers.vue`
57 ) 57 )
58 }, 58 },
59 { 59 {
60 path: '/', 60 path: '/',
61 meta: { 61 meta: {
62 public: true, 62 public: true,
63 }, 63 },
64 name: 'Login', 64 name: 'Login',
65 component: () => 65 component: () =>
66 import ( 66 import (
67 /* webpackChunkName: "routes" */ 67 /* webpackChunkName: "routes" */
68 /* webpackMode: "lazy-once" */ 68 /* webpackMode: "lazy-once" */
69 `@/pages/Authentication/Login.vue` 69 `@/pages/Authentication/Login.vue`
70 ) 70 )
71 }, 71 },
72 { 72 {
73 path: '/forgetpassword', 73 path: '/forgetpassword',
74 meta: { 74 meta: {
75 public: true, 75 public: true,
76 }, 76 },
77 name: 'forgetpassword', 77 name: 'forgetpassword',
78 component: () => 78 component: () =>
79 import ( 79 import (
80 /* webpackChunkName: "routes" */ 80 /* webpackChunkName: "routes" */
81 /* webpackMode: "lazy-once" */ 81 /* webpackMode: "lazy-once" */
82 `@/pages/Authentication/forgetpassword.vue` 82 `@/pages/Authentication/forgetpassword.vue`
83 ) 83 )
84 }, 84 },
85 { 85 {
86 path: '/students', 86 path: '/students',
87 meta: {}, 87 meta: {},
88 name: 'Students', 88 name: 'Students',
89 props: (route) => ({ type: route.query.type }), 89 props: (route) => ({ type: route.query.type }),
90 component: () => 90 component: () =>
91 import ( 91 import (
92 /* webpackChunkName: "routes" */ 92 /* webpackChunkName: "routes" */
93 /* webpackMode: "lazy-once" */ 93 /* webpackMode: "lazy-once" */
94 `@/pages/Students/students.vue` 94 `@/pages/Students/students.vue`
95 ) 95 )
96 }, 96 },
97 { 97 {
98 path: '/addclass', 98 path: '/addclass',
99 meta: {}, 99 meta: {},
100 name: 'addclass', 100 name: 'addclass',
101 props: (route) => ({ type: route.query.type }), 101 props: (route) => ({ type: route.query.type }),
102 component: () => 102 component: () =>
103 import ( 103 import (
104 /* webpackChunkName: "routes" */ 104 /* webpackChunkName: "routes" */
105 /* webpackMode: "lazy-once" */ 105 /* webpackMode: "lazy-once" */
106 `@/pages/Class/addclass.vue` 106 `@/pages/Class/addclass.vue`
107 ) 107 )
108 }, 108 },
109 { 109 {
110 path: '/section', 110 path: '/section',
111 meta: {}, 111 meta: {},
112 name: 'section', 112 name: 'section',
113 props: (route) => ({ type: route.query.type }), 113 props: (route) => ({ type: route.query.type }),
114 component: () => 114 component: () =>
115 import ( 115 import (
116 /* webpackChunkName: "routes" */ 116 /* webpackChunkName: "routes" */
117 /* webpackMode: "lazy-once" */ 117 /* webpackMode: "lazy-once" */
118 `@/pages/Section/section.vue` 118 `@/pages/Section/section.vue`
119 ) 119 )
120 }, 120 },
121 { 121 {
122 path: '/noticeBoard', 122 path: '/noticeBoard',
123 meta: {}, 123 meta: {},
124 name: 'NoticeBoard', 124 name: 'NoticeBoard',
125 props: (route) => ({ type: route.query.type }), 125 props: (route) => ({ type: route.query.type }),
126 component: () => 126 component: () =>
127 import ( 127 import (
128 /* webpackChunkName: "routes" */ 128 /* webpackChunkName: "routes" */
129 /* webpackMode: "lazy-once" */ 129 /* webpackMode: "lazy-once" */
130 `@/pages/NoticeBoard/noticeBoard.vue` 130 `@/pages/NoticeBoard/noticeBoard.vue`
131 ) 131 )
132 }, 132 },
133 { 133 {
134 path: '/news', 134 path: '/news',
135 meta: {}, 135 meta: {},
136 name: 'news', 136 name: 'news',
137 props: (route) => ({ type: route.query.type }), 137 props: (route) => ({ type: route.query.type }),
138 component: () => 138 component: () =>
139 import ( 139 import (
140 /* webpackChunkName: "routes" */ 140 /* webpackChunkName: "routes" */
141 /* webpackMode: "lazy-once" */ 141 /* webpackMode: "lazy-once" */
142 `@/pages/News/news.vue` 142 `@/pages/News/news.vue`
143 ) 143 )
144 }, 144 },
145 // { 145 // {
146 // path: '/reminder', 146 // path: '/reminder',
147 // meta: { }, 147 // meta: { },
148 // name: 'reminder', 148 // name: 'reminder',
149 // props: (route) => ({ type: route.query.type }), 149 // props: (route) => ({ type: route.query.type }),
150 // component: () => import( 150 // component: () => import(
151 // /* webpackChunkName: "routes" */ 151 // /* webpackChunkName: "routes" */
152 // /* webpackMode: "lazy-once" */ 152 // /* webpackMode: "lazy-once" */
153 // `@/pages/Reminder/reminder.vue` 153 // `@/pages/Reminder/reminder.vue`
154 // ) 154 // )
155 // }, 155 // },
156 { 156 {
157 path: '/timeTable', 157 path: '/timeTable',
158 meta: {}, 158 meta: {},
159 name: 'timeTable', 159 name: 'timeTable',
160 props: (route) => ({ type: route.query.type }), 160 props: (route) => ({ type: route.query.type }),
161 component: () => 161 component: () =>
162 import ( 162 import (
163 /* webpackChunkName: "routes" */ 163 /* webpackChunkName: "routes" */
164 /* webpackMode: "lazy-once" */ 164 /* webpackMode: "lazy-once" */
165 `@/pages/TimeTable/timeTable.vue` 165 `@/pages/TimeTable/timeTable.vue`
166 ) 166 )
167 }, 167 },
168 { 168 {
169 path: '/notification', 169 path: '/notification',
170 meta: {}, 170 meta: {},
171 name: 'notification', 171 name: 'notification',
172 props: (route) => ({ type: route.query.type }), 172 props: (route) => ({ type: route.query.type }),
173 component: () => 173 component: () =>
174 import ( 174 import (
175 /* webpackChunkName: "routes" */ 175 /* webpackChunkName: "routes" */
176 /* webpackMode: "lazy-once" */ 176 /* webpackMode: "lazy-once" */
177 `@/pages/Notification/notification.vue` 177 `@/pages/Notification/notification.vue`
178 ) 178 )
179 }, 179 },
180 { 180 {
181 path: '/parents', 181 path: '/parents',
182 meta: {}, 182 meta: {},
183 name: 'parents', 183 name: 'parents',
184 props: (route) => ({ type: route.query.type }), 184 props: (route) => ({ type: route.query.type }),
185 component: () => 185 component: () =>
186 import ( 186 import (
187 /* webpackChunkName: "routes" */ 187 /* webpackChunkName: "routes" */
188 /* webpackMode: "lazy-once" */ 188 /* webpackMode: "lazy-once" */
189 `@/pages/Parent/parents.vue` 189 `@/pages/Parent/parents.vue`
190 ) 190 )
191 }, 191 },
192 { 192 {
193 path: '/subject', 193 path: '/subject',
194 meta: {}, 194 meta: {},
195 name: 'subject', 195 name: 'subject',
196 props: (route) => ({ type: route.query.type }), 196 props: (route) => ({ type: route.query.type }),
197 component: () => 197 component: () =>
198 import ( 198 import (
199 /* webpackChunkName: "routes" */ 199 /* webpackChunkName: "routes" */
200 /* webpackMode: "lazy-once" */ 200 /* webpackMode: "lazy-once" */
201 `@/pages/Subjects/subjects.vue` 201 `@/pages/Subjects/subjects.vue`
202 ) 202 )
203 }, 203 },
204 { 204 {
205 path: '/dashboard', 205 path: '/dashboard',
206 meta: {}, 206 meta: {},
207 name: 'Dashboard', 207 name: 'Dashboard',
208 props: (route) => ({ type: route.query.type }), 208 props: (route) => ({ type: route.query.type }),
209 component: () => 209 component: () =>
210 import ( 210 import (
211 /* webpackChunkName: "routes" */ 211 /* webpackChunkName: "routes" */
212 /* webpackMode: "lazy-once" */ 212 /* webpackMode: "lazy-once" */
213 `@/pages/Dashboard/dashboard.vue` 213 `@/pages/Dashboard/dashboard.vue`
214 ) 214 )
215 }, 215 },
216 { 216 {
217 path: '/socialMedia', 217 path: '/socialMedia',
218 meta: {}, 218 meta: {},
219 name: 'SocialMedia', 219 name: 'SocialMedia',
220 props: (route) => ({ type: route.query.type }), 220 props: (route) => ({ type: route.query.type }),
221 component: () => 221 component: () =>
222 import ( 222 import (
223 /* webpackChunkName: "routes" */ 223 /* webpackChunkName: "routes" */
224 /* webpackMode: "lazy-once" */ 224 /* webpackMode: "lazy-once" */
225 `@/pages/socialMedia/socialMedia.vue` 225 `@/pages/socialMedia/socialMedia.vue`
226 ) 226 )
227 }, 227 },
228 { 228 {
229 path: '/gallery', 229 path: '/gallery',
230 meta: {}, 230 meta: {},
231 name: 'Gallery', 231 name: 'Gallery',
232 props: (route) => ({ type: route.query.type }), 232 props: (route) => ({ type: route.query.type }),
233 component: () => 233 component: () =>
234 import ( 234 import (
235 /* webpackChunkName: "routes" */ 235 /* webpackChunkName: "routes" */
236 /* webpackMode: "lazy-once" */ 236 /* webpackMode: "lazy-once" */
237 `@/pages/Gallery/gallery.vue` 237 `@/pages/Gallery/gallery.vue`
238 ) 238 )
239 }, 239 },
240 { 240 {
241 path: '/event', 241 path: '/event',
242 meta: {}, 242 meta: {},
243 name: 'Event', 243 name: 'Event',
244 props: (route) => ({ type: route.query.type }), 244 props: (route) => ({ type: route.query.type }),
245 component: () => 245 component: () =>
246 import ( 246 import (
247 /* webpackChunkName: "routes" */ 247 /* webpackChunkName: "routes" */
248 /* webpackMode: "lazy-once" */ 248 /* webpackMode: "lazy-once" */
249 `@/pages/Event/event.vue` 249 `@/pages/Event/event.vue`
250 ) 250 )
251 }, 251 },
252 { 252 {
253 path: '/holiday', 253 path: '/holiday',
254 meta: {}, 254 meta: {},
255 name: 'Holiday', 255 name: 'Holiday',
256 props: (route) => ({ type: route.query.type }), 256 props: (route) => ({ type: route.query.type }),
257 component: () => 257 component: () =>
258 import ( 258 import (
259 /* webpackChunkName: "routes" */ 259 /* webpackChunkName: "routes" */
260 /* webpackMode: "lazy-once" */ 260 /* webpackMode: "lazy-once" */
261 `@/pages/Holiday/holiday.vue` 261 `@/pages/Holiday/holiday.vue`
262 ) 262 )
263 }, 263 },
264 { 264 {
265 path: '/user', 265 path: '/user',
266 meta: {}, 266 meta: {},
267 name: 'User', 267 name: 'User',
268 props: (route) => ({ type: route.query.type }), 268 props: (route) => ({ type: route.query.type }),
269 component: () => 269 component: () =>
270 import ( 270 import (
271 /* webpackChunkName: "routes" */ 271 /* webpackChunkName: "routes" */
272 /* webpackMode: "lazy-once" */ 272 /* webpackMode: "lazy-once" */
273 `@/pages/User/user.vue` 273 `@/pages/User/user.vue`
274 ) 274 )
275 }, 275 },
276 { 276 {
277 path: '/AttendenceStudent', 277 path: '/AttendenceStudent',
278 meta: {}, 278 meta: {},
279 name: 'studentAttendence', 279 name: 'studentAttendence',
280 props: (route) => ({ type: route.query.type }), 280 props: (route) => ({ type: route.query.type }),
281 component: () => 281 component: () =>
282 import ( 282 import (
283 /* webpackChunkName: "routes" */ 283 /* webpackChunkName: "routes" */
284 /* webpackMode: "lazy-once" */ 284 /* webpackMode: "lazy-once" */
285 `@/pages/Attendence/studentAttendence.vue` 285 `@/pages/Attendence/studentAttendence.vue`
286 ) 286 )
287 }, 287 },
288 { 288 {
289 path: '/AttendenceTeacher', 289 path: '/AttendenceTeacher',
290 meta: {}, 290 meta: {},
291 name: 'teacherAttendence', 291 name: 'teacherAttendence',
292 props: (route) => ({ type: route.query.type }), 292 props: (route) => ({ type: route.query.type }),
293 component: () => 293 component: () =>
294 import ( 294 import (
295 /* webpackChunkName: "routes" */ 295 /* webpackChunkName: "routes" */
296 /* webpackMode: "lazy-once" */ 296 /* webpackMode: "lazy-once" */
297 `@/pages/Attendence/teacherAttendence.vue` 297 `@/pages/Attendence/teacherAttendence.vue`
298 ) 298 )
299 }, 299 },
300 { 300 {
301 path: '/AttendenceUser', 301 path: '/AttendenceUser',
302 meta: {}, 302 meta: {},
303 name: 'userAttendence', 303 name: 'userAttendence',
304 props: (route) => ({ type: route.query.type }), 304 props: (route) => ({ type: route.query.type }),
305 component: () => 305 component: () =>
306 import ( 306 import (
307 /* webpackChunkName: "routes" */ 307 /* webpackChunkName: "routes" */
308 /* webpackMode: "lazy-once" */ 308 /* webpackMode: "lazy-once" */
309 `@/pages/Attendence/userAttendence.vue` 309 `@/pages/Attendence/userAttendence.vue`
310 ) 310 )
311 }, 311 },
312 { 312 {
313 path: '/feeTypes', 313 path: '/feeTypes',
314 meta: {}, 314 meta: {},
315 name: 'feeTypes', 315 name: 'feeTypes',
316 props: (route) => ({ type: route.query.type }), 316 props: (route) => ({ type: route.query.type }),
317 component: () => 317 component: () =>
318 import ( 318 import (
319 /* webpackChunkName: "routes" */ 319 /* webpackChunkName: "routes" */
320 /* webpackMode: "lazy-once" */ 320 /* webpackMode: "lazy-once" */
321 `@/pages/Account/feeTypes.vue` 321 `@/pages/Account/feeTypes.vue`
322 ) 322 )
323 }, 323 },
324 { 324 {
325 path: '/invoice', 325 path: '/invoice',
326 meta: {}, 326 meta: {},
327 name: 'Invoice', 327 name: 'Invoice',
328 props: (route) => ({ type: route.query.type }), 328 props: (route) => ({ type: route.query.type }),
329 component: () => 329 component: () =>
330 import ( 330 import (
331 /* webpackChunkName: "routes" */ 331 /* webpackChunkName: "routes" */
332 /* webpackMode: "lazy-once" */ 332 /* webpackMode: "lazy-once" */
333 `@/pages/Account/invoice.vue` 333 `@/pages/Account/invoice.vue`
334 ) 334 )
335 }, 335 },
336 { 336 {
337 path: '/paymentHistory', 337 path: '/paymentHistory',
338 meta: {}, 338 meta: {},
339 name: 'paymentHistory', 339 name: 'paymentHistory',
340 props: (route) => ({ type: route.query.type }), 340 props: (route) => ({ type: route.query.type }),
341 component: () => 341 component: () =>
342 import ( 342 import (
343 /* webpackChunkName: "routes" */ 343 /* webpackChunkName: "routes" */
344 /* webpackMode: "lazy-once" */ 344 /* webpackMode: "lazy-once" */
345 `@/pages/Account/paymentHistory.vue` 345 `@/pages/Account/paymentHistory.vue`
346 ) 346 )
347 }, 347 },
348 { 348 {
349 path: '/expense', 349 path: '/expense',
350 meta: {}, 350 meta: {},
351 name: 'Expense', 351 name: 'Expense',
352 props: (route) => ({ type: route.query.type }), 352 props: (route) => ({ type: route.query.type }),
353 component: () => 353 component: () =>
354 import ( 354 import (
355 /* webpackChunkName: "routes" */ 355 /* webpackChunkName: "routes" */
356 /* webpackMode: "lazy-once" */ 356 /* webpackMode: "lazy-once" */
357 `@/pages/Account/expense.vue` 357 `@/pages/Account/expense.vue`
358 ) 358 )
359 }, 359 },
360 { 360 {
361 path: '/income', 361 path: '/income',
362 meta: {}, 362 meta: {},
363 name: 'Income', 363 name: 'Income',
364 props: (route) => ({ type: route.query.type }), 364 props: (route) => ({ type: route.query.type }),
365 component: () => 365 component: () =>
366 import ( 366 import (
367 /* webpackChunkName: "routes" */ 367 /* webpackChunkName: "routes" */
368 /* webpackMode: "lazy-once" */ 368 /* webpackMode: "lazy-once" */
369 `@/pages/Account/income.vue` 369 `@/pages/Account/income.vue`
370 ) 370 )
371 }, 371 },
372 { 372 {
373 path: '/libraryMember', 373 path: '/libraryMember',
374 meta: {}, 374 meta: {},
375 name: 'libraryMember', 375 name: 'libraryMember',
376 props: (route) => ({ type: route.query.type }), 376 props: (route) => ({ type: route.query.type }),
377 component: () => 377 component: () =>
378 import ( 378 import (
379 /* webpackChunkName: "routes" */ 379 /* webpackChunkName: "routes" */
380 /* webpackMode: "lazy-once" */ 380 /* webpackMode: "lazy-once" */
381 `@/pages/Library/member.vue` 381 `@/pages/Library/member.vue`
382 ) 382 )
383 }, 383 },
384 { 384 {
385 path: '/books', 385 path: '/books',
386 meta: {}, 386 meta: {},
387 name: 'Books', 387 name: 'Books',
388 props: (route) => ({ type: route.query.type }), 388 props: (route) => ({ type: route.query.type }),
389 component: () => 389 component: () =>
390 import ( 390 import (
391 /* webpackChunkName: "routes" */ 391 /* webpackChunkName: "routes" */
392 /* webpackMode: "lazy-once" */ 392 /* webpackMode: "lazy-once" */
393 `@/pages/Library/books.vue` 393 `@/pages/Library/books.vue`
394 ) 394 )
395 }, 395 },
396 { 396 {
397 path: '/issue', 397 path: '/issue',
398 meta: {}, 398 meta: {},
399 name: 'Issue', 399 name: 'Issue',
400 props: (route) => ({ type: route.query.type }), 400 props: (route) => ({ type: route.query.type }),
401 component: () => 401 component: () =>
402 import ( 402 import (
403 /* webpackChunkName: "routes" */ 403 /* webpackChunkName: "routes" */
404 /* webpackMode: "lazy-once" */ 404 /* webpackMode: "lazy-once" */
405 `@/pages/Library/issue.vue` 405 `@/pages/Library/issue.vue`
406 ) 406 )
407 }, 407 },
408 { 408 {
409 path: '/e-books', 409 path: '/e-books',
410 meta: {}, 410 meta: {},
411 name: 'eBooks', 411 name: 'eBooks',
412 props: (route) => ({ type: route.query.type }), 412 props: (route) => ({ type: route.query.type }),
413 component: () => 413 component: () =>
414 import ( 414 import (
415 /* webpackChunkName: "routes" */ 415 /* webpackChunkName: "routes" */
416 /* webpackMode: "lazy-once" */ 416 /* webpackMode: "lazy-once" */
417 `@/pages/Library/eBook.vue` 417 `@/pages/Library/eBook.vue`
418 ) 418 )
419 }, 419 },
420 { 420 {
421 path: '/invoiceId/:invoiceid', 421 path: '/invoiceId/:invoiceid',
422 meta: {}, 422 meta: {},
423 name: 'EditInvoice', 423 name: 'EditInvoice',
424 // props: (route) => ({ type: route.query.type }), 424 // props: (route) => ({ type: route.query.type }),
425 component: () => 425 component: () =>
426 import ( 426 import (
427 /* webpackChunkName: "routes" */ 427 /* webpackChunkName: "routes" */
428 /* webpackMode: "lazy-once" */ 428 /* webpackMode: "lazy-once" */
429 `@/pages/Account/editInvoice.vue` 429 `@/pages/Account/editInvoice.vue`
430 ) 430 )
431 }, 431 },
432 { 432 {
433 path: '/StudentsAttendence/:id', 433 path: '/StudentsAttendence/:id',
434 meta: {}, 434 meta: {},
435 name: 'ViewStudentsAttendence', 435 name: 'ViewStudentsAttendence',
436 props: (route) => ({ type: route.query.type }), 436 props: (route) => ({ type: route.query.type }),
437 component: () => 437 component: () =>
438 import ( 438 import (
439 /* webpackChunkName: "routes" */ 439 /* webpackChunkName: "routes" */
440 /* webpackMode: "lazy-once" */ 440 /* webpackMode: "lazy-once" */
441 `@/pages/Attendence/viewStudentsAttendence.vue` 441 `@/pages/Attendence/viewStudentsAttendence.vue`
442 ) 442 )
443 }, 443 },
444 { 444 {
445 path: '/viewInvoice/:viewInvoiceId', 445 path: '/viewInvoice/:viewInvoiceId',
446 meta: {}, 446 meta: {},
447 name: 'ViewInvoice', 447 name: 'ViewInvoice',
448 props: (route) => ({ type: route.query.type }), 448 props: (route) => ({ type: route.query.type }),
449 component: () => 449 component: () =>
450 import ( 450 import (
451 /* webpackChunkName: "routes" */ 451 /* webpackChunkName: "routes" */
452 /* webpackMode: "lazy-once" */ 452 /* webpackMode: "lazy-once" */
453 `@/pages/Account/viewInvoice.vue` 453 `@/pages/Account/viewInvoice.vue`
454 ) 454 )
455 }, 455 },
456 { 456 {
457 path: '/exam', 457 path: '/exam',
458 meta: {}, 458 meta: {},
459 name: 'Exam', 459 name: 'Exam',
460 props: (route) => ({ type: route.query.type }), 460 props: (route) => ({ type: route.query.type }),
461 component: () => 461 component: () =>
462 import ( 462 import (
463 /* webpackChunkName: "routes" */ 463 /* webpackChunkName: "routes" */
464 /* webpackMode: "lazy-once" */ 464 /* webpackMode: "lazy-once" */
465 `@/pages/Exam/exam.vue` 465 `@/pages/Exam/exam.vue`
466 ) 466 )
467 }, 467 },
468 { 468 {
469 path: '/grade', 469 path: '/grade',
470 meta: {}, 470 meta: {},
471 name: 'Grade', 471 name: 'Grade',
472 props: (route) => ({ type: route.query.type }), 472 props: (route) => ({ type: route.query.type }),
473 component: () => 473 component: () =>
474 import ( 474 import (
475 /* webpackChunkName: "routes" */ 475 /* webpackChunkName: "routes" */
476 /* webpackMode: "lazy-once" */ 476 /* webpackMode: "lazy-once" */
477 `@/pages/Exam/grade.vue` 477 `@/pages/Exam/grade.vue`
478 ) 478 )
479 }, 479 },
480 { 480 {
481 path: '/examSchedule', 481 path: '/examSchedule',
482 meta: {}, 482 meta: {},
483 name: 'ExamSchedule', 483 name: 'ExamSchedule',
484 props: (route) => ({ type: route.query.type }), 484 props: (route) => ({ type: route.query.type }),
485 component: () => 485 component: () =>
486 import ( 486 import (
487 /* webpackChunkName: "routes" */ 487 /* webpackChunkName: "routes" */
488 /* webpackMode: "lazy-once" */ 488 /* webpackMode: "lazy-once" */
489 `@/pages/Exam/examSchedule.vue` 489 `@/pages/Exam/examSchedule.vue`
490 ) 490 )
491 }, 491 },
492 { 492 {
493 path: '/mark', 493 path: '/mark',
494 meta: {}, 494 meta: {},
495 name: 'Mark', 495 name: 'Mark',
496 props: (route) => ({ type: route.query.type }), 496 props: (route) => ({ type: route.query.type }),
497 component: () => 497 component: () =>
498 import ( 498 import (
499 /* webpackChunkName: "routes" */ 499 /* webpackChunkName: "routes" */
500 /* webpackMode: "lazy-once" */ 500 /* webpackMode: "lazy-once" */
501 `@/pages/Mark/mark.vue` 501 `@/pages/Mark/mark.vue`
502 ) 502 )
503 }, 503 },
504 { 504 {
505 path: '/viewMark/:markId', 505 path: '/viewMark/:markId',
506 meta: {}, 506 meta: {},
507 name: 'viewMark', 507 name: 'viewMark',
508 props: (route) => ({ type: route.query.type }), 508 props: (route) => ({ type: route.query.type }),
509 component: () => 509 component: () =>
510 import ( 510 import (
511 /* webpackChunkName: "routes" */ 511 /* webpackChunkName: "routes" */
512 /* webpackMode: "lazy-once" */ 512 /* webpackMode: "lazy-once" */
513 `@/pages/Mark/viewMark.vue` 513 `@/pages/Mark/viewMark.vue`
514 ) 514 )
515 }, 515 },
516 { 516 {
517 path: '/markDistribution', 517 path: '/markDistribution',
518 meta: {}, 518 meta: {},
519 name: 'markDistribution', 519 name: 'markDistribution',
520 props: (route) => ({ type: route.query.type }), 520 props: (route) => ({ type: route.query.type }),
521 component: () => 521 component: () =>
522 import ( 522 import (
523 /* webpackChunkName: "routes" */ 523 /* webpackChunkName: "routes" */
524 /* webpackMode: "lazy-once" */ 524 /* webpackMode: "lazy-once" */
525 `@/pages/Mark/markDistribution.vue` 525 `@/pages/Mark/markDistribution.vue`
526 ) 526 )
527 }, 527 },
528 { 528 {
529 path: '/promotion', 529 path: '/promotion',
530 meta: {}, 530 meta: {},
531 name: 'Promotion', 531 name: 'Promotion',
532 props: (route) => ({ type: route.query.type }), 532 props: (route) => ({ type: route.query.type }),
533 component: () => 533 component: () =>
534 import ( 534 import (
535 /* webpackChunkName: "routes" */ 535 /* webpackChunkName: "routes" */
536 /* webpackMode: "lazy-once" */ 536 /* webpackMode: "lazy-once" */
537 `@/pages/Mark/promotion.vue` 537 `@/pages/Mark/promotion.vue`
538 ) 538 )
539 }, 539 },
540 { 540 {
541 path: '/academicYear', 541 path: '/academicYear',
542 meta: {}, 542 meta: {},
543 name: 'academicYear', 543 name: 'academicYear',
544 props: (route) => ({ type: route.query.type }), 544 props: (route) => ({ type: route.query.type }),
545 component: () => 545 component: () =>
546 import ( 546 import (
547 /* webpackChunkName: "routes" */ 547 /* webpackChunkName: "routes" */
548 /* webpackMode: "lazy-once" */ 548 /* webpackMode: "lazy-once" */
549 `@/pages/Administrator/academicYear.vue` 549 `@/pages/Administrator/academicYear.vue`
550 ) 550 )
551 }, 551 },
552 { 552 {
553 path: '/systemAdmin', 553 path: '/systemAdmin',
554 meta: {}, 554 meta: {},
555 name: 'systemAdmin', 555 name: 'systemAdmin',
556 props: (route) => ({ type: route.query.type }), 556 props: (route) => ({ type: route.query.type }),
557 component: () => 557 component: () =>
558 import ( 558 import (
559 /* webpackChunkName: "routes" */ 559 /* webpackChunkName: "routes" */
560 /* webpackMode: "lazy-once" */ 560 /* webpackMode: "lazy-once" */
561 `@/pages/Administrator/systemAdmin.vue` 561 `@/pages/Administrator/systemAdmin.vue`
562 ) 562 )
563 }, 563 },
564 { 564 {
565 path: '/resetPassword', 565 path: '/resetPassword',
566 meta: {}, 566 meta: {},
567 name: 'resetPassword', 567 name: 'resetPassword',
568 props: (route) => ({ type: route.query.type }), 568 props: (route) => ({ type: route.query.type }),
569 component: () => 569 component: () =>
570 import ( 570 import (
571 /* webpackChunkName: "routes" */ 571 /* webpackChunkName: "routes" */
572 /* webpackMode: "lazy-once" */ 572 /* webpackMode: "lazy-once" */
573 `@/pages/Administrator/resetPassword.vue` 573 `@/pages/Administrator/resetPassword.vue`
574 ) 574 )
575 }, 575 },
576 { 576 {
577 path: '/role', 577 path: '/role',
578 meta: {}, 578 meta: {},
579 name: 'Role', 579 name: 'Role',
580 props: (route) => ({ type: route.query.type }), 580 props: (route) => ({ type: route.query.type }),
581 component: () => 581 component: () =>
582 import ( 582 import (
583 /* webpackChunkName: "routes" */ 583 /* webpackChunkName: "routes" */
584 /* webpackMode: "lazy-once" */ 584 /* webpackMode: "lazy-once" */
585 `@/pages/Administrator/role.vue` 585 `@/pages/Administrator/role.vue`
586 ) 586 )
587 }, 587 },
588 { 588 {
589 path: '/studentReport', 589 path: '/studentReport',
590 meta: {}, 590 meta: {},
591 name: 'studentReport', 591 name: 'studentReport',
592 props: (route) => ({ type: route.query.type }), 592 props: (route) => ({ type: route.query.type }),
593 component: () => 593 component: () =>
594 import ( 594 import (
595 /* webpackChunkName: "routes" */ 595 /* webpackChunkName: "routes" */
596 /* webpackMode: "lazy-once" */ 596 /* webpackMode: "lazy-once" */
597 `@/pages/Report/studentReport.vue` 597 `@/pages/Report/studentReport.vue`
598 ) 598 )
599 }, 599 },
600 { 600 {
601 path: '/markSheetReport', 601 path: '/progressCardReport',
602 meta: {}, 602 meta: {},
603 name: 'markSheetReport', 603 name: 'progressCardReport',
604 props: (route) => ({ type: route.query.type }), 604 props: (route) => ({ type: route.query.type }),
605 component: () => 605 component: () =>
606 import ( 606 import (
607 /* webpackChunkName: "routes" */ 607 /* webpackChunkName: "routes" */
608 /* webpackMode: "lazy-once" */ 608 /* webpackMode: "lazy-once" */
609 `@/pages/Report/markSheetReport.vue` 609 `@/pages/Report/progressCardReport.vue`
610 ) 610 )
611 } 611 }
612 ]; 612 ];