viithiisys / School-Management-dashboard

Compare View

switch
from
...
to
 
Commits (7)
Showing 72 changed files   Show diff stats
src/Services/ApiCalls.js
Diff comments   View file @8b7976c
1 import http from "@/Services/http.js"; 1 import http from "@/Services/http.js";
2 import Rules from "@/pages/Common/rules.js" 2 import Rules from "@/pages/Common/rules.js"
3 export default { 3 export default {
4 mixins: [Rules], 4 mixins: [Rules],
5 data() { 5 data() {
6 return { 6 return {
7 7
8 // LOADER 8 // LOADER
9 showLoader: false, 9 showLoader: false,
10 loading: false, 10 loading: false,
11 // SNACKBAR 11 // SNACKBAR
12 snackbar: false, 12 snackbar: false,
13 snackbarColor: '', 13 snackbarColor: '',
14 text: '', 14 text: '',
15 timeout: 4000, 15 timeout: 4000,
16 y: "top", 16 y: "top",
17 x: "right", 17 x: "right",
18 mode: "", 18 mode: "",
19 19
20 // PAGINATION 20 // PAGINATION
21 size: 10, 21 size: 10,
22 elements: "", 22 elements: "",
23 pageCount: "", 23 pageCount: "",
24 pageNumber: 0 24 pageNumber: 0
25 25
26 } 26 }
27 }, 27 },
28 methods: { 28 methods: {
29 // SNACKBAR 29 // SNACKBAR
30 seeSnackbar(message, color) { 30 seeSnackbar(message, color) {
31 this.text = message; 31 this.text = message;
32 this.showLoader = false; 32 this.showLoader = false;
33 this.snackbarColor = color; 33 this.snackbarColor = color;
34 this.snackbar = true; 34 this.snackbar = true;
35 }, 35 },
36 36
37 // SET PAGINATION 37 // SET PAGINATION
38 setPagination(response) { 38 setPagination(response) {
39 this.elements = response.data.totalElements; 39 this.elements = response.data.totalElements;
40 var l = this.elements; 40 var l = this.elements;
41 var s = this.size; 41 var s = this.size;
42 var floor = (l / s); 42 var floor = (l / s);
43 this.pageCount = Math.floor(floor); 43 this.pageCount = Math.floor(floor);
44 if (this.pageCount == floor) { 44 if (this.pageCount == floor) {
45 this.pageCount -= 1 45 this.pageCount -= 1
46 } 46 }
47 this.showLoader = false; 47 this.showLoader = false;
48 this.loading = false; 48 this.loading = false;
49 }, 49 },
50 50
51 generateError(error) { 51 generateError(error) {
52 var customError 52 var customError
53 const errorNo = error.response.status 53 const errorNo = error.response.status
54 // console.log("satus code errorNo", errorNo) 54 // console.log("satus code errorNo", errorNo)
55 switch (errorNo) { 55 switch (errorNo) {
56 case 400: 56 case 400:
57 let er = error 57 let er = error
58 if (er.response.data.error) { 58 if (er.response.data.error) {
59 customError = error.response.data.error 59 customError = error.response.data.error
60 } 60 }
61 if (er.response.data.errorMessage) { 61 if (er.response.data.errorMessage) {
62 customError = error.response.data.errorMessage 62 customError = error.response.data.errorMessage
63 } 63 }
64 if (er.response.data.message) { 64 if (er.response.data.message) {
65 customError = error.response.data.message 65 customError = error.response.data.message
66 } 66 }
67 return customError 67 return customError
68 break; 68 break;
69 case 401: 69 case 401:
70 customError = "Session expired" 70 customError = "Session expired"
71 return customError 71 return customError
72 break; 72 break;
73 case 404: 73 case 404:
74 customError = error.response.data.errorMessage 74 customError = error.response.data.errorMessage
75 return customError 75 return customError
76 break; 76 break;
77 case 409: 77 case 409:
78 customError = error.response.data.errorMessage 78 customError = error.response.data.errorMessage
79 return customError 79 return customError
80 break; 80 break;
81 case 500: 81 case 500:
82 customError = error.response.data.message 82 customError = error.response.data.message
83 return customError 83 return customError
84 break; 84 break;
85 default: 85 default:
86 customError = "unknown error" 86 customError = "unknown error"
87 return customError 87 return customError
88 } 88 }
89 89
90 }, 90 },
91 91
92 // GET 92 // GET
93 getMethod(url, params) { 93 getMethod(url, params) {
94 this.showLoader = true 94 this.showLoader = true
95 return http() 95 return http()
96 .get(url, { 96 .get(url, {
97 params: params, 97 params: params,
98 98
99 headers: { 99 headers: {
100 // headers: { Authorization: "Bearer " + this.token } 100 // headers: { Authorization: "Bearer " + this.token }
101 } 101 }
102 }) 102 })
103 .then(response => { 103 .then(response => {
104 this.showLoader = false 104 this.showLoader = false
105 return response 105 return response
106 }) 106 })
107 .catch(error => { 107 .catch(error => {
108 this.showLoader = false 108 this.showLoader = false
109 // console.log("error in getMethod = ", error.response) 109 // console.log("error in getMethod = ", error.response)
110 const message = this.generateError(error) 110 const message = this.generateError(error)
111 if (message == "Session expired") { 111 if (message == "Session expired") {
112 // this.$store.dispatch("setToken", null); 112 // this.$store.dispatch("setToken", null);
113 // this.$router.push({ 113 // this.$router.push({
114 // name: 'Login' 114 // name: 'Login'
115 // }); 115 // });
116 } else { 116 } else {
117 throw new Error(message); 117 throw new Error(message);
118 } 118 }
119 119
120 }); 120 });
121 }, 121 },
122 122
123 // POST 123 // POST
124 postMethod(url, payload) { 124 postMethod(url, payload) {
125 this.showLoader = true 125 this.showLoader = true
126 return http() 126 return http()
127 .post(url, payload, { 127 .post(url, payload, {
128 // headers: { Authorization: "Bearer " + this.token } 128 // headers: { Authorization: "Bearer " + this.token }
129 }) 129 })
130 .then(response => { 130 .then(response => {
131 this.showLoader = false 131 this.showLoader = false
132 return response 132 return response
133 }) 133 })
134 .catch(error => { 134 .catch(error => {
135 this.showLoader = false 135 this.showLoader = false
136 // console.log("error in postMethod = ", error.response) 136 // console.log("error in postMethod = ", error.response)
137 const message = this.generateError(error) 137 const message = this.generateError(error)
138 if (message == "Session expired") { 138 if (message == "Session expired") {
139 this.$store.dispatch("setToken", null); 139 this.$store.dispatch("setToken", null);
140 this.$router.push({ 140 this.$router.push({
141 name: 'Login' 141 name: 'Login'
142 }); 142 });
143 } else { 143 } else {
144 throw new Error(message); 144 throw new Error(message);
145 } 145 }
146 146
147 }); 147 });
148 }, 148 },
149 149
150 // PUT 150 // PUT
151 putMethod(url, payload) { 151 putMethod(url, payload) {
152 return http() 152 return http()
153 .put(url, payload, { 153 .put(url, payload, {
154 // headers: { 154 // headers: {
155 // // Authorization: 'Bearer ' + this.token 155 // // Authorization: 'Bearer ' + this.token
156 // } 156 // }
157 }) 157 })
158 .then(response => { 158 .then(response => {
159 return response 159 return response
160 }) 160 })
161 .catch(error => { 161 .catch(error => {
162 // console.log("error in putMethod = ", error.response) 162 // console.log("error in putMethod = ", error.response)
163 const message = this.generateError(error) 163 const message = this.generateError(error)
164 if (message == "Session expired") { 164 if (message == "Session expired") {
165 this.$store.dispatch("setToken", null); 165 this.$store.dispatch("setToken", null);
166 this.$router.push({ 166 this.$router.push({
167 name: 'Login' 167 name: 'Login'
168 }); 168 });
169 } else { 169 } else {
170 throw new Error(message); 170 throw new Error(message);
171 } 171 }
172 172
173 }) 173 })
174 } 174 }
175 175
176 }, 176 },
177 computed: { 177 computed: {
178 displayedPageNumber() { 178 displayedPageNumber() {
179 return this.pageNumber + 1; 179 return this.pageNumber + 1;
180 }, 180 },
181 // managerIsADMIN_VIEW: { 181 // managerIsADMIN_VIEW: {
182 // get() { 182 // get() {
183 // if (this.$store.state.roleName == "ADMIN_VIEW") { 183 // if (this.$store.state.roleName == "ADMIN_VIEW") {
184 // return true; 184 // return true;
185 // } else { 185 // } else {
186 // return false 186 // return false
187 // } 187 // }
188 // }, 188 // },
189 // set(newValue) { 189 // set(newValue) {
190 // this.managerIsADMIN_VIEW = newValue; 190 // this.managerIsADMIN_VIEW = newValue;
191 // } 191 // }
192 192
193 // } 193 // }
194 }, 194 },
195 } 195 }
src/Services/GetApis.js
Diff comments   View file @8b7976c
1 import ApiCalls from "@/Services/ApiCalls.js"; 1 import ApiCalls from "@/Services/ApiCalls.js";
2 export default { 2 export default {
3 mixins: [ApiCalls], 3 mixins: [ApiCalls],
4 data() { 4 data() {
5 return { 5 return {
6 // courseData: [], 6 // courseData: [],
7 7
8 // dashboard.vue data properties 8 // dashboard.vue data properties
9 9
10 10
11 11
12 } 12 }
13 }, 13 },
14 methods: { 14 methods: {
15 /* getParticularCourseDetail */ 15 /* getParticularCourseDetail */
16 async getParticularCourseDetail(courseId) { 16 async getParticularCourseDetail(courseId) {
17 17
18 try { 18 try {
19 let response = await this.getMethod("/getParticularCourseDetail", { 19 let response = await this.getMethod("/getParticularCourseDetail", {
20 courseId: courseId 20 courseId: courseId
21 }) 21 })
22 return response 22 return response
23 } catch (error) { 23 } catch (error) {
24 // console.log("error in getParticularCourseDetail - ", error.message) 24 // console.log("error in getParticularCourseDetail - ", error.message)
25 } 25 }
26 }, 26 },
27 27
28 /* getStudentCourses - to get courseData */ 28 /* getStudentCourses - to get courseData */
29 async getStudentCourses(params) { 29 async getStudentCourses(params) {
30 try { 30 try {
31 let response = await this.getMethod("/getStudentCourses", { 31 let response = await this.getMethod("/getStudentCourses", {
32 classId: params.classId, 32 classId: params.classId,
33 studentId: params.studentId 33 studentId: params.studentId
34 }) 34 })
35 this.courseData = response.data.data; 35 this.courseData = response.data.data;
36 } catch (error) { 36 } catch (error) {
37 // console.log("error in getStudentCourses - ", error.message) 37 // console.log("error in getStudentCourses - ", error.message)
38 } 38 }
39 }, 39 },
40 40
41 /* getCourseDiscussionesList - used in courseDiscussionForum.vue */ 41 /* getCourseDiscussionesList - used in courseDiscussionForum.vue */
42 async getCourseDiscussionesList(params) { 42 async getCourseDiscussionesList(params) {
43 try { 43 try {
44 let response = await this.getMethod("/getCourseDiscussionesList", { 44 let response = await this.getMethod("/getCourseDiscussionesList", {
45 courseId: params.courseId, 45 courseId: params.courseId,
46 classId: params.classId, 46 classId: params.classId,
47 }) 47 })
48 this.courseDiscussionItems = response.data.data 48 this.courseDiscussionItems = response.data.data
49 // return response 49 // return response
50 // console.log("response of getCourseDiscussionesList - ", response) 50 // console.log("response of getCourseDiscussionesList - ", response)
51 } catch (error) { 51 } catch (error) {
52 // console.log("error in getCourseDiscussionesList - ", error.message) 52 // console.log("error in getCourseDiscussionesList - ", error.message)
53 } 53 }
54 }, 54 },
55 55
56 56
57 57
58 58
59 59
60 60
61 61
62 /***************************************************************************************************************************** */ 62 /***************************************************************************************************************************** */
63 63
64 // APIS USED IN dashboard.vue 64 // APIS USED IN dashboard.vue
65 /* studentMeetingEvents required in dashboard to display list of latest events */ 65 /* studentMeetingEvents required in dashboard to display list of latest events */
66 async studentMeetingEvents(params) { 66 async studentMeetingEvents(params) {
67 try { 67 try {
68 let response = await this.getMethod("/studentMeetingEvents", { 68 let response = await this.getMethod("/studentMeetingEvents", {
69 studentId: params.studentId 69 studentId: params.studentId
70 }) 70 })
71 // console.log("response of studentMeetingEvents - ", response); 71 // console.log("response of studentMeetingEvents - ", response);
72 return response 72 return response
73 } catch (error) { 73 } catch (error) {
74 // console.log("error in studentMeetingEvents - ", error.message) 74 // console.log("error in studentMeetingEvents - ", error.message)
75 } 75 }
76 76
77 }, 77 },
78 78
79 async getParticularMeetingEvent(params) { 79 async getParticularMeetingEvent(params) {
80 try { 80 try {
81 let response = await this.getMethod("/getParticularMeetingEvent", { 81 let response = await this.getMethod("/getParticularMeetingEvent", {
82 meetingEventId: params.meetingEventId 82 meetingEventId: params.meetingEventId
83 }) 83 })
84 // this.particularEvent.push = response.data.data 84 // this.particularEvent.push = response.data.data
85 return response 85 return response
86 } catch (error) { 86 } catch (error) {
87 // console.log("Error in getParticularMeetingEvent - ", error.message) 87 // console.log("Error in getParticularMeetingEvent - ", error.message)
88 } 88 }
89 }, 89 },
90 90
91 async getParticularSchoolEvent(params) { 91 async getParticularSchoolEvent(params) {
92 try { 92 try {
93 let response = await this.getMethod("/getParticularSchoolEvent", { 93 let response = await this.getMethod("/getParticularSchoolEvent", {
94 schoolEventId: params.schoolEventId 94 schoolEventId: params.schoolEventId
95 }) 95 })
96 // this.particularEvent = response.data.data 96 // this.particularEvent = response.data.data
97 return response 97 return response
98 } catch (error) { 98 } catch (error) {
99 // console.log("Error in getParticularMeetingEvent - ", error.message) 99 // console.log("Error in getParticularMeetingEvent - ", error.message)
100 } 100 }
101 }, 101 },
102 102
103 async getSchoolEventsList(params) { 103 async getSchoolEventsList(params) {
104 try { 104 try {
105 let response = await this.getMethod("/getSchoolEventsList") 105 let response = await this.getMethod("/getSchoolEventsList")
106 this.schoolEvents = response.data.data; 106 this.schoolEvents = response.data.data;
107 // console.log("school events - ", this.schoolEvents) 107 // console.log("school events - ", this.schoolEvents)
108 return response 108 return response
109 } catch (error) { 109 } catch (error) {
110 // console.log("Error in getParticularMeetingEvent - ", error.message) 110 // console.log("Error in getParticularMeetingEvent - ", error.message)
111 } 111 }
112 112
113 }, 113 },
114 114
115 115
116 /************************************************************************************************************************ */ 116 /************************************************************************************************************************ */
117 117
118 /* APIS USED IN LiveOnlineClass.vue */ 118 /* APIS USED IN LiveOnlineClass.vue */
119 async getLiveClassesesList(params) { 119 async getLiveClassesesList(params) {
120 try { 120 try {
121 let response = await this.getMethod("/getLiveClassesesList", { 121 let response = await this.getMethod("/getLiveClassesesList", {
122 classId: params.classId, 122 classId: params.classId,
123 courseId: params.courseId, 123 courseId: params.courseId,
124 chapterId: params.chapterId, 124 chapterId: params.chapterId,
125 }) 125 })
126 return response 126 return response
127 } catch (error) { 127 } catch (error) {
128 // console.log(" error in getLiveClassesesList - ", error.message) 128 // console.log(" error in getLiveClassesesList - ", error.message)
129 } 129 }
130 }, 130 },
131 131
132 132
133 133
134 /*************************************************************************************************************************** */ 134 /*************************************************************************************************************************** */
135 135
136 136
137 /* APIS USED IN announcement.vue */ 137 /* APIS USED IN announcement.vue */
138 async getAnnoucementesList(params) { 138 async getAnnoucementesList(params) {
139 try { 139 try {
140 let response = await this.getMethod("/getAnnoucementesList", { 140 let response = await this.getMethod("/getAnnoucementesList", {
141 courseId: params.courseId 141 courseId: params.courseId
142 }) 142 })
143 return response; 143 return response;
144 } catch (error) { 144 } catch (error) {
145 // console.log("Error in getAnnoucementesList - ", error.message) 145 // console.log("Error in getAnnoucementesList - ", error.message)
146 } 146 }
147 }, 147 },
148 148
149 /***********************************************************************************************/ 149 /***********************************************************************************************/
150 150
151 /* APIS USED IN AssignTeachers.vue */ 151 /* APIS USED IN AssignTeachers.vue */
152 async getCourseesList(params) { 152 async getCourseesList(params) {
153 try { 153 try {
154 let response = await this.getMethod("/getCourseesList", { 154 let response = await this.getMethod("/getCourseesList", {
155 classId: params.classId 155 classId: params.classId
156 }) 156 })
157 this.courseData = response.data.data; 157 this.courseData = response.data.data;
158 return response; 158 return response;
159 } catch (error) { 159 } catch (error) {
160 // console.log("Error in getAnnoucementesList - ", error.message) 160 // console.log("Error in getAnnoucementesList - ", error.message)
161 } 161 }
162 }, 162 },
163 async getTeachersList(params) { 163 async getTeachersList(params) {
164 try { 164 try {
165 let response = await this.getMethod("/getTeachersList") 165 let response = await this.getMethod("/getTeachersList")
166 this.teachersList = response.data.data; 166 this.teachersList = response.data.data;
167 // console.log("teachers list - ", this.teachersList) 167 // console.log("teachers list - ", this.teachersList)
168 return response; 168 return response;
169 } catch (error) { 169 } catch (error) {
170 // console.log("Error in getAnnoucementesList - ", error.message) 170 // console.log("Error in getAnnoucementesList - ", error.message)
171 } 171 }
172 } 172 }
173 173
174 174
175 }, 175 },
176 } 176 }
src/Services/PutApis.js
Diff comments   View file @8b7976c
1 import ApiCalls from "@/Services/ApiCalls.js"; 1 import ApiCalls from "@/Services/ApiCalls.js";
2 export default { 2 export default {
3 mixins: [ApiCalls], 3 mixins: [ApiCalls],
4 data() { 4 data() {
5 return { 5 return {
6 6
7 } 7 }
8 }, 8 },
9 methods: { 9 methods: {
10 /************************************************************************************************************************ */ 10 /************************************************************************************************************************ */
11 11
12 /* APIS USED IN LiveOnlineClass.vue */ 12 /* APIS USED IN LiveOnlineClass.vue */
13 async createLiveClasses(params) { 13 async createLiveClasses(params) {
14 try { 14 try {
15 let response = await this.getMethod("/createLiveClasses", { 15 let response = await this.getMethod("/createLiveClasses", {
16 classId: params.classId, 16 classId: params.classId,
17 courseId: params.courseId, 17 courseId: params.courseId,
18 chapterId: params.chapterId, 18 chapterId: params.chapterId,
19 }) 19 })
20 return response 20 return response
21 } catch (error) { 21 } catch (error) {
22 // console.log(" error in getLiveClassesesList - ", error.message) 22 // console.log(" error in getLiveClassesesList - ", error.message)
23 } 23 }
24 }, 24 },
25 25
26 26
27 27
28 /*************************************************************************************************************************** */ 28 /*************************************************************************************************************************** */
29 29
30 30
31 31
32 }, 32 },
33 } 33 }
src/Services/http.js
Diff comments   View file @8b7976c
1 import axios from 'axios' 1 import axios from 'axios'
2 import store from '@/store/store' 2 import store from '@/store/store'
3 import Vue from 'vue' 3 import Vue from 'vue'
4 import { vm1 } from "@/main.js" 4 import { vm1 } from "@/main.js"
5 5
6 const baseDomain = "https://api-dashboard.intrack.in/v1"; 6 const baseDomain = "https://api-dashboard.intrack.in/v1";
7 7
8 const baseURL = `${baseDomain}`; 8 const baseURL = `${baseDomain}`;
9 // var token = "" 9 // var token = ""
10 // if (store.state.role === "ADMIN") { 10 // if (store.state.role === "ADMIN") {
11 // token = `${store.state.token}` 11 // token = `${store.state.token}`
12 // } else if (store.state.schoolRole === "SUPERADMIN") { 12 // } else if (store.state.schoolRole === "SUPERADMIN") {
13 // token = `${store.state.schoolToken}` 13 // token = `${store.state.schoolToken}`
14 // } 14 // }
15 15
16 // console.log("role",`${store.state.schoolRole}`); 16 // console.log("role",`${store.state.schoolRole}`);
17 // console.log("token",`${store.state.schoolToken}`); 17 // console.log("token",`${store.state.schoolToken}`);
18 18
19 export default () => { 19 export default () => {
20 // return axios.create({ 20 // return axios.create({
21 // // baseURL: 'http://192.168.2.221:3002/v1', 21 // // baseURL: 'http://192.168.2.221:3002/v1',
22 // baseURL, 22 // baseURL,
23 // headers: { 23 // headers: {
24 // Authorization: `Bearer ${store.state.token}` 24 // Authorization: `Bearer ${store.state.token}`
25 // } 25 // }
26 // }) 26 // })
27 let instance = axios.create({ 27 let instance = axios.create({
28 // LIVE 28 // LIVE
29 //baseURL: 'https://annadata.patanjaliayurved.org/api', 29 //baseURL: 'https://annadata.patanjaliayurved.org/api',
30 // DEVELOPMENT 30 // DEVELOPMENT
31 baseURL: baseURL, 31 baseURL: baseURL,
32 32
33 headers: { 33 headers: {
34 Authorization: `Bearer ${store.state.token}`, 34 Authorization: `Bearer ${store.state.token}`,
35 // Authorization: `Bearer sdfsdfsfsdf`, 35 // Authorization: `Bearer sdfsdfsfsdf`,
36 // 'Access-Control-Allow-Origin': '*' 36 // 'Access-Control-Allow-Origin': '*'
37 37
38 } 38 }
39 }) 39 })
40 40
41 instance.interceptors.request.use((config) => { 41 instance.interceptors.request.use((config) => {
42 // Do something before request is sent 42 // Do something before request is sent
43 43
44 return config 44 return config
45 }, error => { 45 }, error => {
46 return Promise.reject(error) 46 return Promise.reject(error)
47 }) 47 })
48 instance.interceptors.response.use((response) => { 48 instance.interceptors.response.use((response) => {
49 // do something with the response data 49 // do something with the response data
50 return response;
51 }, error => {
52 // handle the response error
53 // console.log("error in interceptor - ", error.response.status)
54 var customError
55 const errorNo = error.response.status
50 return response; 56
57 switch (errorNo) {
58 case 401:
59 customError = "Session expired"
60 vm1.$store.dispatch("RESET_STORE", {
61 token: null,
62 data: null,
63 isUserLoggedIn: false,
64 isSchoolLoggedIn: false,
65 id: null,
66 role: null,
67 // schoolId: null,
68 schoolToken: null,
69 schoolRole: null,
70 studentsData: [],
71 });
72 window.getApp.$emit("APP_LOGOUT");
73 // console.log("store is - ", vm1.$store.state)
74 vm1.$router.push({ name: "Login" });
75 // vm1.$store.dispatch("Id", null);
51 }, error => { 76
52 // handle the response error 77 break;
53 // console.log("error in interceptor - ", error.response.status) 78 }
54 var customError
55 const errorNo = error.response.status
56
57 switch (errorNo) {
58 case 401: 79
59 customError = "Session expired" 80 return Promise.reject(error);
60 vm1.$store.dispatch("RESET_STORE", { 81 })
1 const adminMenu = [ 1 const adminMenu = [
2 // { header: 'Apps' }, 2 // { header: 'Apps' },
3 { 3 {
4 title: 'Dashboard', 4 title: 'Dashboard',
5 // group: 'apps', 5 // group: 'apps',
6 name: 'Dashboard', 6 name: 'Dashboard',
7 icon: '/static/icon/dashboard.png', 7 icon: '/static/icon/dashboard.png',
8 }, 8 },
9 { 9 {
10 title: 'Class', 10 title: 'Class',
11 // group: 'apps', 11 // group: 'apps',
12 name: 'Class', 12 name: 'Class',
13 icon: '/static/icon/class.png', 13 icon: '/static/icon/class.png',
14 }, 14 },
15 { 15 {
16 title: 'Course', 16 title: 'Course',
17 group: 'AdminCourse', 17 group: 'AdminCourse',
18 component: 'AdminCourse', 18 component: 'AdminCourse',
19 icon: '/static/icon/attendence.png', 19 icon: '/static/icon/attendence.png',
20 items: [ 20 items: [
21 { name: 'AssignTeachers', title: 'Assign Teachers', component: 'AssignTeachers', action: '', }, 21 { name: 'AssignTeachers', title: 'Assign Teachers', component: 'AssignTeachers', action: '', },
22 22
23 ] 23 ]
24 }, 24 },
25 { 25 {
26 title: 'Section', 26 title: 'Section',
27 // group: 'apps', 27 // group: 'apps',
28 name: 'Section', 28 name: 'Section',
29 icon: '/static/icon/section.png', 29 icon: '/static/icon/section.png',
30 }, 30 },
31 // { 31 // {
32 // title: 'Subjects', 32 // title: 'Subjects',
33 // name: 'Subject', 33 // name: 'Subject',
34 // icon: '/static/icon/subject.png', 34 // icon: '/static/icon/subject.png',
35 // }, 35 // },
36 { 36 {
37 title: 'Parents', 37 title: 'Parents',
38 // group: 'apps', 38 // group: 'apps',
39 name: 'Parents', 39 name: 'Parents',
40 icon: '/static/icon/parents.png', 40 icon: '/static/icon/parents.png',
41 }, 41 },
42 { 42 {
43 title: 'Teachers', 43 title: 'Teachers',
44 // group: '', 44 // group: '',
45 name: 'Teachers', 45 name: 'Teachers',
46 icon: '/static/icon/teacher.png', 46 icon: '/static/icon/teacher.png',
47 }, 47 },
48 { 48 {
49 title: 'Students', 49 title: 'Students',
50 // group: 'apps', 50 // group: 'apps',
51 name: 'Students', 51 name: 'Students',
52 icon: '/static/icon/student.png', 52 icon: '/static/icon/student.png',
53 }, 53 },
54 { 54 {
55 title: 'User', 55 title: 'User',
56 name: 'User', 56 name: 'User',
57 icon: '/static/icon/users.png', 57 icon: '/static/icon/users.png',
58 }, 58 },
59 { 59 {
60 title: 'Attendance', 60 title: 'Attendance',
61 group: 'Attendance', 61 group: 'Attendance',
62 component: 'Attendance', 62 component: 'Attendance',
63 icon: '/static/icon/attendence.png', 63 icon: '/static/icon/attendence.png',
64 items: [ 64 items: [
65 { name: 'StudentAttendence', title: 'Student Attendance', component: 'Student Attendence', action: '', }, 65 { name: 'StudentAttendence', title: 'Student Attendance', component: 'Student Attendence', action: '', },
66 { name: 'TeacherAttendence', title: 'Teacher Attendance', component: 'Teacher Attendence', action: '', }, 66 { name: 'TeacherAttendence', title: 'Teacher Attendance', component: 'Teacher Attendence', action: '', },
67 // { name: 'userAttendence', title: 'User Attendance', component: 'User Attendence', action: '', }, 67 // { name: 'userAttendence', title: 'User Attendance', component: 'User Attendence', action: '', },
68 ] 68 ]
69 }, 69 },
70 { 70 {
71 title: 'Exam', 71 title: 'Exam',
72 group: 'Exam', 72 group: 'Exam',
73 component: 'Exam', 73 component: 'Exam',
74 icon: '/static/icon/exam.png', 74 icon: '/static/icon/exam.png',
75 items: [ 75 items: [
76 { name: 'Exam', title: 'Exam', component: 'Exam', action: '', }, 76 { name: 'Exam', title: 'Exam', component: 'Exam', action: '', },
77 { name: 'ExamSchedule', title: 'Exam Schedule', component: 'Exam Schedule', action: '', }, 77 { name: 'ExamSchedule', title: 'Exam Schedule', component: 'Exam Schedule', action: '', },
78 { name: 'Grade', title: 'Grade', component: 'Grade', action: '', }, 78 { name: 'Grade', title: 'Grade', component: 'Grade', action: '', },
79 // { name: 'userAttendence', title: 'User Attendance', component: 'userAttendence', action: '', }, 79 // { name: 'userAttendence', title: 'User Attendance', component: 'userAttendence', action: '', },
80 ] 80 ]
81 }, 81 },
82 { 82 {
83 title: 'Marks', 83 title: 'Marks',
84 group: 'Mark', 84 group: 'Mark',
85 component: 'Mark', 85 component: 'Mark',
86 icon: '/static/icon/marks.png', 86 icon: '/static/icon/marks.png',
87 items: [ 87 items: [
88 { name: 'Mark', title: 'Mark', component: 'Mark', action: '', }, 88 { name: 'Mark', title: 'Mark', component: 'Mark', action: '', },
89 { name: 'MarkDistribution', title: 'Mark Distribution', component: 'Mark Distribution', action: '', }, 89 { name: 'MarkDistribution', title: 'Mark Distribution', component: 'Mark Distribution', action: '', },
90 // { name: 'Promotion', title: 'promotion', component: 'Promotion', action: '', }, 90 // { name: 'Promotion', title: 'promotion', component: 'Promotion', action: '', },
91 // { name: 'userAttendence', title: 'User Attendance', component: 'userAttendence', action: '', }, 91 // { name: 'userAttendence', title: 'User Attendance', component: 'userAttendence', action: '', },
92 ] 92 ]
93 }, 93 },
94 { 94 {
95 title: 'Academic', 95 title: 'Academic',
96 group: 'Academic', 96 group: 'Academic',
97 component: 'Academic', 97 component: 'Academic',
98 icon: '/static/icon/school.png', 98 icon: '/static/icon/school.png',
99 items: [ 99 items: [
100 { name: 'Subject', title: 'Subject', component: 'Subject', action: '', }, 100 { name: 'Subject', title: 'Subject', component: 'Subject', action: '', },
101 { name: 'Syllabus', title: 'Syllabus', component: 'Syllabus', action: '', }, 101 { name: 'Syllabus', title: 'Syllabus', component: 'Syllabus', action: '', },
102 { name: 'Assignment', title: 'Assignment', component: 'Assignment', action: '', }, 102 { name: 'Assignment', title: 'Assignment', component: 'Assignment', action: '', },
103 { name: 'Routine', title: 'Routine', component: 'Routine', action: '', }, 103 { name: 'Routine', title: 'Routine', component: 'Routine', action: '', },
104 ] 104 ]
105 }, 105 },
106 { 106 {
107 title: 'Administrator', 107 title: 'Administrator',
108 group: 'Administrator', 108 group: 'Administrator',
109 component: 'Administrator', 109 component: 'Administrator',
110 icon: '/static/icon/adminstrator.png', 110 icon: '/static/icon/adminstrator.png',
111 items: [ 111 items: [
112 { name: 'AcademicYear', title: 'Academic Year', component: 'Academic Year', action: '', }, 112 { name: 'AcademicYear', title: 'Academic Year', component: 'Academic Year', action: '', },
113 // { name: 'systemAdmin', title: 'System Admin', component: 'systemAdmin', action: '', }, 113 // { name: 'systemAdmin', title: 'System Admin', component: 'systemAdmin', action: '', },
114 { name: 'resetPassword', title: 'Change Password', component: 'Change Password', action: '', }, 114 { name: 'resetPassword', title: 'Change Password', component: 'Change Password', action: '', },
115 { name: 'Role', title: 'Role', component: 'Role', action: '', }, 115 { name: 'Role', title: 'Role', component: 'Role', action: '', },
116 { name: 'BulkImport', title: 'Bulk Import', component: 'Bulk Import', action: '', }, 116 { name: 'BulkImport', title: 'Bulk Import', component: 'Bulk Import', action: '', },
117 117
118 ] 118 ]
119 }, 119 },
120 { 120 {
121 title: 'Payroll', 121 title: 'Payroll',
122 group: 'Payroll', 122 group: 'Payroll',
123 component: 'Payroll', 123 component: 'Payroll',
124 icon: '/static/icon/dollar.png', 124 icon: '/static/icon/dollar.png',
125 items: [ 125 items: [
126 { name: 'salaryTemplate', title: 'Salary Template', component: 'Salary Template', action: '', }, 126 { name: 'salaryTemplate', title: 'Salary Template', component: 'Salary Template', action: '', },
127 { name: 'hourlyTemplate', title: 'Hourly Template', component: 'Hourly Template', action: '', }, 127 { name: 'hourlyTemplate', title: 'Hourly Template', component: 'Hourly Template', action: '', },
128 { name: 'manageSalary', title: 'Manage Salary', component: 'Manage Salary', action: '', }, 128 { name: 'manageSalary', title: 'Manage Salary', component: 'Manage Salary', action: '', },
129 // { name: 'makePayment', title: 'Make Payment', component: 'Make Payment', action: '', }, 129 // { name: 'makePayment', title: 'Make Payment', component: 'Make Payment', action: '', },
130 ] 130 ]
131 }, 131 },
132 { 132 {
133 title: 'Notice Board', 133 title: 'Notice Board',
134 name: 'Notice Board', 134 name: 'Notice Board',
135 icon: '/static/icon/notice board.png', 135 icon: '/static/icon/notice board.png',
136 }, 136 },
137 { 137 {
138 title: 'News', 138 title: 'News',
139 name: 'News', 139 name: 'News',
140 icon: '/static/icon/news.png', 140 icon: '/static/icon/news.png',
141 }, 141 },
142 // { 142 // {
143 // title: 'Reminder', 143 // title: 'Reminder',
144 // name: 'reminder', 144 // name: 'reminder',
145 // icon: 'alarm_add', 145 // icon: 'alarm_add',
146 // }, 146 // },
147 { 147 {
148 title: 'Time Table', 148 title: 'Time Table',
149 name: 'Time Table', 149 name: 'Time Table',
150 icon: '/static/icon/time table.png', 150 icon: '/static/icon/time table.png',
151 }, 151 },
152 { 152 {
153 title: 'Library', 153 title: 'Library',
154 group: 'Library', 154 group: 'Library',
155 component: 'Library', 155 component: 'Library',
156 icon: '/static/icon/library.png', 156 icon: '/static/icon/library.png',
157 items: [ 157 items: [
158 { name: 'LibraryMember', title: ' Library Member', component: 'Library Member', action: '', }, 158 { name: 'LibraryMember', title: ' Library Member', component: 'Library Member', action: '', },
159 { name: 'Books', title: 'Books', component: 'Books', action: '', }, 159 { name: 'Books', title: 'Books', component: 'Books', action: '', },
160 { name: 'Issue', title: ' Issue', component: 'Issue', action: '', }, 160 { name: 'Issue', title: ' Issue', component: 'Issue', action: '', },
161 { name: 'E-Books', title: 'E-Books', component: 'E-Books', action: '', } 161 { name: 'E-Books', title: 'E-Books', component: 'E-Books', action: '', }
162 162
163 ] 163 ]
164 }, 164 },
165 { 165 {
166 title: 'Report', 166 title: 'Report',
167 group: 'Report', 167 group: 'Report',
168 component: 'Report', 168 component: 'Report',
169 icon: '/static/icon/reports.png', 169 icon: '/static/icon/reports.png',
170 items: [ 170 items: [
171 { name: 'studentReport', title: 'Student Report', component: 'Student Report', action: '', }, 171 { name: 'studentReport', title: 'Student Report', component: 'Student Report', action: '', },
172 { name: 'ProgressCardReport', title: 'Progress Card Report', component: 'Progress Card Report', action: '', }, 172 { name: 'ProgressCardReport', title: 'Progress Card Report', component: 'Progress Card Report', action: '', },
173 { name: 'idCard', title: 'Id Card Report', component: 'Id Card Report', action: '', }, 173 { name: 'idCard', title: 'Id Card Report', component: 'Id Card Report', action: '', },
174 { name: 'admitCard', title: 'Admit Card Report', component: 'Admit Card Report', action: '', } 174 { name: 'admitCard', title: 'Admit Card Report', component: 'Admit Card Report', action: '', }
175 ] 175 ]
176 }, 176 },
177 { 177 {
178 title: 'Notification', 178 title: 'Notification',
179 name: 'Notification', 179 name: 'Notification',
180 icon: '/static/icon/notification.png', 180 icon: '/static/icon/notification.png',
181 }, 181 },
182 { 182 {
183 title: 'Social Media', 183 title: 'Social Media',
184 name: 'Social Media', 184 name: 'Social Media',
185 icon: '/static/icon/events.png', 185 icon: '/static/icon/events.png',
186 }, 186 },
187 { 187 {
188 title: 'Gallery', 188 title: 'Gallery',
189 name: 'Gallery', 189 name: 'Gallery',
190 icon: '/static/icon/gallery.png', 190 icon: '/static/icon/gallery.png',
191 }, 191 },
192 { 192 {
193 title: 'Event', 193 title: 'Event',
194 name: 'Event', 194 name: 'Event',
195 icon: '/static/icon/events.png', 195 icon: '/static/icon/events.png',
196 }, 196 },
197 { 197 {
198 title: 'Account', 198 title: 'Account',
199 group: 'Account', 199 group: 'Account',
200 component: 'Account', 200 component: 'Account',
201 icon: '/static/icon/accounts.png', 201 icon: '/static/icon/accounts.png',
202 items: [ 202 items: [
203 { name: 'feeTypes', title: 'Fee Types', component: 'Fee Types', action: '', }, 203 { name: 'feeTypes', title: 'Fee Types', component: 'Fee Types', action: '', },
204 { name: 'Invoice', title: 'Invoice', component: 'Invoice', action: '', }, 204 { name: 'Invoice', title: 'Invoice', component: 'Invoice', action: '', },
205 { name: 'PaymentHistory', title: 'Payment History', component: 'Payment History', action: '', }, 205 { name: 'PaymentHistory', title: 'Payment History', component: 'Payment History', action: '', },
206 { name: 'Expense', title: 'Expense', component: 'Expense', action: '', }, 206 { name: 'Expense', title: 'Expense', component: 'Expense', action: '', },
207 { name: 'Income', title: 'Income', component: 'Income', action: '', }, 207 { name: 'Income', title: 'Income', component: 'Income', action: '', },
208 { name: 'GlobalPayment', title: 'Global Payment', component: 'Global Payment', action: '', } 208 { name: 'GlobalPayment', title: 'Global Payment', component: 'Global Payment', action: '', }
209 ] 209 ]
210 }, 210 },
211 { 211 {
212 title: 'Holiday', 212 title: 'Holiday',
213 name: 'Holiday', 213 name: 'Holiday',
214 icon: '/static/icon/holiday.png', 214 icon: '/static/icon/holiday.png',
215 }, 215 },
216 { 216 {
217 title: 'General Setting', 217 title: 'General Setting',
218 name: 'General Setting', 218 name: 'General Setting',
219 icon: '/static/icon/settings.png', 219 icon: '/static/icon/settings.png',
220 } 220 }
221 ]; 221 ];
222 222
223 const libraryMenu = [{ 223 const libraryMenu = [{
224 title: 'Dashboard', 224 title: 'Dashboard',
225 name: 'Dashboard', 225 name: 'Dashboard',
226 icon: '/static/icon/dashboard.png', 226 icon: '/static/icon/dashboard.png',
227 }, 227 },
228 { 228 {
229 title: 'Library', 229 title: 'Library',
230 group: 'Library', 230 group: 'Library',
231 component: 'Library', 231 component: 'Library',
232 icon: '/static/icon/library.png', 232 icon: '/static/icon/library.png',
233 items: [ 233 items: [
234 { name: 'LibraryMember', title: ' Library Member', component: 'Library Member', action: '', }, 234 { name: 'LibraryMember', title: ' Library Member', component: 'Library Member', action: '', },
235 { name: 'Books', title: 'Books', component: 'Books', action: '', }, 235 { name: 'Books', title: 'Books', component: 'Books', action: '', },
236 { name: 'Issue', title: ' Issue', component: 'Issue', action: '', }, 236 { name: 'Issue', title: ' Issue', component: 'Issue', action: '', },
237 { name: 'E-Books', title: 'E-Books', component: 'E-Books', action: '', } 237 { name: 'E-Books', title: 'E-Books', component: 'E-Books', action: '', }
238 238
239 ] 239 ]
240 }, 240 },
241 ]; 241 ];
242 242
243 const accountMenu = [{ 243 const accountMenu = [{
244 title: 'Dashboard', 244 title: 'Dashboard',
245 name: 'Dashboard', 245 name: 'Dashboard',
246 icon: '/static/icon/dashboard.png', 246 icon: '/static/icon/dashboard.png',
247 }, 247 },
248 248
249 { 249 {
250 title: 'Account', 250 title: 'Account',
251 group: 'Account', 251 group: 'Account',
252 component: 'Account', 252 component: 'Account',
253 icon: '/static/icon/accounts.png', 253 icon: '/static/icon/accounts.png',
254 items: [ 254 items: [
255 { name: 'feeTypes', title: 'Fee Types', component: 'Fee Types', action: '', }, 255 { name: 'feeTypes', title: 'Fee Types', component: 'Fee Types', action: '', },
256 { name: 'Invoice', title: 'Invoice', component: 'Invoice', action: '', }, 256 { name: 'Invoice', title: 'Invoice', component: 'Invoice', action: '', },
257 { name: 'PaymentHistory', title: 'Payment History', component: 'Payment History', action: '', }, 257 { name: 'PaymentHistory', title: 'Payment History', component: 'Payment History', action: '', },
258 { name: 'Expense', title: 'Expense', component: 'Expense', action: '', }, 258 { name: 'Expense', title: 'Expense', component: 'Expense', action: '', },
259 { name: 'Income', title: 'Income', component: 'Income', action: '', }, 259 { name: 'Income', title: 'Income', component: 'Income', action: '', },
260 { name: 'GlobalPayment', title: 'Global Payment', component: 'Global Payment', action: '', } 260 { name: 'GlobalPayment', title: 'Global Payment', component: 'Global Payment', action: '', }
261 ] 261 ]
262 }, 262 },
263 ]; 263 ];
264 264
265 const schoolMenu = [ 265 const schoolMenu = [
266 // { header: 'Apps' }, 266 // { header: 'Apps' },
267 { 267 {
268 title: 'Dashboard', 268 title: 'Dashboard',
269 // group: 'apps', 269 // group: 'apps',
270 name: 'View School Dashboard', 270 name: 'View School Dashboard',
271 icon: '/static/icon/dashboard.png', 271 icon: '/static/icon/dashboard.png',
272 }, 272 },
273 { 273 {
274 title: 'School', 274 title: 'School',
275 // group: 'apps', 275 // group: 'apps',
276 name: 'School', 276 name: 'School',
277 icon: '/static/icon/school.png', 277 icon: '/static/icon/school.png',
278 }, 278 },
279 { 279 {
280 title: 'App Version', 280 title: 'App Version',
281 name: 'App Version', 281 name: 'App Version',
282 icon: '/static/icon/phone.png', 282 icon: '/static/icon/phone.png',
283 } 283 }
284 ]; 284 ];
285 285
286 const teacherMenu = [{ 286 const teacherMenu = [{
287 title: 'Dashboard', 287 title: 'Dashboard',
288 name: 'Dashboard', 288 name: 'Dashboard',
289 icon: '/static/icon/dashboard.png', 289 icon: '/static/icon/dashboard.png',
290 }, 290 },
291 { 291 {
292 title: 'Parents', 292 title: 'Parents',
293 // group: 'apps', 293 // group: 'apps',
294 name: 'Parents', 294 name: 'Parents',
295 icon: '/static/icon/parents.png', 295 icon: '/static/icon/parents.png',
296 }, 296 },
297 { 297 {
298 title: 'Teachers', 298 title: 'Teachers',
299 // group: '', 299 // group: '',
300 name: 'Teachers', 300 name: 'Teachers',
301 icon: '/static/icon/teacher.png', 301 icon: '/static/icon/teacher.png',
302 }, 302 },
303 { 303 {
304 title: 'Students', 304 title: 'Students',
305 // group: 'apps', 305 // group: 'apps',
306 name: 'Students', 306 name: 'Students',
307 icon: '/static/icon/student.png', 307 icon: '/static/icon/student.png',
308 }, 308 },
309 { 309 {
310 title: 'Academic', 310 title: 'Academic',
311 group: 'Academic', 311 group: 'Academic',
312 component: 'Academic', 312 component: 'Academic',
313 icon: '/static/icon/school.png', 313 icon: '/static/icon/school.png',
314 items: [ 314 items: [
315 { name: 'Subject', title: 'Subject', component: 'Subject', action: '', }, 315 { name: 'Subject', title: 'Subject', component: 'Subject', action: '', },
316 { name: 'Syllabus', title: 'Syllabus', component: 'Syllabus', action: '', }, 316 { name: 'Syllabus', title: 'Syllabus', component: 'Syllabus', action: '', },
317 { name: 'Assignment', title: 'Assignment', component: 'Assignment', action: '', }, 317 { name: 'Assignment', title: 'Assignment', component: 'Assignment', action: '', },
318 { name: 'Routine', title: 'Routine', component: 'Routine', action: '', }, 318 { name: 'Routine', title: 'Routine', component: 'Routine', action: '', },
319 ] 319 ]
320 }, 320 },
321 { 321 {
322 title: 'Course', 322 title: 'Course',
323 group: 'Course', 323 group: 'Course',
324 component: 'Course', 324 component: 'Course',
325 icon: '/static/icon/school.png', 325 icon: '/static/icon/school.png',
326 items: [ 326 items: [
327 { name: 'Course', title: 'Course', component: 'Course', action: '', }, 327 { name: 'Course', title: 'Course', component: 'Course', action: '', },
328 { name: 'Enroll Students', title: 'Enroll Students', component: 'Enroll Students', action: '', }, 328 { name: 'Enroll Students', title: 'Enroll Students', component: 'Enroll Students', action: '', },
329 { name: 'Course Detail', title: 'Course Detail', component: 'Course Detail', action: '', }, 329 { name: 'Course Detail', title: 'Course Detail', component: 'Course Detail', action: '', },
330 { name: 'Course Discussion', title: 'Course Discussion', component: 'Course Discussion', action: '', }, 330 { name: 'Course Discussion', title: 'Course Discussion', component: 'Course Discussion', action: '', },
331 ] 331 ]
332 }, 332 },
333 { 333 {
334 title: 'Annoucement', 334 title: 'Annoucement',
335 // group: 'apps', 335 // group: 'apps',
336 name: 'Annoucement', 336 name: 'Annoucement',
337 icon: '/static/icon/student.png', 337 icon: '/static/icon/student.png',
338 }, 338 },
339 { 339 {
340 title: 'Meeting Event', 340 title: 'Meeting Event',
341 // group: 'apps', 341 // group: 'apps',
342 name: 'Meeting Event', 342 name: 'Meeting Event',
343 icon: '/static/icon/student.png', 343 icon: '/static/icon/student.png',
344 }, 344 },
345 { 345 {
346 title: 'Attendance', 346 title: 'Attendance',
347 group: 'Attendance', 347 group: 'Attendance',
348 component: 'Attendance', 348 component: 'Attendance',
349 icon: '/static/icon/attendence.png', 349 icon: '/static/icon/attendence.png',
350 items: [ 350 items: [
351 { name: 'StudentAttendence', title: 'Student Attendance', component: 'Student Attendence', action: '', }, 351 { name: 'StudentAttendence', title: 'Student Attendance', component: 'Student Attendence', action: '', },
352 { name: 'TeacherAttendence', title: 'Teacher Attendance', component: 'Teacher Attendence', action: '', }, 352 { name: 'TeacherAttendence', title: 'Teacher Attendance', component: 'Teacher Attendence', action: '', },
353 // { name: 'userAttendence', title: 'User Attendance', component: 'User Attendence', action: '', }, 353 // { name: 'userAttendence', title: 'User Attendance', component: 'User Attendence', action: '', },
354 ] 354 ]
355 }, 355 },
356 { 356 {
357 title: 'Exam', 357 title: 'Exam',
358 group: 'Exam', 358 group: 'Exam',
359 component: 'Exam', 359 component: 'Exam',
360 icon: '/static/icon/exam.png', 360 icon: '/static/icon/exam.png',
361 items: [ 361 items: [
362 { name: 'ExamSchedule', title: 'Exam Schedule', component: 'Exam Schedule', action: '', }, 362 { name: 'ExamSchedule', title: 'Exam Schedule', component: 'Exam Schedule', action: '', },
363 { name: 'ExamAttendence', title: 'Exam Attendence', component: 'Exam Attendence', action: '', } 363 { name: 'ExamAttendence', title: 'Exam Attendence', component: 'Exam Attendence', action: '', }
364 ] 364 ]
365 }, 365 },
366 { 366 {
367 title: 'Marks', 367 title: 'Marks',
368 group: 'Mark', 368 group: 'Mark',
369 component: 'Mark', 369 component: 'Mark',
370 icon: '/static/icon/marks.png', 370 icon: '/static/icon/marks.png',
371 items: [ 371 items: [
372 { name: 'Mark', title: 'Mark', component: 'Mark', action: '', } 372 { name: 'Mark', title: 'Mark', component: 'Mark', action: '', }
373 ] 373 ]
374 }, 374 },
375 { 375 {
376 title: 'Report', 376 title: 'Report',
377 group: 'Report', 377 group: 'Report',
378 component: 'Report', 378 component: 'Report',
379 icon: '/static/icon/reports.png', 379 icon: '/static/icon/reports.png',
380 items: [ 380 items: [
381 { name: 'studentReport', title: 'Student Report', component: 'Student Report', action: '', }, 381 { name: 'studentReport', title: 'Student Report', component: 'Student Report', action: '', },
382 { name: 'ProgressCardReport', title: 'Progress Card Report', component: 'Progress Card Report', action: '', }, 382 { name: 'ProgressCardReport', title: 'Progress Card Report', component: 'Progress Card Report', action: '', },
383 { name: 'idCard', title: 'Id Card Report', component: 'Id Card Report', action: '', }, 383 { name: 'idCard', title: 'Id Card Report', component: 'Id Card Report', action: '', },
384 { name: 'admitCard', title: 'Admit Card Report', component: 'Admit Card Report', action: '', } 384 { name: 'admitCard', title: 'Admit Card Report', component: 'Admit Card Report', action: '', }
385 ] 385 ]
386 }, 386 },
387 { 387 {
388 title: 'Library', 388 title: 'Library',
389 group: 'Library', 389 group: 'Library',
390 component: 'Library', 390 component: 'Library',
391 icon: '/static/icon/library.png', 391 icon: '/static/icon/library.png',
392 items: [ 392 items: [
393 { name: 'Books', title: 'Books', component: 'Books', action: '', }, 393 { name: 'Books', title: 'Books', component: 'Books', action: '', },
394 { name: 'E-Books', title: 'E-Books', component: 'E-Books', action: '', } 394 { name: 'E-Books', title: 'E-Books', component: 'E-Books', action: '', }
395 395
396 ] 396 ]
397 }, 397 },
398 // { 398 // {
399 // title: 'Meet', 399 // title: 'Meet',
400 // name: 'Meet', 400 // name: 'Meet',
401 // icon: '/static/icon/meet_icon_navigation.png', 401 // icon: '/static/icon/meet_icon_navigation.png',
402 // } 402 // }
403 ]; 403 ];
404 404
405 const parentMenu = [{ 405 const parentMenu = [{
406 title: 'Dashboard', 406 title: 'Dashboard',
407 name: 'Dashboard', 407 name: 'Dashboard',
408 icon: '/static/icon/dashboard.png', 408 icon: '/static/icon/dashboard.png',
409 }, 409 },
410 { 410 {
411 title: "Change Student", 411 title: "Change Student",
412 name: 'Change Students', 412 name: 'Change Students',
413 Vicon: "face", 413 Vicon: "face",
414 click: e => { 414 click: e => {
415 // console.log(e); 415 // console.log(e);
416 } 416 }
417 }]; 417 }];
418 // reorder menu 418 // reorder menu
419 // Menu.forEach((item) => { 419 // Menu.forEach((item) => {
420 // if (item.items) { 420 // if (item.items) {
421 // item.items.sort((x, y) => { 421 // item.items.sort((x, y) => {
422 // let textA = x.title.toUpperCase(); 422 // let textA = x.title.toUpperCase();
423 // let textB = y.title.toUpperCase(); 423 // let textB = y.title.toUpperCase();
424 // return (textA < textB) ? -1 : (textA > textB) ? 1 : 0; 424 // return (textA < textB) ? -1 : (textA > textB) ? 1 : 0;
425 // }); 425 // });
426 // } 426 // }
427 // }); 427 // });
428 428
429 export default { adminMenu, schoolMenu, teacherMenu, libraryMenu, accountMenu, parentMenu }; 429 export default { adminMenu, schoolMenu, teacherMenu, libraryMenu, accountMenu, parentMenu };
src/components/pageHeader/AppToolbar.vue
Diff comments   View file @8b7976c
1 <template> 1 <template>
2 <v-toolbar flat class="white" fixed app> 2 <v-toolbar flat class="white" fixed app>
3 <v-toolbar-title> 3 <v-toolbar-title>
4 <v-toolbar-side-icon @click.stop="handleDrawerToggle" class="hide darkBlue-color"></v-toolbar-side-icon> 4 <v-toolbar-side-icon @click.stop="handleDrawerToggle" class="hide darkBlue-color"></v-toolbar-side-icon>
5 </v-toolbar-title> 5 </v-toolbar-title>
6 <!-- ****** SEARCH ALL EXISTING STUDENTS ****** --> 6 <!-- ****** SEARCH ALL EXISTING STUDENTS ****** -->
7 <v-flex xs12 class="white"> 7 <v-flex xs12 class="white">
8 <!-- <v-text-field 8 <!-- <v-text-field
9 flat 9 flat
10 append-icon="search" 10 append-icon="search"
11 label="Seacrh" 11 label="Seacrh"
12 class="pl-3" 12 class="pl-3"
13 color="white" 13 color="white"
14 @input.native="emitSearch" 14 @input.native="emitSearch"
15 type="text" 15 type="text"
16 dark 16 dark
17 ></v-text-field>--> 17 ></v-text-field>-->
18 <v-toolbar-title class="header-route-name pl-2">{{ $route.name }}</v-toolbar-title> 18 <v-toolbar-title class="header-route-name pl-2">{{ $route.name }}</v-toolbar-title>
19 </v-flex> 19 </v-flex>
20 <v-spacer></v-spacer> 20 <v-spacer></v-spacer>
21 <v-btn type="button" @click="goToSchool" v-if="adminRole && SchoolRole">Towards School!</v-btn> 21 <v-btn type="button" @click="goToSchool" v-if="adminRole && SchoolRole">Towards School!</v-btn>
22 <!-- <v-toolbar-items class="hidden-sm-and-down"> 22 <!-- <v-toolbar-items class="hidden-sm-and-down">
23 <v-icon class="header-icon">notifications_none</v-icon> 23 <v-icon class="header-icon">notifications_none</v-icon>
24 </v-toolbar-items>--> 24 </v-toolbar-items>-->
25 <v-menu offset-y origin="center center" :nudge-bottom="10" transition="scale-transition"> 25 <v-menu offset-y origin="center center" :nudge-bottom="10" transition="scale-transition">
26 <v-btn icon large flat slot="activator"> 26 <v-btn icon large flat slot="activator">
27 <v-avatar size="26"> 27 <v-avatar size="26">
28 <img src="/static/icon/setting1.png" alt="icon" /> 28 <img src="/static/icon/setting1.png" alt="icon" />
29 </v-avatar> 29 </v-avatar>
30 </v-btn> 30 </v-btn>
31 <v-list class="pa-0"> 31 <v-list class="pa-0">
32 <v-list-tile 32 <v-list-tile
33 v-for="(item,index) in items" 33 v-for="(item,index) in items"
34 :to="!item.href ? { name: item.name } : null" 34 :to="!item.href ? { name: item.name } : null"
35 :href="item.href" 35 :href="item.href"
36 @click="item.click" 36 @click="item.click"
37 ripple="ripple" 37 ripple="ripple"
38 :disabled="item.disabled" 38 :disabled="item.disabled"
39 :target="item.target" 39 :target="item.target"
40 rel="noopener" 40 rel="noopener"
41 :key="index" 41 :key="index"
42 > 42 >
43 <v-list-tile-action v-if="item.icon"> 43 <v-list-tile-action v-if="item.icon">
44 <v-icon class="iconSize">{{ item.icon }}</v-icon> 44 <v-icon class="iconSize">{{ item.icon }}</v-icon>
45 </v-list-tile-action> 45 </v-list-tile-action>
46 <v-list-tile-content> 46 <v-list-tile-content>
47 <v-list-tile-title>{{ item.title }}</v-list-tile-title> 47 <v-list-tile-title>{{ item.title }}</v-list-tile-title>
48 </v-list-tile-content> 48 </v-list-tile-content>
49 </v-list-tile> 49 </v-list-tile>
50 </v-list> 50 </v-list>
51 </v-menu> 51 </v-menu>
52 </v-toolbar> 52 </v-toolbar>
53 </template> 53 </template>
54 <script> 54 <script>
55 import http from "@/Services/http.js"; 55 import http from "@/Services/http.js";
56 56
57 export default { 57 export default {
58 name: "app-toolbar", 58 name: "app-toolbar",
59 data: () => ({ 59 data: () => ({
60 userName: "", 60 userName: "",
61 search: "", 61 search: "",
62 userData: {}, 62 userData: {},
63 items: [ 63 items: [
64 { 64 {
65 icon: "account_circle", 65 icon: "account_circle",
66 href: "/resetPassword", 66 href: "/resetPassword",
67 title: "Change Password", 67 title: "Change Password",
68 click: (e) => { 68 click: (e) => {
69 // console.log(e); 69 // console.log(e);
70 }, 70 },
71 }, 71 },
72 // { 72 // {
73 // icon: 'settings', 73 // icon: 'settings',
74 // href: '#', 74 // href: '#',
75 // title: 'Settings', 75 // title: 'Settings',
76 // click: (e) => { 76 // click: (e) => {
77 // console.log(e); 77 // console.log(e);
78 // } 78 // }
79 // }, 79 // },
80 { 80 {
81 icon: "lock", 81 icon: "lock",
82 href: "#", 82 href: "#",
83 title: "Logout", 83 title: "Logout",
84 click: (e) => { 84 click: (e) => {
85 window.getApp.$emit("APP_LOGOUT"); 85 window.getApp.$emit("APP_LOGOUT");
86 }, 86 },
87 }, 87 },
88 ], 88 ],
89 adminRole: "", 89 adminRole: "",
90 SchoolRole: "", 90 SchoolRole: "",
91 }), 91 }),
92 computed: { 92 computed: {
93 toolbarColor() { 93 toolbarColor() {
94 return this.$vuetify.options.extra.mainNav; 94 return this.$vuetify.options.extra.mainNav;
95 }, 95 },
96 }, 96 },
97 mounted() { 97 mounted() {
98 // this.getUserData(); 98 // this.getUserData();
99 this.adminRole = this.$store.state.role; 99 this.adminRole = this.$store.state.role;
100 /* push something in the settings option */ 100 /* push something in the settings option */
101 // if (this.adminRole == "PARENT") { 101 // if (this.adminRole == "PARENT") {
102 // var obj = {}; 102 // var obj = {};
103 // obj = { 103 // obj = {
104 // icon: "face", 104 // icon: "face",
105 // href: "/changeStudents", 105 // href: "/changeStudents",
106 // title: "Change Student", 106 // title: "Change Student",
107 // click: e => { 107 // click: e => {
108 // console.log(e); 108 // console.log(e);
109 // } 109 // }
110 // }; 110 // };
111 // this.items.splice(0, 0, obj); 111 // this.items.splice(0, 0, obj);
112 // } 112 // }
113 // console.log("this.adminRole", this.adminRole); 113 // console.log("this.adminRole", this.adminRole);
114 this.SchoolRole = this.$store.state.schoolRole; 114 this.SchoolRole = this.$store.state.schoolRole;
115 }, 115 },
116 methods: { 116 methods: {
117 // emitSearch(ev) { 117 // emitSearch(ev) {
118 // this.$root.$emit("app:search", ev.target.value); 118 // this.$root.$emit("app:search", ev.target.value);
119 // }, 119 // },
120 handleDrawerToggle() { 120 handleDrawerToggle() {
121 window.getApp.$emit("APP_DRAWER_TOGGLED"); 121 window.getApp.$emit("APP_DRAWER_TOGGLED");
122 }, 122 },
123 handleFullScreen() { 123 handleFullScreen() {
124 Util.toggleFullScreen(); 124 Util.toggleFullScreen();
125 }, 125 },
126 getUserData() { 126 getUserData() {
127 http() 127 http()
128 .get("/getParticularUserDetail", { 128 .get("/getParticularUserDetail", {
129 // headers: { 129 // headers: {
130 // Authorization: "Bearer " + this.$store.state.token 130 // Authorization: "Bearer " + this.$store.state.token
131 // } 131 // }
132 }) 132 })
133 .then((response) => { 133 .then((response) => {
134 this.userData = response.data.data; 134 this.userData = response.data.data;
135 }) 135 })
136 .catch((error) => { 136 .catch((error) => {
137 // if (error.response.status === 401) { 137 // if (error.response.status === 401) {
138 // this.$router.replace({ path: "/" }); 138 // this.$router.replace({ path: "/" });
139 // this.$store.dispatch("setToken", null); 139 // this.$store.dispatch("setToken", null);
140 // this.$store.dispatch("Id", null); 140 // this.$store.dispatch("Id", null);
141 // } 141 // }
142 }); 142 });
143 }, 143 },
144 goToSchool() { 144 goToSchool() {
145 // console.log("click"); 145 // console.log("click");
146 if (this.$store.state.role === "ADMIN") { 146 if (this.$store.state.role === "ADMIN") {
147 this.$store.dispatch("Role", null); 147 this.$store.dispatch("Role", null);
148 this.$store.dispatch("setToken", null); 148 this.$store.dispatch("setToken", null);
149 this.$router.push("/schooldashboard"); 149 this.$router.push("/schooldashboard");
150 setTimeout(() => { 150 setTimeout(() => {
151 location.reload(); 151 location.reload();
152 }, 1000); 152 }, 1000);
153 } 153 }
154 }, 154 },
155 }, 155 },
156 }; 156 };
157 </script> 157 </script>
158 <style> 158 <style>
159 .v-icon { 159 .v-icon {
160 font-size: 30px; 160 font-size: 30px;
161 } 161 }
162 .fixcolors { 162 .fixcolors {
163 background: #444b54 !important; 163 background: #444b54 !important;
164 } 164 }
165 165
166 @media screen and (min-width: 1270px) { 166 @media screen and (min-width: 1270px) {
167 .hide { 167 .hide {
168 display: none; 168 display: none;
169 } 169 }
170 /* } 170 /* }
171 @media screen and (max-width: 962px) { 171 @media screen and (max-width: 962px) {
172 .imglogo{ 172 .imglogo{
173 position: absolute; 173 position: absolute;
174 top: 13px; 174 top: 13px;
175 left: 13px !important; 175 left: 13px !important;
176 width: 70px; 176 width: 70px;
177 height: 24px; 177 height: 24px;
178 } */ 178 } */
179 } 179 }
180 @media screen and (max-width: 420px) { 180 @media screen and (max-width: 420px) {
181 .v-list__tile { 181 .v-list__tile {
182 font-size: 14px; 182 font-size: 14px;
183 padding: 0 10px; 183 padding: 0 10px;
184 } 184 }
185 .name { 185 .name {
186 font-size: 15px; 186 font-size: 15px;
187 } 187 }
188 } 188 }
189 </style> 189 </style>
190 190
src/pages/Academic/routine.vue
Diff comments   View file @8b7976c
1 <template> 1 <template>
2 <v-container fluid class="body-color"> 2 <v-container fluid class="body-color">
3 <!-- ****** EDIT Subject ****** --> 3 <!-- ****** EDIT Subject ****** -->
4 <v-dialog v-model="editRoutineDialog" max-width="600px" persistent> 4 <v-dialog v-model="editRoutineDialog" max-width="600px" persistent>
5 <v-card flat class="card-style pa-2" dark> 5 <v-card flat class="card-style pa-2" dark>
6 <v-layout> 6 <v-layout>
7 <v-flex xs12> 7 <v-flex xs12>
8 <label class="title text-xs-center">Edit Routine</label> 8 <label class="title text-xs-center">Edit Routine</label>
9 <v-icon size="24" class="right" @click="editRoutineDialog = false">cancel</v-icon> 9 <v-icon size="24" class="right" @click="editRoutineDialog = false">cancel</v-icon>
10 </v-flex> 10 </v-flex>
11 </v-layout> 11 </v-layout>
12 <v-container fluid> 12 <v-container fluid>
13 <v-form ref="formEditRoutine" v-model="validEditRoutine" lazy-validation> 13 <v-form ref="formEditRoutine" v-model="validEditRoutine" lazy-validation>
14 <v-layout> 14 <v-layout>
15 <v-flex xs3 sm4 class="pt-4 subheading"> 15 <v-flex xs3 sm4 class="pt-4 subheading">
16 <label class="right">Class :</label> 16 <label class="right">Class :</label>
17 </v-flex> 17 </v-flex>
18 <v-flex xs8 sm8 class="ml-2"> 18 <v-flex xs8 sm8 class="ml-2">
19 <v-select 19 <v-select
20 :items="classList" 20 :items="classList"
21 label="Select your Class" 21 label="Select your Class"
22 v-model="editedItem.classId" 22 v-model="editedItem.classId"
23 item-text="classNum" 23 item-text="classNum"
24 item-value="_id" 24 item-value="_id"
25 :rules="classRules" 25 :rules="classRules"
26 @change="getClassSubject(editedItem.classId)" 26 @change="getClassSubject(editedItem.classId)"
27 required 27 required
28 ></v-select> 28 ></v-select>
29 </v-flex> 29 </v-flex>
30 </v-layout> 30 </v-layout>
31 <v-layout> 31 <v-layout>
32 <v-flex xs3 sm4 class="pt-4 subheading"> 32 <v-flex xs3 sm4 class="pt-4 subheading">
33 <label class="right">Subject :</label> 33 <label class="right">Subject :</label>
34 </v-flex> 34 </v-flex>
35 <v-flex xs8 sm8 class="ml-2"> 35 <v-flex xs8 sm8 class="ml-2">
36 <v-select 36 <v-select
37 :items="subjectList.subjects" 37 :items="subjectList.subjects"
38 label="Select your subject" 38 label="Select your subject"
39 v-model="editedItem.subjectName" 39 v-model="editedItem.subjectName"
40 item-text="subjectName" 40 item-text="subjectName"
41 item-value="_id" 41 item-value="_id"
42 :rules="subjectRules" 42 :rules="subjectRules"
43 required 43 required
44 ></v-select> 44 ></v-select>
45 </v-flex> 45 </v-flex>
46 </v-layout> 46 </v-layout>
47 <v-layout> 47 <v-layout>
48 <v-flex xs4 sm4 class="pt-4 subheading"> 48 <v-flex xs4 sm4 class="pt-4 subheading">
49 <label class="right">Teacher Name :</label> 49 <label class="right">Teacher Name :</label>
50 </v-flex> 50 </v-flex>
51 <v-flex xs8 sm8 class="ml-3"> 51 <v-flex xs8 sm8 class="ml-3">
52 <v-select 52 <v-select
53 :items="teacherList" 53 :items="teacherList"
54 label="Select your teacher" 54 label="Select your teacher"
55 v-model="editedItem.teacherId" 55 v-model="editedItem.teacherId"
56 item-text="name" 56 item-text="name"
57 item-value="_id" 57 item-value="_id"
58 :rules="teacherRules" 58 :rules="teacherRules"
59 required 59 required
60 ></v-select> 60 ></v-select>
61 </v-flex> 61 </v-flex>
62 </v-layout> 62 </v-layout>
63 <v-layout> 63 <v-layout>
64 <v-flex xs5 sm4 class="pt-4 subheading"> 64 <v-flex xs5 sm4 class="pt-4 subheading">
65 <label class="right">Starting time:</label> 65 <label class="right">Starting time:</label>
66 </v-flex> 66 </v-flex>
67 <v-flex xs7 sm6 class="ml-3"> 67 <v-flex xs7 sm6 class="ml-3">
68 <v-menu 68 <v-menu
69 ref="menuC" 69 ref="menuC"
70 :close-on-content-click="false" 70 :close-on-content-click="false"
71 v-model="menu4" 71 v-model="menu4"
72 :nudge-right="40" 72 :nudge-right="40"
73 lazy 73 lazy
74 transition="scale-transition" 74 transition="scale-transition"
75 offset-y 75 offset-y
76 full-width 76 full-width
77 max-width="290px" 77 max-width="290px"
78 min-width="290px" 78 min-width="290px"
79 > 79 >
80 <v-text-field 80 <v-text-field
81 slot="activator" 81 slot="activator"
82 v-model="editedItem.startingTime" 82 v-model="editedItem.startingTime"
83 placeholder="Select your starting time" 83 placeholder="Select your starting time"
84 append-icon="access_time" 84 append-icon="access_time"
85 readonly 85 readonly
86 ></v-text-field> 86 ></v-text-field>
87 <v-time-picker v-model="editedItem.startingTime" @change="menu4= false"></v-time-picker> 87 <v-time-picker v-model="editedItem.startingTime" @change="menu4= false"></v-time-picker>
88 </v-menu> 88 </v-menu>
89 </v-flex> 89 </v-flex>
90 </v-layout> 90 </v-layout>
91 <v-layout> 91 <v-layout>
92 <v-flex xs5 sm4 class="pt-4 subheading"> 92 <v-flex xs5 sm4 class="pt-4 subheading">
93 <label class="right">Ending Time:</label> 93 <label class="right">Ending Time:</label>
94 </v-flex> 94 </v-flex>
95 <v-flex xs7 sm6 class="ml-3"> 95 <v-flex xs7 sm6 class="ml-3">
96 <v-menu 96 <v-menu
97 ref="menuB" 97 ref="menuB"
98 :close-on-content-click="false" 98 :close-on-content-click="false"
99 v-model="menu3" 99 v-model="menu3"
100 :nudge-right="40" 100 :nudge-right="40"
101 lazy 101 lazy
102 transition="scale-transition" 102 transition="scale-transition"
103 offset-y 103 offset-y
104 full-width 104 full-width
105 max-width="290px" 105 max-width="290px"
106 min-width="290px" 106 min-width="290px"
107 > 107 >
108 <v-text-field 108 <v-text-field
109 slot="activator" 109 slot="activator"
110 v-model="editedItem.endingTime" 110 v-model="editedItem.endingTime"
111 placeholder="Select your end time" 111 placeholder="Select your end time"
112 append-icon="access_time" 112 append-icon="access_time"
113 readonly 113 readonly
114 ></v-text-field> 114 ></v-text-field>
115 <v-time-picker v-model="editedItem.endingTime" @change="menu3 = false"></v-time-picker> 115 <v-time-picker v-model="editedItem.endingTime" @change="menu3 = false"></v-time-picker>
116 </v-menu> 116 </v-menu>
117 </v-flex> 117 </v-flex>
118 </v-layout> 118 </v-layout>
119 <v-layout> 119 <v-layout>
120 <v-flex xs4 sm4 class="pt-4 subheading"> 120 <v-flex xs4 sm4 class="pt-4 subheading">
121 <label class="right">Room:</label> 121 <label class="right">Room:</label>
122 </v-flex> 122 </v-flex>
123 <v-flex xs8 sm8 class="ml-3"> 123 <v-flex xs8 sm8 class="ml-3">
124 <v-text-field 124 <v-text-field
125 label="fill your room" 125 label="fill your room"
126 :rules="roomRules" 126 :rules="roomRules"
127 v-model="editedItem.room" 127 v-model="editedItem.room"
128 @keyup.enter="submit" 128 @keyup.enter="submit"
129 ></v-text-field> 129 ></v-text-field>
130 </v-flex> 130 </v-flex>
131 </v-layout> 131 </v-layout>
132 <v-layout> 132 <v-layout>
133 <v-flex xs4 sm4 class="pt-4 subheading"> 133 <v-flex xs4 sm4 class="pt-4 subheading">
134 <label class="right">Period:</label> 134 <label class="right">Period:</label>
135 </v-flex> 135 </v-flex>
136 <v-flex xs8 sm8 class="ml-3"> 136 <v-flex xs8 sm8 class="ml-3">
137 <v-text-field 137 <v-text-field
138 label="fill your period" 138 label="fill your period"
139 :rules="periodRules" 139 :rules="periodRules"
140 v-model="editedItem.period" 140 v-model="editedItem.period"
141 @keyup.enter="submit" 141 @keyup.enter="submit"
142 ></v-text-field> 142 ></v-text-field>
143 </v-flex> 143 </v-flex>
144 </v-layout> 144 </v-layout>
145 <v-layout> 145 <v-layout>
146 <v-flex xs12 sm12> 146 <v-flex xs12 sm12>
147 <v-card-actions> 147 <v-card-actions>
148 <v-spacer></v-spacer> 148 <v-spacer></v-spacer>
149 <v-btn 149 <v-btn
150 @click="update" 150 @click="update"
151 round 151 round
152 dark 152 dark
153 :loading="loading" 153 :loading="loading"
154 class="add-button" 154 class="add-button"
155 >Update Routine</v-btn> 155 >Update Routine</v-btn>
156 </v-card-actions> 156 </v-card-actions>
157 </v-flex> 157 </v-flex>
158 </v-layout> 158 </v-layout>
159 </v-form> 159 </v-form>
160 </v-container> 160 </v-container>
161 </v-card> 161 </v-card>
162 </v-dialog> 162 </v-dialog>
163 163
164 <!-- ****** EXISTING ROUTINE TABLE ****** --> 164 <!-- ****** EXISTING ROUTINE TABLE ****** -->
165 <v-toolbar color="transparent" flat> 165 <v-toolbar color="transparent" flat>
166 <v-btn 166 <v-btn
167 fab 167 fab
168 dark 168 dark
169 class="open-dialog-button hidden-xl-only hidden-md-only hidden-lg-only" 169 class="open-dialog-button hidden-xl-only hidden-md-only hidden-lg-only"
170 small 170 small
171 @click="addRoutineDialog = true" 171 @click="addRoutineDialog = true"
172 > 172 >
173 <v-icon dark>add</v-icon> 173 <v-icon dark>add</v-icon>
174 </v-btn> 174 </v-btn>
175 <v-flex xs1 class="hidden-sm-only hidden-xs-only"> 175 <v-flex xs1 class="hidden-sm-only hidden-xs-only">
176 <v-btn 176 <v-btn
177 round 177 round
178 class="open-dialog-button" 178 class="open-dialog-button"
179 dark 179 dark
180 @click="addRoutineDialog = true" 180 @click="addRoutineDialog = true"
181 v-if="role != 'TEACHER' " 181 v-if="role != 'TEACHER' "
182 > 182 >
183 <v-icon class="white--text pr-1" size="20">add</v-icon>Add Routine 183 <v-icon class="white--text pr-1" size="20">add</v-icon>Add Routine
184 </v-btn> 184 </v-btn>
185 </v-flex> 185 </v-flex>
186 <v-spacer></v-spacer> 186 <v-spacer></v-spacer>
187 <v-flex lg2 md2 xs12 v-show="show"> 187 <v-flex lg2 md2 xs12 v-show="show">
188 <v-select 188 <v-select
189 :items="classList" 189 :items="classList"
190 label="Select Your Class" 190 label="Select Your Class"
191 v-model="addRoutineList.classId" 191 v-model="addRoutineList.classId"
192 item-text="classNum" 192 item-text="classNum"
193 item-value="_id" 193 item-value="_id"
194 name="Select Class" 194 name="Select Class"
195 :rules="classRules" 195 :rules="classRules"
196 @change="getSections(addRoutineList.classId)" 196 @change="getSections(addRoutineList.classId)"
197 class="pl-2" 197 class="pl-2"
198 required 198 required
199 ></v-select> 199 ></v-select>
200 </v-flex> 200 </v-flex>
201 <v-flex xs8 sm3 md2 class="mr-3"> 201 <v-flex xs8 sm3 md2 class="mr-3">
202 <v-select 202 <v-select
203 v-model="addRoutineList.sectionId" 203 v-model="addRoutineList.sectionId"
204 label="Select your section" 204 label="Select your section"
205 :items="addSection" 205 :items="addSection"
206 item-text="name" 206 item-text="name"
207 item-value="_id" 207 item-value="_id"
208 name="Select Section" 208 name="Select Section"
209 :rules="sectionRules" 209 :rules="sectionRules"
210 @change="getRoutineList()" 210 @change="getRoutineList()"
211 class="pl-2" 211 class="pl-2"
212 required 212 required
213 ></v-select> 213 ></v-select>
214 </v-flex> 214 </v-flex>
215 <v-card-title class="body-1" v-show="show"> 215 <v-card-title class="body-1" v-show="show">
216 <v-btn icon flat @click="displaySearch"> 216 <v-btn icon flat @click="displaySearch">
217 <v-avatar size="27"> 217 <v-avatar size="27">
218 <img src="/static/icon/search.png" alt="icon" /> 218 <img src="/static/icon/search.png" alt="icon" />
219 </v-avatar> 219 </v-avatar>
220 </v-btn> 220 </v-btn>
221 </v-card-title> 221 </v-card-title>
222 <v-flex xs9 sm9 md2 lg2 xl2 v-if="showSearch"> 222 <v-flex xs9 sm9 md2 lg2 xl2 v-if="showSearch">
223 <v-layout> 223 <v-layout>
224 <v-text-field 224 <v-text-field
225 autofocus 225 autofocus
226 v-model="search" 226 v-model="search"
227 label="Search" 227 label="Search"
228 prepend-inner-icon="search" 228 prepend-inner-icon="search"
229 color="primary" 229 color="primary"
230 style="transition: 0.8s cubic-bezier(0.25, 0.8, 0.25, 1); !important" 230 style="transition: 0.8s cubic-bezier(0.25, 0.8, 0.25, 1); !important"
231 ></v-text-field> 231 ></v-text-field>
232 <v-icon @click="closeSearch" color="error">close</v-icon> 232 <v-icon @click="closeSearch" color="error">close</v-icon>
233 </v-layout> 233 </v-layout>
234 </v-flex> 234 </v-flex>
235 </v-toolbar> 235 </v-toolbar>
236 236
237 <div class="col-sm-12"> 237 <div class="col-sm-12">
238 <div class="box-body"> 238 <div class="box-body">
239 <div class="row"> 239 <div class="row">
240 <div class="col-sm-12"> 240 <div class="col-sm-12">
241 <div class="nav-tabs-custom"> 241 <div class="nav-tabs-custom">
242 <ul class="nav nav-tabs"> 242 <ul class="nav nav-tabs">
243 <li class="active"> 243 <li class="active">
244 <a data-toggle="tab" href="#all" aria-expanded="true">All Routines</a> 244 <a data-toggle="tab" href="#all" aria-expanded="true">All Routines</a>
245 </li> 245 </li>
246 </ul> 246 </ul>
247 247
248 <div class="tab-content" v-show="hideTable"> 248 <div class="tab-content" v-show="hideTable">
249 <div id="all" class="tab-pane active mCustomScrollbar _mCS_1 mCS_no_scrollbar"> 249 <div id="all" class="tab-pane active mCustomScrollbar _mCS_1 mCS_no_scrollbar">
250 <div 250 <div
251 id="mCSB_1" 251 id="mCSB_1"
252 class="mCustomScrollBox mCS-light" 252 class="mCustomScrollBox mCS-light"
253 style="max-height: none;" 253 style="max-height: none;"
254 tabindex="0" 254 tabindex="0"
255 > 255 >
256 <div 256 <div
257 id="mCSB_1_container" 257 id="mCSB_1_container"
258 class="mCSB_container mCS_x_hidden mCS_no_scrollbar_x" 258 class="mCSB_container mCS_x_hidden mCS_no_scrollbar_x"
259 style="position: relative; top: 0px; left: 0px; width: 100%;" 259 style="position: relative; top: 0px; left: 0px; width: 100%;"
260 dir="ltr" 260 dir="ltr"
261 > 261 >
262 <div id="hide-table-2"> 262 <div id="hide-table-2">
263 <table id="table" class="table table-striped"> 263 <table id="table" class="table table-striped">
264 <tbody> 264 <tbody>
265 <tr> 265 <tr>
266 <td>MONDAY</td> 266 <td>MONDAY</td>
267 </tr> 267 </tr>
268 <tr> 268 <tr>
269 <td>TUESDAY</td> 269 <td>TUESDAY</td>
270 </tr> 270 </tr>
271 <tr> 271 <tr>
272 <td>WEDNESDAY</td> 272 <td>WEDNESDAY</td>
273 </tr> 273 </tr>
274 <tr> 274 <tr>
275 <td>THURSDAY</td> 275 <td>THURSDAY</td>
276 </tr> 276 </tr>
277 <tr> 277 <tr>
278 <td>FRIDAY</td> 278 <td>FRIDAY</td>
279 </tr> 279 </tr>
280 <tr> 280 <tr>
281 <td>SATURDAY</td> 281 <td>SATURDAY</td>
282 </tr> 282 </tr>
283 </tbody> 283 </tbody>
284 </table> 284 </table>
285 </div> 285 </div>
286 </div> 286 </div>
287 <div 287 <div
288 id="mCSB_1_scrollbar_horizontal" 288 id="mCSB_1_scrollbar_horizontal"
289 class="mCSB_scrollTools mCSB_1_scrollbar mCS-light mCSB_scrollTools_horizontal" 289 class="mCSB_scrollTools mCSB_1_scrollbar mCS-light mCSB_scrollTools_horizontal"
290 style="display: none;" 290 style="display: none;"
291 > 291 >
292 <div class="mCSB_draggerContainer"> 292 <div class="mCSB_draggerContainer">
293 <div 293 <div
294 id="mCSB_1_dragger_horizontal" 294 id="mCSB_1_dragger_horizontal"
295 class="mCSB_dragger" 295 class="mCSB_dragger"
296 style="position: absolute; min-width: 30px; width: 0px; left: 0px;" 296 style="position: absolute; min-width: 30px; width: 0px; left: 0px;"
297 > 297 >
298 <div class="mCSB_dragger_bar"></div> 298 <div class="mCSB_dragger_bar"></div>
299 </div> 299 </div>
300 <div class="mCSB_draggerRail"></div> 300 <div class="mCSB_draggerRail"></div>
301 </div> 301 </div>
302 </div> 302 </div>
303 </div> 303 </div>
304 </div> 304 </div>
305 </div> 305 </div>
306 <div> 306 <div>
307 <table id="table" class="table table-bordered" v-show="showTable"> 307 <table id="table" class="table table-bordered" v-show="showTable">
308 <tbody> 308 <tbody>
309 <div class="nav-tabs-custom"> 309 <div class="nav-tabs-custom">
310 <div class="tab-content" id="scrolling"> 310 <div class="tab-content" id="scrolling">
311 <div id="hide-table-2"> 311 <div id="hide-table-2">
312 <v-data-table :items="routineList"> 312 <v-data-table :items="routineList">
313 <template slot="items" slot-scope="props"> 313 <template slot="items" slot-scope="props">
314 <tr class="tr"> 314 <tr class="tr">
315 <td>{{ props.item.day }}</td> 315 <td>{{ props.item.day }}</td>
316 <td class="text-center" v-for="list in props.item.lectureRoutine"> 316 <td class="text-center" v-for="list in props.item.lectureRoutine">
317 {{ props.item.classId.classNum }} 317 {{ props.item.classId.classNum }}
318 <br /> 318 <br />
319 {{ props.item.sectionId.name }} 319 {{ props.item.sectionId.name }}
320 <br /> 320 <br />
321 {{ list.startingTime }} - {{ list.endingTime }} 321 {{ list.startingTime }} - {{ list.endingTime }}
322 <br /> 322 <br />
323 {{ list.room }} 323 {{ list.room }}
324 <br /> 324 <br />
325 {{ list.subjectName }} 325 {{ list.subjectName }}
326 <br /> 326 <br />
327 {{ list.teacherId.name}} 327 {{ list.teacherId.name}}
328 <br /> 328 <br />
329 <span> 329 <span>
330 <v-tooltip top> 330 <v-tooltip top>
331 <img 331 <img
332 slot="activator" 332 slot="activator"
333 style="cursor:pointer; width:20px; height:18px; " 333 style="cursor:pointer; width:20px; height:18px; "
334 class="mr-3" 334 class="mr-3"
335 @click="editItem(list, props.item)" 335 @click="editItem(list, props.item)"
336 src="/static/icon/edit.png" 336 src="/static/icon/edit.png"
337 /> 337 />
338 <span>Edit</span> 338 <span>Edit</span>
339 </v-tooltip> 339 </v-tooltip>
340 <v-tooltip top> 340 <v-tooltip top>
341 <img 341 <img
342 slot="activator" 342 slot="activator"
343 style="cursor:pointer; width:20px; height:18px; " 343 style="cursor:pointer; width:20px; height:18px; "
344 class="mr-3" 344 class="mr-3"
345 @click="deleteItem(props.item)" 345 @click="deleteItem(props.item)"
346 src="/static/icon/delete.png" 346 src="/static/icon/delete.png"
347 /> 347 />
348 <span>Delete</span> 348 <span>Delete</span>
349 </v-tooltip> 349 </v-tooltip>
350 </span> 350 </span>
351 </td> 351 </td>
352 </tr> 352 </tr>
353 </template> 353 </template>
354 </v-data-table> 354 </v-data-table>
355 </div> 355 </div>
356 </div> 356 </div>
357 </div> 357 </div>
358 </tbody> 358 </tbody>
359 </table> 359 </table>
360 </div> 360 </div>
361 </div> 361 </div>
362 </div> 362 </div>
363 </div> 363 </div>
364 </div> 364 </div>
365 </div> 365 </div>
366 <!-- ****** ADD MULTIPLE Subject ****** --> 366 <!-- ****** ADD MULTIPLE Subject ****** -->
367 <v-snackbar 367 <v-snackbar
368 :timeout="timeout" 368 :timeout="timeout"
369 :top="y === 'top'" 369 :top="y === 'top'"
370 :right="x === 'right'" 370 :right="x === 'right'"
371 :vertical="mode === 'vertical'" 371 :vertical="mode === 'vertical'"
372 v-model="snackbar" 372 v-model="snackbar"
373 :color="color" 373 :color="color"
374 >{{ text }}</v-snackbar> 374 >{{ text }}</v-snackbar>
375 <v-dialog v-model="addRoutineDialog" max-width="600px" v-if="addRoutineDialog" persistent> 375 <v-dialog v-model="addRoutineDialog" max-width="600px" v-if="addRoutineDialog" persistent>
376 v-if="addRoutineDialog" 376 v-if="addRoutineDialog"
377 <v-card flat class="card-style pa-2" dark> 377 <v-card flat class="card-style pa-2" dark>
378 <v-layout> 378 <v-layout>
379 <v-flex xs12> 379 <v-flex xs12>
380 <label class="title text-xs-center">Add Routine</label> 380 <label class="title text-xs-center">Add Routine</label>
381 <v-icon size="24" class="right" @click="closeAddRoutineModel">cancel</v-icon> 381 <v-icon size="24" class="right" @click="closeAddRoutineModel">cancel</v-icon>
382 </v-flex> 382 </v-flex>
383 </v-layout> 383 </v-layout>
384 <v-container fluid fill-height> 384 <v-container fluid fill-height>
385 <v-layout align-center> 385 <v-layout align-center>
386 <v-flex xs12> 386 <v-flex xs12>
387 <v-form ref="form" v-model="valid" lazy-validation> 387 <v-form ref="form" v-model="valid" lazy-validation>
388 <v-layout> 388 <v-layout>
389 <v-flex xs4 sm4 class="pt-4 subheading"> 389 <v-flex xs4 sm4 class="pt-4 subheading">
390 <label class="right">School Year :</label> 390 <label class="right">School Year :</label>
391 </v-flex> 391 </v-flex>
392 <v-flex xs8 sm8 class="ml-3"> 392 <v-flex xs8 sm8 class="ml-3">
393 <v-text-field 393 <v-text-field
394 label="fill your year" 394 label="fill your year"
395 :rules="schoolRules" 395 :rules="schoolRules"
396 v-model="addRoutine.schoolYear" 396 v-model="addRoutine.schoolYear"
397 ></v-text-field> 397 ></v-text-field>
398 </v-flex> 398 </v-flex>
399 </v-layout> 399 </v-layout>
400 <v-layout> 400 <v-layout>
401 <v-flex xs4 sm4 class="pt-4 subheading"> 401 <v-flex xs4 sm4 class="pt-4 subheading">
402 <label class="right">Class :</label> 402 <label class="right">Class :</label>
403 </v-flex> 403 </v-flex>
404 <v-flex xs8 sm8 class="ml-3"> 404 <v-flex xs8 sm8 class="ml-3">
405 <v-select 405 <v-select
406 :items="classList" 406 :items="classList"
407 item-text="classNum" 407 item-text="classNum"
408 item-value="_id" 408 item-value="_id"
409 v-model="addRoutine.classId" 409 v-model="addRoutine.classId"
410 label="Select Class" 410 label="Select Class"
411 :rules="classRules" 411 :rules="classRules"
412 @change="getSections(addRoutine.classId)" 412 @change="getSections(addRoutine.classId)"
413 class="pl-2" 413 class="pl-2"
414 required 414 required
415 ></v-select> 415 ></v-select>
416 </v-flex> 416 </v-flex>
417 </v-layout> 417 </v-layout>
418 <v-layout> 418 <v-layout>
419 <v-flex xs4 sm4 class="pt-4 subheading"> 419 <v-flex xs4 sm4 class="pt-4 subheading">
420 <label class="right">Section :</label> 420 <label class="right">Section :</label>
421 </v-flex> 421 </v-flex>
422 <v-flex xs8 sm8 class="ml-3"> 422 <v-flex xs8 sm8 class="ml-3">
423 <v-select 423 <v-select
424 :items="addSection" 424 :items="addSection"
425 item-text="name" 425 item-text="name"
426 item-value="_id" 426 item-value="_id"
427 v-model="addRoutine.sectionId" 427 v-model="addRoutine.sectionId"
428 label="Select Section" 428 label="Select Section"
429 :rules="sectionRules" 429 :rules="sectionRules"
430 @change="getClassSubject(addRoutine.classId)" 430 @change="getClassSubject(addRoutine.classId)"
431 class="px-2" 431 class="px-2"
432 required 432 required
433 ></v-select> 433 ></v-select>
434 </v-flex> 434 </v-flex>
435 </v-layout> 435 </v-layout>
436 <v-layout> 436 <v-layout>
437 <v-flex xs3 sm4 class="pt-4 subheading"> 437 <v-flex xs3 sm4 class="pt-4 subheading">
438 <label class="right">Subject :</label> 438 <label class="right">Subject :</label>
439 </v-flex> 439 </v-flex>
440 <v-flex xs8 sm8 class="ml-2"> 440 <v-flex xs8 sm8 class="ml-2">
441 <v-select 441 <v-select
442 :items="subjectList.subjects" 442 :items="subjectList.subjects"
443 label="Select your subject" 443 label="Select your subject"
444 v-model="addRoutine.subjectName" 444 v-model="addRoutine.subjectName"
445 item-text="subjectName" 445 item-text="subjectName"
446 item-value="subjectName" 446 item-value="subjectName"
447 :rules="subjectRules" 447 :rules="subjectRules"
448 required 448 required
449 ></v-select> 449 ></v-select>
450 </v-flex> 450 </v-flex>
451 </v-layout> 451 </v-layout>
452 <v-layout> 452 <v-layout>
453 <v-flex xs3 sm4 class="pt-4 subheading"> 453 <v-flex xs3 sm4 class="pt-4 subheading">
454 <label class="right">Day :</label> 454 <label class="right">Day :</label>
455 </v-flex> 455 </v-flex>
456 <v-flex xs8 sm8 class="ml-2"> 456 <v-flex xs8 sm8 class="ml-2">
457 <v-select 457 <v-select
458 :items="day" 458 :items="day"
459 label="Select your day" 459 label="Select your day"
460 v-model="addRoutine.day" 460 v-model="addRoutine.day"
461 item-text="text" 461 item-text="text"
462 :rules="dayRules" 462 :rules="dayRules"
463 required 463 required
464 ></v-select> 464 ></v-select>
465 </v-flex> 465 </v-flex>
466 </v-layout> 466 </v-layout>
467 <v-layout> 467 <v-layout>
468 <v-flex xs4 sm4 class="pt-4 subheading"> 468 <v-flex xs4 sm4 class="pt-4 subheading">
469 <label class="right">Teacher Name :</label> 469 <label class="right">Teacher Name :</label>
470 </v-flex> 470 </v-flex>
471 <v-flex xs8 sm8 class="ml-3"> 471 <v-flex xs8 sm8 class="ml-3">
472 <v-select 472 <v-select
473 v-model="addRoutine.teacherId" 473 v-model="addRoutine.teacherId"
474 label="Select your teacher" 474 label="Select your teacher"
475 type="text" 475 type="text"
476 :items="teacherList" 476 :items="teacherList"
477 item-text="name" 477 item-text="name"
478 item-value="_id" 478 item-value="_id"
479 :rules="teacherRules" 479 :rules="teacherRules"
480 required 480 required
481 ></v-select> 481 ></v-select>
482 </v-flex> 482 </v-flex>
483 </v-layout> 483 </v-layout>
484 <v-layout> 484 <v-layout>
485 <v-flex xs4 class="pt-4 subheading"> 485 <v-flex xs4 class="pt-4 subheading">
486 <label class="right">Starting time:</label> 486 <label class="right">Starting time:</label>
487 </v-flex> 487 </v-flex>
488 <v-flex xs8 sm6 class="ml-3"> 488 <v-flex xs8 sm6 class="ml-3">
489 <v-menu 489 <v-menu
490 ref="menuA" 490 ref="menuA"
491 :close-on-content-click="false" 491 :close-on-content-click="false"
492 v-model="menu2" 492 v-model="menu2"
493 :nudge-right="40" 493 :nudge-right="40"
494 :return-value.sync="addRoutine.startingTime" 494 :return-value.sync="addRoutine.startingTime"
495 lazy 495 lazy
496 transition="scale-transition" 496 transition="scale-transition"
497 offset-y 497 offset-y
498 full-width 498 full-width
499 max-width="290px" 499 max-width="290px"
500 min-width="290px" 500 min-width="290px"
501 > 501 >
502 <v-text-field 502 <v-text-field
503 slot="activator" 503 slot="activator"
504 v-model="addRoutine.startingTime" 504 v-model="addRoutine.startingTime"
505 label="Select your starting time" 505 label="Select your starting time"
506 append-icon="access_time" 506 append-icon="access_time"
507 :rules="timeInRules" 507 :rules="timeInRules"
508 readonly 508 readonly
509 ></v-text-field> 509 ></v-text-field>
510 <v-time-picker 510 <v-time-picker
511 v-model="addRoutine.startingTime" 511 v-model="addRoutine.startingTime"
512 @change="$refs.menuA.save(addRoutine.startingTime)" 512 @change="$refs.menuA.save(addRoutine.startingTime)"
513 ></v-time-picker> 513 ></v-time-picker>
514 </v-menu> 514 </v-menu>
515 </v-flex> 515 </v-flex>
516 </v-layout> 516 </v-layout>
517 <v-layout> 517 <v-layout>
518 <v-flex xs4 class="pt-4 subheading"> 518 <v-flex xs4 class="pt-4 subheading">
519 <label class="right">Ending Time:</label> 519 <label class="right">Ending Time:</label>
520 </v-flex> 520 </v-flex>
521 <v-flex xs8 sm6 class="ml-3"> 521 <v-flex xs8 sm6 class="ml-3">
522 <v-menu 522 <v-menu
523 ref="menu" 523 ref="menu"
524 :close-on-content-click="false" 524 :close-on-content-click="false"
525 v-model="menu1" 525 v-model="menu1"
526 :nudge-right="40" 526 :nudge-right="40"
527 :return-value.sync="addRoutine.endingTime" 527 :return-value.sync="addRoutine.endingTime"
528 lazy 528 lazy
529 transition="scale-transition" 529 transition="scale-transition"
530 offset-y 530 offset-y
531 full-width 531 full-width
532 max-width="290px" 532 max-width="290px"
533 min-width="290px" 533 min-width="290px"
534 > 534 >
535 <v-text-field 535 <v-text-field
536 slot="activator" 536 slot="activator"
537 v-model="addRoutine.endingTime" 537 v-model="addRoutine.endingTime"
538 label="Select your end time" 538 label="Select your end time"
539 append-icon="access_time" 539 append-icon="access_time"
540 :rules="timeOutRules" 540 :rules="timeOutRules"
541 readonly 541 readonly
542 ></v-text-field> 542 ></v-text-field>
543 <v-time-picker 543 <v-time-picker
544 v-model="addRoutine.endingTime" 544 v-model="addRoutine.endingTime"
545 @change="$refs.menu.save(addRoutine.endingTime)" 545 @change="$refs.menu.save(addRoutine.endingTime)"
546 ></v-time-picker> 546 ></v-time-picker>
547 </v-menu> 547 </v-menu>
548 </v-flex> 548 </v-flex>
549 </v-layout> 549 </v-layout>
550 <v-layout> 550 <v-layout>
551 <v-flex xs4 sm4 class="pt-4 subheading"> 551 <v-flex xs4 sm4 class="pt-4 subheading">
552 <label class="right">Room:</label> 552 <label class="right">Room:</label>
553 </v-flex> 553 </v-flex>
554 <v-flex xs8 sm8 class="ml-3"> 554 <v-flex xs8 sm8 class="ml-3">
555 <v-text-field 555 <v-text-field
556 label="fill your room" 556 label="fill your room"
557 :rules="roomRules" 557 :rules="roomRules"
558 v-model="addRoutine.room" 558 v-model="addRoutine.room"
559 @keyup.enter="submit" 559 @keyup.enter="submit"
560 ></v-text-field> 560 ></v-text-field>
561 </v-flex> 561 </v-flex>
562 </v-layout> 562 </v-layout>
563 <v-layout> 563 <v-layout>
564 <v-flex xs4 sm4 class="pt-4 subheading"> 564 <v-flex xs4 sm4 class="pt-4 subheading">
565 <label class="right">Period:</label> 565 <label class="right">Period:</label>
566 </v-flex> 566 </v-flex>
567 <v-flex xs8 sm8 class="ml-3"> 567 <v-flex xs8 sm8 class="ml-3">
568 <v-text-field 568 <v-text-field
569 label="fill your period" 569 label="fill your period"
570 :rules="periodRules" 570 :rules="periodRules"
571 v-model="addRoutine.period" 571 v-model="addRoutine.period"
572 @keyup.enter="submit" 572 @keyup.enter="submit"
573 ></v-text-field> 573 ></v-text-field>
574 </v-flex> 574 </v-flex>
575 </v-layout> 575 </v-layout>
576 <v-layout> 576 <v-layout>
577 <v-flex xs12 sm12> 577 <v-flex xs12 sm12>
578 <v-card-actions> 578 <v-card-actions>
579 <v-spacer></v-spacer> 579 <v-spacer></v-spacer>
580 <v-btn 580 <v-btn
581 @click="create" 581 @click="create"
582 round 582 round
583 dark 583 dark
584 :loading="loading" 584 :loading="loading"
585 class="add-button" 585 class="add-button"
586 >Add Routine</v-btn> 586 >Add Routine</v-btn>
587 </v-card-actions> 587 </v-card-actions>
588 </v-flex> 588 </v-flex>
589 </v-layout> 589 </v-layout>
590 </v-form> 590 </v-form>
591 </v-flex> 591 </v-flex>
592 </v-layout> 592 </v-layout>
593 </v-container> 593 </v-container>
594 </v-card> 594 </v-card>
595 </v-dialog> 595 </v-dialog>
596 <div class="loader" v-if="showLoader"> 596 <div class="loader" v-if="showLoader">
597 <v-progress-circular indeterminate color="white"></v-progress-circular> 597 <v-progress-circular indeterminate color="white"></v-progress-circular>
598 </div> 598 </div>
599 </v-container> 599 </v-container>
600 </template> 600 </template>
601 601
602 <script> 602 <script>
603 import http from "@/Services/http.js"; 603 import http from "@/Services/http.js";
604 import Util from "@/util"; 604 import Util from "@/util";
605 605
606 export default { 606 export default {
607 data: () => ({ 607 data: () => ({
608 snackbar: false, 608 snackbar: false,
609 y: "top", 609 y: "top",
610 x: "right", 610 x: "right",
611 role: "", 611 role: "",
612 mode: "", 612 mode: "",
613 timeout: 3000, 613 timeout: 3000,
614 text: "", 614 text: "",
615 color: "", 615 color: "",
616 show: true, 616 show: true,
617 showSearch: false, 617 showSearch: false,
618 showLoader: false, 618 showLoader: false,
619 loading: false, 619 loading: false,
620 editLoading: false, 620 editLoading: false,
621 date: null, 621 date: null,
622 search: "", 622 search: "",
623 editRoutineDialog: false, 623 editRoutineDialog: false,
624 valid: true, 624 valid: true,
625 validEditRoutine: true, 625 validEditRoutine: true,
626 addRoutineDialog: false, 626 addRoutineDialog: false,
627 showTable: false, 627 showTable: false,
628 hideTable: true, 628 hideTable: true,
629 name: "", 629 name: "",
630 630
631 day: [ 631 day: [
632 "Monday", 632 "Monday",
633 "Tuesday", 633 "Tuesday",
634 "Wednesday", 634 "Wednesday",
635 "Thursday", 635 "Thursday",
636 "Friday", 636 "Friday",
637 "Saturday", 637 "Saturday",
638 "Sunday", 638 "Sunday",
639 ], 639 ],
640 640
641 token: "", 641 token: "",
642 642
643 menu1: false, 643 menu1: false,
644 menu2: false, 644 menu2: false,
645 menu4: false, 645 menu4: false,
646 menu3: false, 646 menu3: false,
647 647
648 schoolRules: [(v) => !!v || "School Year is required"], 648 schoolRules: [(v) => !!v || "School Year is required"],
649 classRules: [(v) => !!v || " Class Name is required"], 649 classRules: [(v) => !!v || " Class Name is required"],
650 teacherRules: [(v) => !!v || " Teacher Name is required"], 650 teacherRules: [(v) => !!v || " Teacher Name is required"],
651 sectionRules: [(v) => !!v || "Section is required"], 651 sectionRules: [(v) => !!v || "Section is required"],
652 studentRules: [(v) => !!v || " Student is required"], 652 studentRules: [(v) => !!v || " Student is required"],
653 finalRules: [(v) => !!v || "Final MArk is required"], 653 finalRules: [(v) => !!v || "Final MArk is required"],
654 subjectRules: [(v) => !!v || " Subject Name is required"], 654 subjectRules: [(v) => !!v || " Subject Name is required"],
655 dayRules: [(v) => !!v || "Day is required"], 655 dayRules: [(v) => !!v || "Day is required"],
656 timeInRules: [(v) => !!v || "Start Time is required"], 656 timeInRules: [(v) => !!v || "Start Time is required"],
657 timeOutRules: [(v) => !!v || "End Time is required"], 657 timeOutRules: [(v) => !!v || "End Time is required"],
658 roomRules: [(v) => !!v || "Room is required"], 658 roomRules: [(v) => !!v || "Room is required"],
659 periodRules: [(v) => !!v || "Period is required"], 659 periodRules: [(v) => !!v || "Period is required"],
660 660
661 classList: [], 661 classList: [],
662 addSection: [], 662 addSection: [],
663 subjectList: [], 663 subjectList: [],
664 teacherList: [], 664 teacherList: [],
665 titleRules: [], 665 titleRules: [],
666 markRules: [], 666 markRules: [],
667 typeRules: [], 667 typeRules: [],
668 routineList: [], 668 routineList: [],
669 editedIndex: -1, 669 editedIndex: -1,
670 addRoutine: {}, 670 addRoutine: {},
671 addRoutineList: {}, 671 addRoutineList: {},
672 startingTime: "", 672 startingTime: "",
673 editedItem: {}, 673 editedItem: {},
674 }), 674 }),
675 watch: { 675 watch: {
676 addRoutineDialog: function (val) { 676 addRoutineDialog: function (val) {
677 if (!val) { 677 if (!val) {
678 this.addRoutine = []; 678 this.addRoutine = [];
679 } 679 }
680 }, 680 },
681 }, 681 },
682 methods: { 682 methods: {
683 editItem(item, routineData) { 683 editItem(item, routineData) {
684 this.editedIndex = this.routineList;
685 this.editedItem = Object.assign({}, item);
686 this.editedItem.lectureRoutineId = item._id; 684 this.editedIndex = this.routineList;
687 this.editedItem.routineId = routineData._id; 685 this.editedItem = Object.assign({}, item);
688 this.dialog = true; 686 this.editedItem.lectureRoutineId = item._id;
689 this.editRoutineDialog = true; 687 this.editedItem.routineId = routineData._id;
690 }, 688 this.dialog = true;
691 deleteItem(item) { 689 this.editRoutineDialog = true;
692 let deleteLecture = { 690 },
693 routineId: item._id, 691 deleteItem(item) {
694 lectureId: item.lectureRoutine[0]._id, 692 let deleteLecture = {
695 }; 693 routineId: item._id,
696 http() 694 lectureId: item.lectureRoutine[0]._id,
697 .delete( 695 };
698 "/deleteRoutineLecture", 696 http()
699 confirm("Are you sure you want to delete this?") && { 697 .delete(
700 params: deleteLecture, 698 "/deleteRoutineLecture",
701 } 699 confirm("Are you sure you want to delete this?") && {
702 ) 700 params: deleteLecture,
703 .then((response) => { 701 }
704 this.snackbar = true; 702 )
705 this.text = "Successfully delete Existing Routine"; 703 .then((response) => {
706 this.color = "green"; 704 this.snackbar = true;
707 this.getRoutineList(); 705 this.text = "Successfully delete Existing Routine";
708 }) 706 this.color = "green";
709 .catch((error) => { 707 this.getRoutineList();
710 this.snackbar = true; 708 })
711 this.text = error.response.data.message; 709 .catch((error) => {
712 this.color = "error"; 710 this.snackbar = true;
713 }); 711 this.text = error.response.data.message;
714 }, 712 this.color = "error";
715 close() { 713 });
716 this.editRoutineDialog = false; 714 },
717 }, 715 close() {
718 closeAddRoutineModel() { 716 this.editRoutineDialog = false;
719 this.addRoutineDialog = false; 717 },
720 this.classList = []; 718 closeAddRoutineModel() {
721 this.addRoutine = []; 719 this.addRoutineDialog = false;
722 }, 720 this.classList = [];
723 create() { 721 this.addRoutine = [];
724 var routineData = { 722 },
725 schoolYear: this.addRoutine.schoolYear, 723 create() {
726 classId: this.addRoutine.classId, 724 var routineData = {
727 sectionId: this.addRoutine.sectionId, 725 schoolYear: this.addRoutine.schoolYear,
728 day: this.addRoutine.day, 726 classId: this.addRoutine.classId,
729 lectureRoutine: [], 727 sectionId: this.addRoutine.sectionId,
730 }; 728 day: this.addRoutine.day,
731 if (this.$refs.form.validate()) { 729 lectureRoutine: [],
732 routineData.lectureRoutine.push({ 730 };
733 teacherId: this.addRoutine.teacherId, 731 if (this.$refs.form.validate()) {
734 startingTime: this.addRoutine.startingTime, 732 routineData.lectureRoutine.push({
735 endingTime: this.addRoutine.endingTime, 733 teacherId: this.addRoutine.teacherId,
736 room: this.addRoutine.room, 734 startingTime: this.addRoutine.startingTime,
737 period: this.addRoutine.period, 735 endingTime: this.addRoutine.endingTime,
738 subjectName: this.addRoutine.subjectName, 736 room: this.addRoutine.room,
739 }); 737 period: this.addRoutine.period,
740 http() 738 subjectName: this.addRoutine.subjectName,
741 .post("/createRoutine", routineData) 739 });
742 .then((response) => { 740 http()
743 this.text = "Routine added successfully"; 741 .post("/createRoutine", routineData)
744 // this.clear(); 742 .then((response) => {
745 this.snackbar = true; 743 this.text = "Routine added successfully";
746 this.color = "green"; 744 // this.clear();
747 // console.log("===this.addRoutine===", this.addRoutine); 745 this.snackbar = true;
748 http() 746 this.color = "green";
749 .get( 747 // console.log("===this.addRoutine===", this.addRoutine);
750 "/getRoutineList", 748 http()
751 { 749 .get(
752 params: { 750 "/getRoutineList",
753 classId: this.addRoutine.classId, 751 {
754 sectionId: this.addRoutine.sectionId, 752 params: {
755 }, 753 classId: this.addRoutine.classId,
756 }, 754 sectionId: this.addRoutine.sectionId,
757 { 755 },
758 headers: { Authorization: "Bearer " + this.token }, 756 },
759 } 757 {
760 ) 758 headers: { Authorization: "Bearer " + this.token },
761 .then((response) => { 759 }
762 this.routineList = response.data.data; 760 )
763 this.showLoader = false; 761 .then((response) => {
764 this.showTable = true; 762 this.routineList = response.data.data;
765 this.hideTable = false; 763 this.showLoader = false;
766 }) 764 this.showTable = true;
767 .catch((err) => { 765 this.hideTable = false;
768 // console.log("err====>", err); 766 })
769 this.snackbar = true; 767 .catch((err) => {
770 this.text = error.response.data.message; 768 // console.log("err====>", err);
769 this.snackbar = true;
770 this.text = error.response.data.message;
771 this.color = "error";
771 this.color = "error"; 772 });
772 }); 773 this.addRoutineDialog = false;
773 this.addRoutineDialog = false; 774 })
774 }) 775 .catch((error) => {
775 .catch((error) => { 776 // console.log(error);
776 // console.log(error); 777 this.snackbar = true;
777 this.snackbar = true; 778 this.text = error.response.data.message;
778 this.text = error.response.data.message; 779 this.color = "error";
779 this.color = "error"; 780 });
780 }); 781 }
781 } 782 },
782 }, 783 clear() {
783 clear() { 784 this.$refs.form.reset();
784 this.$refs.form.reset(); 785 },
785 }, 786
786 787 update() {
787 update() { 788 if (this.$refs.formEditRoutine.validate()) {
788 if (this.$refs.formEditRoutine.validate()) { 789 let editRoutine = {
789 let editRoutine = { 790 routineId: this.editedItem.routineId,
790 routineId: this.editedItem.routineId, 791 lectureRoutineId: this.editedItem.lectureRoutineId,
791 lectureRoutineId: this.editedItem.lectureRoutineId, 792 subjectName: this.editedItem.subjectName,
792 subjectName: this.editedItem.subjectName, 793 teacherId: this.editedItem.teacherId._id,
793 teacherId: this.editedItem.teacherId._id, 794 startingTime: this.editedItem.startingTime,
794 startingTime: this.editedItem.startingTime, 795 endingTime: this.editedItem.endingTime,
795 endingTime: this.editedItem.endingTime, 796 room: this.editedItem.room,
796 room: this.editedItem.room, 797 period: this.editedItem.period,
797 period: this.editedItem.period, 798 };
798 }; 799 this.editLoading = true;
799 this.editLoading = true; 800 http()
800 http() 801 .put("/updateRoutine", editRoutine)
801 .put("/updateRoutine", editRoutine) 802 .then((response) => {
802 .then((response) => { 803 this.snackbar = true;
803 this.snackbar = true; 804 this.text = "Successfully Edit Existing Routine";
804 this.text = "Successfully Edit Existing Routine"; 805 this.color = "green";
805 this.color = "green"; 806 this.editLoading = false;
806 this.editLoading = false; 807 this.editRoutineDialog = false;
807 this.editRoutineDialog = false; 808 this.getRoutineList();
808 this.getRoutineList(); 809 // http()
809 // http() 810 // .get(
810 // .get( 811 // "/getRoutineList",
811 // "/getRoutineList", 812 // {
812 // { 813 // params: {
813 // params: { 814 // classId: this.addRoutine.classId,
814 // classId: this.addRoutine.classId, 815 // sectionId: this.addRoutine.sectionId
815 // sectionId: this.addRoutine.sectionId 816 // }
816 // } 817 // },
817 // }, 818 // {
818 // { 819 // headers: { Authorization: "Bearer " + this.token }
819 // headers: { Authorization: "Bearer " + this.token } 820 // }
820 // } 821 // )
821 // ) 822 // .then(response => {
822 // .then(response => { 823 // this.routineList = response.data.data;
823 // this.routineList = response.data.data; 824 // this.showLoader = false;
824 // this.showLoader = false; 825 // this.showTable = true;
825 // this.showTable = true; 826 // this.hideTable = false;
826 // this.hideTable = false; 827 // })
827 // }) 828 // .catch(err => {
828 // .catch(err => { 829 // console.log("err====>", err);
829 // console.log("err====>", err); 830 // });
830 // }); 831 })
831 }) 832 .catch((error) => {
832 .catch((error) => { 833 this.editLoading = false;
833 this.editLoading = false; 834 });
834 }); 835 }
835 } 836 },
836 }, 837 getClass() {
837 getClass() { 838 http()
838 http() 839 .get("/getClassesList", {
839 .get("/getClassesList", { 840 headers: { Authorization: "Bearer " + this.token },
840 headers: { Authorization: "Bearer " + this.token }, 841 })
841 }) 842 .then((response) => {
842 .then((response) => { 843 this.classList = response.data.data;
843 this.classList = response.data.data; 844 })
844 }) 845 .catch((error) => {
845 .catch((error) => { 846 if (error.response.status === 401) {
846 if (error.response.status === 401) { 847 this.$router.replace({ path: "/" });
847 this.$router.replace({ path: "/" }); 848 this.$store.dispatch("setToken", null);
848 this.$store.dispatch("setToken", null); 849 this.$store.dispatch("Id", null);
849 this.$store.dispatch("Id", null); 850 }
850 } 851 });
851 }); 852 },
852 }, 853 getSections(_id) {
853 getSections(_id) { 854 var token = this.$store.state.token;
854 var token = this.$store.state.token; 855 this.showLoader = true;
855 this.showLoader = true; 856 http()
856 http() 857 .get(
857 .get( 858 "/getSectionsList",
858 "/getSectionsList", 859 { params: { classId: _id } },
859 { params: { classId: _id } }, 860 {
860 { 861 headers: { Authorization: "Bearer " + token },
861 headers: { Authorization: "Bearer " + token }, 862 }
862 } 863 )
863 ) 864 .then((response) => {
864 .then((response) => { 865 this.addSection = response.data.data;
865 this.addSection = response.data.data; 866 this.showLoader = false;
866 this.showLoader = false; 867 })
867 }) 868 .catch((err) => {
868 .catch((err) => { 869 this.showLoader = false;
869 this.showLoader = false; 870 });
870 }); 871 },
871 }, 872 getClassSubject(_id) {
872 getClassSubject(_id) { 873 this.showLoader = true;
873 this.showLoader = true; 874 // this.classId = this.classId;
874 // this.classId = this.classId; 875 http()
875 http() 876 .get(
876 .get( 877 "/getParticularClass",
877 "/getParticularClass", 878 { params: { classId: _id } },
878 { params: { classId: _id } }, 879 {
879 { 880 headers: { Authorization: "Bearer " + this.token },
880 headers: { Authorization: "Bearer " + this.token }, 881 }
881 } 882 )
882 ) 883 .then((response) => {
883 .then((response) => { 884 this.subjectList = response.data.data;
884 this.subjectList = response.data.data; 885 this.showLoader = false;
885 this.showLoader = false; 886 })
886 }) 887 .catch((err) => {
887 .catch((err) => { 888 this.showLoader = false;
888 this.showLoader = false; 889 });
889 }); 890 },
890 }, 891 getTeacherList() {
891 getTeacherList() { 892 this.showLoader = true;
892 this.showLoader = true; 893 var token = this.$store.state.token;
893 var token = this.$store.state.token; 894 http()
894 http() 895 .get("/getTeachersList", {
895 .get("/getTeachersList", { 896 headers: { Authorization: "Bearer " + token },
896 headers: { Authorization: "Bearer " + token }, 897 })
897 }) 898 .then((response) => {
898 .then((response) => { 899 this.teacherList = response.data.data;
899 this.teacherList = response.data.data; 900 this.showLoader = false;
900 this.showLoader = false; 901 // console.log("getTeacherList=====>",this.desserts)
901 // console.log("getTeacherList=====>",this.desserts) 902 })
902 }) 903 .catch((error) => {
903 .catch((error) => { 904 this.showLoader = false;
904 this.showLoader = false; 905 if (error.response.status === 401) {
905 if (error.response.status === 401) { 906 this.$router.replace({ path: "/" });
906 this.$router.replace({ path: "/" }); 907 this.$store.dispatch("setToken", null);
907 this.$store.dispatch("setToken", null); 908 this.$store.dispatch("Id", null);
908 this.$store.dispatch("Id", null); 909 }
909 } 910 });
910 }); 911 },
911 }, 912 getRoutineList() {
912 getRoutineList() { 913 this.showLoader = true;
913 this.showLoader = true; 914 http()
914 http() 915 .get(
915 .get( 916 "/getRoutineList",
916 "/getRoutineList", 917 {
917 { 918 params: {
918 params: { 919 classId: this.addRoutineList.classId,
919 classId: this.addRoutineList.classId, 920 sectionId: this.addRoutineList.sectionId,
920 sectionId: this.addRoutineList.sectionId, 921 },
921 }, 922 },
922 }, 923 {
923 { 924 headers: { Authorization: "Bearer " + this.token },
924 headers: { Authorization: "Bearer " + this.token }, 925 }
925 } 926 )
926 ) 927 .then((response) => {
927 .then((response) => { 928 this.routineList = response.data.data;
928 this.routineList = response.data.data; 929 this.showLoader = false;
929 this.showLoader = false; 930 this.showTable = true;
930 this.showTable = true; 931 this.hideTable = false;
931 this.hideTable = false; 932 })
932 }) 933 .catch((err) => {
933 .catch((err) => { 934 this.showLoader = false;
934 this.showLoader = false; 935 });
935 }); 936 },
936 }, 937 displaySearch() {
937 displaySearch() { 938 (this.show = false), (this.showSearch = true);
938 (this.show = false), (this.showSearch = true); 939 },
939 }, 940 closeSearch() {
940 closeSearch() { 941 this.showSearch = false;
941 this.showSearch = false; 942 this.show = true;
942 this.show = true; 943 this.search = "";
943 this.search = ""; 944 },
944 }, 945 },
945 }, 946 mounted() {
946 mounted() { 947 this.token = this.$store.state.token;
947 this.token = this.$store.state.token; 948 this.getClass();
948 this.getClass(); 949 this.getTeacherList();
949 this.getTeacherList(); 950 this.role = this.$store.state.role;
950 this.role = this.$store.state.role; 951 },
951 }, 952 };
952 }; 953 </script>
953 </script> 954
954 955 <style scoped>
955 <style scoped> 956 html,
956 html, 957 body {
957 body { 958 font-family: "OpenSans Regular";
958 font-family: "OpenSans Regular"; 959 }
959 } 960 .box .box-body {
960 .box .box-body { 961 padding: 15px;
961 padding: 15px; 962 border-top-left-radius: 0;
962 border-top-left-radius: 0; 963 border-top-right-radius: 0;
963 border-top-right-radius: 0; 964 border-bottom-right-radius: 3px;
964 border-bottom-right-radius: 3px; 965 border-bottom-left-radius: 3px;
965 border-bottom-left-radius: 3px; 966 }
966 } 967 .nav-tabs-custom {
967 .nav-tabs-custom { 968 margin-bottom: 20px;
968 margin-bottom: 20px; 969 background: #fff;
969 background: #fff; 970 box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.1);
970 box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.1); 971 }
971 } 972 .nav-tabs {
972 .nav-tabs { 973 border-bottom: 1px solid #ddd;
973 border-bottom: 1px solid #ddd; 974 }
974 } 975 .nav {
975 .nav { 976 padding-left: 0;
976 padding-left: 0; 977 list-style: none;
977 list-style: none; 978 }
978 } 979 .tab-content > .active {
979 .tab-content > .active { 980 display: block;
980 display: block; 981 }
981 } 982 .nav-tabs-custom > .nav-tabs > li.active > a {
982 .nav-tabs-custom > .nav-tabs > li.active > a { 983 border-top: 0;
983 border-top: 0; 984 border-left-color: #09a3a3;
984 border-left-color: #09a3a3; 985 border-right-color: #09a3a3;
985 border-right-color: #09a3a3; 986 }
986 } 987 .nav-tabs-custom > .nav-tabs {
987 .nav-tabs-custom > .nav-tabs { 988 background-color: #e5e5e5;
988 background-color: #e5e5e5; 989 margin: 0;
989 margin: 0; 990 border-bottom-color: #e5e5e5;
990 border-bottom-color: #e5e5e5; 991 }
991 } 992 .nav-tabs-custom > .nav-tabs > li:first-of-type {
992 .nav-tabs-custom > .nav-tabs > li:first-of-type { 993 margin-left: 0px;
993 margin-left: 0px; 994 }
994 } 995 .nav-tabs-custom > .nav-tabs > li.active {
995 .nav-tabs-custom > .nav-tabs > li.active { 996 border-bottom-color: #09a3a3;
996 border-bottom-color: #09a3a3; 997 }
997 } 998 .nav-tabs-custom > .nav-tabs > li {
998 .nav-tabs-custom > .nav-tabs > li { 999 border-bottom: 2px solid transparent;
999 border-bottom: 2px solid transparent; 1000 border-top: 3px solid transparent;
1000 border-top: 3px solid transparent; 1001 margin-bottom: -2px;
1001 margin-bottom: -2px; 1002 margin-right: 5px;
1002 margin-right: 5px; 1003 }
1003 } 1004 .nav-tabs-custom > .nav-tabs > li:first-of-type.active > a {
1004 .nav-tabs-custom > .nav-tabs > li:first-of-type.active > a { 1005 border-left-width: 0;
1005 border-left-width: 0; 1006 }
1006 } 1007 .nav-tabs-custom > .nav-tabs > li.active > a {
1007 .nav-tabs-custom > .nav-tabs > li.active > a { 1008 border-top: 0;
1008 border-top: 0; 1009 border-bottom-color: #09a3a3;
1009 border-bottom-color: #09a3a3; 1010 }
1010 } 1011 .nav-tabs-custom > .nav-tabs > li.active > a,
1011 .nav-tabs-custom > .nav-tabs > li.active > a, 1012 .nav-tabs-custom > .nav-tabs > li.active:hover > a {
1012 .nav-tabs-custom > .nav-tabs > li.active:hover > a { 1013 background-color: #e5e5e5;
1013 background-color: #e5e5e5; 1014 border: 0px;
1014 border: 0px; 1015 color: #000000db;
1015 color: #000000db; 1016 }
1016 } 1017 .nav-tabs-custom > .nav-tabs > li > a,
1017 .nav-tabs-custom > .nav-tabs > li > a, 1018 .nav-tabs-custom > .nav-tabs > li > a:hover {
1018 .nav-tabs-custom > .nav-tabs > li > a:hover { 1019 border-radius: 0 !important;
1019 border-radius: 0 !important; 1020 }
1020 } 1021 .nav-tabs-custom > .tab-content {
1021 .nav-tabs-custom > .tab-content { 1022 background: #fff;
1022 background: #fff; 1023 padding: 10px;
1023 padding: 10px; 1024 }
1024 } 1025 .page-header {
1025 .page-header { 1026 margin: 10px 0 20px 0;
1026 margin: 10px 0 20px 0; 1027 padding: 0px 0px 16px;
1027 padding: 0px 0px 16px; 1028 font-size: 22px;
1028 font-size: 22px; 1029 border: none;
1029 border: none; 1030 }
1030 } 1031 .table {
1031 .table { 1032 width: 100%;
1032 width: 100%; 1033 border-collapse: collapse;
1033 border-collapse: collapse; 1034 border-spacing: 0;
1034 border-spacing: 0; 1035 }
1035 } 1036 .table > tbody > tr > th,
1036 .table > tbody > tr > th, 1037 .table > tfoot > tr > th,
1037 .table > tfoot > tr > th, 1038 .table > tbody > tr > td,
1038 .table > tbody > tr > td, 1039 .table > tfoot > tr > td {
1039 .table > tfoot > tr > td { 1040 padding: 8px;
1040 padding: 8px; 1041 line-height: 1.428571429;
1041 line-height: 1.428571429; 1042 vertical-align: top;
1042 vertical-align: top; 1043 border-top: 1px solid #ddd;
1043 border-top: 1px solid #ddd; 1044 }
1044 } 1045 .nav::before,
1045 .nav::before, 1046 .nav::after {
1046 .nav::after { 1047 display: table;
1047 display: table; 1048 content: "";
1048 content: ""; 1049 }
1049 } 1050 .box .box-body .table {
1050 .box .box-body .table { 1051 margin-bottom: 0;
1051 margin-bottom: 0; 1052 }
1052 } 1053 .table-bordered {
1053 .table-bordered { 1054 border: 1px solid #e2e7eb;
1054 border: 1px solid #e2e7eb; 1055 }
1055 } 1056 .table-striped > tbody > tr:nth-child(2n + 1) > td,
1056 .table-striped > tbody > tr:nth-child(2n + 1) > td, 1057 .table-striped > tbody > tr:nth-child(2n + 1) > th {
1057 .table-striped > tbody > tr:nth-child(2n + 1) > th { 1058 background-color: #f0f3f5;
1058 background-color: #f0f3f5; 1059 }
1059 } 1060 .table-bordered > tbody > v-data-table > template > tr > th,
1060 .table-bordered > tbody > v-data-table > template > tr > th, 1061 .table-bordered > tbody > tr > td {
1061 .table-bordered > tbody > tr > td { 1062 border-color: #e2e7eb;
1062 border-color: #e2e7eb; 1063 font-size: 12px;
1063 font-size: 12px; 1064 }
1064 } 1065 .table-bordered > tbody > tr > td {
1065 .table-bordered > tbody > tr > td { 1066 color: #707070;
1066 color: #707070; 1067 }
1067 } 1068 /*
1068 /* 1069 .table-bordered > tbody > tr > th,
1069 .table-bordered > tbody > tr > th, 1070 .table-bordered > tfoot > tr > th,
1070 .table-bordered > tfoot > tr > th, 1071 .table-bordered > tbody > tr > td,
1071 .table-bordered > tbody > tr > td, 1072 .table-bordered > tfoot > tr > td {
1072 .table-bordered > tfoot > tr > td { 1073 border: 1px solid #ddd;
1073 border: 1px solid #ddd; 1074 } */
1074 } */ 1075 .mCustomScrollbar.mCS_no_scrollbar,
1075 .mCustomScrollbar.mCS_no_scrollbar, 1076 .mCustomScrollbar.mCS_touch_action {
1076 .mCustomScrollbar.mCS_touch_action { 1077 touch-action: auto;
1077 touch-action: auto; 1078 }
1078 } 1079 .mCSB_scrollTools.mCSB_scrollTools_horizontal {
1079 .mCSB_scrollTools.mCSB_scrollTools_horizontal { 1080 width: auto;
1080 width: auto; 1081 height: 16px;
1081 height: 16px; 1082 top: auto;
1082 top: auto; 1083 right: 0;
1083 right: 0; 1084 bottom: 0;
1084 bottom: 0; 1085 left: 0;
1085 left: 0; 1086 }
1086 } 1087 .mCSB_scrollTools {
1087 .mCSB_scrollTools { 1088 opacity: 0.75;
1088 opacity: 0.75; 1089 }
1089 } 1090 .mCSB_scrollTools .mCSB_draggerContainer {
1090 .mCSB_scrollTools .mCSB_draggerContainer { 1091 position: absolute;
1091 position: absolute; 1092 height: auto;
1092 height: auto; 1093 top: 0;
1093 top: 0; 1094 left: 0;
1094 left: 0; 1095 bottom: 0;
1095 bottom: 0; 1096 right: 0;
1096 right: 0; 1097 }
1097 } 1098 .mCSB_scrollTools.mCSB_scrollTools_horizontal .mCSB_dragger {
1098 .mCSB_scrollTools.mCSB_scrollTools_horizontal .mCSB_dragger { 1099 height: 100%;
1099 height: 100%; 1100 }
1100 } 1101 .mCSB_scrollTools .mCSB_dragger {
1101 .mCSB_scrollTools .mCSB_dragger { 1102 cursor: pointer;
1102 cursor: pointer; 1103 z-index: 1;
1103 z-index: 1; 1104 }
1104 } 1105 .mCSB_scrollTools.mCSB_scrollTools_horizontal .mCSB_dragger .mCSB_dragger_bar {
1105 .mCSB_scrollTools.mCSB_scrollTools_horizontal .mCSB_dragger .mCSB_dragger_bar { 1106 width: 100%;
1106 width: 100%; 1107 height: 4px;
1107 height: 4px; 1108 margin: 6px auto;
1108 margin: 6px auto; 1109 }
1109 } 1110 .mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar {
1110 .mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar { 1111 background-color: rgba(255, 255, 255, 0.75);
1111 background-color: rgba(255, 255, 255, 0.75); 1112 }
1112 } 1113 .mCSB_scrollTools.mCSB_scrollTools_horizontal .mCSB_draggerRail {
1113 .mCSB_scrollTools.mCSB_scrollTools_horizontal .mCSB_draggerRail { 1114 width: 100%;
1114 width: 100%; 1115 height: 2px;
1115 height: 2px; 1116 margin: 7px 0;
1116 margin: 7px 0; 1117 }
1117 } 1118 .mCSB_scrollTools .mCSB_draggerRail {
1118 .mCSB_scrollTools .mCSB_draggerRail { 1119 background-color: rgba(0, 0, 0, 0.4);
1119 background-color: rgba(0, 0, 0, 0.4); 1120 border-radius: 16px;
1120 border-radius: 16px; 1121 }
1121 } 1122 .mCustomScrollBox {
1122 .mCustomScrollBox { 1123 position: relative;
1123 position: relative; 1124 overflow: hidden;
1124 overflow: hidden; 1125 height: 100%;
1125 height: 100%; 1126 max-width: 100%;
1126 max-width: 100%; 1127 outline: none;
1127 outline: none; 1128 direction: ltr;
1128 direction: ltr; 1129 }
1129 } 1130 /* .mCSB_horizontal > .mCSB_container.mCS_no_scrollbar_x.mCS_x_hidden {
1130 /* .mCSB_horizontal > .mCSB_container.mCS_no_scrollbar_x.mCS_x_hidden { 1131 margin-bottom: 0;
1131 margin-bottom: 0; 1132 }
1132 } 1133 .mCSB_horizontal.mCSB_inside > .mCSB_container {
1133 .mCSB_horizontal.mCSB_inside > .mCSB_container { 1134 margin-right: 0;
1134 margin-right: 0; 1135 } */
1135 } */ 1136 .mCSB_container {
1136 .mCSB_container { 1137 overflow: hidden;
1137 overflow: hidden; 1138 height: auto;
1138 height: auto; 1139 }
1139 } 1140
1140 1141 @media (min-width: 768px) {
1141 @media (min-width: 768px) { 1142 .col-sm-12 {
1142 .col-sm-12 { 1143 width: 100%;
1143 width: 100%; 1144 }
src/pages/Academic/subject.vue
Diff comments   View file @8b7976c
1 <template> 1 <template>
2 <v-container fluid class="body-color"> 2 <v-container fluid class="body-color">
3 <!-- ****** EDIT Subject ****** --> 3 <!-- ****** EDIT Subject ****** -->
4 <v-dialog v-model="editSubjectDialog" max-width="600px" persistent> 4 <v-dialog v-model="editSubjectDialog" max-width="600px" persistent>
5 <v-card flat class="card-style pa-2" dark> 5 <v-card flat class="card-style pa-2" dark>
6 <v-layout> 6 <v-layout>
7 <v-flex xs12> 7 <v-flex xs12>
8 <label class="title text-xs-center">Edit Subject</label> 8 <label class="title text-xs-center">Edit Subject</label>
9 <v-icon size="24" class="right" @click="editSubjectDialog = false">cancel</v-icon> 9 <v-icon size="24" class="right" @click="editSubjectDialog = false">cancel</v-icon>
10 </v-flex> 10 </v-flex>
11 </v-layout> 11 </v-layout>
12 <v-container fluid> 12 <v-container fluid>
13 <v-form ref="formEditSubject" v-model="validEditSubject" lazy-validation> 13 <v-form ref="formEditSubject" v-model="validEditSubject" lazy-validation>
14 <v-layout> 14 <v-layout>
15 <v-flex xs4 class="pt-4 subheading"> 15 <v-flex xs4 class="pt-4 subheading">
16 <label class="right">Class:</label> 16 <label class="right">Class:</label>
17 </v-flex> 17 </v-flex>
18 <v-flex xs8 class="ml-3"> 18 <v-flex xs8 class="ml-3">
19 <v-select 19 <v-select
20 v-model="editedItem.classId" 20 v-model="editedItem.classId"
21 label="Select your class" 21 label="Select your class"
22 type="text" 22 type="text"
23 :items="classList" 23 :items="classList"
24 item-text="classNum" 24 item-text="classNum"
25 item-value="_id" 25 item-value="_id"
26 :rules="classRules" 26 :rules="classRules"
27 required 27 required
28 ></v-select> 28 ></v-select>
29 </v-flex> 29 </v-flex>
30 </v-layout> 30 </v-layout>
31 <v-layout> 31 <v-layout>
32 <v-flex xs4 sm4 class="pt-4 subheading"> 32 <v-flex xs4 sm4 class="pt-4 subheading">
33 <label class="right">Teacher Name :</label> 33 <label class="right">Teacher Name :</label>
34 </v-flex> 34 </v-flex>
35 <v-flex xs8 sm8 class="ml-3"> 35 <v-flex xs8 sm8 class="ml-3">
36 <v-select 36 <v-select
37 v-model="editedItem.teacherId" 37 v-model="editedItem.teacherId"
38 label="Select your teacher" 38 label="Select your teacher"
39 type="text" 39 type="text"
40 :items="teacherList" 40 :items="teacherList"
41 item-text="name" 41 item-text="name"
42 item-value="_id" 42 item-value="_id"
43 :rules="teacherRules" 43 :rules="teacherRules"
44 required 44 required
45 ></v-select> 45 ></v-select>
46 </v-flex> 46 </v-flex>
47 </v-layout> 47 </v-layout>
48 <v-layout> 48 <v-layout>
49 <v-flex xs4 sm4 class="pt-4 sybheading"> 49 <v-flex xs4 sm4 class="pt-4 sybheading">
50 <label class="right">Type :</label> 50 <label class="right">Type :</label>
51 </v-flex> 51 </v-flex>
52 <v-flex xs8 sm8 class="ml-3"> 52 <v-flex xs8 sm8 class="ml-3">
53 <v-select 53 <v-select
54 v-model="editedItem.type" 54 v-model="editedItem.type"
55 :items="type" 55 :items="type"
56 label="Select your Type" 56 label="Select your Type"
57 :rules="typeRules" 57 :rules="typeRules"
58 required 58 required
59 ></v-select> 59 ></v-select>
60 </v-flex> 60 </v-flex>
61 </v-layout> 61 </v-layout>
62 <v-layout> 62 <v-layout>
63 <v-flex xs4 sm4 class="pt-4 subheading"> 63 <v-flex xs4 sm4 class="pt-4 subheading">
64 <label class="right">Pass Mark :</label> 64 <label class="right">Pass Mark :</label>
65 </v-flex> 65 </v-flex>
66 <v-flex xs8 sm8 class="ml-3"> 66 <v-flex xs8 sm8 class="ml-3">
67 <v-text-field 67 <v-text-field
68 label="Fill your Pass Mark" 68 label="Fill your Pass Mark"
69 name="name" 69 name="name"
70 type="text" 70 type="text"
71 :rules="markRules" 71 :rules="markRules"
72 v-model="editedItem.passMarks" 72 v-model="editedItem.passMarks"
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-layout> 77 <v-layout>
78 <v-flex xs4 sm4 class="pt-4 subheading"> 78 <v-flex xs4 sm4 class="pt-4 subheading">
79 <label class="right">Final Mark :</label> 79 <label class="right">Final Mark :</label>
80 </v-flex> 80 </v-flex>
81 <v-flex xs8 sm8 class="ml-3"> 81 <v-flex xs8 sm8 class="ml-3">
82 <v-text-field 82 <v-text-field
83 label="Fill your final mark" 83 label="Fill your final mark"
84 name="name" 84 name="name"
85 type="text" 85 type="text"
86 :rules="finalRules" 86 :rules="finalRules"
87 v-model="editedItem.finalMarks" 87 v-model="editedItem.finalMarks"
88 required 88 required
89 ></v-text-field> 89 ></v-text-field>
90 </v-flex> 90 </v-flex>
91 </v-layout> 91 </v-layout>
92 <v-layout> 92 <v-layout>
93 <v-flex xs4 class="pt-4 subheading"> 93 <v-flex xs4 class="pt-4 subheading">
94 <label class="right">Subject:</label> 94 <label class="right">Subject:</label>
95 </v-flex> 95 </v-flex>
96 <v-flex xs8 class="ml-3"> 96 <v-flex xs8 class="ml-3">
97 <v-text-field 97 <v-text-field
98 placeholder="fill your Subject" 98 placeholder="fill your Subject"
99 v-model="editedItem.subjectName" 99 v-model="editedItem.subjectName"
100 :rules="subjectRules" 100 :rules="subjectRules"
101 type="text" 101 type="text"
102 name="email" 102 name="email"
103 required 103 required
104 ></v-text-field> 104 ></v-text-field>
105 </v-flex> 105 </v-flex>
106 </v-layout> 106 </v-layout>
107 <v-layout> 107 <v-layout>
108 <v-flex xs4 sm4 class="pt-4 subheading"> 108 <v-flex xs4 sm4 class="pt-4 subheading">
109 <label class="right">Subject Author :</label> 109 <label class="right">Subject Author :</label>
110 </v-flex> 110 </v-flex>
111 <v-flex xs8 sm8 class="ml-3"> 111 <v-flex xs8 sm8 class="ml-3">
112 <v-text-field 112 <v-text-field
113 v-model="editedItem.subjectAuthor" 113 v-model="editedItem.subjectAuthor"
114 placeholder="fill your Subject Author" 114 placeholder="fill your Subject Author"
115 name="name" 115 name="name"
116 type="text" 116 type="text"
117 ></v-text-field> 117 ></v-text-field>
118 </v-flex> 118 </v-flex>
119 </v-layout> 119 </v-layout>
120 <v-layout> 120 <v-layout>
121 <v-flex xs4 sm4 class="pt-4 subheading"> 121 <v-flex xs4 sm4 class="pt-4 subheading">
122 <label class="right">Subject Code:</label> 122 <label class="right">Subject Code:</label>
123 </v-flex> 123 </v-flex>
124 <v-flex xs8 sm8 class="ml-3"> 124 <v-flex xs8 sm8 class="ml-3">
125 <v-text-field 125 <v-text-field
126 v-model="editedItem.subjectCode" 126 v-model="editedItem.subjectCode"
127 placeholder="fill your Subject Code" 127 placeholder="fill your Subject Code"
128 name="name" 128 name="name"
129 type="text" 129 type="text"
130 ></v-text-field> 130 ></v-text-field>
131 </v-flex> 131 </v-flex>
132 </v-layout> 132 </v-layout>
133 <v-flex xs12 sm12> 133 <v-flex xs12 sm12>
134 <v-card-actions> 134 <v-card-actions>
135 <v-spacer></v-spacer> 135 <v-spacer></v-spacer>
136 <v-btn 136 <v-btn
137 round 137 round
138 dark 138 dark
139 @click="save" 139 @click="save"
140 :loading="editLoading" 140 :loading="editLoading"
141 class="add-button" 141 class="add-button"
142 >Update Subject</v-btn> 142 >Update Subject</v-btn>
143 </v-card-actions> 143 </v-card-actions>
144 </v-flex> 144 </v-flex>
145 </v-form> 145 </v-form>
146 </v-container> 146 </v-container>
147 </v-card> 147 </v-card>
148 </v-dialog> 148 </v-dialog>
149 149
150 <!-- ****** VIEW PROFIL NOTICE BOARD ****** --> 150 <!-- ****** VIEW PROFIL NOTICE BOARD ****** -->
151 151
152 <v-dialog v-model="viewSubjectDialog" max-width="500px" persistent> 152 <v-dialog v-model="viewSubjectDialog" max-width="500px" persistent>
153 <v-card flat class="card-style pa-3" dark> 153 <v-card flat class="card-style pa-3" dark>
154 <v-layout> 154 <v-layout>
155 <v-flex xs12> 155 <v-flex xs12>
156 <label class="title text-xs-center">View Subject</label> 156 <label class="title text-xs-center">View Subject</label>
157 <v-icon size="24" class="right" @click="viewSubjectDialog = false">cancel</v-icon> 157 <v-icon size="24" class="right" @click="viewSubjectDialog = false">cancel</v-icon>
158 </v-flex> 158 </v-flex>
159 </v-layout> 159 </v-layout>
160 <v-card-text> 160 <v-card-text>
161 <v-container grid-list-md> 161 <v-container grid-list-md>
162 <v-layout wrap> 162 <v-layout wrap>
163 <v-flex> 163 <v-flex>
164 <v-layout> 164 <v-layout>
165 <v-flex xs6 sm4> 165 <v-flex xs6 sm4>
166 <h5 class="right my-1"> 166 <h5 class="right my-1">
167 <b>Subject Name:</b> 167 <b>Subject Name:</b>
168 </h5> 168 </h5>
169 </v-flex> 169 </v-flex>
170 <v-flex sm8 xs6> 170 <v-flex sm8 xs6>
171 <h5 class="my-1">{{ editedItem.subjectName }}</h5> 171 <h5 class="my-1">{{ editedItem.subjectName }}</h5>
172 </v-flex> 172 </v-flex>
173 </v-layout> 173 </v-layout>
174 <v-layout> 174 <v-layout>
175 <v-flex xs6 sm4> 175 <v-flex xs6 sm4>
176 <h5 class="right my-1"> 176 <h5 class="right my-1">
177 <b>Subject Author:</b> 177 <b>Subject Author:</b>
178 </h5> 178 </h5>
179 </v-flex> 179 </v-flex>
180 <v-flex sm8 xs6> 180 <v-flex sm8 xs6>
181 <h5 class="my-1">{{ editedItem.subjectAuthor }}</h5> 181 <h5 class="my-1">{{ editedItem.subjectAuthor }}</h5>
182 </v-flex> 182 </v-flex>
183 </v-layout> 183 </v-layout>
184 <v-layout> 184 <v-layout>
185 <v-flex xs6 sm4> 185 <v-flex xs6 sm4>
186 <h5 class="right my-1"> 186 <h5 class="right my-1">
187 <b>Subject :</b> 187 <b>Subject :</b>
188 </h5> 188 </h5>
189 </v-flex> 189 </v-flex>
190 <v-flex sm8 xs6> 190 <v-flex sm8 xs6>
191 <h5 class="my-1">{{ editedItem.subjectCode }}</h5> 191 <h5 class="my-1">{{ editedItem.subjectCode }}</h5>
192 </v-flex> 192 </v-flex>
193 </v-layout> 193 </v-layout>
194 <!-- <v-layout> 194 <!-- <v-layout>
195 <v-flex xs6 sm4> 195 <v-flex xs6 sm4>
196 <h5 class="right my-1"> 196 <h5 class="right my-1">
197 <b>Teacher :</b> 197 <b>Teacher :</b>
198 </h5> 198 </h5>
199 </v-flex> 199 </v-flex>
200 <v-flex sm8 xs6> 200 <v-flex sm8 xs6>
201 <h5 class="my-1">{{ editedItem.teacherId }}</h5> 201 <h5 class="my-1">{{ editedItem.teacherId }}</h5>
202 </v-flex> 202 </v-flex>
203 </v-layout>--> 203 </v-layout>-->
204 <v-layout> 204 <v-layout>
205 <v-flex xs6 sm4> 205 <v-flex xs6 sm4>
206 <h5 class="right my-1"> 206 <h5 class="right my-1">
207 <b>Pass Marks :</b> 207 <b>Pass Marks :</b>
208 </h5> 208 </h5>
209 </v-flex> 209 </v-flex>
210 <v-flex sm8 xs6> 210 <v-flex sm8 xs6>
211 <h5 class="my-1">{{ editedItem.passMarks }}</h5> 211 <h5 class="my-1">{{ editedItem.passMarks }}</h5>
212 </v-flex> 212 </v-flex>
213 </v-layout> 213 </v-layout>
214 <v-layout> 214 <v-layout>
215 <v-flex xs6 sm4> 215 <v-flex xs6 sm4>
216 <h5 class="right my-1"> 216 <h5 class="right my-1">
217 <b>Final Marks :</b> 217 <b>Final Marks :</b>
218 </h5> 218 </h5>
219 </v-flex> 219 </v-flex>
220 <v-flex sm8 xs6> 220 <v-flex sm8 xs6>
221 <h5 class="my-1">{{ editedItem.finalMarks }}</h5> 221 <h5 class="my-1">{{ editedItem.finalMarks }}</h5>
222 </v-flex> 222 </v-flex>
223 </v-layout> 223 </v-layout>
224 <v-layout> 224 <v-layout>
225 <v-flex xs6 sm4> 225 <v-flex xs6 sm4>
226 <h5 class="right my-1"> 226 <h5 class="right my-1">
227 <b>Type :</b> 227 <b>Type :</b>
228 </h5> 228 </h5>
229 </v-flex> 229 </v-flex>
230 <v-flex sm8 xs6> 230 <v-flex sm8 xs6>
231 <h5 class="my-1">{{ editedItem.type }}</h5> 231 <h5 class="my-1">{{ editedItem.type }}</h5>
232 </v-flex> 232 </v-flex>
233 </v-layout> 233 </v-layout>
234 </v-flex> 234 </v-flex>
235 </v-layout> 235 </v-layout>
236 </v-container> 236 </v-container>
237 </v-card-text> 237 </v-card-text>
238 </v-card> 238 </v-card>
239 </v-dialog> 239 </v-dialog>
240 240
241 <!-- ****** EXISTING SUBJECTS TABLE ****** --> 241 <!-- ****** EXISTING SUBJECTS TABLE ****** -->
242 <v-toolbar color="transparent" flat> 242 <v-toolbar color="transparent" flat>
243 <v-btn 243 <v-btn
244 fab 244 fab
245 dark 245 dark
246 class="open-dialog-button hidden-xl-only hidden-md-only hidden-lg-only" 246 class="open-dialog-button hidden-xl-only hidden-md-only hidden-lg-only"
247 small 247 small
248 @click="addSubjectDialog = true" 248 @click="addSubjectDialog = true"
249 > 249 >
250 <v-icon dark>add</v-icon> 250 <v-icon dark>add</v-icon>
251 </v-btn> 251 </v-btn>
252 <v-flex xs1 class="hidden-sm-only hidden-xs-only"> 252 <v-flex xs1 class="hidden-sm-only hidden-xs-only">
253 <v-btn 253 <v-btn
254 round 254 round
255 class="open-dialog-button" 255 class="open-dialog-button"
256 dark 256 dark
257 @click="addSubjectDialog = true" 257 @click="addSubjectDialog = true"
258 v-if="role != 'TEACHER' " 258 v-if="role != 'TEACHER' "
259 > 259 >
260 <v-icon class="white--text pr-1" size="20">add</v-icon>Add Subject 260 <v-icon class="white--text pr-1" size="20">add</v-icon>Add Subject
261 </v-btn> 261 </v-btn>
262 </v-flex> 262 </v-flex>
263 <v-spacer></v-spacer> 263 <v-spacer></v-spacer>
264 <v-flex lg2 md2 xs12 v-show="show"> 264 <v-flex lg2 md2 xs12 v-show="show">
265 <v-select 265 <v-select
266 :items="classList" 266 :items="classList"
267 label="Select Your Class" 267 label="Select Your Class"
268 v-model="getSubject.classId" 268 v-model="getSubject.classId"
269 item-text="classNum" 269 item-text="classNum"
270 item-value="_id" 270 item-value="_id"
271 name="Select Class" 271 name="Select Class"
272 :rules="classRules" 272 :rules="classRules"
273 @change="getClassSubject" 273 @change="getClassSubject"
274 class="pl-2" 274 class="pl-2"
275 required 275 required
276 ></v-select> 276 ></v-select>
277 </v-flex> 277 </v-flex>
278 <v-card-title class="body-1" v-show="show"> 278 <v-card-title class="body-1" v-show="show">
279 <v-btn icon flat @click="displaySearch"> 279 <v-btn icon flat @click="displaySearch">
280 <v-avatar size="27"> 280 <v-avatar size="27">
281 <img src="/static/icon/search.png" alt="icon" /> 281 <img src="/static/icon/search.png" alt="icon" />
282 </v-avatar> 282 </v-avatar>
283 </v-btn> 283 </v-btn>
284 </v-card-title> 284 </v-card-title>
285 <v-flex xs9 sm9 md2 lg2 xl2 v-if="showSearch"> 285 <v-flex xs9 sm9 md2 lg2 xl2 v-if="showSearch">
286 <v-layout> 286 <v-layout>
287 <v-text-field 287 <v-text-field
288 autofocus 288 autofocus
289 v-model="search" 289 v-model="search"
290 label="Search" 290 label="Search"
291 prepend-inner-icon="search" 291 prepend-inner-icon="search"
292 color="primary" 292 color="primary"
293 style="transition: 0.8s cubic-bezier(0.25, 0.8, 0.25, 1); !important" 293 style="transition: 0.8s cubic-bezier(0.25, 0.8, 0.25, 1); !important"
294 ></v-text-field> 294 ></v-text-field>
295 <v-icon @click="closeSearch" color="error">close</v-icon> 295 <v-icon @click="closeSearch" color="error">close</v-icon>
296 </v-layout> 296 </v-layout>
297 </v-flex> 297 </v-flex>
298 </v-toolbar> 298 </v-toolbar>
299 <v-data-table 299 <v-data-table
300 :headers="headers" 300 :headers="headers"
301 :items="subjectList.subjects" 301 :items="subjectList.subjects"
302 :pagination.sync="pagination" 302 :pagination.sync="pagination"
303 :search="search" 303 :search="search"
304 > 304 >
305 <template slot="items" slot-scope="props"> 305 <template slot="items" slot-scope="props">
306 <tr class="tr"> 306 <tr class="tr">
307 <td class="td-row td">{{ props.index + 1 }}</td> 307 <td class="td-row td">{{ props.index + 1 }}</td>
308 <td class="text-xs-center td td-row">{{ props.item.subjectName }}</td> 308 <td class="text-xs-center td td-row">{{ props.item.subjectName }}</td>
309 <td class="text-xs-center td td-row">{{ props.item.subjectAuthor }}</td> 309 <td class="text-xs-center td td-row">{{ props.item.subjectAuthor }}</td>
310 <td class="text-xs-center td td-row">{{ props.item.subjectCode }}</td> 310 <td class="text-xs-center td td-row">{{ props.item.subjectCode }}</td>
311 <!-- <td class="text-xs-center td td-row">{{ props.item.teacherId }}</td> --> 311 <!-- <td class="text-xs-center td td-row">{{ props.item.teacherId }}</td> -->
312 <td class="text-xs-center td td-row">{{ props.item.passMarks }}</td> 312 <td class="text-xs-center td td-row">{{ props.item.passMarks }}</td>
313 <td class="text-xs-center td td-row">{{ props.item.finalMarks }}</td> 313 <td class="text-xs-center td td-row">{{ props.item.finalMarks }}</td>
314 <td class="text-xs-center td td-row">{{ props.item.type }}</td> 314 <td class="text-xs-center td td-row">{{ props.item.type }}</td>
315 315
316 <td class="text-xs-center td td-row" v-if="role === 'ADMIN' "> 316 <td class="text-xs-center td td-row" v-if="role === 'ADMIN' ">
317 <span> 317 <span>
318 <v-tooltip top> 318 <v-tooltip top>
319 <img 319 <img
320 slot="activator" 320 slot="activator"
321 style="cursor:pointer; width:25px; height:25px; " 321 style="cursor:pointer; width:25px; height:25px; "
322 class="mr-3" 322 class="mr-3"
323 @click="profile(props.item)" 323 @click="profile(props.item)"
324 src="/static/icon/view.png" 324 src="/static/icon/view.png"
325 /> 325 />
326 <span>View</span> 326 <span>View</span>
327 </v-tooltip> 327 </v-tooltip>
328 <v-tooltip top> 328 <v-tooltip top>
329 <img 329 <img
330 slot="activator" 330 slot="activator"
331 style="cursor:pointer; width:20px; height:18px; " 331 style="cursor:pointer; width:20px; height:18px; "
332 class="mr-3" 332 class="mr-3"
333 @click="editItem(props.item)" 333 @click="editItem(props.item)"
334 src="/static/icon/edit.png" 334 src="/static/icon/edit.png"
335 /> 335 />
336 <span>Edit</span> 336 <span>Edit</span>
337 </v-tooltip> 337 </v-tooltip>
338 <v-tooltip top> 338 <v-tooltip top>
339 <img 339 <img
340 slot="activator" 340 slot="activator"
341 style="cursor:pointer; width:20px; height:20px; " 341 style="cursor:pointer; width:20px; height:20px; "
342 class="mr-3" 342 class="mr-3"
343 @click="deleteItem(props.item)" 343 @click="deleteItem(props.item)"
344 src="/static/icon/delete.png" 344 src="/static/icon/delete.png"
345 /> 345 />
346 <span>Delete</span> 346 <span>Delete</span>
347 </v-tooltip> 347 </v-tooltip>
348 </span> 348 </span>
349 </td> 349 </td>
350 </tr> 350 </tr>
351 </template> 351 </template>
352 <v-alert 352 <v-alert
353 slot="no-results" 353 slot="no-results"
354 :value="true" 354 :value="true"
355 color="error" 355 color="error"
356 icon="warning" 356 icon="warning"
357 >Your search for "{{ search }}" found no results.</v-alert> 357 >Your search for "{{ search }}" found no results.</v-alert>
358 </v-data-table> 358 </v-data-table>
359 <!-- ****** ADD MULTIPLE Subject ****** --> 359 <!-- ****** ADD MULTIPLE Subject ****** -->
360 <v-snackbar 360 <v-snackbar
361 :timeout="timeout" 361 :timeout="timeout"
362 :top="y === 'top'" 362 :top="y === 'top'"
363 :right="x === 'right'" 363 :right="x === 'right'"
364 :vertical="mode === 'vertical'" 364 :vertical="mode === 'vertical'"
365 v-model="snackbar" 365 v-model="snackbar"
366 :color="color" 366 :color="color"
367 >{{ text }}</v-snackbar> 367 >{{ text }}</v-snackbar>
368 <v-dialog v-model="addSubjectDialog" max-width="600px" v-if="addSubjectDialog" persistent> 368 <v-dialog v-model="addSubjectDialog" max-width="600px" v-if="addSubjectDialog" persistent>
369 <v-card flat class="card-style pa-2" dark> 369 <v-card flat class="card-style pa-2" dark>
370 <v-layout> 370 <v-layout>
371 <v-flex xs12> 371 <v-flex xs12>
372 <label class="title text-xs-center">Add Subject</label> 372 <label class="title text-xs-center">Add Subject</label>
373 <v-icon 373 <v-icon
374 size="24" 374 size="24"
375 class="right" 375 class="right"
376 @click="$refs.form.reset();addSubjectDialog = false" 376 @click="$refs.form.reset();addSubjectDialog = false"
377 >cancel</v-icon> 377 >cancel</v-icon>
378 </v-flex> 378 </v-flex>
379 </v-layout> 379 </v-layout>
380 <v-container fluid fill-height> 380 <v-container fluid fill-height>
381 <v-layout align-center> 381 <v-layout align-center>
382 <v-flex xs12> 382 <v-flex xs12>
383 <v-form ref="form" v-model="valid" lazy-validation> 383 <v-form ref="form" v-model="valid" lazy-validation>
384 <v-layout> 384 <v-layout>
385 <v-flex xs4 sm4 class="pt-4 subheading"> 385 <v-flex xs4 sm4 class="pt-4 subheading">
386 <label class="right">Class Name :</label> 386 <label class="right">Class Name :</label>
387 </v-flex> 387 </v-flex>
388 <v-flex xs8 sm8 class="ml-3"> 388 <v-flex xs8 sm8 class="ml-3">
389 <v-select 389 <v-select
390 v-model="addSubject.classId" 390 v-model="addSubject.classId"
391 label="Select your class" 391 label="Select your class"
392 type="text" 392 type="text"
393 :items="classList" 393 :items="classList"
394 item-text="classNum" 394 item-text="classNum"
395 item-value="_id" 395 item-value="_id"
396 :rules="classRules" 396 :rules="classRules"
397 required 397 required
398 ></v-select> 398 ></v-select>
399 </v-flex> 399 </v-flex>
400 </v-layout> 400 </v-layout>
401 <v-layout> 401 <v-layout>
402 <v-flex xs4 sm4 class="pt-4 subheading"> 402 <v-flex xs4 sm4 class="pt-4 subheading">
403 <label class="right">Teacher Name :</label> 403 <label class="right">Teacher Name :</label>
404 </v-flex> 404 </v-flex>
405 <v-flex xs8 sm8 class="ml-3"> 405 <v-flex xs8 sm8 class="ml-3">
406 <v-select 406 <v-select
407 v-model="addSubject.teacherId" 407 v-model="addSubject.teacherId"
408 label="Select your teacher" 408 label="Select your teacher"
409 type="text" 409 type="text"
410 :items="teacherList" 410 :items="teacherList"
411 item-text="name" 411 item-text="name"
412 item-value="_id" 412 item-value="_id"
413 :rules="teacherRules" 413 :rules="teacherRules"
414 required 414 required
415 ></v-select> 415 ></v-select>
416 </v-flex> 416 </v-flex>
417 </v-layout> 417 </v-layout>
418 <v-layout> 418 <v-layout>
419 <v-flex xs4 sm4 class="pt-4 sybheading"> 419 <v-flex xs4 sm4 class="pt-4 sybheading">
420 <label class="right">Type :</label> 420 <label class="right">Type :</label>
421 </v-flex> 421 </v-flex>
422 <v-flex xs8 sm8 class="ml-3"> 422 <v-flex xs8 sm8 class="ml-3">
423 <v-select 423 <v-select
424 v-model="addSubject.type" 424 v-model="addSubject.type"
425 :items="type" 425 :items="type"
426 label="Select your Type" 426 label="Select your Type"
427 :rules="typeRules" 427 :rules="typeRules"
428 required 428 required
429 ></v-select> 429 ></v-select>
430 </v-flex> 430 </v-flex>
431 </v-layout> 431 </v-layout>
432 <v-layout> 432 <v-layout>
433 <v-flex xs4 sm4 class="pt-4 subheading"> 433 <v-flex xs4 sm4 class="pt-4 subheading">
434 <label class="right">Pass Mark :</label> 434 <label class="right">Pass Mark :</label>
435 </v-flex> 435 </v-flex>
436 <v-flex xs8 sm8 class="ml-3"> 436 <v-flex xs8 sm8 class="ml-3">
437 <v-text-field 437 <v-text-field
438 label="Fill your Pass Mark" 438 label="Fill your Pass Mark"
439 name="name" 439 name="name"
440 type="text" 440 type="text"
441 :rules="markRules" 441 :rules="markRules"
442 v-model="addSubject.passMarks" 442 v-model="addSubject.passMarks"
443 required 443 required
444 ></v-text-field> 444 ></v-text-field>
445 </v-flex> 445 </v-flex>
446 </v-layout> 446 </v-layout>
447 <v-layout> 447 <v-layout>
448 <v-flex xs4 sm4 class="pt-4 subheading"> 448 <v-flex xs4 sm4 class="pt-4 subheading">
449 <label class="right">Final Mark :</label> 449 <label class="right">Final Mark :</label>
450 </v-flex> 450 </v-flex>
451 <v-flex xs8 sm8 class="ml-3"> 451 <v-flex xs8 sm8 class="ml-3">
452 <v-text-field 452 <v-text-field
453 label="Fill your final mark" 453 label="Fill your final mark"
454 name="name" 454 name="name"
455 type="text" 455 type="text"
456 :rules="finalRules" 456 :rules="finalRules"
457 v-model="addSubject.finalMarks" 457 v-model="addSubject.finalMarks"
458 required 458 required
459 ></v-text-field> 459 ></v-text-field>
460 </v-flex> 460 </v-flex>
461 </v-layout> 461 </v-layout>
462 <v-layout> 462 <v-layout>
463 <v-flex xs4 sm4 class="pt-4 subheading"> 463 <v-flex xs4 sm4 class="pt-4 subheading">
464 <label class="right">Subject :</label> 464 <label class="right">Subject :</label>
465 </v-flex> 465 </v-flex>
466 <v-flex xs8 sm8 class="ml-3"> 466 <v-flex xs8 sm8 class="ml-3">
467 <v-text-field 467 <v-text-field
468 v-model="addSubject.subjectName" 468 v-model="addSubject.subjectName"
469 placeholder="fill your Subject Name" 469 placeholder="fill your Subject Name"
470 name="name" 470 name="name"
471 type="text" 471 type="text"
472 :rules="subjectRules" 472 :rules="subjectRules"
473 required 473 required
474 ></v-text-field> 474 ></v-text-field>
475 </v-flex> 475 </v-flex>
476 </v-layout> 476 </v-layout>
477 <v-layout> 477 <v-layout>
478 <v-flex xs4 sm4 class="pt-4 subheading"> 478 <v-flex xs4 sm4 class="pt-4 subheading">
479 <label class="right">Subject Author :</label> 479 <label class="right">Subject Author :</label>
480 </v-flex> 480 </v-flex>
481 <v-flex xs8 sm8 class="ml-3"> 481 <v-flex xs8 sm8 class="ml-3">
482 <v-text-field 482 <v-text-field
483 v-model="addSubject.subjectAuthor" 483 v-model="addSubject.subjectAuthor"
484 placeholder="fill your Subject Author" 484 placeholder="fill your Subject Author"
485 name="name" 485 name="name"
486 type="text" 486 type="text"
487 ></v-text-field> 487 ></v-text-field>
488 </v-flex> 488 </v-flex>
489 </v-layout> 489 </v-layout>
490 <v-layout> 490 <v-layout>
491 <v-flex xs4 sm4 class="pt-4 subheading"> 491 <v-flex xs4 sm4 class="pt-4 subheading">
492 <label class="right">Subject Code:</label> 492 <label class="right">Subject Code:</label>
493 </v-flex> 493 </v-flex>
494 <v-flex xs8 sm8 class="ml-3"> 494 <v-flex xs8 sm8 class="ml-3">
495 <v-text-field 495 <v-text-field
496 v-model="addSubject.subjectCode" 496 v-model="addSubject.subjectCode"
497 placeholder="fill your Subject Code" 497 placeholder="fill your Subject Code"
498 name="name" 498 name="name"
499 type="text" 499 type="text"
500 ></v-text-field> 500 ></v-text-field>
501 </v-flex> 501 </v-flex>
502 </v-layout> 502 </v-layout>
503 <v-layout> 503 <v-layout>
504 <v-flex xs12 sm12> 504 <v-flex xs12 sm12>
505 <v-card-actions> 505 <v-card-actions>
506 <v-spacer></v-spacer> 506 <v-spacer></v-spacer>
507 <v-btn 507 <v-btn
508 @click="submit" 508 @click="submit"
509 round 509 round
510 dark 510 dark
511 :loading="addLoading" 511 :loading="addLoading"
512 class="add-button" 512 class="add-button"
513 >Add Subject</v-btn> 513 >Add Subject</v-btn>
514 </v-card-actions> 514 </v-card-actions>
515 </v-flex> 515 </v-flex>
516 </v-layout> 516 </v-layout>
517 </v-form> 517 </v-form>
518 </v-flex> 518 </v-flex>
519 </v-layout> 519 </v-layout>
520 </v-container> 520 </v-container>
521 </v-card> 521 </v-card>
522 </v-dialog> 522 </v-dialog>
523 <div class="loader" v-if="showLoader"> 523 <div class="loader" v-if="showLoader">
524 <v-progress-circular indeterminate color="white"></v-progress-circular> 524 <v-progress-circular indeterminate color="white"></v-progress-circular>
525 </div> 525 </div>
526 </v-container> 526 </v-container>
527 </template> 527 </template>
528 528
529 <script> 529 <script>
530 import http from "@/Services/http.js"; 530 import http from "@/Services/http.js";
531 import Util from "@/util"; 531 import Util from "@/util";
532 532
533 export default { 533 export default {
534 data: () => ({ 534 data: () => ({
535 snackbar: false, 535 snackbar: false,
536 y: "top", 536 y: "top",
537 x: "right", 537 x: "right",
538 role: "", 538 role: "",
539 mode: "", 539 mode: "",
540 timeout: 3000, 540 timeout: 3000,
541 text: "", 541 text: "",
542 color: "", 542 color: "",
543 show: true, 543 show: true,
544 showSearch: false, 544 showSearch: false,
545 showLoader: false, 545 showLoader: false,
546 loading: false, 546 loading: false,
547 editLoading: false, 547 editLoading: false,
548 addLoading: false, 548 addLoading: false,
549 date: null, 549 date: null,
550 search: "", 550 search: "",
551 viewSubjectDialog: false, 551 viewSubjectDialog: false,
552 editSubjectDialog: false, 552 editSubjectDialog: false,
553 valid: true, 553 valid: true,
554 validEditSubject: true, 554 validEditSubject: true,
555 addSubjectDialog: false, 555 addSubjectDialog: false,
556 // isActive: true, 556 // isActive: true,
557 // newActive: false, 557 // newActive: false,
558 type: ["Optional", "Mandatory"], 558 type: ["Optional", "Mandatory"],
559 pagination: { 559 pagination: {
560 rowsPerPage: 10, 560 rowsPerPage: 10,
561 }, 561 },
562 token: "", 562 token: "",
563 classRules: [(v) => !!v || " Class Name is required"], 563 classRules: [(v) => !!v || " Class Name is required"],
564 teacherRules: [(v) => !!v || " Teacher Name is required"], 564 teacherRules: [(v) => !!v || " Teacher Name is required"],
565 typeRules: [(v) => !!v || "Type is required"], 565 typeRules: [(v) => !!v || "Type is required"],
566 markRules: [(v) => !!v || " Pass Mark is required"], 566 markRules: [(v) => !!v || " Pass Mark is required"],
567 finalRules: [(v) => !!v || "Final MArk is required"], 567 finalRules: [(v) => !!v || "Final MArk is required"],
568 subjectRules: [(v) => !!v || " Subject Name is required"], 568 subjectRules: [(v) => !!v || " Subject Name is required"],
569 headers: [ 569 headers: [
570 { 570 {
571 text: "No", 571 text: "No",
572 align: "", 572 align: "",
573 sortable: false, 573 sortable: false,
574 value: "No", 574 value: "No",
575 }, 575 },
576 { 576 {
577 text: "Subject Name", 577 text: "Subject Name",
578 value: "subjectName", 578 value: "subjectName",
579 sortable: false, 579 sortable: false,
580 align: "center", 580 align: "center",
581 }, 581 },
582 { 582 {
583 text: "Subject Author", 583 text: "Subject Author",
584 value: "subjectAuthor", 584 value: "subjectAuthor",
585 sortable: false, 585 sortable: false,
586 align: "center", 586 align: "center",
587 }, 587 },
588 { 588 {
589 text: "Subject Code", 589 text: "Subject Code",
590 value: "subjectCode", 590 value: "subjectCode",
591 sortable: false, 591 sortable: false,
592 align: "center", 592 align: "center",
593 }, 593 },
594 // { 594 // {
595 // text: "Teacher", 595 // text: "Teacher",
596 // value: "teacherId", 596 // value: "teacherId",
597 // sortable: false, 597 // sortable: false,
598 // align: "center" 598 // align: "center"
599 // }, 599 // },
600 { 600 {
601 text: "Pass Marks", 601 text: "Pass Marks",
602 value: "passMarks", 602 value: "passMarks",
603 sortable: false, 603 sortable: false,
604 align: "center", 604 align: "center",
605 }, 605 },
606 { 606 {
607 text: "Final Marks", 607 text: "Final Marks",
608 value: "finalMarks", 608 value: "finalMarks",
609 sortable: false, 609 sortable: false,
610 align: "center", 610 align: "center",
611 }, 611 },
612 { 612 {
613 text: "Type", 613 text: "Type",
614 value: "type", 614 value: "type",
615 sortable: false, 615 sortable: false,
616 align: "center", 616 align: "center",
617 }, 617 },
618 ],
619 subjectList: [], 618 ],
620 classList: [], 619 subjectList: [],
621 teacherList: [], 620 classList: [],
622 editedIndex: -1, 621 teacherList: [],
623 addSubject: {}, 622 editedIndex: -1,
624 getSubject: {}, 623 addSubject: {},
625 624 getSubject: {},
626 editedItem: { 625
627 // subjectName: "", 626 editedItem: {
628 // subjectAuthor: "" 627 // subjectName: "",
629 }, 628 // subjectAuthor: ""
630 }), 629 },
631 watch: { 630 }),
632 addSubjectDialog: function (val) { 631 watch: {
633 if (!val) { 632 addSubjectDialog: function (val) {
634 // this.addSubject = []; 633 if (!val) {
635 } 634 // this.addSubject = [];
636 }, 635 }
637 }, 636 },
638 methods: { 637 },
639 addActionInHeaders() { 638 methods: {
639 addActionInHeaders() {
640 if (this.role === "ADMIN") {
641 this.headers.push({
642 text: "Action",
643 value: "",
644 sortable: false,
645 align: "center",
646 });
647 }
648 },
640 if (this.role === "ADMIN") { 649 pickFile() {
641 this.headers.push({ 650 this.$refs.image.click();
642 text: "Action", 651 },
643 value: "", 652 editItem(item) {
644 sortable: false, 653 this.editedIndex = this.subjectList.subjects;
645 align: "center", 654 this.editedItem = Object.assign({}, item);
646 }); 655 this.dialog = true;
647 } 656 this.editSubjectDialog = true;
648 }, 657 },
649 pickFile() { 658 profile(item) {
650 this.$refs.image.click(); 659 this.editedIndex = this.subjectList.subjects;
651 }, 660 this.editedItem = Object.assign({}, item);
652 editItem(item) { 661 this.dialog1 = true;
653 this.editedIndex = this.subjectList.subjects; 662 this.viewSubjectDialog = true;
654 this.editedItem = Object.assign({}, item); 663 },
655 this.dialog = true; 664 deleteItem(item) {
656 this.editSubjectDialog = true; 665 let deleteSubject = {
657 }, 666 classId: this.addSubject.classId,
658 profile(item) { 667 subjectId: item._id,
659 this.editedIndex = this.subjectList.subjects; 668 };
660 this.editedItem = Object.assign({}, item); 669 http()
661 this.dialog1 = true; 670 .delete(
662 this.viewSubjectDialog = true; 671 "/deleteSubject",
663 }, 672 confirm("Are you sure you want to delete this?") && {
664 deleteItem(item) { 673 params: deleteSubject,
665 let deleteSubject = { 674 }
666 classId: this.addSubject.classId, 675 )
667 subjectId: item._id, 676 .then((response) => {
668 }; 677 this.snackbar = true;
669 http() 678 this.color = "green";
670 .delete( 679 this.text = "Successfully delete Existing Subject";
671 "/deleteSubject", 680 this.getClassSubject(this.addSubject.classId);
672 confirm("Are you sure you want to delete this?") && { 681 })
673 params: deleteSubject, 682 .catch((error) => {
674 } 683 this.snackbar = true;
675 ) 684 this.text = error.response.data.message;
676 .then((response) => { 685 this.color = "error";
677 this.snackbar = true; 686 // console.log("error", error);
678 this.color = "green"; 687 });
679 this.text = "Successfully delete Existing Subject"; 688 },
680 this.getClassSubject(this.addSubject.classId); 689 close() {
681 }) 690 this.editSubjectDialog = false;
682 .catch((error) => { 691 },
683 this.snackbar = true; 692 close1() {
684 this.text = error.response.data.message; 693 this.viewSubjectDialog = false;
685 this.color = "error"; 694 },
686 // console.log("error", error); 695 submit() {
687 }); 696 if (this.$refs.form.validate()) {
688 }, 697 this.addLoading = true;
689 close() { 698 http()
690 this.editSubjectDialog = false; 699 .post("/addSubject", this.addSubject)
691 }, 700 .then((response) => {
692 close1() { 701 this.snackbar = true;
693 this.viewSubjectDialog = false; 702 this.text = "New Subject added successfully";
694 }, 703 this.color = "green";
695 submit() { 704 this.addLoading = false;
696 if (this.$refs.form.validate()) { 705 this.$refs.form.reset();
697 this.addLoading = true; 706 this.addSubjectDialog = false;
698 http() 707 this.getClassSubject(_id);
699 .post("/addSubject", this.addSubject) 708 })
700 .then((response) => { 709 .catch((error) => {
701 this.snackbar = true; 710 this.addLoading = false;
702 this.text = "New Subject added successfully"; 711 });
703 this.color = "green"; 712 }
704 this.addLoading = false; 713 },
705 this.$refs.form.reset(); 714 clear() {
706 this.addSubjectDialog = false; 715 this.$refs.form.reset();
707 this.getClassSubject(_id); 716 },
708 }) 717 save() {
709 .catch((error) => { 718 if (this.$refs.formEditSubject.validate()) {
710 this.addLoading = false; 719 let editSubject = {
711 }); 720 classId: this.editedItem.classId,
712 } 721 subjectId: this.editedItem._id,
713 }, 722 teacherId: this.editedItem.teacherId,
714 clear() { 723 type: this.editedItem.type,
715 this.$refs.form.reset(); 724 passMarks: this.editedItem.passMarks,
716 }, 725 finalMarks: this.editedItem.finalMarks,
717 save() { 726 subjectAuthor: this.editedItem.subjectAuthor,
718 if (this.$refs.formEditSubject.validate()) { 727 subjectCode: this.editedItem.subjectCode,
719 let editSubject = { 728 subjectName: this.editedItem.subjectName,
720 classId: this.editedItem.classId, 729 };
721 subjectId: this.editedItem._id, 730 this.editLoading = true;
722 teacherId: this.editedItem.teacherId, 731 http()
723 type: this.editedItem.type, 732 .put("/updateSubject", editSubject)
724 passMarks: this.editedItem.passMarks, 733 .then((response) => {
725 finalMarks: this.editedItem.finalMarks, 734 this.snackbar = true;
726 subjectAuthor: this.editedItem.subjectAuthor, 735 this.text = "Successfully Edit Existing Subject";
727 subjectCode: this.editedItem.subjectCode, 736 this.color = "green";
728 subjectName: this.editedItem.subjectName, 737 this.editLoading = false;
729 }; 738 this.editSubjectDialog = false;
730 this.editLoading = true; 739 this.getClassSubject(this.editedItem.classId);
731 http() 740 })
732 .put("/updateSubject", editSubject) 741 .catch((error) => {
733 .then((response) => { 742 this.editLoading = false;
734 this.snackbar = true; 743
735 this.text = "Successfully Edit Existing Subject"; 744 // console.log(error);
736 this.color = "green"; 745 });
737 this.editLoading = false; 746 }
738 this.editSubjectDialog = false; 747 },
739 this.getClassSubject(this.editedItem.classId); 748 getClassSubject(_id) {
740 }) 749 this.showLoader = true;
741 .catch((error) => { 750 // console.log("class", _id);
742 this.editLoading = false; 751 // this.classId = this.classId;
743 752 http()
744 // console.log(error); 753 .get(
745 }); 754 "/getParticularClass",
746 } 755 { params: { classId: _id } },
747 }, 756 {
748 getClassSubject(_id) { 757 headers: { Authorization: "Bearer " + this.token },
749 this.showLoader = true; 758 }
750 // console.log("class", _id); 759 )
751 // this.classId = this.classId; 760 .then((response) => {
752 http() 761 this.subjectList = response.data.data;
753 .get( 762 this.showLoader = false;
754 "/getParticularClass", 763 })
755 { params: { classId: _id } }, 764 .catch((err) => {
756 { 765 this.showLoader = false;
757 headers: { Authorization: "Bearer " + this.token }, 766 });
758 } 767 },
759 ) 768 getClass() {
760 .then((response) => { 769 http()
761 this.subjectList = response.data.data; 770 .get("/getClassesList", {
762 this.showLoader = false; 771 headers: { Authorization: "Bearer " + this.token },
763 }) 772 })
764 .catch((err) => { 773 .then((response) => {
765 this.showLoader = false; 774 this.classList = response.data.data;
766 }); 775 })
767 }, 776 .catch((error) => {
768 getClass() { 777 if (error.response.status === 401) {
769 http() 778 this.$router.replace({ path: "/" });
770 .get("/getClassesList", { 779 this.$store.dispatch("setToken", null);
771 headers: { Authorization: "Bearer " + this.token }, 780 this.$store.dispatch("Id", null);
772 }) 781 }
773 .then((response) => { 782 });
774 this.classList = response.data.data; 783 },
775 }) 784 getTeacherList() {
776 .catch((error) => { 785 this.showLoader = true;
777 if (error.response.status === 401) { 786 var token = this.$store.state.token;
778 this.$router.replace({ path: "/" }); 787 http()
779 this.$store.dispatch("setToken", null); 788 .get("/getTeachersList", {
780 this.$store.dispatch("Id", null); 789 headers: { Authorization: "Bearer " + token },
781 } 790 })
782 }); 791 .then((response) => {
783 }, 792 this.teacherList = response.data.data;
784 getTeacherList() { 793 this.showLoader = false;
785 this.showLoader = true; 794 // console.log("getTeacherList=====>",this.desserts)
786 var token = this.$store.state.token; 795 })
787 http() 796 .catch((error) => {
788 .get("/getTeachersList", { 797 this.showLoader = false;
789 headers: { Authorization: "Bearer " + token }, 798 if (error.response.status === 401) {
790 }) 799 this.$router.replace({ path: "/" });
791 .then((response) => { 800 this.$store.dispatch("setToken", null);
792 this.teacherList = response.data.data; 801 this.$store.dispatch("Id", null);
793 this.showLoader = false; 802 }
794 // console.log("getTeacherList=====>",this.desserts) 803 });
795 }) 804 },
796 .catch((error) => { 805 displaySearch() {
797 this.showLoader = false; 806 (this.show = false), (this.showSearch = true);
798 if (error.response.status === 401) { 807 },
799 this.$router.replace({ path: "/" }); 808 closeSearch() {
800 this.$store.dispatch("setToken", null); 809 this.showSearch = false;
801 this.$store.dispatch("Id", null); 810 this.show = true;
802 } 811 this.search = "";
803 }); 812 },
804 }, 813 },
805 displaySearch() { 814 mounted() {
806 (this.show = false), (this.showSearch = true); 815 this.token = this.$store.state.token;
807 }, 816 // this.getNoticeDataList();
808 closeSearch() { 817 this.getClass();
809 this.showSearch = false; 818 this.getTeacherList();
810 this.show = true; 819 this.role = this.$store.state.role;
820 this.addActionInHeaders();
811 this.search = ""; 821 },
812 }, 822 };
src/pages/Academic/syllabus.vue
Diff comments   View file @8b7976c
1 <template> 1 <template>
2 <v-container fluid class="body-color"> 2 <v-container fluid class="body-color">
3 <!-- ****** EDIT Syllabus ****** --> 3 <!-- ****** EDIT Syllabus ****** -->
4 <v-dialog v-model="editSyllabusDialog" max-width="400px" persistent> 4 <v-dialog v-model="editSyllabusDialog" max-width="400px" persistent>
5 <v-card flat class="card-style pa-2" dark> 5 <v-card flat class="card-style pa-2" dark>
6 <v-layout> 6 <v-layout>
7 <v-flex xs12> 7 <v-flex xs12>
8 <label class="title text-xs-center">Edit Syllabus</label> 8 <label class="title text-xs-center">Edit Syllabus</label>
9 <v-icon size="24" class="right" @click="editSyllabusDialog = false">cancel</v-icon> 9 <v-icon size="24" class="right" @click="editSyllabusDialog = false">cancel</v-icon>
10 </v-flex> 10 </v-flex>
11 </v-layout> 11 </v-layout>
12 <v-container fluid> 12 <v-container fluid>
13 <v-form ref="formEditSyllabus" v-model="validEditSyllabus" lazy-validation> 13 <v-form ref="formEditSyllabus" v-model="validEditSyllabus" lazy-validation>
14 <v-layout> 14 <v-layout>
15 <v-flex xs4 sm4 class="pt-4 subheading"> 15 <v-flex xs4 sm4 class="pt-4 subheading">
16 <label class="right">Title :</label> 16 <label class="right">Title :</label>
17 </v-flex> 17 </v-flex>
18 <v-flex xs8 sm8 class="ml-3"> 18 <v-flex xs8 sm8 class="ml-3">
19 <v-text-field v-model="editedItem.title"></v-text-field> 19 <v-text-field v-model="editedItem.title"></v-text-field>
20 </v-flex> 20 </v-flex>
21 </v-layout> 21 </v-layout>
22 <v-layout> 22 <v-layout>
23 <v-flex xs4 class="pt-4 subheading"> 23 <v-flex xs4 class="pt-4 subheading">
24 <label class="right">Description:</label> 24 <label class="right">Description:</label>
25 </v-flex> 25 </v-flex>
26 <v-flex xs8 class="ml-3"> 26 <v-flex xs8 class="ml-3">
27 <v-text-field v-model="editedItem.description"></v-text-field> 27 <v-text-field v-model="editedItem.description"></v-text-field>
28 </v-flex> 28 </v-flex>
29 </v-layout> 29 </v-layout>
30 <v-layout> 30 <v-layout>
31 <v-flex xs4 class="pt-4 subheading"> 31 <v-flex xs4 class="pt-4 subheading">
32 <label class="right">Class:</label> 32 <label class="right">Class:</label>
33 </v-flex> 33 </v-flex>
34 <v-flex xs8 class="ml-3"> 34 <v-flex xs8 class="ml-3">
35 <v-select 35 <v-select
36 :items="classList" 36 :items="classList"
37 v-model="editedItem.classId" 37 v-model="editedItem.classId"
38 label="Select Class" 38 label="Select Class"
39 item-text="classNum" 39 item-text="classNum"
40 item-value="_id" 40 item-value="_id"
41 name="Select Class" 41 name="Select Class"
42 @change="getSections(addSyllabus.classId)" 42 @change="getSections(addSyllabus.classId)"
43 required 43 required
44 ></v-select> 44 ></v-select>
45 </v-flex> 45 </v-flex>
46 </v-layout> 46 </v-layout>
47 <!-- <v-layout> 47 <!-- <v-layout>
48 <v-flex xs4 sm4 class="pt-4 subheading"> 48 <v-flex xs4 sm4 class="pt-4 subheading">
49 <label class="right">Section :</label> 49 <label class="right">Section :</label>
50 </v-flex> 50 </v-flex>
51 <v-flex xs8 sm8 class="ml-3"> 51 <v-flex xs8 sm8 class="ml-3">
52 <v-select 52 <v-select
53 :items="addSection" 53 :items="addSection"
54 label="Select Section" 54 label="Select Section"
55 item-text="name" 55 item-text="name"
56 item-value="_id" 56 item-value="_id"
57 v-model="editedItem.sectionId" 57 v-model="editedItem.sectionId"
58 name="Select Section" 58 name="Select Section"
59 class="px-2" 59 class="px-2"
60 required 60 required
61 ></v-select> 61 ></v-select>
62 </v-flex> 62 </v-flex>
63 </v-layout>--> 63 </v-layout>-->
64 <v-layout> 64 <v-layout>
65 <v-flex xs4 class="pt-4 subheading"> 65 <v-flex xs4 class="pt-4 subheading">
66 <label class="right">File:</label> 66 <label class="right">File:</label>
67 </v-flex> 67 </v-flex>
68 <v-flex xs8 sm6 class="ml-3"> 68 <v-flex xs8 sm6 class="ml-3">
69 <v-text-field 69 <v-text-field
70 label="Select file" 70 label="Select file"
71 @click="pickFile" 71 @click="pickFile"
72 v-model="imageName" 72 v-model="imageName"
73 append-icon="attach_file" 73 append-icon="attach_file"
74 ></v-text-field> 74 ></v-text-field>
75 </v-flex> 75 </v-flex>
76 <input 76 <input
77 type="file" 77 type="file"
78 style="display:none" 78 style="display:none"
79 ref="image" 79 ref="image"
80 accept="image/*" 80 accept="image/*"
81 @change="onFilePicked" 81 @change="onFilePicked"
82 /> 82 />
83 </v-layout> 83 </v-layout>
84 <v-flex xs12 sm12> 84 <v-flex xs12 sm12>
85 <v-card-actions> 85 <v-card-actions>
86 <v-spacer></v-spacer> 86 <v-spacer></v-spacer>
87 <v-btn 87 <v-btn
88 round 88 round
89 dark 89 dark
90 @click="save" 90 @click="save"
91 :loading="editLoading" 91 :loading="editLoading"
92 class="add-button" 92 class="add-button"
93 >Update Syllabus</v-btn> 93 >Update Syllabus</v-btn>
94 </v-card-actions> 94 </v-card-actions>
95 </v-flex> 95 </v-flex>
96 </v-form> 96 </v-form>
97 </v-container> 97 </v-container>
98 </v-card> 98 </v-card>
99 </v-dialog> 99 </v-dialog>
100 100
101 <!-- ****** VIEW PROFIL NOTICE BOARD ****** --> 101 <!-- ****** VIEW PROFIL NOTICE BOARD ****** -->
102 102
103 <!-- <v-dialog v-model="viewSubjectDialog" max-width="600px"> 103 <!-- <v-dialog v-model="viewSubjectDialog" max-width="600px">
104 <v-toolbar flat class="card-style pa-3" dark> 104 <v-toolbar flat class="card-style pa-3" dark>
105 <v-spacer></v-spacer> 105 <v-spacer></v-spacer>
106 <v-toolbar-title> 106 <v-toolbar-title>
107 <h3>Subject</h3> 107 <h3>Subject</h3>
108 </v-toolbar-title> 108 </v-toolbar-title>
109 <v-spacer></v-spacer> 109 <v-spacer></v-spacer>
110 <v-icon @click="close1">close</v-icon> 110 <v-icon @click="close1">close</v-icon>
111 </v-toolbar> 111 </v-toolbar>
112 <v-card> 112 <v-card>
113 <v-card-text> 113 <v-card-text>
114 <v-container grid-list-md> 114 <v-container grid-list-md>
115 <v-layout wrap> 115 <v-layout wrap>
116 <v-flex> 116 <v-flex>
117 <v-layout> 117 <v-layout>
118 <v-flex xs7 sm6> 118 <v-flex xs7 sm6>
119 <h5 class="right my-1"> 119 <h5 class="right my-1">
120 <b>Subject Name:</b> 120 <b>Subject Name:</b>
121 </h5> 121 </h5>
122 </v-flex> 122 </v-flex>
123 <v-flex sm6 xs5> 123 <v-flex sm6 xs5>
124 <h5 class="my-1">{{ editedItem.subjectName }}</h5> 124 <h5 class="my-1">{{ editedItem.subjectName }}</h5>
125 </v-flex> 125 </v-flex>
126 </v-layout> 126 </v-layout>
127 </v-flex> 127 </v-flex>
128 </v-layout> 128 </v-layout>
129 </v-container> 129 </v-container>
130 </v-card-text> 130 </v-card-text>
131 </v-card> 131 </v-card>
132 </v-dialog>--> 132 </v-dialog>-->
133 133
134 <!-- ****** EXISTING SYLLABUS TABLE ****** --> 134 <!-- ****** EXISTING SYLLABUS TABLE ****** -->
135 <v-toolbar color="transparent" flat> 135 <v-toolbar color="transparent" flat>
136 <v-btn 136 <v-btn
137 fab 137 fab
138 dark 138 dark
139 class="open-dialog-button hidden-xl-only hidden-md-only hidden-lg-only" 139 class="open-dialog-button hidden-xl-only hidden-md-only hidden-lg-only"
140 small 140 small
141 @click="addSyllabusDialog = true" 141 @click="addSyllabusDialog = true"
142 > 142 >
143 <v-icon dark>add</v-icon> 143 <v-icon dark>add</v-icon>
144 </v-btn> 144 </v-btn>
145 <v-flex xs1 class="hidden-sm-only hidden-xs-only"> 145 <v-flex xs1 class="hidden-sm-only hidden-xs-only">
146 <v-btn round class="open-dialog-button" dark @click="addSyllabusDialog = true"> 146 <v-btn round class="open-dialog-button" dark @click="addSyllabusDialog = true">
147 <v-icon class="white--text pr-1" size="20">add</v-icon>Add Syllabus 147 <v-icon class="white--text pr-1" size="20">add</v-icon>Add Syllabus
148 </v-btn> 148 </v-btn>
149 </v-flex> 149 </v-flex>
150 <v-spacer></v-spacer> 150 <v-spacer></v-spacer>
151 <v-flex lg2 md2 xs12 v-show="show"> 151 <v-flex lg2 md2 xs12 v-show="show">
152 <v-select 152 <v-select
153 :items="classList" 153 :items="classList"
154 label="Select Class" 154 label="Select Class"
155 v-model="showSyllabus.classId" 155 v-model="showSyllabus.classId"
156 item-text="classNum" 156 item-text="classNum"
157 item-value="_id" 157 item-value="_id"
158 name="Select Class" 158 name="Select Class"
159 :rules="classRules" 159 :rules="classRules"
160 @change="getSyallabusList" 160 @change="getSyallabusList"
161 class="pl-2" 161 class="pl-2"
162 required 162 required
163 ></v-select> 163 ></v-select>
164 </v-flex> 164 </v-flex>
165 <v-card-title class="body-1" v-show="show"> 165 <v-card-title class="body-1" v-show="show">
166 <v-btn icon flat @click="displaySearch"> 166 <v-btn icon flat @click="displaySearch">
167 <v-avatar size="27"> 167 <v-avatar size="27">
168 <img src="/static/icon/search.png" alt="icon" /> 168 <img src="/static/icon/search.png" alt="icon" />
169 </v-avatar> 169 </v-avatar>
170 </v-btn> 170 </v-btn>
171 </v-card-title> 171 </v-card-title>
172 <v-flex xs9 sm9 md2 lg2 xl2 v-if="showSearch"> 172 <v-flex xs9 sm9 md2 lg2 xl2 v-if="showSearch">
173 <v-layout> 173 <v-layout>
174 <v-text-field 174 <v-text-field
175 autofocus 175 autofocus
176 v-model="search" 176 v-model="search"
177 label="Search" 177 label="Search"
178 prepend-inner-icon="search" 178 prepend-inner-icon="search"
179 color="primary" 179 color="primary"
180 style="transition: 0.8s cubic-bezier(0.25, 0.8, 0.25, 1); !important" 180 style="transition: 0.8s cubic-bezier(0.25, 0.8, 0.25, 1); !important"
181 ></v-text-field> 181 ></v-text-field>
182 <v-icon @click="closeSearch" color="error">close</v-icon> 182 <v-icon @click="closeSearch" color="error">close</v-icon>
183 </v-layout> 183 </v-layout>
184 </v-flex> 184 </v-flex>
185 </v-toolbar> 185 </v-toolbar>
186 <v-data-table 186 <v-data-table
187 :headers="headers" 187 :headers="headers"
188 :items="syllabusList" 188 :items="syllabusList"
189 :pagination.sync="pagination" 189 :pagination.sync="pagination"
190 :search="search" 190 :search="search"
191 > 191 >
192 <template slot="items" slot-scope="props"> 192 <template slot="items" slot-scope="props">
193 <tr class="tr"> 193 <tr class="tr">
194 <td class="td-row td">{{ props.index + 1 }}</td> 194 <td class="td-row td">{{ props.index + 1 }}</td>
195 <td class="text-xs-center td td-row">{{ props.item.title }}</td> 195 <td class="text-xs-center td td-row">{{ props.item.title }}</td>
196 <td class="text-xs-center td td-row">{{ props.item.description }}</td> 196 <td class="text-xs-center td td-row">{{ props.item.description }}</td>
197 <td class="text-xs-center td td-row">{{ dates(props.item.created) }}</td> 197 <td class="text-xs-center td td-row">{{ dates(props.item.created) }}</td>
198 <td 198 <td
199 class="text-xs-center td tgeneratePDF2Canvasd-row" 199 class="text-xs-center td tgeneratePDF2Canvasd-row"
200 v-if="props.item.teacherId" 200 v-if="props.item.teacherId"
201 >{{ props.item.teacherId.name }}</td> 201 >{{ props.item.teacherId.name }}</td>
202 <td class="text-xs-center td td-row" v-else>{{ props.item.schoolId.name }}</td> 202 <td class="text-xs-center td td-row" v-else>{{ props.item.schoolId.name }}</td>
203 <td class="text-xs-center td td-row"> 203 <td class="text-xs-center td td-row">
204 <!-- <v-btn 204 <!-- <v-btn
205 class="add-button" 205 class="add-button"
206 @click="generatePDF2Canvas(props.item)" 206 @click="generatePDF2Canvas(props.item)"
207 :loading="loadingPdf" 207 :loading="loadingPdf"
208 dark 208 dark
209 >{{ props.item.fileType }}</v-btn>--> 209 >{{ props.item.fileType }}</v-btn>-->
210 <a 210 <a
211 class="hover" 211 class="hover"
212 :href="props.item.documentUrl" 212 :href="props.item.documentUrl"
213 target="_blank" 213 target="_blank"
214 style="text-decoration: none!important; color: grey" 214 style="text-decoration: none!important; color: grey"
215 > 215 >
216 <!-- <v-btn flat block> 216 <!-- <v-btn flat block>
217 <span>--> 217 <span>-->
218 <h5>{{props.item.fileName}}</h5> 218 <h5>{{props.item.fileName}}</h5>
219 <!-- </span> 219 <!-- </span>
220 </v-btn>--> 220 </v-btn>-->
221 </a> 221 </a>
222 </td> 222 </td>
223 <td class="text-xs-center td td-row"> 223 <td class="text-xs-center td td-row">
224 <span> 224 <span>
225 <v-tooltip top> 225 <v-tooltip top>
226 <img 226 <img
227 slot="activator" 227 slot="activator"
228 style="cursor:pointer; width:20px; height:18px; " 228 style="cursor:pointer; width:20px; height:18px; "
229 class="mr-3" 229 class="mr-3"
230 @click="editItem(props.item)" 230 @click="editItem(props.item)"
231 src="/static/icon/edit.png" 231 src="/static/icon/edit.png"
232 /> 232 />
233 <span>Edit</span> 233 <span>Edit</span>
234 </v-tooltip> 234 </v-tooltip>
235 <v-tooltip top> 235 <v-tooltip top>
236 <img 236 <img
237 slot="activator" 237 slot="activator"
238 style="cursor:pointer; width:20px; height:20px; " 238 style="cursor:pointer; width:20px; height:20px; "
239 class="mr-3" 239 class="mr-3"
240 @click="deleteItem(props.item)" 240 @click="deleteItem(props.item)"
241 src="/static/icon/delete.png" 241 src="/static/icon/delete.png"
242 /> 242 />
243 <span>Delete</span> 243 <span>Delete</span>
244 </v-tooltip> 244 </v-tooltip>
245 </span> 245 </span>
246 </td> 246 </td>
247 </tr> 247 </tr>
248 </template> 248 </template>
249 <v-alert 249 <v-alert
250 slot="no-results" 250 slot="no-results"
251 :value="true" 251 :value="true"
252 color="error" 252 color="error"
253 icon="warning" 253 icon="warning"
254 >Your search for "{{ search }}" found no results.</v-alert> 254 >Your search for "{{ search }}" found no results.</v-alert>
255 </v-data-table> 255 </v-data-table>
256 <!-- ****** ADD SYLLABUS ****** --> 256 <!-- ****** ADD SYLLABUS ****** -->
257 <v-snackbar 257 <v-snackbar
258 :timeout="timeout" 258 :timeout="timeout"
259 :top="y === 'top'" 259 :top="y === 'top'"
260 :right="x === 'right'" 260 :right="x === 'right'"
261 :vertical="mode === 'vertical'" 261 :vertical="mode === 'vertical'"
262 v-model="snackbar" 262 v-model="snackbar"
263 :color="color" 263 :color="color"
264 >{{ text }}</v-snackbar> 264 >{{ text }}</v-snackbar>
265 <v-dialog v-model="addSyllabusDialog" max-width="400px" v-if="addSyllabusDialog" persistent> 265 <v-dialog v-model="addSyllabusDialog" max-width="400px" v-if="addSyllabusDialog" persistent>
266 <v-card flat class="card-style pa-2" dark> 266 <v-card flat class="card-style pa-2" dark>
267 <v-layout> 267 <v-layout>
268 <v-flex xs12> 268 <v-flex xs12>
269 <label class="title text-xs-center">Add Syllabus</label> 269 <label class="title text-xs-center">Add Syllabus</label>
270 <v-icon size="24" class="right" @click="closeAddStudentModel">cancel</v-icon> 270 <v-icon size="24" class="right" @click="closeAddStudentModel">cancel</v-icon>
271 </v-flex> 271 </v-flex>
272 </v-layout> 272 </v-layout>
273 <v-container fluid fill-height> 273 <v-container fluid fill-height>
274 <v-layout align-center> 274 <v-layout align-center>
275 <v-flex xs12> 275 <v-flex xs12>
276 <v-form ref="form" v-model="valid" lazy-validation> 276 <v-form ref="form" v-model="valid" lazy-validation>
277 <v-layout> 277 <v-layout>
278 <v-flex xs4 sm4 class="pt-4 subheading"> 278 <v-flex xs4 sm4 class="pt-4 subheading">
279 <label class="right">Title :</label> 279 <label class="right">Title :</label>
280 </v-flex> 280 </v-flex>
281 <v-flex xs8 sm8 class="ml-3"> 281 <v-flex xs8 sm8 class="ml-3">
282 <v-text-field 282 <v-text-field
283 v-model="addSyllabus.title" 283 v-model="addSyllabus.title"
284 name="name" 284 name="name"
285 type="text" 285 type="text"
286 placeholder="Add Title" 286 placeholder="Add Title"
287 :rules="titleRules" 287 :rules="titleRules"
288 required 288 required
289 ></v-text-field> 289 ></v-text-field>
290 </v-flex> 290 </v-flex>
291 </v-layout> 291 </v-layout>
292 <v-layout> 292 <v-layout>
293 <v-flex xs4 sm4 class="pt-4 subheading"> 293 <v-flex xs4 sm4 class="pt-4 subheading">
294 <label class="right">Description :</label> 294 <label class="right">Description :</label>
295 </v-flex> 295 </v-flex>
296 <v-flex xs8 sm8 class="ml-3"> 296 <v-flex xs8 sm8 class="ml-3">
297 <v-text-field 297 <v-text-field
298 v-model="addSyllabus.description" 298 v-model="addSyllabus.description"
299 name="name" 299 name="name"
300 type="text" 300 type="text"
301 placeholder="Add Description" 301 placeholder="Add Description"
302 :rules="descriptionRules" 302 :rules="descriptionRules"
303 required 303 required
304 ></v-text-field> 304 ></v-text-field>
305 </v-flex> 305 </v-flex>
306 </v-layout> 306 </v-layout>
307 <v-layout> 307 <v-layout>
308 <v-flex xs4 class="pt-4 subheading"> 308 <v-flex xs4 class="pt-4 subheading">
309 <label class="right">Class:</label> 309 <label class="right">Class:</label>
310 </v-flex> 310 </v-flex>
311 <v-flex xs8 class="ml-3"> 311 <v-flex xs8 class="ml-3">
312 <v-select 312 <v-select
313 :items="classList" 313 :items="classList"
314 v-model="addSyllabus.classId" 314 v-model="addSyllabus.classId"
315 label="Select Class" 315 label="Select Class"
316 item-text="classNum" 316 item-text="classNum"
317 item-value="_id" 317 item-value="_id"
318 name="Select Class" 318 name="Select Class"
319 @change="getSections(addSyllabus.classId)" 319 @change="getSections(addSyllabus.classId)"
320 required 320 required
321 ></v-select> 321 ></v-select>
322 </v-flex> 322 </v-flex>
323 </v-layout> 323 </v-layout>
324 <!-- <v-layout> 324 <!-- <v-layout>
325 <v-flex xs4 sm4 class="pt-4 subheading"> 325 <v-flex xs4 sm4 class="pt-4 subheading">
326 <label class="right">Section :</label> 326 <label class="right">Section :</label>
327 </v-flex> 327 </v-flex>
328 <v-flex xs8 sm8 class="ml-3"> 328 <v-flex xs8 sm8 class="ml-3">
329 <v-select 329 <v-select
330 :items="addSection" 330 :items="addSection"
331 label="Select Section" 331 label="Select Section"
332 item-text="name" 332 item-text="name"
333 item-value="_id" 333 item-value="_id"
334 v-model="addSyllabus.sectionId" 334 v-model="addSyllabus.sectionId"
335 name="Select Section" 335 name="Select Section"
336 class="px-2" 336 class="px-2"
337 required 337 required
338 ></v-select> 338 ></v-select>
339 </v-flex> 339 </v-flex>
340 </v-layout>--> 340 </v-layout>-->
341 <v-layout> 341 <v-layout>
342 <v-flex xs4 class="pt-4 subheading"> 342 <v-flex xs4 class="pt-4 subheading">
343 <label class="right">File:</label> 343 <label class="right">File:</label>
344 </v-flex> 344 </v-flex>
345 <v-flex xs8 sm6 class="ml-3"> 345 <v-flex xs8 sm6 class="ml-3">
346 <v-text-field 346 <v-text-field
347 label="Select file" 347 label="Select file"
348 @click="pickFile" 348 @click="pickFile"
349 v-model="imageName" 349 v-model="imageName"
350 append-icon="attach_file" 350 append-icon="attach_file"
351 ></v-text-field> 351 ></v-text-field>
352 <input 352 <input
353 type="file" 353 type="file"
354 style="display:none" 354 style="display:none"
355 ref="image" 355 ref="image"
356 accept="image/*" 356 accept="image/*"
357 @change="onFilePicked" 357 @change="onFilePicked"
358 /> 358 />
359 </v-flex> 359 </v-flex>
360 </v-layout> 360 </v-layout>
361 <v-layout> 361 <v-layout>
362 <v-flex xs12 sm12> 362 <v-flex xs12 sm12>
363 <v-card-actions> 363 <v-card-actions>
364 <v-spacer></v-spacer> 364 <v-spacer></v-spacer>
365 <v-btn 365 <v-btn
366 @click="submit" 366 @click="submit"
367 round 367 round
368 dark 368 dark
369 :loading="loading" 369 :loading="loading"
370 class="add-button" 370 class="add-button"
371 >Add Syllabus</v-btn> 371 >Add Syllabus</v-btn>
372 </v-card-actions> 372 </v-card-actions>
373 </v-flex> 373 </v-flex>
374 </v-layout> 374 </v-layout>
375 </v-form> 375 </v-form>
376 </v-flex> 376 </v-flex>
377 </v-layout> 377 </v-layout>
378 </v-container> 378 </v-container>
379 </v-card> 379 </v-card>
380 </v-dialog> 380 </v-dialog>
381 <div class="loader" v-if="showLoader"> 381 <div class="loader" v-if="showLoader">
382 <v-progress-circular indeterminate color="white"></v-progress-circular> 382 <v-progress-circular indeterminate color="white"></v-progress-circular>
383 </div> 383 </div>
384 </v-container> 384 </v-container>
385 </template> 385 </template>
386 386
387 <script> 387 <script>
388 import http from "@/Services/http.js"; 388 import http from "@/Services/http.js";
389 import Util from "@/util"; 389 import Util from "@/util";
390 import moment from "moment"; 390 import moment from "moment";
391 import jsPDF from "jspdf"; 391 import jsPDF from "jspdf";
392 import { saveAs } from "file-saver"; 392 import { saveAs } from "file-saver";
393 393
394 export default { 394 export default {
395 data: () => ({ 395 data: () => ({
396 snackbar: false, 396 snackbar: false,
397 y: "top", 397 y: "top",
398 x: "right", 398 x: "right",
399 mode: "", 399 mode: "",
400 timeout: 3000, 400 timeout: 3000,
401 text: "", 401 text: "",
402 color: "", 402 color: "",
403 show: true, 403 show: true,
404 showSearch: false, 404 showSearch: false,
405 showLoader: false, 405 showLoader: false,
406 loading: false, 406 loading: false,
407 editLoading: false, 407 editLoading: false,
408 date: null, 408 date: null,
409 search: "", 409 search: "",
410 editSyllabusDialog: false, 410 editSyllabusDialog: false,
411 valid: true, 411 valid: true,
412 validEditSyllabus: true, 412 validEditSyllabus: true,
413 addSyllabusDialog: false, 413 addSyllabusDialog: false,
414 loadingPdf: false, 414 loadingPdf: false,
415 415
416 pagination: { 416 pagination: {
417 rowsPerPage: 10, 417 rowsPerPage: 10,
418 }, 418 },
419 token: "", 419 token: "",
420 upload: "", 420 upload: "",
421 titleRules: [(v) => !!v || " Title is required"], 421 titleRules: [(v) => !!v || " Title is required"],
422 descriptionRules: [(v) => !!v || " Description is required"], 422 descriptionRules: [(v) => !!v || " Description is required"],
423 classRules: [(v) => !!v || " Class Name is required"], 423 classRules: [(v) => !!v || " Class Name is required"],
424 fileRules: [(v) => !!v || " File is required"], 424 fileRules: [(v) => !!v || " File is required"],
425 headers: [ 425 headers: [
426 { 426 {
427 text: "No", 427 text: "No",
428 align: "", 428 align: "",
429 sortable: false, 429 sortable: false,
430 value: "No", 430 value: "No",
431 }, 431 },
432 { 432 {
433 text: "Title", 433 text: "Title",
434 value: "title", 434 value: "title",
435 sortable: false, 435 sortable: false,
436 align: "center", 436 align: "center",
437 }, 437 },
438 { 438 {
439 text: "Description", 439 text: "Description",
440 value: "description", 440 value: "description",
441 sortable: false, 441 sortable: false,
442 align: "center", 442 align: "center",
443 }, 443 },
444 { 444 {
445 text: "Date", 445 text: "Date",
446 value: "created", 446 value: "created",
447 sortable: false, 447 sortable: false,
448 align: "center", 448 align: "center",
449 }, 449 },
450 { 450 {
451 text: "Uploader", 451 text: "Uploader",
452 value: "upload", 452 value: "upload",
453 sortable: false, 453 sortable: false,
454 align: "center", 454 align: "center",
455 }, 455 },
456 { 456 {
457 text: "File", 457 text: "File",
458 value: "documentUrl", 458 value: "documentUrl",
459 sortable: false, 459 sortable: false,
460 align: "center", 460 align: "center",
461 }, 461 },
462 { text: "Action", value: "", sortable: false, align: "center" }, 462 { text: "Action", value: "", sortable: false, align: "center" },
463 ], 463 ],
464 syllabusList: [], 464 syllabusList: [],
465 classList: [], 465 classList: [],
466 addSection: [], 466 addSection: [],
467 editedIndex: -1, 467 editedIndex: -1,
468 addSyllabus: {}, 468 addSyllabus: {},
469 showSyllabus: {}, 469 showSyllabus: {},
470 470
471 editedItem: { 471 editedItem: {
472 subjectName: "", 472 subjectName: "",
473 }, 473 },
474 imageData: {}, 474 imageData: {},
475 imageName: "", 475 imageName: "",
476 imageUrl: "", 476 imageUrl: "",
477 imageFile: "", 477 imageFile: "",
478 }), 478 }),
479 479
480 watch: { 480 watch: {
481 addSyllabusDialog: function (val) { 481 addSyllabusDialog: function (val) {
482 if (!val) { 482 if (!val) {
483 this.addSyllabus = []; 483 this.addSyllabus = [];
484 this.imageName = ""; 484 this.imageName = "";
485 } 485 }
486 }, 486 },
487 }, 487 },
488 488
489 methods: { 489 methods: {
490 pickFile() { 490 pickFile() {
491 this.$refs.image.click(); 491 this.$refs.image.click();
492 }, 492 },
493 dates: function (date) { 493 dates: function (date) {
494 return moment(date).format("MMMM DD, YYYY"); 494 return moment(date).format("MMMM DD, YYYY");
495 }, 495 },
496 editItem(item) { 496 editItem(item) {
497 this.editedIndex = this.syllabusList; 497 this.editedIndex = this.syllabusList;
498 this.editedItem = Object.assign({}, item); 498 this.editedItem = Object.assign({}, item);
499 this.dialog = true; 499 this.dialog = true;
500 this.editSyllabusDialog = true; 500 this.editSyllabusDialog = true;
501 }, 501 },
502 download(item) { 502 download(item) {
503 this.editedIndex = this.syllabusList; 503 this.editedIndex = this.syllabusList;
504 this.editedItem = Object.assign({}, item); 504 this.editedItem = Object.assign({}, item);
505 this.dialog1 = true; 505 this.dialog1 = true;
506 }, 506 },
507 deleteItem(item) { 507 deleteItem(item) {
508 let deleteSyallabus = { 508 let deleteSyallabus = {
509 syallabusId: item._id, 509 syallabusId: item._id,
510 }; 510 };
511 http() 511 http()
512 .delete( 512 .delete(
513 "/deleteSyallabus", 513 "/deleteSyallabus",
514 confirm("Are you sure you want to delete this?") && { 514 confirm("Are you sure you want to delete this?") && {
515 params: deleteSyallabus, 515 params: deleteSyallabus,
516 } 516 }
517 ) 517 )
518 .then((response) => { 518 .then((response) => {
519 this.getSyallabusList(); 519 this.getSyallabusList();
520 this.snackbar = true; 520 this.snackbar = true;
521 this.color = "green"; 521 this.color = "green";
522 this.text = "Successfully delete Existing Syllabus"; 522 this.text = "Successfully delete Existing Syllabus";
523 }) 523 })
524 .catch((error) => { 524 .catch((error) => {
525 this.snackbar = true; 525 this.snackbar = true;
526 this.text = error.response.data.message; 526 this.text = error.response.data.message;
527 this.color = "error"; 527 this.color = "error";
528 }); 528 });
529 }, 529 },
530 close() { 530 close() {
531 this.editSyllabusDialog = false; 531 this.editSyllabusDialog = false;
532 }, 532 },
533 closeAddStudentModel() { 533 closeAddStudentModel() {
534 this.addSyllabusDialog = false; 534 this.addSyllabusDialog = false;
535 // this.syllabusList = []; 535 // this.syllabusList = [];
536 this.addSyllabus = []; 536 this.addSyllabus = [];
537 this.imageName = ""; 537 this.imageName = "";
538 }, 538 },
539 539
540 submit() { 540 submit() {
541 // var addSyllabus = { 541 // var addSyllabus = {
542 // classId: this.addSyllabus.classId, 542 // classId: this.addSyllabus.classId,
543 // title: this.addSyllabus.title, 543 // title: this.addSyllabus.title,
544 // description: this.addSyllabus.description, 544 // description: this.addSyllabus.description,
545 // upload: this.addSyllabus.upload, 545 // upload: this.addSyllabus.upload,
546 // fileType: this.addSyllabus.fileType 546 // fileType: this.addSyllabus.fileType
547 // }; 547 // };
548 var signatures = { 548 var signatures = {
549 // JVBERi0: "other", 549 // JVBERi0: "other",
550 // iVBORw0KGgo: "image", 550 // iVBORw0KGgo: "image",
551 // UEsDBBQ: "other", 551 // UEsDBBQ: "other",
552 // "/": "image", 552 // "/": "image",
553 // AAABAA: "image", 553 // AAABAA: "image",
554 // IywiV2hhdC: "other", 554 // IywiV2hhdC: "other",
555 // bmFtZSxl: "other", 555 // bmFtZSxl: "other",
556 }; 556 };
557 function detectMimeType(b64) { 557 function detectMimeType(b64) {
558 for (var s in signatures) { 558 for (var s in signatures) {
559 if (b64.indexOf(s) === 0) { 559 if (b64.indexOf(s) === 0) {
560 return signatures[s]; 560 return signatures[s];
561 } 561 }
562 } 562 }
563 } 563 }
564 if (this.$refs.form.validate()) { 564 if (this.$refs.form.validate()) {
565 if (this.imageUrl) { 565 if (this.imageUrl) {
566 var str = this.imageUrl; 566 var str = this.imageUrl;
567 const [baseUrl, imageUrl] = str.split(/,/); 567 const [baseUrl, imageUrl] = str.split(/,/);
568 this.addSyllabus.upload = imageUrl; 568 this.addSyllabus.upload = imageUrl;
569 this.addSyllabus.fileType = detectMimeType(imageUrl); 569 this.addSyllabus.fileType = detectMimeType(imageUrl);
570 this.addSyllabus.fileName = this.imageName; 570 this.addSyllabus.fileName = this.imageName;
571 } 571 }
572 http() 572 http()
573 .post("/createSyallabus", this.addSyllabus) 573 .post("/createSyallabus", this.addSyllabus)
574 .then((response) => { 574 .then((response) => {
575 this.getSyallabusList(); 575 this.getSyallabusList();
576 this.snackbar = true; 576 this.snackbar = true;
577 this.text = "Syllabus added successfully"; 577 this.text = "Syllabus added successfully";
578 this.clear(); 578 this.clear();
579 this.color = "green"; 579 this.color = "green";
580 this.addSyllabusDialog = false; 580 this.addSyllabusDialog = false;
581 }) 581 })
582 .catch((error) => { 582 .catch((error) => {
583 // console.log(error); 583 // console.log(error);
584 this.snackbar = true; 584 this.snackbar = true;
585 this.text = error.response.data.message; 585 this.text = error.response.data.message;
586 this.color = "error"; 586 this.color = "error";
587 }); 587 });
588 } 588 }
589 }, 589 },
590 onFilePicked(e) { 590 onFilePicked(e) {
591 const files = e.target.files; 591 const files = e.target.files;
592 this.upload = e.target.files[0]; 592 this.upload = e.target.files[0];
593 if (files[0] !== undefined) { 593 if (files[0] !== undefined) {
594 this.imageName = files[0].name; 594 this.imageName = files[0].name;
595 if (this.imageName.lastIndexOf(".") <= 0) { 595 if (this.imageName.lastIndexOf(".") <= 0) {
596 return; 596 return;
597 } 597 }
598 const fr = new FileReader(); 598 const fr = new FileReader();
599 fr.readAsDataURL(files[0]); 599 fr.readAsDataURL(files[0]);
600 fr.addEventListener("load", () => { 600 fr.addEventListener("load", () => {
601 this.imageUrl = fr.result; 601 this.imageUrl = fr.result;
602 this.imageFile = files[0]; // this is an image file that can be sent to server... 602 this.imageFile = files[0]; // this is an image file that can be sent to server...
603 this.imageData.imageUrl = URL.createObjectURL(this.imageFile); 603 this.imageData.imageUrl = URL.createObjectURL(this.imageFile);
604 }); 604 });
605 } else { 605 } else {
606 this.imageName = ""; 606 this.imageName = "";
607 this.imageFile = ""; 607 this.imageFile = "";
608 this.imageUrl = ""; 608 this.imageUrl = "";
609 } 609 }
610 }, 610 },
611 clear() { 611 clear() {
612 this.$refs.form.reset(); 612 this.$refs.form.reset();
613 }, 613 },
614 save() { 614 save() {
615 if (this.$refs.formEditSyllabus.validate()) { 615 if (this.$refs.formEditSyllabus.validate()) {
616 let syllabusData = { 616 let syllabusData = {
617 syallabusId: this.editedItem._id, 617 syallabusId: this.editedItem._id,
618 classId: this.editedItem.classId._id, 618 classId: this.editedItem.classId._id,
619 // sectionId: this.editedItem.sectionId, 619 // sectionId: this.editedItem.sectionId,
620 title: this.editedItem.title, 620 title: this.editedItem.title,
621 description: this.editedItem.description, 621 description: this.editedItem.description,
622 upload: this.editedItem.upload, 622 upload: this.editedItem.upload,
623 fileType: this.editedItem.fileType, 623 fileType: this.editedItem.fileType,
624 fileName: this.imageName, 624 fileName: this.imageName,
625 }; 625 };
626 this.editLoading = true; 626 this.editLoading = true;
627 var signatures = { 627 var signatures = {
628 // JVBERi0: "other", 628 // JVBERi0: "other",
629 // iVBORw0KGgo: "image", 629 // iVBORw0KGgo: "image",
630 // UEsDBBQ: "other", 630 // UEsDBBQ: "other",
631 // "/": "image", 631 // "/": "image",
632 // AAABAA: "image", 632 // AAABAA: "image",
633 // IywiV2hhdC: "other", 633 // IywiV2hhdC: "other",
634 }; 634 };
635 function detectMimeType(b64) { 635 function detectMimeType(b64) {
636 for (var s in signatures) { 636 for (var s in signatures) {
637 if (b64.indexOf(s) === 0) { 637 if (b64.indexOf(s) === 0) {
638 return signatures[s]; 638 return signatures[s];
639 } 639 }
640 } 640 }
641 } 641 }
642 if (this.imageUrl) { 642 if (this.imageUrl) {
643 var str = this.imageUrl; 643 var str = this.imageUrl;
644 const [baseUrl, imageUrl] = str.split(/,/); 644 const [baseUrl, imageUrl] = str.split(/,/);
645 syllabusData.upload = imageUrl; 645 syllabusData.upload = imageUrl;
646 syllabusData.fileType = detectMimeType(imageUrl); 646 syllabusData.fileType = detectMimeType(imageUrl);
647 } 647 }
648 http() 648 http()
649 .put("/updateSyallabus", syllabusData) 649 .put("/updateSyallabus", syllabusData)
650 .then((response) => { 650 .then((response) => {
651 this.snackbar = true; 651 this.snackbar = true;
652 this.text = "Successfully Edit Existing Syllabus"; 652 this.text = "Successfully Edit Existing Syllabus";
653 this.color = "green"; 653 this.color = "green";
654 this.editLoading = false; 654 this.editLoading = false;
655 this.editSyllabusDialog = false; 655 this.editSyllabusDialog = false;
656 http() 656 http()
657 .get( 657 .get(
658 "/getSyallabusList", 658 "/getSyallabusList",
659 { params: { classId: this.addSyllabus.classId } }, 659 { params: { classId: this.addSyllabus.classId } },
660 { 660 {
661 headers: { Authorization: "Bearer " + this.token }, 661 headers: { Authorization: "Bearer " + this.token },
662 } 662 }
663 ) 663 )
664 .then((response) => { 664 .then((response) => {
665 this.syllabusList = response.data.data; 665 this.syllabusList = response.data.data;
666 this.getSyallabusList(); 666 this.getSyallabusList();
667 this.snackbar = true; 667 this.snackbar = true;
668 this.color = "green"; 668 this.color = "green";
669 this.close(); 669 this.close();
670 }) 670 })
671 .catch((err) => { 671 .catch((err) => {
672 // console.log("err====>", err); 672 // console.log("err====>", err);
673 this.text = error.response.data.message; 673 this.text = error.response.data.message;
674 this.color = "error"; 674 this.color = "error";
675 }); 675 });
676 }) 676 })
677 .catch((error) => { 677 .catch((error) => {
678 this.editLoading = false; 678 this.editLoading = false;
679 }); 679 });
680 } 680 }
681 }, 681 },
682 getSyallabusList() { 682 getSyallabusList() {
683 this.showLoader = true; 683 this.showLoader = true;
684 http() 684 http()
685 .get( 685 .get(
686 "/getSyallabusList", 686 "/getSyallabusList",
687 { params: { classId: this.showSyllabus.classId } }, 687 { params: { classId: this.showSyllabus.classId } },
688 { 688 {
689 headers: { Authorization: "Bearer " + this.token }, 689 headers: { Authorization: "Bearer " + this.token },
690 } 690 }
691 ) 691 )
692 .then((response) => { 692 .then((response) => {
693 this.syllabusList = response.data.data; 693 this.syllabusList = response.data.data;
694 this.showLoader = false; 694 this.showLoader = false;
695 }) 695 })
696 .catch((err) => { 696 .catch((err) => {
697 this.showLoader = false; 697 this.showLoader = false;
698 }); 698 });
699 }, 699 },
700 getClass() { 700 getClass() {
701 http() 701 http()
702 .get("/getClassesList", { 702 .get("/getClassesList", {
703 headers: { Authorization: "Bearer " + this.token }, 703 headers: { Authorization: "Bearer " + this.token },
704 }) 704 })
705 .then((response) => { 705 .then((response) => {
706 this.classList = response.data.data; 706 this.classList = response.data.data;
707 }) 707 })
708 .catch((error) => { 708 .catch((error) => {
709 if (error.response.status === 401) { 709 if (error.response.status === 401) {
710 this.$router.replace({ path: "/" }); 710 this.$router.replace({ path: "/" });
711 this.$store.dispatch("setToken", null); 711 this.$store.dispatch("setToken", null);
712 this.$store.dispatch("Id", null); 712 this.$store.dispatch("Id", null);
713 } 713 }
714 }); 714 });
715 }, 715 },
716 getSections(_id) { 716 getSections(_id) {
717 var token = this.$store.state.token; 717 var token = this.$store.state.token;
718 this.showLoader = true; 718 this.showLoader = true;
719 http() 719 http()
720 .get( 720 .get(
721 "/getSectionsList", 721 "/getSectionsList",
722 { params: { classId: _id } }, 722 { params: { classId: _id } },
723 { 723 {
724 headers: { Authorization: "Bearer " + token }, 724 headers: { Authorization: "Bearer " + token },
725 } 725 }
726 ) 726 )
727 .then((response) => { 727 .then((response) => {
728 this.addSection = response.data.data; 728 this.addSection = response.data.data;
729 this.showLoader = false; 729 this.showLoader = false;
730 }) 730 })
731 .catch((err) => { 731 .catch((err) => {
732 this.showLoader = false; 732 this.showLoader = false;
733 }); 733 });
734 }, 734 },
735 displaySearch() { 735 displaySearch() {
736 (this.show = false), (this.showSearch = true); 736 (this.show = false), (this.showSearch = true);
737 }, 737 },
738 closeSearch() { 738 closeSearch() {
739 this.showSearch = false; 739 this.showSearch = false;
740 this.show = true; 740 this.show = true;
741 this.search = ""; 741 this.search = "";
742 }, 742 },
743 743
744 async generatePDF2Canvas(item) { 744 async generatePDF2Canvas(item) {
745 // console.log("documentUrl", documentUrl); 745 // console.log("documentUrl", documentUrl);
746 // this.loadingPdf = true; 746 // this.loadingPdf = true;
747 // const el = this.$refs.printMe; 747 // const el = this.$refs.printMe;
748 // add option type to get the image version 748 // add option type to get the image version
749 // if not provided the promise will return 749 // if not provided the promise will return
750 // the canvas. 750 // the canvas.
751 // const options = { 751 // const options = {
752 // type: "dataURL" 752 // type: "dataURL"
753 // }; 753 // };
754 // this.output = await this.$html2canvas(el, options); 754 // this.output = await this.$html2canvas(el, options);
755 // console.log("el,option", this.output); 755 // console.log("el,option", this.output);
756 // if (this.output) { 756 // if (this.output) {
757 // this.loadingPdf = false; 757 // this.loadingPdf = false;
758 // } 758 // }
759 // let doc = new jsPDF(); 759 // let doc = new jsPDF();
760 // doc.addImage(this.output,"JPEG", 5, 10, 200, 280); 760 // doc.addImage(this.output,"JPEG", 5, 10, 200, 280);
761 // doc.save("File.pdf"); 761 // doc.save("File.pdf");
762 762
763 // function download(documentUrl, filename) { 763 // function download(documentUrl, filename) {
764 // fetch(documentUrl).then(function(t) { 764 // fetch(documentUrl).then(function(t) {
765 // return t.blob().then(b => { 765 // return t.blob().then(b => {
766 // var a = document.createElement("a"); 766 // var a = document.createElement("a");
767 // a.href = URL.createObjectURL(b); 767 // a.href = URL.createObjectURL(b);
768 // a.setAttribute("download", "filename"); 768 // a.setAttribute("download", "filename");
769 // a.click(); 769 // a.click();
770 // }); 770 // });
771 // }); 771 // });
772 // } 772 // }
773 var dataType = ""; 773 var dataType = "";
774 var type = ""; 774 var type = "";
775 if (item.fileType == "image") { 775 if (item.fileType == "image") {
776 dataType = "file.jpg"; 776 dataType = "file.jpg";
777 } else if (item.fileType == "other") { 777 } else if (item.fileType == "other") {
778 dataType = "file.pdf"; 778 dataType = "file.pdf";
779 type = "application/pdf"; 779 type = "application/pdf";
780 } 780 }
781 var FileSaver = require("file-saver"); 781 var FileSaver = require("file-saver");
782 FileSaver.saveAs(item.documentUrl, "image.jpg"); 782 FileSaver.saveAs(item.documentUrl, "image.jpg");
783 783
784 // var blob = new Blob([item.documentUrl], { 784 // var blob = new Blob([item.documentUrl], {
785 // type: type 785 // type: type
786 // }); 786 // });
787 // FileSaver.saveAs(blob, dataType); 787 // FileSaver.saveAs(blob, dataType);
788 // const url = window.URL.createObjectURL(new Blob([item.documentUrl],{ type: type } )); 788 // const url = window.URL.createObjectURL(new Blob([item.documentUrl],{ type: type } ));
789 // console.log("document", item.documentUrl); 789 // console.log("document", item.documentUrl);
790 // const link = document.createElement("a"); 790 // const link = document.createElement("a");
791 // link.href = url; 791 // link.href = url;
792 // link.setAttribute("download", dataType); //or any other extension 792 // link.setAttribute("download", dataType); //or any other extension
793 // document.body.appendChild(link); 793 // document.body.appendChild(link);
794 // link.click(); 794 // link.click();
795 795
796 // const blob = window.URL.createObjectURL(new Blob([item.documentUrl],{ type: type } )); 796 // const blob = window.URL.createObjectURL(new Blob([item.documentUrl],{ type: type } ));
797 // const link = document.createElement('a') 797 // const link = document.createElement('a')
798 // link.href = URL.createObjectURL(blob) 798 // link.href = URL.createObjectURL(blob)
799 // link.download = dataType 799 // link.download = dataType
800 // link.click() 800 // link.click()
801 // URL.revokeObjectURL(link.href) 801 // URL.revokeObjectURL(link.href)
802 }, 802 },
803 }, 803 },
804 mounted() { 804 mounted() {
805 this.token = this.$store.state.token; 805 this.token = this.$store.state.token;
806 this.role = this.$store.state.role; 806 this.role = this.$store.state.role;
807 this.getClass(); 807 this.getClass();
808 }, 808 },
809 }; 809 };
810 </script> 810 </script>
811 811
812 <style scoped> 812 <style scoped>
813 a:hover :hover { 813 a:hover :hover {
814 text-decoration: underline !important; 814 text-decoration: underline !important;
815 color: blue; 815 color: blue;
816 } 816 }
817 </style> 817 </style>
src/pages/Account/editInvoice.vue
Diff comments   View file @8b7976c
1 <template> 1 <template>
2 <v-app id="pages-dasboard"> 2 <v-app id="pages-dasboard">
3 <!-- ****** Edit multiple INVOICE ****** --> 3 <!-- ****** Edit multiple INVOICE ****** -->
4 4
5 <v-snackbar 5 <v-snackbar
6 :timeout="timeout" 6 :timeout="timeout"
7 :top="y === 'top'" 7 :top="y === 'top'"
8 :right="x === 'right'" 8 :right="x === 'right'"
9 :vertical="mode === 'vertical'" 9 :vertical="mode === 'vertical'"
10 v-model="snackbar" 10 v-model="snackbar"
11 color="success" 11 color="success"
12 >{{ text }}</v-snackbar> 12 >{{ text }}</v-snackbar>
13 <v-flex xs12 sm12> 13 <v-flex xs12 sm12>
14 <v-container fluid grid-list-md> 14 <v-container fluid grid-list-md>
15 <v-layout wrap> 15 <v-layout wrap>
16 <v-flex xs12 sm12 md5 class="mt-4"> 16 <v-flex xs12 sm12 md5 class="mt-4">
17 <v-card flat> 17 <v-card flat>
18 <v-toolbar dark class="card-styles" flat> 18 <v-toolbar dark class="card-styles" flat>
19 <v-spacer></v-spacer> 19 <v-spacer></v-spacer>
20 <v-toolbar-title> 20 <v-toolbar-title>
21 <h3>Invoice</h3> 21 <h3>Invoice</h3>
22 </v-toolbar-title> 22 </v-toolbar-title>
23 <v-spacer></v-spacer> 23 <v-spacer></v-spacer>
24 </v-toolbar> 24 </v-toolbar>
25 <v-form ref="form" v-model="valid" lazy-validation class="py-4"> 25 <v-form ref="form" v-model="valid" lazy-validation class="py-4">
26 <v-layout> 26 <v-layout>
27 <v-flex xs4 class="pt-4 subheading"> 27 <v-flex xs4 class="pt-4 subheading">
28 <label class="right hidden-xs-only hidden-sm-only">Select Class:</label> 28 <label class="right hidden-xs-only hidden-sm-only">Select Class:</label>
29 <label class="right hidden-lg-only hidden-md-only hidden-xl-only">Class:</label> 29 <label class="right hidden-lg-only hidden-md-only hidden-xl-only">Class:</label>
30 </v-flex> 30 </v-flex>
31 <v-flex xs6 class="ml-3"> 31 <v-flex xs6 class="ml-3">
32 <v-select 32 <v-select
33 :items="addclass" 33 :items="addclass"
34 label="Select Class" 34 label="Select Class"
35 v-model="editData.classId" 35 v-model="editData.classId"
36 item-text="classNum" 36 item-text="classNum"
37 item-value="_id" 37 item-value="_id"
38 @change="getAllStudents(editData.classId)" 38 @change="getAllStudents(editData.classId)"
39 ></v-select> 39 ></v-select>
40 </v-flex> 40 </v-flex>
41 </v-layout> 41 </v-layout>
42 <v-layout> 42 <v-layout>
43 <v-flex xs4 class="pt-4 subheading"> 43 <v-flex xs4 class="pt-4 subheading">
44 <label class="right hidden-xs-only hidden-sm-only">Select Student:</label> 44 <label class="right hidden-xs-only hidden-sm-only">Select Student:</label>
45 <label class="right hidden-lg-only hidden-md-only hidden-xl-only">Student:</label> 45 <label class="right hidden-lg-only hidden-md-only hidden-xl-only">Student:</label>
46 </v-flex> 46 </v-flex>
47 <v-flex xs6 class="ml-3"> 47 <v-flex xs6 class="ml-3">
48 <v-select 48 <v-select
49 :items="studentList" 49 :items="studentList"
50 v-model="editData.studentId" 50 v-model="editData.studentId"
51 :label="editData.studentId ? editData.studentId.name: '-'" 51 :label="editData.studentId ? editData.studentId.name: '-'"
52 item-text="name" 52 item-text="name"
53 item-value="_id" 53 item-value="_id"
54 @change="getStudentId(editData.studentId)" 54 @change="getStudentId(editData.studentId)"
55 ></v-select> 55 ></v-select>
56 </v-flex> 56 </v-flex>
57 </v-layout> 57 </v-layout>
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 xs6 class="ml-3"> 62 <v-flex xs6 class="ml-3">
63 <v-menu 63 <v-menu
64 ref="menu1" 64 ref="menu1"
65 :close-on-content-click="false" 65 :close-on-content-click="false"
66 v-model="menu1" 66 v-model="menu1"
67 :nudge-right="40" 67 :nudge-right="40"
68 lazy 68 lazy
69 :return-value.sync="editData.date" 69 :return-value.sync="editData.date"
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 v-model="editData.date" 77 v-model="editData.date"
78 placeholder="Select date" 78 placeholder="Select date"
79 ></v-text-field> 79 ></v-text-field>
80 <v-date-picker 80 <v-date-picker
81 v-model="editData.date" 81 v-model="editData.date"
82 @input="$refs.menu1.save(editData.date)" 82 @input="$refs.menu1.save(editData.date)"
83 ></v-date-picker> 83 ></v-date-picker>
84 </v-menu> 84 </v-menu>
85 </v-flex> 85 </v-flex>
86 </v-layout> 86 </v-layout>
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 hidden-xs-only hidden-sm-only">Payment Status:</label> 89 <label class="right hidden-xs-only hidden-sm-only">Payment Status:</label>
90 <label class="right hidden-lg-only hidden-md-only hidden-xl-only">Payment:</label> 90 <label class="right hidden-lg-only hidden-md-only hidden-xl-only">Payment:</label>
91 </v-flex> 91 </v-flex>
92 <v-flex xs6 class="ml-3"> 92 <v-flex xs6 class="ml-3">
93 <v-select 93 <v-select
94 :items="paymentStatus" 94 :items="paymentStatus"
95 v-model="editData.paymentStatus" 95 v-model="editData.paymentStatus"
96 item-text="name" 96 item-text="name"
97 item-value="value" 97 item-value="value"
98 label="Select Payment Status" 98 label="Select Payment Status"
99 @change="getPayMethodList" 99 @change="getPayMethodList"
100 ></v-select> 100 ></v-select>
101 </v-flex> 101 </v-flex>
102 </v-layout> 102 </v-layout>
103 <v-layout v-show="showPayMethods"> 103 <v-layout v-show="showPayMethods">
104 <v-flex xs4 class="pt-4 subheading"> 104 <v-flex xs4 class="pt-4 subheading">
105 <label class="right">Payment Method:</label> 105 <label class="right">Payment Method:</label>
106 </v-flex> 106 </v-flex>
107 <v-flex xs6 class="ml-3"> 107 <v-flex xs6 class="ml-3">
108 <v-select 108 <v-select
109 :items="paymentMethods" 109 :items="paymentMethods"
110 v-model="editData.paymentMethod" 110 v-model="editData.paymentMethod"
111 :rules="paymentMethodRules" 111 :rules="paymentMethodRules"
112 label="Select Payment Method" 112 label="Select Payment Method"
113 ></v-select> 113 ></v-select>
114 </v-flex> 114 </v-flex>
115 </v-layout> 115 </v-layout>
116 <v-layout> 116 <v-layout>
117 <v-flex xs12 sm11> 117 <v-flex xs12 sm11>
118 <v-card-actions> 118 <v-card-actions>
119 <v-spacer></v-spacer> 119 <v-spacer></v-spacer>
120 <v-btn 120 <v-btn
121 @click="update(editData)" 121 @click="update(editData)"
122 round 122 round
123 dark 123 dark
124 :loading="loading" 124 :loading="loading"
125 class="add-button" 125 class="add-button"
126 >Update</v-btn> 126 >Update</v-btn>
127 </v-card-actions> 127 </v-card-actions>
128 </v-flex> 128 </v-flex>
129 </v-layout> 129 </v-layout>
130 </v-form> 130 </v-form>
131 </v-card> 131 </v-card>
132 </v-flex> 132 </v-flex>
133 <v-flex xs12 sm12 md7 class="mt-4"> 133 <v-flex xs12 sm12 md7 class="mt-4">
134 <v-card> 134 <v-card>
135 <v-toolbar dark class="card-styles" flat> 135 <v-toolbar dark class="card-styles" flat>
136 <v-spacer></v-spacer> 136 <v-spacer></v-spacer>
137 <v-toolbar-title> 137 <v-toolbar-title>
138 <h3>Fee Type List</h3> 138 <h3>Fee Type List</h3>
139 </v-toolbar-title> 139 </v-toolbar-title>
140 <v-spacer></v-spacer> 140 <v-spacer></v-spacer>
141 </v-toolbar> 141 </v-toolbar>
142 <v-layout wrap> 142 <v-layout wrap>
143 <v-flex xs12> 143 <v-flex xs12>
144 <v-layout wrap> 144 <v-layout wrap>
145 <v-flex xs12 sm2 class="mt-3"> 145 <v-flex xs12 sm2 class="mt-3">
146 <label class="right title hidden-sm-only hidden-xs-only">Fee Type:</label> 146 <label class="right title hidden-sm-only hidden-xs-only">Fee Type:</label>
147 <label 147 <label
148 class="left pl-2 title hidden-xl-only hidden-lg-only hidden-md-only" 148 class="left pl-2 title hidden-xl-only hidden-lg-only hidden-md-only"
149 >Fee Type:</label> 149 >Fee Type:</label>
150 </v-flex> 150 </v-flex>
151 <v-flex xs12 sm4> 151 <v-flex xs12 sm4>
152 <v-select 152 <v-select
153 :items="feeTypes" 153 :items="feeTypes"
154 v-model="feeType.feeTypeName" 154 v-model="feeType.feeTypeName"
155 item-text="feeType" 155 item-text="feeType"
156 item-value="feeType" 156 item-value="feeType"
157 label="Select Fee Type" 157 label="Select Fee Type"
158 class="px-2" 158 class="px-2"
159 ></v-select> 159 ></v-select>
160 </v-flex> 160 </v-flex>
161 <v-flex xs12 sm6> 161 <v-flex xs12 sm6>
162 <v-btn 162 <v-btn
163 dark 163 dark
164 class="right add-button hidden-sm-only hidden-xs-only" 164 class="right add-button hidden-sm-only hidden-xs-only"
165 color="open-dialog-button" 165 color="open-dialog-button"
166 @click="selectFeeType" 166 @click="selectFeeType"
167 >ADD</v-btn> 167 >ADD</v-btn>
168 <v-btn 168 <v-btn
169 dark 169 dark
170 class="mt-3 hidden-xl-only hidden-lg-only hidden-md-only" 170 class="mt-3 hidden-xl-only hidden-lg-only hidden-md-only"
171 color="open-dialog-button" 171 color="open-dialog-button"
172 @click="selectFeeType" 172 @click="selectFeeType"
173 >ADD</v-btn> 173 >ADD</v-btn>
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 <table class="feeTypeTable tableRsponsive"> 178 <table class="feeTypeTable tableRsponsive">
179 <tr class="info white--text"> 179 <tr class="info white--text">
180 <th>#</th> 180 <th>#</th>
181 <th>Fee Type</th> 181 <th>Fee Type</th>
182 <th>Amount</th> 182 <th>Amount</th>
183 <th>Discount</th> 183 <th>Discount</th>
184 <th>Subtotal</th> 184 <th>Subtotal</th>
185 <th>Paid Amount</th> 185 <th>Paid Amount</th>
186 <th>Action</th> 186 <th>Action</th>
187 </tr> 187 </tr>
188 <tr 188 <tr
189 v-for="(feeType, index) in editData.feeType" 189 v-for="(feeType, index) in editData.feeType"
190 :key="index" 190 :key="index"
191 v-on:keyup="getAmmountDetails(feeType,editData.feeType)" 191 v-on:keyup="getAmmountDetails(feeType,editData.feeType)"
192 > 192 >
193 <td style="width:40px">{{ index + 1 }}</td> 193 <td style="width:40px">{{ index + 1 }}</td>
194 <td style="width:120px">{{ feeType.feeTypeName }}</td> 194 <td style="width:120px">{{ feeType.feeTypeName }}</td>
195 <td> 195 <td>
196 <v-text-field 196 <v-text-field
197 placeholder="fill your Amount" 197 placeholder="fill your Amount"
198 v-model="feeType.amount" 198 v-model="feeType.amount"
199 type="number" 199 type="number"
200 ></v-text-field> 200 ></v-text-field>
201 </td> 201 </td>
202 <td> 202 <td>
203 <v-text-field 203 <v-text-field
204 placeholder="fill your Discount" 204 placeholder="fill your Discount"
205 v-model="feeType.discount" 205 v-model="feeType.discount"
206 type="number" 206 type="number"
207 ></v-text-field> 207 ></v-text-field>
208 </td> 208 </td>
209 <td>{{ feeType.subTotal }}</td> 209 <td>{{ feeType.subTotal }}</td>
210 <td v-if="editData.paymentStatus === 'NOT_PAID'"> 210 <td v-if="editData.paymentStatus === 'NOT_PAID'">
211 <v-text-field 211 <v-text-field
212 placeholder="fill your Paid Amount" 212 placeholder="fill your Paid Amount"
213 v-model="feeType.paidAmount" 213 v-model="feeType.paidAmount"
214 type="number" 214 type="number"
215 :disabled="disabled" 215 :disabled="disabled"
216 ></v-text-field> 216 ></v-text-field>
217 </td> 217 </td>
218 <td v-if="editData.paymentStatus != 'NOT_PAID'"> 218 <td v-if="editData.paymentStatus != 'NOT_PAID'">
219 <v-text-field 219 <v-text-field
220 placeholder="fill your Paid Amount" 220 placeholder="fill your Paid Amount"
221 v-model="feeType.paidAmount" 221 v-model="feeType.paidAmount"
222 type="number" 222 type="number"
223 ></v-text-field> 223 ></v-text-field>
224 </td> 224 </td>
225 <td> 225 <td>
226 <v-icon 226 <v-icon
227 color="error" 227 color="error"
228 @click="deleteSelectFee(feeType,editData.feeType,index)" 228 @click="deleteSelectFee(feeType,editData.feeType,index)"
229 >delete</v-icon> 229 >delete</v-icon>
230 </td> 230 </td>
231 </tr> 231 </tr>
232 <tfoot v-if="feeType.amount != 0.00"> 232 <tfoot v-if="feeType.amount != 0.00">
233 <tr> 233 <tr>
234 <td colspan="2">Total:</td> 234 <td colspan="2">Total:</td>
235 <td>{{ feeType.amount }}</td> 235 <td>{{ feeType.amount }}</td>
236 <td>{{ feeType.discount }}</td> 236 <td>{{ feeType.discount }}</td>
237 <td>{{ feeType.subTotal }}</td> 237 <td>{{ feeType.subTotal }}</td>
238 <td>{{ feeType.paidAmount }}</td> 238 <td>{{ feeType.paidAmount }}</td>
239 </tr> 239 </tr>
240 </tfoot> 240 </tfoot>
241 <tfoot v-else-if="feeType.amount == 0.00"> 241 <tfoot v-else-if="feeType.amount == 0.00">
242 <tr> 242 <tr>
243 <td colspan="2">Total:</td> 243 <td colspan="2">Total:</td>
244 <td>{{ editData.totalAmount }}</td> 244 <td>{{ editData.totalAmount }}</td>
245 <td>{{ editData.totalDiscount }}</td> 245 <td>{{ editData.totalDiscount }}</td>
246 <td>{{ editData.totalSubTotal }}</td> 246 <td>{{ editData.totalSubTotal }}</td>
247 <td>{{ editData.totalPaidAmount }}</td> 247 <td>{{ editData.totalPaidAmount }}</td>
248 </tr> 248 </tr>
249 </tfoot> 249 </tfoot>
250 </table> 250 </table>
251 </v-card> 251 </v-card>
252 </v-flex> 252 </v-flex>
253 </v-layout> 253 </v-layout>
254 </v-container> 254 </v-container>
255 </v-flex> 255 </v-flex>
256 <div class="loader" v-if="showLoader"> 256 <div class="loader" v-if="showLoader">
257 <v-progress-circular indeterminate color="white"></v-progress-circular> 257 <v-progress-circular indeterminate color="white"></v-progress-circular>
258 </div> 258 </div>
259 </v-app> 259 </v-app>
260 </template> 260 </template>
261 261
262 <script> 262 <script>
263 import http from "@/Services/http.js"; 263 import http from "@/Services/http.js";
264 import moment from "moment"; 264 import moment from "moment";
265 265
266 export default { 266 export default {
267 props: ["editData"], 267 props: ["editData"],
268 data: () => ({ 268 data: () => ({
269 snackbar: false, 269 snackbar: false,
270 showPayMethods: false, 270 showPayMethods: false,
271 y: "top", 271 y: "top",
272 x: "right", 272 x: "right",
273 mode: "", 273 mode: "",
274 timeout: 3000, 274 timeout: 3000,
275 text: "", 275 text: "",
276 showLoader: false, 276 showLoader: false,
277 loading: false, 277 loading: false,
278 date: null, 278 date: null,
279 search: "", 279 search: "",
280 // dialog: false, 280 // dialog: false,
281 // dialog1: false, 281 // dialog1: false,
282 valid: true, 282 valid: true,
283 validEdit: true, 283 validEdit: true,
284 // isActive: true, 284 // isActive: true,
285 // newActive: false, 285 // newActive: false,
286 showFeeType: false, 286 showFeeType: false,
287 disabled: true, 287 disabled: true,
288 details: [], 288 details: [],
289 feeTypes: [], 289 feeTypes: [],
290 menu1: false, 290 menu1: false,
291 // invoiceData: {}, 291 // invoiceData: {},
292 paymentMethods: ["Cash", "Cheque"], 292 paymentMethods: ["Cash", "Cheque"],
293 feeType: { 293 feeType: {
294 amount: "0.00", 294 amount: "0.00",
295 discount: "0.00", 295 discount: "0.00",
296 paidAmount: "0.00", 296 paidAmount: "0.00",
297 subTotal: "0.00", 297 subTotal: "0.00",
298 feeTypeName: "", 298 feeTypeName: "",
299 }, 299 },
300 feeTypeData: [], 300 feeTypeData: [],
301 pagination: { 301 pagination: {
302 rowsPerPage: 15, 302 rowsPerPage: 15,
303 }, 303 },
304 token: "", 304 token: "",
305 editedItem: {}, 305 editedItem: {},
306 invoiceParticularData: {}, 306 invoiceParticularData: {},
307 addclass: [], 307 addclass: [],
308 studentList: [], 308 studentList: [],
309 paymentMethodRules: [], 309 paymentMethodRules: [],
310 paymentStatus: [ 310 paymentStatus: [
311 { 311 {
312 name: "Not Paid", 312 name: "Not Paid",
313 value: "NOT_PAID", 313 value: "NOT_PAID",
314 }, 314 },
315 { 315 {
316 name: "Partially Paid", 316 name: "Partially Paid",
317 value: "PARTIALLY_PAID", 317 value: "PARTIALLY_PAID",
318 }, 318 },
319 { 319 {
320 name: "Fully Paid", 320 name: "Fully Paid",
321 value: "FULLY_PAID", 321 value: "FULLY_PAID",
322 }, 322 },
323 ], 323 ],
324 editDataObj: {}, 324 editDataObj: {},
325 }), 325 }),
326 // watch: { 326 // watch: {
327 // menu1(val) { 327 // menu1(val) {
328 // val && this.$nextTick(() => (this.$refs.picker.activePicker = "YEAR")); 328 // val && this.$nextTick(() => (this.$refs.picker.activePicker = "YEAR"));
329 // } 329 // }
330 // }, 330 // },
331 methods: { 331 methods: {
332 save(date) { 332 save(date) {
333 this.$refs.menu1.save(date); 333 this.$refs.menu1.save(date);
334 }, 334 },
335 dates: function (date) { 335 dates: function (date) {
336 return moment(date).format("MMMM DD, YYYY"); 336 return moment(date).format("MMMM DD, YYYY");
337 }, 337 },
338 update(editData) { 338 update(editData) {
339 // console.log("editData-----------", editData); 339 // console.log("editData-----------", editData);
340 if (editData.classId._id) { 340 if (editData.classId._id) {
341 this.editDataObj.classNum = editData.classId._id; 341 this.editDataObj.classNum = editData.classId._id;
342 } 342 }
343 if (editData.studentId._id) { 343 if (editData.studentId._id) {
344 this.editDataObj.studentId = editData.studentId._id; 344 this.editDataObj.studentId = editData.studentId._id;
345 } 345 }
346 let feeTypeId = ""; 346 let feeTypeId = "";
347 for (let i = 0; i < this.feeTypes.length; i++) { 347 for (let i = 0; i < this.feeTypes.length; i++) {
348 if (this.feeTypes[i].feeType === this.feeType.feeTypeName) { 348 if (this.feeTypes[i].feeType === this.feeType.feeTypeName) {
349 feeTypeId = this.feeTypes[i]._id; 349 feeTypeId = this.feeTypes[i]._id;
350 } 350 }
351 } 351 }
352 if (this.$refs.form.validate()) { 352 if (this.$refs.form.validate()) {
353 let editInvoiceData = { 353 let editInvoiceData = {
354 invoiceId: editData._id, 354 invoiceId: editData._id,
355 classId: this.editDataObj.classNum, 355 classId: this.editDataObj.classNum,
356 studentId: this.editDataObj.studentId, 356 studentId: this.editDataObj.studentId,
357 date: editData.date, 357 date: editData.date,
358 paymentStatus: editData.paymentStatus, 358 paymentStatus: editData.paymentStatus,
359 paymentMethod: editData.paymentMethod, 359 paymentMethod: editData.paymentMethod,
360 feeType: editData.feeType, 360 feeType: editData.feeType,
361 totalAmount: this.feeType.amount, 361 totalAmount: this.feeType.amount,
362 totalDiscount: this.feeType.discount, 362 totalDiscount: this.feeType.discount,
363 totalSubTotal: this.feeType.subTotal, 363 totalSubTotal: this.feeType.subTotal,
364 totalPaidAmount: this.feeType.paidAmount, 364 totalPaidAmount: this.feeType.paidAmount,
365 }; 365 };
366 // console.log(editInvoiceData, editInvoiceData); 366 // console.log(editInvoiceData, editInvoiceData);
367 if (feeTypeId == "") { 367 if (feeTypeId == "") {
368 delete editInvoiceData.feeType[0].feeTypeId; 368 delete editInvoiceData.feeType[0].feeTypeId;
369 } 369 }
370 if (editInvoiceData.paymentStatus == "NOT_PAID") { 370 if (editInvoiceData.paymentStatus == "NOT_PAID") {
371 delete editInvoiceData.paymentMethod; 371 delete editInvoiceData.paymentMethod;
372 } 372 }
373 if (this.feeType.paidAmount != "0.00") { 373 if (this.feeType.paidAmount != "0.00") {
374 if (this.feeType.subTotal == this.feeType.paidAmount) { 374 if (this.feeType.subTotal == this.feeType.paidAmount) {
375 editInvoiceData.paymentStatus = "FULLY_PAID"; 375 editInvoiceData.paymentStatus = "FULLY_PAID";
376 // console.log("FULLY_PAID"); 376 // console.log("FULLY_PAID");
377 } 377 }
378 if (editInvoiceData.totalPaidAmount) { 378 if (editInvoiceData.totalPaidAmount) {
379 if (this.feeType.subTotal != this.feeType.paidAmount) { 379 if (this.feeType.subTotal != this.feeType.paidAmount) {
380 editInvoiceData.paymentStatus = "PARTIALLY_PAID"; 380 editInvoiceData.paymentStatus = "PARTIALLY_PAID";
381 // console.log("PARTIALLY_PAID"); 381 // console.log("PARTIALLY_PAID");
382 } 382 }
383 } 383 }
384 } 384 }
385 if (editInvoiceData.totalSubTotal == "0.00") { 385 if (editInvoiceData.totalSubTotal == "0.00") {
386 editInvoiceData.paymentStatus = "FULLY_PAID"; 386 editInvoiceData.paymentStatus = "FULLY_PAID";
387 } else if (editInvoiceData.totalSubTotal != "0.00") { 387 } else if (editInvoiceData.totalSubTotal != "0.00") {
388 if (this.feeType.paidAmount === "0.00") { 388 if (this.feeType.paidAmount === "0.00") {
389 editInvoiceData.paymentStatus = "NOT_PAID"; 389 editInvoiceData.paymentStatus = "NOT_PAID";
390 } 390 }
391 } 391 }
392 // console.log("editInvoiceData", editInvoiceData); 392 // console.log("editInvoiceData", editInvoiceData);
393 393
394 http() 394 http()
395 .put("/updateInvoice", editInvoiceData) 395 .put("/updateInvoice", editInvoiceData)
396 .then((response) => { 396 .then((response) => {
397 // this.getInvoiceList(); 397 // this.getInvoiceList();
398 this.snackbar = true; 398 this.snackbar = true;
399 this.text = "Edit Invoice successfully"; 399 this.text = "Edit Invoice successfully";
400 this.loading = false; 400 this.loading = false;
401 color: "red"; 401 color: "red";
402 this.$emit("update-editInvoice"); 402 this.$emit("update-editInvoice");
403 }) 403 })
404 .catch((error) => { 404 .catch((error) => {
405 // console.log(error); 405 // console.log(error);
406 this.snackbar = true; 406 this.snackbar = true;
407 this.text = error.response.data.message; 407 this.text = error.response.data.message;
408 color: "red"; 408 color: "red";
409 this.loading = false; 409 this.loading = false;
410 }); 410 });
411 } 411 }
412 }, 412 },
413 clear() { 413 clear() {
414 this.$refs.form.reset(); 414 this.$refs.form.reset();
415 }, 415 },
416 selectFeeType() { 416 selectFeeType() {
417 this.showFeeType = true; 417 this.showFeeType = true;
418 this.editData.feeType.push({ feeTypeName: this.feeType.feeTypeName }); 418 this.editData.feeType.push({ feeTypeName: this.feeType.feeTypeName });
419 }, 419 },
420 deleteSelectFee: function (feeTyp, feeTypeList, index) { 420 deleteSelectFee: function (feeTyp, feeTypeList, index) {
421 this.editData.feeType.splice(index, 1); 421 this.editData.feeType.splice(index, 1);
422 this.getAmmountDetails(feeTyp, feeTypeList); 422 this.getAmmountDetails(feeTyp, feeTypeList);
423 if (this.feeTypeData.length == 0) { 423 if (this.feeTypeData.length == 0) {
424 this.feeType = { 424 this.feeType = {
425 amount: "0.00", 425 amount: "0.00",
426 discount: "0.00", 426 discount: "0.00",
427 paidAmount: "0.00", 427 paidAmount: "0.00",
428 subTotal: "0.00", 428 subTotal: "0.00",
429 feeTypeList: "", 429 feeTypeList: "",
430 }; 430 };
431 } 431 }
432 }, 432 },
433 getAllClasses() { 433 getAllClasses() {
434 http() 434 http()
435 .get("/getClassesList", { 435 .get("/getClassesList", {
436 headers: { Authorization: "Bearer " + this.token }, 436 headers: { Authorization: "Bearer " + this.token },
437 }) 437 })
438 .then((response) => { 438 .then((response) => {
439 this.addclass = response.data.data; 439 this.addclass = response.data.data;
440 }) 440 })
441 .catch((error) => { 441 .catch((error) => {
442 // console.log("err====>", err); 442 // console.log("err====>", err);
443 this.showLoader = false; 443 this.showLoader = false;
444 if (error.response.status === 401) { 444 if (error.response.status === 401) {
445 this.$router.replace({ path: "/" }); 445 this.$router.replace({ path: "/" });
446 this.$store.dispatch("setToken", null); 446 this.$store.dispatch("setToken", null);
447 this.$store.dispatch("Id", null); 447 this.$store.dispatch("Id", null);
448 this.$store.dispatch("Role", null); 448 this.$store.dispatch("Role", null);
449 } 449 }
450 }); 450 });
451 }, 451 },
452 getAllStudents(classId) { 452 getAllStudents(classId) {
453 // console.log("classId", classId); 453 // console.log("classId", classId);
454 this.editDataObj.classNum = classId; 454 this.editDataObj.classNum = classId;
455 this.editDataObj.studentId = ""; 455 this.editDataObj.studentId = "";
456 this.studentList = []; 456 this.studentList = [];
457 this.showLoader = true; 457 this.showLoader = true;
458 http() 458 http()
459 .get("/getStudentsList", { 459 .get("/getStudentsList", {
460 params: { classId: classId }, 460 params: { classId: classId },
461 headers: { Authorization: "Bearer " + this.token }, 461 headers: { Authorization: "Bearer " + this.token },
462 }) 462 })
463 .then((response) => { 463 .then((response) => {
464 for (let i = 0; i < response.data.data.length; i++) { 464 for (let i = 0; i < response.data.data.length; i++) {
465 this.studentList.push({ 465 this.studentList.push({
466 name: response.data.data[i].name, 466 name: response.data.data[i].name,
467 _id: response.data.data[i]._id, 467 _id: response.data.data[i]._id,
468 }); 468 });
469 } 469 }
470 this.showLoader = false; 470 this.showLoader = false;
471 }) 471 })
472 .catch((err) => { 472 .catch((err) => {
473 // console.log("err====>", err); 473 // console.log("err====>", err);
474 this.showLoader = false; 474 this.showLoader = false;
475 }); 475 });
476 }, 476 },
477 getStudentId(studentId) { 477 getStudentId(studentId) {
478 // console.log("studentId", studentId); 478 // console.log("studentId", studentId);
479 this.editDataObj.studentId = studentId; 479 this.editDataObj.studentId = studentId;
480 }, 480 },
481 getfeeType() { 481 getfeeType() {
482 http() 482 http()
483 .get("/getFeesList", { 483 .get("/getFeesList", {
484 headers: { Authorization: "Bearer " + this.token }, 484 headers: { Authorization: "Bearer " + this.token },
485 }) 485 })
486 .then((response) => { 486 .then((response) => {
487 this.feeTypes = response.data.data; 487 this.feeTypes = response.data.data;
488 }) 488 })
489 .catch((err) => { 489 .catch((err) => {
490 // console.log("err====>", err); 490 // console.log("err====>", err);
491 }); 491 });
492 }, 492 },
493 getAmmountDetails(feeTyp, feeTypeList) { 493 getAmmountDetails(feeTyp, feeTypeList) {
494 this.feeTypeData = feeTypeList; 494 this.feeTypeData = feeTypeList;
495 let feeType = { 495 let feeType = {
496 amount: "", 496 amount: "",
497 discount: "", 497 discount: "",
498 subTotal: "", 498 subTotal: "",
499 subParticularTotal: "", 499 subParticularTotal: "",
500 paidAmount: "", 500 paidAmount: "",
501 }; 501 };
502 for (let i = 0; i < this.feeTypeData.length; i++) { 502 for (let i = 0; i < this.feeTypeData.length; i++) {
503 // *********** AMOUNT *********** 503 // *********** AMOUNT ***********
504 if (this.feeTypeData[i].amount) { 504 if (this.feeTypeData[i].amount) {
505 feeType.amount = 505 feeType.amount =
506 Number(feeType.amount) + Number(this.feeTypeData[i].amount); 506 Number(feeType.amount) + Number(this.feeTypeData[i].amount);
507 this.feeType.amount = feeType.amount; 507 this.feeType.amount = feeType.amount;
508 this.feeType.subTotal = feeType.amount; 508 this.feeType.subTotal = feeType.amount;
509 this.feeTypeData[i].subTotal = this.feeTypeData[i].amount; 509 this.feeTypeData[i].subTotal = this.feeTypeData[i].amount;
510 } else if (this.feeTypeData[0].amount == "") { 510 } else if (this.feeTypeData[0].amount == "") {
511 this.feeType.amount = "0.00"; 511 this.feeType.amount = "0.00";
512 this.feeTypeData[i].subTotal = "0.00"; 512 this.feeTypeData[i].subTotal = "0.00";
513 this.feeType.subTotal = "0.00"; 513 this.feeType.subTotal = "0.00";
514 } else if (this.feeTypeData[i].amount == "") { 514 } else if (this.feeTypeData[i].amount == "") {
515 this.feeType.amount = 515 this.feeType.amount =
516 Number(feeType.amount) + Number(this.feeTypeData[i].amount); 516 Number(feeType.amount) + Number(this.feeTypeData[i].amount);
517 this.feeTypeData[i].subTotal = 517 this.feeTypeData[i].subTotal =
518 Number(feeType.amount) + Number(this.feeTypeData[i].amount); 518 Number(feeType.amount) + Number(this.feeTypeData[i].amount);
519 this.feeType.subTotal = 519 this.feeType.subTotal =
520 Number(feeType.amount) + Number(this.feeTypeData[i].amount); 520 Number(feeType.amount) + Number(this.feeTypeData[i].amount);
521 } 521 }
522 // *********** DISCOUNT *********** 522 // *********** DISCOUNT ***********
523 if (this.feeTypeData[i].discount) { 523 if (this.feeTypeData[i].discount) {
524 if ( 524 if (
525 Number(this.feeTypeData[i].discount) < this.feeTypeData[i].amount 525 Number(this.feeTypeData[i].discount) < this.feeTypeData[i].amount
526 ) { 526 ) {
527 feeType.discount = 527 feeType.discount =
528 Number(feeType.discount) + Number(this.feeTypeData[i].discount); 528 Number(feeType.discount) + Number(this.feeTypeData[i].discount);
529 this.feeType.discount = feeType.discount; 529 this.feeType.discount = feeType.discount;
530 feeType.subParticularTotal = 530 feeType.subParticularTotal =
531 this.feeTypeData[i].amount - this.feeTypeData[i].discount; 531 this.feeTypeData[i].amount - this.feeTypeData[i].discount;
532 this.feeTypeData[i].subTotal = feeType.subParticularTotal.toFixed( 532 this.feeTypeData[i].subTotal = feeType.subParticularTotal.toFixed(
533 2 533 2
534 ); 534 );
535 } else if ( 535 } else if (
536 Number(this.feeTypeData[i].discount) >= this.feeTypeData[i].amount 536 Number(this.feeTypeData[i].discount) >= this.feeTypeData[i].amount
537 ) { 537 ) {
538 this.feeTypeData[i].discount = this.feeTypeData[i].amount; 538 this.feeTypeData[i].discount = this.feeTypeData[i].amount;
539 feeType.discount = 539 feeType.discount =
540 Number(feeType.discount) + Number(this.feeTypeData[i].discount); 540 Number(feeType.discount) + Number(this.feeTypeData[i].discount);
541 this.feeType.discount = feeType.discount.toString(); 541 this.feeType.discount = feeType.discount.toString();
542 feeType.subParticularTotal = 542 feeType.subParticularTotal =
543 this.feeTypeData[i].amount - this.feeTypeData[i].discount; 543 this.feeTypeData[i].amount - this.feeTypeData[i].discount;
544 this.feeTypeData[ 544 this.feeTypeData[
545 i 545 i
546 ].subTotal = feeType.subParticularTotal.toString(); 546 ].subTotal = feeType.subParticularTotal.toString();
547 } 547 }
548 } else if (this.feeTypeData[0].discount == "") { 548 } else if (this.feeTypeData[0].discount == "") {
549 this.feeType.discount = "0.00"; 549 this.feeType.discount = "0.00";
550 } 550 }
551 551
552 // *********** SUBTOTAL *********** 552 // *********** SUBTOTAL ***********
553 if (this.feeTypeData[i].subTotal) { 553 if (this.feeTypeData[i].subTotal) {
554 feeType.subTotal = 554 feeType.subTotal =
555 Number(feeType.subTotal) + Number(this.feeTypeData[i].subTotal); 555 Number(feeType.subTotal) + Number(this.feeTypeData[i].subTotal);
556 this.feeType.subTotal = feeType.subTotal.toFixed(2); 556 this.feeType.subTotal = feeType.subTotal.toFixed(2);
557 } 557 }
558 558
559 // *********** PAID-AMOUNT *********** 559 // *********** PAID-AMOUNT ***********
560 if (this.feeTypeData[i].paidAmount) { 560 if (this.feeTypeData[i].paidAmount) {
561 feeType.paidAmount = 561 feeType.paidAmount =
562 Number(feeType.paidAmount) + Number(this.feeTypeData[i].paidAmount); 562 Number(feeType.paidAmount) + Number(this.feeTypeData[i].paidAmount);
563 this.feeType.paidAmount = feeType.paidAmount.toFixed(2); 563 this.feeType.paidAmount = feeType.paidAmount.toFixed(2);
564 } else if (this.feeTypeData[0].paidAmount == "") { 564 } else if (this.feeTypeData[0].paidAmount == "") {
565 this.feeType.paidAmount = "0.00"; 565 this.feeType.paidAmount = "0.00";
566 } else if (this.feeTypeData[i].paidAmount == "") { 566 } else if (this.feeTypeData[i].paidAmount == "") {
567 this.feeType.paidAmount = feeType.paidAmount = 567 this.feeType.paidAmount = feeType.paidAmount =
568 Number(feeType.paidAmount) + Number(this.feeTypeData[i].paidAmount); 568 Number(feeType.paidAmount) + Number(this.feeTypeData[i].paidAmount);
569 } 569 }
570 570
571 // if paid Amount fill large of subtotal value so this condition are fixed filled subtotal value. 571 // if paid Amount fill large of subtotal value so this condition are fixed filled subtotal value.
572 if (feeType.paidAmount > feeType.subTotal) { 572 if (feeType.paidAmount > feeType.subTotal) {
573 this.feeTypeData[i].paidAmount = this.feeTypeData[i].subTotal; 573 this.feeTypeData[i].paidAmount = this.feeTypeData[i].subTotal;
574 this.feeType.paidAmount = feeType.subTotal; 574 this.feeType.paidAmount = feeType.subTotal;
575 } 575 }
576 } 576 }
577 }, 577 },
578 getPayMethodList() { 578 getPayMethodList() {
579 if (this.editData.paymentStatus == "PARTIALLY_PAID") { 579 if (this.editData.paymentStatus == "PARTIALLY_PAID") {
580 this.showPayMethods = true; 580 this.showPayMethods = true;
581 this.paymentMethodRules = [(v) => !!v || "Payment Method is required"]; 581 this.paymentMethodRules = [(v) => !!v || "Payment Method is required"];
582 } else if (this.editData.paymentStatus == "FULLY_PAID") { 582 } else if (this.editData.paymentStatus == "FULLY_PAID") {
583 this.showPayMethods = true; 583 this.showPayMethods = true;
584 this.paymentMethodRules = [(v) => !!v || "Payment Method is required"]; 584 this.paymentMethodRules = [(v) => !!v || "Payment Method is required"];
585 } else if (this.editData.paymentStatus == "NOT_PAID") { 585 } else if (this.editData.paymentStatus == "NOT_PAID") {
586 for (let i = 0; i < this.feeTypeData.length; i++) { 586 for (let i = 0; i < this.feeTypeData.length; i++) {
587 this.feeTypeData[i].paidAmount = "0.00"; 587 this.feeTypeData[i].paidAmount = "0.00";
588 this.feeType.paidAmount = "0.00"; 588 this.feeType.paidAmount = "0.00";
589 } 589 }
590 this.paymentMethodRules = ""; 590 this.paymentMethodRules = "";
591 this.showPayMethods = false; 591 this.showPayMethods = false;
592 } else { 592 } else {
593 this.showPayMethods = false; 593 this.showPayMethods = false;
594 } 594 }
595 }, 595 },
596 }, 596 },
597 mounted() { 597 mounted() {
598 this.token = this.$store.state.token; 598 this.token = this.$store.state.token;
599 this.getAllClasses(); 599 this.getAllClasses();
600 this.getfeeType(); 600 this.getfeeType();
601 }, 601 },
602 created() { 602 created() {
603 this.$root.$on("app:search", (search) => { 603 this.$root.$on("app:search", (search) => {
604 this.search = search; 604 this.search = search;
605 }); 605 });
606 }, 606 },
607 beforeDestroy() { 607 beforeDestroy() {
608 // dont forget to remove the listener 608 // dont forget to remove the listener
609 this.$root.$off("app:search"); 609 this.$root.$off("app:search");
610 }, 610 },
611 }; 611 };
612 </script> 612 </script>
613 613
614 614
615 <style scoped> 615 <style scoped>
616 .active { 616 .active {
617 background-color: gray; 617 background-color: gray;
618 color: white !important; 618 color: white !important;
619 } 619 }
620 .activebtn { 620 .activebtn {
621 color: black !important; 621 color: black !important;
622 } 622 }
623 table { 623 table {
624 border-collapse: collapse; 624 border-collapse: collapse;
625 border: 1px solid #e2e7eb; 625 border: 1px solid #e2e7eb;
626 } 626 }
627 627
628 th, 628 th,
629 td { 629 td {
630 border: 1px solid #e2e7eb; 630 border: 1px solid #e2e7eb;
631 padding: 10px; 631 padding: 10px;
632 text-align: center; 632 text-align: center;
633 } 633 }
634 table.feeTypeTable { 634 table.feeTypeTable {
635 table-layout: auto !important; 635 table-layout: auto !important;
636 width: 100% !important; 636 width: 100% !important;
637 } 637 }
638 @media screen and (max-width: 380px) { 638 @media screen and (max-width: 380px) {
639 .tableRsponsive { 639 .tableRsponsive {
640 display: block; 640 display: block;
641 position: relative; 641 position: relative;
642 overflow: scroll; 642 overflow: scroll;
643 } 643 }
644 } 644 }
645 </style> 645 </style>
src/pages/Account/expense.vue
Diff comments   View file @8b7976c
1 <template> 1 <template>
2 <v-container fluid class="body-color"> 2 <v-container fluid class="body-color">
3 <!-- ****** EDIT EXPENSE ****** --> 3 <!-- ****** EDIT EXPENSE ****** -->
4 <v-dialog v-model="editExpenseDialog" max-width="600px" scrollable persistent> 4 <v-dialog v-model="editExpenseDialog" max-width="600px" scrollable persistent>
5 <v-card flat class="card-style pa-2" dark> 5 <v-card flat class="card-style pa-2" dark>
6 <v-layout> 6 <v-layout>
7 <v-flex xs12> 7 <v-flex xs12>
8 <label class="title text-xs-center">Edit Expense Profile</label> 8 <label class="title text-xs-center">Edit Expense Profile</label>
9 <v-icon size="24" class="right" @click="editExpenseDialog = false">cancel</v-icon> 9 <v-icon size="24" class="right" @click="editExpenseDialog = false">cancel</v-icon>
10 </v-flex> 10 </v-flex>
11 </v-layout> 11 </v-layout>
12 <v-card-text style="height: 600px;"> 12 <v-card-text style="height: 600px;">
13 <v-layout> 13 <v-layout>
14 <v-flex 14 <v-flex
15 xs12 15 xs12
16 class="text-xs-center text-sm-center text-md-center text-lg-center my-4 mr-4" 16 class="text-xs-center text-sm-center text-md-center text-lg-center my-4 mr-4"
17 > 17 >
18 <v-avatar size="140px" v-if="!editedItem.fileUrl && !imageUrl"> 18 <v-avatar size="140px" v-if="!editedItem.fileUrl && !imageUrl">
19 <img src="/static/icon/user.png" /> 19 <img src="/static/icon/user.png" />
20 </v-avatar> 20 </v-avatar>
21 <img 21 <img
22 :src="editedItem.fileUrl" 22 :src="editedItem.fileUrl"
23 v-else-if="editedItem.fileUrl && !imageUrl" 23 v-else-if="editedItem.fileUrl && !imageUrl"
24 style="border-radius:50%; width:150px" 24 style="border-radius:50%; width:150px"
25 /> 25 />
26 <img 26 <img
27 v-if="imageUrl" 27 v-if="imageUrl"
28 :src="imageUrl" 28 :src="imageUrl"
29 height="150" 29 height="150"
30 style="border-radius:50%; width:150px" 30 style="border-radius:50%; width:150px"
31 /> 31 />
32 <input 32 <input
33 type="file" 33 type="file"
34 style="display:none" 34 style="display:none"
35 ref="image" 35 ref="image"
36 accept="image/*" 36 accept="image/*"
37 @change="onFilePicked" 37 @change="onFilePicked"
38 /> 38 />
39 </v-flex> 39 </v-flex>
40 </v-layout> 40 </v-layout>
41 <v-layout wrap> 41 <v-layout wrap>
42 <v-flex xs12 sm12> 42 <v-flex xs12 sm12>
43 <v-layout> 43 <v-layout>
44 <v-flex xs4 class="pt-4 subheading"> 44 <v-flex xs4 class="pt-4 subheading">
45 <label class="right">Name:</label> 45 <label class="right">Name:</label>
46 </v-flex> 46 </v-flex>
47 <v-flex xs7 class="ml-3"> 47 <v-flex xs7 class="ml-3">
48 <v-text-field 48 <v-text-field
49 v-model="editedItem.name" 49 v-model="editedItem.name"
50 placeholder="fill your full Name" 50 placeholder="fill your full Name"
51 name="name" 51 name="name"
52 type="text" 52 type="text"
53 required 53 required
54 ></v-text-field> 54 ></v-text-field>
55 </v-flex> 55 </v-flex>
56 </v-layout> 56 </v-layout>
57 </v-flex> 57 </v-flex>
58 </v-layout> 58 </v-layout>
59 <v-layout wrap> 59 <v-layout wrap>
60 <v-flex xs12> 60 <v-flex xs12>
61 <v-layout> 61 <v-layout>
62 <v-flex xs4 class="pt-4 subheading"> 62 <v-flex xs4 class="pt-4 subheading">
63 <label class="right">Date:</label> 63 <label class="right">Date:</label>
64 </v-flex> 64 </v-flex>
65 <v-flex xs7 class="ml-3"> 65 <v-flex xs7 class="ml-3">
66 <v-menu 66 <v-menu
67 ref="menu" 67 ref="menu"
68 :close-on-content-click="false" 68 :close-on-content-click="false"
69 v-model="menu3" 69 v-model="menu3"
70 :nudge-right="40" 70 :nudge-right="40"
71 lazy 71 lazy
72 transition="scale-transition" 72 transition="scale-transition"
73 offset-y 73 offset-y
74 full-width 74 full-width
75 min-width="290px" 75 min-width="290px"
76 > 76 >
77 <v-text-field 77 <v-text-field
78 slot="activator" 78 slot="activator"
79 v-model="editedItem.date" 79 v-model="editedItem.date"
80 placeholder="Select date" 80 placeholder="Select date"
81 ></v-text-field> 81 ></v-text-field>
82 <v-date-picker 82 <v-date-picker
83 ref="picker" 83 ref="picker"
84 v-model="editedItem.date" 84 v-model="editedItem.date"
85 @input="$refs.menu.save(editedItem.date)" 85 @input="$refs.menu.save(editedItem.date)"
86 ></v-date-picker> 86 ></v-date-picker>
87 </v-menu> 87 </v-menu>
88 </v-flex> 88 </v-flex>
89 </v-layout> 89 </v-layout>
90 </v-flex> 90 </v-flex>
91 <v-layout wrap> 91 <v-layout wrap>
92 <v-flex xs12 sm12> 92 <v-flex xs12 sm12>
93 <v-layout> 93 <v-layout>
94 <v-flex xs4 class="pt-4 subheading"> 94 <v-flex xs4 class="pt-4 subheading">
95 <label class="right">Amount:</label> 95 <label class="right">Amount:</label>
96 </v-flex> 96 </v-flex>
97 <v-flex xs7 class="ml-3"> 97 <v-flex xs7 class="ml-3">
98 <v-text-field v-model="editedItem.amount" required></v-text-field> 98 <v-text-field v-model="editedItem.amount" required></v-text-field>
99 </v-flex> 99 </v-flex>
100 </v-layout> 100 </v-layout>
101 </v-flex> 101 </v-flex>
102 </v-layout> 102 </v-layout>
103 <v-flex xs12> 103 <v-flex xs12>
104 <v-layout wrap> 104 <v-layout wrap>
105 <v-flex xs4 class="pt-4 subheading"> 105 <v-flex xs4 class="pt-4 subheading">
106 <label class="right hidden-xs-only hidden-sm-only">Uplaod Image:</label> 106 <label class="right hidden-xs-only hidden-sm-only">Uplaod Image:</label>
107 <label class="right hidden-lg-only hidden-md-only hidden-xl-only">Uplaod:</label> 107 <label class="right hidden-lg-only hidden-md-only hidden-xl-only">Uplaod:</label>
108 </v-flex> 108 </v-flex>
109 <v-flex xs7 class="ml-3"> 109 <v-flex xs7 class="ml-3">
110 <v-text-field 110 <v-text-field
111 label="Select Image" 111 label="Select Image"
112 @click="pickFile" 112 @click="pickFile"
113 v-model="imageName" 113 v-model="imageName"
114 append-icon="attach_file" 114 append-icon="attach_file"
115 ></v-text-field> 115 ></v-text-field>
116 <input 116 <input
117 type="file" 117 type="file"
118 style="display:none" 118 style="display:none"
119 ref="image" 119 ref="image"
120 accept="image/*" 120 accept="image/*"
121 @change="onFilePicked" 121 @change="onFilePicked"
122 /> 122 />
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">Note:</label> 129 <label class="right">Note:</label>
130 </v-flex> 130 </v-flex>
131 <v-flex xs7 class="ml-3"> 131 <v-flex xs7 class="ml-3">
132 <v-textarea 132 <v-textarea
133 name="input-7-1" 133 name="input-7-1"
134 v-model="editedItem.note" 134 v-model="editedItem.note"
135 placeholder="fill your Note" 135 placeholder="fill your Note"
136 type="text" 136 type="text"
137 :rules="noteRules" 137 :rules="noteRules"
138 multi-line 138 multi-line
139 required 139 required
140 ></v-textarea> 140 ></v-textarea>
141 </v-flex> 141 </v-flex>
142 </v-layout> 142 </v-layout>
143 </v-flex> 143 </v-flex>
144 </v-layout> 144 </v-layout>
145 <v-layout> 145 <v-layout>
146 <v-flex xs12 sm12> 146 <v-flex xs12 sm12>
147 <v-card-actions> 147 <v-card-actions>
148 <v-spacer></v-spacer> 148 <v-spacer></v-spacer>
149 <v-btn round dark :loading="loading" @click="save" class="add-button">Save</v-btn> 149 <v-btn round dark :loading="loading" @click="save" class="add-button">Save</v-btn>
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 EXPENSE DETAILS ****** --> 157 <!-- ****** PROFILE VIEW EXPENSE DETAILS ****** -->
158 158
159 <v-dialog v-model="viewExpenseDialog" max-width="600px" scrollable persistent> 159 <v-dialog v-model="viewExpenseDialog" max-width="600px" scrollable persistent>
160 <v-card flat class="card-style pa-3" dark> 160 <v-card flat class="card-style pa-3" dark>
161 <v-layout> 161 <v-layout>
162 <v-flex xs12> 162 <v-flex xs12>
163 <label class="title text-xs-center">View Expense</label> 163 <label class="title text-xs-center">View Expense</label>
164 <v-icon size="24" class="right" @click="viewExpenseDialog = false">cancel</v-icon> 164 <v-icon size="24" class="right" @click="viewExpenseDialog = false">cancel</v-icon>
165 </v-flex> 165 </v-flex>
166 </v-layout> 166 </v-layout>
167 <v-card-text> 167 <v-card-text>
168 <v-container grid-list-md> 168 <v-container grid-list-md>
169 <v-layout wrap> 169 <v-layout wrap>
170 <v-flex> 170 <v-flex>
171 <v-flex align-center justify-center layout text-xs-center> 171 <v-flex align-center justify-center layout text-xs-center>
172 <v-avatar size="160px"> 172 <v-avatar size="160px">
173 <img src="/static/icon/user.png" v-if="!editedItem.fileUrl" /> 173 <img src="/static/icon/user.png" v-if="!editedItem.fileUrl" />
174 <img :src="editedItem.fileUrl" v-else-if="editedItem.fileUrl" /> 174 <img :src="editedItem.fileUrl" v-else-if="editedItem.fileUrl" />
175 </v-avatar> 175 </v-avatar>
176 </v-flex> 176 </v-flex>
177 <v-layout> 177 <v-layout>
178 <v-flex xs5 sm6> 178 <v-flex xs5 sm6>
179 <h5 class="right my-1"> 179 <h5 class="right my-1">
180 <b>Name:</b> 180 <b>Name:</b>
181 </h5> 181 </h5>
182 </v-flex> 182 </v-flex>
183 <v-flex sm6 xs8> 183 <v-flex sm6 xs8>
184 <h5 class="my-1">{{ editedItem.name }}</h5> 184 <h5 class="my-1">{{ editedItem.name }}</h5>
185 </v-flex> 185 </v-flex>
186 </v-layout> 186 </v-layout>
187 <v-layout> 187 <v-layout>
188 <v-flex xs5 sm6> 188 <v-flex xs5 sm6>
189 <h5 class="right my-1"> 189 <h5 class="right my-1">
190 <b>Amount:</b> 190 <b>Amount:</b>
191 </h5> 191 </h5>
192 </v-flex> 192 </v-flex>
193 <v-flex sm6 xs8> 193 <v-flex sm6 xs8>
194 <h5 class="my-1">{{ editedItem.amount }}</h5> 194 <h5 class="my-1">{{ editedItem.amount }}</h5>
195 </v-flex> 195 </v-flex>
196 </v-layout> 196 </v-layout>
197 <v-layout> 197 <v-layout>
198 <v-flex xs5 sm6> 198 <v-flex xs5 sm6>
199 <h5 class="right my-1"> 199 <h5 class="right my-1">
200 <b>Date:</b> 200 <b>Date:</b>
201 </h5> 201 </h5>
202 </v-flex> 202 </v-flex>
203 <v-flex sm6 xs8> 203 <v-flex sm6 xs8>
204 <h5 class="my-1">{{ dates(editedItem.date) }}</h5> 204 <h5 class="my-1">{{ dates(editedItem.date) }}</h5>
205 </v-flex> 205 </v-flex>
206 </v-layout> 206 </v-layout>
207 <v-layout> 207 <v-layout>
208 <v-flex xs5 sm6> 208 <v-flex xs5 sm6>
209 <h5 class="right my-1"> 209 <h5 class="right my-1">
210 <b>Note:</b> 210 <b>Note:</b>
211 </h5> 211 </h5>
212 </v-flex> 212 </v-flex>
213 <v-flex sm6 xs8> 213 <v-flex sm6 xs8>
214 <h5 class="my-1">{{ editedItem.note }}</h5> 214 <h5 class="my-1">{{ editedItem.note }}</h5>
215 </v-flex> 215 </v-flex>
216 </v-layout> 216 </v-layout>
217 </v-flex> 217 </v-flex>
218 </v-layout> 218 </v-layout>
219 </v-container> 219 </v-container>
220 </v-card-text> 220 </v-card-text>
221 </v-card> 221 </v-card>
222 </v-dialog> 222 </v-dialog>
223 <!-- ****** EXPENSE TABLE ****** --> 223 <!-- ****** EXPENSE TABLE ****** -->
224 <v-toolbar color="transparent" flat> 224 <v-toolbar color="transparent" flat>
225 <v-btn 225 <v-btn
226 fab 226 fab
227 dark 227 dark
228 class="open-dialog-button hidden-xl-only hidden-md-only hidden-lg-only" 228 class="open-dialog-button hidden-xl-only hidden-md-only hidden-lg-only"
229 small 229 small
230 @click="addExpenseDialog = true" 230 @click="addExpenseDialog = true"
231 > 231 >
232 <v-icon dark>add</v-icon> 232 <v-icon dark>add</v-icon>
233 </v-btn> 233 </v-btn>
234 <v-btn 234 <v-btn
235 round 235 round
236 class="open-dialog-button hidden-sm-only hidden-xs-only" 236 class="open-dialog-button hidden-sm-only hidden-xs-only"
237 dark 237 dark
238 @click="addExpenseDialog = true" 238 @click="addExpenseDialog = true"
239 > 239 >
240 <v-icon class="white--text pr-1" size="20">add</v-icon>Add Expense 240 <v-icon class="white--text pr-1" size="20">add</v-icon>Add Expense
241 </v-btn> 241 </v-btn>
242 <v-spacer></v-spacer> 242 <v-spacer></v-spacer>
243 <v-card-title class="body-1" v-show="show"> 243 <v-card-title class="body-1" v-show="show">
244 <v-btn icon large flat @click="displaySearch"> 244 <v-btn icon large flat @click="displaySearch">
245 <v-avatar size="27"> 245 <v-avatar size="27">
246 <img src="/static/icon/search.png" alt="icon" /> 246 <img src="/static/icon/search.png" alt="icon" />
247 </v-avatar> 247 </v-avatar>
248 </v-btn> 248 </v-btn>
249 </v-card-title> 249 </v-card-title>
250 <v-flex xs8 sm8 md3 lg2 v-if="showSearch"> 250 <v-flex xs8 sm8 md3 lg2 v-if="showSearch">
251 <v-layout> 251 <v-layout>
252 <v-text-field 252 <v-text-field
253 autofocus 253 autofocus
254 v-model="search" 254 v-model="search"
255 label="Search" 255 label="Search"
256 prepend-inner-icon="search" 256 prepend-inner-icon="search"
257 color="primary" 257 color="primary"
258 ></v-text-field> 258 ></v-text-field>
259 <v-icon @click="closeSearch" color="error">close</v-icon> 259 <v-icon @click="closeSearch" color="error">close</v-icon>
260 </v-layout> 260 </v-layout>
261 </v-flex> 261 </v-flex>
262 </v-toolbar> 262 </v-toolbar>
263 <v-data-table 263 <v-data-table
264 :headers="headers" 264 :headers="headers"
265 :items="expenseList" 265 :items="expenseList"
266 :pagination.sync="pagination" 266 :pagination.sync="pagination"
267 :search="search" 267 :search="search"
268 > 268 >
269 <template slot="items" slot-scope="props"> 269 <template slot="items" slot-scope="props">
270 <tr class="tr"> 270 <tr class="tr">
271 <td class="td td-row">{{ props.index + 1}}</td> 271 <td class="td td-row">{{ props.index + 1}}</td>
272 <td class="text-xs-center td td-row"> 272 <td class="text-xs-center td td-row">
273 <v-avatar> 273 <v-avatar>
274 <img :src="props.item.fileUrl" v-if="props.item.fileUrl" /> 274 <img :src="props.item.fileUrl" v-if="props.item.fileUrl" />
275 <img src="/static/icon/user.png" v-else-if="!props.item.fileUrl" /> 275 <img src="/static/icon/user.png" v-else-if="!props.item.fileUrl" />
276 </v-avatar> 276 </v-avatar>
277 </td> 277 </td>
278 <td class="text-xs-center td td-row">{{ props.item.name}}</td> 278 <td class="text-xs-center td td-row">{{ props.item.name}}</td>
279 <td class="text-xs-center td td-row">{{ dates(props.item.date) }}</td> 279 <td class="text-xs-center td td-row">{{ dates(props.item.date) }}</td>
280 <td class="text-xs-center td td-row">{{ props.item.user }}</td> 280 <td class="text-xs-center td td-row">{{ props.item.user }}</td>
281 <td class="text-xs-center td td-row">{{ props.item.amount }}</td> 281 <td class="text-xs-center td td-row">{{ props.item.amount }}</td>
282 <td class="text-xs-center td td-row">{{ props.item.note }}</td> 282 <td class="text-xs-center td td-row">{{ props.item.note }}</td>
283 <td class="text-xs-center td td-row"> 283 <td class="text-xs-center td td-row">
284 <span> 284 <span>
285 <v-tooltip top> 285 <v-tooltip top>
286 <img 286 <img
287 slot="activator" 287 slot="activator"
288 style="cursor:pointer; width:25px; height:25px; " 288 style="cursor:pointer; width:25px; height:25px; "
289 class="mr-3" 289 class="mr-3"
290 @click="profile(props.item)" 290 @click="profile(props.item)"
291 src="/static/icon/view.png" 291 src="/static/icon/view.png"
292 /> 292 />
293 <span>View</span> 293 <span>View</span>
294 </v-tooltip> 294 </v-tooltip>
295 <v-tooltip top> 295 <v-tooltip top>
296 <img 296 <img
297 slot="activator" 297 slot="activator"
298 style="cursor:pointer; width:20px; height:18px; " 298 style="cursor:pointer; width:20px; height:18px; "
299 class="mr-3" 299 class="mr-3"
300 @click="editItem(props.item)" 300 @click="editItem(props.item)"
301 src="/static/icon/edit.png" 301 src="/static/icon/edit.png"
302 /> 302 />
303 <span>Edit</span> 303 <span>Edit</span>
304 </v-tooltip> 304 </v-tooltip>
305 <v-tooltip top> 305 <v-tooltip top>
306 <img 306 <img
307 slot="activator" 307 slot="activator"
308 style="cursor:pointer; width:20px; height:20px; " 308 style="cursor:pointer; width:20px; height:20px; "
309 @click="deleteItem(props.item)" 309 @click="deleteItem(props.item)"
310 src="/static/icon/delete.png" 310 src="/static/icon/delete.png"
311 /> 311 />
312 <span>Delete</span> 312 <span>Delete</span>
313 </v-tooltip> 313 </v-tooltip>
314 </span> 314 </span>
315 </td> 315 </td>
316 </tr> 316 </tr>
317 </template> 317 </template>
318 <v-alert 318 <v-alert
319 slot="no-results" 319 slot="no-results"
320 :value="true" 320 :value="true"
321 color="error" 321 color="error"
322 icon="warning" 322 icon="warning"
323 >Your search for "{{ search }}" found no results.</v-alert> 323 >Your search for "{{ search }}" found no results.</v-alert>
324 </v-data-table> 324 </v-data-table>
325 325
326 <!-- ****** Add Expense Data ****** --> 326 <!-- ****** Add Expense Data ****** -->
327 <v-dialog v-model="addExpenseDialog" max-width="600px" v-if="addExpenseDialog" persistent> 327 <v-dialog v-model="addExpenseDialog" max-width="600px" v-if="addExpenseDialog" persistent>
328 <v-card flat class="card-style pa-2" dark> 328 <v-card flat class="card-style pa-2" dark>
329 <v-layout> 329 <v-layout>
330 <v-flex xs12> 330 <v-flex xs12>
331 <label class="title text-xs-center">Add Expense</label> 331 <label class="title text-xs-center">Add Expense</label>
332 <v-icon size="24" class="right" @click="closeAddExpenseModel">cancel</v-icon> 332 <v-icon size="24" class="right" @click="closeAddExpenseModel">cancel</v-icon>
333 </v-flex> 333 </v-flex>
334 </v-layout> 334 </v-layout>
335 <v-flex xs12 sm12> 335 <v-flex xs12 sm12>
336 <v-form ref="form" v-model="valid" lazy-validation> 336 <v-form ref="form" v-model="valid" lazy-validation>
337 <v-container fluid> 337 <v-container fluid>
338 <v-layout> 338 <v-layout>
339 <v-flex xs12 class="text-xs-center text-sm-center text-md-center text-lg-center"> 339 <v-flex xs12 class="text-xs-center text-sm-center text-md-center text-lg-center">
340 <v-avatar size="80px"> 340 <v-avatar size="80px">
341 <img src="/static/icon/user.png" v-if="!imageUrl" /> 341 <img src="/static/icon/user.png" v-if="!imageUrl" />
342 </v-avatar> 342 </v-avatar>
343 <img 343 <img
344 :src="imageUrl" 344 :src="imageUrl"
345 height="150" 345 height="150"
346 v-if="imageUrl" 346 v-if="imageUrl"
347 style="border-radius:50%; width:150px" 347 style="border-radius:50%; width:150px"
348 /> 348 />
349 </v-flex> 349 </v-flex>
350 </v-layout> 350 </v-layout>
351 <v-layout> 351 <v-layout>
352 <v-flex xs12 sm12> 352 <v-flex xs12 sm12>
353 <v-layout> 353 <v-layout>
354 <v-flex xs4 class="pt-4 subheading"> 354 <v-flex xs4 class="pt-4 subheading">
355 <label class="right">Name:</label> 355 <label class="right">Name:</label>
356 </v-flex> 356 </v-flex>
357 <v-flex xs8 sm6 class="ml-3"> 357 <v-flex xs8 sm6 class="ml-3">
358 <v-text-field 358 <v-text-field
359 v-model="addExpense.name" 359 v-model="addExpense.name"
360 placeholder="fill your full Name" 360 placeholder="fill your full Name"
361 name="name" 361 name="name"
362 type="text" 362 type="text"
363 :rules="nameRules" 363 :rules="nameRules"
364 required 364 required
365 ></v-text-field> 365 ></v-text-field>
366 </v-flex> 366 </v-flex>
367 </v-layout> 367 </v-layout>
368 </v-flex> 368 </v-flex>
369 </v-layout> 369 </v-layout>
370 <v-layout> 370 <v-layout>
371 <v-flex xs12 sm12> 371 <v-flex xs12 sm12>
372 <v-layout> 372 <v-layout>
373 <v-flex xs4 class="pt-4 subheading"> 373 <v-flex xs4 class="pt-4 subheading">
374 <label class="right">Amount:</label> 374 <label class="right">Amount:</label>
375 </v-flex> 375 </v-flex>
376 <v-flex xs8 sm6 class="ml-3"> 376 <v-flex xs8 sm6 class="ml-3">
377 <v-text-field 377 <v-text-field
378 v-model="addExpense.amount" 378 v-model="addExpense.amount"
379 placeholder="fill your Amount" 379 placeholder="fill your Amount"
380 name="name" 380 name="name"
381 type="text" 381 type="text"
382 :rules="amountRules" 382 :rules="amountRules"
383 required 383 required
384 ></v-text-field> 384 ></v-text-field>
385 </v-flex> 385 </v-flex>
386 </v-layout> 386 </v-layout>
387 </v-flex> 387 </v-flex>
388 </v-layout> 388 </v-layout>
389 <v-layout> 389 <v-layout>
390 <v-flex xs12 sm12> 390 <v-flex xs12 sm12>
391 <v-layout> 391 <v-layout>
392 <v-flex xs4 class="pt-4 subheading"> 392 <v-flex xs4 class="pt-4 subheading">
393 <label class="right">Date</label> 393 <label class="right">Date</label>
394 </v-flex> 394 </v-flex>
395 <v-flex xs8 sm6 class="ml-3"> 395 <v-flex xs8 sm6 class="ml-3">
396 <v-menu 396 <v-menu
397 ref="menu1" 397 ref="menu1"
398 :close-on-content-click="false" 398 :close-on-content-click="false"
399 v-model="menu1" 399 v-model="menu1"
400 :nudge-right="40" 400 :nudge-right="40"
401 lazy 401 lazy
402 transition="scale-transition" 402 transition="scale-transition"
403 offset-y 403 offset-y
404 full-width 404 full-width
405 min-width="290px" 405 min-width="290px"
406 > 406 >
407 <v-text-field 407 <v-text-field
408 slot="activator" 408 slot="activator"
409 :rules="joinDateRules" 409 :rules="joinDateRules"
410 v-model="addExpense.date" 410 v-model="addExpense.date"
411 placeholder="Select date" 411 placeholder="Select date"
412 ></v-text-field> 412 ></v-text-field>
413 <v-date-picker 413 <v-date-picker
414 ref="picker" 414 ref="picker"
415 v-model="addExpense.date" 415 v-model="addExpense.date"
416 @input="$refs.menu1.save(addExpense.date)" 416 @input="$refs.menu1.save(addExpense.date)"
417 ></v-date-picker> 417 ></v-date-picker>
418 </v-menu> 418 </v-menu>
419 </v-flex> 419 </v-flex>
420 </v-layout> 420 </v-layout>
421 </v-flex> 421 </v-flex>
422 </v-layout> 422 </v-layout>
423 <v-layout> 423 <v-layout>
424 <v-flex xs12 sm12> 424 <v-flex xs12 sm12>
425 <v-layout> 425 <v-layout>
426 <v-flex xs4 class="pt-4 subheading"> 426 <v-flex xs4 class="pt-4 subheading">
427 <label class="right">File:</label> 427 <label class="right">File:</label>
428 </v-flex> 428 </v-flex>
429 <v-flex xs8 sm6 class="ml-3"> 429 <v-flex xs8 sm6 class="ml-3">
430 <v-text-field 430 <v-text-field
431 label="Select file" 431 label="Select file"
432 @click="pickFile" 432 @click="pickFile"
433 v-model="imageName" 433 v-model="imageName"
434 append-icon="attach_file" 434 append-icon="attach_file"
435 ></v-text-field> 435 ></v-text-field>
436 <input 436 <input
437 type="file" 437 type="file"
438 style="display:none" 438 style="display:none"
439 ref="image" 439 ref="image"
440 accept="image/*" 440 accept="image/*"
441 @change="onFilePicked" 441 @change="onFilePicked"
442 /> 442 />
443 </v-flex> 443 </v-flex>
444 </v-layout> 444 </v-layout>
445 </v-flex> 445 </v-flex>
446 </v-layout> 446 </v-layout>
447 <v-layout> 447 <v-layout>
448 <v-flex xs12 sm12> 448 <v-flex xs12 sm12>
449 <v-layout> 449 <v-layout>
450 <v-flex xs4 class="pt-4 subheading"> 450 <v-flex xs4 class="pt-4 subheading">
451 <label class="right">Note:</label> 451 <label class="right">Note:</label>
452 </v-flex> 452 </v-flex>
453 <v-flex xs8 sm6 class="ml-3"> 453 <v-flex xs8 sm6 class="ml-3">
454 <v-textarea 454 <v-textarea
455 name="input-7-1" 455 name="input-7-1"
456 v-model="addExpense.note" 456 v-model="addExpense.note"
457 placeholder="fill your Note" 457 placeholder="fill your Note"
458 type="text" 458 type="text"
459 multi-line 459 multi-line
460 required 460 required
461 ></v-textarea> 461 ></v-textarea>
462 </v-flex> 462 </v-flex>
463 </v-layout> 463 </v-layout>
464 </v-flex> 464 </v-flex>
465 </v-layout> 465 </v-layout>
466 <v-layout> 466 <v-layout>
467 <v-flex xs11> 467 <v-flex xs11>
468 <v-layout> 468 <v-layout>
469 <v-spacer></v-spacer> 469 <v-spacer></v-spacer>
470 <v-btn @click="clear" round dark class="clear-button">clear</v-btn> 470 <v-btn @click="clear" round dark class="clear-button">clear</v-btn>
471 <v-btn @click="submit" round dark :loading="loading" class="add-button">Add</v-btn> 471 <v-btn @click="submit" round dark :loading="loading" class="add-button">Add</v-btn>
472 </v-layout> 472 </v-layout>
473 </v-flex> 473 </v-flex>
474 </v-layout> 474 </v-layout>
475 </v-container> 475 </v-container>
476 </v-form> 476 </v-form>
477 </v-flex> 477 </v-flex>
478 </v-card> 478 </v-card>
479 </v-dialog> 479 </v-dialog>
480 <div class="loader" v-if="showLoader"> 480 <div class="loader" v-if="showLoader">
481 <v-progress-circular indeterminate color="white"></v-progress-circular> 481 <v-progress-circular indeterminate color="white"></v-progress-circular>
482 </div> 482 </div>
483 <v-snackbar 483 <v-snackbar
484 :timeout="timeout" 484 :timeout="timeout"
485 :top="y === 'top'" 485 :top="y === 'top'"
486 :right="x === 'right'" 486 :right="x === 'right'"
487 :vertical="mode === 'vertical'" 487 :vertical="mode === 'vertical'"
488 v-model="snackbar" 488 v-model="snackbar"
489 :color="color" 489 :color="color"
490 >{{ text }}</v-snackbar> 490 >{{ text }}</v-snackbar>
491 </v-container> 491 </v-container>
492 </template> 492 </template>
493 493
494 <script> 494 <script>
495 import http from "@/Services/http.js"; 495 import http from "@/Services/http.js";
496 import moment from "moment"; 496 import moment from "moment";
497 497
498 export default { 498 export default {
499 data: () => ({ 499 data: () => ({
500 component: "report-generate", 500 component: "report-generate",
501 snackbar: false, 501 snackbar: false,
502 y: "top", 502 y: "top",
503 x: "right", 503 x: "right",
504 mode: "", 504 mode: "",
505 timeout: 5000, 505 timeout: 5000,
506 text: "", 506 text: "",
507 color: "", 507 color: "",
508 showLoader: false, 508 showLoader: false,
509 loading: false, 509 loading: false,
510 date: null, 510 date: null,
511 search: "", 511 search: "",
512 menu: false, 512 menu: false,
513 menu1: false, 513 menu1: false,
514 menu2: false, 514 menu2: false,
515 menu3: false, 515 menu3: false,
516 editExpenseDialog: false, 516 editExpenseDialog: false,
517 viewExpenseDialog: false, 517 viewExpenseDialog: false,
518 valid: true, 518 valid: true,
519 show: true, 519 show: true,
520 addExpenseDialog: false, 520 addExpenseDialog: false,
521 showSearch: false, 521 showSearch: false,
522 pagination: { 522 pagination: {
523 rowsPerPage: 10, 523 rowsPerPage: 10,
524 }, 524 },
525 imageData: {}, 525 imageData: {},
526 token: "", 526 token: "",
527 imageName: "", 527 imageName: "",
528 imageUrl: "", 528 imageUrl: "",
529 imageFile: "", 529 imageFile: "",
530 nameRules: [(v) => !!v || " Full Name is required"], 530 nameRules: [(v) => !!v || " Full Name is required"],
531 amountRules: [(v) => !!v || "Amount is required"], 531 amountRules: [(v) => !!v || "Amount is required"],
532 noteRules: [(v) => !!v || "Note Name is required"], 532 noteRules: [(v) => !!v || "Note Name is required"],
533 joinDateRules: [(v) => !!v || "Date is required"], 533 joinDateRules: [(v) => !!v || "Date is required"],
534 errorMessages: "", 534 errorMessages: "",
535 headers: [ 535 headers: [
536 { 536 {
537 text: "No", 537 text: "No",
538 align: "center", 538 align: "center",
539 sortable: false, 539 sortable: false,
540 value: "No", 540 value: "No",
541 }, 541 },
542 { 542 {
543 text: "Profile Pic", 543 text: "Profile Pic",
544 value: "profilePicUrl", 544 value: "profilePicUrl",
545 sortable: false, 545 sortable: false,
546 align: "center", 546 align: "center",
547 }, 547 },
548 { text: "Name", value: "name", sortable: false, align: "center" }, 548 { text: "Name", value: "name", sortable: false, align: "center" },
549 { text: "Date", value: "date", sortable: false, align: "center" }, 549 { text: "Date", value: "date", sortable: false, align: "center" },
550 { text: "User", value: "user", sortable: false, align: "center" }, 550 { text: "User", value: "user", sortable: false, align: "center" },
551 { text: "Amount", value: "amount", sortable: false, align: "center" }, 551 { text: "Amount", value: "amount", sortable: false, align: "center" },
552 { text: "Note", value: "note", sortable: false, align: "center" }, 552 { text: "Note", value: "note", sortable: false, align: "center" },
553 { text: "Action", value: "", sortable: false, align: "center" }, 553 { text: "Action", value: "", sortable: false, align: "center" },
554 ], 554 ],
555 expenseList: [], 555 expenseList: [],
556 editedIndex: -1, 556 editedIndex: -1,
557 upload: "", 557 upload: "",
558 editedItem: { 558 editedItem: {
559 role: "TEACHER", 559 role: "TEACHER",
560 name: "", 560 name: "",
561 email: "", 561 email: "",
562 date: null, 562 date: null,
563 city: "", 563 city: "",
564 pincode: "", 564 pincode: "",
565 country: "", 565 country: "",
566 permanentAddress: "", 566 permanentAddress: "",
567 presentAddress: "", 567 presentAddress: "",
568 mobileNo: "", 568 mobileNo: "",
569 state: "", 569 state: "",
570 joinDate: null, 570 joinDate: null,
571 }, 571 },
572 addExpense: {}, 572 addExpense: {},
573 }), 573 }),
574 watch: { 574 watch: {
575 menu(val) { 575 menu(val) {
576 val && this.$nextTick(() => (this.$refs.picker.activePicker = "YEAR")); 576 val && this.$nextTick(() => (this.$refs.picker.activePicker = "YEAR"));
577 }, 577 },
578 menu1(val) { 578 menu1(val) {
579 val && this.$nextTick(() => (this.$refs.picker.activePicker = "YEAR")); 579 val && this.$nextTick(() => (this.$refs.picker.activePicker = "YEAR"));
580 }, 580 },
581 addExpenseDialog: function (val) { 581 addExpenseDialog: function (val) {
582 if (!val) { 582 if (!val) {
583 this.addExpense = []; 583 this.addExpense = [];
584 this.menu1 = false; 584 this.menu1 = false;
585 this.imageName = ""; 585 this.imageName = "";
586 this.imageFile = ""; 586 this.imageFile = "";
587 this.imageUrl = ""; 587 this.imageUrl = "";
588 } 588 }
589 }, 589 },
590 }, 590 },
591 methods: { 591 methods: {
592 save(date) { 592 save(date) {
593 this.$refs.menu.save(date); 593 this.$refs.menu.save(date);
594 }, 594 },
595 save(date) { 595 save(date) {
596 this.$refs.menu1.save(date); 596 this.$refs.menu1.save(date);
597 }, 597 },
598 pickFile() { 598 pickFile() {
599 this.$refs.image.click(); 599 this.$refs.image.click();
600 }, 600 },
601 dates: function (date) { 601 dates: function (date) {
602 return moment(date).format("MMMM DD, YYYY"); 602 return moment(date).format("MMMM DD, YYYY");
603 }, 603 },
604 onFilePicked(e) { 604 onFilePicked(e) {
605 // console.log(e) 605 // console.log(e)
606 const files = e.target.files; 606 const files = e.target.files;
607 this.upload = e.target.files[0]; 607 this.upload = e.target.files[0];
608 // console.log("imageData-upload========>", this.upload); 608 // console.log("imageData-upload========>", this.upload);
609 if (files[0] !== undefined) { 609 if (files[0] !== undefined) {
610 this.imageName = files[0].name; 610 this.imageName = files[0].name;
611 if (this.imageName.lastIndexOf(".") <= 0) { 611 if (this.imageName.lastIndexOf(".") <= 0) {
612 return; 612 return;
613 } 613 }
614 const fr = new FileReader(); 614 const fr = new FileReader();
615 fr.readAsDataURL(files[0]); 615 fr.readAsDataURL(files[0]);
616 fr.addEventListener("load", () => { 616 fr.addEventListener("load", () => {
617 this.imageUrl = fr.result; 617 this.imageUrl = fr.result;
618 this.imageFile = files[0]; // this is an image file that can be sent to server... 618 this.imageFile = files[0]; // this is an image file that can be sent to server...
619 // this.imageData.imageUrl = URL.createObjectURL(this.imageFile); 619 // this.imageData.imageUrl = URL.createObjectURL(this.imageFile);
620 // console.log("upload=======>", this.imageData.imageUrl); 620 // console.log("upload=======>", this.imageData.imageUrl);
621 // console.log("imageFile", this.imageUrl); 621 // console.log("imageFile", this.imageUrl);
622 }); 622 });
623 } else { 623 } else {
624 this.imageName = ""; 624 this.imageName = "";
625 this.imageFile = ""; 625 this.imageFile = "";
626 this.imageUrl = ""; 626 this.imageUrl = "";
627 } 627 }
628 }, 628 },
629 getExpenseList() { 629 getExpenseList() {
630 http() 630 http()
631 .get("/getExpensesList", { 631 .get("/getExpensesList", {
632 params: { schoolId: this.$store.state.schoolId }, 632 params: { schoolId: this.$store.state.schoolId },
633 headers: { Authorization: "Bearer " + this.token }, 633 headers: { Authorization: "Bearer " + this.token },
634 }) 634 })
635 .then((response) => { 635 .then((response) => {
636 this.expenseList = response.data.data; 636 this.expenseList = response.data.data;
637 this.showLoader = false; 637 this.showLoader = false;
638 // console.log("getTeacherList=====>",this.expenseList) 638 // console.log("getTeacherList=====>",this.expenseList)
639 }) 639 })
640 .catch((error) => { 640 .catch((error) => {
641 this.showLoader = false; 641 this.showLoader = false;
642 // if (error.response.status === 401) { 642 // if (error.response.status === 401) {
643 // this.$router.replace({ path: "/" }); 643 // this.$router.replace({ path: "/" });
644 // this.$store.dispatch("setToken", null); 644 // this.$store.dispatch("setToken", null);
645 // this.$store.dispatch("Id", null); 645 // this.$store.dispatch("Id", null);
646 // } 646 // }
647 }); 647 });
648 }, 648 },
649 editItem(item) { 649 editItem(item) {
650 this.editedIndex = this.expenseList.indexOf(item); 650 this.editedIndex = this.expenseList.indexOf(item);
651 this.editedItem = Object.assign({}, item); 651 this.editedItem = Object.assign({}, item);
652 this.editedItem.date = 652 this.editedItem.date =
653 this.editedItem.date != undefined 653 this.editedItem.date != undefined
654 ? (this.editedItem.date = this.editedItem.date.substring(0, 10)) 654 ? (this.editedItem.date = this.editedItem.date.substring(0, 10))
655 : (this.editedItem.date = ""); 655 : (this.editedItem.date = "");
656 656
657 this.editExpenseDialog = true; 657 this.editExpenseDialog = true;
658 }, 658 },
659 profile(item) { 659 profile(item) {
660 this.editedIndex = this.expenseList.indexOf(item); 660 this.editedIndex = this.expenseList.indexOf(item);
661 this.editedItem = Object.assign({}, item); 661 this.editedItem = Object.assign({}, item);
662 this.viewExpenseDialog = true; 662 this.viewExpenseDialog = true;
663 }, 663 },
664 deleteItem(item) { 664 deleteItem(item) {
665 let deleteExpense = { 665 let deleteExpense = {
666 expenseId: item._id, 666 expenseId: item._id,
667 }; 667 };
668 // console.log("deleteUers",deleteTeachers) 668 // console.log("deleteUers",deleteTeachers)
669 http() 669 http()
670 .delete( 670 .delete(
671 "/deleteExpense", 671 "/deleteExpense",
672 confirm("Are you sure you want to delete this?") && { 672 confirm("Are you sure you want to delete this?") && {
673 params: deleteExpense, 673 params: deleteExpense,
674 } 674 }
675 ) 675 )
676 .then((response) => { 676 .then((response) => {
677 // console.log("deleteUers",deleteTeachers) 677 // console.log("deleteUers",deleteTeachers)
678 this.snackbar = true; 678 this.snackbar = true;
679 this.text = response.data.message; 679 this.text = response.data.message;
680 this.color = "green"; 680 this.color = "green";
681 this.getExpenseList(); 681 this.getExpenseList();
682 }) 682 })
683 .catch((error) => { 683 .catch((error) => {
684 this.snackbar = true; 684 this.snackbar = true;
685 this.text = error.response.data.message; 685 this.text = error.response.data.message;
686 this.color = "error"; 686 this.color = "error";
687 }); 687 });
688 }, 688 },
689 close() { 689 close() {
690 this.editExpenseDialog = false; 690 this.editExpenseDialog = false;
691 }, 691 },
692 closeAddExpenseModel() { 692 closeAddExpenseModel() {
693 this.addExpenseDialog = false; 693 this.addExpenseDialog = false;
694 this.addExpense = []; 694 this.addExpense = [];
695 this.menu1 = false; 695 this.menu1 = false;
696 this.imageName = ""; 696 this.imageName = "";
697 this.imageFile = ""; 697 this.imageFile = "";
698 this.imageUrl = ""; 698 this.imageUrl = "";
699 }, 699 },
700 submit() { 700 submit() {
701 if (this.$refs.form.validate()) { 701 if (this.$refs.form.validate()) {
702 if (this.imageUrl) { 702 if (this.imageUrl) {
703 var str = this.imageUrl; 703 var str = this.imageUrl;
704 const [baseUrl, imageUrl] = str.split(/,/); 704 const [baseUrl, imageUrl] = str.split(/,/);
705 this.addExpense.upload = imageUrl; 705 this.addExpense.upload = imageUrl;
706 } 706 }
707 this.loading = true; 707 this.loading = true;
708 // this.addExpense = this.$store.state.schoolId; 708 // this.addExpense = this.$store.state.schoolId;
709 http() 709 http()
710 .post("/createExpense", this.addExpense) 710 .post("/createExpense", this.addExpense)
711 .then((response) => { 711 .then((response) => {
712 this.getExpenseList(); 712 this.getExpenseList();
713 this.snackbar = true; 713 this.snackbar = true;
714 this.text = response.data.message; 714 this.text = response.data.message;
715 this.color = "green"; 715 this.color = "green";
716 this.clear(); 716 this.clear();
717 this.imageUrl = ""; 717 this.imageUrl = "";
718 this.loading = false; 718 this.loading = false;
719 this.addExpenseDialog = false; 719 this.addExpenseDialog = false;
720 }) 720 })
721 .catch((error) => { 721 .catch((error) => {
722 // console.log(error); 722 // console.log(error);
723 this.snackbar = true; 723 this.snackbar = true;
724 this.color = "error"; 724 this.color = "error";
725 this.text = error.response.data.message; 725 this.text = error.response.data.message;
726 this.loading = false; 726 this.loading = false;
727 }); 727 });
728 } 728 }
729 }, 729 },
730 clear() { 730 clear() {
731 this.$refs.form.reset(); 731 this.$refs.form.reset();
732 }, 732 },
733 save() { 733 save() {
734 this.loading = true; 734 this.loading = true;
735 this.editedItem.expenseId = this.editedItem._id; 735 this.editedItem.expenseId = this.editedItem._id;
736 if (this.imageUrl) { 736 if (this.imageUrl) {
737 var str = this.imageUrl; 737 var str = this.imageUrl;
738 const [baseUrl, imageUrl] = str.split(/,/); 738 const [baseUrl, imageUrl] = str.split(/,/);
739 this.editedItem.upload = imageUrl; 739 this.editedItem.upload = imageUrl;
740 } 740 }
741 http() 741 http()
742 .put("/updateExpense", this.editedItem) 742 .put("/updateExpense", this.editedItem)
743 .then((response) => { 743 .then((response) => {
744 this.snackbar = true; 744 this.snackbar = true;
745 this.text = response.data.message; 745 this.text = response.data.message;
746 this.color = "green"; 746 this.color = "green";
747 this.loading = false; 747 this.loading = false;
748 this.getExpenseList(); 748 this.getExpenseList();
749 this.close(); 749 this.close();
750 }) 750 })
751 .catch((error) => { 751 .catch((error) => {
752 this.snackbar = true; 752 this.snackbar = true;
753 this.text = error.response.data.message; 753 this.text = error.response.data.message;
754 this.color = "error"; 754 this.color = "error";
755 }); 755 });
756 }, 756 },
757 displaySearch() { 757 displaySearch() {
758 (this.show = false), (this.showSearch = true); 758 (this.show = false), (this.showSearch = true);
759 }, 759 },
760 closeSearch() { 760 closeSearch() {
761 this.showSearch = false; 761 this.showSearch = false;
762 this.show = true; 762 this.show = true;
763 this.search = ""; 763 this.search = "";
764 }, 764 },
765 }, 765 },
766 mounted() { 766 mounted() {
767 this.token = this.$store.state.token; 767 this.token = this.$store.state.token;
768 this.getExpenseList(); 768 this.getExpenseList();
769 }, 769 },
770 }; 770 };
771 </script> 771 </script>
src/pages/Account/globalPayment.vue
Diff comments   View file @8b7976c
1 <template> 1 <template>
2 <v-container fluid class="body-color"> 2 <v-container fluid class="body-color">
3 <!-- ****** EXISTING GLOBAL PAYMENT TABLE ****** --> 3 <!-- ****** EXISTING GLOBAL PAYMENT TABLE ****** -->
4 <v-form ref="form" v-model="valid" lazy-validation> 4 <v-form ref="form" v-model="valid" lazy-validation>
5 <v-container fluid> 5 <v-container fluid>
6 <v-flex xs12 sm12 lg12> 6 <v-flex xs12 sm12 lg12>
7 <v-layout wrap> 7 <v-layout wrap>
8 <v-flex xs12 sm12 lg10> 8 <v-flex xs12 sm12 lg10>
9 <v-layout wrap> 9 <v-layout wrap>
10 <v-flex xs12 sm12 lg4> 10 <v-flex xs12 sm12 lg4>
11 <v-flex xs12 sm4 lg4 class="subheading"> 11 <v-flex xs12 sm4 lg4 class="subheading">
12 <label class="mt-4">Class:</label> 12 <label class="mt-4">Class:</label>
13 </v-flex> 13 </v-flex>
14 <v-flex xs12 sm12 lg10> 14 <v-flex xs12 sm12 lg10>
15 <v-select 15 <v-select
16 :items="addclass" 16 :items="addclass"
17 label="Select Class" 17 label="Select Class"
18 v-model="selectStudents.selectClassId" 18 v-model="selectStudents.selectClassId"
19 item-text="classNum" 19 item-text="classNum"
20 item-value="_id" 20 item-value="_id"
21 name="Select Class" 21 name="Select Class"
22 :rules="classRules" 22 :rules="classRules"
23 @change="getSection()" 23 @change="getSection()"
24 required 24 required
25 ></v-select> 25 ></v-select>
26 </v-flex> 26 </v-flex>
27 </v-flex> 27 </v-flex>
28 <v-flex xs12 sm12 lg4> 28 <v-flex xs12 sm12 lg4>
29 <v-flex xs12 sm4 lg4 class="subheading"> 29 <v-flex xs12 sm4 lg4 class="subheading">
30 <label class="mt-4">Section:</label> 30 <label class="mt-4">Section:</label>
31 </v-flex> 31 </v-flex>
32 <v-flex xs12 sm12 lg10 class> 32 <v-flex xs12 sm12 lg10 class>
33 <v-select 33 <v-select
34 :items="addSection" 34 :items="addSection"
35 label="Select Section" 35 label="Select Section"
36 v-model="selectStudents.selectSection" 36 v-model="selectStudents.selectSection"
37 item-text="name" 37 item-text="name"
38 item-value="_id" 38 item-value="_id"
39 name="Select Section" 39 name="Select Section"
40 :rules="sectionRules" 40 :rules="sectionRules"
41 @change="getStudents()" 41 @change="getStudents()"
42 required 42 required
43 ></v-select> 43 ></v-select>
44 </v-flex> 44 </v-flex>
45 </v-flex> 45 </v-flex>
46 <v-flex xs12 sm12 lg4> 46 <v-flex xs12 sm12 lg4>
47 <v-flex xs12 sm4 lg4 class="subheading"> 47 <v-flex xs12 sm4 lg4 class="subheading">
48 <label class="mt-4">Student:</label> 48 <label class="mt-4">Student:</label>
49 </v-flex> 49 </v-flex>
50 <v-flex xs12 sm12 lg10 class> 50 <v-flex xs12 sm12 lg10 class>
51 <v-select 51 <v-select
52 :items="studentData" 52 :items="studentData"
53 label="Select Student" 53 label="Select Student"
54 v-model="selectStudents.selectId" 54 v-model="selectStudents.selectId"
55 item-text="name" 55 item-text="name"
56 item-value="_id" 56 item-value="_id"
57 :rules="studentRules" 57 :rules="studentRules"
58 required 58 required
59 ></v-select> 59 ></v-select>
60 </v-flex> 60 </v-flex>
61 </v-flex> 61 </v-flex>
62 </v-layout> 62 </v-layout>
63 </v-flex> 63 </v-flex>
64 <v-flex xs12 sm12 lg2> 64 <v-flex xs12 sm12 lg2>
65 <v-flex xs12 sm12 lg12> 65 <v-flex xs12 sm12 lg12>
66 <v-btn 66 <v-btn
67 @click="getInvoicesData()" 67 @click="getInvoicesData()"
68 round 68 round
69 dark 69 dark
70 :loading="loading" 70 :loading="loading"
71 class="right mt-4 open-dialog-button" 71 class="right mt-4 open-dialog-button"
72 >Search</v-btn> 72 >Search</v-btn>
73 </v-flex> 73 </v-flex>
74 </v-flex> 74 </v-flex>
75 </v-layout> 75 </v-layout>
76 </v-flex> 76 </v-flex>
77 </v-container> 77 </v-container>
78 </v-form> 78 </v-form>
79 <v-container fluid grid-list-md> 79 <v-container fluid grid-list-md>
80 <v-flex xs12> 80 <v-flex xs12>
81 <v-layout wrap> 81 <v-layout wrap>
82 <v-flex xs12 sm12 md4> 82 <v-flex xs12 sm12 md4>
83 <v-card 83 <v-card
84 flat 84 flat
85 class="pa-3" 85 class="pa-3"
86 v-for="(invoiceData,i) in studentInvoiceData" 86 v-for="(invoiceData,i) in studentInvoiceData"
87 :key="i" 87 :key="i"
88 v-if="i === 0" 88 v-if="i === 0"
89 > 89 >
90 <v-layout> 90 <v-layout>
91 <v-flex xs12> 91 <v-flex xs12>
92 <v-avatar 92 <v-avatar
93 size="80px" 93 size="80px"
94 style="margin: auto;display:block;margin-bottom:10px !important" 94 style="margin: auto;display:block;margin-bottom:10px !important"
95 > 95 >
96 <img src="/static/icon/user.png" v-if="!invoiceData.studentId.profilePicUrl" /> 96 <img src="/static/icon/user.png" v-if="!invoiceData.studentId.profilePicUrl" />
97 <img 97 <img
98 :src="invoiceData.studentId.profilePicUrl"
99 v-else-if="invoiceData.studentId.profilePicUrl"
100 />
98 :src="invoiceData.studentId.profilePicUrl" 101 </v-avatar>
99 v-else-if="invoiceData.studentId.profilePicUrl" 102 </v-flex>
100 /> 103 </v-layout>
101 </v-avatar> 104 <v-layout class="studentProfile">
102 </v-flex> 105 <v-flex xs4 sm3 md3>
103 </v-layout> 106 <h4>
104 <v-layout class="studentProfile"> 107 <b>Name</b>
105 <v-flex xs4 sm3 md3> 108 </h4>
106 <h4> 109 </v-flex>
107 <b>Name</b> 110 <v-flex sm9 xs8 md9>
108 </h4> 111 <h4>: {{ invoiceData.studentId.name }}</h4>
109 </v-flex> 112 </v-flex>
110 <v-flex sm9 xs8 md9> 113 </v-layout>
111 <h4>: {{ invoiceData.studentId.name }}</h4> 114 <v-layout class="studentProfile">
112 </v-flex> 115 <v-flex xs4 sm3 md3>
113 </v-layout> 116 <h4>
114 <v-layout class="studentProfile"> 117 <b>Class</b>
115 <v-flex xs4 sm3 md3> 118 </h4>
116 <h4> 119 </v-flex>
117 <b>Class</b> 120 <v-flex sm9 xs8 md9>
118 </h4> 121 <h4>: {{ invoiceData.classId.classNum }}</h4>
119 </v-flex> 122 </v-flex>
120 <v-flex sm9 xs8 md9> 123 </v-layout>
121 <h4>: {{ invoiceData.classId.classNum }}</h4> 124 <v-layout class="studentProfile">
122 </v-flex> 125 <v-flex xs4 sm3 md3>
123 </v-layout> 126 <h4>
124 <v-layout class="studentProfile"> 127 <b>Roll No</b>
125 <v-flex xs4 sm3 md3> 128 </h4>
126 <h4> 129 </v-flex>
127 <b>Roll No</b> 130 <v-flex sm9 xs8 md9>
128 </h4> 131 <h4>: {{ invoiceData.studentId.rollNo }}</h4>
129 </v-flex> 132 </v-flex>
130 <v-flex sm9 xs8 md9> 133 </v-layout>
131 <h4>: {{ invoiceData.studentId.rollNo }}</h4> 134 </v-card>
132 </v-flex> 135 </v-flex>
133 </v-layout> 136 <v-flex xs12 sm12 md8 v-show="showInvoiceTable">
134 </v-card> 137 <v-card class="transparent">
135 </v-flex> 138 <v-data-table
136 <v-flex xs12 sm12 md8 v-show="showInvoiceTable"> 139 :headers="headers"
137 <v-card class="transparent"> 140 :items="studentInvoiceData"
138 <v-data-table 141 :search="search"
139 :headers="headers" 142 hide-actions
140 :items="studentInvoiceData" 143 >
141 :search="search" 144 <template slot="items" slot-scope="props">
142 hide-actions 145 <tr class="tr">
143 > 146 <td class="td td-row text-xs-center">{{ props.item.invoiceNumber }}</td>
144 <template slot="items" slot-scope="props"> 147 <td class="td td-row text-xs-center">{{ props.item.totalAmount }}</td>
145 <tr class="tr"> 148 <td class="td td-row text-xs-center">{{ props.item.totalDiscount }}</td>
146 <td class="td td-row text-xs-center">{{ props.item.invoiceNumber }}</td> 149 <td class="td td-row text-xs-center">{{ props.item.totalSubTotal }}</td>
147 <td class="td td-row text-xs-center">{{ props.item.totalAmount }}</td> 150 <td class="td td-row text-xs-center">{{ props.item.paymentStatus}}</td>
148 <td class="td td-row text-xs-center">{{ props.item.totalDiscount }}</td> 151 <td class="td td-row text-xs-center">{{ dates(props.item.date) }}</td>
149 <td class="td td-row text-xs-center">{{ props.item.totalSubTotal }}</td> 152 <td class="text-xs-center td td-row">
150 <td class="td td-row text-xs-center">{{ props.item.paymentStatus}}</td> 153 <router-link
151 <td class="td td-row text-xs-center">{{ dates(props.item.date) }}</td> 154 :to="{ name:'View Invoice',params: { viewInvoiceId:props.item._id } }"
152 <td class="text-xs-center td td-row"> 155 >
153 <router-link 156 <v-tooltip top>
154 :to="{ name:'View Invoice',params: { viewInvoiceId:props.item._id } }" 157 <img
155 > 158 slot="activator"
156 <v-tooltip top> 159 style="cursor:pointer; width:25px; height:18px; "
157 <img 160 src="/static/icon/eye1.png"
158 slot="activator" 161 />
159 style="cursor:pointer; width:25px; height:18px; " 162 <span>View</span>
160 src="/static/icon/eye1.png" 163 </v-tooltip>
161 /> 164 </router-link>
162 <span>View</span> 165 </td>
163 </v-tooltip> 166 </tr>
164 </router-link> 167 </template>
165 </td> 168 <v-alert
166 </tr> 169 slot="no-results"
167 </template> 170 :value="true"
168 <v-alert 171 color="error"
169 slot="no-results" 172 icon="warning"
170 :value="true" 173 >Your search for "{{ search }}" found no results.</v-alert>
171 color="error" 174 </v-data-table>
172 icon="warning" 175 </v-card>
173 >Your search for "{{ search }}" found no results.</v-alert> 176 </v-flex>
174 </v-data-table> 177 </v-layout>
175 </v-card> 178 </v-flex>
176 </v-flex> 179
177 </v-layout> 180 <v-flex xs12>
178 </v-flex> 181 <v-layout wrap>
179 182 <v-flex xs12 sm12 md12 v-show="showInvoiceTable">
180 <v-flex xs12> 183 <v-card class="transparent">
181 <v-layout wrap> 184 <v-data-table
182 <v-flex xs12 sm12 md12 v-show="showInvoiceTable"> 185 :headers="header"
183 <v-card class="transparent"> 186 :items="studentInvoiceData"
184 <v-data-table 187 :search="search"
185 :headers="header" 188 hide-actions
186 :items="studentInvoiceData" 189 >
187 :search="search" 190 <template slot="items" slot-scope="props">
188 hide-actions 191 <tr class="tr" v-for="feetype in props.item.feeType">
189 > 192 <td class="td td-row">{{ props.index + 1}}</td>
190 <template slot="items" slot-scope="props"> 193 <td class="td td-row text-xs-center">{{ feetype.feeTypeName}}</td>
191 <tr class="tr" v-for="feetype in props.item.feeType"> 194 <td class="td td-row text-xs-center">{{ feetype.amount }}</td>
192 <td class="td td-row">{{ props.index + 1}}</td>
193 <td class="td td-row text-xs-center">{{ feetype.feeTypeName}}</td>
194 <td class="td td-row text-xs-center">{{ feetype.amount }}</td>
195 <td
196 class="td td-row text-xs-center" 195 <td
197 >{{ props.item.totalSubTotal - props.item.totalPaidAmount }}</td> 196 class="td td-row text-xs-center"
198 <td class="td td-row text-xs-center">{{ feetype.paidAmount }}</td> 197 >{{ props.item.totalSubTotal - props.item.totalPaidAmount }}</td>
199 <td class="td td-row text-xs-center"> 198 <td class="td td-row text-xs-center">{{ feetype.paidAmount }}</td>
200 <input type="text" maxlength="20" /> 199 <td class="td td-row text-xs-center">
201 </td> 200 <input type="text" maxlength="20" />
202 </tr> 201 </td>
203 </template>
204 <v-alert
205 slot="no-results" 202 </tr>
206 :value="true" 203 </template>
207 color="error" 204 <v-alert
208 icon="warning" 205 slot="no-results"
209 >Your search for "{{ search }}" found no results.</v-alert> 206 :value="true"
210 </v-data-table> 207 color="error"
211 </v-card> 208 icon="warning"
212 </v-flex> 209 >Your search for "{{ search }}" found no results.</v-alert>
213 </v-layout> 210 </v-data-table>
214 </v-flex> 211 </v-card>
215 </v-container> 212 </v-flex>
216 <div class="loader" v-if="showLoader"> 213 </v-layout>
217 <v-progress-circular indeterminate color="white"></v-progress-circular> 214 </v-flex>
218 </div> 215 </v-container>
219 </v-container> 216 <div class="loader" v-if="showLoader">
220 </template> 217 <v-progress-circular indeterminate color="white"></v-progress-circular>
221 218 </div>
222 <script> 219 </v-container>
223 import http from "@/Services/http.js"; 220 </template>
224 import moment from "moment"; 221
225 222 <script>
226 export default { 223 import http from "@/Services/http.js";
227 data: () => ({ 224 import moment from "moment";
228 snackbar: false, 225
229 showInvoiceTable: false, 226 export default {
230 y: "top", 227 data: () => ({
231 x: "right", 228 snackbar: false,
232 mode: "", 229 showInvoiceTable: false,
233 timeout: 3000, 230 y: "top",
234 text: "", 231 x: "right",
235 showLoader: false, 232 mode: "",
236 loading: false, 233 timeout: 3000,
237 search: "", 234 text: "",
238 valid: true, 235 showLoader: false,
239 addclass: [], 236 loading: false,
240 // index: '', 237 search: "",
241 feeType: { 238 valid: true,
242 amount: "", 239 addclass: [],
243 discount: "", 240 // index: '',
244 totalPaidAmount: "", 241 feeType: {
245 subTotal: "", 242 amount: "",
246 feeTypeName: "", 243 discount: "",
247 userData: {}, 244 totalPaidAmount: "",
248 }, 245 subTotal: "",
249 feeTypeData: [], 246 feeTypeName: "",
250 selectStudents: {}, 247 userData: {},
251 addSection: [], 248 },
252 classRules: [(v) => !!v || " Class Name is required"], 249 feeTypeData: [],
253 sectionRules: [(v) => !!v || " Section Name is required"], 250 selectStudents: {},
254 studentRules: [(v) => !!v || "Student Name is required"], 251 addSection: [],
255 headers: [ 252 classRules: [(v) => !!v || " Class Name is required"],
256 { 253 sectionRules: [(v) => !!v || " Section Name is required"],
257 text: "Invoice Number", 254 studentRules: [(v) => !!v || "Student Name is required"],
258 align: "center", 255 headers: [
259 sortable: false, 256 {
260 value: "invoiceNumber", 257 text: "Invoice Number",
261 }, 258 align: "center",
262 { 259 sortable: false,
263 text: "Total Pay", 260 value: "invoiceNumber",
264 value: "totalAmount", 261 },
265 sortable: false, 262 {
266 align: "center", 263 text: "Total Pay",
267 }, 264 value: "totalAmount",
268 { 265 sortable: false,
269 text: "Weaver", 266 align: "center",
270 value: "totalDiscount", 267 },
271 sortable: false, 268 {
272 align: "center", 269 text: "Weaver",
273 }, 270 value: "totalDiscount",
274 { 271 sortable: false,
275 text: " Total Collection", 272 align: "center",
276 value: "totalSubTotal", 273 },
277 sortable: false, 274 {
278 align: "center", 275 text: " Total Collection",
279 }, 276 value: "totalSubTotal",
280 { 277 sortable: false,
281 text: "Clearance", 278 align: "center",
282 value: "paymentStatus", 279 },
283 sortable: false, 280 {
284 align: "center", 281 text: "Clearance",
285 }, 282 value: "paymentStatus",
286 { text: "Payment Date", value: "date", sortable: false, align: "center" }, 283 sortable: false,
287 { text: "Action", value: "", sortable: false, align: "center" }, 284 align: "center",
288 ], 285 },
289 286 { text: "Payment Date", value: "date", sortable: false, align: "center" },
290 header: [ 287 { text: "Action", value: "", sortable: false, align: "center" },
291 { 288 ],
292 text: "#", 289
293 // align: "center", 290 header: [
294 sortable: false, 291 {
295 }, 292 text: "#",
296 { 293 // align: "center",
297 text: "Fees Name", 294 sortable: false,
298 align: "center", 295 },
299 sortable: false, 296 {
300 value: "feeTypeName", 297 text: "Fees Name",
301 }, 298 align: "center",
302 { 299 sortable: false,
303 text: "Fees Amount", 300 value: "feeTypeName",
304 align: "center", 301 },
305 sortable: false, 302 {
306 value: "amount", 303 text: "Fees Amount",
307 }, 304 align: "center",
308 { 305 sortable: false,
309 text: "Due", 306 value: "amount",
310 align: "center", 307 },
311 sortable: false, 308 {
312 }, 309 text: "Due",
313 { 310 align: "center",
314 text: "Paid Amount", 311 sortable: false,
315 align: "center", 312 },
316 sortable: false, 313 {
317 value: "paidAmount", 314 text: "Paid Amount",
318 }, 315 align: "center",
319 { 316 sortable: false,
320 text: "Weaver", 317 value: "paidAmount",
321 align: "center", 318 },
322 sortable: false, 319 {
323 value: "paidAmount", 320 text: "Weaver",
324 }, 321 align: "center",
325 ], 322 sortable: false,
326 studentData: [], 323 value: "paidAmount",
327 studentInvoiceData: [], 324 },
328 }), 325 ],
329 methods: { 326 studentData: [],
330 dates: function (date) { 327 studentInvoiceData: [],
331 return moment(date).format("MMMM DD, YYYY"); 328 }),
332 }, 329 methods: {
333 getSection() { 330 dates: function (date) {
334 var token = this.$store.state.token; 331 return moment(date).format("MMMM DD, YYYY");
335 this.showLoader = true; 332 },
336 http() 333 getSection() {
337 .get( 334 var token = this.$store.state.token;
338 "/getSectionsList", 335 this.showLoader = true;
339 { 336 http()
340 params: { 337 .get(
341 classId: this.selectStudents.selectClassId, 338 "/getSectionsList",
342 schoolId: this.$store.state.schoolId, 339 {
343 }, 340 params: {
344 }, 341 classId: this.selectStudents.selectClassId,
345 { 342 schoolId: this.$store.state.schoolId,
346 headers: { Authorization: "Bearer " + token }, 343 },
347 } 344 },
348 ) 345 {
349 .then((response) => { 346 headers: { Authorization: "Bearer " + token },
350 this.addSection = response.data.data; 347 }
351 this.showLoader = false; 348 )
352 // console.log("getSectionsList=====>", this.addSection); 349 .then((response) => {
353 }) 350 this.addSection = response.data.data;
354 .catch((error) => { 351 this.showLoader = false;
355 this.showLoader = false; 352 // console.log("getSectionsList=====>", this.addSection);
356 // console.log("err====>", err); 353 })
357 // this.$router.replace({ path: '/' }); 354 .catch((error) => {
358 }); 355 this.showLoader = false;
359 }, 356 // console.log("err====>", err);
360 getStudents() { 357 // this.$router.replace({ path: '/' });
361 this.showLoader = true; 358 });
362 http() 359 },
363 .get("/getStudentWithClass", { 360 getStudents() {
364 params: { 361 this.showLoader = true;
365 classId: this.selectStudents.selectClassId, 362 http()
366 sectionId: this.selectStudents.selectSection, 363 .get("/getStudentWithClass", {
367 schoolId: this.$store.state.schoolId, 364 params: {
368 }, 365 classId: this.selectStudents.selectClassId,
369 }) 366 sectionId: this.selectStudents.selectSection,
370 .then((response) => { 367 schoolId: this.$store.state.schoolId,
371 this.studentData = response.data.data; 368 },
372 this.showLoader = false; 369 })
373 }) 370 .then((response) => {
374 .catch((err) => { 371 this.studentData = response.data.data;
375 // console.log("err====>", err); 372 this.showLoader = false;
376 this.showLoader = false; 373 })
377 }); 374 .catch((err) => {
378 }, 375 // console.log("err====>", err);
379 getInvoicesData() { 376 this.showLoader = false;
380 this.showLoader = true; 377 });
381 this.showInvoiceTable = true; 378 },
382 http() 379 getInvoicesData() {
383 .get("/getInvoicesList", { 380 this.showLoader = true;
384 params: { 381 this.showInvoiceTable = true;
385 classId: this.selectStudents.selectClassId, 382 http()
386 studentId: this.selectStudents.selectId, 383 .get("/getInvoicesList", {
387 schoolId: this.$store.state.schoolId, 384 params: {
388 }, 385 classId: this.selectStudents.selectClassId,
389 }) 386 studentId: this.selectStudents.selectId,
390 .then((response) => { 387 schoolId: this.$store.state.schoolId,
391 this.studentInvoiceData = response.data.data; 388 },
392 // console.log("this.studentInvoiceData", this.studentInvoiceData); 389 })
393 this.showLoader = false; 390 .then((response) => {
394 }) 391 this.studentInvoiceData = response.data.data;
395 .catch((err) => { 392 // console.log("this.studentInvoiceData", this.studentInvoiceData);
396 // console.log("err====>", err); 393 this.showLoader = false;
397 this.showLoader = false; 394 })
398 }); 395 .catch((err) => {
399 }, 396 // console.log("err====>", err);
400 getAmmountDetails(feeTyp) { 397 this.showLoader = false;
401 let feeType = { 398 });
402 subTotal: "", 399 },
403 subParticularTotal: "", 400 getAmmountDetails(feeTyp) {
404 paidAmount: "", 401 let feeType = {
405 }; 402 subTotal: "",
406 // *********** SUBTOTAL *********** 403 subParticularTotal: "",
407 feeType.subTotal = 404 paidAmount: "",
408 Number(feeType.subTotal) + Number(this.feeTypeData[i].subTotal); 405 };
409 this.feeType.subTotal = feeType.subTotal.toFixed(2); 406 // *********** SUBTOTAL ***********
410 // *********** PAID-AMOUNT *********** 407 feeType.subTotal =
411 feeType.paidAmount = 408 Number(feeType.subTotal) + Number(this.feeTypeData[i].subTotal);
412 Number(feeType.paidAmount) + Number(this.feeTypeData[i].paidAmount); 409 this.feeType.subTotal = feeType.subTotal.toFixed(2);
413 this.feeType.paidAmount = feeType.paidAmount.toFixed(2); 410 // *********** PAID-AMOUNT ***********
414 }, 411 feeType.paidAmount =
415 }, 412 Number(feeType.paidAmount) + Number(this.feeTypeData[i].paidAmount);
416 mounted() { 413 this.feeType.paidAmount = feeType.paidAmount.toFixed(2);
417 var token = this.$store.state.token; 414 },
418 http() 415 },
419 .get("/getClassesList", { 416 mounted() {
420 params: { 417 var token = this.$store.state.token;
421 schoolId: this.$store.state.schoolId, 418 http()
422 }, 419 .get("/getClassesList", {
423 headers: { Authorization: "Bearer " + token }, 420 params: {
424 }) 421 schoolId: this.$store.state.schoolId,
425 .then((response) => { 422 },
426 this.addclass = response.data.data; 423 headers: { Authorization: "Bearer " + token },
427 }) 424 })
428 .catch((error) => { 425 .then((response) => {
429 this.showLoader = false; 426 this.addclass = response.data.data;
430 if (error.response.status === 401) { 427 })
431 this.$router.replace({ path: "/" }); 428 .catch((error) => {
432 this.$store.dispatch("setToken", null); 429 this.showLoader = false;
433 this.$store.dispatch("Id", null); 430 if (error.response.status === 401) {
434 this.$store.dispatch("Role", null); 431 this.$router.replace({ path: "/" });
435 } 432 this.$store.dispatch("setToken", null);
436 }); 433 this.$store.dispatch("Id", null);
437 }, 434 this.$store.dispatch("Role", null);
438 // created() { 435 }
439 // this.$root.$on("app:search", search => { 436 });
440 // this.search = search; 437 },
441 // }); 438 // created() {
442 // }, 439 // this.$root.$on("app:search", search => {
443 // beforeDestroy() { 440 // this.search = search;
444 // // dont forget to remove the listener 441 // });
445 // this.$root.$off("app:search"); 442 // },
446 // } 443 // beforeDestroy() {
447 }; 444 // // dont forget to remove the listener
448 </script> 445 // this.$root.$off("app:search");
449 446 // }
450 447 };
451 <style scoped> 448 </script>
452 .studentProfile { 449
src/pages/Account/income.vue
Diff comments   View file @8b7976c
1 <template> 1 <template>
2 <v-container fluid class="body-color"> 2 <v-container fluid class="body-color">
3 <!-- ****** EDIT Income DETAILS ****** --> 3 <!-- ****** EDIT Income DETAILS ****** -->
4 <v-dialog v-model="editIncomeDialog" max-width="600px" scrollable persistent> 4 <v-dialog v-model="editIncomeDialog" max-width="600px" scrollable persistent>
5 <v-card flat class="card-style pa-2" dark> 5 <v-card flat class="card-style pa-2" dark>
6 <v-layout> 6 <v-layout>
7 <v-flex xs12> 7 <v-flex xs12>
8 <label class="title text-xs-center">Edit Income</label> 8 <label class="title text-xs-center">Edit Income</label>
9 <v-icon size="24" class="right" @click="editIncomeDialog = false">cancel</v-icon> 9 <v-icon size="24" class="right" @click="editIncomeDialog = false">cancel</v-icon>
10 </v-flex> 10 </v-flex>
11 </v-layout> 11 </v-layout>
12 <v-card-text> 12 <v-card-text>
13 <v-layout> 13 <v-layout>
14 <v-flex 14 <v-flex
15 xs12 15 xs12
16 class="text-xs-center text-sm-center text-md-center text-lg-center my-4 mr-4" 16 class="text-xs-center text-sm-center text-md-center text-lg-center my-4 mr-4"
17 > 17 >
18 <v-avatar size="160px"> 18 <v-avatar size="160px">
19 <img src="/static/icon/user.png" v-if="!editedItem.fileUrl && !imageUrl" /> 19 <img src="/static/icon/user.png" v-if="!editedItem.fileUrl && !imageUrl" />
20 <img :src="editedItem.fileUrl" v-else-if="editedItem.fileUrl && !imageUrl" /> 20 <img :src="editedItem.fileUrl" v-else-if="editedItem.fileUrl && !imageUrl" />
21 <img 21 <img
22 v-if="imageUrl" 22 v-if="imageUrl"
23 :src="imageUrl" 23 :src="imageUrl"
24 height="150" 24 height="150"
25 style="border-radius:50%; width:200px" 25 style="border-radius:50%; width:200px"
26 /> 26 />
27 </v-avatar> 27 </v-avatar>
28 <input 28 <input
29 type="file" 29 type="file"
30 style="display:none" 30 style="display:none"
31 ref="image" 31 ref="image"
32 accept="image/*" 32 accept="image/*"
33 @change="onFilePicked" 33 @change="onFilePicked"
34 /> 34 />
35 </v-flex> 35 </v-flex>
36 </v-layout> 36 </v-layout>
37 <v-layout wrap> 37 <v-layout wrap>
38 <v-flex xs12 sm12> 38 <v-flex xs12 sm12>
39 <v-layout> 39 <v-layout>
40 <v-flex xs4 class="pt-4 subheading"> 40 <v-flex xs4 class="pt-4 subheading">
41 <label class="right">Name:</label> 41 <label class="right">Name:</label>
42 </v-flex> 42 </v-flex>
43 <v-flex xs8 sm6 class="ml-3"> 43 <v-flex xs8 sm6 class="ml-3">
44 <v-text-field 44 <v-text-field
45 v-model="editedItem.name" 45 v-model="editedItem.name"
46 placeholder="fill your full Name" 46 placeholder="fill your full Name"
47 name="name" 47 name="name"
48 type="text" 48 type="text"
49 required 49 required
50 ></v-text-field> 50 ></v-text-field>
51 </v-flex> 51 </v-flex>
52 </v-layout> 52 </v-layout>
53 </v-flex> 53 </v-flex>
54 </v-layout> 54 </v-layout>
55 <v-layout wrap> 55 <v-layout wrap>
56 <v-flex xs12> 56 <v-flex xs12>
57 <v-layout> 57 <v-layout>
58 <v-flex xs4 class="pt-4 subheading"> 58 <v-flex xs4 class="pt-4 subheading">
59 <label class="right">Date:</label> 59 <label class="right">Date:</label>
60 </v-flex> 60 </v-flex>
61 <v-flex xs8 sm6 class="ml-3"> 61 <v-flex xs8 sm6 class="ml-3">
62 <v-menu 62 <v-menu
63 ref="menu" 63 ref="menu"
64 :close-on-content-click="false" 64 :close-on-content-click="false"
65 v-model="menu3" 65 v-model="menu3"
66 :nudge-right="40" 66 :nudge-right="40"
67 lazy 67 lazy
68 transition="scale-transition" 68 transition="scale-transition"
69 offset-y 69 offset-y
70 full-width 70 full-width
71 min-width="290px" 71 min-width="290px"
72 > 72 >
73 <v-text-field 73 <v-text-field
74 slot="activator" 74 slot="activator"
75 v-model="editedItem.date" 75 v-model="editedItem.date"
76 placeholder="Select date" 76 placeholder="Select date"
77 ></v-text-field> 77 ></v-text-field>
78 <v-date-picker 78 <v-date-picker
79 ref="picker" 79 ref="picker"
80 v-model="editedItem.date" 80 v-model="editedItem.date"
81 @input="$refs.menu.save(editedItem.date)" 81 @input="$refs.menu.save(editedItem.date)"
82 ></v-date-picker> 82 ></v-date-picker>
83 </v-menu> 83 </v-menu>
84 </v-flex> 84 </v-flex>
85 </v-layout> 85 </v-layout>
86 </v-flex> 86 </v-flex>
87 <v-layout wrap> 87 <v-layout wrap>
88 <v-flex xs12 sm12> 88 <v-flex xs12 sm12>
89 <v-layout> 89 <v-layout>
90 <v-flex xs4 class="pt-4 subheading"> 90 <v-flex xs4 class="pt-4 subheading">
91 <label class="right">Amount:</label> 91 <label class="right">Amount:</label>
92 </v-flex> 92 </v-flex>
93 <v-flex xs8 sm6 class="ml-3"> 93 <v-flex xs8 sm6 class="ml-3">
94 <v-text-field v-model="editedItem.amount" required></v-text-field> 94 <v-text-field v-model="editedItem.amount" required></v-text-field>
95 </v-flex> 95 </v-flex>
96 </v-layout> 96 </v-layout>
97 </v-flex> 97 </v-flex>
98 </v-layout> 98 </v-layout>
99 <v-flex xs12> 99 <v-flex xs12>
100 <v-layout> 100 <v-layout>
101 <v-flex xs4 class="pt-4 subheading"> 101 <v-flex xs4 class="pt-4 subheading">
102 <label class="right hidden-xs-only hidden-sm-only">Uplaod Image:</label> 102 <label class="right hidden-xs-only hidden-sm-only">Uplaod Image:</label>
103 <label class="right hidden-lg-only hidden-md-only hidden-xl-only">Uplaod:</label> 103 <label class="right hidden-lg-only hidden-md-only hidden-xl-only">Uplaod:</label>
104 </v-flex> 104 </v-flex>
105 <v-flex xs8 sm6 class="ml-3"> 105 <v-flex xs8 sm6 class="ml-3">
106 <v-text-field 106 <v-text-field
107 label="Select Image" 107 label="Select Image"
108 @click="pickFile" 108 @click="pickFile"
109 v-model="imageName" 109 v-model="imageName"
110 append-icon="attach_file" 110 append-icon="attach_file"
111 ></v-text-field> 111 ></v-text-field>
112 <input 112 <input
113 type="file" 113 type="file"
114 style="display:none" 114 style="display:none"
115 ref="image" 115 ref="image"
116 accept="image/*" 116 accept="image/*"
117 @change="onFilePicked" 117 @change="onFilePicked"
118 /> 118 />
119 </v-flex> 119 </v-flex>
120 </v-layout> 120 </v-layout>
121 </v-flex> 121 </v-flex>
122 <v-flex xs12> 122 <v-flex xs12>
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">Note:</label> 125 <label class="right">Note:</label>
126 </v-flex> 126 </v-flex>
127 <v-flex xs8 sm6 class="ml-3"> 127 <v-flex xs8 sm6 class="ml-3">
128 <v-textarea 128 <v-textarea
129 name="input-7-1" 129 name="input-7-1"
130 v-model="editedItem.note" 130 v-model="editedItem.note"
131 placeholder="fill your Note" 131 placeholder="fill your Note"
132 type="text" 132 type="text"
133 :rules="noteRules" 133 :rules="noteRules"
134 multi-line 134 multi-line
135 required 135 required
136 ></v-textarea> 136 ></v-textarea>
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-layout> 141 <v-layout>
142 <v-flex xs12> 142 <v-flex xs12>
143 <v-card-actions> 143 <v-card-actions>
144 <v-spacer></v-spacer> 144 <v-spacer></v-spacer>
145 <v-btn round dark :loading="loading" @click="save" class="add-button">Save</v-btn> 145 <v-btn round dark :loading="loading" @click="save" class="add-button">Save</v-btn>
146 <v-spacer></v-spacer> 146 <v-spacer></v-spacer>
147 </v-card-actions> 147 </v-card-actions>
148 </v-flex> 148 </v-flex>
149 </v-layout> 149 </v-layout>
150 </v-card-text> 150 </v-card-text>
151 </v-card> 151 </v-card>
152 </v-dialog> 152 </v-dialog>
153 153
154 <!-- ****** PROFILE VIEW INCOME DETAILS ****** --> 154 <!-- ****** PROFILE VIEW INCOME DETAILS ****** -->
155 <v-dialog v-model="profileIncomeDialog" max-width="400px" persistent> 155 <v-dialog v-model="profileIncomeDialog" max-width="400px" persistent>
156 <v-card flat class="card-style pa-3" dark> 156 <v-card flat class="card-style pa-3" dark>
157 <v-layout> 157 <v-layout>
158 <v-flex xs12> 158 <v-flex xs12>
159 <label class="title text-xs-center">View Income</label> 159 <label class="title text-xs-center">View Income</label>
160 <v-icon size="24" class="right" @click="profileIncomeDialog = false">cancel</v-icon> 160 <v-icon size="24" class="right" @click="profileIncomeDialog = false">cancel</v-icon>
161 </v-flex> 161 </v-flex>
162 </v-layout> 162 </v-layout>
163 <v-card-text> 163 <v-card-text>
164 <v-container grid-list-md> 164 <v-container grid-list-md>
165 <v-layout wrap> 165 <v-layout wrap>
166 <v-flex> 166 <v-flex>
167 <v-flex align-center justify-center layout text-xs-center> 167 <v-flex align-center justify-center layout text-xs-center>
168 <v-avatar size="80px" v-if="!editedItem.fileUrl"> 168 <v-avatar size="80px" v-if="!editedItem.fileUrl">
169 <img src="/static/icon/user.png" /> 169 <img src="/static/icon/user.png" />
170 </v-avatar> 170 </v-avatar>
171 <img :src="editedItem.fileUrl" v-else-if="editedItem.fileUrl" width="150" /> 171 <img :src="editedItem.fileUrl" v-else-if="editedItem.fileUrl" width="150" />
172 </v-flex> 172 </v-flex>
173 <v-layout> 173 <v-layout>
174 <v-flex xs5 sm6> 174 <v-flex xs5 sm6>
175 <h5 class="right my-1"> 175 <h5 class="right my-1">
176 <b>Name:</b> 176 <b>Name:</b>
177 </h5> 177 </h5>
178 </v-flex> 178 </v-flex>
179 <v-flex sm6 xs8> 179 <v-flex sm6 xs8>
180 <h5 class="my-1">{{ editedItem.name }}</h5> 180 <h5 class="my-1">{{ editedItem.name }}</h5>
181 </v-flex> 181 </v-flex>
182 </v-layout> 182 </v-layout>
183 <v-layout> 183 <v-layout>
184 <v-flex xs5 sm6> 184 <v-flex xs5 sm6>
185 <h5 class="right my-1"> 185 <h5 class="right my-1">
186 <b>Amount:</b> 186 <b>Amount:</b>
187 </h5> 187 </h5>
188 </v-flex> 188 </v-flex>
189 <v-flex sm6 xs8> 189 <v-flex sm6 xs8>
190 <h5 class="my-1">{{ editedItem.amount }}</h5> 190 <h5 class="my-1">{{ editedItem.amount }}</h5>
191 </v-flex> 191 </v-flex>
192 </v-layout> 192 </v-layout>
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>Date:</b> 196 <b>Date:</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">{{ dates(editedItem.date) }}</h5> 200 <h5 class="my-1">{{ dates(editedItem.date) }}</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>Note:</b> 206 <b>Note:</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.note }}</h5> 210 <h5 class="my-1">{{ editedItem.note }}</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-container> 215 </v-container>
216 </v-card-text> 216 </v-card-text>
217 </v-card> 217 </v-card>
218 </v-dialog> 218 </v-dialog>
219 <!-- ****** EXISTING-EXPENSE TABLE DATA****** --> 219 <!-- ****** EXISTING-EXPENSE TABLE DATA****** -->
220 220
221 <v-toolbar color="transparent" flat> 221 <v-toolbar color="transparent" flat>
222 <v-btn 222 <v-btn
223 fab 223 fab
224 dark 224 dark
225 class="open-dialog-button hidden-xl-only hidden-md-only hidden-lg-only" 225 class="open-dialog-button hidden-xl-only hidden-md-only hidden-lg-only"
226 small 226 small
227 @click="addIncomeDialog = true" 227 @click="addIncomeDialog = true"
228 > 228 >
229 <v-icon dark>add</v-icon> 229 <v-icon dark>add</v-icon>
230 </v-btn> 230 </v-btn>
231 <v-btn 231 <v-btn
232 round 232 round
233 class="open-dialog-button hidden-sm-only hidden-xs-only" 233 class="open-dialog-button hidden-sm-only hidden-xs-only"
234 dark 234 dark
235 @click="addIncomeDialog = true" 235 @click="addIncomeDialog = true"
236 > 236 >
237 <v-icon class="white--text pr-1" size="20">add</v-icon>Add Income 237 <v-icon class="white--text pr-1" size="20">add</v-icon>Add Income
238 </v-btn> 238 </v-btn>
239 <v-spacer></v-spacer> 239 <v-spacer></v-spacer>
240 <v-card-title class="body-1" v-show="show"> 240 <v-card-title class="body-1" v-show="show">
241 <v-btn icon large flat @click="displaySearch"> 241 <v-btn icon large flat @click="displaySearch">
242 <v-avatar size="27"> 242 <v-avatar size="27">
243 <img src="/static/icon/search.png" alt="icon" /> 243 <img src="/static/icon/search.png" alt="icon" />
244 </v-avatar> 244 </v-avatar>
245 </v-btn> 245 </v-btn>
246 </v-card-title> 246 </v-card-title>
247 <v-flex xs8 sm8 md3 lg2 v-if="showSearch"> 247 <v-flex xs8 sm8 md3 lg2 v-if="showSearch">
248 <v-layout> 248 <v-layout>
249 <v-text-field 249 <v-text-field
250 autofocus 250 autofocus
251 v-model="search" 251 v-model="search"
252 label="Search" 252 label="Search"
253 prepend-inner-icon="search" 253 prepend-inner-icon="search"
254 color="primary" 254 color="primary"
255 ></v-text-field> 255 ></v-text-field>
256 <v-icon @click="closeSearch" color="error">close</v-icon> 256 <v-icon @click="closeSearch" color="error">close</v-icon>
257 </v-layout> 257 </v-layout>
258 </v-flex> 258 </v-flex>
259 </v-toolbar> 259 </v-toolbar>
260 <v-data-table 260 <v-data-table
261 :headers="headers" 261 :headers="headers"
262 :items="incomeList" 262 :items="incomeList"
263 :pagination.sync="pagination" 263 :pagination.sync="pagination"
264 :search="search" 264 :search="search"
265 > 265 >
266 <template slot="items" slot-scope="props"> 266 <template slot="items" slot-scope="props">
267 <tr class="tr"> 267 <tr class="tr">
268 <td class="text-xs-center td td-row">{{ props.index + 1}}</td> 268 <td class="text-xs-center td td-row">{{ props.index + 1}}</td>
269 <td class="text-xs-center td td-row"> 269 <td class="text-xs-center td td-row">
270 <v-avatar class="40"> 270 <v-avatar class="40">
271 <img :src="props.item.fileUrl" v-if="props.item.fileUrl" /> 271 <img :src="props.item.fileUrl" v-if="props.item.fileUrl" />
272 <img src="/static/icon/user.png" v-else-if="!props.item.fileUrl" /> 272 <img src="/static/icon/user.png" v-else-if="!props.item.fileUrl" />
273 </v-avatar> 273 </v-avatar>
274 </td> 274 </td>
275 <td class="text-xs-center td td-row">{{ props.item.name}}</td> 275 <td class="text-xs-center td td-row">{{ props.item.name}}</td>
276 <td class="text-xs-center td td-row">{{ dates(props.item.date) }}</td> 276 <td class="text-xs-center td td-row">{{ dates(props.item.date) }}</td>
277 <td class="text-xs-center td td-row">{{ props.item.user }}</td> 277 <td class="text-xs-center td td-row">{{ props.item.user }}</td>
278 <td class="text-xs-center td td-row">{{ props.item.amount }}</td> 278 <td class="text-xs-center td td-row">{{ props.item.amount }}</td>
279 <td class="text-xs-center td td-row">{{ props.item.note }}</td> 279 <td class="text-xs-center td td-row">{{ props.item.note }}</td>
280 <td class="text-xs-center td td-row"> 280 <td class="text-xs-center td td-row">
281 <span> 281 <span>
282 <v-tooltip top> 282 <v-tooltip top>
283 <img 283 <img
284 slot="activator" 284 slot="activator"
285 style="cursor:pointer; width:25px; height:25px; " 285 style="cursor:pointer; width:25px; height:25px; "
286 class="mr-3" 286 class="mr-3"
287 @click="profile(props.item)" 287 @click="profile(props.item)"
288 src="/static/icon/view.png" 288 src="/static/icon/view.png"
289 /> 289 />
290 <span>View</span> 290 <span>View</span>
291 </v-tooltip> 291 </v-tooltip>
292 <v-tooltip top> 292 <v-tooltip top>
293 <img 293 <img
294 slot="activator" 294 slot="activator"
295 style="cursor:pointer; width:20px; height:18px; " 295 style="cursor:pointer; width:20px; height:18px; "
296 class="mr-3" 296 class="mr-3"
297 @click="editItem(props.item)" 297 @click="editItem(props.item)"
298 src="/static/icon/edit.png" 298 src="/static/icon/edit.png"
299 /> 299 />
300 <span>Edit</span> 300 <span>Edit</span>
301 </v-tooltip> 301 </v-tooltip>
302 <v-tooltip top> 302 <v-tooltip top>
303 <img 303 <img
304 slot="activator" 304 slot="activator"
305 style="cursor:pointer; width:20px; height:20px; " 305 style="cursor:pointer; width:20px; height:20px; "
306 @click="deleteItem(props.item)" 306 @click="deleteItem(props.item)"
307 src="/static/icon/delete.png" 307 src="/static/icon/delete.png"
308 /> 308 />
309 <span>Delete</span> 309 <span>Delete</span>
310 </v-tooltip> 310 </v-tooltip>
311 </span> 311 </span>
312 </td> 312 </td>
313 </tr> 313 </tr>
314 </template> 314 </template>
315 <v-alert 315 <v-alert
316 slot="no-results" 316 slot="no-results"
317 :value="true" 317 :value="true"
318 color="error" 318 color="error"
319 icon="warning" 319 icon="warning"
320 >Your search for "{{ search }}" found no results.</v-alert> 320 >Your search for "{{ search }}" found no results.</v-alert>
321 </v-data-table> 321 </v-data-table>
322 322
323 <!-- ****** Add Income Data****** --> 323 <!-- ****** Add Income Data****** -->
324 <v-dialog v-model="addIncomeDialog" max-width="600px" v-if="addIncomeDialog" persistent> 324 <v-dialog v-model="addIncomeDialog" max-width="600px" v-if="addIncomeDialog" persistent>
325 <v-card flat class="card-style pa-2" dark> 325 <v-card flat class="card-style pa-2" dark>
326 <v-layout> 326 <v-layout>
327 <v-flex xs12> 327 <v-flex xs12>
328 <label class="title text-xs-center">Add Income</label> 328 <label class="title text-xs-center">Add Income</label>
329 <v-icon size="24" class="right" @click="closeAddIncomeModel">cancel</v-icon> 329 <v-icon size="24" class="right" @click="closeAddIncomeModel">cancel</v-icon>
330 </v-flex> 330 </v-flex>
331 </v-layout> 331 </v-layout>
332 <v-form ref="form" v-model="valid" lazy-validation> 332 <v-form ref="form" v-model="valid" lazy-validation>
333 <v-container fluid> 333 <v-container fluid>
334 <v-layout> 334 <v-layout>
335 <v-flex xs12 class="text-xs-center text-sm-center text-md-center text-lg-center"> 335 <v-flex xs12 class="text-xs-center text-sm-center text-md-center text-lg-center">
336 <v-avatar size="80px"> 336 <v-avatar size="80px">
337 <img src="/static/icon/user.png" v-if="!imageUrl" /> 337 <img src="/static/icon/user.png" v-if="!imageUrl" />
338 </v-avatar> 338 </v-avatar>
339 <img 339 <img
340 :src="imageUrl" 340 :src="imageUrl"
341 height="150" 341 height="150"
342 v-if="imageUrl" 342 v-if="imageUrl"
343 style="border-radius:50%; width:200px" 343 style="border-radius:50%; width:200px"
344 /> 344 />
345 </v-flex> 345 </v-flex>
346 </v-layout> 346 </v-layout>
347 <v-layout> 347 <v-layout>
348 <v-flex xs12 sm12> 348 <v-flex xs12 sm12>
349 <v-layout> 349 <v-layout>
350 <v-flex xs4 class="pt-4 subheading"> 350 <v-flex xs4 class="pt-4 subheading">
351 <label class="right">Name:</label> 351 <label class="right">Name:</label>
352 </v-flex> 352 </v-flex>
353 <v-flex xs8 sm6 class="ml-3"> 353 <v-flex xs8 sm6 class="ml-3">
354 <v-text-field 354 <v-text-field
355 v-model="addIncome.name" 355 v-model="addIncome.name"
356 placeholder="fill your full Name" 356 placeholder="fill your full Name"
357 name="name" 357 name="name"
358 type="text" 358 type="text"
359 :rules="nameRules" 359 :rules="nameRules"
360 required 360 required
361 ></v-text-field> 361 ></v-text-field>
362 </v-flex> 362 </v-flex>
363 </v-layout> 363 </v-layout>
364 </v-flex> 364 </v-flex>
365 </v-layout> 365 </v-layout>
366 <v-layout> 366 <v-layout>
367 <v-flex xs12 sm12> 367 <v-flex xs12 sm12>
368 <v-layout> 368 <v-layout>
369 <v-flex xs4 class="pt-4 subheading"> 369 <v-flex xs4 class="pt-4 subheading">
370 <label class="right">Amount:</label> 370 <label class="right">Amount:</label>
371 </v-flex> 371 </v-flex>
372 <v-flex xs8 sm6 class="ml-3"> 372 <v-flex xs8 sm6 class="ml-3">
373 <v-text-field 373 <v-text-field
374 v-model="addIncome.amount" 374 v-model="addIncome.amount"
375 placeholder="fill your Amount" 375 placeholder="fill your Amount"
376 name="name" 376 name="name"
377 type="text" 377 type="text"
378 :rules="amountRules" 378 :rules="amountRules"
379 required 379 required
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-layout> 384 </v-layout>
385 <v-layout> 385 <v-layout>
386 <v-flex xs12 sm12> 386 <v-flex xs12 sm12>
387 <v-layout> 387 <v-layout>
388 <v-flex xs4 class="pt-4 subheading"> 388 <v-flex xs4 class="pt-4 subheading">
389 <label class="right">Date</label> 389 <label class="right">Date</label>
390 </v-flex> 390 </v-flex>
391 <v-flex xs8 sm6 class="ml-3"> 391 <v-flex xs8 sm6 class="ml-3">
392 <v-menu 392 <v-menu
393 ref="menu1" 393 ref="menu1"
394 :close-on-content-click="false" 394 :close-on-content-click="false"
395 v-model="menu1" 395 v-model="menu1"
396 :nudge-right="40" 396 :nudge-right="40"
397 lazy 397 lazy
398 transition="scale-transition" 398 transition="scale-transition"
399 offset-y 399 offset-y
400 full-width 400 full-width
401 min-width="290px" 401 min-width="290px"
402 > 402 >
403 <v-text-field 403 <v-text-field
404 slot="activator" 404 slot="activator"
405 :rules="joinDateRules" 405 :rules="joinDateRules"
406 v-model="addIncome.date" 406 v-model="addIncome.date"
407 placeholder="Select date" 407 placeholder="Select date"
408 ></v-text-field> 408 ></v-text-field>
409 <v-date-picker 409 <v-date-picker
410 ref="picker" 410 ref="picker"
411 v-model="addIncome.date" 411 v-model="addIncome.date"
412 @input="$refs.menu1.save(addIncome.date)" 412 @input="$refs.menu1.save(addIncome.date)"
413 ></v-date-picker> 413 ></v-date-picker>
414 </v-menu> 414 </v-menu>
415 </v-flex> 415 </v-flex>
416 </v-layout> 416 </v-layout>
417 </v-flex> 417 </v-flex>
418 </v-layout> 418 </v-layout>
419 <v-layout> 419 <v-layout>
420 <v-flex xs12 sm12> 420 <v-flex xs12 sm12>
421 <v-layout> 421 <v-layout>
422 <v-flex xs4 class="pt-4 subheading"> 422 <v-flex xs4 class="pt-4 subheading">
423 <label class="right">File:</label> 423 <label class="right">File:</label>
424 </v-flex> 424 </v-flex>
425 <v-flex xs8 sm6 class="ml-3"> 425 <v-flex xs8 sm6 class="ml-3">
426 <v-text-field 426 <v-text-field
427 label="Select file" 427 label="Select file"
428 @click="pickFile" 428 @click="pickFile"
429 v-model="imageName" 429 v-model="imageName"
430 append-icon="attach_file" 430 append-icon="attach_file"
431 ></v-text-field> 431 ></v-text-field>
432 <input 432 <input
433 type="file" 433 type="file"
434 style="display:none" 434 style="display:none"
435 ref="image" 435 ref="image"
436 accept="image/*" 436 accept="image/*"
437 @change="onFilePicked" 437 @change="onFilePicked"
438 /> 438 />
439 </v-flex> 439 </v-flex>
440 </v-layout> 440 </v-layout>
441 </v-flex> 441 </v-flex>
442 </v-layout> 442 </v-layout>
443 <v-layout> 443 <v-layout>
444 <v-flex xs12 sm12> 444 <v-flex xs12 sm12>
445 <v-layout> 445 <v-layout>
446 <v-flex xs4 class="pt-4 subheading"> 446 <v-flex xs4 class="pt-4 subheading">
447 <label class="right">Note:</label> 447 <label class="right">Note:</label>
448 </v-flex> 448 </v-flex>
449 <v-flex xs8 sm6 class="ml-3"> 449 <v-flex xs8 sm6 class="ml-3">
450 <v-textarea 450 <v-textarea
451 name="input-7-1" 451 name="input-7-1"
452 v-model="addIncome.note" 452 v-model="addIncome.note"
453 placeholder="fill your Note" 453 placeholder="fill your Note"
454 type="text" 454 type="text"
455 multi-line 455 multi-line
456 required 456 required
457 ></v-textarea> 457 ></v-textarea>
458 </v-flex> 458 </v-flex>
459 </v-layout> 459 </v-layout>
460 </v-flex> 460 </v-flex>
461 </v-layout> 461 </v-layout>
462 <v-layout> 462 <v-layout>
463 <v-flex xs12 sm11> 463 <v-flex xs12 sm11>
464 <v-layout> 464 <v-layout>
465 <v-spacer></v-spacer> 465 <v-spacer></v-spacer>
466 <v-btn @click="clear" round class="clear-button" dark>clear</v-btn> 466 <v-btn @click="clear" round class="clear-button" dark>clear</v-btn>
467 <v-btn @click="submit" round dark :loading="loading" class="add-button">Add</v-btn> 467 <v-btn @click="submit" round dark :loading="loading" class="add-button">Add</v-btn>
468 </v-layout> 468 </v-layout>
469 </v-flex> 469 </v-flex>
470 </v-layout> 470 </v-layout>
471 </v-container> 471 </v-container>
472 </v-form> 472 </v-form>
473 </v-card> 473 </v-card>
474 </v-dialog> 474 </v-dialog>
475 <div class="loader" v-if="showLoader"> 475 <div class="loader" v-if="showLoader">
476 <v-progress-circular indeterminate color="white"></v-progress-circular> 476 <v-progress-circular indeterminate color="white"></v-progress-circular>
477 </div> 477 </div>
478 </v-container> 478 </v-container>
479 </template> 479 </template>
480 480
481 <script> 481 <script>
482 import http from "@/Services/http.js"; 482 import http from "@/Services/http.js";
483 import Util from "@/util"; 483 import Util from "@/util";
484 import moment from "moment"; 484 import moment from "moment";
485 485
486 export default { 486 export default {
487 data: () => ({ 487 data: () => ({
488 component: "report-generate", 488 component: "report-generate",
489 snackbar: false, 489 snackbar: false,
490 y: "top", 490 y: "top",
491 x: "right", 491 x: "right",
492 mode: "", 492 mode: "",
493 timeout: 3000, 493 timeout: 3000,
494 text: "", 494 text: "",
495 show: true, 495 show: true,
496 showSearch: false, 496 showSearch: false,
497 showLoader: false, 497 showLoader: false,
498 loading: false, 498 loading: false,
499 date: null, 499 date: null,
500 search: "", 500 search: "",
501 addIncomeDialog: false, 501 addIncomeDialog: false,
502 menu: false, 502 menu: false,
503 menu1: false, 503 menu1: false,
504 menu2: false, 504 menu2: false,
505 menu3: false, 505 menu3: false,
506 editIncomeDialog: false, 506 editIncomeDialog: false,
507 profileIncomeDialog: false, 507 profileIncomeDialog: false,
508 valid: true, 508 valid: true,
509 pagination: { 509 pagination: {
510 rowsPerPage: 10, 510 rowsPerPage: 10,
511 }, 511 },
512 imageData: {}, 512 imageData: {},
513 imageName: "", 513 imageName: "",
514 imageUrl: "", 514 imageUrl: "",
515 imageFile: "", 515 imageFile: "",
516 nameRules: [(v) => !!v || " Full Name is required"], 516 nameRules: [(v) => !!v || " Full Name is required"],
517 amountRules: [(v) => !!v || "Amount is required"], 517 amountRules: [(v) => !!v || "Amount is required"],
518 noteRules: [(v) => !!v || "Note Name is required"], 518 noteRules: [(v) => !!v || "Note Name is required"],
519 joinDateRules: [(v) => !!v || "Date is required"], 519 joinDateRules: [(v) => !!v || "Date is required"],
520 errorMessages: "", 520 errorMessages: "",
521 headers: [ 521 headers: [
522 { 522 {
523 text: "No", 523 text: "No",
524 align: "", 524 align: "",
525 sortable: false, 525 sortable: false,
526 value: "No", 526 value: "No",
527 }, 527 },
528 { 528 {
529 text: "Profile Pic", 529 text: "Profile Pic",
530 value: "profilePicUrl", 530 value: "profilePicUrl",
531 sortable: false, 531 sortable: false,
532 align: "center", 532 align: "center",
533 }, 533 },
534 { text: "Name", value: "name", sortable: false, align: "center" }, 534 { text: "Name", value: "name", sortable: false, align: "center" },
535 { text: "Date", value: "date", sortable: false, align: "center" }, 535 { text: "Date", value: "date", sortable: false, align: "center" },
536 { text: "User", value: "user", sortable: false, align: "center" }, 536 { text: "User", value: "user", sortable: false, align: "center" },
537 { text: "Amount", value: "amount", sortable: false, align: "center" }, 537 { text: "Amount", value: "amount", sortable: false, align: "center" },
538 { text: "Note", value: "note", sortable: false, align: "center" }, 538 { text: "Note", value: "note", sortable: false, align: "center" },
539 { text: "Action", value: "", sortable: false, align: "center" }, 539 { text: "Action", value: "", sortable: false, align: "center" },
540 ], 540 ],
541 incomeList: [], 541 incomeList: [],
542 editedIndex: -1, 542 editedIndex: -1,
543 upload: "", 543 upload: "",
544 editedItem: {}, 544 editedItem: {},
545 addIncome: {}, 545 addIncome: {},
546 }), 546 }),
547 watch: { 547 watch: {
548 menu(val) { 548 menu(val) {
549 val && this.$nextTick(() => (this.$refs.picker.activePicker = "YEAR")); 549 val && this.$nextTick(() => (this.$refs.picker.activePicker = "YEAR"));
550 }, 550 },
551 menu1(val) { 551 menu1(val) {
552 val && this.$nextTick(() => (this.$refs.picker.activePicker = "YEAR")); 552 val && this.$nextTick(() => (this.$refs.picker.activePicker = "YEAR"));
553 }, 553 },
554 addIncomeDialog: function (val) { 554 addIncomeDialog: function (val) {
555 if (!val) { 555 if (!val) {
556 this.addIncome = []; 556 this.addIncome = [];
557 this.menu1 = false; 557 this.menu1 = false;
558 this.imageName = ""; 558 this.imageName = "";
559 this.imageUrl = ""; 559 this.imageUrl = "";
560 this.imageFile = ""; 560 this.imageFile = "";
561 } 561 }
562 }, 562 },
563 }, 563 },
564 methods: { 564 methods: {
565 save(date) { 565 save(date) {
566 this.$refs.menu.save(date); 566 this.$refs.menu.save(date);
567 }, 567 },
568 save(date) { 568 save(date) {
569 this.$refs.menu1.save(date); 569 this.$refs.menu1.save(date);
570 }, 570 },
571 pickFile() { 571 pickFile() {
572 this.$refs.image.click(); 572 this.$refs.image.click();
573 }, 573 },
574 onFilePicked(e) { 574 onFilePicked(e) {
575 // console.log(e) 575 // console.log(e)
576 const files = e.target.files; 576 const files = e.target.files;
577 this.upload = e.target.files[0]; 577 this.upload = e.target.files[0];
578 // console.log("imageData-upload========>", this.upload); 578 // console.log("imageData-upload========>", this.upload);
579 if (files[0] !== undefined) { 579 if (files[0] !== undefined) {
580 this.imageName = files[0].name; 580 this.imageName = files[0].name;
581 if (this.imageName.lastIndexOf(".") <= 0) { 581 if (this.imageName.lastIndexOf(".") <= 0) {
582 return; 582 return;
583 } 583 }
584 const fr = new FileReader(); 584 const fr = new FileReader();
585 fr.readAsDataURL(files[0]); 585 fr.readAsDataURL(files[0]);
586 fr.addEventListener("load", () => { 586 fr.addEventListener("load", () => {
587 this.imageUrl = fr.result; 587 this.imageUrl = fr.result;
588 this.imageFile = files[0]; // this is an image file that can be sent to server... 588 this.imageFile = files[0]; // this is an image file that can be sent to server...
589 // this.imageData.imageUrl = URL.createObjectURL(this.imageFile); 589 // this.imageData.imageUrl = URL.createObjectURL(this.imageFile);
590 // console.log("upload=======>", this.imageData.imageUrl); 590 // console.log("upload=======>", this.imageData.imageUrl);
591 // console.log("imageFile", this.imageUrl); 591 // console.log("imageFile", this.imageUrl);
592 }); 592 });
593 } else { 593 } else {
594 this.imageName = ""; 594 this.imageName = "";
595 this.imageFile = ""; 595 this.imageFile = "";
596 this.imageUrl = ""; 596 this.imageUrl = "";
597 } 597 }
598 }, 598 },
599 dates: function (date) { 599 dates: function (date) {
600 return moment(date).format("MMMM DD, YYYY"); 600 return moment(date).format("MMMM DD, YYYY");
601 }, 601 },
602 getIncomeList() { 602 getIncomeList() {
603 this.showLoader = true; 603 this.showLoader = true;
604 var token = this.$store.state.token; 604 var token = this.$store.state.token;
605 http() 605 http()
606 .get("/getIncomesList", { 606 .get("/getIncomesList", {
607 params: { schoolId: this.$store.state.schoolId }, 607 params: { schoolId: this.$store.state.schoolId },
608 headers: { Authorization: "Bearer " + token }, 608 headers: { Authorization: "Bearer " + token },
609 }) 609 })
610 .then((response) => { 610 .then((response) => {
611 this.incomeList = response.data.data; 611 this.incomeList = response.data.data;
612 this.showLoader = false; 612 this.showLoader = false;
613 // console.log("getTeacherList=====>",this.incomeList) 613 // console.log("getTeacherList=====>",this.incomeList)
614 }) 614 })
615 .catch((error) => { 615 .catch((error) => {
616 this.showLoader = false; 616 this.showLoader = false;
617 if (error.response.status === 401) { 617 if (error.response.status === 401) {
618 this.$router.replace({ path: "/" }); 618 this.$router.replace({ path: "/" });
619 this.$store.dispatch("setToken", null); 619 this.$store.dispatch("setToken", null);
620 this.$store.dispatch("Id", null); 620 this.$store.dispatch("Id", null);
621 } 621 }
622 }); 622 });
623 }, 623 },
624 editItem(item) { 624 editItem(item) {
625 this.editedIndex = this.incomeList.indexOf(item); 625 this.editedIndex = this.incomeList.indexOf(item);
626 this.editedItem = Object.assign({}, item); 626 this.editedItem = Object.assign({}, item);
627 this.editedItem.date = 627 this.editedItem.date =
628 this.editedItem.date != undefined 628 this.editedItem.date != undefined
629 ? (this.editedItem.date = this.editedItem.date.substring(0, 10)) 629 ? (this.editedItem.date = this.editedItem.date.substring(0, 10))
630 : (this.editedItem.date = ""); 630 : (this.editedItem.date = "");
631 631
632 this.editIncomeDialog = true; 632 this.editIncomeDialog = true;
633 }, 633 },
634 profile(item) { 634 profile(item) {
635 this.editedIndex = this.incomeList.indexOf(item); 635 this.editedIndex = this.incomeList.indexOf(item);
636 this.editedItem = Object.assign({}, item); 636 this.editedItem = Object.assign({}, item);
637 this.profileIncomeDialog = true; 637 this.profileIncomeDialog = true;
638 }, 638 },
639 deleteItem(item) { 639 deleteItem(item) {
640 let deleteIncome = { 640 let deleteIncome = {
641 incomeId: item._id, 641 incomeId: item._id,
642 }; 642 };
643 http() 643 http()
644 .delete( 644 .delete(
645 "/deleteIncome", 645 "/deleteIncome",
646 confirm("Are you sure you want to delete this?") && { 646 confirm("Are you sure you want to delete this?") && {
647 params: deleteIncome, 647 params: deleteIncome,
648 } 648 }
649 ) 649 )
650 .then((response) => { 650 .then((response) => {
651 // console.log("deleteUers",deleteTeachers) 651 // console.log("deleteUers",deleteTeachers)
652 if ((this.snackbar = true)) { 652 if ((this.snackbar = true)) {
653 this.text = "Successfully delete Existing Income"; 653 this.text = "Successfully delete Existing Income";
654 } 654 }
655 this.getIncomeList(); 655 this.getIncomeList();
656 }) 656 })
657 .catch((error) => { 657 .catch((error) => {
658 // console.log(error); 658 // console.log(error);
659 }); 659 });
660 }, 660 },
661 close() { 661 close() {
662 this.editIncomeDialog = false; 662 this.editIncomeDialog = false;
663 }, 663 },
664 close1() { 664 close1() {
665 this.dialog1 = false; 665 this.dialog1 = false;
666 }, 666 },
667 closeAddIncomeModel() { 667 closeAddIncomeModel() {
668 this.addIncomeDialog = false; 668 this.addIncomeDialog = false;
669 this.addIncome = []; 669 this.addIncome = [];
670 this.menu1 = false; 670 this.menu1 = false;
671 this.imageName = ""; 671 this.imageName = "";
672 this.imageUrl = ""; 672 this.imageUrl = "";
673 this.imageFile = ""; 673 this.imageFile = "";
674 }, 674 },
675 submit() { 675 submit() {
676 if (this.$refs.form.validate()) { 676 if (this.$refs.form.validate()) {
677 if (this.imageUrl) { 677 if (this.imageUrl) {
678 var str = this.imageUrl; 678 var str = this.imageUrl;
679 const [baseUrl, imageUrl] = str.split(/,/); 679 const [baseUrl, imageUrl] = str.split(/,/);
680 this.addIncome.upload = imageUrl; 680 this.addIncome.upload = imageUrl;
681 } 681 }
682 this.loading = true; 682 this.loading = true;
683 // this.addIncome = this.$store.state.schoolId; 683 // this.addIncome = this.$store.state.schoolId;
684 http() 684 http()
685 .post("/createIncome", this.addIncome) 685 .post("/createIncome", this.addIncome)
686 .then((response) => { 686 .then((response) => {
687 this.getIncomeList(); 687 this.getIncomeList();
688 this.snackbar = true; 688 this.snackbar = true;
689 this.text = response.data.message; 689 this.text = response.data.message;
690 this.color = "green"; 690 this.color = "green";
691 this.addIncomeDialog = false; 691 this.addIncomeDialog = false;
692 this.clear(); 692 this.clear();
693 this.loading = false; 693 this.loading = false;
694 }) 694 })
695 .catch((error) => { 695 .catch((error) => {
696 // console.log(error); 696 // console.log(error);
697 this.loading = false; 697 this.loading = false;
698 this.snackbar = true; 698 this.snackbar = true;
699 this.color = "error"; 699 this.color = "error";
700 this.text = error.response.data.message; 700 this.text = error.response.data.message;
701 }); 701 });
702 } 702 }
703 }, 703 },
704 clear() { 704 clear() {
705 this.$refs.form.reset(); 705 this.$refs.form.reset();
706 }, 706 },
707 save() { 707 save() {
708 this.loading = true; 708 this.loading = true;
709 this.editedItem.incomeId = this.editedItem._id; 709 this.editedItem.incomeId = this.editedItem._id;
710 if (this.imageUrl) { 710 if (this.imageUrl) {
711 var str = this.imageUrl; 711 var str = this.imageUrl;
712 const [baseUrl, imageUrl] = str.split(/,/); 712 const [baseUrl, imageUrl] = str.split(/,/);
713 this.editedItem.upload = imageUrl; 713 this.editedItem.upload = imageUrl;
714 } 714 }
715 http() 715 http()
716 .put("/updateIncome", this.editedItem) 716 .put("/updateIncome", this.editedItem)
717 .then((response) => { 717 .then((response) => {
718 this.snackbar = true; 718 this.snackbar = true;
719 this.text = response.data.message; 719 this.text = response.data.message;
720 this.color = "green"; 720 this.color = "green";
721 this.loading = false; 721 this.loading = false;
722 this.getIncomeList(); 722 this.getIncomeList();
723 this.close(); 723 this.close();
724 }) 724 })
725 .catch((error) => { 725 .catch((error) => {
726 this.loading = false; 726 this.loading = false;
727 this.snackbar = true; 727 this.snackbar = true;
728 this.color = "error"; 728 this.color = "error";
729 this.loading = false; 729 this.loading = false;
730 }); 730 });
731 }, 731 },
732 732
733 displaySearch() { 733 displaySearch() {
734 (this.show = false), (this.showSearch = true); 734 (this.show = false), (this.showSearch = true);
735 }, 735 },
736 closeSearch() { 736 closeSearch() {
737 this.showSearch = false; 737 this.showSearch = false;
738 this.show = true; 738 this.show = true;
739 this.search = ""; 739 this.search = "";
740 }, 740 },
741 }, 741 },
742 mounted() { 742 mounted() {
743 this.getIncomeList(); 743 this.getIncomeList();
744 }, 744 },
745 }; 745 };
746 </script> 746 </script>
src/pages/Account/invoice.vue
Diff comments   View file @8b7976c
1 <template> 1 <template>
2 <v-container fluid class="body-color"> 2 <v-container fluid class="body-color">
3 <!-- ****** Edit INVOICE ****** --> 3 <!-- ****** Edit INVOICE ****** -->
4 <v-dialog v-model="editInvoiceDialog" persistent> 4 <v-dialog v-model="editInvoiceDialog" persistent>
5 <v-card flat class="text-xs-center white--text"> 5 <v-card flat class="text-xs-center white--text">
6 <v-layout> 6 <v-layout>
7 <v-flex xs12 class="card-styles pa-2"> 7 <v-flex xs12 class="card-styles pa-2">
8 <label class="title text-xs-center">Edit Invoice</label> 8 <label class="title text-xs-center">Edit Invoice</label>
9 <v-icon size="24" class="right white--text" @click="editInvoiceDialog = false">cancel</v-icon> 9 <v-icon size="24" class="right white--text" @click="editInvoiceDialog = false">cancel</v-icon>
10 </v-flex> 10 </v-flex>
11 </v-layout> 11 </v-layout>
12 <editInvoice :editData="editData" @update-editInvoice="updateDoneInvoice" /> 12 <editInvoice :editData="editData" @update-editInvoice="updateDoneInvoice" />
13 </v-card> 13 </v-card>
14 </v-dialog> 14 </v-dialog>
15 15
16 <!-- ****PAYMENT INVOICE DIALOG --> 16 <!-- ****PAYMENT INVOICE DIALOG -->
17 <v-dialog v-model="paymentInvoiceDialog" persistent> 17 <v-dialog v-model="paymentInvoiceDialog" persistent>
18 <v-card flat class="text-xs-center white--text"> 18 <v-card flat class="text-xs-center white--text">
19 <v-layout> 19 <v-layout>
20 <v-flex xs12 class="card-styles pa-2"> 20 <v-flex xs12 class="card-styles pa-2">
21 <label class="title text-xs-center">Payment Template</label> 21 <label class="title text-xs-center">Payment Template</label>
22 <v-icon size="24" class="right white--text" @click="paymentInvoiceDialog = false">cancel</v-icon> 22 <v-icon size="24" class="right white--text" @click="paymentInvoiceDialog = false">cancel</v-icon>
23 </v-flex> 23 </v-flex>
24 </v-layout> 24 </v-layout>
25 <paymentTemplate :editPayment="editPayment" @update-Payment="updatePayment" /> 25 <paymentTemplate :editPayment="editPayment" @update-Payment="updatePayment" />
26 </v-card> 26 </v-card>
27 </v-dialog> 27 </v-dialog>
28 28
29 <!-- ****** PROFILE VIEW SECTION DATA ****** --> 29 <!-- ****** PROFILE VIEW SECTION DATA ****** -->
30 30
31 <v-dialog v-model="dialog1" max-width="800px" persistent> 31 <v-dialog v-model="dialog1" max-width="800px" persistent>
32 <v-card flat class="text-xs-center white--text"> 32 <v-card flat class="text-xs-center white--text">
33 <v-layout> 33 <v-layout>
34 <v-flex xs12 class="card-style pa-2"> 34 <v-flex xs12 class="card-style pa-2">
35 <label class="title text-xs-center">View Payments</label> 35 <label class="title text-xs-center">View Payments</label>
36 <v-icon size="24" class="right" color="white" @click="dialog1 = false">cancel</v-icon> 36 <v-icon size="24" class="right" color="white" @click="dialog1 = false">cancel</v-icon>
37 </v-flex> 37 </v-flex>
38 </v-layout> 38 </v-layout>
39 <table class="feeTypeTable tableRsponsive"> 39 <table class="feeTypeTable tableRsponsive">
40 <tr style="color: black"> 40 <tr style="color: black">
41 <th>#</th> 41 <th>#</th>
42 <th>Date</th> 42 <th>Date</th>
43 <th>Paid By</th> 43 <th>Paid By</th>
44 <th>Payment Amount</th> 44 <th>Payment Amount</th>
45 <th>Weaver</th> 45 <th>Weaver</th>
46 <th>Action</th> 46 <th>Action</th>
47 </tr> 47 </tr>
48 <tr v-if="editedItem.paymentStatus != 'NOT_PAID'"> 48 <tr v-if="editedItem.paymentStatus != 'NOT_PAID'">
49 <td style="width:40px ; color:black" class="tdFeeType">1</td> 49 <td style="width:40px ; color:black" class="tdFeeType">1</td>
50 <td style="width:120px; color:black" class="tdFeeType">{{dates( editedItem.date) }}</td> 50 <td style="width:120px; color:black" class="tdFeeType">{{dates( editedItem.date) }}</td>
51 <td style="width:120px; color:black" class="tdFeeType">{{ editedItem.paymentMethod }}</td> 51 <td style="width:120px; color:black" class="tdFeeType">{{ editedItem.paymentMethod }}</td>
52 <td style="width:120px; color:black" class="tdFeeType">{{ editedItem.totalPaidAmount }}</td> 52 <td style="width:120px; color:black" class="tdFeeType">{{ editedItem.totalPaidAmount }}</td>
53 <td style="width:120px; color:black" class="tdFeeType">{{ editedItem.totalDiscount}}</td> 53 <td style="width:120px; color:black" class="tdFeeType">{{ editedItem.totalDiscount}}</td>
54 <td class="text-xs-center td td-row"> 54 <td class="text-xs-center td td-row">
55 <router-link 55 <router-link
56 :to="{ name:'View Payment Invoice',params: { viewPaymentInvoiceId:editedItem._id } }" 56 :to="{ name:'View Payment Invoice',params: { viewPaymentInvoiceId:editedItem._id } }"
57 > 57 >
58 <v-tooltip top> 58 <v-tooltip top>
59 <img 59 <img
60 slot="activator" 60 slot="activator"
61 style="cursor:pointer; width:25px; height:25px; " 61 style="cursor:pointer; width:25px; height:25px; "
62 class="mr-3" 62 class="mr-3"
63 src="/static/icon/view.png" 63 src="/static/icon/view.png"
64 /> 64 />
65 <span>View</span> 65 <span>View</span>
66 </v-tooltip> 66 </v-tooltip>
67 </router-link> 67 </router-link>
68 <v-tooltip top> 68 <v-tooltip top>
69 <img 69 <img
70 slot="activator" 70 slot="activator"
71 style="cursor:pointer;width:20px; height:20px; " 71 style="cursor:pointer;width:20px; height:20px; "
72 class="mr-3" 72 class="mr-3"
73 @click="deletePayment(editedItem)" 73 @click="deletePayment(editedItem)"
74 src="/static/icon/delete.png" 74 src="/static/icon/delete.png"
75 /> 75 />
76 <span>Delete</span> 76 <span>Delete</span>
77 </v-tooltip> 77 </v-tooltip>
78 </td> 78 </td>
79 </tr> 79 </tr>
80 <tr v-if="editedItem.paymentStatus == 'NOT_PAID'"> 80 <tr v-if="editedItem.paymentStatus == 'NOT_PAID'">
81 <td style="width:40px ; color:black" class="tdFeeType'">-</td> 81 <td style="width:40px ; color:black" class="tdFeeType'">-</td>
82 <td style="width:120px; color:black" class="tdFeeType">-</td> 82 <td style="width:120px; color:black" class="tdFeeType">-</td>
83 <td style="width:120px; color:black" class="tdFeeType">-</td> 83 <td style="width:120px; color:black" class="tdFeeType">-</td>
84 <td style="width:120px; color:black" class="tdFeeType">-</td> 84 <td style="width:120px; color:black" class="tdFeeType">-</td>
85 <td style="width:120px; color:black" class="tdFeeType">-</td> 85 <td style="width:120px; color:black" class="tdFeeType">-</td>
86 <td class="text-xs-center td td-row"></td> 86 <td class="text-xs-center td td-row"></td>
87 </tr> 87 </tr>
88 </table> 88 </table>
89 </v-card> 89 </v-card>
90 </v-dialog> 90 </v-dialog>
91 91
92 <!-- ****** Invoice Table ****** --> 92 <!-- ****** Invoice Table ****** -->
93 <v-toolbar color="transparent" flat> 93 <v-toolbar color="transparent" flat>
94 <v-btn 94 <v-btn
95 fab 95 fab
96 dark 96 dark
97 class="open-dialog-button hidden-xl-only hidden-md-only hidden-lg-only" 97 class="open-dialog-button hidden-xl-only hidden-md-only hidden-lg-only"
98 small 98 small
99 @click="addInvoiceDialog = true" 99 @click="addInvoiceDialog = true"
100 > 100 >
101 <v-icon dark>add</v-icon> 101 <v-icon dark>add</v-icon>
102 </v-btn> 102 </v-btn>
103 <v-btn 103 <v-btn
104 round 104 round
105 class="open-dialog-button hidden-sm-only hidden-xs-only" 105 class="open-dialog-button hidden-sm-only hidden-xs-only"
106 dark 106 dark
107 @click="addInvoiceDialog = true" 107 @click="addInvoiceDialog = true"
108 > 108 >
109 <v-icon class="white--text pr-1" size="20">add</v-icon>Add Invoice 109 <v-icon class="white--text pr-1" size="20">add</v-icon>Add Invoice
110 </v-btn> 110 </v-btn>
111 <v-spacer></v-spacer> 111 <v-spacer></v-spacer>
112 <v-card-title class="body-1" v-show="show"> 112 <v-card-title class="body-1" v-show="show">
113 <v-btn icon large flat @click="displaySearch"> 113 <v-btn icon large flat @click="displaySearch">
114 <v-avatar size="27"> 114 <v-avatar size="27">
115 <img src="/static/icon/search.png" alt="icon" /> 115 <img src="/static/icon/search.png" alt="icon" />
116 </v-avatar> 116 </v-avatar>
117 </v-btn> 117 </v-btn>
118 </v-card-title> 118 </v-card-title>
119 <v-flex xs8 sm8 md3 lg2 v-if="showSearch"> 119 <v-flex xs8 sm8 md3 lg2 v-if="showSearch">
120 <v-layout> 120 <v-layout>
121 <v-text-field 121 <v-text-field
122 autofocus 122 autofocus
123 v-model="search" 123 v-model="search"
124 label="Search" 124 label="Search"
125 prepend-inner-icon="search" 125 prepend-inner-icon="search"
126 color="primary" 126 color="primary"
127 ></v-text-field> 127 ></v-text-field>
128 <v-icon @click="closeSearch" color="error">close</v-icon> 128 <v-icon @click="closeSearch" color="error">close</v-icon>
129 </v-layout> 129 </v-layout>
130 </v-flex> 130 </v-flex>
131 </v-toolbar> 131 </v-toolbar>
132 <v-data-table 132 <v-data-table
133 :headers="headers" 133 :headers="headers"
134 :items="invoiceList" 134 :items="invoiceList"
135 :pagination.sync="pagination" 135 :pagination.sync="pagination"
136 :search="search" 136 :search="search"
137 > 137 >
138 <template slot="items" slot-scope="props"> 138 <template slot="items" slot-scope="props">
139 <tr class="tr"> 139 <tr class="tr">
140 <td class="td td-row">{{ props.index + 1 }}</td> 140 <td class="td td-row">{{ props.index + 1 }}</td>
141 <td class="text-xs-center td td-row">{{ props.item.studentId.name }}</td> 141 <td class="text-xs-center td td-row">{{ props.item.studentId.name }}</td>
142 <td class="text-xs-center td td-row">{{ props.item.classId.classNum }}</td> 142 <td class="text-xs-center td td-row">{{ props.item.classId.classNum }}</td>
143 <td class="text-xs-center td td-row">{{ props.item.totalAmount }}</td> 143 <td class="text-xs-center td td-row">{{ props.item.totalAmount }}</td>
144 <td class="text-xs-center td td-row">{{ props.item.totalDiscount}}</td> 144 <td class="text-xs-center td td-row">{{ props.item.totalDiscount}}</td>
145 <td 145 <td
146 class="text-xs-center td td-row" 146 class="text-xs-center td td-row"
147 >{{ props.item.totalPaidAmount ? props.item.totalPaidAmount : 0}}</td> 147 >{{ props.item.totalPaidAmount ? props.item.totalPaidAmount : 0}}</td>
148 <td 148 <td
149 class="text-xs-center td td-row" 149 class="text-xs-center td td-row"
150 >{{ props.item.totalPaidAmount ? props.item.totalSubTotal - props.item.totalPaidAmount : props.item.totalSubTotal }}</td> 150 >{{ props.item.totalPaidAmount ? props.item.totalSubTotal - props.item.totalPaidAmount : props.item.totalSubTotal }}</td>
151 <td class="text-xs-center td td-row" v-if="props.item.paymentStatus === 'NOT_PAID'"> 151 <td class="text-xs-center td td-row" v-if="props.item.paymentStatus === 'NOT_PAID'">
152 <span 152 <span
153 class="red lighten-1 py-1 px-2 white--text paymentStatus" 153 class="red lighten-1 py-1 px-2 white--text paymentStatus"
154 >{{ props.item.paymentStatus }}</span> 154 >{{ props.item.paymentStatus }}</span>
155 </td> 155 </td>
156 <td class="text-xs-center td td-row" v-if="props.item.paymentStatus === 'FULLY_PAID'"> 156 <td class="text-xs-center td td-row" v-if="props.item.paymentStatus === 'FULLY_PAID'">
157 <span 157 <span
158 class="green lighten-1 py-1 px-2 white--text paymentStatus" 158 class="green lighten-1 py-1 px-2 white--text paymentStatus"
159 >{{ props.item.paymentStatus }}</span> 159 >{{ props.item.paymentStatus }}</span>
160 </td> 160 </td>
161 <td class="text-xs-center td td-row" v-if="props.item.paymentStatus === 'PARTIALLY_PAID'"> 161 <td class="text-xs-center td td-row" v-if="props.item.paymentStatus === 'PARTIALLY_PAID'">
162 <span 162 <span
163 class="yellow darken-3 py-1 px-2 white--text paymentStatus" 163 class="yellow darken-3 py-1 px-2 white--text paymentStatus"
164 >{{ props.item.paymentStatus }}</span> 164 >{{ props.item.paymentStatus }}</span>
165 </td> 165 </td>
166 <td class="text-xs-center td td-row">{{ dates(props.item.date) }}</td> 166 <td class="text-xs-center td td-row">{{ dates(props.item.date) }}</td>
167 <td class="text-xs-center td td-row"> 167 <td class="text-xs-center td td-row">
168 <router-link :to="{ name:'View Invoice',params: { viewInvoiceId:props.item._id } }"> 168 <router-link :to="{ name:'View Invoice',params: { viewInvoiceId:props.item._id } }">
169 <v-tooltip top> 169 <v-tooltip top>
170 <img 170 <img
171 slot="activator" 171 slot="activator"
172 style="cursor:pointer; width:25px; height:25px; " 172 style="cursor:pointer; width:25px; height:25px; "
173 class="mr-3" 173 class="mr-3"
174 src="/static/icon/view.png" 174 src="/static/icon/view.png"
175 /> 175 />
176 <span>View</span> 176 <span>View</span>
177 </v-tooltip> 177 </v-tooltip>
178 </router-link> 178 </router-link>
179 <span v-if="props.item.paymentStatus === 'NOT_PAID'"> 179 <span v-if="props.item.paymentStatus === 'NOT_PAID'">
180 <!-- <router-link :to="{ name: 'Edit Invoice',params: { invoiceid: editData._id } }"> 180 <!-- <router-link :to="{ name: 'Edit Invoice',params: { invoiceid: editData._id } }">
181 <v-tooltip top> 181 <v-tooltip top>
182 <img 182 <img
183 slot="activator" 183 slot="activator"
184 style="cursor:pointer; width:20px; height:18px; " 184 style="cursor:pointer; width:20px; height:18px; "
185 class="mr-3" 185 class="mr-3"
186 @click="editItem(props.item)" 186 @click="editItem(props.item)"
187 src="/static/icon/edit.png" 187 src="/static/icon/edit.png"
188 /> 188 />
189 <span>Edit</span> 189 <span>Edit</span>
190 </v-tooltip> 190 </v-tooltip>
191 </router-link>--> 191 </router-link>-->
192 <v-tooltip top> 192 <v-tooltip top>
193 <img 193 <img
194 slot="activator" 194 slot="activator"
195 style="cursor:pointer; width:20px; height:18px; " 195 style="cursor:pointer; width:20px; height:18px; "
196 class="mr-3" 196 class="mr-3"
197 @click="editItem(props.item)" 197 @click="editItem(props.item)"
198 src="/static/icon/edit.png" 198 src="/static/icon/edit.png"
199 /> 199 />
200 <span>Edit</span> 200 <span>Edit</span>
201 </v-tooltip> 201 </v-tooltip>
202 <v-tooltip top> 202 <v-tooltip top>
203 <img 203 <img
204 slot="activator" 204 slot="activator"
205 style="cursor:pointer;width:20px; height:20px; " 205 style="cursor:pointer;width:20px; height:20px; "
206 class="mr-3" 206 class="mr-3"
207 @click="deleteItem(props.item)" 207 @click="deleteItem(props.item)"
208 src="/static/icon/delete.png" 208 src="/static/icon/delete.png"
209 /> 209 />
210 <span>Delete</span> 210 <span>Delete</span>
211 </v-tooltip> 211 </v-tooltip>
212 <v-tooltip top> 212 <v-tooltip top>
213 <img 213 <img
214 slot="activator" 214 slot="activator"
215 style="cursor:pointer; width:20px; height:18px; " 215 style="cursor:pointer; width:20px; height:18px; "
216 class="mr-3" 216 class="mr-3"
217 @click="paymentItem(props.item)" 217 @click="paymentItem(props.item)"
218 src="/static/schoolIcons/Account.png" 218 src="/static/schoolIcons/Account.png"
219 /> 219 />
220 <span>Payment</span> 220 <span>Payment</span>
221 </v-tooltip> 221 </v-tooltip>
222 </span> 222 </span>
223 <span v-if="props.item.paymentStatus === 'PARTIALLY_PAID'"> 223 <span v-if="props.item.paymentStatus === 'PARTIALLY_PAID'">
224 <v-tooltip top> 224 <v-tooltip top>
225 <img 225 <img
226 slot="activator" 226 slot="activator"
227 style="cursor:pointer; width:20px; height:18px; " 227 style="cursor:pointer; width:20px; height:18px; "
228 class="mr-3" 228 class="mr-3"
229 @click="paymentItem(props.item)" 229 @click="paymentItem(props.item)"
230 src="/static/schoolIcons/Account.png" 230 src="/static/schoolIcons/Account.png"
231 /> 231 />
232 <span>Payment</span> 232 <span>Payment</span>
233 </v-tooltip> 233 </v-tooltip>
234 </span> 234 </span>
235 <v-tooltip top> 235 <v-tooltip top>
236 <img 236 <img
237 slot="activator" 237 slot="activator"
238 style="cursor:pointer; width:18px; height:17px;" 238 style="cursor:pointer; width:18px; height:17px;"
239 @click="profile(props.item)" 239 @click="profile(props.item)"
240 src="/static/icon/eye1.png" 240 src="/static/icon/eye1.png"
241 /> 241 />
242 <span>View Payment</span> 242 <span>View Payment</span>
243 </v-tooltip> 243 </v-tooltip>
244 </td> 244 </td>
245 </tr> 245 </tr>
246 </template> 246 </template>
247 <v-alert 247 <v-alert
248 slot="no-results" 248 slot="no-results"
249 :value="true" 249 :value="true"
250 color="error" 250 color="error"
251 icon="warning" 251 icon="warning"
252 >Your search for "{{ search }}" found no results.</v-alert> 252 >Your search for "{{ search }}" found no results.</v-alert>
253 </v-data-table> 253 </v-data-table>
254 254
255 <!-- ****** ADD INVOICE ****** --> 255 <!-- ****** ADD INVOICE ****** -->
256 <v-snackbar 256 <v-snackbar
257 :timeout="timeout" 257 :timeout="timeout"
258 :top="y === 'top'" 258 :top="y === 'top'"
259 :right="x === 'right'" 259 :right="x === 'right'"
260 :vertical="mode === 'vertical'" 260 :vertical="mode === 'vertical'"
261 v-model="snackbar" 261 v-model="snackbar"
262 :color="color" 262 :color="color"
263 >{{ text }}</v-snackbar> 263 >{{ text }}</v-snackbar>
264 <v-dialog v-model="addInvoiceDialog" v-if="addInvoiceDialog" persistent> 264 <v-dialog v-model="addInvoiceDialog" v-if="addInvoiceDialog" persistent>
265 <v-card flat class="text-xs-center white--text"> 265 <v-card flat class="text-xs-center white--text">
266 <v-layout> 266 <v-layout>
267 <v-flex xs12 class="card-styles pa-2"> 267 <v-flex xs12 class="card-styles pa-2">
268 <label class="title text-xs-center">Add Invoice</label> 268 <label class="title text-xs-center">Add Invoice</label>
269 <v-icon size="24" class="right white--text" @click="closeAddInvoiceModel">cancel</v-icon> 269 <v-icon size="24" class="right white--text" @click="closeAddInvoiceModel">cancel</v-icon>
270 </v-flex> 270 </v-flex>
271 </v-layout> 271 </v-layout>
272 <v-flex xs12 sm12> 272 <v-flex xs12 sm12>
273 <v-container fluid grid-list-md> 273 <v-container fluid grid-list-md>
274 <v-layout wrap> 274 <v-layout wrap>
275 <v-flex xs12 sm12 md5> 275 <v-flex xs12 sm12 md5>
276 <v-card flat> 276 <v-card flat>
277 <v-toolbar dark class="card-styles" flat> 277 <v-toolbar dark class="card-styles" flat>
278 <v-spacer></v-spacer> 278 <v-spacer></v-spacer>
279 <h3>Invoice</h3> 279 <h3>Invoice</h3>
280 <v-spacer></v-spacer> 280 <v-spacer></v-spacer>
281 </v-toolbar> 281 </v-toolbar>
282 <v-form ref="form" v-model="valid" lazy-validation class="py-4"> 282 <v-form ref="form" v-model="valid" lazy-validation class="py-4">
283 <v-layout> 283 <v-layout>
284 <v-flex xs4 class="pt-4 subheading"> 284 <v-flex xs4 class="pt-4 subheading">
285 <label class="right hidden-xs-only hidden-sm-only">Select Class:</label> 285 <label class="right hidden-xs-only hidden-sm-only">Select Class:</label>
286 <label class="right hidden-lg-only hidden-md-only hidden-xl-only">Class:</label> 286 <label class="right hidden-lg-only hidden-md-only hidden-xl-only">Class:</label>
287 </v-flex> 287 </v-flex>
288 <v-flex xs6 class="ml-3"> 288 <v-flex xs6 class="ml-3">
289 <v-select 289 <v-select
290 :items="addclass" 290 :items="addclass"
291 label="Select Class" 291 label="Select Class"
292 v-model="invoiceData.classNum" 292 v-model="invoiceData.classNum"
293 item-text="classNum" 293 item-text="classNum"
294 item-value="_id" 294 item-value="_id"
295 @change="getAllStudents()" 295 @change="getAllStudents()"
296 :rules="classRules" 296 :rules="classRules"
297 required 297 required
298 ></v-select> 298 ></v-select>
299 </v-flex> 299 </v-flex>
300 </v-layout> 300 </v-layout>
301 <v-layout> 301 <v-layout>
302 <v-flex xs4 class="pt-4 subheading"> 302 <v-flex xs4 class="pt-4 subheading">
303 <label class="right hidden-xs-only hidden-sm-only">Select Student:</label> 303 <label class="right hidden-xs-only hidden-sm-only">Select Student:</label>
304 <label class="right hidden-lg-only hidden-md-only hidden-xl-only">Student:</label> 304 <label class="right hidden-lg-only hidden-md-only hidden-xl-only">Student:</label>
305 </v-flex> 305 </v-flex>
306 <v-flex xs6 class="ml-3"> 306 <v-flex xs6 class="ml-3">
307 <v-select 307 <v-select
308 :items="studentList" 308 :items="studentList"
309 label="Select Student" 309 label="Select Student"
310 v-model="invoiceData.studentId" 310 v-model="invoiceData.studentId"
311 item-text="name" 311 item-text="name"
312 item-value="_id" 312 item-value="_id"
313 :rules="inchargeRules" 313 :rules="inchargeRules"
314 @change="selectAllStudent()" 314 @change="selectAllStudent()"
315 required 315 required
316 ></v-select> 316 ></v-select>
317 </v-flex> 317 </v-flex>
318 </v-layout> 318 </v-layout>
319 <v-layout> 319 <v-layout>
320 <v-flex xs4 class="pt-4 subheading"> 320 <v-flex xs4 class="pt-4 subheading">
321 <label class="right">Date:</label> 321 <label class="right">Date:</label>
322 </v-flex> 322 </v-flex>
323 <v-flex xs6 class="ml-3"> 323 <v-flex xs6 class="ml-3">
324 <v-menu 324 <v-menu
325 ref="menu1" 325 ref="menu1"
326 :close-on-content-click="false" 326 :close-on-content-click="false"
327 v-model="menu1" 327 v-model="menu1"
328 :nudge-right="40" 328 :nudge-right="40"
329 lazy 329 lazy
330 :return-value.sync="invoiceData.date" 330 :return-value.sync="invoiceData.date"
331 transition="scale-transition" 331 transition="scale-transition"
332 offset-y 332 offset-y
333 full-width 333 full-width
334 min-width="290px" 334 min-width="290px"
335 > 335 >
336 <v-text-field 336 <v-text-field
337 slot="activator" 337 slot="activator"
338 :rules="dateRules" 338 :rules="dateRules"
339 v-model="invoiceData.date" 339 v-model="invoiceData.date"
340 placeholder="Select date" 340 placeholder="Select date"
341 ></v-text-field> 341 ></v-text-field>
342 <v-date-picker 342 <v-date-picker
343 v-model="invoiceData.date" 343 v-model="invoiceData.date"
344 @input="$refs.menu1.save(invoiceData.date)" 344 @input="$refs.menu1.save(invoiceData.date)"
345 ></v-date-picker> 345 ></v-date-picker>
346 </v-menu> 346 </v-menu>
347 </v-flex> 347 </v-flex>
348 </v-layout> 348 </v-layout>
349 <v-layout> 349 <v-layout>
350 <v-flex xs4 class="pt-4 subheading"> 350 <v-flex xs4 class="pt-4 subheading">
351 <label class="right hidden-xs-only hidden-sm-only">Payment Status:</label> 351 <label class="right hidden-xs-only hidden-sm-only">Payment Status:</label>
352 <label class="right hidden-lg-only hidden-md-only hidden-xl-only">Payment:</label> 352 <label class="right hidden-lg-only hidden-md-only hidden-xl-only">Payment:</label>
353 </v-flex> 353 </v-flex>
354 <v-flex xs6 class="ml-3"> 354 <v-flex xs6 class="ml-3">
355 <v-select 355 <v-select
356 :items="paymentStatus" 356 :items="paymentStatus"
357 v-model="invoiceData.paymentStatus" 357 v-model="invoiceData.paymentStatus"
358 item-text="name" 358 item-text="name"
359 item-value="value" 359 item-value="value"
360 label="Select Payment Status" 360 label="Select Payment Status"
361 @change="getPayMethodList" 361 @change="getPayMethodList"
362 :rules="paymentStatusRules" 362 :rules="paymentStatusRules"
363 required 363 required
364 ></v-select> 364 ></v-select>
365 </v-flex> 365 </v-flex>
366 </v-layout> 366 </v-layout>
367 <v-layout v-show="showPayMethods"> 367 <v-layout v-show="showPayMethods">
368 <v-flex xs4 class="pt-4 subheading"> 368 <v-flex xs4 class="pt-4 subheading">
369 <label class="right">Payment Method:</label> 369 <label class="right">Payment Method:</label>
370 </v-flex> 370 </v-flex>
371 <v-flex xs6 class="ml-3"> 371 <v-flex xs6 class="ml-3">
372 <v-select 372 <v-select
373 :items="paymentMethods" 373 :items="paymentMethods"
374 v-model="invoiceData.paymentMethod" 374 v-model="invoiceData.paymentMethod"
375 :rules="paymentMethodRules" 375 :rules="paymentMethodRules"
376 label="Select Payment Method" 376 label="Select Payment Method"
377 required 377 required
378 ></v-select> 378 ></v-select>
379 </v-flex> 379 </v-flex>
380 </v-layout> 380 </v-layout>
381 <v-layout> 381 <v-layout>
382 <v-flex xs12 sm11> 382 <v-flex xs12 sm11>
383 <v-card-actions> 383 <v-card-actions>
384 <v-spacer></v-spacer> 384 <v-spacer></v-spacer>
385 <v-btn @click="clear" round dark class="clear-button">clear</v-btn> 385 <v-btn @click="clear" round dark class="clear-button">clear</v-btn>
386 <v-btn 386 <v-btn
387 @click="submit" 387 @click="submit"
388 round 388 round
389 dark 389 dark
390 :loading="loading" 390 :loading="loading"
391 class="add-button" 391 class="add-button"
392 >Add</v-btn> 392 >Add</v-btn>
393 </v-card-actions> 393 </v-card-actions>
394 </v-flex> 394 </v-flex>
395 </v-layout> 395 </v-layout>
396 </v-form> 396 </v-form>
397 </v-card> 397 </v-card>
398 </v-flex> 398 </v-flex>
399 <v-flex xs12 sm12 md7> 399 <v-flex xs12 sm12 md7>
400 <v-card> 400 <v-card>
401 <v-toolbar dark class="card-styles" flat> 401 <v-toolbar dark class="card-styles" flat>
402 <v-spacer></v-spacer> 402 <v-spacer></v-spacer>
403 <h3>Fee Type List</h3> 403 <h3>Fee Type List</h3>
404 <v-spacer></v-spacer> 404 <v-spacer></v-spacer>
405 </v-toolbar> 405 </v-toolbar>
406 <v-layout> 406 <v-layout>
407 <v-flex xs4 sm2 class="mt-4 hidden-xs-only hidden-sm-only"> 407 <v-flex xs4 sm2 class="mt-4 hidden-xs-only hidden-sm-only">
408 <label class="right title">Fee Type:</label> 408 <label class="right title">Fee Type:</label>
409 </v-flex> 409 </v-flex>
410 <v-flex xs8 sm4> 410 <v-flex xs8 sm4>
411 <v-select 411 <v-select
412 :items="feeTypes" 412 :items="feeTypes"
413 v-model="feeType.feeTypeName" 413 v-model="feeType.feeTypeName"
414 item-text="feeType" 414 item-text="feeType"
415 item-value="feeType" 415 item-value="feeType"
416 label="Select Fee Type" 416 label="Select Fee Type"
417 required 417 required
418 ></v-select> 418 ></v-select>
419 </v-flex> 419 </v-flex>
420 <v-flex xs4 sm6> 420 <v-flex xs4 sm6>
421 <v-btn round dark class="right add-button" @click="selectFeeType">ADD</v-btn> 421 <v-btn round dark class="right add-button" @click="selectFeeType">ADD</v-btn>
422 </v-flex> 422 </v-flex>
423 </v-layout> 423 </v-layout>
424 <table class="feeTypeTable tableRsponsive"> 424 <table class="feeTypeTable tableRsponsive">
425 <tr class="info white--text"> 425 <tr class="info white--text">
426 <th>#</th> 426 <th>#</th>
427 <th>Fee Type</th> 427 <th>Fee Type</th>
428 <th>Amount</th> 428 <th>Amount</th>
429 <th>Discount</th> 429 <th>Discount</th>
430 <th>Subtotal</th> 430 <th>Subtotal</th>
431 <th>Paid Amount</th> 431 <th>Paid Amount</th>
432 <th>Action</th> 432 <th>Action</th>
433 </tr> 433 </tr>
434 <tr 434 <tr
435 v-show="showFeeType" 435 v-show="showFeeType"
436 v-for="(feeType, index) in feeTypeData" 436 v-for="(feeType, index) in feeTypeData"
437 :key="index" 437 :key="index"
438 v-on:keyup="getAmmountDetails(feeType)" 438 v-on:keyup="getAmmountDetails(feeType)"
439 > 439 >
440 <td style="width:40px" class="tdFeeType">{{ index + 1 }}</td> 440 <td style="width:40px" class="tdFeeType">{{ index + 1 }}</td>
441 <td 441 <td
442 style="width:120px" 442 style="width:120px"
443 class="tdFeeType" 443 class="tdFeeType"
444 :rules="feeTypeNameRules" 444 :rules="feeTypeNameRules"
445 >{{ feeType.feeTypeName }}</td> 445 >{{ feeType.feeTypeName }}</td>
446 <td class="tdFeeType"> 446 <td class="tdFeeType">
447 <v-text-field 447 <v-text-field
448 placeholder="fill your Amount" 448 placeholder="fill your Amount"
449 v-model="feeType.amount" 449 v-model="feeType.amount"
450 type="number" 450 type="number"
451 :rules="amountRules" 451 :rules="amountRules"
452 required 452 required
453 ></v-text-field> 453 ></v-text-field>
454 </td> 454 </td>
455 <td class="tdFeeType"> 455 <td class="tdFeeType">
456 <v-text-field 456 <v-text-field
457 placeholder="fill your Discount" 457 placeholder="fill your Discount"
458 v-model="feeType.discount" 458 v-model="feeType.discount"
459 type="number" 459 type="number"
460 :rules="discountRules" 460 :rules="discountRules"
461 required 461 required
462 ></v-text-field> 462 ></v-text-field>
463 </td> 463 </td>
464 <td class="tdFeeType" :rules="subtotalRules">{{ feeType.subTotal }}</td> 464 <td class="tdFeeType" :rules="subtotalRules">{{ feeType.subTotal }}</td>
465 <td class="tdFeeType" v-if="invoiceData.paymentStatus === 'NOT_PAID'"> 465 <td class="tdFeeType" v-if="invoiceData.paymentStatus === 'NOT_PAID'">
466 <v-text-field 466 <v-text-field
467 placeholder="fill your Paid Amount" 467 placeholder="fill your Paid Amount"
468 v-model="feeType.paidAmount" 468 v-model="feeType.paidAmount"
469 type="number" 469 type="number"
470 :disabled="disabled" 470 :disabled="disabled"
471 ></v-text-field> 471 ></v-text-field>
472 </td> 472 </td>
473 <td class="tdFeeType" v-if="invoiceData.paymentStatus == ''"> 473 <td class="tdFeeType" v-if="invoiceData.paymentStatus == ''">
474 <v-text-field 474 <v-text-field
475 placeholder="fill your Paid Amount" 475 placeholder="fill your Paid Amount"
476 v-model="feeType.paidAmount" 476 v-model="feeType.paidAmount"
477 type="number" 477 type="number"
478 :disabled="disabled" 478 :disabled="disabled"
479 ></v-text-field> 479 ></v-text-field>
480 </td> 480 </td>
481 <td 481 <td
482 class="tdFeeType" 482 class="tdFeeType"
483 v-if="invoiceData.paymentStatus != 'NOT_PAID' && invoiceData.paymentStatus != ''" 483 v-if="invoiceData.paymentStatus != 'NOT_PAID' && invoiceData.paymentStatus != ''"
484 > 484 >
485 <v-text-field 485 <v-text-field
486 placeholder="fill your Paid Amount" 486 placeholder="fill your Paid Amount"
487 v-model="feeType.paidAmount" 487 v-model="feeType.paidAmount"
488 type="number" 488 type="number"
489 ></v-text-field> 489 ></v-text-field>
490 </td> 490 </td>
491 <td class="tdFeeType"> 491 <td class="tdFeeType">
492 <v-icon color="error" @click="deleteSelectFee(index,feeType)">delete</v-icon> 492 <v-icon color="error" @click="deleteSelectFee(index,feeType)">delete</v-icon>
493 </td> 493 </td>
494 </tr> 494 </tr>
495 <tfoot> 495 <tfoot>
496 <tr> 496 <tr>
497 <td colspan="2" class="tdFeeType">Total:</td> 497 <td colspan="2" class="tdFeeType">Total:</td>
498 <td class="tdFeeType">{{ feeType.amount }}</td> 498 <td class="tdFeeType">{{ feeType.amount }}</td>
499 <td class="tdFeeType">{{ feeType.discount }}</td> 499 <td class="tdFeeType">{{ feeType.discount }}</td>
500 <td class="tdFeeType">{{ feeType.subTotal }}</td> 500 <td class="tdFeeType">{{ feeType.subTotal }}</td>
501 <td class="tdFeeType">{{ feeType.paidAmount }}</td> 501 <td class="tdFeeType">{{ feeType.paidAmount }}</td>
502 <!-- <td class="tdFeeType"> 502 <!-- <td class="tdFeeType">
503 <v-icon color="error" @click="deleteSelectFee(index)">delete</v-icon> 503 <v-icon color="error" @click="deleteSelectFee(index)">delete</v-icon>
504 </td>--> 504 </td>-->
505 </tr> 505 </tr>
506 </tfoot> 506 </tfoot>
507 </table> 507 </table>
508 </v-card> 508 </v-card>
509 </v-flex> 509 </v-flex>
510 </v-layout> 510 </v-layout>
511 </v-container> 511 </v-container>
512 </v-flex> 512 </v-flex>
513 </v-card> 513 </v-card>
514 </v-dialog> 514 </v-dialog>
515 <div class="loader" v-if="showLoader"> 515 <div class="loader" v-if="showLoader">
516 <v-progress-circular indeterminate color="white"></v-progress-circular> 516 <v-progress-circular indeterminate color="white"></v-progress-circular>
517 </div> 517 </div>
518 </v-container> 518 </v-container>
519 </template> 519 </template>
520 520
521 <script> 521 <script>
522 import http from "@/Services/http.js"; 522 import http from "@/Services/http.js";
523 import editInvoice from "./editInvoice"; 523 import editInvoice from "./editInvoice";
524 import paymentTemplate from "./paymentTemplate.vue"; 524 import paymentTemplate from "./paymentTemplate.vue";
525 import moment from "moment"; 525 import moment from "moment";
526 526
527 export default { 527 export default {
528 components: { 528 components: {
529 editInvoice: editInvoice, 529 editInvoice: editInvoice,
530 paymentTemplate: paymentTemplate, 530 paymentTemplate: paymentTemplate,
531 }, 531 },
532 data: () => ({ 532 data: () => ({
533 snackbar: false, 533 snackbar: false,
534 showPayMethods: false, 534 showPayMethods: false,
535 y: "top", 535 y: "top",
536 x: "right", 536 x: "right",
537 mode: "", 537 mode: "",
538 timeout: 5000, 538 timeout: 5000,
539 text: "", 539 text: "",
540 color: "", 540 color: "",
541 show: true, 541 show: true,
542 showSearch: false, 542 showSearch: false,
543 showLoader: false, 543 showLoader: false,
544 loading: false, 544 loading: false,
545 date: null, 545 date: null,
546 search: "", 546 search: "",
547 dialog: false, 547 dialog: false,
548 dialog1: false, 548 dialog1: false,
549 valid: true, 549 valid: true,
550 validEdit: true, 550 validEdit: true,
551 isActive: true, 551 isActive: true,
552 newActive: false, 552 newActive: false,
553 showFeeType: true, 553 showFeeType: true,
554 addInvoiceDialog: false, 554 addInvoiceDialog: false,
555 editInvoiceDialog: false, 555 editInvoiceDialog: false,
556 paymentInvoiceDialog: false, 556 paymentInvoiceDialog: false,
557 disabled: true, 557 disabled: true,
558 details: [], 558 details: [],
559 feeTypes: [], 559 feeTypes: [],
560 invoiceData: [], 560 invoiceData: [],
561 editData: [], 561 editData: [],
562 invoiceList: [], 562 invoiceList: [],
563 editPayment: { 563 editPayment: {
564 studentId: { 564 studentId: {
565 name: "", 565 name: "",
566 rollNo: "", 566 rollNo: "",
567 }, 567 },
568 classId: { 568 classId: {
569 classNum: "", 569 classNum: "",
570 }, 570 },
571 }, 571 },
572 menu1: false, 572 menu1: false,
573 paymentMethods: ["Cash", "Cheque"], 573 paymentMethods: ["Cash", "Cheque"],
574 feeType: { 574 feeType: {
575 amount: "0.00", 575 amount: "0.00",
576 discount: "0.00", 576 discount: "0.00",
577 subTotal: "0.00", 577 subTotal: "0.00",
578 paidAmount: "0.00", 578 paidAmount: "0.00",
579 feeTypeName: "", 579 feeTypeName: "",
580 }, 580 },
581 581
582 feeTypeData: [], 582 feeTypeData: [],
583 editFeeTypeData: [], 583 editFeeTypeData: [],
584 paymentFeeTypeData: [], 584 paymentFeeTypeData: [],
585 pagination: { 585 pagination: {
586 rowsPerPage: 10, 586 rowsPerPage: 10,
587 }, 587 },
588 classRules: [(v) => !!v || " Class Name is required"], 588 classRules: [(v) => !!v || " Class Name is required"],
589 inchargeRules: [(v) => !!v || "Student Name is required"], 589 inchargeRules: [(v) => !!v || "Student Name is required"],
590 dateRules: [(v) => !!v || " Date is required"], 590 dateRules: [(v) => !!v || " Date is required"],
591 paymentStatusRules: [(v) => !!v || "Payment Status is required"], 591 paymentStatusRules: [(v) => !!v || "Payment Status is required"],
592 paymentMethodsRules: [(v) => !!v || "payment Method is required"], 592 paymentMethodsRules: [(v) => !!v || "payment Method is required"],
593 feeTypeRules: [(v) => !!v || "Fee Type is required"], 593 feeTypeRules: [(v) => !!v || "Fee Type is required"],
594 feeTypeNameRules: [(v) => !!v || "Fee Type Name is required"], 594 feeTypeNameRules: [(v) => !!v || "Fee Type Name is required"],
595 amountRules: [(v) => !!v || "Amount is required"], 595 amountRules: [(v) => !!v || "Amount is required"],
596 discountRules: [(v) => !!v || "Discount is required"], 596 discountRules: [(v) => !!v || "Discount is required"],
597 subtotalRules: [(v) => !!v || "Subtotal is required"], 597 subtotalRules: [(v) => !!v || "Subtotal is required"],
598 paymentRules: [(v) => !!v || "Payment is required"], 598 paymentRules: [(v) => !!v || "Payment is required"],
599 paidAmountRules: [(v) => !!v || "Paid Amount is required"], 599 paidAmountRules: [(v) => !!v || "Paid Amount is required"],
600 paymentMethodRules: [], 600 paymentMethodRules: [],
601 headers: [ 601 headers: [
602 { 602 {
603 text: "No", 603 text: "No",
604 align: "", 604 align: "",
605 sortable: false, 605 sortable: false,
606 value: "No", 606 value: "No",
607 }, 607 },
608 { 608 {
609 text: "Student", 609 text: "Student",
610 value: "name", 610 value: "name",
611 sortable: false, 611 sortable: false,
612 align: "center", 612 align: "center",
613 }, 613 },
614 { text: "Class", value: "class", sortable: false, align: "center" }, 614 { text: "Class", value: "class", sortable: false, align: "center" },
615 { text: "Total", value: "subtotal", sortable: false, align: "center" }, 615 { text: "Total", value: "subtotal", sortable: false, align: "center" },
616 { 616 {
617 text: "Discount", 617 text: "Discount",
618 value: "discount", 618 value: "discount",
619 sortable: false, 619 sortable: false,
620 align: "center", 620 align: "center",
621 }, 621 },
622 { 622 {
623 text: "Paid Amount", 623 text: "Paid Amount",
624 value: "paidAmount", 624 value: "paidAmount",
625 sortable: false, 625 sortable: false,
626 align: "center", 626 align: "center",
627 }, 627 },
628 { 628 {
629 text: "Balance", 629 text: "Balance",
630 value: "Balance", 630 value: "Balance",
631 sortable: false, 631 sortable: false,
632 align: "center", 632 align: "center",
633 }, 633 },
634 { 634 {
635 text: "Status", 635 text: "Status",
636 value: "paymentStatus", 636 value: "paymentStatus",
637 sortable: false, 637 sortable: false,
638 align: "center", 638 align: "center",
639 }, 639 },
640 { 640 {
641 text: "Date", 641 text: "Date",
642 value: "date", 642 value: "date",
643 sortable: false, 643 sortable: false,
644 align: "center", 644 align: "center",
645 }, 645 },
646 { text: "Action", value: "", sortable: false, align: "center" }, 646 { text: "Action", value: "", sortable: false, align: "center" },
647 ], 647 ],
648 648
649 studentId: { 649 studentId: {
650 name: "", 650 name: "",
651 }, 651 },
652 token: "", 652 token: "",
653 editedItem: {}, 653 editedItem: {},
654 invoiceData: { 654 invoiceData: {
655 paymentStatus: "", 655 paymentStatus: "",
656 students: [], 656 students: [],
657 }, 657 },
658 addclass: [], 658 addclass: [],
659 studentList: [], 659 studentList: [],
660 paymentStatus: [ 660 paymentStatus: [
661 { 661 {
662 name: "Not Paid", 662 name: "Not Paid",
663 value: "NOT_PAID", 663 value: "NOT_PAID",
664 }, 664 },
665 { 665 {
666 name: "Partially Paid", 666 name: "Partially Paid",
667 value: "PARTIALLY_PAID", 667 value: "PARTIALLY_PAID",
668 }, 668 },
669 { 669 {
670 name: "Fully Paid", 670 name: "Fully Paid",
671 value: "FULLY_PAID", 671 value: "FULLY_PAID",
672 }, 672 },
673 ], 673 ],
674 }), 674 }),
675 watch: { 675 watch: {
676 addInvoiceDialog: function (val) { 676 addInvoiceDialog: function (val) {
677 if (!val) { 677 if (!val) {
678 this.invoiceData = []; 678 this.invoiceData = [];
679 this.menu1 = false; 679 this.menu1 = false;
680 this.feeType = []; 680 this.feeType = [];
681 this.feeTypeData = []; 681 this.feeTypeData = [];
682 } 682 }
683 }, 683 },
684 }, 684 },
685 methods: { 685 methods: {
686 save(date) { 686 save(date) {
687 this.$refs.menu1.save(date); 687 this.$refs.menu1.save(date);
688 }, 688 },
689 dates: function (date) { 689 dates: function (date) {
690 return moment(date).format("MMMM DD, YYYY"); 690 return moment(date).format("MMMM DD, YYYY");
691 }, 691 },
692 profile(item) { 692 profile(item) {
693 // console.log("item", item); 693 // console.log("item", item);
694 this.editedIndex = this.invoiceList.indexOf(item); 694 this.editedIndex = this.invoiceList.indexOf(item);
695 this.editedItem = Object.assign({}, item); 695 this.editedItem = Object.assign({}, item);
696 this.dialog1 = true;
697 }, 696 this.dialog1 = true;
698 editItem(item) { 697 },
699 this.editedIndex = this.invoiceList.indexOf(item); 698 editItem(item) {
700 this.editData = Object.assign({}, item); 699 this.editedIndex = this.invoiceList.indexOf(item);
701 this.editData.date = this.editData.date.slice(0, 10); 700 this.editData = Object.assign({}, item);
702 // console.log("invoiceData", this.editData); 701 this.editData.date = this.editData.date.slice(0, 10);
703 this.editFeeTypeData = this.editData.feeType; 702 // console.log("invoiceData", this.editData);
704 this.editInvoiceDialog = true; 703 this.editFeeTypeData = this.editData.feeType;
705 }, 704 this.editInvoiceDialog = true;
706 paymentItem(item) { 705 },
707 // console.log("item", item); 706 paymentItem(item) {
708 this.editedIndex = this.invoiceList.indexOf(item); 707 // console.log("item", item);
709 this.editPayment = Object.assign({}, item); 708 this.editedIndex = this.invoiceList.indexOf(item);
710 this.editPayment.date = this.editPayment.date.slice(0, 10); 709 this.editPayment = Object.assign({}, item);
711 if (this.editPayment.paymentStatus == "NOT_PAID") { 710 this.editPayment.date = this.editPayment.date.slice(0, 10);
712 for (let i = 0; i < this.editPayment.feeType.length; i++) { 711 if (this.editPayment.paymentStatus == "NOT_PAID") {
713 this.editPayment.feeType[i].paidAmount = "0.00"; 712 for (let i = 0; i < this.editPayment.feeType.length; i++) {
714 } 713 this.editPayment.feeType[i].paidAmount = "0.00";
715 } 714 }
716 // console.log("this.editPayment", this.editPayment); 715 }
717 this.paymentFeeTypeData = this.editPayment.feeType; 716 // console.log("this.editPayment", this.editPayment);
718 this.paymentInvoiceDialog = true; 717 this.paymentFeeTypeData = this.editPayment.feeType;
719 }, 718 this.paymentInvoiceDialog = true;
720 deleteItem(item) { 719 },
721 let deleteInvoice = { 720 deleteItem(item) {
722 invoiceId: item._id, 721 let deleteInvoice = {
723 }; 722 invoiceId: item._id,
724 http() 723 };
725 .delete( 724 http()
726 "/deleteInvoice", 725 .delete(
727 confirm("Are you sure you want to delete this?") && { 726 "/deleteInvoice",
728 params: deleteInvoice, 727 confirm("Are you sure you want to delete this?") && {
729 } 728 params: deleteInvoice,
730 ) 729 }
731 .then((response) => { 730 )
732 this.snackbar = true; 731 .then((response) => {
733 this.text = "Successfully delete Existing Invoice"; 732 this.snackbar = true;
734 this.color = "green"; 733 this.text = "Successfully delete Existing Invoice";
735 this.dialog1 = false; 734 this.color = "green";
736 this.getInvoiceList(); 735 this.dialog1 = false;
737 }) 736 this.getInvoiceList();
738 .catch((error) => { 737 })
739 // console.log(error); 738 .catch((error) => {
740 }); 739 // console.log(error);
741 }, 740 });
742 deletePayment(editedItem) { 741 },
743 let deleteInvoice = { 742 deletePayment(editedItem) {
744 invoiceId: editedItem._id, 743 let deleteInvoice = {
745 }; 744 invoiceId: editedItem._id,
746 http() 745 };
747 .put( 746 http()
748 "/removePayment", 747 .put(
749 deleteInvoice, 748 "/removePayment",
750 confirm("Are you sure you want to delete this?") && { 749 deleteInvoice,
751 headers: { 750 confirm("Are you sure you want to delete this?") && {
752 Authorization: "Bearer " + this.token, 751 headers: {
753 }, 752 Authorization: "Bearer " + this.token,
754 } 753 },
755 ) 754 }
756 .then((response) => { 755 )
757 this.snackbar = true; 756 .then((response) => {
758 this.text = "Successfully delete Existing Invoice"; 757 this.snackbar = true;
759 this.color = "green"; 758 this.text = "Successfully delete Existing Invoice";
760 this.dialog1 = false; 759 this.color = "green";
761 this.getInvoiceList(); 760 this.dialog1 = false;
762 }) 761 this.getInvoiceList();
763 .catch((error) => { 762 })
764 // console.log(error); 763 .catch((error) => {
765 }); 764 // console.log(error);
766 }, 765 });
767 close() { 766 },
768 this.dialog = false; 767 close() {
769 }, 768 this.dialog = false;
770 closeAddInvoiceModel() { 769 },
771 this.addInvoiceDialog = false; 770 closeAddInvoiceModel() {
772 this.invoiceData = []; 771 this.addInvoiceDialog = false;
773 this.menu1 = false; 772 this.invoiceData = [];
774 this.feeType = []; 773 this.menu1 = false;
775 this.feeTypeData = []; 774 this.feeType = [];
776 }, 775 this.feeTypeData = [];
777 // totalAmount() { 776 },
778 // // console.log("this.feeType.paidAmount ", this.feeType.paidAmount); 777 // totalAmount() {
779 // // console.log( 778 // // console.log("this.feeType.paidAmount ", this.feeType.paidAmount);
780 // // "this.feeType.subTotalAAAAAAAAAAAAAAA ", 779 // // console.log(
781 // // this.feeType.subTotal 780 // // "this.feeType.subTotalAAAAAAAAAAAAAAA ",
782 // // ); 781 // // this.feeType.subTotal
783 782 // // );
784 // if (this.feeType.paidAmount < this.feeType.subTotal) { 783
785 // console.log("this.feeType.subTotalBBBBBBBBBBB ", this.feeType.subTotal); 784 // if (this.feeType.paidAmount < this.feeType.subTotal) {
786 785 // console.log("this.feeType.subTotalBBBBBBBBBBB ", this.feeType.subTotal);
787 // this.feeType.paidAmount = this.feeType.subTotal; 786
788 // console.log( 787 // this.feeType.paidAmount = this.feeType.subTotal;
789 // "this.feeType.paidAmount BBBBBBBBBBB", 788 // console.log(
790 // this.feeType.paidAmount 789 // "this.feeType.paidAmount BBBBBBBBBBB",
791 // ); 790 // this.feeType.paidAmount
792 // } 791 // );
793 // }, 792 // }
794 submit() { 793 // },
795 let feeTypeId = ""; 794 submit() {
796 for (let i = 0; i < this.feeTypes.length; i++) { 795 let feeTypeId = "";
797 if (this.feeTypes[i].feeType === this.feeType.feeTypeName) { 796 for (let i = 0; i < this.feeTypes.length; i++) {
798 feeTypeId = this.feeTypes[i]._id; 797 if (this.feeTypes[i].feeType === this.feeType.feeTypeName) {
799 } 798 feeTypeId = this.feeTypes[i]._id;
800 } 799 }
801 if (this.$refs.form.validate()) { 800 }
802 let invoiceData = { 801 if (this.$refs.form.validate()) {
803 classId: this.invoiceData.classNum, 802 let invoiceData = {
804 students: this.invoiceData.students, 803 classId: this.invoiceData.classNum,
805 date: this.invoiceData.date, 804 students: this.invoiceData.students,
806 paymentStatus: this.invoiceData.paymentStatus, 805 date: this.invoiceData.date,
807 paymentMethod: this.invoiceData.paymentMethod, 806 paymentStatus: this.invoiceData.paymentStatus,
808 feeType: this.feeTypeData, 807 paymentMethod: this.invoiceData.paymentMethod,
809 totalAmount: this.feeType.amount.toString(), 808 feeType: this.feeTypeData,
810 totalDiscount: this.feeType.discount.toString(), 809 totalAmount: this.feeType.amount.toString(),
811 totalSubTotal: this.feeType.subTotal.toString(), 810 totalDiscount: this.feeType.discount.toString(),
812 totalPaidAmount: this.feeType.paidAmount, 811 totalSubTotal: this.feeType.subTotal.toString(),
813 }; 812 totalPaidAmount: this.feeType.paidAmount,
814 813 };
815 if (invoiceData.paymentStatus == "NOT_PAID") { 814
816 delete invoiceData.paymentMethod; 815 if (invoiceData.paymentStatus == "NOT_PAID") {
817 } 816 delete invoiceData.paymentMethod;
818 if (this.feeType.paidAmount != "0.00") { 817 }
819 if (this.feeType.subTotal == this.feeType.paidAmount) { 818 if (this.feeType.paidAmount != "0.00") {
820 invoiceData.paymentStatus = "FULLY_PAID"; 819 if (this.feeType.subTotal == this.feeType.paidAmount) {
821 // console.log("FULLY_PAID"); 820 invoiceData.paymentStatus = "FULLY_PAID";
822 } 821 // console.log("FULLY_PAID");
823 if (invoiceData.totalPaidAmount) { 822 }
824 if (this.feeType.subTotal != this.feeType.paidAmount) { 823 if (invoiceData.totalPaidAmount) {
825 invoiceData.paymentStatus = "PARTIALLY_PAID"; 824 if (this.feeType.subTotal != this.feeType.paidAmount) {
826 // console.log("PARTIALLY_PAID"); 825 invoiceData.paymentStatus = "PARTIALLY_PAID";
827 } 826 // console.log("PARTIALLY_PAID");
828 } 827 }
829 } 828 }
830 829 }
831 if (invoiceData.totalSubTotal == "0.00") { 830
832 invoiceData.paymentStatus = "FULLY_PAID"; 831 if (invoiceData.totalSubTotal == "0.00") {
833 } else if (invoiceData.totalSubTotal != "0.00") { 832 invoiceData.paymentStatus = "FULLY_PAID";
834 if (this.feeType.paidAmount === "0.00") { 833 } else if (invoiceData.totalSubTotal != "0.00") {
835 invoiceData.paymentStatus = "NOT_PAID"; 834 if (this.feeType.paidAmount === "0.00") {
836 delete invoiceData.paymentMethod; 835 invoiceData.paymentStatus = "NOT_PAID";
837 } 836 delete invoiceData.paymentMethod;
838 } 837 }
839 http() 838 }
840 .post("/createInvoice", invoiceData) 839 http()
841 .then((response) => { 840 .post("/createInvoice", invoiceData)
842 this.getInvoiceList(); 841 .then((response) => {
843 this.snackbar = true; 842 this.getInvoiceList();
844 this.text = "New Invoice added successfully"; 843 this.snackbar = true;
845 this.color = "green"; 844 this.text = "New Invoice added successfully";
846 this.clear(); 845 this.color = "green";
847 this.feeTypeData = []; 846 this.clear();
848 if (this.feeTypeData.length == 0) { 847 this.feeTypeData = [];
849 this.feeType = { 848 if (this.feeTypeData.length == 0) {
850 amount: "0.00", 849 this.feeType = {
851 discount: "0.00", 850 amount: "0.00",
852 paidAmount: "0.00", 851 discount: "0.00",
853 subTotal: "0.00", 852 paidAmount: "0.00",
854 feeTypeList: "", 853 subTotal: "0.00",
855 }; 854 feeTypeList: "",
856 } 855 };
857 this.loading = false; 856 }
858 this.addInvoiceDialog = false; 857 this.loading = false;
859 }) 858 this.addInvoiceDialog = false;
860 .catch((error) => { 859 })
861 this.snackbar = true; 860 .catch((error) => {
862 this.text = error.response.data.errors[0].messages[0]; 861 this.snackbar = true;
863 this.color = "error"; 862 this.text = error.response.data.errors[0].messages[0];
864 this.loading = false; 863 this.color = "error";
865 }); 864 this.loading = false;
866 } 865 });
867 }, 866 }
868 clear() { 867 },
869 this.$refs.form.reset(); 868 clear() {
870 }, 869 this.$refs.form.reset();
871 getInvoiceList() { 870 },
872 this.showLoader = true; 871 getInvoiceList() {
873 http() 872 this.showLoader = true;
874 .get("/getInvoicesList", { 873 http()
875 params: { schoolId: this.$store.state.schoolId }, 874 .get("/getInvoicesList", {
876 headers: { Authorization: "Bearer " + this.token }, 875 params: { schoolId: this.$store.state.schoolId },
877 }) 876 headers: { Authorization: "Bearer " + this.token },
878 .then((response) => { 877 })
879 this.invoiceList = response.data.data; 878 .then((response) => {
880 this.showLoader = false; 879 this.invoiceList = response.data.data;
881 }) 880 this.showLoader = false;
882 .catch((error) => { 881 })
883 // console.log("err====>", err); 882 .catch((error) => {
884 this.showLoader = false; 883 // console.log("err====>", err);
885 if (error.response.status === 401) { 884 this.showLoader = false;
886 this.$router.replace({ path: "/" }); 885 if (error.response.status === 401) {
887 this.$store.dispatch("setToken", null); 886 this.$router.replace({ path: "/" });
888 this.$store.dispatch("Id", null); 887 this.$store.dispatch("setToken", null);
889 } 888 this.$store.dispatch("Id", null);
890 }); 889 }
891 }, 890 });
892 selectFeeType() { 891 },
893 this.showFeeType = true; 892 selectFeeType() {
894 this.feeTypeData.push({ feeTypeName: this.feeType.feeTypeName }); 893 this.showFeeType = true;
895 }, 894 this.feeTypeData.push({ feeTypeName: this.feeType.feeTypeName });
896 deleteSelectFee: function (index, feeTyp) { 895 },
897 // console.log("---index----", index); 896 deleteSelectFee: function (index, feeTyp) {
898 this.feeTypeData.splice(index, 1); 897 // console.log("---index----", index);
899 this.getAmmountDetails(feeTyp); 898 this.feeTypeData.splice(index, 1);
900 if (this.feeTypeData.length == 0) { 899 this.getAmmountDetails(feeTyp);
901 this.feeType = { 900 if (this.feeTypeData.length == 0) {
902 amount: "0.00", 901 this.feeType = {
903 discount: "0.00", 902 amount: "0.00",
904 paidAmount: "0.00", 903 discount: "0.00",
905 subTotal: "0.00", 904 paidAmount: "0.00",
906 feeTypeName: "", 905 subTotal: "0.00",
907 }; 906 feeTypeName: "",
908 } 907 };
909 }, 908 }
910 getAllClasses() { 909 },
911 http() 910 getAllClasses() {
912 .get("/getClassesList", { 911 http()
913 params: { schoolId: this.$store.state.schoolId }, 912 .get("/getClassesList", {
914 headers: { Authorization: "Bearer " + this.token }, 913 params: { schoolId: this.$store.state.schoolId },
915 }) 914 headers: { Authorization: "Bearer " + this.token },
916 .then((response) => { 915 })
917 this.addclass = response.data.data; 916 .then((response) => {
918 }) 917 this.addclass = response.data.data;
919 .catch((err) => { 918 })
920 // console.log("err====>", err); 919 .catch((err) => {
921 // this.$router.replace({ path: "/" }); 920 // console.log("err====>", err);
922 }); 921 // this.$router.replace({ path: "/" });
923 }, 922 });
924 getAllStudents() { 923 },
925 this.showLoader = true; 924 getAllStudents() {
926 http() 925 this.showLoader = true;
927 .get("/getStudentsList", { 926 http()
928 params: { 927 .get("/getStudentsList", {
929 classId: this.invoiceData.classNum, 928 params: {
930 schoolId: this.$store.state.schoolId, 929 classId: this.invoiceData.classNum,
931 }, 930 schoolId: this.$store.state.schoolId,
932 headers: { Authorization: "Bearer " + this.token }, 931 },
933 }) 932 headers: { Authorization: "Bearer " + this.token },
934 .then((response) => { 933 })
935 this.studentList = response.data.data.filter((item) => item.status); 934 .then((response) => {
936 this.studentList.unshift({ 935 this.studentList = response.data.data.filter((item) => item.status);
937 name: "Select All", 936 this.studentList.unshift({
938 _id: "Select All", 937 name: "Select All",
939 }); 938 _id: "Select All",
940 // console.log("=======studentist====", this.studentList); 939 });
941 this.showLoader = false; 940 // console.log("=======studentist====", this.studentList);
942 }) 941 this.showLoader = false;
943 .catch((err) => { 942 })
944 this.showLoader = false; 943 .catch((err) => {
945 // console.log("err====>", err); 944 this.showLoader = false;
946 // this.$router.replace({ path: "/" }); 945 // console.log("err====>", err);
947 }); 946 // this.$router.replace({ path: "/" });
948 }, 947 });
949 getfeeType() { 948 },
950 http() 949 getfeeType() {
951 .get("/getFeesList", { 950 http()
952 params: { 951 .get("/getFeesList", {
953 schoolId: this.$store.state.schoolId, 952 params: {
954 }, 953 schoolId: this.$store.state.schoolId,
955 headers: { Authorization: "Bearer " + this.token }, 954 },
956 }) 955 headers: { Authorization: "Bearer " + this.token },
957 .then((response) => { 956 })
958 this.feeTypes = response.data.data; 957 .then((response) => {
959 }) 958 this.feeTypes = response.data.data;
960 .catch((err) => { 959 })
961 // console.log("err====>", err); 960 .catch((err) => {
962 // this.$router.replace({ path: "/" }); 961 // console.log("err====>", err);
963 }); 962 // this.$router.replace({ path: "/" });
964 }, 963 });
965 964 },
966 getAmmountDetails(feeTyp) { 965
967 let feeType = { 966 getAmmountDetails(feeTyp) {
968 amount: "0.00", 967 let feeType = {
969 discount: "0.00", 968 amount: "0.00",
970 subTotal: "0.00", 969 discount: "0.00",
971 subParticularTotal: "0.00", 970 subTotal: "0.00",
972 paidAmount: "", 971 subParticularTotal: "0.00",
973 }; 972 paidAmount: "",
974 for (let i = 0; i < this.feeTypeData.length; i++) { 973 };
975 // *********** AMOUNT *********** 974 for (let i = 0; i < this.feeTypeData.length; i++) {
976 if (this.feeTypeData[i].amount) { 975 // *********** AMOUNT ***********
977 feeType.amount = 976 if (this.feeTypeData[i].amount) {
978 Number(feeType.amount) + Number(this.feeTypeData[i].amount); 977 feeType.amount =
979 this.feeType.amount = feeType.amount; 978 Number(feeType.amount) + Number(this.feeTypeData[i].amount);
980 this.feeType.subTotal = feeType.amount; 979 this.feeType.amount = feeType.amount;
981 this.feeTypeData[i].subTotal = this.feeTypeData[i].amount; 980 this.feeType.subTotal = feeType.amount;
982 } else if (this.feeTypeData[0].amount == "") { 981 this.feeTypeData[i].subTotal = this.feeTypeData[i].amount;
983 this.feeType.amount = "0.00"; 982 } else if (this.feeTypeData[0].amount == "") {
984 this.feeTypeData[i].subTotal = "0.00"; 983 this.feeType.amount = "0.00";
985 this.feeType.subTotal = "0.00"; 984 this.feeTypeData[i].subTotal = "0.00";
986 } else if (this.feeTypeData[i].amount == "") { 985 this.feeType.subTotal = "0.00";
987 this.feeType.amount = 986 } else if (this.feeTypeData[i].amount == "") {
988 Number(feeType.amount) + Number(this.feeTypeData[i].amount); 987 this.feeType.amount =
989 this.feeTypeData[i].subTotal = 988 Number(feeType.amount) + Number(this.feeTypeData[i].amount);
990 Number(feeType.amount) + Number(this.feeTypeData[i].amount); 989 this.feeTypeData[i].subTotal =
991 this.feeType.subTotal = 990 Number(feeType.amount) + Number(this.feeTypeData[i].amount);
992 Number(feeType.amount) + Number(this.feeTypeData[i].amount); 991 this.feeType.subTotal =
993 } 992 Number(feeType.amount) + Number(this.feeTypeData[i].amount);
994 // *********** DISCOUNT *********** 993 }
995 if (this.feeTypeData[i].discount) { 994 // *********** DISCOUNT ***********
996 if ( 995 if (this.feeTypeData[i].discount) {
997 Number(this.feeTypeData[i].discount) < this.feeTypeData[i].amount 996 if (
998 ) { 997 Number(this.feeTypeData[i].discount) < this.feeTypeData[i].amount
999 feeType.discount = 998 ) {
1000 Number(feeType.discount) + Number(this.feeTypeData[i].discount); 999 feeType.discount =
1001 this.feeType.discount = feeType.discount; 1000 Number(feeType.discount) + Number(this.feeTypeData[i].discount);
1002 feeType.subParticularTotal = 1001 this.feeType.discount = feeType.discount;
1003 this.feeTypeData[i].amount - this.feeTypeData[i].discount; 1002 feeType.subParticularTotal =
1004 this.feeTypeData[i].subTotal = feeType.subParticularTotal.toFixed( 1003 this.feeTypeData[i].amount - this.feeTypeData[i].discount;
1005 2 1004 this.feeTypeData[i].subTotal = feeType.subParticularTotal.toFixed(
1006 ); 1005 2
1007 } else if ( 1006 );
1008 Number(this.feeTypeData[i].discount) >= this.feeTypeData[i].amount 1007 } else if (
1009 ) { 1008 Number(this.feeTypeData[i].discount) >= this.feeTypeData[i].amount
1010 this.feeTypeData[i].discount = this.feeTypeData[i].amount; 1009 ) {
1011 feeType.discount = 1010 this.feeTypeData[i].discount = this.feeTypeData[i].amount;
1012 Number(feeType.discount) + Number(this.feeTypeData[i].discount); 1011 feeType.discount =
1013 this.feeType.discount = feeType.discount.toString(); 1012 Number(feeType.discount) + Number(this.feeTypeData[i].discount);
1014 feeType.subParticularTotal = 1013 this.feeType.discount = feeType.discount.toString();
1015 this.feeTypeData[i].amount - this.feeTypeData[i].discount; 1014 feeType.subParticularTotal =
1016 this.feeTypeData[ 1015 this.feeTypeData[i].amount - this.feeTypeData[i].discount;
1017 i 1016 this.feeTypeData[
1018 ].subTotal = feeType.subParticularTotal.toString(); 1017 i
1019 } 1018 ].subTotal = feeType.subParticularTotal.toString();
1020 } else if (this.feeTypeData[0].discount == "") { 1019 }
1021 this.feeType.discount = "0.00"; 1020 } else if (this.feeTypeData[0].discount == "") {
1022 } 1021 this.feeType.discount = "0.00";
1023 // else if (this.feeTypeData[i].discount == "") { 1022 }
1024 // this.feeType.discount = 1023 // else if (this.feeTypeData[i].discount == "") {
1025 // Number(feeType.discount) + Number(this.feeTypeData[i].discount); 1024 // this.feeType.discount =
1026 // } 1025 // Number(feeType.discount) + Number(this.feeTypeData[i].discount);
1027 1026 // }
1028 // *********** SUBTOTAL *********** 1027
1029 if (this.feeTypeData[i].subTotal) { 1028 // *********** SUBTOTAL ***********
1030 feeType.subTotal = 1029 if (this.feeTypeData[i].subTotal) {
1031 Number(feeType.subTotal) + Number(this.feeTypeData[i].subTotal); 1030 feeType.subTotal =
1032 this.feeType.subTotal = feeType.subTotal.toFixed(2); 1031 Number(feeType.subTotal) + Number(this.feeTypeData[i].subTotal);
1033 } 1032 this.feeType.subTotal = feeType.subTotal.toFixed(2);
1034 1033 }
1035 // *********** PAID-AMOUNT *********** 1034
1036 if (this.feeTypeData[i].paidAmount) { 1035 // *********** PAID-AMOUNT ***********
1037 feeType.paidAmount = 1036 if (this.feeTypeData[i].paidAmount) {
1038 Number(feeType.paidAmount) + Number(this.feeTypeData[i].paidAmount); 1037 feeType.paidAmount =
1039 this.feeType.paidAmount = feeType.paidAmount.toFixed(2); 1038 Number(feeType.paidAmount) + Number(this.feeTypeData[i].paidAmount);
1040 } else if (this.feeTypeData[0].paidAmount == "") { 1039 this.feeType.paidAmount = feeType.paidAmount.toFixed(2);
1041 this.feeType.paidAmount = "0.00"; 1040 } else if (this.feeTypeData[0].paidAmount == "") {
1042 } else if (this.feeTypeData[i].paidAmount == "") { 1041 this.feeType.paidAmount = "0.00";
1043 this.feeType.paidAmount = feeType.paidAmount = 1042 } else if (this.feeTypeData[i].paidAmount == "") {
1044 Number(feeType.paidAmount) + Number(this.feeTypeData[i].paidAmount); 1043 this.feeType.paidAmount = feeType.paidAmount =
1045 } 1044 Number(feeType.paidAmount) + Number(this.feeTypeData[i].paidAmount);
1046 1045 }
1047 // if paid Amount fill large of subtotal value so this condition are fixed filled subtotal value. 1046
1048 if (feeType.paidAmount > feeType.subTotal) { 1047 // if paid Amount fill large of subtotal value so this condition are fixed filled subtotal value.
1049 this.feeTypeData[i].paidAmount = this.feeTypeData[i].subTotal; 1048 if (feeType.paidAmount > feeType.subTotal) {
1050 this.feeType.paidAmount = feeType.subTotal; 1049 this.feeTypeData[i].paidAmount = this.feeTypeData[i].subTotal;
1051 } 1050 this.feeType.paidAmount = feeType.subTotal;
1052 } 1051 }
1053 }, 1052 }
1054 getPayMethodList() { 1053 },
1055 if (this.invoiceData.paymentStatus == "PARTIALLY_PAID") { 1054 getPayMethodList() {
1056 this.showPayMethods = true; 1055 if (this.invoiceData.paymentStatus == "PARTIALLY_PAID") {
1057 this.paymentMethodRules = [(v) => !!v || "Payment Method is required"]; 1056 this.showPayMethods = true;
1058 } else if (this.invoiceData.paymentStatus == "FULLY_PAID") { 1057 this.paymentMethodRules = [(v) => !!v || "Payment Method is required"];
1059 this.showPayMethods = true; 1058 } else if (this.invoiceData.paymentStatus == "FULLY_PAID") {
1060 this.paymentMethodRules = [(v) => !!v || "Payment Method is required"]; 1059 this.showPayMethods = true;
1061 } else if (this.invoiceData.paymentStatus == "NOT_PAID") { 1060 this.paymentMethodRules = [(v) => !!v || "Payment Method is required"];
1062 for (let i = 0; i < this.feeTypeData.length; i++) { 1061 } else if (this.invoiceData.paymentStatus == "NOT_PAID") {
1063 this.feeTypeData[i].paidAmount = "0.00"; 1062 for (let i = 0; i < this.feeTypeData.length; i++) {
1064 this.feeType.paidAmount = "0.00"; 1063 this.feeTypeData[i].paidAmount = "0.00";
1065 } 1064 this.feeType.paidAmount = "0.00";
1066 this.paymentMethodRules = ""; 1065 }
1067 this.showPayMethods = false; 1066 this.paymentMethodRules = "";
1068 } else { 1067 this.showPayMethods = false;
1069 this.showPayMethods = false; 1068 } else {
1070 } 1069 this.showPayMethods = false;
1071 }, 1070 }
1072 selectAllStudent() { 1071 },
1073 this.invoiceData.students = []; 1072 selectAllStudent() {
1074 if (this.invoiceData.studentId === "Select All") { 1073 this.invoiceData.students = [];
1075 for (let i = 1; i < this.studentList.length; i++) { 1074 if (this.invoiceData.studentId === "Select All") {
1076 this.invoiceData.students.push(this.studentList[i]._id); 1075 for (let i = 1; i < this.studentList.length; i++) {
1077 // console.log("data", this.invoiceData.students); 1076 this.invoiceData.students.push(this.studentList[i]._id);
1078 // data.push(this.studentList[i]._id); 1077 // console.log("data", this.invoiceData.students);
1079 // console.log("data", data); 1078 // data.push(this.studentList[i]._id);
1080 } 1079 // console.log("data", data);
1081 } else { 1080 }
1082 this.invoiceData.students.push(this.invoiceData.studentId); 1081 } else {
1083 } 1082 this.invoiceData.students.push(this.invoiceData.studentId);
1084 }, 1083 }
1085 displaySearch() { 1084 },
1086 this.show = false; 1085 displaySearch() {
1087 this.showSearch = true; 1086 this.show = false;
1088 }, 1087 this.showSearch = true;
1089 closeSearch() { 1088 },
1090 this.showSearch = false; 1089 closeSearch() {
1091 this.show = true; 1090 this.showSearch = false;
1092 this.search = ""; 1091 this.show = true;
1093 }, 1092 this.search = "";
1094 updateDoneInvoice() { 1093 },
1095 this.editInvoiceDialog = false; 1094 updateDoneInvoice() {
1096 this.getInvoiceList(); 1095 this.editInvoiceDialog = false;
1097 }, 1096 this.getInvoiceList();
1098 updatePayment() { 1097 },
1099 this.paymentInvoiceDialog = false; 1098 updatePayment() {
1100 this.getInvoiceList(); 1099 this.paymentInvoiceDialog = false;
1101 this.snackbar = true; 1100 this.getInvoiceList();
1102 this.text = "Payment added successfully"; 1101 this.snackbar = true;
1103 this.color = "green"; 1102 this.text = "Payment added successfully";
1104 }, 1103 this.color = "green";
1105 }, 1104 },
1106 mounted() { 1105 },
1107 this.token = this.$store.state.token; 1106 mounted() {
1108 this.getInvoiceList(); 1107 this.token = this.$store.state.token;
1109 this.getAllClasses(); 1108 this.getInvoiceList();
1110 this.getfeeType(); 1109 this.getAllClasses();
1111 this.getAllStudents(); 1110 this.getfeeType();
1112 }, 1111 this.getAllStudents();
1113 }; 1112 },
1114 </script> 1113 };
1115 1114 </script>
1116 1115
1117 <style scoped> 1116
1118 table { 1117 <style scoped>
1119 border-collapse: collapse; 1118 table {
1120 border: 1px solid #e2e7eb; 1119 border-collapse: collapse;
1121 } 1120 border: 1px solid #e2e7eb;
1122 1121 }
1123 th, 1122
1124 .tdFeeType { 1123 th,
1125 border: 1px solid #e2e7eb; 1124 .tdFeeType {
1126 padding: 10px; 1125 border: 1px solid #e2e7eb;
1127 text-align: center; 1126 padding: 10px;
1128 } 1127 text-align: center;
1129 table.feeTypeTable { 1128 }
1130 table-layout: auto !important; 1129 table.feeTypeTable {
1131 width: 100% !important; 1130 table-layout: auto !important;
1132 } 1131 width: 100% !important;
1133 .card-style { 1132 }
1134 background: #7f62f8 !important; 1133 .card-style {
1135 border-color: #7f62f8 !important; 1134 background: #7f62f8 !important;
1136 border-radius: 12px; 1135 border-color: #7f62f8 !important;
1137 text-align: center !important; 1136 border-radius: 12px;
1138 padding-top: 10px !important; 1137 text-align: center !important;
1139 } 1138 padding-top: 10px !important;
1140 .add-button { 1139 }
1141 background: #feb83c !important; 1140 .add-button {
1142 border-color: #feb83c !important; 1141 background: #feb83c !important;
1143 text-transform: none !important; 1142 border-color: #feb83c !important;
1144 -webkit-box-shadow: none !important; 1143 text-transform: none !important;
1145 box-shadow: none !important; 1144 -webkit-box-shadow: none !important;
1146 } 1145 box-shadow: none !important;
1147 .clear-button { 1146 }
1148 background: #fa7676 !important; 1147 .clear-button {
1149 border-color: #fa7676 !important; 1148 background: #fa7676 !important;
1150 text-transform: none !important; 1149 border-color: #fa7676 !important;
1151 -webkit-box-shadow: none !important; 1150 text-transform: none !important;
1152 box-shadow: none !important; 1151 -webkit-box-shadow: none !important;
1153 } 1152 box-shadow: none !important;
1154 .card-styles { 1153 }
1155 background: #7f62f8 !important; 1154 .card-styles {
1156 border-color: #7f62f8 !important; 1155 background: #7f62f8 !important;
1157 } 1156 border-color: #7f62f8 !important;
1158 .v-card__actions .v-btn { 1157 }
1159 margin: 0 15px !important; 1158 .v-card__actions .v-btn {
1160 min-width: 96px !important; 1159 margin: 0 15px !important;
1161 } 1160 min-width: 96px !important;
1162 </style> 1161 }
src/pages/Account/paymentHistory.vue
Diff comments   View file @8b7976c
1 <template> 1 <template>
2 <v-container fluid class="body-color"> 2 <v-container fluid class="body-color">
3 <!-- ****** Edit Payment History ****** --> 3 <!-- ****** Edit Payment History ****** -->
4 <v-dialog v-model="editPaymentDialog" max-width="400px" persistent> 4 <v-dialog v-model="editPaymentDialog" max-width="400px" persistent>
5 <v-card flat class="card-style pa-2" dark> 5 <v-card flat class="card-style pa-2" dark>
6 <v-layout> 6 <v-layout>
7 <v-flex xs12> 7 <v-flex xs12>
8 <label class="title text-xs-center">Edit Payment History</label> 8 <label class="title text-xs-center">Edit Payment History</label>
9 <v-icon size="24" class="right" @click="editPaymentDialog = false">cancel</v-icon> 9 <v-icon size="24" class="right" @click="editPaymentDialog = false">cancel</v-icon>
10 </v-flex> 10 </v-flex>
11 </v-layout> 11 </v-layout>
12 <v-form ref="form"> 12 <v-form ref="form">
13 <v-container fluid> 13 <v-container fluid>
14 <v-flex xs12 sm12> 14 <v-flex xs12 sm12>
15 <v-layout> 15 <v-layout>
16 <v-flex xs3 class="pt-4 subheading"> 16 <v-flex xs3 class="pt-4 subheading">
17 <label class="right">Amount:</label> 17 <label class="right">Amount:</label>
18 </v-flex> 18 </v-flex>
19 <v-flex xs8 sm7 class="ml-3"> 19 <v-flex xs8 sm7 class="ml-3">
20 <v-text-field 20 <v-text-field
21 v-model="editedItem.paidAmount" 21 v-model="editedItem.paidAmount"
22 placeholder="please fill this field" 22 placeholder="please fill this field"
23 ></v-text-field> 23 ></v-text-field>
24 </v-flex> 24 </v-flex>
25 </v-layout> 25 </v-layout>
26 </v-flex> 26 </v-flex>
27 <v-flex xs12 sm12> 27 <v-flex xs12 sm12>
28 <v-layout> 28 <v-layout>
29 <v-flex xs3 class="pt-4 subheading"> 29 <v-flex xs3 class="pt-4 subheading">
30 <label class="right">Method:</label> 30 <label class="right">Method:</label>
31 </v-flex> 31 </v-flex>
32 <v-flex xs8 sm7 class="ml-3"> 32 <v-flex xs8 sm7 class="ml-3">
33 <v-select 33 <v-select
34 :items="paymentMethod" 34 :items="paymentMethod"
35 v-model="editedItem.paymentMethod" 35 v-model="editedItem.paymentMethod"
36 label="please fill this field" 36 label="please fill this field"
37 required 37 required
38 ></v-select> 38 ></v-select>
39 </v-flex> 39 </v-flex>
40 </v-layout> 40 </v-layout>
41 </v-flex> 41 </v-flex>
42 <v-layout> 42 <v-layout>
43 <v-flex xs12> 43 <v-flex xs12>
44 <v-layout> 44 <v-layout>
45 <v-spacer></v-spacer> 45 <v-spacer></v-spacer>
46 <v-btn round dark @click="save" class="add-button">Update Payment History</v-btn> 46 <v-btn round dark @click="save" class="add-button">Update Payment History</v-btn>
47 <v-spacer></v-spacer> 47 <v-spacer></v-spacer>
48 </v-layout> 48 </v-layout>
49 </v-flex> 49 </v-flex>
50 </v-layout> 50 </v-layout>
51 </v-container> 51 </v-container>
52 </v-form> 52 </v-form>
53 </v-card> 53 </v-card>
54 </v-dialog> 54 </v-dialog>
55 55
56 <!-- ****** PAYMENT HISTORY TABLE ****** --> 56 <!-- ****** PAYMENT HISTORY TABLE ****** -->
57 <v-toolbar color="transparent" flat> 57 <v-toolbar color="transparent" flat>
58 <v-spacer></v-spacer> 58 <v-spacer></v-spacer>
59 <v-card-title class="body-1" v-show="show"> 59 <v-card-title class="body-1" v-show="show">
60 <v-btn icon large flat @click="displaySearch"> 60 <v-btn icon large flat @click="displaySearch">
61 <v-avatar size="27"> 61 <v-avatar size="27">
62 <img src="/static/icon/search.png" alt="icon" /> 62 <img src="/static/icon/search.png" alt="icon" />
63 </v-avatar> 63 </v-avatar>
64 </v-btn> 64 </v-btn>
65 </v-card-title> 65 </v-card-title>
66 <v-flex xs8 sm8 md3 lg2 v-if="showSearch"> 66 <v-flex xs8 sm8 md3 lg2 v-if="showSearch">
67 <v-layout> 67 <v-layout>
68 <v-text-field 68 <v-text-field
69 autofocus
70 v-model="search"
71 label="Search"
72 prepend-inner-icon="search"
73 color="primary"
74 ></v-text-field>
69 autofocus 75 <v-icon @click="closeSearch" color="error">close</v-icon>
70 v-model="search" 76 </v-layout>
71 label="Search" 77 </v-flex>
72 prepend-inner-icon="search" 78 </v-toolbar>
73 color="primary" 79 <v-data-table
74 ></v-text-field> 80 :headers="headers"
75 <v-icon @click="closeSearch" color="error">close</v-icon> 81 :items="paymentHistory"
76 </v-layout> 82 :pagination.sync="pagination"
77 </v-flex> 83 :search="search"
78 </v-toolbar> 84 >
79 <v-data-table 85 <template slot="items" slot-scope="props">
80 :headers="headers" 86 <tr class="tr">
81 :items="paymentHistory" 87 <td class="td td-row">{{ props.index + 1 }}</td>
82 :pagination.sync="pagination" 88 <td class="td td-row text-xs-center">{{ props.item.studentId.name }}</td>
83 :search="search" 89 <td class="td td-row text-xs-center">{{ props.item.classId.classNum }}</td>
84 > 90 <td class="td td-row text-xs-center">{{ props.item.feeType.feeTypeName }}</td>
85 <template slot="items" slot-scope="props"> 91 <td class="td td-row text-xs-center">{{ props.item.paymentMethod }}</td>
86 <tr class="tr"> 92 <td class="td td-row text-xs-center">{{ props.item.feeType.paidAmount }}</td>
87 <td class="td td-row">{{ props.index + 1 }}</td> 93 <td class="td td-row text-xs-center">{{ dates(props.item.date) }}</td>
88 <td class="td td-row text-xs-center">{{ props.item.studentId.name }}</td> 94 <td class="td td-row text-xs-center">
89 <td class="td td-row text-xs-center">{{ props.item.classId.classNum }}</td> 95 <span>
90 <td class="td td-row text-xs-center">{{ props.item.feeType.feeTypeName }}</td> 96 <v-tooltip top>
91 <td class="td td-row text-xs-center">{{ props.item.paymentMethod }}</td> 97 <img
92 <td class="td td-row text-xs-center">{{ props.item.feeType.paidAmount }}</td> 98 slot="activator"
93 <td class="td td-row text-xs-center">{{ dates(props.item.date) }}</td> 99 style="cursor:pointer; width:20px; height:18px;"
94 <td class="td td-row text-xs-center"> 100 class="mr-3"
95 <span> 101 @click="editItem(props.item)"
96 <v-tooltip top> 102 src="/static/icon/edit.png"
97 <img 103 />
98 slot="activator" 104 <span>Edit</span>
99 style="cursor:pointer; width:20px; height:18px;" 105 </v-tooltip>
100 class="mr-3" 106 <v-tooltip top>
101 @click="editItem(props.item)" 107 <img
102 src="/static/icon/edit.png" 108 slot="activator"
103 /> 109 style="cursor:pointer;width:20px; height:20px;"
104 <span>Edit</span> 110 class="mr-3"
105 </v-tooltip> 111 @click="deleteItem(props.item)"
106 <v-tooltip top> 112 src="/static/icon/delete.png"
107 <img 113 />
108 slot="activator" 114 <span>Delete</span>
109 style="cursor:pointer;width:20px; height:20px;" 115 </v-tooltip>
110 class="mr-3" 116 </span>
111 @click="deleteItem(props.item)" 117 </td>
112 src="/static/icon/delete.png" 118 </tr>
113 /> 119 </template>
114 <span>Delete</span> 120 <v-alert
115 </v-tooltip> 121 slot="no-results"
116 </span> 122 :value="true"
117 </td> 123 color="error"
118 </tr> 124 icon="warning"
119 </template> 125 >Your search for "{{ search }}" found no results.</v-alert>
120 <v-alert 126 </v-data-table>
121 slot="no-results" 127 <div class="loader" v-if="showLoader">
122 :value="true" 128 <v-progress-circular indeterminate color="white"></v-progress-circular>
123 color="error" 129 </div>
124 icon="warning" 130 <v-snackbar
125 >Your search for "{{ search }}" found no results.</v-alert> 131 :timeout="timeout"
126 </v-data-table> 132 :top="y === 'top'"
127 <div class="loader" v-if="showLoader"> 133 :right="x === 'right'"
128 <v-progress-circular indeterminate color="white"></v-progress-circular> 134 :vertical="mode === 'vertical'"
129 </div> 135 v-model="snackbar"
130 <v-snackbar 136 :color="color"
131 :timeout="timeout" 137 >{{ text }}</v-snackbar>
132 :top="y === 'top'" 138 </v-container>
133 :right="x === 'right'" 139 </template>
134 :vertical="mode === 'vertical'" 140
135 v-model="snackbar" 141 <script>
136 :color="color" 142 import http from "@/Services/http.js";
137 >{{ text }}</v-snackbar> 143 import moment from "moment";
138 </v-container> 144
139 </template> 145 export default {
140 146 data: () => ({
141 <script> 147 snackbar: false,
142 import http from "@/Services/http.js"; 148 showLoader: false,
143 import moment from "moment"; 149 search: "",
144 150 show: true,
145 export default { 151 showSearch: false,
146 data: () => ({ 152 pagination: {
147 snackbar: false, 153 rowsPerPage: 10,
148 showLoader: false, 154 },
149 search: "", 155 paymentMethod: ["Cash", "Cheque"],
150 show: true, 156 headers: [
151 showSearch: false, 157 {
152 pagination: { 158 text: "No",
153 rowsPerPage: 10, 159 align: "",
154 }, 160 sortable: false,
155 paymentMethod: ["Cash", "Cheque"], 161 value: "No",
156 headers: [ 162 },
157 { 163 {
158 text: "No", 164 text: "Student",
159 align: "", 165 value: "name",
160 sortable: false, 166 sortable: false,
161 value: "No", 167 align: "center",
162 }, 168 },
163 { 169 { text: "Class", value: "class", sortable: false, align: "center" },
164 text: "Student", 170 {
165 value: "name", 171 text: "Fee Type",
166 sortable: false, 172 value: "feeTypeName",
167 align: "center", 173 sortable: false,
168 }, 174 align: "center",
169 { text: "Class", value: "class", sortable: false, align: "center" }, 175 },
170 { 176 {
171 text: "Fee Type", 177 text: "Method",
172 value: "feeTypeName", 178 value: "paymentMethod",
173 sortable: false, 179 sortable: false,
174 align: "center", 180 align: "center",
175 }, 181 },
176 { 182 {
177 text: "Method", 183 text: "Paid Amount",
178 value: "paymentMethod", 184 value: "totalPaidAmount",
179 sortable: false, 185 sortable: false,
180 align: "center", 186 align: "center",
181 }, 187 },
182 { 188 {
183 text: "Paid Amount", 189 text: "Date",
184 value: "totalPaidAmount", 190 value: "date",
185 sortable: false, 191 sortable: false,
186 align: "center", 192 align: "center",
187 }, 193 },
188 { 194 { text: "Action", value: "", sortable: false, align: "center" },
189 text: "Date", 195 ],
190 value: "date", 196 paymentHistory: [],
191 sortable: false, 197 addPaymentHistoryDialog: "",
192 align: "center", 198 editPaymentDialog: false,
193 }, 199 editedItem: {},
194 { text: "Action", value: "", sortable: false, align: "center" }, 200 y: "top",
195 ], 201 x: "right",
196 paymentHistory: [], 202 mode: "",
197 addPaymentHistoryDialog: "", 203 timeout: 5000,
198 editPaymentDialog: false, 204 text: "",
199 editedItem: {}, 205 color: "",
200 y: "top", 206 snackbar: false,
201 x: "right", 207 }),
202 mode: "", 208 methods: {
203 timeout: 5000, 209 editItem(item) {
204 text: "", 210 this.editedIndex = this.paymentHistory.indexOf(item);
205 color: "", 211 this.editedItem = Object.assign({}, item);
206 snackbar: false, 212 this.editedItem.paidAmount = this.editedItem.feeType.paidAmount;
207 }), 213 this.editPaymentDialog = true;
208 methods: { 214 },
209 editItem(item) { 215 deleteItem(item) {
210 this.editedIndex = this.paymentHistory.indexOf(item); 216 let deleteGrade = {
211 this.editedItem = Object.assign({}, item); 217 invoiceId: item._id,
212 this.editedItem.paidAmount = this.editedItem.feeType.paidAmount; 218 feeTypeId: item.feeType._id,
213 this.editPaymentDialog = true; 219 };
214 }, 220 http()
215 deleteItem(item) { 221 .put(
216 let deleteGrade = { 222 "/deleteFeeType",
217 invoiceId: item._id, 223 confirm("Are you sure you want to delete this?") && deleteGrade,
218 feeTypeId: item.feeType._id, 224 {
219 }; 225 headers: {
220 http() 226 Authorization: "Bearer " + this.token,
221 .put( 227 },
222 "/deleteFeeType", 228 }
223 confirm("Are you sure you want to delete this?") && deleteGrade, 229 )
224 { 230 .then((response) => {
225 headers: { 231 this.snackbar = true;
226 Authorization: "Bearer " + this.token, 232 // this.text = "Successfully Delete Salary ";
227 }, 233 this.text = response.data.message;
228 } 234 this.color = "green";
229 ) 235 this.getPaymentHistory();
230 .then((response) => { 236 })
231 this.snackbar = true; 237 .catch((error) => {
232 // this.text = "Successfully Delete Salary "; 238 // console.log("error", error);
233 this.text = response.data.message; 239 this.snackbar = true;
234 this.color = "green"; 240 this.text = error.response.data.message;
235 this.getPaymentHistory(); 241 this.color = "red";
236 }) 242 });
237 .catch((error) => { 243 },
238 // console.log("error", error); 244
239 this.snackbar = true; 245 dates: function (date) {
240 this.text = error.response.data.message; 246 return moment(date).format("MMMM DD, YYYY");
241 this.color = "red"; 247 },
242 }); 248 getPaymentHistory() {
243 }, 249 this.showLoader = true;
244 250 var token = this.$store.state.token;
245 dates: function (date) { 251 http()
246 return moment(date).format("MMMM DD, YYYY"); 252 .get("/getPaymentHistory", {
247 }, 253 params: {
248 getPaymentHistory() { 254 paymentStatus: "FULLY_PAID",
249 this.showLoader = true; 255 schoolId: this.$store.state.schoolId,
250 var token = this.$store.state.token; 256 },
251 http() 257 headers: { Authorization: "Bearer " + token },
252 .get("/getPaymentHistory", { 258 })
253 params: { 259 .then((response) => {
254 paymentStatus: "FULLY_PAID", 260 this.paymentHistory = response.data.data;
255 schoolId: this.$store.state.schoolId, 261 this.showLoader = false;
256 }, 262 })
257 headers: { Authorization: "Bearer " + token }, 263 .catch((error) => {
258 }) 264 this.showLoader = false;
259 .then((response) => { 265 if (error.response.status === 401) {
260 this.paymentHistory = response.data.data; 266 this.$router.replace({ path: "/" });
261 this.showLoader = false; 267 this.$store.dispatch("setToken", null);
262 }) 268 this.$store.dispatch("Id", null);
263 .catch((error) => { 269 this.$store.dispatch("Role", null);
264 this.showLoader = false; 270 }
265 if (error.response.status === 401) { 271 });
266 this.$router.replace({ path: "/" }); 272 },
267 this.$store.dispatch("setToken", null); 273 save() {
268 this.$store.dispatch("Id", null); 274 var updatePayment = {
269 this.$store.dispatch("Role", null); 275 invoiceId: this.editedItem._id,
270 } 276 feeTypeId: this.editedItem.feeType._id,
271 }); 277 paidAmount: this.editedItem.paidAmount,
272 }, 278 paymentMethod: this.editedItem.paymentMethod,
273 save() { 279 };
274 var updatePayment = { 280 http()
275 invoiceId: this.editedItem._id, 281 .put("/updateFeeType", updatePayment, {
276 feeTypeId: this.editedItem.feeType._id, 282 headers: {
277 paidAmount: this.editedItem.paidAmount, 283 Authorization: "Bearer " + this.token,
278 paymentMethod: this.editedItem.paymentMethod, 284 },
279 }; 285 })
280 http() 286 .then((response) => {
281 .put("/updateFeeType", updatePayment, { 287 this.getPaymentHistory();
282 headers: { 288 this.snackbar = true;
283 Authorization: "Bearer " + this.token, 289 this.text = response.data.message;
284 }, 290 this.color = "green";
285 }) 291 this.editPaymentDialog = false;
286 .then((response) => { 292 })
287 this.getPaymentHistory(); 293 .catch((error) => {
288 this.snackbar = true; 294 // console.log("error", error.response);
289 this.text = response.data.message; 295 this.snackbar = true;
290 this.color = "green"; 296 this.text = error.response.data.message;
291 this.editPaymentDialog = false; 297 this.color = "red";
292 }) 298 });
293 .catch((error) => { 299 },
294 // console.log("error", error.response); 300 displaySearch() {
295 this.snackbar = true; 301 this.show = false;
296 this.text = error.response.data.message; 302 this.showSearch = true;
297 this.color = "red"; 303 },
298 }); 304 closeSearch() {
299 }, 305 this.showSearch = false;
300 displaySearch() { 306 this.show = true;
301 this.show = false; 307 this.search = "";
302 this.showSearch = true; 308 },
303 }, 309 },
304 closeSearch() { 310 mounted() {
305 this.showSearch = false; 311 this.token = this.$store.state.token;
306 this.show = true; 312 this.getPaymentHistory();
307 this.search = ""; 313 },
308 }, 314 };
309 }, 315 </script>
src/pages/Account/paymentTemplate.vue
Diff comments   View file @8b7976c
1 <template> 1 <template>
2 <v-app id="pages-dasboard"> 2 <v-app id="pages-dasboard">
3 <!-- ****** Edit multiple INVOICE ****** --> 3 <!-- ****** Edit multiple INVOICE ****** -->
4 4
5 <v-snackbar 5 <v-snackbar
6 :timeout="timeout" 6 :timeout="timeout"
7 :top="y === 'top'" 7 :top="y === 'top'"
8 :right="x === 'right'" 8 :right="x === 'right'"
9 :vertical="mode === 'vertical'" 9 :vertical="mode === 'vertical'"
10 v-model="snackbar" 10 v-model="snackbar"
11 color="success" 11 color="success"
12 >{{ text }}</v-snackbar> 12 >{{ text }}</v-snackbar>
13 <v-flex xs12 sm12> 13 <v-flex xs12 sm12>
14 <v-container fluid grid-list-md> 14 <v-container fluid grid-list-md>
15 <v-layout wrap> 15 <v-layout wrap>
16 <v-flex xs12 sm12 md4> 16 <v-flex xs12 sm12 md4>
17 <v-card flat class="mb-4"> 17 <v-card flat class="mb-4">
18 <v-toolbar dark class="card-styles" flat> 18 <v-toolbar dark class="card-styles" flat>
19 <v-spacer></v-spacer> 19 <v-spacer></v-spacer>
20 <h3>Profile</h3> 20 <h3>Profile</h3>
21 <v-spacer></v-spacer> 21 <v-spacer></v-spacer>
22 </v-toolbar> 22 </v-toolbar>
23 <!-- Profile User--> 23 <!-- Profile User-->
24 <v-card-text> 24 <v-card-text>
25 <v-container> 25 <v-container>
26 <v-layout wrap> 26 <v-layout wrap>
27 <v-flex xs12> 27 <v-flex xs12>
28 <v-layout> 28 <v-layout>
29 <v-flex 29 <v-flex
30 xs12 30 xs12
31 class="text-xs-center text-sm-center text-md-center text-lg-center" 31 class="text-xs-center text-sm-center text-md-center text-lg-center"
32 > 32 >
33 <v-avatar size="80px"> 33 <v-avatar size="80px">
34 <img src="/static/icon/user.png" v-if="!editPayment.profilePicUrl" /> 34 <img src="/static/icon/user.png" v-if="!editPayment.profilePicUrl" />
35 <img 35 <img
36 :src="editPayment.profilePicUrl" 36 :src="editPayment.profilePicUrl"
37 v-else-if="editPayment.profilePicUrl" 37 v-else-if="editPayment.profilePicUrl"
38 /> 38 />
39 </v-avatar> 39 </v-avatar>
40 </v-flex> 40 </v-flex>
41 </v-layout> 41 </v-layout>
42 <v-layout> 42 <v-layout>
43 <v-flex xs12 sm12> 43 <v-flex xs12 sm12>
44 <h3 class="text-xs-center"> 44 <h3 class="text-xs-center">
45 <b>{{ editPayment.studentId.name }}</b> 45 <b>{{ editPayment.studentId.name }}</b>
46 </h3> 46 </h3>
47 <p class="text-xs-center grey--text">Student</p> 47 <p class="text-xs-center grey--text">Student</p>
48 </v-flex> 48 </v-flex>
49 </v-layout> 49 </v-layout>
50 <v-layout style="border: 1px solid lightgrey;"> 50 <v-layout style="border: 1px solid lightgrey;">
51 <v-flex xs6 sm6 class="pa-0"> 51 <v-flex xs6 sm6 class="pa-0">
52 <h4 class="right"> 52 <h4 class="right">
53 <b>Roll No :</b> 53 <b>Roll No :</b>
54 </h4> 54 </h4>
55 </v-flex> 55 </v-flex>
56 <v-flex sm6 xs6 class="pa-0"> 56 <v-flex sm6 xs6 class="pa-0">
57 <h4>{{ editPayment.studentId.rollNo }}</h4> 57 <h4>{{ editPayment.studentId.rollNo }}</h4>
58 </v-flex> 58 </v-flex>
59 </v-layout> 59 </v-layout>
60 <v-layout style="border: 1px solid lightgrey;"> 60 <v-layout style="border: 1px solid lightgrey;">
61 <v-flex xs6 sm6 class="pa-0"> 61 <v-flex xs6 sm6 class="pa-0">
62 <h4 class="right"> 62 <h4 class="right">
63 <b>Class :</b> 63 <b>Class :</b>
64 </h4> 64 </h4>
65 </v-flex> 65 </v-flex>
66 <v-flex sm6 xs6 class="pa-0"> 66 <v-flex sm6 xs6 class="pa-0">
67 <h4>{{ editPayment.classId.classNum }}</h4> 67 <h4>{{ editPayment.classId.classNum }}</h4>
68 </v-flex> 68 </v-flex>
69 </v-layout> 69 </v-layout>
70 </v-flex> 70 </v-flex>
71 </v-layout> 71 </v-layout>
72 </v-container> 72 </v-container>
73 </v-card-text> 73 </v-card-text>
74 </v-card> 74 </v-card>
75 <!-- Account Fee Type List User--> 75 <!-- Account Fee Type List User-->
76 <v-card flat> 76 <v-card flat>
77 <v-toolbar dark class="card-styles" flat> 77 <v-toolbar dark class="card-styles" flat>
78 <v-spacer></v-spacer> 78 <v-spacer></v-spacer>
79 <v-toolbar-title> 79 <v-toolbar-title>
80 <h3>Invoice</h3> 80 <h3>Invoice</h3>
81 </v-toolbar-title> 81 </v-toolbar-title>
82 <v-spacer></v-spacer> 82 <v-spacer></v-spacer>
83 </v-toolbar> 83 </v-toolbar>
84 <v-form ref="form" v-model="valid" lazy-validation class="py-4"> 84 <v-form ref="form" v-model="valid" lazy-validation class="py-4">
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">Payment Method:</label> 87 <label class="right">Payment Method:</label>
88 </v-flex> 88 </v-flex>
89 <v-flex xs7 class="ml-3"> 89 <v-flex xs7 class="ml-3">
90 <v-select 90 <v-select
91 :items="paymentMethods" 91 :items="paymentMethods"
92 v-model="editPayment.paymentMethod" 92 v-model="editPayment.paymentMethod"
93 label="Select Payment Method" 93 label="Select Payment Method"
94 ></v-select> 94 ></v-select>
95 </v-flex> 95 </v-flex>
96 </v-layout> 96 </v-layout>
97 <v-card-actions> 97 <v-card-actions>
98 <v-spacer class="hidden-xs-only"></v-spacer> 98 <v-spacer class="hidden-xs-only"></v-spacer>
99 <v-btn 99 <v-btn
100 color="open-dialog-button" 100 color="open-dialog-button"
101 dark 101 dark
102 class="right add-button" 102 class="right add-button"
103 @click="update(editPayment)" 103 @click="update(editPayment)"
104 >Add Payment</v-btn> 104 >Add Payment</v-btn>
105 </v-card-actions> 105 </v-card-actions>
106 </v-form> 106 </v-form>
107 </v-card> 107 </v-card>
108 </v-flex> 108 </v-flex>
109 <v-flex xs12 sm12 md8> 109 <v-flex xs12 sm12 md8>
110 <v-card> 110 <v-card>
111 <v-toolbar dark class="card-styles" flat> 111 <v-toolbar dark class="card-styles" flat>
112 <v-spacer></v-spacer> 112 <v-spacer></v-spacer>
113 <v-toolbar-title> 113 <v-toolbar-title>
114 <h3>Fee Type List</h3> 114 <h3>Fee Type List</h3>
115 </v-toolbar-title> 115 </v-toolbar-title>
116 <v-spacer></v-spacer> 116 <v-spacer></v-spacer>
117 </v-toolbar> 117 </v-toolbar>
118 <table class="feeTypeTable tableRsponsive"> 118 <table class="feeTypeTable tableRsponsive">
119 <tr class="info white--text"> 119 <tr class="info white--text">
120 <th>#</th> 120 <th>#</th>
121 <th>Fee Type</th> 121 <th>Fee Type</th>
122 <th>Amount</th> 122 <th>Amount</th>
123 <th>Discount</th> 123 <th>Discount</th>
124 <th>Subtotal</th> 124 <th>Subtotal</th>
125 <th>Paid Amount</th> 125 <th>Paid Amount</th>
126 <th>Action</th> 126 <th>Action</th>
127 </tr> 127 </tr>
128 <tr 128 <tr
129 v-for="(feeType, index) in editPayment.feeType" 129 v-for="(feeType, index) in editPayment.feeType"
130 :key="index" 130 :key="index"
131 v-on:keyup="getAmmountDetails(feeType,editPayment.feeType)" 131 v-on:keyup="getAmmountDetails(feeType,editPayment.feeType)"
132 > 132 >
133 <td style="width:40px">{{ index + 1 }}</td> 133 <td style="width:40px">{{ index + 1 }}</td>
134 <td style="width:120px">{{ feeType.feeTypeName }}</td> 134 <td style="width:120px">{{ feeType.feeTypeName }}</td>
135 <td> 135 <td>
136 <v-text-field 136 <v-text-field
137 placeholder="fill your Amount" 137 placeholder="fill your Amount"
138 v-model="feeType.amount" 138 v-model="feeType.amount"
139 type="number" 139 type="number"
140 ></v-text-field> 140 ></v-text-field>
141 </td> 141 </td>
142 <td> 142 <td>
143 <v-text-field 143 <v-text-field
144 placeholder="fill your Discount" 144 placeholder="fill your Discount"
145 v-model="feeType.discount" 145 v-model="feeType.discount"
146 type="number" 146 type="number"
147 ></v-text-field> 147 ></v-text-field>
148 </td> 148 </td>
149 <td>{{ feeType.subTotal }}</td> 149 <td>{{ feeType.subTotal }}</td>
150 <td> 150 <td>
151 <v-text-field 151 <v-text-field
152 placeholder="fill your Paid Amount" 152 placeholder="fill your Paid Amount"
153 v-model="feeType.paidAmount" 153 v-model="feeType.paidAmount"
154 type="number" 154 type="number"
155 ></v-text-field> 155 ></v-text-field>
156 </td> 156 </td>
157 <td v-if="!editPayment.feeType"> 157 <td v-if="!editPayment.feeType">
158 <v-icon 158 <v-icon
159 color="error" 159 color="error"
160 @click="deleteSelectFee(feeType,editPayment.feeType,index)" 160 @click="deleteSelectFee(feeType,editPayment.feeType,index)"
161 >delete</v-icon> 161 >delete</v-icon>
162 </td> 162 </td>
163 </tr> 163 </tr>
164 <tfoot v-if="feeType.amount != 0.00"> 164 <tfoot v-if="feeType.amount != 0.00">
165 <tr> 165 <tr>
166 <td colspan="2">Total:</td> 166 <td colspan="2">Total:</td>
167 <td>{{ feeType.amount }}</td> 167 <td>{{ feeType.amount }}</td>
168 <td>{{ feeType.discount }}</td> 168 <td>{{ feeType.discount }}</td>
169 <td>{{ feeType.subTotal }}</td> 169 <td>{{ feeType.subTotal }}</td>
170 <td>{{ feeType.paidAmount }}</td> 170 <td>{{ feeType.paidAmount }}</td>
171 </tr> 171 </tr>
172 </tfoot> 172 </tfoot>
173 <tfoot v-else-if="feeType.amount == 0.00"> 173 <tfoot v-else-if="feeType.amount == 0.00">
174 <tr> 174 <tr>
175 <td colspan="2">Total:</td> 175 <td colspan="2">Total:</td>
176 <td>{{ editPayment.totalAmount }}</td> 176 <td>{{ editPayment.totalAmount }}</td>
177 <td>{{ editPayment.totalDiscount }}</td> 177 <td>{{ editPayment.totalDiscount }}</td>
178 <td>{{ editPayment.totalSubTotal }}</td> 178 <td>{{ editPayment.totalSubTotal }}</td>
179 <td>{{ editPayment.totalPaidAmount }}</td> 179 <td>{{ editPayment.totalPaidAmount }}</td>
180 </tr> 180 </tr>
181 </tfoot> 181 </tfoot>
182 </table> 182 </table>
183 </v-card> 183 </v-card>
184 </v-flex> 184 </v-flex>
185 </v-layout> 185 </v-layout>
186 </v-container> 186 </v-container>
187 </v-flex> 187 </v-flex>
188 <div class="loader" v-if="showLoader"> 188 <div class="loader" v-if="showLoader">
189 <v-progress-circular indeterminate color="white"></v-progress-circular> 189 <v-progress-circular indeterminate color="white"></v-progress-circular>
190 </div> 190 </div>
191 </v-app> 191 </v-app>
192 </template> 192 </template>
193 193
194 <script> 194 <script>
195 import http from "@/Services/http.js"; 195 import http from "@/Services/http.js";
196 import moment from "moment"; 196 import moment from "moment";
197 197
198 export default { 198 export default {
199 props: ["editPayment"], 199 props: ["editPayment"],
200 data: () => ({ 200 data: () => ({
201 snackbar: false, 201 snackbar: false,
202 // showPayMethods: false, 202 // showPayMethods: false,
203 y: "top", 203 y: "top",
204 x: "right", 204 x: "right",
205 mode: "", 205 mode: "",
206 timeout: 3000, 206 timeout: 3000,
207 text: "", 207 text: "",
208 showLoader: false, 208 showLoader: false,
209 loading: false, 209 loading: false,
210 date: null, 210 date: null,
211 search: "", 211 search: "",
212 // dialog: false, 212 // dialog: false,
213 // dialog1: false, 213 // dialog1: false,
214 valid: true, 214 valid: true,
215 validEdit: true, 215 validEdit: true,
216 // isActive: true, 216 // isActive: true,
217 // newActive: false, 217 // newActive: false,
218 showFeeType: false, 218 showFeeType: false,
219 disabled: true, 219 disabled: true,
220 details: [], 220 details: [],
221 feeTypes: [], 221 feeTypes: [],
222 menu1: false, 222 menu1: false,
223 // invoiceData: {}, 223 // invoiceData: {},
224 paymentMethods: ["Cash", "Cheque"], 224 paymentMethods: ["Cash", "Cheque"],
225 feeType: { 225 feeType: {
226 amount: "0.00", 226 amount: "0.00",
227 discount: "0.00", 227 discount: "0.00",
228 paidAmount: "0.00", 228 paidAmount: "0.00",
229 subTotal: "0.00", 229 subTotal: "0.00",
230 feeTypeName: "", 230 feeTypeName: "",
231 }, 231 },
232 feeTypeData: [], 232 feeTypeData: [],
233 pagination: { 233 pagination: {
234 rowsPerPage: 15, 234 rowsPerPage: 15,
235 }, 235 },
236 token: "", 236 token: "",
237 editedItem: {}, 237 editedItem: {},
238 invoiceParticularData: {}, 238 invoiceParticularData: {},
239 addclass: [], 239 addclass: [],
240 studentList: [], 240 studentList: [],
241 paymentStatus: [ 241 paymentStatus: [
242 { 242 {
243 name: "Not Paid", 243 name: "Not Paid",
244 value: "NOT_PAID", 244 value: "NOT_PAID",
245 }, 245 },
246 { 246 {
247 name: "Partially Paid", 247 name: "Partially Paid",
248 value: "PARTIALLY_PAID", 248 value: "PARTIALLY_PAID",
249 }, 249 },
250 { 250 {
251 name: "Fully Paid", 251 name: "Fully Paid",
252 value: "FULLY_PAID", 252 value: "FULLY_PAID",
253 }, 253 },
254 ], 254 ],
255 }), 255 }),
256 // watch: { 256 // watch: {
257 // menu1(val) { 257 // menu1(val) {
258 // val && this.$nextTick(() => (this.$refs.picker.activePicker = "YEAR")); 258 // val && this.$nextTick(() => (this.$refs.picker.activePicker = "YEAR"));
259 // } 259 // }
260 // }, 260 // },
261 methods: { 261 methods: {
262 save(date) { 262 save(date) {
263 this.$refs.menu1.save(date); 263 this.$refs.menu1.save(date);
264 }, 264 },
265 dates: function (date) { 265 dates: function (date) {
266 return moment(date).format("MMMM DD, YYYY"); 266 return moment(date).format("MMMM DD, YYYY");
267 }, 267 },
268 update(editPayment) { 268 update(editPayment) {
269 // console.log("editPayment-----------", editPayment); 269 // console.log("editPayment-----------", editPayment);
270 let feeTypeId = ""; 270 let feeTypeId = "";
271 for (let i = 0; i < this.feeTypes.length; i++) { 271 for (let i = 0; i < this.feeTypes.length; i++) {
272 if (this.feeTypes[i].feeType === this.feeType.feeTypeName) { 272 if (this.feeTypes[i].feeType === this.feeType.feeTypeName) {
273 feeTypeId = this.feeTypes[i]._id; 273 feeTypeId = this.feeTypes[i]._id;
274 } 274 }
275 } 275 }
276 // console.log(editPayment); 276 // console.log(editPayment);
277 let editInvoiceData = { 277 let editInvoiceData = {
278 invoiceId: editPayment._id, 278 invoiceId: editPayment._id,
279 classId: editPayment.classNum, 279 classId: editPayment.classNum,
280 studentId: editPayment.sectionId, 280 studentId: editPayment.sectionId,
281 date: editPayment.date, 281 date: editPayment.date,
282 paymentStatus: editPayment.paymentStatus, 282 paymentStatus: editPayment.paymentStatus,
283 paymentMethod: editPayment.paymentMethod, 283 paymentMethod: editPayment.paymentMethod,
284 feeType: editPayment.feeType, 284 feeType: editPayment.feeType,
285 totalAmount: this.feeType.amount.toString(), 285 totalAmount: this.feeType.amount.toString(),
286 totalDiscount: this.feeType.discount.toString(), 286 totalDiscount: this.feeType.discount.toString(),
287 totalSubTotal: this.feeType.subTotal.toString(), 287 totalSubTotal: this.feeType.subTotal.toString(),
288 totalPaidAmount: this.feeType.paidAmount, 288 totalPaidAmount: this.feeType.paidAmount,
289 }; 289 };
290 if (feeTypeId == "") { 290 if (feeTypeId == "") {
291 delete editInvoiceData.feeType[0].feeTypeId; 291 delete editInvoiceData.feeType[0].feeTypeId;
292 } 292 }
293 if (editInvoiceData.paymentStatus == "NOT_PAID") { 293 if (editInvoiceData.paymentStatus == "NOT_PAID") {
294 delete editInvoiceData.paymentMethod; 294 delete editInvoiceData.paymentMethod;
295 } 295 }
296 if (editInvoiceData.totalPaidAmount == "0") { 296 if (editInvoiceData.totalPaidAmount == "0") {
297 if (editInvoiceData.paymentStatus == "NOT_PAID") { 297 if (editInvoiceData.paymentStatus == "NOT_PAID") {
298 delete editInvoiceData.totalPaidAmount; 298 delete editInvoiceData.totalPaidAmount;
299 } 299 }
300 } 300 }
301 if (editInvoiceData.totalPaidAmount != "0.00") { 301 if (editInvoiceData.totalPaidAmount != "0.00") {
302 if (this.feeType.subTotal == this.feeType.paidAmount) { 302 if (this.feeType.subTotal == this.feeType.paidAmount) {
303 editInvoiceData.paymentStatus = "FULLY_PAID"; 303 editInvoiceData.paymentStatus = "FULLY_PAID";
304 } 304 }
305 if (editInvoiceData.totalPaidAmount) { 305 if (editInvoiceData.totalPaidAmount) {
306 if (this.feeType.subTotal != this.feeType.paidAmount) { 306 if (this.feeType.subTotal != this.feeType.paidAmount) {
307 editInvoiceData.paymentStatus = "PARTIALLY_PAID"; 307 editInvoiceData.paymentStatus = "PARTIALLY_PAID";
308 // console.log("PARTIALLY_PAID"); 308 // console.log("PARTIALLY_PAID");
309 } 309 }
310 } 310 }
311 } 311 }
312 312
313 if (editInvoiceData.totalSubTotal == "0.00") { 313 if (editInvoiceData.totalSubTotal == "0.00") {
314 editInvoiceData.paymentStatus = "FULLY_PAID"; 314 editInvoiceData.paymentStatus = "FULLY_PAID";
315 } else if (editInvoiceData.totalSubTotal != "0.00") { 315 } else if (editInvoiceData.totalSubTotal != "0.00") {
316 if (this.feeType.paidAmount === "0.00") { 316 if (this.feeType.paidAmount === "0.00") {
317 editInvoiceData.paymentStatus = "NOT_PAID"; 317 editInvoiceData.paymentStatus = "NOT_PAID";
318 } 318 }
319 } 319 }
320 http() 320 http()
321 .put("/updateInvoice", editInvoiceData) 321 .put("/updateInvoice", editInvoiceData)
322 .then((response) => { 322 .then((response) => {
323 // this.getInvoiceList(); 323 // this.getInvoiceList();
324 this.snackbar = true; 324 this.snackbar = true;
325 this.text = "Payment added successfully"; 325 this.text = "Payment added successfully";
326 this.loading = false; 326 this.loading = false;
327 this.$emit("update-Payment"); 327 this.$emit("update-Payment");
328 }) 328 })
329 .catch((error) => { 329 .catch((error) => {
330 // console.log(error); 330 // console.log(error);
331 this.snackbar = true; 331 this.snackbar = true;
332 this.text = error.response.data.message; 332 this.text = error.response.data.message;
333 this.loading = false; 333 this.loading = false;
334 }); 334 });
335 }, 335 },
336 clear() { 336 clear() {
337 this.$refs.form.reset(); 337 this.$refs.form.reset();
338 }, 338 },
339 deleteSelectFee: function (feeTyp, feeTypeList, index) { 339 deleteSelectFee: function (feeTyp, feeTypeList, index) {
340 this.editPayment.feeType.splice(index, 1); 340 this.editPayment.feeType.splice(index, 1);
341 this.getAmmountDetails(feeTyp, feeTypeList); 341 this.getAmmountDetails(feeTyp, feeTypeList);
342 if (this.feeTypeData.length == 0) { 342 if (this.feeTypeData.length == 0) {
343 this.feeType = { 343 this.feeType = {
344 amount: "0.00", 344 amount: "0.00",
345 discount: "0.00", 345 discount: "0.00",
346 paidAmount: "0.00", 346 paidAmount: "0.00",
347 subTotal: "0.00", 347 subTotal: "0.00",
348 feeTypeList: "", 348 feeTypeList: "",
349 }; 349 };
350 } 350 }
351 }, 351 },
352 getAllClasses() { 352 getAllClasses() {
353 http() 353 http()
354 .get("/getClassesList", { 354 .get("/getClassesList", {
355 headers: { Authorization: "Bearer " + this.token }, 355 headers: { Authorization: "Bearer " + this.token },
356 }) 356 })
357 .then((response) => { 357 .then((response) => {
358 this.addclass = response.data.data; 358 this.addclass = response.data.data;
359 this.getAllStudents(); 359 this.getAllStudents();
360 }) 360 })
361 .catch((error) => { 361 .catch((error) => {
362 // console.log("err====>", err); 362 // console.log("err====>", err);
363 this.showLoader = false; 363 this.showLoader = false;
364 if (error.response.status === 401) { 364 if (error.response.status === 401) {
365 this.$router.replace({ path: "/" }); 365 this.$router.replace({ path: "/" });
366 this.$store.dispatch("setToken", null); 366 this.$store.dispatch("setToken", null);
367 this.$store.dispatch("Id", null); 367 this.$store.dispatch("Id", null);
368 this.$store.dispatch("Role", null); 368 this.$store.dispatch("Role", null);
369 } 369 }
370 }); 370 });
371 }, 371 },
372 getAllStudents() { 372 getAllStudents() {
373 http() 373 http()
374 .get("/getStudentsList", { 374 .get("/getStudentsList", {
375 params: { classId: this.editPayment.classNum }, 375 params: { classId: this.editPayment.classNum },
376 headers: { Authorization: "Bearer " + this.token }, 376 headers: { Authorization: "Bearer " + this.token },
377 }) 377 })
378 .then((response) => { 378 .then((response) => {
379 this.studentList = response.data.data; 379 this.studentList = response.data.data;
380 }) 380 })
381 .catch((err) => { 381 .catch((err) => {
382 // console.log("err====>", err); 382 // console.log("err====>", err);
383 }); 383 });
384 }, 384 },
385 getfeeType() { 385 getfeeType() {
386 http() 386 http()
387 .get("/getFeesList", { 387 .get("/getFeesList", {
388 headers: { Authorization: "Bearer " + this.token }, 388 headers: { Authorization: "Bearer " + this.token },
389 }) 389 })
390 .then((response) => { 390 .then((response) => {
391 this.feeTypes = response.data.data; 391 this.feeTypes = response.data.data;
392 }) 392 })
393 .catch((err) => { 393 .catch((err) => {
394 // console.log("err====>", err); 394 // console.log("err====>", err);
395 }); 395 });
396 }, 396 },
397 getAmmountDetails(feeTyp, feeTypeList) { 397 getAmmountDetails(feeTyp, feeTypeList) {
398 this.feeTypeData = feeTypeList; 398 this.feeTypeData = feeTypeList;
399 let feeType = { 399 let feeType = {
400 amount: "", 400 amount: "",
401 discount: "", 401 discount: "",
402 subTotal: "", 402 subTotal: "",
403 subParticularTotal: "", 403 subParticularTotal: "",
404 paidAmount: "", 404 paidAmount: "",
405 }; 405 };
406 for (let i = 0; i < this.feeTypeData.length; i++) { 406 for (let i = 0; i < this.feeTypeData.length; i++) {
407 // *********** AMOUNT *********** 407 // *********** AMOUNT ***********
408 if (this.feeTypeData[i].amount) { 408 if (this.feeTypeData[i].amount) {
409 feeType.amount = 409 feeType.amount =
410 Number(feeType.amount) + Number(this.feeTypeData[i].amount); 410 Number(feeType.amount) + Number(this.feeTypeData[i].amount);
411 this.feeType.amount = feeType.amount; 411 this.feeType.amount = feeType.amount;
412 this.feeType.subTotal = feeType.amount; 412 this.feeType.subTotal = feeType.amount;
413 this.feeTypeData[i].subTotal = this.feeTypeData[i].amount; 413 this.feeTypeData[i].subTotal = this.feeTypeData[i].amount;
414 } else if (this.feeTypeData[0].amount == "") { 414 } else if (this.feeTypeData[0].amount == "") {
415 this.feeType.amount = "0.00"; 415 this.feeType.amount = "0.00";
416 this.feeTypeData[i].subTotal = "0.00"; 416 this.feeTypeData[i].subTotal = "0.00";
417 this.feeType.subTotal = "0.00"; 417 this.feeType.subTotal = "0.00";
418 } else if (this.feeTypeData[i].amount == "") { 418 } else if (this.feeTypeData[i].amount == "") {
419 this.feeType.amount = 419 this.feeType.amount =
420 Number(feeType.amount) + Number(this.feeTypeData[i].amount); 420 Number(feeType.amount) + Number(this.feeTypeData[i].amount);
421 this.feeTypeData[i].subTotal = 421 this.feeTypeData[i].subTotal =
422 Number(feeType.amount) + Number(this.feeTypeData[i].amount); 422 Number(feeType.amount) + Number(this.feeTypeData[i].amount);
423 this.feeType.subTotal = 423 this.feeType.subTotal =
424 Number(feeType.amount) + Number(this.feeTypeData[i].amount); 424 Number(feeType.amount) + Number(this.feeTypeData[i].amount);
425 } 425 }
426 // *********** DISCOUNT *********** 426 // *********** DISCOUNT ***********
427 if (this.feeTypeData[i].discount) { 427 if (this.feeTypeData[i].discount) {
428 if ( 428 if (
429 Number(this.feeTypeData[i].discount) < this.feeTypeData[i].amount 429 Number(this.feeTypeData[i].discount) < this.feeTypeData[i].amount
430 ) { 430 ) {
431 feeType.discount = 431 feeType.discount =
432 Number(feeType.discount) + Number(this.feeTypeData[i].discount); 432 Number(feeType.discount) + Number(this.feeTypeData[i].discount);
433 this.feeType.discount = feeType.discount; 433 this.feeType.discount = feeType.discount;
434 feeType.subParticularTotal = 434 feeType.subParticularTotal =
435 this.feeTypeData[i].amount - this.feeTypeData[i].discount; 435 this.feeTypeData[i].amount - this.feeTypeData[i].discount;
436 this.feeTypeData[i].subTotal = feeType.subParticularTotal.toFixed( 436 this.feeTypeData[i].subTotal = feeType.subParticularTotal.toFixed(
437 2 437 2
438 ); 438 );
439 } else if ( 439 } else if (
440 Number(this.feeTypeData[i].discount) >= this.feeTypeData[i].amount 440 Number(this.feeTypeData[i].discount) >= this.feeTypeData[i].amount
441 ) { 441 ) {
442 this.feeTypeData[i].discount = this.feeTypeData[i].amount; 442 this.feeTypeData[i].discount = this.feeTypeData[i].amount;
443 feeType.discount = 443 feeType.discount =
444 Number(feeType.discount) + Number(this.feeTypeData[i].discount); 444 Number(feeType.discount) + Number(this.feeTypeData[i].discount);
445 this.feeType.discount = feeType.discount.toString(); 445 this.feeType.discount = feeType.discount.toString();
446 feeType.subParticularTotal = 446 feeType.subParticularTotal =
447 this.feeTypeData[i].amount - this.feeTypeData[i].discount; 447 this.feeTypeData[i].amount - this.feeTypeData[i].discount;
448 this.feeTypeData[ 448 this.feeTypeData[
449 i 449 i
450 ].subTotal = feeType.subParticularTotal.toString(); 450 ].subTotal = feeType.subParticularTotal.toString();
451 } 451 }
452 } else if (this.feeTypeData[0].discount == "") { 452 } else if (this.feeTypeData[0].discount == "") {
453 this.feeType.discount = "0.00"; 453 this.feeType.discount = "0.00";
454 } 454 }
455 455
456 // *********** SUBTOTAL *********** 456 // *********** SUBTOTAL ***********
457 if (this.feeTypeData[i].subTotal) { 457 if (this.feeTypeData[i].subTotal) {
458 feeType.subTotal = 458 feeType.subTotal =
459 Number(feeType.subTotal) + Number(this.feeTypeData[i].subTotal); 459 Number(feeType.subTotal) + Number(this.feeTypeData[i].subTotal);
460 this.feeType.subTotal = feeType.subTotal.toFixed(2); 460 this.feeType.subTotal = feeType.subTotal.toFixed(2);
461 } 461 }
462 462
463 // *********** PAID-AMOUNT *********** 463 // *********** PAID-AMOUNT ***********
464 if (this.feeTypeData[i].paidAmount) { 464 if (this.feeTypeData[i].paidAmount) {
465 feeType.paidAmount = 465 feeType.paidAmount =
466 Number(feeType.paidAmount) + Number(this.feeTypeData[i].paidAmount); 466 Number(feeType.paidAmount) + Number(this.feeTypeData[i].paidAmount);
467 this.feeType.paidAmount = feeType.paidAmount.toFixed(2); 467 this.feeType.paidAmount = feeType.paidAmount.toFixed(2);
468 } else if (this.feeTypeData[0].paidAmount == "") { 468 } else if (this.feeTypeData[0].paidAmount == "") {
469 this.feeType.paidAmount = "0.00"; 469 this.feeType.paidAmount = "0.00";
470 } else if (this.feeTypeData[i].paidAmount == "") { 470 } else if (this.feeTypeData[i].paidAmount == "") {
471 this.feeType.paidAmount = feeType.paidAmount = 471 this.feeType.paidAmount = feeType.paidAmount =
472 Number(feeType.paidAmount) + Number(this.feeTypeData[i].paidAmount); 472 Number(feeType.paidAmount) + Number(this.feeTypeData[i].paidAmount);
473 } 473 }
474 474
475 // if paid Amount fill large of subtotal value so this condition are fixed filled subtotal value. 475 // if paid Amount fill large of subtotal value so this condition are fixed filled subtotal value.
476 if (feeType.paidAmount > feeType.subTotal) { 476 if (feeType.paidAmount > feeType.subTotal) {
477 this.feeTypeData[i].paidAmount = this.feeTypeData[i].subTotal; 477 this.feeTypeData[i].paidAmount = this.feeTypeData[i].subTotal;
478 this.feeType.paidAmount = feeType.subTotal; 478 this.feeType.paidAmount = feeType.subTotal;
479 } 479 }
480 } 480 }
481 }, 481 },
482 // getPayMethodList() { 482 // getPayMethodList() {
483 // if (this.editPayment.paymentStatus == "PARTIALLY_PAID") { 483 // if (this.editPayment.paymentStatus == "PARTIALLY_PAID") {
484 // this.showPayMethods = true; 484 // this.showPayMethods = true;
485 // } else if (this.editPayment.paymentStatus == "FULLY_PAID") { 485 // } else if (this.editPayment.paymentStatus == "FULLY_PAID") {
486 // this.showPayMethods = true; 486 // this.showPayMethods = true;
487 // } else { 487 // } else {
488 // this.showPayMethods = false; 488 // this.showPayMethods = false;
489 // } 489 // }
490 // } 490 // }
491 }, 491 },
492 mounted() { 492 mounted() {
493 this.token = this.$store.state.token; 493 this.token = this.$store.state.token;
494 this.getAllClasses(); 494 this.getAllClasses();
495 this.getfeeType(); 495 this.getfeeType();
496 }, 496 },
497 created() { 497 created() {
498 this.$root.$on("app:search", (search) => { 498 this.$root.$on("app:search", (search) => {
499 this.search = search; 499 this.search = search;
500 }); 500 });
501 }, 501 },
502 beforeDestroy() { 502 beforeDestroy() {
503 // dont forget to remove the listener 503 // dont forget to remove the listener
504 this.$root.$off("app:search"); 504 this.$root.$off("app:search");
505 }, 505 },
506 }; 506 };
507 </script> 507 </script>
508 508
509 509
510 <style scoped> 510 <style scoped>
511 .active { 511 .active {
512 background-color: gray; 512 background-color: gray;
513 color: white !important; 513 color: white !important;
514 } 514 }
515 .activebtn { 515 .activebtn {
516 color: black !important; 516 color: black !important;
517 } 517 }
518 table { 518 table {
519 border-collapse: collapse; 519 border-collapse: collapse;
520 border: 1px solid #e2e7eb; 520 border: 1px solid #e2e7eb;
521 } 521 }
522 522
523 th, 523 th,
524 td { 524 td {
525 border: 1px solid #e2e7eb; 525 border: 1px solid #e2e7eb;
526 padding: 10px; 526 padding: 10px;
527 text-align: center; 527 text-align: center;
528 } 528 }
529 table.feeTypeTable { 529 table.feeTypeTable {
530 table-layout: auto !important; 530 table-layout: auto !important;
531 width: 100% !important; 531 width: 100% !important;
532 } 532 }
533 @media screen and (max-width: 380px) { 533 @media screen and (max-width: 380px) {
534 .tableRsponsive { 534 .tableRsponsive {
535 display: block; 535 display: block;
536 position: relative; 536 position: relative;
537 overflow: scroll; 537 overflow: scroll;
538 } 538 }
539 } 539 }
540 </style> 540 </style>
src/pages/Account/viewInvoice.vue
Diff comments   View file @8b7976c
1 <template> 1 <template>
2 <v-app id="pages-dasboard"> 2 <v-app id="pages-dasboard">
3 <!-- ****** Edit INVOICE ****** --> 3 <!-- ****** Edit INVOICE ****** -->
4 <v-container fluid grid-list-md> 4 <v-container fluid grid-list-md>
5 <v-flex xs12 sm12> 5 <v-flex xs12 sm12>
6 <v-layout> 6 <v-layout>
7 <v-flex xs12 sm12 md10 class="mx-auto"> 7 <v-flex xs12 sm12 md10 class="mx-auto">
8 <v-btn class="open-dialog-button mt-3" round dark @click="printInvoice()"> 8 <v-btn class="open-dialog-button mt-3" round dark @click="printInvoice()">
9 Print 9 Print
10 <v-icon size="18" right dark>print</v-icon> 10 <v-icon size="18" right dark>print</v-icon>
11 </v-btn> 11 </v-btn>
12 </v-flex> 12 </v-flex>
13 </v-layout> 13 </v-layout>
14 <v-layout wrap> 14 <v-layout wrap>
15 <!-- ****** TABLE DATA MARK ****** --> 15 <!-- ****** TABLE DATA MARK ****** -->
16 <v-flex xs12 sm12 md10 lg10 class="mx-auto" id="printMe"> 16 <v-flex xs12 sm12 md10 lg10 class="mx-auto" id="printMe">
17 <v-card 17 <v-card
18 style=" 18 style="
19 background-color: #fff; 19 background-color: #fff;
20 border-color: #fff; 20 border-color: #fff;
21 color: rgba(0,0,0,0.87); 21 color: rgba(0,0,0,0.87);
22 border: 1px solid rgb(226, 231, 235); 22 border: 1px solid rgb(226, 231, 235);
23 -webkit-box-shadow: 0 1px 1px 0 rgba(60,64,67,0.08), 0 1px 3px 1px rgba(60,64,67,0.16); 23 -webkit-box-shadow: 0 1px 1px 0 rgba(60,64,67,0.08), 0 1px 3px 1px rgba(60,64,67,0.16);
24 box-shadow: 0 1px 1px 0 rgba(60,64,67,0.08), 0 1px 3px 1px rgba(60,64,67,0.16);" 24 box-shadow: 0 1px 1px 0 rgba(60,64,67,0.08), 0 1px 3px 1px rgba(60,64,67,0.16);"
25 > 25 >
26 <!-- <v-layout wrap> --> 26 <!-- <v-layout wrap> -->
27 <v-layout wrap> 27 <v-layout wrap>
28 <v-flex xs12 sm12 md12> 28 <v-flex xs12 sm12 md12>
29 <div 29 <div
30 style=" 30 style="
31 border-bottom: 1px solid #ddd; 31 border-bottom: 1px solid #ddd;
32 overflow: hidden; 32 overflow: hidden;
33 vertical-align: middle; 33 vertical-align: middle;
34 margin: 10px; 34 margin: 10px;
35 padding-bottom: 10px;" 35 padding-bottom: 10px;"
36 > 36 >
37 <v-flex xs12 sm12 md12> 37 <v-flex xs12 sm12 md12>
38 <v-layout> 38 <v-layout>
39 <div class="school-logo"> 39 <div class="school-logo">
40 <v-avatar size="100"> 40 <v-avatar size="100">
41 <img :src="userData.schoolLogoUrl" v-if="userData.schoolLogoUrl" /> 41 <img :src="userData.schoolLogoUrl" v-if="userData.schoolLogoUrl" />
42 <img 42 <img
43 src="/static/schoolIcons/INTRACK_White.png" 43 src="/static/schoolIcons/INTRACK_White.png"
44 v-else-if="!userData.schoolLogoUrl" 44 v-else-if="!userData.schoolLogoUrl"
45 /> 45 />
46 </v-avatar> 46 </v-avatar>
47 </div> 47 </div>
48 <div class="school-name"> 48 <div class="school-name">
49 <h2>{{ userData.name }}</h2> 49 <h2>{{ userData.name }}</h2>
50 </div> 50 </div>
51 </v-layout> 51 </v-layout>
52 </v-flex> 52 </v-flex>
53 </div> 53 </div>
54 </v-flex> 54 </v-flex>
55 <!-- Profile School --> 55 <!-- Profile School -->
56 <v-layout> 56 <v-layout>
57 <!-- school info --> 57 <!-- school info -->
58 <v-flex xs12 sm12 md12 lg12 style="margin:0px 10px; "> 58 <v-flex xs12 sm12 md12 lg12 style="margin:0px 10px; ">
59 <v-layout wrap> 59 <v-layout wrap>
60 <v-flex xs4 sm4 md4 lg4 style="padding:4px;padding-left:16px;"> 60 <v-flex xs4 sm4 md4 lg4 style="padding:4px;padding-left:16px;">
61 <span style="font-size: 16px; color: #707478;">From</span> 61 <span style="font-size: 16px; color: #707478;">From</span>
62 <br /> 62 <br />
63 <p style="font-size:20px;margin-bottom: 16px;">{{ userData.name }}</p> 63 <p style="font-size:20px;margin-bottom: 16px;">{{ userData.name }}</p>
64 <p 64 <p
65 style="font-size: 15px;color: #707478;margin:0px;margin-bottom:8px;" 65 style="font-size: 15px;color: #707478;margin:0px;margin-bottom:8px;"
66 >{{ userData.address }}</p> 66 >{{ userData.address }}</p>
67 <p 67 <p
68 style="font-size: 15px;color: #707478;margin:0px;margin-bottom:8px;" 68 style="font-size: 15px;color: #707478;margin:0px;margin-bottom:8px;"
69 >Phone : {{ userData.mobile }}</p> 69 >Phone : {{ userData.mobile }}</p>
70 <p 70 <p
71 style="font-size: 15px;color: #707478;margin:0px;margin-bottom:8px;" 71 style="font-size: 15px;color: #707478;margin:0px;margin-bottom:8px;"
72 >Email : {{ userData.email }}</p> 72 >Email : {{ userData.email }}</p>
73 </v-flex> 73 </v-flex>
74 <!-- student info --> 74 <!-- student info -->
75 <v-flex xs4 sm4 md4 lg4 style="padding:4px;padding-left:16px;"> 75 <v-flex xs4 sm4 md4 lg4 style="padding:4px;padding-left:16px;">
76 <span style="font-size: 16px; color: #707478;">To</span> 76 <span style="font-size: 16px; color: #707478;">To</span>
77 <br /> 77 <br />
78 <p 78 <p
79 style="font-size:20px;margin-bottom: 16px;" 79 style="font-size:20px;margin-bottom: 16px;"
80 >{{ invoiceParticularData.studentId.name }}</p> 80 >{{ invoiceParticularData.studentId.name }}</p>
81 <p 81 <p
82 style="font-size: 15px;color: #707478;margin:0px;margin-bottom:8px;" 82 style="font-size: 15px;color: #707478;margin:0px;margin-bottom:8px;"
83 >Class : {{ invoiceParticularData.classId.classNum }}</p> 83 >Class : {{ invoiceParticularData.classId.classNum }}</p>
84 <p 84 <p
85 style="font-size: 15px;color: #707478;margin:0px;margin-bottom:8px;" 85 style="font-size: 15px;color: #707478;margin:0px;margin-bottom:8px;"
86 >Roll : {{ invoiceParticularData.studentId.rollNo }}</p> 86 >Roll : {{ invoiceParticularData.studentId.rollNo }}</p>
87 <p 87 <p
88 style="font-size: 15px;color: #707478;margin:0px;margin-bottom:8px;" 88 style="font-size: 15px;color: #707478;margin:0px;margin-bottom:8px;"
89 >Email : {{ invoiceParticularData.studentId.email ? invoiceParticularData.studentId.email: '-' }}</p> 89 >Email : {{ invoiceParticularData.studentId.email ? invoiceParticularData.studentId.email: '-' }}</p>
90 </v-flex> 90 </v-flex>
91 <v-flex xs4 sm4 md4 lg4 style="padding:4px;padding-left:16px;"> 91 <v-flex xs4 sm4 md4 lg4 style="padding:4px;padding-left:16px;">
92 <br /> 92 <br />
93 <p 93 <p
94 style="font-size: 15px;margin:0px;margin-bottom:8px;" 94 style="font-size: 15px;margin:0px;margin-bottom:8px;"
95 >Invoice #{{ invoiceParticularData.invoiceNumber }}</p> 95 >Invoice #{{ invoiceParticularData.invoiceNumber }}</p>
96 <br /> 96 <br />
97 <p style="font-size: 15px;color: #707478;margin:0px;margin-bottom:8px;"> 97 <p style="font-size: 15px;color: #707478;margin:0px;margin-bottom:8px;">
98 Status : 98 Status :
99 <span 99 <span
100 :style="invoiceParticularData.paymentStatus == 'FULLY_PAID' ? 'color:green' : '' || 100 :style="invoiceParticularData.paymentStatus == 'FULLY_PAID' ? 'color:green' : '' ||
101 invoiceParticularData.paymentStatus == 'PARTIALLY_PAID' ? 'color:#f39c12 !important' : '' || 101 invoiceParticularData.paymentStatus == 'PARTIALLY_PAID' ? 'color:#f39c12 !important' : '' ||
102 invoiceParticularData.paymentStatus == 'NOT_PAID' ? 'color:red !important' : '' " 102 invoiceParticularData.paymentStatus == 'NOT_PAID' ? 'color:red !important' : '' "
103 >{{ invoiceParticularData.paymentStatus }}</span> 103 >{{ invoiceParticularData.paymentStatus }}</span>
104 </p> 104 </p>
105 </v-flex> 105 </v-flex>
106 </v-layout> 106 </v-layout>
107 </v-flex> 107 </v-flex>
108 </v-layout> 108 </v-layout>
109 </v-layout> 109 </v-layout>
110 <table 110 <table
111 class="tableRsponsive" 111 class="tableRsponsive"
112 style=" 112 style="
113 table-layout: auto !important; 113 table-layout: auto !important;
114 width: 100% !important; 114 width: 100% !important;
115 border-collapse: collapse; 115 border-collapse: collapse;
116 border: 1px solid #e2e7eb;" 116 border: 1px solid #e2e7eb;"
117 > 117 >
118 <tr 118 <tr
119 class="white--text" 119 class="white--text"
120 style=" 120 style="
121 background: #827bfa !important; 121 background: #827bfa !important;
122 border-color: #827bfa !important;" 122 border-color: #827bfa !important;"
123 > 123 >
124 <th 124 <th
125 style=" 125 style="
126 border: 1px solid #e2e7eb; 126 border: 1px solid #e2e7eb;
127 padding: 10px; 127 padding: 10px;
128 text-align: center;" 128 text-align: center;"
129 >#</th> 129 >#</th>
130 <th 130 <th
131 style=" 131 style="
132 border: 1px solid #e2e7eb; 132 border: 1px solid #e2e7eb;
133 padding: 10px; 133 padding: 10px;
134 text-align: center;" 134 text-align: center;"
135 >Fee Type</th> 135 >Fee Type</th>
136 <th 136 <th
137 style=" 137 style="
138 border: 1px solid #e2e7eb; 138 border: 1px solid #e2e7eb;
139 padding: 10px; 139 padding: 10px;
140 text-align: center;" 140 text-align: center;"
141 >Amount</th> 141 >Amount</th>
142 <th 142 <th
143 style=" 143 style="
144 border: 1px solid #e2e7eb; 144 border: 1px solid #e2e7eb;
145 padding: 10px; 145 padding: 10px;
146 text-align: center;" 146 text-align: center;"
147 >Discount</th> 147 >Discount</th>
148 <th 148 <th
149 style=" 149 style="
150 border: 1px solid #e2e7eb; 150 border: 1px solid #e2e7eb;
151 padding: 10px; 151 padding: 10px;
152 text-align: center;" 152 text-align: center;"
153 >Subtotal</th> 153 >Subtotal</th>
154 </tr> 154 </tr>
155 <tr 155 <tr
156 v-for="(feeType, index) in feeTypeData" 156 v-for="(feeType, index) in feeTypeData"
157 :key="index" 157 :key="index"
158 v-on:keyup="getAmmountDetails(feeType)" 158 v-on:keyup="getAmmountDetails(feeType)"
159 > 159 >
160 <td 160 <td
161 style="width:40px; 161 style="width:40px;
162 border: 1px solid #e2e7eb; 162 border: 1px solid #e2e7eb;
163 padding: 10px; 163 padding: 10px;
164 text-align: center;" 164 text-align: center;"
165 >{{ index + 1 }}</td> 165 >{{ index + 1 }}</td>
166 <td 166 <td
167 style=" 167 style="
168 width:120px; 168 width:120px;
169 border: 1px solid #e2e7eb; 169 border: 1px solid #e2e7eb;
170 padding: 10px; 170 padding: 10px;
171 text-align: center;" 171 text-align: center;"
172 >{{ feeType.feeTypeName }}</td> 172 >{{ feeType.feeTypeName }}</td>
173 <td 173 <td
174 style="width:120px; 174 style="width:120px;
175 border: 1px solid #e2e7eb; 175 border: 1px solid #e2e7eb;
176 padding: 10px; 176 padding: 10px;
177 text-align: center;" 177 text-align: center;"
178 >{{ feeType.amount }}</td> 178 >{{ feeType.amount }}</td>
179 <td 179 <td
180 style="width:120px; 180 style="width:120px;
181 border: 1px solid #e2e7eb; 181 border: 1px solid #e2e7eb;
182 padding: 10px; 182 padding: 10px;
183 text-align: center;" 183 text-align: center;"
184 >{{ feeType.amount-feeType.subTotal }}</td> 184 >{{ feeType.amount-feeType.subTotal }}</td>
185 <td 185 <td
186 style="width:120px; 186 style="width:120px;
187 border: 1px solid #e2e7eb; 187 border: 1px solid #e2e7eb;
188 padding: 10px; 188 padding: 10px;
189 text-align: center;" 189 text-align: center;"
190 >{{ feeType.subTotal }}</td> 190 >{{ feeType.subTotal }}</td>
191 </tr> 191 </tr>
192 <tfoot> 192 <tfoot>
193 <tr> 193 <tr>
194 <td 194 <td
195 colspan="4" 195 colspan="4"
196 style=" 196 style="
197 border: 1px solid #e2e7eb; 197 border: 1px solid #e2e7eb;
198 padding: 10px; 198 padding: 10px;
199 text-align: center;" 199 text-align: center;"
200 > 200 >
201 <span style="float:right">Total Amount (RS) :</span> 201 <span style="float:right">Total Amount (RS) :</span>
202 </td> 202 </td>
203 <td 203 <td
204 style=" 204 style="
205 border: 1px solid #e2e7eb; 205 border: 1px solid #e2e7eb;
206 padding: 10px; 206 padding: 10px;
207 text-align: center;" 207 text-align: center;"
208 >{{ feeType.subTotal }}</td> 208 >{{ feeType.subTotal }}</td>
209 </tr> 209 </tr>
210 <tr> 210 <tr>
211 <td 211 <td
212 colspan="4" 212 colspan="4"
213 style=" 213 style="
214 border: 1px solid #e2e7eb; 214 border: 1px solid #e2e7eb;
215 padding: 10px; 215 padding: 10px;
216 text-align: center;" 216 text-align: center;"
217 > 217 >
218 <span style="float:right">Paid (RS) :</span> 218 <span style="float:right">Paid (RS) :</span>
219 </td> 219 </td>
220 <td 220 <td
221 style=" 221 style="
222 border: 1px solid #e2e7eb; 222 border: 1px solid #e2e7eb;
223 padding: 10px; 223 padding: 10px;
224 text-align: center;" 224 text-align: center;"
225 >{{ feeType.totalPaidAmount ? feeType.totalPaidAmount : 0 }}</td> 225 >{{ feeType.totalPaidAmount ? feeType.totalPaidAmount : 0 }}</td>
226 </tr> 226 </tr>
227 <tr> 227 <tr>
228 <td 228 <td
229 colspan="4" 229 colspan="4"
230 style=" 230 style="
231 border: 1px solid #e2e7eb; 231 border: 1px solid #e2e7eb;
232 padding: 10px; 232 padding: 10px;
233 text-align: center;" 233 text-align: center;"
234 > 234 >
235 <span style="float:right">Discount :</span> 235 <span style="float:right">Discount :</span>
236 </td> 236 </td>
237 <td 237 <td
238 style=" 238 style="
239 border: 1px solid #e2e7eb; 239 border: 1px solid #e2e7eb;
240 padding: 10px; 240 padding: 10px;
241 text-align: center;" 241 text-align: center;"
242 >{{ feeType.discount}}</td> 242 >{{ feeType.discount}}</td>
243 </tr> 243 </tr>
244 <tr> 244 <tr>
245 <td 245 <td
246 colspan="4" 246 colspan="4"
247 style=" 247 style="
248 border: 1px solid #e2e7eb; 248 border: 1px solid #e2e7eb;
249 padding: 10px; 249 padding: 10px;
250 text-align: center;" 250 text-align: center;"
251 > 251 >
252 <span style="float:right">Balance (RS) :</span> 252 <span style="float:right">Balance (RS) :</span>
253 </td> 253 </td>
254 <td 254 <td
255 style=" 255 style="
256 border: 1px solid #e2e7eb; 256 border: 1px solid #e2e7eb;
257 padding: 10px; 257 padding: 10px;
258 text-align: center;" 258 text-align: center;"
259 >{{ feeType.totalPaidAmount ? feeType.subTotal - feeType.totalPaidAmount : feeType.subTotal }}</td> 259 >{{ feeType.totalPaidAmount ? feeType.subTotal - feeType.totalPaidAmount : feeType.subTotal }}</td>
260 </tr> 260 </tr>
261 </tfoot> 261 </tfoot>
262 </table> 262 </table>
263 <v-layout> 263 <v-layout>
264 <v-flex xs12> 264 <v-flex xs12>
265 <v-card 265 <v-card
266 style=" 266 style="
267 position:relative; 267 position:relative;
268 float:right !important; 268 float:right !important;
269 margin:10px 0px; 269 margin:10px 0px;
270 -webkit-box-shadow: 0px 0px 0px 0px rgba(0,0,0,0.2), 0px 0px 0px 0px rgba(0,0,0,0.14), 0px 0px 0px 0px rgba(0,0,0,0.12) !important; 270 -webkit-box-shadow: 0px 0px 0px 0px rgba(0,0,0,0.2), 0px 0px 0px 0px rgba(0,0,0,0.14), 0px 0px 0px 0px rgba(0,0,0,0.12) !important;
271 box-shadow: 0px 0px 0px 0px rgba(0,0,0,0.2), 0px 0px 0px 0px rgba(0,0,0,0.14), 0px 0px 0px 0px rgba(0,0,0,0.12) !important;" 271 box-shadow: 0px 0px 0px 0px rgba(0,0,0,0.2), 0px 0px 0px 0px rgba(0,0,0,0.14), 0px 0px 0px 0px rgba(0,0,0,0.12) !important;"
272 > 272 >
273 <div 273 <div
274 style=" 274 style="
275 min-height: 20px; 275 min-height: 20px;
276 padding: 9px; 276 padding: 9px;
277 margin-bottom: 20px; 277 margin-bottom: 20px;
278 background-color: #f0f3f5; 278 background-color: #f0f3f5;
279 border: 1px solid #E2E7EB; 279 border: 1px solid #E2E7EB;
280 border-radius: 3px;" 280 border-radius: 3px;"
281 > 281 >
282 <p 282 <p
283 style=" 283 style="
284 margin: 0 0 10px; 284 margin: 0 0 10px;
285 font-size: 12px;" 285 font-size: 12px;"
286 > 286 >
287 Create By : Admin 287 Create By : Admin
288 <br /> 288 <br />
289 Date : {{ dates(invoiceParticularData.created) }} 289 Date : {{ dates(invoiceParticularData.created) }}
290 </p> 290 </p>
291 </div> 291 </div>
292 </v-card> 292 </v-card>
293 </v-flex> 293 </v-flex>
294 </v-layout> 294 </v-layout>
295 </v-card> 295 </v-card>
296 </v-flex> 296 </v-flex>
297 </v-layout> 297 </v-layout>
298 </v-flex> 298 </v-flex>
299 </v-container> 299 </v-container>
300 <div class="loader" v-if="showLoader"> 300 <div class="loader" v-if="showLoader">
301 <v-progress-circular indeterminate color="white"></v-progress-circular> 301 <v-progress-circular indeterminate color="white"></v-progress-circular>
302 </div> 302 </div>
303 </v-app> 303 </v-app>
304 </template> 304 </template>
305 305
306 <script> 306 <script>
307 import http from "@/Services/http.js"; 307 import http from "@/Services/http.js";
308 import moment from "moment"; 308 import moment from "moment";
309 309
310 export default { 310 export default {
311 data: () => ({ 311 data: () => ({
312 showLoader: false, 312 showLoader: false,
313 feeTypes: [], 313 feeTypes: [],
314 filterData: [], 314 filterData: [],
315 invoiceData: {}, 315 invoiceData: {},
316 feeType: { 316 feeType: {
317 amount: "", 317 amount: "",
318 discount: "", 318 discount: "",
319 totalPaidAmount: "", 319 totalPaidAmount: "",
320 subTotal: "", 320 subTotal: "",
321 feeTypeName: "", 321 feeTypeName: "",
322 }, 322 },
323 feeTypeData: [], 323 feeTypeData: [],
324 token: "", 324 token: "",
325 invoiceParticularData: { 325 invoiceParticularData: {
326 studentId: { 326 studentId: {
327 name: "", 327 name: "",
328 }, 328 },
329 classId: { 329 classId: {
330 classNum: "", 330 classNum: "",
331 }, 331 },
332 }, 332 },
333 userData: { 333 userData: {
334 name: "", 334 name: "",
335 }, 335 },
336 }), 336 }),
337 337
338 methods: { 338 methods: {
339 dates: function (date) { 339 dates: function (date) {
340 return moment(date).format("MMMM DD, YYYY"); 340 return moment(date).format("MMMM DD, YYYY");
341 }, 341 },
342 getInvoiceList() { 342 getInvoiceList() {
343 http() 343 http()
344 .get("/getParticularInvoice", { 344 .get("/getParticularInvoice", {
345 params: { 345 params: {
346 invoiceId: this.$route.params.viewInvoiceId, 346 invoiceId: this.$route.params.viewInvoiceId,
347 schoolId: this.$store.state.schoolId, 347 schoolId: this.$store.state.schoolId,
348 }, 348 },
349 headers: { Authorization: "Bearer " + this.token }, 349 headers: { Authorization: "Bearer " + this.token },
350 }) 350 })
351 .then((response) => { 351 .then((response) => {
352 this.invoiceParticularData = response.data.data; 352 this.invoiceParticularData = response.data.data;
353 this.invoiceData = this.invoiceParticularData; 353 this.invoiceData = this.invoiceParticularData;
354 this.invoiceData.date = this.invoiceParticularData.date.slice(0, 10); 354 this.invoiceData.date = this.invoiceParticularData.date.slice(0, 10);
355 this.feeTypeData = this.invoiceParticularData.feeType; 355 this.feeTypeData = this.invoiceParticularData.feeType;
356 (this.feeType.amount = response.data.data.totalAmount), 356 (this.feeType.amount = response.data.data.totalAmount),
357 (this.feeType.discount = response.data.data.totalDiscount), 357 (this.feeType.discount = response.data.data.totalDiscount),
358 (this.feeType.subTotal = response.data.data.totalSubTotal), 358 (this.feeType.subTotal = response.data.data.totalSubTotal),
359 (this.feeType.totalPaidAmount = response.data.data.totalPaidAmount); 359 (this.feeType.totalPaidAmount = response.data.data.totalPaidAmount);
360 this.showLoader = false; 360 this.showLoader = false;
361 }) 361 })
362 .catch((error) => { 362 .catch((error) => {
363 this.showLoader = false; 363 this.showLoader = false;
364 if (error.response.status === 401) { 364 if (error.response.status === 401) {
365 this.$router.replace({ path: "/" }); 365 this.$router.replace({ path: "/" });
366 this.$store.dispatch("setToken", null); 366 this.$store.dispatch("setToken", null);
367 this.$store.dispatch("Id", null); 367 this.$store.dispatch("Id", null);
368 this.$store.dispatch("Role", null); 368 this.$store.dispatch("Role", null);
369 } 369 }
370 }); 370 });
371 }, 371 },
372 getfeeType() { 372 getfeeType() {
373 http() 373 http()
374 .get("/getFeesList", { 374 .get("/getFeesList", {
375 params: { schoolId: this.$store.state.schoolId }, 375 params: { schoolId: this.$store.state.schoolId },
376 headers: { Authorization: "Bearer " + this.token }, 376 headers: { Authorization: "Bearer " + this.token },
377 }) 377 })
378 .then((response) => { 378 .then((response) => {
379 this.feeTypes = response.data.data; 379 this.feeTypes = response.data.data;
380 }) 380 })
381 .catch((err) => { 381 .catch((err) => {
382 // console.log("err====>", err); 382 // console.log("err====>", err);
383 }); 383 });
384 }, 384 },
385 getAmmountDetails(feeTyp) { 385 getAmmountDetails(feeTyp) {
386 let feeType = { 386 let feeType = {
387 subTotal: "", 387 subTotal: "",
388 subParticularTotal: "", 388 subParticularTotal: "",
389 paidAmount: "", 389 paidAmount: "",
390 }; 390 };
391 // *********** SUBTOTAL *********** 391 // *********** SUBTOTAL ***********
392 feeType.subTotal = 392 feeType.subTotal =
393 Number(feeType.subTotal) + Number(this.feeTypeData[i].subTotal); 393 Number(feeType.subTotal) + Number(this.feeTypeData[i].subTotal);
394 this.feeType.subTotal = feeType.subTotal.toFixed(2); 394 this.feeType.subTotal = feeType.subTotal.toFixed(2);
395 // *********** PAID-AMOUNT *********** 395 // *********** PAID-AMOUNT ***********
396 feeType.paidAmount = 396 feeType.paidAmount =
397 Number(feeType.paidAmount) + Number(this.feeTypeData[i].paidAmount); 397 Number(feeType.paidAmount) + Number(this.feeTypeData[i].paidAmount);
398 this.feeType.paidAmount = feeType.paidAmount.toFixed(2); 398 this.feeType.paidAmount = feeType.paidAmount.toFixed(2);
399 }, 399 },
400 printInvoice() { 400 printInvoice() {
401 // Pass the element id here 401 // Pass the element id here
402 this.$htmlToPaper("printMe"); 402 this.$htmlToPaper("printMe");
403 }, 403 },
404 getUserData() { 404 getUserData() {
405 http() 405 http()
406 .get("/getParticularUserDetail") 406 .get("/getParticularUserDetail")
407 .then((response) => { 407 .then((response) => {
408 this.userData = response.data.data; 408 this.userData = response.data.data;
409 }) 409 })
410 .catch((error) => { 410 .catch((error) => {
411 if (error.response.status === 401) { 411 if (error.response.status === 401) {
412 this.$router.replace({ path: "/" }); 412 this.$router.replace({ path: "/" });
413 this.$store.dispatch("setToken", null); 413 this.$store.dispatch("setToken", null);
414 this.$store.dispatch("Id", null); 414 this.$store.dispatch("Id", null);
415 } 415 }
416 }); 416 });
417 }, 417 },
418 }, 418 },
419 mounted() { 419 mounted() {
420 this.token = this.$store.state.token; 420 this.token = this.$store.state.token;
421 this.getInvoiceList(); 421 this.getInvoiceList();
422 this.getfeeType(); 422 this.getfeeType();
423 this.getUserData(); 423 this.getUserData();
424 }, 424 },
425 created() { 425 created() {
426 this.$root.$on("app:search", (search) => { 426 this.$root.$on("app:search", (search) => {
427 this.search = search; 427 this.search = search;
428 }); 428 });
429 }, 429 },
430 beforeDestroy() { 430 beforeDestroy() {
431 // dont forget to remove the listener 431 // dont forget to remove the listener
432 this.$root.$off("app:search"); 432 this.$root.$off("app:search");
433 }, 433 },
434 }; 434 };
435 </script> 435 </script>
436 436
437 437
438 <style> 438 <style>
439 /* table { 439 /* table {
440 border-collapse: collapse; 440 border-collapse: collapse;
441 border: 1px solid #e2e7eb; 441 border: 1px solid #e2e7eb;
442 } */ 442 } */
443 .open-dialog-button { 443 .open-dialog-button {
444 background: #827bfa !important; 444 background: #827bfa !important;
445 border-color: #827bfa !important; 445 border-color: #827bfa !important;
446 text-transform: none !important; 446 text-transform: none !important;
447 } 447 }
448 .center { 448 .center {
449 text-align: center !important; 449 text-align: center !important;
450 } 450 }
451 .card-style { 451 .card-style {
452 background: #7f62f8 !important; 452 background: #7f62f8 !important;
453 border-color: #7f62f8 !important; 453 border-color: #7f62f8 !important;
454 border-radius: 12px; 454 border-radius: 12px;
455 text-align: center !important; 455 text-align: center !important;
456 padding-top: 10px !important; 456 padding-top: 10px !important;
457 } 457 }
458 .add-button { 458 .add-button {
459 background: #feb83c !important; 459 background: #feb83c !important;
460 border-color: #feb83c !important; 460 border-color: #feb83c !important;
461 text-transform: none !important; 461 text-transform: none !important;
462 -webkit-box-shadow: none !important; 462 -webkit-box-shadow: none !important;
463 box-shadow: none !important; 463 box-shadow: none !important;
464 } 464 }
465 .clear-button { 465 .clear-button {
466 background: #fa7676 !important; 466 background: #fa7676 !important;
467 border-color: #fa7676 !important; 467 border-color: #fa7676 !important;
468 text-transform: none !important; 468 text-transform: none !important;
469 -webkit-box-shadow: none !important; 469 -webkit-box-shadow: none !important;
470 box-shadow: none !important; 470 box-shadow: none !important;
471 } 471 }
472 .card-styles { 472 .card-styles {
473 background: #7f62f8 !important; 473 background: #7f62f8 !important;
474 border-color: #7f62f8 !important; 474 border-color: #7f62f8 !important;
475 } 475 }
476 .v-card__actions .v-btn { 476 .v-card__actions .v-btn {
477 margin: 0 15px !important; 477 margin: 0 15px !important;
478 min-width: 96px !important; 478 min-width: 96px !important;
479 } 479 }
480 /* th, 480 /* th,
481 td { 481 td {
482 border: 1px solid #e2e7eb; 482 border: 1px solid #e2e7eb;
483 padding: 10px; 483 padding: 10px;
484 text-align: center; 484 text-align: center;
485 } */ 485 } */
486 table.feeTypeTable { 486 table.feeTypeTable {
487 table-layout: auto !important; 487 table-layout: auto !important;
488 width: 100% !important; 488 width: 100% !important;
489 } 489 }
490 @media screen and (max-width: 380px) { 490 @media screen and (max-width: 380px) {
491 .tableRsponsive { 491 .tableRsponsive {
492 display: block; 492 display: block;
493 position: relative; 493 position: relative;
494 overflow: scroll; 494 overflow: scroll;
495 } 495 }
496 } 496 }
497 </style> 497 </style>
src/pages/Administrator/bulkImport.vue
Diff comments   View file @8b7976c
1 <template> 1 <template>
2 <v-container fluid grid-list-md> 2 <v-container fluid grid-list-md>
3 <v-card flat> 3 <v-card flat>
4 <v-toolbar class="card-styles" dark flat> 4 <v-toolbar class="card-styles" dark flat>
5 <v-spacer></v-spacer> 5 <v-spacer></v-spacer>
6 <v-toolbar-title>Import</v-toolbar-title> 6 <v-toolbar-title>Import</v-toolbar-title>
7 <v-spacer></v-spacer> 7 <v-spacer></v-spacer>
8 </v-toolbar> 8 </v-toolbar>
9 <v-container fluid> 9 <v-container fluid>
10 <v-layout> 10 <v-layout>
11 <v-flex xs12> 11 <v-flex xs12>
12 <v-layout wrap> 12 <v-layout wrap>
13 <v-flex xs6 sm5 lg2 class="pt-4"> 13 <v-flex xs6 sm5 lg2 class="pt-4">
14 <label class="title right">Add Teacher:</label> 14 <label class="title right">Add Teacher:</label>
15 </v-flex> 15 </v-flex>
16 <v-flex xs12 sm6 lg3> 16 <v-flex xs12 sm6 lg3>
17 <v-text-field v-model="teacherFileName" placeholder="Choose file" :disabled="true"></v-text-field> 17 <v-text-field v-model="teacherFileName" placeholder="Choose file" :disabled="true"></v-text-field>
18 <input 18 <input
19 type="file" 19 type="file"
20 style="display: none" 20 style="display: none"
21 ref="file" 21 ref="file"
22 @change="convertFile" 22 @change="convertFile"
23 id="fileInput" 23 id="fileInput"
24 /> 24 />
25 </v-flex> 25 </v-flex>
26 <v-flex xs6 sm4 lg2 class="mt-1"> 26 <v-flex xs6 sm4 lg2 class="mt-1">
27 <v-btn class="open-dialog-button" round dark block @click="pickFile"> 27 <v-btn class="open-dialog-button" round dark block @click="pickFile">
28 <v-icon small class="pr-1">refresh</v-icon>Upload 28 <v-icon small class="pr-1">refresh</v-icon>Upload
29 </v-btn> 29 </v-btn>
30 </v-flex> 30 </v-flex>
31 <v-flex xs6 sm4 lg2 class="mt-1"> 31 <v-flex xs6 sm4 lg2 class="mt-1">
32 <v-btn 32 <v-btn
33 class="add-button" 33 class="add-button"
34 round 34 round
35 dark 35 dark
36 block 36 block
37 @click="importTeacher()" 37 @click="importTeacher()"
38 :loading="loading" 38 :loading="loading"
39 >import</v-btn> 39 >import</v-btn>
40 </v-flex> 40 </v-flex>
41 <v-flex xs12 sm4 lg2 class="mt-1"> 41 <v-flex xs12 sm4 lg2 class="mt-1">
42 <download-csv :data="teacherData"> 42 <download-csv :data="teacherData">
43 <v-btn class="blue lighten-2" dark block round> 43 <v-btn class="blue lighten-2" dark block round>
44 <v-icon small class="pr-1">archive</v-icon>sample download 44 <v-icon small class="pr-1">archive</v-icon>sample download
45 </v-btn> 45 </v-btn>
46 </download-csv> 46 </download-csv>
47 </v-flex> 47 </v-flex>
48 </v-layout> 48 </v-layout>
49 </v-flex> 49 </v-flex>
50 </v-layout> 50 </v-layout>
51 <v-layout> 51 <v-layout>
52 <v-flex xs12> 52 <v-flex xs12>
53 <v-layout wrap> 53 <v-layout wrap>
54 <v-flex xs6 sm5 lg2 class="pt-4"> 54 <v-flex xs6 sm5 lg2 class="pt-4">
55 <label class="title right">Add Parent:</label> 55 <label class="title right">Add Parent:</label>
56 </v-flex> 56 </v-flex>
57 <v-flex xs12 sm6 lg3> 57 <v-flex xs12 sm6 lg3>
58 <v-text-field v-model="parentFileName" placeholder="Choose file" :disabled="true"></v-text-field> 58 <v-text-field v-model="parentFileName" placeholder="Choose file" :disabled="true"></v-text-field>
59 <input 59 <input
60 type="file" 60 type="file"
61 style="display: none" 61 style="display: none"
62 ref="parentfile" 62 ref="parentfile"
63 @change="parentFile" 63 @change="parentFile"
64 id="parentInput" 64 id="parentInput"
65 /> 65 />
66 </v-flex> 66 </v-flex>
67 <v-flex xs6 sm4 lg2 class="mt-1"> 67 <v-flex xs6 sm4 lg2 class="mt-1">
68 <v-btn class="open-dialog-button" round dark block @click="pickParentFile"> 68 <v-btn class="open-dialog-button" round dark block @click="pickParentFile">
69 <v-icon small class="pr-1">refresh</v-icon>Upload 69 <v-icon small class="pr-1">refresh</v-icon>Upload
70 </v-btn> 70 </v-btn>
71 </v-flex> 71 </v-flex>
72 <v-flex xs6 sm4 lg2 class="mt-1" @click="importParent" :loading="parentLoading"> 72 <v-flex xs6 sm4 lg2 class="mt-1" @click="importParent" :loading="parentLoading">
73 <v-btn class="add-button" round dark block>import</v-btn> 73 <v-btn class="add-button" round dark block>import</v-btn>
74 </v-flex> 74 </v-flex>
75 <v-flex xs12 sm4 lg2 class="mt-1"> 75 <v-flex xs12 sm4 lg2 class="mt-1">
76 <download-csv :data="parentData"> 76 <download-csv :data="parentData">
77 <v-btn class="blue lighten-2" dark block round> 77 <v-btn class="blue lighten-2" dark block round>
78 <v-icon small class="pr-1">archive</v-icon>sample download 78 <v-icon small class="pr-1">archive</v-icon>sample download
79 </v-btn> 79 </v-btn>
80 </download-csv> 80 </download-csv>
81 </v-flex> 81 </v-flex>
82 </v-layout> 82 </v-layout>
83 </v-flex> 83 </v-flex>
84 </v-layout> 84 </v-layout>
85 <v-layout> 85 <v-layout>
86 <v-flex xs12> 86 <v-flex xs12>
87 <v-layout wrap> 87 <v-layout wrap>
88 <v-flex xs6 sm5 lg2 class="pt-4"> 88 <v-flex xs6 sm5 lg2 class="pt-4">
89 <label class="title right">Add User:</label> 89 <label class="title right">Add User:</label>
90 </v-flex> 90 </v-flex>
91 <v-flex xs12 sm6 lg3> 91 <v-flex xs12 sm6 lg3>
92 <v-text-field placeholder="Choose file" v-model="userFileName" :disabled="true"></v-text-field> 92 <v-text-field placeholder="Choose file" v-model="userFileName" :disabled="true"></v-text-field>
93 <input 93 <input
94 type="file" 94 type="file"
95 style="display: none" 95 style="display: none"
96 ref="userfile" 96 ref="userfile"
97 @change="userFile" 97 @change="userFile"
98 id="userInput" 98 id="userInput"
99 /> 99 />
100 </v-flex> 100 </v-flex>
101 <v-flex xs6 sm4 lg2 class="mt-1"> 101 <v-flex xs6 sm4 lg2 class="mt-1">
102 <v-btn class="open-dialog-button" round dark block @click="pickUserFile"> 102 <v-btn class="open-dialog-button" round dark block @click="pickUserFile">
103 <v-icon small class="pr-1">refresh</v-icon>Upload 103 <v-icon small class="pr-1">refresh</v-icon>Upload
104 </v-btn> 104 </v-btn>
105 </v-flex> 105 </v-flex>
106 <v-flex xs6 sm4 lg2 class="mt-1"> 106 <v-flex xs6 sm4 lg2 class="mt-1">
107 <v-btn 107 <v-btn
108 class="add-button" 108 class="add-button"
109 round 109 round
110 dark 110 dark
111 block 111 block
112 @click="importUser" 112 @click="importUser"
113 :loading="userLoading" 113 :loading="userLoading"
114 >import</v-btn> 114 >import</v-btn>
115 </v-flex> 115 </v-flex>
116 <v-flex xs12 sm4 lg2 class="mt-1"> 116 <v-flex xs12 sm4 lg2 class="mt-1">
117 <download-csv :data="userData"> 117 <download-csv :data="userData">
118 <v-btn class="blue lighten-2" dark block round> 118 <v-btn class="blue lighten-2" dark block round>
119 <v-icon small class="pr-1">archive</v-icon>sample download 119 <v-icon small class="pr-1">archive</v-icon>sample download
120 </v-btn> 120 </v-btn>
121 </download-csv> 121 </download-csv>
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-layout> 126 <v-layout>
127 <v-flex xs12> 127 <v-flex xs12>
128 <v-layout wrap> 128 <v-layout wrap>
129 <v-flex xs6 sm5 lg2 class="pt-4"> 129 <v-flex xs6 sm5 lg2 class="pt-4">
130 <label class="title right">Add Book:</label> 130 <label class="title right">Add Book:</label>
131 </v-flex> 131 </v-flex>
132 <v-flex xs12 sm6 lg3> 132 <v-flex xs12 sm6 lg3>
133 <v-text-field placeholder="Choose file" v-model="bookFileName" :disabled="true"></v-text-field> 133 <v-text-field placeholder="Choose file" v-model="bookFileName" :disabled="true"></v-text-field>
134 <input 134 <input
135 type="file" 135 type="file"
136 style="display: none" 136 style="display: none"
137 ref="bookfile" 137 ref="bookfile"
138 @change="bookFile" 138 @change="bookFile"
139 id="bookInput" 139 id="bookInput"
140 /> 140 />
141 </v-flex> 141 </v-flex>
142 <v-flex xs6 sm4 lg2 class="mt-1"> 142 <v-flex xs6 sm4 lg2 class="mt-1">
143 <v-btn class="open-dialog-button" round dark block @click="pickBookFile"> 143 <v-btn class="open-dialog-button" round dark block @click="pickBookFile">
144 <v-icon small class="pr-1">refresh</v-icon>Upload 144 <v-icon small class="pr-1">refresh</v-icon>Upload
145 </v-btn> 145 </v-btn>
146 </v-flex> 146 </v-flex>
147 <v-flex xs6 sm4 lg2 class="mt-1"> 147 <v-flex xs6 sm4 lg2 class="mt-1">
148 <v-btn 148 <v-btn
149 class="add-button" 149 class="add-button"
150 round 150 round
151 dark 151 dark
152 block 152 block
153 @click="importBook" 153 @click="importBook"
154 :loading="BookLoading" 154 :loading="BookLoading"
155 >import</v-btn> 155 >import</v-btn>
156 </v-flex> 156 </v-flex>
157 <v-flex xs12 sm4 lg2 class="mt-1"> 157 <v-flex xs12 sm4 lg2 class="mt-1">
158 <download-csv :data="bookData"> 158 <download-csv :data="bookData">
159 <v-btn class="blue lighten-2" dark block round> 159 <v-btn class="blue lighten-2" dark block round>
160 <v-icon small class="pr-1">archive</v-icon>sample download 160 <v-icon small class="pr-1">archive</v-icon>sample download
161 </v-btn> 161 </v-btn>
162 </download-csv> 162 </download-csv>
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 wrap> 169 <v-layout wrap>
170 <v-flex xs6 sm5 lg2 class="pt-4"> 170 <v-flex xs6 sm5 lg2 class="pt-4">
171 <label class="title right">Add Student:</label> 171 <label class="title right">Add Student:</label>
172 </v-flex> 172 </v-flex>
173 <v-flex xs12 sm6 lg3> 173 <v-flex xs12 sm6 lg3>
174 <v-text-field placeholder="Choose file" v-model="bookStudentName" :disabled="true"></v-text-field> 174 <v-text-field placeholder="Choose file" v-model="bookStudentName" :disabled="true"></v-text-field>
175 <input 175 <input
176 type="file" 176 type="file"
177 style="display: none" 177 style="display: none"
178 ref="studentfile" 178 ref="studentfile"
179 @change="studentFile" 179 @change="studentFile"
180 id="studentInput" 180 id="studentInput"
181 /> 181 />
182 </v-flex> 182 </v-flex>
183 <v-flex xs6 sm4 lg2 class="mt-1"> 183 <v-flex xs6 sm4 lg2 class="mt-1">
184 <v-btn class="open-dialog-button" round dark block @click="pickStudentFile"> 184 <v-btn class="open-dialog-button" round dark block @click="pickStudentFile">
185 <v-icon small class="pr-1">refresh</v-icon>Upload 185 <v-icon small class="pr-1">refresh</v-icon>Upload
186 </v-btn> 186 </v-btn>
187 </v-flex> 187 </v-flex>
188 <v-flex xs6 sm4 lg2 class="mt-1"> 188 <v-flex xs6 sm4 lg2 class="mt-1">
189 <v-btn 189 <v-btn
190 class="add-button" 190 class="add-button"
191 round 191 round
192 dark 192 dark
193 block 193 block
194 @click="importStudent()" 194 @click="importStudent()"
195 :loading="studentLoading" 195 :loading="studentLoading"
196 >import</v-btn> 196 >import</v-btn>
197 </v-flex> 197 </v-flex>
198 <v-flex xs12 sm4 lg2 class="mt-1"> 198 <v-flex xs12 sm4 lg2 class="mt-1">
199 <download-csv :data="studentData"> 199 <download-csv :data="studentData">
200 <v-btn class="blue lighten-2" round dark block> 200 <v-btn class="blue lighten-2" round dark block>
201 <v-icon small class="pr-1">archive</v-icon>sample download 201 <v-icon small class="pr-1">archive</v-icon>sample download
202 </v-btn> 202 </v-btn>
203 </download-csv> 203 </download-csv>
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> 208 <!-- <v-layout>
209 <v-flex xs12> 209 <v-flex xs12>
210 <v-layout wrap> 210 <v-layout wrap>
211 <v-flex xs9 sm5 lg2 class="pt-4"> 211 <v-flex xs9 sm5 lg2 class="pt-4">
212 <label class="title right">Students & Parents:</label> 212 <label class="title right">Students & Parents:</label>
213 </v-flex> 213 </v-flex>
214 <v-flex xs12 sm6 lg3> 214 <v-flex xs12 sm6 lg3>
215 <v-text-field placeholder="Choose file" :disabled="true"></v-text-field> 215 <v-text-field placeholder="Choose file" :disabled="true"></v-text-field>
216 </v-flex> 216 </v-flex>
217 <v-flex xs6 sm4 lg2 class="mt-1"> 217 <v-flex xs6 sm4 lg2 class="mt-1">
218 <v-btn class="grey" dark block> 218 <v-btn class="grey" dark block>
219 <v-icon small class="pr-1">refresh</v-icon>Upload 219 <v-icon small class="pr-1">refresh</v-icon>Upload
220 </v-btn> 220 </v-btn>
221 </v-flex> 221 </v-flex>
222 <v-flex xs6 sm4 lg2 class="mt-1"> 222 <v-flex xs6 sm4 lg2 class="mt-1">
223 <v-btn class="grey" dark block>import</v-btn> 223 <v-btn class="grey" dark block>import</v-btn>
224 </v-flex> 224 </v-flex>
225 <v-flex xs12 sm4 lg2 class="mt-1"> 225 <v-flex xs12 sm4 lg2 class="mt-1">
226 <v-btn class="blue lighten-2" dark block> 226 <v-btn class="blue lighten-2" dark block>
227 <v-icon small class="pr-1">archive</v-icon>sample download 227 <v-icon small class="pr-1">archive</v-icon>sample download
228 </v-btn> 228 </v-btn>
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> 234 </v-card>
235 <v-snackbar 235 <v-snackbar
236 :timeout="timeout" 236 :timeout="timeout"
237 :top="y === 'top'" 237 :top="y === 'top'"
238 :right="x === 'right'" 238 :right="x === 'right'"
239 :vertical="mode === 'vertical'" 239 :vertical="mode === 'vertical'"
240 v-model="snackbar" 240 v-model="snackbar"
241 :color="color" 241 :color="color"
242 >{{ text }}</v-snackbar> 242 >{{ text }}</v-snackbar>
243 </v-container> 243 </v-container>
244 </template> 244 </template>
245 245
246 246
247 <script> 247 <script>
248 import http from "@/Services/http.js"; 248 import http from "@/Services/http.js";
249 import moment from "moment"; 249 import moment from "moment";
250 import teacherData from "@/script/teachers.js"; 250 import teacherData from "@/script/teachers.js";
251 import studentData from "@/script/students.js"; 251 import studentData from "@/script/students.js";
252 import parentData from "@/script/parents.js"; 252 import parentData from "@/script/parents.js";
253 import userData from "@/script/users.js"; 253 import userData from "@/script/users.js";
254 import bookData from "@/script/books.js"; 254 import bookData from "@/script/books.js";
255 import XLSX from "xlsx"; 255 import XLSX from "xlsx";
256 256
257 export default { 257 export default {
258 data: () => ({ 258 data: () => ({
259 loading: false, 259 loading: false,
260 parentLoading: false, 260 parentLoading: false,
261 userLoading: false, 261 userLoading: false,
262 BookLoading: false, 262 BookLoading: false,
263 studentLoading: false, 263 studentLoading: false,
264 snackbar: false, 264 snackbar: false,
265 y: "top", 265 y: "top",
266 x: "right", 266 x: "right",
267 mode: "", 267 mode: "",
268 timeout: 3000, 268 timeout: 3000,
269 text: "", 269 text: "",
270 color: "", 270 color: "",
271 teacherData: [], 271 teacherData: [],
272 studentData: [], 272 studentData: [],
273 parentData: [], 273 parentData: [],
274 userData: [], 274 userData: [],
275 bookData: [], 275 bookData: [],
276 teacherFileJson: [], 276 teacherFileJson: [],
277 parentFileJson: [], 277 parentFileJson: [],
278 userFileJson: [], 278 userFileJson: [],
279 bookFileJson: [], 279 bookFileJson: [],
280 studentFileJson: [], 280 studentFileJson: [],
281 teacherFileName: "", 281 teacherFileName: "",
282 parentFileName: "", 282 parentFileName: "",
283 userFileName: "", 283 userFileName: "",
284 bookFileName: "", 284 bookFileName: "",
285 bookStudentName: "", 285 bookStudentName: "",
286 token: "", 286 token: "",
287 fileData: {}, 287 fileData: {},
288 teacherDetail: {}, 288 teacherDetail: {},
289 userDetail: {}, 289 userDetail: {},
290 }), 290 }),
291 methods: { 291 methods: {
292 pickFile() { 292 pickFile() {
293 this.$refs.file.click(); 293 this.$refs.file.click();
294 }, 294 },
295 pickParentFile() { 295 pickParentFile() {
296 this.$refs.parentfile.click(); 296 this.$refs.parentfile.click();
297 }, 297 },
298 pickUserFile() { 298 pickUserFile() {
299 this.$refs.userfile.click(); 299 this.$refs.userfile.click();
300 }, 300 },
301 pickBookFile() { 301 pickBookFile() {
302 this.$refs.bookfile.click(); 302 this.$refs.bookfile.click();
303 }, 303 },
304 pickStudentFile() { 304 pickStudentFile() {
305 this.$refs.studentfile.click(); 305 this.$refs.studentfile.click();
306 }, 306 },
307 convertFile(e) { 307 convertFile(e) {
308 var form_data = new FormData(); 308 var form_data = new FormData();
309 form_data.append("upload", e.target.files[0]); 309 form_data.append("upload", e.target.files[0]);
310 310
311 this.teacherDetail = form_data; 311 this.teacherDetail = form_data;
312 312
313 const input = document.getElementById("fileInput"); 313 const input = document.getElementById("fileInput");
314 this.teacherFileName = input.files[0].name; 314 this.teacherFileName = input.files[0].name;
315 315
316 // const reader = new FileReader(); 316 // const reader = new FileReader();
317 // console.log("reader", reader); 317 // console.log("reader", reader);
318 // reader.onload = () => { 318 // reader.onload = () => {
319 // let text = reader.result; 319 // let text = reader.result;
320 // //convert text to json here 320 // //convert text to json here
321 // console.log("text", text); 321 // console.log("text", text);
322 // var json = this.csvJSON(text); 322 // var json = this.csvJSON(text);
323 // }; 323 // };
324 // reader.readAsText(input.files[0]); 324 // reader.readAsText(input.files[0]);
325 // var files = e.target.files, 325 // var files = e.target.files,
326 // f = files[0]; 326 // f = files[0];
327 // var reader = new FileReader(); 327 // var reader = new FileReader();
328 // let array = []; 328 // let array = [];
329 // let _this = this; 329 // let _this = this;
330 // reader.onload = function(e) { 330 // reader.onload = function(e) {
331 // var data = new Uint8Array(e.target.result); 331 // var data = new Uint8Array(e.target.result);
332 // var workbook = XLSX.read(data, { type: "array" }); 332 // var workbook = XLSX.read(data, { type: "array" });
333 // let sheetName = workbook.SheetNames[0]; 333 // let sheetName = workbook.SheetNames[0];
334 // // /* DO SOMETHING WITH workbook HERE */ 334 // // /* DO SOMETHING WITH workbook HERE */
335 // let worksheet = workbook.Sheets[sheetName]; 335 // let worksheet = workbook.Sheets[sheetName];
336 // array = XLSX.utils.sheet_to_json(worksheet); 336 // array = XLSX.utils.sheet_to_json(worksheet);
337 // _this.teacherFileJson = array; 337 // _this.teacherFileJson = array;
338 // }; 338 // };
339 // reader.readAsArrayBuffer(f); 339 // reader.readAsArrayBuffer(f);
340 }, 340 },
341 parentFile(e) { 341 parentFile(e) {
342 const input = document.getElementById("parentInput"); 342 const input = document.getElementById("parentInput");
343 this.parentFileName = input.files[0].name; 343 this.parentFileName = input.files[0].name;
344 // console.log("this.parentFileName", this.parentFileName); 344 // console.log("this.parentFileName", this.parentFileName);
345 var files = e.target.files, 345 var files = e.target.files,
346 f = files[0]; 346 f = files[0];
347 var reader = new FileReader(); 347 var reader = new FileReader();
348 let array = []; 348 let array = [];
349 let _this = this; 349 let _this = this;
350 reader.onload = function (e) { 350 reader.onload = function (e) {
351 var data = new Uint8Array(e.target.result); 351 var data = new Uint8Array(e.target.result);
352 var workbook = XLSX.read(data, { type: "array" }); 352 var workbook = XLSX.read(data, { type: "array" });
353 let sheetName = workbook.SheetNames[0]; 353 let sheetName = workbook.SheetNames[0];
354 // /* DO SOMETHING WITH workbook HERE */ 354 // /* DO SOMETHING WITH workbook HERE */
355 let worksheet = workbook.Sheets[sheetName]; 355 let worksheet = workbook.Sheets[sheetName];
356 array = XLSX.utils.sheet_to_json(worksheet); 356 array = XLSX.utils.sheet_to_json(worksheet);
357 _this.parentFileJson = array; 357 _this.parentFileJson = array;
358 }; 358 };
359 reader.readAsArrayBuffer(f); 359 reader.readAsArrayBuffer(f);
360 }, 360 },
361 userFile(e) { 361 userFile(e) {
362 var form_data = new FormData(); 362 var form_data = new FormData();
363 form_data.append("upload", e.target.files[0]); 363 form_data.append("upload", e.target.files[0]);
364 364
365 this.userDetail = form_data; 365 this.userDetail = form_data;
366 366
367 const input = document.getElementById("userInput"); 367 const input = document.getElementById("userInput");
368 this.userFileName = input.files[0].name; 368 this.userFileName = input.files[0].name;
369 369
370 // var files = e.target.files,
371 // f = files[0]; 370 // var files = e.target.files,
372 // var reader = new FileReader(); 371 // f = files[0];
373 // let array = []; 372 // var reader = new FileReader();
374 // let _this = this; 373 // let array = [];
375 // reader.onload = function(e) { 374 // let _this = this;
376 // var data = new Uint8Array(e.target.result); 375 // reader.onload = function(e) {
377 // var workbook = XLSX.read(data, { type: "array" }); 376 // var data = new Uint8Array(e.target.result);
378 // let sheetName = workbook.SheetNames[0]; 377 // var workbook = XLSX.read(data, { type: "array" });
379 // // /* DO SOMETHING WITH workbook HERE */ 378 // let sheetName = workbook.SheetNames[0];
380 // let worksheet = workbook.Sheets[sheetName]; 379 // // /* DO SOMETHING WITH workbook HERE */
381 // array = XLSX.utils.sheet_to_json(worksheet); 380 // let worksheet = workbook.Sheets[sheetName];
382 // _this.userFileJson = array; 381 // array = XLSX.utils.sheet_to_json(worksheet);
383 // }; 382 // _this.userFileJson = array;
384 // reader.readAsArrayBuffer(f); 383 // };
385 }, 384 // reader.readAsArrayBuffer(f);
386 bookFile(e) { 385 },
387 const input = document.getElementById("bookInput"); 386 bookFile(e) {
388 this.bookFileName = input.files[0].name; 387 const input = document.getElementById("bookInput");
389 // console.log("this.bookFileName", this.bookFileName); 388 this.bookFileName = input.files[0].name;
390 var files = e.target.files, 389 // console.log("this.bookFileName", this.bookFileName);
391 f = files[0]; 390 var files = e.target.files,
392 // console.log("this.bookFileName", files); 391 f = files[0];
393 var reader = new FileReader(); 392 // console.log("this.bookFileName", files);
394 let array = []; 393 var reader = new FileReader();
395 let _this = this;
396 reader.onload = function (e) { 394 let array = [];
397 var data = new Uint8Array(e.target.result); 395 let _this = this;
398 // console.log("data", data); 396 reader.onload = function (e) {
399 var workbook = XLSX.read(data, { type: "array" });
400 let sheetName = workbook.SheetNames[0]; 397 var data = new Uint8Array(e.target.result);
401 // /* DO SOMETHING WITH workbook HERE */ 398 // console.log("data", data);
402 let worksheet = workbook.Sheets[sheetName]; 399 var workbook = XLSX.read(data, { type: "array" });
403 array = XLSX.utils.sheet_to_json(worksheet); 400 let sheetName = workbook.SheetNames[0];
404 _this.bookFileJson = array; 401 // /* DO SOMETHING WITH workbook HERE */
405 // console.log("this.bookFileJson ", _this.bookFileJson); 402 let worksheet = workbook.Sheets[sheetName];
406 }; 403 array = XLSX.utils.sheet_to_json(worksheet);
407 reader.readAsArrayBuffer(f); 404 _this.bookFileJson = array;
408 }, 405 // console.log("this.bookFileJson ", _this.bookFileJson);
409 // csvJSON(csv) { 406 };
410 // var lines = csv.split("\n"); 407 reader.readAsArrayBuffer(f);
411 408 },
412 // var result = []; 409 // csvJSON(csv) {
413 410 // var lines = csv.split("\n");
414 // var headers = lines[0].split(","); 411
415 412 // var result = [];
416 // for (var i = 1; i < lines.length; i++) { 413
417 // var obj = {}; 414 // var headers = lines[0].split(",");
418 // var currentline = lines[i].split(","); 415
419 416 // for (var i = 1; i < lines.length; i++) {
420 // for (var j = 0; j < headers.length; j++) { 417 // var obj = {};
421 // obj[headers[j]] = currentline[j]; 418 // var currentline = lines[i].split(",");
422 // } 419
423 420 // for (var j = 0; j < headers.length; j++) {
424 // result.push(obj); 421 // obj[headers[j]] = currentline[j];
425 // } 422 // }
426 423
427 // //return result; //JavaScript object 424 // result.push(obj);
428 // return JSON.stringify(result); //JSON 425 // }
429 // }, 426
430 studentFile(e) { 427 // //return result; //JavaScript object
431 var form_data = new FormData(); 428 // return JSON.stringify(result); //JSON
432 form_data.append("upload", e.target.files[0]); 429 // },
433 430 studentFile(e) {
434 this.fileData = form_data; 431 var form_data = new FormData();
435 432 form_data.append("upload", e.target.files[0]);
436 const input = document.getElementById("studentInput"); 433
437 this.bookStudentName = input.files[0].name; 434 this.fileData = form_data;
438 435
439 // var files = e.target.files, 436 const input = document.getElementById("studentInput");
440 // f = files[0]; 437 this.bookStudentName = input.files[0].name;
441 // var reader = new FileReader(); 438
442 // let array = []; 439 // var files = e.target.files,
443 // let _this = this; 440 // f = files[0];
444 // reader.onload = function(e) { 441 // var reader = new FileReader();
445 // var data = new Uint8Array(e.target.result); 442 // let array = [];
446 // var workbook = XLSX.read(data, { type: "array", cellDates: true }); 443 // let _this = this;
447 // let sheetName = workbook.SheetNames[0]; 444 // reader.onload = function(e) {
448 // // /* DO SOMETHING WITH workbook HERE */ 445 // var data = new Uint8Array(e.target.result);
449 // let worksheet = workbook.Sheets[sheetName]; 446 // var workbook = XLSX.read(data, { type: "array", cellDates: true });
450 // array = XLSX.utils.sheet_to_json(worksheet); 447 // let sheetName = workbook.SheetNames[0];
451 // _this.studentFileJson = array; 448 // // /* DO SOMETHING WITH workbook HERE */
452 // }; 449 // let worksheet = workbook.Sheets[sheetName];
453 // reader.readAsArrayBuffer(f); 450 // array = XLSX.utils.sheet_to_json(worksheet);
454 }, 451 // _this.studentFileJson = array;
455 452 // };
456 // csvJSON(csv) { 453 // reader.readAsArrayBuffer(f);
457 // var lines = csv.split("\n"); 454 },
458 455
459 // var result = []; 456 // csvJSON(csv) {
460 // var headers = lines[0].split(","); 457 // var lines = csv.split("\n");
461 458
462 // for (var i = 1; i < lines.length; i++) { 459 // var result = [];
463 // var obj = {}; 460 // var headers = lines[0].split(",");
464 // var currentline = lines[i].split(","); 461
465 462 // for (var i = 1; i < lines.length; i++) {
466 // for (var j = 0; j < headers.length; j++) { 463 // var obj = {};
467 // obj[headers[j]] = currentline[j]; 464 // var currentline = lines[i].split(",");
468 // } 465
469 // this.teacherFileJson.push(obj); 466 // for (var j = 0; j < headers.length; j++) {
470 // } 467 // obj[headers[j]] = currentline[j];
471 // }, 468 // }
472 importTeacher() { 469 // this.teacherFileJson.push(obj);
473 this.loading = true; 470 // }
474 var teacherfile = {}; 471 // },
475 teacherfile.teacherData = this.teacherFileJson; 472 importTeacher() {
476 http() 473 this.loading = true;
477 .post("/importTeacherData", this.teacherDetail, { 474 var teacherfile = {};
478 headers: { Authorization: "Bearer " + this.token }, 475 teacherfile.teacherData = this.teacherFileJson;
479 }) 476 http()
480 .then((response) => { 477 .post("/importTeacherData", this.teacherDetail, {
481 this.snackbar = true; 478 headers: { Authorization: "Bearer " + this.token },
482 this.text = response.data.message; 479 })
483 this.color = "green"; 480 .then((response) => {
484 this.loading = false; 481 this.snackbar = true;
485 }) 482 this.text = response.data.message;
486 .catch((error) => { 483 this.color = "green";
487 this.snackbar = true; 484 this.loading = false;
488 this.text = error.response.data.message; 485 })
489 this.color = "red"; 486 .catch((error) => {
490 this.loading = false; 487 this.snackbar = true;
491 }); 488 this.text = error.response.data.message;
492 }, 489 this.color = "red";
493 importParent() { 490 this.loading = false;
494 this.parentLoading = true; 491 });
495 var parentfile = {}; 492 },
496 parentfile.parentData = this.parentFileJson; 493 importParent() {
497 http() 494 this.parentLoading = true;
498 .post("/importParentData", parentfile, { 495 var parentfile = {};
499 headers: { Authorization: "Bearer " + this.token }, 496 parentfile.parentData = this.parentFileJson;
500 }) 497 http()
501 .then((response) => { 498 .post("/importParentData", parentfile, {
502 this.snackbar = true; 499 headers: { Authorization: "Bearer " + this.token },
503 this.text = response.data.message; 500 })
504 this.color = "green"; 501 .then((response) => {
505 this.parentLoading = false; 502 this.snackbar = true;
506 }) 503 this.text = response.data.message;
507 .catch((error) => { 504 this.color = "green";
508 this.snackbar = true; 505 this.parentLoading = false;
509 this.text = error.response.data.message; 506 })
510 this.parentLoading = false; 507 .catch((error) => {
511 this.color = "red"; 508 this.snackbar = true;
512 }); 509 this.text = error.response.data.message;
513 }, 510 this.parentLoading = false;
514 importUser() { 511 this.color = "red";
515 this.userLoading = true; 512 });
516 var userfile = {}; 513 },
517 userfile.userData = this.userFileJson; 514 importUser() {
518 http() 515 this.userLoading = true;
519 .post("/importUserData", this.userDetail, { 516 var userfile = {};
520 headers: { Authorization: "Bearer " + this.token }, 517 userfile.userData = this.userFileJson;
521 }) 518 http()
522 .then((response) => { 519 .post("/importUserData", this.userDetail, {
523 this.snackbar = true; 520 headers: { Authorization: "Bearer " + this.token },
524 this.text = response.data.message; 521 })
525 this.color = "green"; 522 .then((response) => {
526 this.userLoading = false; 523 this.snackbar = true;
527 }) 524 this.text = response.data.message;
528 .catch((error) => { 525 this.color = "green";
529 this.snackbar = true; 526 this.userLoading = false;
530 this.text = error.response.data.message; 527 })
531 this.userLoading = false; 528 .catch((error) => {
532 this.color = "red"; 529 this.snackbar = true;
533 }); 530 this.text = error.response.data.message;
534 }, 531 this.userLoading = false;
535 importBook() { 532 this.color = "red";
536 this.BookLoading = true; 533 });
537 var bookfile = {}; 534 },
538 bookfile.bookData = this.bookFileJson; 535 importBook() {
539 http() 536 this.BookLoading = true;
540 .post("/importBookData", bookfile, { 537 var bookfile = {};
541 headers: { Authorization: "Bearer " + this.token }, 538 bookfile.bookData = this.bookFileJson;
542 }) 539 http()
543 .then((response) => { 540 .post("/importBookData", bookfile, {
544 this.snackbar = true; 541 headers: { Authorization: "Bearer " + this.token },
545 this.text = response.data.message; 542 })
546 this.color = "green"; 543 .then((response) => {
547 this.BookLoading = false; 544 this.snackbar = true;
548 }) 545 this.text = response.data.message;
549 .catch((error) => { 546 this.color = "green";
550 this.snackbar = true; 547 this.BookLoading = false;
551 this.text = error.response.data.message; 548 })
552 this.color = "red"; 549 .catch((error) => {
553 this.BookLoading = false; 550 this.snackbar = true;
554 }); 551 this.text = error.response.data.message;
555 }, 552 this.color = "red";
556 importStudent() { 553 this.BookLoading = false;
557 this.studentLoading = true; 554 });
558 var studentfile = {}; 555 },
559 // console.log("this.studentFileJson", this.studentFileJson); 556 importStudent() {
560 studentfile.studentData = this.studentFileJson; 557 this.studentLoading = true;
561 http() 558 var studentfile = {};
562 .post("/importStudentData", this.fileData, { 559 // console.log("this.studentFileJson", this.studentFileJson);
563 headers: { Authorization: "Bearer " + this.token }, 560 studentfile.studentData = this.studentFileJson;
564 }) 561 http()
565 .then((response) => { 562 .post("/importStudentData", this.fileData, {
566 this.snackbar = true; 563 headers: { Authorization: "Bearer " + this.token },
567 this.text = response.data.message; 564 })
568 this.color = "green"; 565 .then((response) => {
569 this.studentLoading = false; 566 this.snackbar = true;
570 }) 567 this.text = response.data.message;
571 .catch((error) => { 568 this.color = "green";
572 this.snackbar = true; 569 this.studentLoading = false;
573 this.text = error.response.data.message; 570 })
574 this.color = "red"; 571 .catch((error) => {
575 this.studentLoading = false; 572 this.snackbar = true;
576 }); 573 this.text = error.response.data.message;
577 }, 574 this.color = "red";
578 }, 575 this.studentLoading = false;
579 mounted() { 576 });
580 this.token = this.$store.state.token; 577 },
581 578 },
582 /** TEACHERS SAMPLE CSV */ 579 mounted() {
583 const getTeacherData = teacherData(); 580 this.token = this.$store.state.token;
584 this.teacherData = getTeacherData; 581
585 582 /** TEACHERS SAMPLE CSV */
586 /** STUDENTS SAMPLE CSV */ 583 const getTeacherData = teacherData();
587 const getstudentData = studentData(); 584 this.teacherData = getTeacherData;
588 this.studentData = getstudentData; 585
589 586 /** STUDENTS SAMPLE CSV */
590 /** PARENTS SAMPLE CSV */ 587 const getstudentData = studentData();
591 const getparentData = parentData(); 588 this.studentData = getstudentData;
592 this.parentData = getparentData; 589
593 590 /** PARENTS SAMPLE CSV */
594 /** USERS SAMPLE CSV */ 591 const getparentData = parentData();
595 const getUserData = userData(); 592 this.parentData = getparentData;
596 this.userData = getUserData; 593
597 594 /** USERS SAMPLE CSV */
598 /** BOOKS SAMPLE CSV */ 595 const getUserData = userData();
599 const getBookData = bookData(); 596 this.userData = getUserData;
600 this.bookData = getBookData; 597
601 }, 598 /** BOOKS SAMPLE CSV */
602 }; 599 const getBookData = bookData();
603 </script> 600 this.bookData = getBookData;
604 <style> 601 },
605 .card-styles { 602 };
606 background: #7f62f8 !important; 603 </script>
607 border-color: #7f62f8 !important; 604 <style>
608 } 605 .card-styles {
609 </style> 606 background: #7f62f8 !important;
610 607 border-color: #7f62f8 !important;
src/pages/Administrator/role.vue
Diff comments   View file @8b7976c
1 <template> 1 <template>
2 <v-container fluid class="body-color"> 2 <v-container fluid class="body-color">
3 <!-- ****** EDITS Role Distribution ****** --> 3 <!-- ****** EDITS Role Distribution ****** -->
4 <v-dialog v-model="editRoleDialog" max-width="400px" persistent> 4 <v-dialog v-model="editRoleDialog" max-width="400px" persistent>
5 <v-card flat class="card-style pa-2" dark> 5 <v-card flat class="card-style pa-2" dark>
6 <v-layout> 6 <v-layout>
7 <v-flex xs12> 7 <v-flex xs12>
8 <label class="title text-xs-center">Edit Role</label> 8 <label class="title text-xs-center">Edit Role</label>
9 <v-icon size="24" class="right" @click="editRoleDialog = false">cancel</v-icon> 9 <v-icon size="24" class="right" @click="editRoleDialog = false">cancel</v-icon>
10 </v-flex> 10 </v-flex>
11 </v-layout> 11 </v-layout>
12 <v-form ref="form"> 12 <v-form ref="form">
13 <v-container fluid> 13 <v-container fluid>
14 <v-flex xs12 sm12> 14 <v-flex xs12 sm12>
15 <v-layout> 15 <v-layout>
16 <v-flex xs3 class="pt-4 subheading"> 16 <v-flex xs3 class="pt-4 subheading">
17 <label class="right">Role:</label> 17 <label class="right">Role:</label>
18 </v-flex> 18 </v-flex>
19 <v-flex xs8 sm7 class="ml-3"> 19 <v-flex xs8 sm7 class="ml-3">
20 <v-text-field v-model="editedItem.name" placeholder="fill your Role"></v-text-field> 20 <v-text-field v-model="editedItem.name" placeholder="fill your Role"></v-text-field>
21 </v-flex> 21 </v-flex>
22 </v-layout> 22 </v-layout>
23 </v-flex> 23 </v-flex>
24 <v-layout> 24 <v-layout>
25 <v-flex xs12> 25 <v-flex xs12>
26 <v-layout> 26 <v-layout>
27 <v-spacer></v-spacer> 27 <v-spacer></v-spacer>
28 <v-btn round dark @click="save" class="add-button">Save</v-btn> 28 <v-btn round dark @click="save" class="add-button">Save</v-btn>
29 <v-spacer></v-spacer> 29 <v-spacer></v-spacer>
30 </v-layout> 30 </v-layout>
31 </v-flex> 31 </v-flex>
32 </v-layout> 32 </v-layout>
33 </v-container> 33 </v-container>
34 </v-form> 34 </v-form>
35 </v-card> 35 </v-card>
36 </v-dialog> 36 </v-dialog>
37 <!-- ****** ROLE TABLE ****** --> 37 <!-- ****** ROLE TABLE ****** -->
38 38
39 <v-toolbar color="transparent" flat> 39 <v-toolbar color="transparent" flat>
40 <!-- <v-btn 40 <!-- <v-btn
41 fab 41 fab
42 dark 42 dark
43 class="open-dialog-button hidden-xl-only hidden-md-only hidden-lg-only" 43 class="open-dialog-button hidden-xl-only hidden-md-only hidden-lg-only"
44 small 44 small
45 @click="addRoleDialog = true" 45 @click="addRoleDialog = true"
46 > 46 >
47 <v-icon dark>add</v-icon> 47 <v-icon dark>add</v-icon>
48 </v-btn> 48 </v-btn>
49 <v-btn 49 <v-btn
50 round 50 round
51 class="open-dialog-button hidden-sm-only hidden-xs-only" 51 class="open-dialog-button hidden-sm-only hidden-xs-only"
52 dark 52 dark
53 @click="addRoleDialog = true" 53 @click="addRoleDialog = true"
54 > 54 >
55 <v-icon class="white--text pr-1" size="20">add</v-icon>Add Role 55 <v-icon class="white--text pr-1" size="20">add</v-icon>Add Role
56 </v-btn>--> 56 </v-btn>-->
57 <v-spacer></v-spacer> 57 <v-spacer></v-spacer>
58 <v-card-title class="body-1" v-show="show"> 58 <v-card-title class="body-1" v-show="show">
59 <v-btn icon large flat @click="displaySearch"> 59 <v-btn icon large flat @click="displaySearch">
60 <v-avatar size="27"> 60 <v-avatar size="27">
61 <img src="/static/icon/search.png" alt="icon" /> 61 <img src="/static/icon/search.png" alt="icon" />
62 </v-avatar> 62 </v-avatar>
63 </v-btn> 63 </v-btn>
64 </v-card-title> 64 </v-card-title>
65 <v-flex xs8 sm8 md3 lg2 v-if="showSearch"> 65 <v-flex xs8 sm8 md3 lg2 v-if="showSearch">
66 <v-layout> 66 <v-layout>
67 <v-text-field 67 <v-text-field
68 autofocus
69 v-model="search"
70 label="Search"
71 prepend-inner-icon="search"
72 color="primary"
73 ></v-text-field>
68 autofocus 74 <v-icon @click="closeSearch" color="error">close</v-icon>
69 v-model="search" 75 </v-layout>
70 label="Search" 76 </v-flex>
71 prepend-inner-icon="search" 77 </v-toolbar>
72 color="primary" 78 <v-data-table
73 ></v-text-field> 79 :headers="headers"
74 <v-icon @click="closeSearch" color="error">close</v-icon> 80 :items="getRoles"
75 </v-layout> 81 :pagination.sync="pagination"
76 </v-flex> 82 :search="search"
77 </v-toolbar> 83 >
78 <v-data-table 84 <template slot="items" slot-scope="props">
79 :headers="headers" 85 <tr class="tr">
80 :items="getRoles" 86 <td class="td td-row">{{ props.index + 1}}</td>
81 :pagination.sync="pagination" 87 <td class="td td-row text-xs-center">{{ props.item.name}}</td>
82 :search="search" 88 <!-- <td class="td td-row text-xs-center">
83 > 89 <span>
84 <template slot="items" slot-scope="props"> 90 <v-tooltip top>
85 <tr class="tr"> 91 <img
86 <td class="td td-row">{{ props.index + 1}}</td> 92 slot="activator"
87 <td class="td td-row text-xs-center">{{ props.item.name}}</td> 93 style="cursor:pointer; width:20px; height:18px; "
88 <!-- <td class="td td-row text-xs-center"> 94 class="mr-3"
89 <span> 95 @click="editItem(props.item)"
90 <v-tooltip top> 96 src="/static/icon/edit.png"
91 <img 97 />
92 slot="activator" 98 <span>Edit</span>
93 style="cursor:pointer; width:20px; height:18px; " 99 </v-tooltip>
94 class="mr-3" 100 <v-tooltip top>
95 @click="editItem(props.item)" 101 <img
96 src="/static/icon/edit.png" 102 slot="activator"
97 /> 103 style="cursor:pointer; width:20px; height:20px; "
98 <span>Edit</span> 104 @click="deleteItem(props.item)"
99 </v-tooltip> 105 src="/static/icon/delete.png"
100 <v-tooltip top> 106 />
101 <img 107 <span>Delete</span>
102 slot="activator" 108 </v-tooltip>
103 style="cursor:pointer; width:20px; height:20px; " 109 </span>
104 @click="deleteItem(props.item)" 110 </td>-->
105 src="/static/icon/delete.png" 111 </tr>
106 /> 112 </template>
107 <span>Delete</span> 113 <v-alert
108 </v-tooltip> 114 slot="no-results"
109 </span> 115 :value="true"
110 </td>--> 116 color="error"
111 </tr> 117 icon="warning"
112 </template> 118 >Your search for "{{ search }}" found no results.</v-alert>
113 <v-alert 119 </v-data-table>
114 slot="no-results" 120
115 :value="true" 121 <!-- ****** ADD ROLE ****** -->
116 color="error" 122
117 icon="warning" 123 <v-dialog v-model="addRoleDialog" max-width="400px" persistent>
118 >Your search for "{{ search }}" found no results.</v-alert> 124 <v-card flat class="card-style pa-2" dark>
119 </v-data-table> 125 <v-layout>
120 126 <v-flex xs12>
121 <!-- ****** ADD ROLE ****** --> 127 <label class="title text-xs-center">Add Role</label>
122 128 <v-icon size="24" class="right" @click="addRoleDialog = false">cancel</v-icon>
123 <v-dialog v-model="addRoleDialog" max-width="400px" persistent> 129 </v-flex>
124 <v-card flat class="card-style pa-2" dark> 130 </v-layout>
125 <v-layout> 131 <v-form ref="form" v-model="valid" lazy-validation>
126 <v-flex xs12> 132 <v-container fluid>
127 <label class="title text-xs-center">Add Role</label> 133 <v-flex xs12>
128 <v-icon size="24" class="right" @click="addRoleDialog = false">cancel</v-icon> 134 <v-layout>
129 </v-flex> 135 <v-flex xs3 class="pt-4 subheading">
130 </v-layout> 136 <label class="right">Role:</label>
131 <v-form ref="form" v-model="valid" lazy-validation> 137 </v-flex>
132 <v-container fluid> 138 <v-flex xs8 sm7 class="ml-3">
133 <v-flex xs12> 139 <v-text-field
134 <v-layout> 140 v-model="addrole.name"
135 <v-flex xs3 class="pt-4 subheading"> 141 placeholder="fill your Role"
136 <label class="right">Role:</label> 142 :rules="roleRules"
137 </v-flex> 143 ></v-text-field>
138 <v-flex xs8 sm7 class="ml-3"> 144 </v-flex>
139 <v-text-field 145 </v-layout>
140 v-model="addrole.name" 146 </v-flex>
141 placeholder="fill your Role" 147 <v-layout>
142 :rules="roleRules" 148 <v-flex xs12 sm12>
143 ></v-text-field> 149 <v-layout>
144 </v-flex> 150 <v-spacer></v-spacer>
145 </v-layout> 151 <v-btn @click="clear" round class="add-button" dark>clear</v-btn>
146 </v-flex> 152 <v-btn @click="submit" round dark :loading="loading" class="add-button">Add</v-btn>
147 <v-layout> 153 <v-spacer></v-spacer>
148 <v-flex xs12 sm12> 154 </v-layout>
149 <v-layout> 155 </v-flex>
150 <v-spacer></v-spacer> 156 </v-layout>
151 <v-btn @click="clear" round class="add-button" dark>clear</v-btn> 157 </v-container>
152 <v-btn @click="submit" round dark :loading="loading" class="add-button">Add</v-btn> 158 </v-form>
153 <v-spacer></v-spacer> 159 </v-card>
154 </v-layout> 160 </v-dialog>
155 </v-flex> 161 <div class="loader" v-if="showLoader">
156 </v-layout> 162 <v-progress-circular indeterminate color="white"></v-progress-circular>
157 </v-container> 163 </div>
158 </v-form> 164 </v-container>
159 </v-card> 165 </template>
160 </v-dialog> 166
161 <div class="loader" v-if="showLoader"> 167 <script>
162 <v-progress-circular indeterminate color="white"></v-progress-circular> 168 import http from "@/Services/http.js";
163 </div> 169
164 </v-container> 170 export default {
165 </template> 171 data: () => ({
166 172 snackbar: false,
167 <script> 173 y: "top",
168 import http from "@/Services/http.js"; 174 x: "right",
169 175 mode: "",
170 export default { 176 timeout: 5000,
171 data: () => ({ 177 text: "",
172 snackbar: false, 178 loading: false,
173 y: "top", 179 search: "",
174 x: "right", 180 show: true,
175 mode: "", 181 showSearch: false,
176 timeout: 5000, 182 showLoader: false,
177 text: "", 183 editRoleDialog: false,
178 loading: false, 184 valid: true,
179 search: "", 185 addRoleDialog: false,
180 show: true, 186 pagination: {
181 showSearch: false, 187 rowsPerPage: 10,
182 showLoader: false, 188 },
183 editRoleDialog: false, 189 roleRules: [(v) => !!v || "Role is required"],
184 valid: true, 190 headers: [
185 addRoleDialog: false, 191 {
186 pagination: { 192 text: "No",
187 rowsPerPage: 10, 193 align: "",
188 }, 194 sortable: false,
189 roleRules: [(v) => !!v || "Role is required"], 195 value: "No",
190 headers: [ 196 },
191 { 197 { text: "Role", value: "role", sortable: false, align: "center" },
192 text: "No", 198 // { text: "Action", value: "", sortable: false, align: "center" }
193 align: "", 199 ],
194 sortable: false, 200 getRoles: [],
195 value: "No", 201 editedIndex: -1,
196 }, 202 token: "",
197 { text: "Role", value: "role", sortable: false, align: "center" }, 203 addrole: {},
198 // { text: "Action", value: "", sortable: false, align: "center" } 204 editedItem: {},
199 ], 205 }),
200 getRoles: [], 206 methods: {
201 editedIndex: -1, 207 getRole() {
202 token: "", 208 this.showLoader = true;
203 addrole: {}, 209 http()
204 editedItem: {}, 210 .get("/getRolesList", {
205 }), 211 headers: { Authorization: "Bearer " + this.token },
206 methods: { 212 })
207 getRole() { 213 .then((response) => {
208 this.showLoader = true; 214 this.getRoles = response.data.data;
209 http() 215 this.showLoader = false;
210 .get("/getRolesList", { 216 })
211 headers: { Authorization: "Bearer " + this.token }, 217 .catch((error) => {
212 }) 218 this.showLoader = false;
213 .then((response) => { 219 if (error.response.status === 401) {
214 this.getRoles = response.data.data; 220 this.$router.replace({ path: "/" });
215 this.showLoader = false; 221 this.$store.dispatch("setToken", null);
216 }) 222 this.$store.dispatch("Id", null);
217 .catch((error) => { 223 this.$store.dispatch("Role", null);
218 this.showLoader = false; 224 }
219 if (error.response.status === 401) { 225 });
220 this.$router.replace({ path: "/" }); 226 },
221 this.$store.dispatch("setToken", null); 227 editItem(item) {
222 this.$store.dispatch("Id", null); 228 this.editedIndex = this.getRoles.indexOf(item);
223 this.$store.dispatch("Role", null); 229 this.editedItem = Object.assign({}, item);
224 } 230 this.editRoleDialog = true;
225 }); 231 },
226 }, 232 deleteItem(item) {
227 editItem(item) { 233 let deleteRoleId = {
228 this.editedIndex = this.getRoles.indexOf(item); 234 roleId: item._id,
229 this.editedItem = Object.assign({}, item); 235 };
230 this.editRoleDialog = true; 236 http()
231 }, 237 .delete(
232 deleteItem(item) { 238 "/deleteRole",
233 let deleteRoleId = { 239 confirm("Are you sure you want to delete this?") && {
234 roleId: item._id, 240 params: deleteRoleId,
235 }; 241 },
236 http() 242 {
237 .delete( 243 headers: {
238 "/deleteRole", 244 Authorization: "Bearer " + this.token,
239 confirm("Are you sure you want to delete this?") && { 245 },
240 params: deleteRoleId, 246 }
241 }, 247 )
242 { 248 .then((response) => {
243 headers: { 249 this.text = response.data.message;
244 Authorization: "Bearer " + this.token, 250 this.getRole();
245 }, 251 })
246 } 252 .catch((error) => {
247 ) 253 // console.log(error);
254 this.snackbar = true;
255 this.color = "error";
256 this.text = error.response.data.message;
248 .then((response) => { 257 });
249 this.text = response.data.message; 258 },
250 this.getRole(); 259 close() {
251 }) 260 this.editRoleDialog = false;
252 .catch((error) => { 261 },
253 // console.log(error); 262 submit() {
254 this.snackbar = true; 263 if (this.$refs.form.validate()) {
255 this.color = "error"; 264 this.loading = true;
256 this.text = error.response.data.message; 265 http()
257 }); 266 .post("/createRole", this.addrole)
258 }, 267 .then((response) => {
259 close() { 268 this.snackbar = true;
260 this.editRoleDialog = false; 269 this.addRoleDialog = false;
261 }, 270 this.text = response.data.message;
262 submit() { 271 this.getRole();
263 if (this.$refs.form.validate()) { 272 this.clear();
264 this.loading = true; 273 this.loading = false;
265 http() 274 })
266 .post("/createRole", this.addrole) 275 .catch((error) => {
267 .then((response) => { 276 this.snackbar = true;
268 this.snackbar = true; 277 this.text = error.response.data.message;
269 this.addRoleDialog = false; 278 this.loading = false;
270 this.text = response.data.message; 279 });
271 this.getRole(); 280 }
272 this.clear(); 281 },
273 this.loading = false; 282 clear() {
274 }) 283 this.$refs.form.reset();
275 .catch((error) => { 284 },
276 this.snackbar = true; 285 save() {
277 this.text = error.response.data.message; 286 (this.editedItem.roleId = this.editedItem._id),
278 this.loading = false; 287 http()
279 }); 288 .put("/updateRole", this.editedItem, {
280 } 289 headers: {
281 }, 290 Authorization: "Bearer " + this.token,
282 clear() { 291 },
283 this.$refs.form.reset(); 292 })
284 }, 293 .then((response) => {
285 save() { 294 this.text = "Successfully Edit Notification";
286 (this.editedItem.roleId = this.editedItem._id), 295 this.getRole();
287 http() 296 this.close();
288 .put("/updateRole", this.editedItem, { 297 })
289 headers: { 298 .catch((error) => {
290 Authorization: "Bearer " + this.token, 299 // console.log(error);
300 this.snackbar = true;
301 this.color = "error";
302 this.text = error.response.data.message;
291 }, 303 });
292 }) 304 },
293 .then((response) => { 305 displaySearch() {
294 this.text = "Successfully Edit Notification"; 306 (this.show = false), (this.showSearch = true);
295 this.getRole(); 307 },
296 this.close(); 308 closeSearch() {
297 }) 309 this.showSearch = false;
298 .catch((error) => { 310 this.show = true;
299 // console.log(error); 311 this.search = "";
300 this.snackbar = true; 312 },
301 this.color = "error"; 313 },
302 this.text = error.response.data.message; 314 mounted() {
303 }); 315 this.token = this.$store.state.token;
304 }, 316 this.getRole();
305 displaySearch() { 317 },
306 (this.show = false), (this.showSearch = true); 318 };
307 }, 319 </script>
src/pages/Administrator/systemAdmin.vue
Diff comments   View file @8b7976c
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 persistent> 29 <v-dialog v-model="dialog" max-width="1100px" scrollable persistent>
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 persistent> 351 <v-dialog v-model="dialog1" max-width="600px" scrollable persistent>
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 <v-tooltip top> 519 <v-tooltip top>
520 <img 520 <img
521 slot="activator" 521 slot="activator"
522 style="cursor:pointer; width:25px; height:18px; " 522 style="cursor:pointer; width:25px; height:18px; "
523 class="mr5" 523 class="mr5"
524 @click="profile(props.item)" 524 @click="profile(props.item)"
525 src="/static/icon/eye1.png" 525 src="/static/icon/eye1.png"
526 /> 526 />
527 <span>View</span> 527 <span>View</span>
528 </v-tooltip> 528 </v-tooltip>
529 <v-tooltip top> 529 <v-tooltip top>
530 <img 530 <img
531 slot="activator" 531 slot="activator"
532 style="cursor:pointer; width:20px; height:18px; " 532 style="cursor:pointer; width:20px; height:18px; "
533 class="mr5" 533 class="mr5"
534 @click="editItem(props.item)" 534 @click="editItem(props.item)"
535 src="/static/icon/edit1.png" 535 src="/static/icon/edit1.png"
536 /> 536 />
537 <span>Edit</span> 537 <span>Edit</span>
538 </v-tooltip> 538 </v-tooltip>
539 <v-tooltip top> 539 <v-tooltip top>
540 <img 540 <img
541 slot="activator" 541 slot="activator"
542 style="cursor:pointer; width:20px; height:20px; " 542 style="cursor:pointer; width:20px; height:20px; "
543 class="mr5" 543 class="mr5"
544 @click="deleteItem(props.item)" 544 @click="deleteItem(props.item)"
545 src="/static/icon/delete1.png" 545 src="/static/icon/delete1.png"
546 /> 546 />
547 <span>Delete</span> 547 <span>Delete</span>
548 </v-tooltip> 548 </v-tooltip>
549 </span> 549 </span>
550 </td> 550 </td>
551 </template> 551 </template>
552 <v-alert 552 <v-alert
553 slot="no-results" 553 slot="no-results"
554 :value="true" 554 :value="true"
555 color="error" 555 color="error"
556 icon="warning" 556 icon="warning"
557 >Your search for "{{ search }}" found no results.</v-alert> 557 >Your search for "{{ search }}" found no results.</v-alert>
558 </v-data-table> 558 </v-data-table>
559 </v-tab-item> 559 </v-tab-item>
560 560
561 <!-- ****** Add System Admin Data****** --> 561 <!-- ****** Add System Admin Data****** -->
562 <v-tab-item> 562 <v-tab-item>
563 <v-container fluid> 563 <v-container fluid>
564 <v-snackbar 564 <v-snackbar
565 :timeout="timeout" 565 :timeout="timeout"
566 :top="y === 'top'" 566 :top="y === 'top'"
567 :right="x === 'right'" 567 :right="x === 'right'"
568 :vertical="mode === 'vertical'" 568 :vertical="mode === 'vertical'"
569 v-model="snackbar" 569 v-model="snackbar"
570 color="success" 570 color="success"
571 >{{ text }}</v-snackbar> 571 >{{ text }}</v-snackbar>
572 <v-flex xs12 sm12 class="my-4"> 572 <v-flex xs12 sm12 class="my-4">
573 <v-card flat> 573 <v-card flat>
574 <v-form ref="form" v-model="valid" lazy-validation> 574 <v-form ref="form" v-model="valid" lazy-validation>
575 <v-container fluid> 575 <v-container fluid>
576 <v-layout> 576 <v-layout>
577 <v-flex 577 <v-flex
578 xs12 578 xs12
579 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"
580 > 580 >
581 <v-avatar size="100px"> 581 <v-avatar size="100px">
582 <img src="/static/icon/user.png" v-if="!imageUrl" /> 582 <img src="/static/icon/user.png" v-if="!imageUrl" />
583 </v-avatar> 583 </v-avatar>
584 <img 584 <img
585 :src="imageUrl" 585 :src="imageUrl"
586 height="150" 586 height="150"
587 v-if="imageUrl" 587 v-if="imageUrl"
588 style="border-radius:50%; width:200px" 588 style="border-radius:50%; width:200px"
589 /> 589 />
590 </v-flex> 590 </v-flex>
591 </v-layout> 591 </v-layout>
592 <v-layout> 592 <v-layout>
593 <v-flex xs12 sm6> 593 <v-flex xs12 sm6>
594 <v-layout> 594 <v-layout>
595 <v-flex xs4 class="pt-4 subheading"> 595 <v-flex xs4 class="pt-4 subheading">
596 <label class="right hidden-sm-only hidden-xs-only">Name:</label> 596 <label class="right hidden-sm-only hidden-xs-only">Name:</label>
597 <label class="right hidden-lg-only hidden-xl-only hidden-md-only">Name</label> 597 <label class="right hidden-lg-only hidden-xl-only hidden-md-only">Name</label>
598 </v-flex>
599 <v-flex xs8 class="ml-3">
600 <v-text-field 598 </v-flex>
601 v-model="addSystemAdmin.name" 599 <v-flex xs8 class="ml-3">
602 placeholder="fill your full Name" 600 <v-text-field
603 name="name" 601 v-model="addSystemAdmin.name"
604 type="text" 602 placeholder="fill your full Name"
605 :rules="nameRules" 603 name="name"
606 required 604 type="text"
607 ></v-text-field> 605 :rules="nameRules"
608 </v-flex> 606 required
609 </v-layout> 607 ></v-text-field>
610 </v-flex> 608 </v-flex>
611 <v-flex xs12 sm6> 609 </v-layout>
612 <v-layout> 610 </v-flex>
613 <v-flex xs4 class="pt-4 subheading"> 611 <v-flex xs12 sm6>
614 <label class="right">Email ID:</label> 612 <v-layout>
615 </v-flex> 613 <v-flex xs4 class="pt-4 subheading">
616 <v-flex xs8 class="ml-3"> 614 <label class="right">Email ID:</label>
617 <v-text-field 615 </v-flex>
618 placeholder="fill your email" 616 <v-flex xs8 class="ml-3">
619 :rules="emailRules" 617 <v-text-field
620 v-model="addSystemAdmin.email" 618 placeholder="fill your email"
621 type="text" 619 :rules="emailRules"
622 name="email" 620 v-model="addSystemAdmin.email"
623 required 621 type="text"
624 ></v-text-field> 622 name="email"
625 </v-flex> 623 required
626 </v-layout> 624 ></v-text-field>
627 </v-flex> 625 </v-flex>
628 </v-layout> 626 </v-layout>
629 <v-layout> 627 </v-flex>
630 <v-flex xs12 sm6> 628 </v-layout>
631 <v-layout> 629 <v-layout>
632 <v-flex xs4 sm4 class="pt-4 subheading"> 630 <v-flex xs12 sm6>
633 <label class="right hidden-sm-only hidden-xs-only">Date of Birth:</label> 631 <v-layout>
634 <label class="right hidden-lg-only hidden-xl-only hidden-md-only">D.O.B:</label> 632 <v-flex xs4 sm4 class="pt-4 subheading">
635 </v-flex> 633 <label class="right hidden-sm-only hidden-xs-only">Date of Birth:</label>
636 <v-flex xs8 class="ml-3"> 634 <label class="right hidden-lg-only hidden-xl-only hidden-md-only">D.O.B:</label>
637 <v-menu 635 </v-flex>
638 ref="menu" 636 <v-flex xs8 class="ml-3">
639 :close-on-content-click="false" 637 <v-menu
640 v-model="menu" 638 ref="menu"
641 :nudge-right="40" 639 :close-on-content-click="false"
642 lazy 640 v-model="menu"
643 transition="scale-transition" 641 :nudge-right="40"
644 offset-y 642 lazy
645 full-width 643 transition="scale-transition"
646 min-width="290px" 644 offset-y
647 > 645 full-width
648 <v-text-field 646 min-width="290px"
649 slot="activator" 647 >
650 :rules="dateRules" 648 <v-text-field
651 v-model="addSystemAdmin.date" 649 slot="activator"
652 placeholder="Select date" 650 :rules="dateRules"
653 ></v-text-field> 651 v-model="addSystemAdmin.date"
654 <v-date-picker 652 placeholder="Select date"
655 ref="picker" 653 ></v-text-field>
656 v-model="addSystemAdmin.date" 654 <v-date-picker
657 :max="new Date().toISOString().substr(0, 10)" 655 ref="picker"
658 min="1950-01-01" 656 v-model="addSystemAdmin.date"
659 @input="menu = false" 657 :max="new Date().toISOString().substr(0, 10)"
660 ></v-date-picker> 658 min="1950-01-01"
661 </v-menu> 659 @input="menu = false"
662 </v-flex> 660 ></v-date-picker>
663 </v-layout> 661 </v-menu>
664 </v-flex> 662 </v-flex>
665 <v-flex xs12 sm6> 663 </v-layout>
666 <v-layout> 664 </v-flex>
667 <v-flex xs4 class="pt-4 subheading"> 665 <v-flex xs12 sm6>
668 <label class="right">Gender:</label> 666 <v-layout>
669 </v-flex> 667 <v-flex xs4 class="pt-4 subheading">
670 <v-flex xs8 class="ml-3"> 668 <label class="right">Gender:</label>
671 <v-select 669 </v-flex>
672 v-model="addSystemAdmin.gender" 670 <v-flex xs8 class="ml-3">
673 :items="gender" 671 <v-select
674 label="Select your City Name" 672 v-model="addSystemAdmin.gender"
675 :rules="cityRules" 673 :items="gender"
676 required 674 label="Select your City Name"
677 ></v-select> 675 :rules="cityRules"
678 </v-flex> 676 required
679 </v-layout> 677 ></v-select>
680 </v-flex> 678 </v-flex>
681 </v-layout> 679 </v-layout>
682 <v-layout> 680 </v-flex>
683 <v-flex xs12 sm6> 681 </v-layout>
684 <v-layout> 682 <v-layout>
685 <v-flex xs4 class="pt-4 subheading"> 683 <v-flex xs12 sm6>
686 <label class="right hidden-xs-only hidden-sm-only">Mobile No:</label> 684 <v-layout>
687 <label class="right hidden-lg-only hidden-md-only hidden-xl-only">Mobile:</label> 685 <v-flex xs4 class="pt-4 subheading">
688 </v-flex> 686 <label class="right hidden-xs-only hidden-sm-only">Mobile No:</label>
689 <v-flex xs8 class="ml-3"> 687 <label class="right hidden-lg-only hidden-md-only hidden-xl-only">Mobile:</label>
690 <v-text-field 688 </v-flex>
691 v-model="addSystemAdmin.mobileNo" 689 <v-flex xs8 class="ml-3">
692 placeholder="fill your Mobile No." 690 <v-text-field
693 name="mobileNo" 691 v-model="addSystemAdmin.mobileNo"
694 type="number" 692 placeholder="fill your Mobile No."
695 :rules="mobileNoRules" 693 name="mobileNo"
696 required 694 type="number"
697 ></v-text-field> 695 :rules="mobileNoRules"
698 </v-flex> 696 required
699 </v-layout> 697 ></v-text-field>
700 </v-flex> 698 </v-flex>
701 <v-flex xs12 sm6> 699 </v-layout>
702 <v-layout> 700 </v-flex>
703 <v-flex xs4 class="pt-4 subheading"> 701 <v-flex xs12 sm6>
704 <label class="right hidden-xs-only hidden-sm-only">Religion:</label> 702 <v-layout>
705 <label 703 <v-flex xs4 class="pt-4 subheading">
706 class="right hidden-lg-only hidden-md-only hidden-xl-only" 704 <label class="right hidden-xs-only hidden-sm-only">Religion:</label>
707 >Religion:</label> 705 <label
706 class="right hidden-lg-only hidden-md-only hidden-xl-only"
707 >Religion:</label>
708 </v-flex> 708 </v-flex>
709 <v-flex xs8 class="ml-3"> 709 <v-flex xs8 class="ml-3">
710 <v-text-field 710 <v-text-field
711 v-model="addSystemAdmin.religion" 711 v-model="addSystemAdmin.religion"
712 :rules="religion" 712 :rules="religion"
713 placeholder="fill your Religion" 713 placeholder="fill your Religion"
714 required 714 required
715 ></v-text-field> 715 ></v-text-field>
716 </v-flex> 716 </v-flex>
717 </v-layout> 717 </v-layout>
718 </v-flex> 718 </v-flex>
719 </v-layout> 719 </v-layout>
720 <v-layout> 720 <v-layout>
721 <v-flex xs12 sm6> 721 <v-flex xs12 sm6>
722 <v-layout> 722 <v-layout>
723 <v-flex xs4 class="pt-4 subheading"> 723 <v-flex xs4 class="pt-4 subheading">
724 <label class="right">Join Date:</label> 724 <label class="right">Join Date:</label>
725 </v-flex> 725 </v-flex>
726 <v-flex xs8 class="ml-3"> 726 <v-flex xs8 class="ml-3">
727 <v-menu 727 <v-menu
728 ref="menu1" 728 ref="menu1"
729 :close-on-content-click="false" 729 :close-on-content-click="false"
730 v-model="menu1" 730 v-model="menu1"
731 :nudge-right="40" 731 :nudge-right="40"
732 lazy 732 lazy
733 transition="scale-transition" 733 transition="scale-transition"
734 offset-y 734 offset-y
735 full-width 735 full-width
736 min-width="290px" 736 min-width="290px"
737 > 737 >
738 <v-text-field 738 <v-text-field
739 slot="activator" 739 slot="activator"
740 :rules="joinDateRules" 740 :rules="joinDateRules"
741 v-model="addSystemAdmin.joinDate" 741 v-model="addSystemAdmin.joinDate"
742 placeholder="Select date" 742 placeholder="Select date"
743 ></v-text-field> 743 ></v-text-field>
744 <v-date-picker 744 <v-date-picker
745 ref="picker" 745 ref="picker"
746 v-model="addSystemAdmin.joinDate" 746 v-model="addSystemAdmin.joinDate"
747 :max="new Date().toISOString().substr(0, 10)" 747 :max="new Date().toISOString().substr(0, 10)"
748 min="1950-01-01" 748 min="1950-01-01"
749 @input="menu1 = false" 749 @input="menu1 = false"
750 ></v-date-picker> 750 ></v-date-picker>
751 </v-menu> 751 </v-menu>
752 </v-flex> 752 </v-flex>
753 </v-layout> 753 </v-layout>
754 </v-flex> 754 </v-flex>
755 <v-flex xs12 sm6> 755 <v-flex xs12 sm6>
756 <v-layout> 756 <v-layout>
757 <v-flex xs4 class="pt-4 subheading"> 757 <v-flex xs4 class="pt-4 subheading">
758 <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>
759 <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>
760 </v-flex> 760 </v-flex>
761 <v-flex xs8 class="ml-3"> 761 <v-flex xs8 class="ml-3">
762 <v-text-field 762 <v-text-field
763 label="Select Image" 763 label="Select Image"
764 @click="pickFile" 764 @click="pickFile"
765 v-model="imageName" 765 v-model="imageName"
766 append-icon="attach_file" 766 append-icon="attach_file"
767 ></v-text-field> 767 ></v-text-field>
768 <input 768 <input
769 type="file" 769 type="file"
770 style="display:none" 770 style="display:none"
771 ref="image" 771 ref="image"
772 accept="image/*" 772 accept="image/*"
773 @change="onFilePicked" 773 @change="onFilePicked"
774 /> 774 />
775 </v-flex> 775 </v-flex>
776 </v-layout> 776 </v-layout>
777 </v-flex> 777 </v-flex>
778 </v-layout> 778 </v-layout>
779 <v-layout> 779 <v-layout>
780 <v-flex xs12 sm6> 780 <v-flex xs12 sm6>
781 <v-layout> 781 <v-layout>
782 <v-flex xs4 class="pt-4 subheading"> 782 <v-flex xs4 class="pt-4 subheading">
783 <label class="right">Username:</label> 783 <label class="right">Username:</label>
784 </v-flex> 784 </v-flex>
785 <v-flex xs8 class="ml-3"> 785 <v-flex xs8 class="ml-3">
786 <v-text-field 786 <v-text-field
787 v-model="addSystemAdmin.username" 787 v-model="addSystemAdmin.username"
788 placeholder="fill your Username" 788 placeholder="fill your Username"
789 name="state" 789 name="state"
790 :rules="userNameRules" 790 :rules="userNameRules"
791 required 791 required
792 ></v-text-field> 792 ></v-text-field>
793 </v-flex> 793 </v-flex>
794 </v-layout> 794 </v-layout>
795 </v-flex> 795 </v-flex>
796 <v-flex xs12 sm6> 796 <v-flex xs12 sm6>
797 <v-layout> 797 <v-layout>
798 <v-flex xs4 class="pt-4 subheading"> 798 <v-flex xs4 class="pt-4 subheading">
799 <label class="right">Password:</label> 799 <label class="right">Password:</label>
800 </v-flex> 800 </v-flex>
801 <v-flex xs8 class="ml-3"> 801 <v-flex xs8 class="ml-3">
802 <v-text-field 802 <v-text-field
803 v-model="addSystemAdmin.Password" 803 v-model="addSystemAdmin.Password"
804 placeholder="fill your Password" 804 placeholder="fill your Password"
805 :rules="password" 805 :rules="password"
806 required 806 required
807 ></v-text-field> 807 ></v-text-field>
808 </v-flex> 808 </v-flex>
809 </v-layout> 809 </v-layout>
810 </v-flex> 810 </v-flex>
811 </v-layout> 811 </v-layout>
812 <v-layout class="hidden-xs-only hidden-sm-only"> 812 <v-layout class="hidden-xs-only hidden-sm-only">
813 <v-flex xs12 sm6> 813 <v-flex xs12 sm6>
814 <v-layout> 814 <v-layout>
815 <v-flex xs4 md4 class="pt-4 subheading"> 815 <v-flex xs4 md4 class="pt-4 subheading">
816 <label class="right">Address:</label> 816 <label class="right">Address:</label>
817 </v-flex> 817 </v-flex>
818 <v-flex xs8 md8 class="ml-3"> 818 <v-flex xs8 md8 class="ml-3">
819 <v-text-field 819 <v-text-field
820 name="input-4-3" 820 name="input-4-3"
821 v-model="addSystemAdmin.address" 821 v-model="addSystemAdmin.address"
822 :rules="address" 822 :rules="address"
823 placeholder="fill Your Address" 823 placeholder="fill Your Address"
824 required 824 required
825 ></v-text-field> 825 ></v-text-field>
826 </v-flex> 826 </v-flex>
827 </v-layout> 827 </v-layout>
828 </v-flex> 828 </v-flex>
829 </v-layout> 829 </v-layout>
830 <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">
831 <v-flex xs12 sm12> 831 <v-flex xs12 sm12>
832 <v-layout> 832 <v-layout>
833 <v-flex xs12 sm12 class="pt-4 subheading text-xs-center"> 833 <v-flex xs12 sm12 class="pt-4 subheading text-xs-center">
834 <label class>Addres:</label> 834 <label class>Addres:</label>
835 </v-flex> 835 </v-flex>
836 </v-layout> 836 </v-layout>
837 <v-layout> 837 <v-layout>
838 <v-flex xs12 sm12> 838 <v-flex xs12 sm12>
839 <v-textarea 839 <v-textarea
840 name="input-4-3" 840 name="input-4-3"
841 v-model="addSystemAdmin.address" 841 v-model="addSystemAdmin.address"
842 :rules="address" 842 :rules="address"
843 placeholder="fill Your present Address" 843 placeholder="fill Your present Address"
844 required 844 required
845 ></v-textarea> 845 ></v-textarea>
846 </v-flex> 846 </v-flex>
847 </v-layout> 847 </v-layout>
848 </v-flex> 848 </v-flex>
849 <!-- <v-flex xs12 sm12> 849 <!-- <v-flex xs12 sm12>
850 <v-layout> 850 <v-layout>
851 <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">
852 <label>Permanent Address:</label> 852 <label>Permanent Address:</label>
853 </v-flex> 853 </v-flex>
854 </v-layout> 854 </v-layout>
855 <v-layout> 855 <v-layout>
856 <v-flex xs12 sm12> 856 <v-flex xs12 sm12>
857 <v-textarea 857 <v-textarea
858 name="input-4-3" 858 name="input-4-3"
859 v-model="addSystemAdmin.permanentAddress" 859 v-model="addSystemAdmin.permanentAddress"
860 :rules="permanentAddress" 860 :rules="permanentAddress"
861 placeholder="fill Your Permanent Address" 861 placeholder="fill Your Permanent Address"
862 required 862 required
863 ></v-textarea> 863 ></v-textarea>
864 </v-flex> 864 </v-flex>
865 </v-layout> 865 </v-layout>
866 </v-flex>--> 866 </v-flex>-->
867 </v-layout> 867 </v-layout>
868 <v-layout class="mx-2"> 868 <v-layout class="mx-2">
869 <v-flex xs12 sm12 offset-sm1> 869 <v-flex xs12 sm12 offset-sm1>
870 <v-layout> 870 <v-layout>
871 <v-flex xs6> 871 <v-flex xs6>
872 <v-btn @click="clear" round dark>clear</v-btn> 872 <v-btn @click="clear" round dark>clear</v-btn>
873 </v-flex> 873 </v-flex>
874 <v-flex xs6> 874 <v-flex xs6>
875 <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>
876 </v-flex> 876 </v-flex>
877 </v-layout> 877 </v-layout>
878 </v-flex> 878 </v-flex>
879 </v-layout> 879 </v-layout>
880 </v-container> 880 </v-container>
881 </v-form> 881 </v-form>
882 </v-card> 882 </v-card>
883 </v-flex> 883 </v-flex>
884 </v-container> 884 </v-container>
885 </v-tab-item> 885 </v-tab-item>
886 </v-tabs> 886 </v-tabs>
887 <div class="loader" v-if="showLoader"> 887 <div class="loader" v-if="showLoader">
888 <v-progress-circular indeterminate color="white"></v-progress-circular> 888 <v-progress-circular indeterminate color="white"></v-progress-circular>
889 </div> 889 </div>
890 </v-app> 890 </v-app>
891 </template> 891 </template>
892 892
893 <script> 893 <script>
894 import http from "@/Services/http.js"; 894 import http from "@/Services/http.js";
895 import moment from "moment"; 895 import moment from "moment";
896 896
897 export default { 897 export default {
898 data: () => ({ 898 data: () => ({
899 component: "report-generate", 899 component: "report-generate",
900 snackbar: false, 900 snackbar: false,
901 y: "top", 901 y: "top",
902 x: "right", 902 x: "right",
903 mode: "", 903 mode: "",
904 timeout: 3000, 904 timeout: 3000,
905 text: "", 905 text: "",
906 showLoader: false, 906 showLoader: false,
907 loading: false, 907 loading: false,
908 date: null, 908 date: null,
909 search: "", 909 search: "",
910 menu: false, 910 menu: false,
911 menu1: false, 911 menu1: false,
912 menu2: false, 912 menu2: false,
913 menu3: false, 913 menu3: false,
914 dialog: false, 914 dialog: false,
915 dialog1: false, 915 dialog1: false,
916 valid: true, 916 valid: true,
917 isActive: true, 917 isActive: true,
918 newActive: false, 918 newActive: false,
919 pagination: { 919 pagination: {
920 rowsPerPage: 15, 920 rowsPerPage: 15,
921 }, 921 },
922 imageData: {}, 922 imageData: {},
923 imageName: "", 923 imageName: "",
924 imageUrl: "", 924 imageUrl: "",
925 imageFile: "", 925 imageFile: "",
926 nameRules: [(v) => !!v || " Full Name is required"], 926 nameRules: [(v) => !!v || " Full Name is required"],
927 dateRules: [(v) => !!v || " DOB is required"], 927 dateRules: [(v) => !!v || " DOB is required"],
928 cityRules: [(v) => !!v || " City Name is required"], 928 cityRules: [(v) => !!v || " City Name is required"],
929 password: [(v) => !!v || " Password is required"], 929 password: [(v) => !!v || " Password is required"],
930 religion: [(v) => !!v || "Religion Name is required"], 930 religion: [(v) => !!v || "Religion Name is required"],
931 permanentAddress: [(v) => !!v || " Permanent Address is required"], 931 permanentAddress: [(v) => !!v || " Permanent Address is required"],
932 address: [(v) => !!v || "Address is required"], 932 address: [(v) => !!v || "Address is required"],
933 mobileNoRules: [(v) => !!v || "Mobile Number is required"], 933 mobileNoRules: [(v) => !!v || "Mobile Number is required"],
934 userNameRules: [(v) => !!v || "Username Name is required"], 934 userNameRules: [(v) => !!v || "Username Name is required"],
935 joinDateRules: [(v) => !!v || " Join Date is required"], 935 joinDateRules: [(v) => !!v || " Join Date is required"],
936 errorMessages: "", 936 errorMessages: "",
937 emailRules: [ 937 emailRules: [
938 (v) => !!v || "E-mail is required", 938 (v) => !!v || "E-mail is required",
939 (v) => 939 (v) =>
940 /^\w+([.-]?\w+)*@\w+([.-]?\w+)*(\.\w{2,3})+$/.test(v) || 940 /^\w+([.-]?\w+)*@\w+([.-]?\w+)*(\.\w{2,3})+$/.test(v) ||
941 "E-mail must be valid", 941 "E-mail must be valid",
942 ], 942 ],
943 countries: [], 943 countries: [],
944 headers: [ 944 headers: [
945 { 945 {
946 text: "No", 946 text: "No",
947 align: "center", 947 align: "center",
948 sortable: false, 948 sortable: false,
949 value: "No", 949 value: "No",
950 }, 950 },
951 { 951 {
952 text: "Profile Pic", 952 text: "Profile Pic",
953 value: "profilePicUrl", 953 value: "profilePicUrl",
954 sortable: false, 954 sortable: false,
955 align: "center", 955 align: "center",
956 }, 956 },
957 { text: "Name", value: "name", sortable: false, align: "center" }, 957 { text: "Name", value: "name", sortable: false, align: "center" },
958 { text: "Email", value: "email", sortable: false, align: "center" }, 958 { text: "Email", value: "email", sortable: false, align: "center" },
959 { text: "Role", value: "role", sortable: false, align: "center" }, 959 { text: "Role", value: "role", sortable: false, align: "center" },
960 { 960 {
961 text: "Status", 961 text: "Status",
962 value: "status", 962 value: "status",
963 sortable: false, 963 sortable: false,
964 align: "center", 964 align: "center",
965 }, 965 },
966 { text: "Action", value: "", sortable: false, align: "center" }, 966 { text: "Action", value: "", sortable: false, align: "center" },
967 ], 967 ],
968 gender: ["Male", "Female"], 968 gender: ["Male", "Female"],
969 desserts: [], 969 desserts: [],
970 editedIndex: -1, 970 editedIndex: -1,
971 upload: "", 971 upload: "",
972 editedItem: {}, 972 editedItem: {},
973 addSystemAdmin: {}, 973 addSystemAdmin: {},
974 }), 974 }),
975 watch: { 975 watch: {
976 menu(val) { 976 menu(val) {
977 val && this.$nextTick(() => (this.$refs.picker.activePicker = "YEAR")); 977 val && this.$nextTick(() => (this.$refs.picker.activePicker = "YEAR"));
978 }, 978 },
979 menu1(val) { 979 menu1(val) {
980 val && this.$nextTick(() => (this.$refs.picker.activePicker = "YEAR")); 980 val && this.$nextTick(() => (this.$refs.picker.activePicker = "YEAR"));
981 }, 981 },
982 }, 982 },
983 methods: { 983 methods: {
984 save(date) { 984 save(date) {
985 this.$refs.menu.save(date); 985 this.$refs.menu.save(date);
986 }, 986 },
987 save(date) { 987 save(date) {
988 this.$refs.menu1.save(date); 988 this.$refs.menu1.save(date);
989 }, 989 },
990 pickFile() { 990 pickFile() {
991 this.$refs.image.click(); 991 this.$refs.image.click();
992 }, 992 },
993 onFilePicked(e) { 993 onFilePicked(e) {
994 const files = e.target.files; 994 const files = e.target.files;
995 this.upload = e.target.files[0]; 995 this.upload = e.target.files[0];
996 if (files[0] !== undefined) { 996 if (files[0] !== undefined) {
997 this.imageName = files[0].name; 997 this.imageName = files[0].name;
998 if (this.imageName.lastIndexOf(".") <= 0) { 998 if (this.imageName.lastIndexOf(".") <= 0) {
999 return; 999 return;
1000 } 1000 }
1001 const fr = new FileReader(); 1001 const fr = new FileReader();
1002 fr.readAsDataURL(files[0]); 1002 fr.readAsDataURL(files[0]);
1003 fr.addEventListener("load", () => { 1003 fr.addEventListener("load", () => {
1004 this.imageUrl = fr.result; 1004 this.imageUrl = fr.result;
1005 this.imageFile = files[0]; // this is an image file that can be sent to server... 1005 this.imageFile = files[0]; // this is an image file that can be sent to server...
1006 }); 1006 });
1007 } else { 1007 } else {
1008 this.imageName = ""; 1008 this.imageName = "";
1009 this.imageFile = ""; 1009 this.imageFile = "";
1010 this.imageUrl = ""; 1010 this.imageUrl = "";
1011 } 1011 }
1012 }, 1012 },
1013 dates: function (date) { 1013 dates: function (date) {
1014 return moment(date).format("MMMM DD, YYYY"); 1014 return moment(date).format("MMMM DD, YYYY");
1015 }, 1015 },
1016 getSystemAdminList() { 1016 getSystemAdminList() {
1017 this.showLoader = true; 1017 this.showLoader = true;
1018 var token = this.$store.state.token; 1018 var token = this.$store.state.token;
1019 http() 1019 http()
1020 .get("/getTeachersList", { 1020 .get("/getTeachersList", {
1021 headers: { Authorization: "Bearer " + token }, 1021 headers: { Authorization: "Bearer " + token },
1022 }) 1022 })
1023 .then((response) => { 1023 .then((response) => {
1024 this.desserts = response.data.data; 1024 this.desserts = response.data.data;
1025 this.showLoader = false; 1025 this.showLoader = false;
1026 }) 1026 })
1027 .catch((error) => { 1027 .catch((error) => {
1028 this.showLoader = false; 1028 this.showLoader = false;
1029 if (error.response.status === 401) { 1029 if (error.response.status === 401) {
1030 this.$router.replace({ path: "/" }); 1030 this.$router.replace({ path: "/" });
1031 this.$store.dispatch("setToken", null); 1031 this.$store.dispatch("setToken", null);
1032 this.$store.dispatch("Id", null); 1032 this.$store.dispatch("Id", null);
1033 } 1033 }
1034 }); 1034 });
1035 }, 1035 },
1036 editItem(item) { 1036 editItem(item) {
1037 this.editedIndex = this.desserts.indexOf(item); 1037 this.editedIndex = this.desserts.indexOf(item);
1038 this.editedItem = Object.assign({}, item); 1038 this.editedItem = Object.assign({}, item);
1039 this.editedItem.dob = 1039 this.editedItem.dob =
1040 this.editedItem.dob != undefined 1040 this.editedItem.dob != undefined
1041 ? (this.editedItem.dob = this.editedItem.dob.substring(0, 10)) 1041 ? (this.editedItem.dob = this.editedItem.dob.substring(0, 10))
1042 : (this.editedItem.dob = ""); 1042 : (this.editedItem.dob = "");
1043 this.editedItem.joinDate = 1043 this.editedItem.joinDate =
1044 this.editedItem.joinDate != undefined 1044 this.editedItem.joinDate != undefined
1045 ? (this.editedItem.joinDate = this.editedItem.joinDate.substring( 1045 ? (this.editedItem.joinDate = this.editedItem.joinDate.substring(
1046 0, 1046 0,
1047 10 1047 10
1048 )) 1048 ))
1049 : (this.editedItem.joinDate = ""); 1049 : (this.editedItem.joinDate = "");
1050 1050
1051 this.dialog = true; 1051 this.dialog = true;
1052 }, 1052 },
1053 profile(item) { 1053 profile(item) {
1054 this.editedIndex = this.desserts.indexOf(item); 1054 this.editedIndex = this.desserts.indexOf(item);
1055 this.editedItem = Object.assign({}, item); 1055 this.editedItem = Object.assign({}, item);
1056 this.dialog1 = true; 1056 this.dialog1 = true;
1057 }, 1057 },
1058 deleteItem(item) { 1058 deleteItem(item) {
1059 let deleteTeachers = { 1059 let deleteTeachers = {
1060 teacherId: item._id, 1060 teacherId: item._id,
1061 }; 1061 };
1062 http() 1062 http()
1063 .delete( 1063 .delete(
1064 "/deleteTeacher", 1064 "/deleteTeacher",
1065 confirm("Are you sure you want to delete this?") && { 1065 confirm("Are you sure you want to delete this?") && {
1066 params: deleteTeachers, 1066 params: deleteTeachers,
1067 } 1067 }
1068 ) 1068 )
1069 .then((response) => { 1069 .then((response) => {
1070 if ((this.snackbar = true)) { 1070 if ((this.snackbar = true)) {
1071 this.text = "Successfully delete Existing Teacher"; 1071 this.text = "Successfully delete Existing Teacher";
1072 } 1072 }
1073 this.getSystemAdminList(); 1073 this.getSystemAdminList();
1074 }) 1074 })
1075 .catch((error) => { 1075 .catch((error) => {
1076 // console.log(error); 1076 // console.log(error);
1077 this.snackbar = true;
1078 this.color = "error";
1079 this.text = error.response.data.message;
1077 this.snackbar = true; 1080 });
1078 this.color = "error"; 1081 },
1079 this.text = error.response.data.message; 1082 activeTab(type) {
1080 }); 1083 switch (type) {
1081 }, 1084 case "existing":
1082 activeTab(type) { 1085 this.newActive = false;
1083 switch (type) { 1086 this.isActive = true;
1084 case "existing": 1087 break;
1085 this.newActive = false; 1088
1086 this.isActive = true; 1089 default:
1087 break; 1090 this.newActive = true;
1088 1091 this.isActive = false;
1089 default: 1092 break;
1090 this.newActive = true; 1093 }
1091 this.isActive = false; 1094 },
1092 break; 1095 close() {
1093 } 1096 this.dialog = false;
1094 }, 1097 setTimeout(() => {
1095 close() { 1098 this.editedItem = Object.assign({}, this.defaultItem);
1096 this.dialog = false; 1099 this.editedIndex = -1;
1097 setTimeout(() => { 1100 }, 300);
1098 this.editedItem = Object.assign({}, this.defaultItem); 1101 },
1099 this.editedIndex = -1; 1102 close1() {
1100 }, 300); 1103 this.dialog1 = false;
1101 }, 1104 },
1102 close1() { 1105 submit() {
1103 this.dialog1 = false; 1106 if (this.$refs.form.validate()) {
1104 }, 1107 let addTeacher = {
1105 submit() { 1108 // name: this.addTeachers.name,
1106 if (this.$refs.form.validate()) { 1109 // email: this.addTeachers.email,
1107 let addTeacher = { 1110 // role: this.addTeachers.role,
1108 // name: this.addTeachers.name, 1111 // dob: this.addTeachers.date,
1109 // email: this.addTeachers.email, 1112 // city: this.addTeachers.city,
1110 // role: this.addTeachers.role, 1113 // pincode: this.addTeachers.pincode,
1111 // dob: this.addTeachers.date, 1114 // country: this.addTeachers.country,
1112 // city: this.addTeachers.city, 1115 // permanentAddress: this.addTeachers.permanentAddress,
1113 // pincode: this.addTeachers.pincode, 1116 // presentAddress: this.addTeachers.presentAddress,
1114 // country: this.addTeachers.country, 1117 // mobileNo: this.addTeachers.mobileNo,
1115 // permanentAddress: this.addTeachers.permanentAddress, 1118 // state: this.addTeachers.state,
1116 // presentAddress: this.addTeachers.presentAddress, 1119 // joinDate: this.addTeachers.joinDate
1117 // mobileNo: this.addTeachers.mobileNo, 1120 };
1118 // state: this.addTeachers.state, 1121 if (this.imageUrl) {
1119 // joinDate: this.addTeachers.joinDate 1122 var str = this.imageUrl;
1120 }; 1123 const [baseUrl, imageUrl] = str.split(/,/);
1121 if (this.imageUrl) { 1124 addTeacher.upload = imageUrl;
1122 var str = this.imageUrl; 1125 }
1123 const [baseUrl, imageUrl] = str.split(/,/); 1126 this.loading = true;
1124 addTeacher.upload = imageUrl; 1127 http()
1125 } 1128 .post("/createTeacher", addTeacher)
1126 this.loading = true; 1129 .then((response) => {
1127 http() 1130 this.imageUrl = "";
1128 .post("/createTeacher", addTeacher) 1131 this.getTeacherList();
1129 .then((response) => { 1132 this.snackbar = true;
1130 this.imageUrl = ""; 1133 this.text = "New Teacher added successfully";
1131 this.getTeacherList(); 1134 this.clear();
1132 this.snackbar = true; 1135 this.loading = false;
1133 this.text = "New Teacher added successfully"; 1136 })
1134 this.clear(); 1137 .catch((error) => {
1135 this.loading = false; 1138 // console.log(error);
1139 this.snackbar = true;
1140 this.color = "error";
1141 this.text = error.response.data.message;
1136 }) 1142 if ((this.snackbar = true)) {
1137 .catch((error) => { 1143 this.text = error.response.data.message;
1138 // console.log(error); 1144 }
1139 this.snackbar = true; 1145 this.loading = false;
1140 this.color = "error"; 1146 });
1141 this.text = error.response.data.message; 1147 }
1142 if ((this.snackbar = true)) { 1148 },
1143 this.text = error.response.data.message; 1149 clear() {
1144 } 1150 this.$refs.form.reset();
1145 this.loading = false; 1151 this.imageUrl = "";
1146 }); 1152 },
1147 } 1153 save() {
1148 }, 1154 this.loading = true;
1149 clear() { 1155 let editTeacher = {};
1150 this.$refs.form.reset(); 1156 if (this.imageUrl) {
1151 this.imageUrl = ""; 1157 var str = this.imageUrl;
1152 }, 1158 const [baseUrl, imageUrl] = str.split(/,/);
1153 save() { 1159 editTeacher.upload = imageUrl;
1154 this.loading = true; 1160 }
1155 let editTeacher = {}; 1161 http()
1156 if (this.imageUrl) { 1162 .put("/updateTeacher", editTeacher)
1157 var str = this.imageUrl; 1163 .then((response) => {
1158 const [baseUrl, imageUrl] = str.split(/,/); 1164 // console.log("editTeacher", editTeacher);
1159 editTeacher.upload = imageUrl; 1165 this.snackbar = true;
1160 } 1166 this.text = "Successfully Edit Existing Teacher";
1161 http() 1167 this.loading = false;
1162 .put("/updateTeacher", editTeacher) 1168 this.getTeacherList();
1163 .then((response) => { 1169 this.close();
1164 // console.log("editTeacher", editTeacher); 1170 })
1165 this.snackbar = true; 1171 .catch((error) => {
1166 this.text = "Successfully Edit Existing Teacher"; 1172 // console.log(error);
1167 this.loading = false; 1173 this.loading = false;
1174 this.snackbar = true;
1175 this.color = "error";
1176 this.text = error.response.data.message;
1168 this.getTeacherList(); 1177 });
1169 this.close(); 1178 },
1170 }) 1179 },
1171 .catch((error) => { 1180 mounted() {
1172 // console.log(error); 1181 // this.getSystemAdminList();
1173 this.loading = false; 1182 },
1174 this.snackbar = true; 1183 created() {
1175 this.color = "error"; 1184 this.$root.$on("app:search", (search) => {
1176 this.text = error.response.data.message; 1185 this.search = search;
1177 }); 1186 });
1178 }, 1187 },
1179 }, 1188 beforeDestroy() {
1180 mounted() { 1189 // dont forget to remove the listener
1181 // this.getSystemAdminList(); 1190 this.$root.$off("app:search");
1182 }, 1191 },
1183 created() { 1192 };
1184 this.$root.$on("app:search", (search) => { 1193 </script>
1185 this.search = search; 1194 <style scoped>
1186 }); 1195 .active {
1187 }, 1196 background-color: gray;
1188 beforeDestroy() { 1197 color: white !important;
1189 // dont forget to remove the listener 1198 }
1190 this.$root.$off("app:search"); 1199 .activebtn {
1191 }, 1200 color: black !important;
src/pages/Annoucement/annoucement.vue
Diff comments   View file @8b7976c
1 <template> 1 <template>
2 <v-container fluid class="body-color"> 2 <v-container fluid class="body-color">
3 <!-- ****** EDITS COURSES DETAILS ****** --> 3 <!-- ****** EDITS COURSES DETAILS ****** -->
4 <v-dialog v-model="editStudentDialog" max-width="600px" scrollable persistent> 4 <v-dialog v-model="editStudentDialog" max-width="600px" scrollable persistent>
5 <v-card flat class="card-style pa-2" dark> 5 <v-card flat class="card-style pa-2" dark>
6 <v-layout> 6 <v-layout>
7 <v-flex xs12> 7 <v-flex xs12>
8 <label class="title text-xs-center">Edit Annoucement</label> 8 <label class="title text-xs-center">Edit Annoucement</label>
9 <v-icon size="24" class="right" @click="editStudentDialog = false">cancel</v-icon> 9 <v-icon size="24" class="right" @click="editStudentDialog = false">cancel</v-icon>
10 </v-flex> 10 </v-flex>
11 </v-layout> 11 </v-layout>
12 <v-card-text> 12 <v-card-text>
13 <v-form ref="form"> 13 <v-form ref="form">
14 <v-container fluid> 14 <v-container fluid>
15 <v-layout> 15 <v-layout>
16 <v-flex xs12 class="text-xs-center text-sm-center text-md-center text-lg-center"> 16 <v-flex xs12 class="text-xs-center text-sm-center text-md-center text-lg-center">
17 <v-avatar size="100px" v-if="!editedItem.attachementUrl && !editImageUrl"> 17 <v-avatar size="100px" v-if="!editedItem.attachementUrl && !editImageUrl">
18 <img src="/static/icon/user.png" /> 18 <img src="/static/icon/user.png" />
19 </v-avatar> 19 </v-avatar>
20 <img 20 <img
21 :src="editedItem.attachementUrl" 21 :src="editedItem.attachementUrl"
22 v-else-if="editedItem.attachementUrl && !editImageUrl" 22 v-else-if="editedItem.attachementUrl && !editImageUrl"
23 height="150" 23 height="150"
24 style="border-radius:50%; width:150px" 24 style="border-radius:50%; width:150px"
25 /> 25 />
26 <img 26 <img
27 v-if="editImageUrl" 27 v-if="editImageUrl"
28 :src="editImageUrl" 28 :src="editImageUrl"
29 style="border-radius:50%; width:150px;height:150px" 29 style="border-radius:50%; width:150px;height:150px"
30 /> 30 />
31 <input 31 <input
32 type="file" 32 type="file"
33 style="display: none" 33 style="display: none"
34 ref="editDataImage" 34 ref="editDataImage"
35 accept="image/*" 35 accept="image/*"
36 @change="onEditFilePicked" 36 @change="onEditFilePicked"
37 /> 37 />
38 </v-flex> 38 </v-flex>
39 </v-layout> 39 </v-layout>
40 <v-layout wrap> 40 <v-layout wrap>
41 <v-flex xs12 sm12> 41 <v-flex xs12 sm12>
42 <v-layout> 42 <v-layout>
43 <v-flex xs4 sm5 class="pt-4 subheading"> 43 <v-flex xs4 sm5 class="pt-4 subheading">
44 <label class="right hidden-xs-only hidden-sm-only">Select Class:</label> 44 <label class="right hidden-xs-only hidden-sm-only">Select Class:</label>
45 <label class="right hidden-lg-only hidden-md-only hidden-xl-only">Class:</label> 45 <label class="right hidden-lg-only hidden-md-only hidden-xl-only">Class:</label>
46 </v-flex> 46 </v-flex>
47 <v-flex xs8 sm7 class="ml-3"> 47 <v-flex xs8 sm7 class="ml-3">
48 <v-select 48 <v-select
49 :items="addclass" 49 :items="addclass"
50 label="Select Class" 50 label="Select Class"
51 v-model="editedItem.select" 51 v-model="editedItem.select"
52 item-text="classNum" 52 item-text="classNum"
53 item-value="_id" 53 item-value="_id"
54 name="Select Class" 54 name="Select Class"
55 required 55 required
56 ></v-select> 56 ></v-select>
57 </v-flex> 57 </v-flex>
58 </v-layout> 58 </v-layout>
59 <v-layout> 59 <v-layout>
60 <v-flex xs4 sm5 class="pt-4 subheading"> 60 <v-flex xs4 sm5 class="pt-4 subheading">
61 <label class="right hidden-xs-only hidden-sm-only">Course Name:</label> 61 <label class="right hidden-xs-only hidden-sm-only">Course Name:</label>
62 <label class="right hidden-lg-only hidden-md-only hidden-xl-only">Course:</label> 62 <label class="right hidden-lg-only hidden-md-only hidden-xl-only">Course:</label>
63 </v-flex> 63 </v-flex>
64 <v-flex xs8 sm7 class="ml-3"> 64 <v-flex xs8 sm7 class="ml-3">
65 <v-select 65 <v-select
66 :items="courseData" 66 :items="courseData"
67 item-text="courseName" 67 item-text="courseName"
68 item-value="_id" 68 item-value="_id"
69 v-model="editedItem.courseName" 69 v-model="editedItem.courseName"
70 placeholder="fill your Course name" 70 placeholder="fill your Course name"
71 type="text" 71 type="text"
72 :rules="courseRules" 72 :rules="courseRules"
73 required 73 required
74 ></v-select> 74 ></v-select>
75 </v-flex> 75 </v-flex>
76 </v-layout> 76 </v-layout>
77 <v-layout> 77 <v-layout>
78 <v-flex xs4 sm5 class="pt-4 subheading"> 78 <v-flex xs4 sm5 class="pt-4 subheading">
79 <label class="right hidden-xs-only hidden-sm-only">Discussion Type:</label> 79 <label class="right hidden-xs-only hidden-sm-only">Discussion Type:</label>
80 <label 80 <label
81 class="right hidden-lg-only hidden-md-only hidden-xl-only" 81 class="right hidden-lg-only hidden-md-only hidden-xl-only"
82 >DiscussionType:</label> 82 >DiscussionType:</label>
83 </v-flex> 83 </v-flex>
84 <v-flex xs8 sm7 class="ml-3"> 84 <v-flex xs8 sm7 class="ml-3">
85 <v-text-field 85 <v-text-field
86 v-model="editedItem.discussionType" 86 v-model="editedItem.discussionType"
87 placeholder="fill your Course Name" 87 placeholder="fill your Course Name"
88 type="text" 88 type="text"
89 required 89 required
90 ></v-text-field> 90 ></v-text-field>
91 </v-flex> 91 </v-flex>
92 </v-layout> 92 </v-layout>
93 <v-layout> 93 <v-layout>
94 <v-flex xs4 sm5 class="pt-4 subheading"> 94 <v-flex xs4 sm5 class="pt-4 subheading">
95 <label class="right hidden-xs-only hidden-sm-only">Upload Image:</label> 95 <label class="right hidden-xs-only hidden-sm-only">Upload Image:</label>
96 <label class="right hidden-lg-only hidden-md-only hidden-xl-only">Upload:</label> 96 <label class="right hidden-lg-only hidden-md-only hidden-xl-only">Upload:</label>
97 </v-flex> 97 </v-flex>
98 <v-flex xs8 sm7 class="ml-3"> 98 <v-flex xs8 sm7 class="ml-3">
99 <v-text-field 99 <v-text-field
100 label="Select Image" 100 label="Select Image"
101 @click="pickEditFile" 101 @click="pickEditFile"
102 v-model="editImageName" 102 v-model="editImageName"
103 append-icon="attach_file" 103 append-icon="attach_file"
104 ></v-text-field> 104 ></v-text-field>
105 </v-flex> 105 </v-flex>
106 </v-layout> 106 </v-layout>
107 </v-flex> 107 </v-flex>
108 </v-layout> 108 </v-layout>
109 <v-layout> 109 <v-layout>
110 <v-flex xs12 sm12 class="px-0 mx-0"> 110 <v-flex xs12 sm12 class="px-0 mx-0">
111 <v-layout class="right"> 111 <v-layout class="right">
112 <v-btn @click="save" round dark :loading="editLoading" class="add-button">Save</v-btn> 112 <v-btn @click="save" round dark :loading="editLoading" class="add-button">Save</v-btn>
113 </v-layout> 113 </v-layout>
114 </v-flex> 114 </v-flex>
115 </v-layout> 115 </v-layout>
116 </v-container> 116 </v-container>
117 </v-form> 117 </v-form>
118 </v-card-text> 118 </v-card-text>
119 </v-card> 119 </v-card>
120 </v-dialog> 120 </v-dialog>
121 121
122 <!-- ****** PROFILE VIEW STUDENTS DEATILS ****** --> 122 <!-- ****** PROFILE VIEW STUDENTS DEATILS ****** -->
123 123
124 <v-dialog v-model="profileStudentDialog" max-width="600px" scrollable persistent> 124 <v-dialog v-model="profileStudentDialog" max-width="600px" scrollable persistent>
125 <v-card flat class="card-style pa-3" dark> 125 <v-card flat class="card-style pa-3" dark>
126 <v-layout> 126 <v-layout>
127 <v-flex xs12> 127 <v-flex xs12>
128 <label class="title text-xs-center">View Annoucement</label> 128 <label class="title text-xs-center">View Annoucement</label>
129 <v-icon size="24" class="right" @click="profileStudentDialog = false">cancel</v-icon> 129 <v-icon size="24" class="right" @click="profileStudentDialog = false">cancel</v-icon>
130 </v-flex> 130 </v-flex>
131 </v-layout> 131 </v-layout>
132 <v-card-text> 132 <v-card-text>
133 <v-flex align-center justify-center layout text-xs-center class="mt-3"> 133 <v-flex align-center justify-center layout text-xs-center class="mt-3">
134 <v-avatar size="100px"> 134 <v-avatar size="100px">
135 <img src="/static/icon/user.png" v-if="!editedItem.attachementUrl" /> 135 <img src="/static/icon/user.png" v-if="!editedItem.attachementUrl" />
136 <img :src="editedItem.attachementUrl" v-else-if="editedItem.attachementUrl" /> 136 <img :src="editedItem.attachementUrl" v-else-if="editedItem.attachementUrl" />
137 </v-avatar> 137 </v-avatar>
138 </v-flex> 138 </v-flex>
139 <v-container grid-list-md> 139 <v-container grid-list-md>
140 <v-layout wrap> 140 <v-layout wrap>
141 <v-flex xs12> 141 <v-flex xs12>
142 <v-layout> 142 <v-layout>
143 <v-flex xs6 sm6> 143 <v-flex xs6 sm6>
144 <h5 class="right my-1"> 144 <h5 class="right my-1">
145 <b>Discussion Type :</b> 145 <b>Discussion Type :</b>
146 </h5> 146 </h5>
147 </v-flex> 147 </v-flex>
148 <v-flex sm6 xs6> 148 <v-flex sm6 xs6>
149 <h5 class="my-1 left">{{ editedItem.discussionType }}</h5> 149 <h5 class="my-1 left">{{ editedItem.discussionType }}</h5>
150 </v-flex> 150 </v-flex>
151 </v-layout> 151 </v-layout>
152 </v-flex> 152 </v-flex>
153 </v-layout> 153 </v-layout>
154 </v-container> 154 </v-container>
155 </v-card-text> 155 </v-card-text>
156 </v-card> 156 </v-card>
157 </v-dialog> 157 </v-dialog>
158 158
159 <!-- ****** Annoucement TABLE ****** --> 159 <!-- ****** Annoucement TABLE ****** -->
160 <v-toolbar color="transparent" flat> 160 <v-toolbar color="transparent" flat>
161 <v-btn 161 <v-btn
162 fab 162 fab
163 dark 163 dark
164 class="open-dialog-button hidden-xl-only hidden-md-only hidden-lg-only" 164 class="open-dialog-button hidden-xl-only hidden-md-only hidden-lg-only"
165 small 165 small
166 @click="addAnnoucementDialog = true" 166 @click="addAnnoucementDialog = true"
167 > 167 >
168 <v-icon dark>add</v-icon> 168 <v-icon dark>add</v-icon>
169 </v-btn> 169 </v-btn>
170 <v-btn 170 <v-btn
171 round 171 round
172 class="open-dialog-button hidden-sm-only hidden-xs-only" 172 class="open-dialog-button hidden-sm-only hidden-xs-only"
173 dark 173 dark
174 @click="addAnnoucementDialog = true" 174 @click="addAnnoucementDialog = true"
175 > 175 >
176 <v-icon class="white--text pr-1" size="20">add</v-icon>Add Annoucement 176 <v-icon class="white--text pr-1" size="20">add</v-icon>Add Annoucement
177 </v-btn> 177 </v-btn>
178 <v-card-actions class="hidden-xs-only hidden-sm-only"> 178 <v-card-actions class="hidden-xs-only hidden-sm-only">
179 <v-flex md13 lg12> 179 <v-flex md13 lg12>
180 <v-layout> 180 <v-layout>
181 <v-flex lg6 md12> 181 <v-flex lg6 md12>
182 <v-layout> 182 <v-layout>
183 <v-select 183 <v-select
184 :items="addclass" 184 :items="addclass"
185 label="Select Class" 185 label="Select Class"
186 v-model="selectAnnoucement.classId" 186 v-model="selectAnnoucement.classId"
187 item-text="classNum" 187 item-text="classNum"
188 item-value="_id" 188 item-value="_id"
189 name="Select Class" 189 name="Select Class"
190 :rules="classRules" 190 :rules="classRules"
191 required 191 required
192 class="ml-2" 192 class="ml-2"
193 @change="getCourses(selectAnnoucement.classId)" 193 @change="getCourses(selectAnnoucement.classId)"
194 ></v-select> 194 ></v-select>
195 <v-select 195 <v-select
196 :items="courseData" 196 :items="courseData"
197 label="Select Course" 197 label="Select Course"
198 v-model="selectAnnoucement.courseId" 198 v-model="selectAnnoucement.courseId"
199 item-text="courseName" 199 item-text="courseName"
200 item-value="_id" 200 item-value="_id"
201 :rules="courseRules" 201 :rules="courseRules"
202 required 202 required
203 class="ml-4" 203 class="ml-4"
204 ></v-select> 204 ></v-select>
205 </v-layout> 205 </v-layout>
206 </v-flex> 206 </v-flex>
207 </v-layout> 207 </v-layout>
208 </v-flex> 208 </v-flex>
209 </v-card-actions> 209 </v-card-actions>
210 <v-spacer></v-spacer> 210 <v-spacer></v-spacer>
211 <v-btn 211 <v-btn
212 @click="getAnnoucementes()" 212 @click="getAnnoucementes()"
213 round 213 round
214 dark 214 dark
215 :loading="loading" 215 :loading="loading"
216 class="open-dialog-button hidden-xs-only hidden-sm-only" 216 class="open-dialog-button hidden-xs-only hidden-sm-only"
217 >Find</v-btn> 217 >Find</v-btn>
218 <v-card-title class="body-1" v-show="show"> 218 <v-card-title class="body-1" v-show="show">
219 <v-btn icon large flat @click="displaySearch"> 219 <v-btn icon large flat @click="displaySearch">
220 <v-avatar size="27"> 220 <v-avatar size="27">
221 <img src="/static/icon/search.png" alt="icon" /> 221 <img src="/static/icon/search.png" alt="icon" />
222 </v-avatar> 222 </v-avatar>
223 </v-btn> 223 </v-btn>
224 </v-card-title> 224 </v-card-title>
225 <v-flex xs8 sm7 lg2 md3 v-if="showSearch"> 225 <v-flex xs8 sm7 lg2 md3 v-if="showSearch">
226 <v-layout> 226 <v-layout>
227 <v-text-field 227 <v-text-field
228 autofocus 228 autofocus
229 v-model="search" 229 v-model="search"
230 label="Search" 230 label="Search"
231 prepend-inner-icon="search" 231 prepend-inner-icon="search"
232 color="primary" 232 color="primary"
233 ></v-text-field> 233 ></v-text-field>
234 <v-icon @click="closeSearch" color="error">close</v-icon> 234 <v-icon @click="closeSearch" color="error">close</v-icon>
235 </v-layout> 235 </v-layout>
236 </v-flex> 236 </v-flex>
237 </v-toolbar> 237 </v-toolbar>
238 <v-card flat class="elevation-0 transparent"> 238 <v-card flat class="elevation-0 transparent">
239 <v-flex class="hidden-xl-only hidden-lg-only hidden-md-only"> 239 <v-flex class="hidden-xl-only hidden-lg-only hidden-md-only">
240 <v-layout> 240 <v-layout>
241 <v-flex xs12> 241 <v-flex xs12>
242 <v-select 242 <v-select
243 :items="addclass" 243 :items="addclass"
244 label="Select Class" 244 label="Select Class"
245 v-model="selectAnnoucement.select" 245 v-model="selectAnnoucement.select"
246 item-text="classNum" 246 item-text="classNum"
247 item-value="_id" 247 item-value="_id"
248 name="Select Class" 248 name="Select Class"
249 :rules="classRules" 249 :rules="classRules"
250 class="px-2" 250 class="px-2"
251 ></v-select> 251 ></v-select>
252 </v-flex> 252 </v-flex>
253 </v-layout> 253 </v-layout>
254 <v-layout> 254 <v-layout>
255 <v-flex xs5 class="mx-auto mb-2"> 255 <v-flex xs5 class="mx-auto mb-2">
256 <v-btn 256 <v-btn
257 @click="getAnnoucementes()" 257 @click="getAnnoucementes()"
258 block 258 block
259 round 259 round
260 dark 260 dark
261 :loading="loading" 261 :loading="loading"
262 class="add-button" 262 class="add-button"
263 >Find</v-btn> 263 >Find</v-btn>
264 </v-flex> 264 </v-flex>
265 </v-layout> 265 </v-layout>
266 </v-flex> 266 </v-flex>
267 </v-card> 267 </v-card>
268 <v-data-table 268 <v-data-table
269 :headers="headers" 269 :headers="headers"
270 :items="annoucementData" 270 :items="annoucementData"
271 :pagination.sync="pagination" 271 :pagination.sync="pagination"
272 :search="search" 272 :search="search"
273 > 273 >
274 <template slot="items" slot-scope="props"> 274 <template slot="items" slot-scope="props">
275 <tr class="tr row-click" @click="rowAnnoucement(props.item._id)"> 275 <tr class="tr row-click" @click="rowAnnoucement(props.item._id)">
276 <td class="text-xs-center td td-row"> 276 <td class="text-xs-center td td-row">
277 <v-avatar size="40"> 277 <v-avatar size="40">
278 <img :src="props.item.attachementUrl" v-if="props.item.attachementUrl" /> 278 <img :src="props.item.attachementUrl" v-if="props.item.attachementUrl" />
279 <img src="/static/icon/user.png" v-else-if="!props.item.attachementUrl" /> 279 <img src="/static/icon/user.png" v-else-if="!props.item.attachementUrl" />
280 </v-avatar> 280 </v-avatar>
281 </td> 281 </td>
282 <td class="text-xs-center td td-row">{{ props.item.discussionType}}</td> 282 <td class="text-xs-center td td-row">{{ props.item.discussionType}}</td>
283 <td class="text-xs-center td td-row"> 283 <td class="text-xs-center td td-row">
284 <span> 284 <span>
285 <v-tooltip top> 285 <v-tooltip top>
286 <img 286 <img
287 slot="activator" 287 slot="activator"
288 style="cursor:pointer; width:25px; height:25px; " 288 style="cursor:pointer; width:25px; height:25px; "
289 class="mr-3" 289 class="mr-3"
290 @click="profile(props.item)" 290 @click="profile(props.item)"
291 src="/static/icon/view.png" 291 src="/static/icon/view.png"
292 /> 292 />
293 <span>View</span> 293 <span>View</span>
294 </v-tooltip> 294 </v-tooltip>
295 <v-tooltip top> 295 <v-tooltip top>
296 <img 296 <img
297 slot="activator" 297 slot="activator"
298 style="cursor:pointer; width:20px; height:18px; " 298 style="cursor:pointer; width:20px; height:18px; "
299 class="mr-3" 299 class="mr-3"
300 @click="editItem(props.item)" 300 @click="editItem(props.item)"
301 src="/static/icon/edit.png" 301 src="/static/icon/edit.png"
302 /> 302 />
303 <span>Edit</span> 303 <span>Edit</span>
304 </v-tooltip> 304 </v-tooltip>
305 <v-tooltip top> 305 <v-tooltip top>
306 <img 306 <img
307 slot="activator" 307 slot="activator"
308 style="cursor:pointer; width:20px; height:20px; " 308 style="cursor:pointer; width:20px; height:20px; "
309 class="mr-3" 309 class="mr-3"
310 @click="deleteItem(props.item)" 310 @click="deleteItem(props.item)"
311 src="/static/icon/delete.png" 311 src="/static/icon/delete.png"
312 /> 312 />
313 <span>Delete</span> 313 <span>Delete</span>
314 </v-tooltip> 314 </v-tooltip>
315 </span> 315 </span>
316 </td> 316 </td>
317 </tr> 317 </tr>
318 </template> 318 </template>
319 <v-alert 319 <v-alert
320 slot="no-results" 320 slot="no-results"
321 :value="true" 321 :value="true"
322 color="error" 322 color="error"
323 icon="warning" 323 icon="warning"
324 >Your search for "{{ search }}" found no results.</v-alert> 324 >Your search for "{{ search }}" found no results.</v-alert>
325 </v-data-table> 325 </v-data-table>
326 <!-- ****** Add Annoucement DETAILS******--> 326 <!-- ****** Add Annoucement DETAILS******-->
327 <v-dialog v-model="addAnnoucementDialog" max-width="500" v-if="addAnnoucementDialog" persistent> 327 <v-dialog v-model="addAnnoucementDialog" max-width="500" v-if="addAnnoucementDialog" persistent>
328 <v-card flat class="card-style pa-2" dark> 328 <v-card flat class="card-style pa-2" dark>
329 <v-layout> 329 <v-layout>
330 <v-flex xs12> 330 <v-flex xs12>
331 <label class="title text-xs-center">Add Annoucement</label> 331 <label class="title text-xs-center">Add Annoucement</label>
332 <v-icon 332 <v-icon
333 size="24" 333 size="24"
334 class="right" 334 class="right"
335 @click="$refs.form.reset();addAnnoucementDialog = false" 335 @click="$refs.form.reset();addAnnoucementDialog = false"
336 >cancel</v-icon> 336 >cancel</v-icon>
337 </v-flex> 337 </v-flex>
338 </v-layout> 338 </v-layout>
339 <v-container fluid> 339 <v-container fluid>
340 <v-layout align-center> 340 <v-layout align-center>
341 <v-flex xs12> 341 <v-flex xs12>
342 <v-flex xs12 sm12> 342 <v-flex xs12 sm12>
343 <v-form ref="form" v-model="valid" lazy-validation> 343 <v-form ref="form" v-model="valid" lazy-validation>
344 <v-layout> 344 <v-layout>
345 <v-flex 345 <v-flex
346 xs12 346 xs12
347 class="text-xs-center text-sm-center text-md-center text-lg-center" 347 class="text-xs-center text-sm-center text-md-center text-lg-center"
348 > 348 >
349 <v-avatar size="100px" v-if="!imageUrl"> 349 <v-avatar size="100px" v-if="!imageUrl">
350 <img src="/static/icon/user.png" /> 350 <img src="/static/icon/user.png" />
351 </v-avatar> 351 </v-avatar>
352 <input 352 <input
353 type="file" 353 type="file"
354 style="display: none" 354 style="display: none"
355 ref="image" 355 ref="image"
356 accept="image/*" 356 accept="image/*"
357 @change="onFilePicked" 357 @change="onFilePicked"
358 /> 358 />
359 <img 359 <img
360 :src="imageData.imageUrl" 360 :src="imageData.imageUrl"
361 height="150" 361 height="150"
362 width="150" 362 width="150"
363 v-if="imageUrl" 363 v-if="imageUrl"
364 style="border-radius:50%; width:200px" 364 style="border-radius:50%; width:200px"
365 /> 365 />
366 </v-flex> 366 </v-flex>
367 </v-layout> 367 </v-layout>
368 <v-layout wrap> 368 <v-layout wrap>
369 <v-flex xs12 sm12> 369 <v-flex xs12 sm12>
370 <v-layout> 370 <v-layout>
371 <v-flex x4 sm4 class="pt-4 subheading"> 371 <v-flex x4 sm4 class="pt-4 subheading">
372 <label class="right hidden-xs-only hidden-sm-only">Select Class:</label> 372 <label class="right hidden-xs-only hidden-sm-only">Select Class:</label>
373 <label class="right hidden-lg-only hidden-md-only hidden-xl-only">Class:</label> 373 <label class="right hidden-lg-only hidden-md-only hidden-xl-only">Class:</label>
374 </v-flex> 374 </v-flex>
375 <v-flex xs8 sm8 class="ml-3"> 375 <v-flex xs8 sm8 class="ml-3">
376 <v-select 376 <v-select
377 :items="addclass" 377 :items="addclass"
378 label="Select Class" 378 label="Select Class"
379 v-model="addAnnoucement.select" 379 v-model="addAnnoucement.select"
380 item-text="classNum" 380 item-text="classNum"
381 item-value="_id" 381 item-value="_id"
382 name="Select Class" 382 name="Select Class"
383 :rules="classRules" 383 :rules="classRules"
384 @change="getCourses(addAnnoucement.select)" 384 @change="getCourses(addAnnoucement.select)"
385 required 385 required
386 ></v-select> 386 ></v-select>
387 </v-flex> 387 </v-flex>
388 </v-layout> 388 </v-layout>
389 </v-flex> 389 </v-flex>
390 </v-layout> 390 </v-layout>
391 <v-layout wrap> 391 <v-layout wrap>
392 <v-flex xs12 sm12> 392 <v-flex xs12 sm12>
393 <v-layout> 393 <v-layout>
394 <v-flex xs4 sm4 class="pt-4 subheading"> 394 <v-flex xs4 sm4 class="pt-4 subheading">
395 <label class="right hidden-xs-only hidden-sm-only">Course Name:</label> 395 <label class="right hidden-xs-only hidden-sm-only">Course Name:</label>
396 <label class="right hidden-lg-only hidden-md-only hidden-xl-only">Course:</label> 396 <label class="right hidden-lg-only hidden-md-only hidden-xl-only">Course:</label>
397 </v-flex> 397 </v-flex>
398 <v-flex xs8 sm8 class="ml-3"> 398 <v-flex xs8 sm8 class="ml-3">
399 <v-select 399 <v-select
400 :items="courseData" 400 :items="courseData"
401 item-text="courseName" 401 item-text="courseName"
402 item-value="_id" 402 item-value="_id"
403 v-model="addAnnoucement.courseName" 403 v-model="addAnnoucement.courseName"
404 placeholder="fill your Course name" 404 placeholder="fill your Course name"
405 type="text" 405 type="text"
406 :rules="courseRules" 406 :rules="courseRules"
407 required 407 required
408 ></v-select> 408 ></v-select>
409 </v-flex> 409 </v-flex>
410 </v-layout> 410 </v-layout>
411 </v-flex> 411 </v-flex>
412 <v-flex xs12 sm12> 412 <v-flex xs12 sm12>
413 <v-layout> 413 <v-layout>
414 <v-flex xs4 sm4 class="pt-4 subheading"> 414 <v-flex xs4 sm4 class="pt-4 subheading">
415 <label class="right hidden-xs-only hidden-sm-only">Discussion Type:</label> 415 <label class="right hidden-xs-only hidden-sm-only">Discussion Type:</label>
416 <label 416 <label
417 class="right hidden-lg-only hidden-md-only hidden-xl-only" 417 class="right hidden-lg-only hidden-md-only hidden-xl-only"
418 >DiscussionType:</label> 418 >DiscussionType:</label>
419 </v-flex> 419 </v-flex>
420 <v-flex xs8 sm8 class="ml-3"> 420 <v-flex xs8 sm8 class="ml-3">
421 <v-text-field 421 <v-text-field
422 v-model="addAnnoucement.discussionType" 422 v-model="addAnnoucement.discussionType"
423 placeholder="fill your Course name" 423 placeholder="fill your Course name"
424 type="text" 424 type="text"
425 :rules="courseRules" 425 :rules="courseRules"
426 required 426 required
427 ></v-text-field> 427 ></v-text-field>
428 </v-flex> 428 </v-flex>
429 </v-layout> 429 </v-layout>
430 </v-flex> 430 </v-flex>
431 <v-flex xs12 sm12> 431 <v-flex xs12 sm12>
432 <v-layout> 432 <v-layout>
433 <v-flex xs4 class="pt-4 subheading"> 433 <v-flex xs4 class="pt-4 subheading">
434 <label class="right hidden-xs-only hidden-sm-only">Upload Image:</label> 434 <label class="right hidden-xs-only hidden-sm-only">Upload Image:</label>
435 <label class="right hidden-lg-only hidden-md-only hidden-xl-only">Upload :</label> 435 <label class="right hidden-lg-only hidden-md-only hidden-xl-only">Upload :</label>
436 </v-flex> 436 </v-flex>
437 <v-flex xs8 class="ml-3"> 437 <v-flex xs8 class="ml-3">
438 <v-text-field 438 <v-text-field
439 label="Select Image" 439 label="Select Image"
440 @click="pickFile" 440 @click="pickFile"
441 v-model="imageName" 441 v-model="imageName"
442 append-icon="attach_file" 442 append-icon="attach_file"
443 ></v-text-field> 443 ></v-text-field>
444 </v-flex> 444 </v-flex>
445 </v-layout> 445 </v-layout>
446 </v-flex> 446 </v-flex>
447 </v-layout> 447 </v-layout>
448 <v-layout> 448 <v-layout>
449 <v-flex xs12 sm12> 449 <v-flex xs12 sm12>
450 <v-layout class="right"> 450 <v-layout class="right">
451 <v-btn @click="submit" round dark :loading="loading" class="add-button">Add</v-btn> 451 <v-btn @click="submit" round dark :loading="loading" class="add-button">Add</v-btn>
452 </v-layout> 452 </v-layout>
453 </v-flex> 453 </v-flex>
454 </v-layout> 454 </v-layout>
455 </v-form> 455 </v-form>
456 </v-flex> 456 </v-flex>
457 </v-flex> 457 </v-flex>
458 </v-layout> 458 </v-layout>
459 </v-container> 459 </v-container>
460 </v-card> 460 </v-card>
461 </v-dialog> 461 </v-dialog>
462 <v-snackbar 462 <v-snackbar
463 :timeout="timeout" 463 :timeout="timeout"
464 :top="y === 'top'" 464 :top="y === 'top'"
465 :right="x === 'right'" 465 :right="x === 'right'"
466 :vertical="mode === 'vertical'" 466 :vertical="mode === 'vertical'"
467 v-model="snackbar" 467 v-model="snackbar"
468 :color="color" 468 :color="color"
469 >{{ text }}</v-snackbar> 469 >{{ text }}</v-snackbar>
470 <div class="loader" v-if="showLoader"> 470 <div class="loader" v-if="showLoader">
471 <v-progress-circular indeterminate color="white"></v-progress-circular> 471 <v-progress-circular indeterminate color="white"></v-progress-circular>
472 </div> 472 </div>
473 </v-container> 473 </v-container>
474 </template> 474 </template>
475 475
476 <script> 476 <script>
477 import http from "@/Services/http.js"; 477 import http from "@/Services/http.js";
478 import moment from "moment"; 478 import moment from "moment";
479 import countryList from "@/script/country.js"; 479 import countryList from "@/script/country.js";
480 import parent from "@/script/parents.js"; 480 import parent from "@/script/parents.js";
481 481
482 export default { 482 export default {
483 data: () => ({ 483 data: () => ({
484 showNext: false, 484 showNext: false,
485 snackbar: false, 485 snackbar: false,
486 y: "top", 486 y: "top",
487 x: "right", 487 x: "right",
488 role: "", 488 role: "",
489 mode: "", 489 mode: "",
490 append: "", 490 append: "",
491 timeout: 3000, 491 timeout: 3000,
492 text: "", 492 text: "",
493 show: true, 493 show: true,
494 color: "", 494 color: "",
495 showSearch: false, 495 showSearch: false,
496 showLoader: false, 496 showLoader: false,
497 loading: false, 497 loading: false,
498 editLoading: false, 498 editLoading: false,
499 date: null, 499 date: null,
500 search: "", 500 search: "",
501 menu: false, 501 menu: false,
502 menu1: false, 502 menu1: false,
503 editStudentDialog: false, 503 editStudentDialog: false,
504 profileStudentDialog: false, 504 profileStudentDialog: false,
505 addAnnoucementDialog: false, 505 addAnnoucementDialog: false,
506 valid: true, 506 valid: true,
507 addclass: [], 507 addclass: [],
508 addSection: [], 508 addSection: [],
509 pagination: { 509 pagination: {
510 rowsPerPage: 10, 510 rowsPerPage: 10,
511 }, 511 },
512 imageData: {}, 512 imageData: {},
513 imageName: "", 513 imageName: "",
514 imageUrl: "", 514 imageUrl: "",
515 imageFile: "", 515 imageFile: "",
516 editImageName: "", 516 editImageName: "",
517 editImageUrl: "", 517 editImageUrl: "",
518 courseRules: [(v) => !!v || " Course Name is required"], 518 courseRules: [(v) => !!v || " Course Name is required"],
519 classRules: [(v) => !!v || " Class Name is required"], 519 classRules: [(v) => !!v || " Class Name is required"],
520 sectionRules: [(v) => !!v || "Section Name is required"], 520 sectionRules: [(v) => !!v || "Section Name is required"],
521 errorMessages: "", 521 errorMessages: "",
522 headers: [ 522 headers: [
523 { 523 {
524 text: "Image", 524 text: "Image",
525 value: "attachementUrl", 525 value: "attachementUrl",
526 sortable: false, 526 sortable: false,
527 align: "center", 527 align: "center",
528 }, 528 },
529 { 529 {
530 text: "Discussion Type", 530 text: "Discussion Type",
531 value: "discussionType", 531 value: "discussionType",
532 sortable: false, 532 sortable: false,
533 align: "center", 533 align: "center",
534 }, 534 },
535 { text: "Action", value: "", sortable: false, align: "center" }, 535 { text: "Action", value: "", sortable: false, align: "center" },
536 ], 536 ],
537 courseData: [], 537 courseData: [],
538 editedIndex: -1, 538 editedIndex: -1,
539 addAnnoucement: { 539 addAnnoucement: {
540 select: "", 540 select: "",
541 }, 541 },
542 selectAnnoucement: {}, 542 selectAnnoucement: {},
543 editedItem: {}, 543 editedItem: {},
544 annoucementData: [], 544 annoucementData: [],
545 }), 545 }),
546 watch: { 546 watch: {
547 addAnnoucementDialog: function (val) { 547 addAnnoucementDialog: function (val) {
548 if (!val) { 548 if (!val) {
549 this.addAnnoucement = []; 549 this.addAnnoucement = [];
550 this.imageName = ""; 550 this.imageName = "";
551 this.imageFile = ""; 551 this.imageFile = "";
552 this.imageUrl = ""; 552 this.imageUrl = "";
553 } 553 }
554 }, 554 },
555 }, 555 },
556 methods: { 556 methods: {
557 getCourses(selectCourseId) { 557 getCourses(selectCourseId) {
558 this.showLoader = true; 558 this.showLoader = true;
559 http() 559 http()
560 .get("/getCourseesList", { 560 .get("/getCourseesList", {
561 params: { 561 params: {
562 classId: selectCourseId, 562 classId: selectCourseId,
563 }, 563 },
564 }) 564 })
565 .then((response) => { 565 .then((response) => {
566 this.courseData = response.data.data; 566 this.courseData = response.data.data;
567 this.showLoader = false; 567 this.showLoader = false;
568 }) 568 })
569 .catch((err) => { 569 .catch((err) => {
570 // console.log("err====>", err); 570 // console.log("err====>", err);
571 this.showLoader = false; 571 this.showLoader = false;
572 this.snackbar = true;
573 this.color = "error";
574 this.text = error.response.data.message;
572 this.snackbar = true; 575 });
573 this.color = "error"; 576 },
574 this.text = error.response.data.message; 577 getAnnoucementes() {
575 }); 578 this.showLoader = true;
576 }, 579 http()
577 getAnnoucementes() { 580 .get("/getAnnoucementesList", {
578 this.showLoader = true; 581 params: {
579 http() 582 courseId: this.selectAnnoucement.courseId,
580 .get("/getAnnoucementesList", { 583 classId: this.selectAnnoucement.classId,
581 params: { 584 },
582 courseId: this.selectAnnoucement.courseId, 585 })
583 classId: this.selectAnnoucement.classId, 586 .then((response) => {
584 }, 587 this.annoucementData = response.data.data;
585 }) 588 this.showLoader = false;
586 .then((response) => { 589 })
587 this.annoucementData = response.data.data; 590 .catch((err) => {
588 this.showLoader = false; 591 // console.log("err====>", err);
589 }) 592 this.showLoader = false;
593 this.snackbar = true;
594 this.color = "error";
595 this.text = error.response.data.message;
590 .catch((err) => { 596 });
591 // console.log("err====>", err); 597 },
592 this.showLoader = false; 598 // getSections(_id) {
593 this.snackbar = true; 599 // var token = this.$store.state.token;
594 this.color = "error"; 600 // this.showLoader = true;
595 this.text = error.response.data.message; 601 // http()
596 }); 602 // .get(
597 }, 603 // "/getSectionsList",
598 // getSections(_id) { 604 // { params: { classId: _id } },
599 // var token = this.$store.state.token; 605 // {
600 // this.showLoader = true; 606 // headers: { Authorization: "Bearer " + token }
601 // http() 607 // }
602 // .get( 608 // )
603 // "/getSectionsList", 609 // .then(response => {
604 // { params: { classId: _id } }, 610 // this.addSection = response.data.data;
605 // { 611 // this.showLoader = false;
606 // headers: { Authorization: "Bearer " + token } 612 // })
607 // } 613 // .catch(err => {
608 // ) 614 // this.showLoader = false;
609 // .then(response => { 615 // });
610 // this.addSection = response.data.data; 616 // },
611 // this.showLoader = false; 617 pickFile() {
612 // }) 618 this.$refs.image.click();
613 // .catch(err => { 619 },
614 // this.showLoader = false; 620 pickEditFile() {
615 // }); 621 this.$refs.editDataImage.click();
616 // }, 622 },
617 pickFile() { 623 dates: function (date) {
618 this.$refs.image.click(); 624 return moment(date).format("MMMM DD, YYYY");
619 }, 625 return date;
620 pickEditFile() { 626 },
621 this.$refs.editDataImage.click(); 627 onFilePicked(e) {
622 }, 628 // console.log(e)
623 dates: function (date) { 629 const files = e.target.files;
624 return moment(date).format("MMMM DD, YYYY"); 630 this.imageData.upload = e.target.files[0];
625 return date; 631 if (files[0] !== undefined) {
626 }, 632 this.imageName = files[0].name;
627 onFilePicked(e) { 633 if (this.imageName.lastIndexOf(".") <= 0) {
628 // console.log(e) 634 return;
629 const files = e.target.files; 635 }
630 this.imageData.upload = e.target.files[0]; 636 const fr = new FileReader();
631 if (files[0] !== undefined) { 637 fr.readAsDataURL(files[0]);
632 this.imageName = files[0].name; 638 fr.addEventListener("load", () => {
633 if (this.imageName.lastIndexOf(".") <= 0) { 639 this.imageUrl = fr.result;
634 return; 640 this.imageFile = files[0]; // this is an image file that can be sent to server...
635 } 641 this.imageData.imageUrl = URL.createObjectURL(this.imageFile);
636 const fr = new FileReader(); 642 });
637 fr.readAsDataURL(files[0]); 643 } else {
638 fr.addEventListener("load", () => { 644 this.imageName = "";
639 this.imageUrl = fr.result; 645 this.imageFile = "";
640 this.imageFile = files[0]; // this is an image file that can be sent to server... 646 this.imageUrl = "";
641 this.imageData.imageUrl = URL.createObjectURL(this.imageFile); 647 }
642 }); 648 },
643 } else { 649 onEditFilePicked(e) {
644 this.imageName = ""; 650 // console.log(e);
645 this.imageFile = ""; 651 const files = e.target.files;
646 this.imageUrl = ""; 652 if (files[0] !== undefined) {
647 } 653 this.editImageName = files[0].name;
648 }, 654 if (this.editImageName.lastIndexOf(".") <= 0) {
649 onEditFilePicked(e) { 655 return;
650 // console.log(e); 656 }
651 const files = e.target.files; 657 const fr = new FileReader();
652 if (files[0] !== undefined) { 658 fr.readAsDataURL(files[0]);
653 this.editImageName = files[0].name; 659 fr.addEventListener("load", () => {
654 if (this.editImageName.lastIndexOf(".") <= 0) { 660 this.editImageUrl = fr.result;
655 return; 661 this.editiImageFile = files[0]; // this is an image file that can be sent to server...
656 } 662 });
657 const fr = new FileReader(); 663 } else {
658 fr.readAsDataURL(files[0]); 664 this.editImageName = "";
659 fr.addEventListener("load", () => { 665 this.editiImageFile = "";
660 this.editImageUrl = fr.result; 666 }
661 this.editiImageFile = files[0]; // this is an image file that can be sent to server... 667 },
662 }); 668 editItem(item) {
663 } else { 669 this.editedIndex = this.courseData.indexOf(item);
664 this.editImageName = ""; 670 this.editedItem = Object.assign({}, item);
665 this.editiImageFile = ""; 671 this.editStudentDialog = true;
666 } 672 },
667 }, 673 profile(item) {
668 editItem(item) { 674 this.editedIndex = this.courseData.indexOf(item);
669 this.editedIndex = this.courseData.indexOf(item); 675 this.editedItem = Object.assign({}, item);
670 this.editedItem = Object.assign({}, item); 676 this.profileStudentDialog = true;
671 this.editStudentDialog = true; 677 },
672 }, 678 deleteItem(item) {
673 profile(item) { 679 let deleteAnnoucement = {
674 this.editedIndex = this.courseData.indexOf(item); 680 annoucementId: item._id,
675 this.editedItem = Object.assign({}, item); 681 };
676 this.profileStudentDialog = true; 682 http()
677 }, 683 .delete(
678 deleteItem(item) { 684 "/deleteAnnoucement",
679 let deleteAnnoucement = { 685 confirm("Are you sure you want to delete this?") && {
680 annoucementId: item._id, 686 params: deleteAnnoucement,
681 }; 687 }
682 http() 688 )
683 .delete( 689 .then((response) => {
684 "/deleteAnnoucement", 690 this.snackbar = true;
685 confirm("Are you sure you want to delete this?") && { 691 this.text = response.data.message;
686 params: deleteAnnoucement, 692 this.color = "green";
687 } 693 this.getAnnoucementes();
688 ) 694 })
689 .then((response) => { 695 .catch((error) => {
690 this.snackbar = true; 696 this.snackbar = true;
691 this.text = response.data.message; 697 this.text = error.response.data.message;
692 this.color = "green"; 698 this.color = "error";
693 this.getAnnoucementes(); 699 });
694 }) 700 },
695 .catch((error) => { 701 close() {
696 this.snackbar = true; 702 this.editStudentDialog = false;
697 this.text = error.response.data.message; 703 },
698 this.color = "error"; 704 closeStudentProfile() {
699 }); 705 this.profileStudentDialog = false;
700 }, 706 },
701 close() { 707 rowAnnoucement(id) {
702 this.editStudentDialog = false; 708 this.$router.push({
703 }, 709 name: "Annoucement Forum",
704 closeStudentProfile() { 710 params: { annoucementId: id },
705 this.profileStudentDialog = false; 711 });
706 }, 712 },
707 rowAnnoucement(id) { 713 submit() {
708 this.$router.push({ 714 if (this.$refs.form.validate()) {
709 name: "Annoucement Forum", 715 let addCourse = {
710 params: { annoucementId: id }, 716 classId: this.addAnnoucement.select,
711 }); 717 sectionId: this.addAnnoucement.selectSection,
712 }, 718 discussionType: this.addAnnoucement.discussionType,
713 submit() { 719 courseId: this.addAnnoucement.courseName,
714 if (this.$refs.form.validate()) { 720 };
715 let addCourse = { 721 if (this.imageUrl) {
716 classId: this.addAnnoucement.select, 722 var str = this.imageUrl;
717 sectionId: this.addAnnoucement.selectSection, 723 const [baseUrl, imageUrl] = str.split(/,/);
718 discussionType: this.addAnnoucement.discussionType, 724 addCourse.upload = imageUrl;
719 courseId: this.addAnnoucement.courseName, 725 }
720 }; 726 this.loading = true;
721 if (this.imageUrl) { 727 http()
722 var str = this.imageUrl; 728 .post("/createAnnoucement", addCourse)
723 const [baseUrl, imageUrl] = str.split(/,/); 729 .then((response) => {
724 addCourse.upload = imageUrl; 730 this.snackbar = true;
725 } 731 this.text = "New Annoucement added successfully";
726 this.loading = true; 732 this.color = "green";
727 http() 733 this.addAnnoucementDialog = false;
728 .post("/createAnnoucement", addCourse) 734 this.clear();
729 .then((response) => { 735 this.loading = false;
730 this.snackbar = true; 736 })
731 this.text = "New Annoucement added successfully"; 737 .catch((error) => {
732 this.color = "green"; 738 this.snackbar = true;
733 this.addAnnoucementDialog = false; 739 this.text = error.response.data.message;
734 this.clear(); 740 this.color = "error";
735 this.loading = false; 741 this.loading = false;
736 }) 742 });
737 .catch((error) => { 743 }
738 this.snackbar = true; 744 },
739 this.text = error.response.data.message; 745 clear() {
740 this.color = "error"; 746 this.$refs.form.reset();
741 this.loading = false; 747 this.imageUrl = "";
742 }); 748 },
743 } 749 save() {
744 }, 750 let editAnnoucement = {
745 clear() { 751 annoucementId: this.editedItem._id,
746 this.$refs.form.reset(); 752 discussionType: this.editedItem.discussionType,
747 this.imageUrl = ""; 753 classId: this.editedItem.select,
748 }, 754 courseId: this.editedItem.courseName,
749 save() { 755 };
750 let editAnnoucement = { 756 if (this.editImageUrl) {
751 annoucementId: this.editedItem._id, 757 var str = this.editImageUrl;
752 discussionType: this.editedItem.discussionType, 758 const [baseUrl, editImageUrl] = str.split(/,/);
753 classId: this.editedItem.select, 759 editAnnoucement.upload = editImageUrl;
754 courseId: this.editedItem.courseName, 760 }
755 }; 761 this.editLoading = true;
756 if (this.editImageUrl) { 762 http()
757 var str = this.editImageUrl; 763 .put("/updateAnnoucement", editAnnoucement)
758 const [baseUrl, editImageUrl] = str.split(/,/); 764 .then((response) => {
759 editAnnoucement.upload = editImageUrl; 765 this.snackbar = true;
760 } 766 this.text = response.data.message;
761 this.editLoading = true; 767 this.color = "green";
762 http() 768 this.imageUrl = "";
763 .put("/updateAnnoucement", editAnnoucement) 769 this.getAnnoucementes();
764 .then((response) => { 770 this.close();
765 this.snackbar = true; 771 this.editLoading = false;
766 this.text = response.data.message; 772 })
767 this.color = "green"; 773 .catch((error) => {
768 this.imageUrl = ""; 774 this.snackbar = true;
769 this.getAnnoucementes(); 775 this.text = error.response.data.statusText;
770 this.close(); 776 this.color = "error";
771 this.editLoading = false; 777 this.editLoading = false;
772 }) 778 });
773 .catch((error) => { 779 },
774 this.snackbar = true; 780 displaySearch() {
775 this.text = error.response.data.statusText; 781 this.show = false;
776 this.color = "error"; 782 this.showSearch = true;
777 this.editLoading = false; 783 },
778 }); 784 closeSearch() {
779 }, 785 this.showSearch = false;
780 displaySearch() { 786 this.show = true;
781 this.show = false; 787 this.search = "";
782 this.showSearch = true; 788 },
783 }, 789 },
784 closeSearch() { 790 mounted() {
785 this.showSearch = false; 791 var token = this.$store.state.token;
786 this.show = true; 792 http()
787 this.search = ""; 793 .get("/getClassesList", {
788 }, 794 headers: { Authorization: "Bearer " + token },
789 }, 795 })
790 mounted() { 796 .then((response) => {
791 var token = this.$store.state.token; 797 this.addclass = response.data.data;
792 http() 798 })
793 .get("/getClassesList", { 799 .catch((error) => {
794 headers: { Authorization: "Bearer " + token }, 800 this.showLoader = false;
795 }) 801 if (error.response.status === 401) {
796 .then((response) => { 802 this.$router.replace({ path: "/" });
797 this.addclass = response.data.data; 803 this.$store.dispatch("setToken", null);
798 }) 804 this.$store.dispatch("Id", null);
799 .catch((error) => { 805 this.$store.dispatch("Role", null);
800 this.showLoader = false; 806 }
801 if (error.response.status === 401) { 807 });
802 this.$router.replace({ path: "/" }); 808 },
803 this.$store.dispatch("setToken", null); 809 };
804 this.$store.dispatch("Id", null); 810 </script>
805 this.$store.dispatch("Role", null); 811 <style>
806 } 812 .row-click {
807 }); 813 cursor: pointer;
808 }, 814 }
809 }; 815 </style>
src/pages/Annoucement/annoucementForum.vue
Diff comments   View file @8b7976c
1 <template> 1 <template>
2 <v-container fluid class="body-color"> 2 <v-container fluid class="body-color">
3 <!-- ******ANNOUCEMNET DISCUSSION COMMENT ****** --> 3 <!-- ******ANNOUCEMNET DISCUSSION COMMENT ****** -->
4 <v-layout> 4 <v-layout>
5 <v-flex xs12 v-for="(annoucementData,i) in annoucementData" :key="i"> 5 <v-flex xs12 v-for="(annoucementData,i) in annoucementData" :key="i">
6 <!-- TOPIC HEADING --> 6 <!-- TOPIC HEADING -->
7 <v-card class="elevation-0 grey lighten-3 pa-2" flat> 7 <v-card class="elevation-0 grey lighten-3 pa-2" flat>
8 <v-list two-line subheader> 8 <v-list two-line subheader>
9 <v-list-tile> 9 <v-list-tile>
10 <v-list-tile-avatar> 10 <v-list-tile-avatar>
11 <v-avatar size="46"> 11 <v-avatar size="46">
12 <img :src="annoucementData.attachementUrl" v-if="annoucementData.attachementUrl" /> 12 <img :src="annoucementData.attachementUrl" v-if="annoucementData.attachementUrl" />
13 <img src="/static/icon/user.png" v-else-if="!annoucementData.attachementUrl" /> 13 <img src="/static/icon/user.png" v-else-if="!annoucementData.attachementUrl" />
14 </v-avatar> 14 </v-avatar>
15 </v-list-tile-avatar> 15 </v-list-tile-avatar>
16 <v-list-tile-content> 16 <v-list-tile-content>
17 <v-list-tile-title>{{ annoucementData.discussionType }}</v-list-tile-title> 17 <v-list-tile-title>{{ annoucementData.discussionType }}</v-list-tile-title>
18 <v-list-tile-sub-title> 18 <v-list-tile-sub-title>
19 By 19 By
20 <span 20 <span
21 class="info--text" 21 class="info--text"
22 v-if="annoucementData.studentId" 22 v-if="annoucementData.studentId"
23 >{{ annoucementData.studentId.name }}</span> 23 >{{ annoucementData.studentId.name }}</span>
24 <span 24 <span
25 class="info--text" 25 class="info--text"
26 v-if="annoucementData.teacherId" 26 v-if="annoucementData.teacherId"
27 >{{ annoucementData.teacherId.name }}</span> 27 >{{ annoucementData.teacherId.name }}</span>
28 - {{dates(annoucementData.created ) }} 28 - {{dates(annoucementData.created ) }}
29 </v-list-tile-sub-title> 29 </v-list-tile-sub-title>
30 </v-list-tile-content> 30 </v-list-tile-content>
31 <v-list-tile-action> 31 <v-list-tile-action>
32 <div> 32 <div>
33 <v-btn flat round dark class="reply-btn" @click="showReplyBox = true">Reply</v-btn> 33 <v-btn flat round dark class="reply-btn" @click="showReplyBox = true">Reply</v-btn>
34 </div> 34 </div>
35 </v-list-tile-action> 35 </v-list-tile-action>
36 </v-list-tile> 36 </v-list-tile>
37 </v-list> 37 </v-list>
38 </v-card> 38 </v-card>
39 <!-- REPLY BOX --> 39 <!-- REPLY BOX -->
40 <v-flex xs12 class="mt-4" v-show="showReplyBox"> 40 <v-flex xs12 class="mt-4" v-show="showReplyBox">
41 <v-textarea 41 <v-textarea
42 name="input-7-1" 42 name="input-7-1"
43 solo 43 solo
44 label="Label Text" 44 label="Label Text"
45 multi-line 45 multi-line
46 v-model="replyDescription" 46 v-model="replyDescription"
47 ></v-textarea> 47 ></v-textarea>
48 <v-btn round dark class="open-dialog-button" flat @click="showReplyBox = false">Cancel</v-btn> 48 <v-btn round dark class="open-dialog-button" flat @click="showReplyBox = false">Cancel</v-btn>
49 <v-btn 49 <v-btn
50 round 50 round
51 dark 51 dark
52 :loading="loading" 52 :loading="loading"
53 class="reply-btn" 53 class="reply-btn"
54 @click="replyThreadDiscussion()" 54 @click="replyThreadDiscussion()"
55 >Submit</v-btn> 55 >Submit</v-btn>
56 </v-flex> 56 </v-flex>
57 57
58 <!-- REPLY THREAD --> 58 <!-- REPLY THREAD -->
59 <v-layout 59 <v-layout
60 :class="['mt-4','pl-5','mx-auto',replyThread.teacherId?'justify-start':'justify-end']" 60 :class="['mt-4','pl-5','mx-auto',replyThread.teacherId?'justify-start':'justify-end']"
61 v-for="(replyThread,i) in annoucementData.discussionThread.slice().reverse()" 61 v-for="(replyThread,i) in annoucementData.discussionThread.slice().reverse()"
62 :key="i" 62 :key="i"
63 > 63 >
64 <v-flex xs12 md7> 64 <v-flex xs12 md7>
65 <v-card class="elevation-0 grey lighten-1" flat> 65 <v-card class="elevation-0 grey lighten-1" flat>
66 <v-list two-line subheader class="grey lighten-1 pa-1"> 66 <v-list two-line subheader class="grey lighten-1 pa-1">
67 <v-list-tile> 67 <v-list-tile>
68 <v-list-tile-avatar> 68 <v-list-tile-avatar>
69 <v-avatar size="46"> 69 <v-avatar size="46">
70 <img 70 <img
71 :src="annoucementData.attachementUrl" 71 :src="annoucementData.attachementUrl"
72 v-if="annoucementData.attachementUrl" 72 v-if="annoucementData.attachementUrl"
73 /> 73 />
74 <img src="/static/icon/user.png" v-else-if="!annoucementData.attachementUrl" /> 74 <img src="/static/icon/user.png" v-else-if="!annoucementData.attachementUrl" />
75 </v-avatar> 75 </v-avatar>
76 </v-list-tile-avatar> 76 </v-list-tile-avatar>
77 <v-list-tile-content> 77 <v-list-tile-content>
78 <v-list-tile-title>Re: {{ annoucementData.discussionType }}</v-list-tile-title> 78 <v-list-tile-title>Re: {{ annoucementData.discussionType }}</v-list-tile-title>
79 <v-list-tile-sub-title> 79 <v-list-tile-sub-title>
80 By 80 By
81 <span 81 <span
82 class="info--text" 82 class="info--text"
83 v-if="replyThread.teacherId" 83 v-if="replyThread.teacherId"
84 >{{ replyThread.teacherId.name }}</span> 84 >{{ replyThread.teacherId.name }}</span>
85 <span 85 <span
86 class="info--text" 86 class="info--text"
87 v-if="replyThread.studentId" 87 v-if="replyThread.studentId"
88 >{{ replyThread.studentId.name }}</span> 88 >{{ replyThread.studentId.name }}</span>
89 - {{dates(replyThread.created ) }} 89 - {{dates(replyThread.created ) }}
90 </v-list-tile-sub-title> 90 </v-list-tile-sub-title>
91 </v-list-tile-content> 91 </v-list-tile-content>
92 </v-list-tile> 92 </v-list-tile>
93 </v-list> 93 </v-list>
94 <v-list class="pa-2 reply-desc"> 94 <v-list class="pa-2 reply-desc">
95 <v-list-tile-content> 95 <v-list-tile-content>
96 <v-list-tile-title 96 <v-list-tile-title
97 v-show="replyThread.showDescriptionReplyThread" 97 v-show="replyThread.showDescriptionReplyThread"
98 >{{ replyThread.description }}</v-list-tile-title> 98 >{{ replyThread.description }}</v-list-tile-title>
99 <v-flex xs12 sm12 md4 v-show="replyThread.showUpdateReplyThread == true"> 99 <v-flex xs12 sm12 md4 v-show="replyThread.showUpdateReplyThread == true">
100 <v-text-field v-model="replyThread.description"></v-text-field> 100 <v-text-field v-model="replyThread.description"></v-text-field>
101 <v-btn 101 <v-btn
102 flat 102 flat
103 round 103 round
104 dark 104 dark
105 class="reply-btn right" 105 class="reply-btn right"
106 @click="updateRelpyThreadDiscussion(replyThread)" 106 @click="updateRelpyThreadDiscussion(replyThread)"
107 >Save</v-btn> 107 >Save</v-btn>
108 </v-flex> 108 </v-flex>
109 </v-list-tile-content> 109 </v-list-tile-content>
110 </v-list> 110 </v-list>
111 <v-list class="grey lighten-4 pa-0"> 111 <v-list class="grey lighten-4 pa-0">
112 <v-list-tile-action> 112 <v-list-tile-action>
113 <v-spacer></v-spacer> 113 <v-spacer></v-spacer>
114 <div v-if="replyThread.teacherId && replyThread.teacherId._id == $store.state.id"> 114 <div v-if="replyThread.teacherId && replyThread.teacherId._id == $store.state.id">
115 <v-btn 115 <v-btn
116 flat 116 flat
117 round 117 round
118 dark 118 dark
119 class="reply-btn" 119 class="reply-btn"
120 @click="deleteRelpyThreadDiscussion(replyThread._id)" 120 @click="deleteRelpyThreadDiscussion(replyThread._id)"
121 >Delete</v-btn> 121 >Delete</v-btn>
122 <v-btn 122 <v-btn
123 flat 123 flat
124 round 124 round
125 dark 125 dark
126 class="reply-btn mr-4" 126 class="reply-btn mr-4"
127 @click="showUpdateReplyThreadDiscussion(replyThread)" 127 @click="showUpdateReplyThreadDiscussion(replyThread)"
128 >Edit</v-btn> 128 >Edit</v-btn>
129 </div> 129 </div>
130 </v-list-tile-action> 130 </v-list-tile-action>
131 </v-list> 131 </v-list>
132 </v-card> 132 </v-card>
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-snackbar 137 <v-snackbar
138 :timeout="timeout" 138 :timeout="timeout"
139 :top="y === 'top'" 139 :top="y === 'top'"
140 :right="x === 'right'" 140 :right="x === 'right'"
141 :vertical="mode === 'vertical'" 141 :vertical="mode === 'vertical'"
142 v-model="snackbar" 142 v-model="snackbar"
143 color="success" 143 color="success"
144 >{{ text }}</v-snackbar> 144 >{{ text }}</v-snackbar>
145 <div class="loader" v-if="showLoader"> 145 <div class="loader" v-if="showLoader">
146 <v-progress-circular indeterminate color="white"></v-progress-circular> 146 <v-progress-circular indeterminate color="white"></v-progress-circular>
147 </div> 147 </div>
148 </v-container> 148 </v-container>
149 </template> 149 </template>
150 150
151 <script> 151 <script>
152 import http from "@/Services/http.js"; 152 import http from "@/Services/http.js";
153 import moment from "moment"; 153 import moment from "moment";
154 154
155 export default { 155 export default {
156 data: () => ({ 156 data: () => ({
157 localStorage: localStorage, 157 localStorage: localStorage,
158 snackbar: false, 158 snackbar: false,
159 y: "top", 159 y: "top",
160 x: "right", 160 x: "right",
161 mode: "", 161 mode: "",
162 timeout: 3000, 162 timeout: 3000,
163 text: "", 163 text: "",
164 showLoader: false, 164 showLoader: false,
165 loading: false, 165 loading: false,
166 date: null, 166 date: null,
167 token: "", 167 token: "",
168 role: "", 168 role: "",
169 schoolRole: "", 169 schoolRole: "",
170 menu: false, 170 menu: false,
171 annoucementData: {}, 171 annoucementData: {},
172 showReplyBox: false, 172 showReplyBox: false,
173 replyDescription: "", 173 replyDescription: "",
174 loginId: "", 174 loginId: "",
175 editedIndex: -1, 175 editedIndex: -1,
176 }), 176 }),
177 methods: { 177 methods: {
178 dates: function (date) { 178 dates: function (date) {
179 return moment(date).format("MMMM DD, YYYY hh:mm A"); 179 return moment(date).format("MMMM DD, YYYY hh:mm A");
180 }, 180 },
181 getDiscussionesThread() { 181 getDiscussionesThread() {
182 // console.log("id", this.getSelectedData.courseId); 182 // console.log("id", this.getSelectedData.courseId);
183 this.showLoader = true; 183 this.showLoader = true;
184 http() 184 http()
185 .get("/getParticularAnnoucement", { 185 .get("/getParticularAnnoucement", {
186 params: { 186 params: {
187 annoucementId: this.$route.params.annoucementId, 187 annoucementId: this.$route.params.annoucementId,
188 }, 188 },
189 }) 189 })
190 .then((response) => { 190 .then((response) => {
191 // console.log("response", response.data.data); 191 // console.log("response", response.data.data);
192 this.annoucementData = response.data.data; 192 this.annoucementData = response.data.data;
193 // console.log("response", this.annoucementData); 193 // console.log("response", this.annoucementData);
194 for (let i = 0; i < this.annoucementData.length; i++) { 194 for (let i = 0; i < this.annoucementData.length; i++) {
195 for ( 195 for (
196 let j = 0; 196 let j = 0;
197 j < this.annoucementData[i].discussionThread.length; 197 j < this.annoucementData[i].discussionThread.length;
198 j++ 198 j++
199 ) { 199 ) {
200 if (this.annoucementData[i].discussionThread[j]) { 200 if (this.annoucementData[i].discussionThread[j]) {
201 this.annoucementData[i].discussionThread[ 201 this.annoucementData[i].discussionThread[
202 j 202 j
203 ].showUpdateReplyThread = false; 203 ].showUpdateReplyThread = false;
204 this.annoucementData[i].discussionThread[ 204 this.annoucementData[i].discussionThread[
205 j 205 j
206 ].showDescriptionReplyThread = true; 206 ].showDescriptionReplyThread = true;
207 } 207 }
208 } 208 }
209 } 209 }
210 this.showLoader = false; 210 this.showLoader = false;
211 this.showReplyBox = false; 211 this.showReplyBox = false;
212 }) 212 })
213 .catch((error) => { 213 .catch((error) => {
214 // console.log("err====>", error); 214 // console.log("err====>", error);
215 this.showLoader = false; 215 this.showLoader = false;
216 this.snackbar = true;
217 this.color = "error";
218 this.text = error.response.data.message;
216 this.snackbar = true; 219 });
217 this.color = "error"; 220 },
218 this.text = error.response.data.message; 221 replyThreadDiscussion() {
219 }); 222 this.showLoader = true;
220 }, 223 var payloadData = {
221 replyThreadDiscussion() { 224 annoucementId: this.$route.params.annoucementId,
222 this.showLoader = true; 225 teacherId: this.loginId,
223 var payloadData = { 226 description: this.replyDescription,
224 annoucementId: this.$route.params.annoucementId, 227 };
225 teacherId: this.loginId, 228 http()
226 description: this.replyDescription, 229 .put("/replyThread", payloadData)
227 }; 230 .then((response) => {
228 http() 231 // console.log("response", response.data.data);
229 .put("/replyThread", payloadData) 232 this.showLoader = false;
230 .then((response) => { 233 this.getDiscussionesThread();
231 // console.log("response", response.data.data); 234 })
232 this.showLoader = false; 235 .catch((error) => {
233 this.getDiscussionesThread(); 236 this.showLoader = false;
234 }) 237 });
235 .catch((error) => { 238 },
236 this.showLoader = false; 239 showUpdateReplyThreadDiscussion(item) {
237 }); 240 this.editedIndex = this.annoucementData.indexOf(item);
238 }, 241 var editedItem = Object.assign({}, item);
239 showUpdateReplyThreadDiscussion(item) { 242 var arrayOfannoucementData = [];
240 this.editedIndex = this.annoucementData.indexOf(item); 243 for (let i = 0; i < this.annoucementData.length; i++) {
241 var editedItem = Object.assign({}, item); 244 for (
242 var arrayOfannoucementData = []; 245 let j = 0;
243 for (let i = 0; i < this.annoucementData.length; i++) { 246 j < this.annoucementData[i].discussionThread.length;
244 for ( 247 j++
245 let j = 0; 248 ) {
246 j < this.annoucementData[i].discussionThread.length; 249 if (
247 j++ 250 editedItem._id == this.annoucementData[i].discussionThread[j]._id
248 ) { 251 ) {
249 if ( 252 this.annoucementData[i].discussionThread[
250 editedItem._id == this.annoucementData[i].discussionThread[j]._id 253 j
251 ) { 254 ].showUpdateReplyThread = true;
252 this.annoucementData[i].discussionThread[ 255 this.annoucementData[i].discussionThread[
253 j 256 j
254 ].showUpdateReplyThread = true; 257 ].showDescriptionReplyThread = false;
255 this.annoucementData[i].discussionThread[ 258 }
256 j 259 }
257 ].showDescriptionReplyThread = false; 260 arrayOfannoucementData.push(this.annoucementData[i]);
258 } 261 }
259 } 262 this.annoucementData = arrayOfannoucementData;
260 arrayOfannoucementData.push(this.annoucementData[i]); 263 },
261 } 264 updateRelpyThreadDiscussion(replyThread) {
262 this.annoucementData = arrayOfannoucementData; 265 this.showLoader = true;
263 }, 266 var payloadData = {
264 updateRelpyThreadDiscussion(replyThread) { 267 discussionThreadId: replyThread._id,
265 this.showLoader = true; 268 annoucementId: this.$route.params.annoucementId,
266 var payloadData = { 269 teacherId: this.loginId,
267 discussionThreadId: replyThread._id, 270 description: replyThread.description,
268 annoucementId: this.$route.params.annoucementId, 271 };
269 teacherId: this.loginId, 272 http()
270 description: replyThread.description, 273 .put("/updateThread", payloadData)
271 }; 274 .then((response) => {
272 http() 275 this.showLoader = false;
273 .put("/updateThread", payloadData) 276 this.getDiscussionesThread();
274 .then((response) => { 277 })
275 this.showLoader = false; 278 .catch((error) => {
276 this.getDiscussionesThread(); 279 this.showLoader = false;
277 }) 280 });
278 .catch((error) => { 281 },
279 this.showLoader = false; 282 deleteRelpyThreadDiscussion(id) {
280 }); 283 this.showLoader = true;
281 }, 284 var payloadData = {
282 deleteRelpyThreadDiscussion(id) { 285 discussionThreadId: id,
283 this.showLoader = true; 286 annoucementId: this.$route.params.annoucementId,
284 var payloadData = { 287 };
285 discussionThreadId: id, 288 http()
286 annoucementId: this.$route.params.annoucementId, 289 .put(
287 }; 290 "/deleteThread",
288 http() 291 confirm("Are you sure you want to delete this?") && payloadData
289 .put( 292 )
290 "/deleteThread", 293 .then((response) => {
291 confirm("Are you sure you want to delete this?") && payloadData 294 this.showLoader = false;
292 ) 295 this.getDiscussionesThread();
293 .then((response) => { 296 })
294 this.showLoader = false; 297 .catch((error) => {
295 this.getDiscussionesThread(); 298 this.showLoader = false;
296 }) 299 });
297 .catch((error) => { 300 },
298 this.showLoader = false; 301 },
299 }); 302 mounted() {
300 }, 303 // this.getStudentList();
301 }, 304 this.token = this.$store.state.token;
302 mounted() { 305 this.role = this.$store.state.role;
303 // this.getStudentList(); 306 this.loginId = this.$store.state.id;
304 this.token = this.$store.state.token; 307 this.getDiscussionesThread();
305 this.role = this.$store.state.role; 308 },
306 this.loginId = this.$store.state.id; 309 };
307 this.getDiscussionesThread(); 310 </script>
308 }, 311
309 }; 312 <style>
310 </script> 313 .reply-desc {
311 314 border: 1px solid #f2f2f2;
312 <style> 315 }
313 .reply-desc { 316 .open-dialog-button {
314 border: 1px solid #f2f2f2; 317 background: #827bfa !important;
315 } 318 border-color: #827bfa !important;
316 .open-dialog-button { 319 text-transform: none !important;
317 background: #827bfa !important; 320 }
318 border-color: #827bfa !important; 321
319 text-transform: none !important; 322 .reply-btn {
320 } 323 background: #feb83c !important;
321 324 border-color: #feb83c !important;
322 .reply-btn { 325 text-transform: none !important;
323 background: #feb83c !important; 326 -webkit-box-shadow: none !important;
324 border-color: #feb83c !important; 327 box-shadow: none !important;
325 text-transform: none !important; 328 }
326 -webkit-box-shadow: none !important; 329 </style>
src/pages/AssignTeachers.vue
Diff comments   View file @8b7976c
1 <template> 1 <template>
2 <v-container fluid class="body-color"> 2 <v-container fluid class="body-color">
3 <!-- LOADER --> 3 <!-- LOADER -->
4 <div class="loader" v-if="showLoader"> 4 <div class="loader" v-if="showLoader">
5 <v-progress-circular indeterminate color="white"></v-progress-circular> 5 <v-progress-circular indeterminate color="white"></v-progress-circular>
6 </div> 6 </div>
7 7
8 <!-- SNACKBAR --> 8 <!-- SNACKBAR -->
9 <!-- <v-snackbar 9 <!-- <v-snackbar
10 :timeout="timeout" 10 :timeout="timeout"
11 :top="y === 'top'" 11 :top="y === 'top'"
12 :right="x === 'right'" 12 :right="x === 'right'"
13 :vertical="mode === 'vertical'" 13 :vertical="mode === 'vertical'"
14 v-model="snackbar" 14 v-model="snackbar"
15 :color="snackbarColor" 15 :color="snackbarColor"
16 > 16 >
17 {{ text }} 17 {{ text }}
18 <v-spacer></v-spacer> 18 <v-spacer></v-spacer>
19 <v-btn flat text @click="snackbar = false">X</v-btn> 19 <v-btn flat text @click="snackbar = false">X</v-btn>
20 </v-snackbar>--> 20 </v-snackbar>-->
21 21
22 <!-- DIALOG ENROLL TEACHER --> 22 <!-- DIALOG ENROLL TEACHER -->
23 <v-dialog v-model="dialogEnrollTeacher" max-width="600px" scrollable persistent> 23 <v-dialog v-model="dialogEnrollTeacher" max-width="600px" scrollable persistent>
24 <v-card flat class="card-style pa-3" dark> 24 <v-card flat class="card-style pa-3" dark>
25 <v-layout> 25 <v-layout>
26 <v-flex xs12> 26 <v-flex xs12>
27 <label class="title text-xs-center">View Course</label> 27 <label class="title text-xs-center">View Course</label>
28 <v-icon size="24" class="right" @click="profileStudentDialog = false">cancel</v-icon> 28 <v-icon size="24" class="right" @click="profileStudentDialog = false">cancel</v-icon>
29 </v-flex> 29 </v-flex>
30 </v-layout> 30 </v-layout>
31 <v-card-text> 31 <v-card-text>
32 <v-flex align-center justify-center layout text-xs-center class="mt-3"> 32 <v-flex align-center justify-center layout text-xs-center class="mt-3">
33 <v-avatar size="100px"> 33 <v-avatar size="100px">
34 <img src="/static/icon/user.png" v-if="!editedItem.courseImageUrl" /> 34 <img src="/static/icon/user.png" v-if="!editedItem.courseImageUrl" />
35 <img :src="editedItem.courseImageUrl" v-else-if="editedItem.courseImageUrl" /> 35 <img :src="editedItem.courseImageUrl" v-else-if="editedItem.courseImageUrl" />
36 </v-avatar> 36 </v-avatar>
37 </v-flex> 37 </v-flex>
38 <v-container grid-list-md> 38 <v-container grid-list-md>
39 <v-layout wrap> 39 <v-layout wrap>
40 <v-flex xs12> 40 <v-flex xs12>
41 <v-layout> 41 <v-layout>
42 <v-flex xs6 sm6> 42 <v-flex xs6 sm6>
43 <h5 class="right my-1"> 43 <h5 class="right my-1">
44 <b>Course :</b> 44 <b>Course :</b>
45 </h5> 45 </h5>
46 </v-flex> 46 </v-flex>
47 <v-flex sm6 xs6> 47 <v-flex sm6 xs6>
48 <h5 class="my-1 left">{{ editedItem.courseName }}</h5> 48 <h5 class="my-1 left">{{ editedItem.courseName }}</h5>
49 </v-flex> 49 </v-flex>
50 </v-layout> 50 </v-layout>
51 </v-flex> 51 </v-flex>
52 </v-layout> 52 </v-layout>
53 </v-container> 53 </v-container>
54 </v-card-text> 54 </v-card-text>
55 </v-card> 55 </v-card>
56 </v-dialog> 56 </v-dialog>
57 57
58 <v-toolbar color="transparent" flat> 58 <v-toolbar color="transparent" flat>
59 <v-spacer></v-spacer> 59 <v-spacer></v-spacer>
60 <v-flex xs12 sm4 md2> 60 <v-flex xs12 sm4 md2>
61 <v-select 61 <v-select
62 small 62 small
63 :items="classesList" 63 :items="classesList"
64 label="Select Class" 64 label="Select Class"
65 v-model="getReport.classId" 65 v-model="getReport.classId"
66 item-text="classNum" 66 item-text="classNum"
67 item-value="_id" 67 item-value="_id"
68 name="Select Class" 68 name="Select Class"
69 @change="getCourses(getReport.classId)" 69 @change="getCourses(getReport.classId)"
70 class="mr-2" 70 class="mr-2"
71 required 71 required
72 ></v-select> 72 ></v-select>
73 </v-flex> 73 </v-flex>
74 <v-flex xs12 sm4 md2> 74 <v-flex xs12 sm4 md2>
75 <v-select 75 <v-select
76 :items="courseData" 76 :items="courseData"
77 label="Select Course" 77 label="Select Course"
78 v-model="getReport.courseId" 78 v-model="getReport.courseId"
79 item-text="courseName" 79 item-text="courseName"
80 item-value="_id" 80 item-value="_id"
81 required 81 required
82 class="ml-2" 82 class="ml-2"
83 @change=" getTeacherTable(getReport.classId)" 83 @change=" getTeacherTable(getReport.classId)"
84 ></v-select> 84 ></v-select>
85 </v-flex> 85 </v-flex>
86 </v-toolbar> 86 </v-toolbar>
87 87
88 <!-- LIST OF TEACHERS --> 88 <!-- LIST OF TEACHERS -->
89 <v-data-table 89 <v-data-table
90 :headers="headers" 90 :headers="headers"
91 :items="teachersList" 91 :items="teachersList"
92 :pagination.sync="pagination" 92 :pagination.sync="pagination"
93 :search="search" 93 :search="search"
94 select-all 94 select-all
95 v-model="selected" 95 v-model="selected"
96 item-key="_id" 96 item-key="_id"
97 > 97 >
98 <template slot="items" slot-scope="props"> 98 <template slot="items" slot-scope="props">
99 <tr class="tr" :active="props.selected" @click="props.selected = !props.selected"> 99 <tr class="tr" :active="props.selected" @click="props.selected = !props.selected">
100 <td class="text-xs-center td td-row"> 100 <td class="text-xs-center td td-row">
101 <v-checkbox 101 <v-checkbox
102 v-model="props.item.enroll" 102 v-model="props.item.enroll"
103 @change="enrollTeacher(props.item)" 103 @change="enrollTeacher(props.item)"
104 primary 104 primary
105 hide-details 105 hide-details
106 ></v-checkbox> 106 ></v-checkbox>
107 </td> 107 </td>
108 108
109 <td class="text-xs-center td td-row">{{ props.item.name}}</td> 109 <td class="text-xs-center td td-row">{{ props.item.name}}</td>
110 <td class="text-xs-center td td-row">{{ props.item.email }}</td> 110 <td class="text-xs-center td td-row">{{ props.item.email }}</td>
111 </tr> 111 </tr>
112 </template> 112 </template>
113 <template slot="headers" slot-scope="props"> 113 <template slot="headers" slot-scope="props">
114 <tr> 114 <tr>
115 <th> 115 <th>
116 <!-- <v-checkbox 116 <!-- <v-checkbox
117 :input-value="props.all" 117 :input-value="props.all"
118 :indeterminate="props.indeterminate" 118 :indeterminate="props.indeterminate"
119 primary 119 primary
120 hide-details 120 hide-details
121 @click.native="toggleAll" 121 @click.native="toggleAll"
122 ></v-checkbox>--> 122 ></v-checkbox>-->
123 </th> 123 </th>
124 <th 124 <th
125 v-for="header in props.headers" 125 v-for="header in props.headers"
126 :key="header.text" 126 :key="header.text"
127 :class="['column sortable', pagination.descending ? 'desc' : 'asc', header.value === pagination.sortBy ? 'active' : '']" 127 :class="['column sortable', pagination.descending ? 'desc' : 'asc', header.value === pagination.sortBy ? 'active' : '']"
128 @click="changeSort(header.value)" 128 @click="changeSort(header.value)"
129 > 129 >
130 <v-icon small>arrow_upward</v-icon> 130 <v-icon small>arrow_upward</v-icon>
131 {{ header.text }} 131 {{ header.text }}
132 </th> 132 </th>
133 </tr> 133 </tr>
134 </template> 134 </template>
135 <v-alert 135 <v-alert
136 slot="no-results" 136 slot="no-results"
137 :value="true" 137 :value="true"
138 color="error" 138 color="error"
139 icon="warning" 139 icon="warning"
140 >Your search for "{{ search }}" found no results.</v-alert> 140 >Your search for "{{ search }}" found no results.</v-alert>
141 </v-data-table> 141 </v-data-table>
142 142
143 <v-snackbar 143 <v-snackbar
144 :timeout="timeout" 144 :timeout="timeout"
145 :top="y === 'top'" 145 :top="y === 'top'"
146 :right="x === 'right'" 146 :right="x === 'right'"
147 :vertical="mode === 'vertical'" 147 :vertical="mode === 'vertical'"
148 v-model="snackbar" 148 v-model="snackbar"
149 :color="color" 149 :color="color"
150 >{{ text }}</v-snackbar> 150 >{{ text }}</v-snackbar>
151 <div class="loader" v-if="showLoader"> 151 <div class="loader" v-if="showLoader">
152 <v-progress-circular indeterminate color="white"></v-progress-circular> 152 <v-progress-circular indeterminate color="white"></v-progress-circular>
153 </div> 153 </div>
154 </v-container> 154 </v-container>
155 </template> 155 </template>
156 156
157 <script> 157 <script>
158 import http from "@/Services/http.js"; 158 import http from "@/Services/http.js";
159 import moment from "moment"; 159 import moment from "moment";
160 import countryList from "@/script/country.js"; 160 import countryList from "@/script/country.js";
161 import parent from "@/script/parents.js"; 161 import parent from "@/script/parents.js";
162 import AllApicalls from "@/Services/AllApiCalls.js"; 162 import AllApicalls from "@/Services/AllApiCalls.js";
163 163
164 export default { 164 export default {
165 mixins: [AllApicalls], 165 mixins: [AllApicalls],
166 data: () => ({ 166 data: () => ({
167 showNext: false, 167 showNext: false,
168 snackbar: false, 168 snackbar: false,
169 y: "top", 169 y: "top",
170 x: "right", 170 x: "right",
171 role: "", 171 role: "",
172 mode: "", 172 mode: "",
173 append: "", 173 append: "",
174 timeout: 3000, 174 timeout: 3000,
175 text: "", 175 text: "",
176 show: true, 176 show: true,
177 color: "", 177 color: "",
178 showSearch: false, 178 showSearch: false,
179 showLoader: false, 179 showLoader: false,
180 loading: false, 180 loading: false,
181 editLoading: false, 181 editLoading: false,
182 date: null, 182 date: null,
183 search: "", 183 search: "",
184 menu: false, 184 menu: false,
185 menu1: false, 185 menu1: false,
186 editStudentDialog: false, 186 editStudentDialog: false,
187 profileStudentDialog: false, 187 profileStudentDialog: false,
188 addCourseDialog: false, 188 addCourseDialog: false,
189 valid: true, 189 valid: true,
190 190
191 addSection: [], 191 addSection: [],
192 pagination: { 192 pagination: {
193 rowsPerPage: 10, 193 rowsPerPage: 10,
194 }, 194 },
195 imageData: {}, 195 imageData: {},
196 imageName: "", 196 imageName: "",
197 imageUrl: "", 197 imageUrl: "",
198 imageFile: "", 198 imageFile: "",
199 editImageName: "", 199 editImageName: "",
200 editImageUrl: "", 200 editImageUrl: "",
201 courseRules: [(v) => !!v || " Course Name is required"], 201 courseRules: [(v) => !!v || " Course Name is required"],
202 classRules: [(v) => !!v || " Class Name is required"], 202 classRules: [(v) => !!v || " Class Name is required"],
203 sectionRules: [(v) => !!v || " Section Name is required"], 203 sectionRules: [(v) => !!v || " Section Name is required"],
204 errorMessages: "", 204 errorMessages: "",
205 /* LIST OF TEACHERS */ 205 /* LIST OF TEACHERS */
206 headers: [ 206 headers: [
207 { 207 {
208 text: "Teacher Name", 208 text: "Teacher Name",
209 value: "name", 209 value: "name",
210 sortable: false, 210 sortable: false,
211 align: "center", 211 align: "center",
212 }, 212 },
213 { 213 {
214 text: "Email", 214 text: "Email",
215 value: "email", 215 value: "email",
216 sortable: false, 216 sortable: false,
217 align: "center", 217 align: "center",
218 }, 218 },
219 ], 219 ],
220 getReport: {}, 220 getReport: {},
221 selected: [], 221 selected: [],
222 teachers: [], 222 teachers: [],
223 // courseData: [], 223 // courseData: [],
224 editedIndex: -1, 224 editedIndex: -1,
225 addCourses: {}, 225 addCourses: {},
226 selectStudents: { 226 selectStudents: {
227 select: "", 227 select: "",
228 selectSection: "", 228 selectSection: "",
229 }, 229 },
230 editedItem: {}, 230 editedItem: {},
231 /* DIALOG ENROLL TEACHER */ 231 /* DIALOG ENROLL TEACHER */
232 dialogEnrollTeacher: false, 232 dialogEnrollTeacher: false,
233 /* SELECT CLASS*/ 233 /* SELECT CLASS*/
234 classesList: [], 234 classesList: [],
235 classId: "", 235 classId: "",
236 /* SELECT COURSE */ 236 /* SELECT COURSE */
237 courseId: "", 237 courseId: "",
238 }), 238 }),
239 239
240 methods: { 240 methods: {
241 // async populateCourses() { 241 // async populateCourses() {
242 // let response = await this.getCourseesList({ classId: getReport.classId }); 242 // let response = await this.getCourseesList({ classId: getReport.classId });
243 // }, 243 // },
244 enrollTeacher(selected) { 244 enrollTeacher(selected) {
245 let selectedTeachersArray = []; 245 let selectedTeachersArray = [];
246 selectedTeachersArray.push({ teacherId: selected._id }); 246 selectedTeachersArray.push({ teacherId: selected._id });
247 247
248 let isExists = false; 248 let isExists = false;
249 for (let item of this.selected) { 249 for (let item of this.selected) {
250 if (item._id === selected._id) { 250 if (item._id === selected._id) {
251 isExists = true; 251 isExists = true;
252 break; 252 break;
253 } 253 }
254 } 254 }
255 if (selected.enroll === true) { 255 if (selected.enroll === true) {
256 if (!isExists) this.selected.push(selected); 256 if (!isExists) this.selected.push(selected);
257 var payload = { 257 var payload = {
258 courseId: this.getReport.courseId, 258 courseId: this.getReport.courseId,
259 teacherId: selected._id, 259 teacherId: selected._id,
260 }; 260 };
261 http() 261 http()
262 .put("/assignTeacherToCourse", payload) 262 .put("/assignTeacherToCourse", payload)
263 .then((response) => { 263 .then((response) => {
264 // console.log("===response===", response); 264 // console.log("===response===", response);
265 this.snackbar = true; 265 this.snackbar = true;
266 this.color = "success"; 266 this.color = "success";
267 this.text = response.data.message; 267 this.text = response.data.message;
268 this.getParticularCourse("noSnackbar"); 268 this.getParticularCourse("noSnackbar");
269 }) 269 })
270 .catch((error) => { 270 .catch((error) => {
271 this.snackbar = true; 271 this.snackbar = true;
272 this.color = "error"; 272 this.color = "error";
273 this.text = error.response.data.message; 273 this.text = error.response.data.message;
274 }); 274 });
275 } 275 }
276 if ( 276 if (
277 selected.enroll == false && 277 selected.enroll == false &&
278 selected.enroll != undefined && 278 selected.enroll != undefined &&
279 selected.enroll != null 279 selected.enroll != null
280 ) { 280 ) {
281 var payloadDeleteTeacher = { 281 var payloadDeleteTeacher = {
282 courseId: this.getReport.courseId, 282 courseId: this.getReport.courseId,
283 assignedId: selected.enrollId, 283 assignedId: selected.enrollId,
284 }; 284 };
285 http() 285 http()
286 .put("/removeTeacherToCourse", payloadDeleteTeacher) 286 .put("/removeTeacherToCourse", payloadDeleteTeacher)
287 .then((response) => { 287 .then((response) => {
288 this.snackbar = true; 288 this.snackbar = true;
289 this.color = "success"; 289 this.color = "success";
290 this.text = response.data.message; 290 this.text = response.data.message;
291 this.getParticularCourse("noSnackbar"); 291 this.getParticularCourse("noSnackbar");
292 }) 292 })
293 .catch((error) => { 293 .catch((error) => {
294 this.snackbar = true; 294 this.snackbar = true;
295 this.text = error.response.data.message; 295 this.text = error.response.data.message;
296 }); 296 });
297 } 297 }
298 }, 298 },
299 299
300 toggleAll() { 300 toggleAll() {
301 let withdraw = false; 301 let withdraw = false;
302 if (this.selected.length === this.teachersList.length) withdraw = true; 302 if (this.selected.length === this.teachersList.length) withdraw = true;
303 303
304 if (withdraw) { 304 if (withdraw) {
305 var payload = { 305 var payload = {
306 courseId: this.courseId, 306 courseId: this.courseId,
307 teacherId: [], 307 teacherId: [],
308 }; 308 };
309 http() 309 http()
310 .put("/assignTeacherToCourse", payload) 310 .put("/assignTeacherToCourse", payload)
311 .then((response) => { 311 .then((response) => {
312 this.snackbar = true; 312 this.snackbar = true;
313 this.text = response.data.message; 313 this.text = response.data.message;
314 this.selected = []; 314 this.selected = [];
315 for (let i = 0; i < this.teachersList.length; i++) { 315 for (let i = 0; i < this.teachersList.length; i++) {
316 this.teachersList[i].enroll = false; 316 this.teachersList[i].enroll = false;
317 } 317 }
318 this.getParticularCourse(); 318 this.getParticularCourse();
319 }) 319 })
320 .catch((error) => { 320 .catch((error) => {
321 this.snackbar = true; 321 this.snackbar = true;
322 this.text = error.response.data.message; 322 this.text = error.response.data.message;
323 }); 323 });
324 } else { 324 } else {
325 let selectedTeachersArray = []; 325 let selectedTeachersArray = [];
326 for (let item of this.teachersList) { 326 for (let item of this.teachersList) {
327 if (item.enroll === false || !item.enroll) { 327 if (item.enroll === false || !item.enroll) {
328 selectedTeachersArray.push({ teacherId: item._id }); 328 selectedTeachersArray.push({ teacherId: item._id });
329 } 329 }
330 } 330 }
331 331
332 var payload = { 332 var payload = {
333 courseId: this.courseId, 333 courseId: this.courseId,
334 teacherId: selectedTeachersArray, 334 teacherId: selectedTeachersArray,
335 }; 335 };
336 http() 336 http()
337 .put("/assignTeacherToCourse", payload) 337 .put("/assignTeacherToCourse", payload)
338 .then((response) => { 338 .then((response) => {
339 this.snackbar = true; 339 this.snackbar = true;
340 this.text = response.data.message; 340 this.text = response.data.message;
341 for (let i = 0; i < this.teachersList.length; i++) { 341 for (let i = 0; i < this.teachersList.length; i++) {
342 this.teachersList[i].enroll = true; 342 this.teachersList[i].enroll = true;
343 } 343 }
344 this.getParticularCourse(); 344 this.getParticularCourse();
345 }) 345 })
346 .catch((error) => { 346 .catch((error) => {
347 this.snackbar = true; 347 this.snackbar = true;
348 this.text = error.response.data.message; 348 this.text = error.response.data.message;
349 }); 349 });
350 } 350 }
351 }, 351 },
352 getTeacherTable(id) { 352 getTeacherTable(id) {
353 // console.log("id", this.getReport.courseId); 353 // console.log("id", this.getReport.courseId);
354 this.getTeachersList("noSnackbar"); 354 this.getTeachersList("noSnackbar");
355 }, 355 },
356 getTeachersList(message) { 356 getTeachersList(message) {
357 this.showLoader = true; 357 this.showLoader = true;
358 http() 358 http()
359 .get("/getTeachersList", { 359 .get("/getTeachersList", {
360 params: { 360 params: {
361 classId: this.getReport.classId, 361 classId: this.getReport.classId,
362 }, 362 },
363 }) 363 })
364 .then((response) => { 364 .then((response) => {
365 this.teachersList = response.data.data; 365 this.teachersList = response.data.data;
366 this.showLoader = false; 366 this.showLoader = false;
367 // this.addStudentAttendenceDialog = false; 367 // this.addStudentAttendenceDialog = false;
368 var attendence = ""; 368 var attendence = "";
369 for (let i = 0; i < this.teachersList.length; i++) { 369 for (let i = 0; i < this.teachersList.length; i++) {
370 this.teachersList[i].attendence = true; 370 this.teachersList[i].attendence = true;
371 } 371 }
372 this.getParticularCourse(message); 372 this.getParticularCourse(message);
373 }) 373 })
374 .catch((error) => { 374 .catch((error) => {
375 // console.log("err====>", error); 375 // console.log("err====>", error);
376 this.showLoader = false; 376 this.showLoader = false;
377 this.snackbar = true;
378 this.color = "error";
379 this.text = error.response.data.message;
377 this.snackbar = true; 380 });
378 this.color = "error"; 381 },
379 this.text = error.response.data.message; 382 getParticularCourse(message) {
380 }); 383 this.selected = [];
381 }, 384 var payload = {
382 getParticularCourse(message) { 385 courseId: this.getReport.courseId,
383 this.selected = []; 386 };
384 var payload = { 387 http()
385 courseId: this.getReport.courseId, 388 .get("/getParticularCourse", {
386 }; 389 params: payload,
387 http() 390 })
388 .get("/getParticularCourse", { 391 .then((response) => {
389 params: payload, 392 for (let i = 0; i < response.data.data.assignedTeacher.length; i++) {
390 }) 393 var teacherId = {};
391 .then((response) => { 394 teacherId = response.data.data.assignedTeacher[i];
392 for (let i = 0; i < response.data.data.assignedTeacher.length; i++) { 395 for (let j = 0; j < this.teachersList.length; j++) {
393 var teacherId = {}; 396 if (teacherId.teacherId == this.teachersList[j]._id) {
394 teacherId = response.data.data.assignedTeacher[i]; 397 this.teachersList[j].enroll = true;
395 for (let j = 0; j < this.teachersList.length; j++) { 398 this.teachersList[j].enrollId = teacherId._id;
396 if (teacherId.teacherId == this.teachersList[j]._id) { 399 this.selected.push(this.teachersList[j]);
397 this.teachersList[j].enroll = true; 400 break;
398 this.teachersList[j].enrollId = teacherId._id; 401 }
399 this.selected.push(this.teachersList[j]); 402 }
400 break; 403 }
401 } 404 if (message != "noSnackbar") {
402 } 405 this.snackbar = true;
403 } 406 this.text = response.data.message;
404 if (message != "noSnackbar") { 407 }
405 this.snackbar = true; 408 })
406 this.text = response.data.message; 409 .catch((error) => {
407 } 410 this.snackbar = true;
408 }) 411 this.text = error.response.data.message;
409 .catch((error) => { 412 });
410 this.snackbar = true; 413 },
411 this.text = error.response.data.message; 414 getCourses(classId) {
412 }); 415 this.showLoader = true;
416 this.teachersList = [];
417 this.getReport.courseId = "";
413 }, 418 http()
414 getCourses(classId) { 419 .get("/getCourseesList", {
415 this.showLoader = true; 420 params: {
416 this.teachersList = []; 421 classId: classId,
417 this.getReport.courseId = ""; 422 },
418 http() 423 })
419 .get("/getCourseesList", { 424 .then((response) => {
420 params: { 425 this.courseData = response.data.data;
421 classId: classId, 426 this.showLoader = false;
422 }, 427 })
423 }) 428 .catch((err) => {
424 .then((response) => { 429 // console.log("err====>", err);
425 this.courseData = response.data.data; 430 this.showLoader = false;
431 this.snackbar = true;
432 this.color = "error";
433 this.text = error.response.data.message;
426 this.showLoader = false; 434 });
427 }) 435 },
428 .catch((err) => { 436 // getSections(_id) {
429 // console.log("err====>", err); 437 // var token = this.$store.state.token;
430 this.showLoader = false; 438 // this.showLoader = true;
431 this.snackbar = true; 439 // http()
432 this.color = "error"; 440 // .get(
433 this.text = error.response.data.message; 441 // "/getSectionsList",
434 }); 442 // { params: { classId: _id } },
435 }, 443 // {
436 // getSections(_id) { 444 // headers: { Authorization: "Bearer " + token },
437 // var token = this.$store.state.token; 445 // }
438 // this.showLoader = true; 446 // )
439 // http() 447 // .then((response) => {
440 // .get( 448 // this.addSection = response.data.data;
441 // "/getSectionsList", 449 // this.showLoader = false;
442 // { params: { classId: _id } }, 450 // })
443 // { 451 // .catch((err) => {
444 // headers: { Authorization: "Bearer " + token }, 452 // this.showLoader = false;
445 // } 453 // });
446 // ) 454 // },
447 // .then((response) => { 455 },
448 // this.addSection = response.data.data; 456 mounted() {
449 // this.showLoader = false; 457 var token = this.$store.state.token;
450 // }) 458 http()
451 // .catch((err) => { 459 .get("/getClassesList", {
452 // this.showLoader = false; 460 headers: { Authorization: "Bearer " + token },
453 // }); 461 })
454 // }, 462 .then((response) => {
455 }, 463 this.classesList = response.data.data;
456 mounted() { 464 })
457 var token = this.$store.state.token; 465 .catch((error) => {
458 http() 466 this.showLoader = false;
459 .get("/getClassesList", { 467 if (error.response.status === 401) {
460 headers: { Authorization: "Bearer " + token }, 468 this.$router.replace({ path: "/" });
461 }) 469 this.$store.dispatch("setToken", null);
462 .then((response) => { 470 this.$store.dispatch("Id", null);
463 this.classesList = response.data.data; 471 this.$store.dispatch("Role", null);
464 }) 472 }
465 .catch((error) => { 473 });
466 this.showLoader = false; 474 },
467 if (error.response.status === 401) { 475 };
468 this.$router.replace({ path: "/" }); 476 </script>
469 this.$store.dispatch("setToken", null); 477 <style scoped>
470 this.$store.dispatch("Id", null); 478 .active {
471 this.$store.dispatch("Role", null); 479 background-color: gray;
472 } 480 color: white !important;
473 }); 481 }
474 }, 482 .activebtn {
475 }; 483 color: black !important;
476 </script> 484 }
477 <style scoped> 485 </style>
src/pages/Attendence/studentAttendence.vue
Diff comments   View file @8b7976c
1 <template> 1 <template>
2 <v-container fluid class="body-color"> 2 <v-container fluid class="body-color">
3 <v-snackbar 3 <v-snackbar
4 :timeout="timeout" 4 :timeout="timeout"
5 :top="y === 'top'" 5 :top="y === 'top'"
6 :right="x === 'right'" 6 :right="x === 'right'"
7 :vertical="mode === 'vertical'" 7 :vertical="mode === 'vertical'"
8 v-model="snackbar" 8 v-model="snackbar"
9 color="success" 9 color="success"
10 >{{ text }}</v-snackbar> 10 >{{ text }}</v-snackbar>
11 <!-- ****** ATTENDENCE STUDENTS TABLE ****** --> 11 <!-- ****** ATTENDENCE STUDENTS TABLE ****** -->
12 <!-- <download-csv :data="json_data"> 12 <!-- <download-csv :data="json_data">
13 <v-btn>Download Data</v-btn> 13 <v-btn>Download Data</v-btn>
14 </download-csv>--> 14 </download-csv>-->
15 <v-toolbar color="transparent" flat> 15 <v-toolbar color="transparent" flat>
16 <v-btn 16 <v-btn
17 fab 17 fab
18 dark 18 dark
19 class="open-dialog-button hidden-xl-only hidden-md-only hidden-lg-only" 19 class="open-dialog-button hidden-xl-only hidden-md-only hidden-lg-only"
20 small 20 small
21 @click="addStudentAttendenceDialog = true" 21 @click="addStudentAttendenceDialog = true"
22 > 22 >
23 <v-icon dark>add</v-icon> 23 <v-icon dark>add</v-icon>
24 </v-btn> 24 </v-btn>
25 <v-btn 25 <v-btn
26 v-if="role != 'ADMIN' && schoolRole != 'SCHOOLADMIN' " 26 v-if="role != 'ADMIN' && schoolRole != 'SCHOOLADMIN' "
27 round 27 round
28 class="open-dialog-button hidden-sm-only hidden-xs-only" 28 class="open-dialog-button hidden-sm-only hidden-xs-only"
29 dark 29 dark
30 @click="addStudentAttendenceDialog = true" 30 @click="addStudentAttendenceDialog = true"
31 > 31 >
32 <v-icon class="white--text pr-1" size="20">add</v-icon>Add Student Attendence 32 <v-icon class="white--text pr-1" size="20">add</v-icon>Add Student Attendence
33 </v-btn> 33 </v-btn>
34 34
35 <v-spacer></v-spacer> 35 <v-spacer></v-spacer>
36 <v-flex xs12 sm4 md2> 36 <v-flex xs12 sm4 md2>
37 <v-select 37 <v-select
38 small 38 small
39 :items="addclass" 39 :items="addclass"
40 label="Select Class" 40 label="Select Class"
41 v-model="getAttendence.classId" 41 v-model="getAttendence.classId"
42 item-text="classNum" 42 item-text="classNum"
43 item-value="_id" 43 item-value="_id"
44 name="Select Class" 44 name="Select Class"
45 @change="getSection(getAttendence.classId)" 45 @change="getSection(getAttendence.classId)"
46 class="px-2" 46 class="px-2"
47 required 47 required
48 ></v-select> 48 ></v-select>
49 </v-flex> 49 </v-flex>
50 <v-flex xs12 sm4 md2> 50 <v-flex xs12 sm4 md2>
51 <v-select 51 <v-select
52 small 52 small
53 :items="addSection" 53 :items="addSection"
54 label="Select Section" 54 label="Select Section"
55 v-model="getAttendence.sectionId" 55 v-model="getAttendence.sectionId"
56 item-text="name" 56 item-text="name"
57 item-value="_id" 57 item-value="_id"
58 name="Select Section" 58 name="Select Section"
59 @change="getStudentsDetail(getAttendence.sectionId)" 59 @change="getStudentsDetail(getAttendence.sectionId)"
60 class="px-2" 60 class="px-2"
61 required 61 required
62 ></v-select> 62 ></v-select>
63 </v-flex> 63 </v-flex>
64 <v-card-title class="body-1" v-show="show"> 64 <v-card-title class="body-1" v-show="show">
65 <v-btn icon large flat @click="displaySearch"> 65 <v-btn icon large flat @click="displaySearch">
66 <v-avatar size="27"> 66 <v-avatar size="27">
67 <img src="/static/icon/search.png" alt="icon" /> 67 <img src="/static/icon/search.png" alt="icon" />
68 </v-avatar> 68 </v-avatar>
69 </v-btn> 69 </v-btn>
70 </v-card-title> 70 </v-card-title>
71 <v-flex xs8 sm8 md3 lg2 v-if="showSearch"> 71 <v-flex xs8 sm8 md3 lg2 v-if="showSearch">
72 <v-layout> 72 <v-layout>
73 <v-text-field 73 <v-text-field
74 autofocus 74 autofocus
75 v-model="search" 75 v-model="search"
76 label="Search" 76 label="Search"
77 prepend-inner-icon="search" 77 prepend-inner-icon="search"
78 color="primary" 78 color="primary"
79 ></v-text-field> 79 ></v-text-field>
80 <v-icon @click="closeSearch" color="error">close</v-icon> 80 <v-icon @click="closeSearch" color="error">close</v-icon>
81 </v-layout> 81 </v-layout>
82 </v-flex> 82 </v-flex>
83 </v-toolbar> 83 </v-toolbar>
84 <v-data-table 84 <v-data-table
85 :headers="headers" 85 :headers="headers"
86 :items="studentsData" 86 :items="studentsData"
87 :pagination.sync="pagination" 87 :pagination.sync="pagination"
88 :search="search" 88 :search="search"
89 > 89 >
90 <template slot="items" slot-scope="props"> 90 <template slot="items" slot-scope="props">
91 <tr class="tr"> 91 <tr class="tr">
92 <td class="td td-row">{{ props.index + 1}}</td> 92 <td class="td td-row">{{ props.index + 1}}</td>
93 <td class="text-xs-center td td-row"> 93 <td class="text-xs-center td td-row">
94 <v-avatar size="40"> 94 <v-avatar size="40">
95 <img :src="props.item.profilePicUrl" v-if="props.item.profilePicUrl" /> 95 <img :src="props.item.profilePicUrl" v-if="props.item.profilePicUrl" />
96 <img src="/static/icon/user.png" v-else-if="!props.item.profilePicUrl" /> 96 <img src="/static/icon/user.png" v-else-if="!props.item.profilePicUrl" />
97 </v-avatar> 97 </v-avatar>
98 </td> 98 </td>
99 <td class="text-xs-center td td-row">{{ props.item.name}}</td> 99 <td class="text-xs-center td td-row">{{ props.item.name}}</td>
100 <td class="text-xs-center td td-row">{{ props.item.fatherCellNo}}</td> 100 <td class="text-xs-center td td-row">{{ props.item.fatherCellNo}}</td>
101 <td class="text-xs-center td td-row">{{ props.item.email }}</td> 101 <td class="text-xs-center td td-row">{{ props.item.email }}</td>
102 <td class="text-xs-center td td-row"> 102 <td class="text-xs-center td td-row">
103 <router-link :to="{ name:'View Students Attendence',params: { id:props.item._id } }"> 103 <router-link :to="{ name:'View Students Attendence',params: { id:props.item._id } }">
104 <v-tooltip top> 104 <v-tooltip top>
105 <img 105 <img
106 slot="activator" 106 slot="activator"
107 style="cursor:pointer; width:20px; height:25px; " 107 style="cursor:pointer; width:20px; height:25px; "
108 class="mr-3" 108 class="mr-3"
109 src="/static/icon/view.png" 109 src="/static/icon/view.png"
110 /> 110 />
111 <span>View</span> 111 <span>View</span>
112 </v-tooltip> 112 </v-tooltip>
113 </router-link> 113 </router-link>
114 </td> 114 </td>
115 </tr> 115 </tr>
116 </template> 116 </template>
117 <v-alert 117 <v-alert
118 slot="no-results" 118 slot="no-results"
119 :value="true" 119 :value="true"
120 color="error" 120 color="error"
121 icon="warning" 121 icon="warning"
122 >Your search for "{{ search }}" found no results.</v-alert> 122 >Your search for "{{ search }}" found no results.</v-alert>
123 </v-data-table> 123 </v-data-table>
124 <!-- ****** Add Students Attendece****** --> 124 <!-- ****** Add Students Attendece****** -->
125 <v-dialog 125 <v-dialog
126 v-model="addStudentAttendenceDialog"
127 width="1600"
128 v-if="addStudentAttendenceDialog"
129 persistent
130 >
126 v-model="addStudentAttendenceDialog" 131 <v-card flat class="pa-2">
127 width="1600" 132 <v-layout>
128 v-if="addStudentAttendenceDialog" 133 <v-flex xs12>
129 persistent 134 <label class="title text-xs-center">Add Student Attendence</label>
130 > 135 <v-icon
131 <v-card flat class="pa-2"> 136 size="24"
132 <v-layout> 137 class="right"
133 <v-flex xs12> 138 @click="$refs.form.reset();addStudentAttendenceDialog = false"
134 <label class="title text-xs-center">Add Student Attendence</label> 139 >cancel</v-icon>
135 <v-icon 140 </v-flex>
136 size="24" 141 </v-layout>
137 class="right" 142 <v-flex xs12 class="mt-4">
138 @click="$refs.form.reset();addStudentAttendenceDialog = false" 143 <v-form ref="form" v-model="valid" lazy-validation>
139 >cancel</v-icon> 144 <v-flex xs12 sm12 lg12>
140 </v-flex> 145 <v-layout wrap>
141 </v-layout> 146 <v-flex xs6 sm6 lg3 md4>
142 <v-flex xs12 class="mt-4"> 147 <v-layout>
143 <v-form ref="form" v-model="valid" lazy-validation> 148 <v-flex xs3 sm6 lg2 class="subheading mt-4">
144 <v-flex xs12 sm12 lg12> 149 <label class="right">Class:</label>
145 <v-layout wrap> 150 </v-flex>
146 <v-flex xs6 sm6 lg3 md4> 151 <v-flex xs9 sm6 lg8 class="ml-2">
147 <v-layout> 152 <v-select
148 <v-flex xs3 sm6 lg2 class="subheading mt-4"> 153 v-model="getReport.classId"
149 <label class="right">Class:</label> 154 label="Select your class"
150 </v-flex> 155 type="text"
151 <v-flex xs9 sm6 lg8 class="ml-2"> 156 :items="addclass"
152 <v-select 157 item-text="classNum"
153 v-model="getReport.classId" 158 item-value="_id"
154 label="Select your class" 159 :rules="classRules"
155 type="text" 160 @change="getSection(getReport.classId)"
156 :items="addclass" 161 required
157 item-text="classNum" 162 ></v-select>
158 item-value="_id" 163 </v-flex>
159 :rules="classRules" 164 </v-layout>
160 @change="getSection(getReport.classId)" 165 </v-flex>
161 required 166 <v-flex xs6 sm6 lg3 md8>
162 ></v-select> 167 <v-layout>
163 </v-flex> 168 <v-flex xs3 sm6 lg2 class="subheading mt-4">
164 </v-layout> 169 <label class="right">Section:</label>
165 </v-flex> 170 </v-flex>
166 <v-flex xs6 sm6 lg3 md8> 171 <v-flex xs9 sm6 lg8 class="ml-2">
167 <v-layout> 172 <v-select
168 <v-flex xs3 sm6 lg2 class="subheading mt-4"> 173 :items="addSection"
169 <label class="right">Section:</label> 174 label="Select your Section"
170 </v-flex> 175 v-model="getReport.sectionId"
171 <v-flex xs9 sm6 lg8 class="ml-2"> 176 item-text="name"
172 <v-select 177 item-value="_id"
173 :items="addSection" 178 name="Select Section"
174 label="Select your Section" 179 :rules="sectionRules"
175 v-model="getReport.sectionId" 180 required
176 item-text="name" 181 ></v-select>
177 item-value="_id" 182 </v-flex>
178 name="Select Section" 183 </v-layout>
179 :rules="sectionRules" 184 </v-flex>
180 required 185 <v-flex xs6 sm6 lg3 md4>
181 ></v-select> 186 <v-menu
182 </v-flex> 187 ref="menu"
183 </v-layout> 188 :close-on-content-click="false"
184 </v-flex> 189 v-model="menu"
185 <v-flex xs6 sm6 lg3 md4> 190 :nudge-right="40"
186 <v-menu 191 lazy
187 ref="menu" 192 transition="scale-transition"
188 :close-on-content-click="false" 193 offset-y
189 v-model="menu" 194 full-width
190 :nudge-right="40" 195 min-width="290px"
191 lazy 196 >
192 transition="scale-transition" 197 <v-text-field
193 offset-y 198 slot="activator"
194 full-width 199 v-model="date"
195 min-width="290px" 200 label="Select Date"
196 > 201 append-icon="event"
197 <v-text-field 202 :rules="dataValid"
198 slot="activator" 203 readonly
199 v-model="date" 204 ></v-text-field>
200 label="Select Date" 205 <v-date-picker
201 append-icon="event" 206 ref="picker"
202 :rules="dataValid" 207 v-model="date"
203 readonly 208 :max="new Date().toISOString().substr(0, 10)"
204 ></v-text-field> 209 min="1950-01-01"
205 <v-date-picker 210 @change="save"
206 ref="picker" 211 ></v-date-picker>
207 v-model="date" 212 </v-menu>
208 :max="new Date().toISOString().substr(0, 10)" 213 </v-flex>
209 min="1950-01-01" 214 <v-flex xs6 sm6 lg9 md8>
210 @change="save" 215 <v-btn round dark class="add-button" @click="showTable">Attendence</v-btn>
211 ></v-date-picker> 216 </v-flex>
212 </v-menu> 217 </v-layout>
213 </v-flex> 218 </v-flex>
214 <v-flex xs6 sm6 lg9 md8> 219 </v-form>
215 <v-btn round dark class="add-button" @click="showTable">Attendence</v-btn> 220 </v-flex>
216 </v-flex> 221 <v-flex xs12 v-show="attendeceTable" class>
217 </v-layout> 222 <v-data-table
218 </v-flex> 223 :headers="headers"
219 </v-form> 224 :items="studentsData"
220 </v-flex> 225 :pagination.sync="pagination"
221 <v-flex xs12 v-show="attendeceTable" class> 226 :search="search"
222 <v-data-table 227 >
223 :headers="headers" 228 <template slot="items" slot-scope="props">
224 :items="studentsData" 229 <tr class="tr">
225 :pagination.sync="pagination" 230 <td class="td td-row">{{ props.index + 1}}</td>
226 :search="search" 231 <td class="text-xs-center td td-row">
227 > 232 <v-avatar size="40">
228 <template slot="items" slot-scope="props"> 233 <img :src="props.item.profilePicUrl" v-if="props.item.profilePicUrl" />
229 <tr class="tr"> 234 <img src="/static/icon/user.png" v-else-if="!props.item.profilePicUrl" />
230 <td class="td td-row">{{ props.index + 1}}</td> 235 </v-avatar>
231 <td class="text-xs-center td td-row"> 236 </td>
232 <v-avatar size="40"> 237 <td class="text-xs-center td td-row">{{ props.item.name}}</td>
233 <img :src="props.item.profilePicUrl" v-if="props.item.profilePicUrl" /> 238 <td class="text-xs-center td td-row">{{ props.item.fatherCellNo }}</td>
234 <img src="/static/icon/user.png" v-else-if="!props.item.profilePicUrl" /> 239 <td class="text-xs-center td td-row">{{ props.item.email }}</td>
235 </v-avatar> 240 <td class="text-xs-center td td-row">
236 </td> 241 <v-radio-group v-model="props.item.attendence" :mandatory="false" row>
237 <td class="text-xs-center td td-row">{{ props.item.name}}</td> 242 <v-radio
238 <td class="text-xs-center td td-row">{{ props.item.fatherCellNo }}</td> 243 v-for="attendences in attendenceType"
239 <td class="text-xs-center td td-row">{{ props.item.email }}</td> 244 :key="attendences.value"
240 <td class="text-xs-center td td-row"> 245 :label="`${attendences.label}`"
241 <v-radio-group v-model="props.item.attendence" :mandatory="false" row> 246 :value="attendences.value"
242 <v-radio 247 ></v-radio>
243 v-for="attendences in attendenceType" 248 </v-radio-group>
244 :key="attendences.value" 249 </td>
245 :label="`${attendences.label}`" 250 </tr>
246 :value="attendences.value" 251 </template>
247 ></v-radio> 252 </v-data-table>
248 </v-radio-group> 253 <v-flex xs12>
249 </td> 254 <v-card-actions>
250 </tr> 255 <v-spacer></v-spacer>
251 </template> 256 <v-btn @click="update()" class="add-button" round dark>Submit</v-btn>
252 </v-data-table> 257 </v-card-actions>
253 <v-flex xs12> 258 </v-flex>
254 <v-card-actions> 259 </v-flex>
255 <v-spacer></v-spacer> 260 </v-card>
256 <v-btn @click="update()" class="add-button" round dark>Submit</v-btn> 261 </v-dialog>
257 </v-card-actions> 262 <v-snackbar
258 </v-flex> 263 :timeout="timeout"
259 </v-flex> 264 :top="y === 'top'"
260 </v-card> 265 :right="x === 'right'"
261 </v-dialog> 266 :vertical="mode === 'vertical'"
262 <v-snackbar 267 v-model="snackbar"
263 :timeout="timeout" 268 color="success"
264 :top="y === 'top'" 269 >{{ text }}</v-snackbar>
265 :right="x === 'right'" 270 <div class="loader" v-if="showLoader">
266 :vertical="mode === 'vertical'" 271 <v-progress-circular indeterminate color="white"></v-progress-circular>
267 v-model="snackbar" 272 </div>
268 color="success" 273 </v-container>
269 >{{ text }}</v-snackbar> 274 </template>
270 <div class="loader" v-if="showLoader"> 275
271 <v-progress-circular indeterminate color="white"></v-progress-circular> 276 <script>
272 </div> 277 import http from "@/Services/http.js";
273 </v-container> 278 import moment from "moment";
274 </template> 279
275 280 export default {
276 <script> 281 data: () => ({
277 import http from "@/Services/http.js"; 282 snackbar: false,
278 import moment from "moment"; 283 y: "top",
279 284 x: "right",
280 export default { 285 mode: "",
281 data: () => ({ 286 timeout: 3000,
282 snackbar: false, 287 text: "",
283 y: "top", 288 show: true,
284 x: "right", 289 showSearch: false,
285 mode: "", 290 showLoader: false,
286 timeout: 3000, 291 loading: false,
287 text: "", 292 date: null,
288 show: true, 293 search: "",
289 showSearch: false, 294 addclass: [],
290 showLoader: false, 295 pagination: {
291 loading: false, 296 rowsPerPage: 10,
292 date: null, 297 },
293 search: "", 298 imageData: {},
294 addclass: [], 299 imageName: "",
295 pagination: { 300 imageUrl: "",
296 rowsPerPage: 10, 301 imageFile: "",
297 }, 302 headers: [
298 imageData: {}, 303 {
299 imageName: "", 304 text: "No",
300 imageUrl: "", 305 align: "",
301 imageFile: "", 306 sortable: false,
302 headers: [ 307 value: "index",
303 { 308 },
304 text: "No", 309 {
305 align: "", 310 text: "Profile Pic",
306 sortable: false, 311 value: "profilprofilePicUrlePicUrl",
307 value: "index", 312 sortable: false,
308 }, 313 align: "center",
309 { 314 },
310 text: "Profile Pic", 315 { text: "Name", value: "name", sortable: false, align: "center" },
311 value: "profilprofilePicUrlePicUrl", 316 {
312 sortable: false, 317 text: "Mobile No",
313 align: "center", 318 value: "fatherCellNo",
314 }, 319 sortable: false,
315 { text: "Name", value: "name", sortable: false, align: "center" }, 320 align: "center",
316 { 321 },
317 text: "Mobile No", 322 { text: "Email", value: "email", sortable: false, align: "center" },
318 value: "fatherCellNo", 323 { text: "Attendance", value: "", sortable: false, align: "center" },
319 sortable: false, 324 ],
320 align: "center", 325 // json_data: [],
321 }, 326 parentId: "",
322 { text: "Email", value: "email", sortable: false, align: "center" }, 327 token: "",
323 { text: "Attendance", value: "", sortable: false, align: "center" }, 328 selectStudents: {
324 ], 329 select: "",
325 // json_data: [], 330 selectSection: "",
326 parentId: "", 331 },
327 token: "", 332
328 selectStudents: { 333 role: "",
329 select: "", 334 schoolRole: "",
330 selectSection: "", 335 addStudentAttendenceDialog: false,
331 }, 336 attendeceTable: false,
332 337 menu: false,
333 role: "", 338 valid: true,
334 schoolRole: "", 339
335 addStudentAttendenceDialog: false, 340 getReport: {},
336 attendeceTable: false, 341 getAttendence: {},
337 menu: false, 342 studentsList: [],
338 valid: true, 343 studentsData: [],
339 344 addSection: [],
340 getReport: {}, 345
341 getAttendence: {}, 346 SectionName: ["A", "B", "C", "D", "E", "F"],
342 studentsList: [], 347 classRules: [(v) => !!v || "Class is required"],
343 studentsData: [], 348 sectionRules: [(v) => !!v || "Class is required"],
344 addSection: [], 349 studentRules: [(v) => !!v || "Student is required"],
345 350 dataValid: [(v) => !!v || "Date is required"],
346 SectionName: ["A", "B", "C", "D", "E", "F"], 351
347 classRules: [(v) => !!v || "Class is required"], 352 attendenceType: [
348 sectionRules: [(v) => !!v || "Class is required"], 353 {
349 studentRules: [(v) => !!v || "Student is required"], 354 label: "Present",
350 dataValid: [(v) => !!v || "Date is required"], 355 value: true,
351 356 },
352 attendenceType: [ 357 {
353 { 358 label: "Absent",
354 label: "Present", 359 value: false,
355 value: true, 360 },
356 }, 361 ],
357 { 362 }),
358 label: "Absent", 363 watch: {
359 value: false, 364 addStudentAttendenceDialog: function (val) {
360 }, 365 if (!val) {
361 ], 366 this.getReport = [];
362 }), 367 // this.studentsData = [];
363 watch: { 368 }
364 addStudentAttendenceDialog: function (val) { 369 },
365 if (!val) { 370 },
366 this.getReport = []; 371 methods: {
367 // this.studentsData = []; 372 save(date) {
368 } 373 this.$refs.menu.save(date);
369 }, 374 },
370 }, 375 showTable() {
371 methods: { 376 this.attendeceTable = true;
372 save(date) { 377 this.getStudents();
373 this.$refs.menu.save(date); 378 },
374 }, 379 getAllClass() {
375 showTable() { 380 http()
376 this.attendeceTable = true; 381 .get("/getClassesList", {
377 this.getStudents(); 382 headers: { Authorization: "Bearer " + this.token },
378 }, 383 })
379 getAllClass() { 384 .then((response) => {
380 http() 385 this.addclass = response.data.data;
381 .get("/getClassesList", { 386 })
382 headers: { Authorization: "Bearer " + this.token }, 387 .catch((error) => {
383 }) 388 // console.log("err====>", err);
384 .then((response) => { 389 // this.$router.replace({ path: "/" });
390 this.snackbar = true;
391 this.color = "error";
392 this.text = error.response.data.message;
385 this.addclass = response.data.data; 393 });
386 }) 394 },
387 .catch((error) => { 395 getSection(_id) {
388 // console.log("err====>", err); 396 this.showLoader = true;
389 // this.$router.replace({ path: "/" }); 397 http()
390 this.snackbar = true; 398 .get(
391 this.color = "error"; 399 "/getSectionsList",
392 this.text = error.response.data.message; 400 { params: { classId: _id } },
393 }); 401 {
394 }, 402 headers: { Authorization: "Bearer " + this.token },
395 getSection(_id) { 403 }
396 this.showLoader = true; 404 )
397 http() 405 .then((response) => {
398 .get( 406 this.addSection = response.data.data;
399 "/getSectionsList", 407 this.showLoader = false;
400 { params: { classId: _id } }, 408 })
401 { 409 .catch((err) => {
402 headers: { Authorization: "Bearer " + this.token }, 410 this.showLoader = false;
411 this.snackbar = true;
412 this.color = "error";
413 this.text = error.response.data.message;
403 } 414 // console.log("err====>", err);
404 ) 415 });
405 .then((response) => { 416 },
406 this.addSection = response.data.data; 417 getStudents(_id) {
407 this.showLoader = false; 418 this.showLoader = true;
408 }) 419 http()
409 .catch((err) => { 420 .get("/getStudentWithClass", {
410 this.showLoader = false; 421 params: {
411 this.snackbar = true; 422 classId: this.getReport.classId,
412 this.color = "error"; 423 sectionId: this.getReport.sectionId,
413 this.text = error.response.data.message; 424 },
414 // console.log("err====>", err); 425 })
415 }); 426 .then((response) => {
416 }, 427 this.studentsData = response.data.data;
417 getStudents(_id) { 428 this.showLoader = false;
418 this.showLoader = true; 429 // this.addStudentAttendenceDialog = false;
419 http() 430 var attendence = "";
420 .get("/getStudentWithClass", { 431 for (let i = 0; i < this.studentsData.length; i++) {
421 params: { 432 this.studentsData[i].attendence = true;
422 classId: this.getReport.classId, 433 }
423 sectionId: this.getReport.sectionId, 434 })
424 }, 435 .catch((error) => {
425 }) 436 // console.log("err====>", error);
426 .then((response) => { 437 this.showLoader = false;
438 this.snackbar = true;
439 this.color = "error";
440 this.text = error.response.data.message;
427 this.studentsData = response.data.data; 441 });
428 this.showLoader = false; 442 },
429 // this.addStudentAttendenceDialog = false; 443 getStudentsDetail(_id) {
430 var attendence = ""; 444 this.showLoader = true;
431 for (let i = 0; i < this.studentsData.length; i++) { 445 http()
432 this.studentsData[i].attendence = true; 446 .get("/getStudentWithClass", {
433 } 447 params: {
434 }) 448 classId: this.getAttendence.classId,
435 .catch((error) => { 449 sectionId: this.getAttendence.sectionId,
436 // console.log("err====>", error); 450 },
437 this.showLoader = false; 451 })
438 this.snackbar = true; 452 .then((response) => {
439 this.color = "error"; 453 this.studentsData = response.data.data;
440 this.text = error.response.data.message; 454 this.showLoader = false;
441 }); 455 // this.addStudentAttendenceDialog = false;
442 }, 456 var attendence = "";
443 getStudentsDetail(_id) { 457 for (let i = 0; i < this.studentsData.length; i++) {
444 this.showLoader = true; 458 this.studentsData[i].attendence = true;
445 http() 459 }
446 .get("/getStudentWithClass", { 460 })
447 params: { 461 .catch((error) => {
448 classId: this.getAttendence.classId, 462 // console.log("err====>", error);
449 sectionId: this.getAttendence.sectionId, 463 this.showLoader = false;
464 this.snackbar = true;
465 this.color = "error";
466 this.text = error.response.data.message;
450 }, 467 });
451 }) 468 },
452 .then((response) => { 469 update() {
453 this.studentsData = response.data.data; 470 var studentsAttendence = [];
454 this.showLoader = false; 471 for (var j = 0; j < this.studentsData.length; j++) {
455 // this.addStudentAttendenceDialog = false; 472 studentsAttendence.push({
456 var attendence = ""; 473 studentId: this.studentsData[j]._id,
457 for (let i = 0; i < this.studentsData.length; i++) { 474 isPresent: this.studentsData[j].attendence,
458 this.studentsData[i].attendence = true; 475 });
459 } 476 }
460 }) 477 if (this.$refs.form.validate()) {
461 .catch((error) => { 478 let attendanceData = {
462 // console.log("err====>", error); 479 sectionId: this.getReport.sectionId,
463 this.showLoader = false; 480 date: this.date,
464 this.snackbar = true; 481 students: studentsAttendence,
465 this.color = "error"; 482 };
466 this.text = error.response.data.message; 483 http()
467 }); 484 .put("/updateAttendance", attendanceData)
468 }, 485 .then((response) => {
469 update() { 486 this.snackbar = true;
470 var studentsAttendence = []; 487 this.text = response.data.message;
471 for (var j = 0; j < this.studentsData.length; j++) { 488 this.addStudentAttendenceDialog = false;
472 studentsAttendence.push({ 489 })
473 studentId: this.studentsData[j]._id, 490 .catch((error) => {
474 isPresent: this.studentsData[j].attendence, 491 this.snackbar = true;
475 }); 492 this.text = error.response.data.message;
476 } 493 });
477 if (this.$refs.form.validate()) { 494 }
478 let attendanceData = { 495 },
479 sectionId: this.getReport.sectionId, 496
480 date: this.date, 497 displaySearch() {
481 students: studentsAttendence, 498 this.show = false;
482 }; 499 this.showSearch = true;
483 http() 500 },
484 .put("/updateAttendance", attendanceData) 501 closeSearch() {
485 .then((response) => { 502 this.showSearch = false;
486 this.snackbar = true; 503 this.show = true;
487 this.text = response.data.message; 504 this.search = "";
488 this.addStudentAttendenceDialog = false; 505 },
489 }) 506 },
490 .catch((error) => { 507 mounted() {
491 this.snackbar = true; 508 // this.getStudentList();
492 this.text = error.response.data.message; 509 this.token = this.$store.state.token;
493 }); 510 this.getAllClass();
494 } 511 this.role = this.$store.state.role;
495 }, 512 },
496 513 };
497 displaySearch() { 514 </script>
src/pages/Attendence/userAttendence.vue
Diff comments   View file @8b7976c
1 <template> 1 <template>
2 <v-app id="pages-dasboard"> 2 <v-app id="pages-dasboard">
3 <!-- ****** EXISTING-USER TABLE DATA****** --> 3 <!-- ****** EXISTING-USER TABLE DATA****** -->
4 <v-card flat> 4 <v-card flat>
5 <v-card-actions> 5 <v-card-actions>
6 <!-- <v-layout> 6 <!-- <v-layout>
7 <h4 class="right mt-2 ml-2">User Attendence</h4> 7 <h4 class="right mt-2 ml-2">User Attendence</h4>
8 </v-layout>--> 8 </v-layout>-->
9 <v-spacer></v-spacer> 9 <v-spacer></v-spacer>
10 </v-card-actions> 10 </v-card-actions>
11 </v-card> 11 </v-card>
12 <v-data-table 12 <v-data-table
13 :headers="headers" 13 :headers="headers"
14 :items="desserts" 14 :items="desserts"
15 :pagination.sync="pagination" 15 :pagination.sync="pagination"
16 :search="search" 16 :search="search"
17 > 17 >
18 <template slot="items" slot-scope="props"> 18 <template slot="items" slot-scope="props">
19 <td id="td" class="text-xs-center">{{ props.index + 1 }}</td> 19 <td id="td" class="text-xs-center">{{ props.index + 1 }}</td>
20 <td id="td" class="text-xs-center"> 20 <td id="td" class="text-xs-center">
21 <v-avatar> 21 <v-avatar>
22 <img :src="props.item.profilePicUrl" v-if="props.item.profilePicUrl" /> 22 <img :src="props.item.profilePicUrl" v-if="props.item.profilePicUrl" />
23 <img src="/static/icon/user.png" v-else-if="!props.item.profilePicUrl" /> 23 <img src="/static/icon/user.png" v-else-if="!props.item.profilePicUrl" />
24 </v-avatar> 24 </v-avatar>
25 </td> 25 </td>
26 <td id="td" class="text-xs-center">{{ props.item.name}}</td> 26 <td id="td" class="text-xs-center">{{ props.item.name}}</td>
27 <td id="td" class="text-xs-center">{{ props.item.email }}</td> 27 <td id="td" class="text-xs-center">{{ props.item.email }}</td>
28 <td id="td" class="text-xs-center">{{ dates(props.item.dob) }}</td> 28 <td id="td" class="text-xs-center">{{ dates(props.item.dob) }}</td>
29 <td id="td" class="text-xs-center">{{ dates(props.item.joiningDate)}}</td> 29 <td id="td" class="text-xs-center">{{ dates(props.item.joiningDate)}}</td>
30 <td id="td" class="text-xs-center">{{ props.item.phone }}</td> 30 <td id="td" class="text-xs-center">{{ props.item.phone }}</td>
31 <td class="text-xs-center"> 31 <td class="text-xs-center">
32 <span> 32 <span>
33 <img 33 <img
34 style="cursor:pointer; width:25px; height:18px; " 34 style="cursor:pointer; width:25px; height:18px; "
35 class="mr-5" 35 class="mr-5"
36 @click="profile(props.item)" 36 @click="profile(props.item)"
37 src="/static/icon/eye1.png" 37 src="/static/icon/eye1.png"
38 /> 38 />
39 <!-- <img 39 <!-- <img
40 style="cursor:pointer; width:20px; height:18px; " 40 style="cursor:pointer; width:20px; height:18px; "
41 class="mr-5" 41 class="mr-5"
42 @click="editItem(props.item)" 42 @click="editItem(props.item)"
43 src="/static/icon/edit1.png" 43 src="/static/icon/edit1.png"
44 /> 44 />
45 <img 45 <img
46 style="cursor:pointer;width:20px; height:20px; " 46 style="cursor:pointer;width:20px; height:20px; "
47 class="mr-5" 47 class="mr-5"
48 @click="deleteItem(props.item)" 48 @click="deleteItem(props.item)"
49 src="/static/icon/delete1.png" 49 src="/static/icon/delete1.png"
50 />--> 50 />-->
51 </span> 51 </span>
52 </td> 52 </td>
53 </template> 53 </template>
54 <v-alert 54 <v-alert
55 slot="no-results" 55 slot="no-results"
56 :value="true" 56 :value="true"
57 color="error" 57 color="error"
58 icon="warning" 58 icon="warning"
59 >Your search for "{{ search }}" found no results.</v-alert> 59 >Your search for "{{ search }}" found no results.</v-alert>
60 </v-data-table> 60 </v-data-table>
61 <div class="loader" v-if="showLoader"> 61 <div class="loader" v-if="showLoader">
62 <v-progress-circular indeterminate color="white"></v-progress-circular> 62 <v-progress-circular indeterminate color="white"></v-progress-circular>
63 </div> 63 </div>
64 </v-app> 64 </v-app>
65 </template> 65 </template>
66 66
67 <script> 67 <script>
68 import http from "@/Services/http.js"; 68 import http from "@/Services/http.js";
69 import moment from "moment"; 69 import moment from "moment";
70 70
71 export default { 71 export default {
72 data: () => ({ 72 data: () => ({
73 showLoader: false, 73 showLoader: false,
74 search: "", 74 search: "",
75 pagination: { 75 pagination: {
76 rowsPerPage: 15, 76 rowsPerPage: 15,
77 }, 77 },
78 headers: [ 78 headers: [
79 { 79 {
80 text: "No", 80 text: "No",
81 align: "center", 81 align: "center",
82 sortable: false, 82 sortable: false,
83 value: "No", 83 value: "No",
84 }, 84 },
85 { 85 {
86 text: "Profile Pic", 86 text: "Profile Pic",
87 value: "profilePicUrl", 87 value: "profilePicUrl",
88 sortable: false, 88 sortable: false,
89 align: "center", 89 align: "center",
90 }, 90 },
91 { text: "Name", value: "name", sortable: false, align: "center" }, 91 { text: "Name", value: "name", sortable: false, align: "center" },
92 { text: "Email", value: "email", sortable: false, align: "center" }, 92 { text: "Email", value: "email", sortable: false, align: "center" },
93 { text: "DOB", value: "dob", sortable: false, align: "center" }, 93 { text: "DOB", value: "dob", sortable: false, align: "center" },
94 { 94 {
95 text: "Joining Date", 95 text: "Joining Date",
96 value: "joiningDate", 96 value: "joiningDate",
97 sortable: false, 97 sortable: false,
98 align: "center", 98 align: "center",
99 }, 99 },
100 { 100 {
101 text: "Phone", 101 text: "Phone",
102 value: "phone", 102 value: "phone",
103 sortable: false, 103 sortable: false,
104 align: "center", 104 align: "center",
105 }, 105 },
106 { text: "Action", value: "", sortable: false, align: "center" }, 106 { text: "Action", value: "", sortable: false, align: "center" },
107 ], 107 ],
108 desserts: [], 108 desserts: [],
109 }), 109 }),
110 methods: { 110 methods: {
111 dates: function (date) { 111 dates: function (date) {
112 return moment(date).format("MMMM DD, YYYY"); 112 return moment(date).format("MMMM DD, YYYY");
113 }, 113 },
114 getUsersList() { 114 getUsersList() {
115 this.showLoader = true; 115 this.showLoader = true;
116 var token = this.$store.state.token; 116 var token = this.$store.state.token;
117 http() 117 http()
118 .get("/getUsersList", { 118 .get("/getUsersList", {
119 headers: { Authorization: "Bearer " + token }, 119 headers: { Authorization: "Bearer " + token },
120 }) 120 })
121 .then((response) => { 121 .then((response) => {
122 this.desserts = response.data.data; 122 this.desserts = response.data.data;
123 this.showLoader = false; 123 this.showLoader = false;
124 // console.log("UserList=====>", this.desserts); 124 // console.log("UserList=====>", this.desserts);
125 }) 125 })
126 .catch((error) => { 126 .catch((error) => {
127 this.showLoader = false; 127 this.showLoader = false;
128 if (error.response.status === 401) { 128 if (error.response.status === 401) {
129 this.$router.replace({ path: "/" }); 129 this.$router.replace({ path: "/" });
130 this.$store.dispatch("setToken", null); 130 this.$store.dispatch("setToken", null);
131 this.$store.dispatch("Id", null); 131 this.$store.dispatch("Id", null);
132 } 132 }
133 }); 133 });
134 }, 134 },
135 getRole() { 135 getRole() {
136 this.showLoader = true; 136 this.showLoader = true;
137 var token = this.$store.state.token; 137 var token = this.$store.state.token;
138 http() 138 http()
139 .get("/getRolesList", { 139 .get("/getRolesList", {
140 headers: { Authorization: "Bearer " + token }, 140 headers: { Authorization: "Bearer " + token },
141 }) 141 })
142 .then((response) => { 142 .then((response) => {
143 this.userRole = response.data.data; 143 this.userRole = response.data.data;
144 this.showLoader = false; 144 this.showLoader = false;
145 // console.log("UserList=====>",this.desserts) 145 // console.log("UserList=====>",this.desserts)
146 }) 146 })
147 .catch((error) => { 147 .catch((error) => {
148 this.showLoader = false; 148 this.showLoader = false;
149 if (error.response.status === 401) { 149 if (error.response.status === 401) {
150 this.$router.replace({ path: "/" }); 150 this.$router.replace({ path: "/" });
151 this.$store.dispatch("setToken", null); 151 this.$store.dispatch("setToken", null);
152 this.$store.dispatch("Id", null); 152 this.$store.dispatch("Id", null);
153 } 153 }
154 }); 154 });
155 }, 155 },
156 }, 156 },
157 mounted() { 157 mounted() {
158 this.getUsersList(); 158 this.getUsersList();
159 this.getRole(); 159 this.getRole();
160 }, 160 },
161 created() { 161 created() {
162 this.$root.$on("app:search", (search) => { 162 this.$root.$on("app:search", (search) => {
163 this.search = search; 163 this.search = search;
164 }); 164 });
165 }, 165 },
166 beforeDestroy() { 166 beforeDestroy() {
167 // dont forget to remove the listener 167 // dont forget to remove the listener
168 this.$root.$off("app:search"); 168 this.$root.$off("app:search");
169 }, 169 },
170 }; 170 };
171 </script> 171 </script>
172 <style scoped> 172 <style scoped>
173 .active { 173 .active {
174 background-color: gray; 174 background-color: gray;
175 color: white !important; 175 color: white !important;
176 } 176 }
177 .activebtn { 177 .activebtn {
178 color: black !important; 178 color: black !important;
179 } 179 }
180 </style> 180 </style>
src/pages/Attendence/viewStudentsAttendence.vue
Diff comments   View file @8b7976c
1 <template> 1 <template>
2 <v-container fluid grid-list-md class="body-color"> 2 <v-container fluid grid-list-md class="body-color">
3 <div v-show="hideData"> 3 <div v-show="hideData">
4 <v-layout row> 4 <v-layout row>
5 <v-btn @click="exportPdf" round class="right open-dialog-button" dark> 5 <v-btn @click="exportPdf" round class="right open-dialog-button" dark>
6 Export Pdf 6 Export Pdf
7 <v-icon dark right size="20">save_alt</v-icon> 7 <v-icon dark right size="20">save_alt</v-icon>
8 </v-btn> 8 </v-btn>
9 <v-dialog v-model="dialogExport" max-width="500px" persistent> 9 <v-dialog v-model="dialogExport" max-width="500px" persistent>
10 <v-btn round slot="activator" class="right open-dialog-button" dark> 10 <v-btn round slot="activator" class="right open-dialog-button" dark>
11 Export csv 11 Export csv
12 <v-icon dark right size="20">save_alt</v-icon> 12 <v-icon dark right size="20">save_alt</v-icon>
13 </v-btn> 13 </v-btn>
14 <v-card flat class="card-style pa-2" dark> 14 <v-card flat class="card-style pa-2" dark>
15 <v-layout> 15 <v-layout>
16 <v-flex xs12> 16 <v-flex xs12>
17 <label class="title text-xs-center">Export</label> 17 <label class="title text-xs-center">Export</label>
18 <v-icon size="24" class="right" @click="dialogExport = false">cancel</v-icon> 18 <v-icon size="24" class="right" @click="dialogExport = false">cancel</v-icon>
19 </v-flex> 19 </v-flex>
20 </v-layout> 20 </v-layout>
21 <v-card-text> 21 <v-card-text>
22 <v-container grid-list-md> 22 <v-container grid-list-md>
23 <v-layout wrap> 23 <v-layout wrap>
24 <v-flex xs12> 24 <v-flex xs12>
25 <v-menu 25 <v-menu
26 ref="menuStartDate" 26 ref="menuStartDate"
27 :close-on-content-click="false" 27 :close-on-content-click="false"
28 v-model="menuStartDate" 28 v-model="menuStartDate"
29 :nudge-right="40" 29 :nudge-right="40"
30 :return-value.sync="startDate" 30 :return-value.sync="startDate"
31 lazy 31 lazy
32 transition="scale-transition" 32 transition="scale-transition"
33 offset-y 33 offset-y
34 full-width 34 full-width
35 min-width="290px" 35 min-width="290px"
36 > 36 >
37 <v-text-field 37 <v-text-field
38 slot="activator" 38 slot="activator"
39 v-model="startDate" 39 v-model="startDate"
40 label="Select Start Date" 40 label="Select Start Date"
41 prepend-icon="event" 41 prepend-icon="event"
42 readonly 42 readonly
43 ></v-text-field> 43 ></v-text-field>
44 <v-date-picker 44 <v-date-picker
45 v-model="startDate" 45 v-model="startDate"
46 @input="$refs.menuStartDate.save(startDate)" 46 @input="$refs.menuStartDate.save(startDate)"
47 ></v-date-picker> 47 ></v-date-picker>
48 </v-menu> 48 </v-menu>
49 </v-flex> 49 </v-flex>
50 <v-flex xs12> 50 <v-flex xs12>
51 <v-menu 51 <v-menu
52 ref="menuEndDate" 52 ref="menuEndDate"
53 :close-on-content-click="false" 53 :close-on-content-click="false"
54 v-model="menuEndDate" 54 v-model="menuEndDate"
55 :nudge-right="40" 55 :nudge-right="40"
56 :return-value.sync="endDate" 56 :return-value.sync="endDate"
57 lazy 57 lazy
58 transition="scale-transition" 58 transition="scale-transition"
59 offset-y 59 offset-y
60 full-width 60 full-width
61 min-width="290px" 61 min-width="290px"
62 > 62 >
63 <v-text-field 63 <v-text-field
64 slot="activator" 64 slot="activator"
65 v-model="endDate" 65 v-model="endDate"
66 label="Select End Date" 66 label="Select End Date"
67 prepend-icon="event" 67 prepend-icon="event"
68 readonly 68 readonly
69 ></v-text-field> 69 ></v-text-field>
70 <v-date-picker v-model="endDate" @input="$refs.menuEndDate.save(endDate)"></v-date-picker> 70 <v-date-picker v-model="endDate" @input="$refs.menuEndDate.save(endDate)"></v-date-picker>
71 </v-menu> 71 </v-menu>
72 </v-flex> 72 </v-flex>
73 <v-flex xs12> 73 <v-flex xs12>
74 <v-card-actions> 74 <v-card-actions>
75 <v-spacer></v-spacer> 75 <v-spacer></v-spacer>
76 76
77 <v-btn class="add-button" round @click="exportData">Export</v-btn> 77 <v-btn class="add-button" round @click="exportData">Export</v-btn>
78 </v-card-actions> 78 </v-card-actions>
79 </v-flex> 79 </v-flex>
80 </v-layout> 80 </v-layout>
81 </v-container> 81 </v-container>
82 </v-card-text> 82 </v-card-text>
83 </v-card> 83 </v-card>
84 </v-dialog> 84 </v-dialog>
85 </v-layout> 85 </v-layout>
86 <v-layout wrap> 86 <v-layout wrap>
87 <v-flex xs12 sm12 md4> 87 <v-flex xs12 sm12 md4>
88 <v-card flat> 88 <v-card flat>
89 <!-- <v-layout> 89 <!-- <v-layout>
90 <v-flex xs12> 90 <v-flex xs12>
91 <label class="title card-style text-xs-center">Profile</label> 91 <label class="title card-style text-xs-center">Profile</label>
92 </v-flex> 92 </v-flex>
93 </v-layout>--> 93 </v-layout>-->
94 <h3 class="py-2 text-xs-center card-style white--text">Profile</h3> 94 <h3 class="py-2 text-xs-center card-style white--text">Profile</h3>
95 <v-card-text> 95 <v-card-text>
96 <v-container> 96 <v-container>
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 100 <v-flex
101 xs12 101 xs12
102 class="text-xs-center text-sm-center text-md-center text-lg-center" 102 class="text-xs-center text-sm-center text-md-center text-lg-center"
103 > 103 >
104 <v-avatar size="80px"> 104 <v-avatar size="80px">
105 <img src="/static/icon/user.png" v-if="!studentData.profilePicUrl" /> 105 <img src="/static/icon/user.png" v-if="!studentData.profilePicUrl" />
106 <img 106 <img
107 :src="studentData.profilePicUrl" 107 :src="studentData.profilePicUrl"
108 v-else-if="studentData.profilePicUrl" 108 v-else-if="studentData.profilePicUrl"
109 /> 109 />
110 </v-avatar> 110 </v-avatar>
111 </v-flex> 111 </v-flex>
112 </v-layout> 112 </v-layout>
113 <v-layout> 113 <v-layout>
114 <v-flex xs12 sm12> 114 <v-flex xs12 sm12>
115 <h3 class="text-xs-center"> 115 <h3 class="text-xs-center">
116 <b>{{ studentData.name }}</b> 116 <b>{{ studentData.name }}</b>
117 </h3> 117 </h3>
118 <p class="text-xs-center grey--text">Student</p> 118 <p class="text-xs-center grey--text">Student</p>
119 </v-flex> 119 </v-flex>
120 </v-layout> 120 </v-layout>
121 <v-layout style="border: 1px solid lightgrey;"> 121 <v-layout style="border: 1px solid lightgrey;">
122 <v-flex xs6 sm6 class="pa-0"> 122 <v-flex xs6 sm6 class="pa-0">
123 <h4 class="right"> 123 <h4 class="right">
124 <b>Roll No :</b> 124 <b>Roll No :</b>
125 </h4> 125 </h4>
126 </v-flex> 126 </v-flex>
127 <v-flex sm6 xs6 class="pa-0"> 127 <v-flex sm6 xs6 class="pa-0">
128 <h4>{{ studentData.rollNo }}</h4> 128 <h4>{{ studentData.rollNo }}</h4>
129 </v-flex> 129 </v-flex>
130 </v-layout> 130 </v-layout>
131 <v-layout style="border: 1px solid lightgrey;"> 131 <v-layout style="border: 1px solid lightgrey;">
132 <v-flex xs6 sm6 class="pa-0"> 132 <v-flex xs6 sm6 class="pa-0">
133 <h4 class="right"> 133 <h4 class="right">
134 <b>Class :</b> 134 <b>Class :</b>
135 </h4> 135 </h4>
136 </v-flex> 136 </v-flex>
137 <v-flex sm6 xs6 class="right pa-0"> 137 <v-flex sm6 xs6 class="right pa-0">
138 <h4>{{ studentData.classId.classNum }}</h4> 138 <h4>{{ studentData.classId.classNum }}</h4>
139 </v-flex> 139 </v-flex>
140 </v-layout> 140 </v-layout>
141 <v-layout style="border: 1px solid lightgrey;"> 141 <v-layout style="border: 1px solid lightgrey;">
142 <v-flex xs6 sm6 class="right pa-0"> 142 <v-flex xs6 sm6 class="right pa-0">
143 <h4 class="right"> 143 <h4 class="right">
144 <b>Section :</b> 144 <b>Section :</b>
145 </h4> 145 </h4>
146 </v-flex> 146 </v-flex>
147 <v-flex sm6 xs6 class="right pa-0"> 147 <v-flex sm6 xs6 class="right pa-0">
148 <h4>{{ studentData.sectionId.name}}</h4> 148 <h4>{{ studentData.sectionId.name}}</h4>
149 </v-flex> 149 </v-flex>
150 </v-layout> 150 </v-layout>
151 </v-flex> 151 </v-flex>
152 </v-layout> 152 </v-layout>
153 </v-container> 153 </v-container>
154 </v-card-text> 154 </v-card-text>
155 </v-card> 155 </v-card>
156 </v-flex> 156 </v-flex>
157 <v-flex xs12 sm12 md8> 157 <v-flex xs12 sm12 md8>
158 <v-card flat> 158 <v-card flat>
159 <h3 class="py-2 text-xs-center card-style white--text"> 159 <h3 class="py-2 text-xs-center card-style white--text">
160 Attendence 160 Attendence
161 <span class="ml-4"> 161 <span class="ml-4">
162 <v-avatar class="green caption" size="12"></v-avatar> 162 <v-avatar class="green caption" size="12"></v-avatar>
163 <span class="subheading">Present</span> 163 <span class="subheading">Present</span>
164 </span> 164 </span>
165 <span class="ml-4"> 165 <span class="ml-4">
166 <v-avatar color="red caption" size="12" class></v-avatar> 166 <v-avatar color="red caption" size="12" class></v-avatar>
167 <span class="subheading">Absent</span> 167 <span class="subheading">Absent</span>
168 </span> 168 </span>
169 </h3> 169 </h3>
170 <YearCalendar 170 <YearCalendar
171 v-model="year" 171 v-model="year"
172 :activeDates="activeDates" 172 :activeDates="activeDates"
173 prefixClass="your_customized_wrapper_class" 173 prefixClass="your_customized_wrapper_class"
174 :activeClass="activeClass" 174 :activeClass="activeClass"
175 ></YearCalendar> 175 ></YearCalendar>
176 </v-card> 176 </v-card>
177 </v-flex> 177 </v-flex>
178 </v-layout> 178 </v-layout>
179 </div> 179 </div>
180 <v-layout v-show="showPdfData"> 180 <v-layout v-show="showPdfData">
181 <v-container> 181 <v-container>
182 <v-flex xs12 sm12 md8 offset-sm2> 182 <v-flex xs12 sm12 md8 offset-sm2>
183 <v-btn class="right add-button" @click="generatePDF2Canvas()" :loading="loadingPdf" dark> 183 <v-btn class="right add-button" @click="generatePDF2Canvas()" :loading="loadingPdf" dark>
184 Download 184 Download
185 <v-icon dark right size="20">save_alt</v-icon> 185 <v-icon dark right size="20">save_alt</v-icon>
186 </v-btn> 186 </v-btn>
187 </v-flex> 187 </v-flex>
188 </v-container> 188 </v-container>
189 </v-layout> 189 </v-layout>
190 <v-layout v-show="showPdfData"> 190 <v-layout v-show="showPdfData">
191 <v-container> 191 <v-container>
192 <v-layout v-show="showPdfData"> 192 <v-layout v-show="showPdfData">
193 <v-flex xs12 sm12 md8 offset-sm2> 193 <v-flex xs12 sm12 md8 offset-sm2>
194 <div ref="printMe"> 194 <div ref="printMe">
195 <v-flex xs12 class="pl-3"> 195 <v-flex xs12 class="pl-3">
196 <v-layout> 196 <v-layout>
197 <v-flex xs6 sm2 class="pa-0 mb-1"> 197 <v-flex xs6 sm2 class="pa-0 mb-1">
198 <h4> 198 <h4>
199 <b>Name</b> 199 <b>Name</b>
200 </h4> 200 </h4>
201 </v-flex> 201 </v-flex>
202 <v-flex sm10 xs6 class="pa-0"> 202 <v-flex sm10 xs6 class="pa-0">
203 <h4>: {{ studentData.name }}</h4> 203 <h4>: {{ studentData.name }}</h4>
204 </v-flex> 204 </v-flex>
205 </v-layout> 205 </v-layout>
206 <v-layout> 206 <v-layout>
207 <v-flex xs6 sm2 class="pa-0 mb-1"> 207 <v-flex xs6 sm2 class="pa-0 mb-1">
208 <h4> 208 <h4>
209 <b>Type</b> 209 <b>Type</b>
210 </h4> 210 </h4>
211 </v-flex> 211 </v-flex>
212 <v-flex sm10 xs6 class="pa-0 mb-1"> 212 <v-flex sm10 xs6 class="pa-0 mb-1">
213 <h4>: Student</h4> 213 <h4>: Student</h4>
214 </v-flex> 214 </v-flex>
215 </v-layout> 215 </v-layout>
216 <v-layout> 216 <v-layout>
217 <v-flex xs6 sm2 class="pa-0 mb-1"> 217 <v-flex xs6 sm2 class="pa-0 mb-1">
218 <h4> 218 <h4>
219 <b>Roll No</b> 219 <b>Roll No</b>
220 </h4> 220 </h4>
221 </v-flex> 221 </v-flex>
222 <v-flex sm10 xs6 class="pa-0 mb-1"> 222 <v-flex sm10 xs6 class="pa-0 mb-1">
223 <h4>: {{ studentData.rollNo }}</h4> 223 <h4>: {{ studentData.rollNo }}</h4>
224 </v-flex> 224 </v-flex>
225 </v-layout> 225 </v-layout>
226 <v-layout> 226 <v-layout>
227 <v-flex xs6 sm2 class="pa-0 mb-1"> 227 <v-flex xs6 sm2 class="pa-0 mb-1">
228 <h4> 228 <h4>
229 <b>Class</b> 229 <b>Class</b>
230 </h4> 230 </h4>
231 </v-flex> 231 </v-flex>
232 <v-flex sm10 xs6 class="pa-0 mb-1"> 232 <v-flex sm10 xs6 class="pa-0 mb-1">
233 <h4>: {{ studentData.classId.classNum }}</h4> 233 <h4>: {{ studentData.classId.classNum }}</h4>
234 </v-flex> 234 </v-flex>
235 </v-layout> 235 </v-layout>
236 <v-layout> 236 <v-layout>
237 <v-flex xs6 sm2 class="pa-0 mb-1"> 237 <v-flex xs6 sm2 class="pa-0 mb-1">
238 <h4> 238 <h4>
239 <b>Section</b> 239 <b>Section</b>
240 </h4> 240 </h4>
241 </v-flex> 241 </v-flex>
242 <v-flex sm10 xs6 class="pa-0 mb-3"> 242 <v-flex sm10 xs6 class="pa-0 mb-3">
243 <h4>: {{ studentData.sectionId.name}}</h4> 243 <h4>: {{ studentData.sectionId.name}}</h4>
244 </v-flex> 244 </v-flex>
245 </v-layout> 245 </v-layout>
246 </v-flex> 246 </v-flex>
247 <v-card flat> 247 <v-card flat>
248 <h3 class="py-2 text-xs-center grey lighten-1 white--text"> 248 <h3 class="py-2 text-xs-center grey lighten-1 white--text">
249 Attendence 249 Attendence
250 <span class="ml-4"> 250 <span class="ml-4">
251 <v-avatar class="green caption" size="12"></v-avatar> 251 <v-avatar class="green caption" size="12"></v-avatar>
252 <span class="subheading">Present</span> 252 <span class="subheading">Present</span>
253 </span> 253 </span>
254 <span class="ml-4"> 254 <span class="ml-4">
255 <v-avatar color="red caption" size="12" class></v-avatar> 255 <v-avatar color="red caption" size="12" class></v-avatar>
256 <span class="subheading">Absent</span> 256 <span class="subheading">Absent</span>
257 </span> 257 </span>
258 </h3> 258 </h3>
259 <YearCalendar 259 <YearCalendar
260 v-model="year" 260 v-model="year"
261 :activeDates="activeDates" 261 :activeDates="activeDates"
262 prefixClass="your_customized_wrapper_class" 262 prefixClass="your_customized_wrapper_class"
263 :activeClass="activeClass" 263 :activeClass="activeClass"
264 ></YearCalendar> 264 ></YearCalendar>
265 </v-card> 265 </v-card>
266 </div> 266 </div>
267 </v-flex> 267 </v-flex>
268 </v-layout> 268 </v-layout>
269 </v-container> 269 </v-container>
270 </v-layout> 270 </v-layout>
271 <img :src="output" v-show="false" /> 271 <img :src="output" v-show="false" />
272 <div class="loader" v-if="showLoader"> 272 <div class="loader" v-if="showLoader">
273 <v-progress-circular indeterminate color="white"></v-progress-circular> 273 <v-progress-circular indeterminate color="white"></v-progress-circular>
274 </div> 274 </div>
275 </v-container> 275 </v-container>
276 </template> 276 </template>
277 277
278 <script lang="js"> 278 <script lang="js">
279 import moment from "moment"; 279 import moment from "moment";
280 import http from "@/Services/http.js"; 280 import http from "@/Services/http.js";
281 import YearCalendar from "vue-material-year-calendar"; 281 import YearCalendar from "vue-material-year-calendar";
282 import jsPDF from 'jspdf'; 282 import jsPDF from 'jspdf';
283 // eslint-disable-next-line 283 // eslint-disable-next-line
284 import autoTable from 'jspdf-autotable'; 284 import autoTable from 'jspdf-autotable';
285 285
286 export default { 286 export default {
287 components: { YearCalendar }, 287 components: { YearCalendar },
288 data() { 288 data() {
289 return { 289 return {
290 showPdfData:false, 290 showPdfData:false,
291 hideData:true, 291 hideData:true,
292 loadingPdf:false, 292 loadingPdf:false,
293 output:null, 293 output:null,
294 studentsList: [], 294 studentsList: [],
295 json_data: [], 295 json_data: [],
296 dialogExport: false, 296 dialogExport: false,
297 startDate: "", 297 startDate: "",
298 endDate: "", 298 endDate: "",
299 menuEndDate: false, 299 menuEndDate: false,
300 menuStartDate: false, 300 menuStartDate: false,
301 showLoader: false, 301 showLoader: false,
302 token: "", 302 token: "",
303 year: new Date().getFullYear(), 303 year: new Date().getFullYear(),
304 activeDates: [], 304 activeDates: [],
305 activeClass: "", 305 activeClass: "",
306 studentData: { 306 studentData: {
307 classId: { 307 classId: {
308 classNum: "" 308 classNum: ""
309 }, 309 },
310 sectionId: { 310 sectionId: {
311 name: "" 311 name: ""
312 }, 312 },
313 }, 313 },
314 }; 314 };
315 }, 315 },
316 mounted() { 316 mounted() {
317 this.token = this.$store.state.token; 317 this.token = this.$store.state.token;
318 this.getStudentAttendence(); 318 this.getStudentAttendence();
319 this.getStudentData(); 319 this.getStudentData();
320 }, 320 },
321 methods: { 321 methods: {
322 dates: function(date) { 322 dates: function(date) {
323 return moment(date).format("MMMM DD, YYYY"); 323 return moment(date).format("MMMM DD, YYYY");
324 }, 324 },
325 getStudentAttendence() { 325 getStudentAttendence() {
326 this.showLoader = true; 326 this.showLoader = true;
327 http() 327 http()
328 .get( 328 .get(
329 "/studentAttendance", 329 "/studentAttendance",
330 { params: { studentId: this.$route.params.id } }, 330 { params: { studentId: this.$route.params.id } },
331 { 331 {
332 headers: { Authorization: "Bearer " + this.token } 332 headers: { Authorization: "Bearer " + this.token }
333 } 333 }
334 ) 334 )
335 .then(response => { 335 .then(response => {
336 this.showLoader = false; 336 this.showLoader = false;
337 let array = []; 337 let array = [];
338 for (let i = 0; i < response.data.data.length; i++) { 338 for (let i = 0; i < response.data.data.length; i++) {
339 if (response.data.data[i].students[0].isPresent == true) { 339 if (response.data.data[i].students[0].isPresent == true) {
340 array.push({ 340 array.push({
341 date: response.data.data[i].date, 341 date: response.data.data[i].date,
342 className: "green" 342 className: "green"
343 }); 343 });
344 } else if (response.data.data[i].students[0].isPresent == false) { 344 } else if (response.data.data[i].students[0].isPresent == false) {
345 array.push({ 345 array.push({
346 date: response.data.data[i].date, 346 date: response.data.data[i].date,
347 className: "red" 347 className: "red"
348 }); 348 });
349 } 349 }
350 } 350 }
351 this.activeDates = array; 351 this.activeDates = array;
352 }) 352 })
353 .catch(error => { 353 .catch(error => {
354 this.showLoader = false; 354 this.showLoader = false;
355 if (error.response.status === 401) { 355 if (error.response.status === 401) {
356 this.$router.replace({ path: "/" }); 356 this.$router.replace({ path: "/" });
357 this.$store.dispatch("setToken", null); 357 this.$store.dispatch("setToken", null);
358 this.$store.dispatch("Id", null); 358 this.$store.dispatch("Id", null);
359 this.$store.dispatch("Role", null); 359 this.$store.dispatch("Role", null);
360 } 360 }
361 }); 361 });
362 }, 362 },
363 getStudentData() { 363 getStudentData() {
364 http() 364 http()
365 .get( 365 .get(
366 "/getParticularStudentDetail", 366 "/getParticularStudentDetail",
367 { params: { studentId: this.$route.params.id } }, 367 { params: { studentId: this.$route.params.id } },
368 { 368 {
369 headers: { Authorization: "Bearer " + this.token } 369 headers: { Authorization: "Bearer " + this.token }
370 } 370 }
371 ) 371 )
372 .then(response => { 372 .then(response => {
373 this.studentData = response.data.data; 373 this.studentData = response.data.data;
374 }) 374 })
375 .catch(err => { 375 .catch(err => {
376 // console.log("err====>", err); 376 // console.log("err====>", err);
377 this.snackbar = true;
378 this.color = "error";
379 this.text = error.response.data.message;
377 this.snackbar = true; 380 // this.$router.replace({ path: '/' });
378 this.color = "error"; 381 });
379 this.text = error.response.data.message; 382 },
380 // this.$router.replace({ path: '/' }); 383 convertToCSV(objArray) {
381 }); 384 var array = typeof objArray != 'object' ? JSON.parse(objArray) : objArray;
382 }, 385 var str = '';
383 convertToCSV(objArray) { 386
384 var array = typeof objArray != 'object' ? JSON.parse(objArray) : objArray; 387 for (var i = 0; i < array.length; i++) {
385 var str = ''; 388 var line = '';
386 389 for (var index in array[i]) {
387 for (var i = 0; i < array.length; i++) { 390 if (line != '') line += ','
388 var line = ''; 391
389 for (var index in array[i]) { 392 line += array[i][index];
390 if (line != '') line += ',' 393 }
391 394
392 line += array[i][index]; 395 str += line + '\r\n';
393 } 396 }
394 397
395 str += line + '\r\n'; 398 return str;
396 } 399 },
397 400 exportData() {
398 return str; 401 http()
399 }, 402 .get(
400 exportData() { 403 "/studentAttendanceByMonth",
401 http() 404 {
402 .get( 405 params: {
403 "/studentAttendanceByMonth", 406 studentId: this.$route.params.id,
404 { 407 startDate: this.startDate,
405 params: { 408 endDate: this.endDate
406 studentId: this.$route.params.id, 409 }
407 startDate: this.startDate, 410 },
408 endDate: this.endDate 411 {
409 } 412 headers: { Authorization: "Bearer " + this.token }
410 }, 413 }
411 { 414 )
412 headers: { Authorization: "Bearer " + this.token } 415 .then(response => {
413 } 416 this.json_data = response.data.data;
414 ) 417 this.dialogExport = false;
415 .then(response => { 418 // console.log("hh",this.json_data)
416 this.json_data = response.data.data; 419 var jsonObject = JSON.stringify(this.json_data);
417 this.dialogExport = false; 420
418 // console.log("hh",this.json_data) 421 var csv = this.convertToCSV(jsonObject);
419 var jsonObject = JSON.stringify(this.json_data); 422
420 423 var exportedFilenmae = "studentAttendance" + '.csv';
421 var csv = this.convertToCSV(jsonObject); 424 var blob = new Blob([csv], { type: 'text/csv;charset=utf-8;' });
422 425 if (navigator.msSaveBlob) { // IE 10+
423 var exportedFilenmae = "studentAttendance" + '.csv'; 426 navigator.msSaveBlob(blob, exportedFilenmae);
424 var blob = new Blob([csv], { type: 'text/csv;charset=utf-8;' }); 427 } else {
425 if (navigator.msSaveBlob) { // IE 10+ 428 var link = document.createElement("a");
426 navigator.msSaveBlob(blob, exportedFilenmae); 429 if (link.download !== undefined) { // feature detection
427 } else { 430 // Browsers that support HTML5 download attribute
428 var link = document.createElement("a"); 431 var url = URL.createObjectURL(blob);
429 if (link.download !== undefined) { // feature detection 432 link.setAttribute("href", url);
430 // Browsers that support HTML5 download attribute 433 link.setAttribute("download", exportedFilenmae);
431 var url = URL.createObjectURL(blob); 434 link.style.visibility = 'hidden';
432 link.setAttribute("href", url); 435 document.body.appendChild(link);
433 link.setAttribute("download", exportedFilenmae); 436 link.click();
434 link.style.visibility = 'hidden'; 437 document.body.removeChild(link);
435 document.body.appendChild(link); 438 }
436 link.click(); 439 }
437 document.body.removeChild(link); 440 })
438 } 441 .catch(err => {
439 } 442 // console.log("err====>", err);
440 }) 443 // this.$router.replace({ path: '/' });
444 this.snackbar = true;
445 this.color = "error";
446 this.text = error.response.data.message;
441 .catch(err => { 447 });
442 // console.log("err====>", err); 448 },
443 // this.$router.replace({ path: '/' }); 449 exportPdf(){
444 this.snackbar = true; 450 this.hideData = false;
445 this.color = "error"; 451 this.showPdfData = true
446 this.text = error.response.data.message; 452 },
447 }); 453 async generatePDF2Canvas(){
448 }, 454 this.loadingPdf = true
449 exportPdf(){ 455 const el = this.$refs.printMe;
450 this.hideData = false; 456 // add option type to get the image version
451 this.showPdfData = true 457 // if not provided the promise will return
452 }, 458 // the canvas.
453 async generatePDF2Canvas(){ 459 const options = {
454 this.loadingPdf = true 460 type: 'dataURL'
455 const el = this.$refs.printMe; 461 }
456 // add option type to get the image version 462 this.output = await this.$html2canvas(el, options);
457 // if not provided the promise will return 463 if(this.output) {
458 // the canvas. 464 this.loadingPdf = false
459 const options = { 465 }
460 type: 'dataURL' 466 let doc = new jsPDF();
461 } 467 doc.addImage(this.output, 'JPEG', 5, 10, 200, 280);
462 this.output = await this.$html2canvas(el, options); 468 doc.save("Attendance.pdf");
463 if(this.output) { 469 }
464 this.loadingPdf = false 470 }
465 } 471 };
466 let doc = new jsPDF(); 472 </script>
467 doc.addImage(this.output, 'JPEG', 5, 10, 200, 280); 473
468 doc.save("Attendance.pdf"); 474 <style lang="stylus">
469 } 475 .your_customized_wrapper_class {
470 } 476 background-color: #0aa;
471 }; 477 color: white;
472 </script> 478
473 479 &.red {
474 <style lang="stylus"> 480 background-color: red;
475 .your_customized_wrapper_class { 481 color: white;
476 background-color: #0aa; 482
477 color: white; 483 &:after {
478 484 background-size: 100% 100%;
479 &.red { 485 }
480 background-color: red; 486 }
481 color: white; 487
482 488 &.blue {
483 &:after { 489 background-color: #0000aa;
484 background-size: 100% 100%; 490 color: white;
485 } 491 }
486 } 492
487 493 &.your_customized_classname {
488 &.blue { 494 background-color: yellow;
489 background-color: #0000aa; 495 color: black;
490 color: white; 496 }
491 } 497 }
492 498 </style>
493 &.your_customized_classname { 499 <style scoped>
494 background-color: yellow; 500 .add-button {
495 color: black; 501 background: #feb83c !important;
496 } 502 border-color: #feb83c !important;
497 } 503 text-transform: none !important;
498 </style> 504 -webkit-box-shadow: none !important;
499 <style scoped> 505 box-shadow: none !important;
500 .add-button { 506 }
501 background: #feb83c !important; 507 .card-style {
502 border-color: #feb83c !important; 508 background: #7f62f8 !important;
503 text-transform: none !important; 509 border-color: #7f62f8 !important;
504 -webkit-box-shadow: none !important; 510 border-radius: 12px;
505 box-shadow: none !important; 511 }
506 } 512 .open-dialog-button {
507 .card-style { 513 background: #827bfa !important;
508 background: #7f62f8 !important; 514 border-color: #827bfa !important;
509 border-color: #7f62f8 !important; 515 text-transform: none !important;
510 border-radius: 12px; 516 }
511 } 517 </style>
src/pages/Attendence/viewTeacherAttendence.vue
Diff comments   View file @8b7976c
1 <template> 1 <template>
2 <v-container fluid grid-list-md> 2 <v-container fluid grid-list-md>
3 <div v-show="hideData"> 3 <div v-show="hideData">
4 <v-layout row> 4 <v-layout row>
5 <v-btn @click="exportPdf" round class="right open-dialog-button" dark> 5 <v-btn @click="exportPdf" round class="right open-dialog-button" dark>
6 Export Pdf 6 Export Pdf
7 <v-icon dark right size="20">save_alt</v-icon> 7 <v-icon dark right size="20">save_alt</v-icon>
8 </v-btn> 8 </v-btn>
9 <v-dialog v-model="dialogExport" max-width="500px" persistent> 9 <v-dialog v-model="dialogExport" max-width="500px" persistent>
10 <v-btn round slot="activator" class="right open-dialog-button" dark> 10 <v-btn round slot="activator" class="right open-dialog-button" dark>
11 Export csv 11 Export csv
12 <v-icon dark right size="20">save_alt</v-icon> 12 <v-icon dark right size="20">save_alt</v-icon>
13 </v-btn> 13 </v-btn>
14 <v-card flat class="card-style pa-2" dark> 14 <v-card flat class="card-style pa-2" dark>
15 <h3 class="title text-xs-center">Export</h3> 15 <h3 class="title text-xs-center">Export</h3>
16 <v-card-text> 16 <v-card-text>
17 <v-container grid-list-md> 17 <v-container grid-list-md>
18 <v-layout wrap> 18 <v-layout wrap>
19 <v-flex xs12> 19 <v-flex xs12>
20 <v-menu 20 <v-menu
21 ref="menuStartDate" 21 ref="menuStartDate"
22 :close-on-content-click="false" 22 :close-on-content-click="false"
23 v-model="menuStartDate" 23 v-model="menuStartDate"
24 :nudge-right="40" 24 :nudge-right="40"
25 :return-value.sync="startDate" 25 :return-value.sync="startDate"
26 lazy 26 lazy
27 transition="scale-transition" 27 transition="scale-transition"
28 offset-y 28 offset-y
29 full-width 29 full-width
30 min-width="290px" 30 min-width="290px"
31 > 31 >
32 <v-text-field 32 <v-text-field
33 slot="activator" 33 slot="activator"
34 v-model="startDate" 34 v-model="startDate"
35 label="Select Start Date" 35 label="Select Start Date"
36 prepend-icon="event" 36 prepend-icon="event"
37 readonly 37 readonly
38 ></v-text-field> 38 ></v-text-field>
39 <v-date-picker 39 <v-date-picker
40 v-model="startDate" 40 v-model="startDate"
41 @input="$refs.menuStartDate.save(startDate)" 41 @input="$refs.menuStartDate.save(startDate)"
42 ></v-date-picker> 42 ></v-date-picker>
43 </v-menu> 43 </v-menu>
44 </v-flex> 44 </v-flex>
45 <v-flex xs12> 45 <v-flex xs12>
46 <v-menu 46 <v-menu
47 ref="menuEndDate" 47 ref="menuEndDate"
48 :close-on-content-click="false" 48 :close-on-content-click="false"
49 v-model="menuEndDate" 49 v-model="menuEndDate"
50 :nudge-right="40" 50 :nudge-right="40"
51 :return-value.sync="endDate" 51 :return-value.sync="endDate"
52 lazy 52 lazy
53 transition="scale-transition" 53 transition="scale-transition"
54 offset-y 54 offset-y
55 full-width 55 full-width
56 min-width="290px" 56 min-width="290px"
57 > 57 >
58 <v-text-field 58 <v-text-field
59 slot="activator" 59 slot="activator"
60 v-model="endDate" 60 v-model="endDate"
61 label="Select End Date" 61 label="Select End Date"
62 prepend-icon="event" 62 prepend-icon="event"
63 readonly 63 readonly
64 ></v-text-field> 64 ></v-text-field>
65 <v-date-picker v-model="endDate" @input="$refs.menuEndDate.save(endDate)"></v-date-picker> 65 <v-date-picker v-model="endDate" @input="$refs.menuEndDate.save(endDate)"></v-date-picker>
66 </v-menu> 66 </v-menu>
67 </v-flex> 67 </v-flex>
68 </v-layout> 68 </v-layout>
69 </v-container> 69 </v-container>
70 </v-card-text> 70 </v-card-text>
71 <v-card-actions> 71 <v-card-actions>
72 <v-spacer></v-spacer> 72 <v-spacer></v-spacer>
73 <v-btn flat @click.native="dialogExport = false">Close</v-btn> 73 <v-btn flat @click.native="dialogExport = false">Close</v-btn>
74 74
75 <v-btn flat @click.native="exportData">Export</v-btn> 75 <v-btn flat @click.native="exportData">Export</v-btn>
76 </v-card-actions> 76 </v-card-actions>
77 </v-card> 77 </v-card>
78 </v-dialog> 78 </v-dialog>
79 </v-layout> 79 </v-layout>
80 <v-layout wrap> 80 <v-layout wrap>
81 <v-flex xs12 sm12 md4> 81 <v-flex xs12 sm12 md4>
82 <v-card flat> 82 <v-card flat>
83 <h3 class="py-2 text-xs-center card-style white--text">Profile</h3> 83 <h3 class="py-2 text-xs-center card-style white--text">Profile</h3>
84 <v-card-text> 84 <v-card-text>
85 <v-container> 85 <v-container>
86 <v-layout wrap> 86 <v-layout wrap>
87 <v-flex xs12> 87 <v-flex xs12>
88 <v-layout> 88 <v-layout>
89 <v-flex 89 <v-flex
90 xs12 90 xs12
91 class="text-xs-center text-sm-center text-md-center text-lg-center" 91 class="text-xs-center text-sm-center text-md-center text-lg-center"
92 > 92 >
93 <v-avatar size="80px"> 93 <v-avatar size="80px">
94 <img src="/static/icon/user.png" v-if="!teacherData.profilePicUrl" /> 94 <img src="/static/icon/user.png" v-if="!teacherData.profilePicUrl" />
95 <img 95 <img
96 :src="teacherData.profilePicUrl" 96 :src="teacherData.profilePicUrl"
97 v-else-if="teacherData.profilePicUrl" 97 v-else-if="teacherData.profilePicUrl"
98 /> 98 />
99 </v-avatar> 99 </v-avatar>
100 </v-flex> 100 </v-flex>
101 </v-layout> 101 </v-layout>
102 <v-layout> 102 <v-layout>
103 <v-flex xs12 sm12> 103 <v-flex xs12 sm12>
104 <h3 class="text-xs-center"> 104 <h3 class="text-xs-center">
105 <b>{{ teacherData.name }}</b> 105 <b>{{ teacherData.name }}</b>
106 </h3> 106 </h3>
107 <p class="text-xs-center grey--text">Teacher</p> 107 <p class="text-xs-center grey--text">Teacher</p>
108 </v-flex> 108 </v-flex>
109 </v-layout> 109 </v-layout>
110 <!-- <v-layout style="border: 1px solid lightgrey;"> 110 <!-- <v-layout style="border: 1px solid lightgrey;">
111 <v-flex xs6 sm6 class="pa-0"> 111 <v-flex xs6 sm6 class="pa-0">
112 <h4 class="right"> 112 <h4 class="right">
113 <b>Gender :</b> 113 <b>Gender :</b>
114 </h4> 114 </h4>
115 </v-flex> 115 </v-flex>
116 <v-flex sm6 xs6 class="pa-0"> 116 <v-flex sm6 xs6 class="pa-0">
117 <h4>{{ teacherData.teacherData.gender }}</h4> 117 <h4>{{ teacherData.teacherData.gender }}</h4>
118 </v-flex> 118 </v-flex>
119 </v-layout>--> 119 </v-layout>-->
120 <v-layout style="border: 1px solid lightgrey;"> 120 <v-layout style="border: 1px solid lightgrey;">
121 <v-flex xs6 sm6 class="pa-0"> 121 <v-flex xs6 sm6 class="pa-0">
122 <h4 class="right"> 122 <h4 class="right">
123 <b>D.O.B:</b> 123 <b>D.O.B:</b>
124 </h4> 124 </h4>
125 </v-flex> 125 </v-flex>
126 <v-flex sm6 xs6 class="right pa-0"> 126 <v-flex sm6 xs6 class="right pa-0">
127 <h4>{{ dates(teacherData.dob) }}</h4> 127 <h4>{{ dates(teacherData.dob) }}</h4>
128 </v-flex> 128 </v-flex>
129 </v-layout> 129 </v-layout>
130 <v-layout style="border: 1px solid lightgrey;"> 130 <v-layout style="border: 1px solid lightgrey;">
131 <v-flex xs6 sm6 class="right pa-0"> 131 <v-flex xs6 sm6 class="right pa-0">
132 <h4 class="right"> 132 <h4 class="right">
133 <b>Phone :</b> 133 <b>Phone :</b>
134 </h4> 134 </h4>
135 </v-flex> 135 </v-flex>
136 <v-flex sm6 xs6 class="right pa-0"> 136 <v-flex sm6 xs6 class="right pa-0">
137 <h4>{{ teacherData.mobileNo}}</h4> 137 <h4>{{ teacherData.mobileNo}}</h4>
138 </v-flex> 138 </v-flex>
139 </v-layout> 139 </v-layout>
140 </v-flex> 140 </v-flex>
141 </v-layout> 141 </v-layout>
142 </v-container> 142 </v-container>
143 </v-card-text> 143 </v-card-text>
144 </v-card> 144 </v-card>
145 </v-flex> 145 </v-flex>
146 <v-flex xs12 sm12 md8> 146 <v-flex xs12 sm12 md8>
147 <v-card flat> 147 <v-card flat>
148 <h3 class="py-2 text-xs-center card-style white--text"> 148 <h3 class="py-2 text-xs-center card-style white--text">
149 Attendence 149 Attendence
150 <span class="ml-4"> 150 <span class="ml-4">
151 <v-avatar class="green caption" size="12"></v-avatar> 151 <v-avatar class="green caption" size="12"></v-avatar>
152 <span class="subheading">Present</span> 152 <span class="subheading">Present</span>
153 </span> 153 </span>
154 <span class="ml-4"> 154 <span class="ml-4">
155 <v-avatar color="red caption" size="12" class></v-avatar> 155 <v-avatar color="red caption" size="12" class></v-avatar>
156 <span class="subheading">Absent</span> 156 <span class="subheading">Absent</span>
157 </span> 157 </span>
158 </h3> 158 </h3>
159 <YearCalendar 159 <YearCalendar
160 v-model="year" 160 v-model="year"
161 :activeDates="activeDates" 161 :activeDates="activeDates"
162 prefixClass="your_customized_wrapper_class" 162 prefixClass="your_customized_wrapper_class"
163 :activeClass="activeClass" 163 :activeClass="activeClass"
164 ></YearCalendar> 164 ></YearCalendar>
165 </v-card> 165 </v-card>
166 </v-flex> 166 </v-flex>
167 </v-layout> 167 </v-layout>
168 </div> 168 </div>
169 <v-layout v-show="showPdfData"> 169 <v-layout v-show="showPdfData">
170 <v-container> 170 <v-container>
171 <v-flex xs12 sm12 md8 offset-sm2> 171 <v-flex xs12 sm12 md8 offset-sm2>
172 <v-btn class="right add-button" @click="generatePDF2Canvas()" :loading="loadingPdf" dark> 172 <v-btn class="right add-button" @click="generatePDF2Canvas()" :loading="loadingPdf" dark>
173 Download 173 Download
174 <v-icon dark right size="20">save_alt</v-icon> 174 <v-icon dark right size="20">save_alt</v-icon>
175 </v-btn> 175 </v-btn>
176 </v-flex> 176 </v-flex>
177 </v-container> 177 </v-container>
178 </v-layout> 178 </v-layout>
179 <v-layout v-show="showPdfData"> 179 <v-layout v-show="showPdfData">
180 <v-container> 180 <v-container>
181 <v-layout v-show="showPdfData"> 181 <v-layout v-show="showPdfData">
182 <v-flex xs12 sm12 md8 offset-sm2> 182 <v-flex xs12 sm12 md8 offset-sm2>
183 <div ref="printMe"> 183 <div ref="printMe">
184 <v-flex xs12 class="pl-3"> 184 <v-flex xs12 class="pl-3">
185 <v-layout> 185 <v-layout>
186 <v-flex xs6 sm2 class="pa-0 mb-1"> 186 <v-flex xs6 sm2 class="pa-0 mb-1">
187 <h4> 187 <h4>
188 <b>Name</b> 188 <b>Name</b>
189 </h4> 189 </h4>
190 </v-flex> 190 </v-flex>
191 <v-flex sm10 xs6 class="pa-0"> 191 <v-flex sm10 xs6 class="pa-0">
192 <h4>: {{ teacherData.name }}</h4> 192 <h4>: {{ teacherData.name }}</h4>
193 </v-flex> 193 </v-flex>
194 </v-layout> 194 </v-layout>
195 <v-layout> 195 <v-layout>
196 <v-flex xs6 sm2 class="pa-0 mb-1"> 196 <v-flex xs6 sm2 class="pa-0 mb-1">
197 <h4> 197 <h4>
198 <b>Email</b> 198 <b>Email</b>
199 </h4> 199 </h4>
200 </v-flex> 200 </v-flex>
201 <v-flex sm10 xs6 class="pa-0 mb-1"> 201 <v-flex sm10 xs6 class="pa-0 mb-1">
202 <h4>: {{ teacherData.email }}</h4> 202 <h4>: {{ teacherData.email }}</h4>
203 </v-flex> 203 </v-flex>
204 </v-layout> 204 </v-layout>
205 <v-layout> 205 <v-layout>
206 <v-flex xs6 sm2 class="pa-0 mb-1"> 206 <v-flex xs6 sm2 class="pa-0 mb-1">
207 <h4> 207 <h4>
208 <b>City</b> 208 <b>City</b>
209 </h4> 209 </h4>
210 </v-flex> 210 </v-flex>
211 <v-flex sm10 xs6 class="pa-0 mb-3"> 211 <v-flex sm10 xs6 class="pa-0 mb-3">
212 <h4>: {{ teacherData.city}}</h4> 212 <h4>: {{ teacherData.city}}</h4>
213 </v-flex> 213 </v-flex>
214 </v-layout> 214 </v-layout>
215 <v-layout> 215 <v-layout>
216 <v-flex xs6 sm2 class="pa-0 mb-1"> 216 <v-flex xs6 sm2 class="pa-0 mb-1">
217 <h4> 217 <h4>
218 <b>Mobile No</b> 218 <b>Mobile No</b>
219 </h4> 219 </h4>
220 </v-flex> 220 </v-flex>
221 <v-flex sm10 xs6 class="pa-0 mb-3"> 221 <v-flex sm10 xs6 class="pa-0 mb-3">
222 <h4>: {{ teacherData.mobileNo}}</h4> 222 <h4>: {{ teacherData.mobileNo}}</h4>
223 </v-flex> 223 </v-flex>
224 </v-layout> 224 </v-layout>
225 </v-flex> 225 </v-flex>
226 <v-card flat> 226 <v-card flat>
227 <h3 class="py-2 text-xs-center grey lighten-1 white--text"> 227 <h3 class="py-2 text-xs-center grey lighten-1 white--text">
228 Attendence 228 Attendence
229 <span class="ml-4"> 229 <span class="ml-4">
230 <v-avatar class="green caption" size="12"></v-avatar> 230 <v-avatar class="green caption" size="12"></v-avatar>
231 <span class="subheading">Present</span> 231 <span class="subheading">Present</span>
232 </span> 232 </span>
233 <span class="ml-4"> 233 <span class="ml-4">
234 <v-avatar color="red caption" size="12" class></v-avatar> 234 <v-avatar color="red caption" size="12" class></v-avatar>
235 <span class="subheading">Absent</span> 235 <span class="subheading">Absent</span>
236 </span> 236 </span>
237 </h3> 237 </h3>
238 <YearCalendar 238 <YearCalendar
239 v-model="year" 239 v-model="year"
240 :activeDates="activeDates" 240 :activeDates="activeDates"
241 prefixClass="your_customized_wrapper_class" 241 prefixClass="your_customized_wrapper_class"
242 :activeClass="activeClass" 242 :activeClass="activeClass"
243 ></YearCalendar> 243 ></YearCalendar>
244 </v-card> 244 </v-card>
245 </div> 245 </div>
246 </v-flex> 246 </v-flex>
247 </v-layout> 247 </v-layout>
248 </v-container> 248 </v-container>
249 </v-layout> 249 </v-layout>
250 <!-- <img :src="output" v-show="false"/> --> 250 <!-- <img :src="output" v-show="false"/> -->
251 <div class="loader" v-if="showLoader"> 251 <div class="loader" v-if="showLoader">
252 <v-progress-circular indeterminate color="white"></v-progress-circular> 252 <v-progress-circular indeterminate color="white"></v-progress-circular>
253 </div> 253 </div>
254 </v-container> 254 </v-container>
255 </template> 255 </template>
256 256
257 <script lang="js"> 257 <script lang="js">
258 import moment from "moment"; 258 import moment from "moment";
259 import http from "@/Services/http.js"; 259 import http from "@/Services/http.js";
260 import YearCalendar from "vue-material-year-calendar"; 260 import YearCalendar from "vue-material-year-calendar";
261 import jsPDF from 'jspdf'; 261 import jsPDF from 'jspdf';
262 // eslint-disable-next-line 262 // eslint-disable-next-line
263 import autoTable from 'jspdf-autotable'; 263 import autoTable from 'jspdf-autotable';
264 264
265 export default { 265 export default {
266 components: { YearCalendar }, 266 components: { YearCalendar },
267 data() { 267 data() {
268 return { 268 return {
269 showPdfData:false, 269 showPdfData:false,
270 hideData:true, 270 hideData:true,
271 loadingPdf:false, 271 loadingPdf:false,
272 output:null, 272 output:null,
273 studentsList: [], 273 studentsList: [],
274 json_data: [], 274 json_data: [],
275 dialogExport: false, 275 dialogExport: false,
276 startDate: "", 276 startDate: "",
277 endDate: "", 277 endDate: "",
278 menuEndDate: false, 278 menuEndDate: false,
279 menuStartDate: false, 279 menuStartDate: false,
280 showLoader: false, 280 showLoader: false,
281 token: "", 281 token: "",
282 year: new Date().getFullYear(), 282 year: new Date().getFullYear(),
283 activeDates: [], 283 activeDates: [],
284 activeClass: "", 284 activeClass: "",
285 teacherData: {} 285 teacherData: {}
286 }; 286 };
287 }, 287 },
288 mounted() { 288 mounted() {
289 this.token = this.$store.state.token; 289 this.token = this.$store.state.token;
290 this.getTeacherAttendence(); 290 this.getTeacherAttendence();
291 // this.getStudentData(); 291 // this.getStudentData();
292 }, 292 },
293 methods: { 293 methods: {
294 dates: function(date) { 294 dates: function(date) {
295 return moment(date).format("MMMM DD, YYYY"); 295 return moment(date).format("MMMM DD, YYYY");
296 }, 296 },
297 getTeacherAttendence() { 297 getTeacherAttendence() {
298 this.showLoader = true; 298 this.showLoader = true;
299 http() 299 http()
300 .get( 300 .get(
301 "/teacherAttendance", 301 "/teacherAttendance",
302 { params: { teacherId: this.$route.params.teacherId } }, 302 { params: { teacherId: this.$route.params.teacherId } },
303 { 303 {
304 headers: { Authorization: "Bearer " + this.token } 304 headers: { Authorization: "Bearer " + this.token }
305 } 305 }
306 ) 306 )
307 .then(response => { 307 .then(response => {
308 this.showLoader = false; 308 this.showLoader = false;
309 this.teacherData = response.data.data.teacherData; 309 this.teacherData = response.data.data.teacherData;
310 let array = []; 310 let array = [];
311 for (let i = 0; i < response.data.data.attendanceData.length; i++) { 311 for (let i = 0; i < response.data.data.attendanceData.length; i++) {
312 for (let j = 0; j < response.data.data.attendanceData[i].teachers.length; j++) { 312 for (let j = 0; j < response.data.data.attendanceData[i].teachers.length; j++) {
313 if (response.data.data.attendanceData[i].teachers[j].attendanceType === "present") { 313 if (response.data.data.attendanceData[i].teachers[j].attendanceType === "present") {
314 array.push({ 314 array.push({
315 date: response.data.data.attendanceData[i].date, 315 date: response.data.data.attendanceData[i].date,
316 className: "green" 316 className: "green"
317 }); 317 });
318 } else if (response.data.data.attendanceData[i].teachers[j].attendanceType === "latePresentWithExcuse") { 318 } else if (response.data.data.attendanceData[i].teachers[j].attendanceType === "latePresentWithExcuse") {
319 array.push({ 319 array.push({
320 date: response.data.data.attendanceData[i].date, 320 date: response.data.data.attendanceData[i].date,
321 className: "yellow" 321 className: "yellow"
322 }); 322 });
323 } 323 }
324 else if (response.data.data.attendanceData[i].teachers[j].attendanceType === "latePresent") { 324 else if (response.data.data.attendanceData[i].teachers[j].attendanceType === "latePresent") {
325 array.push({ 325 array.push({
326 date: response.data.data.attendanceData[i].date, 326 date: response.data.data.attendanceData[i].date,
327 className: "black" 327 className: "black"
328 }); 328 });
329 } 329 }
330 else if (response.data.data.attendanceData[i].teachers[j].attendanceType === "absent") { 330 else if (response.data.data.attendanceData[i].teachers[j].attendanceType === "absent") {
331 array.push({ 331 array.push({
332 date: response.data.data.attendanceData[i].date, 332 date: response.data.data.attendanceData[i].date,
333 className: "red" 333 className: "red"
334 }); 334 });
335 } 335 }
336 } 336 }
337 this.activeDates = array; 337 this.activeDates = array;
338 } 338 }
339 }) 339 })
340 .catch(error => { 340 .catch(error => {
341 this.showLoader = false; 341 this.showLoader = false;
342 if (error.response.status === 401) { 342 if (error.response.status === 401) {
343 this.$router.replace({ path: "/" }); 343 this.$router.replace({ path: "/" });
344 this.$store.dispatch("setToken", null); 344 this.$store.dispatch("setToken", null);
345 this.$store.dispatch("Id", null); 345 this.$store.dispatch("Id", null);
346 this.$store.dispatch("Role", null); 346 this.$store.dispatch("Role", null);
347 } 347 }
348 }); 348 });
349 }, 349 },
350 // getStudentData() { 350 // getStudentData() {
351 // http() 351 // http()
352 // .get( 352 // .get(
353 // "/getParticularStudentDetail", 353 // "/getParticularStudentDetail",
354 // { params: { studentId: this.$route.params.id } }, 354 // { params: { studentId: this.$route.params.id } },
355 // { 355 // {
356 // headers: { Authorization: "Bearer " + this.token } 356 // headers: { Authorization: "Bearer " + this.token }
357 // } 357 // }
358 // ) 358 // )
359 // .then(response => { 359 // .then(response => {
360 // this.studentData = response.data.data; 360 // this.studentData = response.data.data;
361 // }) 361 // })
362 // .catch(err => { 362 // .catch(err => {
363 // console.log("err====>", err); 363 // console.log("err====>", err);
364 // // this.$router.replace({ path: '/' }); 364 // // this.$router.replace({ path: '/' });
365 // }); 365 // });
366 // }, 366 // },
367 convertToCSV(objArray) { 367 convertToCSV(objArray) {
368 var array = typeof objArray != 'object' ? JSON.parse(objArray) : objArray; 368 var array = typeof objArray != 'object' ? JSON.parse(objArray) : objArray;
369 var str = ''; 369 var str = '';
370 370
371 for (var i = 0; i < array.length; i++) { 371 for (var i = 0; i < array.length; i++) {
372 var line = ''; 372 var line = '';
373 for (var index in array[i]) { 373 for (var index in array[i]) {
374 if (line != '') line += ',' 374 if (line != '') line += ','
375 375
376 line += array[i][index]; 376 line += array[i][index];
377 } 377 }
378 378
379 str += line + '\r\n'; 379 str += line + '\r\n';
380 } 380 }
381 381
382 return str; 382 return str;
383 }, 383 },
384 exportData() { 384 exportData() {
385 // console.log("id",this.$route.params.teacherId); 385 // console.log("id",this.$route.params.teacherId);
386 http() 386 http()
387 .get( 387 .get(
388 "/teacherAttendanceByMonth", 388 "/teacherAttendanceByMonth",
389 { 389 {
390 params: { 390 params: {
391 teacherId: this.$route.params.teacherId, 391 teacherId: this.$route.params.teacherId,
392 startDate: this.startDate, 392 startDate: this.startDate,
393 endDate: this.endDate 393 endDate: this.endDate
394 } 394 }
395 }, 395 },
396 { 396 {
397 headers: { Authorization: "Bearer " + this.token } 397 headers: { Authorization: "Bearer " + this.token }
398 } 398 }
399 ) 399 )
400 .then(response => { 400 .then(response => {
401 this.json_data = response.data.data; 401 this.json_data = response.data.data;
402 this.dialogExport = false; 402 this.dialogExport = false;
403 var jsonObject = JSON.stringify(this.json_data); 403 var jsonObject = JSON.stringify(this.json_data);
404 var csv = this.convertToCSV(jsonObject); 404 var csv = this.convertToCSV(jsonObject);
405 var exportedFilenmae = "teacherAttendance" + '.csv'; 405 var exportedFilenmae = "teacherAttendance" + '.csv';
406 var blob = new Blob([csv], { type: 'text/csv;charset=utf-8;' }); 406 var blob = new Blob([csv], { type: 'text/csv;charset=utf-8;' });
407 if (navigator.msSaveBlob) { // IE 10+ 407 if (navigator.msSaveBlob) { // IE 10+
408 navigator.msSaveBlob(blob, exportedFilenmae); 408 navigator.msSaveBlob(blob, exportedFilenmae);
409 } else { 409 } else {
410 var link = document.createElement("a"); 410 var link = document.createElement("a");
411 if (link.download !== undefined) { // feature detection 411 if (link.download !== undefined) { // feature detection
412 // Browsers that support HTML5 download attribute 412 // Browsers that support HTML5 download attribute
413 var url = URL.createObjectURL(blob); 413 var url = URL.createObjectURL(blob);
414 link.setAttribute("href", url); 414 link.setAttribute("href", url);
415 link.setAttribute("download", exportedFilenmae); 415 link.setAttribute("download", exportedFilenmae);
416 link.style.visibility = 'hidden'; 416 link.style.visibility = 'hidden';
417 document.body.appendChild(link); 417 document.body.appendChild(link);
418 link.click(); 418 link.click();
419 document.body.removeChild(link); 419 document.body.removeChild(link);
420 } 420 }
421 } 421 }
422 422
423 423
424 }) 424 })
425 .catch(err => { 425 .catch(err => {
426 // console.log("err====>", err); 426 // console.log("err====>", err);
427 this.snackbar = true;
428 this.color = "error";
429 this.text = error.response.data.message;
427 this.snackbar = true; 430 // this.$router.replace({ path: '/' });
428 this.color = "error"; 431 });
429 this.text = error.response.data.message; 432 },
430 // this.$router.replace({ path: '/' }); 433 exportPdf(){
431 }); 434 this.hideData = false;
432 }, 435 this.showPdfData = true
433 exportPdf(){ 436 },
434 this.hideData = false; 437 async generatePDF2Canvas(){
435 this.showPdfData = true 438 this.loadingPdf = true
436 }, 439 const el = this.$refs.printMe;
437 async generatePDF2Canvas(){ 440 // add option type to get the image version
438 this.loadingPdf = true 441 // if not provided the promise will return
439 const el = this.$refs.printMe; 442 // the canvas.
440 // add option type to get the image version 443 const options = {
441 // if not provided the promise will return 444 type: 'dataURL'
442 // the canvas. 445 }
443 const options = { 446 this.output = await this.$html2canvas(el, options);
444 type: 'dataURL' 447 if(this.output) {
445 } 448 this.loadingPdf = false
446 this.output = await this.$html2canvas(el, options); 449 }
447 if(this.output) { 450 let doc = new jsPDF();
448 this.loadingPdf = false 451 doc.addImage(this.output, 'JPEG', 5, 10, 200, 280);
449 } 452 doc.save("Attendance.pdf");
450 let doc = new jsPDF(); 453 }
451 doc.addImage(this.output, 'JPEG', 5, 10, 200, 280); 454 }
452 doc.save("Attendance.pdf"); 455 };
453 } 456 </script>
454 } 457 <style scoped>
455 }; 458 .add-button {
456 </script> 459 background: #feb83c !important;
457 <style scoped> 460 border-color: #feb83c !important;
458 .add-button { 461 text-transform: none !important;
459 background: #feb83c !important; 462 -webkit-box-shadow: none !important;
460 border-color: #feb83c !important; 463 box-shadow: none !important;
461 text-transform: none !important; 464 }
462 -webkit-box-shadow: none !important; 465 .card-style {
463 box-shadow: none !important; 466 background: #7f62f8 !important;
464 } 467 border-color: #7f62f8 !important;
465 .card-style { 468 border-radius: 12px;
466 background: #7f62f8 !important; 469 }
467 border-color: #7f62f8 !important; 470 .open-dialog-button {
468 border-radius: 12px; 471 background: #827bfa !important;
469 } 472 border-color: #827bfa !important;
470 .open-dialog-button { 473 text-transform: none !important;
471 background: #827bfa !important; 474 }
472 border-color: #827bfa !important; 475 </style>
473 text-transform: none !important; 476
src/pages/Authentication/Login.vue
Diff comments   View file @8b7976c
1 <template> 1 <template>
2 <v-app id="login"> 2 <v-app id="login">
3 <v-content> 3 <v-content>
4 <v-container fluid fill-height> 4 <v-container fluid fill-height>
5 <!-- SNACKBAR --> 5 <!-- SNACKBAR -->
6 <v-snackbar 6 <v-snackbar
7 :timeout="timeout" 7 :timeout="timeout"
8 :top="y === 'top'" 8 :top="y === 'top'"
9 :right="x === 'right'" 9 :right="x === 'right'"
10 :vertical="mode === 'vertical'" 10 :vertical="mode === 'vertical'"
11 v-model="snackbar" 11 v-model="snackbar"
12 :color="snackbarColor" 12 :color="snackbarColor"
13 > 13 >
14 {{ text }} 14 {{ text }}
15 <v-spacer></v-spacer> 15 <v-spacer></v-spacer>
16 <v-btn flat text @click="snackbar = false">X</v-btn> 16 <v-btn flat text @click="snackbar = false">X</v-btn>
17 </v-snackbar> 17 </v-snackbar>
18 <v-layout align-center justify-center> 18 <v-layout align-center justify-center>
19 <v-flex xs12 sm10 md5 lg4> 19 <v-flex xs12 sm10 md5 lg4>
20 <img 20 <img
21 src="/static/icon.png" 21 src="/static/icon.png"
22 height="40" 22 height="40"
23 width="140" 23 width="140"
24 alt="logo" 24 alt="logo"
25 class="logo mx-auto mb-2" 25 class="logo mx-auto mb-2"
26 /> 26 />
27 <v-card class="elevation-1 px-2 py-3 card" style="background-color: #7852cc" dark> 27 <v-card class="elevation-1 px-2 py-3 card" style="background-color: #7852cc" dark>
28 <img 28 <img
29 src="/static/intrackIllustration.png" 29 src="/static/intrackIllustration.png"
30 class="mx-auto logoSchool" 30 class="mx-auto logoSchool"
31 style="display:block" 31 style="display:block"
32 width="280" 32 width="280"
33 /> 33 />
34 <v-card-text align-center justify-center> 34 <v-card-text align-center justify-center>
35 <v-toolbar-title class="text-xs-center subheadline">SCHOOL LOGIN</v-toolbar-title> 35 <v-toolbar-title class="text-xs-center subheadline">SCHOOL LOGIN</v-toolbar-title>
36 <v-flex xs12 sm12 md12 lg12> 36 <v-flex xs12 sm12 md12 lg12>
37 <v-form ref="form" v-model="valid" lazy-validation> 37 <v-form ref="form" v-model="valid" lazy-validation>
38 <label class="title">Email / PhoneNo</label> 38 <label class="title">Email / PhoneNo</label>
39 <v-text-field 39 <v-text-field
40 style="padding: 0px; margin: 0px;" 40 style="padding: 0px; margin: 0px;"
41 v-model.trim="userLogincredentials.email" 41 v-model.trim="userLogincredentials.email"
42 :rules="nameRules" 42 :rules="nameRules"
43 placeholder="Enter your email / phoneNo" 43 placeholder="Enter your email / phoneNo"
44 required 44 required
45 ></v-text-field> 45 ></v-text-field>
46 <label class="title">Password</label> 46 <label class="title">Password</label>
47 <v-text-field 47 <v-text-field
48 style="padding: 0px; margin: 0px;" 48 style="padding: 0px; margin: 0px;"
49 :rules="[rules.required]" 49 :rules="[rules.required]"
50 v-model.trim="userLogincredentials.password" 50 v-model.trim="userLogincredentials.password"
51 :append-icon="e1 ? 'visibility_off' : 'visibility'" 51 :append-icon="e1 ? 'visibility_off' : 'visibility'"
52 :append-icon-cb="() => (e1 = !e1)" 52 :append-icon-cb="() => (e1 = !e1)"
53 :type="e1 ? 'password' : 'text'" 53 :type="e1 ? 'password' : 'text'"
54 name="input-10-1" 54 name="input-10-1"
55 placeholder="Enter Your password" 55 placeholder="Enter Your password"
56 @keyup.enter="login" 56 @keyup.enter="login"
57 ></v-text-field> 57 ></v-text-field>
58 </v-form> 58 </v-form>
59 <v-layout> 59 <v-layout>
60 <v-flex xs12 class="pa-0 ma-0"> 60 <v-flex xs12 class="pa-0 ma-0">
61 <h5 class="right mt-4"> 61 <h5 class="right mt-4">
62 <router-link class="link" to="/forgetpassword">Forgot password</router-link> 62 <router-link class="link" to="/forgetpassword">Forgot password</router-link>
63 </h5> 63 </h5>
64 </v-flex> 64 </v-flex>
65 </v-layout> 65 </v-layout>
66 </v-flex> 66 </v-flex>
67 </v-card-text> 67 </v-card-text>
68 <v-layout> 68 <v-layout>
69 <v-flex sm12> 69 <v-flex sm12>
70 <v-btn 70 <v-btn
71 style="margin: auto;display: block;background-color: #71d9ea; color: #0c0754;" 71 style="margin: auto;display: block;background-color: #71d9ea; color: #0c0754;"
72 dark 72 dark
73 flat 73 flat
74 @click="login" 74 @click="login"
75 :loading="loading" 75 :loading="loading"
76 >Login</v-btn> 76 >Login</v-btn>
77 </v-flex> 77 </v-flex>
78 </v-layout> 78 </v-layout>
79 <v-layout></v-layout> 79 <v-layout></v-layout>
80 </v-card> 80 </v-card>
81 </v-flex> 81 </v-flex>
82 </v-layout> 82 </v-layout>
83 </v-container> 83 </v-container>
84 </v-content> 84 </v-content>
85 </v-app> 85 </v-app>
86 </template> 86 </template>
87 87
88 <script> 88 <script>
89 import http from "@/Services/http.js"; 89 import http from "@/Services/http.js";
90 import AllApiCalls from "@/Services/AllApiCalls.js"; 90 import AllApiCalls from "@/Services/AllApiCalls.js";
91 export default { 91 export default {
92 mixins: [AllApiCalls], 92 mixins: [AllApiCalls],
93 data() { 93 data() {
94 return { 94 return {
95 //SNACKBAR 95 //SNACKBAR
96 y: "top", 96 y: "top",
97 x: "right", 97 x: "right",
98 mode: "", 98 mode: "",
99 timeout: 10000, 99 timeout: 10000,
100 text: "", 100 text: "",
101 snackbarColor: "", 101 snackbarColor: "",
102 102
103 snackbar: false, 103 snackbar: false,
104 append: "", 104 append: "",
105 e1: true, 105 e1: true,
106 loading: false, 106 loading: false,
107 remember: false, 107 remember: false,
108 valid: false, 108 valid: false,
109 userLogincredentials: {}, 109 userLogincredentials: {},
110 nameRules: [(v) => !!v || "Field is required"], 110 nameRules: [(v) => !!v || "Field is required"],
111 password: "", 111 password: "",
112 email: "", 112 email: "",
113 rules: { 113 rules: {
114 required: (value) => !!value || "password is Required.", 114 required: (value) => !!value || "password is Required.",
115 }, 115 },
116 selectedStudent: {}, 116 selectedStudent: {},
117 }; 117 };
118 }, 118 },
119 methods: { 119 methods: {
120 async login() { 120 async login() {
121 if (this.$refs.form.validate()) { 121 if (this.$refs.form.validate()) {
122 this.loading = true; 122 this.loading = true;
123 var userdata = { 123 var userdata = {
124 email: this.userLogincredentials.email, 124 email: this.userLogincredentials.email,
125 password: this.userLogincredentials.password, 125 password: this.userLogincredentials.password,
126 }; 126 };
127 if (/^[0-9]{10}$/.test(this.userLogincredentials.email)) { 127 if (/^[0-9]{10}$/.test(this.userLogincredentials.email)) {
128 userdata.fatherCellNo = this.userLogincredentials.email; 128 userdata.fatherCellNo = this.userLogincredentials.email;
129 delete userdata.email; 129 delete userdata.email;
130 } 130 }
131 http() 131 http()
132 .post("/schoolLogin", userdata) 132 .post("/schoolLogin", userdata)
133 .then((response) => { 133 .then((response) => {
134 // console.log("token",response.data.data); 134 // console.log("token",response.data.data);
135 this.loading = false; 135 this.loading = false;
136 if (response.data.data.role === "ADMIN") { 136 if (response.data.data.role === "ADMIN") {
137 this.$store.dispatch("setToken", response.data.data.token); 137 this.$store.dispatch("setToken", response.data.data.token);
138 this.$store.dispatch("Id", response.data.data.id); 138 this.$store.dispatch("Id", response.data.data.id);
139 this.$store.dispatch("Role", response.data.data.role); 139 this.$store.dispatch("Role", response.data.data.role);
140 this.$router.push("/dashboard"); 140 this.$router.push("/dashboard");
141 } else if (response.data.data.role === "SUPERADMIN") { 141 } else if (response.data.data.role === "SUPERADMIN") {
142 this.$store.dispatch("setSchoolRole", response.data.data.role); 142 this.$store.dispatch("setSchoolRole", response.data.data.role);
143 this.$store.dispatch("setSchoolToken", response.data.data.token); 143 this.$store.dispatch("setSchoolToken", response.data.data.token);
144 this.$router.push("/schooldashboard"); 144 this.$router.push("/schooldashboard");
145 } else if (response.data.data.role === "TEACHER") { 145 } else if (response.data.data.role === "TEACHER") {
146 // console.log("teacher", response.data.data.role); 146 // console.log("teacher", response.data.data.role);
147 this.$store.dispatch("setToken", response.data.data.token); 147 this.$store.dispatch("setToken", response.data.data.token);
148 this.$store.dispatch("Id", response.data.data.id); 148 this.$store.dispatch("Id", response.data.data.id);
149 this.$store.dispatch("Role", response.data.data.role); 149 this.$store.dispatch("Role", response.data.data.role);
150 localStorage.setItem("teacherName", response.data.data.name); 150 localStorage.setItem("teacherName", response.data.data.name);
151 this.$router.push("/dashboard"); 151 this.$router.push("/dashboard");
152 } else if (response.data.data.role === "LIBRARIAN") { 152 } else if (response.data.data.role === "LIBRARIAN") {
153 this.$store.dispatch("setToken", response.data.data.token); 153 this.$store.dispatch("setToken", response.data.data.token);
154 this.$store.dispatch("Id", response.data.data.id); 154 this.$store.dispatch("Id", response.data.data.id);
155 this.$store.dispatch("Role", response.data.data.role); 155 this.$store.dispatch("Role", response.data.data.role);
156 this.$router.push("/dashboard"); 156 this.$router.push("/dashboard");
157 } else if (response.data.data.role === "ACCOUNTANT") { 157 } else if (response.data.data.role === "ACCOUNTANT") {
158 this.$store.dispatch("setToken", response.data.data.token); 158 this.$store.dispatch("setToken", response.data.data.token);
159 this.$store.dispatch("Id", response.data.data.id); 159 this.$store.dispatch("Id", response.data.data.id);
160 this.$store.dispatch("Role", response.data.data.role); 160 this.$store.dispatch("Role", response.data.data.role);
161 this.$router.push("/dashboard"); 161 this.$router.push("/dashboard");
162 } else if (response.data.data.role === "PARENT") { 162 } else if (response.data.data.role === "PARENT") {
163 this.$store.dispatch("setToken", response.data.data.token); 163 this.$store.dispatch("setToken", response.data.data.token);
164 this.$store.dispatch("Id", response.data.data.id); 164 this.$store.dispatch("Id", response.data.data.id);
165 this.$store.dispatch("Role", response.data.data.role); 165 this.$store.dispatch("Role", response.data.data.role);
166 localStorage.setItem("parentStudentId", response.data.data.id); 166 localStorage.setItem("parentStudentId", response.data.data.id);
167 167
168 http() 168 http()
169 .get("/parentStudentsList") 169 .get("/parentStudentsList")
170 .then((response) => { 170 .then((response) => {
171 /* set disabled students values */ 171 /* set disabled students values */
172 // console.log("students - ", response.data.data.students); 172 // console.log("students - ", response.data.data.students);
173 /* prepare an array of false status students */ 173 /* prepare an array of false status students */
174 var indexStatusFalse = []; 174 var indexStatusFalse = [];
175 for (var i = 0; i < response.data.data.students.length; i++) { 175 for (var i = 0; i < response.data.data.students.length; i++) {
176 if (response.data.data.students[i].status == false) { 176 if (response.data.data.students[i].status == false) {
177 indexStatusFalse.push(i); 177 indexStatusFalse.push(i);
178 } 178 }
179 } 179 }
180 /* introduce a property named disabled in response to make false staus students disbled */ 180 /* introduce a property named disabled in response to make false staus students disbled */
181 for (var i = 0; i < indexStatusFalse.length; i++) { 181 for (var i = 0; i < indexStatusFalse.length; i++) {
182 response.data.data.students[ 182 response.data.data.students[
183 indexStatusFalse[i] 183 indexStatusFalse[i]
184 ].disabled = true; 184 ].disabled = true;
185 } 185 }
186 /* make an array of students */ 186 /* make an array of students */
187 this.$store.dispatch( 187 this.$store.dispatch(
188 "SET_STUDENTS_DATA", 188 "SET_STUDENTS_DATA",
189 response.data.data.students 189 response.data.data.students
190 ); 190 );
191 191
192 /* counter to keep a track of number of students that are disabled or false */ 192 /* counter to keep a track of number of students that are disabled or false */
193 var counter = 0; 193 var counter = 0;
194 /* if zero element of false students list is > 0 then make first student as defalut selected */ 194 /* if zero element of false students list is > 0 then make first student as defalut selected */
195 if (indexStatusFalse[0] > 0) { 195 if (indexStatusFalse[0] > 0) {
196 this.selectedStudent = response.data.data.students[0]._id; 196 this.selectedStudent = response.data.data.students[0]._id;
197 } 197 }
198 // console.log("indexStatusFalse - ", indexStatusFalse); 198 // console.log("indexStatusFalse - ", indexStatusFalse);
199 /* if false student is the first one in the list then see if the next is also false */ 199 /* if false student is the first one in the list then see if the next is also false */
200 if (indexStatusFalse[0] == 0) { 200 if (indexStatusFalse[0] == 0) {
201 if (indexStatusFalse.length > 1) { 201 if (indexStatusFalse.length > 1) {
202 for (var i = 1; i < indexStatusFalse.length; i++) { 202 for (var i = 1; i < indexStatusFalse.length; i++) {
203 if (indexStatusFalse[i] == i) { 203 if (indexStatusFalse[i] == i) {
204 if (indexStatusFalse[i - 1] == i - 1) { 204 if (indexStatusFalse[i - 1] == i - 1) {
205 counter = i + 1; 205 counter = i + 1;
206 continue; 206 continue;
207 } 207 }
208 } else { 208 } else {
209 counter = i; 209 counter = i;
210 break; 210 break;
211 } 211 }
212 } 212 }
213 } else { 213 } else {
214 counter = 1; 214 counter = 1;
215 } 215 }
216 } 216 }
217 // console.log("counter - ", counter); 217 // console.log("counter - ", counter);
218 if (counter == response.data.data.students.length) { 218 if (counter == response.data.data.students.length) {
219 this.seeSnackbar( 219 this.seeSnackbar(
220 "Your wards have been removed ", 220 "Your wards have been removed ",
221 "warning" 221 "warning"
222 ); 222 );
223 223
224 this.$store.dispatch("setToken", null); 224 this.$store.dispatch("setToken", null);
225 this.$store.dispatch("Id", null); 225 this.$store.dispatch("Id", null);
226 } else { 226 } else {
227 this.selectedStudent = 227 this.selectedStudent =
228 response.data.data.students[counter]._id; 228 response.data.data.students[counter]._id;
229 var studentName = response.data.data.students[counter].name; 229 var studentName = response.data.data.students[counter].name;
230 localStorage.setItem("studentName", studentName); 230 localStorage.setItem("studentName", studentName);
231 localStorage.setItem( 231 localStorage.setItem(
232 "parentStudentId", 232 "parentStudentId",
233 this.selectedStudent 233 this.selectedStudent
234 ); 234 );
235 localStorage.setItem( 235 localStorage.setItem(
236 "parentClassId", 236 "parentClassId",
237 response.data.data.students[counter].classId 237 response.data.data.students[counter].classId
238 ); 238 );
239 this.$router.push("/dashboard"); 239 this.$router.push("/dashboard");
240 } 240 }
241 this.showLoader = false; 241 this.showLoader = false;
242 }) 242 })
243 .catch((err) => { 243 .catch((err) => {
244 // console.log("err====>", err); 244 // console.log("err====>", err);
245 this.showLoader = false; 245 this.showLoader = false;
246 this.snackbar = true;
247 this.color = "error";
248 this.text = error.response.data.message;
246 this.snackbar = true; 249 });
247 this.color = "error"; 250 }
248 this.text = error.response.data.message; 251 })
249 }); 252 .catch((error) => {
250 } 253 if (error.response.data.message) {
251 }) 254 this.text = error.response.data.message;
252 .catch((error) => { 255 this.snackbar = true;
253 if (error.response.data.message) { 256 this.snackbarColor = "error";
254 this.text = error.response.data.message; 257 this.loading = false;
255 this.snackbar = true; 258 } else {
256 this.snackbarColor = "error"; 259 this.text = "Server appears to be offline";
257 this.loading = false; 260 this.snackbar = true;
258 } else { 261 this.snackbarColor = "error";
259 this.text = "Server appears to be offline"; 262 this.loading = false;
260 this.snackbar = true; 263 }
261 this.snackbarColor = "error"; 264 });
262 this.loading = false; 265 }
263 } 266 },
264 }); 267 },
265 } 268 mounted() {
266 }, 269 if (this.$store.state.isUserLoggedIn == true) {
267 }, 270 this.$router.push("/dashboard");
268 mounted() { 271 } else if (this.$store.state.isSchoolLoggedIn == true) {
269 if (this.$store.state.isUserLoggedIn == true) { 272 this.$router.push("/dashboard");
270 this.$router.push("/dashboard"); 273 }
271 } else if (this.$store.state.isSchoolLoggedIn == true) { 274 },
272 this.$router.push("/dashboard"); 275 computed: {
273 } 276 color() {
274 }, 277 return this.loading ? "success" : "error";
275 computed: { 278 },
276 color() { 279 },
277 return this.loading ? "success" : "error"; 280 };
278 }, 281 </script>
279 }, 282
280 }; 283 <style scoped lang="css">
281 </script> 284 #login {
282 285 width: 100%;
283 <style scoped lang="css"> 286 position: absolute;
284 #login { 287 top: 0;
285 width: 100%; 288 left: 0;
286 position: absolute; 289 content: "";
287 top: 0; 290 z-index: 0;
288 left: 0; 291 }
289 content: ""; 292 </style>
290 z-index: 0; 293 <style scoped>
291 } 294 .schoolLogo {
292 </style> 295 height: 60%;
293 <style scoped> 296 padding-left: 31%;
294 .schoolLogo { 297 }
295 height: 60%; 298 /* img {
296 padding-left: 31%; 299 position: absolute;
297 } 300 top: 13px;
298 /* img { 301 left: 8px;
299 position: absolute; 302 } */
300 top: 13px; 303 .v-btn--large {
301 left: 8px; 304 padding: 0px 84px;
302 } */ 305 }
303 .v-btn--large { 306 .link {
304 padding: 0px 84px; 307 text-decoration: none;
305 } 308 }
306 .link { 309 a {
307 text-decoration: none; 310 color: #fff;
308 } 311 }
309 a { 312 .mt-4 {
310 color: #fff; 313 margin-top: 21px !important;
311 } 314 }
312 .mt-4 { 315 .logo {
313 margin-top: 21px !important; 316 display: block;
314 } 317 }
315 .logo { 318 @media screen and (max-width: 600px) {
316 display: block; 319 img {
317 } 320 left: 10px;
318 @media screen and (max-width: 600px) { 321 height: 34px;
319 img { 322 width: 120px;
320 left: 10px; 323 }
321 height: 34px; 324 .logo {
322 width: 120px; 325 height: 56px;
323 } 326 left: 10px;
324 .logo { 327 width: 120px;
325 height: 56px; 328 display: block;
326 left: 10px; 329 }
327 width: 120px; 330 .logoSchool {
328 display: block; 331 height: 87px;
329 } 332 left: 10px;
330 .logoSchool { 333 width: 120px;
331 height: 87px; 334 }
332 left: 10px; 335 }
333 width: 120px; 336 </style>
src/pages/Authentication/changepassword.vue
Diff comments   View file @8b7976c
1 <template> 1 <template>
2 <v-app id="login"> 2 <v-app id="login">
3 <v-container fluid fill-height> 3 <v-container fluid fill-height>
4 <v-layout> 4 <v-layout>
5 <v-flex xs12 sm8 md8 lg5 offset-sm2 offset-lg3 class="mt-5"> 5 <v-flex xs12 sm8 md8 lg5 offset-sm2 offset-lg3 class="mt-5">
6 <v-toolbar class="fixcolors mt-5" dark> 6 <v-toolbar class="fixcolors mt-5" dark>
7 <v-spacer></v-spacer> 7 <v-spacer></v-spacer>
8 <v-toolbar-title>Technology Succes</v-toolbar-title> 8 <v-toolbar-title>Technology Succes</v-toolbar-title>
9 <v-spacer></v-spacer> 9 <v-spacer></v-spacer>
10 </v-toolbar> 10 </v-toolbar>
11 <v-card class="elevation-1 pa-3" id="form"> 11 <v-card class="elevation-1 pa-3" id="form">
12 <v-card-text> 12 <v-card-text>
13 <v-flex xs12 sm8 md8 lg8 offset-sm2> 13 <v-flex xs12 sm8 md8 lg8 offset-sm2>
14 <v-form class="mt-3"> 14 <v-form class="mt-3">
15 <v-text-field 15 <v-text-field
16 :rules="[rules.required]" 16 :rules="[rules.required]"
17 v-model="adminChangePasswordcredentials.oldPassword" 17 v-model="adminChangePasswordcredentials.oldPassword"
18 label="Old Password" 18 label="Old Password"
19 ></v-text-field> 19 ></v-text-field>
20 <v-text-field 20 <v-text-field
21 v-model="adminChangePasswordcredentials.newPassword" 21 v-model="adminChangePasswordcredentials.newPassword"
22 :rules="[rules.required]" 22 :rules="[rules.required]"
23 label="New Password" 23 label="New Password"
24 ></v-text-field> 24 ></v-text-field>
25 </v-form> 25 </v-form>
26 </v-flex> 26 </v-flex>
27 </v-card-text> 27 </v-card-text>
28 <v-card-actions> 28 <v-card-actions>
29 <v-flex text-xs-center> 29 <v-flex text-xs-center>
30 <v-btn 30 <v-btn
31 class="mt-3" 31 class="mt-3"
32 round 32 round
33 color="black" 33 color="black"
34 dark 34 dark
35 large 35 large
36 :loading="loading" 36 :loading="loading"
37 @click="reset" 37 @click="reset"
38 >Reset Password</v-btn> 38 >Reset Password</v-btn>
39 </v-flex> 39 </v-flex>
40 </v-card-actions> 40 </v-card-actions>
41 <v-snackbar 41 <v-snackbar
42 :timeout="timeout" 42 :timeout="timeout"
43 :top="y === 'top'" 43 :top="y === 'top'"
44 :right="x === 'right'" 44 :right="x === 'right'"
45 :vertical="mode === 'vertical'" 45 :vertical="mode === 'vertical'"
46 v-model="snackbar" 46 v-model="snackbar"
47 :color="color" 47 :color="color"
48 >{{ text }}</v-snackbar> 48 >{{ text }}</v-snackbar>
49 </v-card> 49 </v-card>
50 </v-flex> 50 </v-flex>
51 </v-layout> 51 </v-layout>
52 </v-container> 52 </v-container>
53 </v-app> 53 </v-app>
54 </template> 54 </template>
55 <script> 55 <script>
56 import http from "@/Services/http.js"; 56 import http from "@/Services/http.js";
57 57
58 export default { 58 export default {
59 data() { 59 data() {
60 return { 60 return {
61 snackbar: false, 61 snackbar: false,
62 y: "top", 62 y: "top",
63 x: "right", 63 x: "right",
64 mode: "", 64 mode: "",
65 timeout: 4000, 65 timeout: 4000,
66 text: "", 66 text: "",
67 adminChangePasswordcredentials: {}, 67 adminChangePasswordcredentials: {},
68 e1: true, 68 e1: true,
69 e2: true, 69 e2: true,
70 e3: true, 70 e3: true,
71 loading: false, 71 loading: false,
72 valid: false, 72 valid: false,
73 text: "Password Changed", 73 text: "Password Changed",
74 currentPassword: "", 74 currentPassword: "",
75 newPassword: "", 75 newPassword: "",
76 confirmPassword: "", 76 confirmPassword: "",
77 rules: { 77 rules: {
78 required: (value) => !!value || "This password field is Required.", 78 required: (value) => !!value || "This password field is Required.",
79 // min: v => (/^(?=.*[a-z])(?=.*[A-Z])(?=.*[0-9])(?=.*[!@#$%^&*])(?=.{8,})/).test(v) && v.length >= 8 || 'Min 8 characters upper case lower case symbol required' 79 // min: v => (/^(?=.*[a-z])(?=.*[A-Z])(?=.*[0-9])(?=.*[!@#$%^&*])(?=.{8,})/).test(v) && v.length >= 8 || 'Min 8 characters upper case lower case symbol required'
80 }, 80 },
81 }; 81 };
82 }, 82 },
83 methods: { 83 methods: {
84 reset() { 84 reset() {
85 var token = this.$store.state.token; 85 var token = this.$store.state.token;
86 var userdata = { 86 var userdata = {
87 oldPassword: this.adminChangePasswordcredentials.oldPassword, 87 oldPassword: this.adminChangePasswordcredentials.oldPassword,
88 newPassword: this.adminChangePasswordcredentials.newPassword, 88 newPassword: this.adminChangePasswordcredentials.newPassword,
89 }; 89 };
90 http() 90 http()
91 .put("/schoolChangePassword", userdata, { 91 .put("/schoolChangePassword", userdata, {
92 headers: { Authorization: "Bearer " + token }, 92 headers: { Authorization: "Bearer " + token },
93 }) 93 })
94 .then((response) => { 94 .then((response) => {
95 this.loading = true; 95 this.loading = true;
96 if ((this.snackbar = true)) { 96 if ((this.snackbar = true)) {
97 this.text = "Successfully changed password !!"; 97 this.text = "Successfully changed password !!";
98 // console.log("snackbar", response.data.message); 98 // console.log("snackbar", response.data.message);
99 } 99 }
100 setTimeout(() => { 100 setTimeout(() => {
101 this.$router.push("/dashboard"); 101 this.$router.push("/dashboard");
102 }, 2000); 102 }, 2000);
103 }) 103 })
104 .catch((error) => { 104 .catch((error) => {
105 // console.log("err====>",err); 105 // console.log("err====>",err);
106 this.text = "User Not Found or Incorrect currentPassword"; 106 this.text = "User Not Found or Incorrect currentPassword";
107 this.snackbar = true; 107 this.snackbar = true;
108 this.loading = false; 108 this.loading = false;
109 if (error.response.status === 401) { 109 if (error.response.status === 401) {
110 this.$router.replace({ path: "/" }); 110 this.$router.replace({ path: "/" });
111 this.$store.dispatch("setToken", null); 111 this.$store.dispatch("setToken", null);
112 this.$store.dispatch("Id", null); 112 this.$store.dispatch("Id", null);
113 this.$store.dispatch("Role", null); 113 this.$store.dispatch("Role", null);
114 } 114 }
115 }); 115 });
116 }, 116 },
117 }, 117 },
118 computed: { 118 computed: {
119 color() { 119 color() {
120 return this.loading ? "success" : "error"; 120 return this.loading ? "success" : "error";
121 }, 121 },
122 }, 122 },
123 }; 123 };
124 </script> 124 </script>
125 <style scoped> 125 <style scoped>
126 img { 126 img {
127 position: absolute; 127 position: absolute;
128 top: 13px; 128 top: 13px;
129 left: 50px; 129 left: 50px;
130 } 130 }
131 .v-btn--large { 131 .v-btn--large {
132 padding: 0px 74px; 132 padding: 0px 74px;
133 } 133 }
134 @media screen and (max-width: 769px) { 134 @media screen and (max-width: 769px) {
135 .v-btn--large { 135 .v-btn--large {
136 font-size: 14px; 136 font-size: 14px;
137 height: 44px; 137 height: 44px;
138 padding: 0 32px; 138 padding: 0 32px;
139 } 139 }
140 } 140 }
141 </style> 141 </style>
142 142
src/pages/Authentication/forgetpassword.vue
Diff comments   View file @8b7976c
1 <template> 1 <template>
2 <v-app id="login"> 2 <v-app id="login">
3 <v-toolbar dense flat class="transparent mb-4"> 3 <v-toolbar dense flat class="transparent mb-4">
4 <v-toolbar-items class="mx-auto"> 4 <v-toolbar-items class="mx-auto">
5 <img src="/static/icon.png" height="50" width="140" alt="logo" style=" margin-top: 15%" /> 5 <img src="/static/icon.png" height="50" width="140" alt="logo" style=" margin-top: 15%" />
6 </v-toolbar-items> 6 </v-toolbar-items>
7 </v-toolbar> 7 </v-toolbar>
8 <v-container fluid> 8 <v-container fluid>
9 <v-layout align-center justify-center fill-height> 9 <v-layout align-center justify-center fill-height>
10 <v-flex xs12 sm10 md6 lg4> 10 <v-flex xs12 sm10 md6 lg4>
11 <div> 11 <div>
12 <v-app> 12 <v-app>
13 <v-stepper v-model="e2"> 13 <v-stepper v-model="e2">
14 <v-stepper-header> 14 <v-stepper-header>
15 <v-stepper-step :complete="e2 > 1" step="1">Fill Your Email</v-stepper-step> 15 <v-stepper-step :complete="e2 > 1" step="1">Fill Your Email</v-stepper-step>
16 <v-divider></v-divider> 16 <v-divider></v-divider>
17 <v-stepper-step step="2">Last Step of Forget Password</v-stepper-step> 17 <v-stepper-step step="2">Last Step of Forget Password</v-stepper-step>
18 </v-stepper-header> 18 </v-stepper-header>
19 <v-stepper-items> 19 <v-stepper-items>
20 <v-stepper-content step="1"> 20 <v-stepper-content step="1">
21 <v-content> 21 <v-content>
22 <v-container fluid class="content"> 22 <v-container fluid class="content">
23 <v-layout align-center justify-center fill-height> 23 <v-layout align-center justify-center fill-height>
24 <v-flex> 24 <v-flex>
25 <v-toolbar style="background-color: #7852cc" dark> 25 <v-toolbar style="background-color: #7852cc" dark>
26 <v-spacer></v-spacer> 26 <v-spacer></v-spacer>
27 <v-toolbar-title>Forget Password</v-toolbar-title> 27 <v-toolbar-title>Forget Password</v-toolbar-title>
28 <v-spacer></v-spacer> 28 <v-spacer></v-spacer>
29 </v-toolbar> 29 </v-toolbar>
30 <v-card class="elevation-1 pa-1"> 30 <v-card class="elevation-1 pa-1">
31 <v-card-text> 31 <v-card-text>
32 <h5 32 <h5
33 class="text-xs-center" 33 class="text-xs-center"
34 >Not to Worry! Enter to your registered Email ID.</h5>
35 <h5 class="text-xs-center">We'll send you a reset.</h5>
34 >Not to Worry! Enter to your registered Email ID.</h5> 36 <v-flex lg6 sm6 xs10 offset-sm3 offset-xs1 offset-lg3>
35 <h5 class="text-xs-center">We'll send you a reset.</h5> 37 <v-form ref="form" v-model="valid" lazy-validation>
36 <v-flex lg6 sm6 xs10 offset-sm3 offset-xs1 offset-lg3> 38 <div class="custom-input-align">
37 <v-form ref="form" v-model="valid" lazy-validation> 39 <v-text-field
38 <div class="custom-input-align"> 40 class="text-md-center"
39 <v-text-field 41 :rules="emailRules"
40 class="text-md-center" 42 v-model="forgetemail"
41 :rules="emailRules" 43 label="Enter Your email ID"
42 v-model="forgetemail" 44 required
45 ></v-text-field>
43 label="Enter Your email ID" 46 </div>
44 required 47 </v-form>
45 ></v-text-field> 48 </v-flex>
46 </div> 49 </v-card-text>
47 </v-form> 50 <v-card-actions>
48 </v-flex> 51 <v-flex text-xs-center>
49 </v-card-text> 52 <v-btn
53 style="background-color: #71d9ea; color: #0c0754;"
54 dark
55 flat
56 @click="reset"
57 >Send Request</v-btn>
50 <v-card-actions> 58 </v-flex>
51 <v-flex text-xs-center> 59 </v-card-actions>
52 <v-btn 60 <v-snackbar
53 style="background-color: #71d9ea; color: #0c0754;" 61 :timeout="timeout"
54 dark 62 :top="y === 'top'"
55 flat 63 :right="x === 'right'"
56 @click="reset" 64 :vertical="mode === 'vertical'"
57 >Send Request</v-btn> 65 v-model="snackbar"
58 </v-flex> 66 :color="color"
59 </v-card-actions> 67 >{{ text }}</v-snackbar>
60 <v-snackbar 68 </v-card>
61 :timeout="timeout" 69 </v-flex>
62 :top="y === 'top'" 70 </v-layout>
63 :right="x === 'right'" 71 </v-container>
64 :vertical="mode === 'vertical'" 72 </v-content>
65 v-model="snackbar" 73 </v-stepper-content>
66 :color="color" 74 <v-stepper-content step="2">
67 >{{ text }}</v-snackbar> 75 <v-content>
68 </v-card> 76 <v-container fluid fill-height>
69 </v-flex> 77 <v-layout align-center justify-center>
70 </v-layout> 78 <v-flex>
71 </v-container> 79 <v-toolbar style="background-color: #7852cc" dark>
72 </v-content> 80 <v-spacer></v-spacer>
73 </v-stepper-content> 81 <v-toolbar-title>Forget Password</v-toolbar-title>
74 <v-stepper-content step="2"> 82 <v-spacer></v-spacer>
75 <v-content> 83 </v-toolbar>
76 <v-container fluid fill-height> 84 <v-card class="elevation-1 pa-1">
77 <v-layout align-center justify-center> 85 <v-card-text>
78 <v-flex> 86 <h5
79 <v-toolbar style="background-color: #7852cc" dark> 87 class="text-xs-center"
80 <v-spacer></v-spacer> 88 >Not to Worry! Enter to your registered Email ID And New Password.</h5>
81 <v-toolbar-title>Forget Password</v-toolbar-title> 89 <h5 class="text-xs-center">We'll send you a reset.</h5>
82 <v-spacer></v-spacer> 90 <v-flex lg6 sm6 xs10 offset-sm3 offset-xs1 offset-lg3>
83 </v-toolbar> 91 <v-form class="mt-4">
84 <v-card class="elevation-1 pa-1"> 92 <div class="custom-input-align">
85 <v-card-text> 93 <v-text-field
86 <h5 94 class="text-md-center"
87 class="text-xs-center" 95 v-model="uniqueCode"
88 >Not to Worry! Enter to your registered Email ID And New Password.</h5> 96 type="text"
89 <h5 class="text-xs-center">We'll send you a reset.</h5> 97 label="Enter Unique Code"
90 <v-flex lg6 sm6 xs10 offset-sm3 offset-xs1 offset-lg3> 98 required
91 <v-form class="mt-4"> 99 ></v-text-field>
92 <div class="custom-input-align"> 100 <v-text-field
93 <v-text-field 101 :rules="[rules.required,rules.min]"
94 class="text-md-center" 102 v-model="changepassword"
95 v-model="uniqueCode" 103 :append-icon="e1 ? 'visibility_off' : 'visibility'"
96 type="text" 104 :append-icon-cb="() => (e1 = !e1)"
97 label="Enter Unique Code" 105 :type="e1 ? 'password' : 'text'"
98 required 106 name="input-10-1"
99 ></v-text-field> 107 label="New Password"
100 <v-text-field 108 counter
101 :rules="[rules.required,rules.min]" 109 ></v-text-field>
102 v-model="changepassword" 110 </div>
103 :append-icon="e1 ? 'visibility_off' : 'visibility'" 111 </v-form>
104 :append-icon-cb="() => (e1 = !e1)" 112 </v-flex>
105 :type="e1 ? 'password' : 'text'" 113 </v-card-text>
106 name="input-10-1" 114 <v-card-actions>
107 label="New Password" 115 <v-flex text-xs-center>
108 counter 116 <v-btn
109 ></v-text-field> 117 style="background-color: #71d9ea; color: #0c0754;"
110 </div> 118 dark
111 </v-form> 119 flat
112 </v-flex> 120 @click="resetPassword"
113 </v-card-text> 121 >Send Request</v-btn>
114 <v-card-actions> 122 </v-flex>
115 <v-flex text-xs-center> 123 </v-card-actions>
116 <v-btn 124 <v-snackbar
117 style="background-color: #71d9ea; color: #0c0754;" 125 :timeout="timeout"
118 dark 126 :top="y === 'top'"
119 flat 127 :right="x === 'right'"
120 @click="resetPassword" 128 :vertical="mode === 'vertical'"
121 >Send Request</v-btn> 129 v-model="snackbar"
122 </v-flex> 130 :color="color"
123 </v-card-actions> 131 >{{ text }}</v-snackbar>
124 <v-snackbar 132 </v-card>
125 :timeout="timeout" 133 </v-flex>
126 :top="y === 'top'" 134 </v-layout>
127 :right="x === 'right'" 135 </v-container>
128 :vertical="mode === 'vertical'" 136 </v-content>
129 v-model="snackbar" 137 <v-btn color="#7852cc" dark @click="e2 = 1">Back</v-btn>
130 :color="color" 138 </v-stepper-content>
131 >{{ text }}</v-snackbar> 139 </v-stepper-items>
132 </v-card> 140 </v-stepper>
133 </v-flex> 141 </v-app>
134 </v-layout> 142 </div>
135 </v-container> 143 </v-flex>
136 </v-content> 144 </v-layout>
137 <v-btn color="#7852cc" dark @click="e2 = 1">Back</v-btn> 145 </v-container>
146 <!-- <v-footer class="pa-4 fixcolors">
147 </v-footer>-->
148 </v-app>
138 </v-stepper-content> 149 </template>
139 </v-stepper-items> 150
140 </v-stepper> 151
141 </v-app> 152
142 </div> 153 <script>
143 </v-flex> 154 import http from "@/Services/http.js";
144 </v-layout> 155
145 </v-container> 156 export default {
146 <!-- <v-footer class="pa-4 fixcolors"> 157 data: () => ({
147 </v-footer>--> 158 e1: true,
148 </v-app> 159 e2: 0,
149 </template> 160 snackbar: false,
150 161 y: "top",
151 162 x: "right",
152 163 mode: "",
153 <script> 164 timeout: 4000,
154 import http from "@/Services/http.js"; 165 text: "",
155 166 loading: false,
156 export default { 167 forgetemail: "",
157 data: () => ({ 168 uniqueCode: "",
158 e1: true, 169 password: "",
159 e2: 0, 170 changepassword: "",
160 snackbar: false, 171 valid: true,
161 y: "top", 172 emailRules: [
162 x: "right", 173 (v) => !!v || "E-mail is required",
163 mode: "", 174 (v) =>
164 timeout: 4000, 175 /^\w+([.-]?\w+)*@\w+([.-]?\w+)*(\.\w{2,3})+$/.test(v) ||
165 text: "", 176 "E-mail must be valid",
166 loading: false, 177 ],
167 forgetemail: "", 178
168 uniqueCode: "", 179 rules: {
169 password: "", 180 required: (value) => !!value || "password is Required.",
170 changepassword: "", 181 min: (v) =>
171 valid: true, 182 (/^(?=.*[a-z])(?=.*[A-Z])(?=.*[0-9])(?=.*[!@#$%^&*])(?=.{8,})/.test(
172 emailRules: [ 183 v
173 (v) => !!v || "E-mail is required", 184 ) &&
174 (v) => 185 v.length >= 6) ||
175 /^\w+([.-]?\w+)*@\w+([.-]?\w+)*(\.\w{2,3})+$/.test(v) || 186 "Min 4 characters upper case lower case symbol required",
176 "E-mail must be valid", 187 },
177 ], 188 }),
178 189
179 rules: { 190 methods: {
180 required: (value) => !!value || "password is Required.", 191 reset() {
181 min: (v) => 192 if (this.$refs.form.validate()) {
182 (/^(?=.*[a-z])(?=.*[A-Z])(?=.*[0-9])(?=.*[!@#$%^&*])(?=.{8,})/.test( 193 http()
183 v 194 .get("/forgot-password?email=" + this.forgetemail)
184 ) && 195 .then((response) => {
185 v.length >= 6) || 196 // console.log("response=====>",response.data.data.token);
186 "Min 4 characters upper case lower case symbol required", 197 this.$store.dispatch("setToken", response.data.data.token);
187 }, 198 this.loading = true;
188 }), 199 this.e2 = 2;
189 200 if ((this.snackbar = true)) {
190 methods: { 201 this.text = "Please Fill your Last Step of Forget Password!";
191 reset() { 202 }
192 if (this.$refs.form.validate()) { 203 })
193 http() 204 .catch((err) => {
194 .get("/forgot-password?email=" + this.forgetemail) 205 this.text = "User Not Found or Incorrect Email";
195 .then((response) => { 206 this.snackbar = true;
196 // console.log("response=====>",response.data.data.token); 207 this.loading = false;
208 });
209 }
197 this.$store.dispatch("setToken", response.data.data.token); 210 },
198 this.loading = true; 211 resetPassword() {
199 this.e2 = 2; 212 let forgotPassword = {
200 if ((this.snackbar = true)) { 213 email: this.forgetemail,
201 this.text = "Please Fill your Last Step of Forget Password!"; 214 uniqueCode: this.uniqueCode,
202 } 215 password: this.changepassword,
203 }) 216 };
204 .catch((err) => { 217 http()
205 this.text = "User Not Found or Incorrect Email"; 218 .post("/reset-password", forgotPassword)
206 this.snackbar = true; 219 .then((response) => {
220 // console.log("response=====>",response);
207 this.loading = false; 221 this.loading = true;
208 }); 222 if ((this.snackbar = true)) {
209 } 223 this.text = "Successfully Change your Password";
210 }, 224 }
211 resetPassword() { 225 setTimeout(() => {
212 let forgotPassword = { 226 this.$router.push("/");
213 email: this.forgetemail, 227 }, 1000);
214 uniqueCode: this.uniqueCode, 228 })
215 password: this.changepassword, 229 .catch((err) => {
216 }; 230 this.text = "User Not Found or Incorrect Email";
217 http() 231 this.snackbar = true;
218 .post("/reset-password", forgotPassword) 232 this.loading = false;
219 .then((response) => { 233 });
234 },
235 },
236 computed: {
237 color() {
238 return this.loading ? "success" : "error";
239 },
220 // console.log("response=====>",response); 240 },
221 this.loading = true;
222 if ((this.snackbar = true)) {
223 this.text = "Successfully Change your Password";
224 }
225 setTimeout(() => {
226 this.$router.push("/");
227 }, 1000); 241 };
228 }) 242 </script>
229 .catch((err) => { 243 <style scoped lang="css">
230 this.text = "User Not Found or Incorrect Email"; 244 .content {
231 this.snackbar = true; 245 padding: 100px 0px 100px 0px !important;
232 this.loading = false; 246 }
233 }); 247 #login {
234 }, 248 height: 50%;
235 }, 249 width: 100%;
236 computed: { 250 position: absolute;
237 color() { 251 top: 0;
238 return this.loading ? "success" : "error"; 252 left: 0;
239 }, 253 content: "";
240 }, 254 z-index: 0;
241 }; 255 }
242 </script> 256 img {
243 <style scoped lang="css"> 257 /* position:absolute; */
244 .content { 258 top: 13px;
245 padding: 100px 0px 100px 0px !important; 259 left: 8px;
246 } 260 }
247 #login { 261 .v-btn--large {
248 height: 50%; 262 padding: 0px 74px;
249 width: 100%; 263 }
250 position: absolute; 264 .button {
251 top: 0; 265 text-transform: none;
252 left: 0; 266 }
253 content: ""; 267 @media screen and (max-width: 472px) {
254 z-index: 0; 268 .v-btn--large {
255 } 269 padding: 0px 20px !important;
256 img { 270 font-size: 13px;
257 /* position:absolute; */ 271 }
258 top: 13px; 272 h5 {
259 left: 8px; 273 font-size: 11px;
274 }
260 } 275 }
261 .v-btn--large { 276 @media screen and (max-width: 600px) {
262 padding: 0px 74px; 277 .theme--light .v-btn,
263 } 278 .application .theme--light.v-btn {
264 .button { 279 color: white !important;
265 text-transform: none; 280 }
266 } 281 .logoSchool {
267 @media screen and (max-width: 472px) { 282 font-size: 18px;
268 .v-btn--large { 283 margin-top: 20px !important;
src/pages/Course/course.vue
Diff comments   View file @8b7976c
1 <template> 1 <template>
2 <v-container fluid class="body-color"> 2 <v-container fluid class="body-color">
3 <!-- ****** EDITS COURSES DETAILS ****** --> 3 <!-- ****** EDITS COURSES DETAILS ****** -->
4 <v-dialog v-model="editStudentDialog" max-width="600px" scrollable persistent> 4 <v-dialog v-model="editStudentDialog" max-width="600px" scrollable persistent>
5 <v-card flat class="card-style pa-2" dark> 5 <v-card flat class="card-style pa-2" dark>
6 <v-layout> 6 <v-layout>
7 <v-flex xs12> 7 <v-flex xs12>
8 <label class="title text-xs-center">Edit Course</label> 8 <label class="title text-xs-center">Edit Course</label>
9 <v-icon size="24" class="right" @click="editStudentDialog = false">cancel</v-icon> 9 <v-icon size="24" class="right" @click="editStudentDialog = false">cancel</v-icon>
10 </v-flex> 10 </v-flex>
11 </v-layout> 11 </v-layout>
12 <v-card-text> 12 <v-card-text>
13 <v-form ref="form"> 13 <v-form ref="form">
14 <v-container fluid> 14 <v-container fluid>
15 <v-layout> 15 <v-layout>
16 <v-flex xs12 class="text-xs-center text-sm-center text-md-center text-lg-center"> 16 <v-flex xs12 class="text-xs-center text-sm-center text-md-center text-lg-center">
17 <v-avatar size="100px" v-if="!editedItem.courseImageUrl && !editImageUrl"> 17 <v-avatar size="100px" v-if="!editedItem.courseImageUrl && !editImageUrl">
18 <img src="/static/icon/user.png" /> 18 <img src="/static/icon/user.png" />
19 </v-avatar> 19 </v-avatar>
20 <img 20 <img
21 :src="editedItem.courseImageUrl" 21 :src="editedItem.courseImageUrl"
22 v-else-if="editedItem.courseImageUrl && !editImageUrl" 22 v-else-if="editedItem.courseImageUrl && !editImageUrl"
23 height="150" 23 height="150"
24 style="border-radius:50%; width:150px" 24 style="border-radius:50%; width:150px"
25 /> 25 />
26 <img 26 <img
27 v-if="editImageUrl" 27 v-if="editImageUrl"
28 :src="editImageUrl" 28 :src="editImageUrl"
29 style="border-radius:50%; width:150px;height:150px" 29 style="border-radius:50%; width:150px;height:150px"
30 /> 30 />
31 <input 31 <input
32 type="file" 32 type="file"
33 style="display: none" 33 style="display: none"
34 ref="editDataImage" 34 ref="editDataImage"
35 accept="image/*" 35 accept="image/*"
36 @change="onEditFilePicked" 36 @change="onEditFilePicked"
37 /> 37 />
38 </v-flex> 38 </v-flex>
39 </v-layout> 39 </v-layout>
40 <v-layout wrap> 40 <v-layout wrap>
41 <v-flex xs12 sm12> 41 <v-flex xs12 sm12>
42 <v-layout> 42 <v-layout>
43 <v-flex xs4 sm5 class="pt-4 subheading"> 43 <v-flex xs4 sm5 class="pt-4 subheading">
44 <label class="right hidden-xs-only hidden-sm-only">Select Class:</label> 44 <label class="right hidden-xs-only hidden-sm-only">Select Class:</label>
45 <label class="right hidden-lg-only hidden-md-only hidden-xl-only">Class:</label> 45 <label class="right hidden-lg-only hidden-md-only hidden-xl-only">Class:</label>
46 </v-flex> 46 </v-flex>
47 <v-flex xs8 sm7 class="ml-3"> 47 <v-flex xs8 sm7 class="ml-3">
48 <v-select 48 <v-select
49 :items="addclass" 49 :items="addclass"
50 label="Select Class" 50 label="Select Class"
51 v-model="editedItem.select" 51 v-model="editedItem.select"
52 item-text="classNum" 52 item-text="classNum"
53 item-value="_id" 53 item-value="_id"
54 name="Select Class" 54 name="Select Class"
55 required 55 required
56 ></v-select> 56 ></v-select>
57 </v-flex> 57 </v-flex>
58 </v-layout> 58 </v-layout>
59 <v-layout> 59 <v-layout>
60 <v-flex xs4 sm5 class="pt-4 subheading"> 60 <v-flex xs4 sm5 class="pt-4 subheading">
61 <label class="right hidden-xs-only hidden-sm-only">Course Name:</label> 61 <label class="right hidden-xs-only hidden-sm-only">Course Name:</label>
62 <label class="right hidden-lg-only hidden-md-only hidden-xl-only">Course:</label> 62 <label class="right hidden-lg-only hidden-md-only hidden-xl-only">Course:</label>
63 </v-flex> 63 </v-flex>
64 <v-flex xs8 sm7 class="ml-3"> 64 <v-flex xs8 sm7 class="ml-3">
65 <v-text-field 65 <v-text-field
66 v-model="editedItem.courseName" 66 v-model="editedItem.courseName"
67 placeholder="fill your Course Name" 67 placeholder="fill your Course Name"
68 type="text" 68 type="text"
69 required 69 required
70 ></v-text-field> 70 ></v-text-field>
71 </v-flex> 71 </v-flex>
72 </v-layout> 72 </v-layout>
73 <v-layout> 73 <v-layout>
74 <v-flex xs4 sm5 class="pt-4 subheading"> 74 <v-flex xs4 sm5 class="pt-4 subheading">
75 <label class="right hidden-xs-only hidden-sm-only">Upload Image:</label> 75 <label class="right hidden-xs-only hidden-sm-only">Upload Image:</label>
76 <label class="right hidden-lg-only hidden-md-only hidden-xl-only">Upload:</label> 76 <label class="right hidden-lg-only hidden-md-only hidden-xl-only">Upload:</label>
77 </v-flex> 77 </v-flex>
78 <v-flex xs8 sm7 class="ml-3"> 78 <v-flex xs8 sm7 class="ml-3">
79 <v-text-field 79 <v-text-field
80 label="Select Image" 80 label="Select Image"
81 @click="pickEditFile" 81 @click="pickEditFile"
82 v-model="editImageName" 82 v-model="editImageName"
83 append-icon="attach_file" 83 append-icon="attach_file"
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-layout> 88 </v-layout>
89 <v-layout> 89 <v-layout>
90 <v-flex xs12 sm12 class="px-0 mx-0"> 90 <v-flex xs12 sm12 class="px-0 mx-0">
91 <v-layout class="right"> 91 <v-layout class="right">
92 <v-btn @click="save" round dark :loading="editLoading" class="add-button">Save</v-btn> 92 <v-btn @click="save" round dark :loading="editLoading" class="add-button">Save</v-btn>
93 </v-layout> 93 </v-layout>
94 </v-flex> 94 </v-flex>
95 </v-layout> 95 </v-layout>
96 </v-container> 96 </v-container>
97 </v-form> 97 </v-form>
98 </v-card-text> 98 </v-card-text>
99 </v-card> 99 </v-card>
100 </v-dialog> 100 </v-dialog>
101 101
102 <!-- ****** PROFILE VIEW STUDENTS DEATILS ****** --> 102 <!-- ****** PROFILE VIEW STUDENTS DEATILS ****** -->
103 103
104 <v-dialog v-model="profileStudentDialog" max-width="600px" scrollable persistent> 104 <v-dialog v-model="profileStudentDialog" max-width="600px" scrollable persistent>
105 <v-card flat class="card-style pa-3" dark> 105 <v-card flat class="card-style pa-3" dark>
106 <v-layout> 106 <v-layout>
107 <v-flex xs12> 107 <v-flex xs12>
108 <label class="title text-xs-center">View Course</label> 108 <label class="title text-xs-center">View Course</label>
109 <v-icon size="24" class="right" @click="profileStudentDialog = false">cancel</v-icon> 109 <v-icon size="24" class="right" @click="profileStudentDialog = false">cancel</v-icon>
110 </v-flex> 110 </v-flex>
111 </v-layout> 111 </v-layout>
112 <v-card-text> 112 <v-card-text>
113 <v-flex align-center justify-center layout text-xs-center class="mt-3"> 113 <v-flex align-center justify-center layout text-xs-center class="mt-3">
114 <v-avatar size="100px"> 114 <v-avatar size="100px">
115 <img src="/static/icon/user.png" v-if="!editedItem.courseImageUrl" /> 115 <img src="/static/icon/user.png" v-if="!editedItem.courseImageUrl" />
116 <img :src="editedItem.courseImageUrl" v-else-if="editedItem.courseImageUrl" /> 116 <img :src="editedItem.courseImageUrl" v-else-if="editedItem.courseImageUrl" />
117 </v-avatar> 117 </v-avatar>
118 </v-flex> 118 </v-flex>
119 <v-container grid-list-md> 119 <v-container grid-list-md>
120 <v-layout wrap> 120 <v-layout wrap>
121 <v-flex xs12> 121 <v-flex xs12>
122 <v-layout> 122 <v-layout>
123 <v-flex xs6 sm6> 123 <v-flex xs6 sm6>
124 <h5 class="right my-1"> 124 <h5 class="right my-1">
125 <b>Course :</b> 125 <b>Course :</b>
126 </h5> 126 </h5>
127 </v-flex> 127 </v-flex>
128 <v-flex sm6 xs6> 128 <v-flex sm6 xs6>
129 <h5 class="my-1 left">{{ editedItem.courseName }}</h5> 129 <h5 class="my-1 left">{{ editedItem.courseName }}</h5>
130 </v-flex> 130 </v-flex>
131 </v-layout> 131 </v-layout>
132 </v-flex> 132 </v-flex>
133 </v-layout> 133 </v-layout>
134 </v-container> 134 </v-container>
135 </v-card-text> 135 </v-card-text>
136 </v-card> 136 </v-card>
137 </v-dialog> 137 </v-dialog>
138 138
139 <!-- ****** STUDENTS TABLE ****** --> 139 <!-- ****** STUDENTS TABLE ****** -->
140 <v-toolbar color="transparent" flat> 140 <v-toolbar color="transparent" flat>
141 <v-btn 141 <v-btn
142 fab 142 fab
143 dark 143 dark
144 class="open-dialog-button hidden-xl-only hidden-md-only hidden-lg-only" 144 class="open-dialog-button hidden-xl-only hidden-md-only hidden-lg-only"
145 small 145 small
146 @click="addCourseDialog = true" 146 @click="addCourseDialog = true"
147 > 147 >
148 <v-icon dark>add</v-icon> 148 <v-icon dark>add</v-icon>
149 </v-btn> 149 </v-btn>
150 <v-btn 150 <v-btn
151 round 151 round
152 class="open-dialog-button hidden-sm-only hidden-xs-only" 152 class="open-dialog-button hidden-sm-only hidden-xs-only"
153 dark 153 dark
154 @click="addCourseDialog = true" 154 @click="addCourseDialog = true"
155 > 155 >
156 <v-icon class="white--text pr-1" size="20">add</v-icon>Add Course 156 <v-icon class="white--text pr-1" size="20">add</v-icon>Add Course
157 </v-btn> 157 </v-btn>
158 <v-card-actions class="hidden-xs-only hidden-sm-only"> 158 <v-card-actions class="hidden-xs-only hidden-sm-only">
159 <v-flex md13 lg12> 159 <v-flex md13 lg12>
160 <v-layout> 160 <v-layout>
161 <v-flex lg6 md6> 161 <v-flex lg6 md6>
162 <v-select 162 <v-select
163 :items="addclass" 163 :items="addclass"
164 label="Select Class" 164 label="Select Class"
165 v-model="selectStudents.select" 165 v-model="selectStudents.select"
166 item-text="classNum" 166 item-text="classNum"
167 item-value="_id" 167 item-value="_id"
168 name="Select Class" 168 name="Select Class"
169 :rules="classRules" 169 :rules="classRules"
170 required 170 required
171 class="ml-2" 171 class="ml-2"
172 ></v-select> 172 ></v-select>
173 </v-flex> 173 </v-flex>
174 </v-layout> 174 </v-layout>
175 </v-flex> 175 </v-flex>
176 </v-card-actions> 176 </v-card-actions>
177 <v-spacer></v-spacer> 177 <v-spacer></v-spacer>
178 <v-btn 178 <v-btn
179 @click="getCourses()" 179 @click="getCourses()"
180 round 180 round
181 dark 181 dark
182 :loading="loading" 182 :loading="loading"
183 class="open-dialog-button hidden-xs-only hidden-sm-only" 183 class="open-dialog-button hidden-xs-only hidden-sm-only"
184 >Find</v-btn> 184 >Find</v-btn>
185 <v-card-title class="body-1" v-show="show"> 185 <v-card-title class="body-1" v-show="show">
186 <v-btn icon large flat @click="displaySearch"> 186 <v-btn icon large flat @click="displaySearch">
187 <v-avatar size="27"> 187 <v-avatar size="27">
188 <img src="/static/icon/search.png" alt="icon" /> 188 <img src="/static/icon/search.png" alt="icon" />
189 </v-avatar> 189 </v-avatar>
190 </v-btn> 190 </v-btn>
191 </v-card-title> 191 </v-card-title>
192 <v-flex xs8 sm7 lg2 md3 v-if="showSearch"> 192 <v-flex xs8 sm7 lg2 md3 v-if="showSearch">
193 <v-layout> 193 <v-layout>
194 <v-text-field 194 <v-text-field
195 autofocus 195 autofocus
196 v-model="search" 196 v-model="search"
197 label="Search" 197 label="Search"
198 prepend-inner-icon="search" 198 prepend-inner-icon="search"
199 color="primary" 199 color="primary"
200 ></v-text-field> 200 ></v-text-field>
201 <v-icon @click="closeSearch" color="error">close</v-icon> 201 <v-icon @click="closeSearch" color="error">close</v-icon>
202 </v-layout> 202 </v-layout>
203 </v-flex> 203 </v-flex>
204 </v-toolbar> 204 </v-toolbar>
205 <v-card flat class="elevation-0 transparent"> 205 <v-card flat class="elevation-0 transparent">
206 <v-flex class="hidden-xl-only hidden-lg-only hidden-md-only"> 206 <v-flex class="hidden-xl-only hidden-lg-only hidden-md-only">
207 <v-layout> 207 <v-layout>
208 <!-- <v-flex xs4> 208 <!-- <v-flex xs4>
209 <label class="right mt-4">Select Class:</label> 209 <label class="right mt-4">Select Class:</label>
210 </v-flex>--> 210 </v-flex>-->
211 <v-flex xs12> 211 <v-flex xs12>
212 <v-select 212 <v-select
213 :items="addclass" 213 :items="addclass"
214 label="Select Class" 214 label="Select Class"
215 v-model="selectStudents.select" 215 v-model="selectStudents.select"
216 item-text="classNum" 216 item-text="classNum"
217 item-value="_id" 217 item-value="_id"
218 name="Select Class" 218 name="Select Class"
219 :rules="classRules" 219 :rules="classRules"
220 class="px-2" 220 class="px-2"
221 ></v-select> 221 ></v-select>
222 </v-flex> 222 </v-flex>
223 </v-layout> 223 </v-layout>
224 <v-layout> 224 <v-layout>
225 <v-flex xs5 class="mx-auto mb-2"> 225 <v-flex xs5 class="mx-auto mb-2">
226 <v-btn @click="getCourses()" block round dark :loading="loading" class="add-button">Find</v-btn> 226 <v-btn @click="getCourses()" block round dark :loading="loading" class="add-button">Find</v-btn>
227 </v-flex> 227 </v-flex>
228 </v-layout> 228 </v-layout>
229 </v-flex> 229 </v-flex>
230 </v-card> 230 </v-card>
231 <v-data-table 231 <v-data-table
232 :headers="headers" 232 :headers="headers"
233 :items="courseData" 233 :items="courseData"
234 :pagination.sync="pagination" 234 :pagination.sync="pagination"
235 :search="search" 235 :search="search"
236 > 236 >
237 <template slot="items" slot-scope="props"> 237 <template slot="items" slot-scope="props">
238 <tr class="tr"> 238 <tr class="tr">
239 <td class="text-xs-center td td-row"> 239 <td class="text-xs-center td td-row">
240 <v-avatar size="40"> 240 <v-avatar size="40">
241 <img :src="props.item.courseImageUrl" v-if="props.item.courseImageUrl" /> 241 <img :src="props.item.courseImageUrl" v-if="props.item.courseImageUrl" />
242 <img src="/static/icon/user.png" v-else-if="!props.item.courseImageUrl" /> 242 <img src="/static/icon/user.png" v-else-if="!props.item.courseImageUrl" />
243 </v-avatar> 243 </v-avatar>
244 </td> 244 </td>
245 <td class="text-xs-center td td-row">{{ props.item.courseName}}</td> 245 <td class="text-xs-center td td-row">{{ props.item.courseName}}</td>
246 <td class="text-xs-center td td-row"> 246 <td class="text-xs-center td td-row">
247 <span> 247 <span>
248 <v-tooltip top> 248 <v-tooltip top>
249 <img 249 <img
250 slot="activator" 250 slot="activator"
251 style="cursor:pointer; width:25px; height:25px; " 251 style="cursor:pointer; width:25px; height:25px; "
252 class="mr-3" 252 class="mr-3"
253 @click="profile(props.item)" 253 @click="profile(props.item)"
254 src="/static/icon/view.png" 254 src="/static/icon/view.png"
255 /> 255 />
256 <span>View</span> 256 <span>View</span>
257 </v-tooltip> 257 </v-tooltip>
258 <v-tooltip top> 258 <v-tooltip top>
259 <img 259 <img
260 slot="activator" 260 slot="activator"
261 style="cursor:pointer; width:20px; height:18px; " 261 style="cursor:pointer; width:20px; height:18px; "
262 class="mr-3" 262 class="mr-3"
263 @click="editItem(props.item)" 263 @click="editItem(props.item)"
264 src="/static/icon/edit.png" 264 src="/static/icon/edit.png"
265 /> 265 />
266 <span>Edit</span> 266 <span>Edit</span>
267 </v-tooltip> 267 </v-tooltip>
268 <v-tooltip top> 268 <v-tooltip top>
269 <img 269 <img
270 slot="activator" 270 slot="activator"
271 style="cursor:pointer; width:20px; height:20px; " 271 style="cursor:pointer; width:20px; height:20px; "
272 class="mr-3" 272 class="mr-3"
273 @click="deleteItem(props.item)" 273 @click="deleteItem(props.item)"
274 src="/static/icon/delete.png" 274 src="/static/icon/delete.png"
275 /> 275 />
276 <span>Delete</span> 276 <span>Delete</span>
277 </v-tooltip> 277 </v-tooltip>
278 </span> 278 </span>
279 </td> 279 </td>
280 </tr> 280 </tr>
281 </template> 281 </template>
282 <v-alert 282 <v-alert
283 slot="no-results" 283 slot="no-results"
284 :value="true" 284 :value="true"
285 color="error" 285 color="error"
286 icon="warning" 286 icon="warning"
287 >Your search for "{{ search }}" found no results.</v-alert> 287 >Your search for "{{ search }}" found no results.</v-alert>
288 </v-data-table> 288 </v-data-table>
289 <!-- ****** Add CourseS DETAILS****** --> 289 <!-- ****** Add CourseS DETAILS****** -->
290 <v-dialog v-model="addCourseDialog" max-width="500" v-if="addCourseDialog" persistent> 290 <v-dialog v-model="addCourseDialog" max-width="500" v-if="addCourseDialog" persistent>
291 <v-card flat class="card-style pa-2" dark> 291 <v-card flat class="card-style pa-2" dark>
292 <v-layout> 292 <v-layout>
293 <v-flex xs12> 293 <v-flex xs12>
294 <label class="title text-xs-center">Add Course</label> 294 <label class="title text-xs-center">Add Course</label>
295 <v-icon size="24" class="right" @click="closeAddCourseModel">cancel</v-icon> 295 <v-icon size="24" class="right" @click="closeAddCourseModel">cancel</v-icon>
296 </v-flex> 296 </v-flex>
297 </v-layout> 297 </v-layout>
298 <v-container fluid> 298 <v-container fluid>
299 <v-layout align-center> 299 <v-layout align-center>
300 <v-flex xs12> 300 <v-flex xs12>
301 <v-flex xs12 sm12> 301 <v-flex xs12 sm12>
302 <v-form ref="form" v-model="valid" lazy-validation> 302 <v-form ref="form" v-model="valid" lazy-validation>
303 <v-layout> 303 <v-layout>
304 <v-flex 304 <v-flex
305 xs12 305 xs12
306 class="text-xs-center text-sm-center text-md-center text-lg-center" 306 class="text-xs-center text-sm-center text-md-center text-lg-center"
307 > 307 >
308 <v-avatar size="100px" v-if="!imageUrl"> 308 <v-avatar size="100px" v-if="!imageUrl">
309 <img src="/static/icon/user.png" /> 309 <img src="/static/icon/user.png" />
310 </v-avatar> 310 </v-avatar>
311 <input 311 <input
312 type="file" 312 type="file"
313 style="display: none" 313 style="display: none"
314 ref="image" 314 ref="image"
315 accept="image/*" 315 accept="image/*"
316 @change="onFilePicked" 316 @change="onFilePicked"
317 /> 317 />
318 <img 318 <img
319 :src="imageData.imageUrl" 319 :src="imageData.imageUrl"
320 height="150" 320 height="150"
321 v-if="imageUrl" 321 v-if="imageUrl"
322 style="border-radius:50%; width:200px" 322 style="border-radius:50%; width:200px"
323 /> 323 />
324 </v-flex> 324 </v-flex>
325 </v-layout> 325 </v-layout>
326 <v-layout wrap> 326 <v-layout wrap>
327 <v-flex xs12 sm12> 327 <v-flex xs12 sm12>
328 <v-layout> 328 <v-layout>
329 <v-flex x4 sm4 class="pt-4 subheading"> 329 <v-flex x4 sm4 class="pt-4 subheading">
330 <label class="right hidden-xs-only hidden-sm-only">Select Class:</label> 330 <label class="right hidden-xs-only hidden-sm-only">Select Class:</label>
331 <label class="right hidden-lg-only hidden-md-only hidden-xl-only">Class:</label> 331 <label class="right hidden-lg-only hidden-md-only hidden-xl-only">Class:</label>
332 </v-flex> 332 </v-flex>
333 <v-flex xs8 sm8 class="ml-3"> 333 <v-flex xs8 sm8 class="ml-3">
334 <v-select 334 <v-select
335 :items="addclass" 335 :items="addclass"
336 label="Select Class" 336 label="Select Class"
337 v-model="addCourses.select" 337 v-model="addCourses.select"
338 item-text="classNum" 338 item-text="classNum"
339 item-value="_id" 339 item-value="_id"
340 name="Select Class" 340 name="Select Class"
341 :rules="classRules" 341 :rules="classRules"
342 @change="getSections(addCourses.select)" 342 @change="getSections(addCourses.select)"
343 required 343 required
344 ></v-select> 344 ></v-select>
345 </v-flex> 345 </v-flex>
346 </v-layout> 346 </v-layout>
347 </v-flex> 347 </v-flex>
348 </v-layout> 348 </v-layout>
349 <v-layout wrap> 349 <v-layout wrap>
350 <v-flex xs12 sm12> 350 <v-flex xs12 sm12>
351 <v-layout> 351 <v-layout>
352 <v-flex xs4 sm4 class="pt-4 subheading"> 352 <v-flex xs4 sm4 class="pt-4 subheading">
353 <label class="right hidden-xs-only hidden-sm-only">Course Name:</label> 353 <label class="right hidden-xs-only hidden-sm-only">Course Name:</label>
354 <label class="right hidden-lg-only hidden-md-only hidden-xl-only">Course:</label> 354 <label class="right hidden-lg-only hidden-md-only hidden-xl-only">Course:</label>
355 </v-flex> 355 </v-flex>
356 <v-flex xs8 sm8 class="ml-3"> 356 <v-flex xs8 sm8 class="ml-3">
357 <v-text-field 357 <v-text-field
358 v-model="addCourses.courseName" 358 v-model="addCourses.courseName"
359 placeholder="fill your Course name" 359 placeholder="fill your Course name"
360 type="text" 360 type="text"
361 :rules="courseRules" 361 :rules="courseRules"
362 required 362 required
363 ></v-text-field> 363 ></v-text-field>
364 </v-flex> 364 </v-flex>
365 </v-layout> 365 </v-layout>
366 </v-flex> 366 </v-flex>
367 <v-flex xs12 sm12> 367 <v-flex xs12 sm12>
368 <v-layout> 368 <v-layout>
369 <v-flex xs4 class="pt-4 subheading"> 369 <v-flex xs4 class="pt-4 subheading">
370 <label class="right hidden-xs-only hidden-sm-only">Upload Image:</label> 370 <label class="right hidden-xs-only hidden-sm-only">Upload Image:</label>
371 <label class="right hidden-lg-only hidden-md-only hidden-xl-only">Upload :</label> 371 <label class="right hidden-lg-only hidden-md-only hidden-xl-only">Upload :</label>
372 </v-flex> 372 </v-flex>
373 <v-flex xs8 class="ml-3"> 373 <v-flex xs8 class="ml-3">
374 <v-text-field 374 <v-text-field
375 label="Select Image" 375 label="Select Image"
376 @click="pickFile" 376 @click="pickFile"
377 v-model="imageName" 377 v-model="imageName"
378 append-icon="attach_file" 378 append-icon="attach_file"
379 ></v-text-field> 379 ></v-text-field>
380 </v-flex> 380 </v-flex>
381 </v-layout> 381 </v-layout>
382 </v-flex> 382 </v-flex>
383 </v-layout> 383 </v-layout>
384 <v-layout> 384 <v-layout>
385 <v-flex xs12 sm12> 385 <v-flex xs12 sm12>
386 <v-layout class="right"> 386 <v-layout class="right">
387 <v-btn @click="submit" round dark :loading="loading" class="add-button">Add</v-btn> 387 <v-btn @click="submit" round dark :loading="loading" class="add-button">Add</v-btn>
388 </v-layout> 388 </v-layout>
389 </v-flex> 389 </v-flex>
390 </v-layout> 390 </v-layout>
391 </v-form> 391 </v-form>
392 </v-flex> 392 </v-flex>
393 </v-flex> 393 </v-flex>
394 </v-layout> 394 </v-layout>
395 </v-container> 395 </v-container>
396 </v-card> 396 </v-card>
397 </v-dialog> 397 </v-dialog>
398 <v-snackbar 398 <v-snackbar
399 :timeout="timeout" 399 :timeout="timeout"
400 :top="y === 'top'" 400 :top="y === 'top'"
401 :right="x === 'right'" 401 :right="x === 'right'"
402 :vertical="mode === 'vertical'" 402 :vertical="mode === 'vertical'"
403 v-model="snackbar" 403 v-model="snackbar"
404 :color="color" 404 :color="color"
405 >{{ text }}</v-snackbar> 405 >{{ text }}</v-snackbar>
406 <div class="loader" v-if="showLoader"> 406 <div class="loader" v-if="showLoader">
407 <v-progress-circular indeterminate color="white"></v-progress-circular> 407 <v-progress-circular indeterminate color="white"></v-progress-circular>
408 </div> 408 </div>
409 </v-container> 409 </v-container>
410 </template> 410 </template>
411 411
412 <script> 412 <script>
413 import http from "@/Services/http.js"; 413 import http from "@/Services/http.js";
414 import moment from "moment"; 414 import moment from "moment";
415 import countryList from "@/script/country.js"; 415 import countryList from "@/script/country.js";
416 import parent from "@/script/parents.js"; 416 import parent from "@/script/parents.js";
417 417
418 export default { 418 export default {
419 data: () => ({ 419 data: () => ({
420 showNext: false, 420 showNext: false,
421 snackbar: false, 421 snackbar: false,
422 y: "top", 422 y: "top",
423 x: "right", 423 x: "right",
424 role: "", 424 role: "",
425 mode: "", 425 mode: "",
426 append: "", 426 append: "",
427 timeout: 3000, 427 timeout: 3000,
428 text: "", 428 text: "",
429 show: true, 429 show: true,
430 color: "", 430 color: "",
431 showSearch: false, 431 showSearch: false,
432 showLoader: false, 432 showLoader: false,
433 loading: false, 433 loading: false,
434 editLoading: false, 434 editLoading: false,
435 date: null, 435 date: null,
436 search: "", 436 search: "",
437 menu: false, 437 menu: false,
438 menu1: false, 438 menu1: false,
439 editStudentDialog: false, 439 editStudentDialog: false,
440 profileStudentDialog: false, 440 profileStudentDialog: false,
441 addCourseDialog: false, 441 addCourseDialog: false,
442 valid: true, 442 valid: true,
443 addclass: [], 443 addclass: [],
444 addSection: [], 444 addSection: [],
445 pagination: { 445 pagination: {
446 rowsPerPage: 10, 446 rowsPerPage: 10,
447 }, 447 },
448 imageData: {}, 448 imageData: {},
449 imageName: "", 449 imageName: "",
450 imageUrl: "", 450 imageUrl: "",
451 imageFile: "", 451 imageFile: "",
452 editImageName: "", 452 editImageName: "",
453 editImageUrl: "", 453 editImageUrl: "",
454 courseRules: [(v) => !!v || " Course Name is required"], 454 courseRules: [(v) => !!v || " Course Name is required"],
455 classRules: [(v) => !!v || " Class Name is required"], 455 classRules: [(v) => !!v || " Class Name is required"],
456 sectionRules: [(v) => !!v || " Section Name is required"], 456 sectionRules: [(v) => !!v || " Section Name is required"],
457 errorMessages: "", 457 errorMessages: "",
458 headers: [ 458 headers: [
459 { 459 {
460 text: "Image", 460 text: "Image",
461 value: "courseImageUrl", 461 value: "courseImageUrl",
462 sortable: false, 462 sortable: false,
463 align: "center", 463 align: "center",
464 }, 464 },
465 { 465 {
466 text: "Course", 466 text: "Course",
467 value: "course", 467 value: "course",
468 sortable: false, 468 sortable: false,
469 align: "center", 469 align: "center",
470 }, 470 },
471 { text: "Action", value: "", sortable: false, align: "center" }, 471 { text: "Action", value: "", sortable: false, align: "center" },
472 ], 472 ],
473 courseData: [], 473 courseData: [],
474 editedIndex: -1, 474 editedIndex: -1,
475 addCourses: {}, 475 addCourses: {},
476 selectStudents: { 476 selectStudents: {
477 select: "", 477 select: "",
478 selectSection: "", 478 selectSection: "",
479 }, 479 },
480 editedItem: {}, 480 editedItem: {},
481 }), 481 }),
482 watch: { 482 watch: {
483 addCourseDialog: function (val) { 483 addCourseDialog: function (val) {
484 if (!val) { 484 if (!val) {
485 this.addCourses = []; 485 this.addCourses = [];
486 this.imageName = ""; 486 this.imageName = "";
487 this.imageFile = ""; 487 this.imageFile = "";
488 this.imageUrl = ""; 488 this.imageUrl = "";
489 } 489 }
490 }, 490 },
491 }, 491 },
492 methods: { 492 methods: {
493 getCourses() { 493 getCourses() {
494 this.showLoader = true; 494 this.showLoader = true;
495 http() 495 http()
496 .get("/getCourseesList", { 496 .get("/getCourseesList", {
497 params: { 497 params: {
498 classId: this.selectStudents.select, 498 classId: this.selectStudents.select,
499 }, 499 },
500 }) 500 })
501 .then((response) => { 501 .then((response) => {
502 this.courseData = response.data.data; 502 this.courseData = response.data.data;
503 this.showLoader = false; 503 this.showLoader = false;
504 }) 504 })
505 .catch((err) => { 505 .catch((err) => {
506 // console.log("err====>", err); 506 // console.log("err====>", err);
507 this.showLoader = false; 507 this.showLoader = false;
508 this.snackbar = true;
509 this.color = "error";
510 this.text = error.response.data.message;
508 this.snackbar = true; 511 });
509 this.color = "error"; 512 },
510 this.text = error.response.data.message; 513 getSections(_id) {
511 }); 514 var token = this.$store.state.token;
512 }, 515 this.showLoader = true;
513 getSections(_id) { 516 http()
514 var token = this.$store.state.token; 517 .get(
515 this.showLoader = true; 518 "/getSectionsList",
516 http() 519 { params: { classId: _id } },
517 .get( 520 {
518 "/getSectionsList", 521 headers: { Authorization: "Bearer " + token },
519 { params: { classId: _id } }, 522 }
520 { 523 )
521 headers: { Authorization: "Bearer " + token }, 524 .then((response) => {
522 } 525 this.addSection = response.data.data;
523 ) 526 this.showLoader = false;
524 .then((response) => { 527 })
525 this.addSection = response.data.data; 528 .catch((err) => {
526 this.showLoader = false; 529 this.showLoader = false;
527 }) 530 });
528 .catch((err) => { 531 },
529 this.showLoader = false; 532 pickFile() {
530 }); 533 this.$refs.image.click();
531 }, 534 },
532 pickFile() { 535 pickEditFile() {
533 this.$refs.image.click(); 536 this.$refs.editDataImage.click();
534 }, 537 },
535 pickEditFile() { 538 dates: function (date) {
536 this.$refs.editDataImage.click(); 539 return moment(date).format("MMMM DD, YYYY");
537 }, 540 return date;
538 dates: function (date) { 541 },
539 return moment(date).format("MMMM DD, YYYY"); 542 onFilePicked(e) {
540 return date; 543 // console.log(e)
541 }, 544 const files = e.target.files;
542 onFilePicked(e) { 545 this.imageData.upload = e.target.files[0];
543 // console.log(e) 546 if (files[0] !== undefined) {
544 const files = e.target.files; 547 this.imageName = files[0].name;
545 this.imageData.upload = e.target.files[0]; 548 if (this.imageName.lastIndexOf(".") <= 0) {
546 if (files[0] !== undefined) { 549 return;
547 this.imageName = files[0].name; 550 }
548 if (this.imageName.lastIndexOf(".") <= 0) { 551 const fr = new FileReader();
549 return; 552 fr.readAsDataURL(files[0]);
550 } 553 fr.addEventListener("load", () => {
551 const fr = new FileReader(); 554 this.imageUrl = fr.result;
552 fr.readAsDataURL(files[0]); 555 this.imageFile = files[0]; // this is an image file that can be sent to server...
553 fr.addEventListener("load", () => { 556 this.imageData.imageUrl = URL.createObjectURL(this.imageFile);
554 this.imageUrl = fr.result; 557 });
555 this.imageFile = files[0]; // this is an image file that can be sent to server... 558 } else {
556 this.imageData.imageUrl = URL.createObjectURL(this.imageFile); 559 this.imageName = "";
557 }); 560 this.imageFile = "";
558 } else { 561 this.imageUrl = "";
559 this.imageName = ""; 562 }
560 this.imageFile = ""; 563 },
561 this.imageUrl = ""; 564 onEditFilePicked(e) {
562 } 565 // console.log(e);
563 }, 566 const files = e.target.files;
564 onEditFilePicked(e) { 567 if (files[0] !== undefined) {
565 // console.log(e); 568 this.editImageName = files[0].name;
566 const files = e.target.files; 569 // console.log("this.editImageName", this.editImageName);
567 if (files[0] !== undefined) { 570
568 this.editImageName = files[0].name; 571 if (this.editImageName.lastIndexOf(".") <= 0) {
569 // console.log("this.editImageName", this.editImageName); 572 return;
570 573 }
571 if (this.editImageName.lastIndexOf(".") <= 0) { 574 const fr = new FileReader();
572 return; 575 fr.readAsDataURL(files[0]);
573 } 576 fr.addEventListener("load", () => {
574 const fr = new FileReader(); 577 this.editImageUrl = fr.result;
575 fr.readAsDataURL(files[0]); 578 this.editiImageFile = files[0]; // this is an image file that can be sent to server...
576 fr.addEventListener("load", () => { 579 });
577 this.editImageUrl = fr.result; 580 } else {
578 this.editiImageFile = files[0]; // this is an image file that can be sent to server... 581 this.editImageName = "";
579 }); 582 this.editiImageFile = "";
580 } else { 583 }
581 this.editImageName = ""; 584 },
582 this.editiImageFile = ""; 585 editItem(item) {
583 } 586 this.editedIndex = this.courseData.indexOf(item);
584 }, 587 this.editedItem = Object.assign({}, item);
585 editItem(item) { 588 this.editStudentDialog = true;
586 this.editedIndex = this.courseData.indexOf(item); 589 },
587 this.editedItem = Object.assign({}, item); 590 profile(item) {
588 this.editStudentDialog = true; 591 this.editedIndex = this.courseData.indexOf(item);
589 }, 592 this.editedItem = Object.assign({}, item);
590 profile(item) { 593 this.profileStudentDialog = true;
591 this.editedIndex = this.courseData.indexOf(item); 594 },
592 this.editedItem = Object.assign({}, item); 595 deleteItem(item) {
593 this.profileStudentDialog = true; 596 let deleteCourse = {
594 }, 597 courseId: item._id,
595 deleteItem(item) { 598 };
596 let deleteCourse = { 599 http()
597 courseId: item._id, 600 .delete(
598 }; 601 "/deleteCourse",
599 http() 602 confirm("Are you sure you want to delete this?") && {
600 .delete( 603 params: deleteCourse,
601 "/deleteCourse", 604 }
602 confirm("Are you sure you want to delete this?") && { 605 )
603 params: deleteCourse, 606 .then((response) => {
604 } 607 this.snackbar = true;
605 ) 608 this.text = response.data.message;
606 .then((response) => { 609 this.color = "green";
607 this.snackbar = true; 610 this.getCourses();
608 this.text = response.data.message; 611 })
609 this.color = "green"; 612 .catch((error) => {
610 this.getCourses(); 613 this.snackbar = true;
611 }) 614 this.text = error.response.data.message;
612 .catch((error) => { 615 this.color = "error";
613 this.snackbar = true; 616 });
614 this.text = error.response.data.message; 617 },
615 this.color = "error"; 618 close() {
616 }); 619 this.editStudentDialog = false;
617 }, 620 },
618 close() { 621 closeStudentProfile() {
619 this.editStudentDialog = false; 622 this.profileStudentDialog = false;
620 }, 623 },
621 closeStudentProfile() { 624 closeAddCourseModel() {
622 this.profileStudentDialog = false; 625 this.addCourseDialog = false;
623 }, 626 // this.courseData = [];
624 closeAddCourseModel() { 627 this.addCourses = [];
625 this.addCourseDialog = false; 628 this.imageName = "";
626 // this.courseData = []; 629 this.imageFile = "";
627 this.addCourses = []; 630 this.imageUrl = "";
628 this.imageName = ""; 631 },
629 this.imageFile = ""; 632 submit() {
630 this.imageUrl = ""; 633 if (this.$refs.form.validate()) {
631 }, 634 let addCourse = {
632 submit() { 635 classId: this.addCourses.select,
633 if (this.$refs.form.validate()) { 636 sectionId: this.addCourses.selectSection,
634 let addCourse = { 637 courseName: this.addCourses.courseName,
635 classId: this.addCourses.select, 638 };
636 sectionId: this.addCourses.selectSection, 639 if (this.imageUrl) {
637 courseName: this.addCourses.courseName, 640 var str = this.imageUrl;
638 }; 641 const [baseUrl, imageUrl] = str.split(/,/);
639 if (this.imageUrl) { 642 addCourse.upload = imageUrl;
640 var str = this.imageUrl; 643 }
641 const [baseUrl, imageUrl] = str.split(/,/); 644 this.loading = true;
642 addCourse.upload = imageUrl; 645 http()
643 } 646 .post("/createCourse", addCourse)
644 this.loading = true; 647 .then((response) => {
645 http() 648 this.snackbar = true;
646 .post("/createCourse", addCourse) 649 this.text = "New Course added successfully";
647 .then((response) => { 650 this.color = "green";
648 this.snackbar = true; 651 this.addCourseDialog = false;
649 this.text = "New Course added successfully"; 652 this.clear();
650 this.color = "green"; 653 this.loading = false;
651 this.addCourseDialog = false; 654 })
652 this.clear(); 655 .catch((error) => {
653 this.loading = false; 656 this.snackbar = true;
654 }) 657 this.text = error.response.data.message;
655 .catch((error) => { 658 this.color = "error";
656 this.snackbar = true; 659 this.loading = false;
657 this.text = error.response.data.message; 660 });
658 this.color = "error"; 661 }
659 this.loading = false; 662 },
660 }); 663 clear() {
661 } 664 this.$refs.form.reset();
662 }, 665 this.imageUrl = "";
663 clear() { 666 },
664 this.$refs.form.reset(); 667 save() {
665 this.imageUrl = ""; 668 let editCourse = {
666 }, 669 courseId: this.editedItem._id,
667 save() { 670 courseName: this.editedItem.courseName,
668 let editCourse = { 671 classId: this.editedItem.select,
669 courseId: this.editedItem._id, 672 };
670 courseName: this.editedItem.courseName, 673 if (this.editImageUrl) {
671 classId: this.editedItem.select, 674 var str = this.editImageUrl;
672 }; 675 const [baseUrl, editImageUrl] = str.split(/,/);
673 if (this.editImageUrl) { 676 editCourse.upload = editImageUrl;
674 var str = this.editImageUrl; 677 }
675 const [baseUrl, editImageUrl] = str.split(/,/); 678 this.editLoading = true;
676 editCourse.upload = editImageUrl; 679 http()
677 } 680 .put("/updateCourse", editCourse)
678 this.editLoading = true; 681 .then((response) => {
679 http() 682 this.snackbar = true;
680 .put("/updateCourse", editCourse) 683 this.text = response.data.message;
681 .then((response) => { 684 this.color = "green";
682 this.snackbar = true; 685 this.imageUrl = "";
683 this.text = response.data.message; 686 this.getCourses();
684 this.color = "green"; 687 this.close();
685 this.imageUrl = ""; 688 this.editLoading = false;
686 this.getCourses(); 689 })
687 this.close(); 690 .catch((error) => {
688 this.editLoading = false; 691 this.snackbar = true;
689 }) 692 this.text = error.response.data.statusText;
690 .catch((error) => { 693 this.color = "error";
691 this.snackbar = true; 694 this.editLoading = false;
692 this.text = error.response.data.statusText; 695 });
693 this.color = "error"; 696 },
694 this.editLoading = false; 697 displaySearch() {
695 }); 698 this.show = false;
696 }, 699 this.showSearch = true;
697 displaySearch() { 700 },
698 this.show = false; 701 closeSearch() {
699 this.showSearch = true; 702 this.showSearch = false;
700 }, 703 this.show = true;
701 closeSearch() { 704 this.search = "";
702 this.showSearch = false; 705 },
703 this.show = true; 706 },
704 this.search = ""; 707 mounted() {
705 }, 708 var token = this.$store.state.token;
706 }, 709 http()
707 mounted() { 710 .get("/getClassesList", {
708 var token = this.$store.state.token; 711 headers: { Authorization: "Bearer " + token },
709 http() 712 })
710 .get("/getClassesList", { 713 .then((response) => {
711 headers: { Authorization: "Bearer " + token }, 714 this.addclass = response.data.data;
712 }) 715 })
713 .then((response) => { 716 .catch((error) => {
714 this.addclass = response.data.data; 717 this.showLoader = false;
715 }) 718 if (error.response.status === 401) {
716 .catch((error) => { 719 this.$router.replace({ path: "/" });
717 this.showLoader = false; 720 this.$store.dispatch("setToken", null);
718 if (error.response.status === 401) { 721 this.$store.dispatch("Id", null);
719 this.$router.replace({ path: "/" }); 722 this.$store.dispatch("Role", null);
720 this.$store.dispatch("setToken", null); 723 }
721 this.$store.dispatch("Id", null); 724 });
722 this.$store.dispatch("Role", null); 725 },
723 } 726 };
724 }); 727 </script>
725 }, 728 <style scoped>
726 }; 729 .active {
727 </script> 730 background-color: gray;
728 <style scoped> 731 color: white !important;
729 .active { 732 }
730 background-color: gray; 733 .activebtn {
731 color: white !important; 734 color: black !important;
732 } 735 }
733 .activebtn { 736 </style>
src/pages/Course/courseDetail.vue
Diff comments   View file @8b7976c
1 <template> 1 <template>
2 <v-container fluid class="body-color"> 2 <v-container fluid class="body-color">
3 <!-- ****** Edit Chapter detail ****** --> 3 <!-- ****** Edit Chapter detail ****** -->
4 <v-dialog v-model="editCourseDetailDialog" max-width="1000px" scrollable persistent> 4 <v-dialog v-model="editCourseDetailDialog" max-width="1000px" scrollable persistent>
5 <v-card class="card-style pa-2" dark> 5 <v-card class="card-style pa-2" dark>
6 <v-layout> 6 <v-layout>
7 <v-flex xs12> 7 <v-flex xs12>
8 <label class="title text-xs-center">Edit Chapter</label> 8 <label class="title text-xs-center">Edit Chapter</label>
9 <v-icon size="24" class="right" @click="editCourseDetailDialog = false">cancel</v-icon> 9 <v-icon size="24" class="right" @click="editCourseDetailDialog = false">cancel</v-icon>
10 </v-flex> 10 </v-flex>
11 </v-layout> 11 </v-layout>
12 <v-card-text> 12 <v-card-text>
13 <v-layout wrap> 13 <v-layout wrap>
14 <v-flex xs12 sm12> 14 <v-flex xs12 sm12>
15 <v-layout> 15 <v-layout>
16 <v-flex xs4 class="pt-4 subheading"> 16 <v-flex xs4 class="pt-4 subheading">
17 <label class="right">Select Class:</label> 17 <label class="right">Select Class:</label>
18 </v-flex> 18 </v-flex>
19 <v-flex xs8 sm6 class="ml-3"> 19 <v-flex xs8 sm6 class="ml-3">
20 <v-select 20 <v-select
21 small 21 small
22 :items="addclass" 22 :items="addclass"
23 label="Select Class" 23 label="Select Class"
24 v-model="editedCourse.classId" 24 v-model="editedCourse.classId"
25 item-text="classNum" 25 item-text="classNum"
26 item-value="_id" 26 item-value="_id"
27 name="Select Class" 27 name="Select Class"
28 @change="getCourses(editedCourse.classId)" 28 @change="getCourses(editedCourse.classId)"
29 class="mr-2" 29 class="mr-2"
30 required 30 required
31 ></v-select> 31 ></v-select>
32 </v-flex> 32 </v-flex>
33 </v-layout> 33 </v-layout>
34 </v-flex> 34 </v-flex>
35 <v-flex xs12 sm12> 35 <v-flex xs12 sm12>
36 <v-layout> 36 <v-layout>
37 <v-flex xs4 class="pt-4 subheading"> 37 <v-flex xs4 class="pt-4 subheading">
38 <label class="right">Select Course:</label> 38 <label class="right">Select Course:</label>
39 </v-flex> 39 </v-flex>
40 <v-flex xs8 sm6 class="ml-3"> 40 <v-flex xs8 sm6 class="ml-3">
41 <v-select 41 <v-select
42 :items="courseData" 42 :items="courseData"
43 label="Select Course" 43 label="Select Course"
44 v-model="editedCourse.courseId" 44 v-model="editedCourse.courseId"
45 item-text="courseName" 45 item-text="courseName"
46 item-value="_id" 46 item-value="_id"
47 required 47 required
48 class="ml-2" 48 class="ml-2"
49 ></v-select> 49 ></v-select>
50 </v-flex> 50 </v-flex>
51 </v-layout> 51 </v-layout>
52 </v-flex> 52 </v-flex>
53 </v-layout> 53 </v-layout>
54 <v-layout> 54 <v-layout>
55 <v-flex xs12 sm12 md11 lg11> 55 <v-flex xs12 sm12 md11 lg11>
56 <v-card-actions class="hidden-xs-only hidden-sm-only"> 56 <v-card-actions class="hidden-xs-only hidden-sm-only">
57 <v-spacer></v-spacer> 57 <v-spacer></v-spacer>
58 <v-btn round dark @click="save" :loading="editLoading" class="add-button mr-4">Save</v-btn> 58 <v-btn round dark @click="save" :loading="editLoading" class="add-button mr-4">Save</v-btn>
59 </v-card-actions> 59 </v-card-actions>
60 <v-card-actions class="hidden-md-only hidden-lg-only hidden-xl-only"> 60 <v-card-actions class="hidden-md-only hidden-lg-only hidden-xl-only">
61 <v-spacer></v-spacer> 61 <v-spacer></v-spacer>
62 <v-btn round dark @click="save" :loading="editLoading" class="add-button">Save</v-btn> 62 <v-btn round dark @click="save" :loading="editLoading" class="add-button">Save</v-btn>
63 <v-spacer></v-spacer> 63 <v-spacer></v-spacer>
64 </v-card-actions> 64 </v-card-actions>
65 </v-flex> 65 </v-flex>
66 </v-layout> 66 </v-layout>
67 </v-card-text> 67 </v-card-text>
68 </v-card> 68 </v-card>
69 </v-dialog> 69 </v-dialog>
70 <!-- DIALOG BOX - EDIT CHAPTER--> 70 <!-- DIALOG BOX - EDIT CHAPTER-->
71 <v-dialog v-model="editChapterDetailDialog" max-width="1000px" scrollable persistent> 71 <v-dialog v-model="editChapterDetailDialog" max-width="1000px" scrollable persistent>
72 <v-card class="card-style pa-2" dark> 72 <v-card class="card-style pa-2" dark>
73 <v-layout> 73 <v-layout>
74 <v-flex xs12> 74 <v-flex xs12>
75 <label class="title text-xs-center">Edit Chapter</label> 75 <label class="title text-xs-center">Edit Chapter</label>
76 <v-icon 76 <v-icon
77 size="24" 77 size="24"
78 class="right" 78 class="right"
79 @click="editChapterDetailDialog = false; trigger = 'reset'; emptyPdf = 'reset' " 79 @click="editChapterDetailDialog = false; trigger = 'reset'; emptyPdf = 'reset' "
80 >cancel</v-icon> 80 >cancel</v-icon>
81 </v-flex> 81 </v-flex>
82 </v-layout> 82 </v-layout>
83 <v-card-text> 83 <v-card-text>
84 <v-layout wrap> 84 <v-layout wrap>
85 <!-- CHAPTER NAME --> 85 <!-- CHAPTER NAME -->
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">Chapter Name:</label> 89 <label class="right">Chapter Name:</label>
90 </v-flex> 90 </v-flex>
91 <v-flex xs8 sm6 class="ml-3"> 91 <v-flex xs8 sm6 class="ml-3">
92 <v-text-field 92 <v-text-field
93 v-model="editChapter.chapterName" 93 v-model="editChapter.chapterName"
94 placeholder="fill your Title" 94 placeholder="fill your Title"
95 type="text" 95 type="text"
96 required 96 required
97 ></v-text-field> 97 ></v-text-field>
98 </v-flex> 98 </v-flex>
99 </v-layout> 99 </v-layout>
100 </v-flex> 100 </v-flex>
101 <!-- DESCRIPTION --> 101 <!-- DESCRIPTION -->
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">Description:</label> 105 <label class="right">Description:</label>
106 </v-flex> 106 </v-flex>
107 <v-flex xs8 sm6 class="ml-3"> 107 <v-flex xs8 sm6 class="ml-3">
108 <v-text-field 108 <v-text-field
109 placeholder="fill your Description" 109 placeholder="fill your Description"
110 v-model="editChapter.description" 110 v-model="editChapter.description"
111 type="text" 111 type="text"
112 required 112 required
113 ></v-text-field> 113 ></v-text-field>
114 </v-flex> 114 </v-flex>
115 </v-layout> 115 </v-layout>
116 </v-flex> 116 </v-flex>
117 <!-- UPLOAD PPT --> 117 <!-- UPLOAD PPT -->
118 <!-- <v-flex xs12> 118 <!-- <v-flex xs12>
119 <v-layout> 119 <v-layout>
120 <v-flex xs4 class="pt-4 subheading"> 120 <v-flex xs4 class="pt-4 subheading">
121 <label class="right">Upload PPT:</label> 121 <label class="right">Upload PPT:</label>
122 </v-flex> 122 </v-flex>
123 <v-flex xs8 sm6 class="ml-3"> 123 <v-flex xs8 sm6 class="ml-3">
124 <UploadFiles 124 <UploadFiles
125 @fileSelected="fileSelected($event,'uploadPPT')" 125 @fileSelected="fileSelected($event,'uploadPPT')"
126 label="Add PPT" 126 label="Add PPT"
127 reference="EditPpt" 127 reference="EditPpt"
128 id="editPptInput" 128 id="editPptInput"
129 :trigger="trigger" 129 :trigger="trigger"
130 ></UploadFiles> 130 ></UploadFiles>
131 </v-flex> 131 </v-flex>
132 </v-layout> 132 </v-layout>
133 </v-flex>--> 133 </v-flex>-->
134 <!-- UPLOAD PDF --> 134 <!-- UPLOAD PDF -->
135 <v-flex xs12> 135 <v-flex xs12>
136 <v-layout> 136 <v-layout>
137 <v-flex xs4 class="pt-4 subheading"> 137 <v-flex xs4 class="pt-4 subheading">
138 <label class="right">Upload PDF:</label> 138 <label class="right">Upload PDF:</label>
139 </v-flex> 139 </v-flex>
140 <v-flex xs8 sm6 class="ml-3"> 140 <v-flex xs8 sm6 class="ml-3">
141 <UploadPdf 141 <UploadPdf
142 @pdfFileSelected="pdfFileSelected($event,'uploadPDF')" 142 @pdfFileSelected="pdfFileSelected($event,'uploadPDF')"
143 label="Add PDF" 143 label="Add PDF"
144 reference="editPdf" 144 reference="editPdf"
145 id="editPdfInput" 145 id="editPdfInput"
146 :emptyPdf="emptyPdf" 146 :emptyPdf="emptyPdf"
147 ></UploadPdf> 147 ></UploadPdf>
148 </v-flex> 148 </v-flex>
149 </v-layout> 149 </v-layout>
150 </v-flex> 150 </v-flex>
151 </v-layout> 151 </v-layout>
152 <!-- <v-flex xs12 v-if="editChapter.chapterPoints.length != 0"> 152 <!-- <v-flex xs12 v-if="editChapter.chapterPoints.length != 0">
153 <v-layout 153 <v-layout
154 wrap 154 wrap
155 v-for="(editChapterPoint,index) in editChapter.chapterPoints" 155 v-for="(editChapterPoint,index) in editChapter.chapterPoints"
156 :key="index" 156 :key="index"
157 > 157 >
158 <v-flex xs12 sm12 md4 class="pt-4 subheading"> 158 <v-flex xs12 sm12 md4 class="pt-4 subheading">
159 <label class="right hidden-xs-only hidden-sm-only">Chapter Points:</label> 159 <label class="right hidden-xs-only hidden-sm-only">Chapter Points:</label>
160 <label class="hidden-md-only hidden-lg-only hidden-xl-only">Chapter Points:</label> 160 <label class="hidden-md-only hidden-lg-only hidden-xl-only">Chapter Points:</label>
161 </v-flex> 161 </v-flex>
162 <v-layout> 162 <v-layout>
163 <v-flex xs10 sm10 sm5 md9 class="ml-3"> 163 <v-flex xs10 sm10 sm5 md9 class="ml-3">
164 <v-text-field :value="editChapterPoint" type="text" required></v-text-field> 164 <v-text-field :value="editChapterPoint" type="text" required></v-text-field>
165 </v-flex> 165 </v-flex>
166 <v-flex xs2 class="pt-4"> 166 <v-flex xs2 class="pt-4">
167 <v-icon @click="deleteUrl(index)">cancel</v-icon> 167 <v-icon @click="deleteUrl(index)">cancel</v-icon>
168 </v-flex> 168 </v-flex>
169 </v-layout> 169 </v-layout>
170 </v-layout> 170 </v-layout>
171 </v-flex>--> 171 </v-flex>-->
172 <v-flex xs12> 172 <v-flex xs12>
173 <div v-for="(updateImage,index) in updates" :key="index"> 173 <div v-for="(updateImage,index) in updates" :key="index">
174 <v-layout wrap> 174 <v-layout wrap>
175 <v-flex xs12 sm12 md4 class="pt-4 subheading"> 175 <v-flex xs12 sm12 md4 class="pt-4 subheading">
176 <label class="right hidden-xs-only hidden-sm-only">Chapter Points:</label> 176 <label class="right hidden-xs-only hidden-sm-only">Chapter Points:</label>
177 <label class="hidden-md-only hidden-lg-only hidden-xl-only">Chapter Points:</label> 177 <label class="hidden-md-only hidden-lg-only hidden-xl-only">Chapter Points:</label>
178 </v-flex> 178 </v-flex>
179 <v-layout> 179 <v-layout>
180 <v-flex xs10 sm12 md9 class="ml-3"> 180 <v-flex xs10 sm12 md9 class="ml-3">
181 <v-text-field 181 <v-text-field
182 v-model="updateImage.value" 182 v-model="updateImage.value"
183 placeholder="Upload new Chapter Points" 183 placeholder="Upload new Chapter Points"
184 required 184 required
185 ></v-text-field> 185 ></v-text-field>
186 </v-flex> 186 </v-flex>
187 <v-flex xs2 class="pt-4"> 187 <v-flex xs2 class="pt-4">
188 <v-icon @click="deleteUpdate(index)" v-if="index !=0">cancel</v-icon> 188 <v-icon @click="deleteUpdate(index)" v-if="index !=0">cancel</v-icon>
189 <v-icon @click="update">add_circle</v-icon> 189 <v-icon @click="update">add_circle</v-icon>
190 </v-flex> 190 </v-flex>
191 </v-layout> 191 </v-layout>
192 </v-layout> 192 </v-layout>
193 </div> 193 </div>
194 </v-flex> 194 </v-flex>
195 <v-layout> 195 <v-layout>
196 <v-flex xs12 sm12 md11 lg11> 196 <v-flex xs12 sm12 md11 lg11>
197 <v-card-actions class="hidden-xs-only hidden-sm-only"> 197 <v-card-actions class="hidden-xs-only hidden-sm-only">
198 <v-spacer></v-spacer> 198 <v-spacer></v-spacer>
199 <v-btn 199 <v-btn
200 round 200 round
201 dark 201 dark
202 @click="saveChapter" 202 @click="saveChapter"
203 :loading="editLoading" 203 :loading="editLoading"
204 class="add-button mr-4" 204 class="add-button mr-4"
205 >Save</v-btn> 205 >Save</v-btn>
206 </v-card-actions> 206 </v-card-actions>
207 <v-card-actions class="hidden-md-only hidden-lg-only hidden-xl-only"> 207 <v-card-actions class="hidden-md-only hidden-lg-only hidden-xl-only">
208 <v-spacer></v-spacer> 208 <v-spacer></v-spacer>
209 <v-btn 209 <v-btn
210 round 210 round
211 dark 211 dark
212 @click="saveChapter" 212 @click="saveChapter"
213 :loading="editLoading" 213 :loading="editLoading"
214 class="add-button" 214 class="add-button"
215 >Save</v-btn> 215 >Save</v-btn>
216 <v-spacer></v-spacer> 216 <v-spacer></v-spacer>
217 </v-card-actions> 217 </v-card-actions>
218 </v-flex> 218 </v-flex>
219 </v-layout> 219 </v-layout>
220 </v-card-text> 220 </v-card-text>
221 </v-card> 221 </v-card>
222 </v-dialog> 222 </v-dialog>
223 <!-- ADD NEW CHAPTER--> 223 <!-- ADD NEW CHAPTER-->
224 <v-dialog v-model="addChapterDialog" max-width="1000px" scrollable persistent> 224 <v-dialog v-model="addChapterDialog" max-width="1000px" scrollable persistent>
225 <v-card class="card-style pa-2" dark> 225 <v-card class="card-style pa-2" dark>
226 <v-layout> 226 <v-layout>
227 <v-flex xs12> 227 <v-flex xs12>
228 <label class="title text-xs-center">Add Chapter Detail</label> 228 <label class="title text-xs-center">Add Chapter Detail</label>
229 <v-icon 229 <v-icon
230 size="24" 230 size="24"
231 class="right" 231 class="right"
232 @click="addChapterDialog = false; trigger = 'reset'; emptyPdf = 'reset' " 232 @click="addChapterDialog = false; trigger = 'reset'; emptyPdf = 'reset' "
233 >cancel</v-icon> 233 >cancel</v-icon>
234 </v-flex> 234 </v-flex>
235 </v-layout> 235 </v-layout>
236 <v-card-text> 236 <v-card-text>
237 <v-layout wrap> 237 <v-layout wrap>
238 <v-flex xs12 sm12> 238 <v-flex xs12 sm12>
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">Chapter Name:</label> 241 <label class="right">Chapter Name:</label>
242 </v-flex> 242 </v-flex>
243 <v-flex xs8 sm6 class="ml-3"> 243 <v-flex xs8 sm6 class="ml-3">
244 <v-text-field 244 <v-text-field
245 v-model="addChapterItem.chapterName" 245 v-model="addChapterItem.chapterName"
246 placeholder="fill your Title" 246 placeholder="fill your Title"
247 type="text" 247 type="text"
248 required 248 required
249 ></v-text-field> 249 ></v-text-field>
250 </v-flex> 250 </v-flex>
251 </v-layout> 251 </v-layout>
252 </v-flex> 252 </v-flex>
253 <v-flex xs12 sm12> 253 <v-flex xs12 sm12>
254 <v-layout> 254 <v-layout>
255 <v-flex xs4 class="pt-4 subheading"> 255 <v-flex xs4 class="pt-4 subheading">
256 <label class="right">Description:</label> 256 <label class="right">Description:</label>
257 </v-flex> 257 </v-flex>
258 <v-flex xs8 sm6 class="ml-3"> 258 <v-flex xs8 sm6 class="ml-3">
259 <v-text-field 259 <v-text-field
260 placeholder="fill your Description" 260 placeholder="fill your Description"
261 v-model="addChapterItem.description" 261 v-model="addChapterItem.description"
262 type="text" 262 type="text"
263 required 263 required
264 ></v-text-field> 264 ></v-text-field>
265 </v-flex> 265 </v-flex>
266 </v-layout> 266 </v-layout>
267 </v-flex> 267 </v-flex>
268 <!-- UPLOAD PPT --> 268 <!-- UPLOAD PPT -->
269 <!-- <v-flex xs12> 269 <!-- <v-flex xs12>
270 <v-layout> 270 <v-layout>
271 <v-flex xs4 class="pt-4 subheading"> 271 <v-flex xs4 class="pt-4 subheading">
272 <label class="right">Upload PPT:</label> 272 <label class="right">Upload PPT:</label>
273 </v-flex> 273 </v-flex>
274 <v-flex xs8 sm6 class="ml-3"> 274 <v-flex xs8 sm6 class="ml-3">
275 <UploadFiles 275 <UploadFiles
276 @fileSelected="fileSelected($event,'uploadPPT')" 276 @fileSelected="fileSelected($event,'uploadPPT')"
277 label="Add PPT" 277 label="Add PPT"
278 reference="newChapterPpt" 278 reference="newChapterPpt"
279 id="newChapterPptInput" 279 id="newChapterPptInput"
280 :trigger="trigger" 280 :trigger="trigger"
281 ></UploadFiles> 281 ></UploadFiles>
282 </v-flex> 282 </v-flex>
283 </v-layout> 283 </v-layout>
284 </v-flex>--> 284 </v-flex>-->
285 <!-- UPLOAD PDF --> 285 <!-- UPLOAD PDF -->
286 <v-flex xs12> 286 <v-flex xs12>
287 <v-layout> 287 <v-layout>
288 <v-flex xs4 class="pt-4 subheading"> 288 <v-flex xs4 class="pt-4 subheading">
289 <label class="right">Upload PDF:</label> 289 <label class="right">Upload PDF:</label>
290 </v-flex> 290 </v-flex>
291 <v-flex xs8 sm6 class="ml-3"> 291 <v-flex xs8 sm6 class="ml-3">
292 <UploadPdf 292 <UploadPdf
293 @pdfFileSelected="pdfFileSelected($event,'uploadPDF')" 293 @pdfFileSelected="pdfFileSelected($event,'uploadPDF')"
294 label="Add PDF" 294 label="Add PDF"
295 reference="newChapterPdf" 295 reference="newChapterPdf"
296 id="newChapterPdfInput" 296 id="newChapterPdfInput"
297 :emptyPdf="emptyPdf" 297 :emptyPdf="emptyPdf"
298 ></UploadPdf> 298 ></UploadPdf>
299 </v-flex> 299 </v-flex>
300 </v-layout> 300 </v-layout>
301 </v-flex> 301 </v-flex>
302 </v-layout> 302 </v-layout>
303 <v-flex xs12> 303 <v-flex xs12>
304 <div v-for="(chapterPoints,index) in findsChapterPoint" :key="index"> 304 <div v-for="(chapterPoints,index) in findsChapterPoint" :key="index">
305 <v-layout> 305 <v-layout>
306 <v-flex xs4 class="pt-4 subheading"> 306 <v-flex xs4 class="pt-4 subheading">
307 <label class="right">Chapter Points:</label> 307 <label class="right">Chapter Points:</label>
308 </v-flex> 308 </v-flex>
309 <v-flex xs8 sm8 md6 class="ml-3"> 309 <v-flex xs8 sm8 md6 class="ml-3">
310 <v-text-field 310 <v-text-field
311 placeholder="fill your Chapter Points" 311 placeholder="fill your Chapter Points"
312 v-model="chapterPoints.value" 312 v-model="chapterPoints.value"
313 type="text" 313 type="text"
314 name="link" 314 name="link"
315 required 315 required
316 ></v-text-field> 316 ></v-text-field>
317 </v-flex> 317 </v-flex>
318 <v-flex xs2 class="pt-4"> 318 <v-flex xs2 class="pt-4">
319 <v-icon @click="deleteChapterPoint(index)" v-if="index !=0 ">cancel</v-icon> 319 <v-icon @click="deleteChapterPoint(index)" v-if="index !=0 ">cancel</v-icon>
320 <v-icon @click="addChapterPoint()">add_circle</v-icon> 320 <v-icon @click="addChapterPoint()">add_circle</v-icon>
321 </v-flex> 321 </v-flex>
322 </v-layout> 322 </v-layout>
323 </div> 323 </div>
324 </v-flex> 324 </v-flex>
325 <v-layout> 325 <v-layout>
326 <v-flex xs12 sm12 md11 lg11> 326 <v-flex xs12 sm12 md11 lg11>
327 <v-card-actions class="hidden-xs-only hidden-sm-only"> 327 <v-card-actions class="hidden-xs-only hidden-sm-only">
328 <v-spacer></v-spacer> 328 <v-spacer></v-spacer>
329 <v-btn 329 <v-btn
330 round 330 round
331 dark 331 dark
332 @click="submitChapter" 332 @click="submitChapter"
333 :loading="editLoading" 333 :loading="editLoading"
334 class="add-button mr-4" 334 class="add-button mr-4"
335 >Submit</v-btn> 335 >Submit</v-btn>
336 </v-card-actions> 336 </v-card-actions>
337 <v-card-actions class="hidden-md-only hidden-lg-only hidden-xl-only"> 337 <v-card-actions class="hidden-md-only hidden-lg-only hidden-xl-only">
338 <v-spacer></v-spacer> 338 <v-spacer></v-spacer>
339 <v-btn round dark @click="save" :loading="editLoading" class="add-button">Save</v-btn> 339 <v-btn round dark @click="save" :loading="editLoading" class="add-button">Save</v-btn>
340 <v-spacer></v-spacer> 340 <v-spacer></v-spacer>
341 </v-card-actions> 341 </v-card-actions>
342 </v-flex> 342 </v-flex>
343 </v-layout> 343 </v-layout>
344 </v-card-text> 344 </v-card-text>
345 </v-card> 345 </v-card>
346 </v-dialog> 346 </v-dialog>
347 347
348 <!-- ****** PROFILE Gallery ****** --> 348 <!-- ****** PROFILE Gallery ****** -->
349 349
350 <v-dialog v-model="viewProfileGallery" max-width="1000" scrollable persistent> 350 <v-dialog v-model="viewProfileGallery" max-width="1000" scrollable persistent>
351 <v-card flat class="card-style pa-3" dark> 351 <v-card flat class="card-style pa-3" dark>
352 <v-layout> 352 <v-layout>
353 <v-flex xs12> 353 <v-flex xs12>
354 <label class="title text-xs-center">View Course Detail</label> 354 <label class="title text-xs-center">View Course Detail</label>
355 <v-icon size="24" class="right" @click="closeProfileGallery">cancel</v-icon> 355 <v-icon size="24" class="right" @click="closeProfileGallery">cancel</v-icon>
356 </v-flex> 356 </v-flex>
357 </v-layout> 357 </v-layout>
358 <v-card-text> 358 <v-card-text>
359 <v-container grid-list-md> 359 <v-container grid-list-md>
360 <v-layout wrap> 360 <v-layout wrap>
361 <v-flex xs12> 361 <v-flex xs12>
362 <v-layout> 362 <v-layout>
363 <v-flex xs4 sm6> 363 <v-flex xs4 sm6>
364 <h5 class="right my-1"> 364 <h5 class="right my-1">
365 <b>Chapter Name:</b> 365 <b>Chapter Name:</b>
366 </h5> 366 </h5>
367 </v-flex> 367 </v-flex>
368 <v-flex sm6 xs8> 368 <v-flex sm6 xs8>
369 <h5 class="my-1">{{ editedItem.chapterName }}</h5> 369 <h5 class="my-1">{{ editedItem.chapterName }}</h5>
370 </v-flex> 370 </v-flex>
371 </v-layout> 371 </v-layout>
372 <v-layout> 372 <v-layout>
373 <v-flex xs4 sm6> 373 <v-flex xs4 sm6>
374 <h5 class="right my-1"> 374 <h5 class="right my-1">
375 <b>Description:</b> 375 <b>Description:</b>
376 </h5> 376 </h5>
377 </v-flex> 377 </v-flex>
378 <v-flex sm6 xs8> 378 <v-flex sm6 xs8>
379 <h5 class="my-1">{{ editedItem.description }}</h5> 379 <h5 class="my-1">{{ editedItem.description }}</h5>
380 </v-flex> 380 </v-flex>
381 </v-layout> 381 </v-layout>
382 <v-layout> 382 <v-layout>
383 <v-flex xs5 sm6> 383 <v-flex xs5 sm6>
384 <h5 class="right my-1"> 384 <h5 class="right my-1">
385 <b>Chapter Points:</b> 385 <b>Chapter Points:</b>
386 </h5> 386 </h5>
387 </v-flex> 387 </v-flex>
388 <v-flex sm6 xs8> 388 <v-flex sm6 xs8>
389 <h5 class="my-1"> 389 <h5 class="my-1">
390 <ul v-for="chapterPoint in editedItem.chapterPoints" :key="chapterPoint"> 390 <ul v-for="chapterPoint in editedItem.chapterPoints" :key="chapterPoint">
391 <li>{{ chapterPoint}}</li> 391 <li>{{ chapterPoint}}</li>
392 </ul> 392 </ul>
393 </h5> 393 </h5>
394 </v-flex> 394 </v-flex>
395 </v-layout> 395 </v-layout>
396 <!-- LINK TO PDF --> 396 <!-- LINK TO PDF -->
397 <!-- <v-layout row justify-center v-show="editedItem.pdfFileUrl != ''"> 397 <!-- <v-layout row justify-center v-show="editedItem.pdfFileUrl != ''">
398 <v-flex xs6> 398 <v-flex xs6>
399 <div style="width: 100%;"> 399 <div style="width: 100%;">
400 <a 400 <a
401 :href="editedItem.pdfFileUrl" 401 :href="editedItem.pdfFileUrl"
402 target="_blank" 402 target="_blank"
403 style="text-decoration: none!important;" 403 style="text-decoration: none!important;"
404 > 404 >
405 <v-btn flat block> 405 <v-btn flat block>
406 <span> 406 <span>
407 <h5> 407 <h5>
408 <b>Open PDF</b> 408 <b>Open PDF</b>
409 </h5> 409 </h5>
410 </span> 410 </span>
411 </v-btn> 411 </v-btn>
412 </a> 412 </a>
413 </div> 413 </div>
414 </v-flex> 414 </v-flex>
415 </v-layout>--> 415 </v-layout>-->
416 </v-flex> 416 </v-flex>
417 </v-layout> 417 </v-layout>
418 </v-container> 418 </v-container>
419 </v-card-text> 419 </v-card-text>
420 </v-card> 420 </v-card>
421 </v-dialog> 421 </v-dialog>
422 422
423 <!-- ****** Course Detail TABLE ****** --> 423 <!-- ****** Course Detail TABLE ****** -->
424 <v-toolbar color="transparent" flat> 424 <v-toolbar color="transparent" flat>
425 <!-- <v-flex xs1> 425 <!-- <v-flex xs1>
426 <v-btn round class="open-dialog-button" dark @click="addCourseDetailDialog = true"> 426 <v-btn round class="open-dialog-button" dark @click="addCourseDetailDialog = true">
427 <v-icon size="20">add</v-icon> 427 <v-icon size="20">add</v-icon>
428 <span class="hidden-sm-and-down">Add Course Detail</span> 428 <span class="hidden-sm-and-down">Add Course Detail</span>
429 <span class="hidden-md-and-up">Add</span> 429 <span class="hidden-md-and-up">Add</span>
430 </v-btn> 430 </v-btn>
431 </v-flex>--> 431 </v-flex>-->
432 <v-btn 432 <v-btn
433 fab 433 fab
434 dark 434 dark
435 class="open-dialog-button hidden-xl-only hidden-md-only hidden-lg-only" 435 class="open-dialog-button hidden-xl-only hidden-md-only hidden-lg-only"
436 small 436 small
437 @click="addCourseDetailDialog = true" 437 @click="addCourseDetailDialog = true"
438 > 438 >
439 <v-icon dark>add</v-icon> 439 <v-icon dark>add</v-icon>
440 </v-btn> 440 </v-btn>
441 <v-flex xs1 class="hidden-sm-only hidden-xs-only"> 441 <v-flex xs1 class="hidden-sm-only hidden-xs-only">
442 <v-btn round class="open-dialog-button" dark @click="addCourseDetailDialog = true"> 442 <v-btn round class="open-dialog-button" dark @click="addCourseDetailDialog = true">
443 <v-icon class="white--text pr-1" size="20">add</v-icon>Add Course Detail 443 <v-icon class="white--text pr-1" size="20">add</v-icon>Add Course Detail
444 </v-btn> 444 </v-btn>
445 </v-flex> 445 </v-flex>
446 <v-spacer></v-spacer> 446 <v-spacer></v-spacer>
447 <v-flex xs12 sm4 md2> 447 <v-flex xs12 sm4 md2>
448 <v-select 448 <v-select
449 :items="addclass" 449 :items="addclass"
450 label="Select Class" 450 label="Select Class"
451 v-model="getCourse.classId" 451 v-model="getCourse.classId"
452 item-text="classNum" 452 item-text="classNum"
453 item-value="_id" 453 item-value="_id"
454 name="Select Class" 454 name="Select Class"
455 @change="getCourses(getCourse.classId)" 455 @change="getCourses(getCourse.classId)"
456 required 456 required
457 ></v-select> 457 ></v-select>
458 </v-flex> 458 </v-flex>
459 <v-flex xs12 sm4 md2 class="ml-2"> 459 <v-flex xs12 sm4 md2 class="ml-2">
460 <v-select 460 <v-select
461 :items="courseData" 461 :items="courseData"
462 label="Select Course" 462 label="Select Course"
463 v-model="getCourse.courseId" 463 v-model="getCourse.courseId"
464 item-text="courseName" 464 item-text="courseName"
465 item-value="_id" 465 item-value="_id"
466 required 466 required
467 @change="getCourseDetailsList(getCourse.courseId)" 467 @change="getCourseDetailsList(getCourse.courseId)"
468 ></v-select> 468 ></v-select>
469 </v-flex> 469 </v-flex>
470 470
471 <v-flex xs12 sm1 v-if="show"> 471 <v-flex xs12 sm1 v-if="show">
472 <v-btn icon large flat @click="show = false;showSearch = true;"> 472 <v-btn icon large flat @click="show = false;showSearch = true;">
473 <v-avatar size="27"> 473 <v-avatar size="27">
474 <img src="/static/icon/search.png" alt="icon" /> 474 <img src="/static/icon/search.png" alt="icon" />
475 </v-avatar> 475 </v-avatar>
476 </v-btn> 476 </v-btn>
477 </v-flex> 477 </v-flex>
478 478
479 <v-flex xs12 sm3 md3 v-if="showSearch" class="ml-2"> 479 <v-flex xs12 sm3 md3 v-if="showSearch" class="ml-2">
480 <div style="display: inline-block;width: 70%;"> 480 <div style="display: inline-block;width: 70%;">
481 <v-text-field 481 <v-text-field
482 autofocus 482 autofocus
483 v-model="search" 483 v-model="search"
484 label="Search" 484 label="Search"
485 prepend-inner-icon="search" 485 prepend-inner-icon="search"
486 color="primary" 486 color="primary"
487 ></v-text-field> 487 ></v-text-field>
488 </div> 488 </div>
489 <div style="display: inline-block;"> 489 <div style="display: inline-block;">
490 <v-icon @click="closeSearch" color="error">close</v-icon> 490 <v-icon @click="closeSearch" color="error">close</v-icon>
491 </div> 491 </div>
492 </v-flex> 492 </v-flex>
493 </v-toolbar> 493 </v-toolbar>
494 494
495 <v-data-table 495 <v-data-table
496 :headers="headers" 496 :headers="headers"
497 :items="CourseDetailsList" 497 :items="CourseDetailsList"
498 :pagination.sync="pagination" 498 :pagination.sync="pagination"
499 :search="search" 499 :search="search"
500 item-key="_id" 500 item-key="_id"
501 > 501 >
502 <template slot="items" slot-scope="props"> 502 <template slot="items" slot-scope="props">
503 <tr class="tr" @click="courseTableRow(props.item._id)"> 503 <tr class="tr" @click="courseTableRow(props.item._id)">
504 <td class="td td-row">{{ props.index + 1}}</td> 504 <td class="td td-row">{{ props.index + 1}}</td>
505 <td class="td td-row text-xs-center">{{ props.item.classId.classNum }}</td> 505 <td class="td td-row text-xs-center">{{ props.item.classId.classNum }}</td>
506 <td class="td td-row text-xs-center">{{ props.item.courseId.courseName }}</td> 506 <td class="td td-row text-xs-center">{{ props.item.courseId.courseName }}</td>
507 <td class="td td-row text-xs-center"> 507 <td class="td td-row text-xs-center">
508 <div style="vertical-align: top;"> 508 <div style="vertical-align: top;">
509 <v-tooltip top> 509 <v-tooltip top>
510 <v-icon 510 <v-icon
511 slot="activator" 511 slot="activator"
512 style="cursor:pointer;font-size:22px;position: relative;top: -4px; " 512 style="cursor:pointer;font-size:22px;position: relative;top: -4px; "
513 class="mr-3" 513 class="mr-3"
514 @click="addChapters(props.item)" 514 @click="addChapters(props.item)"
515 >add_circle_outline</v-icon> 515 >add_circle_outline</v-icon>
516 <span>Add</span> 516 <span>Add</span>
517 </v-tooltip> 517 </v-tooltip>
518 <v-tooltip top> 518 <v-tooltip top>
519 <img 519 <img
520 slot="activator" 520 slot="activator"
521 style="cursor:pointer; width:25px; height:25px; " 521 style="cursor:pointer; width:25px; height:25px; "
522 class="mr-3" 522 class="mr-3"
523 @click="props.expanded = !props.expanded" 523 @click="props.expanded = !props.expanded"
524 src="/static/icon/view.png" 524 src="/static/icon/view.png"
525 /> 525 />
526 <span>View</span> 526 <span>View</span>
527 </v-tooltip> 527 </v-tooltip>
528 <v-tooltip top> 528 <v-tooltip top>
529 <img 529 <img
530 slot="activator" 530 slot="activator"
531 style="cursor:pointer; width:20px; height:18px; " 531 style="cursor:pointer; width:20px; height:18px; "
532 class="mr-3" 532 class="mr-3"
533 @click="editItem(props.item)" 533 @click="editItem(props.item)"
534 src="/static/icon/edit.png" 534 src="/static/icon/edit.png"
535 /> 535 />
536 <span>Edit</span> 536 <span>Edit</span>
537 </v-tooltip> 537 </v-tooltip>
538 <v-tooltip top> 538 <v-tooltip top>
539 <img 539 <img
540 slot="activator" 540 slot="activator"
541 style="cursor:pointer; width:20px; height:20px; " 541 style="cursor:pointer; width:20px; height:20px; "
542 class="mr-3" 542 class="mr-3"
543 @click="deleteItem(props.item)" 543 @click="deleteItem(props.item)"
544 src="/static/icon/delete.png" 544 src="/static/icon/delete.png"
545 /> 545 />
546 <span>Delete</span> 546 <span>Delete</span>
547 </v-tooltip> 547 </v-tooltip>
548 </div> 548 </div>
549 </td> 549 </td>
550 </tr> 550 </tr>
551 </template> 551 </template>
552 <!-- CHAPTERS IN A COURSE --> 552 <!-- CHAPTERS IN A COURSE -->
553 <template slot="expand"> 553 <template slot="expand">
554 <v-data-table :items="chapters" hide-actions item-key="chapterName" style="width: auto;"> 554 <v-data-table :items="chapters" hide-actions item-key="chapterName" style="width: auto;">
555 <template slot="items" slot-scope="props"> 555 <template slot="items" slot-scope="props">
556 <tr class="tr" @click="props.expanded = !props.expanded"> 556 <tr class="tr" @click="props.expanded = !props.expanded">
557 <td class="td td-row">{{ props.index + 1}}</td> 557 <td class="td td-row">{{ props.index + 1}}</td>
558 <td class="text-xs-center td td-row">{{ props.item.chapterName}}</td> 558 <td class="text-xs-center td td-row">{{ props.item.chapterName}}</td>
559 <td class="text-xs-center td td-row">{{ props.item.description }}</td> 559 <td class="text-xs-center td td-row">{{ props.item.description }}</td>
560 <td class="text-xs-center td td-row"> 560 <td class="text-xs-center td td-row">
561 <v-tooltip top> 561 <v-tooltip top>
562 <v-icon 562 <v-icon
563 slot="activator" 563 slot="activator"
564 style="cursor:pointer;font-size:22px;position: relative;top: -4px; " 564 style="cursor:pointer;font-size:22px;position: relative;top: -4px; "
565 class="mr-3" 565 class="mr-3"
566 @click="$router.push({name: 'Live Online Class', query: {chapterId: props.item._id, chapterName: props.item.chapterName, courseId: getCourse.courseId, classId: getCourse.classId }})" 566 @click="$router.push({name: 'Live Online Class', query: {chapterId: props.item._id, chapterName: props.item.chapterName, courseId: getCourse.courseId, classId: getCourse.classId }})"
567 >video_call</v-icon> 567 >video_call</v-icon>
568 <span>Live Session</span> 568 <span>Live Session</span>
569 </v-tooltip> 569 </v-tooltip>
570 <v-tooltip top> 570 <v-tooltip top>
571 <img 571 <img
572 slot="activator" 572 slot="activator"
573 style="cursor:pointer; width:25px; height:25px; " 573 style="cursor:pointer; width:25px; height:25px; "
574 class="mr-3" 574 class="mr-3"
575 @click="profile(props.item)" 575 @click="profile(props.item)"
576 src="/static/icon/view.png" 576 src="/static/icon/view.png"
577 /> 577 />
578 <span>View</span> 578 <span>View</span>
579 </v-tooltip> 579 </v-tooltip>
580 <v-tooltip top> 580 <v-tooltip top>
581 <img 581 <img
582 slot="activator" 582 slot="activator"
583 style="cursor:pointer; width:20px; height:18px; " 583 style="cursor:pointer; width:20px; height:18px; "
584 class="mr-3" 584 class="mr-3"
585 @click="editChapterItem(props.item)" 585 @click="editChapterItem(props.item)"
586 src="/static/icon/edit.png" 586 src="/static/icon/edit.png"
587 /> 587 />
588 <span>Edit</span> 588 <span>Edit</span>
589 </v-tooltip> 589 </v-tooltip>
590 <v-tooltip top> 590 <v-tooltip top>
591 <img 591 <img
592 slot="activator" 592 slot="activator"
593 style="cursor:pointer; width:20px; height:20px; " 593 style="cursor:pointer; width:20px; height:20px; "
594 class="mr-3" 594 class="mr-3"
595 @click="deleteChapters(props.item)" 595 @click="deleteChapters(props.item)"
596 src="/static/icon/delete.png" 596 src="/static/icon/delete.png"
597 /> 597 />
598 <span>Delete Chapter</span> 598 <span>Delete Chapter</span>
599 </v-tooltip> 599 </v-tooltip>
600 <v-tooltip top> 600 <v-tooltip top>
601 <img 601 <img
602 slot="activator" 602 slot="activator"
603 style="cursor:pointer; width:20px; height:20px; " 603 style="cursor:pointer; width:20px; height:20px; "
604 class="mr-3" 604 class="mr-3"
605 src="/static/icon/dashboard icons-34.png" 605 src="/static/icon/dashboard icons-34.png"
606 @click="openLink(props.item.pdfFileUrl)" 606 @click="openLink(props.item.pdfFileUrl)"
607 /> 607 />
608 <span> 608 <span>
609 <h5>{{props.item.fileName}}</h5> 609 <h5>{{props.item.fileName}}</h5>
610 </span> 610 </span>
611 </v-tooltip> 611 </v-tooltip>
612 </td> 612 </td>
613 </tr> 613 </tr>
614 </template> 614 </template>
615 </v-data-table> 615 </v-data-table>
616 </template> 616 </template>
617 617
618 <v-alert 618 <v-alert
619 slot="no-results" 619 slot="no-results"
620 :value="true" 620 :value="true"
621 color="error" 621 color="error"
622 icon="warning" 622 icon="warning"
623 >Your search for "{{ search }}" found no results.</v-alert> 623 >Your search for "{{ search }}" found no results.</v-alert>
624 </v-data-table> 624 </v-data-table>
625 <!-- ****** ADD Course Detail ****** --> 625 <!-- ****** ADD Course Detail ****** -->
626 <v-dialog v-model="addCourseDetailDialog" max-width="600px" persistent> 626 <v-dialog v-model="addCourseDetailDialog" max-width="600px" persistent>
627 <v-card flat class="card-style pa-2" dark> 627 <v-card flat class="card-style pa-2" dark>
628 <v-layout> 628 <v-layout>
629 <v-flex xs12> 629 <v-flex xs12>
630 <label class="title text-xs-center">Add Course Details</label> 630 <label class="title text-xs-center">Add Course Details</label>
631 <v-icon 631 <v-icon
632 size="24" 632 size="24"
633 class="right" 633 class="right"
634 @click="addCourseDetailDialog = false; clear() ; trigger = 'reset' ; emptyPdf = 'reset' " 634 @click="addCourseDetailDialog = false; clear() ; trigger = 'reset' ; emptyPdf = 'reset' "
635 >cancel</v-icon> 635 >cancel</v-icon>
636 </v-flex> 636 </v-flex>
637 </v-layout> 637 </v-layout>
638 <v-form ref="form" v-model="valid" lazy-validation> 638 <v-form ref="form" v-model="valid" lazy-validation>
639 <v-container fluid> 639 <v-container fluid>
640 <v-flex xs12> 640 <v-flex xs12>
641 <v-layout> 641 <v-layout>
642 <v-flex xs4 class="pt-4 subheading"> 642 <v-flex xs4 class="pt-4 subheading">
643 <label class="right hidden-xs-only hidden-sm-only">Select Class:</label> 643 <label class="right hidden-xs-only hidden-sm-only">Select Class:</label>
644 <label class="right hidden-lg-only hidden-md-only hidden-xl-only">Class:</label> 644 <label class="right hidden-lg-only hidden-md-only hidden-xl-only">Class:</label>
645 </v-flex> 645 </v-flex>
646 <v-flex xs8 sm8 md7 class="ml-3"> 646 <v-flex xs8 sm8 md7 class="ml-3">
647 <v-select 647 <v-select
648 :items="addclass" 648 :items="addclass"
649 label="Select Class" 649 label="Select Class"
650 v-model="addCourseDetail.classId" 650 v-model="addCourseDetail.classId"
651 item-text="classNum" 651 item-text="classNum"
652 item-value="_id" 652 item-value="_id"
653 name="Select Class" 653 name="Select Class"
654 :rules="clsssRules" 654 :rules="clsssRules"
655 @change="getCourses(addCourseDetail.classId)" 655 @change="getCourses(addCourseDetail.classId)"
656 required 656 required
657 ></v-select> 657 ></v-select>
658 </v-flex> 658 </v-flex>
659 </v-layout> 659 </v-layout>
660 </v-flex> 660 </v-flex>
661 <v-flex xs12> 661 <v-flex xs12>
662 <v-layout> 662 <v-layout>
663 <v-flex xs4 class="pt-4 subheading"> 663 <v-flex xs4 class="pt-4 subheading">
664 <label class="right hidden-xs-only hidden-sm-only">Select Course:</label> 664 <label class="right hidden-xs-only hidden-sm-only">Select Course:</label>
665 <label class="right hidden-lg-only hidden-md-only hidden-xl-only">Course:</label> 665 <label class="right hidden-lg-only hidden-md-only hidden-xl-only">Course:</label>
666 </v-flex> 666 </v-flex>
667 <v-flex xs8 sm8 md7 class="ml-3"> 667 <v-flex xs8 sm8 md7 class="ml-3">
668 <v-select 668 <v-select
669 :items="courseData" 669 :items="courseData"
670 label="Select Course" 670 label="Select Course"
671 v-model="addCourseDetail.courseId" 671 v-model="addCourseDetail.courseId"
672 item-text="courseName" 672 item-text="courseName"
673 item-value="_id" 673 item-value="_id"
674 :rules="courseRules" 674 :rules="courseRules"
675 required 675 required
676 ></v-select> 676 ></v-select>
677 </v-flex> 677 </v-flex>
678 </v-layout> 678 </v-layout>
679 </v-flex> 679 </v-flex>
680 <v-flex xs12> 680 <v-flex xs12>
681 <v-layout> 681 <v-layout>
682 <v-flex xs4 class="pt-4 subheading"> 682 <v-flex xs4 class="pt-4 subheading">
683 <label class="right">Chapter Name:</label> 683 <label class="right">Chapter Name:</label>
684 </v-flex> 684 </v-flex>
685 <v-flex xs8 sm8 md7 class="ml-3"> 685 <v-flex xs8 sm8 md7 class="ml-3">
686 <v-text-field 686 <v-text-field
687 v-model="addCourseDetail.chapterName" 687 v-model="addCourseDetail.chapterName"
688 placeholder="fill your Title" 688 placeholder="fill your Title"
689 name="name" 689 name="name"
690 type="text" 690 type="text"
691 :rules="chapterNameRules" 691 :rules="chapterNameRules"
692 required 692 required
693 ></v-text-field> 693 ></v-text-field>
694 </v-flex> 694 </v-flex>
695 </v-layout> 695 </v-layout>
696 </v-flex> 696 </v-flex>
697 <!-- DESCRIPTION --> 697 <!-- DESCRIPTION -->
698 <v-flex xs12> 698 <v-flex xs12>
699 <v-layout> 699 <v-layout>
700 <v-flex xs4 class="pt-4 subheading"> 700 <v-flex xs4 class="pt-4 subheading">
701 <label class="right">Description:</label> 701 <label class="right">Description:</label>
702 </v-flex> 702 </v-flex>
703 <v-flex xs8 sm8 md7 class="ml-3"> 703 <v-flex xs8 sm8 md7 class="ml-3">
704 <v-text-field 704 <v-text-field
705 placeholder="fill your Description" 705 placeholder="fill your Description"
706 :rules="descriptionRules" 706 :rules="descriptionRules"
707 v-model="addCourseDetail.description" 707 v-model="addCourseDetail.description"
708 type="text" 708 type="text"
709 name="email" 709 name="email"
710 required 710 required
711 ></v-text-field> 711 ></v-text-field>
712 </v-flex> 712 </v-flex>
713 </v-layout> 713 </v-layout>
714 </v-flex> 714 </v-flex>
715 <!-- UPLOAD PPT --> 715 <!-- UPLOAD PPT -->
716 <!-- <v-flex xs12> 716 <!-- <v-flex xs12>
717 <v-layout> 717 <v-layout>
718 <v-flex xs4 class="pt-4 subheading"> 718 <v-flex xs4 class="pt-4 subheading">
719 <label class="right">Upload PPT:</label> 719 <label class="right">Upload PPT:</label>
720 </v-flex> 720 </v-flex>
721 <v-flex xs8 sm8 md7 class="ml-3"> 721 <v-flex xs8 sm8 md7 class="ml-3">
722 <UploadFiles 722 <UploadFiles
723 @fileSelected="fileSelected($event,'uploadPPT')" 723 @fileSelected="fileSelected($event,'uploadPPT')"
724 label="Add PPT" 724 label="Add PPT"
725 reference="newCoursePpt" 725 reference="newCoursePpt"
726 id="newCoursePptInput" 726 id="newCoursePptInput"
727 :trigger="trigger" 727 :trigger="trigger"
728 ></UploadFiles> 728 ></UploadFiles>
729 </v-flex> 729 </v-flex>
730 </v-layout> 730 </v-layout>
731 </v-flex>--> 731 </v-flex>-->
732 <!-- UPLOAD PDF --> 732 <!-- UPLOAD PDF -->
733 <v-flex xs12> 733 <v-flex xs12>
734 <v-layout> 734 <v-layout>
735 <v-flex xs4 class="pt-4 subheading"> 735 <v-flex xs4 class="pt-4 subheading">
736 <label class="right">Upload PDF:</label> 736 <label class="right">Upload PDF:</label>
737 </v-flex> 737 </v-flex>
738 <v-flex xs8 sm8 md7 class="ml-3"> 738 <v-flex xs8 sm8 md7 class="ml-3">
739 <UploadPdf 739 <UploadPdf
740 @pdfFileSelected="pdfFileSelected($event,'uploadPDF')" 740 @pdfFileSelected="pdfFileSelected($event,'uploadPDF')"
741 label="Add PDF" 741 label="Add PDF"
742 reference="newCoursePdf" 742 reference="newCoursePdf"
743 id="newCoursePdfInput" 743 id="newCoursePdfInput"
744 :emptyPdf="emptyPdf" 744 :emptyPdf="emptyPdf"
745 ></UploadPdf> 745 ></UploadPdf>
746 </v-flex> 746 </v-flex>
747 </v-layout> 747 </v-layout>
748 </v-flex> 748 </v-flex>
749 <v-layout> 749 <v-layout>
750 <v-flex xs12> 750 <v-flex xs12>
751 <div v-for="(chapterPoints,index) in finds" :key="index"> 751 <div v-for="(chapterPoints,index) in finds" :key="index">
752 <v-layout> 752 <v-layout>
753 <v-flex xs4 class="pt-4 subheading"> 753 <v-flex xs4 class="pt-4 subheading">
754 <label class="right">Chapter Points:</label> 754 <label class="right">Chapter Points:</label>
755 </v-flex> 755 </v-flex>
756 <v-flex xs8 sm8 md6 class="ml-3"> 756 <v-flex xs8 sm8 md6 class="ml-3">
757 <v-text-field 757 <v-text-field
758 placeholder="fill your Chapter Points" 758 placeholder="fill your Chapter Points"
759 v-model="chapterPoints.value" 759 v-model="chapterPoints.value"
760 type="text" 760 type="text"
761 required 761 required
762 ></v-text-field> 762 ></v-text-field>
763 </v-flex> 763 </v-flex>
764 <v-flex xs2 class="pt-4"> 764 <v-flex xs2 class="pt-4">
765 <v-icon @click="deleteFind(index)" v-if="index !=0 ">cancel</v-icon> 765 <v-icon @click="deleteFind(index)" v-if="index !=0 ">cancel</v-icon>
766 <v-icon @click="addFind">add_circle</v-icon> 766 <v-icon @click="addFind">add_circle</v-icon>
767 </v-flex> 767 </v-flex>
768 </v-layout> 768 </v-layout>
769 </div> 769 </div>
770 </v-flex> 770 </v-flex>
771 </v-layout> 771 </v-layout>
772 <v-layout> 772 <v-layout>
773 <v-flex xs12 sm12> 773 <v-flex xs12 sm12>
774 <v-layout class="right"> 774 <v-layout class="right">
775 <v-btn @click="clear();" round dark class="clear-button">Clear</v-btn> 775 <v-btn @click="clear();" round dark class="clear-button">Clear</v-btn>
776 <v-btn @click="submit" round dark :loading="loading" class="add-button">Add</v-btn> 776 <v-btn @click="submit" round dark :loading="loading" class="add-button">Add</v-btn>
777 </v-layout> 777 </v-layout>
778 </v-flex> 778 </v-flex>
779 </v-layout> 779 </v-layout>
780 </v-container> 780 </v-container>
781 </v-form> 781 </v-form>
782 </v-card> 782 </v-card>
783 </v-dialog> 783 </v-dialog>
784 <v-snackbar 784 <v-snackbar
785 :timeout="timeout" 785 :timeout="timeout"
786 :top="y === 'top'" 786 :top="y === 'top'"
787 :right="x === 'right'" 787 :right="x === 'right'"
788 :vertical="mode === 'vertical'" 788 :vertical="mode === 'vertical'"
789 v-model="snackbar" 789 v-model="snackbar"
790 :color="color" 790 :color="color"
791 >{{ text }}</v-snackbar> 791 >{{ text }}</v-snackbar>
792 <div class="loader" v-if="showLoader"> 792 <div class="loader" v-if="showLoader">
793 <v-progress-circular indeterminate color="white"></v-progress-circular> 793 <v-progress-circular indeterminate color="white"></v-progress-circular>
794 </div> 794 </div>
795 </v-container> 795 </v-container>
796 </template> 796 </template>
797 797
798 <script> 798 <script>
799 import http from "@/Services/http.js"; 799 import http from "@/Services/http.js";
800 import UploadFiles from "@/pages/Common/UploadFiles.vue"; 800 import UploadFiles from "@/pages/Common/UploadFiles.vue";
801 import UploadPdf from "@/pages/Common/UploadPdf.vue"; 801 import UploadPdf from "@/pages/Common/UploadPdf.vue";
802 import AllApiCalls from "@/Services/AllApiCalls.js"; 802 import AllApiCalls from "@/Services/AllApiCalls.js";
803 803
804 export default { 804 export default {
805 mixins: [AllApiCalls], 805 mixins: [AllApiCalls],
806 components: { 806 components: {
807 UploadFiles, 807 UploadFiles,
808 UploadPdf, 808 UploadPdf,
809 }, 809 },
810 data: () => ({ 810 data: () => ({
811 snackbar: false, 811 snackbar: false,
812 y: "top", 812 y: "top",
813 x: "right", 813 x: "right",
814 mode: "", 814 mode: "",
815 timeout: 3000, 815 timeout: 3000,
816 text: "", 816 text: "",
817 loading: false, 817 loading: false,
818 color: "", 818 color: "",
819 date: null, 819 date: null,
820 search: "", 820 search: "",
821 show: true, 821 show: true,
822 addCourseDetailDialog: false, 822 addCourseDetailDialog: false,
823 showSearch: false, 823 showSearch: false,
824 showLoader: false, 824 showLoader: false,
825 editCourseDetailDialog: false, 825 editCourseDetailDialog: false,
826 editChapterDetailDialog: false, 826 editChapterDetailDialog: false,
827 viewProfileGallery: false, 827 viewProfileGallery: false,
828 valid: true, 828 valid: true,
829 editLoading: false, 829 editLoading: false,
830 addclass: [], 830 addclass: [],
831 courseData: [], 831 courseData: [],
832 addSection: [], 832 addSection: [],
833 getCourse: {}, 833 getCourse: {},
834 finds: [{ value: "" }], 834 finds: [{ value: "" }],
835 findsChapterPoint: [{ value: "" }], 835 findsChapterPoint: [{ value: "" }],
836 updates: [], 836 updates: [],
837 youTubeLink: {}, 837 youTubeLink: {},
838 addCourseDetail: { 838 addCourseDetail: {
839 chapters: [ 839 chapters: [
840 { 840 {
841 chapterName: "", 841 chapterName: "",
842 description: "", 842 description: "",
843 chapterPoints: [], 843 chapterPoints: [],
844 }, 844 },
845 ], 845 ],
846 }, 846 },
847 chapters: [], 847 chapters: [],
848 pagination: { 848 pagination: {
849 rowsPerPage: 10, 849 rowsPerPage: 10,
850 }, 850 },
851 editFiles: [], 851 editFiles: [],
852 files: [], 852 files: [],
853 courseData: [], 853 courseData: [],
854 token: "", 854 token: "",
855 courseId: "", 855 courseId: "",
856 clsssRules: [(v) => !!v || " Class is required"], 856 clsssRules: [(v) => !!v || " Class is required"],
857 courseRules: [(v) => !!v || " Course is required"], 857 courseRules: [(v) => !!v || " Course is required"],
858 chapterNameRules: [(v) => !!v || " Tilte is required"], 858 chapterNameRules: [(v) => !!v || " Tilte is required"],
859 descriptionRules: [(v) => !!v || " Description is required"], 859 descriptionRules: [(v) => !!v || " Description is required"],
860 headers: [ 860 headers: [
861 { 861 {
862 align: "", 862 align: "",
863 text: "No", 863 text: "No",
864 sortable: false, 864 sortable: false,
865 value: "index", 865 value: "index",
866 }, 866 },
867 { 867 {
868 text: "Class Name", 868 text: "Class Name",
869 value: "classNum", 869 value: "classNum",
870 sortable: false, 870 sortable: false,
871 align: "center", 871 align: "center",
872 }, 872 },
873 { 873 {
874 text: "Course Name", 874 text: "Course Name",
875 value: "courseName", 875 value: "courseName",
876 sortable: false, 876 sortable: false,
877 align: "center", 877 align: "center",
878 }, 878 },
879 { text: "Action", value: "", sortable: false, align: "center" }, 879 { text: "Action", value: "", sortable: false, align: "center" },
880 ], 880 ],
881 CourseDetailsList: [], 881 CourseDetailsList: [],
882 editedIndex: -1, 882 editedIndex: -1,
883 editedItem: {}, 883 editedItem: {},
884 editedCourse: {}, 884 editedCourse: {},
885 editChapter: { 885 editChapter: {
886 chapterPoints: [], 886 chapterPoints: [],
887 }, 887 },
888 index: "", 888 index: "",
889 addChapterItem: {}, 889 addChapterItem: {},
890 addChapterItemObj: {}, 890 addChapterItemObj: {},
891 addChapterDialog: false, 891 addChapterDialog: false,
892 showData: false, 892 showData: false,
893 }), 893 }),
894 methods: { 894 methods: {
895 openLink(url) { 895 openLink(url) {
896 window.open(url, "_blank"); 896 window.open(url, "_blank");
897 }, 897 },
898 getCourses(classId) { 898 getCourses(classId) {
899 this.showLoader = true; 899 this.showLoader = true;
900 this.CourseDetailsList = [];
901 this.getCourse.courseId = "";
900 this.CourseDetailsList = []; 902 http()
901 this.getCourse.courseId = ""; 903 .get("/getCourseesList", {
902 http() 904 params: {
903 .get("/getCourseesList", { 905 classId: classId,
904 params: { 906 },
905 classId: classId, 907 })
906 }, 908 .then((response) => {
907 }) 909 this.editChapter.courseId = "";
908 .then((response) => { 910 this.courseData = response.data.data;
909 this.editChapter.courseId = ""; 911 // console.log("this.courseData", this.courseData);
910 this.courseData = response.data.data; 912 this.showLoader = false;
911 // console.log("this.courseData", this.courseData); 913 })
912 this.showLoader = false; 914 .catch((err) => {
913 }) 915 // console.log("err====>", err);
914 .catch((err) => { 916 this.showLoader = false;
917 this.snackbar = true;
918 this.color = "error";
919 this.text = error.response.data.message;
915 // console.log("err====>", err); 920 });
916 this.showLoader = false; 921 },
917 this.snackbar = true; 922 getCourseDetailsList() {
918 this.color = "error"; 923 this.showLoader = true;
919 this.text = error.response.data.message; 924 http()
920 }); 925 .get("/getParticularCourseDetail", {
921 }, 926 params: {
922 getCourseDetailsList() { 927 courseId: this.getCourse.courseId,
923 this.showLoader = true; 928 },
924 http() 929 })
925 .get("/getParticularCourseDetail", { 930 .then((response) => {
926 params: { 931 this.CourseDetailsList = response.data.data;
927 courseId: this.getCourse.courseId, 932 if (this.CourseDetailsList.length === 0) {
928 }, 933 this.showLoader = false;
929 }) 934 this.snackbar = true;
930 .then((response) => { 935 this.text = "Data not found!";
931 this.CourseDetailsList = response.data.data; 936 this.color = "error";
932 if (this.CourseDetailsList.length === 0) { 937 return;
933 this.showLoader = false; 938 }
934 this.snackbar = true; 939 this.showData = true;
935 this.text = "Data not found!"; 940 if (response.data.data[0]) {
936 this.color = "error"; 941 this.chapters = response.data.data[0].chapters;
937 return; 942 }
938 } 943 this.showLoader = false;
939 this.showData = true; 944 })
940 if (response.data.data[0]) { 945 .catch((error) => {
941 this.chapters = response.data.data[0].chapters; 946 // console.log("err====>", err);
942 } 947 this.showLoader = false;
943 this.showLoader = false; 948 if (error.response.status === 401) {
944 }) 949 this.$router.replace({ path: "/" });
945 .catch((error) => { 950 this.$store.dispatch("setToken", null);
946 // console.log("err====>", err); 951 this.$store.dispatch("Id", null);
947 this.showLoader = false; 952 }
948 if (error.response.status === 401) { 953 });
949 this.$router.replace({ path: "/" }); 954 },
950 this.$store.dispatch("setToken", null); 955 courseTableRow(id) {
951 this.$store.dispatch("Id", null); 956 this.courseId = id;
952 } 957 },
953 }); 958 addChapters(item) {
954 }, 959 this.editedIndex = this.CourseDetailsList.indexOf(item);
955 courseTableRow(id) { 960 this.addChapterItemObj = Object.assign({}, item);
956 this.courseId = id; 961 this.addChapterItem.courseDetailId = this.addChapterItemObj._id;
957 }, 962 this.addChapterDialog = true;
958 addChapters(item) { 963 },
959 this.editedIndex = this.CourseDetailsList.indexOf(item); 964 submitChapter() {
960 this.addChapterItemObj = Object.assign({}, item); 965 // console.log("addChapterItem", this.addChapterItem);
961 this.addChapterItem.courseDetailId = this.addChapterItemObj._id; 966 this.addChapterItem.chapterPoints = [];
962 this.addChapterDialog = true; 967 for (let i = 0; i < this.findsChapterPoint.length; i++) {
963 }, 968 this.addChapterItem.chapterPoints.push(this.findsChapterPoint[i].value);
964 submitChapter() { 969 }
965 // console.log("addChapterItem", this.addChapterItem); 970 this.addChapterItem.uploadPdf = this.pdfFile;
966 this.addChapterItem.chapterPoints = []; 971 this.addChapterItem.uploadPpt = this.pptFile;
967 for (let i = 0; i < this.findsChapterPoint.length; i++) { 972 this.addChapterItem.fileName = this.pdfFileName;
968 this.addChapterItem.chapterPoints.push(this.findsChapterPoint[i].value); 973 this.loading = true;
969 } 974 http()
970 this.addChapterItem.uploadPdf = this.pdfFile; 975 .put("/addChapters", this.addChapterItem)
971 this.addChapterItem.uploadPpt = this.pptFile; 976 .then((response) => {
972 this.addChapterItem.fileName = this.pdfFileName; 977 this.addChapterDialog = false;
973 this.loading = true; 978 this.loading = false;
974 http() 979 this.snackbar = true;
975 .put("/addChapters", this.addChapterItem) 980 this.text = response.data.message;
976 .then((response) => { 981 this.color = "green";
977 this.addChapterDialog = false; 982 this.addChapterItem = {};
978 this.loading = false; 983 this.removeChapterPoint();
979 this.snackbar = true; 984 this.getCourseDetailsList();
980 this.text = response.data.message; 985 })
981 this.color = "green"; 986 .catch((error) => {
982 this.addChapterItem = {}; 987 this.snackbar = true;
983 this.removeChapterPoint(); 988 this.text = error.response.data.message;
984 this.getCourseDetailsList(); 989 this.color = "error";
985 }) 990 this.loading = false;
986 .catch((error) => { 991 });
987 this.snackbar = true; 992 },
988 this.text = error.response.data.message; 993 profile(item) {
989 this.color = "error"; 994 // console.log("chaper - ", item);
990 this.loading = false; 995 this.editedIndex = this.chapters.indexOf(item);
991 }); 996 this.editedItem = Object.assign({}, item);
992 }, 997 this.viewProfileGallery = true;
993 profile(item) { 998 },
994 // console.log("chaper - ", item); 999 editItem(item) {
995 this.editedIndex = this.chapters.indexOf(item); 1000 this.editedIndex = this.CourseDetailsList.indexOf(item);
996 this.editedItem = Object.assign({}, item); 1001 this.editedCourse = Object.assign({}, item);
997 this.viewProfileGallery = true; 1002 this.editCourseDetailDialog = true;
998 }, 1003 },
999 editItem(item) { 1004 editChapterItem(item) {
1000 this.editedIndex = this.CourseDetailsList.indexOf(item); 1005 this.editedIndex = this.chapters.indexOf(item);
1001 this.editedCourse = Object.assign({}, item); 1006 this.editChapter = Object.assign({}, item);
1002 this.editCourseDetailDialog = true; 1007 this.updates = [];
1003 }, 1008 for (let i = 0; i < this.editChapter.chapterPoints.length; i++) {
1004 editChapterItem(item) { 1009 this.updates.push({ value: this.editChapter.chapterPoints[i] });
1005 this.editedIndex = this.chapters.indexOf(item); 1010 }
1006 this.editChapter = Object.assign({}, item); 1011 this.editChapterDetailDialog = true;
1007 this.updates = []; 1012 },
1008 for (let i = 0; i < this.editChapter.chapterPoints.length; i++) { 1013 deleteItem(item) {
1009 this.updates.push({ value: this.editChapter.chapterPoints[i] }); 1014 let deleteGallery = {
1010 } 1015 courseDetailId: item._id,
1011 this.editChapterDetailDialog = true; 1016 };
1012 }, 1017 http()
1013 deleteItem(item) { 1018 .delete(
1014 let deleteGallery = { 1019 "/deleteCourseDetail",
1015 courseDetailId: item._id, 1020 confirm("Are you sure you want to delete this?") && {
1016 }; 1021 params: deleteGallery,
1017 http() 1022 headers: {
1018 .delete( 1023 Authorization: "Bearer " + this.token,
1019 "/deleteCourseDetail", 1024 },
1020 confirm("Are you sure you want to delete this?") && { 1025 }
1021 params: deleteGallery, 1026 )
1022 headers: { 1027 .then((response) => {
1023 Authorization: "Bearer " + this.token, 1028 this.snackbar = true;
1024 }, 1029 this.text = "Successfully delete Course Details";
1025 } 1030 this.color = "green";
1026 ) 1031 this.getCourseDetailsList();
1027 .then((response) => { 1032 })
1028 this.snackbar = true; 1033 .catch((error) => {
1029 this.text = "Successfully delete Course Details"; 1034 // console.log(error);
1030 this.color = "green"; 1035 this.snackbar = true;
1031 this.getCourseDetailsList(); 1036 this.text = error.response.data.message;
1032 }) 1037 this.color = "error";
1033 .catch((error) => { 1038 });
1034 // console.log(error); 1039 },
1035 this.snackbar = true; 1040 deleteChapters(item) {
1036 this.text = error.response.data.message; 1041 // console.log("item", item);
1037 this.color = "error"; 1042 let deleteChapters = {
1038 }); 1043 courseDetailId: this.courseId,
1039 }, 1044 chapterId: item._id,
1040 deleteChapters(item) { 1045 };
1041 // console.log("item", item); 1046 http()
1042 let deleteChapters = { 1047 .put(
1043 courseDetailId: this.courseId, 1048 "/deleteChapters",
1044 chapterId: item._id, 1049 confirm("Are you sure you want to delete this?") && deleteChapters
1045 }; 1050 )
1046 http() 1051 .then((response) => {
1047 .put( 1052 this.snackbar = true;
1048 "/deleteChapters", 1053 this.text = "Successfully delete Chapters";
1049 confirm("Are you sure you want to delete this?") && deleteChapters 1054 this.color = "green";
1050 ) 1055 this.getCourseDetailsList();
1051 .then((response) => { 1056 })
1052 this.snackbar = true; 1057 .catch((error) => {
1053 this.text = "Successfully delete Chapters"; 1058 // console.log(error);
1054 this.color = "green"; 1059 this.snackbar = true;
1055 this.getCourseDetailsList(); 1060 this.text = error.response.data.message;
1056 }) 1061 this.color = "error";
1057 .catch((error) => { 1062 });
1058 // console.log(error); 1063 },
1059 this.snackbar = true; 1064 close() {
1060 this.text = error.response.data.message; 1065 this.editCourseDetailDialog = false;
1061 this.color = "error"; 1066 },
1062 }); 1067 closeProfileGallery() {
1063 }, 1068 this.viewProfileGallery = false;
1064 close() { 1069 },
1065 this.editCourseDetailDialog = false; 1070 submit() {
1066 }, 1071 let chapters = [];
1067 closeProfileGallery() { 1072 var chapterPoints = [];
1068 this.viewProfileGallery = false; 1073 for (let i = 0; i < this.finds.length; i++) {
1069 }, 1074 chapterPoints.push(this.finds[i].value);
1070 submit() { 1075 // console.log("this.finds[i].value", this.finds[i].value);
1071 let chapters = []; 1076 chapters = [
1072 var chapterPoints = []; 1077 {
1073 for (let i = 0; i < this.finds.length; i++) { 1078 chapterName: this.addCourseDetail.chapterName,
1074 chapterPoints.push(this.finds[i].value); 1079 description: this.addCourseDetail.description,
1075 // console.log("this.finds[i].value", this.finds[i].value); 1080 chapterPoints: chapterPoints,
1076 chapters = [ 1081 uploadPdf: this.pdfFile,
1077 { 1082 uploadPpt: this.pptFile,
1078 chapterName: this.addCourseDetail.chapterName, 1083 fileName: this.pdfFileName,
1079 description: this.addCourseDetail.description, 1084 },
1080 chapterPoints: chapterPoints, 1085 ];
1081 uploadPdf: this.pdfFile, 1086 }
1082 uploadPpt: this.pptFile, 1087 if (this.$refs.form.validate()) {
1083 fileName: this.pdfFileName, 1088 // console.log("this.addCourseDetail", this.addCourseDetail);
1084 }, 1089 var courseDetailsData = {
1085 ]; 1090 classId: this.addCourseDetail.classId,
1086 } 1091 courseId: this.addCourseDetail.courseId,
1087 if (this.$refs.form.validate()) { 1092 chapters: chapters,
1088 // console.log("this.addCourseDetail", this.addCourseDetail); 1093 };
1089 var courseDetailsData = { 1094 this.loading = true;
1090 classId: this.addCourseDetail.classId, 1095 http()
1091 courseId: this.addCourseDetail.courseId, 1096 .post("/createCourseDetail", courseDetailsData)
1092 chapters: chapters, 1097 .then((response) => {
1093 }; 1098 this.addCourseDetailDialog = false;
1094 this.loading = true; 1099 this.loading = false;
1095 http() 1100 this.snackbar = true;
1096 .post("/createCourseDetail", courseDetailsData) 1101 this.text = response.data.message;
1097 .then((response) => { 1102 this.color = "green";
1098 this.addCourseDetailDialog = false; 1103 // this.clear();
1099 this.loading = false; 1104 this.trigger = "reset";
1100 this.snackbar = true; 1105 this.emptyPdf = "reset";
1101 this.text = response.data.message; 1106 http()
1102 this.color = "green"; 1107 .get("/getParticularCourseDetail", {
1103 // this.clear(); 1108 params: {
1104 this.trigger = "reset"; 1109 courseId: this.addCourseDetail.courseId,
1105 this.emptyPdf = "reset"; 1110 },
1106 http() 1111 })
1107 .get("/getParticularCourseDetail", { 1112 .then((response) => {
1108 params: { 1113 this.CourseDetailsList = response.data.data;
1109 courseId: this.addCourseDetail.courseId, 1114 if (this.CourseDetailsList.length === 0) {
1110 }, 1115 this.showLoader = false;
1111 }) 1116 this.snackbar = true;
1112 .then((response) => { 1117 this.text = "Data not found!";
1113 this.CourseDetailsList = response.data.data; 1118 this.color = "error";
1114 if (this.CourseDetailsList.length === 0) { 1119 return;
1115 this.showLoader = false; 1120 }
1116 this.snackbar = true; 1121 this.showData = true;
1117 this.text = "Data not found!"; 1122 if (response.data.data[0]) {
1118 this.color = "error"; 1123 this.chapters = response.data.data[0].chapters;
1119 return; 1124 }
1120 } 1125 this.showLoader = false;
1121 this.showData = true; 1126 })
1122 if (response.data.data[0]) { 1127 .catch((error) => {
1123 this.chapters = response.data.data[0].chapters; 1128 // console.log("err====>", err);
1124 } 1129 this.showLoader = false;
1125 this.showLoader = false; 1130 if (error.response.status === 401) {
1126 }) 1131 this.$router.replace({ path: "/" });
1127 .catch((error) => { 1132 this.$store.dispatch("setToken", null);
1128 // console.log("err====>", err); 1133 this.$store.dispatch("Id", null);
1129 this.showLoader = false; 1134 }
1130 if (error.response.status === 401) { 1135 });
1131 this.$router.replace({ path: "/" }); 1136 this.removeAddFind();
1132 this.$store.dispatch("setToken", null); 1137 })
1133 this.$store.dispatch("Id", null); 1138 .catch((error) => {
1134 } 1139 this.snackbar = true;
1135 }); 1140 this.text = error.response.data.message;
1136 this.removeAddFind(); 1141 this.color = "error";
1137 }) 1142 this.loading = false;
1138 .catch((error) => { 1143 });
1139 this.snackbar = true; 1144 }
1140 this.text = error.response.data.message; 1145 },
1141 this.color = "error"; 1146 clear() {
1142 this.loading = false; 1147 this.$refs.form.reset();
1143 }); 1148 },
1144 } 1149 saveChapter() {
1145 }, 1150 this.editedItem.courseDetailId = this.editedItem._id;
1146 clear() { 1151 // console.log("this.updates", this.updates);
1147 this.$refs.form.reset(); 1152 var chapterPoints = [];
1148 }, 1153 for (let i = 0; i < this.updates.length; i++) {
1149 saveChapter() { 1154 chapterPoints.push(this.updates[i].value);
1150 this.editedItem.courseDetailId = this.editedItem._id; 1155 }
1151 // console.log("this.updates", this.updates); 1156 var updateData = {
1152 var chapterPoints = []; 1157 courseDetailId: this.courseId,
1153 for (let i = 0; i < this.updates.length; i++) { 1158 chapterId: this.editChapter._id,
1154 chapterPoints.push(this.updates[i].value); 1159 chapterName: this.editChapter.chapterName,
1155 } 1160 description: this.editChapter.description,
1156 var updateData = { 1161 chapterPoints: chapterPoints,
1157 courseDetailId: this.courseId, 1162 uploadPdf: this.pdfFile,
1158 chapterId: this.editChapter._id, 1163 uploadPpt: this.pptFile,
1159 chapterName: this.editChapter.chapterName, 1164 fileName: this.pdfFileName,
1160 description: this.editChapter.description, 1165 };
1161 chapterPoints: chapterPoints, 1166 this.editLoading = true;
1162 uploadPdf: this.pdfFile, 1167 http()
1163 uploadPpt: this.pptFile, 1168 .put("/updateChapters", updateData)
1164 fileName: this.pdfFileName, 1169 .then((response) => {
1165 }; 1170 this.editChapterDetailDialog = false;
1166 this.editLoading = true; 1171 this.snackbar = true;
1167 http() 1172 this.text = response.data.message;
1168 .put("/updateChapters", updateData) 1173 this.color = "green";
1169 .then((response) => { 1174 this.editLoading = false;
1170 this.editChapterDetailDialog = false; 1175 // this.removeUpdatePoints();
1171 this.snackbar = true; 1176 this.trigger = "reset";
1172 this.text = response.data.message; 1177 this.emptyPdf = "reset";
1173 this.color = "green"; 1178 http()
1174 this.editLoading = false; 1179 .get("/getParticularCourseDetail", {
1175 // this.removeUpdatePoints(); 1180 params: {
1176 this.trigger = "reset"; 1181 courseId: this.getCourse.courseId,
1177 this.emptyPdf = "reset"; 1182 },
1178 http() 1183 })
1179 .get("/getParticularCourseDetail", { 1184 .then((response) => {
1180 params: { 1185 this.CourseDetailsList = response.data.data;
1181 courseId: this.getCourse.courseId, 1186 if (this.CourseDetailsList.length === 0) {
1182 }, 1187 this.showLoader = false;
1183 }) 1188 this.snackbar = true;
1184 .then((response) => { 1189 this.text = "Data not found!";
1185 this.CourseDetailsList = response.data.data; 1190 this.color = "error";
1186 if (this.CourseDetailsList.length === 0) { 1191 return;
1187 this.showLoader = false; 1192 }
1188 this.snackbar = true; 1193 this.showData = true;
1189 this.text = "Data not found!"; 1194 if (response.data.data[0]) {
1190 this.color = "error"; 1195 this.chapters = response.data.data[0].chapters;
1191 return; 1196 }
1192 } 1197 this.showLoader = false;
1193 this.showData = true; 1198 })
1194 if (response.data.data[0]) { 1199 .catch((error) => {
1195 this.chapters = response.data.data[0].chapters; 1200 // console.log("err====>", err);
1196 } 1201 this.showLoader = false;
1197 this.showLoader = false; 1202 if (error.response.status === 401) {
1198 }) 1203 this.$router.replace({ path: "/" });
1199 .catch((error) => { 1204 this.$store.dispatch("setToken", null);
1200 // console.log("err====>", err); 1205 this.$store.dispatch("Id", null);
1201 this.showLoader = false; 1206 }
1202 if (error.response.status === 401) { 1207 });
1203 this.$router.replace({ path: "/" }); 1208 })
1204 this.$store.dispatch("setToken", null); 1209 .catch((error) => {
1205 this.$store.dispatch("Id", null); 1210 this.editLoading = false;
1206 } 1211 this.snackbar = true;
1207 }); 1212 this.text = error.response.data.message;
1208 }) 1213 this.color = "error";
1209 .catch((error) => { 1214 });
1210 this.editLoading = false; 1215 },
1211 this.snackbar = true; 1216 save() {
1212 this.text = error.response.data.message; 1217 var updateData = {
1213 this.color = "error"; 1218 courseDetailId: this.editedCourse._id,
1214 }); 1219 courseId: this.editedCourse.courseId._id,
1215 }, 1220 classId: this.editedCourse.classId._id,
1216 save() { 1221 };
1217 var updateData = { 1222 this.editLoading = true;
1218 courseDetailId: this.editedCourse._id, 1223 http()
1219 courseId: this.editedCourse.courseId._id, 1224 .put("/updateCourseDetail", updateData)
1220 classId: this.editedCourse.classId._id, 1225 .then((response) => {
1221 }; 1226 this.getCourseDetailsList();
1222 this.editLoading = true; 1227 this.editCourseDetailDialog = false;
1223 http() 1228 this.snackbar = true;
1224 .put("/updateCourseDetail", updateData) 1229 this.text = response.data.message;
1225 .then((response) => { 1230 this.color = "green";
1226 this.getCourseDetailsList(); 1231 this.editLoading = false;
1227 this.editCourseDetailDialog = false; 1232 // this.editChapterPointName = "";
1228 this.snackbar = true; 1233 this.editFiles = [];
1229 this.text = response.data.message; 1234 })
1230 this.color = "green"; 1235 .catch((error) => {
1231 this.editLoading = false; 1236 this.editLoading = false;
1232 // this.editChapterPointName = ""; 1237 this.snackbar = true;
1233 this.editFiles = []; 1238 this.text = error.response.data.message;
1234 }) 1239 this.color = "error";
1235 .catch((error) => { 1240 });
1236 this.editLoading = false; 1241 },
1237 this.snackbar = true; 1242 getAllClasses() {
1238 this.text = error.response.data.message; 1243 http()
1239 this.color = "error"; 1244 .get("/getClassesList", {
1240 }); 1245 headers: { Authorization: "Bearer " + this.token },
1241 }, 1246 })
1242 getAllClasses() { 1247 .then((response) => {
1243 http() 1248 this.addclass = response.data.data;
1244 .get("/getClassesList", { 1249 })
1245 headers: { Authorization: "Bearer " + this.token }, 1250 .catch((err) => {
1246 }) 1251 // console.log("err====>", err);
1247 .then((response) => { 1252 });
1248 this.addclass = response.data.data; 1253 },
1249 }) 1254 removeChapterPoint: function () {
1250 .catch((err) => { 1255 this.findsChapterPoint = [{ value: "" }];
1251 // console.log("err====>", err); 1256 },
1252 }); 1257 removeAddFind: function () {
1253 }, 1258 this.finds = [{ value: "" }];
1254 removeChapterPoint: function () { 1259 },
1255 this.findsChapterPoint = [{ value: "" }]; 1260 addFind: function () {
1256 }, 1261 this.finds.push({ value: "" });
1257 removeAddFind: function () { 1262 },
1258 this.finds = [{ value: "" }]; 1263 addChapterPoint: function () {
1259 }, 1264 this.findsChapterPoint.push({ value: "" });
1260 addFind: function () { 1265 },
1261 this.finds.push({ value: "" }); 1266 update: function () {
1262 }, 1267 this.updates.push({ value: "" });
1263 addChapterPoint: function () { 1268 },
1264 this.findsChapterPoint.push({ value: "" }); 1269 // removeUpdatePoints: function() {
1265 }, 1270 // this.updates = [{ value: "" }];
1266 update: function () { 1271 // },
1267 this.updates.push({ value: "" }); 1272 deleteFind: function (index) {
1268 }, 1273 this.finds.splice(index, 1);
1269 // removeUpdatePoints: function() { 1274 if (index === 0) this.addFind();
1270 // this.updates = [{ value: "" }]; 1275 },
1271 // }, 1276 deleteChapterPoint: function (index) {
1272 deleteFind: function (index) { 1277 this.findsChapterPoint.splice(index, 1);
1273 this.finds.splice(index, 1); 1278 if (index === 0) this.addChapterPoint();
1274 if (index === 0) this.addFind(); 1279 },
1275 }, 1280 deleteUpdate: function (index) {
1276 deleteChapterPoint: function (index) { 1281 this.updates.splice(index, 1);
1277 this.findsChapterPoint.splice(index, 1); 1282 if (index === 0) this.update();
1278 if (index === 0) this.addChapterPoint(); 1283 },
1279 }, 1284 deleteUrl: function (index, youTubelinkId, id) {
1280 deleteUpdate: function (index) { 1285 this.editChapter.chapterPoints.splice(index, 1);
1281 this.updates.splice(index, 1); 1286 if (index === 0) this.update();
1282 if (index === 0) this.update(); 1287 },
1283 }, 1288 displaySearch() {
1284 deleteUrl: function (index, youTubelinkId, id) { 1289 this.show = false;
1285 this.editChapter.chapterPoints.splice(index, 1); 1290 this.showSearch = true;
1286 if (index === 0) this.update(); 1291 },
1287 }, 1292 closeSearch() {
1288 displaySearch() { 1293 this.showSearch = false;
1289 this.show = false; 1294 this.show = true;
1290 this.showSearch = true; 1295 this.search = "";
1291 }, 1296 },
1292 closeSearch() { 1297 },
1293 this.showSearch = false; 1298 mounted() {
1294 this.show = true; 1299 this.token = this.$store.state.token;
1295 this.search = ""; 1300 this.getAllClasses();
1296 }, 1301 },
1297 }, 1302 };
1298 mounted() { 1303 </script>
src/pages/Course/courseDiscussion.vue
Diff comments   View file @8b7976c
1 <template> 1 <template>
2 <v-container fluid class="body-color"> 2 <v-container fluid class="body-color">
3 <v-dialog v-model="editDialog" max-width="600px" scrollable persistent> 3 <v-dialog v-model="editDialog" max-width="600px" scrollable persistent>
4 <v-card flat class="card-style pa-2" dark> 4 <v-card flat class="card-style pa-2" dark>
5 <v-layout> 5 <v-layout>
6 <v-flex xs12> 6 <v-flex xs12>
7 <label class="title text-xs-center">Edit Course Discussion</label> 7 <label class="title text-xs-center">Edit Course Discussion</label>
8 <v-icon size="24" class="right" @click="editDialog = false">cancel</v-icon> 8 <v-icon size="24" class="right" @click="editDialog = false">cancel</v-icon>
9 </v-flex> 9 </v-flex>
10 </v-layout> 10 </v-layout>
11 <v-card-text> 11 <v-card-text>
12 <v-form ref="form"> 12 <v-form ref="form">
13 <v-container fluid> 13 <v-container fluid>
14 <v-layout> 14 <v-layout>
15 <v-flex xs12 class="text-xs-center text-sm-center text-md-center text-lg-center"> 15 <v-flex xs12 class="text-xs-center text-sm-center text-md-center text-lg-center">
16 <v-avatar size="100px" v-if="!editedItem.attachementUrl && !editImageUrl"> 16 <v-avatar size="100px" v-if="!editedItem.attachementUrl && !editImageUrl">
17 <img src="/static/icon/user.png" /> 17 <img src="/static/icon/user.png" />
18 </v-avatar> 18 </v-avatar>
19 <img 19 <img
20 :src="editedItem.attachementUrl" 20 :src="editedItem.attachementUrl"
21 v-else-if="editedItem.attachementUrl && !editImageUrl" 21 v-else-if="editedItem.attachementUrl && !editImageUrl"
22 height="150" 22 height="150"
23 style="border-radius:50%; width:150px" 23 style="border-radius:50%; width:150px"
24 /> 24 />
25 <img 25 <img
26 v-if="editImageUrl" 26 v-if="editImageUrl"
27 :src="editImageUrl" 27 :src="editImageUrl"
28 style="border-radius:50%; width:150px;height:150px" 28 style="border-radius:50%; width:150px;height:150px"
29 /> 29 />
30 <input 30 <input
31 type="file" 31 type="file"
32 style="display: none" 32 style="display: none"
33 ref="editDataImage" 33 ref="editDataImage"
34 accept="image/*" 34 accept="image/*"
35 @change="onEditFilePicked" 35 @change="onEditFilePicked"
36 /> 36 />
37 </v-flex> 37 </v-flex>
38 </v-layout> 38 </v-layout>
39 <v-layout wrap> 39 <v-layout wrap>
40 <v-flex xs12 sm12> 40 <v-flex xs12 sm12>
41 <v-layout> 41 <v-layout>
42 <v-flex xs4 sm5 class="pt-4 subheading"> 42 <v-flex xs4 sm5 class="pt-4 subheading">
43 <label class="right hidden-xs-only hidden-sm-only">Select Class:</label> 43 <label class="right hidden-xs-only hidden-sm-only">Select Class:</label>
44 <label class="right hidden-lg-only hidden-md-only hidden-xl-only">Class:</label> 44 <label class="right hidden-lg-only hidden-md-only hidden-xl-only">Class:</label>
45 </v-flex> 45 </v-flex>
46 <v-flex xs8 sm7 class="ml-3"> 46 <v-flex xs8 sm7 class="ml-3">
47 <v-select 47 <v-select
48 :items="addclass" 48 :items="addclass"
49 v-model="editedItem.classId" 49 v-model="editedItem.classId"
50 item-text="classNum" 50 item-text="classNum"
51 item-value="_id" 51 item-value="_id"
52 name="Select Class" 52 name="Select Class"
53 required 53 required
54 @change="editGetCourses(editedItem.classId)" 54 @change="editGetCourses(editedItem.classId)"
55 ></v-select> 55 ></v-select>
56 </v-flex> 56 </v-flex>
57 </v-layout> 57 </v-layout>
58 <v-layout> 58 <v-layout>
59 <v-flex xs12 sm12> 59 <v-flex xs12 sm12>
60 <v-layout> 60 <v-layout>
61 <v-flex xs4 sm5 class="pt-4 subheading"> 61 <v-flex xs4 sm5 class="pt-4 subheading">
62 <label class="right">Select Course:</label> 62 <label class="right">Select Course:</label>
63 </v-flex> 63 </v-flex>
64 <v-flex xs8 sm7 class="ml-3"> 64 <v-flex xs8 sm7 class="ml-3">
65 <v-select 65 <v-select
66 :items="editCourseData" 66 :items="editCourseData"
67 label="Select Course" 67 label="Select Course"
68 v-model="editedItem.courseId" 68 v-model="editedItem.courseId"
69 item-text="courseName" 69 item-text="courseName"
70 item-value="_id" 70 item-value="_id"
71 required 71 required
72 class="ml-2" 72 class="ml-2"
73 ></v-select> 73 ></v-select>
74 </v-flex> 74 </v-flex>
75 </v-layout> 75 </v-layout>
76 </v-flex> 76 </v-flex>
77 </v-layout> 77 </v-layout>
78 <v-layout> 78 <v-layout>
79 <v-flex xs4 sm5 class="pt-4 subheading"> 79 <v-flex xs4 sm5 class="pt-4 subheading">
80 <label class="right">Subject:</label> 80 <label class="right">Subject:</label>
81 </v-flex> 81 </v-flex>
82 <v-flex xs8 sm7 class="ml-3"> 82 <v-flex xs8 sm7 class="ml-3">
83 <v-text-field v-model="editedItem.subject" type="text" required></v-text-field> 83 <v-text-field v-model="editedItem.subject" type="text" required></v-text-field>
84 </v-flex> 84 </v-flex>
85 </v-layout> 85 </v-layout>
86 <v-layout> 86 <v-layout>
87 <v-flex xs4 sm5 class="pt-4 subheading"> 87 <v-flex xs4 sm5 class="pt-4 subheading">
88 <label class="right">Description:</label> 88 <label class="right">Description:</label>
89 </v-flex> 89 </v-flex>
90 <v-flex xs8 sm7 class="ml-3"> 90 <v-flex xs8 sm7 class="ml-3">
91 <v-text-field v-model="editedItem.description" type="text" required></v-text-field> 91 <v-text-field v-model="editedItem.description" type="text" required></v-text-field>
92 </v-flex> 92 </v-flex>
93 </v-layout> 93 </v-layout>
94 <v-layout> 94 <v-layout>
95 <v-flex xs4 sm5 class="pt-4 subheading"> 95 <v-flex xs4 sm5 class="pt-4 subheading">
96 <label class="right hidden-xs-only hidden-sm-only">Upload Image:</label> 96 <label class="right hidden-xs-only hidden-sm-only">Upload Image:</label>
97 <label class="right hidden-lg-only hidden-md-only hidden-xl-only">Upload:</label> 97 <label class="right hidden-lg-only hidden-md-only hidden-xl-only">Upload:</label>
98 </v-flex> 98 </v-flex>
99 <v-flex xs8 sm7 class="ml-3"> 99 <v-flex xs8 sm7 class="ml-3">
100 <v-text-field 100 <v-text-field
101 @click="pickEditFile" 101 @click="pickEditFile"
102 v-model="editImageName" 102 v-model="editImageName"
103 append-icon="attach_file" 103 append-icon="attach_file"
104 ></v-text-field> 104 ></v-text-field>
105 </v-flex> 105 </v-flex>
106 </v-layout> 106 </v-layout>
107 </v-flex> 107 </v-flex>
108 </v-layout> 108 </v-layout>
109 <v-layout> 109 <v-layout>
110 <v-flex xs12 sm12 class="px-0 mx-0"> 110 <v-flex xs12 sm12 class="px-0 mx-0">
111 <v-layout class="right"> 111 <v-layout class="right">
112 <v-btn @click="save" round dark :loading="editLoading" class="add-button">Save</v-btn> 112 <v-btn @click="save" round dark :loading="editLoading" class="add-button">Save</v-btn>
113 </v-layout> 113 </v-layout>
114 </v-flex> 114 </v-flex>
115 </v-layout> 115 </v-layout>
116 </v-container> 116 </v-container>
117 </v-form> 117 </v-form>
118 </v-card-text> 118 </v-card-text>
119 </v-card> 119 </v-card>
120 </v-dialog> 120 </v-dialog>
121 <!-- ****** DIsCUSIION TABLE ****** --> 121 <!-- ****** DIsCUSIION TABLE ****** -->
122 <v-toolbar color="transparent" flat> 122 <v-toolbar color="transparent" flat>
123 <v-spacer></v-spacer> 123 <v-spacer></v-spacer>
124 <v-flex xs12 sm4 md2> 124 <v-flex xs12 sm4 md2>
125 <v-select 125 <v-select
126 small 126 small
127 :items="addclass" 127 :items="addclass"
128 label="Select Class" 128 label="Select Class"
129 v-model="getSelectedData.classId" 129 v-model="getSelectedData.classId"
130 item-text="classNum" 130 item-text="classNum"
131 item-value="_id" 131 item-value="_id"
132 name="Select Class" 132 name="Select Class"
133 @change="getCourses(getSelectedData.classId)" 133 @change="getCourses(getSelectedData.classId)"
134 class="mr-2" 134 class="mr-2"
135 required 135 required
136 ></v-select> 136 ></v-select>
137 </v-flex> 137 </v-flex>
138 <v-flex xs12 sm4 md2> 138 <v-flex xs12 sm4 md2>
139 <v-select 139 <v-select
140 :items="courseData" 140 :items="courseData"
141 label="Select Course" 141 label="Select Course"
142 v-model="getSelectedData.courseId" 142 v-model="getSelectedData.courseId"
143 item-text="courseName" 143 item-text="courseName"
144 item-value="_id" 144 item-value="_id"
145 required 145 required
146 class="ml-2" 146 class="ml-2"
147 @change="getCourseDiscussionTable(getSelectedData.courseId)" 147 @change="getCourseDiscussionTable(getSelectedData.courseId)"
148 ></v-select> 148 ></v-select>
149 </v-flex> 149 </v-flex>
150 <v-card-title class="body-1" v-show="show"> 150 <v-card-title class="body-1" v-show="show">
151 <v-btn icon large flat @click="displaySearch"> 151 <v-btn icon large flat @click="displaySearch">
152 <v-avatar size="27"> 152 <v-avatar size="27">
153 <img src="/static/icon/search.png" alt="icon" /> 153 <img src="/static/icon/search.png" alt="icon" />
154 </v-avatar> 154 </v-avatar>
155 </v-btn> 155 </v-btn>
156 </v-card-title> 156 </v-card-title>
157 <v-flex xs8 sm8 md3 lg2 v-if="showSearch"> 157 <v-flex xs8 sm8 md3 lg2 v-if="showSearch">
158 <v-layout> 158 <v-layout>
159 <v-text-field 159 <v-text-field
160 autofocus 160 autofocus
161 v-model="search" 161 v-model="search"
162 label="Search" 162 label="Search"
163 prepend-inner-icon="search" 163 prepend-inner-icon="search"
164 color="primary" 164 color="primary"
165 ></v-text-field> 165 ></v-text-field>
166 <v-icon @click="closeSearch" color="error">close</v-icon> 166 <v-icon @click="closeSearch" color="error">close</v-icon>
167 </v-layout> 167 </v-layout>
168 </v-flex> 168 </v-flex>
169 </v-toolbar> 169 </v-toolbar>
170 <v-data-table 170 <v-data-table
171 :headers="headers" 171 :headers="headers"
172 :items="courseDiscussionData" 172 :items="courseDiscussionData"
173 :pagination.sync="pagination" 173 :pagination.sync="pagination"
174 :search="search" 174 :search="search"
175 > 175 >
176 <template slot="items" slot-scope="props"> 176 <template slot="items" slot-scope="props">
177 <tr class="tr row-click" @click="rowCourseDiscussion(props.item._id)"> 177 <tr class="tr row-click" @click="rowCourseDiscussion(props.item._id)">
178 <td class="text-xs-center td td-row"> 178 <td class="text-xs-center td td-row">
179 <v-avatar size="40"> 179 <v-avatar size="40">
180 <img :src="props.item.attachementUrl" v-if="props.item.attachementUrl" /> 180 <img :src="props.item.attachementUrl" v-if="props.item.attachementUrl" />
181 <img src="/static/icon/user.png" v-else-if="!props.item.attachementUrl" /> 181 <img src="/static/icon/user.png" v-else-if="!props.item.attachementUrl" />
182 </v-avatar> 182 </v-avatar>
183 </td> 183 </td>
184 <td class="text-xs-center td td-row">{{ props.item.subject }}</td> 184 <td class="text-xs-center td td-row">{{ props.item.subject }}</td>
185 <td class="text-xs-center td td-row">{{ props.item.studentId.name}}</td> 185 <td class="text-xs-center td td-row">{{ props.item.studentId.name}}</td>
186 <td class="text-xs-center td td-row">-</td> 186 <td class="text-xs-center td td-row">-</td>
187 <td class="text-xs-center td td-row">{{ props.item.forumThread.length }}</td> 187 <td class="text-xs-center td td-row">{{ props.item.forumThread.length }}</td>
188 <td class="text-xs-center td td-row"> 188 <td class="text-xs-center td td-row">
189 <span> 189 <span>
190 <v-tooltip top> 190 <v-tooltip top>
191 <img 191 <img
192 slot="activator" 192 slot="activator"
193 style="cursor:pointer; width:20px; height:18px; " 193 style="cursor:pointer; width:20px; height:18px; "
194 class="mr-3" 194 class="mr-3"
195 @click="editItem(props.item)" 195 @click="editItem(props.item)"
196 src="/static/icon/edit.png" 196 src="/static/icon/edit.png"
197 /> 197 />
198 <span>Edit</span> 198 <span>Edit</span>
199 </v-tooltip> 199 </v-tooltip>
200 <v-tooltip top> 200 <v-tooltip top>
201 <img 201 <img
202 slot="activator" 202 slot="activator"
203 style="cursor:pointer; width:20px; height:20px; " 203 style="cursor:pointer; width:20px; height:20px; "
204 class="mr-3" 204 class="mr-3"
205 @click="deleteItem(props.item)" 205 @click="deleteItem(props.item)"
206 src="/static/icon/delete.png" 206 src="/static/icon/delete.png"
207 /> 207 />
208 <span>Delete</span> 208 <span>Delete</span>
209 </v-tooltip> 209 </v-tooltip>
210 </span> 210 </span>
211 </td> 211 </td>
212 </tr> 212 </tr>
213 </template> 213 </template>
214 <v-alert 214 <v-alert
215 slot="no-results" 215 slot="no-results"
216 :value="true" 216 :value="true"
217 color="error" 217 color="error"
218 icon="warning" 218 icon="warning"
219 >Your search for "{{ search }}" found no results.</v-alert> 219 >Your search for "{{ search }}" found no results.</v-alert>
220 </v-data-table> 220 </v-data-table>
221 <v-snackbar 221 <v-snackbar
222 :timeout="timeout" 222 :timeout="timeout"
223 :top="y === 'top'" 223 :top="y === 'top'"
224 :right="x === 'right'" 224 :right="x === 'right'"
225 :vertical="mode === 'vertical'" 225 :vertical="mode === 'vertical'"
226 v-model="snackbar" 226 v-model="snackbar"
227 :color="color" 227 :color="color"
228 >{{ text }}</v-snackbar> 228 >{{ text }}</v-snackbar>
229 <div class="loader" v-if="showLoader"> 229 <div class="loader" v-if="showLoader">
230 <v-progress-circular indeterminate color="white"></v-progress-circular> 230 <v-progress-circular indeterminate color="white"></v-progress-circular>
231 </div> 231 </div>
232 </v-container> 232 </v-container>
233 </template> 233 </template>
234 234
235 <script> 235 <script>
236 import http from "@/Services/http.js"; 236 import http from "@/Services/http.js";
237 import moment from "moment"; 237 import moment from "moment";
238 238
239 export default { 239 export default {
240 data: () => ({ 240 data: () => ({
241 snackbar: false, 241 snackbar: false,
242 y: "top", 242 y: "top",
243 x: "right", 243 x: "right",
244 mode: "", 244 mode: "",
245 timeout: 3000, 245 timeout: 3000,
246 text: "", 246 text: "",
247 color: "", 247 color: "",
248 show: true, 248 show: true,
249 showSearch: false, 249 showSearch: false,
250 showLoader: false, 250 showLoader: false,
251 loading: false, 251 loading: false,
252 date: null, 252 date: null,
253 search: "", 253 search: "",
254 addclass: [], 254 addclass: [],
255 pagination: { 255 pagination: {
256 rowsPerPage: 10, 256 rowsPerPage: 10,
257 }, 257 },
258 headers: [ 258 headers: [
259 { 259 {
260 text: "Image", 260 text: "Image",
261 value: "subjattachementUrlect", 261 value: "subjattachementUrlect",
262 sortable: false, 262 sortable: false,
263 align: "center", 263 align: "center",
264 }, 264 },
265 { 265 {
266 text: "Discussion", 266 text: "Discussion",
267 value: "subject", 267 value: "subject",
268 sortable: false, 268 sortable: false,
269 align: "center", 269 align: "center",
270 }, 270 },
271 { text: "Started", value: "studentId", sortable: false, align: "center" }, 271 { text: "Started", value: "studentId", sortable: false, align: "center" },
272 { 272 {
273 text: "Last Post", 273 text: "Last Post",
274 value: "forumThread", 274 value: "forumThread",
275 sortable: false, 275 sortable: false,
276 align: "center", 276 align: "center",
277 }, 277 },
278 { text: "replies", value: "email", sortable: false, align: "center" }, 278 { text: "replies", value: "email", sortable: false, align: "center" },
279 { text: "Action", value: "", sortable: false, align: "center" }, 279 { text: "Action", value: "", sortable: false, align: "center" },
280 ], 280 ],
281 token: "", 281 token: "",
282 selectStudents: { 282 selectStudents: {
283 select: "", 283 select: "",
284 selectSection: "", 284 selectSection: "",
285 }, 285 },
286 286
287 role: "", 287 role: "",
288 schoolRole: "", 288 schoolRole: "",
289 menu: false, 289 menu: false,
290 valid: true, 290 valid: true,
291 291
292 getSelectedData: {}, 292 getSelectedData: {},
293 courseDiscussionData: [], 293 courseDiscussionData: [],
294 courseData: [], 294 courseData: [],
295 editCourseData: [], 295 editCourseData: [],
296 addSection: [], 296 addSection: [],
297 editedItem: {}, 297 editedItem: {},
298 editDialog: false, 298 editDialog: false,
299 editedIndex: -1, 299 editedIndex: -1,
300 editiImageFile: "", 300 editiImageFile: "",
301 editImageName: "", 301 editImageName: "",
302 editImageUrl: "", 302 editImageUrl: "",
303 editLoading: false, 303 editLoading: false,
304 showData: false, 304 showData: false,
305 }), 305 }),
306 methods: { 306 methods: {
307 // save(date) { 307 // save(date) {
308 // this.$refs.menu.save(date); 308 // this.$refs.menu.save(date);
309 // }, 309 // },
310 pickEditFile() { 310 pickEditFile() {
311 this.$refs.editDataImage.click(); 311 this.$refs.editDataImage.click();
312 }, 312 },
313 onEditFilePicked(e) { 313 onEditFilePicked(e) {
314 // console.log(e); 314 // console.log(e);
315 const files = e.target.files; 315 const files = e.target.files;
316 if (files[0] !== undefined) { 316 if (files[0] !== undefined) {
317 this.editImageName = files[0].name; 317 this.editImageName = files[0].name;
318 // console.log("this.editImageName", this.editImageName); 318 // console.log("this.editImageName", this.editImageName);
319 319
320 if (this.editImageName.lastIndexOf(".") <= 0) { 320 if (this.editImageName.lastIndexOf(".") <= 0) {
321 return; 321 return;
322 } 322 }
323 const fr = new FileReader(); 323 const fr = new FileReader();
324 fr.readAsDataURL(files[0]); 324 fr.readAsDataURL(files[0]);
325 fr.addEventListener("load", () => { 325 fr.addEventListener("load", () => {
326 this.editImageUrl = fr.result; 326 this.editImageUrl = fr.result;
327 this.editiImageFile = files[0]; // this is an image file that can be sent to server... 327 this.editiImageFile = files[0]; // this is an image file that can be sent to server...
328 }); 328 });
329 } else { 329 } else {
330 this.editImageName = ""; 330 this.editImageName = "";
331 this.editiImageFile = ""; 331 this.editiImageFile = "";
332 } 332 }
333 }, 333 },
334 getAllClass() { 334 getAllClass() {
335 http() 335 http()
336 .get("/getClassesList", { 336 .get("/getClassesList", {
337 headers: { Authorization: "Bearer " + this.token }, 337 headers: { Authorization: "Bearer " + this.token },
338 }) 338 })
339 .then((response) => { 339 .then((response) => {
340 this.addclass = response.data.data; 340 this.addclass = response.data.data;
341 }) 341 })
342 .catch((error) => { 342 .catch((error) => {
343 // console.log("err====>", err); 343 // console.log("err====>", err);
344 // this.$router.replace({ path: "/" }); 344 // this.$router.replace({ path: "/" });
345 }); 345 });
346 }, 346 },
347 getCourses(classId) { 347 getCourses(classId) {
348 this.showLoader = true; 348 this.showLoader = true;
349 http() 349 http()
350 .get("/getCourseesList", { 350 .get("/getCourseesList", {
351 params: { 351 params: {
352 classId: classId, 352 classId: classId,
353 }, 353 },
354 }) 354 })
355 .then((response) => { 355 .then((response) => {
356 this.courseData = response.data.data; 356 this.courseData = response.data.data;
357 this.showLoader = false; 357 this.showLoader = false;
358 }) 358 })
359 .catch((err) => { 359 .catch((err) => {
360 // console.log("err====>", err); 360 // console.log("err====>", err);
361 this.showLoader = false; 361 this.showLoader = false;
362 this.snackbar = true;
363 this.color = "error";
364 this.text = error.response.data.message;
362 this.snackbar = true; 365 });
363 this.color = "error"; 366 },
364 this.text = error.response.data.message; 367 editGetCourses(classId) {
365 }); 368 this.showLoader = true;
366 }, 369 http()
367 editGetCourses(classId) { 370 .get("/getCourseesList", {
368 this.showLoader = true; 371 params: {
369 http() 372 classId: classId,
370 .get("/getCourseesList", { 373 },
371 params: { 374 })
372 classId: classId, 375 .then((response) => {
373 }, 376 this.editCourseData = response.data.data;
374 }) 377 this.showLoader = false;
375 .then((response) => { 378 })
376 this.editCourseData = response.data.data; 379 .catch((err) => {
377 this.showLoader = false; 380 // console.log("err====>", err);
378 }) 381 this.showLoader = false;
382 this.snackbar = true;
383 this.color = "error";
384 this.text = error.response.data.message;
379 .catch((err) => { 385 });
380 // console.log("err====>", err); 386 },
381 this.showLoader = false; 387 getCourseDiscussionTable(id) {
382 this.snackbar = true; 388 // console.log("id", this.getSelectedData.courseId);
383 this.color = "error"; 389 this.showLoader = true;
384 this.text = error.response.data.message; 390 http()
385 }); 391 .get("/getCourseDiscussionesList", {
386 }, 392 params: {
387 getCourseDiscussionTable(id) { 393 classId: this.getSelectedData.classId,
388 // console.log("id", this.getSelectedData.courseId); 394 courseId: id,
389 this.showLoader = true; 395 },
390 http() 396 })
391 .get("/getCourseDiscussionesList", { 397 .then((response) => {
392 params: { 398 // console.log("response", response.data.data);
393 classId: this.getSelectedData.classId, 399 this.courseDiscussionData = response.data.data;
394 courseId: id, 400 if (this.courseDiscussionData.length === 0) {
395 }, 401 this.showLoader = false;
396 }) 402 this.snackbar = true;
397 .then((response) => { 403 this.text = "Data not found!";
398 // console.log("response", response.data.data); 404 this.color = "error";
399 this.courseDiscussionData = response.data.data; 405 return;
400 if (this.courseDiscussionData.length === 0) { 406 }
401 this.showLoader = false; 407 this.showData = true;
402 this.snackbar = true; 408 this.showLoader = false;
403 this.text = "Data not found!"; 409 })
404 this.color = "error"; 410 .catch((error) => {
405 return; 411 // console.log("err====>", error);
406 } 412 this.showLoader = false;
413 this.snackbar = true;
414 this.color = "error";
415 this.text = error.response.data.message;
407 this.showData = true; 416 });
408 this.showLoader = false; 417 },
409 }) 418 rowCourseDiscussion(id) {
410 .catch((error) => { 419 this.$router.push({
411 // console.log("err====>", error); 420 name: "Course Discussiones Fourm",
412 this.showLoader = false; 421 params: { discussionId: id },
413 this.snackbar = true; 422 });
414 this.color = "error"; 423 },
415 this.text = error.response.data.message; 424 editItem(item) {
416 }); 425 this.editedIndex = this.courseDiscussionData.indexOf(item);
417 }, 426 this.editedItem = Object.assign({}, item);
418 rowCourseDiscussion(id) { 427 this.editDialog = true;
419 this.$router.push({ 428 },
420 name: "Course Discussiones Fourm", 429 save() {
421 params: { discussionId: id }, 430 // console.log("this.editedItem", this.editedItem);
422 }); 431 let editCourseDiscuss = {
423 }, 432 courseDiscussionId: this.editedItem._id,
424 editItem(item) { 433 courseId: this.editedItem.courseId,
425 this.editedIndex = this.courseDiscussionData.indexOf(item); 434 studentId: this.editedItem.studentId._id,
426 this.editedItem = Object.assign({}, item); 435 subject: this.editedItem.subject,
427 this.editDialog = true; 436 description: this.editedItem.description,
428 }, 437 };
429 save() { 438 if (this.editedItem.classId._id) {
430 // console.log("this.editedItem", this.editedItem); 439 editCourseDiscuss.classId = this.editedItem.classId._id;
431 let editCourseDiscuss = { 440 }
432 courseDiscussionId: this.editedItem._id, 441 if (!this.editedItem.classId._id) {
433 courseId: this.editedItem.courseId, 442 editCourseDiscuss.classId = this.editedItem.classId;
434 studentId: this.editedItem.studentId._id, 443 }
435 subject: this.editedItem.subject, 444 if (this.editImageUrl) {
436 description: this.editedItem.description, 445 var str = this.editImageUrl;
437 }; 446 const [baseUrl, editImageUrl] = str.split(/,/);
438 if (this.editedItem.classId._id) { 447 editCourse.upload = editImageUrl;
439 editCourseDiscuss.classId = this.editedItem.classId._id; 448 }
440 } 449 this.editLoading = true;
441 if (!this.editedItem.classId._id) { 450 http()
442 editCourseDiscuss.classId = this.editedItem.classId; 451 .put("/updateCourseDiscussion", editCourseDiscuss)
443 } 452 .then((response) => {
444 if (this.editImageUrl) { 453 this.snackbar = true;
445 var str = this.editImageUrl; 454 this.text = response.data.message;
446 const [baseUrl, editImageUrl] = str.split(/,/); 455 this.color = "green";
447 editCourse.upload = editImageUrl; 456 this.imageUrl = "";
448 } 457 this.getCourseDiscussionTable();
449 this.editLoading = true; 458 this.editDialog = false;
450 http() 459 this.editLoading = false;
451 .put("/updateCourseDiscussion", editCourseDiscuss) 460 })
452 .then((response) => { 461 .catch((error) => {
453 this.snackbar = true; 462 this.editLoading = false;
454 this.text = response.data.message; 463 this.snackbar = true;
455 this.color = "green"; 464 this.text = error.response.data.statusText;
456 this.imageUrl = ""; 465 this.color = "error";
457 this.getCourseDiscussionTable(); 466 });
458 this.editDialog = false; 467 },
459 this.editLoading = false; 468 deleteItem(item) {
460 }) 469 let deleteCourseDiscussion = {
461 .catch((error) => { 470 courseDiscussionId: item._id,
462 this.editLoading = false; 471 };
463 this.snackbar = true; 472 http()
464 this.text = error.response.data.statusText; 473 .delete(
465 this.color = "error"; 474 "/deleteCourseDiscussion",
466 }); 475 confirm("Are you sure you want to delete this?") && {
467 }, 476 params: deleteCourseDiscussion,
468 deleteItem(item) { 477 }
469 let deleteCourseDiscussion = { 478 )
470 courseDiscussionId: item._id, 479 .then((response) => {
471 }; 480 this.snackbar = true;
472 http() 481 this.text = response.data.message;
473 .delete( 482 this.color = "green";
474 "/deleteCourseDiscussion", 483 this.getCourseDiscussionTable();
475 confirm("Are you sure you want to delete this?") && { 484 })
476 params: deleteCourseDiscussion, 485 .catch((error) => {
477 } 486 this.snackbar = true;
478 ) 487 this.text = error.response.data.message;
479 .then((response) => { 488 this.color = "error";
480 this.snackbar = true; 489 });
481 this.text = response.data.message; 490 },
482 this.color = "green"; 491 displaySearch() {
483 this.getCourseDiscussionTable(); 492 this.show = false;
484 }) 493 this.showSearch = true;
485 .catch((error) => { 494 },
486 this.snackbar = true; 495 closeSearch() {
487 this.text = error.response.data.message; 496 this.showSearch = false;
488 this.color = "error"; 497 this.show = true;
489 }); 498 this.search = "";
490 }, 499 },
491 displaySearch() { 500 },
492 this.show = false; 501 mounted() {
493 this.showSearch = true; 502 // this.getStudentList();
494 }, 503 this.token = this.$store.state.token;
495 closeSearch() { 504 this.role = this.$store.state.role;
496 this.showSearch = false; 505 this.getAllClass();
497 this.show = true; 506 },
498 this.search = ""; 507 };
499 }, 508 </script>
500 }, 509
501 mounted() { 510 <style>
502 // this.getStudentList(); 511 .row-click {
503 this.token = this.$store.state.token; 512 cursor: pointer !important;
504 this.role = this.$store.state.role; 513 }
505 this.getAllClass(); 514 </style>
src/pages/Course/discussion.vue
Diff comments   View file @8b7976c
1 <template> 1 <template>
2 <v-container fluid class="body-color"> 2 <v-container fluid class="body-color">
3 <!-- ******COURSE DISCUSIION COMMENT ****** --> 3 <!-- ******COURSE DISCUSIION COMMENT ****** -->
4 <v-layout> 4 <v-layout>
5 <v-flex xs12 v-for="(courseDiscussionData,i) in courseDiscussionData" :key="i"> 5 <v-flex xs12 v-for="(courseDiscussionData,i) in courseDiscussionData" :key="i">
6 <!-- TOPIC HEADING --> 6 <!-- TOPIC HEADING -->
7 <v-card class="elevation-0 grey lighten-3 pa-2" flat> 7 <v-card class="elevation-0 grey lighten-3 pa-2" flat>
8 <v-list two-line subheader> 8 <v-list two-line subheader>
9 <v-list-tile> 9 <v-list-tile>
10 <v-list-tile-avatar> 10 <v-list-tile-avatar>
11 <v-avatar size="46"> 11 <v-avatar size="46">
12 <img 12 <img
13 :src="courseDiscussionData.attachementUrl" 13 :src="courseDiscussionData.attachementUrl"
14 v-if="courseDiscussionData.attachementUrl" 14 v-if="courseDiscussionData.attachementUrl"
15 /> 15 />
16 <img src="/static/icon/user.png" v-else-if="!courseDiscussionData.attachementUrl" /> 16 <img src="/static/icon/user.png" v-else-if="!courseDiscussionData.attachementUrl" />
17 </v-avatar> 17 </v-avatar>
18 </v-list-tile-avatar> 18 </v-list-tile-avatar>
19 <v-list-tile-content> 19 <v-list-tile-content>
20 <v-list-tile-title>{{ courseDiscussionData.subject }}</v-list-tile-title> 20 <v-list-tile-title>{{ courseDiscussionData.subject }}</v-list-tile-title>
21 <v-list-tile-sub-title> 21 <v-list-tile-sub-title>
22 By 22 By
23 <span class="info--text">{{ courseDiscussionData.studentId.name }}</span> 23 <span class="info--text">{{ courseDiscussionData.studentId.name }}</span>
24 - {{dates(courseDiscussionData.created ) }} 24 - {{dates(courseDiscussionData.created ) }}
25 </v-list-tile-sub-title> 25 </v-list-tile-sub-title>
26 </v-list-tile-content> 26 </v-list-tile-content>
27 <v-list-tile-action> 27 <v-list-tile-action>
28 <div> 28 <div>
29 <v-btn flat round dark class="reply-btn" @click="showReplyBox = true">Reply</v-btn> 29 <v-btn flat round dark class="reply-btn" @click="showReplyBox = true">Reply</v-btn>
30 </div> 30 </div>
31 </v-list-tile-action> 31 </v-list-tile-action>
32 </v-list-tile> 32 </v-list-tile>
33 </v-list> 33 </v-list>
34 </v-card> 34 </v-card>
35 35
36 <!-- REPLY BOX --> 36 <!-- REPLY BOX -->
37 <v-flex xs12 class="mt-4" v-show="showReplyBox"> 37 <v-flex xs12 class="mt-4" v-show="showReplyBox">
38 <v-textarea 38 <v-textarea
39 name="input-7-1" 39 name="input-7-1"
40 solo 40 solo
41 label="Label Text" 41 label="Label Text"
42 multi-line 42 multi-line
43 v-model="replyDescription" 43 v-model="replyDescription"
44 ></v-textarea> 44 ></v-textarea>
45 <v-btn round dark class="open-dialog-button" flat @click="showReplyBox = false">Cancel</v-btn> 45 <v-btn round dark class="open-dialog-button" flat @click="showReplyBox = false">Cancel</v-btn>
46 <v-btn 46 <v-btn
47 round 47 round
48 dark 48 dark
49 :loading="loading" 49 :loading="loading"
50 class="reply-btn" 50 class="reply-btn"
51 @click="replyThreadDiscussion()" 51 @click="replyThreadDiscussion()"
52 >Submit</v-btn> 52 >Submit</v-btn>
53 </v-flex> 53 </v-flex>
54 54
55 <!-- REPLY THREAD --> 55 <!-- REPLY THREAD -->
56 <v-layout 56 <v-layout
57 :class="['mt-4','pl-5','mx-auto',replyThread.teacherId?'justify-start':'justify-end']" 57 :class="['mt-4','pl-5','mx-auto',replyThread.teacherId?'justify-start':'justify-end']"
58 v-for="(replyThread,i) in courseDiscussionData.forumThread.slice().reverse()" 58 v-for="(replyThread,i) in courseDiscussionData.forumThread.slice().reverse()"
59 :key="i" 59 :key="i"
60 > 60 >
61 <v-flex xs12 md7> 61 <v-flex xs12 md7>
62 <v-card class="elevation-0 grey lighten-1" flat> 62 <v-card class="elevation-0 grey lighten-1" flat>
63 <v-list two-line subheader class="grey lighten-1 pa-1"> 63 <v-list two-line subheader class="grey lighten-1 pa-1">
64 <v-list-tile> 64 <v-list-tile>
65 <v-list-tile-avatar> 65 <v-list-tile-avatar>
66 <v-avatar size="46"> 66 <v-avatar size="46">
67 <img 67 <img
68 :src="courseDiscussionData.attachementUrl" 68 :src="courseDiscussionData.attachementUrl"
69 v-if="courseDiscussionData.attachementUrl" 69 v-if="courseDiscussionData.attachementUrl"
70 /> 70 />
71 <img 71 <img
72 src="/static/icon/user.png" 72 src="/static/icon/user.png"
73 v-else-if="!courseDiscussionData.attachementUrl" 73 v-else-if="!courseDiscussionData.attachementUrl"
74 /> 74 />
75 </v-avatar> 75 </v-avatar>
76 </v-list-tile-avatar> 76 </v-list-tile-avatar>
77 <v-list-tile-content> 77 <v-list-tile-content>
78 <v-list-tile-title>Re: {{ courseDiscussionData.subject }}</v-list-tile-title> 78 <v-list-tile-title>Re: {{ courseDiscussionData.subject }}</v-list-tile-title>
79 <v-list-tile-sub-title> 79 <v-list-tile-sub-title>
80 By 80 By
81 <span 81 <span
82 class="info--text" 82 class="info--text"
83 v-if="replyThread.teacherId" 83 v-if="replyThread.teacherId"
84 >{{ replyThread.teacherId.name }}</span> 84 >{{ replyThread.teacherId.name }}</span>
85 <!-- message --> 85 <!-- message -->
86 <span 86 <span
87 class="info--text" 87 class="info--text"
88 v-if="replyThread.studentId" 88 v-if="replyThread.studentId"
89 >{{ replyThread.studentId.name }}</span> 89 >{{ replyThread.studentId.name }}</span>
90 - {{dates(replyThread.created ) }} 90 - {{dates(replyThread.created ) }}
91 </v-list-tile-sub-title> 91 </v-list-tile-sub-title>
92 </v-list-tile-content> 92 </v-list-tile-content>
93 </v-list-tile> 93 </v-list-tile>
94 </v-list> 94 </v-list>
95 <v-list class="pa-2 reply-desc"> 95 <v-list class="pa-2 reply-desc">
96 <v-list-tile-content> 96 <v-list-tile-content>
97 <v-list-tile-title 97 <v-list-tile-title
98 v-show="replyThread.showDescriptionReplyThread" 98 v-show="replyThread.showDescriptionReplyThread"
99 >{{ replyThread.description }}</v-list-tile-title> 99 >{{ replyThread.description }}</v-list-tile-title>
100 <v-flex xs12 sm12 md4 v-show="replyThread.showUpdateReplyThread == true"> 100 <v-flex xs12 sm12 md4 v-show="replyThread.showUpdateReplyThread == true">
101 <v-text-field v-model="replyThread.description"></v-text-field> 101 <v-text-field v-model="replyThread.description"></v-text-field>
102 <v-btn 102 <v-btn
103 flat 103 flat
104 round 104 round
105 dark 105 dark
106 class="reply-btn right" 106 class="reply-btn right"
107 @click="updateRelpyThreadDiscussion(replyThread)" 107 @click="updateRelpyThreadDiscussion(replyThread)"
108 >Save</v-btn> 108 >Save</v-btn>
109 </v-flex> 109 </v-flex>
110 </v-list-tile-content> 110 </v-list-tile-content>
111 </v-list> 111 </v-list>
112 <v-list class="grey lighten-4 pa-0"> 112 <v-list class="grey lighten-4 pa-0">
113 <v-list-tile-action> 113 <v-list-tile-action>
114 <v-spacer></v-spacer> 114 <v-spacer></v-spacer>
115 <div v-if="replyThread.teacherId && replyThread.teacherId._id == $store.state.id"> 115 <div v-if="replyThread.teacherId && replyThread.teacherId._id == $store.state.id">
116 <v-btn 116 <v-btn
117 flat 117 flat
118 round 118 round
119 dark 119 dark
120 class="reply-btn" 120 class="reply-btn"
121 @click="deleteRelpyThreadDiscussion(replyThread._id)" 121 @click="deleteRelpyThreadDiscussion(replyThread._id)"
122 >Delete</v-btn> 122 >Delete</v-btn>
123 <v-btn 123 <v-btn
124 flat 124 flat
125 round 125 round
126 dark 126 dark
127 class="reply-btn mr-4" 127 class="reply-btn mr-4"
128 @click="showUpdateReplyThreadDiscussion(replyThread)" 128 @click="showUpdateReplyThreadDiscussion(replyThread)"
129 >Edit</v-btn> 129 >Edit</v-btn>
130 </div> 130 </div>
131 </v-list-tile-action> 131 </v-list-tile-action>
132 </v-list> 132 </v-list>
133 </v-card> 133 </v-card>
134 </v-flex> 134 </v-flex>
135 </v-layout> 135 </v-layout>
136 </v-flex> 136 </v-flex>
137 </v-layout> 137 </v-layout>
138 <v-snackbar 138 <v-snackbar
139 :timeout="timeout" 139 :timeout="timeout"
140 :top="y === 'top'" 140 :top="y === 'top'"
141 :right="x === 'right'" 141 :right="x === 'right'"
142 :vertical="mode === 'vertical'" 142 :vertical="mode === 'vertical'"
143 v-model="snackbar" 143 v-model="snackbar"
144 color="success" 144 color="success"
145 >{{ text }}</v-snackbar> 145 >{{ text }}</v-snackbar>
146 <div class="loader" v-if="showLoader"> 146 <div class="loader" v-if="showLoader">
147 <v-progress-circular indeterminate color="white"></v-progress-circular> 147 <v-progress-circular indeterminate color="white"></v-progress-circular>
148 </div> 148 </div>
149 </v-container> 149 </v-container>
150 </template> 150 </template>
151 151
152 <script> 152 <script>
153 import http from "@/Services/http.js"; 153 import http from "@/Services/http.js";
154 import moment from "moment"; 154 import moment from "moment";
155 155
156 export default { 156 export default {
157 data: () => ({ 157 data: () => ({
158 localStorage: localStorage, 158 localStorage: localStorage,
159 snackbar: false, 159 snackbar: false,
160 y: "top", 160 y: "top",
161 x: "right", 161 x: "right",
162 mode: "", 162 mode: "",
163 timeout: 3000, 163 timeout: 3000,
164 text: "", 164 text: "",
165 showLoader: false, 165 showLoader: false,
166 loading: false, 166 loading: false,
167 date: null, 167 date: null,
168 token: "", 168 token: "",
169 role: "", 169 role: "",
170 schoolRole: "", 170 schoolRole: "",
171 menu: false, 171 menu: false,
172 courseDiscussionData: {}, 172 courseDiscussionData: {},
173 showReplyBox: false, 173 showReplyBox: false,
174 replyDescription: "", 174 replyDescription: "",
175 loginId: "", 175 loginId: "",
176 editedIndex: -1, 176 editedIndex: -1,
177 }), 177 }),
178 methods: { 178 methods: {
179 dates: function (date) { 179 dates: function (date) {
180 return moment(date).format("MMMM DD, YYYY hh:mm A"); 180 return moment(date).format("MMMM DD, YYYY hh:mm A");
181 }, 181 },
182 getDiscussionesThread() { 182 getDiscussionesThread() {
183 // console.log("id", this.getSelectedData.courseId); 183 // console.log("id", this.getSelectedData.courseId);
184 this.showLoader = true; 184 this.showLoader = true;
185 http() 185 http()
186 .get("/getParticularCourseDiscussion", { 186 .get("/getParticularCourseDiscussion", {
187 params: { 187 params: {
188 courseDiscussionId: this.$route.params.discussionId, 188 courseDiscussionId: this.$route.params.discussionId,
189 }, 189 },
190 }) 190 })
191 .then((response) => { 191 .then((response) => {
192 // console.log("response", response.data.data); 192 // console.log("response", response.data.data);
193 this.courseDiscussionData = response.data.data; 193 this.courseDiscussionData = response.data.data;
194 for (let i = 0; i < this.courseDiscussionData.length; i++) { 194 for (let i = 0; i < this.courseDiscussionData.length; i++) {
195 for ( 195 for (
196 let j = 0; 196 let j = 0;
197 j < this.courseDiscussionData[i].forumThread.length; 197 j < this.courseDiscussionData[i].forumThread.length;
198 j++ 198 j++
199 ) { 199 ) {
200 this.courseDiscussionData[i].forumThread[ 200 this.courseDiscussionData[i].forumThread[
201 j 201 j
202 ].showUpdateReplyThread = false; 202 ].showUpdateReplyThread = false;
203 this.courseDiscussionData[i].forumThread[ 203 this.courseDiscussionData[i].forumThread[
204 j 204 j
205 ].showDescriptionReplyThread = true; 205 ].showDescriptionReplyThread = true;
206 } 206 }
207 } 207 }
208 this.showLoader = false; 208 this.showLoader = false;
209 this.showReplyBox = false; 209 this.showReplyBox = false;
210 }) 210 })
211 .catch((error) => { 211 .catch((error) => {
212 // console.log("err====>", error); 212 // console.log("err====>", error);
213 this.showLoader = false; 213 this.showLoader = false;
214 this.snackbar = true;
215 this.color = "error";
216 this.text = error.response.data.message;
214 this.snackbar = true; 217 });
215 this.color = "error"; 218 },
216 this.text = error.response.data.message; 219 replyThreadDiscussion() {
217 }); 220 this.showLoader = true;
218 }, 221 var payloadData = {
219 replyThreadDiscussion() { 222 courseDiscussionId: this.$route.params.discussionId,
220 this.showLoader = true; 223 teacherId: this.loginId,
221 var payloadData = { 224 description: this.replyDescription,
222 courseDiscussionId: this.$route.params.discussionId, 225 };
223 teacherId: this.loginId, 226 http()
224 description: this.replyDescription, 227 .put("/replyForumThread", payloadData)
225 }; 228 .then((response) => {
226 http() 229 // console.log("response", response.data.data);
227 .put("/replyForumThread", payloadData) 230 this.showLoader = false;
228 .then((response) => { 231 this.getDiscussionesThread();
229 // console.log("response", response.data.data); 232 })
230 this.showLoader = false; 233 .catch((error) => {
231 this.getDiscussionesThread(); 234 this.showLoader = false;
232 }) 235 });
233 .catch((error) => { 236 },
234 this.showLoader = false; 237 showUpdateReplyThreadDiscussion(item) {
235 }); 238 this.editedIndex = this.courseDiscussionData.indexOf(item);
236 }, 239 var editedItem = Object.assign({}, item);
237 showUpdateReplyThreadDiscussion(item) { 240 var arrayOfcourseDiscussionData = [];
238 this.editedIndex = this.courseDiscussionData.indexOf(item); 241 for (let i = 0; i < this.courseDiscussionData.length; i++) {
239 var editedItem = Object.assign({}, item); 242 for (
240 var arrayOfcourseDiscussionData = []; 243 let j = 0;
241 for (let i = 0; i < this.courseDiscussionData.length; i++) { 244 j < this.courseDiscussionData[i].forumThread.length;
242 for ( 245 j++
243 let j = 0; 246 ) {
244 j < this.courseDiscussionData[i].forumThread.length; 247 if (
245 j++ 248 editedItem._id == this.courseDiscussionData[i].forumThread[j]._id
246 ) { 249 ) {
247 if ( 250 this.courseDiscussionData[i].forumThread[
248 editedItem._id == this.courseDiscussionData[i].forumThread[j]._id 251 j
249 ) { 252 ].showUpdateReplyThread = true;
250 this.courseDiscussionData[i].forumThread[ 253 this.courseDiscussionData[i].forumThread[
251 j 254 j
252 ].showUpdateReplyThread = true; 255 ].showDescriptionReplyThread = false;
253 this.courseDiscussionData[i].forumThread[ 256 }
254 j 257 }
255 ].showDescriptionReplyThread = false; 258 arrayOfcourseDiscussionData.push(this.courseDiscussionData[i]);
256 } 259 }
257 } 260 this.courseDiscussionData = arrayOfcourseDiscussionData;
258 arrayOfcourseDiscussionData.push(this.courseDiscussionData[i]); 261 },
259 } 262 updateRelpyThreadDiscussion(replyThread) {
260 this.courseDiscussionData = arrayOfcourseDiscussionData; 263 this.showLoader = true;
261 }, 264 var payloadData = {
262 updateRelpyThreadDiscussion(replyThread) { 265 forumThreadId: replyThread._id,
263 this.showLoader = true; 266 courseDiscussionId: this.$route.params.discussionId,
264 var payloadData = { 267 teacherId: this.loginId,
265 forumThreadId: replyThread._id, 268 description: replyThread.description,
266 courseDiscussionId: this.$route.params.discussionId, 269 };
267 teacherId: this.loginId, 270 http()
268 description: replyThread.description, 271 .put("/updateForumThread", payloadData)
269 }; 272 .then((response) => {
270 http() 273 this.showLoader = false;
271 .put("/updateForumThread", payloadData) 274 this.getDiscussionesThread();
272 .then((response) => { 275 })
273 this.showLoader = false; 276 .catch((error) => {
274 this.getDiscussionesThread(); 277 this.showLoader = false;
275 }) 278 });
276 .catch((error) => { 279 },
277 this.showLoader = false; 280 deleteRelpyThreadDiscussion(id) {
278 }); 281 this.showLoader = true;
279 }, 282 var payloadData = {
280 deleteRelpyThreadDiscussion(id) { 283 forumThreadId: id,
281 this.showLoader = true; 284 courseDiscussionId: this.$route.params.discussionId,
282 var payloadData = { 285 };
283 forumThreadId: id, 286 http()
284 courseDiscussionId: this.$route.params.discussionId, 287 .put(
285 }; 288 "/deleteForumThread",
286 http() 289 confirm("Are you sure you want to delete this?") && payloadData
287 .put( 290 )
288 "/deleteForumThread", 291 .then((response) => {
289 confirm("Are you sure you want to delete this?") && payloadData 292 this.showLoader = false;
290 ) 293 this.getDiscussionesThread();
291 .then((response) => { 294 })
292 this.showLoader = false; 295 .catch((error) => {
293 this.getDiscussionesThread(); 296 this.showLoader = false;
294 }) 297 });
295 .catch((error) => { 298 },
296 this.showLoader = false; 299 },
297 }); 300 mounted() {
298 }, 301 // this.getStudentList();
299 }, 302 this.token = this.$store.state.token;
300 mounted() { 303 this.role = this.$store.state.role;
301 // this.getStudentList(); 304 this.loginId = this.$store.state.id;
302 this.token = this.$store.state.token; 305 this.getDiscussionesThread();
303 this.role = this.$store.state.role; 306 },
304 this.loginId = this.$store.state.id; 307 };
305 this.getDiscussionesThread(); 308 </script>
306 }, 309
307 }; 310 <style>
308 </script> 311 .reply-desc {
309 312 border: 1px solid #f2f2f2;
310 <style> 313 }
311 .reply-desc { 314 .open-dialog-button {
312 border: 1px solid #f2f2f2; 315 background: #827bfa !important;
313 } 316 border-color: #827bfa !important;
314 .open-dialog-button { 317 text-transform: none !important;
315 background: #827bfa !important; 318 }
316 border-color: #827bfa !important; 319
317 text-transform: none !important; 320 .reply-btn {
318 } 321 background: #feb83c !important;
319 322 border-color: #feb83c !important;
320 .reply-btn { 323 text-transform: none !important;
321 background: #feb83c !important; 324 -webkit-box-shadow: none !important;
322 border-color: #feb83c !important; 325 box-shadow: none !important;
323 text-transform: none !important; 326 }
324 -webkit-box-shadow: none !important; 327 </style>
src/pages/Course/enrollStudents.vue
Diff comments   View file @8b7976c
1 <template> 1 <template>
2 <v-container fluid class="body-color"> 2 <v-container fluid class="body-color">
3 <!-- ****** STUDENTS TABLE ****** --> 3 <!-- ****** STUDENTS TABLE ****** -->
4 <v-toolbar color="transparent" flat> 4 <v-toolbar color="transparent" flat>
5 <v-spacer></v-spacer> 5 <v-spacer></v-spacer>
6 <v-flex xs12 sm4 md2> 6 <v-flex xs12 sm4 md2>
7 <v-select 7 <v-select
8 small 8 small
9 :items="addclass" 9 :items="addclass"
10 label="Select Class" 10 label="Select Class"
11 v-model="getReport.classId" 11 v-model="getReport.classId"
12 item-text="classNum" 12 item-text="classNum"
13 item-value="_id" 13 item-value="_id"
14 name="Select Class" 14 name="Select Class"
15 @change="getCourses(getReport.classId)" 15 @change="getCourses(getReport.classId)"
16 class="mr-2" 16 class="mr-2"
17 required 17 required
18 ></v-select> 18 ></v-select>
19 </v-flex> 19 </v-flex>
20 <v-flex xs12 sm4 md2> 20 <v-flex xs12 sm4 md2>
21 <v-select 21 <v-select
22 :items="courseData" 22 :items="courseData"
23 label="Select Course" 23 label="Select Course"
24 v-model="getReport.courseId" 24 v-model="getReport.courseId"
25 item-text="courseName" 25 item-text="courseName"
26 item-value="_id" 26 item-value="_id"
27 required 27 required
28 class="ml-2" 28 class="ml-2"
29 @change="getStudentTable(getReport.courseId)" 29 @change="getStudentTable(getReport.courseId)"
30 ></v-select> 30 ></v-select>
31 </v-flex> 31 </v-flex>
32 <v-card-title class="body-1" v-show="show"> 32 <v-card-title class="body-1" v-show="show">
33 <v-btn icon large flat @click="displaySearch"> 33 <v-btn icon large flat @click="displaySearch">
34 <v-avatar size="27"> 34 <v-avatar size="27">
35 <img src="/static/icon/search.png" alt="icon" /> 35 <img src="/static/icon/search.png" alt="icon" />
36 </v-avatar> 36 </v-avatar>
37 </v-btn> 37 </v-btn>
38 </v-card-title> 38 </v-card-title>
39 <v-flex xs8 sm8 md3 lg2 v-if="showSearch"> 39 <v-flex xs8 sm8 md3 lg2 v-if="showSearch">
40 <v-layout> 40 <v-layout>
41 <v-text-field 41 <v-text-field
42 autofocus 42 autofocus
43 v-model="search" 43 v-model="search"
44 label="Search" 44 label="Search"
45 prepend-inner-icon="search" 45 prepend-inner-icon="search"
46 color="primary" 46 color="primary"
47 ></v-text-field> 47 ></v-text-field>
48 <v-icon @click="closeSearch" color="error">close</v-icon> 48 <v-icon @click="closeSearch" color="error">close</v-icon>
49 </v-layout> 49 </v-layout>
50 </v-flex> 50 </v-flex>
51 </v-toolbar> 51 </v-toolbar>
52 <v-data-table 52 <v-data-table
53 :headers="headers" 53 :headers="headers"
54 :items="studentsData" 54 :items="studentsData"
55 :pagination.sync="pagination" 55 :pagination.sync="pagination"
56 :search="search" 56 :search="search"
57 select-all 57 select-all
58 v-model="selected" 58 v-model="selected"
59 item-key="_id" 59 item-key="_id"
60 > 60 >
61 <template slot="items" slot-scope="props"> 61 <template slot="items" slot-scope="props">
62 <tr class="tr" :active="props.selected" @click="props.selected = !props.selected"> 62 <tr class="tr" :active="props.selected" @click="props.selected = !props.selected">
63 <td class="text-xs-center td td-row"> 63 <td class="text-xs-center td td-row">
64 <v-checkbox 64 <v-checkbox
65 v-model="props.item.enroll" 65 v-model="props.item.enroll"
66 @change="selectParticularStudent(props.item)" 66 @change="selectParticularStudent(props.item)"
67 primary 67 primary
68 hide-details 68 hide-details
69 ></v-checkbox> 69 ></v-checkbox>
70 </td> 70 </td>
71 <td class="text-xs-center td td-row"> 71 <td class="text-xs-center td td-row">
72 <v-avatar size="40"> 72 <v-avatar size="40">
73 <img :src="props.item.profilePicUrl" v-if="props.item.profilePicUrl" /> 73 <img :src="props.item.profilePicUrl" v-if="props.item.profilePicUrl" />
74 <img src="/static/icon/user.png" v-else-if="!props.item.profilePicUrl" /> 74 <img src="/static/icon/user.png" v-else-if="!props.item.profilePicUrl" />
75 </v-avatar> 75 </v-avatar>
76 </td> 76 </td>
77 <td class="text-xs-center td td-row">{{ props.item.name}}</td> 77 <td class="text-xs-center td td-row">{{ props.item.name}}</td>
78 <td class="text-xs-center td td-row">{{ props.item.fatherCellNo}}</td> 78 <td class="text-xs-center td td-row">{{ props.item.fatherCellNo}}</td>
79 <td class="text-xs-center td td-row">{{ props.item.email }}</td> 79 <td class="text-xs-center td td-row">{{ props.item.email }}</td>
80 </tr> 80 </tr>
81 </template> 81 </template>
82 <template slot="headers" slot-scope="props"> 82 <template slot="headers" slot-scope="props">
83 <tr> 83 <tr>
84 <th> 84 <th>
85 <v-checkbox 85 <v-checkbox
86 :input-value="props.all" 86 :input-value="props.all"
87 :indeterminate="props.indeterminate" 87 :indeterminate="props.indeterminate"
88 primary 88 primary
89 hide-details 89 hide-details
90 @click.native="toggleAll" 90 @click.native="toggleAll"
91 ></v-checkbox> 91 ></v-checkbox>
92 </th> 92 </th>
93 <th 93 <th
94 v-for="header in props.headers" 94 v-for="header in props.headers"
95 :key="header.text" 95 :key="header.text"
96 :class="['column sortable', pagination.descending ? 'desc' : 'asc', header.value === pagination.sortBy ? 'active' : '']" 96 :class="['column sortable', pagination.descending ? 'desc' : 'asc', header.value === pagination.sortBy ? 'active' : '']"
97 @click="changeSort(header.value)" 97 @click="changeSort(header.value)"
98 > 98 >
99 <v-icon small>arrow_upward</v-icon> 99 <v-icon small>arrow_upward</v-icon>
100 {{ header.text }} 100 {{ header.text }}
101 </th> 101 </th>
102 </tr> 102 </tr>
103 </template> 103 </template>
104 <v-alert 104 <v-alert
105 slot="no-results" 105 slot="no-results"
106 :value="true" 106 :value="true"
107 color="error" 107 color="error"
108 icon="warning" 108 icon="warning"
109 >Your search for "{{ search }}" found no results.</v-alert> 109 >Your search for "{{ search }}" found no results.</v-alert>
110 </v-data-table> 110 </v-data-table>
111 <v-snackbar 111 <v-snackbar
112 :timeout="timeout" 112 :timeout="timeout"
113 :top="y === 'top'" 113 :top="y === 'top'"
114 :right="x === 'right'" 114 :right="x === 'right'"
115 :vertical="mode === 'vertical'" 115 :vertical="mode === 'vertical'"
116 v-model="snackbar" 116 v-model="snackbar"
117 color="success" 117 color="success"
118 >{{ text }}</v-snackbar> 118 >{{ text }}</v-snackbar>
119 <div class="loader" v-if="showLoader"> 119 <div class="loader" v-if="showLoader">
120 <v-progress-circular indeterminate color="white"></v-progress-circular> 120 <v-progress-circular indeterminate color="white"></v-progress-circular>
121 </div> 121 </div>
122 </v-container> 122 </v-container>
123 </template> 123 </template>
124 124
125 <script> 125 <script>
126 import http from "@/Services/http.js"; 126 import http from "@/Services/http.js";
127 import moment from "moment"; 127 import moment from "moment";
128 128
129 export default { 129 export default {
130 data: () => ({ 130 data: () => ({
131 snackbar: false, 131 snackbar: false,
132 y: "top", 132 y: "top",
133 x: "right", 133 x: "right",
134 mode: "", 134 mode: "",
135 timeout: 3000, 135 timeout: 3000,
136 text: "", 136 text: "",
137 show: true, 137 show: true,
138 showSearch: false, 138 showSearch: false,
139 showLoader: false, 139 showLoader: false,
140 loading: false, 140 loading: false,
141 date: null, 141 date: null,
142 search: "", 142 search: "",
143 addclass: [], 143 addclass: [],
144 pagination: { 144 pagination: {
145 rowsPerPage: 10, 145 rowsPerPage: 10,
146 }, 146 },
147 headers: [ 147 headers: [
148 { 148 {
149 text: "Profile Pic", 149 text: "Profile Pic",
150 value: "profilprofilePicUrlePicUrl", 150 value: "profilprofilePicUrlePicUrl",
151 sortable: false, 151 sortable: false,
152 align: "center", 152 align: "center",
153 }, 153 },
154 { text: "Name", value: "name", sortable: false, align: "center" }, 154 { text: "Name", value: "name", sortable: false, align: "center" },
155 { 155 {
156 text: "Mobile No", 156 text: "Mobile No",
157 value: "fatherCellNo", 157 value: "fatherCellNo",
158 sortable: false, 158 sortable: false,
159 align: "center", 159 align: "center",
160 }, 160 },
161 { text: "Email", value: "email", sortable: false, align: "center" }, 161 { text: "Email", value: "email", sortable: false, align: "center" },
162 // { text: "Action", value: "", sortable: false, align: "center" } 162 // { text: "Action", value: "", sortable: false, align: "center" }
163 ], 163 ],
164 token: "", 164 token: "",
165 selectStudents: { 165 selectStudents: {
166 select: "", 166 select: "",
167 selectSection: "", 167 selectSection: "",
168 }, 168 },
169 169
170 role: "", 170 role: "",
171 schoolRole: "", 171 schoolRole: "",
172 menu: false, 172 menu: false,
173 valid: true, 173 valid: true,
174 174
175 getReport: {}, 175 getReport: {},
176 studentsData: [], 176 studentsData: [],
177 courseData: [], 177 courseData: [],
178 addSection: [], 178 addSection: [],
179 selected: [], 179 selected: [],
180 }), 180 }),
181 methods: { 181 methods: {
182 save(date) { 182 save(date) {
183 this.$refs.menu.save(date); 183 this.$refs.menu.save(date);
184 }, 184 },
185 getAllClass() { 185 getAllClass() {
186 http() 186 http()
187 .get("/getClassesList", { 187 .get("/getClassesList", {
188 headers: { Authorization: "Bearer " + this.token }, 188 headers: { Authorization: "Bearer " + this.token },
189 }) 189 })
190 .then((response) => { 190 .then((response) => {
191 this.addclass = response.data.data; 191 this.addclass = response.data.data;
192 }) 192 })
193 .catch((error) => { 193 .catch((error) => {
194 // console.log("err====>", err); 194 // console.log("err====>", err);
195 // this.$router.replace({ path: "/" }); 195 // this.$router.replace({ path: "/" });
196 }); 196 });
197 }, 197 },
198 getCourses(classId) { 198 getCourses(classId) {
199 this.showLoader = true; 199 this.showLoader = true;
200 this.studentsData = []; 200 this.studentsData = [];
201 this.getReport.courseId = ""; 201 this.getReport.courseId = "";
202 http() 202 http()
203 .get("/getCourseesList", { 203 .get("/getCourseesList", {
204 params: { 204 params: {
205 classId: classId, 205 classId: classId,
206 }, 206 },
207 }) 207 })
208 .then((response) => { 208 .then((response) => {
209 this.courseData = response.data.data; 209 this.courseData = response.data.data;
210 this.showLoader = false; 210 this.showLoader = false;
211 }) 211 })
212 .catch((err) => { 212 .catch((err) => {
213 // console.log("err====>", err); 213 // console.log("err====>", err);
214 this.showLoader = false; 214 this.showLoader = false;
215 this.snackbar = true;
216 this.color = "error";
217 this.text = error.response.data.message;
215 this.snackbar = true; 218 });
216 this.color = "error"; 219 },
217 this.text = error.response.data.message; 220 getStudents(message) {
218 }); 221 this.showLoader = true;
219 }, 222 http()
220 getStudents(message) { 223 .get("/getStudentsList", {
221 this.showLoader = true; 224 params: {
222 http() 225 classId: this.getReport.classId,
223 .get("/getStudentsList", { 226 },
224 params: { 227 })
225 classId: this.getReport.classId, 228 .then((response) => {
226 }, 229 this.studentsData = response.data.data.filter((item) => item.status);
227 }) 230 //this.studentsData = response.data.data;
228 .then((response) => { 231 this.showLoader = false;
229 this.studentsData = response.data.data.filter((item) => item.status); 232 // this.addStudentAttendenceDialog = false;
230 //this.studentsData = response.data.data; 233 var attendence = "";
231 this.showLoader = false; 234 for (let i = 0; i < this.studentsData.length; i++) {
232 // this.addStudentAttendenceDialog = false; 235 this.studentsData[i].attendence = true;
233 var attendence = ""; 236 }
234 for (let i = 0; i < this.studentsData.length; i++) { 237 this.getParticularCourse(message);
235 this.studentsData[i].attendence = true; 238 })
236 } 239 .catch((error) => {
237 this.getParticularCourse(message); 240 // console.log("err====>", error);
238 }) 241 this.showLoader = false;
242 this.snackbar = true;
243 this.color = "error";
244 this.text = error.response.data.message;
239 .catch((error) => { 245 });
240 // console.log("err====>", error); 246 },
241 this.showLoader = false; 247 getStudentTable(id) {
242 this.snackbar = true; 248 // console.log("id", this.getReport.courseId);
243 this.color = "error"; 249 this.getStudents("noSnackbar");
244 this.text = error.response.data.message; 250 },
245 }); 251 update() {
246 }, 252 var studentsAttendence = [];
247 getStudentTable(id) { 253 for (var j = 0; j < this.studentsData.length; j++) {
248 // console.log("id", this.getReport.courseId); 254 studentsAttendence.push({
249 this.getStudents("noSnackbar"); 255 studentId: this.studentsData[j]._id,
250 }, 256 isPresent: this.studentsData[j].attendence,
251 update() { 257 });
252 var studentsAttendence = []; 258 }
253 for (var j = 0; j < this.studentsData.length; j++) { 259 if (this.$refs.form.validate()) {
254 studentsAttendence.push({ 260 let attendanceData = {
255 studentId: this.studentsData[j]._id, 261 sectionId: this.getReport.sectionId,
256 isPresent: this.studentsData[j].attendence, 262 date: this.date,
257 }); 263 students: studentsAttendence,
258 } 264 };
259 if (this.$refs.form.validate()) { 265 http()
260 let attendanceData = { 266 .put("/updateAttendance", attendanceData)
261 sectionId: this.getReport.sectionId, 267 .then((response) => {
262 date: this.date, 268 this.snackbar = true;
263 students: studentsAttendence, 269 this.text = response.data.message;
264 }; 270 this.addStudentAttendenceDialog = false;
265 http() 271 })
266 .put("/updateAttendance", attendanceData) 272 .catch((error) => {
267 .then((response) => { 273 this.snackbar = true;
268 this.snackbar = true; 274 this.text = error.response.data.message;
269 this.text = response.data.message; 275 });
270 this.addStudentAttendenceDialog = false; 276 }
271 }) 277 },
272 .catch((error) => { 278 toggleAll() {
273 this.snackbar = true; 279 let withdraw = false;
274 this.text = error.response.data.message; 280 if (this.selected.length === this.studentsData.length) withdraw = true;
275 }); 281
276 } 282 if (withdraw) {
277 }, 283 var payload = {
278 toggleAll() { 284 courseId: this.getReport.courseId,
279 let withdraw = false; 285 enrollStudents: [],
280 if (this.selected.length === this.studentsData.length) withdraw = true; 286 };
281 287 http()
282 if (withdraw) { 288 .put("/enrollStudents", payload)
283 var payload = { 289 .then((response) => {
284 courseId: this.getReport.courseId, 290 this.snackbar = true;
285 enrollStudents: [], 291 this.text = response.data.message;
286 }; 292 this.selected = [];
287 http() 293 for (let i = 0; i < this.studentsData.length; i++) {
288 .put("/enrollStudents", payload) 294 this.studentsData[i].enroll = false;
289 .then((response) => { 295 }
290 this.snackbar = true; 296 this.getParticularCourse();
291 this.text = response.data.message; 297 })
292 this.selected = []; 298 .catch((error) => {
293 for (let i = 0; i < this.studentsData.length; i++) { 299 this.snackbar = true;
294 this.studentsData[i].enroll = false; 300 this.text = error.response.data.message;
295 } 301 });
296 this.getParticularCourse(); 302 } else {
297 }) 303 let selectedStudentsArray = [];
298 .catch((error) => { 304 for (let item of this.studentsData) {
299 this.snackbar = true; 305 if (item.enroll === false || !item.enroll) {
300 this.text = error.response.data.message; 306 selectedStudentsArray.push({ studentId: item._id });
301 }); 307 }
302 } else { 308 }
303 let selectedStudentsArray = []; 309
304 for (let item of this.studentsData) { 310 var payload = {
305 if (item.enroll === false || !item.enroll) { 311 courseId: this.getReport.courseId,
306 selectedStudentsArray.push({ studentId: item._id }); 312 enrollStudents: selectedStudentsArray,
307 } 313 };
308 } 314 http()
309 315 .put("/enrollStudents", payload)
310 var payload = { 316 .then((response) => {
311 courseId: this.getReport.courseId, 317 this.snackbar = true;
312 enrollStudents: selectedStudentsArray, 318 this.text = response.data.message;
313 }; 319 for (let i = 0; i < this.studentsData.length; i++) {
314 http() 320 this.studentsData[i].enroll = true;
315 .put("/enrollStudents", payload) 321 }
316 .then((response) => { 322 this.getParticularCourse();
317 this.snackbar = true; 323 })
318 this.text = response.data.message; 324 .catch((error) => {
319 for (let i = 0; i < this.studentsData.length; i++) { 325 this.snackbar = true;
320 this.studentsData[i].enroll = true; 326 this.text = error.response.data.message;
321 } 327 });
322 this.getParticularCourse(); 328 }
323 }) 329 },
324 .catch((error) => { 330
325 this.snackbar = true; 331 selectParticularStudent(selected) {
326 this.text = error.response.data.message; 332 let selectedStudentsArray = [];
327 }); 333 selectedStudentsArray.push({ studentId: selected._id });
328 } 334
329 }, 335 let isExists = false;
330 336 for (let item of this.selected) {
331 selectParticularStudent(selected) { 337 if (item._id === selected._id) {
332 let selectedStudentsArray = []; 338 isExists = true;
333 selectedStudentsArray.push({ studentId: selected._id }); 339 break;
334 340 }
335 let isExists = false; 341 }
336 for (let item of this.selected) { 342
337 if (item._id === selected._id) { 343 if (selected.enroll === true) {
338 isExists = true; 344 if (!isExists) this.selected.push(selected);
339 break; 345 var payload = {
340 } 346 courseId: this.getReport.courseId,
341 } 347 enrollStudents: selectedStudentsArray,
342 348 };
343 if (selected.enroll === true) { 349 http()
344 if (!isExists) this.selected.push(selected); 350 .put("/enrollStudents", payload)
345 var payload = { 351 .then((response) => {
346 courseId: this.getReport.courseId, 352 this.snackbar = true;
347 enrollStudents: selectedStudentsArray, 353 this.text = response.data.message;
348 }; 354 this.getParticularCourse("noSnackbar");
349 http() 355 })
350 .put("/enrollStudents", payload) 356 .catch((error) => {
351 .then((response) => { 357 this.snackbar = true;
352 this.snackbar = true; 358 this.text = error.response.data.message;
353 this.text = response.data.message; 359 });
354 this.getParticularCourse("noSnackbar"); 360 }
355 }) 361 if (
356 .catch((error) => { 362 selected.enroll == false &&
357 this.snackbar = true; 363 selected.enroll != undefined &&
358 this.text = error.response.data.message; 364 selected.enroll != null
359 }); 365 ) {
360 } 366 var payloadDeleteStudents = {
361 if ( 367 courseId: this.getReport.courseId,
362 selected.enroll == false && 368 enrollStudentsId: selected.enrollId,
363 selected.enroll != undefined && 369 };
364 selected.enroll != null 370 http()
365 ) { 371 .put("/deleteStudents", payloadDeleteStudents)
366 var payloadDeleteStudents = { 372 .then((response) => {
367 courseId: this.getReport.courseId, 373 this.snackbar = true;
368 enrollStudentsId: selected.enrollId, 374 this.text = response.data.message;
369 }; 375 this.getParticularCourse();
370 http() 376 })
371 .put("/deleteStudents", payloadDeleteStudents) 377 .catch((error) => {
372 .then((response) => { 378 this.snackbar = true;
373 this.snackbar = true; 379 this.text = error.response.data.message;
374 this.text = response.data.message; 380 });
375 this.getParticularCourse(); 381 }
376 }) 382 },
377 .catch((error) => { 383 getParticularCourse(message) {
378 this.snackbar = true; 384 this.selected = [];
379 this.text = error.response.data.message; 385 var payload = {
380 }); 386 courseId: this.getReport.courseId,
381 } 387 };
382 }, 388 http()
383 getParticularCourse(message) { 389 .get("/getParticularCourse", {
384 this.selected = []; 390 params: payload,
385 var payload = { 391 })
386 courseId: this.getReport.courseId, 392 .then((response) => {
387 }; 393 for (let i = 0; i < response.data.data.enrollStudents.length; i++) {
388 http() 394 var studentId = {};
389 .get("/getParticularCourse", { 395 studentId = response.data.data.enrollStudents[i];
390 params: payload, 396 for (let j = 0; j < this.studentsData.length; j++) {
391 }) 397 if (studentId.studentId == this.studentsData[j]._id) {
392 .then((response) => { 398 this.studentsData[j].enroll = true;
393 for (let i = 0; i < response.data.data.enrollStudents.length; i++) { 399 this.studentsData[j].enrollId = studentId._id;
394 var studentId = {}; 400 this.selected.push(this.studentsData[j]);
395 studentId = response.data.data.enrollStudents[i]; 401 break;
396 for (let j = 0; j < this.studentsData.length; j++) { 402 }
397 if (studentId.studentId == this.studentsData[j]._id) { 403 }
398 this.studentsData[j].enroll = true; 404 }
399 this.studentsData[j].enrollId = studentId._id; 405 if (message != "noSnackbar") {
400 this.selected.push(this.studentsData[j]); 406 this.snackbar = true;
401 break; 407 this.text = response.data.message;
402 } 408 }
403 } 409 })
404 } 410 .catch((error) => {
405 if (message != "noSnackbar") { 411 this.snackbar = true;
406 this.snackbar = true; 412 this.text = error.response.data.message;
407 this.text = response.data.message; 413 });
408 } 414 },
409 }) 415 changeSort(column) {
410 .catch((error) => { 416 if (this.pagination.sortBy === column) {
411 this.snackbar = true; 417 this.pagination.descending = !this.pagination.descending;
412 this.text = error.response.data.message; 418 } else {
413 }); 419 this.pagination.sortBy = column;
414 }, 420 this.pagination.descending = false;
415 changeSort(column) { 421 }
416 if (this.pagination.sortBy === column) { 422 },
417 this.pagination.descending = !this.pagination.descending; 423 displaySearch() {
418 } else { 424 this.show = false;
419 this.pagination.sortBy = column; 425 this.showSearch = true;
420 this.pagination.descending = false; 426 },
421 } 427 closeSearch() {
422 }, 428 this.showSearch = false;
423 displaySearch() { 429 this.show = true;
424 this.show = false; 430 this.search = "";
425 this.showSearch = true; 431 },
426 }, 432 },
427 closeSearch() { 433 mounted() {
428 this.showSearch = false; 434 // this.getStudentList();
429 this.show = true; 435 this.token = this.$store.state.token;
430 this.search = ""; 436 this.role = this.$store.state.role;
431 }, 437 this.getAllClass();
432 }, 438 },
433 mounted() { 439 };
434 // this.getStudentList(); 440 </script>
src/pages/Dashboard/Announcement.vue
Diff comments   View file @8b7976c
1 <template> 1 <template>
2 <div class="body-color"> 2 <div class="body-color">
3 <!-- LOADER --> 3 <!-- LOADER -->
4 <div class="loader" v-if="showLoader"> 4 <div class="loader" v-if="showLoader">
5 <v-progress-circular indeterminate color="white"></v-progress-circular> 5 <v-progress-circular indeterminate color="white"></v-progress-circular>
6 </div> 6 </div>
7 7
8 <!-- SNACKBAR --> 8 <!-- SNACKBAR -->
9 <v-snackbar 9 <v-snackbar
10 :timeout="timeout" 10 :timeout="timeout"
11 :top="y === 'top'" 11 :top="y === 'top'"
12 :right="x === 'right'" 12 :right="x === 'right'"
13 :vertical="mode === 'vertical'" 13 :vertical="mode === 'vertical'"
14 v-model="snackbar" 14 v-model="snackbar"
15 :color="snackbarColor" 15 :color="snackbarColor"
16 > 16 >
17 {{ text }} 17 {{ text }}
18 <v-spacer></v-spacer> 18 <v-spacer></v-spacer>
19 <v-btn flat text @click="snackbar = false">X</v-btn> 19 <v-btn flat text @click="snackbar = false">X</v-btn>
20 </v-snackbar> 20 </v-snackbar>
21 21
22 <v-container grid-list-xl class="pt-0"> 22 <v-container grid-list-xl class="pt-0">
23 <v-layout row class="mt-1"> 23 <v-layout row class="mt-1">
24 <v-flex xs12 md9> 24 <v-flex xs12 md9>
25 <v-layout column> 25 <v-layout column>
26 <!-- HEADING --> 26 <!-- HEADING -->
27 <v-flex> 27 <v-flex>
28 <div class="title side-bar-color font-weight-bold">Announcements</div> 28 <div class="title side-bar-color font-weight-bold">Announcements</div>
29 <div class="subheading grey--text lighten-1">General news and announcements</div> 29 <div class="subheading grey--text lighten-1">General news and announcements</div>
30 </v-flex> 30 </v-flex>
31 31
32 <!-- DATA TABLE --> 32 <!-- DATA TABLE -->
33 <v-flex> 33 <v-flex>
34 <v-data-table 34 <v-data-table
35 :headers="announcementHeaders" 35 :headers="announcementHeaders"
36 :items="announcementsList" 36 :items="announcementsList"
37 :pagination.sync="pagination" 37 :pagination.sync="pagination"
38 :search="search" 38 :search="search"
39 item-key="_id" 39 item-key="_id"
40 > 40 >
41 <template slot="items" slot-scope="props"> 41 <template slot="items" slot-scope="props">
42 <tr 42 <tr
43 class="tr" 43 class="tr"
44 @click="props.expanded = !props.expanded; selectedAnnoucementId = props.item._id; getDiscussionesThread()" 44 @click="props.expanded = !props.expanded; selectedAnnoucementId = props.item._id; getDiscussionesThread()"
45 style="cursor: pointer;" 45 style="cursor: pointer;"
46 > 46 >
47 <td class="text-xs-center td td-row"> 47 <td class="text-xs-center td td-row">
48 <v-avatar size="40"> 48 <v-avatar size="40">
49 <img :src="props.item.attachementUrl" v-if="props.item.attachementUrl" /> 49 <img :src="props.item.attachementUrl" v-if="props.item.attachementUrl" />
50 <img src="/static/icon/user.png" v-else-if="!props.item.attachementUrl" /> 50 <img src="/static/icon/user.png" v-else-if="!props.item.attachementUrl" />
51 </v-avatar> 51 </v-avatar>
52 </td> 52 </td>
53 <td class="text-xs-center td td-row">{{ props.item.discussionType}}</td> 53 <td class="text-xs-center td td-row">{{ props.item.discussionType}}</td>
54 <td class="text-xs-center td td-row"> 54 <td class="text-xs-center td td-row">
55 <span> 55 <span>
56 <v-tooltip top> 56 <v-tooltip top>
57 <img 57 <img
58 slot="activator" 58 slot="activator"
59 style="cursor:pointer; width:25px; height:25px; " 59 style="cursor:pointer; width:25px; height:25px; "
60 class="mr-3" 60 class="mr-3"
61 @click="profile(props.item)" 61 @click="profile(props.item)"
62 src="/static/icon/view.png" 62 src="/static/icon/view.png"
63 /> 63 />
64 <span>View</span> 64 <span>View</span>
65 </v-tooltip> 65 </v-tooltip>
66 </span> 66 </span>
67 </td> 67 </td>
68 </tr> 68 </tr>
69 </template> 69 </template>
70 <!-- COURSE ANNOUNCEMENTS REPLY FUNCTIONALITY --> 70 <!-- COURSE ANNOUNCEMENTS REPLY FUNCTIONALITY -->
71 <template slot="expand" slot-scope="props"> 71 <template slot="expand" slot-scope="props">
72 <v-layout> 72 <v-layout>
73 <v-flex xs12 v-for="(annoucementData,i) in annoucementData" :key="i"> 73 <v-flex xs12 v-for="(annoucementData,i) in annoucementData" :key="i">
74 <!-- TOPIC HEADING --> 74 <!-- TOPIC HEADING -->
75 <v-card class="elevation-0 grey lighten-3 pa-2" flat> 75 <v-card class="elevation-0 grey lighten-3 pa-2" flat>
76 <v-list two-line subheader> 76 <v-list two-line subheader>
77 <v-list-tile> 77 <v-list-tile>
78 <v-list-tile-avatar> 78 <v-list-tile-avatar>
79 <v-avatar size="46"> 79 <v-avatar size="46">
80 <img 80 <img
81 :src="annoucementData.attachementUrl" 81 :src="annoucementData.attachementUrl"
82 v-if="annoucementData.attachementUrl" 82 v-if="annoucementData.attachementUrl"
83 /> 83 />
84 <img 84 <img
85 src="/static/icon/user.png" 85 src="/static/icon/user.png"
86 v-else-if="!annoucementData.attachementUrl" 86 v-else-if="!annoucementData.attachementUrl"
87 /> 87 />
88 </v-avatar> 88 </v-avatar>
89 </v-list-tile-avatar> 89 </v-list-tile-avatar>
90 <v-list-tile-content> 90 <v-list-tile-content>
91 <v-list-tile-title>{{ annoucementData.discussionType }}</v-list-tile-title> 91 <v-list-tile-title>{{ annoucementData.discussionType }}</v-list-tile-title>
92 <!-- <v-list-tile-sub-title> 92 <!-- <v-list-tile-sub-title>
93 By 93 By
94 <span class="info--text">{{ annoucementData.studentId.name }}</span> 94 <span class="info--text">{{ annoucementData.studentId.name }}</span>
95 - {{dates(annoucementData.created ) }} 95 - {{dates(annoucementData.created ) }}
96 </v-list-tile-sub-title>--> 96 </v-list-tile-sub-title>-->
97 </v-list-tile-content> 97 </v-list-tile-content>
98 <v-list-tile-action> 98 <v-list-tile-action>
99 <div> 99 <div>
100 <v-btn 100 <v-btn
101 flat 101 flat
102 round 102 round
103 dark 103 dark
104 class="reply-btn" 104 class="reply-btn"
105 @click="showReplyBox = true" 105 @click="showReplyBox = true"
106 >Reply</v-btn> 106 >Reply</v-btn>
107 </div> 107 </div>
108 </v-list-tile-action> 108 </v-list-tile-action>
109 </v-list-tile> 109 </v-list-tile>
110 </v-list> 110 </v-list>
111 </v-card> 111 </v-card>
112 <!-- REPLY BOX --> 112 <!-- REPLY BOX -->
113 <v-flex xs12 class="mt-4" v-show="showReplyBox"> 113 <v-flex xs12 class="mt-4" v-show="showReplyBox">
114 <v-textarea 114 <v-textarea
115 name="input-7-1" 115 name="input-7-1"
116 solo 116 solo
117 label="Label Text" 117 label="Label Text"
118 multi-line 118 multi-line
119 v-model="replyDescription" 119 v-model="replyDescription"
120 ></v-textarea> 120 ></v-textarea>
121 <v-btn 121 <v-btn
122 round 122 round
123 dark 123 dark
124 class="open-dialog-button" 124 class="open-dialog-button"
125 flat 125 flat
126 @click="showReplyBox = false" 126 @click="showReplyBox = false"
127 >Cancel</v-btn> 127 >Cancel</v-btn>
128 <v-btn 128 <v-btn
129 round 129 round
130 dark 130 dark
131 :loading="loading" 131 :loading="loading"
132 class="reply-btn" 132 class="reply-btn"
133 @click="replyThreadDiscussion()" 133 @click="replyThreadDiscussion()"
134 >Submit</v-btn> 134 >Submit</v-btn>
135 </v-flex> 135 </v-flex>
136 <!-- REPLY THREAD --> 136 <!-- REPLY THREAD -->
137 <v-layout 137 <v-layout
138 :class="['mt-4','pl-5','mx-auto',replyThread.teacherId?'justify-start':'justify-end']" 138 :class="['mt-4','pl-5','mx-auto',replyThread.teacherId?'justify-start':'justify-end']"
139 v-for="(replyThread,i) in annoucementData.discussionThread.slice().reverse()" 139 v-for="(replyThread,i) in annoucementData.discussionThread.slice().reverse()"
140 :key="i" 140 :key="i"
141 > 141 >
142 <v-flex xs12 md7> 142 <v-flex xs12 md7>
143 <v-card class="elevation-0 grey lighten-1" flat> 143 <v-card class="elevation-0 grey lighten-1" flat>
144 <v-list two-line subheader class="grey lighten-1 pa-1"> 144 <v-list two-line subheader class="grey lighten-1 pa-1">
145 <v-list-tile> 145 <v-list-tile>
146 <v-list-tile-avatar> 146 <v-list-tile-avatar>
147 <v-avatar size="46"> 147 <v-avatar size="46">
148 <img 148 <img
149 :src="annoucementData.attachementUrl" 149 :src="annoucementData.attachementUrl"
150 v-if="annoucementData.attachementUrl" 150 v-if="annoucementData.attachementUrl"
151 /> 151 />
152 <img 152 <img
153 src="/static/icon/user.png" 153 src="/static/icon/user.png"
154 v-else-if="!annoucementData.attachementUrl" 154 v-else-if="!annoucementData.attachementUrl"
155 /> 155 />
156 </v-avatar> 156 </v-avatar>
157 </v-list-tile-avatar> 157 </v-list-tile-avatar>
158 <v-list-tile-content> 158 <v-list-tile-content>
159 <v-list-tile-title>Re: {{ annoucementData.discussionType }}</v-list-tile-title> 159 <v-list-tile-title>Re: {{ annoucementData.discussionType }}</v-list-tile-title>
160 <v-list-tile-sub-title> 160 <v-list-tile-sub-title>
161 By 161 By
162 <span 162 <span
163 class="info--text" 163 class="info--text"
164 v-if="replyThread.teacherId" 164 v-if="replyThread.teacherId"
165 >{{ replyThread.teacherId.name }}</span> 165 >{{ replyThread.teacherId.name }}</span>
166 <span 166 <span
167 class="info--text" 167 class="info--text"
168 v-if="replyThread.studentId" 168 v-if="replyThread.studentId"
169 >{{ replyThread.studentId.name }}</span> 169 >{{ replyThread.studentId.name }}</span>
170 - {{dates(replyThread.created ) }} 170 - {{dates(replyThread.created ) }}
171 </v-list-tile-sub-title> 171 </v-list-tile-sub-title>
172 </v-list-tile-content> 172 </v-list-tile-content>
173 </v-list-tile> 173 </v-list-tile>
174 </v-list> 174 </v-list>
175 <v-list class="pa-2 reply-desc"> 175 <v-list class="pa-2 reply-desc">
176 <v-list-tile-content> 176 <v-list-tile-content>
177 <v-list-tile-title 177 <v-list-tile-title
178 v-show="replyThread.showDescriptionReplyThread" 178 v-show="replyThread.showDescriptionReplyThread"
179 >{{ replyThread.description }}</v-list-tile-title> 179 >{{ replyThread.description }}</v-list-tile-title>
180 <v-flex 180 <v-flex
181 xs12 181 xs12
182 sm12 182 sm12
183 md4 183 md4
184 v-show="replyThread.showUpdateReplyThread == true" 184 v-show="replyThread.showUpdateReplyThread == true"
185 > 185 >
186 <v-text-field v-model="replyThread.description"></v-text-field> 186 <v-text-field v-model="replyThread.description"></v-text-field>
187 <v-btn 187 <v-btn
188 flat 188 flat
189 round 189 round
190 dark 190 dark
191 class="reply-btn right" 191 class="reply-btn right"
192 @click="updateRelpyThreadDiscussion(replyThread)" 192 @click="updateRelpyThreadDiscussion(replyThread)"
193 >Save</v-btn> 193 >Save</v-btn>
194 </v-flex> 194 </v-flex>
195 </v-list-tile-content> 195 </v-list-tile-content>
196 </v-list> 196 </v-list>
197 <v-list class="grey lighten-4 pa-0"> 197 <v-list class="grey lighten-4 pa-0">
198 <v-list-tile-action> 198 <v-list-tile-action>
199 <v-spacer></v-spacer> 199 <v-spacer></v-spacer>
200 <div 200 <div
201 v-if="replyThread.studentId && replyThread.studentId._id == localStorage.getItem('parentStudentId')" 201 v-if="replyThread.studentId && replyThread.studentId._id == localStorage.getItem('parentStudentId')"
202 > 202 >
203 <v-btn 203 <v-btn
204 flat 204 flat
205 round 205 round
206 dark 206 dark
207 class="reply-btn" 207 class="reply-btn"
208 @click="deleteRelpyThreadDiscussion(replyThread._id)" 208 @click="deleteRelpyThreadDiscussion(replyThread._id)"
209 >Delete</v-btn> 209 >Delete</v-btn>
210 <v-btn 210 <v-btn
211 flat 211 flat
212 round 212 round
213 dark 213 dark
214 class="reply-btn mr-4" 214 class="reply-btn mr-4"
215 @click="showUpdateReplyThreadDiscussion(replyThread)" 215 @click="showUpdateReplyThreadDiscussion(replyThread)"
216 >Edit</v-btn> 216 >Edit</v-btn>
217 </div> 217 </div>
218 </v-list-tile-action> 218 </v-list-tile-action>
219 </v-list> 219 </v-list>
220 </v-card> 220 </v-card>
221 </v-flex> 221 </v-flex>
222 </v-layout> 222 </v-layout>
223 </v-flex> 223 </v-flex>
224 </v-layout> 224 </v-layout>
225 </template> 225 </template>
226 226
227 <v-alert 227 <v-alert
228 slot="no-results" 228 slot="no-results"
229 :value="true" 229 :value="true"
230 color="error" 230 color="error"
231 icon="warning" 231 icon="warning"
232 >Your search for "{{ search }}" found no results.</v-alert> 232 >Your search for "{{ search }}" found no results.</v-alert>
233 </v-data-table> 233 </v-data-table>
234 </v-flex> 234 </v-flex>
235 </v-layout> 235 </v-layout>
236 </v-flex> 236 </v-flex>
237 237
238 <v-spacer></v-spacer> 238 <v-spacer></v-spacer>
239 239
240 <!-- COURSES - positioned to the right of the page --> 240 <!-- COURSES - positioned to the right of the page -->
241 <v-flex xs12 md3> 241 <v-flex xs12 md3>
242 <v-card class="elevation-0 card-border" height="100%"> 242 <v-card class="elevation-0 card-border" height="100%">
243 <v-container class="pt-0"> 243 <v-container class="pt-0">
244 <div class="side-bar-color font-weight-bold title">Courses</div> 244 <div class="side-bar-color font-weight-bold title">Courses</div>
245 245
246 <div v-for="(course,index) in courseData"> 246 <div v-for="(course,index) in courseData">
247 <v-btn 247 <v-btn
248 flat 248 flat
249 class="subheading text-xs-start justify-left" 249 class="subheading text-xs-start justify-left"
250 style="cursor: pointer;" 250 style="cursor: pointer;"
251 block 251 block
252 @click="routeToCourseDetails(course._id)" 252 @click="routeToCourseDetails(course._id)"
253 > 253 >
254 <div style="width: 100%;text-align: left;"> 254 <div style="width: 100%;text-align: left;">
255 <v-icon style="color: red;padding-bottom: 3px;" size="15">play_arrow</v-icon> 255 <v-icon style="color: red;padding-bottom: 3px;" size="15">play_arrow</v-icon>
256 {{course.courseName}} 256 {{course.courseName}}
257 </div> 257 </div>
258 </v-btn> 258 </v-btn>
259 </div> 259 </div>
260 </v-container> 260 </v-container>
261 </v-card> 261 </v-card>
262 </v-flex> 262 </v-flex>
263 </v-layout> 263 </v-layout>
264 </v-container> 264 </v-container>
265 </div> 265 </div>
266 </template> 266 </template>
267 <script> 267 <script>
268 import AllApiCalls from "@/Services/AllApiCalls.js"; 268 import AllApiCalls from "@/Services/AllApiCalls.js";
269 import http from "@/Services/http.js"; 269 import http from "@/Services/http.js";
270 import moment from "moment"; 270 import moment from "moment";
271 export default { 271 export default {
272 mixins: [AllApiCalls], 272 mixins: [AllApiCalls],
273 data() { 273 data() {
274 return { 274 return {
275 // DATA TABLE 275 // DATA TABLE
276 localStorage: localStorage, 276 localStorage: localStorage,
277 moment: moment, 277 moment: moment,
278 search: "", 278 search: "",
279 pagination: { 279 pagination: {
280 rowsPerPage: 10, 280 rowsPerPage: 10,
281 }, 281 },
282 announcementHeaders: [ 282 announcementHeaders: [
283 { 283 {
284 text: "Image", 284 text: "Image",
285 value: "attachementUrl", 285 value: "attachementUrl",
286 sortable: false, 286 sortable: false,
287 align: "center", 287 align: "center",
288 }, 288 },
289 { 289 {
290 text: "Discussion Type", 290 text: "Discussion Type",
291 value: "discussionType", 291 value: "discussionType",
292 sortable: false, 292 sortable: false,
293 align: "center", 293 align: "center",
294 }, 294 },
295 { text: "Action", value: "", sortable: false, align: "center" }, 295 { text: "Action", value: "", sortable: false, align: "center" },
296 ], 296 ],
297 announcementsList: [], 297 announcementsList: [],
298 selectedAnnoucementId: "", 298 selectedAnnoucementId: "",
299 299
300 // COURSE ANNOUNCEMENTS REPLY FUNCTONALITY 300 // COURSE ANNOUNCEMENTS REPLY FUNCTONALITY
301 snackbar: false, 301 snackbar: false,
302 y: "top", 302 y: "top",
303 x: "right", 303 x: "right",
304 mode: "", 304 mode: "",
305 timeout: 3000, 305 timeout: 3000,
306 text: "", 306 text: "",
307 showLoader: false, 307 showLoader: false,
308 loading: false, 308 loading: false,
309 date: null, 309 date: null,
310 token: "", 310 token: "",
311 role: "", 311 role: "",
312 schoolRole: "", 312 schoolRole: "",
313 menu: false, 313 menu: false,
314 annoucementData: {}, 314 annoucementData: {},
315 showReplyBox: false, 315 showReplyBox: false,
316 replyDescription: "", 316 replyDescription: "",
317 loginId: "", 317 loginId: "",
318 editedIndex: -1, 318 editedIndex: -1,
319 }; 319 };
320 }, 320 },
321 methods: { 321 methods: {
322 getAnnoucementes() { 322 getAnnoucementes() {
323 this.showLoader = true; 323 this.showLoader = true;
324 http() 324 http()
325 .get("/getAnnoucementesList", { 325 .get("/getAnnoucementesList", {
326 params: { 326 params: {
327 courseId: this.$route.query.courseId, 327 courseId: this.$route.query.courseId,
328 classId: localStorage.getItem("parentClassId"), 328 classId: localStorage.getItem("parentClassId"),
329 }, 329 },
330 }) 330 })
331 .then((response) => { 331 .then((response) => {
332 this.announcementsList = response.data.data; 332 this.announcementsList = response.data.data;
333 this.showLoader = false; 333 this.showLoader = false;
334 }) 334 })
335 .catch((err) => { 335 .catch((err) => {
336 // console.log("err====>", err); 336 // console.log("err====>", err);
337 this.showLoader = false; 337 this.showLoader = false;
338 this.snackbar = true;
339 this.color = "error";
340 this.text = error.response.data.message;
338 this.snackbar = true; 341 });
339 this.color = "error"; 342 },
340 this.text = error.response.data.message; 343
341 }); 344 async routeToCourseDetails(courseId) {
342 }, 345 /* getParticularCourseDetail- To get courseDetail - defined in GetApis.js*/
343 346 let response = await this.getParticularCourseDetail(courseId);
344 async routeToCourseDetails(courseId) { 347
345 /* getParticularCourseDetail- To get courseDetail - defined in GetApis.js*/ 348 /* If the response is null then dont route */
346 let response = await this.getParticularCourseDetail(courseId); 349 if (response.data.data.length > 0) {
347 350 this.$router.push({
348 /* If the response is null then dont route */ 351 name: "Course Details",
349 if (response.data.data.length > 0) { 352 query: { courseId: courseId },
350 this.$router.push({ 353 });
351 name: "Course Details", 354 } else {
352 query: { courseId: courseId }, 355 this.seeSnackbar("No Data Available", "warning");
353 }); 356 }
354 } else { 357 },
355 this.seeSnackbar("No Data Available", "warning"); 358
356 } 359 // COURSE ANNOUNCEMENTS REPLY FUNCTONALITY
357 }, 360 dates: function (date) {
358 361 return moment(date).format("MMMM DD, YYYY hh:mm A");
359 // COURSE ANNOUNCEMENTS REPLY FUNCTONALITY 362 },
360 dates: function (date) { 363 getDiscussionesThread() {
361 return moment(date).format("MMMM DD, YYYY hh:mm A"); 364 // console.log("id", this.getSelectedData.courseId);
362 }, 365 this.showLoader = true;
363 getDiscussionesThread() { 366 http()
364 // console.log("id", this.getSelectedData.courseId); 367 .get("/getParticularAnnoucement", {
365 this.showLoader = true; 368 params: {
366 http() 369 annoucementId: this.selectedAnnoucementId,
367 .get("/getParticularAnnoucement", { 370 },
368 params: { 371 })
369 annoucementId: this.selectedAnnoucementId, 372 .then((response) => {
370 }, 373 // console.log("response", response.data.data);
371 }) 374 this.annoucementData = response.data.data;
372 .then((response) => { 375 // console.log("response", this.annoucementData);
373 // console.log("response", response.data.data); 376 for (let i = 0; i < this.annoucementData.length; i++) {
374 this.annoucementData = response.data.data; 377 for (
375 // console.log("response", this.annoucementData); 378 let j = 0;
376 for (let i = 0; i < this.annoucementData.length; i++) { 379 j < this.annoucementData[i].discussionThread.length;
377 for ( 380 j++
378 let j = 0; 381 ) {
379 j < this.annoucementData[i].discussionThread.length; 382 if (this.annoucementData[i].discussionThread[j]) {
380 j++ 383 this.annoucementData[i].discussionThread[
381 ) { 384 j
382 if (this.annoucementData[i].discussionThread[j]) { 385 ].showUpdateReplyThread = false;
383 this.annoucementData[i].discussionThread[ 386 this.annoucementData[i].discussionThread[
384 j 387 j
385 ].showUpdateReplyThread = false; 388 ].showDescriptionReplyThread = true;
386 this.annoucementData[i].discussionThread[ 389 }
387 j 390 }
388 ].showDescriptionReplyThread = true; 391 }
389 } 392 this.showLoader = false;
390 } 393 this.showReplyBox = false;
391 } 394 })
392 this.showLoader = false; 395 .catch((error) => {
393 this.showReplyBox = false; 396 // console.log("err====>", error);
394 }) 397 this.showLoader = false;
398 this.snackbar = true;
399 this.color = "error";
400 this.text = error.response.data.message;
395 .catch((error) => { 401 });
396 // console.log("err====>", error); 402 },
397 this.showLoader = false; 403 replyThreadDiscussion() {
398 this.snackbar = true; 404 this.showLoader = true;
399 this.color = "error"; 405 var payloadData = {
400 this.text = error.response.data.message; 406 annoucementId: this.selectedAnnoucementId,
401 }); 407 studentId: localStorage.getItem("parentStudentId"),
402 }, 408 description: this.replyDescription,
403 replyThreadDiscussion() { 409 };
404 this.showLoader = true; 410 http()
405 var payloadData = { 411 .put("/replyThread", payloadData)
406 annoucementId: this.selectedAnnoucementId, 412 .then((response) => {
407 studentId: localStorage.getItem("parentStudentId"), 413 this.showLoader = false;
408 description: this.replyDescription, 414 this.getDiscussionesThread();
409 }; 415 })
410 http() 416 .catch((error) => {
411 .put("/replyThread", payloadData) 417 this.showLoader = false;
412 .then((response) => { 418 });
413 this.showLoader = false; 419 },
414 this.getDiscussionesThread(); 420 showUpdateReplyThreadDiscussion(item) {
415 }) 421 this.editedIndex = this.annoucementData.indexOf(item);
416 .catch((error) => { 422 var editedItem = Object.assign({}, item);
417 this.showLoader = false; 423 var arrayOfannoucementData = [];
418 }); 424 for (let i = 0; i < this.annoucementData.length; i++) {
419 }, 425 for (
420 showUpdateReplyThreadDiscussion(item) { 426 let j = 0;
421 this.editedIndex = this.annoucementData.indexOf(item); 427 j < this.annoucementData[i].discussionThread.length;
422 var editedItem = Object.assign({}, item); 428 j++
423 var arrayOfannoucementData = []; 429 ) {
424 for (let i = 0; i < this.annoucementData.length; i++) { 430 if (
425 for ( 431 editedItem._id == this.annoucementData[i].discussionThread[j]._id
426 let j = 0; 432 ) {
427 j < this.annoucementData[i].discussionThread.length; 433 this.annoucementData[i].discussionThread[
428 j++ 434 j
429 ) { 435 ].showUpdateReplyThread = true;
430 if ( 436 this.annoucementData[i].discussionThread[
431 editedItem._id == this.annoucementData[i].discussionThread[j]._id 437 j
432 ) { 438 ].showDescriptionReplyThread = false;
433 this.annoucementData[i].discussionThread[ 439 }
434 j 440 }
435 ].showUpdateReplyThread = true; 441 arrayOfannoucementData.push(this.annoucementData[i]);
436 this.annoucementData[i].discussionThread[ 442 }
437 j 443 this.annoucementData = arrayOfannoucementData;
438 ].showDescriptionReplyThread = false; 444 },
439 } 445 updateRelpyThreadDiscussion(replyThread) {
440 } 446 this.showLoader = true;
441 arrayOfannoucementData.push(this.annoucementData[i]); 447 var payloadData = {
442 } 448 discussionThreadId: replyThread._id,
443 this.annoucementData = arrayOfannoucementData; 449 annoucementId: this.selectedAnnoucementId,
444 }, 450 studentId: localStorage.getItem("parentStudentId"),
445 updateRelpyThreadDiscussion(replyThread) { 451 description: replyThread.description,
446 this.showLoader = true; 452 };
447 var payloadData = { 453 http()
448 discussionThreadId: replyThread._id, 454 .put("/updateThread", payloadData)
449 annoucementId: this.selectedAnnoucementId, 455 .then((response) => {
450 studentId: localStorage.getItem("parentStudentId"), 456 this.showLoader = false;
451 description: replyThread.description, 457 this.getDiscussionesThread();
452 }; 458 })
453 http() 459 .catch((error) => {
454 .put("/updateThread", payloadData) 460 this.showLoader = false;
455 .then((response) => { 461 });
456 this.showLoader = false; 462 },
457 this.getDiscussionesThread(); 463 deleteRelpyThreadDiscussion(id) {
458 }) 464 this.showLoader = true;
459 .catch((error) => { 465 var payloadData = {
460 this.showLoader = false; 466 discussionThreadId: id,
461 }); 467 annoucementId: this.selectedAnnoucementId,
462 }, 468 };
463 deleteRelpyThreadDiscussion(id) { 469 http()
464 this.showLoader = true; 470 .put(
465 var payloadData = { 471 "/deleteThread",
466 discussionThreadId: id, 472 confirm("Are you sure you want to delete this?") && payloadData
467 annoucementId: this.selectedAnnoucementId, 473 )
468 }; 474 .then((response) => {
469 http() 475 this.showLoader = false;
470 .put( 476 this.getDiscussionesThread();
471 "/deleteThread", 477 })
472 confirm("Are you sure you want to delete this?") && payloadData 478 .catch((error) => {
473 ) 479 this.showLoader = false;
474 .then((response) => { 480 });
475 this.showLoader = false; 481 },
476 this.getDiscussionesThread(); 482 },
477 }) 483 async created() {
478 .catch((error) => { 484 /* getStudentCourses - to get courseData - defined in GetApis.js*/
479 this.showLoader = false; 485 await this.getStudentCourses({
480 }); 486 classId: localStorage.getItem("parentClassId"),
481 }, 487 studentId: localStorage.getItem("parentStudentId"),
482 }, 488 });
483 async created() { 489
484 /* getStudentCourses - to get courseData - defined in GetApis.js*/ 490 /* getAnnoucementesList - to populate the data table */
485 await this.getStudentCourses({ 491 this.getAnnoucementes();
486 classId: localStorage.getItem("parentClassId"), 492 },
487 studentId: localStorage.getItem("parentStudentId"), 493 };
488 }); 494 </script>
489 495 <style scoped>
490 /* getAnnoucementesList - to populate the data table */ 496 .side-bar-color {
491 this.getAnnoucementes(); 497 color: #827bfa !important;
492 }, 498 /* border-top-right-radius: 74px !important; */
493 }; 499 }
494 </script> 500 .card-border {
495 <style scoped> 501 border: 1px #bdbdbd solid;
496 .side-bar-color { 502 border-radius: 3px;
497 color: #827bfa !important; 503 }
498 /* border-top-right-radius: 74px !important; */ 504
499 } 505 /* ANNOUNCEMENTS REPLY FUNCTIONALITY */
500 .card-border { 506 .reply-desc {
501 border: 1px #bdbdbd solid; 507 border: 1px solid #f2f2f2;
502 border-radius: 3px; 508 }
503 } 509 .open-dialog-button {
504 510 background: #827bfa !important;
505 /* ANNOUNCEMENTS REPLY FUNCTIONALITY */ 511 border-color: #827bfa !important;
506 .reply-desc { 512 text-transform: none !important;
507 border: 1px solid #f2f2f2; 513 }
508 } 514
509 .open-dialog-button { 515 .reply-btn {
510 background: #827bfa !important; 516 background: #feb83c !important;
511 border-color: #827bfa !important; 517 border-color: #feb83c !important;
512 text-transform: none !important; 518 text-transform: none !important;
513 } 519 -webkit-box-shadow: none !important;
514 520 box-shadow: none !important;
515 .reply-btn { 521 }
516 background: #feb83c !important; 522 </style>
src/pages/Dashboard/ChapterInfo.vue
Diff comments   View file @8b7976c
1 <template> 1 <template>
2 <div> 2 <div>
3 <!-- LOADER --> 3 <!-- LOADER -->
4 <div class="loader" v-if="showLoader"> 4 <div class="loader" v-if="showLoader">
5 <v-progress-circular indeterminate color="white"></v-progress-circular> 5 <v-progress-circular indeterminate color="white"></v-progress-circular>
6 </div> 6 </div>
7 7
8 <!-- SNACKBAR --> 8 <!-- SNACKBAR -->
9 <v-snackbar 9 <v-snackbar
10 :timeout="timeout" 10 :timeout="timeout"
11 :top="y === 'top'" 11 :top="y === 'top'"
12 :right="x === 'right'" 12 :right="x === 'right'"
13 :vertical="mode === 'vertical'" 13 :vertical="mode === 'vertical'"
14 v-model="snackbar" 14 v-model="snackbar"
15 :color="snackbarColor" 15 :color="snackbarColor"
16 > 16 >
17 {{ text }} 17 {{ text }}
18 <v-spacer></v-spacer> 18 <v-spacer></v-spacer>
19 <v-btn flat text @click="snackbar = false">X</v-btn> 19 <v-btn flat text @click="snackbar = false">X</v-btn>
20 </v-snackbar> 20 </v-snackbar>
21 21
22 <v-container class="pt-0"> 22 <v-container class="pt-0">
23 <v-layout row wrap class="mt-1"> 23 <v-layout row wrap class="mt-1">
24 <v-flex xs8> 24 <v-flex xs8>
25 <!-- CHAPTER INFO --> 25 <!-- CHAPTER INFO -->
26 <div class="title side-bar-color font-weight-bold">{{chapter.chapters[0].chapterName}}</div> 26 <div class="title side-bar-color font-weight-bold">{{chapter.chapters[0].chapterName}}</div>
27 <div class="subheading grey--text lighten-1">{{chapter.chapters[0].description}}</div> 27 <div class="subheading grey--text lighten-1">{{chapter.chapters[0].description}}</div>
28 <div 28 <div
29 v-for="(point,index) in chapter.chapters[0].chapterPoints" 29 v-for="(point,index) in chapter.chapters[0].chapterPoints"
30 :key="index" 30 :key="index"
31 class="ml-2 mt-2" 31 class="ml-2 mt-2"
32 > 32 >
33 <span class="subheading grey--text lighten-1">{{index +1}}. {{point}}</span> 33 <span class="subheading grey--text lighten-1">{{index +1}}. {{point}}</span>
34 </div> 34 </div>
35 <!-- ACTIVITIES --> 35 <!-- ACTIVITIES -->
36 <div class="mt-5"> 36 <div class="mt-5">
37 <v-icon>library_books</v-icon> 37 <v-icon>library_books</v-icon>
38 <span class="subheading font-weight-bold">Activities</span> 38 <span class="subheading font-weight-bold">Activities</span>
39 </div> 39 </div>
40 <!-- OTHER OPTIONS --> 40 <!-- OTHER OPTIONS -->
41 <div class="mt-5"> 41 <div class="mt-5">
42 <ul class="subheading"> 42 <ul class="subheading">
43 <!-- LIVE ONLINE CLASSES --> 43 <!-- LIVE ONLINE CLASSES -->
44 <div> 44 <div>
45 <v-btn flat class="px-4"> 45 <v-btn flat class="px-4">
46 <li 46 <li
47 @click="$router.push({name: 'Live Online Class', query: {chapterId: $route.query.selectedChapterId, chapterName: chapter.chapters[0].chapterName, courseId: $route.query.courseId, classId: localStorage.getItem('parentClassId') } })" 47 @click="$router.push({name: 'Live Online Class', query: {chapterId: $route.query.selectedChapterId, chapterName: chapter.chapters[0].chapterName, courseId: $route.query.courseId, classId: localStorage.getItem('parentClassId') } })"
48 >Live online classes</li> 48 >Live online classes</li>
49 </v-btn> 49 </v-btn>
50 </div> 50 </div>
51 <!-- OPEN PDF IN NEW TAB --> 51 <!-- OPEN PDF IN NEW TAB -->
52 <div> 52 <div>
53 <a 53 <a
54 :href="chapter.chapters[0].pdfFileUrl" 54 :href="chapter.chapters[0].pdfFileUrl"
55 target="_blank" 55 target="_blank"
56 style="text-decoration: none!important;" 56 style="text-decoration: none!important;"
57 > 57 >
58 <v-btn flat class="px-4"> 58 <v-btn flat class="px-4">
59 <li>Open PDF</li> 59 <li>Open PDF</li>
60 </v-btn> 60 </v-btn>
61 </a> 61 </a>
62 </div> 62 </div>
63 63
64 <!-- <li> 64 <!-- <li>
65 <v-btn flat>HSP Interactive content</v-btn> 65 <v-btn flat>HSP Interactive content</v-btn>
66 </li> 66 </li>
67 <li> 67 <li>
68 <v-btn flat>Assessment</v-btn> 68 <v-btn flat>Assessment</v-btn>
69 </li>--> 69 </li>-->
70 </ul> 70 </ul>
71 </div> 71 </div>
72 72
73 <!-- SELECT CHAPTERS --> 73 <!-- SELECT CHAPTERS -->
74 <v-layout row class="mt-5"> 74 <v-layout row class="mt-5">
75 <!-- PREVIOUS CHAPTER --> 75 <!-- PREVIOUS CHAPTER -->
76 <v-flex 76 <v-flex
77 style="cursor: pointer;" 77 style="cursor: pointer;"
78 class="subheading font-weight-bold text-xs-left" 78 class="subheading font-weight-bold text-xs-left"
79 v-if="indexSelectedChapter > 0" 79 v-if="indexSelectedChapter > 0"
80 @click="showSelectedChapter('back')" 80 @click="showSelectedChapter('back')"
81 > 81 >
82 <v-icon class="black--text" style="position:relative; top: 4px;">chevron_left</v-icon> 82 <v-icon class="black--text" style="position:relative; top: 4px;">chevron_left</v-icon>
83 {{chapterNames[indexSelectedChapter - 1]}} 83 {{chapterNames[indexSelectedChapter - 1]}}
84 </v-flex> 84 </v-flex>
85 <v-spacer></v-spacer> 85 <v-spacer></v-spacer>
86 <!-- NEXT CHAPTER --> 86 <!-- NEXT CHAPTER -->
87 <v-flex 87 <v-flex
88 style="cursor: pointer;" 88 style="cursor: pointer;"
89 class="subheading font-weight-bold text-xs-right" 89 class="subheading font-weight-bold text-xs-right"
90 v-if="indexSelectedChapter < chapterNames.length -1" 90 v-if="indexSelectedChapter < chapterNames.length -1"
91 @click="showSelectedChapter('forward')" 91 @click="showSelectedChapter('forward')"
92 > 92 >
93 {{chapterNames[indexSelectedChapter + 1]}} 93 {{chapterNames[indexSelectedChapter + 1]}}
94 <v-icon class="black--text" style="position:relative; top: 4px;">chevron_right</v-icon> 94 <v-icon class="black--text" style="position:relative; top: 4px;">chevron_right</v-icon>
95 </v-flex> 95 </v-flex>
96 </v-layout> 96 </v-layout>
97 <!-- <v-flex class="text-xs-right mt-5" v-else> 97 <!-- <v-flex class="text-xs-right mt-5" v-else>
98 <span class="subheading font-weight-bold">Return to chapter one</span> 98 <span class="subheading font-weight-bold">Return to chapter one</span>
99 </v-flex>--> 99 </v-flex>-->
100 </v-flex> 100 </v-flex>
101 101
102 <v-spacer></v-spacer> 102 <v-spacer></v-spacer>
103 103
104 <!-- COURSES SIDE BAR- positioned to the right of the page --> 104 <!-- COURSES SIDE BAR- positioned to the right of the page -->
105 <v-flex md3> 105 <v-flex md3>
106 <v-card class="elevation-0 card-border" height="100%"> 106 <v-card class="elevation-0 card-border" height="100%">
107 <CoursesSideBar></CoursesSideBar> 107 <CoursesSideBar></CoursesSideBar>
108 </v-card> 108 </v-card>
109 </v-flex> 109 </v-flex>
110 </v-layout> 110 </v-layout>
111 </v-container> 111 </v-container>
112 </div> 112 </div>
113 </template> 113 </template>
114 <script> 114 <script>
115 import http from "@/Services/http.js"; 115 import http from "@/Services/http.js";
116 import AllApiCalls from "@/Services/AllApiCalls.js"; 116 import AllApiCalls from "@/Services/AllApiCalls.js";
117 import CoursesSideBar from "@/pages/Common/CoursesSideBar.vue"; 117 import CoursesSideBar from "@/pages/Common/CoursesSideBar.vue";
118 export default { 118 export default {
119 mixins: [AllApiCalls], 119 mixins: [AllApiCalls],
120 components: { 120 components: {
121 CoursesSideBar, 121 CoursesSideBar,
122 }, 122 },
123 data() { 123 data() {
124 return { 124 return {
125 // courseData: [], 125 // courseData: [],
126 localStorage: localStorage, 126 localStorage: localStorage,
127 showLoader: false, 127 showLoader: false,
128 chapter: { chapters: [{}] }, 128 chapter: { chapters: [{}] },
129 chapterNames: [], 129 chapterNames: [],
130 chapterIds: [], 130 chapterIds: [],
131 selectedChapterId: "", 131 selectedChapterId: "",
132 indexSelectedChapter: "", 132 indexSelectedChapter: "",
133 pdfLink: "", 133 pdfLink: "",
134 }; 134 };
135 }, 135 },
136 methods: { 136 methods: {
137 showSelectedChapter(newChapter) { 137 showSelectedChapter(newChapter) {
138 if (newChapter == "forward") { 138 if (newChapter == "forward") {
139 this.indexSelectedChapter += 1; 139 this.indexSelectedChapter += 1;
140 this.selectedChapterId = this.chapterIds[this.indexSelectedChapter]; 140 this.selectedChapterId = this.chapterIds[this.indexSelectedChapter];
141 this.getParticularChapterDetail(); 141 this.getParticularChapterDetail();
142 } 142 }
143 if (newChapter == "back") { 143 if (newChapter == "back") {
144 this.indexSelectedChapter -= 1; 144 this.indexSelectedChapter -= 1;
145 this.selectedChapterId = this.chapterIds[this.indexSelectedChapter]; 145 this.selectedChapterId = this.chapterIds[this.indexSelectedChapter];
146 this.getParticularChapterDetail(); 146 this.getParticularChapterDetail();
147 } 147 }
148 }, 148 },
149 getParticularChapterDetail() { 149 getParticularChapterDetail() {
150 http() 150 http()
151 .get("/getParticularChapterDetail", { 151 .get("/getParticularChapterDetail", {
152 params: { 152 params: {
153 courseDetailId: this.$route.query.courseDetailId, 153 courseDetailId: this.$route.query.courseDetailId,
154 chapterId: this.selectedChapterId, 154 chapterId: this.selectedChapterId,
155 }, 155 },
156 }) 156 })
157 .then((response) => { 157 .then((response) => {
158 this.chapter = response.data.data; 158 this.chapter = response.data.data;
159 this.showLoader = false; 159 this.showLoader = false;
160 }) 160 })
161 .catch((err) => { 161 .catch((err) => {
162 // console.log("err in getParticularChapterDetail====>", err); 162 // console.log("err in getParticularChapterDetail====>", err);
163 this.showLoader = false; 163 this.showLoader = false;
164 this.snackbar = true;
165 this.color = "error";
166 this.text = error.response.data.message;
164 this.snackbar = true; 167 });
165 this.color = "error"; 168 },
166 this.text = error.response.data.message; 169 },
167 }); 170 // computed:{
168 }, 171 // nextChapterIndex(){
169 }, 172
170 // computed:{ 173 // }
171 // nextChapterIndex(){ 174 // }
172 175 async created() {
173 // } 176 // console.log("route query - ", this.$route.query);
174 // } 177
175 async created() { 178 this.selectedChapterId = this.$route.query.selectedChapterId;
176 // console.log("route query - ", this.$route.query); 179
177 180 /* set chapterNames array */
178 this.selectedChapterId = this.$route.query.selectedChapterId; 181 this.chapterNames = Object.keys(this.$route.query);
179 182 this.chapterNames.pop();
180 /* set chapterNames array */ 183 this.chapterNames.pop();
181 this.chapterNames = Object.keys(this.$route.query); 184 this.chapterNames.pop();
182 this.chapterNames.pop(); 185
183 this.chapterNames.pop(); 186 /* set chapter Ids */
184 this.chapterNames.pop(); 187 this.chapterIds = Object.values(this.$route.query);
185 188 this.chapterIds.pop();
186 /* set chapter Ids */ 189 this.chapterIds.pop();
187 this.chapterIds = Object.values(this.$route.query); 190 this.chapterIds.pop();
188 this.chapterIds.pop(); 191
189 this.chapterIds.pop(); 192 this.indexSelectedChapter = this.chapterIds.findIndex((id) => {
190 this.chapterIds.pop(); 193 return id == this.selectedChapterId;
191 194 });
192 this.indexSelectedChapter = this.chapterIds.findIndex((id) => { 195
193 return id == this.selectedChapterId; 196 /* get chapter clicked on using the id */
194 }); 197 await this.getParticularChapterDetail(this.selectedChapterId);
195 198 },
196 /* get chapter clicked on using the id */ 199 };
197 await this.getParticularChapterDetail(this.selectedChapterId); 200 </script>
198 }, 201 <style scoped>
199 }; 202 .side-bar-color {
200 </script> 203 color: #827bfa !important;
201 <style scoped> 204 /* border-top-right-radius: 74px !important; */
202 .side-bar-color { 205 }
203 color: #827bfa !important; 206 .card-border {
204 /* border-top-right-radius: 74px !important; */ 207 border: 1px #bdbdbd solid;
205 } 208 border-radius: 3px;
206 .card-border { 209 }
207 border: 1px #bdbdbd solid; 210 </style>
208 border-radius: 3px; 211
src/pages/Dashboard/CourseDetails.vue
Diff comments   View file @8b7976c
1 <template> 1 <template>
2 <div> 2 <div>
3 <!-- LOADER --> 3 <!-- LOADER -->
4 <div class="loader" v-if="showLoader"> 4 <div class="loader" v-if="showLoader">
5 <v-progress-circular indeterminate color="white"></v-progress-circular> 5 <v-progress-circular indeterminate color="white"></v-progress-circular>
6 </div> 6 </div>
7 7
8 <!-- SNACKBAR --> 8 <!-- SNACKBAR -->
9 <v-snackbar 9 <v-snackbar
10 :timeout="timeout" 10 :timeout="timeout"
11 :top="y === 'top'" 11 :top="y === 'top'"
12 :right="x === 'right'" 12 :right="x === 'right'"
13 :vertical="mode === 'vertical'" 13 :vertical="mode === 'vertical'"
14 v-model="snackbar" 14 v-model="snackbar"
15 :color="snackbarColor" 15 :color="snackbarColor"
16 > 16 >
17 {{ text }} 17 {{ text }}
18 <v-spacer></v-spacer> 18 <v-spacer></v-spacer>
19 <v-btn flat text @click="snackbar = false">X</v-btn> 19 <v-btn flat text @click="snackbar = false">X</v-btn>
20 </v-snackbar> 20 </v-snackbar>
21 21
22 <v-container class="pt-0"> 22 <v-container class="pt-0">
23 <v-layout row wrap class="mt-1"> 23 <v-layout row wrap class="mt-1">
24 <v-flex xs12 md8> 24 <v-flex xs12 md8>
25 <div 25 <div
26 class="title side-bar-color font-weight-bold" 26 class="title side-bar-color font-weight-bold"
27 >Welcome to the {{courseDetails[0].courseId.courseName}} Course for {{courseDetails[0].classId.classNum}} class</div> 27 >Welcome to the {{courseDetails[0].courseId.courseName}} Course for {{courseDetails[0].classId.classNum}} class</div>
28 <v-flex xs12 class="subheading mt-2"> 28 <v-flex xs12 class="subheading mt-2">
29 Lorem Ipsum sdjjkhsdf sdklfjs dkfjskdjfk fjsdklf sdjfksljf sdfkls fljlkj kl 29 Lorem Ipsum sdjjkhsdf sdklfjs dkfjskdjfk fjsdklf sdjfksljf sdfkls fljlkj kl
30 jkhjkfhjksd sdfjkhsdjk fsdjkl sfkljkl ldkfjkl kjlfs dlkjlskd fljsldk fklj 30 jkhjkfhjksd sdfjkhsdjk fsdjkl sfkljkl ldkfjkl kjlfs dlkjlskd fljsldk fklj
31 lksjdfljklsdj flkjs dflkjsd flkjsd lfkjsd lfjsdjf lkj kl 31 lksjdfljklsdj flkjs dflkjsd flkjsd lfkjsd lfjsdjf lkj kl
32 </v-flex> 32 </v-flex>
33 33
34 <div class="mt-5"> 34 <div class="mt-5">
35 <v-btn 35 <v-btn
36 @click="$router.push({name: 'Announcement', query:{courseId: $route.query.courseId}})" 36 @click="$router.push({name: 'Announcement', query:{courseId: $route.query.courseId}})"
37 flat 37 flat
38 class="grey--text lighten-1" 38 class="grey--text lighten-1"
39 > 39 >
40 <v-avatar size="30"> 40 <v-avatar size="30">
41 <img src="/static/icon/announcement_icon.png" alt="icon" /> 41 <img src="/static/icon/announcement_icon.png" alt="icon" />
42 </v-avatar> 42 </v-avatar>
43 <span>Announcement</span> 43 <span>Announcement</span>
44 </v-btn> 44 </v-btn>
45 </div> 45 </div>
46 <div> 46 <div>
47 <v-btn 47 <v-btn
48 @click="$router.push({name: 'Course Discussion Forum', query:{courseId: $route.query.courseId}})" 48 @click="$router.push({name: 'Course Discussion Forum', query:{courseId: $route.query.courseId}})"
49 class="grey--text lighten-1" 49 class="grey--text lighten-1"
50 flat 50 flat
51 > 51 >
52 <v-avatar size="30"> 52 <v-avatar size="30">
53 <img src="/static/icon/courseDiscussion_icon.png" alt="icon" /> 53 <img src="/static/icon/courseDiscussion_icon.png" alt="icon" />
54 </v-avatar> 54 </v-avatar>
55 <span>Course discussion forum</span> 55 <span>Course discussion forum</span>
56 </v-btn> 56 </v-btn>
57 </div> 57 </div>
58 <!-- CHAPTERS --> 58 <!-- CHAPTERS -->
59 <v-layout column class="mt-5"> 59 <v-layout column class="mt-5">
60 <v-flex 60 <v-flex
61 v-for="(chapter,index) in courseDetails[0].chapters" 61 v-for="(chapter,index) in courseDetails[0].chapters"
62 :key="index" 62 :key="index"
63 style="cursor: pointer;" 63 style="cursor: pointer;"
64 @click="routeToChapterInfo(chapter._id)" 64 @click="routeToChapterInfo(chapter._id)"
65 > 65 >
66 <v-card class="mt-2 elevation-0 card-border"> 66 <v-card class="mt-2 elevation-0 card-border">
67 <v-container class="pt-0"> 67 <v-container class="pt-0">
68 <div class="title side-bar-color font-weight-bold">{{chapter.chapterName}}</div> 68 <div class="title side-bar-color font-weight-bold">{{chapter.chapterName}}</div>
69 <div class="grey--text lighten-1 subheading">{{chapter.description}}</div> 69 <div class="grey--text lighten-1 subheading">{{chapter.description}}</div>
70 <div 70 <div
71 v-for="(point,index) in chapter.chapterPoints" 71 v-for="(point,index) in chapter.chapterPoints"
72 :key="index" 72 :key="index"
73 class="ml-2 mt-2" 73 class="ml-2 mt-2"
74 > 74 >
75 <span class="grey--text lighten-1 subheading">{{index +1}}. {{point}}</span> 75 <span class="grey--text lighten-1 subheading">{{index +1}}. {{point}}</span>
76 </div> 76 </div>
77 </v-container> 77 </v-container>
78 </v-card> 78 </v-card>
79 </v-flex> 79 </v-flex>
80 </v-layout> 80 </v-layout>
81 </v-flex> 81 </v-flex>
82 <v-spacer></v-spacer> 82 <v-spacer></v-spacer>
83 83
84 <!-- COURSES --> 84 <!-- COURSES -->
85 <v-flex xs12 md3> 85 <v-flex xs12 md3>
86 <v-card class="elevation-0 card-border" height="100%"> 86 <v-card class="elevation-0 card-border" height="100%">
87 <v-container class="pt-0"> 87 <v-container class="pt-0">
88 <div class="side-bar-color font-weight-bold title">Courses</div> 88 <div class="side-bar-color font-weight-bold title">Courses</div>
89 89
90 <div v-for="(course,index) in courseData" :key="index"> 90 <div v-for="(course,index) in courseData" :key="index">
91 <v-btn 91 <v-btn
92 flat 92 flat
93 class="subheading text-xs-start justify-left" 93 class="subheading text-xs-start justify-left"
94 style="cursor: pointer;" 94 style="cursor: pointer;"
95 block 95 block
96 @click="routeToCourseDetails(course._id)" 96 @click="routeToCourseDetails(course._id)"
97 > 97 >
98 <div style="width: 100%;text-align: left;"> 98 <div style="width: 100%;text-align: left;">
99 <v-icon style="color: red;padding-bottom: 3px;" size="15">play_arrow</v-icon> 99 <v-icon style="color: red;padding-bottom: 3px;" size="15">play_arrow</v-icon>
100 {{course.courseName}} 100 {{course.courseName}}
101 </div> 101 </div>
102 </v-btn> 102 </v-btn>
103 </div> 103 </div>
104 <!-- <v-expansion-panel focusable class="elevation-0"> 104 <!-- <v-expansion-panel focusable class="elevation-0">
105 <v-expansion-panel-content v-for="(item,i) in courseData" :key="i"> 105 <v-expansion-panel-content v-for="(item,i) in courseData" :key="i">
106 <template v-slot:header> 106 <template v-slot:header>
107 <div class="subheading">{{item.courseName}}</div> 107 <div class="subheading">{{item.courseName}}</div>
108 </template> 108 </template>
109 </v-expansion-panel-content> 109 </v-expansion-panel-content>
110 </v-expansion-panel>--> 110 </v-expansion-panel>-->
111 </v-container> 111 </v-container>
112 </v-card> 112 </v-card>
113 </v-flex> 113 </v-flex>
114 </v-layout> 114 </v-layout>
115 </v-container> 115 </v-container>
116 </div> 116 </div>
117 </template> 117 </template>
118 <script> 118 <script>
119 import AllApiCalls from "@/Services/AllApiCalls.js"; 119 import AllApiCalls from "@/Services/AllApiCalls.js";
120 import http from "@/Services/http.js"; 120 import http from "@/Services/http.js";
121 import moment from "moment"; 121 import moment from "moment";
122 export default { 122 export default {
123 mixins: [AllApiCalls], 123 mixins: [AllApiCalls],
124 data() { 124 data() {
125 return { 125 return {
126 showLoader: false, 126 showLoader: false,
127 courseDetails: [{ courseId: {}, classId: {} }], 127 courseDetails: [{ courseId: {}, classId: {} }],
128 chapterIds: [], 128 chapterIds: [],
129 // courseData: [], 129 // courseData: [],
130 courseDataTree: [], 130 courseDataTree: [],
131 }; 131 };
132 }, 132 },
133 methods: { 133 methods: {
134 routeToChapterInfo(selectedChapterId) { 134 routeToChapterInfo(selectedChapterId) {
135 /* set value of present chapter selected, and other chapters ids in the obj */ 135 /* set value of present chapter selected, and other chapters ids in the obj */
136 let obj = {}; 136 let obj = {};
137 for (var i = 0; i < this.courseDetails[0].chapters.length; i++) { 137 for (var i = 0; i < this.courseDetails[0].chapters.length; i++) {
138 obj[ 138 obj[
139 this.courseDetails[0].chapters[i].chapterName 139 this.courseDetails[0].chapters[i].chapterName
140 ] = this.courseDetails[0].chapters[i]._id; 140 ] = this.courseDetails[0].chapters[i]._id;
141 } 141 }
142 obj.selectedChapterId = selectedChapterId; 142 obj.selectedChapterId = selectedChapterId;
143 obj.courseDetailId = this.courseDetails[0]._id; 143 obj.courseDetailId = this.courseDetails[0]._id;
144 obj.courseId = this.$route.query.courseId; 144 obj.courseId = this.$route.query.courseId;
145 this.$router.push({ 145 this.$router.push({
146 name: "Chapter Info", 146 name: "Chapter Info",
147 query: obj, 147 query: obj,
148 }); 148 });
149 }, 149 },
150 async routeToCourseDetails(courseId) { 150 async routeToCourseDetails(courseId) {
151 /* getParticularCourseDetail- To get courseDetail - defined in GetApis.js*/ 151 /* getParticularCourseDetail- To get courseDetail - defined in GetApis.js*/
152 let response = await this.getParticularCourseDetail(courseId); 152 let response = await this.getParticularCourseDetail(courseId);
153 153
154 /* If the response is null then dont route */ 154 /* If the response is null then dont route */
155 if (response.data.data.length > 0) { 155 if (response.data.data.length > 0) {
156 // REQUIRED TO WAIT FOR UPDATE CYCLE 156 // REQUIRED TO WAIT FOR UPDATE CYCLE
157 this.$nextTick(() => { 157 this.$nextTick(() => {
158 // this.filters.locEmitted = "emitted"; 158 // this.filters.locEmitted = "emitted";
159 this.$router.push({ query: { courseId: courseId } }); 159 this.$router.push({ query: { courseId: courseId } });
160 }); 160 });
161 } else { 161 } else {
162 this.seeSnackbar("No Data Available", "warning"); 162 this.seeSnackbar("No Data Available", "warning");
163 } 163 }
164 }, 164 },
165 }, 165 },
166 async created() { 166 async created() {
167 // console.log("its working"); 167 // console.log("its working");
168 /* getParticularCourseDetail- To get courseDetail - defined in GetApis.js*/ 168 /* getParticularCourseDetail- To get courseDetail - defined in GetApis.js*/
169 let response = await this.getParticularCourseDetail( 169 let response = await this.getParticularCourseDetail(
170 this.$route.query.courseId 170 this.$route.query.courseId
171 ); 171 );
172 this.courseDetails = response.data.data; 172 this.courseDetails = response.data.data;
173 // console.log("its working courseDetails - ", this.courseDetails); 173 // console.log("its working courseDetails - ", this.courseDetails);
174 174
175 /* getStudentCourses - to get courseData - defined in GetApis.js*/ 175 /* getStudentCourses - to get courseData - defined in GetApis.js*/
176 await this.getStudentCourses({ 176 await this.getStudentCourses({
177 classId: localStorage.getItem("parentClassId"), 177 classId: localStorage.getItem("parentClassId"),
178 studentId: localStorage.getItem("parentStudentId"), 178 studentId: localStorage.getItem("parentStudentId"),
179 }); 179 });
180 }, 180 },
181 }; 181 };
182 </script> 182 </script>
183 <style scoped> 183 <style scoped>
184 .side-bar-color { 184 .side-bar-color {
185 color: #827bfa !important; 185 color: #827bfa !important;
186 /* border-top-right-radius: 74px !important; */ 186 /* border-top-right-radius: 74px !important; */
187 } 187 }
188 .card-border { 188 .card-border {
189 border: 1px #bdbdbd solid; 189 border: 1px #bdbdbd solid;
190 border-radius: 3px; 190 border-radius: 3px;
191 } 191 }
192 /* .v-treeview-node__toggle { 192 /* .v-treeview-node__toggle {
193 color: red !important; 193 color: red !important;
194 } */ 194 } */
195 </style> 195 </style>
src/pages/Dashboard/CourseDiscussionForum.vue
Diff comments   View file @8b7976c
1 <template> 1 <template>
2 <div class="body-color"> 2 <div class="body-color">
3 <!-- LOADER --> 3 <!-- LOADER -->
4 <div class="loader" v-if="showLoader"> 4 <div class="loader" v-if="showLoader">
5 <v-progress-circular indeterminate color="white"></v-progress-circular> 5 <v-progress-circular indeterminate color="white"></v-progress-circular>
6 </div> 6 </div>
7 7
8 <!-- SNACKBAR --> 8 <!-- SNACKBAR -->
9 <v-snackbar 9 <v-snackbar
10 :timeout="timeout" 10 :timeout="timeout"
11 :top="y === 'top'" 11 :top="y === 'top'"
12 :right="x === 'right'" 12 :right="x === 'right'"
13 :vertical="mode === 'vertical'" 13 :vertical="mode === 'vertical'"
14 v-model="snackbar" 14 v-model="snackbar"
15 :color="snackbarColor" 15 :color="snackbarColor"
16 > 16 >
17 {{ text }} 17 {{ text }}
18 <v-spacer></v-spacer> 18 <v-spacer></v-spacer>
19 <v-btn flat text @click="snackbar = false">X</v-btn> 19 <v-btn flat text @click="snackbar = false">X</v-btn>
20 </v-snackbar> 20 </v-snackbar>
21 21
22 <!-- DIALOG TO ADD COURSE DISCUSSION FORUM --> 22 <!-- DIALOG TO ADD COURSE DISCUSSION FORUM -->
23 <v-dialog v-model="addForumDialog" max-width="500" persistent> 23 <v-dialog v-model="addForumDialog" max-width="500" persistent>
24 <v-card flat class="card-style pa-2" dark> 24 <v-card flat class="card-style pa-2" dark>
25 <v-layout> 25 <v-layout>
26 <v-flex xs12> 26 <v-flex xs12>
27 <label class="title text-xs-center">Add Forum</label> 27 <label class="title text-xs-center">Add Forum</label>
28 <v-icon size="24" class="right" @click="addForumDialog = false">cancel</v-icon> 28 <v-icon size="24" class="right" @click="addForumDialog = false">cancel</v-icon>
29 </v-flex> 29 </v-flex>
30 </v-layout> 30 </v-layout>
31 <v-container fluid> 31 <v-container fluid>
32 <v-layout align-center> 32 <v-layout align-center>
33 <v-flex xs12> 33 <v-flex xs12>
34 <v-flex xs12 sm12> 34 <v-flex xs12 sm12>
35 <v-form ref="form" v-model="valid" lazy-validation> 35 <v-form ref="form" v-model="valid" lazy-validation>
36 <v-layout> 36 <v-layout>
37 <v-flex 37 <v-flex
38 xs12 38 xs12
39 class="text-xs-center text-sm-center text-md-center text-lg-center" 39 class="text-xs-center text-sm-center text-md-center text-lg-center"
40 > 40 >
41 <v-avatar size="100px" v-if="!imageUrl"> 41 <v-avatar size="100px" v-if="!imageUrl">
42 <img src="/static/icon/user.png" /> 42 <img src="/static/icon/user.png" />
43 </v-avatar> 43 </v-avatar>
44 <input 44 <input
45 type="file" 45 type="file"
46 style="display: none" 46 style="display: none"
47 ref="image" 47 ref="image"
48 accept="image/*" 48 accept="image/*"
49 @change="onFilePicked" 49 @change="onFilePicked"
50 /> 50 />
51 <img 51 <img
52 :src="imageData.imageUrl" 52 :src="imageData.imageUrl"
53 height="150" 53 height="150"
54 width="150" 54 width="150"
55 v-if="imageUrl" 55 v-if="imageUrl"
56 style="border-radius:50%; width:200px" 56 style="border-radius:50%; width:200px"
57 /> 57 />
58 </v-flex> 58 </v-flex>
59 </v-layout> 59 </v-layout>
60 60
61 <v-layout wrap> 61 <v-layout wrap>
62 <!-- SUBJECT --> 62 <!-- SUBJECT -->
63 <v-flex xs12 sm12> 63 <v-flex xs12 sm12>
64 <v-layout> 64 <v-layout>
65 <v-flex xs4 sm4 class="pt-4 subheading"> 65 <v-flex xs4 sm4 class="pt-4 subheading">
66 <label class="right hidden-xs-only hidden-sm-only">Subject:</label> 66 <label class="right hidden-xs-only hidden-sm-only">Subject:</label>
67 <label class="right hidden-lg-only hidden-md-only hidden-xl-only">Subject:</label> 67 <label class="right hidden-lg-only hidden-md-only hidden-xl-only">Subject:</label>
68 </v-flex> 68 </v-flex>
69 <v-flex xs8 sm8 class="ml-3"> 69 <v-flex xs8 sm8 class="ml-3">
70 <v-text-field 70 <v-text-field
71 v-model="addForumParams.subject" 71 v-model="addForumParams.subject"
72 placeholder="subject" 72 placeholder="subject"
73 type="text" 73 type="text"
74 :rules="cantBeEmpty" 74 :rules="cantBeEmpty"
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 <!-- DESCRIPTION --> 80 <!-- DESCRIPTION -->
81 <v-flex xs12 sm12> 81 <v-flex xs12 sm12>
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 hidden-xs-only hidden-sm-only">Description:</label> 84 <label class="right hidden-xs-only hidden-sm-only">Description:</label>
85 <label 85 <label
86 class="right hidden-lg-only hidden-md-only hidden-xl-only" 86 class="right hidden-lg-only hidden-md-only hidden-xl-only"
87 >Description:</label> 87 >Description:</label>
88 </v-flex> 88 </v-flex>
89 <v-flex xs8 sm8 class="ml-3"> 89 <v-flex xs8 sm8 class="ml-3">
90 <v-text-field 90 <v-text-field
91 v-model="addForumParams.description" 91 v-model="addForumParams.description"
92 placeholder="Description" 92 placeholder="Description"
93 type="text" 93 type="text"
94 :rules="cantBeEmpty" 94 :rules="cantBeEmpty"
95 required 95 required
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 <!-- UPLOAD IMAGE --> 100 <!-- UPLOAD IMAGE -->
101 <v-flex xs12 sm12> 101 <v-flex xs12 sm12>
102 <v-layout> 102 <v-layout>
103 <v-flex xs4 class="pt-4 subheading"> 103 <v-flex xs4 class="pt-4 subheading">
104 <label class="right hidden-xs-only hidden-sm-only">Upload Image:</label> 104 <label class="right hidden-xs-only hidden-sm-only">Upload Image:</label>
105 <label class="right hidden-lg-only hidden-md-only hidden-xl-only">Upload :</label> 105 <label class="right hidden-lg-only hidden-md-only hidden-xl-only">Upload :</label>
106 </v-flex> 106 </v-flex>
107 <v-flex xs8 class="ml-3"> 107 <v-flex xs8 class="ml-3">
108 <v-text-field 108 <v-text-field
109 label="Select Image" 109 label="Select Image"
110 @click="pickFile" 110 @click="pickFile"
111 v-model="imageName" 111 v-model="imageName"
112 append-icon="attach_file" 112 append-icon="attach_file"
113 ></v-text-field> 113 ></v-text-field>
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> 118 <v-layout>
119 <v-flex xs12 sm12> 119 <v-flex xs12 sm12>
120 <v-layout class="right"> 120 <v-layout class="right">
121 <v-btn @click="submit" round dark :loading="loading" class="add-button">Add</v-btn> 121 <v-btn @click="submit" round dark :loading="loading" class="add-button">Add</v-btn>
122 </v-layout> 122 </v-layout>
123 </v-flex> 123 </v-flex>
124 </v-layout> 124 </v-layout>
125 </v-form> 125 </v-form>
126 </v-flex> 126 </v-flex>
127 </v-flex> 127 </v-flex>
128 </v-layout> 128 </v-layout>
129 </v-container> 129 </v-container>
130 </v-card> 130 </v-card>
131 </v-dialog> 131 </v-dialog>
132 132
133 <v-container grid-list-xl class="pt-0"> 133 <v-container grid-list-xl class="pt-0">
134 <v-layout row wrap class="mt-1"> 134 <v-layout row wrap class="mt-1">
135 <v-flex xs12 sm12 md9> 135 <v-flex xs12 sm12 md9>
136 <v-layout column> 136 <v-layout column>
137 <!-- HEADING --> 137 <!-- HEADING -->
138 <v-flex> 138 <v-flex>
139 <div class="title side-bar-color font-weight-bold">Course Discussion Forum</div> 139 <div class="title side-bar-color font-weight-bold">Course Discussion Forum</div>
140 <div class="subheading grey--text lighten-1">General news and announcements</div> 140 <div class="subheading grey--text lighten-1">General news and announcements</div>
141 </v-flex> 141 </v-flex>
142 142
143 <!-- ADD DISCUSSION FORUM BUTTON --> 143 <!-- ADD DISCUSSION FORUM BUTTON -->
144 <v-flex> 144 <v-flex>
145 <div> 145 <div>
146 <v-btn 146 <v-btn
147 fab 147 fab
148 dark 148 dark
149 class="open-dialog-button hidden-xl-only hidden-md-only hidden-lg-only" 149 class="open-dialog-button hidden-xl-only hidden-md-only hidden-lg-only"
150 small 150 small
151 @click="addForumDialog = true" 151 @click="addForumDialog = true"
152 > 152 >
153 <v-icon dark>add</v-icon> 153 <v-icon dark>add</v-icon>
154 </v-btn> 154 </v-btn>
155 <v-btn 155 <v-btn
156 round 156 round
157 class="open-dialog-button hidden-sm-only hidden-xs-only" 157 class="open-dialog-button hidden-sm-only hidden-xs-only"
158 dark 158 dark
159 @click="addForumDialog = true" 159 @click="addForumDialog = true"
160 > 160 >
161 <v-icon class="white--text pr-1" size="20">add</v-icon>Add A New Discussion Topic 161 <v-icon class="white--text pr-1" size="20">add</v-icon>Add A New Discussion Topic
162 </v-btn> 162 </v-btn>
163 </div> 163 </div>
164 </v-flex> 164 </v-flex>
165 165
166 <!-- DATA TABLE --> 166 <!-- DATA TABLE -->
167 <v-flex> 167 <v-flex>
168 <v-data-table 168 <v-data-table
169 :headers="courseDiscussionHeaders" 169 :headers="courseDiscussionHeaders"
170 :items="courseDiscussionItems" 170 :items="courseDiscussionItems"
171 :pagination.sync="pagination" 171 :pagination.sync="pagination"
172 :search="search" 172 :search="search"
173 item-key="_id" 173 item-key="_id"
174 > 174 >
175 <template slot="items" slot-scope="props"> 175 <template slot="items" slot-scope="props">
176 <tr 176 <tr
177 class="tr" 177 class="tr"
178 style="cursor: pointer;" 178 style="cursor: pointer;"
179 @click="props.expanded = !props.expanded;courseDiscussionId = props.item._id;getDiscussionesThread(props.item._id)" 179 @click="props.expanded = !props.expanded;courseDiscussionId = props.item._id;getDiscussionesThread(props.item._id)"
180 > 180 >
181 <td class="text-xs-center td td-row"> 181 <td class="text-xs-center td td-row">
182 <v-avatar size="40"> 182 <v-avatar size="40">
183 <img :src="props.item.attachementUrl" v-if="props.item.attachementUrl" /> 183 <img :src="props.item.attachementUrl" v-if="props.item.attachementUrl" />
184 <img src="/static/icon/user.png" v-else-if="!props.item.attachementUrl" /> 184 <img src="/static/icon/user.png" v-else-if="!props.item.attachementUrl" />
185 </v-avatar> 185 </v-avatar>
186 </td> 186 </td>
187 <td class="td td-row text-xs-center">{{ props.item.subject}}</td> 187 <td class="td td-row text-xs-center">{{ props.item.subject}}</td>
188 <td class="td td-row text-xs-center">{{ props.item.studentId.name }}</td> 188 <td class="td td-row text-xs-center">{{ props.item.studentId.name }}</td>
189 <td class="td td-row text-xs-center">-</td> 189 <td class="td td-row text-xs-center">-</td>
190 <td class="td td-row text-xs-center">{{ props.item.forumThread.length }}</td> 190 <td class="td td-row text-xs-center">{{ props.item.forumThread.length }}</td>
191 </tr> 191 </tr>
192 </template> 192 </template>
193 <!-- REPLY FUNCTIONALITY --> 193 <!-- REPLY FUNCTIONALITY -->
194 <template slot="expand" slot-scope="props"> 194 <template slot="expand" slot-scope="props">
195 <v-layout> 195 <v-layout>
196 <!-- TOPIC HEADING --> 196 <!-- TOPIC HEADING -->
197 <v-flex xs12 v-for="(courseDiscussionData,i) in courseDiscussionData" :key="i"> 197 <v-flex xs12 v-for="(courseDiscussionData,i) in courseDiscussionData" :key="i">
198 <v-card class="elevation-0 grey lighten-3 pa-2" flat> 198 <v-card class="elevation-0 grey lighten-3 pa-2" flat>
199 <v-list two-line subheader> 199 <v-list two-line subheader>
200 <v-list-tile> 200 <v-list-tile>
201 <v-list-tile-avatar> 201 <v-list-tile-avatar>
202 <v-avatar size="46"> 202 <v-avatar size="46">
203 <img 203 <img
204 :src="courseDiscussionData.attachementUrl" 204 :src="courseDiscussionData.attachementUrl"
205 v-if="courseDiscussionData.attachementUrl" 205 v-if="courseDiscussionData.attachementUrl"
206 /> 206 />
207 <img 207 <img
208 src="/static/icon/user.png" 208 src="/static/icon/user.png"
209 v-else-if="!courseDiscussionData.attachementUrl" 209 v-else-if="!courseDiscussionData.attachementUrl"
210 /> 210 />
211 </v-avatar> 211 </v-avatar>
212 </v-list-tile-avatar> 212 </v-list-tile-avatar>
213 <v-list-tile-content> 213 <v-list-tile-content>
214 <v-list-tile-title>{{ courseDiscussionData.subject }}</v-list-tile-title> 214 <v-list-tile-title>{{ courseDiscussionData.subject }}</v-list-tile-title>
215 <v-list-tile-sub-title> 215 <v-list-tile-sub-title>
216 By 216 By
217 <span class="info--text">{{ courseDiscussionData.studentId.name }}</span> 217 <span class="info--text">{{ courseDiscussionData.studentId.name }}</span>
218 - {{dates(courseDiscussionData.created ) }} 218 - {{dates(courseDiscussionData.created ) }}
219 </v-list-tile-sub-title> 219 </v-list-tile-sub-title>
220 </v-list-tile-content> 220 </v-list-tile-content>
221 <v-list-tile-action> 221 <v-list-tile-action>
222 <div> 222 <div>
223 <v-btn 223 <v-btn
224 flat 224 flat
225 round 225 round
226 dark 226 dark
227 class="reply-btn" 227 class="reply-btn"
228 @click="showReplyBox = true" 228 @click="showReplyBox = true"
229 >Reply</v-btn> 229 >Reply</v-btn>
230 </div> 230 </div>
231 </v-list-tile-action> 231 </v-list-tile-action>
232 </v-list-tile> 232 </v-list-tile>
233 </v-list> 233 </v-list>
234 </v-card> 234 </v-card>
235 <v-flex xs12 class="mt-4" v-show="showReplyBox"> 235 <v-flex xs12 class="mt-4" v-show="showReplyBox">
236 <v-textarea 236 <v-textarea
237 name="input-7-1" 237 name="input-7-1"
238 solo 238 solo
239 label="Label Text" 239 label="Label Text"
240 multi-line 240 multi-line
241 v-model="replyDescription" 241 v-model="replyDescription"
242 ></v-textarea> 242 ></v-textarea>
243 <v-btn 243 <v-btn
244 round 244 round
245 dark 245 dark
246 class="open-dialog-button" 246 class="open-dialog-button"
247 flat 247 flat
248 @click="showReplyBox = false" 248 @click="showReplyBox = false"
249 >Cancel</v-btn> 249 >Cancel</v-btn>
250 <v-btn 250 <v-btn
251 round 251 round
252 dark 252 dark
253 :loading="loading" 253 :loading="loading"
254 class="reply-btn" 254 class="reply-btn"
255 @click="replyThreadDiscussion(props.item)" 255 @click="replyThreadDiscussion(props.item)"
256 >Submit</v-btn> 256 >Submit</v-btn>
257 </v-flex> 257 </v-flex>
258 258
259 <!-- REPLY THREAD --> 259 <!-- REPLY THREAD -->
260 <v-layout 260 <v-layout
261 :class="['mt-4','pl-5','mx-auto',replyThread.teacherId?'justify-start':'justify-end']" 261 :class="['mt-4','pl-5','mx-auto',replyThread.teacherId?'justify-start':'justify-end']"
262 v-for="(replyThread,i) in courseDiscussionData.forumThread.slice().reverse()" 262 v-for="(replyThread,i) in courseDiscussionData.forumThread.slice().reverse()"
263 :key="i" 263 :key="i"
264 > 264 >
265 <v-flex xs12 md7> 265 <v-flex xs12 md7>
266 <v-card class="elevation-0 grey lighten-1" flat> 266 <v-card class="elevation-0 grey lighten-1" flat>
267 <v-list two-line subheader class="grey lighten-1 pa-1"> 267 <v-list two-line subheader class="grey lighten-1 pa-1">
268 <v-list-tile> 268 <v-list-tile>
269 <v-list-tile-avatar> 269 <v-list-tile-avatar>
270 <v-avatar size="46"> 270 <v-avatar size="46">
271 <img 271 <img
272 :src="courseDiscussionData.attachementUrl" 272 :src="courseDiscussionData.attachementUrl"
273 v-if="courseDiscussionData.attachementUrl" 273 v-if="courseDiscussionData.attachementUrl"
274 /> 274 />
275 <img 275 <img
276 src="/static/icon/user.png" 276 src="/static/icon/user.png"
277 v-else-if="!courseDiscussionData.attachementUrl" 277 v-else-if="!courseDiscussionData.attachementUrl"
278 /> 278 />
279 </v-avatar> 279 </v-avatar>
280 </v-list-tile-avatar> 280 </v-list-tile-avatar>
281 <v-list-tile-content> 281 <v-list-tile-content>
282 <v-list-tile-title>Re: {{ courseDiscussionData.subject }}</v-list-tile-title> 282 <v-list-tile-title>Re: {{ courseDiscussionData.subject }}</v-list-tile-title>
283 <v-list-tile-sub-title> 283 <v-list-tile-sub-title>
284 By 284 By
285 <span 285 <span
286 class="info--text" 286 class="info--text"
287 v-if="replyThread.studentId" 287 v-if="replyThread.studentId"
288 >{{ replyThread.studentId.name }}</span> 288 >{{ replyThread.studentId.name }}</span>
289 <span 289 <span
290 class="info--text" 290 class="info--text"
291 v-if="replyThread.teacherId" 291 v-if="replyThread.teacherId"
292 >{{ replyThread.teacherId.name }}</span> 292 >{{ replyThread.teacherId.name }}</span>
293 - {{dates(replyThread.created ) }} 293 - {{dates(replyThread.created ) }}
294 </v-list-tile-sub-title> 294 </v-list-tile-sub-title>
295 </v-list-tile-content> 295 </v-list-tile-content>
296 </v-list-tile> 296 </v-list-tile>
297 </v-list> 297 </v-list>
298 <v-list class="pa-2 reply-desc"> 298 <v-list class="pa-2 reply-desc">
299 <v-list-tile-content> 299 <v-list-tile-content>
300 <v-list-tile-title 300 <v-list-tile-title
301 v-show="replyThread.showDescriptionReplyThread" 301 v-show="replyThread.showDescriptionReplyThread"
302 >{{ replyThread.description }}</v-list-tile-title> 302 >{{ replyThread.description }}</v-list-tile-title>
303 <v-flex 303 <v-flex
304 xs12 304 xs12
305 sm12 305 sm12
306 md4 306 md4
307 v-show="replyThread.showUpdateReplyThread == true" 307 v-show="replyThread.showUpdateReplyThread == true"
308 > 308 >
309 <v-text-field v-model="replyThread.description"></v-text-field> 309 <v-text-field v-model="replyThread.description"></v-text-field>
310 <v-btn 310 <v-btn
311 flat 311 flat
312 round 312 round
313 dark 313 dark
314 class="reply-btn right" 314 class="reply-btn right"
315 @click="updateRelpyThreadDiscussion(replyThread,props.item)" 315 @click="updateRelpyThreadDiscussion(replyThread,props.item)"
316 >Save</v-btn> 316 >Save</v-btn>
317 </v-flex> 317 </v-flex>
318 </v-list-tile-content> 318 </v-list-tile-content>
319 </v-list> 319 </v-list>
320 <v-list class="grey lighten-4 pa-0"> 320 <v-list class="grey lighten-4 pa-0">
321 <v-list-tile-action> 321 <v-list-tile-action>
322 <v-spacer></v-spacer> 322 <v-spacer></v-spacer>
323 <div 323 <div
324 v-if="replyThread.studentId && replyThread.studentId._id == localStorage.getItem('parentStudentId')" 324 v-if="replyThread.studentId && replyThread.studentId._id == localStorage.getItem('parentStudentId')"
325 > 325 >
326 <v-btn 326 <v-btn
327 flat 327 flat
328 round 328 round
329 dark 329 dark
330 class="reply-btn" 330 class="reply-btn"
331 @click="deleteRelpyThreadDiscussion(replyThread._id,props.item._id)" 331 @click="deleteRelpyThreadDiscussion(replyThread._id,props.item._id)"
332 >Delete</v-btn> 332 >Delete</v-btn>
333 <v-btn 333 <v-btn
334 flat 334 flat
335 round 335 round
336 dark 336 dark
337 class="reply-btn mr-4" 337 class="reply-btn mr-4"
338 @click="showUpdateReplyThreadDiscussion(replyThread)" 338 @click="showUpdateReplyThreadDiscussion(replyThread)"
339 >Edit</v-btn> 339 >Edit</v-btn>
340 </div> 340 </div>
341 </v-list-tile-action> 341 </v-list-tile-action>
342 </v-list> 342 </v-list>
343 </v-card> 343 </v-card>
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 </template> 348 </template>
349 <v-alert 349 <v-alert
350 slot="no-results" 350 slot="no-results"
351 :value="true" 351 :value="true"
352 color="error" 352 color="error"
353 icon="warning" 353 icon="warning"
354 >Your search for "{{ search }}" found no results.</v-alert> 354 >Your search for "{{ search }}" found no results.</v-alert>
355 </v-data-table> 355 </v-data-table>
356 </v-flex> 356 </v-flex>
357 </v-layout> 357 </v-layout>
358 </v-flex> 358 </v-flex>
359 359
360 <v-spacer></v-spacer> 360 <v-spacer></v-spacer>
361 361
362 <!-- COURSES - positioned to the right of the page --> 362 <!-- COURSES - positioned to the right of the page -->
363 <v-flex xs12 sm12 md3> 363 <v-flex xs12 sm12 md3>
364 <v-card class="elevation-0 card-border" height="100%"> 364 <v-card class="elevation-0 card-border" height="100%">
365 <v-container class="pt-0"> 365 <v-container class="pt-0">
366 <div class="side-bar-color font-weight-bold title">Courses</div> 366 <div class="side-bar-color font-weight-bold title">Courses</div>
367 367
368 <div v-for="(course,index) in courseData"> 368 <div v-for="(course,index) in courseData">
369 <v-btn 369 <v-btn
370 flat 370 flat
371 class="subheading text-xs-start justify-left" 371 class="subheading text-xs-start justify-left"
372 style="cursor: pointer;" 372 style="cursor: pointer;"
373 block 373 block
374 @click="routeToCourseDetails(course._id)" 374 @click="routeToCourseDetails(course._id)"
375 > 375 >
376 <div style="width: 100%;text-align: left;"> 376 <div style="width: 100%;text-align: left;">
377 <v-icon style="color: red;padding-bottom: 3px;" size="15">play_arrow</v-icon> 377 <v-icon style="color: red;padding-bottom: 3px;" size="15">play_arrow</v-icon>
378 {{course.courseName}} 378 {{course.courseName}}
379 </div> 379 </div>
380 </v-btn> 380 </v-btn>
381 </div> 381 </div>
382 </v-container> 382 </v-container>
383 </v-card> 383 </v-card>
384 </v-flex> 384 </v-flex>
385 </v-layout> 385 </v-layout>
386 </v-container> 386 </v-container>
387 </div> 387 </div>
388 </template> 388 </template>
389 <script> 389 <script>
390 import AllApiCalls from "@/Services/AllApiCalls.js"; 390 import AllApiCalls from "@/Services/AllApiCalls.js";
391 import http from "@/Services/http.js"; 391 import http from "@/Services/http.js";
392 import moment from "moment"; 392 import moment from "moment";
393 export default { 393 export default {
394 mixins: [AllApiCalls], 394 mixins: [AllApiCalls],
395 data() { 395 data() {
396 return { 396 return {
397 localStorage: localStorage, 397 localStorage: localStorage,
398 valid: true, 398 valid: true,
399 addForumDialog: false, 399 addForumDialog: false,
400 addForumParams: {}, 400 addForumParams: {},
401 // UPLOAD IMAGE 401 // UPLOAD IMAGE
402 imageName: "", 402 imageName: "",
403 imageUrl: "", 403 imageUrl: "",
404 imageFile: "", 404 imageFile: "",
405 imageData: {}, 405 imageData: {},
406 406
407 // DATA TABLE 407 // DATA TABLE
408 search: "", 408 search: "",
409 pagination: { 409 pagination: {
410 rowsPerPage: 10, 410 rowsPerPage: 10,
411 }, 411 },
412 courseDiscussionHeaders: [ 412 courseDiscussionHeaders: [
413 { 413 {
414 text: "Image", 414 text: "Image",
415 value: "attachementUrl", 415 value: "attachementUrl",
416 sortable: false, 416 sortable: false,
417 align: "center", 417 align: "center",
418 }, 418 },
419 { 419 {
420 text: "Discussion", 420 text: "Discussion",
421 align: "center", 421 align: "center",
422 sortable: false, 422 sortable: false,
423 value: "", 423 value: "",
424 }, 424 },
425 { 425 {
426 text: "Started", 426 text: "Started",
427 value: "", 427 value: "",
428 sortable: false, 428 sortable: false,
429 align: "center", 429 align: "center",
430 }, 430 },
431 { text: "Last Pot", value: "", sortable: false, align: "center" }, 431 { text: "Last Pot", value: "", sortable: false, align: "center" },
432 { text: "Replies", value: "", sortable: false, align: "center" }, 432 { text: "Replies", value: "", sortable: false, align: "center" },
433 ], 433 ],
434 courseDiscussionItems: [], 434 courseDiscussionItems: [],
435 435
436 // COURSE DISCUSSION REPLTY FUNCTIONALITY 436 // COURSE DISCUSSION REPLTY FUNCTIONALITY
437 courseDiscussionId: "", 437 courseDiscussionId: "",
438 showReplyBox: false, 438 showReplyBox: false,
439 courseDiscussionData: [], 439 courseDiscussionData: [],
440 replyDescription: "", 440 replyDescription: "",
441 loginId: "", 441 loginId: "",
442 editedIndex: -1, 442 editedIndex: -1,
443 }; 443 };
444 }, 444 },
445 methods: { 445 methods: {
446 dates: function (date) { 446 dates: function (date) {
447 return moment(date).format("MMMM DD, YYYY hh:mm A"); 447 return moment(date).format("MMMM DD, YYYY hh:mm A");
448 }, 448 },
449 /* UPLOAD IMAGE */ 449 /* UPLOAD IMAGE */
450 pickFile() { 450 pickFile() {
451 this.$refs.image.click(); 451 this.$refs.image.click();
452 }, 452 },
453 453
454 onFilePicked(e) { 454 onFilePicked(e) {
455 // console.log(e) 455 // console.log(e)
456 const files = e.target.files; 456 const files = e.target.files;
457 this.imageData.upload = e.target.files[0]; 457 this.imageData.upload = e.target.files[0];
458 if (files[0] !== undefined) { 458 if (files[0] !== undefined) {
459 this.imageName = files[0].name; 459 this.imageName = files[0].name;
460 if (this.imageName.lastIndexOf(".") <= 0) { 460 if (this.imageName.lastIndexOf(".") <= 0) {
461 return; 461 return;
462 } 462 }
463 const fr = new FileReader(); 463 const fr = new FileReader();
464 fr.readAsDataURL(files[0]); 464 fr.readAsDataURL(files[0]);
465 fr.addEventListener("load", () => { 465 fr.addEventListener("load", () => {
466 this.imageUrl = fr.result; 466 this.imageUrl = fr.result;
467 this.imageFile = files[0]; // this is an image file that can be sent to server... 467 this.imageFile = files[0]; // this is an image file that can be sent to server...
468 this.imageData.imageUrl = URL.createObjectURL(this.imageFile); 468 this.imageData.imageUrl = URL.createObjectURL(this.imageFile);
469 }); 469 });
470 } else { 470 } else {
471 this.imageName = ""; 471 this.imageName = "";
472 this.imageFile = ""; 472 this.imageFile = "";
473 this.imageUrl = ""; 473 this.imageUrl = "";
474 } 474 }
475 }, 475 },
476 async submit() { 476 async submit() {
477 if (this.$refs.form.validate()) { 477 if (this.$refs.form.validate()) {
478 this.addForumParams.classId = localStorage.getItem("parentClassId"); 478 this.addForumParams.classId = localStorage.getItem("parentClassId");
479 this.addForumParams.courseId = this.$route.query.courseId; 479 this.addForumParams.courseId = this.$route.query.courseId;
480 this.addForumParams.studentId = localStorage.getItem("parentStudentId"); 480 this.addForumParams.studentId = localStorage.getItem("parentStudentId");
481 481
482 if (this.imageUrl) { 482 if (this.imageUrl) {
483 var str = this.imageUrl; 483 var str = this.imageUrl;
484 const [baseUrl, imageUrl] = str.split(/,/); 484 const [baseUrl, imageUrl] = str.split(/,/);
485 this.addForumParams.upload = imageUrl; 485 this.addForumParams.upload = imageUrl;
486 } 486 }
487 this.loading = true; 487 this.loading = true;
488 await http() 488 await http()
489 .post("/createCourseDiscussion", this.addForumParams) 489 .post("/createCourseDiscussion", this.addForumParams)
490 .then((response) => { 490 .then((response) => {
491 this.snackbar = true; 491 this.snackbar = true;
492 this.text = "Discussion added successfully"; 492 this.text = "Discussion added successfully";
493 this.snackbarColor = "green"; 493 this.snackbarColor = "green";
494 this.addForumDialog = false; 494 this.addForumDialog = false;
495 this.clear(); 495 this.clear();
496 this.loading = false; 496 this.loading = false;
497 // console.log("response of createCourseDiscussion - ", response); 497 // console.log("response of createCourseDiscussion - ", response);
498 }) 498 })
499 .catch((error) => { 499 .catch((error) => {
500 this.snackbar = true; 500 this.snackbar = true;
501 this.text = error.response.data.message; 501 this.text = error.response.data.message;
502 this.snackbarColor = "error"; 502 this.snackbarColor = "error";
503 this.loading = false; 503 this.loading = false;
504 }); 504 });
505 505
506 /* getCourseDiscussionesList - to populate the data table */ 506 /* getCourseDiscussionesList - to populate the data table */
507 await this.getCourseDiscussionesList({ 507 await this.getCourseDiscussionesList({
508 courseId: this.$route.query.courseId, 508 courseId: this.$route.query.courseId,
509 classId: localStorage.getItem("parentClassId"), 509 classId: localStorage.getItem("parentClassId"),
510 }); 510 });
511 this.addForumDialog = false; 511 this.addForumDialog = false;
512 } 512 }
513 }, 513 },
514 clear() { 514 clear() {
515 this.$refs.form.reset(); 515 this.$refs.form.reset();
516 this.imageUrl = ""; 516 this.imageUrl = "";
517 }, 517 },
518 async routeToCourseDetails(courseId) { 518 async routeToCourseDetails(courseId) {
519 /* getParticularCourseDetail- To get courseDetail - defined in GetApis.js*/ 519 /* getParticularCourseDetail- To get courseDetail - defined in GetApis.js*/
520 let response = await this.getParticularCourseDetail(courseId); 520 let response = await this.getParticularCourseDetail(courseId);
521 521
522 /* If the response is null then dont route */ 522 /* If the response is null then dont route */
523 if (response.data.data.length > 0) { 523 if (response.data.data.length > 0) {
524 this.$router.push({ 524 this.$router.push({
525 name: "Course Details", 525 name: "Course Details",
526 query: { courseId: courseId }, 526 query: { courseId: courseId },
527 }); 527 });
528 } else { 528 } else {
529 this.seeSnackbar("No Data Available", "warning"); 529 this.seeSnackbar("No Data Available", "warning");
530 } 530 }
531 }, 531 },
532 532
533 // COURSE DISCUSSION REPLY FUNCTIONALITY 533 // COURSE DISCUSSION REPLY FUNCTIONALITY
534 534
535 getDiscussionesThread() { 535 getDiscussionesThread() {
536 // console.log("id", this.getSelectedData.courseId); 536 // console.log("id", this.getSelectedData.courseId);
537 this.showLoader = true; 537 this.showLoader = true;
538 http() 538 http()
539 .get("/getParticularCourseDiscussion", { 539 .get("/getParticularCourseDiscussion", {
540 params: { 540 params: {
541 courseDiscussionId: this.courseDiscussionId, 541 courseDiscussionId: this.courseDiscussionId,
542 }, 542 },
543 }) 543 })
544 .then((response) => { 544 .then((response) => {
545 // console.log("response", response.data.data); 545 // console.log("response", response.data.data);
546 this.courseDiscussionData = response.data.data; 546 this.courseDiscussionData = response.data.data;
547 for (let i = 0; i < this.courseDiscussionData.length; i++) { 547 for (let i = 0; i < this.courseDiscussionData.length; i++) {
548 for ( 548 for (
549 let j = 0; 549 let j = 0;
550 j < this.courseDiscussionData[i].forumThread.length; 550 j < this.courseDiscussionData[i].forumThread.length;
551 j++ 551 j++
552 ) { 552 ) {
553 this.courseDiscussionData[i].forumThread[ 553 this.courseDiscussionData[i].forumThread[
554 j 554 j
555 ].showUpdateReplyThread = false; 555 ].showUpdateReplyThread = false;
556 this.courseDiscussionData[i].forumThread[ 556 this.courseDiscussionData[i].forumThread[
557 j 557 j
558 ].showDescriptionReplyThread = true; 558 ].showDescriptionReplyThread = true;
559 } 559 }
560 } 560 }
561 this.showLoader = false; 561 this.showLoader = false;
562 this.showReplyBox = false; 562 this.showReplyBox = false;
563 }) 563 })
564 .catch((error) => { 564 .catch((error) => {
565 // console.log("err====>", error); 565 // console.log("err====>", error);
566 this.showLoader = false; 566 this.showLoader = false;
567 this.snackbar = true;
568 this.color = "error";
569 this.text = error.response.data.message;
567 this.snackbar = true; 570 });
568 this.color = "error"; 571 },
569 this.text = error.response.data.message; 572 replyThreadDiscussion(selected) {
570 }); 573 this.showLoader = true;
571 }, 574 var payloadData = {
572 replyThreadDiscussion(selected) { 575 courseDiscussionId: selected._id,
573 this.showLoader = true; 576 studentId: localStorage.getItem("parentStudentId"),
574 var payloadData = { 577 description: this.replyDescription,
575 courseDiscussionId: selected._id, 578 };
576 studentId: localStorage.getItem("parentStudentId"), 579 http()
577 description: this.replyDescription, 580 .put("/replyForumThread", payloadData)
578 }; 581 .then((response) => {
579 http() 582 // console.log("response", response.data.data);
580 .put("/replyForumThread", payloadData) 583 this.showLoader = false;
581 .then((response) => { 584 this.getDiscussionesThread();
582 // console.log("response", response.data.data); 585 })
583 this.showLoader = false; 586 .catch((error) => {
584 this.getDiscussionesThread(); 587 this.showLoader = false;
585 }) 588 });
586 .catch((error) => { 589 },
587 this.showLoader = false; 590 showUpdateReplyThreadDiscussion(item) {
588 }); 591 this.editedIndex = this.courseDiscussionData.indexOf(item);
589 }, 592 var editedItem = Object.assign({}, item);
590 showUpdateReplyThreadDiscussion(item) { 593 var arrayOfcourseDiscussionData = [];
591 this.editedIndex = this.courseDiscussionData.indexOf(item); 594 for (let i = 0; i < this.courseDiscussionData.length; i++) {
592 var editedItem = Object.assign({}, item); 595 for (
593 var arrayOfcourseDiscussionData = []; 596 let j = 0;
594 for (let i = 0; i < this.courseDiscussionData.length; i++) { 597 j < this.courseDiscussionData[i].forumThread.length;
595 for ( 598 j++
596 let j = 0; 599 ) {
597 j < this.courseDiscussionData[i].forumThread.length; 600 if (
598 j++ 601 editedItem._id == this.courseDiscussionData[i].forumThread[j]._id
599 ) { 602 ) {
600 if ( 603 this.courseDiscussionData[i].forumThread[
601 editedItem._id == this.courseDiscussionData[i].forumThread[j]._id 604 j
602 ) { 605 ].showUpdateReplyThread = true;
603 this.courseDiscussionData[i].forumThread[ 606 this.courseDiscussionData[i].forumThread[
604 j 607 j
605 ].showUpdateReplyThread = true; 608 ].showDescriptionReplyThread = false;
606 this.courseDiscussionData[i].forumThread[ 609 }
607 j 610 }
608 ].showDescriptionReplyThread = false; 611 arrayOfcourseDiscussionData.push(this.courseDiscussionData[i]);
609 } 612 }
610 } 613 this.courseDiscussionData = arrayOfcourseDiscussionData;
611 arrayOfcourseDiscussionData.push(this.courseDiscussionData[i]); 614 },
612 } 615 updateRelpyThreadDiscussion(replyThread, selected) {
613 this.courseDiscussionData = arrayOfcourseDiscussionData; 616 this.showLoader = true;
614 }, 617 var payloadData = {
615 updateRelpyThreadDiscussion(replyThread, selected) { 618 forumThreadId: replyThread._id,
616 this.showLoader = true; 619 courseDiscussionId: selected._id,
617 var payloadData = { 620 studentId: localStorage.getItem("parentStudentId"),
618 forumThreadId: replyThread._id, 621 description: replyThread.description,
619 courseDiscussionId: selected._id, 622 };
620 studentId: localStorage.getItem("parentStudentId"), 623 http()
621 description: replyThread.description, 624 .put("/updateForumThread", payloadData)
622 }; 625 .then((response) => {
623 http() 626 this.showLoader = false;
624 .put("/updateForumThread", payloadData) 627 this.getDiscussionesThread();
625 .then((response) => { 628 })
626 this.showLoader = false; 629 .catch((error) => {
627 this.getDiscussionesThread(); 630 this.showLoader = false;
628 }) 631 });
629 .catch((error) => { 632 },
630 this.showLoader = false; 633 deleteRelpyThreadDiscussion(id, courseDiscussionId) {
631 }); 634 this.showLoader = true;
632 }, 635 var payloadData = {
633 deleteRelpyThreadDiscussion(id, courseDiscussionId) { 636 forumThreadId: id,
634 this.showLoader = true; 637 courseDiscussionId: courseDiscussionId,
635 var payloadData = { 638 };
636 forumThreadId: id, 639 http()
637 courseDiscussionId: courseDiscussionId, 640 .put(
638 }; 641 "/deleteForumThread",
639 http() 642 confirm("Are you sure you want to delete this?") && payloadData
640 .put( 643 )
641 "/deleteForumThread", 644 .then((response) => {
642 confirm("Are you sure you want to delete this?") && payloadData 645 this.showLoader = false;
643 ) 646 this.getDiscussionesThread();
644 .then((response) => { 647 })
645 this.showLoader = false; 648 .catch((error) => {
646 this.getDiscussionesThread(); 649 this.showLoader = false;
647 }) 650 });
648 .catch((error) => { 651 },
649 this.showLoader = false; 652 },
650 }); 653 async created() {
651 }, 654 this.loginId = this.$store.state.id;
652 }, 655 /* getStudentCourses - to get courseData - defined in GetApis.js*/
653 async created() { 656 await this.getStudentCourses({
654 this.loginId = this.$store.state.id; 657 classId: localStorage.getItem("parentClassId"),
655 /* getStudentCourses - to get courseData - defined in GetApis.js*/ 658 studentId: localStorage.getItem("parentStudentId"),
656 await this.getStudentCourses({ 659 });
657 classId: localStorage.getItem("parentClassId"), 660
658 studentId: localStorage.getItem("parentStudentId"), 661 /* getCourseDiscussionesList - to populate the data table */
659 }); 662 await this.getCourseDiscussionesList({
660 663 courseId: this.$route.query.courseId,
661 /* getCourseDiscussionesList - to populate the data table */ 664 classId: localStorage.getItem("parentClassId"),
662 await this.getCourseDiscussionesList({ 665 });
663 courseId: this.$route.query.courseId, 666 },
664 classId: localStorage.getItem("parentClassId"), 667 };
665 }); 668 </script>
666 }, 669 <style scoped>
667 }; 670 .side-bar-color {
668 </script> 671 color: #827bfa !important;
669 <style scoped> 672 /* border-top-right-radius: 74px !important; */
670 .side-bar-color { 673 }
671 color: #827bfa !important; 674 .card-border {
672 /* border-top-right-radius: 74px !important; */ 675 border: 1px #bdbdbd solid;
673 } 676 border-radius: 3px;
674 .card-border { 677 }
675 border: 1px #bdbdbd solid; 678 .reply-desc {
676 border-radius: 3px; 679 border: 1px solid #f2f2f2;
677 } 680 }
678 .reply-desc { 681 .open-dialog-button {
679 border: 1px solid #f2f2f2; 682 background: #827bfa !important;
680 } 683 border-color: #827bfa !important;
681 .open-dialog-button { 684 text-transform: none !important;
682 background: #827bfa !important; 685 }
683 border-color: #827bfa !important; 686
684 text-transform: none !important; 687 .reply-btn {
685 } 688 background: #feb83c !important;
686 689 border-color: #feb83c !important;
687 .reply-btn { 690 text-transform: none !important;
688 background: #feb83c !important; 691 -webkit-box-shadow: none !important;
689 border-color: #feb83c !important; 692 box-shadow: none !important;
690 text-transform: none !important; 693 }
691 -webkit-box-shadow: none !important; 694 </style>
src/pages/Dashboard/LiveOnlineClass.vue
Diff comments   View file @8b7976c
1 <template> 1 <template>
2 <div class="body-color"> 2 <div class="body-color">
3 <!-- LOADER --> 3 <!-- LOADER -->
4 <div class="loader" v-if="showLoader"> 4 <div class="loader" v-if="showLoader">
5 <v-progress-circular indeterminate color="white"></v-progress-circular> 5 <v-progress-circular indeterminate color="white"></v-progress-circular>
6 </div> 6 </div>
7 7
8 <!-- SNACKBAR --> 8 <!-- SNACKBAR -->
9 <v-snackbar 9 <v-snackbar
10 :timeout="timeout" 10 :timeout="timeout"
11 :top="y === 'top'" 11 :top="y === 'top'"
12 :right="x === 'right'" 12 :right="x === 'right'"
13 :vertical="mode === 'vertical'" 13 :vertical="mode === 'vertical'"
14 v-model="snackbar" 14 v-model="snackbar"
15 :color="snackbarColor" 15 :color="snackbarColor"
16 > 16 >
17 {{ text }} 17 {{ text }}
18 <v-spacer></v-spacer> 18 <v-spacer></v-spacer>
19 <v-btn flat text @click="snackbar = false">X</v-btn> 19 <v-btn flat text @click="snackbar = false">X</v-btn>
20 </v-snackbar> 20 </v-snackbar>
21 21
22 <v-container grid-list-xl class="pt-0"> 22 <v-container grid-list-xl class="pt-0">
23 <v-layout row wrap class="mt-1"> 23 <v-layout row wrap class="mt-1">
24 <!-- if logged in user is parent --> 24 <!-- if logged in user is parent -->
25 <v-flex xs12 sm12 md9 v-if=" $store.state.role === 'PARENT' "> 25 <v-flex xs12 sm12 md9 v-if=" $store.state.role === 'PARENT' ">
26 <v-layout column> 26 <v-layout column>
27 <!-- HEADING --> 27 <!-- HEADING -->
28 <v-flex> 28 <v-flex>
29 <div 29 <div
30 class="title side-bar-color font-weight-bold" 30 class="title side-bar-color font-weight-bold"
31 >Live Online Classes - {{$route.query.chapterName}}</div> 31 >Live Online Classes - {{$route.query.chapterName}}</div>
32 <!-- <div class="subheading grey--text lighten-1">{{liveLink}}</div> --> 32 <!-- <div class="subheading grey--text lighten-1">{{liveLink}}</div> -->
33 <!-- <div 33 <!-- <div
34 class="subheading grey--text lighten-1" 34 class="subheading grey--text lighten-1"
35 >The session started at 1:00 there is 1 moderator</div>--> 35 >The session started at 1:00 there is 1 moderator</div>-->
36 </v-flex> 36 </v-flex>
37 37
38 <!-- JOIN OR END SESSION --> 38 <!-- JOIN OR END SESSION -->
39 <v-flex> 39 <v-flex>
40 <div> 40 <div>
41 <v-btn 41 <v-btn
42 round 42 round
43 class="open-dialog-button" 43 class="open-dialog-button"
44 dark 44 dark
45 v-if="studentBtn" 45 v-if="studentBtn"
46 @click="showLoader = true;startChat();" 46 @click="showLoader = true;startChat();"
47 >{{studentBtn}}</v-btn> 47 >{{studentBtn}}</v-btn>
48 <span class="subheading grey--twxt lighten-1" v-else>Session hasnt started yet</span> 48 <span class="subheading grey--twxt lighten-1" v-else>Session hasnt started yet</span>
49 </div> 49 </div>
50 </v-flex> 50 </v-flex>
51 <v-flex id="studentClone"> 51 <v-flex id="studentClone">
52 <div id="jitsi-container"></div> 52 <div id="jitsi-container"></div>
53 </v-flex> 53 </v-flex>
54 </v-layout> 54 </v-layout>
55 </v-flex> 55 </v-flex>
56 56
57 <!-- if logged in user is teacher --> 57 <!-- if logged in user is teacher -->
58 <v-flex xs12 sm12 md12 v-else> 58 <v-flex xs12 sm12 md12 v-else>
59 <v-layout column> 59 <v-layout column>
60 <!-- HEADING --> 60 <!-- HEADING -->
61 <v-flex> 61 <v-flex>
62 <div 62 <div
63 class="title side-bar-color font-weight-bold" 63 class="title side-bar-color font-weight-bold"
64 >Live Online Classes - {{$route.query.chapterName}}</div> 64 >Live Online Classes - {{$route.query.chapterName}}</div>
65 <!-- <div class="subheading grey--text lighten-1"></div> --> 65 <!-- <div class="subheading grey--text lighten-1"></div> -->
66 <!-- <div 66 <!-- <div
67 class="subheading grey--text lighten-1" 67 class="subheading grey--text lighten-1"
68 >The session started at 1:00 there is 1 moderator</div>--> 68 >The session started at 1:00 there is 1 moderator</div>-->
69 </v-flex> 69 </v-flex>
70 70
71 <!-- JOIN OR END SESSION --> 71 <!-- JOIN OR END SESSION -->
72 <v-flex> 72 <v-flex>
73 <div> 73 <div>
74 <v-btn 74 <v-btn
75 round
76 class="open-dialog-button"
77 dark
78 @click="showLoader = true;startChat()"
79 >Start Session</v-btn>
75 round 80 </div>
76 class="open-dialog-button" 81 </v-flex>
77 dark 82 <v-flex id="teacherClone">
78 @click="showLoader = true;startChat()" 83 <div id="jitsi-container"></div>
79 >Start Session</v-btn> 84 </v-flex>
80 </div> 85 </v-layout>
81 </v-flex> 86 </v-flex>
82 <v-flex id="teacherClone"> 87
83 <div id="jitsi-container"></div> 88 <v-spacer></v-spacer>
84 </v-flex> 89
85 </v-layout> 90 <!-- COURSES SIDE BAR- positioned to the right of the page -->
86 </v-flex> 91 <!-- <v-flex xs3>
87 92 <v-card class="elevation-0 card-border" height="100%">
88 <v-spacer></v-spacer> 93 <CoursesSideBar></CoursesSideBar>
89 94 </v-card>
90 <!-- COURSES SIDE BAR- positioned to the right of the page --> 95 </v-flex>-->
91 <!-- <v-flex xs3> 96 </v-layout>
92 <v-card class="elevation-0 card-border" height="100%"> 97 </v-container>
93 <CoursesSideBar></CoursesSideBar> 98 </div>
94 </v-card> 99 </template>
95 </v-flex>--> 100 <script>
96 </v-layout> 101 import AllApiCalls from "@/Services/AllApiCalls.js";
97 </v-container> 102 import http from "@/Services/http.js";
98 </div> 103 import moment from "moment";
99 </template> 104 import Meet from "@/pages/Meet/meet.vue";
100 <script> 105 import CoursesSideBar from "@/pages/Common/CoursesSideBar.vue";
101 import AllApiCalls from "@/Services/AllApiCalls.js"; 106 export default {
102 import http from "@/Services/http.js"; 107 mixins: [AllApiCalls],
103 import moment from "moment"; 108 components: {
104 import Meet from "@/pages/Meet/meet.vue"; 109 CoursesSideBar,
105 import CoursesSideBar from "@/pages/Common/CoursesSideBar.vue"; 110 },
106 export default { 111 data() {
107 mixins: [AllApiCalls], 112 return {
108 components: { 113 startLiveSession: "",
109 CoursesSideBar, 114 studentBtn: "",
110 }, 115
111 data() { 116 // DATA TABLE
112 return { 117 search: "",
113 startLiveSession: "", 118 pagination: {
114 studentBtn: "", 119 rowsPerPage: 10,
115 120 },
116 // DATA TABLE 121 liveOnlineHeaders: [
117 search: "", 122 {
118 pagination: { 123 text: "Playback",
119 rowsPerPage: 10, 124 value: "attachementUrl",
120 }, 125 sortable: false,
121 liveOnlineHeaders: [ 126 align: "center",
122 { 127 },
123 text: "Playback", 128 {
124 value: "attachementUrl", 129 text: "Meeting",
125 sortable: false, 130 align: "center",
126 align: "center", 131 sortable: false,
127 }, 132 value: "",
128 { 133 },
129 text: "Meeting", 134 {
130 align: "center", 135 text: "Recording",
131 sortable: false, 136 value: "",
132 value: "", 137 sortable: false,
133 }, 138 align: "center",
134 { 139 },
135 text: "Recording", 140 {
136 value: "", 141 text: "Description Preview",
137 sortable: false, 142 value: "",
138 align: "center", 143 sortable: false,
139 }, 144 align: "center",
140 { 145 },
141 text: "Description Preview", 146 { text: "Date", value: "", sortable: false, align: "center" },
142 value: "", 147 { text: "Duration", value: "", sortable: false, align: "center" },
143 sortable: false, 148 { text: "Toolbar", value: "", sortable: false, align: "center" },
144 align: "center", 149 ],
145 }, 150 liveOnlineItems: [],
146 { text: "Date", value: "", sortable: false, align: "center" }, 151
147 { text: "Duration", value: "", sortable: false, align: "center" }, 152 // JITSI CONTAINER
148 { text: "Toolbar", value: "", sortable: false, align: "center" }, 153 liveLink: "",
149 ], 154 token: "",
150 liveOnlineItems: [], 155 selectStudents: {},
151 156 classRules: [(v) => !!v || " Class Name is required"],
152 // JITSI CONTAINER 157 sectionRules: [(v) => !!v || " Section Name is required"],
153 liveLink: "", 158 addclass: [],
154 token: "", 159 addSection: [],
155 selectStudents: {}, 160 loading: false,
156 classRules: [(v) => !!v || " Class Name is required"], 161 room: "",
157 sectionRules: [(v) => !!v || " Section Name is required"], 162 username: "",
158 addclass: [], 163 roomPassword: "",
159 addSection: [], 164 counter: 0,
160 loading: false, 165 };
161 room: "", 166 },
162 username: "", 167 methods: {
163 roomPassword: "", 168 async startChat() {
164 counter: 0, 169 if (this.$store.state.role === "PARENT") {
165 }; 170 if (this.counter == 0) {
166 }, 171 // console.log("enter start chat");
167 methods: { 172 this.startConference();
168 async startChat() { 173 this.counter += 1;
169 if (this.$store.state.role === "PARENT") { 174 }
170 if (this.counter == 0) { 175 }
171 // console.log("enter start chat"); 176 if (this.$store.state.role === "TEACHER") {
172 this.startConference(); 177 if (this.counter == 0) {
173 this.counter += 1; 178 this.createRoom();
174 } 179 this.counter += 1;
175 } 180 }
176 if (this.$store.state.role === "TEACHER") { 181 }
177 if (this.counter == 0) { 182 },
178 this.createRoom(); 183 // JITSI CONTAINER
179 this.counter += 1; 184 startConference() {
180 } 185 // console.log("yes session started");
181 } 186 var _this = this;
182 }, 187 try {
183 // JITSI CONTAINER 188 const domain = "meet.intrack.in";
184 startConference() { 189 const options = {
185 // console.log("yes session started"); 190 audioInput: "<deviceLabel>",
186 var _this = this; 191 audioOutput: "<deviceLabel>",
187 try { 192 videoInput: "<deviceLabel>",
188 const domain = "meet.intrack.in"; 193 prejoinPageEnabled: false,
189 const options = { 194 roomName: this.room,
190 audioInput: "<deviceLabel>", 195 height: 500,
191 audioOutput: "<deviceLabel>", 196 parentNode: document.getElementById("jitsi-container"),
192 videoInput: "<deviceLabel>", 197 interfaceConfigOverwrite: {
193 prejoinPageEnabled: false, 198 filmStripOnly: false,
194 roomName: this.room, 199 SHOW_PROMOTIONAL_CLOSE_PAGE: false,
195 height: 500, 200 SHOW_POWERED_BY: false,
196 parentNode: document.getElementById("jitsi-container"), 201 SHOW_JITSI_WATERMARK: false,
197 interfaceConfigOverwrite: { 202 TOOLBAR_BUTTONS: [
198 filmStripOnly: false, 203 "microphone",
199 SHOW_PROMOTIONAL_CLOSE_PAGE: false, 204 "camera",
200 SHOW_POWERED_BY: false, 205 "closedcaptions",
201 SHOW_JITSI_WATERMARK: false, 206 "desktop",
202 TOOLBAR_BUTTONS: [ 207 "fullscreen",
203 "microphone", 208 "fodeviceselection",
204 "camera", 209 "hangup",
205 "closedcaptions", 210 "profile",
206 "desktop", 211 "info",
207 "fullscreen", 212 "chat",
208 "fodeviceselection", 213 "recording",
209 "hangup", 214 "livestreaming",
210 "profile", 215 "etherpad",
211 "info", 216 "sharedvideo",
212 "chat", 217 "settings",
213 "recording", 218 "raisehand",
214 "livestreaming", 219 "videoquality",
215 "etherpad", 220 "filmstrip",
216 "sharedvideo", 221 "invite",
217 "settings", 222 "feedback",
218 "raisehand", 223 "stats",
219 "videoquality", 224 "shortcuts",
220 "filmstrip", 225 "tileview",
221 "invite", 226 ],
222 "feedback", 227 },
223 "stats", 228 configOverwrite: {
224 "shortcuts", 229 disableSimulcast: false,
225 "tileview", 230 },
226 ], 231 teacherName: "",
227 }, 232 romm: "",
228 configOverwrite: { 233 };
229 disableSimulcast: false, 234 _this.api = new JitsiMeetExternalAPI(domain, options);
230 }, 235 // console.log("this.api ", this.api);
231 teacherName: "", 236 _this.api.addEventListener("videoConferenceJoined", () => {
232 romm: "", 237 // console.log("Local User Joined");
233 }; 238 this.showLoader = false;
234 _this.api = new JitsiMeetExternalAPI(domain, options); 239 _this.api.executeCommand("displayName", _this.username);
235 // console.log("this.api ", this.api); 240 _this.api.executeCommand("password", this_.roomPassword);
236 _this.api.addEventListener("videoConferenceJoined", () => { 241 });
237 // console.log("Local User Joined"); 242
238 this.showLoader = false; 243 _this.api.on("readyToClose", () => {
239 _this.api.executeCommand("displayName", _this.username); 244 this.$router.push({ name: "Refresh" });
240 _this.api.executeCommand("password", this_.roomPassword);
241 }); 245 });
242
243 _this.api.on("readyToClose", () => { 246 } catch (error) {
244 this.$router.push({ name: "Refresh" }); 247 // console.error("Failed to load Jitsi API", error);
245 }); 248 }
246 } catch (error) { 249 },
247 // console.error("Failed to load Jitsi API", error); 250 openRoom() {
248 } 251 // verify the JitsiMeetExternalAPI constructor is added to the global..
249 }, 252 // if (this.teacherName != "" || this.room != "") {
250 openRoom() { 253 // if (window.JitsiMeetExternalAPI) {
251 // verify the JitsiMeetExternalAPI constructor is added to the global.. 254 // // var person = prompt("Please enter your name:", "Rabie");
252 // if (this.teacherName != "" || this.room != "") { 255 // if (person != null || person != "") this.username = this.teacherName;
253 // if (window.JitsiMeetExternalAPI) { 256 // var room = prompt("Please enter your room:", "Test Room");
254 // // var person = prompt("Please enter your name:", "Rabie"); 257 // if (room != null || room != "") this.room = this.room;
255 // if (person != null || person != "") this.username = this.teacherName; 258 // this.startConference();
256 // var room = prompt("Please enter your room:", "Test Room"); 259 // } else alert("Jitsi Meet API script not loaded");
257 // if (room != null || room != "") this.room = this.room; 260 // }
258 // this.startConference(); 261 },
259 // } else alert("Jitsi Meet API script not loaded"); 262
260 // } 263 createRoom(classId) {
261 }, 264 // this.showLoader = true;
262 265 var classId = {
263 createRoom(classId) { 266 classId: classId,
264 this.showLoader = true; 267 };
265 var classId = { 268 http()
266 classId: classId, 269 .post("/createLiveClasses", {
267 }; 270 classId: this.$route.query.classId,
268 http() 271 courseId: this.$route.query.courseId,
269 .post("/createLiveClasses", { 272 chapterId: this.$route.query.chapterId,
270 classId: this.$route.query.classId, 273 })
271 courseId: this.$route.query.courseId, 274 .then((response) => {
272 chapterId: this.$route.query.chapterId, 275 // this.addSection = response.data.data;
273 }) 276 // console.log("CREATE___ROOOM", response.data);
274 .then((response) => { 277 var room = response.data.data.roomName;
275 // this.addSection = response.data.data; 278 var username = localStorage.getItem("teacherName");
276 // console.log("CREATE___ROOOM", response.data); 279 var roomPassword = response.data.data.password;
277 var room = response.data.data.roomName; 280 // console.log(
278 var username = localStorage.getItem("teacherName"); 281 // "room",
279 var roomPassword = response.data.data.password; 282 // room,
280 // console.log( 283 // "username",
281 // "room", 284 // username,
282 // room, 285 // "roomPassword",
283 // "username", 286 // roomPassword
284 // username, 287 // );
285 // "roomPassword", 288 var this_ = this;
286 // roomPassword 289 if (username != "" || room != "") {
287 // ); 290 if (window.JitsiMeetExternalAPI) {
288 var this_ = this; 291 // var person = prompt("Please enter your name:", "Rabie");
289 if (username != "" || room != "") { 292 if (username != null || username != "") {
290 if (window.JitsiMeetExternalAPI) { 293 this_.username = username;
291 // var person = prompt("Please enter your name:", "Rabie"); 294 }
292 if (username != null || username != "") { 295 // var room = prompt("Please enter your room:", "Test Room");
293 this_.username = username; 296 if (room != null || room != "") {
294 } 297 this_.room = room;
295 // var room = prompt("Please enter your room:", "Test Room"); 298 }
296 if (room != null || room != "") { 299 if (roomPassword != null || roomPassword != "") {
297 this_.room = room; 300 this_.password = roomPassword;
298 } 301 }
299 if (roomPassword != null || roomPassword != "") { 302 } else alert("Jitsi Meet API script not loaded");
300 this_.password = roomPassword; 303 this_.startConference();
301 } 304 }
302 } else alert("Jitsi Meet API script not loaded");
303 this_.startConference(); 305 })
304 } 306 .catch((err) => {
305 this.showLoader = false; 307 this.showLoader = false;
306 }) 308 });
307 .catch((err) => { 309 },
308 this.showLoader = false; 310 async studentClasses() {
309 }); 311 this.liveLink = "";
310 }, 312 this.room = "";
311 async studentClasses() { 313 this.username = "";
312 this.liveLink = ""; 314 this.roomPassword = "";
313 this.room = ""; 315 /* getLiveClassesesList - To up date line under heading*/
314 this.username = ""; 316 let response = await this.getLiveClassesesList({
315 this.roomPassword = ""; 317 classId: this.$route.query.classId,
316 /* getLiveClassesesList - To up date line under heading*/ 318 courseId: this.$route.query.courseId,
317 let response = await this.getLiveClassesesList({ 319 chapterId: this.$route.query.chapterId,
318 classId: this.$route.query.classId, 320 });
319 courseId: this.$route.query.courseId, 321 // console.log("response getLiveClassesesList- ", response);
320 chapterId: this.$route.query.chapterId, 322
321 }); 323 /* CHECK RESPONSE TO ASSIGN MESSAGE INSIDE BUTTON */
322 // console.log("response getLiveClassesesList- ", response); 324 if (response.data.data[0].sessionStatus == "ENDED") {
323 325 // this.startLiveSession = "Start Session";
324 /* CHECK RESPONSE TO ASSIGN MESSAGE INSIDE BUTTON */ 326 this.studentBtn = "";
325 if (response.data.data[0].sessionStatus == "ENDED") { 327 }
326 // this.startLiveSession = "Start Session"; 328 if (response.data.data[0].sessionStatus == "STARTED") {
327 this.studentBtn = ""; 329 // this.startLiveSession = "Join Session";
328 } 330 this.studentBtn = "Join Session";
329 if (response.data.data[0].sessionStatus == "STARTED") { 331 }
330 // this.startLiveSession = "Join Session"; 332 if (response.data.data.length == 0) {
331 this.studentBtn = "Join Session"; 333 this.startLiveSession = "Start Session";
332 } 334 this.studentBtn = "";
333 if (response.data.data.length == 0) { 335 } else {
334 this.startLiveSession = "Start Session"; 336 this.liveLink = response.data.data[0].link;
335 this.studentBtn = ""; 337 var room = response.data.data[0].roomName;
336 } else { 338 var username = this.currentUser;
337 this.liveLink = response.data.data[0].link; 339 var roomPassword = response.data.data[0].password;
338 var room = response.data.data[0].roomName; 340 var this_ = this;
339 var username = this.currentUser; 341 // console.log(this.room, this.roomPassword, this.username);
340 var roomPassword = response.data.data[0].password; 342
341 var this_ = this; 343 if (username != "" || room != "") {
342 // console.log(this.room, this.roomPassword, this.username); 344 if (window.JitsiMeetExternalAPI) {
343 345 // var person = prompt("Please enter your name:", "Rabie");
344 if (username != "" || room != "") { 346 if (username != null || username != "") {
345 if (window.JitsiMeetExternalAPI) { 347 this_.username = username;
346 // var person = prompt("Please enter your name:", "Rabie"); 348 }
347 if (username != null || username != "") { 349 if (roomPassword != null || roomPassword != "") {
348 this_.username = username; 350 this_.roomPassword = roomPassword;
349 } 351 }
350 if (roomPassword != null || roomPassword != "") { 352 // var room = prompt("Please enter your room:", "Test Room");
351 this_.roomPassword = roomPassword; 353 if (room != null || room != "") {
352 } 354 this_.room = room;
353 // var room = prompt("Please enter your room:", "Test Room"); 355 }
354 if (room != null || room != "") { 356 // this.startConference();
355 this_.room = room; 357 }
356 } 358 }
357 // this.startConference(); 359 }
358 } 360 },
359 } 361 },
360 } 362
361 }, 363 async created() {
362 }, 364 // console.log(
363 365 // "this.$store.state.studentsData",
364 async created() { 366 // this.$store.state.studentsData[0].name
365 // console.log( 367 // );
366 // "this.$store.state.studentsData", 368 this.currentUser = localStorage.getItem("studentName");
367 // this.$store.state.studentsData[0].name 369 this.token = this.$store.state.token;
368 // ); 370 if (this.$store.state.role === "PARENT") {
369 this.currentUser = localStorage.getItem("studentName"); 371 await this.studentClasses();
370 this.token = this.$store.state.token; 372 }
371 if (this.$store.state.role === "PARENT") { 373
372 await this.studentClasses(); 374 /* getStudentCourses - to get courseData - defined in GetApis.js*/
373 } 375 if (this.$store.state.role === "PARENT") {
374 376 await this.getStudentCourses({
375 /* getStudentCourses - to get courseData - defined in GetApis.js*/ 377 classId: localStorage.getItem("parentClassId"),
376 if (this.$store.state.role === "PARENT") { 378 studentId: localStorage.getItem("parentStudentId"),
377 await this.getStudentCourses({ 379 });
378 classId: localStorage.getItem("parentClassId"), 380 }
379 studentId: localStorage.getItem("parentStudentId"), 381 },
380 }); 382 };
381 } 383 </script>
382 }, 384 <style scoped>
383 }; 385 .side-bar-color {
384 </script> 386 color: #827bfa !important;
385 <style scoped> 387 /* border-top-right-radius: 74px !important; */
386 .side-bar-color { 388 }
387 color: #827bfa !important; 389 .card-border {
388 /* border-top-right-radius: 74px !important; */ 390 border: 1px #bdbdbd solid;
389 } 391 border-radius: 3px;
390 .card-border { 392 }
391 border: 1px #bdbdbd solid; 393 .reply-desc {
392 border-radius: 3px; 394 border: 1px solid #f2f2f2;
393 } 395 }
394 .reply-desc { 396 .open-dialog-button {
395 border: 1px solid #f2f2f2; 397 background: #827bfa !important;
396 } 398 border-color: #827bfa !important;
397 .open-dialog-button { 399 text-transform: none !important;
398 background: #827bfa !important; 400 }
399 border-color: #827bfa !important; 401
400 text-transform: none !important; 402 .reply-btn {
401 } 403 background: #feb83c !important;
402 404 border-color: #feb83c !important;
403 .reply-btn { 405 text-transform: none !important;
404 background: #feb83c !important; 406 -webkit-box-shadow: none !important;
405 border-color: #feb83c !important; 407 box-shadow: none !important;
406 text-transform: none !important; 408 }
407 -webkit-box-shadow: none !important; 409 #jitsi-container {
408 box-shadow: none !important; 410 height: 100vh;
src/pages/Dashboard/dashboard.vue
Diff comments   View file @8b7976c
1 <template> 1 <template>
2 <v-app id="pages-dasboard"> 2 <v-app id="pages-dasboard">
3 <!-- ****** VIEW PROFIL NOTICE BOARD ****** --> 3 <!-- ****** VIEW PROFIL NOTICE BOARD ****** -->
4 <!-- <v-dialog v-model="dialogNotice" max-width="940px" scrollable> 4 <!-- <v-dialog v-model="dialogNotice" max-width="940px" scrollable>
5 <v-card> 5 <v-card>
6 <v-toolbar color="grey lighten-2" flat> 6 <v-toolbar color="grey lighten-2" flat>
7 <v-spacer></v-spacer> 7 <v-spacer></v-spacer>
8 <v-toolbar-title> 8 <v-toolbar-title>
9 <h3>Notice Board</h3> 9 <h3>Notice Board</h3>
10 </v-toolbar-title> 10 </v-toolbar-title>
11 <v-spacer></v-spacer> 11 <v-spacer></v-spacer>
12 <v-icon @click="closeNotice">close</v-icon> 12 <v-icon @click="closeNotice">close</v-icon>
13 </v-toolbar> 13 </v-toolbar>
14 <v-card-text> 14 <v-card-text>
15 <v-layout> 15 <v-layout>
16 <v-flex align-center justify-center layout text-xs-center class="mt-2"> 16 <v-flex align-center justify-center layout text-xs-center class="mt-2">
17 <img src="/static/icon/user.png" width="70px" v-if="!notice.eventImageUrl" /> 17 <img src="/static/icon/user.png" width="70px" v-if="!notice.eventImageUrl" />
18 <img :src="notice.eventImageUrl" width="280px" v-else-if="notice.eventImageUrl" /> 18 <img :src="notice.eventImageUrl" width="280px" v-else-if="notice.eventImageUrl" />
19 </v-flex> 19 </v-flex>
20 </v-layout> 20 </v-layout>
21 <v-container grid-list-md> 21 <v-container grid-list-md>
22 <v-layout wrap> 22 <v-layout wrap>
23 <v-flex> 23 <v-flex>
24 <v-layout> 24 <v-layout>
25 <v-flex xs5 sm6> 25 <v-flex xs5 sm6>
26 <h5 class="right my-1"> 26 <h5 class="right my-1">
27 <b>Title:</b> 27 <b>Title:</b>
28 </h5> 28 </h5>
29 </v-flex> 29 </v-flex>
30 <v-flex sm6 xs8> 30 <v-flex sm6 xs8>
31 <h5 class="my-1">{{ notice.title }}</h5> 31 <h5 class="my-1">{{ notice.title }}</h5>
32 </v-flex> 32 </v-flex>
33 </v-layout> 33 </v-layout>
34 <v-layout> 34 <v-layout>
35 <v-flex xs5 sm6> 35 <v-flex xs5 sm6>
36 <h5 class="right my-1"> 36 <h5 class="right my-1">
37 <b>Description:</b> 37 <b>Description:</b>
38 </h5> 38 </h5>
39 </v-flex> 39 </v-flex>
40 <v-flex sm6 xs8> 40 <v-flex sm6 xs8>
41 <h5 class="my-1">{{ notice.description }}</h5> 41 <h5 class="my-1">{{ notice.description }}</h5>
42 </v-flex> 42 </v-flex>
43 </v-layout> 43 </v-layout>
44 </v-flex> 44 </v-flex>
45 </v-layout> 45 </v-layout>
46 </v-container> 46 </v-container>
47 </v-card-text> 47 </v-card-text>
48 </v-card> 48 </v-card>
49 </v-dialog>--> 49 </v-dialog>-->
50 <!-- <v-container fluid grid-list-xl> --> 50 <!-- <v-container fluid grid-list-xl> -->
51 51
52 <!-- LOADER --> 52 <!-- LOADER -->
53 <div class="loader" v-if="showLoader"> 53 <div class="loader" v-if="showLoader">
54 <v-progress-circular indeterminate color="white"></v-progress-circular> 54 <v-progress-circular indeterminate color="white"></v-progress-circular>
55 </div> 55 </div>
56 56
57 <!-- SNACKBAR --> 57 <!-- SNACKBAR -->
58 <v-snackbar 58 <v-snackbar
59 :timeout="timeout" 59 :timeout="timeout"
60 :top="y === 'top'" 60 :top="y === 'top'"
61 :right="x === 'right'" 61 :right="x === 'right'"
62 :vertical="mode === 'vertical'" 62 :vertical="mode === 'vertical'"
63 v-model="snackbar" 63 v-model="snackbar"
64 :color="snackbarColor" 64 :color="snackbarColor"
65 > 65 >
66 {{ text }} 66 {{ text }}
67 <v-spacer></v-spacer> 67 <v-spacer></v-spacer>
68 <v-btn flat text @click="snackbar = false">X</v-btn> 68 <v-btn flat text @click="snackbar = false">X</v-btn>
69 </v-snackbar> 69 </v-snackbar>
70 70
71 <!-- DIALOG BOX EVENT DETAILS --> 71 <!-- DIALOG BOX EVENT DETAILS -->
72 <v-dialog v-model="viewEventDetails" max-width="500" persistent lazy> 72 <v-dialog v-model="viewEventDetails" max-width="500" persistent lazy>
73 <v-card flat class="card-style elevation-0" height="600" dark> 73 <v-card flat class="card-style elevation-0" height="600" dark>
74 <v-layout> 74 <v-layout>
75 <v-flex xs12> 75 <v-flex xs12>
76 <v-icon 76 <v-icon
77 size="24" 77 size="24"
78 class="right" 78 class="right"
79 @click="active=0;displayEventsList=[];dialogSchoolEvents = [];dialogMeetingEvents=[];viewEventDetails = false" 79 @click="active=0;displayEventsList=[];dialogSchoolEvents = [];dialogMeetingEvents=[];viewEventDetails = false"
80 >cancel</v-icon> 80 >cancel</v-icon>
81 </v-flex> 81 </v-flex>
82 </v-layout> 82 </v-layout>
83 <v-tabs v-model="active" color="#7f62f8" dark v-if="displayEventsList.length == 0"> 83 <v-tabs v-model="active" color="#7f62f8" dark v-if="displayEventsList.length == 0">
84 <v-tabs-slider color="yellow"></v-tabs-slider> 84 <v-tabs-slider color="yellow"></v-tabs-slider>
85 <v-tab v-for="(tab,index) in tabs" :key="index"> 85 <v-tab v-for="(tab,index) in tabs" :key="index">
86 <div class="subheading py-1">{{ tab.name }}</div> 86 <div class="subheading py-1">{{ tab.name }}</div>
87 </v-tab> 87 </v-tab>
88 <!-- <v-tab href="#schoolTab" v-if="dialogSchoolEvents.length > 0">School Events</v-tab> 88 <!-- <v-tab href="#schoolTab" v-if="dialogSchoolEvents.length > 0">School Events</v-tab>
89 <v-tab href="#meetingTab" v-if="dialogMeetingEvents.length > 0">Meeting Events</v-tab>--> 89 <v-tab href="#meetingTab" v-if="dialogMeetingEvents.length > 0">Meeting Events</v-tab>-->
90 90
91 <!-- SCHOOL EVENTS--> 91 <!-- SCHOOL EVENTS-->
92 <v-tab-item> 92 <v-tab-item>
93 <v-card flat class="card-style pa-2" dark v-if="dialogSchoolEvents.length > 0"> 93 <v-card flat class="card-style pa-2" dark v-if="dialogSchoolEvents.length > 0">
94 <v-container fluid> 94 <v-container fluid>
95 <v-divider class="white"></v-divider> 95 <v-divider class="white"></v-divider>
96 <v-card 96 <v-card
97 v-for="(particularEvent,index) in dialogSchoolEvents" 97 v-for="(particularEvent,index) in dialogSchoolEvents"
98 :key="index" 98 :key="index"
99 class="mt-3 pa-2 card-style white--text elevation-0" 99 class="mt-3 pa-2 card-style white--text elevation-0"
100 > 100 >
101 <div> 101 <div>
102 <div class="headline">{{particularEvent.title}}</div> 102 <div class="headline">{{particularEvent.title}}</div>
103 <div>Date Of Event : {{moment(particularEvent.dateOfEvent).format("DD MMMM, YYYY")}}</div> 103 <div>Date Of Event : {{moment(particularEvent.dateOfEvent).format("DD MMMM, YYYY")}}</div>
104 <div v-if="particularEvent.link">Start Time : {{particularEvent.startTime}}</div> 104 <div v-if="particularEvent.link">Start Time : {{particularEvent.startTime}}</div>
105 <div v-if="particularEvent.link">Duration : {{particularEvent.duration}}</div> 105 <div v-if="particularEvent.link">Duration : {{particularEvent.duration}}</div>
106 <div v-if="particularEvent.link"> 106 <div v-if="particularEvent.link">
107 Link : 107 Link :
108 <a :href="particularEvent.link">{{particularEvent.link}}</a> 108 <a :href="particularEvent.link">{{particularEvent.link}}</a>
109 </div> 109 </div>
110 <div 110 <div
111 v-if="particularEvent.description" 111 v-if="particularEvent.description"
112 >Description : {{particularEvent.description}}</div> 112 >Description : {{particularEvent.description}}</div>
113 </div> 113 </div>
114 <v-divider class="white mt-3"></v-divider> 114 <v-divider class="white mt-3"></v-divider>
115 </v-card> 115 </v-card>
116 </v-container> 116 </v-container>
117 </v-card> 117 </v-card>
118 </v-tab-item> 118 </v-tab-item>
119 119
120 <!-- MEETING EVENTS --> 120 <!-- MEETING EVENTS -->
121 <v-tab-item> 121 <v-tab-item>
122 <v-card v-if="dialogMeetingEvents.length > 0" flat class="card-style pa-2" dark> 122 <v-card v-if="dialogMeetingEvents.length > 0" flat class="card-style pa-2" dark>
123 <v-container fluid> 123 <v-container fluid>
124 <v-divider class="white"></v-divider> 124 <v-divider class="white"></v-divider>
125 <v-card 125 <v-card
126 v-for="(particularEvent,index) in dialogMeetingEvents" 126 v-for="(particularEvent,index) in dialogMeetingEvents"
127 :key="index" 127 :key="index"
128 class="mt-3 pa-2 card-style white--text elevation-0" 128 class="mt-3 pa-2 card-style white--text elevation-0"
129 > 129 >
130 <div> 130 <div>
131 <div class="headline">{{particularEvent.title}}</div> 131 <div class="headline">{{particularEvent.title}}</div>
132 <div>Date Of Event : {{moment(particularEvent.dateOfEvent).format("DD MMMM, YYYY")}}</div> 132 <div>Date Of Event : {{moment(particularEvent.dateOfEvent).format("DD MMMM, YYYY")}}</div>
133 <div v-if="particularEvent.link">Start Time : {{particularEvent.startTime}}</div> 133 <div v-if="particularEvent.link">Start Time : {{particularEvent.startTime}}</div>
134 <div v-if="particularEvent.link">Duration : {{particularEvent.duration}}</div> 134 <div v-if="particularEvent.link">Duration : {{particularEvent.duration}}</div>
135 <div v-if="particularEvent.link"> 135 <div v-if="particularEvent.link">
136 Link : 136 Link :
137 <a :href="particularEvent.link">{{particularEvent.link}}</a> 137 <a :href="particularEvent.link">{{particularEvent.link}}</a>
138 </div> 138 </div>
139 <div 139 <div
140 v-if="particularEvent.description" 140 v-if="particularEvent.description"
141 >Description : {{particularEvent.description}}</div> 141 >Description : {{particularEvent.description}}</div>
142 </div> 142 </div>
143 <v-divider class="white mt-3"></v-divider> 143 <v-divider class="white mt-3"></v-divider>
144 </v-card> 144 </v-card>
145 </v-container> 145 </v-container>
146 </v-card> 146 </v-card>
147 </v-tab-item> 147 </v-tab-item>
148 </v-tabs> 148 </v-tabs>
149 149
150 <!-- IF NO MULTIPLE EVENTS ON SAME DATE --> 150 <!-- IF NO MULTIPLE EVENTS ON SAME DATE -->
151 <v-card flat class="card-style pa-2 elevation-0" dark v-else> 151 <v-card flat class="card-style pa-2 elevation-0" dark v-else>
152 <v-container fluid> 152 <v-container fluid>
153 <v-divider class="white"></v-divider> 153 <v-divider class="white"></v-divider>
154 <v-card 154 <v-card
155 v-for="(particularEvent,index) in displayEventsList" 155 v-for="(particularEvent,index) in displayEventsList"
156 :key="index" 156 :key="index"
157 class="mt-3 pa-2 card-style white--text elevation-0" 157 class="mt-3 pa-2 card-style white--text elevation-0"
158 > 158 >
159 <div> 159 <div>
160 <div class="headline">{{particularEvent.title}}</div> 160 <div class="headline">{{particularEvent.title}}</div>
161 <div>Date Of Event : {{moment(particularEvent.dateOfEvent).format("DD MMMM, YYYY")}}</div> 161 <div>Date Of Event : {{moment(particularEvent.dateOfEvent).format("DD MMMM, YYYY")}}</div>
162 <div v-if="particularEvent.link">Start Time : {{particularEvent.startTime}}</div> 162 <div v-if="particularEvent.link">Start Time : {{particularEvent.startTime}}</div>
163 <div v-if="particularEvent.link">Duration : {{particularEvent.duration}}</div> 163 <div v-if="particularEvent.link">Duration : {{particularEvent.duration}}</div>
164 <div v-if="particularEvent.link"> 164 <div v-if="particularEvent.link">
165 Link : 165 Link :
166 <a :href="particularEvent.link">{{particularEvent.link}}</a> 166 <a :href="particularEvent.link">{{particularEvent.link}}</a>
167 </div> 167 </div>
168 <div 168 <div
169 v-if="particularEvent.description" 169 v-if="particularEvent.description"
170 >Description : {{particularEvent.description}}</div> 170 >Description : {{particularEvent.description}}</div>
171 </div> 171 </div>
172 <v-divider class="white mt-3"></v-divider> 172 <v-divider class="white mt-3"></v-divider>
173 </v-card> 173 </v-card>
174 </v-container> 174 </v-container>
175 </v-card> 175 </v-card>
176 </v-card> 176 </v-card>
177 </v-dialog> 177 </v-dialog>
178 178
179 <v-layout wrap row> 179 <v-layout wrap row>
180 <v-flex xs12 sm12 md8> 180 <v-flex xs12 sm12 md8>
181 <v-container fluid grid-list-xl> 181 <v-container fluid grid-list-xl>
182 <!-- ***** Total Students ***** --> 182 <!-- ***** Total Students ***** -->
183 <v-layout wrap class v-if="$store.state.role != 'PARENT' "> 183 <v-layout wrap class v-if="$store.state.role != 'PARENT' ">
184 <v-flex xs12 sm12 md3> 184 <v-flex xs12 sm12 md3>
185 <router-link :to="{ name:'Students' }"> 185 <router-link :to="{ name:'Students' }">
186 <v-card class="card pink-bgcolor"> 186 <v-card class="card pink-bgcolor">
187 <v-card-title primary-title class="titleCard white--text py-3">Students</v-card-title> 187 <v-card-title primary-title class="titleCard white--text py-3">Students</v-card-title>
188 <img src="/static/icon/student.png" class="ml-2" width="40" alt="icons" /> 188 <img src="/static/icon/student.png" class="ml-2" width="40" alt="icons" />
189 <v-card-title class="headline py-1 white--text">{{ students.length }}</v-card-title> 189 <v-card-title class="headline py-1 white--text">{{ students.length }}</v-card-title>
190 </v-card> 190 </v-card>
191 </router-link> 191 </router-link>
192 </v-flex> 192 </v-flex>
193 <!-- ***** Total Teachers***** --> 193 <!-- ***** Total Teachers***** -->
194 <v-flex xs12 sm12 md3> 194 <v-flex xs12 sm12 md3>
195 <router-link :to="{ name:'Teachers' }"> 195 <router-link :to="{ name:'Teachers' }">
196 <v-card flat class="card elevation-2 firozi-bgcolor"> 196 <v-card flat class="card elevation-2 firozi-bgcolor">
197 <v-card-title primary-title class="titleCard white--text py-3">Teachers</v-card-title> 197 <v-card-title primary-title class="titleCard white--text py-3">Teachers</v-card-title>
198 <img src="/static/icon/teacher.png" class="ml-2" width="40" alt="icons" /> 198 <img src="/static/icon/teacher.png" class="ml-2" width="40" alt="icons" />
199 199
200 <v-card-title class="headline py-1 white--text">{{ teachers.length }}</v-card-title> 200 <v-card-title class="headline py-1 white--text">{{ teachers.length }}</v-card-title>
201 </v-card> 201 </v-card>
202 </router-link> 202 </router-link>
203 </v-flex> 203 </v-flex>
204 <!-- ***** Total Parents ***** --> 204 <!-- ***** Total Parents ***** -->
205 <v-flex xs12 sm12 md3> 205 <v-flex xs12 sm12 md3>
206 <router-link :to="{ name:'Parents' }"> 206 <router-link :to="{ name:'Parents' }">
207 <v-card flat class="card yellow darken-3"> 207 <v-card flat class="card yellow darken-3">
208 <v-card-title primary-title class="titleCard white--text py-3">Parents</v-card-title> 208 <v-card-title primary-title class="titleCard white--text py-3">Parents</v-card-title>
209 <img src="/static/icon/parents.png" class="ml-3" width="40px" alt="icons" /> 209 <img src="/static/icon/parents.png" class="ml-3" width="40px" alt="icons" />
210 <v-card-title class="headline py-1 white--text">{{ parents.length }}</v-card-title> 210 <v-card-title class="headline py-1 white--text">{{ parents.length }}</v-card-title>
211 </v-card> 211 </v-card>
212 </router-link> 212 </router-link>
213 </v-flex> 213 </v-flex>
214 <!-- ***** Total Class***** --> 214 <!-- ***** Total Class***** -->
215 <v-flex xs12 sm12 md3> 215 <v-flex xs12 sm12 md3>
216 <router-link :to="{ name:'Class' }"> 216 <router-link :to="{ name:'Class' }">
217 <v-card flat class="card darkBlue-bgcolor"> 217 <v-card flat class="card darkBlue-bgcolor">
218 <v-card-title primary-title class="titleCard white--text py-3">Class</v-card-title> 218 <v-card-title primary-title class="titleCard white--text py-3">Class</v-card-title>
219 <img src="/static/icon/class.png" width="40" alt="icons" class="ml-2" /> 219 <img src="/static/icon/class.png" width="40" alt="icons" class="ml-2" />
220 <v-card-title class="headline py-1 white--text">{{ classes.length }}</v-card-title> 220 <v-card-title class="headline py-1 white--text">{{ classes.length }}</v-card-title>
221 </v-card> 221 </v-card>
222 </router-link> 222 </router-link>
223 </v-flex> 223 </v-flex>
224 </v-layout> 224 </v-layout>
225 225
226 <p 226 <p
227 v-if="studentsData.length === 0 && role == 'PARENT'" 227 v-if="studentsData.length === 0 && role == 'PARENT'"
228 class="text-center title grey lighten-4 error--text" 228 class="text-center title grey lighten-4 error--text"
229 >You have no student registered with school</p> 229 >You have no student registered with school</p>
230 <!-- ACCOUNT --> 230 <!-- ACCOUNT -->
231 <v-layout v-if="role == 'SUPERADMIN'|| role == 'ADMIN'"> 231 <v-layout v-if="role == 'SUPERADMIN'|| role == 'ADMIN'">
232 <v-flex xs12> 232 <v-flex xs12>
233 <v-card class="card mt-2 account-Card"> 233 <v-card class="card mt-2 account-Card">
234 <h4> 234 <h4>
235 <b>Account</b> 235 <b>Account</b>
236 </h4> 236 </h4>
237 <v-layout wrap> 237 <v-layout wrap>
238 <v-flex xs12 sm12 md3> 238 <v-flex xs12 sm12 md3>
239 <v-list two-line> 239 <v-list two-line>
240 <template> 240 <template>
241 <v-list-tile> 241 <v-list-tile>
242 <v-list-tile-avatar> 242 <v-list-tile-avatar>
243 <v-icon class="account-circle darkBlue-color">panorama_fish_eye</v-icon> 243 <v-icon class="account-circle darkBlue-color">panorama_fish_eye</v-icon>
244 </v-list-tile-avatar> 244 </v-list-tile-avatar>
245 <v-list-tile-content> 245 <v-list-tile-content>
246 <v-list-tile-title class="mt-2"> 246 <v-list-tile-title class="mt-2">
247 <p class="subheading font-color">Fees</p> 247 <p class="subheading font-color">Fees</p>
248 </v-list-tile-title> 248 </v-list-tile-title>
249 <v-list-tile-title>Rs. {{ feeData.totalFees }}</v-list-tile-title> 249 <v-list-tile-title>Rs. {{ feeData.totalFees }}</v-list-tile-title>
250 </v-list-tile-content> 250 </v-list-tile-content>
251 </v-list-tile> 251 </v-list-tile>
252 <v-list-tile> 252 <v-list-tile>
253 <v-list-tile-avatar> 253 <v-list-tile-avatar>
254 <v-icon class="account-circle yellowDark-color">panorama_fish_eye</v-icon> 254 <v-icon class="account-circle yellowDark-color">panorama_fish_eye</v-icon>
255 </v-list-tile-avatar> 255 </v-list-tile-avatar>
256 <v-list-tile-content> 256 <v-list-tile-content>
257 <v-list-tile-title class="mt-2"> 257 <v-list-tile-title class="mt-2">
258 <p class="subheading font-color">Collection</p> 258 <p class="subheading font-color">Collection</p>
259 </v-list-tile-title> 259 </v-list-tile-title>
260 <v-list-tile-title>Rs. {{ feeData.totalCollection }}</v-list-tile-title> 260 <v-list-tile-title>Rs. {{ feeData.totalCollection }}</v-list-tile-title>
261 </v-list-tile-content> 261 </v-list-tile-content>
262 </v-list-tile> 262 </v-list-tile>
263 <v-list-tile> 263 <v-list-tile>
264 <v-list-tile-avatar> 264 <v-list-tile-avatar>
265 <v-icon class="account-circle pink-color">panorama_fish_eye</v-icon> 265 <v-icon class="account-circle pink-color">panorama_fish_eye</v-icon>
266 </v-list-tile-avatar> 266 </v-list-tile-avatar>
267 <v-list-tile-content> 267 <v-list-tile-content>
268 <v-list-tile-title class="mt-2"> 268 <v-list-tile-title class="mt-2">
269 <p class="subheading font-color">Expences</p> 269 <p class="subheading font-color">Expences</p>
270 </v-list-tile-title> 270 </v-list-tile-title>
271 <v-list-tile-title>Rs. {{ expenseData.sum }}</v-list-tile-title> 271 <v-list-tile-title>Rs. {{ expenseData.sum }}</v-list-tile-title>
272 </v-list-tile-content> 272 </v-list-tile-content>
273 </v-list-tile> 273 </v-list-tile>
274 </template> 274 </template>
275 </v-list> 275 </v-list>
276 </v-flex> 276 </v-flex>
277 <v-flex xs12 sm12 md9 lg9> 277 <v-flex xs12 sm12 md9 lg9>
278 <div id="chart"> 278 <div id="chart">
279 <div v-if="showChart"> 279 <div v-if="showChart">
280 <apexchart 280 <apexchart
281 type="bar" 281 type="bar"
282 height="250" 282 height="250"
283 style="max-width: 800px !important" 283 style="max-width: 800px !important"
284 :options="chartOptions" 284 :options="chartOptions"
285 :series="series" 285 :series="series"
286 ></apexchart> 286 ></apexchart>
287 </div> 287 </div>
288 </div> 288 </div>
289 </v-flex> 289 </v-flex>
290 </v-layout> 290 </v-layout>
291 </v-card> 291 </v-card>
292 </v-flex> 292 </v-flex>
293 </v-layout> 293 </v-layout>
294 294
295 <!-- FOR ADMIN,TEACHER ROLE --> 295 <!-- FOR ADMIN,TEACHER ROLE -->
296 <v-layout row wrap v-if="role == 'ADMIN'||role == 'TEACHER'"> 296 <v-layout row wrap v-if="role == 'ADMIN'||role == 'TEACHER'">
297 <!-- NOTICE --> 297 <!-- NOTICE -->
298 <v-flex xs12 sm6> 298 <v-flex xs12 sm6>
299 <v-card class="card"> 299 <v-card class="card">
300 <v-container> 300 <v-container>
301 <v-card-title class="justify-center subheading font-weight-bold">Notice</v-card-title> 301 <v-card-title class="justify-center subheading font-weight-bold">Notice</v-card-title>
302 302
303 <v-data-table 303 <v-data-table
304 :items="noticeData" 304 :items="noticeData"
305 class="elevation-0" 305 class="elevation-0"
306 flat 306 flat
307 hide-actions 307 hide-actions
308 hide-headers 308 hide-headers
309 style="border-spacing: 0 !important;" 309 style="border-spacing: 0 !important;"
310 > 310 >
311 <template 311 <template
312 slot="items" 312 slot="items"
313 slot-scope="props" 313 slot-scope="props"
314 v-if="props.index < 5" 314 v-if="props.index < 5"
315 style="border-spacing: 0 !important;" 315 style="border-spacing: 0 !important;"
316 > 316 >
317 <tr class="td-notice"> 317 <tr class="td-notice">
318 <td class="grey--text" style="width:18px">{{ props.index + 1}}</td> 318 <td class="grey--text" style="width:18px">{{ props.index + 1}}</td>
319 <td> 319 <td>
320 <span class="grey--text caption">{{ date(props.item.created) }}</span> 320 <span class="grey--text caption">{{ date(props.item.created) }}</span>
321 <br /> 321 <br />
322 <span class="body-2">{{ props.item.title}}</span> 322 <span class="body-2">{{ props.item.title}}</span>
323 </td> 323 </td>
324 <!-- <td class="grey--text mt-2" >{{ props.item.description}}</td> --> 324 <!-- <td class="grey--text mt-2" >{{ props.item.description}}</td> -->
325 325
326 <td class="text-xs-center"> 326 <td class="text-xs-center">
327 <span> 327 <span>
328 <v-tooltip top> 328 <v-tooltip top>
329 <img 329 <img
330 slot="activator" 330 slot="activator"
331 style="cursor:pointer; width:25px; height:25px; " 331 style="cursor:pointer; width:25px; height:25px; "
332 @click="profile" 332 @click="profile"
333 src="/static/icon/view.png" 333 src="/static/icon/view.png"
334 /> 334 />
335 <span>View</span> 335 <span>View</span>
336 </v-tooltip> 336 </v-tooltip>
337 </span> 337 </span>
338 </td> 338 </td>
339 </tr> 339 </tr>
340 </template> 340 </template>
341 </v-data-table> 341 </v-data-table>
342 </v-container> 342 </v-container>
343 </v-card> 343 </v-card>
344 </v-flex> 344 </v-flex>
345 345
346 <!-- SCHOOL EVENTS --> 346 <!-- SCHOOL EVENTS -->
347
347 348 <v-flex xs12 sm6>
348 <v-flex xs12 sm6> 349 <v-card class="card">
349 <v-card class="card"> 350 <v-container>
350 <v-container> 351 <v-card-title class="justify-center subheading font-weight-bold">School Events</v-card-title>
351 <v-card-title class="justify-center subheading font-weight-bold">School Events</v-card-title> 352 <div
352 <div 353 v-for="(schoolEvent,index) in schoolEvents"
353 v-for="(schoolEvent,index) in schoolEvents" 354 :key="schoolEvent.title"
354 :key="schoolEvent.title" 355 class="mt-2"
355 class="mt-2" 356 style="cursor: pointer;"
356 style="cursor: pointer;" 357 @click="seeEventDetails(schoolEvent,'schoolEvent')"
357 @click="seeEventDetails(schoolEvent,'schoolEvent')" 358 >
358 > 359 <!-- color dot-->
359 <!-- color dot--> 360 <span
360 <span 361 :style="{ 'background-color': colorsArray[index%colorsArray.length] }"
361 :style="{ 'background-color': colorsArray[index%colorsArray.length] }" 362 style="height: 12px;width: 12px;border-radius: 50%;display: inline-block;vertical-align: top;"
362 style="height: 12px;width: 12px;border-radius: 50%;display: inline-block;vertical-align: top;" 363 ></span>
363 ></span> 364 <div style="display: inline-block;" class="ml-2">
364 <div style="display: inline-block;" class="ml-2"> 365 <div>
365 <div> 366 <!-- date of event -->
366 <!-- date of event --> 367 <div
367 <div 368 class="grey--text lighten-1 caption"
368 class="grey--text lighten-1 caption" 369 v-if="schoolEvent.dateOfEvent"
369 v-if="schoolEvent.dateOfEvent" 370 >{{moment(schoolEvent.dateOfEvent).format("DD MMMM, YYYY")}}</div>
370 >{{moment(schoolEvent.dateOfEvent).format("DD MMMM, YYYY")}}</div> 371 <!-- event title-->
371 <!-- event title--> 372 <div class="body-1" v-if="schoolEvent.title">{{schoolEvent.title}}</div>
372 <div class="body-1" v-if="schoolEvent.title">{{schoolEvent.title}}</div> 373 </div>
373 </div> 374 </div>
374 </div> 375 </div>
375 </div> 376 <div v-if="schoolEvents.length == 0">
376 <div v-if="schoolEvents.length == 0"> 377 <p class="text-center title grey lighten-4 error--text">No Data Found!</p>
377 <p class="text-center title grey lighten-4 error--text">No Data Found!</p> 378 </div>
378 </div> 379 </v-container>
379 </v-container> 380 </v-card>
380 </v-card> 381 </v-flex>
381 </v-flex> 382 </v-layout>
382 </v-layout> 383
383
384 <!-- FOR TEACHER ROLE -->
385 <!-- <v-card class="mt-2 card" v-if="role == 'TEACHER'"> 384 <!-- FOR TEACHER ROLE -->
386 <v-layout> 385 <!-- <v-card class="mt-2 card" v-if="role == 'TEACHER'">
387 <v-flex xs6 sm6 md6> 386 <v-layout>
388 <h4 class="pa-3"> 387 <v-flex xs6 sm6 md6>
389 <b>Notice</b> 388 <h4 class="pa-3">
390 </h4> 389 <b>Notice</b>
391 <v-data-table 390 </h4>
392 :items="noticeData" 391 <v-data-table
393 class="elevation-0" 392 :items="noticeData"
394 flat 393 class="elevation-0"
395 hide-actions 394 flat
396 hide-headers 395 hide-actions
397 style="border-spacing: 0 !important;" 396 hide-headers
398 > 397 style="border-spacing: 0 !important;"
399 <template 398 >
400 slot="items" 399 <template
401 slot-scope="props" 400 slot="items"
402 v-if="props.index < 5" 401 slot-scope="props"
403 style="border-spacing: 0 !important;" 402 v-if="props.index < 5"
404 > 403 style="border-spacing: 0 !important;"
405 <tr class="td-notice"> 404 >
406 <td class="grey--text" style="width:18px">{{ props.index + 1}}</td> 405 <tr class="td-notice">
407 <td> 406 <td class="grey--text" style="width:18px">{{ props.index + 1}}</td>
408 <span class="grey--text caption">{{ date(props.item.created) }}</span> 407 <td>
409 <br /> 408 <span class="grey--text caption">{{ date(props.item.created) }}</span>
410 <span class="body-2">{{ props.item.title}}</span> 409 <br />
411 </td> 410 <span class="body-2">{{ props.item.title}}</span>
412 <td class="grey--text mt-2">{{ props.item.description}}</td> 411 </td>
413 412 <td class="grey--text mt-2">{{ props.item.description}}</td>
414 <td class="text-xs-center"> 413
415 <span> 414 <td class="text-xs-center">
416 <v-tooltip top> 415 <span>
417 <img 416 <v-tooltip top>
418 slot="activator" 417 <img
419 style="cursor:pointer; width:25px; height:25px; " 418 slot="activator"
420 @click="profile" 419 style="cursor:pointer; width:25px; height:25px; "
421 src="/static/icon/view.png" 420 @click="profile"
422 /> 421 src="/static/icon/view.png"
423 <span>View</span> 422 />
424 </v-tooltip> 423 <span>View</span>
425 </span> 424 </v-tooltip>
426 </td> 425 </span>
427 </tr> 426 </td>
428 </template> 427 </tr>
429 </v-data-table> 428 </template>
430 </v-flex> 429 </v-data-table>
431 430 </v-flex>
432 <v-flex xs6 sm6 md6> 431
433 <v-card-text> 432 <v-flex xs6 sm6 md6>
434 <v-card-title class="justify-center subheading font-weight-bold">Meeting Events</v-card-title> 433 <v-card-text>
435 <div 434 <v-card-title class="justify-center subheading font-weight-bold">Meeting Events</v-card-title>
436 v-for="(activity,index) in activityList" 435 <div
437 :key="index" 436 v-for="(activity,index) in activityList"
438 class="mt-2" 437 :key="index"
439 style="cursor: pointer;" 438 class="mt-2"
440 @click="seeEventDetails(activity)" 439 style="cursor: pointer;"
441 > 440 @click="seeEventDetails(activity)"
442 <span 441 >
443 :style="{ 'background-color': colorsArray[index%colorsArray.length] }" 442 <span
444 style="height: 12px;width: 12px;border-radius: 50%;display: inline-block;vertical-align: top;" 443 :style="{ 'background-color': colorsArray[index%colorsArray.length] }"
445 ></span> 444 style="height: 12px;width: 12px;border-radius: 50%;display: inline-block;vertical-align: top;"
446 <div style="display: inline-block;" class="ml-2"> 445 ></span>
447 <div> 446 <div style="display: inline-block;" class="ml-2">
448 <div 447 <div>
449 class="grey--text lighten-1 caption" 448 <div
450 v-if="activity.dateOfEvent" 449 class="grey--text lighten-1 caption"
451 >{{moment(activity.dateOfEvent).format("DD MMMM, YYYY")}}</div> 450 v-if="activity.dateOfEvent"
452 <div class="body-2" v-if="activity.title">{{activity.title}}</div> 451 >{{moment(activity.dateOfEvent).format("DD MMMM, YYYY")}}</div>
453 </div> 452 <div class="body-2" v-if="activity.title">{{activity.title}}</div>
454 </div> 453 </div>
455 </div> 454 </div>
456 <div v-if="activityList.length == 0"> 455 </div>
457 <p class="text-center title grey lighten-4 error--text">No Data Found!</p> 456 <div v-if="activityList.length == 0">
458 </div> 457 <p class="text-center title grey lighten-4 error--text">No Data Found!</p>
459 </v-card-text> 458 </div>
460 </v-flex> 459 </v-card-text>
461 </v-layout> 460 </v-flex>
462 </v-card>--> 461 </v-layout>
463 462 </v-card>-->
464 <!-- ROLE == PARENT, MY COURSES --> 463
465 <v-layout v-if="role == 'PARENT'"> 464 <!-- ROLE == PARENT, MY COURSES -->
466 <v-flex xs12> 465 <v-layout v-if="role == 'PARENT'">
467 <v-card class="elevation-0 account-Card"> 466 <v-flex xs12>
468 <v-container> 467 <v-card class="elevation-0 account-Card">
469 <v-card-title class="justify-center title font-weight-bold">My Courses</v-card-title> 468 <v-container>
470 <v-layout wrap> 469 <v-card-title class="justify-center title font-weight-bold">My Courses</v-card-title>
471 <v-flex xs12 sm12> 470 <v-layout wrap>
472 <v-list two-line> 471 <v-flex xs12 sm12>
473 <template> 472 <v-list two-line>
474 <v-list-tile v-for="(course,i) in courseData" :key="i"> 473 <template>
475 <v-list-tile-avatar> 474 <v-list-tile v-for="(course,i) in courseData" :key="i">
476 <!-- <v-icon 475 <v-list-tile-avatar>
477 class="account-circle darkBlue-color" 476 <!-- <v-icon
478 style="cursor: pointer;"
479 @click="routeToCourseDetails(course._id)" 477 class="account-circle darkBlue-color"
480 >panorama_fish_eye</v-icon>--> 478 style="cursor: pointer;"
481 <span> 479 @click="routeToCourseDetails(course._id)"
482 <v-tooltip top> 480 >panorama_fish_eye</v-icon>-->
483 <img 481 <span>
484 slot="activator" 482 <v-tooltip top>
485 style="cursor:pointer; width:25px; height:25px; " 483 <img
486 src="/static/icon/view.png" 484 slot="activator"
487 @click="routeToCourseDetails(course._id)" 485 style="cursor:pointer; width:25px; height:25px; "
488 /> 486 src="/static/icon/view.png"
489 <span>View</span> 487 @click="routeToCourseDetails(course._id)"
490 </v-tooltip> 488 />
491 </span> 489 <span>View</span>
492 </v-list-tile-avatar> 490 </v-tooltip>
493 <v-list-tile-content> 491 </span>
494 <v-list-tile-title 492 </v-list-tile-avatar>
495 style="cursor: pointer;" 493 <v-list-tile-content>
496 @click="routeToCourseDetails(course._id)" 494 <v-list-tile-title
497 >{{ course.courseName }}</v-list-tile-title> 495 style="cursor: pointer;"
498 </v-list-tile-content> 496 @click="routeToCourseDetails(course._id)"
499 </v-list-tile> 497 >{{ course.courseName }}</v-list-tile-title>
500 </template> 498 </v-list-tile-content>
501 </v-list> 499 </v-list-tile>
502 </v-flex> 500 </template>
503 </v-layout> 501 </v-list>
504 </v-container> 502 </v-flex>
505 </v-card> 503 </v-layout>
504 </v-container>
506 </v-flex> 505 </v-card>
507 </v-layout> 506 </v-flex>
508 507 </v-layout>
509 <v-layout row wrap v-if="role == 'PARENT'"> 508
509 <v-layout row wrap v-if="role == 'PARENT'">
510 <!-- LATEST ANNOUNCEMENTSS , IF ROLE == PARENT -->
510 <!-- LATEST ANNOUNCEMENTSS , IF ROLE == PARENT --> 511 <v-flex xs6>
511 <v-flex xs6> 512 <v-card class="card">
512 <v-card class="card"> 513 <v-container>
513 <v-container> 514 <v-card-title
514 <v-card-title 515 class="justify-center subheading font-weight-bold"
516 >Latest Announcements</v-card-title>
515 class="justify-center subheading font-weight-bold" 517
516 >Latest Announcements</v-card-title> 518 <v-data-table
517 519 :items="annoucementData"
518 <v-data-table 520 class="elevation-0"
519 :items="annoucementData" 521 flat
520 class="elevation-0" 522 hide-actions
521 flat 523 hide-headers
522 hide-actions
523 hide-headers
524 style="border-spacing: 0 !important;"
525 >
526 <template
527 slot="items"
528 slot-scope="props" 524 style="border-spacing: 0 !important;"
529 v-if="props.index < 5" 525 >
530 style="border-spacing: 0 !important;" 526 <template
531 > 527 slot="items"
532 <tr class="td-notice"> 528 slot-scope="props"
533 <td class="grey--text" style="width:18px">{{ props.index + 1}}</td> 529 v-if="props.index < 5"
534 <td> 530 style="border-spacing: 0 !important;"
535 <span class="grey--text caption">{{ date(props.item.created) }}</span> 531 >
536 <br /> 532 <tr class="td-notice">
537 <span class="body-2">{{ props.item.discussionType}}</span> 533 <td class="grey--text" style="width:18px">{{ props.index + 1}}</td>
538 </td> 534 <td>
539 <td class="text-xs-center"> 535 <span class="grey--text caption">{{ date(props.item.created) }}</span>
540 <span> 536 <br />
541 <v-tooltip top> 537 <span class="body-2">{{ props.item.discussionType}}</span>
542 <img 538 </td>
543 slot="activator" 539 <td class="text-xs-center">
544 style="cursor:pointer; width:25px; height:25px; " 540 <span>
545 src="/static/icon/view.png" 541 <v-tooltip top>
546 /> 542 <img
547 <span>View</span> 543 slot="activator"
548 </v-tooltip> 544 style="cursor:pointer; width:25px; height:25px; "
549 </span> 545 src="/static/icon/view.png"
550 </td> 546 />
551 </tr> 547 <span>View</span>
548 </v-tooltip>
549 </span>
550 </td>
551 </tr>
552 </template>
553 </v-data-table>
554 </v-container>
552 </template> 555 </v-card>
553 </v-data-table> 556 </v-flex>
557 <!-- IF ROLE == PARENT, SCHOOL EVENTS -->
554 </v-container> 558 <v-flex xs6>
555 </v-card> 559 <v-card class="card">
556 </v-flex> 560 <v-container>
557 <!-- IF ROLE == PARENT, SCHOOL EVENTS --> 561 <v-card-title class="justify-center subheading font-weight-bold">School Events</v-card-title>
558 <v-flex xs6> 562 <div
563 v-for="(schoolEvent,index) in schoolEvents"
564 :key="schoolEvent.title"
565 class="mt-2"
566 style="cursor: pointer;"
567 @click="seeEventDetails(schoolEvent,'schoolEvent')"
568 >
569 <!-- color dot-->
570 <span
571 :style="{ 'background-color': colorsArray[index%colorsArray.length] }"
572 style="height: 12px;width: 12px;border-radius: 50%;display: inline-block;vertical-align: top;"
573 ></span>
574 <div style="display: inline-block;" class="ml-2">
575 <div>
576 <!-- date of event -->
577 <div
578 class="grey--text lighten-1 caption"
579 v-if="schoolEvent.dateOfEvent"
580 >{{moment(schoolEvent.dateOfEvent).format("DD MMMM, YYYY")}}</div>
581 <!-- event title-->
582 <div class="body-1" v-if="schoolEvent.title">{{schoolEvent.title}}</div>
583 </div>
584 </div>
585 </div>
586 <div v-if="schoolEvents.length == 0">
587 <p class="text-center title grey lighten-4 error--text">No Data Found!</p>
588 </div>
589 </v-container>
590 </v-card>
591 </v-flex>
592 <!-- ONLINE USER , IF ROLE == PARENT -->
593 <!-- <v-flex xs6>
594 <v-card class="card">
595 <v-container>
596 <v-card-title class="justify-center subheading font-weight-bold">Online user</v-card-title>
559 <v-card class="card"> 597
560 <v-container> 598 <v-data-table
561 <v-card-title class="justify-center subheading font-weight-bold">School Events</v-card-title> 599 :items="onlineUser"
562 <div 600 class="elevation-0"
563 v-for="(schoolEvent,index) in schoolEvents" 601 flat
564 :key="schoolEvent.title" 602 hide-actions
565 class="mt-2" 603 hide-headers
566 style="cursor: pointer;"
567 @click="seeEventDetails(schoolEvent,'schoolEvent')"
568 >
569 <!-- color dot-->
570 <span
571 :style="{ 'background-color': colorsArray[index%colorsArray.length] }"
572 style="height: 12px;width: 12px;border-radius: 50%;display: inline-block;vertical-align: top;" 604 style="border-spacing: 0 !important;"
573 ></span> 605 >
574 <div style="display: inline-block;" class="ml-2"> 606 <template
575 <div> 607 slot="items"
576 <!-- date of event --> 608 slot-scope="props"
577 <div 609 v-if="props.index < 5"
578 class="grey--text lighten-1 caption" 610 style="border-spacing: 0 !important;"
579 v-if="schoolEvent.dateOfEvent" 611 >
580 >{{moment(schoolEvent.dateOfEvent).format("DD MMMM, YYYY")}}</div> 612 <tr class="td-notice">
581 <!-- event title--> 613 <td class="grey--text" style="width:18px">{{ props.index + 1}}</td>
582 <div class="body-1" v-if="schoolEvent.title">{{schoolEvent.title}}</div> 614 <td>
583 </div> 615 <span class="body-2">{{ props.item.user }}</span>
584 </div> 616 </td>
585 </div> 617 <td class="text-xs-center">
586 <div v-if="schoolEvents.length == 0"> 618 <span>
587 <p class="text-center title grey lighten-4 error--text">No Data Found!</p> 619 <v-tooltip top>
588 </div> 620 <img
589 </v-container> 621 slot="activator"
590 </v-card> 622 style="cursor:pointer; width:25px; height:25px; "
591 </v-flex> 623 src="/static/icon/view.png"
592 <!-- ONLINE USER , IF ROLE == PARENT --> 624 />
593 <v-flex xs6> 625 <span>View</span>
626 </v-tooltip>
627 </span>
628 </td>
629 </tr>
630 </template>
631 </v-data-table>
632 </v-container>
594 <v-card class="card"> 633 </v-card>
595 <v-container> 634 </v-flex> -->
596 <v-card-title class="justify-center subheading font-weight-bold">Online user</v-card-title> 635 </v-layout>
597 636 </v-container>
598 <v-data-table 637 </v-flex>
599 :items="onlineUser" 638 <v-spacer></v-spacer>
600 class="elevation-0" 639 <!-- SIDE BAR -->
601 flat 640 <v-flex xs12 sm12 md4>
602 hide-actions 641 <v-card height="100%" class="elevation-0 mt-3 profileDasboard">
603 hide-headers 642 <v-card-text class="px-2">
604 style="border-spacing: 0 !important;" 643 <h4 class="text-xs-center py-3">
605 > 644 <b>Profile</b>
606 <template 645 </h4>
607 slot="items" 646 <v-flex xs12 class="py-3">
608 slot-scope="props" 647 <v-layout wrap>
609 v-if="props.index < 5" 648 <v-flex xs12 sm12 md4>
610 style="border-spacing: 0 !important;" 649 <img
611 > 650 src="/static/icon/user.png"
612 <tr class="td-notice"> 651 v-if="!userData.profilePicUrl && !userData.schoolLogoUrl"
613 <td class="grey--text" style="width:18px">{{ props.index + 1}}</td> 652 width="80"
614 <td> 653 />
615 <span class="body-2">{{ props.item.user }}</span> 654 <img
616 </td> 655 :src="userData.profilePicUrl"
617 <td class="text-xs-center"> 656 onerror="this.src='/static/icon/user.png';"
618 <span> 657 v-if="userData.profilePicUrl"
619 <v-tooltip top> 658 width="80"
620 <img 659 />
621 slot="activator" 660 <img
622 style="cursor:pointer; width:25px; height:25px; " 661 :src="userData.schoolLogoUrl"
623 src="/static/icon/view.png" 662 onerror="this.src='/static/icon/user.png';"
624 /> 663 v-if="userData.schoolLogoUrl"
625 <span>View</span> 664 width="80"
626 </v-tooltip> 665 />
627 </span> 666 </v-flex>
628 </td> 667 <v-flex xs12 sm12 md6>
629 </tr> 668 <p class="mb-0 body-1">
630 </template> 669 <i>{{ userData.name }}</i>
631 </v-data-table> 670 </p>
632 </v-container> 671 <p class="mb-0 caption grey--text">{{ userData.email }}</p>
633 </v-card> 672 <p class="mb-0 caption grey--text">{{ userData.mobile }}</p>
634 </v-flex> 673 <address class="caption grey--text mb-3">{{ userData.address }}</address>
635 </v-layout> 674 </v-flex>
636 </v-container> 675 </v-layout>
637 </v-flex> 676 </v-flex>
638 <v-spacer></v-spacer> 677 <hr />
639 <!-- SIDE BAR --> 678 <div class="text-xs-center py-3 subheading font-weight-bold">Calender</div>
640 <v-flex xs12 sm12 md4> 679
641 <v-card height="100%" class="elevation-0 mt-3 profileDasboard"> 680 <vue-event-calendar :events="activityEvents" @day-changed="handleDayChanged($event)"></vue-event-calendar>
642 <v-card-text class="px-2"> 681
643 <h4 class="text-xs-center py-3"> 682 <!-- MEETING EVENTS -->
644 <b>Profile</b> 683 <!-- IF ROLE IS ADMIN -->
645 </h4> 684 <v-card class="my-3 elevation-0">
646 <v-flex xs12 class="py-3"> 685 <v-card-text v-if="$store.state.role === 'ADMIN' ">
647 <v-layout wrap> 686 <!-- MEETING EVENTS -->
648 <v-flex xs12 sm12 md4> 687 <v-card-title class="justify-center subheading font-weight-bold">Meeting Events</v-card-title>
649 <img 688 <div
650 src="/static/icon/user.png" 689 v-for="(activity,index) in activityList"
651 v-if="!userData.profilePicUrl && !userData.schoolLogoUrl" 690 :key="index"
652 width="80" 691 class="mt-2"
653 /> 692 style="cursor: pointer;"
654 <img 693 @click="seeEventDetails(activity)"
655 :src="userData.profilePicUrl" 694 >
656 onerror="this.src='/static/icon/user.png';" 695 <span
657 v-if="userData.profilePicUrl" 696 :style="{ 'background-color': colorsArray[index%colorsArray.length] }"
658 width="80" 697 style="height: 12px;width: 12px;border-radius: 50%;display: inline-block;vertical-align: top;"
659 /> 698 ></span>
660 <img 699 <div style="display: inline-block;" class="ml-2">
661 :src="userData.schoolLogoUrl" 700 <div>
662 onerror="this.src='/static/icon/user.png';" 701 <div
663 v-if="userData.schoolLogoUrl" 702 class="grey--text lighten-1 caption"
664 width="80" 703 v-if="activity.dateOfEvent"
665 /> 704 >{{moment(activity.dateOfEvent).format("DD MMMM, YYYY")}}</div>
666 </v-flex> 705 <div class="body-1" v-if="activity.title">{{activity.title}}</div>
667 <v-flex xs12 sm12 md6> 706 </div>
668 <p class="mb-0 body-1"> 707 </div>
669 <i>{{ userData.name }}</i> 708 </div>
670 </p> 709 <div v-if="activityList.length == 0">
671 <p class="mb-0 caption grey--text">{{ userData.email }}</p> 710 <p class="text-center title grey lighten-4 error--text">No Data Found!</p>
672 <p class="mb-0 caption grey--text">{{ userData.mobile }}</p> 711 </div>
673 <address class="caption grey--text mb-3">{{ userData.address }}</address> 712 </v-card-text>
674 </v-flex> 713
675 </v-layout> 714 <!-- ROLE IS NOT ADMIN -->
676 </v-flex> 715 <v-card-text v-if="$store.state.role != 'ADMIN'">
677 <hr /> 716 <v-card-title class="justify-center subheading font-weight-bold">Meeting Events</v-card-title>
678 <div class="text-xs-center py-3 subheading font-weight-bold">Calender</div> 717 <div
679 718 v-for="(activity,index) in activityList"
680 <vue-event-calendar :events="activityEvents" @day-changed="handleDayChanged($event)"></vue-event-calendar> 719 :key="index"
681 720 class="mt-2"
682 <!-- MEETING EVENTS --> 721 style="cursor: pointer;"
683 <!-- IF ROLE IS ADMIN --> 722 @click="seeEventDetails(activity)"
684 <v-card class="my-3 elevation-0"> 723 >
685 <v-card-text v-if="$store.state.role === 'ADMIN' "> 724 <span
686 <!-- MEETING EVENTS --> 725 :style="{ 'background-color': colorsArray[index%colorsArray.length] }"
687 <v-card-title class="justify-center subheading font-weight-bold">Meeting Events</v-card-title> 726 style="height: 12px;width: 12px;border-radius: 50%;display: inline-block;vertical-align: top;"
688 <div 727 ></span>
689 v-for="(activity,index) in activityList" 728 <div style="display: inline-block;" class="ml-2">
690 :key="index" 729 <!-- MEETING EVENTS FOR PARENT -->
691 class="mt-2" 730 <div v-if="$store.state.role === 'PARENT' ">
692 style="cursor: pointer;" 731 <div
693 @click="seeEventDetails(activity)" 732 class="grey--text lighten-1 caption"
694 > 733 v-if="activity.meetingEvent"
695 <span 734 >{{moment(activity.meetingEvent.dateOfEvent).format("DD MMMM, YYYY")}}</div>
696 :style="{ 'background-color': colorsArray[index%colorsArray.length] }" 735 <div
697 style="height: 12px;width: 12px;border-radius: 50%;display: inline-block;vertical-align: top;" 736 class="body-2"
698 ></span> 737 v-if="activity.meetingEvent"
699 <div style="display: inline-block;" class="ml-2"> 738 >{{activity.meetingEvent.title}}</div>
700 <div> 739 </div>
701 <div 740
702 class="grey--text lighten-1 caption" 741 <!-- MEETING EVENTS FOR TEACHER -->
703 v-if="activity.dateOfEvent" 742 <div v-if="role === 'TEACHER'">
704 >{{moment(activity.dateOfEvent).format("DD MMMM, YYYY")}}</div> 743 <div
705 <div class="body-1" v-if="activity.title">{{activity.title}}</div> 744 class="grey--text lighten-1 caption"
706 </div> 745 v-if="activity.dateOfEvent"
707 </div> 746 >{{moment(activity.dateOfEvent).format("DD MMMM, YYYY")}}</div>
708 </div> 747 <div class="body-2" v-if="activity.title">{{activity.title}}</div>
709 <div v-if="activityList.length == 0"> 748 </div>
710 <p class="text-center title grey lighten-4 error--text">No Data Found!</p> 749 </div>
711 </div> 750 <div v-if="activityList.length == 0">
712 </v-card-text> 751 <p class="text-center title grey lighten-4 error--text">No Data Found!</p>
713 752 </div>
714 <!-- ROLE IS NOT ADMIN --> 753 </div>
715 <v-card-text v-if="$store.state.role != 'ADMIN'"> 754 </v-card-text>
716 <v-card-title class="justify-center subheading font-weight-bold">Meeting Events</v-card-title> 755 </v-card>
717 <div 756 </v-card-text>
718 v-for="(activity,index) in activityList" 757 </v-card>
719 :key="index" 758 </v-flex>
720 class="mt-2" 759 </v-layout>
721 style="cursor: pointer;" 760
722 @click="seeEventDetails(activity)" 761 <v-dialog v-model="dialog" max-width="500" persistent>
723 > 762 <v-card color="grey lighten-4" flat>
724 <span 763 <v-toolbar dark color="fixcolors">
725 :style="{ 'background-color': colorsArray[index%colorsArray.length] }" 764 <v-spacer></v-spacer>
726 style="height: 12px;width: 12px;border-radius: 50%;display: inline-block;vertical-align: top;" 765 <v-btn icon @click="dialog= false">
727 ></span> 766 <v-icon>close</v-icon>
728 <div style="display: inline-block;" class="ml-2"> 767 </v-btn>
729 <!-- MEETING EVENTS FOR PARENT --> 768 </v-toolbar>
730 <div v-if="$store.state.role === 'PARENT' "> 769 <v-flex class="py-4">
731 <div 770 <v-list-tile>
732 class="grey--text lighten-1 caption" 771 <v-list-tile-action>
733 v-if="activity.meetingEvent" 772 <v-icon>edit</v-icon>
734 >{{moment(activity.meetingEvent.dateOfEvent).format("DD MMMM, YYYY")}}</div> 773 </v-list-tile-action>
735 <div 774 <v-list-tile-content>
736 class="body-2" 775 <v-list-tile-title>{{ selected.title }}</v-list-tile-title>
737 v-if="activity.meetingEvent" 776 </v-list-tile-content>
738 >{{activity.meetingEvent.title}}</div> 777 </v-list-tile>
739 </div> 778 <v-list-tile>
740 779 <v-list-tile-action>
741 <!-- MEETING EVENTS FOR TEACHER --> 780 <v-icon>access_time</v-icon>
742 <div v-if="role === 'TEACHER'"> 781 </v-list-tile-action>
743 <div 782 <v-list-tile-content>
744 class="grey--text lighten-1 caption" 783 <v-list-tile-title>{{ date(selected.start)}}</v-list-tile-title>
745 v-if="activity.dateOfEvent" 784 </v-list-tile-content>
746 >{{moment(activity.dateOfEvent).format("DD MMMM, YYYY")}}</div> 785 </v-list-tile>
747 <div class="body-2" v-if="activity.title">{{activity.title}}</div> 786 </v-flex>
748 </div> 787 </v-card>
749 </div> 788 </v-dialog>
750 <div v-if="activityList.length == 0"> 789 </v-app>
751 <p class="text-center title grey lighten-4 error--text">No Data Found!</p> 790 </template>
752 </div> 791
753 </div> 792 <script>
754 </v-card-text> 793 import http from "@/Services/http.js";
755 </v-card> 794 import moment from "moment";
756 </v-card-text> 795 import AllApiCalls from "@/Services/AllApiCalls.js";
757 </v-card> 796 // import { FunctionalCalendar } from "vue-functional-calendar";
758 </v-flex> 797
759 </v-layout> 798 export default {
760 799 components: {
761 <v-dialog v-model="dialog" max-width="500" persistent> 800 // FunctionalCalendar
762 <v-card color="grey lighten-4" flat> 801 },
763 <v-toolbar dark color="fixcolors"> 802 mixins: [AllApiCalls],
764 <v-spacer></v-spacer> 803 data() {
765 <v-btn icon @click="dialog= false"> 804 return {
766 <v-icon>close</v-icon> 805 // data: {
767 </v-btn> 806 // clieckedToday: false
768 </v-toolbar> 807 // },
769 <v-flex class="py-4"> 808 // markedDates: ["16/4/2019", "18/4/2019", "20/4/2019", "21/4/2019"],
770 <v-list-tile> 809 // calendarData: {},
771 <v-list-tile-action> 810 // calendar: {},
772 <v-icon>edit</v-icon> 811
773 </v-list-tile-action> 812 // DIALOG BOX EVENT DETAILS
774 <v-list-tile-content> 813 tabs: [
775 <v-list-tile-title>{{ selected.title }}</v-list-tile-title> 814 { name: "School Events", icon: "mdi-account" },
776 </v-list-tile-content> 815 { name: "Meeting Events", icon: "mdi-account-outline" },
777 </v-list-tile> 816 ],
778 <v-list-tile> 817 viewEventDetails: false,
779 <v-list-tile-action> 818 active: 0,
780 <v-icon>access_time</v-icon> 819 particularEvent: [],
781 </v-list-tile-action> 820 displayEventsList: [],
782 <v-list-tile-content> 821 dialogSchoolEvents: [],
783 <v-list-tile-title>{{ date(selected.start)}}</v-list-tile-title> 822 dialogMeetingEvents: [],
784 </v-list-tile-content> 823
785 </v-list-tile> 824 // CALENDER
786 </v-flex> 825 moment: moment,
787 </v-card> 826 activityEvents: [],
788 </v-dialog> 827 onlineUser: [
789 </v-app> 828 {
790 </template> 829 user: "Student Demo",
791 830 },
792 <script> 831 {
793 import http from "@/Services/http.js"; 832 user: "Teacher Demo",
794 import moment from "moment"; 833 },
795 import AllApiCalls from "@/Services/AllApiCalls.js"; 834 {
796 // import { FunctionalCalendar } from "vue-functional-calendar"; 835 user: "Priyansh Gupta",
797 836 },
798 export default { 837 {
799 components: { 838 user: "Gaurav Aggarwal",
800 // FunctionalCalendar 839 },
801 }, 840 {
802 mixins: [AllApiCalls], 841 user: "Approve Arorra",
803 data() { 842 },
804 return { 843 ],
805 // data: { 844 showLoader: false,
806 // clieckedToday: false 845 calendarData: {},
807 // }, 846 dialog: false,
808 // markedDates: ["16/4/2019", "18/4/2019", "20/4/2019", "21/4/2019"], 847 dialogNotice: false,
809 // calendarData: {}, 848 HolidaysList: [],
810 // calendar: {}, 849 EventsList: [],
811 850 events: [],
812 // DIALOG BOX EVENT DETAILS 851 config: {
813 tabs: [ 852 eventClick: (event) => {
814 { name: "School Events", icon: "mdi-account" }, 853 this.selected = event;
815 { name: "Meeting Events", icon: "mdi-account-outline" }, 854 this.dialog = true;
816 ], 855 },
817 viewEventDetails: false, 856 },
818 active: 0, 857 selected: {},
819 particularEvent: [], 858 barGraph: [],
820 displayEventsList: [], 859 // notice: {},
821 dialogSchoolEvents: [], 860 userData: {},
822 dialogMeetingEvents: [], 861 dated: new Date(2018, 0, 9),
823 862 userList: [],
824 // CALENDER 863 sectionList: [],
825 moment: moment, 864 students: "",
826 activityEvents: [], 865 parents: "",
827 onlineUser: [ 866 teachers: "",
828 { 867 classes: "",
829 user: "Student Demo", 868 noticeData: [],
830 }, 869 expenseData: [],
831 { 870 feeData: [],
832 user: "Teacher Demo", 871 collectionData: [],
833 }, 872 courseData: [],
834 { 873 studentsData: [],
835 user: "Priyansh Gupta", 874 annoucementData: [],
836 }, 875 role: "",
837 { 876 attrs: [
838 user: "Gaurav Aggarwal", 877 {
839 }, 878 key: "today",
840 { 879 highlight: true,
841 user: "Approve Arorra", 880 dates: new Date(),
842 }, 881 },
843 ], 882 ],
844 showLoader: false, 883 drawer: true,
845 calendarData: {}, 884 items: [
846 dialog: false, 885 { title: "Home", icon: "dashboard" },
847 dialogNotice: false, 886 { title: "About", icon: "question_answer" },
848 HolidaysList: [], 887 ],
849 EventsList: [], 888 right: null,
850 events: [], 889
851 config: { 890 series: [
852 eventClick: (event) => { 891 {
853 this.selected = event; 892 name: "Total",
854 this.dialog = true; 893 data: [],
855 }, 894 },
856 }, 895 ],
857 selected: {}, 896 showChart: false,
858 barGraph: [], 897 chartOptions: {
859 // notice: {}, 898 chart: {
860 userData: {}, 899 type: "bar",
861 dated: new Date(2018, 0, 9), 900 height: 150,
862 userList: [], 901 stacked: true,
863 sectionList: [], 902 // animations: {
864 students: "", 903 // enabled: true,
865 parents: "", 904 // easing: "easeinout",
866 teachers: "", 905 // speed: 1200,
867 classes: "", 906 // animateGradually: {
868 noticeData: [], 907 // enabled: true,
869 expenseData: [], 908 // delay: 450
870 feeData: [], 909 // },
871 collectionData: [], 910 // dynamicAnimation: {
872 courseData: [], 911 // enabled: true,
873 studentsData: [], 912 // speed: 450
874 annoucementData: [], 913 // }
875 role: "", 914 // }
876 attrs: [ 915 },
877 { 916 plotOptions: {
878 key: "today", 917 bar: {
879 highlight: true, 918 horizontal: false,
880 dates: new Date(), 919 columnWidth: "25%",
881 }, 920 // endingShape: "rounded",
882 ], 921 distributed: true,
883 drawer: true, 922 },
884 items: [ 923 },
885 { title: "Home", icon: "dashboard" }, 924 responsive: [
886 { title: "About", icon: "question_answer" }, 925 {
887 ], 926 breakpoint: 480,
888 right: null, 927 options: {
889 928 legend: {
890 series: [ 929 position: "bottom",
891 { 930 offsetX: -10,
892 name: "Total", 931 offsetY: 0,
893 data: [], 932 },
894 }, 933 },
895 ], 934 },
896 showChart: false, 935 ],
897 chartOptions: { 936 legend: {
898 chart: { 937 show: false,
899 type: "bar", 938 },
900 height: 150, 939 colors: ["#7852cc", "#f9a825", "#ff8a89"],
901 stacked: true, 940 dataLabels: {
902 // animations: { 941 enabled: false,
903 // enabled: true, 942 },
904 // easing: "easeinout", 943 stroke: {
905 // speed: 1200, 944 show: true,
906 // animateGradually: { 945 width: 2,
907 // enabled: true, 946 colors: ["transparent"],
908 // delay: 450 947 },
909 // }, 948 xaxis: {
910 // dynamicAnimation: { 949 categories: ["Fee", "Collections", "Expences"],
911 // enabled: true, 950 },
912 // speed: 450 951 yaxis: {
913 // } 952 title: {
914 // } 953 text: "",
915 }, 954 },
916 plotOptions: { 955 },
917 bar: { 956 fill: {
918 horizontal: false, 957 opacity: 1,
919 columnWidth: "25%", 958 },
920 // endingShape: "rounded", 959 tooltip: {
921 distributed: true, 960 y: {
922 }, 961 formatter: function (val, opts) {
923 }, 962 return "" + val + " ";
924 responsive: [ 963 },
925 { 964 },
926 breakpoint: 480, 965 },
927 options: { 966 },
928 legend: { 967
929 position: "bottom", 968 // LATEST ACTIVITY
930 offsetX: -10, 969 colorsArray: ["#ff8a89", "#71d9ea", "#7852cc", "#F9A825"],
931 offsetY: 0, 970 activityList: [],
932 }, 971 };
933 }, 972 },
934 }, 973
935 ], 974 methods: {
936 legend: { 975 test(e) {
937 show: false, 976 // console.log(" test - ", e);
938 }, 977 },
978
979 /*WHEN CALENDER IS CLICKED - DISPLAYS EVENTS IN DIALOG BOX */
939 colors: ["#7852cc", "#f9a825", "#ff8a89"], 980 async handleDayChanged(e) {
940 dataLabels: { 981 // console.log("event calender - ", e);
941 enabled: false, 982 /*the list of events that will be used in dialog box to display events */
942 }, 983
943 stroke: { 984 this.dialogMeetingEvents = [];
944 show: true, 985 this.dialogSchoolEvents = [];
945 width: 2, 986
946 colors: ["transparent"], 987 for (var i = 0; i < e.events.length; i++) {
947 }, 988 if (e.events[i].eventType == "meetingEvent") {
948 xaxis: { 989 let meetingEventResponse = await this.getParticularMeetingEvent({
949 categories: ["Fee", "Collections", "Expences"], 990 meetingEventId: e.events[i]._id,
950 }, 991 });
951 yaxis: { 992 this.dialogMeetingEvents.push(meetingEventResponse.data.data);
952 title: { 993 }
953 text: "", 994 if (e.events[i].eventType == "schoolEvent") {
954 }, 995 let schoolEventResponse = await this.getParticularSchoolEvent({
955 }, 996 schoolEventId: e.events[i]._id,
956 fill: { 997 });
957 opacity: 1, 998 this.dialogSchoolEvents.push(schoolEventResponse.data.data);
958 }, 999 }
959 tooltip: { 1000 }
960 y: { 1001 /* Opens the dialog box */
961 formatter: function (val, opts) { 1002 this.viewEventDetails = true;
962 return "" + val + " "; 1003 },
1004
1005 /* see meeting events, school events individually (when calender is not clicked) */
963 }, 1006 async seeEventDetails(activity, message) {
964 }, 1007 // if (this.$store.state.role === "TEACHER") {
965 }, 1008 // let response = await this.getParticularMeetingEvent({
966 }, 1009 // meetingEventId: activity._id,
967 1010 // });
968 // LATEST ACTIVITY 1011 // this.displayEventsList = [];
969 colorsArray: ["#ff8a89", "#71d9ea", "#7852cc", "#F9A825"], 1012 // this.displayEventsList.push(response.data.data);
970 activityList: [], 1013 // this.viewEventDetails = true;
971 }; 1014 // }
972 }, 1015 if (this.$store.state.role === "PARENT") {
973 1016 if (message == "schoolEvent") {
974 methods: { 1017 let response = await this.getParticularSchoolEvent({
975 test(e) { 1018 schoolEventId: activity._id,
976 // console.log(" test - ", e); 1019 });
977 }, 1020 this.displayEventsList = [];
1021 this.displayEventsList.push(response.data.data);
1022 } else {
1023 let response = await this.getParticularMeetingEvent({
1024 meetingEventId: activity.meetingEvent._id,
1025 });
1026 this.displayEventsList = [];
1027 this.displayEventsList.push(response.data.data);
1028 }
978 1029 this.viewEventDetails = true;
979 /*WHEN CALENDER IS CLICKED - DISPLAYS EVENTS IN DIALOG BOX */ 1030 }
980 async handleDayChanged(e) { 1031 if (
1032 this.$store.state.role === "ADMIN" ||
1033 this.$store.state.role === "TEACHER"
1034 ) {
981 // console.log("event calender - ", e); 1035 if (message == "schoolEvent") {
982 /*the list of events that will be used in dialog box to display events */ 1036 let response = await this.getParticularSchoolEvent({
983 1037 schoolEventId: activity._id,
984 this.dialogMeetingEvents = []; 1038 });
985 this.dialogSchoolEvents = []; 1039 this.displayEventsList = [];
986 1040 this.displayEventsList.push(response.data.data);
987 for (var i = 0; i < e.events.length; i++) { 1041 } else {
988 if (e.events[i].eventType == "meetingEvent") { 1042 let response = await this.getParticularMeetingEvent({
989 let meetingEventResponse = await this.getParticularMeetingEvent({ 1043 meetingEventId: activity._id,
990 meetingEventId: e.events[i]._id, 1044 });
991 }); 1045 this.displayEventsList = [];
992 this.dialogMeetingEvents.push(meetingEventResponse.data.data); 1046 this.displayEventsList.push(response.data.data);
993 } 1047 }
994 if (e.events[i].eventType == "schoolEvent") { 1048 this.viewEventDetails = true;
995 let schoolEventResponse = await this.getParticularSchoolEvent({ 1049 }
996 schoolEventId: e.events[i]._id, 1050 },
997 }); 1051 async routeToCourseDetails(courseId) {
998 this.dialogSchoolEvents.push(schoolEventResponse.data.data); 1052 /* getParticularCourseDetail- To get courseDetail - defined in GetApis.js*/
999 } 1053 let response = await this.getParticularCourseDetail(courseId);
1000 } 1054
1001 /* Opens the dialog box */ 1055 /* If the response is null then dont route */
1002 this.viewEventDetails = true; 1056 if (response.data.data.length > 0) {
1003 }, 1057 this.$router.push({
1004 1058 name: "Course Details",
1005 /* see meeting events, school events individually (when calender is not clicked) */ 1059 query: { courseId: courseId },
1006 async seeEventDetails(activity, message) { 1060 });
1007 // if (this.$store.state.role === "TEACHER") { 1061 } else {
1008 // let response = await this.getParticularMeetingEvent({ 1062 this.seeSnackbar("No Data Available", "warning");
1009 // meetingEventId: activity._id, 1063 }
1010 // }); 1064 },
1011 // this.displayEventsList = []; 1065
1012 // this.displayEventsList.push(response.data.data); 1066 closeNotice() {
1013 // this.viewEventDetails = true; 1067 this.dialogNotice = false;
1014 // } 1068 },
1015 if (this.$store.state.role === "PARENT") { 1069 profile() {
1016 if (message == "schoolEvent") { 1070 // this.editedIndex = this.desserts.indexOf(item);
1017 let response = await this.getParticularSchoolEvent({ 1071 // this.notice = Object.assign({}, item);
1018 schoolEventId: activity._id, 1072 // this.dialogNotice = true;
1019 }); 1073 this.$router.push("/noticeBoard");
1020 this.displayEventsList = []; 1074 },
1021 this.displayEventsList.push(response.data.data); 1075 date: function (date) {
1022 } else { 1076 return moment(date).format("MMMM DD, YYYY HH:mm");
1023 let response = await this.getParticularMeetingEvent({ 1077 },
1024 meetingEventId: activity.meetingEvent._id, 1078 activityDate(date) {
1025 }); 1079 return moment(date).format("MMMM DD, YYYY");
1026 this.displayEventsList = []; 1080 },
1027 this.displayEventsList.push(response.data.data); 1081 refreshEvents() {
1028 } 1082 this.$refs.calendar.$emit("refetch-events");
1029 this.viewEventDetails = true; 1083 },
1030 } 1084 removeEvent() {
1031 if ( 1085 this.$refs.calendar.$emit("remove-event", this.selected);
1032 this.$store.state.role === "ADMIN" || 1086 this.selected = {};
1033 this.$store.state.role === "TEACHER" 1087 },
1034 ) { 1088 eventSelected(event) {
1035 if (message == "schoolEvent") { 1089 this.selected = event;
1036 let response = await this.getParticularSchoolEvent({ 1090 },
1037 schoolEventId: activity._id, 1091 // eventDropStart: function(event) {
1038 }); 1092 // event.editable = false;
1039 this.displayEventsList = []; 1093 // },
1040 this.displayEventsList.push(response.data.data); 1094 eventCreated(...test) {
1041 } else { 1095 // console.log(test);
1042 let response = await this.getParticularMeetingEvent({ 1096 },
1043 meetingEventId: activity._id, 1097 getStudents() {
1044 }); 1098 http()
1045 this.displayEventsList = []; 1099 .get("/getStudentsList")
1046 this.displayEventsList.push(response.data.data); 1100 .then((response) => {
1047 } 1101 this.students = response.data.data;
1048 this.viewEventDetails = true; 1102 this.showLoader = false;
1049 } 1103 })
1050 }, 1104 .catch((error) => {
1051 async routeToCourseDetails(courseId) { 1105 // console.log("err====>", err);
1052 /* getParticularCourseDetail- To get courseDetail - defined in GetApis.js*/ 1106 this.showLoader = false;
1053 let response = await this.getParticularCourseDetail(courseId); 1107 if (error.response.status === 401) {
1054 1108 this.$router.replace({ path: "/" });
1055 /* If the response is null then dont route */ 1109 this.$store.dispatch("setToken", null);
1056 if (response.data.data.length > 0) { 1110 this.$store.dispatch("Id", null);
1057 this.$router.push({ 1111 }
1058 name: "Course Details", 1112 });
1059 query: { courseId: courseId }, 1113 },
1060 }); 1114 getParents() {
1061 } else { 1115 http()
1062 this.seeSnackbar("No Data Available", "warning"); 1116 .get("/getParentsList")
1063 } 1117 .then((response) => {
1064 }, 1118 this.parents = response.data.data;
1065 1119 this.showLoader = false;
1066 closeNotice() { 1120 })
1067 this.dialogNotice = false; 1121 .catch((error) => {
1068 }, 1122 // console.log("err====>", err);
1069 profile() { 1123 this.showLoader = false;
1070 // this.editedIndex = this.desserts.indexOf(item); 1124 });
1071 // this.notice = Object.assign({}, item); 1125 },
1072 // this.dialogNotice = true; 1126 getTeachers() {
1073 this.$router.push("/noticeBoard"); 1127 http()
1074 }, 1128 .get("/getTeachersList")
1075 date: function (date) { 1129 .then((response) => {
1076 return moment(date).format("MMMM DD, YYYY HH:mm"); 1130 this.teachers = response.data.data;
1077 }, 1131 this.showLoader = false;
1078 activityDate(date) { 1132 })
1079 return moment(date).format("MMMM DD, YYYY"); 1133 .catch((error) => {
1080 }, 1134 // console.log("err====>", err);
1081 refreshEvents() { 1135 this.showLoader = false;
1082 this.$refs.calendar.$emit("refetch-events"); 1136 });
1083 }, 1137 },
1084 removeEvent() { 1138 getClasses() {
1085 this.$refs.calendar.$emit("remove-event", this.selected); 1139 http()
1086 this.selected = {}; 1140 .get("/getClassesList")
1087 }, 1141 .then((response) => {
1088 eventSelected(event) { 1142 this.classes = response.data.data;
1089 this.selected = event; 1143 this.showLoader = false;
1090 }, 1144 })
1091 // eventDropStart: function(event) { 1145 .catch((error) => {
1092 // event.editable = false; 1146 this.showLoader = false;
1093 // }, 1147 });
1094 eventCreated(...test) { 1148 },
1095 // console.log(test); 1149 getNoticeData() {
1096 }, 1150 this.showLoader = true;
1097 getStudents() { 1151 http()
1098 http() 1152 .get("/getEventsList")
1099 .get("/getStudentsList") 1153 .then((response) => {
1100 .then((response) => { 1154 this.noticeData = response.data.data;
1101 this.students = response.data.data; 1155 this.showLoader = false;
1102 this.showLoader = false; 1156 })
1103 }) 1157 .catch((error) => {
1104 .catch((error) => { 1158 this.showLoader = false;
1105 // console.log("err====>", err); 1159 });
1106 this.showLoader = false; 1160 },
1107 if (error.response.status === 401) { 1161 getUserData() {
1108 this.$router.replace({ path: "/" }); 1162 // this.showLoader = true;
1109 this.$store.dispatch("setToken", null); 1163 if (this.$store.state.role === "PARENT") {
1110 this.$store.dispatch("Id", null); 1164 http()
1111 } 1165 .get("/getParticularUserDetail", {
1112 }); 1166 params: {
1113 }, 1167 studentId: localStorage.getItem("parentStudentId"),
1114 getParents() { 1168 },
1115 http() 1169 })
1116 .get("/getParentsList") 1170 .then((response) => {
1117 .then((response) => { 1171 this.userData = response.data.data;
1118 this.parents = response.data.data; 1172 this.showLoader = false;
1119 this.showLoader = false; 1173 })
1120 }) 1174 .catch((error) => {
1121 .catch((error) => { 1175 this.showLoader = false;
1122 // console.log("err====>", err); 1176 });
1123 this.showLoader = false; 1177 } else {
1124 }); 1178 http()
1125 }, 1179 .get("/getParticularUserDetail")
1126 getTeachers() { 1180 .then((response) => {
1127 http() 1181 this.userData = response.data.data;
1128 .get("/getTeachersList") 1182 this.showLoader = false;
1129 .then((response) => { 1183 })
1130 this.teachers = response.data.data; 1184 .catch((error) => {
1131 this.showLoader = false; 1185 this.showLoader = false;
1132 }) 1186 });
1133 .catch((error) => { 1187 }
1134 // console.log("err====>", err); 1188 },
1135 this.showLoader = false; 1189
1136 }); 1190 getFeesAndCollectionsData() {
1137 }, 1191 http()
1138 getClasses() { 1192 .get("/getTotalFeesAndCollections")
1139 http() 1193 .then((response) => {
1140 .get("/getClassesList") 1194 this.feeData = response.data.data;
1141 .then((response) => { 1195 // this.collectionData = response.data.data;
1142 this.classes = response.data.data; 1196 this.series[0].data[0] = this.feeData.totalFees;
1143 this.showLoader = false; 1197 this.series[0].data[1] = this.feeData.totalCollection;
1144 }) 1198 this.showLoader = false;
1145 .catch((error) => { 1199 })
1146 this.showLoader = false; 1200 .catch((error) => {
1147 }); 1201 this.showLoader = false;
1148 }, 1202 });
1149 getNoticeData() { 1203 },
1150 this.showLoader = true; 1204 getExpensesData() {
1151 http() 1205 http()
1152 .get("/getEventsList") 1206 .get("/getTotalExpenses")
1153 .then((response) => { 1207 .then((response) => {
1154 this.noticeData = response.data.data; 1208 this.expenseData = response.data.data;
1155 this.showLoader = false; 1209 // var array = response.data.data.sum;
1156 }) 1210 this.series[0].data[2] = this.expenseData.sum;
1157 .catch((error) => { 1211 this.showChart = true;
1158 this.showLoader = false; 1212 // this.series = [
1159 }); 1213 // {
1160 }, 1214 // name: "Total",
1161 getUserData() { 1215 // data: array
1162 // this.showLoader = true; 1216 // }
1163 if (this.$store.state.role === "PARENT") { 1217 // ];
1164 http() 1218 this.showLoader = false;
1165 .get("/getParticularUserDetail", { 1219 })
1166 params: { 1220 .catch((error) => {
1167 studentId: localStorage.getItem("parentStudentId"), 1221 this.showLoader = false;
1168 }, 1222 });
1169 }) 1223 },
1170 .then((response) => { 1224 // async getparentStudents() {
1171 this.userData = response.data.data; 1225 // this.showLoader = true;
1172 this.showLoader = false; 1226 // await http()
1173 }) 1227 // .get("/parentStudentsList")
1174 .catch((error) => { 1228 // .then((response) => {
1175 this.showLoader = false; 1229
1176 }); 1230 // /* set values in local storage */
1177 } else { 1231 // this.studentsData = response.data.data.students;
1178 http() 1232 // this.showLoader = false;
1179 .get("/getParticularUserDetail") 1233 // })
1180 .then((response) => { 1234 // .catch((err) => {
1181 this.userData = response.data.data; 1235 // console.log("err====>", err);
1182 this.showLoader = false; 1236 // this.showLoader = false;
1183 }) 1237 // });
1184 .catch((error) => { 1238 // await this.getCourses(parentStudentsId, classId);
1185 this.showLoader = false; 1239 // await this.getAnnoucementes(classId);
1186 }); 1240 // },
1187 } 1241 async getCourses(parentStudentsId, classId) {
1188 }, 1242 /* getStudentCourses - to get courseData - defined in GetApis.js*/
1189 1243 await this.getStudentCourses({
1190 getFeesAndCollectionsData() { 1244 classId: localStorage.getItem("parentClassId"),
1191 http() 1245 studentId: localStorage.getItem("parentStudentId"),
1192 .get("/getTotalFeesAndCollections") 1246 });
1193 .then((response) => { 1247 },
1194 this.feeData = response.data.data; 1248 getAnnoucementes(classId) {
1195 // this.collectionData = response.data.data; 1249 this.showLoader = true;
1196 this.series[0].data[0] = this.feeData.totalFees; 1250 http()
1197 this.series[0].data[1] = this.feeData.totalCollection; 1251 .get("/getAnnoucementesList", {
1198 this.showLoader = false; 1252 params: {
1199 }) 1253 classId: localStorage.getItem("parentClassId"),
1200 .catch((error) => { 1254 },
1201 this.showLoader = false; 1255 })
1202 }); 1256 .then((response) => {
1203 }, 1257 this.annoucementData = response.data.data;
1204 getExpensesData() { 1258 this.showLoader = false;
1205 http() 1259 })
1206 .get("/getTotalExpenses") 1260 .catch((err) => {
1207 .then((response) => { 1261 // console.log("err====>", err);
1208 this.expenseData = response.data.data; 1262 this.showLoader = false;
1263 this.snackbar = true;
1264 this.color = "error";
1265 this.text = error.response.data.message;
1209 // var array = response.data.data.sum; 1266 });
1210 this.series[0].data[2] = this.expenseData.sum; 1267 },
1268
1269 /* MEETING EVENTS, SCHOOL EVENTS */
1211 this.showChart = true; 1270 async getMeetingEventes() {
1212 // this.series = [ 1271 if (this.role == "TEACHER" || this.role === "ADMIN") {
1213 // { 1272 this.showLoader = true;
1214 // name: "Total", 1273 await http()
1215 // data: array 1274 .get("/getMeetingEventesList")
1216 // } 1275 .then((response) => {
1217 // ]; 1276 var activityList = response.data.data;
1218 this.showLoader = false; 1277 this.activityList = activityList;
1219 }) 1278 this.showLoader = false;
1220 .catch((error) => { 1279
1221 this.showLoader = false; 1280 /* set meetingEvents in activityEvents array to highlight event dates in calender */
1222 }); 1281 for (var i = 0; i < this.activityList.length; i++) {
1223 }, 1282 let obj = {};
1224 // async getparentStudents() { 1283 obj.date = moment(this.activityList[i].dateOfEvent).format(
1225 // this.showLoader = true; 1284 "YYYY/MM/DD"
1226 // await http() 1285 );
1227 // .get("/parentStudentsList") 1286 obj.title = this.activityList[i].title;
1228 // .then((response) => { 1287 obj._id = this.activityList[i]._id;
1229 1288 obj.eventType = "meetingEvent";
1230 // /* set values in local storage */ 1289 /* activityEvents is an array used to display events in calender on particular dates */
1231 // this.studentsData = response.data.data.students; 1290 this.activityEvents.push(obj);
1232 // this.showLoader = false; 1291 }
1233 // }) 1292 })
1234 // .catch((err) => { 1293 .catch((error) => {
1235 // console.log("err====>", err); 1294 this.showLoader = false;
1236 // this.showLoader = false; 1295 });
1237 // }); 1296 }
1238 // await this.getCourses(parentStudentsId, classId); 1297 /* If role is ADMIN,TEACHER, PARENT then school events need to be displayed too */
1239 // await this.getAnnoucementes(classId); 1298 if (
1299 this.role === "ADMIN" ||
1300 this.role === "TEACHER" ||
1301 this.role === "PARENT"
1302 ) {
1303 /* this will get data in a "schoolEvents" data property */
1240 // }, 1304 await this.getSchoolEventsList();
1241 async getCourses(parentStudentsId, classId) { 1305 /* set schoolEvents in activityEvents array to highlight event dates in calender */
1242 /* getStudentCourses - to get courseData - defined in GetApis.js*/ 1306 for (var i = 0; i < this.schoolEvents.length; i++) {
1243 await this.getStudentCourses({ 1307 let obj = {};
1244 classId: localStorage.getItem("parentClassId"), 1308 obj.date = moment(this.schoolEvents[i].dateOfEvent).format(
1245 studentId: localStorage.getItem("parentStudentId"), 1309 "YYYY/MM/DD"
1246 }); 1310 );
1247 }, 1311 obj.title = this.schoolEvents[i].title;
1248 getAnnoucementes(classId) { 1312 obj._id = this.schoolEvents[i]._id;
1249 this.showLoader = true; 1313 obj.eventType = "schoolEvent";
1250 http() 1314 /* activityEvents is an array used to display events in calender on particular dates */
1251 .get("/getAnnoucementesList", { 1315 this.activityEvents.push(obj);
1252 params: { 1316 }
1253 classId: localStorage.getItem("parentClassId"), 1317 }
1254 }, 1318 },
1255 }) 1319 },
1256 .then((response) => { 1320
1257 this.annoucementData = response.data.data; 1321 mounted() {
1258 this.showLoader = false; 1322 // = this.$store.state.schoolToken;
1259 }) 1323 // console.log("this.$store.state.role", this.token);
1260 .catch((err) => { 1324 // this.getUsersList();
1261 // console.log("err====>", err); 1325 },
1262 this.showLoader = false; 1326
1263 this.snackbar = true; 1327 async created() {
1264 this.color = "error"; 1328 if (this.$store.state.role === "ADMIN") {
1265 this.text = error.response.data.message; 1329 // this.token = this.$store.state.token;
1266 }); 1330 await this.getFeesAndCollectionsData();
1267 }, 1331 await this.getExpensesData();
1268 1332 } else if (this.$store.state.schoolRole === "SUPERADMIN") {
1269 /* MEETING EVENTS, SCHOOL EVENTS */ 1333 // this.token = this.$store.state.schoolToken;
1270 async getMeetingEventes() { 1334 await this.getFeesAndCollectionsData();
1271 if (this.role == "TEACHER" || this.role === "ADMIN") { 1335 await this.getExpensesData();
1272 this.showLoader = true; 1336 } else if (this.$store.state.role === "TEACHER") {
1273 await http() 1337 // this.token = this.$store.state.token;
1274 .get("/getMeetingEventesList") 1338 } else if (this.$store.state.role === "ACCOUNTANT") {
1275 .then((response) => { 1339 // this.token = this.$store.state.token;
1276 var activityList = response.data.data; 1340 } else if (this.$store.state.role === "LIBRARIAN") {
1277 this.activityList = activityList; 1341 // this.token = this.$store.state.token;
1278 this.showLoader = false; 1342 } else if (this.$store.state.role === "PARENT") {
1279 1343 // this.token = this.$store.state.token;
1280 /* set meetingEvents in activityEvents array to highlight event dates in calender */ 1344 // await this.getparentStudents();
1281 for (var i = 0; i < this.activityList.length; i++) { 1345 this.studentsData = this.$store.getters.GET_STUDENTS_DATA;
1282 let obj = {}; 1346 // console.log("students data - ", this.studentsData);
1283 obj.date = moment(this.activityList[i].dateOfEvent).format( 1347 await this.getCourses();
1284 "YYYY/MM/DD" 1348 await this.getAnnoucementes();
1285 ); 1349 }
1286 obj.title = this.activityList[i].title; 1350 this.role = this.$store.state.role;
1287 obj._id = this.activityList[i]._id; 1351
1288 obj.eventType = "meetingEvent"; 1352 await this.getStudents();
1289 /* activityEvents is an array used to display events in calender on particular dates */ 1353 await this.getTeachers();
1290 this.activityEvents.push(obj); 1354 await this.getParents();
1291 } 1355 await this.getClasses();
1292 }) 1356 await this.getNoticeData();
1293 .catch((error) => { 1357 await this.getUserData();
1294 this.showLoader = false; 1358
1295 }); 1359 /* get Latest events list for student login*/
1296 } 1360 if (this.$store.state.role == "PARENT") {
1297 /* If role is ADMIN,TEACHER, PARENT then school events need to be displayed too */ 1361 let response = await this.studentMeetingEvents({
1298 if ( 1362 studentId: localStorage.getItem("parentStudentId"),
1299 this.role === "ADMIN" || 1363 });
1300 this.role === "TEACHER" || 1364 this.activityList = response.data.data;
1301 this.role === "PARENT" 1365
1302 ) { 1366 /* set activityEvents array to highlight event dates in calender */
1303 /* this will get data in a "schoolEvents" data property */ 1367 for (var i = 0; i < this.activityList.length; i++) {
1304 await this.getSchoolEventsList(); 1368 let obj = {};
1305 /* set schoolEvents in activityEvents array to highlight event dates in calender */ 1369 obj.date = moment(this.activityList[i].meetingEvent.dateOfEvent).format(
1306 for (var i = 0; i < this.schoolEvents.length; i++) { 1370 "YYYY/MM/DD"
1307 let obj = {}; 1371 );
1308 obj.date = moment(this.schoolEvents[i].dateOfEvent).format( 1372 obj.title = this.activityList[i].meetingEvent.title;
1309 "YYYY/MM/DD" 1373 obj._id = this.activityList[i].meetingEvent._id;
1374 obj.eventType = "meetingEvent";
1310 ); 1375 this.activityEvents.push(obj);
1311 obj.title = this.schoolEvents[i].title; 1376 }
1312 obj._id = this.schoolEvents[i]._id; 1377 }
1313 obj.eventType = "schoolEvent"; 1378
1314 /* activityEvents is an array used to display events in calender on particular dates */ 1379 /* get Latest events list for teacher login*/
1315 this.activityEvents.push(obj); 1380 if (
1381 this.role == "TEACHER" ||
1382 this.role == "ADMIN" ||
1383 this.role == "PARENT"
1384 ) {
1316 } 1385 await this.getMeetingEventes();
src/pages/Exam/examAttendence.vue
Diff comments   View file @8b7976c
1 <template> 1 <template>
2 <v-container fluid class="body-color"> 2 <v-container fluid class="body-color">
3 <!-- ***** Exam Schedule TABLE****** --> 3 <!-- ***** Exam Schedule TABLE****** -->
4 <v-toolbar color="transparent" flat> 4 <v-toolbar color="transparent" flat>
5 <v-btn 5 <v-btn
6 fab 6 fab
7 dark 7 dark
8 class="open-dialog-button hidden-xl-only hidden-md-only hidden-lg-only" 8 class="open-dialog-button hidden-xl-only hidden-md-only hidden-lg-only"
9 small 9 small
10 @click="addExamAttendenceDialog = true" 10 @click="addExamAttendenceDialog = true"
11 > 11 >
12 <v-icon dark>add</v-icon> 12 <v-icon dark>add</v-icon>
13 </v-btn> 13 </v-btn>
14 <v-btn 14 <v-btn
15 round 15 round
16 class="open-dialog-button hidden-sm-only hidden-xs-only" 16 class="open-dialog-button hidden-sm-only hidden-xs-only"
17 dark 17 dark
18 @click="addExamAttendenceDialog = true" 18 @click="addExamAttendenceDialog = true"
19 > 19 >
20 <v-icon class="white--text pr-1" size="20">add</v-icon>Add Exam Attendence 20 <v-icon class="white--text pr-1" size="20">add</v-icon>Add Exam Attendence
21 </v-btn> 21 </v-btn>
22 <v-spacer></v-spacer> 22 <v-spacer></v-spacer>
23 <v-flex xs8 sm3 md2 class="mr-3"> 23 <v-flex xs8 sm3 md2 class="mr-3">
24 <v-select 24 <v-select
25 v-model="getAttendence.examId" 25 v-model="getAttendence.examId"
26 label="Select Exam" 26 label="Select Exam"
27 :rules="examRules" 27 :rules="examRules"
28 :items="examList" 28 :items="examList"
29 item-text="examName" 29 item-text="examName"
30 item-value="_id" 30 item-value="_id"
31 required 31 required
32 ></v-select> 32 ></v-select>
33 </v-flex> 33 </v-flex>
34 <v-flex xs8 sm3 md2 class="mr-3"> 34 <v-flex xs8 sm3 md2 class="mr-3">
35 <v-select 35 <v-select
36 v-model="getAttendence.classId" 36 v-model="getAttendence.classId"
37 label="Select your class" 37 label="Select your class"
38 type="text" 38 type="text"
39 :items="classList" 39 :items="classList"
40 item-text="classNum" 40 item-text="classNum"
41 item-value="_id" 41 item-value="_id"
42 @change="getSections(getAttendence.classId)" 42 @change="getSections(getAttendence.classId)"
43 required 43 required
44 ></v-select> 44 ></v-select>
45 </v-flex> 45 </v-flex>
46 <v-flex xs8 sm3 md2 class="mr-3"> 46 <v-flex xs8 sm3 md2 class="mr-3">
47 <v-select 47 <v-select
48 v-model="getAttendence.sectionId" 48 v-model="getAttendence.sectionId"
49 label="Select your section" 49 label="Select your section"
50 type="text" 50 type="text"
51 :items="addSection" 51 :items="addSection"
52 item-text="name" 52 item-text="name"
53 item-value="_id" 53 item-value="_id"
54 @change="getClassSubject(getAttendence.classId)" 54 @change="getClassSubject(getAttendence.classId)"
55 required 55 required
56 ></v-select> 56 ></v-select>
57 </v-flex> 57 </v-flex>
58 <v-flex xs8 sm3 md2 class="mr-3"> 58 <v-flex xs8 sm3 md2 class="mr-3">
59 <v-select 59 <v-select
60 v-model="getAttendence.subjectId" 60 v-model="getAttendence.subjectId"
61 label="Select Subject" 61 label="Select Subject"
62 :rules="subjectRules" 62 :rules="subjectRules"
63 :items="subjectList.subjects" 63 :items="subjectList.subjects"
64 item-text="subjectName" 64 item-text="subjectName"
65 item-value="_id" 65 item-value="_id"
66 @change="getExamAttendenceList()" 66 @change="getExamAttendenceList()"
67 required 67 required
68 ></v-select> 68 ></v-select>
69 </v-flex> 69 </v-flex>
70 70
71 <v-card-title class="body-1" v-show="show"> 71 <v-card-title class="body-1" v-show="show">
72 <v-btn icon large flat @click="displaySearch"> 72 <v-btn icon large flat @click="displaySearch">
73 <v-avatar size="27"> 73 <v-avatar size="27">
74 <img src="/static/icon/search.png" alt="icon" /> 74 <img src="/static/icon/search.png" alt="icon" />
75 </v-avatar> 75 </v-avatar>
76 </v-btn> 76 </v-btn>
77 </v-card-title> 77 </v-card-title>
78 <v-flex xs8 sm8 md3 lg2 v-if="showSearch"> 78 <v-flex xs8 sm8 md3 lg2 v-if="showSearch">
79 <v-layout> 79 <v-layout>
80 <v-text-field 80 <v-text-field
81 autofocus 81 autofocus
82 v-model="search" 82 v-model="search"
83 label="Search" 83 label="Search"
84 prepend-inner-icon="search" 84 prepend-inner-icon="search"
85 color="primary" 85 color="primary"
86 ></v-text-field> 86 ></v-text-field>
87 <v-icon @click="closeSearch" color="error">close</v-icon> 87 <v-icon @click="closeSearch" color="error">close</v-icon>
88 </v-layout> 88 </v-layout>
89 </v-flex> 89 </v-flex>
90 </v-toolbar> 90 </v-toolbar>
91 91
92 <v-data-table 92 <v-data-table
93 v-if="showData" 93 v-if="showData"
94 :headers="headers" 94 :headers="headers"
95 :items="examData.students" 95 :items="examData.students"
96 :pagination.sync="pagination" 96 :pagination.sync="pagination"
97 :search="search" 97 :search="search"
98 > 98 >
99 <template slot="items" slot-scope="props"> 99 <template slot="items" slot-scope="props">
100 <tr class="tr"> 100 <tr class="tr">
101 <td class="td td-row">{{ props.index + 1}}</td> 101 <td class="td td-row">{{ props.index + 1}}</td>
102 <td class="text-xs-center td td-row"> 102 <td class="text-xs-center td td-row">
103 <v-avatar size="40"> 103 <v-avatar size="40">
104 <img 104 <img
105 :src="props.item.studentId.profilePicUrl" 105 :src="props.item.studentId.profilePicUrl"
106 v-if="props.item.studentId.profilePicUrl" 106 v-if="props.item.studentId.profilePicUrl"
107 /> 107 />
108 <img src="/static/icon/user.png" v-else-if="!props.item.studentId.profilePicUrl" /> 108 <img src="/static/icon/user.png" v-else-if="!props.item.studentId.profilePicUrl" />
109 </v-avatar> 109 </v-avatar>
110 </td> 110 </td>
111 <td class="td td-row text-xs-center">{{ props.item.studentId.name}}</td> 111 <td class="td td-row text-xs-center">{{ props.item.studentId.name}}</td>
112 <td class="td td-row text-xs-center">{{ props.item.studentId.rollNo}}</td> 112 <td class="td td-row text-xs-center">{{ props.item.studentId.rollNo}}</td>
113 <td class="td td-row text-xs-center">{{ props.item.studentId.email }}</td> 113 <td class="td td-row text-xs-center">{{ props.item.studentId.email }}</td>
114 <td class="td td-row text-xs-center"> 114 <td class="td td-row text-xs-center">
115 <!-- <v-radio-group v-model="isPresent" row> 115 <!-- <v-radio-group v-model="isPresent" row>
116 <v-radio :value="props.item.isPresent"></v-radio> 116 <v-radio :value="props.item.isPresent"></v-radio>
117 </v-radio-group>--> 117 </v-radio-group>-->
118 <v-checkbox 118 <v-checkbox
119 v-model="props.item.isPresent" 119 v-model="props.item.isPresent"
120 @click="markStudentAttendence(props.item)" 120 @click="markStudentAttendence(props.item)"
121 primary 121 primary
122 hide-details 122 hide-details
123 ></v-checkbox> 123 ></v-checkbox>
124 </td> 124 </td>
125 </tr> 125 </tr>
126 </template> 126 </template>
127 <v-alert 127 <v-alert
128 slot="no-results" 128 slot="no-results"
129 :value="true" 129 :value="true"
130 color="error" 130 color="error"
131 icon="warning" 131 icon="warning"
132 >Your search for "{{ search }}" found no results.</v-alert> 132 >Your search for "{{ search }}" found no results.</v-alert>
133 </v-data-table> 133 </v-data-table>
134 134
135 <!-- ****** ADD Student Attendence ****** --> 135 <!-- ****** ADD Student Attendence ****** -->
136 <v-dialog v-model="changeStudentAttendenceDialog" max-width="500px" persistent> 136 <v-dialog v-model="changeStudentAttendenceDialog" max-width="500px" persistent>
137 <v-card flat> 137 <v-card flat>
138 <v-layout class="pa-3 card-style white--text"> 138 <v-layout class="pa-3 card-style white--text">
139 <v-flex xs12> 139 <v-flex xs12>
140 <label class="title text-xs-center">Change Student's Attendence</label> 140 <label class="title text-xs-center">Change Student's Attendence</label>
141 <v-icon 141 <v-icon
142 size="24" 142 size="24"
143 class="right white--text" 143 class="right white--text"
144 @click="changeStudentAttendenceDialog = false" 144 @click="changeStudentAttendenceDialog = false"
145 >cancel</v-icon> 145 >cancel</v-icon>
146 </v-flex> 146 </v-flex>
147 </v-layout> 147 </v-layout>
148 <v-container fluid> 148 <v-container fluid>
149 <v-flex xs12> 149 <v-flex xs12>
150 <h3>Are you sure you want to change the attendence</h3> 150 <h3>Are you sure you want to change the attendence</h3>
151 </v-flex> 151 </v-flex>
152 <v-spacer></v-spacer> 152 <v-spacer></v-spacer>
153 153
154 <v-flex xs12> 154 <v-flex xs12>
155 <v-card-actions> 155 <v-card-actions>
156 <v-spacer></v-spacer> 156 <v-spacer></v-spacer>
157 <v-btn 157 <v-btn
158 @click.native="closeStudentAttendenceDialog" 158 @click.native="closeStudentAttendenceDialog"
159 round 159 round
160 dark 160 dark
161 class="clear-button" 161 class="clear-button"
162 >cancel</v-btn> 162 >cancel</v-btn>
163 <v-btn 163 <v-btn
164 @click="selectParticularStudent" 164 @click="selectParticularStudent"
165 round 165 round
166 dark 166 dark
167 :loading="loading" 167 :loading="loading"
168 class="add-button" 168 class="add-button"
169 >Yes</v-btn> 169 >Yes</v-btn>
170 </v-card-actions> 170 </v-card-actions>
171 </v-flex> 171 </v-flex>
172 </v-container> 172 </v-container>
173 </v-card> 173 </v-card>
174 </v-dialog> 174 </v-dialog>
175 175
176 <!-- ****** ADD Exam Attendence ****** --> 176 <!-- ****** ADD Exam Attendence ****** -->
177 <v-dialog 177 <v-dialog
178 v-model="addExamAttendenceDialog"
179 max-width="800px"
180 v-if="addExamAttendenceDialog"
181 persistent
182 >
178 v-model="addExamAttendenceDialog" 183 <v-card flat>
179 max-width="800px" 184 <v-layout class="pa-3 card-style white--text">
180 v-if="addExamAttendenceDialog" 185 <v-flex xs12>
181 persistent 186 <label class="title text-xs-center">Add Exam Attendence</label>
182 > 187 <v-icon size="24" class="right white--text" @click="closeAttendenceModel">cancel</v-icon>
183 <v-card flat> 188 </v-flex>
184 <v-layout class="pa-3 card-style white--text"> 189 </v-layout>
185 <v-flex xs12> 190 <v-form ref="form" v-model="valid" lazy-validation class="text-xs-center">
186 <label class="title text-xs-center">Add Exam Attendence</label> 191 <v-container fluid>
187 <v-icon size="24" class="right white--text" @click="closeAttendenceModel">cancel</v-icon> 192 <v-flex xs12>
188 </v-flex> 193 <v-layout>
189 </v-layout> 194 <v-flex xs5 class="pt-4 subheading">
190 <v-form ref="form" v-model="valid" lazy-validation class="text-xs-center"> 195 <label class="right">Exam Name:</label>
191 <v-container fluid> 196 </v-flex>
192 <v-flex xs12> 197 <v-flex xs7 sm7 md6 class="ml-3">
193 <v-layout> 198 <v-select
194 <v-flex xs5 class="pt-4 subheading"> 199 label="Select Exam"
195 <label class="right">Exam Name:</label> 200 :rules="examRules"
196 </v-flex> 201 :items="examList"
197 <v-flex xs7 sm7 md6 class="ml-3"> 202 v-model="addAttendence.examId"
198 <v-select 203 item-text="examName"
199 label="Select Exam" 204 item-value="_id"
200 :rules="examRules" 205 ></v-select>
201 :items="examList" 206 </v-flex>
202 v-model="addAttendence.examId" 207 </v-layout>
203 item-text="examName" 208 </v-flex>
204 item-value="_id" 209 <v-flex xs12>
205 ></v-select> 210 <v-layout>
206 </v-flex> 211 <v-flex xs5 class="pt-4 subheading">
207 </v-layout> 212 <label class="right">Class:</label>
208 </v-flex> 213 </v-flex>
209 <v-flex xs12> 214 <v-flex xs7 sm7 md6 class="ml-3">
210 <v-layout> 215 <v-select
211 <v-flex xs5 class="pt-4 subheading"> 216 v-model="addAttendence.classId"
212 <label class="right">Class:</label> 217 label="Select Class"
213 </v-flex> 218 type="text"
214 <v-flex xs7 sm7 md6 class="ml-3"> 219 :items="classList"
215 <v-select 220 item-text="classNum"
216 v-model="addAttendence.classId" 221 item-value="_id"
217 label="Select Class" 222 :rules="classRules"
218 type="text" 223 @change="getSections(addAttendence.classId)"
219 :items="classList" 224 required
220 item-text="classNum" 225 ></v-select>
221 item-value="_id" 226 </v-flex>
222 :rules="classRules" 227 </v-layout>
223 @change="getSections(addAttendence.classId)" 228 </v-flex>
224 required 229 <v-flex xs12>
225 ></v-select> 230 <v-layout>
226 </v-flex> 231 <v-flex xs5 class="pt-4 subheading">
227 </v-layout> 232 <label class="right">Section:</label>
228 </v-flex> 233 </v-flex>
229 <v-flex xs12> 234 <v-flex xs7 sm7 md6 class="ml-3">
230 <v-layout> 235 <v-select
231 <v-flex xs5 class="pt-4 subheading"> 236 :items="addSection"
232 <label class="right">Section:</label> 237 label="Select Section"
233 </v-flex> 238 v-model="addAttendence.sectionId"
234 <v-flex xs7 sm7 md6 class="ml-3"> 239 item-text="name"
235 <v-select 240 item-value="_id"
236 :items="addSection" 241 name="Select Section"
237 label="Select Section" 242 :rules="sectionRules"
238 v-model="addAttendence.sectionId" 243 @change="getClassSubject(addAttendence.classId)"
239 item-text="name" 244 required
240 item-value="_id" 245 ></v-select>
241 name="Select Section" 246 </v-flex>
242 :rules="sectionRules" 247 </v-layout>
243 @change="getClassSubject(addAttendence.classId)" 248 </v-flex>
244 required 249 <v-flex xs12>
245 ></v-select> 250 <v-layout>
246 </v-flex> 251 <v-flex xs5 class="pt-4 subheading">
247 </v-layout> 252 <label class="right">Subject Name:</label>
248 </v-flex> 253 </v-flex>
249 <v-flex xs12> 254 <v-flex xs7 sm7 md6 class="ml-3">
250 <v-layout> 255 <v-select
251 <v-flex xs5 class="pt-4 subheading"> 256 :items="subjectList.subjects"
252 <label class="right">Subject Name:</label> 257 label="Select Subject"
253 </v-flex> 258 item-text="subjectName"
254 <v-flex xs7 sm7 md6 class="ml-3"> 259 v-model="addAttendence.subjectId"
255 <v-select 260 item-value="_id"
256 :items="subjectList.subjects" 261 name="Select Subject"
257 label="Select Subject" 262 :rules="subjectRules"
258 item-text="subjectName" 263 required
259 v-model="addAttendence.subjectId" 264 ></v-select>
260 item-value="_id" 265 </v-flex>
261 name="Select Subject" 266 </v-layout>
262 :rules="subjectRules" 267 </v-flex>
263 required 268 <v-layout>
264 ></v-select> 269 <v-flex xs12>
265 </v-flex> 270 <v-card-actions>
266 </v-layout> 271 <v-spacer class="hidden-xs-only"></v-spacer>
267 </v-flex> 272 <v-btn
268 <v-layout> 273 round
269 <v-flex xs12> 274 dark
270 <v-card-actions> 275 @click="showTable"
271 <v-spacer class="hidden-xs-only"></v-spacer> 276 :loading="loading"
272 <v-btn 277 class="add-button"
273 round 278 >Attendence</v-btn>
274 dark 279 </v-card-actions>
275 @click="showTable" 280 </v-flex>
276 :loading="loading" 281 </v-layout>
277 class="add-button" 282 </v-container>
278 >Attendence</v-btn> 283 </v-form>
279 </v-card-actions> 284 <v-flex xs12 v-show="attendeceTable" class>
280 </v-flex> 285 <v-data-table
281 </v-layout> 286 :headers="studentheader"
282 </v-container> 287 :items="studentsData"
283 </v-form> 288 :pagination.sync="pagination"
284 <v-flex xs12 v-show="attendeceTable" class> 289 :search="search"
285 <v-data-table 290 select-all
286 :headers="studentheader" 291 v-model="selected"
287 :items="studentsData" 292 item-key="_id"
288 :pagination.sync="pagination" 293 >
289 :search="search" 294 <template slot="items" slot-scope="props">
290 select-all 295 <tr class="tr">
291 v-model="selected" 296 <!-- <td class="td td-row">{{ props.index + 1}}</td> -->
292 item-key="_id" 297 <td class="td td-row">
293 > 298 <v-checkbox
294 <template slot="items" slot-scope="props"> 299 v-model="props.item.attendence"
295 <tr class="tr"> 300 @change="markParticularStudentAttendence(props.item)"
296 <!-- <td class="td td-row">{{ props.index + 1}}</td> --> 301 primary
297 <td class="td td-row"> 302 hide-details
298 <v-checkbox 303 ></v-checkbox>
299 v-model="props.item.attendence" 304 </td>
300 @change="markParticularStudentAttendence(props.item)" 305 <td class="text-xs-center td td-row">
301 primary 306 <v-avatar size="40">
302 hide-details 307 <img :src="props.item.profilePicUrl" v-if="props.item.profilePicUrl" />
303 ></v-checkbox> 308 <img src="/static/icon/user.png" v-else-if="!props.item.profilePicUrl" />
304 </td> 309 </v-avatar>
305 <td class="text-xs-center td td-row"> 310 </td>
306 <v-avatar size="40"> 311 <td class="td td-row text-xs-center">{{ props.item.name}}</td>
307 <img :src="props.item.profilePicUrl" v-if="props.item.profilePicUrl" /> 312 <td class="td td-row text-xs-center">{{ props.item.rollNo}}</td>
308 <img src="/static/icon/user.png" v-else-if="!props.item.profilePicUrl" /> 313 <td class="td td-row text-xs-center">{{ props.item.email }}</td>
309 </v-avatar> 314 <!-- <td class="td td-row text-xs-center">
310 </td> 315 <v-radio-group v-model="props.item.attendence" :mandatory="false" row>
311 <td class="td td-row text-xs-center">{{ props.item.name}}</td> 316 <v-radio
312 <td class="td td-row text-xs-center">{{ props.item.rollNo}}</td> 317 v-for="attendences in attendenceType"
313 <td class="td td-row text-xs-center">{{ props.item.email }}</td> 318 :key="attendences.value"
314 <!-- <td class="td td-row text-xs-center"> 319 :label="`${attendences.label}`"
315 <v-radio-group v-model="props.item.attendence" :mandatory="false" row> 320 :value="attendences.value"
316 <v-radio 321 ></v-radio>
317 v-for="attendences in attendenceType" 322 </v-radio-group>
318 :key="attendences.value" 323 </td>-->
319 :label="`${attendences.label}`" 324 </tr>
320 :value="attendences.value" 325 </template>
321 ></v-radio> 326 <template slot="headers" slot-scope="props">
322 </v-radio-group> 327 <tr>
323 </td>--> 328 <th>
324 </tr> 329 <v-checkbox
325 </template> 330 :input-value="props.all"
326 <template slot="headers" slot-scope="props"> 331 :indeterminate="props.indeterminate"
327 <tr> 332 primary
328 <th> 333 hide-details
329 <v-checkbox 334 @click.native="selectAll"
330 :input-value="props.all" 335 ></v-checkbox>
331 :indeterminate="props.indeterminate" 336 </th>
332 primary 337 <th
333 hide-details 338 v-for="header in props.headers"
334 @click.native="selectAll" 339 :key="header.text"
335 ></v-checkbox> 340 :class="['column sortable', pagination.descending ? 'desc' : 'asc', header.value === pagination.sortBy ? 'active' : '']"
336 </th> 341 @click="changeSort(header.value)"
337 <th 342 >
338 v-for="header in props.headers" 343 <v-icon small>arrow_upward</v-icon>
339 :key="header.text" 344 {{ header.text }}
340 :class="['column sortable', pagination.descending ? 'desc' : 'asc', header.value === pagination.sortBy ? 'active' : '']" 345 </th>
341 @click="changeSort(header.value)" 346 </tr>
342 > 347 </template>
343 <v-icon small>arrow_upward</v-icon> 348 <v-alert
344 {{ header.text }} 349 slot="no-results"
345 </th> 350 :value="true"
346 </tr> 351 color="error"
347 </template> 352 icon="warning"
348 <v-alert 353 >Your search for "{{ search }}" found no results.</v-alert>
349 slot="no-results" 354 </v-data-table>
350 :value="true" 355 <v-flex xs12 sm12>
351 color="error" 356 <v-card-actions>
352 icon="warning" 357 <v-spacer></v-spacer>
353 >Your search for "{{ search }}" found no results.</v-alert> 358 <v-btn @click="submit()" round dark :loading="loading" class="add-button">Submit</v-btn>
354 </v-data-table> 359 </v-card-actions>
355 <v-flex xs12 sm12> 360 </v-flex>
356 <v-card-actions> 361 </v-flex>
357 <v-spacer></v-spacer> 362 </v-card>
358 <v-btn @click="submit()" round dark :loading="loading" class="add-button">Submit</v-btn> 363 </v-dialog>
359 </v-card-actions> 364 <v-snackbar
360 </v-flex> 365 :timeout="timeout"
361 </v-flex> 366 :top="y === 'top'"
362 </v-card> 367 :right="x === 'right'"
363 </v-dialog> 368 :vertical="mode === 'vertical'"
364 <v-snackbar 369 v-model="snackbar"
365 :timeout="timeout" 370 :color="color"
366 :top="y === 'top'" 371 >{{ text }}</v-snackbar>
367 :right="x === 'right'" 372 <div class="loader" v-if="showLoader">
368 :vertical="mode === 'vertical'" 373 <v-progress-circular indeterminate color="white"></v-progress-circular>
369 v-model="snackbar" 374 </div>
370 :color="color" 375 </v-container>
371 >{{ text }}</v-snackbar> 376 </template>
372 <div class="loader" v-if="showLoader"> 377
373 <v-progress-circular indeterminate color="white"></v-progress-circular> 378 <script>
374 </div> 379 import http from "@/Services/http.js";
375 </v-container> 380 import Util from "@/util";
376 </template> 381 import moment from "moment";
377 382
378 <script> 383 export default {
379 import http from "@/Services/http.js"; 384 data: () => ({
380 import Util from "@/util"; 385 snackbar: false,
381 import moment from "moment"; 386 editDate: false,
382 387 menu1: false,
383 export default { 388 menuB: false,
384 data: () => ({ 389 menu2: false,
385 snackbar: false, 390 menuEdit: false,
386 editDate: false, 391 timeToEdit: false,
387 menu1: false, 392 show: true,
388 menuB: false, 393 showSearch: false,
389 menu2: false, 394 addExamAttendenceDialog: false,
390 menuEdit: false, 395 color: "",
391 timeToEdit: false, 396 y: "top",
392 show: true, 397 x: "right",
393 showSearch: false, 398 mode: "",
394 addExamAttendenceDialog: false, 399 timeout: 10000,
395 color: "", 400 text: "",
396 y: "top", 401 loading: false,
397 x: "right", 402 search: "",
398 mode: "", 403 showLoader: false,
399 timeout: 10000, 404 valid: true,
400 text: "", 405 role: "",
401 loading: false, 406 pagination: {
402 search: "", 407 rowsPerPage: 10,
403 showLoader: false, 408 },
404 valid: true, 409 attendeceTable: false,
405 role: "", 410 isPresent: true,
406 pagination: { 411
407 rowsPerPage: 10, 412 examRules: [(v) => !!v || "Exam Name is required"],
408 }, 413 classRules: [(v) => !!v || "Class Name is required"],
409 attendeceTable: false, 414 sectionRules: [(v) => !!v || "section is required"],
410 isPresent: true, 415 subjectRules: [(v) => !!v || "Subject is required"],
411 416 timeInRules: [(v) => !!v || "Time In is required"],
412 examRules: [(v) => !!v || "Exam Name is required"], 417 timeOutRules: [(v) => !!v || "time Out s is required"],
413 classRules: [(v) => !!v || "Class Name is required"], 418 roomRules: [(v) => !!v || "Room is required"],
414 sectionRules: [(v) => !!v || "section is required"], 419 examScheduleDateRules: [(v) => !!v || "Date is required"],
415 subjectRules: [(v) => !!v || "Subject is required"], 420 studentsData: [],
416 timeInRules: [(v) => !!v || "Time In is required"], 421 examData: [],
417 timeOutRules: [(v) => !!v || "time Out s is required"], 422 students: [],
418 roomRules: [(v) => !!v || "Room is required"], 423
419 examScheduleDateRules: [(v) => !!v || "Date is required"], 424 headers: [
420 studentsData: [], 425 {
421 examData: [], 426 align: "",
422 students: [], 427 text: "No",
423 428 sortable: false,
424 headers: [ 429 value: "No",
425 { 430 },
426 align: "", 431 {
427 text: "No", 432 text: "Profile Pic",
428 sortable: false, 433 value: "profilePicUrl",
429 value: "No", 434 sortable: false,
430 }, 435 align: "center",
431 { 436 },
432 text: "Profile Pic", 437 {
433 value: "profilePicUrl", 438 text: "Name",
434 sortable: false, 439 value: "name",
435 align: "center", 440 sortable: false,
436 }, 441 align: "center",
437 { 442 },
438 text: "Name", 443 {
439 value: "name", 444 text: "Roll No",
440 sortable: false, 445 value: "rollNo",
441 align: "center", 446 sortable: false,
442 }, 447 align: "center",
443 { 448 },
444 text: "Roll No", 449 {
445 value: "rollNo", 450 text: "Email",
446 sortable: false, 451 value: "email",
447 align: "center", 452 sortable: false,
448 }, 453 align: "center",
449 { 454 },
450 text: "Email", 455 {
451 value: "email", 456 text: "Action",
452 sortable: false, 457 value: "isPresent",
453 align: "center", 458 sortable: false,
454 }, 459 align: "center",
455 { 460 },
456 text: "Action", 461 ],
457 value: "isPresent", 462 studentheader: [
458 sortable: false, 463 {
459 align: "center", 464 text: "Profile Pic",
460 }, 465 value: "profilePicUrl",
461 ], 466 sortable: false,
462 studentheader: [ 467 align: "center",
463 { 468 },
464 text: "Profile Pic", 469 {
465 value: "profilePicUrl", 470 text: "Name",
466 sortable: false, 471 value: "name",
467 align: "center", 472 sortable: false,
468 }, 473 align: "center",
469 { 474 },
470 text: "Name", 475 {
471 value: "name", 476 text: "Roll No",
472 sortable: false, 477 value: "rollNo",
473 align: "center", 478 sortable: false,
474 }, 479 align: "center",
475 { 480 },
476 text: "Roll No", 481 {
477 value: "rollNo", 482 text: "Email",
478 sortable: false, 483 value: "email",
479 align: "center", 484 sortable: false,
480 }, 485 align: "center",
481 { 486 },
482 text: "Email", 487 ],
483 value: "email", 488 attendenceType: [
484 sortable: false, 489 {
485 align: "center", 490 label: "",
486 }, 491 value: true,
487 ], 492 },
488 attendenceType: [ 493 ],
489 { 494 classList: [],
490 label: "", 495 addSection: [],
491 value: true, 496 examList: [],
492 }, 497 subjectList: [],
493 ], 498 subjects: [],
494 classList: [], 499 addAttendence: {},
495 addSection: [], 500 getAttendence: {},
496 examList: [], 501 editedItem: {
497 subjectList: [], 502 sectionId: {
498 subjects: [], 503 name: "",
499 addAttendence: {}, 504 },
500 getAttendence: {}, 505 },
501 editedItem: { 506 getScheduleData: {},
502 sectionId: { 507 ScheduleData: [],
503 name: "", 508 token: "",
504 }, 509 showData: false,
505 }, 510 selected: [],
506 getScheduleData: {}, 511 changeStudentAttendenceDialog: false,
507 ScheduleData: [], 512 closeStudentAttendenceDialog() {
508 token: "", 513 this.changeStudentAttendenceDialog = false;
509 showData: false, 514 },
510 selected: [], 515 selectedStudent: {},
511 changeStudentAttendenceDialog: false, 516 presentStudent: [],
512 closeStudentAttendenceDialog() { 517 absentStudent: [],
513 this.changeStudentAttendenceDialog = false; 518 }),
514 }, 519 watch: {
515 selectedStudent: {}, 520 addExamAttendenceDialog: function (val) {
516 presentStudent: [], 521 if (!val) {
517 absentStudent: [], 522 this.studentsData = [];
518 }), 523 this.selected = [];
519 watch: { 524 this.attendeceTable = false;
520 addExamAttendenceDialog: function (val) { 525 this.valid = false;
521 if (!val) { 526 this.addAttendence = [];
522 this.studentsData = []; 527 }
523 this.selected = []; 528 },
524 this.attendeceTable = false; 529 },
525 this.valid = false; 530 methods: {
526 this.addAttendence = []; 531 pickFile() {
527 } 532 this.$refs.image.click();
528 }, 533 },
529 }, 534 markStudentAttendence(item) {
530 methods: { 535 this.selectedStudent = {
531 pickFile() { 536 id: item.studentId._id,
532 this.$refs.image.click(); 537 isPresent: !item.isPresent,
533 }, 538 };
534 markStudentAttendence(item) { 539 this.changeStudentAttendenceDialog = true;
535 this.selectedStudent = { 540 },
536 id: item.studentId._id, 541 getSchedulesList() {
537 isPresent: !item.isPresent, 542 this.showLoader = true;
538 }; 543 http()
539 this.changeStudentAttendenceDialog = true; 544 .get("/getSchedulesList", {
540 }, 545 params: { classId: this.getScheduleData.classId },
541 getSchedulesList() { 546 headers: { Authorization: "Bearer " + this.token },
542 this.showLoader = true; 547 })
543 http() 548 .then((response) => {
544 .get("/getSchedulesList", { 549 this.ScheduleData = response.data.data;
545 params: { classId: this.getScheduleData.classId }, 550 this.showLoader = false;
546 headers: { Authorization: "Bearer " + this.token }, 551 })
547 }) 552 .catch((error) => {
548 .then((response) => { 553 // console.log("err====>", err);
549 this.ScheduleData = response.data.data; 554 this.showLoader = false;
550 this.showLoader = false; 555 this.loadingSearch = false;
551 }) 556 this.snackbar = true;
552 .catch((error) => { 557 this.text = error.response.data.message;
553 // console.log("err====>", err); 558 if (error.response.status === 401) {
554 this.showLoader = false; 559 this.$router.replace({ path: "/" });
555 this.loadingSearch = false; 560 this.$store.dispatch("setToken", null);
556 this.snackbar = true; 561 this.$store.dispatch("Id", null);
557 this.text = error.response.data.message; 562 }
558 if (error.response.status === 401) { 563 });
559 this.$router.replace({ path: "/" }); 564 },
560 this.$store.dispatch("setToken", null); 565 close() {
561 this.$store.dispatch("Id", null); 566 this.dialog = false;
562 } 567 },
563 }); 568 closeAttendenceModel() {
564 }, 569 this.addExamAttendenceDialog = false;
565 close() { 570 this.studentsData = [];
566 this.dialog = false; 571 this.selected = [];
567 }, 572 this.attendeceTable = false;
568 closeAttendenceModel() { 573 this.valid = false;
569 this.addExamAttendenceDialog = false; 574 this.addAttendence = [];
570 this.studentsData = []; 575 },
571 this.selected = []; 576 submit() {
572 this.attendeceTable = false; 577 var examAttendence = {
573 this.valid = false; 578 examId: this.addAttendence.examId,
574 this.addAttendence = []; 579 classId: this.addAttendence.classId,
575 }, 580 sectionId: this.addAttendence.sectionId,
576 submit() { 581 subjectId: this.addAttendence.subjectId,
577 var examAttendence = { 582 students: [],
578 examId: this.addAttendence.examId, 583 };
579 classId: this.addAttendence.classId, 584 for (var j = 0; j < this.presentStudent.length; j++) {
580 sectionId: this.addAttendence.sectionId, 585 examAttendence.students.push({
581 subjectId: this.addAttendence.subjectId, 586 studentId: this.presentStudent[j],
582 students: [], 587 isPresent: true,
583 }; 588 });
584 for (var j = 0; j < this.presentStudent.length; j++) { 589 }
585 examAttendence.students.push({ 590 for (var j = 0; j < this.absentStudent.length; j++) {
586 studentId: this.presentStudent[j], 591 examAttendence.students.push({
587 isPresent: true, 592 studentId: this.absentStudent[j],
588 }); 593 isPresent: false,
589 } 594 });
590 for (var j = 0; j < this.absentStudent.length; j++) { 595 }
591 examAttendence.students.push({ 596 if (this.$refs.form.validate()) {
592 studentId: this.absentStudent[j], 597 http()
593 isPresent: false, 598 .post("/createExamAttendance", examAttendence)
594 }); 599 .then((response) => {
595 } 600 this.snackbar = true;
596 if (this.$refs.form.validate()) { 601 this.color = "success";
597 http() 602 this.text = "Successfully created exam attendence";
598 .post("/createExamAttendance", examAttendence) 603 this.addExamAttendenceDialog = false;
599 .then((response) => { 604 this.studentsData = [];
600 this.snackbar = true; 605 this.selected = [];
601 this.color = "success"; 606 this.attendeceTable = false;
602 this.text = "Successfully created exam attendence"; 607 this.valid = false;
603 this.addExamAttendenceDialog = false; 608 this.addAttendence = [];
604 this.studentsData = []; 609 })
605 this.selected = []; 610 .catch((error) => {
606 this.attendeceTable = false; 611 this.snackbar = true;
607 this.valid = false; 612 this.text = error.response.data.message;
608 this.addAttendence = []; 613 });
609 }) 614 }
610 .catch((error) => { 615 },
611 this.snackbar = true; 616 clear() {
612 this.text = error.response.data.message; 617 this.$refs.form.reset();
613 }); 618 this.disable = false;
614 } 619 this.loading = false;
615 }, 620 },
616 clear() { 621 getClass() {
617 this.$refs.form.reset(); 622 http()
618 this.disable = false; 623 .get("/getClassesList", {
619 this.loading = false; 624 headers: { Authorization: "Bearer " + this.token },
620 }, 625 })
621 getClass() { 626 .then((response) => {
622 http() 627 this.classList = response.data.data;
623 .get("/getClassesList", { 628 })
624 headers: { Authorization: "Bearer " + this.token }, 629 .catch((err) => {
625 }) 630 // console.log("err====>", err);
626 .then((response) => { 631 });
627 this.classList = response.data.data; 632 },
628 }) 633 getSections(_id) {
629 .catch((err) => { 634 for (let i = 0; i < this.classList.length; i++) {
630 // console.log("err====>", err); 635 if (_id == this.classList[i]._id) {
631 }); 636 // this.subjects = this.classList[i].subjects;
632 }, 637 }
633 getSections(_id) { 638 }
634 for (let i = 0; i < this.classList.length; i++) { 639 http()
635 if (_id == this.classList[i]._id) { 640 .get(
636 // this.subjects = this.classList[i].subjects; 641 "/getSectionsList",
637 } 642 { params: { classId: _id } },
638 } 643 {
639 http() 644 headers: { Authorization: "Bearer " + this.token },
640 .get( 645 }
641 "/getSectionsList", 646 )
642 { params: { classId: _id } }, 647 .then((response) => {
643 { 648 this.addSection = response.data.data;
644 headers: { Authorization: "Bearer " + this.token }, 649 })
645 } 650 .catch((err) => {});
646 ) 651 },
647 .then((response) => { 652 getClassSubject(_id) {
648 this.addSection = response.data.data; 653 this.showLoader = true;
649 }) 654 // this.classId = this.classId;
650 .catch((err) => {}); 655 http()
651 }, 656 .get(
652 getClassSubject(_id) { 657 "/getParticularClass",
653 this.showLoader = true; 658 { params: { classId: _id } },
654 // this.classId = this.classId; 659 {
655 http() 660 headers: { Authorization: "Bearer " + this.token },
656 .get( 661 }
657 "/getParticularClass", 662 )
658 { params: { classId: _id } }, 663 .then((response) => {
659 { 664 this.subjectList = response.data.data;
660 headers: { Authorization: "Bearer " + this.token }, 665 this.showLoader = false;
661 } 666 })
662 ) 667 .catch((err) => {
663 .then((response) => { 668 this.showLoader = false;
664 this.subjectList = response.data.data; 669 });
665 this.showLoader = false; 670 },
666 }) 671 getExamList() {
667 .catch((err) => { 672 this.showLoader = true;
668 this.showLoader = false; 673 this.loadingSearch = true;
669 }); 674 http()
670 }, 675 .get("/getExamsList", {
671 getExamList() { 676 headers: { Authorization: "Bearer " + this.token },
672 this.showLoader = true; 677 })
673 this.loadingSearch = true; 678 .then((response) => {
674 http() 679 this.examList = response.data.data;
675 .get("/getExamsList", { 680 this.showLoader = false;
676 headers: { Authorization: "Bearer " + this.token }, 681 this.loadingSearch = false;
677 }) 682 })
678 .then((response) => { 683 .catch((error) => {
679 this.examList = response.data.data; 684 this.showLoader = false;
680 this.showLoader = false; 685 this.loadingSearch = false;
681 this.loadingSearch = false; 686 this.snackbar = true;
682 }) 687 this.text = error.response.data.message;
683 .catch((error) => { 688 if (error.response.status === 401) {
684 this.showLoader = false; 689 this.$router.replace({ path: "/" });
685 this.loadingSearch = false; 690 this.$store.dispatch("setToken", null);
686 this.snackbar = true; 691 this.$store.dispatch("Id", null);
687 this.text = error.response.data.message; 692 }
688 if (error.response.status === 401) { 693 });
689 this.$router.replace({ path: "/" }); 694 },
690 this.$store.dispatch("setToken", null); 695 showTable() {
691 this.$store.dispatch("Id", null); 696 this.attendeceTable = true;
692 } 697 this.getStudentList();
693 }); 698 },
694 }, 699 getStudentList() {
695 showTable() { 700 this.showLoader = true;
696 this.attendeceTable = true; 701 http()
697 this.getStudentList(); 702 .get("/getStudentWithClass", {
698 }, 703 params: {
699 getStudentList() { 704 classId: this.addAttendence.classId,
700 this.showLoader = true; 705 sectionId: this.addAttendence.sectionId,
701 http() 706 },
702 .get("/getStudentWithClass", { 707 })
703 params: { 708 .then((response) => {
704 classId: this.addAttendence.classId, 709 this.studentsData = response.data.data;
705 sectionId: this.addAttendence.sectionId, 710 this.showLoader = false;
706 }, 711 // this.addExamAttendenceDialog = false;
707 }) 712 var attendence = "";
708 .then((response) => { 713 for (let i = 0; i < this.studentsData.length; i++) {
709 this.studentsData = response.data.data; 714 this.studentsData[i].attendence = false;
710 this.showLoader = false; 715 }
711 // this.addExamAttendenceDialog = false; 716 })
712 var attendence = ""; 717 .catch((err) => {
713 for (let i = 0; i < this.studentsData.length; i++) { 718 // console.log("err====>", err);
714 this.studentsData[i].attendence = false; 719 this.showLoader = false;
720 this.snackbar = true;
721 this.color = "error";
722 this.text = error.response.data.message;
715 } 723 });
716 }) 724 },
717 .catch((err) => { 725 getExamAttendenceList() {
718 // console.log("err====>", err); 726 this.showLoader = true;
719 this.showLoader = false; 727 http()
720 this.snackbar = true; 728 .get("/getExamAttendenceList", {
721 this.color = "error"; 729 params: {
722 this.text = error.response.data.message; 730 examId: this.getAttendence.examId,
723 }); 731 classId: this.getAttendence.classId,
724 }, 732 sectionId: this.getAttendence.sectionId,
725 getExamAttendenceList() { 733 subjectId: this.getAttendence.subjectId,
726 this.showLoader = true; 734 },
727 http() 735 })
728 .get("/getExamAttendenceList", { 736 .then((response) => {
729 params: { 737 this.examData = response.data.data;
730 examId: this.getAttendence.examId, 738 if (this.examData.length === 0) {
731 classId: this.getAttendence.classId, 739 this.showLoader = false;
732 sectionId: this.getAttendence.sectionId, 740 this.snackbar = true;
733 subjectId: this.getAttendence.subjectId, 741 this.text = "No Attendence found!";
734 }, 742 this.color = "error";
735 }) 743 return;
736 .then((response) => { 744 }
737 this.examData = response.data.data; 745 this.examData = this.examData[0];
738 if (this.examData.length === 0) { 746 // if (this.examData.students.length === 0) {
739 this.showLoader = false; 747 // this.showLoader = false;
740 this.snackbar = true; 748 // this.snackbar = true;
741 this.text = "No Attendence found!"; 749 // this.text = "No Students found!";
742 this.color = "error"; 750 // this.color = "error";
743 return; 751 // return;
744 } 752 // }
745 this.examData = this.examData[0]; 753 this.showData = true;
746 // if (this.examData.students.length === 0) { 754 this.showLoader = false;
747 // this.showLoader = false; 755 })
748 // this.snackbar = true; 756 .catch((error) => {
749 // this.text = "No Students found!"; 757 // console.log("error", error);
750 // this.color = "error"; 758 this.showLoader = false;
759 this.snackbar = true;
760 this.color = "error";
761 this.text = error.response.data.message;
751 // return; 762 });
752 // } 763 },
753 this.showData = true; 764 markParticularStudentAttendence(selected) {
754 this.showLoader = false; 765 if (selected.attendence) {
755 }) 766 this.selected.push(selected);
756 .catch((error) => { 767 } else {
757 // console.log("error", error); 768 for (var i = 0; i < this.selected.length; i++) {
758 this.showLoader = false; 769 if (this.selected[i]._id === selected._id) {
759 this.snackbar = true; 770 this.selected.splice(i, 1);
760 this.color = "error"; 771 break;
761 this.text = error.response.data.message; 772 }
762 }); 773 }
763 }, 774 }
764 markParticularStudentAttendence(selected) { 775 let presentIndex = this.presentStudent.indexOf(selected._id);
765 if (selected.attendence) { 776 let absentIndex = this.absentStudent.indexOf(selected._id);
766 this.selected.push(selected); 777 if (presentIndex > -1) {
767 } else { 778 this.presentStudent.splice(presentIndex, 1);
768 for (var i = 0; i < this.selected.length; i++) { 779 this.absentStudent.push(selected._id);
769 if (this.selected[i]._id === selected._id) { 780 } else {
770 this.selected.splice(i, 1); 781 if (absentIndex > -1) {
771 break; 782 this.absentStudent.splice(absentIndex, 1);
772 } 783 }
773 } 784 this.presentStudent.push(selected._id);
774 } 785 }
775 let presentIndex = this.presentStudent.indexOf(selected._id); 786 },
776 let absentIndex = this.absentStudent.indexOf(selected._id); 787 selectAll() {
777 if (presentIndex > -1) { 788 let markAbsent = false;
778 this.presentStudent.splice(presentIndex, 1); 789 if (this.selected.length === this.studentsData.length) markAbsent = true;
779 this.absentStudent.push(selected._id); 790
780 } else { 791 this.presentStudent = [];
781 if (absentIndex > -1) { 792 this.absentStudent = [];
782 this.absentStudent.splice(absentIndex, 1); 793 this.selected = [];
783 } 794
784 this.presentStudent.push(selected._id); 795 for (let i = 0; i < this.studentsData.length; i++) {
785 } 796 if (markAbsent) {
786 }, 797 this.studentsData[i].attendence = false;
787 selectAll() { 798 this.absentStudent.push(this.studentsData[i]._id);
788 let markAbsent = false; 799 } else {
789 if (this.selected.length === this.studentsData.length) markAbsent = true; 800 this.studentsData[i].attendence = true;
790 801 this.presentStudent.push(this.studentsData[i]._id);
791 this.presentStudent = []; 802 this.selected.push(this.studentsData[i]);
792 this.absentStudent = []; 803 }
793 this.selected = []; 804 }
794 805 },
795 for (let i = 0; i < this.studentsData.length; i++) { 806 selectParticularStudent(_id) {
796 if (markAbsent) { 807 var payload = {
797 this.studentsData[i].attendence = false; 808 examAttendanceId: this.examData._id,
798 this.absentStudent.push(this.studentsData[i]._id); 809 studentId: this.selectedStudent.id,
799 } else { 810 isPresent: this.selectedStudent.isPresent,
800 this.studentsData[i].attendence = true; 811 };
801 this.presentStudent.push(this.studentsData[i]._id); 812
802 this.selected.push(this.studentsData[i]); 813 http()
803 } 814 .put("/updateExamAttendance", payload)
804 } 815 .then((response) => {
805 }, 816 this.snackbar = true;
806 selectParticularStudent(_id) { 817 this.color = "success";
807 var payload = { 818 this.text = "Successfully change attendence";
808 examAttendanceId: this.examData._id, 819 this.changeStudentAttendenceDialog = false;
809 studentId: this.selectedStudent.id, 820 this.selectedStudent = {};
810 isPresent: this.selectedStudent.isPresent, 821 this.getExamAttendenceList();
811 }; 822 })
812 823 .catch((error) => {
813 http() 824 this.snackbar = true;
814 .put("/updateExamAttendance", payload) 825 this.text = error.response.data.message;
815 .then((response) => { 826 });
816 this.snackbar = true; 827 },
817 this.color = "success"; 828 changeSort(column) {
818 this.text = "Successfully change attendence"; 829 if (this.pagination.sortBy === column) {
819 this.changeStudentAttendenceDialog = false; 830 this.pagination.descending = !this.pagination.descending;
820 this.selectedStudent = {}; 831 } else {
821 this.getExamAttendenceList(); 832 this.pagination.sortBy = column;
822 }) 833 this.pagination.descending = false;
823 .catch((error) => { 834 }
824 this.snackbar = true; 835 },
825 this.text = error.response.data.message; 836 displaySearch() {
826 }); 837 (this.show = false), (this.showSearch = true);
827 }, 838 },
828 changeSort(column) { 839 closeSearch() {
829 if (this.pagination.sortBy === column) { 840 this.showSearch = false;
830 this.pagination.descending = !this.pagination.descending; 841 this.show = true;
831 } else { 842 this.search = "";
832 this.pagination.sortBy = column; 843 },
833 this.pagination.descending = false; 844 },
834 } 845 mounted() {
835 }, 846 this.token = this.$store.state.token;
836 displaySearch() { 847 this.getClass();
837 (this.show = false), (this.showSearch = true); 848 this.getExamList();
838 }, 849 this.role = this.$store.state.role;
839 closeSearch() { 850 },
840 this.showSearch = false; 851 };
841 this.show = true; 852 </script>
src/pages/Exam/grade.vue
Diff comments   View file @8b7976c
1 <template> 1 <template>
2 <v-container fluid class="body-color"> 2 <v-container fluid class="body-color">
3 <!-- ****** EDIT GRADE ****** --> 3 <!-- ****** EDIT GRADE ****** -->
4 <v-dialog v-model="editGradeDialog" max-width="500px" persistent> 4 <v-dialog v-model="editGradeDialog" max-width="500px" persistent>
5 <v-card flat class="card-style pa-2" dark> 5 <v-card flat class="card-style pa-2" dark>
6 <v-layout> 6 <v-layout>
7 <v-flex xs12> 7 <v-flex xs12>
8 <label class="title text-xs-center">Edit Grade</label> 8 <label class="title text-xs-center">Edit Grade</label>
9 <v-icon size="24" class="right" @click="editGradeDialog = false">cancel</v-icon> 9 <v-icon size="24" class="right" @click="editGradeDialog = false">cancel</v-icon>
10 </v-flex> 10 </v-flex>
11 </v-layout> 11 </v-layout>
12 <v-form ref="formEditGrade" v-model="validEditGrade" lazy-validation> 12 <v-form ref="formEditGrade" v-model="validEditGrade" lazy-validation>
13 <v-container fluid> 13 <v-container fluid>
14 <v-layout wrap> 14 <v-layout wrap>
15 <v-flex xs12 sm12> 15 <v-flex xs12 sm12>
16 <v-layout> 16 <v-layout>
17 <v-flex xs4 class="pt-4 subheading"> 17 <v-flex xs4 class="pt-4 subheading">
18 <label class="right">Grade Name:</label> 18 <label class="right">Grade Name:</label>
19 </v-flex> 19 </v-flex>
20 <v-flex xs7 class="ml-3"> 20 <v-flex xs7 class="ml-3">
21 <v-text-field 21 <v-text-field
22 placeholder="fill your Grade Name" 22 placeholder="fill your Grade Name"
23 v-model="editedItem.gradeName" 23 v-model="editedItem.gradeName"
24 type="text" 24 type="text"
25 :rules="editGradeName" 25 :rules="editGradeName"
26 ></v-text-field> 26 ></v-text-field>
27 </v-flex> 27 </v-flex>
28 </v-layout> 28 </v-layout>
29 </v-flex> 29 </v-flex>
30 <v-flex xs12 sm12> 30 <v-flex xs12 sm12>
31 <v-layout> 31 <v-layout>
32 <v-flex xs4 class="pt-4 subheading"> 32 <v-flex xs4 class="pt-4 subheading">
33 <label class="right">Grade Point:</label> 33 <label class="right">Grade Point:</label>
34 </v-flex> 34 </v-flex>
35 <v-flex xs7 class="ml-3"> 35 <v-flex xs7 class="ml-3">
36 <v-text-field 36 <v-text-field
37 placeholder="fill your Grade Point" 37 placeholder="fill your Grade Point"
38 v-model="editedItem.gradePoint" 38 v-model="editedItem.gradePoint"
39 :rules="editGradePoint" 39 :rules="editGradePoint"
40 type="text" 40 type="text"
41 ></v-text-field> 41 ></v-text-field>
42 </v-flex> 42 </v-flex>
43 </v-layout> 43 </v-layout>
44 </v-flex> 44 </v-flex>
45 <v-flex xs12 sm12> 45 <v-flex xs12 sm12>
46 <v-layout> 46 <v-layout>
47 <v-flex xs4 class="pt-4 subheading"> 47 <v-flex xs4 class="pt-4 subheading">
48 <label class="right">Mark From:</label> 48 <label class="right">Mark From:</label>
49 </v-flex> 49 </v-flex>
50 <v-flex xs7 class="ml-3"> 50 <v-flex xs7 class="ml-3">
51 <v-text-field 51 <v-text-field
52 placeholder="fill your Mark From" 52 placeholder="fill your Mark From"
53 v-model="editedItem.marksFrom" 53 v-model="editedItem.marksFrom"
54 :rules="editMarksFrom" 54 :rules="editMarksFrom"
55 type="text" 55 type="text"
56 ></v-text-field> 56 ></v-text-field>
57 </v-flex> 57 </v-flex>
58 </v-layout> 58 </v-layout>
59 </v-flex> 59 </v-flex>
60 <v-flex xs12 sm12> 60 <v-flex xs12 sm12>
61 <v-layout> 61 <v-layout>
62 <v-flex xs4 class="pt-4 subheading"> 62 <v-flex xs4 class="pt-4 subheading">
63 <label class="right">Mark Upto:</label> 63 <label class="right">Mark Upto:</label>
64 </v-flex> 64 </v-flex>
65 <v-flex xs7 class="ml-3"> 65 <v-flex xs7 class="ml-3">
66 <v-text-field 66 <v-text-field
67 placeholder="fill your Mark From" 67 placeholder="fill your Mark From"
68 v-model="editedItem.marksUpTo" 68 v-model="editedItem.marksUpTo"
69 :rules="editMarksUpTo" 69 :rules="editMarksUpTo"
70 type="text" 70 type="text"
71 ></v-text-field> 71 ></v-text-field>
72 </v-flex> 72 </v-flex>
73 </v-layout> 73 </v-layout>
74 </v-flex> 74 </v-flex>
75 <v-flex xs12 sm12> 75 <v-flex xs12 sm12>
76 <v-layout> 76 <v-layout>
77 <v-flex xs4 class="pt-4 subheading"> 77 <v-flex xs4 class="pt-4 subheading">
78 <label class="right">Note:</label> 78 <label class="right">Note:</label>
79 </v-flex> 79 </v-flex>
80 <v-flex xs7 class="ml-3"> 80 <v-flex xs7 class="ml-3">
81 <v-text-field 81 <v-text-field
82 placeholder="fill your Serial Number" 82 placeholder="fill your Serial Number"
83 v-model="editedItem.note" 83 v-model="editedItem.note"
84 type="text" 84 type="text"
85 ></v-text-field> 85 ></v-text-field>
86 </v-flex> 86 </v-flex>
87 </v-layout> 87 </v-layout>
88 </v-flex> 88 </v-flex>
89 </v-layout> 89 </v-layout>
90 <v-layout> 90 <v-layout>
91 <v-flex xs12> 91 <v-flex xs12>
92 <v-card-actions> 92 <v-card-actions>
93 <v-spacer></v-spacer> 93 <v-spacer></v-spacer>
94 <v-btn round dark @click="save" class="add-button">Save</v-btn> 94 <v-btn round dark @click="save" class="add-button">Save</v-btn>
95 </v-card-actions> 95 </v-card-actions>
96 </v-flex> 96 </v-flex>
97 </v-layout> 97 </v-layout>
98 </v-container> 98 </v-container>
99 </v-form> 99 </v-form>
100 </v-card> 100 </v-card>
101 </v-dialog> 101 </v-dialog>
102 102
103 <!-- ****** PROFILE VIEW PARTICULAR GRDAE DATA ****** --> 103 <!-- ****** PROFILE VIEW PARTICULAR GRDAE DATA ****** -->
104 104
105 <v-dialog v-model="viewGradeDialog" max-width="500px" persistent> 105 <v-dialog v-model="viewGradeDialog" max-width="500px" persistent>
106 <v-card flat class="card-style pa-3" dark> 106 <v-card flat class="card-style pa-3" dark>
107 <v-layout> 107 <v-layout>
108 <v-flex xs12> 108 <v-flex xs12>
109 <label class="title text-xs-center">View Grade</label> 109 <label class="title text-xs-center">View Grade</label>
110 <v-icon size="24" class="right" @click="viewGradeDialog = false">cancel</v-icon> 110 <v-icon size="24" class="right" @click="viewGradeDialog = false">cancel</v-icon>
111 </v-flex> 111 </v-flex>
112 </v-layout> 112 </v-layout>
113 <v-card-text> 113 <v-card-text>
114 <v-container grid-list-md> 114 <v-container grid-list-md>
115 <v-layout wrap> 115 <v-layout wrap>
116 <v-flex> 116 <v-flex>
117 <v-layout> 117 <v-layout>
118 <v-flex xs5 sm6> 118 <v-flex xs5 sm6>
119 <h5 class="right my-1"> 119 <h5 class="right my-1">
120 <b>Grade Name:</b> 120 <b>Grade Name:</b>
121 </h5> 121 </h5>
122 </v-flex> 122 </v-flex>
123 <v-flex sm6 xs8> 123 <v-flex sm6 xs8>
124 <h5 class="my-1">{{ editedItem.gradeName }}</h5> 124 <h5 class="my-1">{{ editedItem.gradeName }}</h5>
125 </v-flex> 125 </v-flex>
126 </v-layout> 126 </v-layout>
127 <v-layout> 127 <v-layout>
128 <v-flex xs5 sm6> 128 <v-flex xs5 sm6>
129 <h5 class="right my-1"> 129 <h5 class="right my-1">
130 <b>Grade Point:</b> 130 <b>Grade Point:</b>
131 </h5> 131 </h5>
132 </v-flex> 132 </v-flex>
133 <v-flex sm6 xs8> 133 <v-flex sm6 xs8>
134 <h5 class="my-1">{{ editedItem.gradePoint }}</h5> 134 <h5 class="my-1">{{ editedItem.gradePoint }}</h5>
135 </v-flex> 135 </v-flex>
136 </v-layout> 136 </v-layout>
137 <v-layout> 137 <v-layout>
138 <v-flex xs5 sm6> 138 <v-flex xs5 sm6>
139 <h5 class="right my-1"> 139 <h5 class="right my-1">
140 <b>Mark From:</b> 140 <b>Mark From:</b>
141 </h5> 141 </h5>
142 </v-flex> 142 </v-flex>
143 <v-flex sm6 xs8> 143 <v-flex sm6 xs8>
144 <h5 class="my-1">{{ editedItem.marksFrom }}</h5> 144 <h5 class="my-1">{{ editedItem.marksFrom }}</h5>
145 </v-flex> 145 </v-flex>
146 </v-layout> 146 </v-layout>
147 <v-layout> 147 <v-layout>
148 <v-flex xs5 sm6> 148 <v-flex xs5 sm6>
149 <h5 class="right my-1"> 149 <h5 class="right my-1">
150 <b>Mark Upto:</b> 150 <b>Mark Upto:</b>
151 </h5> 151 </h5>
152 </v-flex> 152 </v-flex>
153 <v-flex sm6 xs8> 153 <v-flex sm6 xs8>
154 <h5 class="my-1">{{ editedItem.marksUpTo }}</h5> 154 <h5 class="my-1">{{ editedItem.marksUpTo }}</h5>
155 </v-flex> 155 </v-flex>
156 </v-layout> 156 </v-layout>
157 <v-layout> 157 <v-layout>
158 <v-flex xs5 sm6> 158 <v-flex xs5 sm6>
159 <h5 class="right my-1"> 159 <h5 class="right my-1">
160 <b>Note:</b> 160 <b>Note:</b>
161 </h5> 161 </h5>
162 </v-flex> 162 </v-flex>
163 <v-flex sm6 xs8> 163 <v-flex sm6 xs8>
164 <h5 class="my-1">{{ editedItem.note }}</h5> 164 <h5 class="my-1">{{ editedItem.note }}</h5>
165 </v-flex> 165 </v-flex>
166 </v-layout> 166 </v-layout>
167 </v-flex> 167 </v-flex>
168 </v-layout> 168 </v-layout>
169 </v-container> 169 </v-container>
170 </v-card-text> 170 </v-card-text>
171 </v-card> 171 </v-card>
172 </v-dialog> 172 </v-dialog>
173 <!-- ****** EXISTING GRADE TABLE****** --> 173 <!-- ****** EXISTING GRADE TABLE****** -->
174 174
175 <v-toolbar color="transparent" flat> 175 <v-toolbar color="transparent" flat>
176 <v-btn 176 <v-btn
177 fab 177 fab
178 dark 178 dark
179 class="open-dialog-button hidden-xl-only hidden-md-only hidden-lg-only" 179 class="open-dialog-button hidden-xl-only hidden-md-only hidden-lg-only"
180 small 180 small
181 @click="addGradeDialog = true" 181 @click="addGradeDialog = true"
182 > 182 >
183 <v-icon dark>add</v-icon> 183 <v-icon dark>add</v-icon>
184 </v-btn> 184 </v-btn>
185 <v-btn 185 <v-btn
186 round 186 round
187 class="open-dialog-button hidden-sm-only hidden-xs-only" 187 class="open-dialog-button hidden-sm-only hidden-xs-only"
188 dark 188 dark
189 @click="addGradeDialog = true" 189 @click="addGradeDialog = true"
190 > 190 >
191 <v-icon class="white--text pr-1" size="20">add</v-icon>Add Grade 191 <v-icon class="white--text pr-1" size="20">add</v-icon>Add Grade
192 </v-btn> 192 </v-btn>
193 <v-spacer></v-spacer> 193 <v-spacer></v-spacer>
194 <v-card-title class="body-1" v-show="show"> 194 <v-card-title class="body-1" v-show="show">
195 <v-btn icon large flat @click="displaySearch"> 195 <v-btn icon large flat @click="displaySearch">
196 <v-avatar size="27"> 196 <v-avatar size="27">
197 <img src="/static/icon/search.png" alt="icon" /> 197 <img src="/static/icon/search.png" alt="icon" />
198 </v-avatar> 198 </v-avatar>
199 </v-btn> 199 </v-btn>
200 </v-card-title> 200 </v-card-title>
201 <v-flex xs8 sm8 md3 lg2 v-if="showSearch"> 201 <v-flex xs8 sm8 md3 lg2 v-if="showSearch">
202 <v-layout> 202 <v-layout>
203 <v-text-field 203 <v-text-field
204 autofocus 204 autofocus
205 v-model="search" 205 v-model="search"
206 label="Search" 206 label="Search"
207 prepend-inner-icon="search" 207 prepend-inner-icon="search"
208 color="primary" 208 color="primary"
209 ></v-text-field> 209 ></v-text-field>
210 <v-icon @click="closeSearch" color="error">close</v-icon> 210 <v-icon @click="closeSearch" color="error">close</v-icon>
211 </v-layout> 211 </v-layout>
212 </v-flex> 212 </v-flex>
213 </v-toolbar> 213 </v-toolbar>
214 <v-data-table 214 <v-data-table
215 :headers="headers" 215 :headers="headers"
216 :items="gradeData" 216 :items="gradeData"
217 :pagination.sync="pagination" 217 :pagination.sync="pagination"
218 :search="search" 218 :search="search"
219 > 219 >
220 <template slot="items" slot-scope="props"> 220 <template slot="items" slot-scope="props">
221 <tr class="tr"> 221 <tr class="tr">
222 <td class="td td-row">{{ props.index + 1}}</td> 222 <td class="td td-row">{{ props.index + 1}}</td>
223 <td class="td td-row text-xs-center">{{ props.item.gradeName}}</td> 223 <td class="td td-row text-xs-center">{{ props.item.gradeName}}</td>
224 <td class="td td-row text-xs-center">{{ props.item.gradePoint }}</td> 224 <td class="td td-row text-xs-center">{{ props.item.gradePoint }}</td>
225 <td class="td td-row text-xs-center">{{ props.item.marksFrom }}</td> 225 <td class="td td-row text-xs-center">{{ props.item.marksFrom }}</td>
226 <td class="td td-row text-xs-center">{{ props.item.marksUpTo }}</td> 226 <td class="td td-row text-xs-center">{{ props.item.marksUpTo }}</td>
227 <td class="td td-row text-xs-center">{{ props.item.note }}</td> 227 <td class="td td-row text-xs-center">{{ props.item.note }}</td>
228 <td class="td td-row text-xs-center"> 228 <td class="td td-row text-xs-center">
229 <span> 229 <span>
230 <v-tooltip top> 230 <v-tooltip top>
231 <img 231 <img
232 slot="activator" 232 slot="activator"
233 style="cursor:pointer; width:25px; height:25px; " 233 style="cursor:pointer; width:25px; height:25px; "
234 class="mr-3" 234 class="mr-3"
235 @click="profile(props.item)" 235 @click="profile(props.item)"
236 src="/static/icon/view.png" 236 src="/static/icon/view.png"
237 /> 237 />
238 <span>View</span> 238 <span>View</span>
239 </v-tooltip> 239 </v-tooltip>
240 <v-tooltip top> 240 <v-tooltip top>
241 <img 241 <img
242 slot="activator" 242 slot="activator"
243 style="cursor:pointer; width:20px; height:18px; " 243 style="cursor:pointer; width:20px; height:18px; "
244 class="mr-3" 244 class="mr-3"
245 @click="editItem(props.item)" 245 @click="editItem(props.item)"
246 src="/static/icon/edit.png" 246 src="/static/icon/edit.png"
247 /> 247 />
248 <span>Edit</span> 248 <span>Edit</span>
249 </v-tooltip> 249 </v-tooltip>
250 <v-tooltip top> 250 <v-tooltip top>
251 <img 251 <img
252 slot="activator" 252 slot="activator"
253 style="cursor:pointer; width:20px; height:20px; " 253 style="cursor:pointer; width:20px; height:20px; "
254 @click="deleteGrade(props.item)" 254 @click="deleteGrade(props.item)"
255 class="mr-3" 255 class="mr-3"
256 src="/static/icon/delete.png" 256 src="/static/icon/delete.png"
257 /> 257 />
258 <span>Delete</span> 258 <span>Delete</span>
259 </v-tooltip> 259 </v-tooltip>
260 </span> 260 </span>
261 </td> 261 </td>
262 </tr> 262 </tr>
263 </template> 263 </template>
264 <v-alert 264 <v-alert
265 slot="no-results" 265 slot="no-results"
266 :value="true" 266 :value="true"
267 color="error" 267 color="error"
268 icon="warning" 268 icon="warning"
269 >Your search for "{{ search }}" found no results.</v-alert> 269 >Your search for "{{ search }}" found no results.</v-alert>
270 </v-data-table> 270 </v-data-table>
271 <!-- ****** ADD GRADE ****** --> 271 <!-- ****** ADD GRADE ****** -->
272 <v-dialog v-model="addGradeDialog" max-width="500px" v-if="addGradeDialog" persistent> 272 <v-dialog v-model="addGradeDialog" max-width="500px" v-if="addGradeDialog" persistent>
273 <v-card flat class="card-style pa-2" dark> 273 <v-card flat class="card-style pa-2" dark>
274 <v-layout> 274 <v-layout>
275 <v-flex xs12> 275 <v-flex xs12>
276 <label class="title text-xs-center">Add Grade</label> 276 <label class="title text-xs-center">Add Grade</label>
277 <v-icon 277 <v-icon
278 size="24" 278 size="24"
279 class="right" 279 class="right"
280 @click="$refs.form.reset();addGradeDialog = false" 280 @click="$refs.form.reset();addGradeDialog = false"
281 >cancel</v-icon> 281 >cancel</v-icon>
282 </v-flex> 282 </v-flex>
283 </v-layout> 283 </v-layout>
284 <v-form ref="form" v-model="valid" lazy-validation> 284 <v-form ref="form" v-model="valid" lazy-validation>
285 <v-container fluid> 285 <v-container fluid>
286 <v-flex xs12> 286 <v-flex xs12>
287 <v-layout> 287 <v-layout>
288 <v-flex xs5 sm4 class="pt-4 subheading"> 288 <v-flex xs5 sm4 class="pt-4 subheading">
289 <label class="right">Grade Name:</label> 289 <label class="right">Grade Name:</label>
290 </v-flex> 290 </v-flex>
291 <v-flex xs7 class="ml-3"> 291 <v-flex xs7 class="ml-3">
292 <v-text-field 292 <v-text-field
293 placeholder="fill your Grade Name" 293 placeholder="fill your Grade Name"
294 :rules="gradeNameRules" 294 :rules="gradeNameRules"
295 v-model="addGrade.gradeName" 295 v-model="addGrade.gradeName"
296 ></v-text-field> 296 ></v-text-field>
297 </v-flex> 297 </v-flex>
298 </v-layout> 298 </v-layout>
299 </v-flex> 299 </v-flex>
300 <v-flex xs12> 300 <v-flex xs12>
301 <v-layout> 301 <v-layout>
302 <v-flex xs5 sm4 class="pt-4 subheading"> 302 <v-flex xs5 sm4 class="pt-4 subheading">
303 <label class="right">Grade Point:</label> 303 <label class="right">Grade Point:</label>
304 </v-flex> 304 </v-flex>
305 <v-flex xs7 class="ml-3"> 305 <v-flex xs7 class="ml-3">
306 <v-text-field 306 <v-text-field
307 placeholder="fill your Grade Point" 307 placeholder="fill your Grade Point"
308 v-model="addGrade.gradePoint" 308 v-model="addGrade.gradePoint"
309 :rules="gradePointRules" 309 :rules="gradePointRules"
310 ></v-text-field> 310 ></v-text-field>
311 </v-flex> 311 </v-flex>
312 </v-layout> 312 </v-layout>
313 </v-flex> 313 </v-flex>
314 <v-flex xs12> 314 <v-flex xs12>
315 <v-layout> 315 <v-layout>
316 <v-flex xs5 sm4 class="pt-4 subheading"> 316 <v-flex xs5 sm4 class="pt-4 subheading">
317 <label class="right">Mark From:</label> 317 <label class="right">Mark From:</label>
318 </v-flex> 318 </v-flex>
319 <v-flex xs7 class="ml-3"> 319 <v-flex xs7 class="ml-3">
320 <v-text-field 320 <v-text-field
321 placeholder="fill your Mark From" 321 placeholder="fill your Mark From"
322 :rules="markFromRules" 322 :rules="markFromRules"
323 v-model="addGrade.marksFrom" 323 v-model="addGrade.marksFrom"
324 type="number" 324 type="number"
325 ></v-text-field> 325 ></v-text-field>
326 </v-flex> 326 </v-flex>
327 </v-layout> 327 </v-layout>
328 </v-flex> 328 </v-flex>
329 <v-flex xs12> 329 <v-flex xs12>
330 <v-layout> 330 <v-layout>
331 <v-flex xs5 sm4 class="pt-4 subheading"> 331 <v-flex xs5 sm4 class="pt-4 subheading">
332 <label class="right">Mark Upto:</label> 332 <label class="right">Mark Upto:</label>
333 </v-flex> 333 </v-flex>
334 <v-flex xs7 class="ml-3"> 334 <v-flex xs7 class="ml-3">
335 <v-text-field 335 <v-text-field
336 placeholder="fill your Mark Upto" 336 placeholder="fill your Mark Upto"
337 :rules="markUptoRules" 337 :rules="markUptoRules"
338 v-model="addGrade.marksUpTo" 338 v-model="addGrade.marksUpTo"
339 type="number" 339 type="number"
340 ></v-text-field> 340 ></v-text-field>
341 </v-flex> 341 </v-flex>
342 </v-layout> 342 </v-layout>
343 </v-flex> 343 </v-flex>
344 <v-flex xs12> 344 <v-flex xs12>
345 <v-layout> 345 <v-layout>
346 <v-flex xs5 sm4 class="pt-4 subheading"> 346 <v-flex xs5 sm4 class="pt-4 subheading">
347 <label class="right">Note:</label> 347 <label class="right">Note:</label>
348 </v-flex> 348 </v-flex>
349 <v-flex xs7 class="ml-3"> 349 <v-flex xs7 class="ml-3">
350 <v-text-field 350 <v-text-field
351 placeholder="fill your Note" 351 placeholder="fill your Note"
352 v-model="addGrade.note" 352 v-model="addGrade.note"
353 @keyup.enter="submit" 353 @keyup.enter="submit"
354 ></v-text-field> 354 ></v-text-field>
355 </v-flex> 355 </v-flex>
356 </v-layout> 356 </v-layout>
357 </v-flex> 357 </v-flex>
358 <v-layout> 358 <v-layout>
359 <v-flex xs12> 359 <v-flex xs12>
360 <v-card-actions> 360 <v-card-actions>
361 <v-spacer class="hidden-xs-only"></v-spacer> 361 <v-spacer class="hidden-xs-only"></v-spacer>
362 <v-btn @click="clear" round dark class="clear-button">Clear</v-btn> 362 <v-btn @click="clear" round dark class="clear-button">Clear</v-btn>
363 <v-btn @click="submit" round dark :loading="loading" class="add-button">Add</v-btn> 363 <v-btn @click="submit" round dark :loading="loading" class="add-button">Add</v-btn>
364 </v-card-actions> 364 </v-card-actions>
365 </v-flex> 365 </v-flex>
366 </v-layout> 366 </v-layout>
367 </v-container> 367 </v-container>
368 </v-form> 368 </v-form>
369 </v-card> 369 </v-card>
370 </v-dialog> 370 </v-dialog>
371 <v-snackbar 371 <v-snackbar
372 :timeout="timeout" 372 :timeout="timeout"
373 :top="y === 'top'" 373 :top="y === 'top'"
374 :right="x === 'right'" 374 :right="x === 'right'"
375 :vertical="mode === 'vertical'" 375 :vertical="mode === 'vertical'"
376 v-model="snackbar" 376 v-model="snackbar"
377 :color="color" 377 :color="color"
378 >{{ text }}</v-snackbar> 378 >{{ text }}</v-snackbar>
379 <div class="loader" v-if="showLoader"> 379 <div class="loader" v-if="showLoader">
380 <v-progress-circular indeterminate color="white"></v-progress-circular> 380 <v-progress-circular indeterminate color="white"></v-progress-circular>
381 </div> 381 </div>
382 </v-container> 382 </v-container>
383 </template> 383 </template>
384 384
385 <script> 385 <script>
386 import http from "@/Services/http.js"; 386 import http from "@/Services/http.js";
387 import moment from "moment"; 387 import moment from "moment";
388 388
389 export default { 389 export default {
390 data: () => ({ 390 data: () => ({
391 snackbar: false, 391 snackbar: false,
392 date: null, 392 date: null,
393 menu1: false, 393 menu1: false,
394 menu2: false, 394 menu2: false,
395 addGradeDialog: false, 395 addGradeDialog: false,
396 color: "", 396 color: "",
397 y: "top", 397 y: "top",
398 x: "right", 398 x: "right",
399 mode: "", 399 mode: "",
400 timeout: 10000, 400 timeout: 10000,
401 text: "", 401 text: "",
402 show: true, 402 show: true,
403 showSearch: false, 403 showSearch: false,
404 loading: false, 404 loading: false,
405 loadingSearch: false, 405 loadingSearch: false,
406 date: null, 406 date: null,
407 search: "", 407 search: "",
408 showLoader: false, 408 showLoader: false,
409 editGradeDialog: false, 409 editGradeDialog: false,
410 viewGradeDialog: false, 410 viewGradeDialog: false,
411 valid: true, 411 valid: true,
412 validEditGrade: true, 412 validEditGrade: true,
413 pagination: { 413 pagination: {
414 rowsPerPage: 10, 414 rowsPerPage: 10,
415 }, 415 },
416 gradeNameRules: [(v) => !!v || "Grade Name is required"], 416 gradeNameRules: [(v) => !!v || "Grade Name is required"],
417 gradePointRules: [(v) => !!v || "Grade Point required"], 417 gradePointRules: [(v) => !!v || "Grade Point required"],
418 markFromRules: [(v) => !!v || "Mark From is required"], 418 markFromRules: [(v) => !!v || "Mark From is required"],
419 markUptoRules: [(v) => !!v || "Mark Upto is required"], 419 markUptoRules: [(v) => !!v || "Mark Upto is required"],
420 authorRules: [(v) => !!v || "Author is required"], 420 authorRules: [(v) => !!v || "Author is required"],
421 noteRules: [(v) => !!v || "Note is required"], 421 noteRules: [(v) => !!v || "Note is required"],
422 editGradeName: [(v) => !!v || "Grade Name is required"], 422 editGradeName: [(v) => !!v || "Grade Name is required"],
423 editGradeName: [(v) => !!v || "Grade Name is required"], 423 editGradeName: [(v) => !!v || "Grade Name is required"],
424 editGradePoint: [(v) => !!v || "Grade Point required"], 424 editGradePoint: [(v) => !!v || "Grade Point required"],
425 editMarksFrom: [(v) => !!v || "Mark From is required"], 425 editMarksFrom: [(v) => !!v || "Mark From is required"],
426 editMarksUpTo: [(v) => !!v || "Mark Upto is required"], 426 editMarksUpTo: [(v) => !!v || "Mark Upto is required"],
427 headers: [ 427 headers: [
428 { 428 {
429 align: "", 429 align: "",
430 text: "No", 430 text: "No",
431 sortable: false, 431 sortable: false,
432 value: "No", 432 value: "No",
433 }, 433 },
434 { 434 {
435 text: "Grade Name", 435 text: "Grade Name",
436 vaue: "gradeName", 436 vaue: "gradeName",
437 sortable: false, 437 sortable: false,
438 align: "center", 438 align: "center",
439 }, 439 },
440 { 440 {
441 text: "Grade Point", 441 text: "Grade Point",
442 value: "gradePoint", 442 value: "gradePoint",
443 sortable: false, 443 sortable: false,
444 align: "center", 444 align: "center",
445 }, 445 },
446 { 446 {
447 text: "Mark From", 447 text: "Mark From",
448 value: "marksFrom", 448 value: "marksFrom",
449 sortable: false, 449 sortable: false,
450 align: "center", 450 align: "center",
451 }, 451 },
452 { 452 {
453 text: "Mark Upto", 453 text: "Mark Upto",
454 value: "marksUpTo", 454 value: "marksUpTo",
455 sortable: false, 455 sortable: false,
456 align: "center", 456 align: "center",
457 }, 457 },
458 { 458 {
459 text: "Note", 459 text: "Note",
460 value: "note", 460 value: "note",
461 sortable: false, 461 sortable: false,
462 align: "center", 462 align: "center",
463 }, 463 },
464 { text: "Action", value: "", sortable: false, align: "center" }, 464 { text: "Action", value: "", sortable: false, align: "center" },
465 ], 465 ],
466 gradeData: [], 466 gradeData: [],
467 addGrade: {}, 467 addGrade: {},
468 editedItem: {}, 468 editedItem: {},
469 token: "", 469 token: "",
470 }), 470 }),
471 watch: { 471 watch: {
472 addGradeDialog: function (val) { 472 addGradeDialog: function (val) {
473 if (!val) { 473 if (!val) {
474 this.addGrade = []; 474 this.addGrade = [];
475 } 475 }
476 }, 476 },
477 }, 477 },
478 methods: { 478 methods: {
479 dates: function (date) { 479 dates: function (date) {
480 return moment(date).format("MMMM DD, YYYY"); 480 return moment(date).format("MMMM DD, YYYY");
481 }, 481 },
482 pickFile() { 482 pickFile() {
483 this.$refs.image.click(); 483 this.$refs.image.click();
484 }, 484 },
485 getGradeList() { 485 getGradeList() {
486 this.showLoader = true; 486 this.showLoader = true;
487 this.loadingSearch = true; 487 this.loadingSearch = true;
488 http() 488 http()
489 .get("/getGradesList", { 489 .get("/getGradesList", {
490 headers: { Authorization: "Bearer " + this.token }, 490 headers: { Authorization: "Bearer " + this.token },
491 }) 491 })
492 .then((response) => { 492 .then((response) => {
493 this.gradeData = response.data.data; 493 this.gradeData = response.data.data;
494 this.showLoader = false; 494 this.showLoader = false;
495 this.loadingSearch = false; 495 this.loadingSearch = false;
496 }) 496 })
497 .catch((error) => { 497 .catch((error) => {
498 // console.log("err====>", err); 498 // console.log("err====>", err);
499 this.showLoader = false; 499 this.showLoader = false;
500 this.loadingSearch = false; 500 this.loadingSearch = false;
501 this.snackbar = true; 501 this.snackbar = true;
502 this.text = error.response.data.message; 502 this.text = error.response.data.message;
503 if (error.response.status === 401) { 503 if (error.response.status === 401) {
504 this.$router.replace({ path: "/" }); 504 this.$router.replace({ path: "/" });
505 this.$store.dispatch("setToken", null); 505 this.$store.dispatch("setToken", null);
506 this.$store.dispatch("Id", null); 506 this.$store.dispatch("Id", null);
507 } 507 }
508 }); 508 });
509 }, 509 },
510 editItem(item) { 510 editItem(item) {
511 // console.log("item", item); 511 // console.log("item", item);
512 this.editedIndex = this.gradeData.indexOf(item); 512 this.editedIndex = this.gradeData.indexOf(item);
513 this.editedItem = Object.assign({}, item); 513 this.editedItem = Object.assign({}, item);
514 this.editedItem.date = 514 this.editedItem.date =
515 this.editedItem.date != undefined 515 this.editedItem.date != undefined
516 ? (this.editedItem.date = this.editedItem.date.substring(0, 10)) 516 ? (this.editedItem.date = this.editedItem.date.substring(0, 10))
517 : (this.editedItem.date = ""); 517 : (this.editedItem.date = "");
518 this.editGradeDialog = true; 518 this.editGradeDialog = true;
519 }, 519 },
520 profile(item) { 520 profile(item) {
521 this.editedIndex = this.gradeData.indexOf(item); 521 this.editedIndex = this.gradeData.indexOf(item);
522 this.editedItem = Object.assign({}, item); 522 this.editedItem = Object.assign({}, item);
523 this.viewGradeDialog = true; 523 this.viewGradeDialog = true;
524 }, 524 },
525 deleteGrade(item) { 525 deleteGrade(item) {
526 let deleteGrade = { 526 let deleteGrade = {
527 gradeId: item._id, 527 gradeId: item._id,
528 }; 528 };
529 http() 529 http()
530 .delete( 530 .delete(
531 "/deleteGrade", 531 "/deleteGrade",
532 confirm("Are you sure you want to Delete this?") && { 532 confirm("Are you sure you want to Delete this?") && {
533 params: deleteGrade, 533 params: deleteGrade,
534 } 534 }
535 ) 535 )
536 .then((response) => { 536 .then((response) => {
537 this.snackbar = true; 537 this.snackbar = true;
538 this.text = response.data.message; 538 this.text = response.data.message;
539 this.color = "green"; 539 this.color = "green";
540 this.getGradeList(); 540 this.getGradeList();
541 }) 541 })
542 .catch((error) => { 542 .catch((error) => {
543 this.loading = false; 543 this.loading = false;
544 this.snackbar = true; 544 this.snackbar = true;
545 this.color = "error"; 545 this.color = "error";
546 this.text = error.response.data.message; 546 this.text = error.response.data.message;
547 }); 547 });
548 }, 548 },
549 close() { 549 close() {
550 this.editGradeDialog = false; 550 this.editGradeDialog = false;
551 }, 551 },
552 submit() { 552 submit() {
553 if (this.$refs.form.validate()) { 553 if (this.$refs.form.validate()) {
554 this.loading = true; 554 this.loading = true;
555 http() 555 http()
556 .post("/createGrade", this.addGrade) 556 .post("/createGrade", this.addGrade)
557 .then((response) => { 557 .then((response) => {
558 this.snackbar = true; 558 this.snackbar = true;
559 this.text = response.data.message; 559 this.text = response.data.message;
560 this.color = "green"; 560 this.color = "green";
561 this.addGradeDialog = false; 561 this.addGradeDialog = false;
562 this.loading = false; 562 this.loading = false;
563 this.clear(); 563 this.clear();
564 this.getGradeList(); 564 this.getGradeList();
565 }) 565 })
566 .catch((error) => { 566 .catch((error) => {
567 this.snackbar = true; 567 this.snackbar = true;
568 this.text = error.response.data.message; 568 this.text = error.response.data.message;
569 this.color = "red"; 569 this.color = "red";
570 this.loading = false; 570 this.loading = false;
571 }); 571 });
572 } 572 }
573 }, 573 },
574 clear() { 574 clear() {
575 this.$refs.form.reset(); 575 this.$refs.form.reset();
576 this.disable = false; 576 this.disable = false;
577 this.loading = false; 577 this.loading = false;
578 }, 578 },
579 save() { 579 save() {
580 if (this.$refs.formEditGrade.validate()) { 580 if (this.$refs.formEditGrade.validate()) {
581 this.editedItem.gradeId = this.editedItem._id; 581 this.editedItem.gradeId = this.editedItem._id;
582 http() 582 http()
583 .put("/updateGrade", this.editedItem) 583 .put("/updateGrade", this.editedItem)
584 .then((response) => { 584 .then((response) => {
585 this.snackbar = true; 585 this.snackbar = true;
586 this.text = response.data.message; 586 this.text = response.data.message;
587 this.color = "green"; 587 this.color = "green";
588 this.getGradeList(); 588 this.getGradeList();
589 this.close(); 589 this.close();
590 }) 590 })
591 .catch((error) => { 591 .catch((error) => {
592 this.snackbar = true; 592 this.snackbar = true;
593 this.text = error.response.data.message; 593 this.text = error.response.data.message;
594 this.color = "red"; 594 this.color = "red";
595 }); 595 });
596 } 596 }
597 }, 597 },
598 displaySearch() { 598 displaySearch() {
599 (this.show = false), (this.showSearch = true); 599 (this.show = false), (this.showSearch = true);
600 }, 600 },
601 closeSearch() { 601 closeSearch() {
602 this.showSearch = false; 602 this.showSearch = false;
603 this.show = true; 603 this.show = true;
604 this.search = ""; 604 this.search = "";
605 }, 605 },
606 }, 606 },
607 mounted() { 607 mounted() {
608 this.token = this.$store.state.token; 608 this.token = this.$store.state.token;
609 this.getGradeList(); 609 this.getGradeList();
610 }, 610 },
611 }; 611 };
612 </script> 612 </script>
src/pages/Gallery/gallery.vue
Diff comments   View file @8b7976c
1 <template> 1 <template>
2 <v-container fluid class="body-color"> 2 <v-container fluid class="body-color">
3 <!-- ****** EDITS Gallery ****** --> 3 <!-- ****** EDITS Gallery ****** -->
4 <v-dialog v-model="editGalleryDialog" max-width="1000px" scrollable persistent> 4 <v-dialog v-model="editGalleryDialog" max-width="1000px" scrollable persistent>
5 <v-card class="card-style pa-2" dark> 5 <v-card class="card-style pa-2" dark>
6 <v-layout> 6 <v-layout>
7 <v-flex xs12> 7 <v-flex xs12>
8 <label class="title text-xs-center">Edit Gallery</label> 8 <label class="title text-xs-center">Edit Gallery</label>
9 <v-icon size="24" class="right" @click="editGalleryDialog = false">cancel</v-icon> 9 <v-icon size="24" class="right" @click="editGalleryDialog = false">cancel</v-icon>
10 </v-flex> 10 </v-flex>
11 </v-layout> 11 </v-layout>
12 <v-card-text> 12 <v-card-text>
13 <v-layout row> 13 <v-layout row>
14 <v-flex xs12 class="text-xs-center text-sm-center text-md-center text-lg-center my-4"> 14 <v-flex xs12 class="text-xs-center text-sm-center text-md-center text-lg-center my-4">
15 <input 15 <input
16 type="file" 16 type="file"
17 style="display: none" 17 style="display: none"
18 ref="editImage" 18 ref="editImage"
19 accept="image/*" 19 accept="image/*"
20 multiple 20 multiple
21 @change="editFilePicked" 21 @change="editFilePicked"
22 /> 22 />
23 <v-layout justify-center> 23 <v-layout justify-center>
24 <v-flex 24 <v-flex
25 xs6 25 xs6
26 sm12 26 sm12
27 md3 27 md3
28 v-for="Image in editedItem.imageUrl" 28 v-for="Image in editedItem.imageUrl"
29 :key="Image._id" 29 :key="Image._id"
30 v-if="editedItem.imageUrl" 30 v-if="editedItem.imageUrl"
31 class="profile-image-wrapper imgNews" 31 class="profile-image-wrapper imgNews"
32 > 32 >
33 <img :src="Image.imageLink" height="160" width="160" alt="Gallery" class="pa-2" /> 33 <img :src="Image.imageLink" height="160" width="160" alt="Gallery" class="pa-2" />
34 <v-icon 34 <v-icon
35 class="red edit-profile-icon" 35 class="red edit-profile-icon"
36 dark 36 dark
37 @click="deleteImage(Image._id,editedItem._id)" 37 @click="deleteImage(Image._id,editedItem._id)"
38 >close</v-icon> 38 >close</v-icon>
39 </v-flex> 39 </v-flex>
40 <v-flex v-for="(file, index) in editFiles" :key="index"> 40 <v-flex v-for="(file, index) in editFiles" :key="index">
41 <img :src="file" height="160" width="160" class="pa-2" /> 41 <img :src="file" height="160" width="160" class="pa-2" />
42 </v-flex> 42 </v-flex>
43 </v-layout> 43 </v-layout>
44 <img 44 <img
45 src="/static/icon/user.png" 45 src="/static/icon/user.png"
46 v-if="editedItem.imageUrl == '' && editFiles == ''" 46 v-if="editedItem.imageUrl == '' && editFiles == ''"
47 height="160" 47 height="160"
48 width="160" 48 width="160"
49 alt="Gallery" 49 alt="Gallery"
50 /> 50 />
51 </v-flex> 51 </v-flex>
52 </v-layout> 52 </v-layout>
53 <v-layout wrap> 53 <v-layout wrap>
54 <v-flex xs12 sm12> 54 <v-flex xs12 sm12>
55 <v-layout> 55 <v-layout>
56 <v-flex xs4 class="pt-4 subheading"> 56 <v-flex xs4 class="pt-4 subheading">
57 <label class="right">Title:</label> 57 <label class="right">Title:</label>
58 </v-flex> 58 </v-flex>
59 <v-flex xs8 sm6 class="ml-3"> 59 <v-flex xs8 sm6 class="ml-3">
60 <v-text-field 60 <v-text-field
61 v-model="editedItem.title" 61 v-model="editedItem.title"
62 placeholder="fill your Title" 62 placeholder="fill your Title"
63 name="name" 63 name="name"
64 type="text" 64 type="text"
65 required 65 required
66 ></v-text-field> 66 ></v-text-field>
67 </v-flex> 67 </v-flex>
68 </v-layout> 68 </v-layout>
69 </v-flex> 69 </v-flex>
70 <v-flex xs12 sm12> 70 <v-flex xs12 sm12>
71 <v-layout> 71 <v-layout>
72 <v-flex xs4 class="pt-4 subheading"> 72 <v-flex xs4 class="pt-4 subheading">
73 <label class="right">Description:</label> 73 <label class="right">Description:</label>
74 </v-flex> 74 </v-flex>
75 <v-flex xs8 sm6 class="ml-3"> 75 <v-flex xs8 sm6 class="ml-3">
76 <v-text-field 76 <v-text-field
77 placeholder="fill your Description" 77 placeholder="fill your Description"
78 v-model="editedItem.description" 78 v-model="editedItem.description"
79 type="text" 79 type="text"
80 name="email" 80 name="email"
81 required 81 required
82 ></v-text-field> 82 ></v-text-field>
83 </v-flex> 83 </v-flex>
84 </v-layout> 84 </v-layout>
85 </v-flex> 85 </v-flex>
86 <v-layout> 86 <v-layout>
87 <v-flex xs4 class="pt-4 subheading"> 87 <v-flex xs4 class="pt-4 subheading">
88 <label class="right hidden-xs-only hidden-sm-only">Select Class:</label> 88 <label class="right hidden-xs-only hidden-sm-only">Select Class:</label>
89 <label class="right hidden-lg-only hidden-md-only hidden-xl-only">Class:</label> 89 <label class="right hidden-lg-only hidden-md-only hidden-xl-only">Class:</label>
90 </v-flex> 90 </v-flex>
91 <v-flex xs8 sm6 class="ml-3"> 91 <v-flex xs8 sm6 class="ml-3">
92 <v-select 92 <v-select
93 :items="addclass" 93 :items="addclass"
94 label="Select Class" 94 label="Select Class"
95 v-model="editedItem.classNum" 95 v-model="editedItem.classNum"
96 item-text="classNum" 96 item-text="classNum"
97 item-value="_id" 97 item-value="_id"
98 name="Select Class" 98 name="Select Class"
99 required 99 required
100 ></v-select> 100 ></v-select>
101 </v-flex> 101 </v-flex>
102 </v-layout> 102 </v-layout>
103 <v-flex xs12> 103 <v-flex xs12>
104 <v-layout> 104 <v-layout>
105 <v-flex xs4 class="pt-4 subheading"> 105 <v-flex xs4 class="pt-4 subheading">
106 <label class="right hidden-xs-only hidden-sm-only">Add New Images:</label> 106 <label class="right hidden-xs-only hidden-sm-only">Add New Images:</label>
107 <label class="right hidden-lg-only hidden-md-only hidden-xl-only">Upload:</label> 107 <label class="right hidden-lg-only hidden-md-only hidden-xl-only">Upload:</label>
108 </v-flex> 108 </v-flex>
109 <v-flex xs8 sm6 class="ml-3"> 109 <v-flex xs8 sm6 class="ml-3">
110 <v-text-field 110 <v-text-field
111 label="Select Image" 111 label="Select Image"
112 @click="editPickFile" 112 @click="editPickFile"
113 v-model="editImageName" 113 v-model="editImageName"
114 append-icon="attach_file" 114 append-icon="attach_file"
115 multiple 115 multiple
116 ></v-text-field> 116 ></v-text-field>
117 </v-flex> 117 </v-flex>
118 </v-layout> 118 </v-layout>
119 </v-flex> 119 </v-flex>
120 </v-layout> 120 </v-layout>
121 <v-flex xs12> 121 <v-flex xs12>
122 <div 122 <div
123 v-for="(editImage,index) in editedItem.youTubeLinkUrl" 123 v-for="(editImage,index) in editedItem.youTubeLinkUrl"
124 :key="index" 124 :key="index"
125 v-if="editImage.youTubeLink !=[]" 125 v-if="editImage.youTubeLink !=[]"
126 > 126 >
127 <v-layout wrap> 127 <v-layout wrap>
128 <v-flex xs12 sm12 md4 class="pt-4 subheading"> 128 <v-flex xs12 sm12 md4 class="pt-4 subheading">
129 <label class="right hidden-xs-only hidden-sm-only">You Tube Link Url:</label> 129 <label class="right hidden-xs-only hidden-sm-only">You Tube Link Url:</label>
130 <label class="hidden-md-only hidden-lg-only hidden-xl-only">You Tube Link Url:</label> 130 <label class="hidden-md-only hidden-lg-only hidden-xl-only">You Tube Link Url:</label>
131 </v-flex> 131 </v-flex>
132 <v-layout> 132 <v-layout>
133 <v-flex xs10 sm10 sm5 md9 class="ml-3"> 133 <v-flex xs10 sm10 sm5 md9 class="ml-3">
134 <v-text-field v-model="editImage.youTubeLink" type="text" name="link" required></v-text-field> 134 <v-text-field v-model="editImage.youTubeLink" type="text" name="link" required></v-text-field>
135 </v-flex> 135 </v-flex>
136 <v-flex xs2 class="pt-4"> 136 <v-flex xs2 class="pt-4">
137 <v-icon @click="deleteUrl(index,editImage._id,editedItem._id)">cancel</v-icon> 137 <v-icon @click="deleteUrl(index,editImage._id,editedItem._id)">cancel</v-icon>
138 </v-flex> 138 </v-flex>
139 </v-layout> 139 </v-layout>
140 </v-layout> 140 </v-layout>
141 </div> 141 </div>
142 </v-flex> 142 </v-flex>
143 <v-flex xs12> 143 <v-flex xs12>
144 <div v-for="(updateImage,index) in updates" :key="index"> 144 <div v-for="(updateImage,index) in updates" :key="index">
145 <v-layout wrap> 145 <v-layout wrap>
146 <v-flex xs12 sm12 md4 class="pt-4 subheading"> 146 <v-flex xs12 sm12 md4 class="pt-4 subheading">
147 <label class="right hidden-xs-only hidden-sm-only">You Tube Url:</label> 147 <label class="right hidden-xs-only hidden-sm-only">You Tube Url:</label>
148 <label class="hidden-md-only hidden-lg-only hidden-xl-only">You Tube Url:</label> 148 <label class="hidden-md-only hidden-lg-only hidden-xl-only">You Tube Url:</label>
149 </v-flex> 149 </v-flex>
150 <v-layout> 150 <v-layout>
151 <v-flex xs10 sm12 md9 class="ml-3"> 151 <v-flex xs10 sm12 md9 class="ml-3">
152 <v-text-field 152 <v-text-field
153 v-model="updateImage.youTubeLink" 153 v-model="updateImage.youTubeLink"
154 label="Upload new you tube link url" 154 label="Upload new you tube link url"
155 required 155 required
156 ></v-text-field> 156 ></v-text-field>
157 </v-flex> 157 </v-flex>
158 <v-flex xs2 class="pt-4"> 158 <v-flex xs2 class="pt-4">
159 <v-icon @click="deleteUpdate(index)" v-if="index !=0">cancel</v-icon> 159 <v-icon @click="deleteUpdate(index)" v-if="index !=0">cancel</v-icon>
160 <v-icon @click="update">add_circle</v-icon> 160 <v-icon @click="update">add_circle</v-icon>
161 </v-flex> 161 </v-flex>
162 </v-layout> 162 </v-layout>
163 </v-layout> 163 </v-layout>
164 </div> 164 </div>
165 </v-flex> 165 </v-flex>
166 <v-layout> 166 <v-layout>
167 <v-flex xs12 sm12 md11 lg11> 167 <v-flex xs12 sm12 md11 lg11>
168 <v-card-actions class="hidden-xs-only hidden-sm-only"> 168 <v-card-actions class="hidden-xs-only hidden-sm-only">
169 <v-spacer></v-spacer> 169 <v-spacer></v-spacer>
170 <v-btn 170 <v-btn
171 round 171 round
172 dark 172 dark
173 @click="save" 173 @click="save"
174 :loading="editGalleryLoading" 174 :loading="editGalleryLoading"
175 class="add-button mr-4" 175 class="add-button mr-4"
176 >Save</v-btn> 176 >Save</v-btn>
177 </v-card-actions> 177 </v-card-actions>
178 <v-card-actions class="hidden-md-only hidden-lg-only hidden-xl-only"> 178 <v-card-actions class="hidden-md-only hidden-lg-only hidden-xl-only">
179 <v-spacer></v-spacer> 179 <v-spacer></v-spacer>
180 <v-btn 180 <v-btn
181 round 181 round
182 dark 182 dark
183 @click="save" 183 @click="save"
184 :loading="editGalleryLoading" 184 :loading="editGalleryLoading"
185 class="add-button" 185 class="add-button"
186 >Save</v-btn> 186 >Save</v-btn>
187 <v-spacer></v-spacer> 187 <v-spacer></v-spacer>
188 </v-card-actions> 188 </v-card-actions>
189 </v-flex> 189 </v-flex>
190 </v-layout> 190 </v-layout>
191 </v-card-text> 191 </v-card-text>
192 </v-card> 192 </v-card>
193 </v-dialog> 193 </v-dialog>
194 194
195 <!-- ****** PROFILE Gallery ****** --> 195 <!-- ****** PROFILE Gallery ****** -->
196 196
197 <v-dialog v-model="viewProfileGallery" max-width="1000" scrollable persistent> 197 <v-dialog v-model="viewProfileGallery" max-width="1000" scrollable persistent>
198 <v-card flat class="card-style pa-3" dark> 198 <v-card flat class="card-style pa-3" dark>
199 <v-layout> 199 <v-layout>
200 <v-flex xs12> 200 <v-flex xs12>
201 <label class="title text-xs-center">View Gallery</label> 201 <label class="title text-xs-center">View Gallery</label>
202 <v-icon size="24" class="right" @click="closeProfileGallery">cancel</v-icon> 202 <v-icon size="24" class="right" @click="closeProfileGallery">cancel</v-icon>
203 </v-flex> 203 </v-flex>
204 </v-layout> 204 </v-layout>
205 <v-card-text> 205 <v-card-text>
206 <v-layout row wrap> 206 <v-layout row wrap>
207 <v-flex xs12 class="text-xs-center text-sm-center text-md-center text-lg-center my-4"> 207 <v-flex xs12 class="text-xs-center text-sm-center text-md-center text-lg-center my-4">
208 <v-avatar size="100" v-if="editedItem.imageUrl == ''" class="mt-4 pa-2"> 208 <v-avatar size="100" v-if="editedItem.imageUrl == ''" class="mt-4 pa-2">
209 <img src="/static/icon/user.png" width="240" height="180" /> 209 <img src="/static/icon/user.png" width="240" height="180" />
210 </v-avatar> 210 </v-avatar>
211 <span 211 <span
212 v-for="(image,i) in editedItem.imageUrl" 212 v-for="(image,i) in editedItem.imageUrl"
213 :key="i" 213 :key="i"
214 class="mt-4 pa-2" 214 class="mt-4 pa-2"
215 v-if="editedItem.imageUrl" 215 v-if="editedItem.imageUrl"
216 > 216 >
217 <img :src="image.imageLink" alt="Gallery" width="240" height="180" class="imgNews" /> 217 <img :src="image.imageLink" alt="Gallery" width="240" height="180" class="imgNews" />
218 </span> 218 </span>
219 </v-flex> 219 </v-flex>
220 </v-layout> 220 </v-layout>
221 <v-container grid-list-md> 221 <v-container grid-list-md>
222 <v-layout wrap> 222 <v-layout wrap>
223 <v-flex xs12> 223 <v-flex xs12>
224 <v-layout> 224 <v-layout>
225 <v-flex xs5 sm6> 225 <v-flex xs5 sm6>
226 <h5 class="right my-1"> 226 <h5 class="right my-1">
227 <b>Title:</b> 227 <b>Title:</b>
228 </h5> 228 </h5>
229 </v-flex> 229 </v-flex>
230 <v-flex sm6 xs8> 230 <v-flex sm6 xs8>
231 <h5 class="my-1">{{ editedItem.title }}</h5> 231 <h5 class="my-1">{{ editedItem.title }}</h5>
232 </v-flex> 232 </v-flex>
233 </v-layout> 233 </v-layout>
234 <v-layout> 234 <v-layout>
235 <v-flex xs5 sm6> 235 <v-flex xs5 sm6>
236 <h5 class="right my-1"> 236 <h5 class="right my-1">
237 <b>Description:</b> 237 <b>Description:</b>
238 </h5> 238 </h5>
239 </v-flex> 239 </v-flex>
240 <v-flex sm6 xs8> 240 <v-flex sm6 xs8>
241 <h5 class="my-1">{{ editedItem.description }}</h5> 241 <h5 class="my-1">{{ editedItem.description }}</h5>
242 </v-flex> 242 </v-flex>
243 </v-layout> 243 </v-layout>
244 <v-layout> 244 <v-layout>
245 <v-flex xs5 sm6> 245 <v-flex xs5 sm6>
246 <h5 class="right my-1"> 246 <h5 class="right my-1">
247 <b>You Tube Link Url:</b> 247 <b>You Tube Link Url:</b>
248 </h5> 248 </h5>
249 </v-flex> 249 </v-flex>
250 <v-flex sm6 xs8> 250 <v-flex sm6 xs8>
251 <h5 class="my-1 ml-3"> 251 <h5 class="my-1 ml-3">
252 <ul v-for="youTubeLinkUrl in editedItem.youTubeLinkUrl"> 252 <ul v-for="youTubeLinkUrl in editedItem.youTubeLinkUrl">
253 <li>{{ youTubeLinkUrl.youTubeLink }}</li> 253 <li>{{ youTubeLinkUrl.youTubeLink }}</li>
254 </ul> 254 </ul>
255 </h5> 255 </h5>
256 </v-flex> 256 </v-flex>
257 </v-layout> 257 </v-layout>
258 </v-flex> 258 </v-flex>
259 </v-layout> 259 </v-layout>
260 </v-container> 260 </v-container>
261 </v-card-text> 261 </v-card-text>
262 </v-card> 262 </v-card>
263 </v-dialog> 263 </v-dialog>
264 264
265 <!-- ****** Gallery TABLE ****** --> 265 <!-- ****** Gallery TABLE ****** -->
266 266
267 <v-toolbar color="transparent" flat> 267 <v-toolbar color="transparent" flat>
268 <v-btn 268 <v-btn
269 fab 269 fab
270 dark 270 dark
271 class="open-dialog-button hidden-xl-only hidden-md-only hidden-lg-only" 271 class="open-dialog-button hidden-xl-only hidden-md-only hidden-lg-only"
272 small 272 small
273 @click="addGalleryDialog = true" 273 @click="addGalleryDialog = true"
274 > 274 >
275 <v-icon dark>add</v-icon> 275 <v-icon dark>add</v-icon>
276 </v-btn> 276 </v-btn>
277 <v-btn 277 <v-btn
278 round 278 round
279 class="open-dialog-button hidden-sm-only hidden-xs-only" 279 class="open-dialog-button hidden-sm-only hidden-xs-only"
280 dark 280 dark
281 @click="addGalleryDialog = true" 281 @click="addGalleryDialog = true"
282 > 282 >
283 <v-icon class="white--text pr-1" size="20">add</v-icon>Add Gallery 283 <v-icon class="white--text pr-1" size="20">add</v-icon>Add Gallery
284 </v-btn> 284 </v-btn>
285 <v-spacer></v-spacer> 285 <v-spacer></v-spacer>
286 <v-card-title class="body-1" v-show="show"> 286 <v-card-title class="body-1" v-show="show">
287 <v-btn icon large flat @click="displaySearch"> 287 <v-btn icon large flat @click="displaySearch">
288 <v-avatar size="27"> 288 <v-avatar size="27">
289 <img src="/static/icon/search.png" alt="icon" /> 289 <img src="/static/icon/search.png" alt="icon" />
290 </v-avatar> 290 </v-avatar>
291 </v-btn> 291 </v-btn>
292 </v-card-title> 292 </v-card-title>
293 <v-flex xs8 sm8 md3 lg2 v-if="showSearch"> 293 <v-flex xs8 sm8 md3 lg2 v-if="showSearch">
294 <v-layout> 294 <v-layout>
295 <v-text-field 295 <v-text-field
296 autofocus 296 autofocus
297 v-model="search" 297 v-model="search"
298 label="Search" 298 label="Search"
299 prepend-inner-icon="search" 299 prepend-inner-icon="search"
300 color="primary" 300 color="primary"
301 ></v-text-field> 301 ></v-text-field>
302 <v-icon @click="closeSearch" color="error">close</v-icon> 302 <v-icon @click="closeSearch" color="error">close</v-icon>
303 </v-layout> 303 </v-layout>
304 </v-flex> 304 </v-flex>
305 </v-toolbar> 305 </v-toolbar>
306 <v-data-table 306 <v-data-table
307 :headers="headers" 307 :headers="headers"
308 :items="desserts" 308 :items="desserts"
309 :pagination.sync="pagination" 309 :pagination.sync="pagination"
310 :search="search" 310 :search="search"
311 > 311 >
312 <template slot="items" slot-scope="props"> 312 <template slot="items" slot-scope="props">
313 <tr class="tr"> 313 <tr class="tr">
314 <td class="td td-row">{{ props.index + 1}}</td> 314 <td class="td td-row">{{ props.index + 1}}</td>
315 <td class="td td-row text-xs-center">{{ props.item.title}}</td> 315 <td class="td td-row text-xs-center">{{ props.item.title}}</td>
316 <td class="td td-row text-xs-center">{{ props.item.description}}</td> 316 <td class="td td-row text-xs-center">{{ props.item.description}}</td>
317 <td class="td td-row text-xs-center"> 317 <td class="td td-row text-xs-center">
318 <span> 318 <span>
319 <v-tooltip top> 319 <v-tooltip top>
320 <img 320 <img
321 slot="activator" 321 slot="activator"
322 style="cursor:pointer; width:25px; height:25px; " 322 style="cursor:pointer; width:25px; height:25px; "
323 class="mr-3" 323 class="mr-3"
324 @click="profile(props.item)" 324 @click="profile(props.item)"
325 src="/static/icon/view.png" 325 src="/static/icon/view.png"
326 /> 326 />
327 <span>View</span> 327 <span>View</span>
328 </v-tooltip> 328 </v-tooltip>
329 <v-tooltip top> 329 <v-tooltip top>
330 <img 330 <img
331 slot="activator" 331 slot="activator"
332 style="cursor:pointer; width:20px; height:18px; " 332 style="cursor:pointer; width:20px; height:18px; "
333 class="mr-3" 333 class="mr-3"
334 @click="editItem(props.item)" 334 @click="editItem(props.item)"
335 src="/static/icon/edit.png" 335 src="/static/icon/edit.png"
336 /> 336 />
337 <span>Edit</span> 337 <span>Edit</span>
338 </v-tooltip> 338 </v-tooltip>
339 <v-tooltip top> 339 <v-tooltip top>
340 <img 340 <img
341 slot="activator" 341 slot="activator"
342 style="cursor:pointer; width:20px; height:20px; " 342 style="cursor:pointer; width:20px; height:20px; "
343 class="mr-3" 343 class="mr-3"
344 @click="deleteItem(props.item)" 344 @click="deleteItem(props.item)"
345 src="/static/icon/delete.png" 345 src="/static/icon/delete.png"
346 /> 346 />
347 <span>Delete</span> 347 <span>Delete</span>
348 </v-tooltip> 348 </v-tooltip>
349 </span> 349 </span>
350 </td> 350 </td>
351 </tr> 351 </tr>
352 </template> 352 </template>
353 <v-alert 353 <v-alert
354 slot="no-results" 354 slot="no-results"
355 :value="true" 355 :value="true"
356 color="error" 356 color="error"
357 icon="warning" 357 icon="warning"
358 >Your search for "{{ search }}" found no results.</v-alert> 358 >Your search for "{{ search }}" found no results.</v-alert>
359 </v-data-table> 359 </v-data-table>
360 <!-- ****** ADD Gallery ****** --> 360 <!-- ****** ADD Gallery ****** -->
361 <v-dialog v-model="addGalleryDialog" max-width="600px" v-if="addGalleryDialog" persistent> 361 <v-dialog v-model="addGalleryDialog" max-width="600px" v-if="addGalleryDialog" persistent>
362 <v-card flat class="card-style pa-2" dark> 362 <v-card flat class="card-style pa-2" dark>
363 <v-layout> 363 <v-layout>
364 <v-flex xs12> 364 <v-flex xs12>
365 <label class="title text-xs-center">Add Gallery</label> 365 <label class="title text-xs-center">Add Gallery</label>
366 <v-icon size="24" class="right" @click="closeAddGalleryModel">cancel</v-icon> 366 <v-icon size="24" class="right" @click="closeAddGalleryModel">cancel</v-icon>
367 </v-flex> 367 </v-flex>
368 </v-layout> 368 </v-layout>
369 <v-form ref="form" v-model="valid" lazy-validation> 369 <v-form ref="form" v-model="valid" lazy-validation>
370 <v-container fluid> 370 <v-container fluid>
371 <v-layout> 371 <v-layout>
372 <v-flex xs12 class="text-xs-center text-sm-center text-md-center text-lg-center"> 372 <v-flex xs12 class="text-xs-center text-sm-center text-md-center text-lg-center">
373 <input 373 <input
374 type="file" 374 type="file"
375 style="display: none" 375 style="display: none"
376 ref="image" 376 ref="image"
377 accept="image/*" 377 accept="image/*"
378 multiple 378 multiple
379 @change="onFilePicked" 379 @change="onFilePicked"
380 /> 380 />
381 <v-layout justify-center> 381 <v-layout justify-center>
382 <v-flex v-for="(file,index) in files" :key="index" v-if="files"> 382 <v-flex v-for="(file,index) in files" :key="index" v-if="files">
383 <img :src="file" height="150" width="150" /> 383 <img :src="file" height="150" width="150" />
384 </v-flex> 384 </v-flex>
385 </v-layout> 385 </v-layout>
386 <img src="/static/icon/user.png" v-if="files ==''" height="100" width="100;" /> 386 <img src="/static/icon/user.png" v-if="files ==''" height="100" width="100;" />
387 </v-flex> 387 </v-flex>
388 </v-layout> 388 </v-layout>
389 <v-flex xs12> 389 <v-flex xs12>
390 <v-layout> 390 <v-layout>
391 <v-flex xs4 class="pt-4 subheading"> 391 <v-flex xs4 class="pt-4 subheading">
392 <label class="right">Title:</label> 392 <label class="right">Title:</label>
393 </v-flex> 393 </v-flex>
394 <v-flex xs8 sm8 md7 class="ml-3"> 394 <v-flex xs8 sm8 md7 class="ml-3">
395 <v-text-field 395 <v-text-field
396 v-model="addGallery.title" 396 v-model="addGallery.title"
397 placeholder="fill your Title" 397 placeholder="fill your Title"
398 name="name" 398 name="name"
399 type="text" 399 type="text"
400 :rules="titleRules" 400 :rules="titleRules"
401 required 401 required
402 ></v-text-field> 402 ></v-text-field>
403 </v-flex> 403 </v-flex>
404 </v-layout> 404 </v-layout>
405 </v-flex> 405 </v-flex>
406 <v-flex xs12> 406 <v-flex xs12>
407 <v-layout> 407 <v-layout>
408 <v-flex xs4 class="pt-4 subheading"> 408 <v-flex xs4 class="pt-4 subheading">
409 <label class="right">Description:</label> 409 <label class="right">Description:</label>
410 </v-flex> 410 </v-flex>
411 <v-flex xs8 sm8 md7 class="ml-3"> 411 <v-flex xs8 sm8 md7 class="ml-3">
412 <v-text-field 412 <v-text-field
413 placeholder="fill your Description" 413 placeholder="fill your Description"
414 :rules="descriptionRules" 414 :rules="descriptionRules"
415 v-model="addGallery.description" 415 v-model="addGallery.description"
416 type="text" 416 type="text"
417 name="email" 417 name="email"
418 required 418 required
419 ></v-text-field> 419 ></v-text-field>
420 </v-flex> 420 </v-flex>
421 </v-layout> 421 </v-layout>
422 </v-flex> 422 </v-flex>
423 <v-flex xs12> 423 <v-flex xs12>
424 <v-layout> 424 <v-layout>
425 <v-flex xs4 class="pt-4 subheading"> 425 <v-flex xs4 class="pt-4 subheading">
426 <label class="right hidden-xs-only hidden-sm-only">Select Class:</label> 426 <label class="right hidden-xs-only hidden-sm-only">Select Class:</label>
427 <label class="right hidden-lg-only hidden-md-only hidden-xl-only">Class:</label> 427 <label class="right hidden-lg-only hidden-md-only hidden-xl-only">Class:</label>
428 </v-flex> 428 </v-flex>
429 <v-flex xs8 sm8 md7 class="ml-3"> 429 <v-flex xs8 sm8 md7 class="ml-3">
430 <v-select 430 <v-select
431 :items="addclass" 431 :items="addclass"
432 label="Select Class" 432 label="Select Class"
433 v-model="addGallery.classNum" 433 v-model="addGallery.classNum"
434 item-text="classNum" 434 item-text="classNum"
435 item-value="_id" 435 item-value="_id"
436 name="Select Class" 436 name="Select Class"
437 required 437 required
438 ></v-select> 438 ></v-select>
439 </v-flex> 439 </v-flex>
440 </v-layout> 440 </v-layout>
441 </v-flex> 441 </v-flex>
442 <v-flex xs12> 442 <v-flex xs12>
443 <v-layout> 443 <v-layout>
444 <v-flex xs4 class="pt-4 subheading"> 444 <v-flex xs4 class="pt-4 subheading">
445 <label class="right hidden-xs-only hidden-sm-only">Uplaod Image:</label> 445 <label class="right hidden-xs-only hidden-sm-only">Uplaod Image:</label>
446 <label class="right hidden-lg-only hidden-md-only hidden-xl-only">Uplaod:</label> 446 <label class="right hidden-lg-only hidden-md-only hidden-xl-only">Uplaod:</label>
447 </v-flex> 447 </v-flex>
448 <v-flex xs8 sm8 md7 class="ml-3"> 448 <v-flex xs8 sm8 md7 class="ml-3">
449 <v-text-field 449 <v-text-field
450 label="Select Image" 450 label="Select Image"
451 @click="pickFile" 451 @click="pickFile"
452 v-model="imageName" 452 v-model="imageName"
453 append-icon="attach_file" 453 append-icon="attach_file"
454 multiple 454 multiple
455 ></v-text-field> 455 ></v-text-field>
456 </v-flex> 456 </v-flex>
457 </v-layout> 457 </v-layout>
458 </v-flex> 458 </v-flex>
459 <v-layout> 459 <v-layout>
460 <v-flex xs12> 460 <v-flex xs12>
461 <div v-for="(youTubeLink,index) in finds" :key="index"> 461 <div v-for="(youTubeLink,index) in finds" :key="index">
462 <v-layout> 462 <v-layout>
463 <v-flex xs4 class="pt-4 subheading"> 463 <v-flex xs4 class="pt-4 subheading">
464 <label class="right">You Tube Url:</label> 464 <label class="right">You Tube Url:</label>
465 </v-flex> 465 </v-flex>
466 <v-flex xs8 sm8 md6 class="ml-3"> 466 <v-flex xs8 sm8 md6 class="ml-3">
467 <v-text-field 467 <v-text-field
468 placeholder="fill your youtube link" 468 placeholder="fill your youtube link"
469 v-model="youTubeLink.value" 469 v-model="youTubeLink.value"
470 type="text" 470 type="text"
471 name="link" 471 name="link"
472 required 472 required
473 ></v-text-field> 473 ></v-text-field>
474 </v-flex> 474 </v-flex>
475 <v-flex xs2 class="pt-4"> 475 <v-flex xs2 class="pt-4">
476 <v-icon @click="deleteFind(index)" v-if="index !=0 ">cancel</v-icon> 476 <v-icon @click="deleteFind(index)" v-if="index !=0 ">cancel</v-icon>
477 <v-icon @click="addFind">add_circle</v-icon> 477 <v-icon @click="addFind">add_circle</v-icon>
478 </v-flex> 478 </v-flex>
479 </v-layout> 479 </v-layout>
480 </div> 480 </div>
481 </v-flex> 481 </v-flex>
482 </v-layout> 482 </v-layout>
483 <v-layout> 483 <v-layout>
484 <v-flex xs12 sm12> 484 <v-flex xs12 sm12>
485 <v-layout class="right"> 485 <v-layout class="right">
486 <v-btn @click="clear" round dark class="clear-button">Clear</v-btn> 486 <v-btn @click="clear" round dark class="clear-button">Clear</v-btn>
487 <v-btn @click="submit" round dark :loading="loading" class="add-button">Add</v-btn> 487 <v-btn @click="submit" round dark :loading="loading" class="add-button">Add</v-btn>
488 </v-layout> 488 </v-layout>
489 </v-flex> 489 </v-flex>
490 </v-layout> 490 </v-layout>
491 </v-container> 491 </v-container>
492 </v-form> 492 </v-form>
493 </v-card> 493 </v-card>
494 </v-dialog> 494 </v-dialog>
495 <v-snackbar 495 <v-snackbar
496 :timeout="timeout" 496 :timeout="timeout"
497 :top="y === 'top'" 497 :top="y === 'top'"
498 :right="x === 'right'" 498 :right="x === 'right'"
499 :vertical="mode === 'vertical'" 499 :vertical="mode === 'vertical'"
500 v-model="snackbar" 500 v-model="snackbar"
501 :color="color" 501 :color="color"
502 >{{ text }}</v-snackbar> 502 >{{ text }}</v-snackbar>
503 <div class="loader" v-if="showLoader"> 503 <div class="loader" v-if="showLoader">
504 <v-progress-circular indeterminate color="white"></v-progress-circular> 504 <v-progress-circular indeterminate color="white"></v-progress-circular>
505 </div> 505 </div>
506 </v-container> 506 </v-container>
507 </template> 507 </template>
508 508
509 <script> 509 <script>
510 import http from "@/Services/http.js"; 510 import http from "@/Services/http.js";
511 511
512 export default { 512 export default {
513 data: () => ({ 513 data: () => ({
514 snackbar: false, 514 snackbar: false,
515 y: "top", 515 y: "top",
516 x: "right", 516 x: "right",
517 mode: "", 517 mode: "",
518 timeout: 3000, 518 timeout: 3000,
519 text: "", 519 text: "",
520 loading: false, 520 loading: false,
521 color: "", 521 color: "",
522 date: null, 522 date: null,
523 search: "", 523 search: "",
524 show: true, 524 show: true,
525 addGalleryDialog: false, 525 addGalleryDialog: false,
526 showSearch: false, 526 showSearch: false,
527 showLoader: false, 527 showLoader: false,
528 editGalleryDialog: false, 528 editGalleryDialog: false,
529 viewProfileGallery: false, 529 viewProfileGallery: false,
530 valid: true, 530 valid: true,
531 editGalleryLoading: false, 531 editGalleryLoading: false,
532 addclass: [], 532 addclass: [],
533 addSection: [], 533 addSection: [],
534 finds: [{ value: "" }], 534 finds: [{ value: "" }],
535 updates: [{ youTubeLink: "" }], 535 updates: [{ youTubeLink: "" }],
536 youTubeLink: {}, 536 youTubeLink: {},
537 addGallery: { 537 addGallery: {
538 youTubeLinkUrl: [], 538 youTubeLinkUrl: [],
539 }, 539 },
540 pagination: { 540 pagination: {
541 rowsPerPage: 10, 541 rowsPerPage: 10,
542 }, 542 },
543 imageName: "", 543 imageName: "",
544 imageUrl: "", 544 imageUrl: "",
545 imageFile: "", 545 imageFile: "",
546 image: [], 546 image: [],
547 upload: "", 547 upload: "",
548 editImageName: "", 548 editImageName: "",
549 editFiles: [], 549 editFiles: [],
550 files: [], 550 files: [],
551 token: "", 551 token: "",
552 titleRules: [(v) => !!v || " Tilte is required"], 552 titleRules: [(v) => !!v || " Tilte is required"],
553 descriptionRules: [(v) => !!v || " Description is required"], 553 descriptionRules: [(v) => !!v || " Description is required"],
554 headers: [ 554 headers: [
555 { 555 {
556 align: "", 556 align: "",
557 text: "No", 557 text: "No",
558 sortable: false, 558 sortable: false,
559 value: "index", 559 value: "index",
560 }, 560 },
561 { text: "Title", value: "title", sortable: false, align: "center" }, 561 { text: "Title", value: "title", sortable: false, align: "center" },
562 { 562 {
563 text: "Description", 563 text: "Description",
564 value: "description", 564 value: "description",
565 sortable: false, 565 sortable: false,
566 align: "center", 566 align: "center",
567 }, 567 },
568 { text: "Action", value: "", sortable: false, align: "center" }, 568 { text: "Action", value: "", sortable: false, align: "center" },
569 ], 569 ],
570 desserts: [], 570 desserts: [],
571 editedIndex: -1, 571 editedIndex: -1,
572 editedItem: {}, 572 editedItem: {},
573 index: "", 573 index: "",
574 }), 574 }),
575 watch: { 575 watch: {
576 addGalleryDialog: function (val) { 576 addGalleryDialog: function (val) {
577 if (!val) { 577 if (!val) {
578 this.addGallery = []; 578 this.addGallery = [];
579 this.imageName = ""; 579 this.imageName = "";
580 this.youTubeLinkUrl = []; 580 this.youTubeLinkUrl = [];
581 this.youTubeLink = {}; 581 this.youTubeLink = {};
582 this.index = ""; 582 this.index = "";
583 this.files = []; 583 this.files = [];
584 } 584 }
585 }, 585 },
586 }, 586 },
587 methods: { 587 methods: {
588 pickFile() { 588 pickFile() {
589 this.$refs.image.click(); 589 this.$refs.image.click();
590 }, 590 },
591 editPickFile() { 591 editPickFile() {
592 this.$refs.editImage.click(); 592 this.$refs.editImage.click();
593 }, 593 },
594 onFilePicked(e) { 594 onFilePicked(e) {
595 const files = e.target.files; 595 const files = e.target.files;
596 /** fetch Image Name **/ 596 /** fetch Image Name **/
597 if (files[0] !== undefined) { 597 if (files[0] !== undefined) {
598 this.imageName = files[0].name; 598 this.imageName = files[0].name;
599 if (this.imageName.lastIndexOf(".") <= 0) { 599 if (this.imageName.lastIndexOf(".") <= 0) {
600 return; 600 return;
601 } 601 }
602 this.files = []; 602 this.files = [];
603 // console.log("files", this.files); 603 // console.log("files", this.files);
604 /** Select many image and showing many image add to Gallery card **/ 604 /** Select many image and showing many image add to Gallery card **/
605 const test = Array.from(files).forEach((file, idx) => { 605 const test = Array.from(files).forEach((file, idx) => {
606 const fr = new FileReader(); 606 const fr = new FileReader();
607 const getResult = new Promise((resolve) => { 607 const getResult = new Promise((resolve) => {
608 fr.onload = (e) => { 608 fr.onload = (e) => {
609 this.files.push( 609 this.files.push(
610 // id: idx, 610 // id: idx,
611 e.target.result 611 e.target.result
612 ); 612 );
613 }; 613 };
614 // console.log("uploadImage=======>", this.files); 614 // console.log("uploadImage=======>", this.files);
615 }); 615 });
616 fr.readAsDataURL(file); 616 fr.readAsDataURL(file);
617 return getResult.then((file) => { 617 return getResult.then((file) => {
618 return file; 618 return file;
619 }); 619 });
620 }); 620 });
621 const fr = new FileReader(); 621 const fr = new FileReader();
622 fr.readAsDataURL(files[0]); 622 fr.readAsDataURL(files[0]);
623 fr.addEventListener("load", () => { 623 fr.addEventListener("load", () => {
624 this.imageFile = files; // this is an image file that can be sent to server... 624 this.imageFile = files; // this is an image file that can be sent to server...
625 }); 625 });
626 } else { 626 } else {
627 this.imageName = ""; 627 this.imageName = "";
628 this.imageFile = ""; 628 this.imageFile = "";
629 this.imageUrl = ""; 629 this.imageUrl = "";
630 } 630 }
631 }, 631 },
632 editFilePicked(e) { 632 editFilePicked(e) {
633 const files = e.target.files; 633 const files = e.target.files;
634 /** fetch Image Name **/ 634 /** fetch Image Name **/
635 if (files[0] !== undefined) { 635 if (files[0] !== undefined) {
636 this.editImageName = files[0].name; 636 this.editImageName = files[0].name;
637 if (this.editImageName.lastIndexOf(".") <= 0) { 637 if (this.editImageName.lastIndexOf(".") <= 0) {
638 return; 638 return;
639 } 639 }
640 /** Select many image and showing many image add to Gallery card **/ 640 /** Select many image and showing many image add to Gallery card **/
641 const test = Array.from(files).forEach((file, idx) => { 641 const test = Array.from(files).forEach((file, idx) => {
642 const fr = new FileReader(); 642 const fr = new FileReader();
643 const getResult = new Promise((resolve) => { 643 const getResult = new Promise((resolve) => {
644 fr.onload = (e) => { 644 fr.onload = (e) => {
645 this.editFiles.push( 645 this.editFiles.push(
646 // id: idx, 646 // id: idx,
647 e.target.result 647 e.target.result
648 ); 648 );
649 }; 649 };
650 // console.log("uploadeditFilesImage=======>", this.editFiles); 650 // console.log("uploadeditFilesImage=======>", this.editFiles);
651 }); 651 });
652 fr.readAsDataURL(file); 652 fr.readAsDataURL(file);
653 return getResult.then((file) => { 653 return getResult.then((file) => {
654 return file; 654 return file;
655 }); 655 });
656 }); 656 });
657 const fr = new FileReader(); 657 const fr = new FileReader();
658 fr.readAsDataURL(files[0]); 658 fr.readAsDataURL(files[0]);
659 // fr.addEventListener("load", () => { 659 // fr.addEventListener("load", () => {
660 // this.imageFile = files; // this is an image file that can be sent to server... 660 // this.imageFile = files; // this is an image file that can be sent to server...
661 // }); 661 // });
662 } else { 662 } else {
663 this.editImageName = ""; 663 this.editImageName = "";
664 this.editFiles = []; 664 this.editFiles = [];
665 } 665 }
666 }, 666 },
667 getGalleryList() { 667 getGalleryList() {
668 this.showLoader = true; 668 this.showLoader = true;
669 http() 669 http()
670 .get("/getGalleryList", { 670 .get("/getGalleryList", {
671 headers: { Authorization: "Bearer " + this.token }, 671 headers: { Authorization: "Bearer " + this.token },
672 }) 672 })
673 .then((response) => { 673 .then((response) => {
674 this.desserts = response.data.data; 674 this.desserts = response.data.data;
675 this.showLoader = false; 675 this.showLoader = false;
676 }) 676 })
677 .catch((error) => { 677 .catch((error) => {
678 // console.log("err====>", err); 678 // console.log("err====>", err);
679 this.showLoader = false; 679 this.showLoader = false;
680 if (error.response.status === 401) { 680 if (error.response.status === 401) {
681 this.$router.replace({ path: "/" }); 681 this.$router.replace({ path: "/" });
682 this.$store.dispatch("setToken", null); 682 this.$store.dispatch("setToken", null);
683 this.$store.dispatch("Id", null); 683 this.$store.dispatch("Id", null);
684 } 684 }
685 }); 685 });
686 }, 686 },
687 editItem(item) { 687 editItem(item) {
688 this.files = []; 688 this.files = [];
689 this.editedIndex = this.desserts.indexOf(item); 689 this.editedIndex = this.desserts.indexOf(item);
690 this.editedItem = Object.assign({}, item); 690 this.editedItem = Object.assign({}, item);
691 this.editGalleryDialog = true; 691 this.editGalleryDialog = true;
692 }, 692 },
693 profile(item) { 693 profile(item) {
694 this.editedIndex = this.desserts.indexOf(item); 694 this.editedIndex = this.desserts.indexOf(item);
695 this.editedItem = Object.assign({}, item); 695 this.editedItem = Object.assign({}, item);
696 this.viewProfileGallery = true; 696 this.viewProfileGallery = true;
697 }, 697 },
698 deleteItem(item) { 698 deleteItem(item) {
699 let deleteGallery = { 699 let deleteGallery = {
700 galleryId: item._id, 700 galleryId: item._id,
701 }; 701 };
702 http() 702 http()
703 .delete( 703 .delete(
704 "/deleteGallery", 704 "/deleteGallery",
705 confirm("Are you sure you want to delete this?") && { 705 confirm("Are you sure you want to delete this?") && {
706 params: deleteGallery, 706 params: deleteGallery,
707 headers: { 707 headers: {
708 Authorization: "Bearer " + this.token, 708 Authorization: "Bearer " + this.token,
709 }, 709 },
710 } 710 }
711 ) 711 )
712 .then((response) => { 712 .then((response) => {
713 this.snackbar = true; 713 this.snackbar = true;
714 this.text = "Successfully delete Existing Gallery"; 714 this.text = "Successfully delete Existing Gallery";
715 this.color = "green"; 715 this.color = "green";
716 this.getGalleryList(); 716 this.getGalleryList();
717 }) 717 })
718 .catch((error) => { 718 .catch((error) => {
719 // console.log(error); 719 // console.log(error);
720 this.snackbar = true; 720 this.snackbar = true;
721 this.text = error.response.data.message; 721 this.text = error.response.data.message;
722 this.color = "error"; 722 this.color = "error";
723 }); 723 });
724 }, 724 },
725 deleteImage(imageId, id) { 725 deleteImage(imageId, id) {
726 let deleteImages = { 726 let deleteImages = {
727 galleryId: id, 727 galleryId: id,
728 imageId: imageId, 728 imageId: imageId,
729 }; 729 };
730 http() 730 http()
731 .put("/deleteImage", deleteImages) 731 .put("/deleteImage", deleteImages)
732 .then((response) => { 732 .then((response) => {
733 this.snackbar = true; 733 this.snackbar = true;
734 this.text = response.data.message; 734 this.text = response.data.message;
735 this.color = "green"; 735 this.color = "green";
736 this.getGalleryList(); 736 this.getGalleryList();
737 this.close(); 737 this.close();
738 }) 738 })
739 .catch((error) => { 739 .catch((error) => {
740 this.snackbar = true; 740 this.snackbar = true;
741 this.text = error.response.data.message; 741 this.text = error.response.data.message;
742 this.color = "error"; 742 this.color = "error";
743 }); 743 });
744 }, 744 },
745 close() { 745 close() {
746 this.editGalleryDialog = false; 746 this.editGalleryDialog = false;
747 }, 747 },
748 closeProfileGallery() { 748 closeProfileGallery() {
749 this.viewProfileGallery = false; 749 this.viewProfileGallery = false;
750 }, 750 },
751 closeAddGalleryModel() { 751 closeAddGalleryModel() {
752 this.addGalleryDialog = false; 752 this.addGalleryDialog = false;
753 this.addGallery = []; 753 this.addGallery = [];
754 this.imageName = ""; 754 this.imageName = "";
755 this.youTubeLinkUrl = []; 755 this.youTubeLinkUrl = [];
756 this.youTubeLink = {}; 756 this.youTubeLink = {};
757 this.index = ""; 757 this.index = "";
758 this.files = []; 758 this.files = [];
759 }, 759 },
760 submit() { 760 submit() {
761 for (let i = 0; i < this.finds.length; i++) { 761 for (let i = 0; i < this.finds.length; i++) {
762 this.addGallery.youTubeLinkUrl.push(this.finds[i].value); 762 this.addGallery.youTubeLinkUrl.push(this.finds[i].value);
763 } 763 }
764 if (this.$refs.form.validate()) { 764 if (this.$refs.form.validate()) {
765 if (this.files) { 765 if (this.files) {
766 var ary = []; 766 var ary = [];
767 var imageData = []; 767 var imageData = [];
768 ary = this.files; 768 ary = this.files;
769 for (let i = 0; i < ary.length; i++) { 769 for (let i = 0; i < ary.length; i++) {
770 const [baseUrl, imageUrl] = ary[i].split(/,/); 770 const [baseUrl, imageUrl] = ary[i].split(/,/);
771 imageData.push(imageUrl); 771 imageData.push(imageUrl);
772 this.addGallery.upload = imageData; 772 this.addGallery.upload = imageData;
773 } 773 }
774 } 774 }
775 if (this.addGallery.youTubeLinkUrl == "") { 775 if (this.addGallery.youTubeLinkUrl == "") {
776 var galleryData = { 776 var galleryData = {
777 classId: this.addGallery.classNum, 777 classId: this.addGallery.classNum,
778 title: this.addGallery.title, 778 title: this.addGallery.title,
779 description: this.addGallery.description, 779 description: this.addGallery.description,
780 upload: this.addGallery.upload, 780 upload: this.addGallery.upload,
781 }; 781 };
782 this.loading = true; 782 this.loading = true;
783 http() 783 http()
784 .post("/createGallery", galleryData) 784 .post("/createGallery", galleryData)
785 .then((response) => { 785 .then((response) => {
786 this.getGalleryList(); 786 this.getGalleryList();
787 this.addGalleryDialog = false; 787 this.addGalleryDialog = false;
788 this.loading = false; 788 this.loading = false;
789 this.snackbar = true; 789 this.snackbar = true;
790 this.text = response.data.message; 790 this.text = response.data.message;
791 this.color = "green"; 791 this.color = "green";
792 this.clear(); 792 this.clear();
793 this.files = ""; 793 this.files = "";
794 }) 794 })
795 .catch((error) => { 795 .catch((error) => {
796 this.snackbar = true; 796 this.snackbar = true;
797 this.text = error.response.data.message; 797 this.text = error.response.data.message;
798 this.color = "error"; 798 this.color = "error";
799 this.loading = false; 799 this.loading = false;
800 }); 800 });
801 } else if (this.addGallery.youTubeLinkUrl) { 801 } else if (this.addGallery.youTubeLinkUrl) {
802 this.loading = true; 802 this.loading = true;
803 http() 803 http()
804 .post("/createGallery", this.addGallery) 804 .post("/createGallery", this.addGallery)
805 .then((response) => { 805 .then((response) => {
806 this.getGalleryList(); 806 this.getGalleryList();
807 this.addGalleryDialog = false; 807 this.addGalleryDialog = false;
808 this.files = "nmn"; 808 this.files = "nmn";
809 this.loading = false; 809 this.loading = false;
810 this.snackbar = true; 810 this.snackbar = true;
811 this.color = "green"; 811 this.color = "green";
812 this.text = response.data.message; 812 this.text = response.data.message;
813 this.clear(); 813 this.clear();
814 this.removeAddFind(); 814 this.removeAddFind();
815 this.files = ""; 815 this.files = "";
816 }) 816 })
817 .catch((error) => { 817 .catch((error) => {
818 this.snackbar = true; 818 this.snackbar = true;
819 this.text = error.response.data.message; 819 this.text = error.response.data.message;
820 this.loading = false; 820 this.loading = false;
821 this.color = "error"; 821 this.color = "error";
822 }); 822 });
823 } 823 }
824 } 824 }
825 }, 825 },
826 clear() { 826 clear() {
827 this.$refs.form.reset(); 827 this.$refs.form.reset();
828 this.files = []; 828 this.files = [];
829 }, 829 },
830 save() { 830 save() {
831 this.editedItem.gelleryId = this.editedItem._id; 831 this.editedItem.gelleryId = this.editedItem._id;
832 var linkUrl = []; 832 var linkUrl = [];
833 for (let i = 0; i < this.updates.length; i++) { 833 for (let i = 0; i < this.updates.length; i++) {
834 linkUrl.push(this.updates[i].youTubeLink); 834 linkUrl.push(this.updates[i].youTubeLink);
835 } 835 }
836 if (this.editFiles) { 836 if (this.editFiles) {
837 var ary = []; 837 var ary = [];
838 var imageData = []; 838 var imageData = [];
839 ary = this.editFiles; 839 ary = this.editFiles;
840 for (let i = 0; i < ary.length; i++) { 840 for (let i = 0; i < ary.length; i++) {
841 const [baseUrl, imageUrl] = ary[i].split(/,/); 841 const [baseUrl, imageUrl] = ary[i].split(/,/);
842 imageData.push(imageUrl); 842 imageData.push(imageUrl);
843 this.editedItem.editFiles = imageData; 843 this.editedItem.editFiles = imageData;
844 } 844 }
845 } 845 }
846 if (linkUrl != "") { 846 if (linkUrl != "") {
847 var updateData = { 847 var updateData = {
848 galleryId: this.editedItem._id, 848 galleryId: this.editedItem._id,
849 description: this.editedItem.description, 849 description: this.editedItem.description,
850 classId: this.editedItem.classNum, 850 classId: this.editedItem.classNum,
851 uploadImage: this.editedItem.editFiles, 851 uploadImage: this.editedItem.editFiles,
852 title: this.editedItem.title, 852 title: this.editedItem.title,
853 updateYouTubeLinkUrl: linkUrl, 853 updateYouTubeLinkUrl: linkUrl,
854 }; 854 };
855 } else if (linkUrl == "") { 855 } else if (linkUrl == "") {
856 var updateData = { 856 var updateData = {
857 galleryId: this.editedItem._id, 857 galleryId: this.editedItem._id,
858 description: this.editedItem.description, 858 description: this.editedItem.description,
859 classId: this.editedItem.classNum, 859 classId: this.editedItem.classNum,
860 uploadImage: this.editedItem.editFiles, 860 uploadImage: this.editedItem.editFiles,
861 title: this.editedItem.title, 861 title: this.editedItem.title,
862 }; 862 };
863 } 863 }
864 this.editGalleryLoading = true; 864 this.editGalleryLoading = true;
865 http() 865 http()
866 .put("/updateGallery", updateData) 866 .put("/updateGallery", updateData)
867 .then((response) => { 867 .then((response) => {
868 this.getGalleryList(); 868 this.getGalleryList();
869 this.close(); 869 this.close();
870 this.snackbar = true; 870 this.snackbar = true;
871 this.text = response.data.message; 871 this.text = response.data.message;
872 this.color = "green"; 872 this.color = "green";
873 this.editGalleryLoading = false; 873 this.editGalleryLoading = false;
874 this.editImageName = ""; 874 this.editImageName = "";
875 this.editFiles = []; 875 this.editFiles = [];
876 }) 876 })
877 .catch((error) => { 877 .catch((error) => {
878 this.editGalleryLoading = false; 878 this.editGalleryLoading = false;
879 this.snackbar = true; 879 this.snackbar = true;
880 this.text = error.response.data.message; 880 this.text = error.response.data.message;
881 this.color = "error"; 881 this.color = "error";
882 }); 882 });
883 }, 883 },
884 getAllClasses() { 884 getAllClasses() {
885 http() 885 http()
886 .get("/getClassesList", { 886 .get("/getClassesList", {
887 headers: { Authorization: "Bearer " + this.token }, 887 headers: { Authorization: "Bearer " + this.token },
888 }) 888 })
889 .then((response) => { 889 .then((response) => {
890 this.addclass = response.data.data; 890 this.addclass = response.data.data;
891 }) 891 })
892 .catch((err) => { 892 .catch((err) => {
893 // console.log("err====>", err); 893 // console.log("err====>", err);
894 }); 894 });
895 }, 895 },
896 removeAddFind: function () { 896 removeAddFind: function () {
897 this.finds = [{ value: "" }]; 897 this.finds = [{ value: "" }];
898 }, 898 },
899 addFind: function () { 899 addFind: function () {
900 this.finds.push({ value: "" }); 900 this.finds.push({ value: "" });
901 }, 901 },
902 update: function () { 902 update: function () {
903 this.updates.push({ youTubeLink: "" }); 903 this.updates.push({ youTubeLink: "" });
904 }, 904 },
905 deleteFind: function (index) { 905 deleteFind: function (index) {
906 this.finds.splice(index, 1); 906 this.finds.splice(index, 1);
907 if (index === 0) this.addFind(); 907 if (index === 0) this.addFind();
908 }, 908 },
909 deleteUpdate: function (index) { 909 deleteUpdate: function (index) {
910 this.updates.splice(index, 1); 910 this.updates.splice(index, 1);
911 if (index === 0) this.update(); 911 if (index === 0) this.update();
912 }, 912 },
913 deleteUrl: function (index, youTubelinkId, id) { 913 deleteUrl: function (index, youTubelinkId, id) {
914 this.editedItem.youTubeLinkUrl.splice(index, 1); 914 this.editedItem.youTubeLinkUrl.splice(index, 1);
915 if (index === 0) this.update(); 915 if (index === 0) this.update();
916 let deleteYouTubeUrl = { 916 let deleteYouTubeUrl = {
917 galleryId: id, 917 galleryId: id,
918 youTubeId: youTubelinkId, 918 youTubeId: youTubelinkId,
919 }; 919 };
920 http() 920 http()
921 .put("/deleteYoutubeLink", deleteYouTubeUrl) 921 .put("/deleteYoutubeLink", deleteYouTubeUrl)
922 .then((response) => { 922 .then((response) => {
923 this.snackbar = true; 923 this.snackbar = true;
924 this.text = response.data.message; 924 this.text = response.data.message;
925 this.color = "green"; 925 this.color = "green";
926 this.getGalleryList(); 926 this.getGalleryList();
927 this.close(); 927 this.close();
928 }) 928 })
929 .catch((error) => { 929 .catch((error) => {
930 this.snackbar = true; 930 this.snackbar = true;
931 this.text = error.response.data.message; 931 this.text = error.response.data.message;
932 this.color = "error"; 932 this.color = "error";
933 }); 933 });
934 }, 934 },
935 displaySearch() { 935 displaySearch() {
936 this.show = false; 936 this.show = false;
937 this.showSearch = true; 937 this.showSearch = true;
938 }, 938 },
939 closeSearch() { 939 closeSearch() {
940 this.showSearch = false; 940 this.showSearch = false;
941 this.show = true; 941 this.show = true;
942 this.search = ""; 942 this.search = "";
943 }, 943 },
944 }, 944 },
945 mounted() { 945 mounted() {
946 this.token = this.$store.state.token; 946 this.token = this.$store.state.token;
947 this.getAllClasses(); 947 this.getAllClasses();
948 this.getGalleryList(); 948 this.getGalleryList();
949 }, 949 },
950 }; 950 };
951 </script> 951 </script>
src/pages/Library/books.vue
Diff comments   View file @8b7976c
1 <template> 1 <template>
2 <v-container fluid class="body-color"> 2 <v-container fluid class="body-color">
3 <!-- ****** Edit Member ****** --> 3 <!-- ****** Edit Member ****** -->
4 <v-dialog v-model="editBookDialog" max-width="500px" persistent> 4 <v-dialog v-model="editBookDialog" max-width="500px" persistent>
5 <v-card flat class="card-style pa-2" dark> 5 <v-card flat class="card-style pa-2" dark>
6 <v-layout> 6 <v-layout>
7 <v-flex xs12> 7 <v-flex xs12>
8 <label class="title text-xs-center">Edit Book</label> 8 <label class="title text-xs-center">Edit Book</label>
9 <v-icon size="24" class="right" @click="editBookDialog = false">cancel</v-icon> 9 <v-icon size="24" class="right" @click="editBookDialog = false">cancel</v-icon>
10 </v-flex> 10 </v-flex>
11 </v-layout> 11 </v-layout>
12 <v-card-text> 12 <v-card-text>
13 <v-container> 13 <v-container>
14 <v-layout wrap justify-center> 14 <v-layout wrap justify-center>
15 <v-flex xs12> 15 <v-flex xs12>
16 <v-form> 16 <v-form>
17 <v-layout> 17 <v-layout>
18 <v-flex xs4 class="pt-4 subheading"> 18 <v-flex xs4 class="pt-4 subheading">
19 <label class="right pr-3">Name:</label> 19 <label class="right pr-3">Name:</label>
20 </v-flex> 20 </v-flex>
21 <v-flex xs8> 21 <v-flex xs8>
22 <v-text-field v-model="editedItem.name" placeholder="fill your Name"></v-text-field> 22 <v-text-field v-model="editedItem.name" placeholder="fill your Name"></v-text-field>
23 </v-flex> 23 </v-flex>
24 </v-layout> 24 </v-layout>
25 <v-layout> 25 <v-layout>
26 <v-flex xs4 class="pt-4 subheading"> 26 <v-flex xs4 class="pt-4 subheading">
27 <label class="right pr-3">Author:</label> 27 <label class="right pr-3">Author:</label>
28 </v-flex> 28 </v-flex>
29 <v-flex xs8> 29 <v-flex xs8>
30 <v-text-field v-model="editedItem.author" placeholder="fill your Author Name"></v-text-field> 30 <v-text-field v-model="editedItem.author" placeholder="fill your Author Name"></v-text-field>
31 </v-flex> 31 </v-flex>
32 </v-layout> 32 </v-layout>
33 <v-layout> 33 <v-layout>
34 <v-flex xs4 class="pt-4 subheading"> 34 <v-flex xs4 class="pt-4 subheading">
35 <label class="right pr-3">Subject Code:</label> 35 <label class="right pr-3">Subject Code:</label>
36 </v-flex> 36 </v-flex>
37 <v-flex xs8> 37 <v-flex xs8>
38 <v-text-field 38 <v-text-field
39 v-model="editedItem.subjectCode" 39 v-model="editedItem.subjectCode"
40 placeholder="fill your Subject Code" 40 placeholder="fill your Subject Code"
41 ></v-text-field> 41 ></v-text-field>
42 </v-flex> 42 </v-flex>
43 </v-layout> 43 </v-layout>
44 <v-layout> 44 <v-layout>
45 <v-flex xs4 class="pt-4 subheading"> 45 <v-flex xs4 class="pt-4 subheading">
46 <label class="right pr-3">Price:</label> 46 <label class="right pr-3">Price:</label>
47 </v-flex> 47 </v-flex>
48 <v-flex xs8> 48 <v-flex xs8>
49 <v-text-field 49 <v-text-field
50 v-model="editedItem.price" 50 v-model="editedItem.price"
51 placeholder="fill your Subject Code" 51 placeholder="fill your Subject Code"
52 ></v-text-field> 52 ></v-text-field>
53 </v-flex> 53 </v-flex>
54 </v-layout> 54 </v-layout>
55 <v-layout> 55 <v-layout>
56 <v-flex xs4 class="pt-4 subheading"> 56 <v-flex xs4 class="pt-4 subheading">
57 <label class="right pr-3">Quantity:</label> 57 <label class="right pr-3">Quantity:</label>
58 </v-flex> 58 </v-flex>
59 <v-flex xs8> 59 <v-flex xs8>
60 <v-text-field 60 <v-text-field
61 v-model="editedItem.quantity" 61 v-model="editedItem.quantity"
62 type="number" 62 type="number"
63 placeholder="fill your Quantity" 63 placeholder="fill your Quantity"
64 ></v-text-field> 64 ></v-text-field>
65 </v-flex> 65 </v-flex>
66 </v-layout> 66 </v-layout>
67 <v-layout> 67 <v-layout>
68 <v-flex xs4 class="pt-4 subheading"> 68 <v-flex xs4 class="pt-4 subheading">
69 <label class="right pr-3">Rack No:</label> 69 <label class="right pr-3">Rack No:</label>
70 </v-flex> 70 </v-flex>
71 <v-flex xs8> 71 <v-flex xs8>
72 <v-text-field v-model="editedItem.rackNo" placeholder="fill your Rack No"></v-text-field> 72 <v-text-field v-model="editedItem.rackNo" placeholder="fill your Rack No"></v-text-field>
73 </v-flex> 73 </v-flex>
74 </v-layout> 74 </v-layout>
75 <v-card-actions> 75 <v-card-actions>
76 <v-spacer></v-spacer> 76 <v-spacer></v-spacer>
77 <v-btn round dark @click="save" class="add-button">Save</v-btn> 77 <v-btn round dark @click="save" class="add-button">Save</v-btn>
78 <v-spacer></v-spacer> 78 <v-spacer></v-spacer>
79 </v-card-actions> 79 </v-card-actions>
80 </v-form> 80 </v-form>
81 </v-flex> 81 </v-flex>
82 </v-layout> 82 </v-layout>
83 </v-container> 83 </v-container>
84 </v-card-text> 84 </v-card-text>
85 </v-card> 85 </v-card>
86 </v-dialog> 86 </v-dialog>
87 87
88 <!-- ****** PROFILE VIEW BOOKS DATA ****** --> 88 <!-- ****** PROFILE VIEW BOOKS DATA ****** -->
89 89
90 <v-dialog v-model="viewBookDialog" max-width="500px" persistent> 90 <v-dialog v-model="viewBookDialog" max-width="500px" persistent>
91 <v-card flat class="card-style pa-3" dark> 91 <v-card flat class="card-style pa-3" dark>
92 <v-layout> 92 <v-layout>
93 <v-flex xs12> 93 <v-flex xs12>
94 <label class="title text-xs-center">View Book</label> 94 <label class="title text-xs-center">View Book</label>
95 <v-icon size="24" class="right" @click="viewBookDialog = false">cancel</v-icon> 95 <v-icon size="24" class="right" @click="viewBookDialog = false">cancel</v-icon>
96 </v-flex> 96 </v-flex>
97 </v-layout> 97 </v-layout>
98 <v-card-text> 98 <v-card-text>
99 <v-container grid-list-md> 99 <v-container grid-list-md>
100 <v-layout wrap> 100 <v-layout wrap>
101 <v-flex> 101 <v-flex>
102 <v-layout> 102 <v-layout>
103 <v-flex xs5 sm6> 103 <v-flex xs5 sm6>
104 <h5 class="right my-1"> 104 <h5 class="right my-1">
105 <b>Name :</b> 105 <b>Name :</b>
106 </h5> 106 </h5>
107 </v-flex> 107 </v-flex>
108 <v-flex sm6 xs8> 108 <v-flex sm6 xs8>
109 <h5 class="my-1">{{ editedItem.name }}</h5> 109 <h5 class="my-1">{{ editedItem.name }}</h5>
110 </v-flex> 110 </v-flex>
111 </v-layout> 111 </v-layout>
112 <v-layout> 112 <v-layout>
113 <v-flex xs5 sm6> 113 <v-flex xs5 sm6>
114 <h5 class="right my-1"> 114 <h5 class="right my-1">
115 <b>Author :</b> 115 <b>Author :</b>
116 </h5> 116 </h5>
117 </v-flex> 117 </v-flex>
118 <v-flex sm6 xs8> 118 <v-flex sm6 xs8>
119 <h5 class="my-1">{{ editedItem.author }}</h5> 119 <h5 class="my-1">{{ editedItem.author }}</h5>
120 </v-flex> 120 </v-flex>
121 </v-layout> 121 </v-layout>
122 <v-layout> 122 <v-layout>
123 <v-flex xs5 sm6> 123 <v-flex xs5 sm6>
124 <h5 class="right my-1"> 124 <h5 class="right my-1">
125 <b>Subject Code :</b> 125 <b>Subject Code :</b>
126 </h5> 126 </h5>
127 </v-flex> 127 </v-flex>
128 <v-flex sm6 xs8> 128 <v-flex sm6 xs8>
129 <h5 class="my-1">{{ editedItem.subjectCode }}</h5> 129 <h5 class="my-1">{{ editedItem.subjectCode }}</h5>
130 </v-flex> 130 </v-flex>
131 </v-layout> 131 </v-layout>
132 <v-layout> 132 <v-layout>
133 <v-flex xs5 sm6> 133 <v-flex xs5 sm6>
134 <h5 class="right my-1"> 134 <h5 class="right my-1">
135 <b>Price :</b> 135 <b>Price :</b>
136 </h5> 136 </h5>
137 </v-flex> 137 </v-flex>
138 <v-flex sm6 xs8> 138 <v-flex sm6 xs8>
139 <h5 class="my-1">{{ editedItem.price }}</h5> 139 <h5 class="my-1">{{ editedItem.price }}</h5>
140 </v-flex> 140 </v-flex>
141 </v-layout> 141 </v-layout>
142 <v-layout> 142 <v-layout>
143 <v-flex xs5 sm6> 143 <v-flex xs5 sm6>
144 <h5 class="right my-1"> 144 <h5 class="right my-1">
145 <b>Quantity :</b> 145 <b>Quantity :</b>
146 </h5> 146 </h5>
147 </v-flex> 147 </v-flex>
148 <v-flex sm6 xs8> 148 <v-flex sm6 xs8>
149 <h5 class="my-1">{{ editedItem.quantity}}</h5> 149 <h5 class="my-1">{{ editedItem.quantity}}</h5>
150 </v-flex> 150 </v-flex>
151 </v-layout> 151 </v-layout>
152 <v-layout> 152 <v-layout>
153 <v-flex xs5 sm6> 153 <v-flex xs5 sm6>
154 <h5 class="right my-1"> 154 <h5 class="right my-1">
155 <b>Rack No :</b> 155 <b>Rack No :</b>
156 </h5> 156 </h5>
157 </v-flex> 157 </v-flex>
158 <v-flex sm6 xs8> 158 <v-flex sm6 xs8>
159 <h5 class="my-1">{{ editedItem.rackNo}}</h5> 159 <h5 class="my-1">{{ editedItem.rackNo}}</h5>
160 </v-flex> 160 </v-flex>
161 </v-layout> 161 </v-layout>
162 </v-flex> 162 </v-flex>
163 </v-layout> 163 </v-layout>
164 </v-container> 164 </v-container>
165 </v-card-text> 165 </v-card-text>
166 </v-card> 166 </v-card>
167 </v-dialog> 167 </v-dialog>
168 <!-- ****** BOOKS TABLE ****** --> 168 <!-- ****** BOOKS TABLE ****** -->
169 169
170 <v-toolbar color="transparent" flat> 170 <v-toolbar color="transparent" flat>
171 <v-btn 171 <v-btn
172 fab 172 fab
173 dark 173 dark
174 class="open-dialog-button hidden-xl-only hidden-md-only hidden-lg-only" 174 class="open-dialog-button hidden-xl-only hidden-md-only hidden-lg-only"
175 small 175 small
176 @click="addBookDialog = true" 176 @click="addBookDialog = true"
177 > 177 >
178 <v-icon dark>add</v-icon> 178 <v-icon dark>add</v-icon>
179 </v-btn> 179 </v-btn>
180 <v-btn 180 <v-btn
181 round 181 round
182 class="open-dialog-button hidden-sm-only hidden-xs-only" 182 class="open-dialog-button hidden-sm-only hidden-xs-only"
183 dark 183 dark
184 @click="addBookDialog = true" 184 @click="addBookDialog = true"
185 > 185 >
186 <v-icon class="white--text pr-1" size="20">add</v-icon>Add Book 186 <v-icon class="white--text pr-1" size="20">add</v-icon>Add Book
187 </v-btn> 187 </v-btn>
188 <v-spacer></v-spacer> 188 <v-spacer></v-spacer>
189 <v-card-title class="body-1" v-show="show"> 189 <v-card-title class="body-1" v-show="show">
190 <v-btn icon large flat @click="displaySearch"> 190 <v-btn icon large flat @click="displaySearch">
191 <v-avatar size="27"> 191 <v-avatar size="27">
192 <img src="/static/icon/search.png" alt="icon" /> 192 <img src="/static/icon/search.png" alt="icon" />
193 </v-avatar> 193 </v-avatar>
194 </v-btn> 194 </v-btn>
195 </v-card-title> 195 </v-card-title>
196 <v-flex xs8 sm8 md3 lg2 v-if="showSearch"> 196 <v-flex xs8 sm8 md3 lg2 v-if="showSearch">
197 <v-layout> 197 <v-layout>
198 <v-text-field 198 <v-text-field
199 autofocus 199 autofocus
200 v-model="search" 200 v-model="search"
201 label="Search" 201 label="Search"
202 prepend-inner-icon="search" 202 prepend-inner-icon="search"
203 color="primary" 203 color="primary"
204 ></v-text-field> 204 ></v-text-field>
205 <v-icon @click="closeSearch" color="error">close</v-icon> 205 <v-icon @click="closeSearch" color="error">close</v-icon>
206 </v-layout> 206 </v-layout>
207 </v-flex> 207 </v-flex>
208 </v-toolbar> 208 </v-toolbar>
209 <v-data-table 209 <v-data-table
210 :headers="headers" 210 :headers="headers"
211 :items="bookData" 211 :items="bookData"
212 :pagination.sync="pagination" 212 :pagination.sync="pagination"
213 :search="search" 213 :search="search"
214 > 214 >
215 <template slot="items" slot-scope="props"> 215 <template slot="items" slot-scope="props">
216 <td class="td td-row text-xs-center">{{ props.index + 1}}</td> 216 <td class="td td-row text-xs-center">{{ props.index + 1}}</td>
217 <td class="td td-row text-xs-center">{{ props.item.name }}</td> 217 <td class="td td-row text-xs-center">{{ props.item.name }}</td>
218 <td class="td td-row text-xs-center">{{ props.item.author }}</td> 218 <td class="td td-row text-xs-center">{{ props.item.author }}</td>
219 <td class="td td-row text-xs-center">{{ props.item.subjectCode }}</td> 219 <td class="td td-row text-xs-center">{{ props.item.subjectCode }}</td>
220 <td class="td td-row text-xs-center">{{ props.item.price }}</td> 220 <td class="td td-row text-xs-center">{{ props.item.price }}</td>
221 <td class="td td-row text-xs-center">{{ props.item.quantity }}</td> 221 <td class="td td-row text-xs-center">{{ props.item.quantity }}</td>
222 <td class="td td-row text-xs-center">{{ props.item.rackNo }}</td> 222 <td class="td td-row text-xs-center">{{ props.item.rackNo }}</td>
223 <td class="td td-row text-xs-center"> 223 <td class="td td-row text-xs-center">
224 <span 224 <span
225 v-if="props.item.status === 'AVAILABLE'" 225 v-if="props.item.status === 'AVAILABLE'"
226 class="green lighten-1 pa-1 px-2 white--text paymentStatus" 226 class="green lighten-1 pa-1 px-2 white--text paymentStatus"
227 >{{ props.item.status}}</span> 227 >{{ props.item.status}}</span>
228 <span 228 <span
229 v-if="props.item.status === 'UNAVAILABLE'" 229 v-if="props.item.status === 'UNAVAILABLE'"
230 class="red lighten-1 pa-1 px-2 white--text paymentStatus" 230 class="red lighten-1 pa-1 px-2 white--text paymentStatus"
231 >{{ props.item.status}}</span> 231 >{{ props.item.status}}</span>
232 </td> 232 </td>
233 <td class="text-xs-center td td-row"> 233 <td class="text-xs-center td td-row">
234 <span> 234 <span>
235 <!-- <v-tooltip top> 235 <!-- <v-tooltip top>
236 <img 236 <img
237 slot="activator" 237 slot="activator"
238 style="cursor:pointer; width:25px; height:25px; " 238 style="cursor:pointer; width:25px; height:25px; "
239 class="mr-3" 239 class="mr-3"
240 @click="profile(props.item)" 240 @click="profile(props.item)"
241 src="/static/icon/view.png" 241 src="/static/icon/view.png"
242 /> 242 />
243 <span>View</span> 243 <span>View</span>
244 </v-tooltip>--> 244 </v-tooltip>-->
245 <v-tooltip top> 245 <v-tooltip top>
246 <img 246 <img
247 slot="activator" 247 slot="activator"
248 style="cursor:pointer; width:20px; height:18px; " 248 style="cursor:pointer; width:20px; height:18px; "
249 class="mr-3" 249 class="mr-3"
250 @click="editItem(props.item)" 250 @click="editItem(props.item)"
251 src="/static/icon/edit.png" 251 src="/static/icon/edit.png"
252 /> 252 />
253 <span>Edit</span> 253 <span>Edit</span>
254 </v-tooltip> 254 </v-tooltip>
255 <v-tooltip top v-if="role != 'TEACHER' "> 255 <v-tooltip top v-if="role != 'TEACHER' ">
256 <img 256 <img
257 slot="activator" 257 slot="activator"
258 style="cursor:pointer; width:20px; height:20px; " 258 style="cursor:pointer; width:20px; height:20px; "
259 @click="deleteItem(props.item)" 259 @click="deleteItem(props.item)"
260 src="/static/icon/delete.png" 260 src="/static/icon/delete.png"
261 /> 261 />
262 <span>Delete</span> 262 <span>Delete</span>
263 </v-tooltip> 263 </v-tooltip>
264 </span> 264 </span>
265 </td> 265 </td>
266 </template> 266 </template>
267 <v-alert 267 <v-alert
268 slot="no-results" 268 slot="no-results"
269 :value="true" 269 :value="true"
270 color="error" 270 color="error"
271 icon="warning" 271 icon="warning"
272 >Your search for "{{ search }}" found no results.</v-alert> 272 >Your search for "{{ search }}" found no results.</v-alert>
273 </v-data-table> 273 </v-data-table>
274 <!-- ****** ADD BOOK ****** --> 274 <!-- ****** ADD BOOK ****** -->
275 <v-dialog v-model="addBookDialog" max-width="600px" v-if="addBookDialog" persistent> 275 <v-dialog v-model="addBookDialog" max-width="600px" v-if="addBookDialog" persistent>
276 <v-card flat class="card-style pa-2" dark> 276 <v-card flat class="card-style pa-2" dark>
277 <v-layout> 277 <v-layout>
278 <v-flex xs12> 278 <v-flex xs12>
279 <label class="title text-xs-center">Add Book</label> 279 <label class="title text-xs-center">Add Book</label>
280 <v-icon size="24" class="right" @click="$refs.form.reset();addBookDialog = false">cancel</v-icon> 280 <v-icon size="24" class="right" @click="$refs.form.reset();addBookDialog = false">cancel</v-icon>
281 </v-flex> 281 </v-flex>
282 </v-layout> 282 </v-layout>
283 <v-container fluid fill-height> 283 <v-container fluid fill-height>
284 <v-layout align-center> 284 <v-layout align-center>
285 <v-flex xs12 class="mt-4"> 285 <v-flex xs12 class="mt-4">
286 <v-form ref="form" v-model="valid" lazy-validation> 286 <v-form ref="form" v-model="valid" lazy-validation>
287 <v-layout> 287 <v-layout>
288 <v-flex xs4 class="pt-4 subheading"> 288 <v-flex xs4 class="pt-4 subheading">
289 <label class="right">Name:</label> 289 <label class="right">Name:</label>
290 </v-flex> 290 </v-flex>
291 <v-flex xs7 class="ml-3"> 291 <v-flex xs7 class="ml-3">
292 <v-text-field 292 <v-text-field
293 v-model="BooksData.name" 293 v-model="BooksData.name"
294 placeholder="fill your Name" 294 placeholder="fill your Name"
295 type="text" 295 type="text"
296 :rules="nameRules" 296 :rules="nameRules"
297 required 297 required
298 ></v-text-field> 298 ></v-text-field>
299 </v-flex> 299 </v-flex>
300 </v-layout> 300 </v-layout>
301 <v-layout> 301 <v-layout>
302 <v-flex xs4 class="pt-4 subheading"> 302 <v-flex xs4 class="pt-4 subheading">
303 <label class="right">Author:</label> 303 <label class="right">Author:</label>
304 </v-flex> 304 </v-flex>
305 <v-flex xs7 class="ml-3"> 305 <v-flex xs7 class="ml-3">
306 <v-text-field 306 <v-text-field
307 v-model="BooksData.author" 307 v-model="BooksData.author"
308 placeholder="fill your Author Name" 308 placeholder="fill your Author Name"
309 type="text" 309 type="text"
310 :rules="authorRules" 310 :rules="authorRules"
311 required 311 required
312 ></v-text-field> 312 ></v-text-field>
313 </v-flex> 313 </v-flex>
314 </v-layout> 314 </v-layout>
315 <v-layout> 315 <v-layout>
316 <v-flex xs4 class="pt-4 subheading"> 316 <v-flex xs4 class="pt-4 subheading">
317 <label class="right">Subject Code:</label> 317 <label class="right">Subject Code:</label>
318 </v-flex> 318 </v-flex>
319 <v-flex xs7 class="ml-3"> 319 <v-flex xs7 class="ml-3">
320 <v-text-field 320 <v-text-field
321 v-model="BooksData.subjectCode" 321 v-model="BooksData.subjectCode"
322 placeholder="fill your Subject Code" 322 placeholder="fill your Subject Code"
323 type="text" 323 type="text"
324 :rules="subjectRules" 324 :rules="subjectRules"
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-layout> 329 <v-layout>
330 <v-flex xs4 class="pt-4 subheading"> 330 <v-flex xs4 class="pt-4 subheading">
331 <label class="right">Price:</label> 331 <label class="right">Price:</label>
332 </v-flex> 332 </v-flex>
333 <v-flex xs7 class="ml-3"> 333 <v-flex xs7 class="ml-3">
334 <v-text-field 334 <v-text-field
335 v-model="BooksData.price" 335 v-model="BooksData.price"
336 placeholder="fill your Price" 336 placeholder="fill your Price"
337 :rules="priceRules" 337 :rules="priceRules"
338 required 338 required
339 ></v-text-field> 339 ></v-text-field>
340 </v-flex> 340 </v-flex>
341 </v-layout> 341 </v-layout>
342 <v-layout> 342 <v-layout>
343 <v-flex xs4 class="pt-4 subheading"> 343 <v-flex xs4 class="pt-4 subheading">
344 <label class="right">Quantity:</label> 344 <label class="right">Quantity:</label>
345 </v-flex> 345 </v-flex>
346 <v-flex xs7 class="ml-3"> 346 <v-flex xs7 class="ml-3">
347 <v-text-field 347 <v-text-field
348 v-model="BooksData.quantity" 348 v-model="BooksData.quantity"
349 placeholder="fill your Quantity" 349 placeholder="fill your Quantity"
350 :rules="quantityRules" 350 :rules="quantityRules"
351 required 351 required
352 ></v-text-field> 352 ></v-text-field>
353 </v-flex> 353 </v-flex>
354 </v-layout> 354 </v-layout>
355 <v-layout> 355 <v-layout>
356 <v-flex xs4 class="pt-4 subheading"> 356 <v-flex xs4 class="pt-4 subheading">
357 <label class="right">Rack No:</label> 357 <label class="right">Rack No:</label>
358 </v-flex> 358 </v-flex>
359 <v-flex xs7 class="ml-3"> 359 <v-flex xs7 class="ml-3">
360 <v-text-field 360 <v-text-field
361 v-model="BooksData.rackNo" 361 v-model="BooksData.rackNo"
362 placeholder="fill your Rack No" 362 placeholder="fill your Rack No"
363 :rules="rackNoRules" 363 :rules="rackNoRules"
364 required 364 required
365 ></v-text-field> 365 ></v-text-field>
366 </v-flex> 366 </v-flex>
367 </v-layout> 367 </v-layout>
368 <v-layout> 368 <v-layout>
369 <v-flex xs12> 369 <v-flex xs12>
370 <v-card-actions> 370 <v-card-actions>
371 <v-spacer></v-spacer> 371 <v-spacer></v-spacer>
372 <v-btn @click="clear" round dark class="clear-button">clear</v-btn> 372 <v-btn @click="clear" round dark class="clear-button">clear</v-btn>
373 <v-btn @click="submit" round dark :loading="loading" class="add-button">Add</v-btn> 373 <v-btn @click="submit" round dark :loading="loading" class="add-button">Add</v-btn>
374 </v-card-actions> 374 </v-card-actions>
375 </v-flex> 375 </v-flex>
376 </v-layout> 376 </v-layout>
377 </v-form> 377 </v-form>
378 </v-flex> 378 </v-flex>
379 </v-layout> 379 </v-layout>
380 </v-container> 380 </v-container>
381 </v-card> 381 </v-card>
382 </v-dialog> 382 </v-dialog>
383 <v-snackbar 383 <v-snackbar
384 :timeout="timeout" 384 :timeout="timeout"
385 :top="y === 'top'" 385 :top="y === 'top'"
386 :right="x === 'right'" 386 :right="x === 'right'"
387 :vertical="mode === 'vertical'" 387 :vertical="mode === 'vertical'"
388 v-model="snackbar" 388 v-model="snackbar"
389 :color="color" 389 :color="color"
390 >{{ text }}</v-snackbar> 390 >{{ text }}</v-snackbar>
391 <div class="loader" v-if="showLoader"> 391 <div class="loader" v-if="showLoader">
392 <v-progress-circular indeterminate color="white"></v-progress-circular> 392 <v-progress-circular indeterminate color="white"></v-progress-circular>
393 </div> 393 </div>
394 </v-container> 394 </v-container>
395 </template> 395 </template>
396 396
397 <script> 397 <script>
398 import http from "@/Services/http.js"; 398 import http from "@/Services/http.js";
399 import Util from "@/util"; 399 import Util from "@/util";
400 400
401 export default { 401 export default {
402 data: () => ({ 402 data: () => ({
403 snackbar: false, 403 snackbar: false,
404 y: "top", 404 y: "top",
405 x: "right", 405 x: "right",
406 mode: "", 406 mode: "",
407 timeout: 5000, 407 timeout: 5000,
408 text: "", 408 text: "",
409 color: "", 409 color: "",
410 show: true, 410 show: true,
411 showSearch: false, 411 showSearch: false,
412 showLoader: false, 412 showLoader: false,
413 loading: false, 413 loading: false,
414 date: null, 414 date: null,
415 search: "", 415 search: "",
416 editBookDialog: false, 416 editBookDialog: false,
417 viewBookDialog: false, 417 viewBookDialog: false,
418 valid: true, 418 valid: true,
419 validEdit: true, 419 validEdit: true,
420 addBookDialog: false, 420 addBookDialog: false,
421 pagination: { 421 pagination: {
422 rowsPerPage: 10, 422 rowsPerPage: 10,
423 }, 423 },
424 nameRules: [(v) => !!v || " Name is required"], 424 nameRules: [(v) => !!v || " Name is required"],
425 authorRules: [(v) => !!v || "Author Name Monthly"], 425 authorRules: [(v) => !!v || "Author Name Monthly"],
426 subjectRules: [(v) => !!v || "Subject Code is required"], 426 subjectRules: [(v) => !!v || "Subject Code is required"],
427 priceRules: [(v) => !!v || "Price is required"], 427 priceRules: [(v) => !!v || "Price is required"],
428 quantityRules: [(v) => !!v || "Quantity is required"], 428 quantityRules: [(v) => !!v || "Quantity is required"],
429 rackNoRules: [(v) => !!v || "Rack No. is required"], 429 rackNoRules: [(v) => !!v || "Rack No. is required"],
430 430
431 headers: [ 431 headers: [
432 { 432 {
433 text: "No", 433 text: "No",
434 align: "", 434 align: "",
435 sortable: false, 435 sortable: false,
436 value: "No", 436 value: "No",
437 }, 437 },
438 { 438 {
439 text: "Name", 439 text: "Name",
440 value: "name", 440 value: "name",
441 sortable: false, 441 sortable: false,
442 align: "center", 442 align: "center",
443 }, 443 },
444 { text: "Authour", value: "author", sortable: false, align: "center" }, 444 { text: "Authour", value: "author", sortable: false, align: "center" },
445 { 445 {
446 text: "Subject Code", 446 text: "Subject Code",
447 value: "subjectCode", 447 value: "subjectCode",
448 sortable: false, 448 sortable: false,
449 align: "center", 449 align: "center",
450 }, 450 },
451 { text: "Price", value: "price", sortable: false, align: "center" }, 451 { text: "Price", value: "price", sortable: false, align: "center" },
452 { text: "Quantity", value: "quantity", sortable: false, align: "center" }, 452 { text: "Quantity", value: "quantity", sortable: false, align: "center" },
453 { text: "Rack No", value: "rackNo", sortable: false, align: "center" }, 453 { text: "Rack No", value: "rackNo", sortable: false, align: "center" },
454 { text: "Status", value: "status", sortable: false, align: "center" }, 454 { text: "Status", value: "status", sortable: false, align: "center" },
455 455
456 { text: "Action", value: "", sortable: false, align: "center" }, 456 { text: "Action", value: "", sortable: false, align: "center" },
457 ], 457 ],
458 bookData: [], 458 bookData: [],
459 select: "", 459 select: "",
460 token: "", 460 token: "",
461 editedItem: {}, 461 editedItem: {},
462 BooksData: {}, 462 BooksData: {},
463 }), 463 }),
464 watch: { 464 watch: {
465 addBookDialog: function (val) { 465 addBookDialog: function (val) {
466 if (!val) { 466 if (!val) {
467 this.BooksData = []; 467 this.BooksData = [];
468 } 468 }
469 }, 469 },
470 }, 470 },
471 methods: { 471 methods: {
472 getBookData() { 472 getBookData() {
473 this.showLoader = true; 473 this.showLoader = true;
474 http() 474 http()
475 .get("/getBooksList", { 475 .get("/getBooksList", {
476 params: { 476 params: {
477 schoolId: this.$store.state.schoolId, 477 schoolId: this.$store.state.schoolId,
478 }, 478 },
479 headers: { Authorization: "Bearer " + this.token }, 479 headers: { Authorization: "Bearer " + this.token },
480 }) 480 })
481 .then((response) => { 481 .then((response) => {
482 this.bookData = response.data.data; 482 this.bookData = response.data.data;
483 this.showLoader = false; 483 this.showLoader = false;
484 }) 484 })
485 .catch((error) => { 485 .catch((error) => {
486 this.showLoader = false; 486 this.showLoader = false;
487 if (error.response.status === 401) { 487 if (error.response.status === 401) {
488 this.$router.replace({ path: "/" }); 488 this.$router.replace({ path: "/" });
489 this.$store.dispatch("setToken", null); 489 this.$store.dispatch("setToken", null);
490 this.$store.dispatch("Id", null); 490 this.$store.dispatch("Id", null);
491 } 491 }
492 }); 492 });
493 }, 493 },
494 editItem(item) { 494 editItem(item) {
495 this.editedIndex = this.bookData.indexOf(item); 495 this.editedIndex = this.bookData.indexOf(item);
496 this.editedItem = Object.assign({}, item); 496 this.editedItem = Object.assign({}, item);
497 // console.log(this.editedItem); 497 // console.log(this.editedItem);
498 this.editBookDialog = true; 498 this.editBookDialog = true;
499 }, 499 },
500 profile(item) { 500 profile(item) {
501 this.editedIndex = this.bookData.indexOf(item); 501 this.editedIndex = this.bookData.indexOf(item);
502 this.editedItem = Object.assign({}, item); 502 this.editedItem = Object.assign({}, item);
503 this.viewBookDialog = true; 503 this.viewBookDialog = true;
504 }, 504 },
505 deleteItem(item) { 505 deleteItem(item) {
506 let deleteStudent = { 506 let deleteStudent = {
507 bookId: item._id, 507 bookId: item._id,
508 }; 508 };
509 http() 509 http()
510 .delete( 510 .delete(
511 "/deleteBook", 511 "/deleteBook",
512 confirm("Are you sure you want to delete this?") && { 512 confirm("Are you sure you want to delete this?") && {
513 params: deleteStudent, 513 params: deleteStudent,
514 } 514 }
515 ) 515 )
516 .then((response) => { 516 .then((response) => {
517 this.snackbar = true; 517 this.snackbar = true;
518 this.text = response.data.message; 518 this.text = response.data.message;
519 this.color = "green"; 519 this.color = "green";
520 this.getBookData(); 520 this.getBookData();
521 }) 521 })
522 .catch((error) => { 522 .catch((error) => {
523 this.snackbar = true; 523 this.snackbar = true;
524 this.text = error.response.data.message; 524 this.text = error.response.data.message;
525 this.color = "error"; 525 this.color = "error";
526 }); 526 });
527 }, 527 },
528 closeEditProfile() { 528 closeEditProfile() {
529 this.editBookDialog = false; 529 this.editBookDialog = false;
530 }, 530 },
531 close2() { 531 close2() {
532 this.dialog2 = false; 532 this.dialog2 = false;
533 }, 533 },
534 submit() { 534 submit() {
535 this.BooksData.quantity = Number(this.BooksData.quantity); 535 this.BooksData.quantity = Number(this.BooksData.quantity);
536 this.BooksData.schoolId = this.$store.state.schoolId; 536 this.BooksData.schoolId = this.$store.state.schoolId;
537 if (this.$refs.form.validate()) { 537 if (this.$refs.form.validate()) {
538 this.loading = true; 538 this.loading = true;
539 http() 539 http()
540 .post("/createBook", this.BooksData) 540 .post("/createBook", this.BooksData)
541 .then((response) => { 541 .then((response) => {
542 this.getBookData(); 542 this.getBookData();
543 this.snackbar = true; 543 this.snackbar = true;
544 this.text = response.data.message; 544 this.text = response.data.message;
545 this.color = "green"; 545 this.color = "green";
546 this.addBookDialog = false; 546 this.addBookDialog = false;
547 this.clear(); 547 this.clear();
548 this.loading = false; 548 this.loading = false;
549 }) 549 })
550 .catch((error) => { 550 .catch((error) => {
551 this.snackbar = true; 551 this.snackbar = true;
552 this.text = error.response.data.message; 552 this.text = error.response.data.message;
553 this.color = "error"; 553 this.color = "error";
554 this.loading = false; 554 this.loading = false;
555 }); 555 });
556 } 556 }
557 }, 557 },
558 clear() { 558 clear() {
559 this.$refs.form.reset(); 559 this.$refs.form.reset();
560 }, 560 },
561 save() { 561 save() {
562 this.editedItem.bookId = this.editedItem._id; 562 this.editedItem.bookId = this.editedItem._id;
563 http() 563 http()
564 .put("/updateBook", this.editedItem) 564 .put("/updateBook", this.editedItem)
565 .then((response) => { 565 .then((response) => {
566 this.snackbar = true; 566 this.snackbar = true;
567 this.text = response.data.message; 567 this.text = response.data.message;
568 this.color = "green"; 568 this.color = "green";
569 this.getBookData(); 569 this.getBookData();
570 this.closeEditProfile(); 570 this.closeEditProfile();
571 }) 571 })
572 .catch((error) => { 572 .catch((error) => {
573 this.snackbar = true; 573 this.snackbar = true;
574 this.text = error.response.data.message; 574 this.text = error.response.data.message;
575 this.color = "error"; 575 this.color = "error";
576 // console.log(error); 576 // console.log(error);
577 }); 577 });
578 }, 578 },
579 displaySearch() { 579 displaySearch() {
580 (this.show = false), (this.showSearch = true); 580 (this.show = false), (this.showSearch = true);
581 }, 581 },
582 closeSearch() { 582 closeSearch() {
583 this.showSearch = false; 583 this.showSearch = false;
584 this.show = true; 584 this.show = true;
585 this.search = ""; 585 this.search = "";
586 }, 586 },
587 }, 587 },
588 mounted() { 588 mounted() {
589 this.token = this.$store.state.token; 589 this.token = this.$store.state.token;
590 this.getBookData(); 590 this.getBookData();
591 this.role = this.$store.state.role; 591 this.role = this.$store.state.role;
592 }, 592 },
593 }; 593 };
594 </script> 594 </script>
595 595
src/pages/Library/eBook.vue
Diff comments   View file @8b7976c
1 <template> 1 <template>
2 <v-container fluid class="body-color"> 2 <v-container fluid class="body-color">
3 <!-- ****** EDITS EBOOK DETAILS ****** --> 3 <!-- ****** EDITS EBOOK DETAILS ****** -->
4 <v-dialog v-model="editEbookDialog" max-width="600px" persistent> 4 <v-dialog v-model="editEbookDialog" max-width="600px" persistent>
5 <v-card flat class="card-style pa-2" dark> 5 <v-card flat class="card-style pa-2" dark>
6 <v-layout> 6 <v-layout>
7 <v-flex xs12> 7 <v-flex xs12>
8 <label class="title text-xs-center">Edit E-Book</label> 8 <label class="title text-xs-center">Edit E-Book</label>
9 <v-icon size="24" class="right" @click="editEbookDialog = false">cancel</v-icon> 9 <v-icon size="24" class="right" @click="editEbookDialog = false">cancel</v-icon>
10 </v-flex> 10 </v-flex>
11 </v-layout> 11 </v-layout>
12 <v-card-text> 12 <v-card-text>
13 <v-flex xs12 class="text-xs-center text-sm-center text-md-center text-lg-center"> 13 <v-flex xs12 class="text-xs-center text-sm-center text-md-center text-lg-center">
14 <input 14 <input
15 type="file" 15 type="file"
16 style="display: none" 16 style="display: none"
17 ref="editImage" 17 ref="editImage"
18 accept="image/*" 18 accept="image/*"
19 @change="onEditImagePicked" 19 @change="onEditImagePicked"
20 /> 20 />
21 <img 21 <img
22 v-if="editedItem.coverPhotoUrl" 22 v-if="editedItem.coverPhotoUrl"
23 :src="editedItem.coverPhotoUrl" 23 :src="editedItem.coverPhotoUrl"
24 height="160" 24 height="160"
25 width="160" 25 width="160"
26 alt="eBooks" 26 alt="eBooks"
27 class="pa-2" 27 class="pa-2"
28 /> 28 />
29 <img 29 <img
30 src="/static/icon/user.png" 30 src="/static/icon/user.png"
31 v-if="editedItem.coverPhotoUrl == ''" 31 v-if="editedItem.coverPhotoUrl == ''"
32 height="160" 32 height="160"
33 width="160" 33 width="160"
34 alt="Books" 34 alt="Books"
35 /> 35 />
36 </v-flex> 36 </v-flex>
37 <v-container grid-list-md> 37 <v-container grid-list-md>
38 <v-flex xs12 sm12> 38 <v-flex xs12 sm12>
39 <v-layout> 39 <v-layout>
40 <v-flex xs4 class="pt-4 subheading"> 40 <v-flex xs4 class="pt-4 subheading">
41 <label class="right hidden-xs-only hidden-sm-only">Name :</label> 41 <label class="right hidden-xs-only hidden-sm-only">Name :</label>
42 <label class="right hidden-lg-only hidden-md-only hidden-xl-only">Name :</label> 42 <label class="right hidden-lg-only hidden-md-only hidden-xl-only">Name :</label>
43 </v-flex> 43 </v-flex>
44 <v-flex xs8 class="ml-3"> 44 <v-flex xs8 class="ml-3">
45 <v-text-field 45 <v-text-field
46 v-model="editedItem.name" 46 v-model="editedItem.name"
47 placeholder="fill your full Name" 47 placeholder="fill your full Name"
48 name="name" 48 name="name"
49 type="text" 49 type="text"
50 required 50 required
51 ></v-text-field> 51 ></v-text-field>
52 </v-flex> 52 </v-flex>
53 </v-layout> 53 </v-layout>
54 </v-flex> 54 </v-flex>
55 <v-flex xs12 sm12> 55 <v-flex xs12 sm12>
56 <v-layout> 56 <v-layout>
57 <v-flex xs4 class="pt-4 subheading"> 57 <v-flex xs4 class="pt-4 subheading">
58 <label class="right hidden-xs-only hidden-sm-only">Author :</label> 58 <label class="right hidden-xs-only hidden-sm-only">Author :</label>
59 <label class="right hidden-lg-only hidden-md-only hidden-xl-only">Author :</label> 59 <label class="right hidden-lg-only hidden-md-only hidden-xl-only">Author :</label>
60 </v-flex> 60 </v-flex>
61 <v-flex xs8 class="ml-3"> 61 <v-flex xs8 class="ml-3">
62 <v-text-field 62 <v-text-field
63 v-model="editedItem.author" 63 v-model="editedItem.author"
64 placeholder="fill your full author" 64 placeholder="fill your full author"
65 name="name" 65 name="name"
66 type="text" 66 type="text"
67 required 67 required
68 ></v-text-field> 68 ></v-text-field>
69 </v-flex> 69 </v-flex>
70 </v-layout> 70 </v-layout>
71 </v-flex> 71 </v-flex>
72 <v-flex xs12 sm12> 72 <v-flex xs12 sm12>
73 <v-layout> 73 <v-layout>
74 <v-flex xs4 class="pt-4 subheading"> 74 <v-flex xs4 class="pt-4 subheading">
75 <label class="right hidden-xs-only hidden-sm-only">Class :</label> 75 <label class="right hidden-xs-only hidden-sm-only">Class :</label>
76 <label class="right hidden-lg-only hidden-md-only hidden-xl-only">Class :</label> 76 <label class="right hidden-lg-only hidden-md-only hidden-xl-only">Class :</label>
77 </v-flex> 77 </v-flex>
78 <v-flex xs8 class="ml-3"> 78 <v-flex xs8 class="ml-3">
79 <v-select 79 <v-select
80 v-model="editedItem.classId" 80 v-model="editedItem.classId"
81 :items="addClass" 81 :items="addClass"
82 label="Select Class" 82 label="Select Class"
83 item-text="classNum" 83 item-text="classNum"
84 item-value="_id" 84 item-value="_id"
85 type="_id" 85 type="_id"
86 required 86 required
87 ></v-select> 87 ></v-select>
88 </v-flex> 88 </v-flex>
89 </v-layout> 89 </v-layout>
90 </v-flex> 90 </v-flex>
91 <v-flex xs12 sm12> 91 <v-flex xs12 sm12>
92 <v-layout> 92 <v-layout>
93 <v-flex xs4 class="pt-4 subheading"> 93 <v-flex xs4 class="pt-4 subheading">
94 <label class="right hidden-xs-only hidden-sm-only">Upload Image :</label> 94 <label class="right hidden-xs-only hidden-sm-only">Upload Image :</label>
95 <label class="right hidden-lg-only hidden-md-only hidden-xl-only">UploadImage :</label> 95 <label class="right hidden-lg-only hidden-md-only hidden-xl-only">UploadImage :</label>
96 </v-flex> 96 </v-flex>
97 <v-flex xs8 class="ml-3"> 97 <v-flex xs8 class="ml-3">
98 <v-text-field 98 <v-text-field
99 label="Select Image" 99 label="Select Image"
100 @click="editPickImage" 100 @click="editPickImage"
101 v-model="editImageName" 101 v-model="editImageName"
102 append-icon="attach_file" 102 append-icon="attach_file"
103 ></v-text-field> 103 ></v-text-field>
104 </v-flex> 104 </v-flex>
105 </v-layout> 105 </v-layout>
106 </v-flex> 106 </v-flex>
107 <v-flex xs12> 107 <v-flex xs12>
108 <v-layout> 108 <v-layout>
109 <v-flex xs4 class="pt-4 subheading"> 109 <v-flex xs4 class="pt-4 subheading">
110 <label class="right">Upload File:</label> 110 <label class="right">Upload File:</label>
111 </v-flex> 111 </v-flex>
112 <v-flex xs8 class="ml-3"> 112 <v-flex xs8 class="ml-3">
113 <input 113 <input
114 type="file" 114 type="file"
115 style="display: none" 115 style="display: none"
116 ref="editFile" 116 ref="editFile"
117 @change="onEditFilePicked" 117 @change="onEditFilePicked"
118 /> 118 />
119 <v-text-field 119 <v-text-field
120 label="Select File" 120 label="Select File"
121 @click="editPickFile" 121 @click="editPickFile"
122 v-model="editFileName" 122 v-model="editFileName"
123 append-icon="attach_file" 123 append-icon="attach_file"
124 ></v-text-field> 124 ></v-text-field>
125 </v-flex> 125 </v-flex>
126 </v-layout> 126 </v-layout>
127 </v-flex> 127 </v-flex>
128 <v-card-actions> 128 <v-card-actions>
129 <v-spacer></v-spacer> 129 <v-spacer></v-spacer>
130 <v-btn round dark @click="save" :loading="editLoading" class="add-button">Save</v-btn> 130 <v-btn round dark @click="save" :loading="editLoading" class="add-button">Save</v-btn>
131 <v-spacer></v-spacer> 131 <v-spacer></v-spacer>
132 </v-card-actions> 132 </v-card-actions>
133 </v-container> 133 </v-container>
134 </v-card-text> 134 </v-card-text>
135 </v-card> 135 </v-card>
136 </v-dialog> 136 </v-dialog>
137 137
138 <!-- ****** PROFILE VIEW ALL NEWS DEATILS ****** --> 138 <!-- ****** PROFILE VIEW ALL NEWS DEATILS ****** -->
139 139
140 <v-dialog v-model="viewEbookDialog" max-width="600px" scrollable persistent> 140 <v-dialog v-model="viewEbookDialog" max-width="600px" scrollable persistent>
141 <v-card flat class="card-style pa-3" dark> 141 <v-card flat class="card-style pa-3" dark>
142 <v-layout> 142 <v-layout>
143 <v-flex xs12> 143 <v-flex xs12>
144 <label class="title text-xs-center">View E-book</label> 144 <label class="title text-xs-center">View E-book</label>
145 <v-icon size="24" class="right" @click="viewEbookDialog = false">cancel</v-icon> 145 <v-icon size="24" class="right" @click="viewEbookDialog = false">cancel</v-icon>
146 </v-flex> 146 </v-flex>
147 </v-layout> 147 </v-layout>
148 <v-layout> 148 <v-layout>
149 <v-flex align-center justify-center layout text-xs-center class="mt-3"> 149 <v-flex align-center justify-center layout text-xs-center class="mt-3">
150 <v-avatar size="100px"> 150 <v-avatar size="100px">
151 <img src="/static/icon/user.png" v-if="!editedItem.coverPhotoUrl" /> 151 <img src="/static/icon/user.png" v-if="!editedItem.coverPhotoUrl" />
152 <img :src="editedItem.coverPhotoUrl" v-else-if="editedItem.coverPhotoUrl" /> 152 <img :src="editedItem.coverPhotoUrl" v-else-if="editedItem.coverPhotoUrl" />
153 </v-avatar> 153 </v-avatar>
154 </v-flex> 154 </v-flex>
155 </v-layout> 155 </v-layout>
156 <v-container grid-list-md> 156 <v-container grid-list-md>
157 <v-layout wrap> 157 <v-layout wrap>
158 <v-flex xs12 sm12> 158 <v-flex xs12 sm12>
159 <v-layout> 159 <v-layout>
160 <v-flex xs6 sm6> 160 <v-flex xs6 sm6>
161 <h5 class="right my-1"> 161 <h5 class="right my-1">
162 <b>Name:</b> 162 <b>Name:</b>
163 </h5> 163 </h5>
164 </v-flex> 164 </v-flex>
165 <v-flex sm6 xs6> 165 <v-flex sm6 xs6>
166 <h5 class="my-1 left">{{ editedItem.name }}</h5> 166 <h5 class="my-1 left">{{ editedItem.name }}</h5>
167 </v-flex> 167 </v-flex>
168 </v-layout> 168 </v-layout>
169 </v-flex> 169 </v-flex>
170 <v-flex xs12 sm12> 170 <v-flex xs12 sm12>
171 <v-layout> 171 <v-layout>
172 <v-flex xs6 sm6> 172 <v-flex xs6 sm6>
173 <h5 class="right my-1"> 173 <h5 class="right my-1">
174 <b>Author:</b> 174 <b>Author:</b>
175 </h5> 175 </h5>
176 </v-flex> 176 </v-flex>
177 <v-flex sm6 xs6> 177 <v-flex sm6 xs6>
178 <h5 class="my-1 left">{{ editedItem.author }}</h5> 178 <h5 class="my-1 left">{{ editedItem.author }}</h5>
179 </v-flex> 179 </v-flex>
180 </v-layout> 180 </v-layout>
181 </v-flex> 181 </v-flex>
182 </v-layout> 182 </v-layout>
183 <v-flex xs12 sm12> 183 <v-flex xs12 sm12>
184 <v-layout> 184 <v-layout>
185 <v-flex xs6 sm6> 185 <v-flex xs6 sm6>
186 <h5 class="right my-1"> 186 <h5 class="right my-1">
187 <b>Class:</b> 187 <b>Class:</b>
188 </h5> 188 </h5>
189 </v-flex> 189 </v-flex>
190 <v-flex sm6 xs6> 190 <v-flex sm6 xs6>
191 <h5 class="my-1 left">{{ editedItem.classId .classNum}}</h5> 191 <h5 class="my-1 left">{{ editedItem.classId .classNum}}</h5>
192 </v-flex> 192 </v-flex>
193 </v-layout> 193 </v-layout>
194 </v-flex> 194 </v-flex>
195 </v-container> 195 </v-container>
196 </v-card> 196 </v-card>
197 </v-dialog> 197 </v-dialog>
198 <!-- ****** EXISTING-USERS NEWS TABLE ****** --> 198 <!-- ****** EXISTING-USERS NEWS TABLE ****** -->
199 199
200 <v-toolbar color="transparent" flat> 200 <v-toolbar color="transparent" flat>
201 <v-btn 201 <v-btn
202 fab 202 fab
203 dark 203 dark
204 class="open-dialog-button hidden-xl-only hidden-md-only hidden-lg-only" 204 class="open-dialog-button hidden-xl-only hidden-md-only hidden-lg-only"
205 small 205 small
206 @click="addEBookDialog = true" 206 @click="addEBookDialog = true"
207 > 207 >
208 <v-icon dark>add</v-icon> 208 <v-icon dark>add</v-icon>
209 </v-btn> 209 </v-btn>
210 <v-btn 210 <v-btn
211 round 211 round
212 class="open-dialog-button hidden-sm-only hidden-xs-only" 212 class="open-dialog-button hidden-sm-only hidden-xs-only"
213 dark 213 dark
214 @click="addEBookDialog = true" 214 @click="addEBookDialog = true"
215 > 215 >
216 <v-icon class="white--text pr-1" size="20">add</v-icon>Add E-Book 216 <v-icon class="white--text pr-1" size="20">add</v-icon>Add E-Book
217 </v-btn> 217 </v-btn>
218 <v-spacer></v-spacer> 218 <v-spacer></v-spacer>
219 <v-card-title class="body-1" v-show="show"> 219 <v-card-title class="body-1" v-show="show">
220 <v-btn icon large flat @click="displaySearch"> 220 <v-btn icon large flat @click="displaySearch">
221 <v-avatar size="27"> 221 <v-avatar size="27">
222 <img src="/static/icon/search.png" alt="icon" /> 222 <img src="/static/icon/search.png" alt="icon" />
223 </v-avatar> 223 </v-avatar>
224 </v-btn> 224 </v-btn>
225 </v-card-title> 225 </v-card-title>
226 <v-flex xs8 sm8 md3 lg2 v-if="showSearch"> 226 <v-flex xs8 sm8 md3 lg2 v-if="showSearch">
227 <v-layout> 227 <v-layout>
228 <v-text-field 228 <v-text-field
229 autofocus 229 autofocus
230 v-model="search" 230 v-model="search"
231 label="Search" 231 label="Search"
232 prepend-inner-icon="search" 232 prepend-inner-icon="search"
233 color="primary" 233 color="primary"
234 ></v-text-field> 234 ></v-text-field>
235 <v-icon @click="closeSearch" color="error">close</v-icon> 235 <v-icon @click="closeSearch" color="error">close</v-icon>
236 </v-layout> 236 </v-layout>
237 </v-flex> 237 </v-flex>
238 </v-toolbar> 238 </v-toolbar>
239 <v-data-table 239 <v-data-table
240 :headers="headers" 240 :headers="headers"
241 :items="eBookData" 241 :items="eBookData"
242 :pagination.sync="pagination" 242 :pagination.sync="pagination"
243 :search="search" 243 :search="search"
244 > 244 >
245 <template slot="items" slot-scope="props"> 245 <template slot="items" slot-scope="props">
246 <tr class="tr"> 246 <tr class="tr">
247 <td class="td td-row">{{ props.index + 1}}</td> 247 <td class="td td-row">{{ props.index + 1}}</td>
248 <td class="td td-row text-xs-center"> 248 <td class="td td-row text-xs-center">
249 <v-avatar size="40"> 249 <v-avatar size="40">
250 <img :src="props.item.coverPhotoUrl" v-if="props.item.coverPhotoUrl" alt="ebooks" /> 250 <img :src="props.item.coverPhotoUrl" v-if="props.item.coverPhotoUrl" alt="ebooks" />
251 <img src="/static/icon/user.png" v-if="!props.item.coverPhotoUrl" /> 251 <img src="/static/icon/user.png" v-if="!props.item.coverPhotoUrl" />
252 </v-avatar> 252 </v-avatar>
253 </td> 253 </td>
254 <td class="td td-row text-xs-center">{{ props.item.name}}</td> 254 <td class="td td-row text-xs-center">{{ props.item.name}}</td>
255 <td class="td td-row text-xs-center">{{ props.item.author}}</td> 255 <td class="td td-row text-xs-center">{{ props.item.author}}</td>
256 <td class="td td-row text-xs-center">{{ props.item.classId.classNum}}</td> 256 <td class="td td-row text-xs-center">{{ props.item.classId.classNum}}</td>
257 <td class="td td-row text-xs-center"> 257 <td class="td td-row text-xs-center">
258 <span> 258 <span>
259 <v-tooltip top> 259 <v-tooltip top>
260 <img 260 <img
261 slot="activator" 261 slot="activator"
262 style="cursor:pointer; width:25px; height:25px; " 262 style="cursor:pointer; width:25px; height:25px; "
263 class="mr-3" 263 class="mr-3"
264 @click="profile(props.item)" 264 @click="profile(props.item)"
265 src="/static/icon/view.png" 265 src="/static/icon/view.png"
266 /> 266 />
267 <span>View</span> 267 <span>View</span>
268 </v-tooltip> 268 </v-tooltip>
269 <v-tooltip top> 269 <v-tooltip top>
270 <img 270 <img
271 slot="activator" 271 slot="activator"
272 style="cursor:pointer; width:20px; height:18px; " 272 style="cursor:pointer; width:20px; height:18px; "
273 class="mr-3" 273 class="mr-3"
274 @click="editItem(props.item)" 274 @click="editItem(props.item)"
275 src="/static/icon/edit.png" 275 src="/static/icon/edit.png"
276 /> 276 />
277 <span>Edit</span> 277 <span>Edit</span>
278 </v-tooltip> 278 </v-tooltip>
279 <v-tooltip top v-if="role != 'TEACHER' "> 279 <v-tooltip top v-if="role != 'TEACHER' ">
280 <img 280 <img
281 slot="activator" 281 slot="activator"
282 style="cursor:pointer; width:20px; height:20px; " 282 style="cursor:pointer; width:20px; height:20px; "
283 @click="deleteItem(props.item)" 283 @click="deleteItem(props.item)"
284 src="/static/icon/delete.png" 284 src="/static/icon/delete.png"
285 /> 285 />
286 <span>Delete</span> 286 <span>Delete</span>
287 </v-tooltip> 287 </v-tooltip>
288 </span> 288 </span>
289 </td> 289 </td>
290 </tr> 290 </tr>
291 </template> 291 </template>
292 <v-alert 292 <v-alert
293 slot="no-results" 293 slot="no-results"
294 :value="true" 294 :value="true"
295 color="error" 295 color="error"
296 icon="warning" 296 icon="warning"
297 >Your search for "{{ search }}" found no results.</v-alert> 297 >Your search for "{{ search }}" found no results.</v-alert>
298 </v-data-table> 298 </v-data-table>
299 <!-- ****** ADD MULTIPLE E-BOOK ****** --> 299 <!-- ****** ADD MULTIPLE E-BOOK ****** -->
300 <v-dialog v-model="addEBookDialog" max-width="600px" v-if="addEBookDialog" persistent> 300 <v-dialog v-model="addEBookDialog" max-width="600px" v-if="addEBookDialog" persistent>
301 <v-card flat class="card-style pa-2" dark> 301 <v-card flat class="card-style pa-2" dark>
302 <v-layout> 302 <v-layout>
303 <v-flex xs12> 303 <v-flex xs12>
304 <label class="title text-xs-center">Add E-Book</label> 304 <label class="title text-xs-center">Add E-Book</label>
305 <v-icon size="24" class="right" @click="closeAddEBookModel">cancel</v-icon> 305 <v-icon size="24" class="right" @click="closeAddEBookModel">cancel</v-icon>
306 </v-flex> 306 </v-flex>
307 </v-layout> 307 </v-layout>
308 <v-form ref="form" v-model="valid" lazy-validation> 308 <v-form ref="form" v-model="valid" lazy-validation>
309 <v-container fluid> 309 <v-container fluid>
310 <v-layout> 310 <v-layout>
311 <v-flex xs12 class="text-xs-center text-sm-center text-md-center text-lg-center"> 311 <v-flex xs12 class="text-xs-center text-sm-center text-md-center text-lg-center">
312 <input 312 <input
313 type="file" 313 type="file"
314 style="display: none" 314 style="display: none"
315 ref="image" 315 ref="image"
316 accept="image/*" 316 accept="image/*"
317 @change="onImagePicked" 317 @change="onImagePicked"
318 /> 318 />
319 <v-layout justify-center> 319 <v-layout justify-center>
320 <v-flex v-if="files != ''"> 320 <v-flex v-if="files != ''">
321 <img :src="files" height="150" width="150" /> 321 <img :src="files" height="150" width="150" />
322 </v-flex> 322 </v-flex>
323 </v-layout> 323 </v-layout>
324 <img src="/static/icon/user.png" v-if="files ==''" height="80" width="80px;" /> 324 <img src="/static/icon/user.png" v-if="files ==''" height="80" width="80px;" />
325 </v-flex> 325 </v-flex>
326 </v-layout> 326 </v-layout>
327 <v-flex xs12> 327 <v-flex xs12>
328 <v-layout> 328 <v-layout>
329 <v-flex xs4 class="pt-4 subheading"> 329 <v-flex xs4 class="pt-4 subheading">
330 <label class="right">Name:</label> 330 <label class="right">Name:</label>
331 </v-flex> 331 </v-flex>
332 <v-flex xs7 class="ml-3"> 332 <v-flex xs7 class="ml-3">
333 <v-text-field 333 <v-text-field
334 v-model="addEBooks.name" 334 v-model="addEBooks.name"
335 placeholder="fill name" 335 placeholder="fill name"
336 name="name" 336 name="name"
337 type="text" 337 type="text"
338 :rules="titleRules" 338 :rules="titleRules"
339 required 339 required
340 ></v-text-field> 340 ></v-text-field>
341 </v-flex> 341 </v-flex>
342 </v-layout> 342 </v-layout>
343 </v-flex> 343 </v-flex>
344 <v-flex xs12> 344 <v-flex xs12>
345 <v-layout> 345 <v-layout>
346 <v-flex xs4 class="pt-4 subheading"> 346 <v-flex xs4 class="pt-4 subheading">
347 <label class="right">Author:</label> 347 <label class="right">Author:</label>
348 </v-flex> 348 </v-flex>
349 <v-flex xs7 class="ml-3"> 349 <v-flex xs7 class="ml-3">
350 <v-text-field 350 <v-text-field
351 v-model="addEBooks.author" 351 v-model="addEBooks.author"
352 placeholder="fill your Author Name" 352 placeholder="fill your Author Name"
353 name="name" 353 name="name"
354 type="text" 354 type="text"
355 :rules="titleRules" 355 :rules="titleRules"
356 required 356 required
357 ></v-text-field> 357 ></v-text-field>
358 </v-flex> 358 </v-flex>
359 </v-layout> 359 </v-layout>
360 </v-flex> 360 </v-flex>
361 <v-flex xs12> 361 <v-flex xs12>
362 <v-layout> 362 <v-layout>
363 <v-flex xs4 class="pt-4 subheading"> 363 <v-flex xs4 class="pt-4 subheading">
364 <label class="right">Class:</label> 364 <label class="right">Class:</label>
365 </v-flex> 365 </v-flex>
366 <v-flex xs7 class="ml-3"> 366 <v-flex xs7 class="ml-3">
367 <v-select 367 <v-select
368 v-model="addEBooks.classId" 368 v-model="addEBooks.classId"
369 :items="addClass" 369 :items="addClass"
370 label="Select Class" 370 label="Select Class"
371 item-text="classNum" 371 item-text="classNum"
372 item-value="_id" 372 item-value="_id"
373 :rules="titleRules" 373 :rules="titleRules"
374 required 374 required
375 ></v-select> 375 ></v-select>
376 </v-flex> 376 </v-flex>
377 </v-layout> 377 </v-layout>
378 </v-flex> 378 </v-flex>
379 <v-flex xs12> 379 <v-flex xs12>
380 <v-layout> 380 <v-layout>
381 <v-flex xs4 class="pt-4 subheading"> 381 <v-flex xs4 class="pt-4 subheading">
382 <label class="right">Upload Image:</label> 382 <label class="right">Upload Image:</label>
383 </v-flex> 383 </v-flex>
384 <v-flex xs7 class="ml-3"> 384 <v-flex xs7 class="ml-3">
385 <v-text-field 385 <v-text-field
386 label="Select Image" 386 label="Select Image"
387 @click="pickImage" 387 @click="pickImage"
388 v-model="imageName" 388 v-model="imageName"
389 append-icon="attach_file" 389 append-icon="attach_file"
390 ></v-text-field> 390 ></v-text-field>
391 </v-flex> 391 </v-flex>
392 </v-layout> 392 </v-layout>
393 </v-flex> 393 </v-flex>
394 <v-flex xs12> 394 <v-flex xs12>
395 <v-layout> 395 <v-layout>
396 <v-flex xs4 class="pt-4 subheading"> 396 <v-flex xs4 class="pt-4 subheading">
397 <label class="right">Upload File:</label> 397 <label class="right">Upload File:</label>
398 </v-flex> 398 </v-flex>
399 <v-flex xs8 class="ml-3"> 399 <v-flex xs8 class="ml-3">
400 <input type="file" style="display: none" ref="file" @change="onFilePicked" /> 400 <input type="file" style="display: none" ref="file" @change="onFilePicked" />
401 <v-text-field 401 <v-text-field
402 label="Select File" 402 label="Select File"
403 @click="pickFile" 403 @click="pickFile"
404 v-model="fileName" 404 v-model="fileName"
405 append-icon="attach_file" 405 append-icon="attach_file"
406 ></v-text-field> 406 ></v-text-field>
407 </v-flex> 407 </v-flex>
408 </v-layout> 408 </v-layout>
409 </v-flex> 409 </v-flex>
410 <v-flex xs12> 410 <v-flex xs12>
411 <v-layout> 411 <v-layout>
412 <v-flex xs4 class="pt-3 subheading"> 412 <v-flex xs4 class="pt-3 subheading">
413 <label class="right">Private:</label> 413 <label class="right">Private:</label>
414 </v-flex> 414 </v-flex>
415 <v-flex xs7 class="ml-3"> 415 <v-flex xs7 class="ml-3">
416 <v-checkbox v-model="addEBooks.private" :rules="uploadPrivateRule"></v-checkbox> 416 <v-checkbox v-model="addEBooks.private" :rules="uploadPrivateRule"></v-checkbox>
417 </v-flex> 417 </v-flex>
418 </v-layout> 418 </v-layout>
419 </v-flex> 419 </v-flex>
420 <v-layout> 420 <v-layout>
421 <v-flex xs12> 421 <v-flex xs12>
422 <v-card-actions> 422 <v-card-actions>
423 <v-spacer></v-spacer> 423 <v-spacer></v-spacer>
424 <v-btn @click="clear" round dark class="clear-button">clear</v-btn> 424 <v-btn @click="clear" round dark class="clear-button">clear</v-btn>
425 <v-btn @click="submit" round dark :loading="loading" class="add-button">Add</v-btn> 425 <v-btn @click="submit" round dark :loading="loading" class="add-button">Add</v-btn>
426 </v-card-actions> 426 </v-card-actions>
427 </v-flex> 427 </v-flex>
428 </v-layout> 428 </v-layout>
429 </v-container> 429 </v-container>
430 </v-form> 430 </v-form>
431 </v-card> 431 </v-card>
432 </v-dialog> 432 </v-dialog>
433 <div class="loader" v-if="showLoader"> 433 <div class="loader" v-if="showLoader">
434 <v-progress-circular indeterminate color="white"></v-progress-circular> 434 <v-progress-circular indeterminate color="white"></v-progress-circular>
435 </div> 435 </div>
436 </v-container> 436 </v-container>
437 </template> 437 </template>
438 438
439 <script> 439 <script>
440 import http from "@/Services/http.js"; 440 import http from "@/Services/http.js";
441 import Util from "@/util"; 441 import Util from "@/util";
442 442
443 export default { 443 export default {
444 data: () => ({ 444 data: () => ({
445 snackbar: false, 445 snackbar: false,
446 y: "top", 446 y: "top",
447 x: "right", 447 x: "right",
448 mode: "", 448 mode: "",
449 timeout: 3000, 449 timeout: 3000,
450 text: "", 450 text: "",
451 show: true, 451 show: true,
452 showSearch: false, 452 showSearch: false,
453 loading: false, 453 loading: false,
454 loadingUpadte: false, 454 loadingUpadte: false,
455 date: null, 455 date: null,
456 search: "", 456 search: "",
457 showLoader: false, 457 showLoader: false,
458 editEbookDialog: false, 458 editEbookDialog: false,
459 viewEbookDialog: false, 459 viewEbookDialog: false,
460 valid: true, 460 valid: true,
461 addEBookDialog: false, 461 addEBookDialog: false,
462 editLoading: false, 462 editLoading: false,
463 addClass: [], 463 addClass: [],
464 addSection: [], 464 addSection: [],
465 pagination: { 465 pagination: {
466 rowsPerPage: 10, 466 rowsPerPage: 10,
467 }, 467 },
468 imageName: "", 468 imageName: "",
469 fileName: "", 469 fileName: "",
470 imageUrl: "", 470 imageUrl: "",
471 imageFile: "", 471 imageFile: "",
472 image: [], 472 image: [],
473 upload: "", 473 upload: "",
474 files: "", 474 files: "",
475 anyFile: "", 475 anyFile: "",
476 titleRules: [(v) => !!v || " Tilte is required"], 476 titleRules: [(v) => !!v || " Tilte is required"],
477 descriptionRules: [(v) => !!v || " Description is required"], 477 descriptionRules: [(v) => !!v || " Description is required"],
478 uploadImageRule: [(v) => !!v || " field is required"], 478 uploadImageRule: [(v) => !!v || " field is required"],
479 uploadFileRule: [(v) => !!v || " fied is required"], 479 uploadFileRule: [(v) => !!v || " fied is required"],
480 uploadPrivateRule: [(v) => !!v || " fied is required"], 480 uploadPrivateRule: [(v) => !!v || " fied is required"],
481 481
482 headers: [ 482 headers: [
483 { 483 {
484 align: "left", 484 align: "left",
485 text: "No", 485 text: "No",
486 sortable: false, 486 sortable: false,
487 value: "No", 487 value: "No",
488 }, 488 },
489 { text: "Photo", vaue: "fileUrl", sortable: false, align: "center" }, 489 { text: "Photo", vaue: "fileUrl", sortable: false, align: "center" },
490 { text: "Name", vaue: "name", sortable: false, align: "center" }, 490 { text: "Name", vaue: "name", sortable: false, align: "center" },
491 { text: "Author", value: "author", sortable: false, align: "center" }, 491 { text: "Author", value: "author", sortable: false, align: "center" },
492 { 492 {
493 text: "Class", 493 text: "Class",
494 value: "classId", 494 value: "classId",
495 sortable: false, 495 sortable: false,
496 align: "center", 496 align: "center",
497 }, 497 },
498 { text: "Action", value: "", sortable: false, align: "center" }, 498 { text: "Action", value: "", sortable: false, align: "center" },
499 ], 499 ],
500 eBookData: [], 500 eBookData: [],
501 editedIndex: -1, 501 editedIndex: -1,
502 addEBooks: { 502 addEBooks: {
503 private: false, 503 private: false,
504 }, 504 },
505 editedItem: {}, 505 editedItem: {},
506 editedItem: { 506 editedItem: {
507 classId: { 507 classId: {
508 classNum: "", 508 classNum: "",
509 }, 509 },
510 }, 510 },
511 token: "", 511 token: "",
512 uploadCover: {}, 512 uploadCover: {},
513 editImageName: "", 513 editImageName: "",
514 editFiles: "", 514 editFiles: "",
515 editAnyFile: "", 515 editAnyFile: "",
516 editFileName: "", 516 editFileName: "",
517 }), 517 }),
518 watch: { 518 watch: {
519 addEBookDialog: function (val) { 519 addEBookDialog: function (val) {
520 if (!val) { 520 if (!val) {
521 this.addEBooks = []; 521 this.addEBooks = [];
522 this.imageName = ""; 522 this.imageName = "";
523 this.fileName = ""; 523 this.fileName = "";
524 this.files = ""; 524 this.files = "";
525 } 525 }
526 }, 526 },
527 }, 527 },
528 methods: { 528 methods: {
529 editPickImage() { 529 editPickImage() {
530 this.$refs.editImage.click(); 530 this.$refs.editImage.click();
531 }, 531 },
532 pickImage() { 532 pickImage() {
533 this.$refs.image.click(); 533 this.$refs.image.click();
534 }, 534 },
535 pickFile() { 535 pickFile() {
536 this.$refs.file.click(); 536 this.$refs.file.click();
537 }, 537 },
538 editPickFile() { 538 editPickFile() {
539 this.$refs.editFile.click(); 539 this.$refs.editFile.click();
540 }, 540 },
541 onImagePicked(e) { 541 onImagePicked(e) {
542 // console.log(e) 542 // console.log(e)
543 const files = e.target.files; 543 const files = e.target.files;
544 /** fetch Image Name **/ 544 /** fetch Image Name **/
545 if (files[0] !== undefined) { 545 if (files[0] !== undefined) {
546 this.imageName = files[0].name; 546 this.imageName = files[0].name;
547 if (this.imageName.lastIndexOf(".") <= 0) { 547 if (this.imageName.lastIndexOf(".") <= 0) {
548 return; 548 return;
549 } 549 }
550 /** Select many image and showing many image add to news card **/ 550 /** Select many image and showing many image add to news card **/
551 const fr = new FileReader(); 551 const fr = new FileReader();
552 fr.readAsDataURL(files[0]); 552 fr.readAsDataURL(files[0]);
553 fr.addEventListener("load", () => { 553 fr.addEventListener("load", () => {
554 this.files = fr.result; 554 this.files = fr.result;
555 }); 555 });
556 } else { 556 } else {
557 this.imageName = ""; 557 this.imageName = "";
558 this.imageFile = ""; 558 this.imageFile = "";
559 this.files = ""; 559 this.files = "";
560 this.imageUrl = ""; 560 this.imageUrl = "";
561 } 561 }
562 }, 562 },
563 onEditImagePicked(e) { 563 onEditImagePicked(e) {
564 // console.log(e) 564 // console.log(e)
565 const files = e.target.files; 565 const files = e.target.files;
566 /** fetch Image Name **/ 566 /** fetch Image Name **/
567 if (files[0] !== undefined) { 567 if (files[0] !== undefined) {
568 this.editImageName = files[0].name; 568 this.editImageName = files[0].name;
569 if (this.editImageName.lastIndexOf(".") <= 0) { 569 if (this.editImageName.lastIndexOf(".") <= 0) {
570 return; 570 return;
571 } 571 }
572 /** Select many image and showing many image add to news card **/ 572 /** Select many image and showing many image add to news card **/
573 const fr = new FileReader(); 573 const fr = new FileReader();
574 fr.readAsDataURL(files[0]); 574 fr.readAsDataURL(files[0]);
575 fr.addEventListener("load", () => { 575 fr.addEventListener("load", () => {
576 this.editFiles = fr.result; 576 this.editFiles = fr.result;
577 }); 577 });
578 } else { 578 } else {
579 this.editImageName = ""; 579 this.editImageName = "";
580 this.editFiles = ""; 580 this.editFiles = "";
581 } 581 }
582 }, 582 },
583 getEBooksList() { 583 getEBooksList() {
584 this.showLoader = true; 584 this.showLoader = true;
585 http() 585 http()
586 .get("/getEBooksList", { 586 .get("/getEBooksList", {
587 params: { schoolId: this.$store.state.schoolId }, 587 params: { schoolId: this.$store.state.schoolId },
588 headers: { Authorization: "Bearer " + this.token }, 588 headers: { Authorization: "Bearer " + this.token },
589 }) 589 })
590 .then((response) => { 590 .then((response) => {
591 this.eBookData = response.data.data; 591 this.eBookData = response.data.data;
592 this.showLoader = false; 592 this.showLoader = false;
593 }) 593 })
594 .catch((error) => { 594 .catch((error) => {
595 // console.log("err====>", err); 595 // console.log("err====>", err);
596 this.showLoader = false; 596 this.showLoader = false;
597 if (error.response.status === 401) { 597 if (error.response.status === 401) {
598 this.$router.replace({ path: "/" }); 598 this.$router.replace({ path: "/" });
599 this.$store.dispatch("setToken", null); 599 this.$store.dispatch("setToken", null);
600 this.$store.dispatch("Id", null); 600 this.$store.dispatch("Id", null);
601 } 601 }
602 }); 602 });
603 }, 603 },
604 onFilePicked(e) { 604 onFilePicked(e) {
605 // console.log(e) 605 // console.log(e)
606 const files = e.target.files; 606 const files = e.target.files;
607 /** fetch Image Name **/ 607 /** fetch Image Name **/
608 if (files[0] !== undefined) { 608 if (files[0] !== undefined) {
609 this.fileName = files[0].name; 609 this.fileName = files[0].name;
610 if (this.fileName.lastIndexOf(".") <= 0) { 610 if (this.fileName.lastIndexOf(".") <= 0) {
611 return; 611 return;
612 } 612 }
613 const fr = new FileReader(); 613 const fr = new FileReader();
614 fr.readAsDataURL(files[0]); 614 fr.readAsDataURL(files[0]);
615 fr.addEventListener("load", () => { 615 fr.addEventListener("load", () => {
616 this.anyFile = fr.result; 616 this.anyFile = fr.result;
617 // console.log(" this.anyFile Url", this.anyFile ) 617 // console.log(" this.anyFile Url", this.anyFile )
618 }); 618 });
619 } else { 619 } else {
620 this.anyFile = ""; 620 this.anyFile = "";
621 this.fileName = ""; 621 this.fileName = "";
622 } 622 }
623 }, 623 },
624 onEditFilePicked(e) { 624 onEditFilePicked(e) {
625 // console.log(e) 625 // console.log(e)
626 const files = e.target.files; 626 const files = e.target.files;
627 /** fetch Image Name **/ 627 /** fetch Image Name **/
628 if (files[0] !== undefined) { 628 if (files[0] !== undefined) {
629 this.editFileName = files[0].name; 629 this.editFileName = files[0].name;
630 if (this.editFileName.lastIndexOf(".") <= 0) { 630 if (this.editFileName.lastIndexOf(".") <= 0) {
631 return; 631 return;
632 } 632 }
633 const fr = new FileReader(); 633 const fr = new FileReader();
634 fr.readAsDataURL(files[0]); 634 fr.readAsDataURL(files[0]);
635 fr.addEventListener("load", () => { 635 fr.addEventListener("load", () => {
636 this.editAnyFile = fr.result; 636 this.editAnyFile = fr.result;
637 // console.log(" this.anyFile Url", this.anyFile ) 637 // console.log(" this.anyFile Url", this.anyFile )
638 }); 638 });
639 } else { 639 } else {
640 this.editAnyFile = ""; 640 this.editAnyFile = "";
641 this.editFileName = ""; 641 this.editFileName = "";
642 } 642 }
643 }, 643 },
644 editItem(item) { 644 editItem(item) {
645 this.files = []; 645 this.files = [];
646 this.editedIndex = this.eBookData.indexOf(item); 646 this.editedIndex = this.eBookData.indexOf(item);
647 this.editedItem = Object.assign({}, item); 647 this.editedItem = Object.assign({}, item);
648 this.editedItem.className = item.classId.classNum; 648 this.editedItem.className = item.classId.classNum;
649 this.editEbookDialog = true; 649 this.editEbookDialog = true;
650 }, 650 },
651 profile(item) { 651 profile(item) {
652 this.editedIndex = this.eBookData.indexOf(item); 652 this.editedIndex = this.eBookData.indexOf(item);
653 this.editedItem = Object.assign({}, item); 653 this.editedItem = Object.assign({}, item);
654 this.viewEbookDialog = true; 654 this.viewEbookDialog = true;
655 }, 655 },
656 deleteItem(item) { 656 deleteItem(item) {
657 let deleteEBooks = { 657 let deleteEBooks = {
658 ebookId: item._id, 658 ebookId: item._id,
659 }; 659 };
660 http() 660 http()
661 .delete( 661 .delete(
662 "/deleteEBook", 662 "/deleteEBook",
663 confirm("Are you sure you want to delete this?") && { 663 confirm("Are you sure you want to delete this?") && {
664 params: deleteEBooks, 664 params: deleteEBooks,
665 } 665 }
666 ) 666 )
667 .then((response) => { 667 .then((response) => {
668 this.snackbar = true; 668 this.snackbar = true;
669 this.text = "Successfully delete Existing News"; 669 this.text = "Successfully delete Existing News";
670 this.getEBooksList(); 670 this.getEBooksList();
671 }) 671 })
672 .catch((error) => { 672 .catch((error) => {
673 this.snackbar = true; 673 this.snackbar = true;
674 this.text = error.response.data.message; 674 this.text = error.response.data.message;
675 }); 675 });
676 }, 676 },
677 close() { 677 close() {
678 this.editEbookDialog = false; 678 this.editEbookDialog = false;
679 }, 679 },
680 close1() { 680 close1() {
681 this.viewEbookDialog = false; 681 this.viewEbookDialog = false;
682 }, 682 },
683 closeAddEBookModel() { 683 closeAddEBookModel() {
684 this.addEBookDialog = false; 684 this.addEBookDialog = false;
685 // this.eBookData = []; 685 // this.eBookData = [];
686 this.addEBooks = []; 686 this.addEBooks = [];
687 this.imageName = ""; 687 this.imageName = "";
688 this.fileName = ""; 688 this.fileName = "";
689 this.files = ""; 689 this.files = "";
690 }, 690 },
691 submit() { 691 submit() {
692 if (this.$refs.form.validate()) { 692 if (this.$refs.form.validate()) {
693 this.loading = true; 693 this.loading = true;
694 var uploadCover = ""; 694 var uploadCover = "";
695 var uploadFile = ""; 695 var uploadFile = "";
696 if (this.files) { 696 if (this.files) {
697 const [baseUrl, imageUrl] = this.files.split(/,/); 697 const [baseUrl, imageUrl] = this.files.split(/,/);
698 uploadCover = imageUrl; 698 uploadCover = imageUrl;
699 // console.log("anyFile.split(/,/)", uploadCover); 699 // console.log("anyFile.split(/,/)", uploadCover);
700 } 700 }
701 if (this.anyFile) { 701 if (this.anyFile) {
702 const [baseUrl, fileUrl] = this.anyFile.split(/,/); 702 const [baseUrl, fileUrl] = this.anyFile.split(/,/);
703 uploadFile = fileUrl; 703 uploadFile = fileUrl;
704 // console.log("anyFile.split(/,/)", uploadFile); 704 // console.log("anyFile.split(/,/)", uploadFile);
705 } 705 }
706 let data = { 706 let data = {
707 classId: this.addEBooks.classId, 707 classId: this.addEBooks.classId,
708 name: this.addEBooks.name, 708 name: this.addEBooks.name,
709 author: this.addEBooks.author, 709 author: this.addEBooks.author,
710 private: this.addEBooks.private, 710 private: this.addEBooks.private,
711 uploadCover: uploadCover, 711 uploadCover: uploadCover,
712 uploadFile: uploadFile, 712 uploadFile: uploadFile,
713 }; 713 };
714 http() 714 http()
715 .post("/createEBook", data) 715 .post("/createEBook", data)
716 .then((response) => { 716 .then((response) => {
717 this.getEBooksList(); 717 this.getEBooksList();
718 // this.getEBooksList = []; 718 // this.getEBooksList = [];
719 this.addEBookDialog = false; 719 this.addEBookDialog = false;
720 this.snackbar = true; 720 this.snackbar = true;
721 this.text = response.data.message; 721 this.text = response.data.message;
722 this.color = "green"; 722 this.color = "green";
723 this.loading = false; 723 this.loading = false;
724 (this.imageName = ""), (this.fileName = ""); 724 (this.imageName = ""), (this.fileName = "");
725 }) 725 })
726 .catch((error) => { 726 .catch((error) => {
727 this.snackbar = true; 727 this.snackbar = true;
728 this.text = error.response.data.message; 728 this.text = error.response.data.message;
729 this.color = "red"; 729 this.color = "red";
730 }); 730 });
731 } 731 }
732 }, 732 },
733 clear() { 733 clear() {
734 this.$refs.form.reset(); 734 this.$refs.form.reset();
735 this.addEBooks.uploadCover = ""; 735 this.addEBooks.uploadCover = "";
736 this.files = ""; 736 this.files = "";
737 }, 737 },
738 save() { 738 save() {
739 this.editLoading = true; 739 this.editLoading = true;
740 this.loadingUpadte = true; 740 this.loadingUpadte = true;
741 if (this.editFiles) { 741 if (this.editFiles) {
742 const [baseUrl, imageUrl] = this.editFiles.split(/,/); 742 const [baseUrl, imageUrl] = this.editFiles.split(/,/);
743 this.editedItem.uploadCover = imageUrl; 743 this.editedItem.uploadCover = imageUrl;
744 // console.log("anyFile.split(/,/)", this.addEBooks.uploadCover); 744 // console.log("anyFile.split(/,/)", this.addEBooks.uploadCover);
745 } 745 }
746 if (this.editAnyFile) { 746 if (this.editAnyFile) {
747 const [baseUrl, fileUrl] = this.editAnyFile.split(/,/); 747 const [baseUrl, fileUrl] = this.editAnyFile.split(/,/);
748 this.editedItem.uploadFile = fileUrl; 748 this.editedItem.uploadFile = fileUrl;
749 // console.log("anyFile.split(/,/)", this.addEBooks.uploadFile); 749 // console.log("anyFile.split(/,/)", this.addEBooks.uploadFile);
750 } 750 }
751 if (this.editedItem.classId._id) { 751 if (this.editedItem.classId._id) {
752 this.editedItem.classId = this.editedItem.classId._id; 752 this.editedItem.classId = this.editedItem.classId._id;
753 } 753 }
754 this.editedItem.ebookId = this.editedItem._id; 754 this.editedItem.ebookId = this.editedItem._id;
755 // console.log("this.editedItem", this.editedItem); 755 // console.log("this.editedItem", this.editedItem);
756 http() 756 http()
757 .put("/updateEBook", this.editedItem) 757 .put("/updateEBook", this.editedItem)
758 .then((response) => { 758 .then((response) => {
759 this.loadingUpadte = false; 759 this.loadingUpadte = false;
760 this.snackbar = true; 760 this.snackbar = true;
761 this.text = "Successfully Edit Existing E-Book"; 761 this.text = "Successfully Edit Existing E-Book";
762 this.getEBooksList(); 762 this.getEBooksList();
763 this.editLoading = false; 763 this.editLoading = false;
764 this.editedItem.uploadFile = ""; 764 this.editedItem.uploadFile = "";
765 this.editedItem.uploadCover = ""; 765 this.editedItem.uploadCover = "";
766 this.anyFile = ""; 766 this.anyFile = "";
767 this.files = ""; 767 this.files = "";
768 this.close(); 768 this.close();
769 }) 769 })
770 .catch((error) => { 770 .catch((error) => {
771 this.editLoading = false; 771 this.editLoading = false;
772 this.loadingUpadte = false; 772 this.loadingUpadte = false;
773 this.snackbar = true; 773 this.snackbar = true;
774 this.text = error.response.data.message; 774 this.text = error.response.data.message;
775 // console.log(error); 775 // console.log(error);
776 }); 776 });
777 }, 777 },
778 getAllClass() { 778 getAllClass() {
779 http() 779 http()
780 .get("/getClassesList", { 780 .get("/getClassesList", {
781 headers: { Authorization: "Bearer " + this.token }, 781 headers: { Authorization: "Bearer " + this.token },
782 }) 782 })
783 .then((response) => { 783 .then((response) => {
784 this.addClass = response.data.data; 784 this.addClass = response.data.data;
785 }) 785 })
786 .catch((err) => { 786 .catch((err) => {
787 // console.log("err====>", err); 787 // console.log("err====>", err);
788 // this.$router.replace({ path: "/" }); 788 // this.$router.replace({ path: "/" });
789 }); 789 });
790 }, 790 },
791 displaySearch() { 791 displaySearch() {
792 (this.show = false), (this.showSearch = true); 792 (this.show = false), (this.showSearch = true);
793 }, 793 },
794 closeSearch() { 794 closeSearch() {
795 this.showSearch = false; 795 this.showSearch = false;
796 this.show = true; 796 this.show = true;
797 this.search = ""; 797 this.search = "";
798 }, 798 },
799 }, 799 },
800 mounted() { 800 mounted() {
801 this.token = this.$store.state.token; 801 this.token = this.$store.state.token;
802 this.getEBooksList(); 802 this.getEBooksList();
803 this.getAllClass(); 803 this.getAllClass();
804 this.role = this.$store.state.role; 804 this.role = this.$store.state.role;
805 // this.getBookData(); 805 // this.getBookData();
806 // this.editItem; 806 // this.editItem;
807 }, 807 },
808 }; 808 };
809 </script> 809 </script>
src/pages/Library/member.vue
Diff comments   View file @8b7976c
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 persistent> 14 <v-dialog v-model="dialogStudents" max-width="1100px" scrollable persistent>
15 <v-card> 15 <v-card>
16 <v-toolbar dark class="card-styles" flat> 16 <v-toolbar dark class="card-styles" flat>
17 <v-spacer></v-spacer> 17 <v-spacer></v-spacer>
18 <v-toolbar-title>View Student Profile</v-toolbar-title> 18 <v-toolbar-title>View 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 persistent> 337 <v-dialog v-model="editStudentdialog" max-width="600px" scrollable persistent>
338 <v-card flat> 338 <v-card flat>
339 <v-toolbar dark class="card-styles" flat> 339 <v-toolbar dark class="card-styles" 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-icon @click="editStudentdialog = false">close</v-icon>
345 <v-icon @click="editStudentdialog = false">close</v-icon> 346 </v-toolbar>
346 </v-toolbar> 347 <v-card-text style="height: 426px;">
347 <v-card-text style="height: 426px;"> 348 <v-form ref="form">
348 <v-form ref="form"> 349 <v-container fluid>
349 <v-container fluid> 350 <v-layout>
350 <v-layout> 351 <v-flex
351 <v-flex 352 xs12
352 xs12 353 class="text-xs-center text-sm-center text-md-center text-lg-center mr-4"
353 class="text-xs-center text-sm-center text-md-center text-lg-center mr-4" 354 >
354 > 355 <v-avatar size="160px">
355 <v-avatar size="160px"> 356 <img src="/static/icon/user.png" v-if="!editedItem.profilePicUrl && !imageUrl" />
356 <img src="/static/icon/user.png" v-if="!editedItem.profilePicUrl && !imageUrl" /> 357 <img
357 <img 358 :src="editedItem.profilePicUrl"
358 :src="editedItem.profilePicUrl" 359 v-else-if="editedItem.profilePicUrl && !imageUrl"
359 v-else-if="editedItem.profilePicUrl && !imageUrl" 360 />
360 /> 361 <img
361 <img 362 v-if="imageUrl"
362 v-if="imageUrl" 363 :src="imageUrl"
363 :src="imageUrl" 364 height="150"
364 height="150" 365 style="border-radius:50%; width:200px"
365 style="border-radius:50%; width:200px" 366 />
366 /> 367 </v-avatar>
367 </v-avatar> 368 </v-flex>
368 </v-flex> 369 </v-layout>
369 </v-layout> 370 <v-layout wrap>
370 <v-layout wrap> 371 <v-flex xs12 sm12 md10>
371 <v-flex xs12 sm12 md10> 372 <v-layout>
372 <v-layout> 373 <v-flex xs4 class="pt-4 subheading">
373 <v-flex xs4 class="pt-4 subheading"> 374 <label class="right hidden-xs-only hidden-sm-only">Library ID:</label>
374 <label class="right hidden-xs-only hidden-sm-only">Library ID:</label> 375 <label class="right hidden-lg-only hidden-md-only hidden-xl-only">Library ID:</label>
375 <label class="right hidden-lg-only hidden-md-only hidden-xl-only">Library ID:</label> 376 </v-flex>
376 </v-flex> 377 <v-flex xs8 class="ml-3">
377 <v-flex xs8 class="ml-3"> 378 <v-text-field
378 <v-text-field 379 v-model="editedItem.libraryId"
379 v-model="editedItem.libraryId" 380 placeholder="fill your Library ID"
380 placeholder="fill your Library ID" 381 ></v-text-field>
381 ></v-text-field> 382 </v-flex>
382 </v-flex> 383 </v-layout>
383 </v-layout> 384 </v-flex>
384 </v-flex> 385 <v-flex xs12 sm12 md10>
385 <v-flex xs12 sm12 md10> 386 <v-layout>
386 <v-layout> 387 <v-flex xs4 class="pt-4 subheading">
387 <v-flex xs4 class="pt-4 subheading"> 388 <label class="right hidden-xs-only hidden-sm-only">Library Fee:</label>
388 <label class="right hidden-xs-only hidden-sm-only">Library Fee:</label> 389 <label class="right hidden-lg-only hidden-md-only hidden-xl-only">Library Fee:</label>
389 <label class="right hidden-lg-only hidden-md-only hidden-xl-only">Library Fee:</label> 390 </v-flex>
390 </v-flex> 391 <v-flex xs8 class="ml-3">
391 <v-flex xs8 class="ml-3"> 392 <v-text-field
392 <v-text-field 393 v-model="editedItem.libraryFee"
393 v-model="editedItem.libraryFee" 394 placeholder="fill your Library Fee"
394 placeholder="fill your Library Fee" 395 ></v-text-field>
395 ></v-text-field> 396 </v-flex>
396 </v-flex> 397 </v-layout>
397 </v-layout> 398 </v-flex>
398 </v-flex> 399 </v-layout>
399 </v-layout> 400 <v-layout>
400 <v-layout> 401 <v-flex xs12 sm12>
401 <v-flex xs12 sm12> 402 <v-layout class="right">
402 <v-layout class="right"> 403 <v-flex xs6>
403 <v-flex xs6> 404 <v-btn
404 <v-btn 405 round
405 round 406 dark
406 dark 407 class="clear-button"
407 class="clear-button" 408 @click.native="closeEditStudentDialog"
408 @click.native="closeEditStudentDialog" 409 >Cancel</v-btn>
409 >Cancel</v-btn> 410 </v-flex>
410 </v-flex> 411 <v-flex xs6>
411 <v-flex xs6> 412 <v-btn @click="save" round dark :loading="loading" class="add-button">Save</v-btn>
412 <v-btn @click="save" round dark :loading="loading" class="add-button">Save</v-btn> 413 </v-flex>
413 </v-flex> 414 </v-layout>
414 </v-layout> 415 </v-flex>
415 </v-flex> 416 </v-layout>
416 </v-layout> 417 </v-container>
417 </v-container> 418 </v-form>
418 </v-form> 419 </v-card-text>
419 </v-card-text> 420 </v-card>
420 </v-card> 421 </v-dialog>
421 </v-dialog> 422 <!-- Add Student Library Member Dialog -->
422 <!-- Add Student Library Member Dialog --> 423
423 424 <v-dialog v-model="addLibrary" max-width="600px" v-if="addLibrary" persistent>
424 <v-dialog v-model="addLibrary" max-width="600px" v-if="addLibrary" persistent> 425 <v-card flat class="card-style pa-2" dark>
425 <v-card flat class="card-style pa-2" dark> 426 <v-layout>
426 <v-layout> 427 <v-flex xs12>
427 <v-flex xs12> 428 <label class="title text-xs-center">Add Library Member</label>
428 <label class="title text-xs-center">Add Library Member</label> 429 <v-icon size="24" class="right" @click="closeAddLibraryModel">cancel</v-icon>
429 <v-icon size="24" class="right" @click="closeAddLibraryModel">cancel</v-icon> 430 </v-flex>
430 </v-flex> 431 </v-layout>
431 </v-layout> 432 <v-card-text>
432 <v-card-text> 433 <v-layout wrap justify-center>
433 <v-layout wrap justify-center> 434 <v-flex xs12 sm12 md10>
434 <v-flex xs12 sm12 md10> 435 <v-form ref="form" v-model="valid" lazy-validation>
435 <v-form ref="form" v-model="valid" lazy-validation> 436 <v-layout>
436 <v-layout> 437 <v-flex xs4 class="pt-4 subheading">
437 <v-flex xs4 class="pt-4 subheading"> 438 <label class="right pr-3">Library Id:</label>
438 <label class="right pr-3">Library Id:</label> 439 </v-flex>
439 </v-flex> 440 <v-flex xs8>
440 <v-flex xs8> 441 <v-text-field
441 <v-text-field 442 v-model="addBook.libraryId"
442 v-model="addBook.libraryId" 443 :rules="libraryIdRules"
443 :rules="libraryIdRules" 444 type="number"
444 type="number" 445 placeholder="fill your Library ID"
445 placeholder="fill your Library ID" 446 ></v-text-field>
446 ></v-text-field> 447 </v-flex>
447 </v-flex> 448 </v-layout>
448 </v-layout> 449 <v-layout>
449 <v-layout> 450 <v-flex xs4 class="pt-4 subheading">
450 <v-flex xs4 class="pt-4 subheading"> 451 <label class="right pr-3">Library Fee:</label>
451 <label class="right pr-3">Library Fee:</label> 452 </v-flex>
452 </v-flex> 453 <v-flex xs8>
453 <v-flex xs8> 454 <v-text-field
454 <v-text-field 455 v-model="addBook.libraryFee"
455 v-model="addBook.libraryFee" 456 type="number"
456 type="number" 457 :rules="libraryFeeRules"
457 :rules="libraryFeeRules" 458 placeholder="fill your Library Fee"
458 placeholder="fill your Library Fee" 459 ></v-text-field>
459 ></v-text-field> 460 </v-flex>
460 </v-flex> 461 </v-layout>
461 </v-layout> 462 <v-layout>
462 <v-layout> 463 <v-flex xs12 sm12>
463 <v-flex xs12 sm12> 464 <v-layout class="right">
464 <v-layout class="right"> 465 <v-btn
465 <v-btn 466 round
466 round 467 dark
467 dark 468 class="clear-button"
468 class="clear-button" 469 @click.native="addLibrary = false"
469 @click.native="addLibrary = false" 470 >Cancel</v-btn>
470 >Cancel</v-btn> 471 <v-btn round dark :loading="loading" class="add-button" @click="submit">Add</v-btn>
471 <v-btn round dark :loading="loading" class="add-button" @click="submit">Add</v-btn> 472 </v-layout>
472 </v-layout> 473 </v-flex>
473 </v-flex> 474 </v-layout>
474 </v-layout> 475 </v-form>
475 </v-form> 476 </v-flex>
476 </v-flex> 477 </v-layout>
477 </v-layout> 478 </v-card-text>
478 </v-card-text> 479 </v-card>
479 </v-card> 480 </v-dialog>
480 </v-dialog> 481 <!-- ****** EXISTING MEMBER TABLE ****** -->
481 <!-- ****** EXISTING MEMBER TABLE ****** --> 482 <v-card flat>
482 <v-card flat> 483 <!-- <h4
483 <!-- <h4 484 class="text-xs-center pt-4 ml-2 hidden-lg-only hidden-xl-only hidden-md-only"
484 class="text-xs-center pt-4 ml-2 hidden-lg-only hidden-xl-only hidden-md-only" 485 >Library Member</h4>-->
485 >Library Member</h4>--> 486 <v-card-actions>
486 <v-card-actions> 487 <!-- <h3 class="right mt-2 ml-2 hidden-sm-only hidden-xs-only">Library Member</h3> -->
487 <!-- <h3 class="right mt-2 ml-2 hidden-sm-only hidden-xs-only">Library Member</h3> --> 488 <v-spacer></v-spacer>
488 <v-spacer></v-spacer> 489 <v-flex xs12 sm4 md2>
489 <v-flex xs12 sm4 md2> 490 <v-select
490 <v-select 491 outline
491 outline 492 small
492 small 493 :items="addclass"
493 :items="addclass" 494 label="Select Class"
494 label="Select Class" 495 v-model="selectStudents"
495 v-model="selectStudents" 496 item-text="classNum"
496 item-text="classNum" 497 item-value="_id"
497 item-value="_id" 498 name="Select Class"
498 name="Select Class" 499 @change="getAllStudents(selectStudents)"
499 @change="getAllStudents(selectStudents)" 500 class="px-2"
500 class="px-2" 501 required
501 required 502 ></v-select>
502 ></v-select> 503 </v-flex>
503 </v-flex> 504 </v-card-actions>
504 </v-card-actions> 505 </v-card>
505 </v-card> 506 <v-card class="transparent">
506 <v-card class="transparent"> 507 <v-data-table
507 <v-data-table 508 :headers="headers"
508 :headers="headers" 509 :items="studentData"
509 :items="studentData" 510 :pagination.sync="pagination"
510 :pagination.sync="pagination" 511 :search="search"
511 :search="search" 512 >
512 > 513 <template slot="items" slot-scope="props">
513 <template slot="items" slot-scope="props"> 514 <tr class="tr">
514 <tr class="tr"> 515 <td class="td td-row text-xs-center">{{ props.index + 1 }}</td>
515 <td class="td td-row text-xs-center">{{ props.index + 1 }}</td> 516 <td class="td td-row text-xs-center">
516 <td class="td td-row text-xs-center"> 517 <v-avatar>
517 <v-avatar> 518 <img :src="props.item.profilePicUrl" v-if="props.item.profilePicUrl" />
518 <img :src="props.item.profilePicUrl" v-if="props.item.profilePicUrl" /> 519 <img src="/static/icon/user.png" v-else-if="!props.item.profilePicUrl" />
519 <img src="/static/icon/user.png" v-else-if="!props.item.profilePicUrl" /> 520 </v-avatar>
520 </v-avatar> 521 </td>
521 </td> 522 <td class="td td-row text-xs-center">{{ props.item.name}}</td>
522 <td class="td td-row text-xs-center">{{ props.item.name}}</td> 523 <td class="td td-row text-xs-center">{{ props.item.rollNo }}</td>
523 <td class="td td-row text-xs-center">{{ props.item.rollNo }}</td> 524 <td class="td td-row text-xs-center">{{ props.item.email }}</td>
524 <td class="td td-row text-xs-center">{{ props.item.email }}</td> 525 <td class="td td-row text-xs-center">
525 <td class="td td-row text-xs-center"> 526 <v-tooltip top>
526 <v-tooltip top> 527 <img
527 <img 528 slot="activator"
528 slot="activator" 529 v-if="!props.item.libraryId"
529 v-if="!props.item.libraryId" 530 style="cursor:pointer; width:25px; height:18px; "
530 style="cursor:pointer; width:25px; height:18px; " 531 @click="addLibraryData(props.item)"
531 @click="addLibraryData(props.item)" 532 src="/static/icon/add.png"
532 src="/static/icon/add.png" 533 />
533 /> 534 <span>Add</span>
534 <span>Add</span> 535 </v-tooltip>
535 </v-tooltip> 536 <span v-if="props.item.libraryId">
536 <span v-if="props.item.libraryId"> 537 <v-tooltip top>
537 <v-tooltip top> 538 <img
538 <img 539 slot="activator"
539 slot="activator" 540 style="cursor:pointer; width:25px; height:18px; "
540 style="cursor:pointer; width:25px; height:18px; " 541 class="mr5"
541 class="mr5" 542 @click="profile(props.item)"
542 @click="profile(props.item)" 543 src="/static/icon/eye1.png"
543 src="/static/icon/eye1.png" 544 />
544 /> 545 <span>View</span>
545 <span>View</span> 546 </v-tooltip>
546 </v-tooltip> 547 <v-tooltip top>
547 <v-tooltip top> 548 <img
548 <img 549 slot="activator"
549 slot="activator" 550 style="cursor:pointer; width:20px; height:18px; "
550 style="cursor:pointer; width:20px; height:18px; " 551 class="mr5"
551 class="mr5" 552 @click="editItem(props.item)"
552 @click="editItem(props.item)" 553 src="/static/icon/edit1.png"
553 src="/static/icon/edit1.png" 554 />
554 /> 555 <span>Edit</span>
555 <span>Edit</span> 556 </v-tooltip>
556 </v-tooltip> 557 <v-tooltip top>
557 <v-tooltip top> 558 <img
558 <img 559 slot="activator"
559 slot="activator" 560 style="cursor:pointer; width:20px; height:20px; "
560 style="cursor:pointer; width:20px; height:20px; " 561 class="mr5"
561 class="mr5" 562 @click="deleteItem(props.item)"
562 @click="deleteItem(props.item)" 563 src="/static/icon/delete1.png"
563 src="/static/icon/delete1.png" 564 />
564 /> 565 <span>Delete</span>
565 <span>Delete</span> 566 </v-tooltip>
566 </v-tooltip> 567 </span>
567 </span> 568 </td>
568 </td> 569 </tr>
569 </tr> 570 </template>
570 </template> 571 <v-alert
571 <v-alert 572 slot="no-results"
572 slot="no-results" 573 :value="true"
573 :value="true" 574 color="error"
574 color="error" 575 icon="warning"
575 icon="warning" 576 >Your search for "{{ search }}" found no results.</v-alert>
576 >Your search for "{{ search }}" found no results.</v-alert> 577 </v-data-table>
577 </v-data-table> 578 </v-card>
578 </v-card> 579 <div class="loader" v-if="showLoader">
579 <div class="loader" v-if="showLoader"> 580 <v-progress-circular indeterminate color="white"></v-progress-circular>
580 <v-progress-circular indeterminate color="white"></v-progress-circular> 581 </div>
581 </div> 582 </div>
582 </div> 583 </template>
583 </template> 584
584 585 <script>
585 <script> 586 import http from "@/Services/http.js";
586 import http from "@/Services/http.js"; 587 import Util from "@/util";
587 import Util from "@/util"; 588 import moment from "moment";
588 import moment from "moment"; 589
589 590 export default {
590 export default { 591 data: () => ({
591 data: () => ({ 592 snackbar: false,
592 snackbar: false, 593 y: "top",
593 y: "top", 594 x: "right",
594 x: "right", 595 mode: "",
595 mode: "", 596 timeout: 3000,
596 timeout: 3000, 597 text: "",
597 text: "", 598 showLoader: false,
598 showLoader: false, 599 loading: false,
599 loading: false, 600 addLibrary: false,
600 addLibrary: false, 601 dialogStudents: false,
601 dialogStudents: false, 602 editStudentdialog: false,
602 editStudentdialog: false, 603 valid: true,
603 valid: true, 604 libraryIdRules: [(v) => !!v || "Library Id Fee is required"],
604 libraryIdRules: [(v) => !!v || "Library Id Fee is required"], 605 libraryFeeRules: [(v) => !!v || "Library Fee is required"],
605 libraryFeeRules: [(v) => !!v || "Library Fee is required"], 606 date: null,
606 date: null, 607 search: "",
607 search: "", 608 addclass: [],
608 addclass: [], 609 pagination: {
609 pagination: { 610 rowsPerPage: 15,
610 rowsPerPage: 15, 611 },
611 }, 612 addBook: {},
612 addBook: {}, 613 imageName: "",
613 imageName: "", 614 imageUrl: "",
614 imageUrl: "", 615 imageFile: "",
615 imageFile: "", 616 headers: [
616 headers: [ 617 {
617 { 618 text: "No",
618 text: "No", 619 align: "center",
619 align: "center", 620 sortable: false,
620 sortable: false, 621 value: "index",
621 value: "index", 622 },
622 }, 623 {
623 { 624 text: "Photo",
624 text: "Photo", 625 value: "uploadCover",
625 value: "uploadCover", 626 sortable: false,
626 sortable: false, 627 align: "center",
627 align: "center", 628 },
628 }, 629 { text: "Name", value: "name", sortable: false, align: "center" },
629 { text: "Name", value: "name", sortable: false, align: "center" }, 630 { text: "Roll No.", value: "rollNo", sortable: false, align: "center" },
630 { text: "Roll No.", value: "rollNo", sortable: false, align: "center" }, 631 { text: "Email", value: "email", sortable: false, align: "center" },
631 { text: "Email", value: "email", sortable: false, align: "center" }, 632 { text: "Action", value: "", sortable: false, align: "center" },
632 { text: "Action", value: "", sortable: false, align: "center" }, 633 ],
633 ], 634 studentData: [],
634 studentData: [], 635 editedItem: {},
635 editedItem: {}, 636 parentId: "",
636 parentId: "", 637 token: "",
637 token: "", 638 selectStudents: {},
638 selectStudents: {}, 639 editedIndex: -1,
639 editedIndex: -1, 640 }),
640 }), 641 watch: {
641 watch: { 642 addLibrary: function (val) {
642 addLibrary: function (val) { 643 if (!val) {
643 if (!val) { 644 this.addBook = [];
644 this.addBook = []; 645 }
645 } 646 },
646 }, 647 },
647 }, 648 methods: {
648 methods: { 649 getAllStudents() {
649 getAllStudents() { 650 this.showLoader = true;
650 this.showLoader = true; 651 http()
651 http() 652 .get("/getStudentsList", {
652 .get("/getStudentsList", { 653 params: {
653 params: { 654 classId: this.selectStudents,
654 classId: this.selectStudents, 655 schoolId: this.$store.state.schoolId,
655 schoolId: this.$store.state.schoolId, 656 },
656 }, 657 headers: { Authorization: "Bearer " + this.token },
657 headers: { Authorization: "Bearer " + this.token }, 658 })
658 }) 659 .then((response) => {
659 .then((response) => { 660 this.studentData = response.data.data;
660 this.studentData = response.data.data; 661 this.showLoader = false;
661 this.showLoader = false; 662 })
662 }) 663 .catch((error) => {
663 .catch((error) => { 664 // console.log("err====>", err);
664 // console.log("err====>", err); 665 if (error.response.status === 401) {
665 if (error.response.status === 401) { 666 this.$router.replace({ path: "/" });
666 this.$router.replace({ path: "/" }); 667 this.$store.dispatch("setToken", null);
667 this.$store.dispatch("setToken", null); 668 this.$store.dispatch("Id", null);
668 this.$store.dispatch("Id", null); 669 this.$store.dispatch("Role", null);
669 this.$store.dispatch("Role", null); 670 }
670 } 671 });
671 }); 672 },
672 }, 673 addLibraryData(item) {
673 addLibraryData(item) { 674 this.addBook.studentId = item._id;
674 this.addBook.studentId = item._id; 675 this.addLibrary = true;
675 this.addLibrary = true; 676 },
676 }, 677 editItem(item) {
677 editItem(item) { 678 this.editedIndex = this.studentData.indexOf(item);
678 this.editedIndex = this.studentData.indexOf(item); 679 this.editedItem = Object.assign({}, item);
679 this.editedItem = Object.assign({}, item); 680 this.editStudentdialog = true;
680 this.editStudentdialog = true; 681 },
681 }, 682 dates: function (date) {
682 dates: function (date) { 683 return moment(date).format("MMMM DD, YYYY");
683 return moment(date).format("MMMM DD, YYYY"); 684 },
684 }, 685 profile(item) {
685 profile(item) { 686 // console.log("item", item);
686 // console.log("item", item); 687 this.editedIndex = this.studentData.indexOf(item);
687 this.editedIndex = this.studentData.indexOf(item); 688 this.editedItem = Object.assign({}, item);
688 this.editedItem = Object.assign({}, item); 689 this.dialogStudents = true;
689 this.dialogStudents = true; 690 },
690 }, 691 deleteItem(item) {
691 deleteItem(item) { 692 let deleteStudentLibraryData = {
692 let deleteStudentLibraryData = { 693 studentId: item._id,
693 studentId: item._id, 694 libraryId: item.libraryId,
694 libraryId: item.libraryId, 695 };
695 }; 696 http()
696 http() 697 .put(
697 .put( 698 "/deleteLibrary",
698 "/deleteLibrary", 699 confirm("Are you sure you want to delete this?") &&
699 confirm("Are you sure you want to delete this?") && 700 deleteStudentLibraryData
700 deleteStudentLibraryData 701 )
701 ) 702 .then((response) => {
702 .then((response) => { 703 this.snackbar = true;
703 this.snackbar = true; 704 this.text = "Delete Successfully";
704 this.text = "Delete Successfully"; 705 this.getAllStudents();
705 this.getAllStudents(); 706 })
706 }) 707 .catch((error) => {
707 .catch((error) => { 708 // console.log(error);
708 // console.log(error); 709 });
709 }); 710 },
710 }, 711 close() {
711 close() { 712 this.dialog = false;
712 this.dialog = false; 713 },
713 }, 714 closeEditStudentDialog() {
714 closeEditStudentDialog() { 715 this.editStudentdialog = false;
715 this.editStudentdialog = false; 716 },
716 }, 717 closeViewStudent() {
717 closeViewStudent() { 718 this.dialogStudents = false;
718 this.dialogStudents = false; 719 },
719 }, 720 closeAddLibraryModel() {
720 closeAddLibraryModel() { 721 this.addLibrary = false;
721 this.addLibrary = false; 722 this.addclass = [];
722 this.addclass = []; 723 this.addBook = [];
723 this.addBook = []; 724 },
724 }, 725 submit() {
725 submit() { 726 if (this.$refs.form.validate()) {
726 if (this.$refs.form.validate()) { 727 this.loading = true;
727 this.loading = true; 728 this.addBook.schoolId = this.$store.state.schoolId;
728 this.addBook.schoolId = this.$store.state.schoolId; 729 http()
729 http() 730 .put("/addLibrary", this.addBook)
730 .put("/addLibrary", this.addBook) 731 .then((response) => {
731 .then((response) => { 732 this.snackbar = true;
732 this.snackbar = true; 733 this.text = "New Library Member added successfully";
733 this.text = "New Library Member added successfully"; 734 this.getAllStudents();
734 this.getAllStudents(); 735 this.clear();
735 this.clear(); 736 this.addLibrary = false;
736 this.addLibrary = false; 737 this.loading = false;
737 this.loading = false; 738 })
738 }) 739 .catch((error) => {
739 .catch((error) => { 740 // console.log(error);
740 // console.log(error); 741 this.snackbar = true;
741 this.snackbar = true; 742 this.text = error.response.data.message;
742 this.text = error.response.data.message; 743 this.loading = false;
743 this.loading = false; 744 });
744 }); 745 }
745 } 746 },
746 }, 747 clear() {
747 clear() { 748 this.$refs.form.reset();
748 this.$refs.form.reset(); 749 },
749 }, 750 save() {
750 save() { 751 this.editedItem.studentId = this.editedItem._id;
751 this.editedItem.studentId = this.editedItem._id; 752 http()
752 http() 753 .put("/updateLibrary", this.editedItem)
753 .put("/updateLibrary", this.editedItem) 754 .then((response) => {
754 .then((response) => { 755 this.snackbar = true;
755 this.snackbar = true; 756 this.text = "Edit Library Member Successfully";
756 this.text = "Edit Library Member Successfully"; 757 this.getAllStudents();
757 this.getAllStudents(); 758 this.closeEditStudentDialog();
758 this.closeEditStudentDialog(); 759 })
759 }) 760 .catch((error) => {
760 .catch((error) => { 761 this.snackbar = true;
761 this.snackbar = true; 762 this.text = error.response.data.statusText;
762 this.text = error.response.data.statusText; 763 });
763 }); 764 },
764 }, 765 getAllClass() {
765 getAllClass() { 766 http()
766 http() 767 .get("/getClassesList", {
767 .get("/getClassesList", { 768 params: {
768 params: { 769 schoolId: this.$store.state.schoolId,
769 schoolId: this.$store.state.schoolId, 770 },
770 }, 771 headers: { Authorization: "Bearer " + this.token },
771 headers: { Authorization: "Bearer " + this.token }, 772 })
772 }) 773 .then((response) => {
773 .then((response) => { 774 this.addclass = response.data.data;
774 this.addclass = response.data.data; 775 })
775 }) 776 .catch((err) => {
776 .catch((err) => { 777 // console.log("err====>", err);
777 // console.log("err====>", err); 778 this.$router.replace({ path: "/" });
778 this.$router.replace({ path: "/" }); 779 });
779 }); 780 },
780 }, 781 },
781 }, 782 mounted() {
782 mounted() { 783 // this.getStudentList();
783 // this.getStudentList(); 784 this.token = this.$store.state.token;
784 this.token = this.$store.state.token; 785 this.getAllClass();
785 this.getAllClass(); 786 },
786 }, 787 created() {
787 created() { 788 this.$root.$on("app:search", (search) => {
788 this.$root.$on("app:search", (search) => { 789 this.search = search;
789 this.search = search; 790 });
790 }); 791 },
791 }, 792 beforeDestroy() {
792 beforeDestroy() { 793 // dont forget to remove the listener
793 // dont forget to remove the listener 794 this.$root.$off("app:search");
794 this.$root.$off("app:search"); 795 },
795 }, 796 };
796 }; 797 </script>
797 </script> 798 <style scoped>
798 <style scoped> 799 .active {
799 .active { 800 background-color: gray;
800 background-color: gray; 801 color: white !important;
801 color: white !important; 802 }
802 } 803 .activebtn {
803 .activebtn { 804 color: black !important;
804 color: black !important; 805 }
805 } 806 </style>
src/pages/Mark/mark.vue
Diff comments   View file @8b7976c
1 <template> 1 <template>
2 <v-container fluid class="body-color"> 2 <v-container fluid class="body-color">
3 <!-- ****** EXISTING MARK TABLE ****** --> 3 <!-- ****** EXISTING MARK TABLE ****** -->
4 <v-toolbar color="transparent" flat> 4 <v-toolbar color="transparent" flat>
5 <v-btn 5 <v-btn
6 fab 6 fab
7 dark 7 dark
8 class="open-dialog-button hidden-xl-only hidden-md-only hidden-lg-only" 8 class="open-dialog-button hidden-xl-only hidden-md-only hidden-lg-only"
9 small 9 small
10 @click="addMarkDialog = true" 10 @click="addMarkDialog = true"
11 > 11 >
12 <v-icon dark>add</v-icon> 12 <v-icon dark>add</v-icon>
13 </v-btn> 13 </v-btn>
14 <v-btn 14 <v-btn
15 round 15 round
16 class="open-dialog-button hidden-sm-only hidden-xs-only" 16 class="open-dialog-button hidden-sm-only hidden-xs-only"
17 dark 17 dark
18 @click="addMarkDialog = true" 18 @click="addMarkDialog = true"
19 > 19 >
20 <v-icon class="white--text pr-1" size="20">add</v-icon>Add Mark 20 <v-icon class="white--text pr-1" size="20">add</v-icon>Add Mark
21 </v-btn> 21 </v-btn>
22 <v-layout class="hidden-sm-only hidden-xs-only"> 22 <v-layout class="hidden-sm-only hidden-xs-only">
23 <v-flex md3 lg2 class="ml-2"> 23 <v-flex md3 lg2 class="ml-2">
24 <v-select 24 <v-select
25 v-model="getMark.classId" 25 v-model="getMark.classId"
26 label="Select your class" 26 label="Select your class"
27 type="text" 27 type="text"
28 :items="classList" 28 :items="classList"
29 item-text="classNum" 29 item-text="classNum"
30 item-value="_id" 30 item-value="_id"
31 @change="getSections(getMark.classId)" 31 @change="getSections(getMark.classId)"
32 required 32 required
33 ></v-select> 33 ></v-select>
34 </v-flex> 34 </v-flex>
35 <v-flex md3 lg2 class="ml-2"> 35 <v-flex md3 lg2 class="ml-2">
36 <v-select 36 <v-select
37 :items="addSection" 37 :items="addSection"
38 label="Select your Section" 38 label="Select your Section"
39 v-model="getMark.sectionId" 39 v-model="getMark.sectionId"
40 item-text="name" 40 item-text="name"
41 item-value="_id" 41 item-value="_id"
42 name="Select Section" 42 name="Select Section"
43 required 43 required
44 ></v-select> 44 ></v-select>
45 </v-flex> 45 </v-flex>
46 <v-spacer></v-spacer> 46 <v-spacer></v-spacer>
47 <v-btn 47 <v-btn
48 @click="getStudents" 48 @click="getStudents"
49 round 49 round
50 dark 50 dark
51 :loading="loading" 51 :loading="loading"
52 class="right open-dialog-button mt-2" 52 class="right open-dialog-button mt-2"
53 >Mark</v-btn> 53 >Mark</v-btn>
54 </v-layout> 54 </v-layout>
55 <v-spacer class="hidden-lg-only hidden-xl-only hidden-md-only"></v-spacer> 55 <v-spacer class="hidden-lg-only hidden-xl-only hidden-md-only"></v-spacer>
56 <v-card-title class="body-1" v-show="show"> 56 <v-card-title class="body-1" v-show="show">
57 <v-btn icon large flat @click="displaySearch"> 57 <v-btn icon large flat @click="displaySearch">
58 <v-avatar size="27"> 58 <v-avatar size="27">
59 <img src="/static/icon/search.png" alt="icon" /> 59 <img src="/static/icon/search.png" alt="icon" />
60 </v-avatar> 60 </v-avatar>
61 </v-btn> 61 </v-btn>
62 </v-card-title> 62 </v-card-title>
63 <v-flex xs8 sm8 md3 lg2 v-if="showSearch"> 63 <v-flex xs8 sm8 md3 lg2 v-if="showSearch">
64 <v-layout> 64 <v-layout>
65 <v-text-field 65 <v-text-field
66 autofocus 66 autofocus
67 v-model="search" 67 v-model="search"
68 label="Search" 68 label="Search"
69 prepend-inner-icon="search" 69 prepend-inner-icon="search"
70 color="primary" 70 color="primary"
71 ></v-text-field> 71 ></v-text-field>
72 <v-icon @click="closeSearch" color="error">close</v-icon> 72 <v-icon @click="closeSearch" color="error">close</v-icon>
73 </v-layout> 73 </v-layout>
74 </v-flex> 74 </v-flex>
75 </v-toolbar> 75 </v-toolbar>
76 <v-card flat class="elevation-0 transparent hidden-lg-only hidden-xl-only hidden-md-only"> 76 <v-card flat class="elevation-0 transparent hidden-lg-only hidden-xl-only hidden-md-only">
77 <v-flex xs12 sm12 lg12> 77 <v-flex xs12 sm12 lg12>
78 <v-layout wrap> 78 <v-layout wrap>
79 <v-flex xs12 sm12 lg3> 79 <v-flex xs12 sm12 lg3>
80 <v-layout> 80 <v-layout>
81 <v-flex xs3 sm6 lg2 class="subheading mt-4"> 81 <v-flex xs3 sm6 lg2 class="subheading mt-4">
82 <label class="right">Class:</label> 82 <label class="right">Class:</label>
83 </v-flex> 83 </v-flex>
84 <v-flex xs12 sm12 lg8 class="ml-2"> 84 <v-flex xs12 sm12 lg8 class="ml-2">
85 <v-select 85 <v-select
86 v-model="getMark.classId" 86 v-model="getMark.classId"
87 label="Select your class" 87 label="Select your class"
88 type="text" 88 type="text"
89 :items="classList" 89 :items="classList"
90 item-text="classNum" 90 item-text="classNum"
91 item-value="_id" 91 item-value="_id"
92 @change="getSections(getMark.classId)" 92 @change="getSections(getMark.classId)"
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 lg3> 98 <v-flex xs12 sm12 lg3>
99 <v-layout> 99 <v-layout>
100 <v-flex xs3 sm6 lg2 class="subheading mt-4"> 100 <v-flex xs3 sm6 lg2 class="subheading mt-4">
101 <label class="right">Section:</label> 101 <label class="right">Section:</label>
102 </v-flex> 102 </v-flex>
103 <v-flex xs12 sm12 lg8 class="ml-2"> 103 <v-flex xs12 sm12 lg8 class="ml-2">
104 <v-select 104 <v-select
105 :items="addSection" 105 :items="addSection"
106 label="Select your Section" 106 label="Select your Section"
107 v-model="getMark.sectionId" 107 v-model="getMark.sectionId"
108 item-text="name" 108 item-text="name"
109 item-value="_id" 109 item-value="_id"
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 lg6> 116 <v-flex xs12 sm12 lg6>
117 <v-btn 117 <v-btn
118 @click="getStudents" 118 @click="getStudents"
119 round 119 round
120 dark 120 dark
121 :loading="loading" 121 :loading="loading"
122 class="right mt-3 open-dialog-button" 122 class="right mt-3 open-dialog-button"
123 >Mark</v-btn> 123 >Mark</v-btn>
124 </v-flex> 124 </v-flex>
125 </v-layout> 125 </v-layout>
126 </v-flex> 126 </v-flex>
127 </v-card> 127 </v-card>
128 <v-data-table 128 <v-data-table
129 :headers="headers" 129 :headers="headers"
130 :items="getStudentsList" 130 :items="getStudentsList"
131 :pagination.sync="pagination" 131 :pagination.sync="pagination"
132 :search="search" 132 :search="search"
133 > 133 >
134 <template slot="items" slot-scope="props"> 134 <template slot="items" slot-scope="props">
135 <tr class="tr"> 135 <tr class="tr">
136 <td class="td td-row">{{ props.index + 1}}</td> 136 <td class="td td-row">{{ props.index + 1}}</td>
137 <td class="td td-row text-xs-center"> 137 <td class="td td-row text-xs-center">
138 <v-avatar size="40"> 138 <v-avatar size="40">
139 <img :src="props.item.profilePicUrl" v-if="props.item.profilePicUrl" /> 139 <img :src="props.item.profilePicUrl" v-if="props.item.profilePicUrl" />
140 <img src="/static/icon/user.png" v-else-if="!props.item.profilePicUrl" /> 140 <img src="/static/icon/user.png" v-else-if="!props.item.profilePicUrl" />
141 </v-avatar> 141 </v-avatar>
142 </td> 142 </td>
143 <td class="td td-row text-xs-center">{{ props.item.name}}</td> 143 <td class="td td-row text-xs-center">{{ props.item.name}}</td>
144 <td class="td td-row text-xs-center">{{ props.item.rollNo }}</td> 144 <td class="td td-row text-xs-center">{{ props.item.rollNo }}</td>
145 <td class="td td-row text-xs-center">{{ props.item.email }}</td> 145 <td class="td td-row text-xs-center">{{ props.item.email }}</td>
146 <td class="td td-row text-xs-center"> 146 <td class="td td-row text-xs-center">
147 <span> 147 <span>
148 <router-link :to="{ name:'view Mark',params: { markId:props.item._id } }"> 148 <router-link :to="{ name:'view Mark',params: { markId:props.item._id } }">
149 <v-tooltip top> 149 <v-tooltip top>
150 <img 150 <img
151 slot="activator" 151 slot="activator"
152 style="cursor:pointer; width:25px; height:25px; " 152 style="cursor:pointer; width:25px; height:25px; "
153 src="/static/icon/view.png" 153 src="/static/icon/view.png"
154 /> 154 />
155 <span>View</span> 155 <span>View</span>
156 </v-tooltip> 156 </v-tooltip>
157 </router-link> 157 </router-link>
158 </span> 158 </span>
159 </td> 159 </td>
160 </tr> 160 </tr>
161 </template> 161 </template>
162 <v-alert 162 <v-alert
163 slot="no-results" 163 slot="no-results"
164 :value="true" 164 :value="true"
165 color="error" 165 color="error"
166 icon="warning" 166 icon="warning"
167 >Your search for "{{ search }}" found no results.</v-alert> 167 >Your search for "{{ search }}" found no results.</v-alert>
168 </v-data-table> 168 </v-data-table>
169 <!-- ****** ADD Mark Schedule ****** --> 169 <!-- ****** ADD Mark Schedule ****** -->
170 <v-dialog v-model="addMarkDialog" max-width v-if="addMarkDialog" persistent> 170 <v-dialog v-model="addMarkDialog" max-width v-if="addMarkDialog" persistent>
171 <v-card flat class> 171 <v-card flat class>
172 <v-layout class="pa-3 card-style white--text"> 172 <v-layout class="pa-3 card-style white--text">
173 <v-flex xs12> 173 <v-flex xs12>
174 <label class="title text-xs-center">Add Mark</label> 174 <label class="title text-xs-center">Add Mark</label>
175 <v-icon 175 <v-icon
176 size="24" 176 size="24"
177 class="right white--text" 177 class="right white--text"
178 @click="$refs.form.reset();addMarkDialog = false" 178 @click="$refs.form.reset();addMarkDialog = false"
179 >cancel</v-icon> 179 >cancel</v-icon>
180 </v-flex> 180 </v-flex>
181 </v-layout> 181 </v-layout>
182 <v-form ref="form" v-model="valid" lazy-validation> 182 <v-form ref="form" v-model="valid" lazy-validation>
183 <v-container fluid> 183 <v-container fluid>
184 <v-flex xs12 sm12 lg12> 184 <v-flex xs12 sm12 lg12>
185 <v-layout wrap> 185 <v-layout wrap>
186 <v-flex xs12 sm12 lg10> 186 <v-flex xs12 sm12 lg10>
187 <v-layout wrap> 187 <v-layout wrap>
188 <v-flex xs12 sm12 lg3> 188 <v-flex xs12 sm12 lg3>
189 <v-flex xs3 sm2 lg2 class="subheading"> 189 <v-flex xs3 sm2 lg2 class="subheading">
190 <label>Exam:</label> 190 <label>Exam:</label>
191 </v-flex> 191 </v-flex>
192 <v-flex xs12 sm12 lg10> 192 <v-flex xs12 sm12 lg10>
193 <v-select 193 <v-select
194 label="Select your Exam Name" 194 label="Select your Exam Name"
195 :items="examList" 195 :items="examList"
196 v-model="addMark.examId" 196 v-model="addMark.examId"
197 :rules="examRules" 197 :rules="examRules"
198 item-text="examName" 198 item-text="examName"
199 item-value="_id" 199 item-value="_id"
200 ></v-select> 200 ></v-select>
201 </v-flex> 201 </v-flex>
202 </v-flex> 202 </v-flex>
203 <v-flex xs12 sm12 lg3> 203 <v-flex xs12 sm12 lg3>
204 <v-flex xs3 sm6 lg2 class="subheading"> 204 <v-flex xs3 sm6 lg2 class="subheading">
205 <label>Class:</label> 205 <label>Class:</label>
206 </v-flex> 206 </v-flex>
207 <v-flex xs12 sm12 lg10 class> 207 <v-flex xs12 sm12 lg10 class>
208 <v-select 208 <v-select
209 v-model="addMark.classId" 209 v-model="addMark.classId"
210 label="Select your class" 210 label="Select your class"
211 type="text" 211 type="text"
212 :items="classList" 212 :items="classList"
213 item-text="classNum" 213 item-text="classNum"
214 item-value="_id" 214 item-value="_id"
215 :rules="classRules" 215 :rules="classRules"
216 @change="getSections(addMark.classId)" 216 @change="getSections(addMark.classId)"
217 required 217 required
218 ></v-select> 218 ></v-select>
219 </v-flex> 219 </v-flex>
220 </v-flex> 220 </v-flex>
221 <v-flex xs12 sm12 lg3> 221 <v-flex xs12 sm12 lg3>
222 <v-flex xs3 sm6 lg2 class="subheading"> 222 <v-flex xs3 sm6 lg2 class="subheading">
223 <label>Section:</label> 223 <label>Section:</label>
224 </v-flex> 224 </v-flex>
225 <v-flex xs12 sm12 lg10 class> 225 <v-flex xs12 sm12 lg10 class>
226 <v-select 226 <v-select
227 :items="addSection" 227 :items="addSection"
228 label="Select your Section" 228 label="Select your Section"
229 v-model="addMark.sectionId" 229 v-model="addMark.sectionId"
230 item-text="name" 230 item-text="name"
231 item-value="_id" 231 item-value="_id"
232 name="Select Section" 232 name="Select Section"
233 :rules="sectionRules" 233 :rules="sectionRules"
234 required 234 required
235 ></v-select> 235 ></v-select>
236 </v-flex> 236 </v-flex>
237 </v-flex> 237 </v-flex>
238 <v-flex xs12 sm12 lg3> 238 <v-flex xs12 sm12 lg3>
239 <v-flex xs3 sm6 lg2 class="subheading"> 239 <v-flex xs3 sm6 lg2 class="subheading">
240 <label>Subject:</label> 240 <label>Subject:</label>
241 </v-flex> 241 </v-flex>
242 <v-flex xs12 sm12 lg10 class> 242 <v-flex xs12 sm12 lg10 class>
243 <v-select 243 <v-select
244 :items="subjects" 244 :items="subjects"
245 label="Select your Subject" 245 label="Select your Subject"
246 v-model="addMark.subjectId" 246 v-model="addMark.subjectId"
247 item-text="subjectName" 247 item-text="subjectName"
248 item-value="_id" 248 item-value="_id"
249 name="Select Section" 249 name="Select Section"
250 :rules="subjectRules" 250 :rules="subjectRules"
251 required 251 required
252 ></v-select> 252 ></v-select>
253 </v-flex> 253 </v-flex>
254 </v-flex> 254 </v-flex>
255 </v-layout> 255 </v-layout>
256 </v-flex> 256 </v-flex>
257 <v-flex xs12 sm12 lg2> 257 <v-flex xs12 sm12 lg2>
258 <v-flex xs12 sm12 lg12> 258 <v-flex xs12 sm12 lg12>
259 <v-btn 259 <v-btn
260 @click="findStudents" 260 @click="findStudents"
261 round 261 round
262 dark 262 dark
263 :loading="loading" 263 :loading="loading"
264 class="right mt-4 open-dialog-button" 264 class="right mt-4 open-dialog-button"
265 >Mark</v-btn> 265 >Mark</v-btn>
266 </v-flex> 266 </v-flex>
267 </v-flex> 267 </v-flex>
268 </v-layout> 268 </v-layout>
269 </v-flex> 269 </v-flex>
270 <!-- ****** ADD MARK TABLE DATA ****** --> 270 <!-- ****** ADD MARK TABLE DATA ****** -->
271 <v-card class="mt-4 elevation-0 body-color"> 271 <v-card class="mt-4 elevation-0 body-color">
272 <v-data-table 272 <v-data-table
273 :headers="headerOfMark" 273 :headers="headerOfMark"
274 :items="getStudentData" 274 :items="getStudentData"
275 :pagination.sync="pagination" 275 :pagination.sync="pagination"
276 :search="search" 276 :search="search"
277 class="body-color" 277 class="body-color"
278 > 278 >
279 <template slot="items" slot-scope="props"> 279 <template slot="items" slot-scope="props">
280 <tr class="tr"> 280 <tr class="tr">
281 <td class="td td-row">{{ props.index + 1}}</td> 281 <td class="td td-row">{{ props.index + 1}}</td>
282 <td class="text-xs-center td td-row"> 282 <td class="text-xs-center td td-row">
283 <v-avatar size="40"> 283 <v-avatar size="40">
284 <img :src="props.item.profilePicUrl" v-if="props.item.profilePicUrl" /> 284 <img :src="props.item.profilePicUrl" v-if="props.item.profilePicUrl" />
285 <img src="/static/icon/user.png" v-else-if="!props.item.profilePicUrl" /> 285 <img src="/static/icon/user.png" v-else-if="!props.item.profilePicUrl" />
286 </v-avatar> 286 </v-avatar>
287 </td> 287 </td>
288 <td class="text-xs-center td td-row">{{ props.item.name}}</td> 288 <td class="text-xs-center td td-row">{{ props.item.name}}</td>
289 <td class="text-xs-center td td-row">{{ props.item.rollNo }}</td> 289 <td class="text-xs-center td td-row">{{ props.item.rollNo }}</td>
290 <td 290 <td
291 class="text-xs-center markTable td td-row" 291 class="text-xs-center markTable td td-row"
292 v-for="(marks, index) in props.item.marksObtained" 292 v-for="(marks, index) in props.item.marksObtained"
293 :key="'A'+ index" 293 :key="'A'+ index"
294 > 294 >
295 <v-text-field v-model="marks.marksScored"></v-text-field> 295 <v-text-field v-model="marks.marksScored"></v-text-field>
296 </td> 296 </td>
297 </tr> 297 </tr>
298 </template> 298 </template>
299 <v-alert 299 <v-alert
300 slot="no-results" 300 slot="no-results"
301 :value="true" 301 :value="true"
302 color="error" 302 color="error"
303 icon="warning" 303 icon="warning"
304 >Your search for "{{ search }}" found no results.</v-alert> 304 >Your search for "{{ search }}" found no results.</v-alert>
305 </v-data-table> 305 </v-data-table>
306 </v-card> 306 </v-card>
307 <v-layout class="mt-2"> 307 <v-layout class="mt-2">
308 <v-flex xs12 sm12> 308 <v-flex xs12 sm12>
309 <v-layout> 309 <v-layout>
310 <v-flex xs12> 310 <v-flex xs12>
311 <v-btn 311 <v-btn
312 @click="submit" 312 @click="submit"
313 round 313 round
314 dark 314 dark
315 :loading="loading" 315 :loading="loading"
316 class="right add-button" 316 class="right add-button"
317 >Add Mark</v-btn> 317 >Add Mark</v-btn>
318 </v-flex> 318 </v-flex>
319 </v-layout> 319 </v-layout>
320 </v-flex> 320 </v-flex>
321 </v-layout> 321 </v-layout>
322 </v-container> 322 </v-container>
323 </v-form> 323 </v-form>
324 </v-card> 324 </v-card>
325 </v-dialog> 325 </v-dialog>
326 <div class="loader" v-if="showLoader"> 326 <div class="loader" v-if="showLoader">
327 <v-progress-circular indeterminate color="white"></v-progress-circular> 327 <v-progress-circular indeterminate color="white"></v-progress-circular>
328 </div> 328 </div>
329 <v-snackbar 329 <v-snackbar
330 :timeout="timeout" 330 :timeout="timeout"
331 :top="y === 'top'" 331 :top="y === 'top'"
332 :right="x === 'right'" 332 :right="x === 'right'"
333 :vertical="mode === 'vertical'" 333 :vertical="mode === 'vertical'"
334 v-model="snackbar" 334 v-model="snackbar"
335 :color="color" 335 :color="color"
336 >{{ text }}</v-snackbar> 336 >{{ text }}</v-snackbar>
337 </v-container> 337 </v-container>
338 </template> 338 </template>
339 339
340 <script> 340 <script>
341 import http from "@/Services/http.js"; 341 import http from "@/Services/http.js";
342 import moment from "moment"; 342 import moment from "moment";
343 343
344 export default { 344 export default {
345 data: () => ({ 345 data: () => ({
346 show: true, 346 show: true,
347 showSearch: false, 347 showSearch: false,
348 snackbar: false, 348 snackbar: false,
349 date: null, 349 date: null,
350 color: "", 350 color: "",
351 y: "top", 351 y: "top",
352 x: "right", 352 x: "right",
353 mode: "", 353 mode: "",
354 timeout: 10000, 354 timeout: 10000,
355 text: "", 355 text: "",
356 loading: false, 356 loading: false,
357 search: "", 357 search: "",
358 show: true, 358 show: true,
359 showSearch: false, 359 showSearch: false,
360 showLoader: false, 360 showLoader: false,
361 dialog: false, 361 dialog: false,
362 dialog1: false, 362 dialog1: false,
363 valid: true, 363 valid: true,
364 364
365 addMarkDialog: false, 365 addMarkDialog: false,
366 addSection: [], 366 addSection: [],
367 pagination: { 367 pagination: {
368 rowsPerPage: 10, 368 rowsPerPage: 10,
369 }, 369 },
370 classRules: [(v) => !!v || "Class is required"], 370 classRules: [(v) => !!v || "Class is required"],
371 sectionRules: [(v) => !!v || "section is required"], 371 sectionRules: [(v) => !!v || "section is required"],
372 subjectRules: [(v) => !!v || "Subject is required"], 372 subjectRules: [(v) => !!v || "Subject is required"],
373 examRules: [(v) => !!v || "Exam is required"], 373 examRules: [(v) => !!v || "Exam is required"],
374 374
375 headerOfMark: [ 375 headerOfMark: [
376 { 376 {
377 align: "", 377 align: "",
378 text: "No", 378 text: "No",
379 sortable: false, 379 sortable: false,
380 value: "No", 380 value: "No",
381 }, 381 },
382 { 382 {
383 text: "Profile Pic", 383 text: "Profile Pic",
384 vaue: "profilePicUrl", 384 vaue: "profilePicUrl",
385 sortable: false, 385 sortable: false,
386 align: "center", 386 align: "center",
387 }, 387 },
388 { 388 {
389 text: "Name", 389 text: "Name",
390 vaue: "name", 390 vaue: "name",
391 sortable: false, 391 sortable: false,
392 align: "center", 392 align: "center",
393 }, 393 },
394 { 394 {
395 text: "Roll No.", 395 text: "Roll No.",
396 value: "rollNo", 396 value: "rollNo",
397 sortable: false, 397 sortable: false,
398 align: "center", 398 align: "center",
399 }, 399 },
400 ], 400 ],
401 headers: [ 401 headers: [
402 { 402 {
403 align: "", 403 align: "",
404 text: "No", 404 text: "No",
405 sortable: false, 405 sortable: false,
406 value: "No", 406 value: "No",
407 }, 407 },
408 { 408 {
409 text: "Profile Pic", 409 text: "Profile Pic",
410 vaue: "profilePicUrl", 410 vaue: "profilePicUrl",
411 sortable: false, 411 sortable: false,
412 align: "center", 412 align: "center",
413 }, 413 },
414 { 414 {
415 text: "Name", 415 text: "Name",
416 vaue: "name", 416 vaue: "name",
417 sortable: false, 417 sortable: false,
418 align: "center", 418 align: "center",
419 }, 419 },
420 { 420 {
421 text: "Roll No.", 421 text: "Roll No.",
422 value: "rollNo", 422 value: "rollNo",
423 sortable: false, 423 sortable: false,
424 align: "center", 424 align: "center",
425 }, 425 },
426 { 426 {
427 text: "Email", 427 text: "Email",
428 value: "email", 428 value: "email",
429 sortable: false, 429 sortable: false,
430 align: "center", 430 align: "center",
431 }, 431 },
432 { text: "Action", value: "", sortable: false, align: "center" }, 432 { text: "Action", value: "", sortable: false, align: "center" },
433 ], 433 ],
434 classList: [], 434 classList: [],
435 examList: [], 435 examList: [],
436 subjects: [], 436 subjects: [],
437 addMark: {}, 437 addMark: {},
438 getMark: {}, 438 getMark: {},
439 getScheduleData: {}, 439 getScheduleData: {},
440 markData: [], 440 markData: [],
441 getStudentData: [], 441 getStudentData: [],
442 getStudentsList: [], 442 getStudentsList: [],
443 token: "", 443 token: "",
444 }), 444 }),
445 watch: { 445 watch: {
446 addMarkDialog: function (val) { 446 addMarkDialog: function (val) {
447 if (!val) { 447 if (!val) {
448 this.addMark = []; 448 this.addMark = [];
449 this.getStudentData = []; 449 this.getStudentData = [];
450 } 450 }
451 }, 451 },
452 }, 452 },
453 methods: { 453 methods: {
454 getClass() { 454 getClass() {
455 this.showLoader = true; 455 this.showLoader = true;
456 http() 456 http()
457 .get("/getClassesList", { 457 .get("/getClassesList", {
458 headers: { Authorization: "Bearer " + this.token }, 458 headers: { Authorization: "Bearer " + this.token },
459 }) 459 })
460 .then((response) => { 460 .then((response) => {
461 this.classList = response.data.data; 461 this.classList = response.data.data;
462 this.showLoader = false; 462 this.showLoader = false;
463 }) 463 })
464 .catch((err) => { 464 .catch((err) => {
465 // console.log("err====>", err); 465 // console.log("err====>", err);
466 this.showLoader = false; 466 this.showLoader = false;
467 }); 467 });
468 }, 468 },
469 getSections(_id) { 469 getSections(_id) {
470 this.showLoader = true; 470 this.showLoader = true;
471 for (let i = 0; i < this.classList.length; i++) { 471 for (let i = 0; i < this.classList.length; i++) {
472 if (_id == this.classList[i]._id) { 472 if (_id == this.classList[i]._id) {
473 this.subjects = this.classList[i].subjects; 473 this.subjects = this.classList[i].subjects;
474 } 474 }
475 } 475 }
476 http() 476 http()
477 .get( 477 .get(
478 "/getSectionsList", 478 "/getSectionsList",
479 { params: { classId: _id } }, 479 { params: { classId: _id } },
480 { 480 {
481 headers: { Authorization: "Bearer " + this.token }, 481 headers: { Authorization: "Bearer " + this.token },
482 } 482 }
483 ) 483 )
484 .then((response) => { 484 .then((response) => {
485 this.addSection = response.data.data; 485 this.addSection = response.data.data;
486 this.showLoader = false; 486 this.showLoader = false;
487 }) 487 })
488 .catch((err) => { 488 .catch((err) => {
489 this.showLoader = false; 489 this.showLoader = false;
490 // console.log("err====>", err); 490 // console.log("err====>", err);
491 }); 491 });
492 }, 492 },
493 getExamList() { 493 getExamList() {
494 this.showLoader = true; 494 this.showLoader = true;
495 this.loadingSearch = true; 495 this.loadingSearch = true;
496 http() 496 http()
497 .get("/getExamsList", { 497 .get("/getExamsList", {
498 headers: { Authorization: "Bearer " + this.token }, 498 headers: { Authorization: "Bearer " + this.token },
499 }) 499 })
500 .then((response) => { 500 .then((response) => {
501 this.examList = response.data.data; 501 this.examList = response.data.data;
502 this.showLoader = false; 502 this.showLoader = false;
503 this.loadingSearch = false; 503 this.loadingSearch = false;
504 }) 504 })
505 .catch((error) => { 505 .catch((error) => {
506 // console.log("err====>", err); 506 // console.log("err====>", err);
507 this.showLoader = false; 507 this.showLoader = false;
508 this.loadingSearch = false; 508 this.loadingSearch = false;
509 this.snackbar = true; 509 this.snackbar = true;
510 this.text = error.response.data.message; 510 this.text = error.response.data.message;
511 if (error.response.status === 401) { 511 if (error.response.status === 401) {
512 this.$router.replace({ path: "/" }); 512 this.$router.replace({ path: "/" });
513 this.$store.dispatch("setToken", null); 513 this.$store.dispatch("setToken", null);
514 this.$store.dispatch("Id", null); 514 this.$store.dispatch("Id", null);
515 this.$store.dispatch("Role", null); 515 this.$store.dispatch("Role", null);
516 } 516 }
517 }); 517 });
518 }, 518 },
519 findStudents() { 519 findStudents() {
520 this.getStudentData = []; 520 this.getStudentData = [];
521 if (this.$refs.form.validate()) { 521 if (this.$refs.form.validate()) {
522 this.showLoader = true; 522 this.showLoader = true;
523 http() 523 http()
524 .get("/getStudentWithClass", { 524 .get("/getStudentWithClass", {
525 params: { 525 params: {
526 classId: this.addMark.classId, 526 classId: this.addMark.classId,
527 sectionId: this.addMark.sectionId, 527 sectionId: this.addMark.sectionId,
528 }, 528 },
529 }) 529 })
530 .then((response) => { 530 .then((response) => {
531 this.getStudentData = response.data.data; 531 this.getStudentData = response.data.data;
532 // this.showLoader = false; 532 // this.showLoader = false;
533 this.showLoader = true; 533 this.showLoader = true;
534 http() 534 http()
535 .get("/getMarkDistributionsList", { 535 .get("/getMarkDistributionsList", {
536 params: this.addMark, 536 params: this.addMark,
537 }) 537 })
538 .then((response) => { 538 .then((response) => {
539 this.showLoader = false; 539 this.showLoader = false;
540 this.headerOfMark.length = 4; 540 this.headerOfMark.length = 4;
541 for (var i = 0; i < response.data.data.length; i++) { 541 for (var i = 0; i < response.data.data.length; i++) {
542 this.headerOfMark.push({ 542 this.headerOfMark.push({
543 text: 543 text:
544 response.data.data[i].distributionType + 544 response.data.data[i].distributionType +
545 " (" + 545 " (" +
546 response.data.data[i].markValue + 546 response.data.data[i].markValue +
547 ")", 547 ")",
548 sortable: false, 548 sortable: false,
549 align: "center", 549 align: "center",
550 }); 550 });
551 } 551 }
552 for (var n = 0; n < this.getStudentData.length; n++) { 552 for (var n = 0; n < this.getStudentData.length; n++) {
553 this.getStudentData[n].marksObtained = []; 553 this.getStudentData[n].marksObtained = [];
554 for (var j = 0; j < response.data.data.length; j++) { 554 for (var j = 0; j < response.data.data.length; j++) {
555 this.getStudentData[n].marksObtained.push({ 555 this.getStudentData[n].marksObtained.push({
556 markDistributionId: response.data.data[j]._id, 556 markDistributionId: response.data.data[j]._id,
557 marksScored: 0, 557 marksScored: 0,
558 markValue: response.data.data[j].markValue, 558 markValue: response.data.data[j].markValue,
559 distributionType: response.data.data[j].distributionType, 559 distributionType: response.data.data[j].distributionType,
560 }); 560 });
561 } 561 }
562 // if (marks.marksScored > marks.marksObtained) { 562 // if (marks.marksScored > marks.marksObtained) {
563 // this.getStudentData[n].marksScored = this.getStudentData[n].marksObtained; 563 // this.getStudentData[n].marksScored = this.getStudentData[n].marksObtained;
564 // this.marks.marksScored = marks.marksObtained; 564 // this.marks.marksScored = marks.marksObtained;
565 // } 565 // }
566 } 566 }
567 }) 567 })
568 .catch((error) => { 568 .catch((error) => {
569 this.showLoader = false; 569 this.showLoader = false;
570 }); 570 });
571 }) 571 })
572 .catch((error) => { 572 .catch((error) => {
573 this.showLoader = false; 573 this.showLoader = false;
574 }); 574 });
575 } 575 }
576 }, 576 },
577 async submit() { 577 async submit() {
578 for (let [j, item] of this.getStudentData.entries()) { 578 for (let [j, item] of this.getStudentData.entries()) {
579 for (var k = 0; k < item.marksObtained.length; k++) { 579 for (var k = 0; k < item.marksObtained.length; k++) {
580 if ( 580 if (
581 item.marksObtained[k].marksScored > item.marksObtained[k].markValue 581 item.marksObtained[k].marksScored > item.marksObtained[k].markValue
582 ) { 582 ) {
583 this.snackbar = true; 583 this.snackbar = true;
584 this.text = `Student (${item.name}) marks (${item.marksObtained[k].marksScored}) in 584 this.text = `Student (${item.name}) marks (${item.marksObtained[k].marksScored}) in
585 "${item.marksObtained[k].distributionType}" should not be greater than Total Marks (${item.marksObtained[k].markValue})`; 585 "${item.marksObtained[k].distributionType}" should not be greater than Total Marks (${item.marksObtained[k].markValue})`;
586 this.color = "error"; 586 this.color = "error";
587 return; 587 return;
588 } 588 }
589 } 589 }
590 let data = { 590 let data = {
591 examId: this.addMark.examId, 591 examId: this.addMark.examId,
592 classId: this.addMark.classId, 592 classId: this.addMark.classId,
593 sectionId: this.addMark.sectionId, 593 sectionId: this.addMark.sectionId,
594 subjectId: this.addMark.subjectId, 594 subjectId: this.addMark.subjectId,
595 studentId: item._id, 595 studentId: item._id,
596 studentsMarks: item.marksObtained, 596 studentsMarks: item.marksObtained,
597 }; 597 };
598 try { 598 try {
599 let response = await http().post("/createMark", data); 599 let response = await http().post("/createMark", data);
600 if (j + 1 === this.getStudentData.length) { 600 if (j + 1 === this.getStudentData.length) {
601 this.getStudentData = []; 601 this.getStudentData = [];
602 this.snackbar = true; 602 this.snackbar = true;
603 this.addMarkDialog = false; 603 this.addMarkDialog = false;
604 this.text = response.data.message; 604 this.text = response.data.message;
605 this.color = "green"; 605 this.color = "green";
606 this.$refs.form.reset(); 606 this.$refs.form.reset();
607 } 607 }
608 } catch (error) { 608 } catch (error) {
609 this.snackbar = true; 609 this.snackbar = true;
610 this.text = error.response.data.message; 610 this.text = error.response.data.message;
611 this.color = "red"; 611 this.color = "red";
612 } 612 }
613 } 613 }
614 }, 614 },
615 getStudents() { 615 getStudents() {
616 this.showLoader = true; 616 this.showLoader = true;
617 http() 617 http()
618 .get("/getStudentWithClass", { 618 .get("/getStudentWithClass", {
619 params: { 619 params: {
620 classId: this.getMark.classId, 620 classId: this.getMark.classId,
621 sectionId: this.getMark.sectionId, 621 sectionId: this.getMark.sectionId,
622 }, 622 },
623 }) 623 })
624 .then((response) => { 624 .then((response) => {
625 this.getStudentsList = response.data.data; 625 this.getStudentsList = response.data.data;
626 this.showLoader = false; 626 this.showLoader = false;
627 }) 627 })
628 .catch((error) => { 628 .catch((error) => {
629 // console.log("err====>", error); 629 // console.log("err====>", error);
630 this.showLoader = false; 630 this.showLoader = false;
631 this.snackbar = true;
632 this.color = "error";
633 this.text = error.response.data.message;
631 this.snackbar = true; 634 });
632 this.color = "error"; 635 },
633 this.text = error.response.data.message; 636 displaySearch() {
634 }); 637 (this.show = false), (this.showSearch = true);
635 }, 638 },
636 displaySearch() { 639 closeSearch() {
637 (this.show = false), (this.showSearch = true); 640 this.showSearch = false;
638 }, 641 this.show = true;
639 closeSearch() { 642 this.search = "";
640 this.showSearch = false; 643 },
641 this.show = true; 644 },
642 this.search = ""; 645 mounted() {
643 }, 646 this.token = this.$store.state.token;
644 }, 647 this.getClass();
645 mounted() { 648 this.getExamList();
646 this.token = this.$store.state.token; 649 },
647 this.getClass(); 650 };
648 this.getExamList(); 651 </script>
649 }, 652 <style scoped>
650 }; 653 .markTable {
651 </script> 654 max-width: 80px !important;
652 <style scoped> 655 }
653 .markTable { 656 </style>
654 max-width: 80px !important; 657
655 } 658
656 </style> 659
657 660
658 661
659 662
660 663
661 664
662 665
663 666
664 667
665 668
666 669
667 670
668 671
669 672
670 673
671 674
672 675
673 676
674 677
675 678
src/pages/Mark/markDistribution.vue
Diff comments   View file @8b7976c
1 <template> 1 <template>
2 <v-container fluid class="body-color"> 2 <v-container fluid class="body-color">
3 <!-- ****** EDIT Mark Distribution ****** --> 3 <!-- ****** EDIT Mark Distribution ****** -->
4 <v-dialog v-model="editMarkDistributionDialog" max-width="500px" persistent> 4 <v-dialog v-model="editMarkDistributionDialog" max-width="500px" persistent>
5 <v-card flat class="card-style pa-2" dark> 5 <v-card flat class="card-style pa-2" dark>
6 <v-layout> 6 <v-layout>
7 <v-flex xs12> 7 <v-flex xs12>
8 <label class="title text-xs-center">Edit Mark Distribution</label> 8 <label class="title text-xs-center">Edit Mark Distribution</label>
9 <v-icon size="24" class="right" @click="editMarkDistributionDialog = false">cancel</v-icon> 9 <v-icon size="24" class="right" @click="editMarkDistributionDialog = false">cancel</v-icon>
10 </v-flex> 10 </v-flex>
11 </v-layout> 11 </v-layout>
12 <v-form ref="form"> 12 <v-form ref="form">
13 <v-container fluid> 13 <v-container fluid>
14 <v-flex xs12 sm12> 14 <v-flex xs12 sm12>
15 <v-layout> 15 <v-layout>
16 <v-flex xs4 class="pt-4 subheading"> 16 <v-flex xs4 class="pt-4 subheading">
17 <label class="right">Mark Distribution:</label> 17 <label class="right">Mark Distribution:</label>
18 </v-flex> 18 </v-flex>
19 <v-flex xs8 sm6 class="ml-3"> 19 <v-flex xs8 sm6 class="ml-3">
20 <v-text-field 20 <v-text-field
21 v-model="editedItem.distributionType" 21 v-model="editedItem.distributionType"
22 placeholder="fill your Distribution Type" 22 placeholder="fill your Distribution Type"
23 ></v-text-field> 23 ></v-text-field>
24 </v-flex> 24 </v-flex>
25 </v-layout> 25 </v-layout>
26 </v-flex> 26 </v-flex>
27 <v-flex xs12 sm12> 27 <v-flex xs12 sm12>
28 <v-layout> 28 <v-layout>
29 <v-flex xs4 class="pt-4 subheading"> 29 <v-flex xs4 class="pt-4 subheading">
30 <label class="right">Mark Value:</label> 30 <label class="right">Mark Value:</label>
31 </v-flex> 31 </v-flex>
32 <v-flex xs8 sm6 class="ml-3"> 32 <v-flex xs8 sm6 class="ml-3">
33 <v-text-field placeholder="fill your Mark Value" v-model="editedItem.markValue"></v-text-field> 33 <v-text-field placeholder="fill your Mark Value" v-model="editedItem.markValue"></v-text-field>
34 </v-flex> 34 </v-flex>
35 </v-layout> 35 </v-layout>
36 </v-flex> 36 </v-flex>
37 <v-layout> 37 <v-layout>
38 <v-flex xs12 sm11> 38 <v-flex xs12 sm11>
39 <v-card-actions> 39 <v-card-actions>
40 <v-spacer></v-spacer> 40 <v-spacer></v-spacer>
41 <v-btn round dark @click="save" class="add-button">Save</v-btn> 41 <v-btn round dark @click="save" class="add-button">Save</v-btn>
42 </v-card-actions> 42 </v-card-actions>
43 </v-flex> 43 </v-flex>
44 </v-layout> 44 </v-layout>
45 </v-container> 45 </v-container>
46 </v-form> 46 </v-form>
47 </v-card> 47 </v-card>
48 </v-dialog> 48 </v-dialog>
49 <!-- ****** MARK DISTRIBUTATION TABLE ****** --> 49 <!-- ****** MARK DISTRIBUTATION TABLE ****** -->
50 <v-toolbar color="transparent" flat> 50 <v-toolbar color="transparent" flat>
51 <v-btn 51 <v-btn
52 fab 52 fab
53 dark 53 dark
54 class="open-dialog-button hidden-xl-only hidden-md-only hidden-lg-only" 54 class="open-dialog-button hidden-xl-only hidden-md-only hidden-lg-only"
55 small 55 small
56 @click="addMarkDistributionDialog = true" 56 @click="addMarkDistributionDialog = true"
57 > 57 >
58 <v-icon dark>add</v-icon> 58 <v-icon dark>add</v-icon>
59 </v-btn> 59 </v-btn>
60 <v-btn 60 <v-btn
61 round 61 round
62 class="open-dialog-button hidden-sm-only hidden-xs-only" 62 class="open-dialog-button hidden-sm-only hidden-xs-only"
63 dark 63 dark
64 @click="addMarkDistributionDialog = true" 64 @click="addMarkDistributionDialog = true"
65 > 65 >
66 <v-icon class="white--text pr-1" size="20">add</v-icon>Add Mark Distribution 66 <v-icon class="white--text pr-1" size="20">add</v-icon>Add Mark Distribution
67 </v-btn> 67 </v-btn>
68 <v-spacer></v-spacer> 68 <v-spacer></v-spacer>
69 <v-card-title class="body-1" v-show="show"> 69 <v-card-title class="body-1" v-show="show">
70 <v-btn icon large flat @click="displaySearch"> 70 <v-btn icon large flat @click="displaySearch">
71 <v-avatar size="27"> 71 <v-avatar size="27">
72 <img src="/static/icon/search.png" alt="icon" /> 72 <img src="/static/icon/search.png" alt="icon" />
73 </v-avatar> 73 </v-avatar>
74 </v-btn> 74 </v-btn>
75 </v-card-title> 75 </v-card-title>
76 <v-flex xs8 sm8 md3 lg2 v-if="showSearch"> 76 <v-flex xs8 sm8 md3 lg2 v-if="showSearch">
77 <v-layout> 77 <v-layout>
78 <v-text-field 78 <v-text-field
79 autofocus
80 v-model="search"
81 label="Search"
82 prepend-inner-icon="search"
83 color="primary"
84 ></v-text-field>
79 autofocus 85 <v-icon @click="closeSearch" color="error">close</v-icon>
80 v-model="search" 86 </v-layout>
81 label="Search" 87 </v-flex>
82 prepend-inner-icon="search" 88 </v-toolbar>
83 color="primary" 89 <v-data-table
84 ></v-text-field> 90 :headers="headers"
85 <v-icon @click="closeSearch" color="error">close</v-icon> 91 :items="markList"
86 </v-layout> 92 :pagination.sync="pagination"
87 </v-flex> 93 :search="search"
88 </v-toolbar> 94 >
89 <v-data-table 95 <template slot="items" slot-scope="props">
90 :headers="headers" 96 <tr class="tr">
91 :items="markList" 97 <td class="td td-row text-xs-center">{{ props.index + 1 }}</td>
92 :pagination.sync="pagination" 98 <td class="td td-row text-xs-center">{{ props.item.distributionType }}</td>
93 :search="search" 99 <td class="td td-row text-xs-center linkCover">{{ props.item.markValue }}</td>
94 > 100 <td class="td td-row text-xs-center">
95 <template slot="items" slot-scope="props"> 101 <span>
96 <tr class="tr"> 102 <img
97 <td class="td td-row text-xs-center">{{ props.index + 1 }}</td> 103 style="cursor:pointer; width:20px; height:18px; "
98 <td class="td td-row text-xs-center">{{ props.item.distributionType }}</td> 104 class="mr-3"
99 <td class="td td-row text-xs-center linkCover">{{ props.item.markValue }}</td> 105 @click="editItem(props.item)"
100 <td class="td td-row text-xs-center"> 106 src="/static/icon/edit.png"
101 <span> 107 />
102 <img 108 <img
103 style="cursor:pointer; width:20px; height:18px; " 109 style="cursor:pointer; width:20px; height:20px; "
104 class="mr-3" 110 @click="deleteItem(props.item)"
105 @click="editItem(props.item)" 111 src="/static/icon/delete.png"
106 src="/static/icon/edit.png" 112 />
107 /> 113 </span>
108 <img 114 </td>
109 style="cursor:pointer; width:20px; height:20px; " 115 </tr>
110 @click="deleteItem(props.item)" 116 </template>
111 src="/static/icon/delete.png" 117 <v-alert
112 /> 118 slot="no-results"
113 </span> 119 :value="true"
114 </td> 120 color="error"
115 </tr> 121 icon="warning"
116 </template> 122 >Your search for "{{ search }}" found no results.</v-alert>
117 <v-alert 123 </v-data-table>
118 slot="no-results" 124 <!-- ****** ADD MULTIPLE REMINDER ****** -->
119 :value="true" 125 <v-dialog v-model="addMarkDistributionDialog" max-width="500px" persistent>
120 color="error" 126 <v-card flat class="card-style pa-2" dark>
121 icon="warning" 127 <v-layout>
122 >Your search for "{{ search }}" found no results.</v-alert> 128 <v-flex xs12>
123 </v-data-table> 129 <label class="title text-xs-center">Add Mark Distribution</label>
124 <!-- ****** ADD MULTIPLE REMINDER ****** --> 130 <v-icon
131 size="24"
132 class="right"
133 @click="$refs.form.reset();addMarkDistributionDialog = false"
134 >cancel</v-icon>
125 <v-dialog v-model="addMarkDistributionDialog" max-width="500px" persistent> 135 </v-flex>
126 <v-card flat class="card-style pa-2" dark> 136 </v-layout>
127 <v-layout> 137 <v-form ref="form" v-model="valid" lazy-validation>
128 <v-flex xs12> 138 <v-container fluid>
129 <label class="title text-xs-center">Add Mark Distribution</label> 139 <v-flex xs12>
130 <v-icon 140 <v-layout wrap>
131 size="24" 141 <v-flex xs12 sm12 md4 class="pt-4 subheading">
132 class="right" 142 <label class="right hidden-xs-only hidden-sm-only">Mark Distribution:</label>
133 @click="$refs.form.reset();addMarkDistributionDialog = false" 143 <label class="hidden-md-only hidden-lg-only hidden-xl-only">Mark Distribution:</label>
134 >cancel</v-icon> 144 </v-flex>
135 </v-flex> 145 <v-flex xs12 sm12 md7 class="ml-3">
136 </v-layout> 146 <v-text-field
137 <v-form ref="form" v-model="valid" lazy-validation> 147 v-model="mark.distributionType"
138 <v-container fluid> 148 placeholder="fill your Mark Distribution"
139 <v-flex xs12> 149 :rules="markDistributionRules"
140 <v-layout wrap> 150 ></v-text-field>
141 <v-flex xs12 sm12 md4 class="pt-4 subheading"> 151 </v-flex>
142 <label class="right hidden-xs-only hidden-sm-only">Mark Distribution:</label> 152 </v-layout>
143 <label class="hidden-md-only hidden-lg-only hidden-xl-only">Mark Distribution:</label> 153 </v-flex>
144 </v-flex> 154 <v-flex xs12>
145 <v-flex xs12 sm12 md7 class="ml-3"> 155 <v-layout wrap>
146 <v-text-field 156 <v-flex xs12 sm12 md4 class="pt-4 subheading">
147 v-model="mark.distributionType" 157 <label class="right hidden-xs-only hidden-sm-only">Mark Value:</label>
148 placeholder="fill your Mark Distribution" 158 <label class="hidden-md-only hidden-lg-only hidden-xl-only">Mark Value:</label>
149 :rules="markDistributionRules" 159 </v-flex>
150 ></v-text-field> 160 <v-flex xs12 sm12 md7 class="ml-3">
151 </v-flex> 161 <v-text-field
152 </v-layout> 162 placeholder="fill your Mark Value"
153 </v-flex> 163 :rules="markValueRules"
154 <v-flex xs12> 164 v-model="mark.markValue"
155 <v-layout wrap> 165 type="text"
156 <v-flex xs12 sm12 md4 class="pt-4 subheading"> 166 required
157 <label class="right hidden-xs-only hidden-sm-only">Mark Value:</label> 167 ></v-text-field>
158 <label class="hidden-md-only hidden-lg-only hidden-xl-only">Mark Value:</label> 168 </v-flex>
159 </v-flex> 169 </v-layout>
160 <v-flex xs12 sm12 md7 class="ml-3"> 170 </v-flex>
161 <v-text-field 171 <v-layout>
162 placeholder="fill your Mark Value" 172 <v-flex xs12 sm12>
163 :rules="markValueRules" 173 <v-layout>
164 v-model="mark.markValue" 174 <v-spacer></v-spacer>
165 type="text" 175 <v-btn @click="clear" round class="clear-button" dark>clear</v-btn>
166 required 176 <v-btn @click="submit" round dark :loading="loading" class="add-button">Add</v-btn>
167 ></v-text-field> 177 </v-layout>
168 </v-flex> 178 </v-flex>
169 </v-layout> 179 </v-layout>
170 </v-flex> 180 </v-container>
171 <v-layout> 181 </v-form>
172 <v-flex xs12 sm12> 182 </v-card>
173 <v-layout> 183 </v-dialog>
174 <v-spacer></v-spacer> 184 <v-snackbar
175 <v-btn @click="clear" round class="clear-button" dark>clear</v-btn> 185 :timeout="timeout"
176 <v-btn @click="submit" round dark :loading="loading" class="add-button">Add</v-btn> 186 :top="y === 'top'"
177 </v-layout> 187 :right="x === 'right'"
178 </v-flex> 188 :vertical="mode === 'vertical'"
179 </v-layout> 189 v-model="snackbar"
180 </v-container> 190 :color="color"
181 </v-form> 191 >{{ text }}</v-snackbar>
182 </v-card> 192 <div class="loader" v-if="showLoader">
183 </v-dialog> 193 <v-progress-circular indeterminate color="white"></v-progress-circular>
184 <v-snackbar 194 </div>
185 :timeout="timeout" 195 </v-container>
186 :top="y === 'top'" 196 </template>
187 :right="x === 'right'" 197
188 :vertical="mode === 'vertical'" 198 <script>
189 v-model="snackbar" 199 import http from "@/Services/http.js";
190 :color="color" 200 import Util from "@/util";
191 >{{ text }}</v-snackbar> 201
192 <div class="loader" v-if="showLoader"> 202 export default {
193 <v-progress-circular indeterminate color="white"></v-progress-circular> 203 data: () => ({
194 </div> 204 snackbar: false,
195 </v-container> 205 y: "top",
196 </template> 206 x: "right",
197 207 mode: "",
198 <script> 208 color: "",
199 import http from "@/Services/http.js"; 209 timeout: 5000,
200 import Util from "@/util"; 210 text: "",
201 211 loading: false,
202 export default { 212 search: "",
203 data: () => ({ 213 showLoader: false,
204 snackbar: false, 214 show: true,
205 y: "top", 215 showSearch: false,
206 x: "right", 216 editMarkDistributionDialog: false,
207 mode: "", 217 addMarkDistributionDialog: false,
208 color: "", 218 valid: true,
209 timeout: 5000, 219 isActive: true,
210 text: "", 220 newActive: false,
211 loading: false, 221 pagination: {
212 search: "", 222 rowsPerPage: 15,
213 showLoader: false, 223 },
214 show: true, 224 markDistributionRules: [
215 showSearch: false, 225 (v) => !!v || " Mark Distribution type is required",
226 ],
227 markValueRules: [(v) => !!v || "Mark Value is required"],
216 editMarkDistributionDialog: false, 228 headers: [
217 addMarkDistributionDialog: false, 229 {
218 valid: true, 230 text: "No",
219 isActive: true, 231 align: "center",
220 newActive: false, 232 sortable: false,
221 pagination: { 233 value: "No",
222 rowsPerPage: 15, 234 },
223 }, 235 {
224 markDistributionRules: [ 236 text: " Mark Distribution Type",
225 (v) => !!v || " Mark Distribution type is required", 237 value: " distributionType",
226 ], 238 sortable: false,
227 markValueRules: [(v) => !!v || "Mark Value is required"], 239 align: "center",
228 headers: [ 240 },
229 { 241 {
230 text: "No", 242 text: " Mark Value",
231 align: "center", 243 value: "markValue",
232 sortable: false, 244 sortable: false,
233 value: "No", 245 align: "center",
234 }, 246 },
235 { 247 { text: "Action", value: "", sortable: false, align: "center" },
236 text: " Mark Distribution Type", 248 ],
237 value: " distributionType", 249 markList: [],
238 sortable: false, 250 editedIndex: -1,
239 align: "center", 251 mark: {},
240 }, 252 editedItem: {},
241 { 253 token: "",
242 text: " Mark Value", 254 }),
243 value: "markValue", 255 methods: {
244 sortable: false, 256 getMarkDistributions() {
245 align: "center", 257 this.showLoader = true;
246 }, 258 http()
247 { text: "Action", value: "", sortable: false, align: "center" }, 259 .get("/getMarkDistributionsList", {
248 ], 260 headers: { Authorization: "Bearer " + this.token },
249 markList: [], 261 })
250 editedIndex: -1, 262 .then((response) => {
251 mark: {}, 263 this.markList = response.data.data;
252 editedItem: {}, 264 this.showLoader = false;
253 token: "", 265 })
254 }), 266 .catch((error) => {
255 methods: { 267 this.showLoader = false;
256 getMarkDistributions() { 268 // if (error.response.status === 401) {
257 this.showLoader = true; 269 // this.$router.replace({ path: "/" });
258 http() 270 // this.$store.dispatch("setToken", null);
259 .get("/getMarkDistributionsList", { 271 // this.$store.dispatch("Id", null);
260 headers: { Authorization: "Bearer " + this.token }, 272 // }
261 }) 273 });
262 .then((response) => { 274 },
263 this.markList = response.data.data; 275 editItem(item) {
264 this.showLoader = false; 276 this.editedIndex = this.markList.indexOf(item);
265 }) 277 this.editedItem = Object.assign({}, item);
266 .catch((error) => { 278 this.editMarkDistributionDialog = true;
267 this.showLoader = false; 279 },
268 // if (error.response.status === 401) { 280 deleteItem(item) {
269 // this.$router.replace({ path: "/" }); 281 let deleteParticularMark = {
270 // this.$store.dispatch("setToken", null); 282 markDistributionId: item._id,
271 // this.$store.dispatch("Id", null); 283 };
272 // } 284 http()
273 }); 285 .delete(
274 }, 286 "/deleteMarkDistribution",
275 editItem(item) { 287 confirm("Are you sure you want to delete this?") && {
276 this.editedIndex = this.markList.indexOf(item); 288 params: deleteParticularMark,
277 this.editedItem = Object.assign({}, item); 289 }
278 this.editMarkDistributionDialog = true; 290 )
279 }, 291 .then((response) => {
280 deleteItem(item) { 292 this.snackbar = true;
281 let deleteParticularMark = { 293 this.text = response.data.message;
282 markDistributionId: item._id, 294 this.getMarkDistributions();
283 }; 295 })
284 http() 296 .catch((error) => {
285 .delete( 297 // console.log(error);
298 this.snackbar = true;
299 this.color = "error";
300 this.text = error.response.data.message;
286 "/deleteMarkDistribution", 301 });
287 confirm("Are you sure you want to delete this?") && { 302 },
288 params: deleteParticularMark, 303 close() {
289 } 304 this.editMarkDistributionDialog = false;
290 ) 305 },
291 .then((response) => { 306 submit() {
292 this.snackbar = true; 307 if (this.$refs.form.validate()) {
293 this.text = response.data.message; 308 this.loading = true;
294 this.getMarkDistributions(); 309 http()
295 }) 310 .post("/createMarkDistribution", this.mark)
296 .catch((error) => { 311 .then((response) => {
297 // console.log(error); 312 this.snackbar = true;
298 this.snackbar = true; 313 this.text = response.data.message;
299 this.color = "error"; 314 this.getMarkDistributions();
300 this.text = error.response.data.message; 315 this.clear();
301 }); 316 this.addMarkDistributionDialog = false;
302 }, 317 this.loading = false;
303 close() { 318 })
304 this.editMarkDistributionDialog = false; 319 .catch((error) => {
305 }, 320 this.snackbar = true;
306 submit() { 321 this.text = error.response.data.message;
307 if (this.$refs.form.validate()) { 322 this.loading = false;
308 this.loading = true; 323 });
309 http() 324 }
310 .post("/createMarkDistribution", this.mark) 325 },
311 .then((response) => { 326 clear() {
312 this.snackbar = true; 327 this.$refs.form.reset();
313 this.text = response.data.message; 328 },
314 this.getMarkDistributions(); 329 save() {
315 this.clear(); 330 (this.editedItem.markDistributionId = this.editedItem._id),
316 this.addMarkDistributionDialog = false; 331 http()
317 this.loading = false; 332 .put("/updateMarkDistribution", this.editedItem)
318 }) 333 .then((response) => {
319 .catch((error) => { 334 this.snackbar = true;
320 this.snackbar = true; 335 this.text = "Successfully Edit Notification";
321 this.text = error.response.data.message; 336 this.color = "green";
322 this.loading = false; 337 this.getMarkDistributions();
323 }); 338 this.close();
324 } 339 })
325 }, 340 .catch((error) => {
326 clear() { 341 // console.log(error);
327 this.$refs.form.reset(); 342 this.snackbar = true;
328 }, 343 this.text = error.response.data.message;
329 save() { 344 this.color = "red";
330 (this.editedItem.markDistributionId = this.editedItem._id), 345 });
331 http() 346 },
332 .put("/updateMarkDistribution", this.editedItem) 347 displaySearch() {
333 .then((response) => { 348 (this.show = false), (this.showSearch = true);
334 this.snackbar = true; 349 },
335 this.text = "Successfully Edit Notification"; 350 closeSearch() {
336 this.color = "green"; 351 this.showSearch = false;
337 this.getMarkDistributions(); 352 this.show = true;
338 this.close(); 353 this.search = "";
339 }) 354 },
340 .catch((error) => { 355 },
341 // console.log(error); 356 mounted() {
342 this.snackbar = true; 357 this.token = this.$store.state.token;
343 this.text = error.response.data.message; 358 this.getMarkDistributions();
344 this.color = "red"; 359 },
345 }); 360 };
346 }, 361 </script>
347 displaySearch() { 362 <style scoped>
src/pages/Mark/promotion.vue
Diff comments   View file @8b7976c
1 <template> 1 <template>
2 <v-app id="login"> 2 <v-app id="login">
3 <v-container fluid> 3 <v-container fluid>
4 <v-card class="px-3 grey lighten-2" flat> 4 <v-card class="px-3 grey lighten-2" flat>
5 <v-flex xs12> 5 <v-flex xs12>
6 <v-layout wrap> 6 <v-layout wrap>
7 <v-flex xs12 sm12 md3> 7 <v-flex xs12 sm12 md3>
8 <v-flex md12 class="mt-4 body-1"> 8 <v-flex md12 class="mt-4 body-1">
9 <label>Academic Year :</label> 9 <label>Academic Year :</label>
10 </v-flex> 10 </v-flex>
11 <v-flex md10> 11 <v-flex md10>
12 <v-select 12 <v-select
13 :items="acedemicYear" 13 :items="acedemicYear"
14 v-model="promotion.year" 14 v-model="promotion.year"
15 item-value="year" 15 item-value="year"
16 item-text="year" 16 item-text="year"
17 label="promotion.year" 17 label="promotion.year"
18 ></v-select> 18 ></v-select>
19 </v-flex> 19 </v-flex>
20 </v-flex> 20 </v-flex>
21 <v-flex xs12 sm12 md3> 21 <v-flex xs12 sm12 md3>
22 <v-flex md12 class="mt-4 body-1"> 22 <v-flex md12 class="mt-4 body-1">
23 <label class>Class :</label> 23 <label class>Class :</label>
24 </v-flex> 24 </v-flex>
25 <v-flex md10 class="ml-2"> 25 <v-flex md10 class="ml-2">
26 <v-select 26 <v-select
27 v-model="promotion.classId" 27 v-model="promotion.classId"
28 label="Select your class" 28 label="Select your class"
29 type="text" 29 type="text"
30 :items="classList" 30 :items="classList"
31 item-text="classNum" 31 item-text="classNum"
32 item-value="_id" 32 item-value="_id"
33 required 33 required
34 ></v-select> 34 ></v-select>
35 </v-flex> 35 </v-flex>
36 </v-flex> 36 </v-flex>
37 <v-flex xs12 sm12 md3> 37 <v-flex xs12 sm12 md3>
38 <v-flex md12 class="mt-4 body-1"> 38 <v-flex md12 class="mt-4 body-1">
39 <label>Promotion Academic Year :</label> 39 <label>Promotion Academic Year :</label>
40 </v-flex> 40 </v-flex>
41 <v-flex md10> 41 <v-flex md10>
42 <v-select 42 <v-select
43 :items="acedemicYear" 43 :items="acedemicYear"
44 v-model="promotion.year" 44 v-model="promotion.year"
45 item-text="year" 45 item-text="year"
46 label="Select Promotion Academic Year" 46 label="Select Promotion Academic Year"
47 ></v-select> 47 ></v-select>
48 </v-flex> 48 </v-flex>
49 </v-flex> 49 </v-flex>
50 <v-flex xs12 sm12 md3> 50 <v-flex xs12 sm12 md3>
51 <v-flex md12 class="mt-4 body-1"> 51 <v-flex md12 class="mt-4 body-1">
52 <label class>Promotion Class :</label> 52 <label class>Promotion Class :</label>
53 </v-flex> 53 </v-flex>
54 <v-flex md10 class="ml-2"> 54 <v-flex md10 class="ml-2">
55 <v-select :items="acedemicYear" label="Select Promotion Class"></v-select> 55 <v-select :items="acedemicYear" label="Select Promotion Class"></v-select>
56 </v-flex> 56 </v-flex>
57 </v-flex> 57 </v-flex>
58 </v-layout> 58 </v-layout>
59 </v-flex> 59 </v-flex>
60 </v-card> 60 </v-card>
61 <!-- <v-container class="pb-0"> 61 <!-- <v-container class="pb-0">
62 <v-card class="px-3 grey lighten-2" flat> 62 <v-card class="px-3 grey lighten-2" flat>
63 <v-flex xs12> 63 <v-flex xs12>
64 <v-layout> 64 <v-layout>
65 <v-flex xs12 sm12 md12> 65 <v-flex xs12 sm12 md12>
66 <v-layout> 66 <v-layout>
67 <v-radio-group v-model="radios" :mandatory="false"> 67 <v-radio-group v-model="radios" :mandatory="false">
68 <v-layout> 68 <v-layout>
69 <v-flex xs12 sm12 md6> 69 <v-flex xs12 sm12 md6>
70 <v-layout> 70 <v-layout>
71 <v-radio label="Normal" value="radio-1" class="mx-auto"></v-radio> 71 <v-radio label="Normal" value="radio-1" class="mx-auto"></v-radio>
72 </v-layout> 72 </v-layout>
73 </v-flex> 73 </v-flex>
74 <v-flex xs12 sm12 md6> 74 <v-flex xs12 sm12 md6>
75 <v-layout> 75 <v-layout>
76 <v-radio label="Advance" value="radio-2" class="mx-auto"></v-radio> 76 <v-radio label="Advance" value="radio-2" class="mx-auto"></v-radio>
77 </v-layout> 77 </v-layout>
78 </v-flex> 78 </v-flex>
79 </v-layout> 79 </v-layout>
80 </v-radio-group> 80 </v-radio-group>
81 </v-layout> 81 </v-layout>
82 </v-flex> 82 </v-flex>
83 </v-layout> 83 </v-layout>
84 </v-flex> 84 </v-flex>
85 </v-card> 85 </v-card>
86 </v-container> 86 </v-container>
87 <v-container fluid> 87 <v-container fluid>
88 <v-layout wrap> 88 <v-layout wrap>
89 <v-flex xs12 sm12 md6> 89 <v-flex xs12 sm12 md6>
90 <v-layout> 90 <v-layout>
91 <v-flex xs12 sm12 md11> 91 <v-flex xs12 sm12 md11>
92 <v-card class="px-3 grey lighten-2" flat> 92 <v-card class="px-3 grey lighten-2" flat>
93 <v-layout wrap> 93 <v-layout wrap>
94 <v-flex xs12 sm12 md5 class="mt-4 body-1"> 94 <v-flex xs12 sm12 md5 class="mt-4 body-1">
95 <label>Exam</label> 95 <label>Exam</label>
96 </v-flex> 96 </v-flex>
97 <v-flex sm12 xs12 md7> 97 <v-flex sm12 xs12 md7>
98 <v-checkbox v-model="selected" label="FIRST TERMINAL" value="John"></v-checkbox> 98 <v-checkbox v-model="selected" label="FIRST TERMINAL" value="John"></v-checkbox>
99 <v-checkbox 99 <v-checkbox
100 v-model="selected" 100 v-model="selected"
101 label="SECOND TERMINAL" 101 label="SECOND TERMINAL"
102 value="Jacob" 102 value="Jacob"
103 class="mt-0" 103 class="mt-0"
104 ></v-checkbox> 104 ></v-checkbox>
105 <v-checkbox v-model="selected" label="Test07" value="Jacobs" class="mt-0"></v-checkbox> 105 <v-checkbox v-model="selected" label="Test07" value="Jacobs" class="mt-0"></v-checkbox>
106 </v-flex> 106 </v-flex>
107 </v-layout> 107 </v-layout>
108 </v-card> 108 </v-card>
109 </v-flex> 109 </v-flex>
110 </v-layout> 110 </v-layout>
111 </v-flex> 111 </v-flex>
112 <v-flex xs12 sm12 md6> 112 <v-flex xs12 sm12 md6>
113 <v-layout wrap> 113 <v-layout wrap>
114 <v-flex xs12 sm12 md12> 114 <v-flex xs12 sm12 md12>
115 <v-card class="px-3 grey lighten-2" flat height="160"> 115 <v-card class="px-3 grey lighten-2" flat height="160">
116 <v-layout wrap> 116 <v-layout wrap>
117 <v-flex xs12 sm12 md5 class="mt-4 body-1"> 117 <v-flex xs12 sm12 md5 class="mt-4 body-1">
118 <label>Mark Percentage</label> 118 <label>Mark Percentage</label>
119 </v-flex> 119 </v-flex>
120 <v-flex xs12 sm12 md7> 120 <v-flex xs12 sm12 md7>
121 <v-checkbox v-model="selected" label="Exam " value="John"></v-checkbox> 121 <v-checkbox v-model="selected" label="Exam " value="John"></v-checkbox>
122 <v-checkbox v-model="selected" label="ASSIGNMENT" value="Jacob" class="mt-0"></v-checkbox> 122 <v-checkbox v-model="selected" label="ASSIGNMENT" value="Jacob" class="mt-0"></v-checkbox>
123 </v-flex> 123 </v-flex>
124 </v-layout> 124 </v-layout>
125 </v-card> 125 </v-card>
126 </v-flex> 126 </v-flex>
127 </v-layout> 127 </v-layout>
128 </v-flex> 128 </v-flex>
129 </v-layout> 129 </v-layout>
130 </v-container> 130 </v-container>
131 <v-card class="px-3 grey lighten-2" flat> 131 <v-card class="px-3 grey lighten-2" flat>
132 <v-flex xs12> 132 <v-flex xs12>
133 <v-layout wrap> 133 <v-layout wrap>
134 <v-flex xs12 sm12 md3> 134 <v-flex xs12 sm12 md3>
135 <v-flex md12 class="mt-4 body-1"> 135 <v-flex md12 class="mt-4 body-1">
136 <label>HINDI Pass Mark :</label> 136 <label>HINDI Pass Mark :</label>
137 </v-flex> 137 </v-flex>
138 <v-flex md10> 138 <v-flex md10>
139 <v-text-field v-model="passmark.hindi" placeholder="fill Hindi Pass Mark"></v-text-field> 139 <v-text-field v-model="passmark.hindi" placeholder="fill Hindi Pass Mark"></v-text-field>
140 </v-flex> 140 </v-flex>
141 </v-flex> 141 </v-flex>
142 <v-flex xs12 sm12 md3> 142 <v-flex xs12 sm12 md3>
143 <v-flex md12 class="mt-4 body-1"> 143 <v-flex md12 class="mt-4 body-1">
144 <label class>ENGLISH Pass Mark :</label> 144 <label class>ENGLISH Pass Mark :</label>
145 </v-flex> 145 </v-flex>
146 <v-flex md10 class="ml-2"> 146 <v-flex md10 class="ml-2">
147 <v-text-field v-model="passmark.english" placeholder="fill English Pass Mark"></v-text-field> 147 <v-text-field v-model="passmark.english" placeholder="fill English Pass Mark"></v-text-field>
148 </v-flex> 148 </v-flex>
149 </v-flex> 149 </v-flex>
150 <v-flex xs12 sm12 md3> 150 <v-flex xs12 sm12 md3>
151 <v-flex md12 class="mt-4 body-1"> 151 <v-flex md12 class="mt-4 body-1">
152 <label>MATHEMATICS Pass Mark :</label> 152 <label>MATHEMATICS Pass Mark :</label>
153 </v-flex> 153 </v-flex>
154 <v-flex md10> 154 <v-flex md10>
155 <v-text-field 155 <v-text-field
156 v-model="passmark.mathematics" 156 v-model="passmark.mathematics"
157 placeholder="fill Mathematics Pass Mark" 157 placeholder="fill Mathematics Pass Mark"
158 ></v-text-field> 158 ></v-text-field>
159 </v-flex> 159 </v-flex>
160 </v-flex> 160 </v-flex>
161 </v-layout> 161 </v-layout>
162 </v-flex> 162 </v-flex>
163 </v-card>--> 163 </v-card>-->
164 <v-layout> 164 <v-layout>
165 <v-flex xs10 sm10 md4 class="mx-auto mt-4"> 165 <v-flex xs10 sm10 md4 class="mx-auto mt-4">
166 <v-btn class="black" dark block round>Promotion Mark Setting</v-btn> 166 <v-btn class="black" dark block round>Promotion Mark Setting</v-btn>
167 </v-flex> 167 </v-flex>
168 </v-layout> 168 </v-layout>
169 </v-container> 169 </v-container>
170 </v-app> 170 </v-app>
171 </template> 171 </template>
172 172
173 <script> 173 <script>
174 import http from "@/Services/http.js"; 174 import http from "@/Services/http.js";
175 175
176 export default { 176 export default {
177 data() { 177 data() {
178 return { 178 return {
179 radios: "radio-1", 179 radios: "radio-1",
180 acedemicYear: [], 180 acedemicYear: [],
181 classList: [], 181 classList: [],
182 promotion: { 182 promotion: {
183 // academicYear: "" 183 // academicYear: ""
184 }, 184 },
185 passmark: { 185 passmark: {
186 hindi: "40", 186 hindi: "40",
187 english: "40", 187 english: "40",
188 mathematics: "40", 188 mathematics: "40",
189 }, 189 },
190 selected: ["John", "Jacob", "Jacobs"], 190 selected: ["John", "Jacob", "Jacobs"],
191 token: "", 191 token: "",
192 }; 192 };
193 }, 193 },
194 mounted() { 194 mounted() {
195 var year = new Date().getFullYear() + 1; 195 var year = new Date().getFullYear() + 1;
196 // this.promotion.acedemicYear = new Date().getFullYear() + "-" + year; 196 // this.promotion.acedemicYear = new Date().getFullYear() + "-" + year;
197 this.acedemicYear.push({ year: new Date().getFullYear() + "-" + year }); 197 this.acedemicYear.push({ year: new Date().getFullYear() + "-" + year });
198 // console.log(" this.promotion.acedemicYear ", this.acedemicYear); 198 // console.log(" this.promotion.acedemicYear ", this.acedemicYear);
199 this.token = this.$store.state.token; 199 this.token = this.$store.state.token;
200 this.getClass(); 200 this.getClass();
201 }, 201 },
202 methods: { 202 methods: {
203 getClass() { 203 getClass() {
204 http() 204 http()
205 .get("/getClassesList", { 205 .get("/getClassesList", {
206 headers: { Authorization: "Bearer " + this.token }, 206 headers: { Authorization: "Bearer " + this.token },
207 }) 207 })
208 .then((response) => { 208 .then((response) => {
209 this.classList = response.data.data; 209 this.classList = response.data.data;
210 }) 210 })
211 .catch((error) => { 211 .catch((error) => {
212 this.showLoader = false; 212 this.showLoader = false;
213 if (error.response.status === 401) { 213 if (error.response.status === 401) {
214 this.$router.replace({ path: "/" }); 214 this.$router.replace({ path: "/" });
215 this.$store.dispatch("setToken", null); 215 this.$store.dispatch("setToken", null);
216 this.$store.dispatch("Id", null); 216 this.$store.dispatch("Id", null);
217 this.$store.dispatch("Role", null); 217 this.$store.dispatch("Role", null);
218 } 218 }
219 }); 219 });
220 }, 220 },
221 }, 221 },
222 }; 222 };
223 </script> 223 </script>
src/pages/Meet/meet.vue
Diff comments   View file @8b7976c
1 <template> 1 <template>
2 <v-container fluid class="body-color"> 2 <v-container fluid class="body-color">
3 <v-card flat class="elevation-0 transparent"> 3 <v-card flat class="elevation-0 transparent">
4 <v-flex xs12> 4 <v-flex xs12>
5 <v-layout> 5 <v-layout>
6 <v-flex lg2> 6 <v-flex lg2>
7 <v-select 7 <v-select
8 :items="addclass" 8 :items="addclass"
9 label="Select Class" 9 label="Select Class"
10 v-model="selectStudents.classId" 10 v-model="selectStudents.classId"
11 item-text="classNum" 11 item-text="classNum"
12 item-value="_id" 12 item-value="_id"
13 name="Select Class" 13 name="Select Class"
14 :rules="classRules" 14 :rules="classRules"
15 class="ml-4" 15 class="ml-4"
16 ></v-select> 16 ></v-select>
17 </v-flex> 17 </v-flex>
18 <!-- <v-flex xs3> 18 <!-- <v-flex xs3>
19 <v-select 19 <v-select
20 :items="addSection" 20 :items="addSection"
21 label="Select Section" 21 label="Select Section"
22 v-model="selectStudents.selectSection" 22 v-model="selectStudents.selectSection"
23 item-text="name" 23 item-text="name"
24 item-value="_id" 24 item-value="_id"
25 name="Select Section" 25 name="Select Section"
26 :rules="sectionRules" 26 :rules="sectionRules"
27 class="px-2" 27 class="px-2"
28 required 28 required
29 ></v-select> 29 ></v-select>
30 </v-flex>--> 30 </v-flex>-->
31 <v-flex xs3> 31 <v-flex xs3>
32 <v-btn 32 <v-btn
33 @click="createRoom(selectStudents.classId)" 33 @click="createRoom(selectStudents.classId)"
34 round 34 round
35 dark 35 dark
36 :loading="loading" 36 :loading="loading"
37 class="open-dialog-button" 37 class="open-dialog-button"
38 >Find</v-btn> 38 >Find</v-btn>
39 </v-flex> 39 </v-flex>
40 </v-layout> 40 </v-layout>
41 </v-flex> 41 </v-flex>
42 </v-card> 42 </v-card>
43 <div id="jitsi-container"></div> 43 <div id="jitsi-container"></div>
44 </v-container> 44 </v-container>
45 </template> 45 </template>
46 <script> 46 <script>
47 import http from "@/Services/http.js"; 47 import http from "@/Services/http.js";
48 import moment from "moment"; 48 import moment from "moment";
49 49
50 export default { 50 export default {
51 data() { 51 data() {
52 return { 52 return {
53 token: "", 53 token: "",
54 selectStudents: {}, 54 selectStudents: {},
55 classRules: [(v) => !!v || " Class Name is required"], 55 classRules: [(v) => !!v || " Class Name is required"],
56 sectionRules: [(v) => !!v || " Section Name is required"], 56 sectionRules: [(v) => !!v || " Section Name is required"],
57 addclass: [], 57 addclass: [],
58 addSection: [], 58 addSection: [],
59 loading: false, 59 loading: false,
60 room: "", 60 room: "",
61 username: "", 61 username: "",
62 roomPassword: "", 62 roomPassword: "",
63 }; 63 };
64 }, 64 },
65 methods: { 65 methods: {
66 startConference() { 66 startConference() {
67 var _this = this; 67 var _this = this;
68 try { 68 try {
69 const domain = "meet.intrack.in"; 69 const domain = "meet.intrack.in";
70 const options = { 70 const options = {
71 audioInput: "<deviceLabel>", 71 audioInput: "<deviceLabel>",
72 audioOutput: "<deviceLabel>", 72 audioOutput: "<deviceLabel>",
73 videoInput: "<deviceLabel>", 73 videoInput: "<deviceLabel>",
74 roomName: this.room, 74 roomName: this.room,
75 height: 500, 75 height: 500,
76 parentNode: document.getElementById("jitsi-container"), 76 parentNode: document.getElementById("jitsi-container"),
77 interfaceConfigOverwrite: { 77 interfaceConfigOverwrite: {
78 filmStripOnly: false, 78 filmStripOnly: false,
79 SHOW_JITSI_WATERMARK: false, 79 SHOW_JITSI_WATERMARK: false,
80 TOOLBAR_BUTTONS: [ 80 TOOLBAR_BUTTONS: [
81 "microphone", 81 "microphone",
82 "camera", 82 "camera",
83 "closedcaptions", 83 "closedcaptions",
84 "desktop", 84 "desktop",
85 "fullscreen", 85 "fullscreen",
86 "fodeviceselection", 86 "fodeviceselection",
87 "hangup", 87 "hangup",
88 "profile", 88 "profile",
89 "info", 89 "info",
90 "chat", 90 "chat",
91 "recording", 91 "recording",
92 "livestreaming", 92 "livestreaming",
93 "etherpad", 93 "etherpad",
94 "sharedvideo", 94 "sharedvideo",
95 "settings", 95 "settings",
96 "raisehand", 96 "raisehand",
97 "videoquality", 97 "videoquality",
98 "filmstrip", 98 "filmstrip",
99 "invite", 99 "invite",
100 "feedback", 100 "feedback",
101 "stats", 101 "stats",
102 "shortcuts", 102 "shortcuts",
103 "tileview", 103 "tileview",
104 ], 104 ],
105 }, 105 },
106 configOverwrite: { 106 configOverwrite: {
107 disableSimulcast: false, 107 disableSimulcast: false,
108 }, 108 },
109 teacherName: "", 109 teacherName: "",
110 romm: "", 110 romm: "",
111 }; 111 };
112 112
113 this.api = new JitsiMeetExternalAPI(domain, options); 113 this.api = new JitsiMeetExternalAPI(domain, options);
114 this.api.addEventListener("videoConferenceJoined", () => { 114 this.api.addEventListener("videoConferenceJoined", () => {
115 // console.log("Local User Joined"); 115 // console.log("Local User Joined");
116 116
117 _this.api.executeCommand("displayName", _this.username); 117 _this.api.executeCommand("displayName", _this.username);
118 _this.api.executeCommand("password", this.roomPassword); 118 _this.api.executeCommand("password", this.roomPassword);
119 }); 119 });
120 } catch (error) { 120 } catch (error) {
121 // console.error("Failed to load Jitsi API", error); 121 // console.error("Failed to load Jitsi API", error);
122 this.snackbar = true;
123 this.color = "error";
124 this.text = error.response.data.message;
122 this.snackbar = true; 125 }
123 this.color = "error"; 126 },
124 this.text = error.response.data.message; 127 openRoom() {
125 } 128 // verify the JitsiMeetExternalAPI constructor is added to the global..
126 }, 129 // if (this.teacherName != "" || this.room != "") {
127 openRoom() { 130 // if (window.JitsiMeetExternalAPI) {
128 // verify the JitsiMeetExternalAPI constructor is added to the global.. 131 // // var person = prompt("Please enter your name:", "Rabie");
129 // if (this.teacherName != "" || this.room != "") { 132 // if (person != null || person != "") this.username = this.teacherName;
130 // if (window.JitsiMeetExternalAPI) { 133 // var room = prompt("Please enter your room:", "Test Room");
131 // // var person = prompt("Please enter your name:", "Rabie"); 134 // if (room != null || room != "") this.room = this.room;
132 // if (person != null || person != "") this.username = this.teacherName; 135 // this.startConference();
133 // var room = prompt("Please enter your room:", "Test Room"); 136 // } else alert("Jitsi Meet API script not loaded");
134 // if (room != null || room != "") this.room = this.room; 137 // }
135 // this.startConference(); 138 },
136 // } else alert("Jitsi Meet API script not loaded"); 139 getClassData() {
137 // } 140 http()
138 }, 141 .get("/getClassesList", {
139 getClassData() { 142 headers: { Authorization: "Bearer " + this.token },
140 http() 143 })
141 .get("/getClassesList", { 144 .then((response) => {
142 headers: { Authorization: "Bearer " + this.token }, 145 this.addclass = response.data.data;
143 }) 146 })
144 .then((response) => { 147 .catch((error) => {
145 this.addclass = response.data.data; 148 this.showLoader = false;
146 }) 149 if (error.response.status === 401) {
147 .catch((error) => { 150 this.$router.replace({ path: "/" });
148 this.showLoader = false; 151 this.$store.dispatch("setToken", null);
149 if (error.response.status === 401) { 152 this.$store.dispatch("Id", null);
150 this.$router.replace({ path: "/" }); 153 this.$store.dispatch("Role", null);
151 this.$store.dispatch("setToken", null); 154 }
152 this.$store.dispatch("Id", null); 155 });
153 this.$store.dispatch("Role", null); 156 },
154 } 157 createRoom(classId) {
155 }); 158 this.showLoader = true;
156 }, 159 var classId = {
157 createRoom(classId) { 160 classId: classId,
158 this.showLoader = true; 161 };
159 var classId = { 162 http()
160 classId: classId, 163 .post("/createRoom", classId)
161 }; 164 .then((response) => {
162 http() 165 // this.addSection = response.data.data;
163 .post("/createRoom", classId) 166 // console.log("CREATE___ROOOM", response.data);
164 .then((response) => { 167 this.room = response.data.data.roomName;
165 // this.addSection = response.data.data; 168 this.username = response.data.data.teacherName;
166 // console.log("CREATE___ROOOM", response.data); 169 this.roomPassword = response.data.data.roomPassword;
167 this.room = response.data.data.roomName; 170 var this_ = this;
168 this.username = response.data.data.teacherName; 171 if (this.username != "" || this.room != "") {
169 this.roomPassword = response.data.data.roomPassword; 172 if (window.JitsiMeetExternalAPI) {
170 var this_ = this; 173 // var person = prompt("Please enter your name:", "Rabie");
171 if (this.username != "" || this.room != "") { 174 if (this_.username != null || this_.username != "") {
172 if (window.JitsiMeetExternalAPI) { 175 this.username = this.username;
173 // var person = prompt("Please enter your name:", "Rabie"); 176 }
174 if (this_.username != null || this_.username != "") { 177 // var room = prompt("Please enter your room:", "Test Room");
175 this.username = this.username; 178 if (this_.room != null || this_.room != "") {
176 } 179 this.room = this.room;
177 // var room = prompt("Please enter your room:", "Test Room"); 180 }
178 if (this_.room != null || this_.room != "") { 181 this.startConference();
179 this.room = this.room; 182 } else alert("Jitsi Meet API script not loaded");
180 } 183 }
181 this.startConference(); 184 this.showLoader = false;
182 } else alert("Jitsi Meet API script not loaded"); 185 })
183 } 186 .catch((err) => {
184 this.showLoader = false; 187 this.showLoader = false;
185 }) 188 });
186 .catch((err) => { 189 },
187 this.showLoader = false; 190 },
188 }); 191
189 }, 192 mounted() {
190 }, 193 this.token = this.$store.state.token;
191 194 this.getClassData();
192 mounted() { 195 // this.openRoom();
193 this.token = this.$store.state.token; 196 },
194 this.getClassData(); 197 };
195 // this.openRoom(); 198 </script>
196 }, 199
197 }; 200
198 </script> 201 <style>
199 202 #jitsi-container {
200 203 height: 100vh;
201 <style> 204 }
202 #jitsi-container { 205 </style>
src/pages/News/news.vue
Diff comments   View file @8b7976c
1 <template> 1 <template>
2 <v-container fluid class="body-color"> 2 <v-container fluid class="body-color">
3 <!-- ****** EDIT NEWS ****** --> 3 <!-- ****** EDIT NEWS ****** -->
4 <v-dialog v-model="editNewsDialog" max-width="600px" persistent> 4 <v-dialog v-model="editNewsDialog" max-width="600px" persistent>
5 <v-card flat class="card-style pa-2" dark> 5 <v-card flat class="card-style pa-2" dark>
6 <v-layout> 6 <v-layout>
7 <v-flex xs12> 7 <v-flex xs12>
8 <label class="title text-xs-center">Edit News</label> 8 <label class="title text-xs-center">Edit News</label>
9 <v-icon size="24" class="right" @click="editNewsDialog = false">cancel</v-icon> 9 <v-icon size="24" class="right" @click="editNewsDialog = false">cancel</v-icon>
10 </v-flex> 10 </v-flex>
11 </v-layout> 11 </v-layout>
12 <v-card-text> 12 <v-card-text>
13 <v-layout row> 13 <v-layout row>
14 <v-flex xs12 class="text-xs-center text-sm-center text-md-center text-lg-center my-4"> 14 <v-flex xs12 class="text-xs-center text-sm-center text-md-center text-lg-center my-4">
15 <input 15 <input
16 type="file" 16 type="file"
17 style="display: none" 17 style="display: none"
18 ref="image" 18 ref="image"
19 accept="image/*" 19 accept="image/*"
20 multiple 20 multiple
21 @change="onFilePicked" 21 @change="onFilePicked"
22 /> 22 />
23 <v-layout justify-center> 23 <v-layout justify-center>
24 <v-flex 24 <v-flex
25 xs12 25 xs12
26 sm12 26 sm12
27 md3 27 md3
28 v-for="Image in editedItem.newsImageUrl" 28 v-for="Image in editedItem.newsImageUrl"
29 :key="Image._id" 29 :key="Image._id"
30 v-if="editedItem.newsImageUrl" 30 v-if="editedItem.newsImageUrl"
31 class="profile-image-wrapper" 31 class="profile-image-wrapper"
32 > 32 >
33 <img 33 <img
34 :src="Image.imageUrl" 34 :src="Image.imageUrl"
35 height="100" 35 height="100"
36 width="100" 36 width="100"
37 alt="News" 37 alt="News"
38 class="pa-2 imgNews" 38 class="pa-2 imgNews"
39 /> 39 />
40 <v-icon 40 <v-icon
41 class="red edit-profile-icon" 41 class="red edit-profile-icon"
42 dark 42 dark
43 @click="deleteImage(Image._id,editedItem._id)" 43 @click="deleteImage(Image._id,editedItem._id)"
44 >close</v-icon> 44 >close</v-icon>
45 </v-flex> 45 </v-flex>
46 <v-flex v-for="(file, index) in files" :key="index"> 46 <v-flex v-for="(file, index) in files" :key="index">
47 <img :src="file" height="100" width="100" class="pa-2" /> 47 <img :src="file" height="100" width="100" class="pa-2" />
48 </v-flex> 48 </v-flex>
49 <img 49 <img
50 src="/static/icon/user.png" 50 src="/static/icon/user.png"
51 v-if="files == '' && editedItem.newsImageUrl == ''" 51 v-if="files == '' && editedItem.newsImageUrl == ''"
52 height="100" 52 height="100"
53 width="100" 53 width="100"
54 alt="News" 54 alt="News"
55 /> 55 />
56 </v-layout> 56 </v-layout>
57 </v-flex> 57 </v-flex>
58 </v-layout> 58 </v-layout>
59 <!-- </v-layout> --> 59 <!-- </v-layout> -->
60 <v-layout wrap> 60 <v-layout wrap>
61 <v-flex xs12 sm12> 61 <v-flex xs12 sm12>
62 <v-layout> 62 <v-layout>
63 <v-flex xs4 class="pt-4 subheading"> 63 <v-flex xs4 class="pt-4 subheading">
64 <label class="right">Title:</label> 64 <label class="right">Title:</label>
65 </v-flex> 65 </v-flex>
66 <v-flex sm6 xs8 class="ml-3"> 66 <v-flex sm6 xs8 class="ml-3">
67 <v-text-field 67 <v-text-field
68 v-model="editedItem.title" 68 v-model="editedItem.title"
69 placeholder="fill your Title" 69 placeholder="fill your Title"
70 name="name" 70 name="name"
71 type="text" 71 type="text"
72 required 72 required
73 ></v-text-field> 73 ></v-text-field>
74 </v-flex> 74 </v-flex>
75 </v-layout> 75 </v-layout>
76 </v-flex> 76 </v-flex>
77 <v-flex xs12 sm12> 77 <v-flex xs12 sm12>
78 <v-layout> 78 <v-layout>
79 <v-flex xs4 class="pt-4 subheading"> 79 <v-flex xs4 class="pt-4 subheading">
80 <label class="right">Description:</label> 80 <label class="right">Description:</label>
81 </v-flex> 81 </v-flex>
82 <v-flex sm6 xs8 class="ml-3"> 82 <v-flex sm6 xs8 class="ml-3">
83 <v-text-field 83 <v-text-field
84 placeholder="fill your Description" 84 placeholder="fill your Description"
85 v-model="editedItem.description" 85 v-model="editedItem.description"
86 type="text" 86 type="text"
87 name="email" 87 name="email"
88 required 88 required
89 ></v-text-field> 89 ></v-text-field>
90 </v-flex> 90 </v-flex>
91 </v-layout> 91 </v-layout>
92 </v-flex> 92 </v-flex>
93 <v-flex xs12> 93 <v-flex xs12>
94 <v-layout> 94 <v-layout>
95 <v-flex xs4 class="pt-4 subheading"> 95 <v-flex xs4 class="pt-4 subheading">
96 <label class="right hidden-xs-only hidden-sm-only">Add New Images:</label> 96 <label class="right hidden-xs-only hidden-sm-only">Add New Images:</label>
97 <label class="right hidden-lg-only hidden-md-only hidden-xl-only">Uplaod :</label> 97 <label class="right hidden-lg-only hidden-md-only hidden-xl-only">Uplaod :</label>
98 </v-flex> 98 </v-flex>
99 <v-flex sm6 xs8 class="ml-3"> 99 <v-flex sm6 xs8 class="ml-3">
100 <v-text-field 100 <v-text-field
101 label="Select Image" 101 label="Select Image"
102 @click="pickFile" 102 @click="pickFile"
103 v-model="imageName" 103 v-model="imageName"
104 append-icon="attach_file" 104 append-icon="attach_file"
105 multiple 105 multiple
106 ></v-text-field> 106 ></v-text-field>
107 </v-flex> 107 </v-flex>
108 </v-layout> 108 </v-layout>
109 </v-flex> 109 </v-flex>
110 </v-layout> 110 </v-layout>
111 <v-layout> 111 <v-layout>
112 <v-flex xs12 sm9 offset-sm2 class="hidden-xs-only hidden-sm-only"> 112 <v-flex xs12 sm9 offset-sm2 class="hidden-xs-only hidden-sm-only">
113 <v-card-actions> 113 <v-card-actions>
114 <v-spacer></v-spacer> 114 <v-spacer></v-spacer>
115 <v-btn round dark @click="save" class="add-button">Save</v-btn> 115 <v-btn round dark @click="save" class="add-button">Save</v-btn>
116 </v-card-actions> 116 </v-card-actions>
117 </v-flex> 117 </v-flex>
118 <v-flex xs12 class="hidden-lg-only hidden-md-only hidden-xl-only"> 118 <v-flex xs12 class="hidden-lg-only hidden-md-only hidden-xl-only">
119 <v-card-actions> 119 <v-card-actions>
120 <v-spacer></v-spacer> 120 <v-spacer></v-spacer>
121 <v-btn round dark @click="save" class="add-button">Save</v-btn> 121 <v-btn round dark @click="save" class="add-button">Save</v-btn>
122 <v-spacer></v-spacer> 122 <v-spacer></v-spacer>
123 </v-card-actions> 123 </v-card-actions>
124 </v-flex> 124 </v-flex>
125 </v-layout> 125 </v-layout>
126 </v-card-text> 126 </v-card-text>
127 </v-card> 127 </v-card>
128 </v-dialog> 128 </v-dialog>
129 <!-- ****** PROFILE NEWS ****** --> 129 <!-- ****** PROFILE NEWS ****** -->
130 <v-dialog v-model="dialog1" max-width="500px" persistent> 130 <v-dialog v-model="dialog1" max-width="500px" persistent>
131 <v-card flat class="card-style pa-3" dark> 131 <v-card flat class="card-style pa-3" dark>
132 <v-layout> 132 <v-layout>
133 <v-flex xs12> 133 <v-flex xs12>
134 <label class="title text-xs-center">View News</label> 134 <label class="title text-xs-center">View News</label>
135 <v-icon size="24" class="right" @click="dialog1 = false">cancel</v-icon> 135 <v-icon size="24" class="right" @click="dialog1 = false">cancel</v-icon>
136 </v-flex> 136 </v-flex>
137 </v-layout> 137 </v-layout>
138 <v-card-text> 138 <v-card-text>
139 <v-flex align-center justify-center layout text-xs-center> 139 <v-flex align-center justify-center layout text-xs-center>
140 <span v-for="(image,i) in editedItem.newsImageUrl" :key="i" class="pa-2"> 140 <span v-for="(image,i) in editedItem.newsImageUrl" :key="i" class="pa-2">
141 <img :src="image.imageUrl" alt="News" width="100" height="100" class="imgNews" /> 141 <img :src="image.imageUrl" alt="News" width="100" height="100" class="imgNews" />
142 </span> 142 </span>
143 <img 143 <img
144 src="/static/icon/user.png" 144 src="/static/icon/user.png"
145 v-if="editedItem.newsImageUrl == ''" 145 v-if="editedItem.newsImageUrl == ''"
146 height="80" 146 height="80"
147 width="80" 147 width="80"
148 alt="News" 148 alt="News"
149 /> 149 />
150 </v-flex> 150 </v-flex>
151 <v-container grid-list-md> 151 <v-container grid-list-md>
152 <v-layout wrap> 152 <v-layout wrap>
153 <v-flex> 153 <v-flex>
154 <v-layout> 154 <v-layout>
155 <v-flex xs5 sm6> 155 <v-flex xs5 sm6>
156 <h5 class="right my-1"> 156 <h5 class="right my-1">
157 <b>Title:</b> 157 <b>Title:</b>
158 </h5> 158 </h5>
159 </v-flex> 159 </v-flex>
160 <v-flex sm6 xs8> 160 <v-flex sm6 xs8>
161 <h5 class="my-1">{{ editedItem.title }}</h5> 161 <h5 class="my-1">{{ editedItem.title }}</h5>
162 </v-flex> 162 </v-flex>
163 </v-layout> 163 </v-layout>
164 <v-layout> 164 <v-layout>
165 <v-flex xs5 sm6> 165 <v-flex xs5 sm6>
166 <h5 class="right my-1"> 166 <h5 class="right my-1">
167 <b>Description:</b> 167 <b>Description:</b>
168 </h5> 168 </h5>
169 </v-flex> 169 </v-flex>
170 <v-flex sm6 xs8> 170 <v-flex sm6 xs8>
171 <h5 class="my-1">{{ editedItem.description }}</h5> 171 <h5 class="my-1">{{ editedItem.description }}</h5>
172 </v-flex> 172 </v-flex>
173 </v-layout> 173 </v-layout>
174 </v-flex> 174 </v-flex>
175 </v-layout> 175 </v-layout>
176 </v-container> 176 </v-container>
177 </v-card-text> 177 </v-card-text>
178 </v-card> 178 </v-card>
179 </v-dialog> 179 </v-dialog>
180 <!-- ****** EXISTING-USERS NEWS TABLE ****** --> 180 <!-- ****** EXISTING-USERS NEWS TABLE ****** -->
181 <v-toolbar color="transparent" flat> 181 <v-toolbar color="transparent" flat>
182 <v-btn 182 <v-btn
183 fab 183 fab
184 dark 184 dark
185 class="open-dialog-button hidden-xl-only hidden-md-only hidden-lg-only" 185 class="open-dialog-button hidden-xl-only hidden-md-only hidden-lg-only"
186 small 186 small
187 @click="addNewsDialog = true" 187 @click="addNewsDialog = true"
188 > 188 >
189 <v-icon dark>add</v-icon> 189 <v-icon dark>add</v-icon>
190 </v-btn> 190 </v-btn>
191 <v-btn 191 <v-btn
192 round 192 round
193 class="open-dialog-button hidden-sm-only hidden-xs-only" 193 class="open-dialog-button hidden-sm-only hidden-xs-only"
194 dark 194 dark
195 @click="addNewsDialog = true" 195 @click="addNewsDialog = true"
196 > 196 >
197 <v-icon class="white--text pr-1" size="20">add</v-icon>Add News 197 <v-icon class="white--text pr-1" size="20">add</v-icon>Add News
198 </v-btn> 198 </v-btn>
199 <v-spacer></v-spacer> 199 <v-spacer></v-spacer>
200 <v-card-title class="body-1" v-show="show"> 200 <v-card-title class="body-1" v-show="show">
201 <v-btn icon large flat @click="displaySearch"> 201 <v-btn icon large flat @click="displaySearch">
202 <v-avatar size="27"> 202 <v-avatar size="27">
203 <img src="/static/icon/search.png" alt="icon" /> 203 <img src="/static/icon/search.png" alt="icon" />
204 </v-avatar> 204 </v-avatar>
205 </v-btn> 205 </v-btn>
206 </v-card-title> 206 </v-card-title>
207 <v-flex xs8 sm8 md3 lg2 v-if="showSearch"> 207 <v-flex xs8 sm8 md3 lg2 v-if="showSearch">
208 <v-layout> 208 <v-layout>
209 <v-text-field 209 <v-text-field
210 autofocus 210 autofocus
211 v-model="search" 211 v-model="search"
212 label="Search" 212 label="Search"
213 prepend-inner-icon="search" 213 prepend-inner-icon="search"
214 color="primary" 214 color="primary"
215 ></v-text-field> 215 ></v-text-field>
216 <v-icon @click="closeSearch" color="error">close</v-icon> 216 <v-icon @click="closeSearch" color="error">close</v-icon>
217 </v-layout> 217 </v-layout>
218 </v-flex> 218 </v-flex>
219 </v-toolbar> 219 </v-toolbar>
220 <v-data-table 220 <v-data-table
221 :headers="headers" 221 :headers="headers"
222 :items="desserts" 222 :items="desserts"
223 :pagination.sync="pagination" 223 :pagination.sync="pagination"
224 :search="search" 224 :search="search"
225 > 225 >
226 <template slot="items" slot-scope="props"> 226 <template slot="items" slot-scope="props">
227 <tr class="tr"> 227 <tr class="tr">
228 <td class="td td-row">{{ props.index + 1}}</td> 228 <td class="td td-row">{{ props.index + 1}}</td>
229 <td class="td td-row text-xs-center"> 229 <td class="td td-row text-xs-center">
230 <span v-for="(image,_id) in props.item.newsImageUrl" class="pa-2"> 230 <span v-for="(image,_id) in props.item.newsImageUrl" class="pa-2">
231 <img :src="image.imageUrl" alt="newsImage" width="40" height="40" /> 231 <img :src="image.imageUrl" alt="newsImage" width="40" height="40" />
232 </span> 232 </span>
233 <img 233 <img
234 src="/static/icon/user.png" 234 src="/static/icon/user.png"
235 v-if="props.item.newsImageUrl == ''" 235 v-if="props.item.newsImageUrl == ''"
236 width="40" 236 width="40"
237 alt="News" 237 alt="News"
238 /> 238 />
239 </td> 239 </td>
240 <td class="td td-row text-xs-center">{{ props.item.title}}</td> 240 <td class="td td-row text-xs-center">{{ props.item.title}}</td>
241 <td class="td td-row text-xs-center">{{ props.item.description}}</td> 241 <td class="td td-row text-xs-center">{{ props.item.description}}</td>
242 242
243 <td class="td td-row text-xs-center"> 243 <td class="td td-row text-xs-center">
244 <span> 244 <span>
245 <v-tooltip top> 245 <v-tooltip top>
246 <img 246 <img
247 slot="activator" 247 slot="activator"
248 style="cursor:pointer; width:25px; height:25px; " 248 style="cursor:pointer; width:25px; height:25px; "
249 class="mr-3" 249 class="mr-3"
250 @click="profile(props.item)" 250 @click="profile(props.item)"
251 src="/static/icon/view.png" 251 src="/static/icon/view.png"
252 /> 252 />
253 <span>View</span> 253 <span>View</span>
254 </v-tooltip> 254 </v-tooltip>
255 <v-tooltip top> 255 <v-tooltip top>
256 <img 256 <img
257 slot="activator" 257 slot="activator"
258 style="cursor:pointer; width:20px; height:18px; " 258 style="cursor:pointer; width:20px; height:18px; "
259 class="mr-3" 259 class="mr-3"
260 @click="editItem(props.item)" 260 @click="editItem(props.item)"
261 src="/static/icon/edit.png" 261 src="/static/icon/edit.png"
262 /> 262 />
263 <span>Edit</span> 263 <span>Edit</span>
264 </v-tooltip> 264 </v-tooltip>
265 <v-tooltip top> 265 <v-tooltip top>
266 <img 266 <img
267 slot="activator" 267 slot="activator"
268 style="cursor:pointer; width:20px; height:20px; " 268 style="cursor:pointer; width:20px; height:20px; "
269 @click="deleteItem(props.item)" 269 @click="deleteItem(props.item)"
270 src="/static/icon/delete.png" 270 src="/static/icon/delete.png"
271 /> 271 />
272 <span>Delete</span> 272 <span>Delete</span>
273 </v-tooltip> 273 </v-tooltip>
274 </span> 274 </span>
275 </td> 275 </td>
276 </tr> 276 </tr>
277 </template> 277 </template>
278 <v-alert 278 <v-alert
279 slot="no-results" 279 slot="no-results"
280 :value="true" 280 :value="true"
281 color="error" 281 color="error"
282 icon="warning" 282 icon="warning"
283 >Your search for "{{ search }}" found no results.</v-alert> 283 >Your search for "{{ search }}" found no results.</v-alert>
284 </v-data-table> 284 </v-data-table>
285 <!-- ****** ADD NEWS ****** --> 285 <!-- ****** ADD NEWS ****** -->
286 <v-dialog v-model="addNewsDialog" max-width="600px" v-if="addNewsDialog" persistent> 286 <v-dialog v-model="addNewsDialog" max-width="600px" v-if="addNewsDialog" persistent>
287 <v-card flat class="card-style pa-2" dark> 287 <v-card flat class="card-style pa-2" dark>
288 <v-layout> 288 <v-layout>
289 <v-flex xs12> 289 <v-flex xs12>
290 <label class="title text-xs-center">Add News</label> 290 <label class="title text-xs-center">Add News</label>
291 <v-icon size="24" class="right" @click="closeAddNewsModel">cancel</v-icon> 291 <v-icon size="24" class="right" @click="closeAddNewsModel">cancel</v-icon>
292 </v-flex> 292 </v-flex>
293 </v-layout> 293 </v-layout>
294 <v-form ref="form" v-model="valid" lazy-validation> 294 <v-form ref="form" v-model="valid" lazy-validation>
295 <v-container fluid> 295 <v-container fluid>
296 <v-layout> 296 <v-layout>
297 <v-flex xs12 class="text-xs-center text-sm-center text-md-center text-lg-center my-4"> 297 <v-flex xs12 class="text-xs-center text-sm-center text-md-center text-lg-center my-4">
298 <input 298 <input
299 type="file" 299 type="file"
300 style="display: none" 300 style="display: none"
301 ref="image" 301 ref="image"
302 accept="image/*" 302 accept="image/*"
303 multiple 303 multiple
304 @change="onFilePicked" 304 @change="onFilePicked"
305 /> 305 />
306 <v-layout justify-center> 306 <v-layout justify-center>
307 <v-flex v-for="(file,index) in files" :key="index" v-if="files"> 307 <v-flex v-for="(file,index) in files" :key="index" v-if="files">
308 <img :src="file" height="100" width="100;" class="imgNews" /> 308 <img :src="file" height="100" width="100;" class="imgNews" />
309 </v-flex> 309 </v-flex>
310 </v-layout> 310 </v-layout>
311 <img src="/static/icon/user.png" v-if="files ==''" height="80" width="80" /> 311 <img src="/static/icon/user.png" v-if="files ==''" height="80" width="80" />
312 </v-flex> 312 </v-flex>
313 </v-layout> 313 </v-layout>
314 <v-flex xs12> 314 <v-flex xs12>
315 <v-layout> 315 <v-layout>
316 <v-flex xs4 sm4 class="pt-4 subheading"> 316 <v-flex xs4 sm4 class="pt-4 subheading">
317 <label class="right">Title:</label> 317 <label class="right">Title:</label>
318 </v-flex> 318 </v-flex>
319 <v-flex sm6 xs8 class="ml-3"> 319 <v-flex sm6 xs8 class="ml-3">
320 <v-text-field 320 <v-text-field
321 v-model="addNews.title" 321 v-model="addNews.title"
322 placeholder="fill your Title" 322 placeholder="fill your Title"
323 name="name" 323 name="name"
324 type="text" 324 type="text"
325 :rules="titleRules" 325 :rules="titleRules"
326 required 326 required
327 ></v-text-field> 327 ></v-text-field>
328 </v-flex> 328 </v-flex>
329 </v-layout> 329 </v-layout>
330 </v-flex> 330 </v-flex>
331 <v-flex xs12> 331 <v-flex xs12>
332 <v-layout> 332 <v-layout>
333 <v-flex xs4 class="pt-4 subheading"> 333 <v-flex xs4 class="pt-4 subheading">
334 <label class="right">Description:</label> 334 <label class="right">Description:</label>
335 </v-flex> 335 </v-flex>
336 <v-flex sm6 xs8 class="ml-3"> 336 <v-flex sm6 xs8 class="ml-3">
337 <v-text-field 337 <v-text-field
338 placeholder="fill your Description" 338 placeholder="fill your Description"
339 :rules="descriptionRules" 339 :rules="descriptionRules"
340 v-model="addNews.description" 340 v-model="addNews.description"
341 type="text" 341 type="text"
342 name="email" 342 name="email"
343 required 343 required
344 ></v-text-field> 344 ></v-text-field>
345 </v-flex> 345 </v-flex>
346 </v-layout> 346 </v-layout>
347 </v-flex> 347 </v-flex>
348 <v-flex xs12> 348 <v-flex xs12>
349 <v-layout> 349 <v-layout>
350 <v-flex xs4 class="pt-4 subheading"> 350 <v-flex xs4 class="pt-4 subheading">
351 <label class="right hidden-xs-only hidden-sm-only">Uplaod Image:</label> 351 <label class="right hidden-xs-only hidden-sm-only">Uplaod Image:</label>
352 <label class="right hidden-lg-only hidden-md-only hidden-xl-only">Uplaod :</label> 352 <label class="right hidden-lg-only hidden-md-only hidden-xl-only">Uplaod :</label>
353 </v-flex> 353 </v-flex>
354 <v-flex xs8 sm6 class="ml-3"> 354 <v-flex xs8 sm6 class="ml-3">
355 <v-text-field 355 <v-text-field
356 label="Select Image" 356 label="Select Image"
357 @click="pickFile" 357 @click="pickFile"
358 v-model="imageName" 358 v-model="imageName"
359 append-icon="attach_file" 359 append-icon="attach_file"
360 multiple 360 multiple
361 ></v-text-field> 361 ></v-text-field>
362 </v-flex> 362 </v-flex>
363 </v-layout> 363 </v-layout>
364 </v-flex> 364 </v-flex>
365 <v-layout> 365 <v-layout>
366 <v-flex xs11> 366 <v-flex xs11>
367 <v-layout> 367 <v-layout>
368 <v-spacer></v-spacer> 368 <v-spacer></v-spacer>
369 <v-btn @click="clear" round class="clear-button" dark>clear</v-btn> 369 <v-btn @click="clear" round class="clear-button" dark>clear</v-btn>
370 <v-btn @click="submit" round dark :loading="loading" class="add-button">Add</v-btn> 370 <v-btn @click="submit" round dark :loading="loading" class="add-button">Add</v-btn>
371 </v-layout> 371 </v-layout>
372 </v-flex> 372 </v-flex>
373 </v-layout> 373 </v-layout>
374 </v-container> 374 </v-container>
375 </v-form> 375 </v-form>
376 </v-card> 376 </v-card>
377 </v-dialog> 377 </v-dialog>
378 <div class="loader" v-if="showLoader"> 378 <div class="loader" v-if="showLoader">
379 <v-progress-circular indeterminate color="white"></v-progress-circular> 379 <v-progress-circular indeterminate color="white"></v-progress-circular>
380 </div> 380 </div>
381 </v-container> 381 </v-container>
382 </template> 382 </template>
383 383
384 <script> 384 <script>
385 import http from "@/Services/http.js"; 385 import http from "@/Services/http.js";
386 386
387 export default { 387 export default {
388 data: () => ({ 388 data: () => ({
389 snackbar: false, 389 snackbar: false,
390 y: "top", 390 y: "top",
391 x: "right", 391 x: "right",
392 mode: "", 392 mode: "",
393 timeout: 5000, 393 timeout: 5000,
394 color: "", 394 color: "",
395 text: "", 395 text: "",
396 loading: false, 396 loading: false,
397 date: null, 397 date: null,
398 search: "", 398 search: "",
399 show: true, 399 show: true,
400 showSearch: false, 400 showSearch: false,
401 showLoader: false, 401 showLoader: false,
402 editNewsDialog: false, 402 editNewsDialog: false,
403 addNewsDialog: false, 403 addNewsDialog: false,
404 dialog1: false, 404 dialog1: false,
405 valid: true, 405 valid: true,
406 addclass: [], 406 addclass: [],
407 addSection: [], 407 addSection: [],
408 pagination: { 408 pagination: {
409 rowsPerPage: 10, 409 rowsPerPage: 10,
410 }, 410 },
411 imageName: "", 411 imageName: "",
412 imageUrl: "", 412 imageUrl: "",
413 imageFile: "", 413 imageFile: "",
414 image: [], 414 image: [],
415 upload: "", 415 upload: "",
416 files: [], 416 files: [],
417 titleRules: [(v) => !!v || " Tilte is required"], 417 titleRules: [(v) => !!v || " Tilte is required"],
418 descriptionRules: [(v) => !!v || " Description is required"], 418 descriptionRules: [(v) => !!v || " Description is required"],
419 headers: [ 419 headers: [
420 { 420 {
421 align: "justify-center", 421 align: "justify-center",
422 text: "No", 422 text: "No",
423 sortable: false, 423 sortable: false,
424 value: "No", 424 value: "No",
425 }, 425 },
426 { text: "Image", vaue: "image", sortable: false, align: "center" }, 426 { text: "Image", vaue: "image", sortable: false, align: "center" },
427 { text: "Title", value: "title", sortable: false, align: "center" }, 427 { text: "Title", value: "title", sortable: false, align: "center" },
428 { 428 {
429 text: "Description", 429 text: "Description",
430 value: "description", 430 value: "description",
431 sortable: false, 431 sortable: false,
432 align: "center", 432 align: "center",
433 }, 433 },
434 { text: "Action", value: "", sortable: false, align: "center" }, 434 { text: "Action", value: "", sortable: false, align: "center" },
435 ], 435 ],
436 desserts: [], 436 desserts: [],
437 editedIndex: -1, 437 editedIndex: -1,
438 addNews: { 438 addNews: {
439 title: "", 439 title: "",
440 description: "", 440 description: "",
441 }, 441 },
442 editedItem: { 442 editedItem: {
443 title: "", 443 title: "",
444 description: "", 444 description: "",
445 }, 445 },
446 defaultItem: { 446 defaultItem: {
447 title: "", 447 title: "",
448 description: "", 448 description: "",
449 }, 449 },
450 }), 450 }),
451 watch: { 451 watch: {
452 addNewsDialog: function (val) { 452 addNewsDialog: function (val) {
453 if (!val) { 453 if (!val) {
454 this.addNews = []; 454 this.addNews = [];
455 this.imageName = ""; 455 this.imageName = "";
456 this.imageFile = ""; 456 this.imageFile = "";
457 this.imageUrl = ""; 457 this.imageUrl = "";
458 this.files = []; 458 this.files = [];
459 } 459 }
460 }, 460 },
461 }, 461 },
462 methods: { 462 methods: {
463 getSections(_id) { 463 getSections(_id) {
464 var token = this.$store.state.token; 464 var token = this.$store.state.token;
465 http() 465 http()
466 .get( 466 .get(
467 "/getSectionsList", 467 "/getSectionsList",
468 { params: { classId: _id } }, 468 { params: { classId: _id } },
469 { 469 {
470 headers: { Authorization: "Bearer " + token }, 470 headers: { Authorization: "Bearer " + token },
471 } 471 }
472 ) 472 )
473 .then((response) => { 473 .then((response) => {
474 this.addSection = response.data.data; 474 this.addSection = response.data.data;
475 }) 475 })
476 .catch((err) => { 476 .catch((err) => {
477 // console.log("err====>", err); 477 // console.log("err====>", err);
478 this.snackbar = true;
479 this.color = "error";
480 this.text = error.response.data.message;
478 this.snackbar = true; 481 });
479 this.color = "error"; 482 },
480 this.text = error.response.data.message; 483 pickFile() {
481 }); 484 this.$refs.image.click();
482 }, 485 },
483 pickFile() { 486 onFilePicked(e) {
484 this.$refs.image.click(); 487 // console.log(e)
485 }, 488 const files = e.target.files;
486 onFilePicked(e) { 489 /** fetch Image Name **/
487 // console.log(e) 490 if (files[0] !== undefined) {
488 const files = e.target.files; 491 this.imageName = files[0].name;
489 /** fetch Image Name **/ 492 if (this.imageName.lastIndexOf(".") <= 0) {
490 if (files[0] !== undefined) { 493 return;
491 this.imageName = files[0].name; 494 }
492 if (this.imageName.lastIndexOf(".") <= 0) { 495 this.files = [];
493 return; 496 // console.log("files", this.files);
494 } 497 /** Select many image and showing many image add to news card **/
495 this.files = []; 498 const test = Array.from(files).forEach((file, idx) => {
496 // console.log("files", this.files); 499 const fr = new FileReader();
497 /** Select many image and showing many image add to news card **/ 500 const getResult = new Promise((resolve) => {
498 const test = Array.from(files).forEach((file, idx) => { 501 fr.onload = (e) => {
499 const fr = new FileReader(); 502 this.files.push(
500 const getResult = new Promise((resolve) => { 503 // id: idx,
501 fr.onload = (e) => { 504 e.target.result
502 this.files.push( 505 );
503 // id: idx, 506 };
504 e.target.result 507 });
505 ); 508 fr.readAsDataURL(file);
506 }; 509 return getResult.then((file) => {
507 }); 510 return file;
508 fr.readAsDataURL(file); 511 });
509 return getResult.then((file) => { 512 });
510 return file; 513 const fr = new FileReader();
511 }); 514 fr.readAsDataURL(files[0]);
512 }); 515 fr.addEventListener("load", () => {
513 const fr = new FileReader(); 516 this.imageFile = files; // this is an image file that can be sent to server...
514 fr.readAsDataURL(files[0]); 517 // console.log("uploadImage=======>", this.imageFile );
515 fr.addEventListener("load", () => { 518 });
516 this.imageFile = files; // this is an image file that can be sent to server... 519 } else {
517 // console.log("uploadImage=======>", this.imageFile ); 520 this.imageName = "";
518 }); 521 this.imageFile = "";
519 } else { 522 this.imageUrl = "";
520 this.imageName = ""; 523 }
521 this.imageFile = ""; 524 },
522 this.imageUrl = ""; 525 getNewsList() {
523 } 526 this.showLoader = true;
524 }, 527 var token = this.$store.state.token;
525 getNewsList() { 528 http()
526 this.showLoader = true; 529 .get("/getNewsList", {
527 var token = this.$store.state.token; 530 headers: { Authorization: "Bearer " + token },
528 http() 531 })
529 .get("/getNewsList", { 532 .then((response) => {
530 headers: { Authorization: "Bearer " + token }, 533 this.desserts = response.data.data;
531 }) 534 this.showLoader = false;
532 .then((response) => { 535 })
533 this.desserts = response.data.data; 536 .catch((error) => {
534 this.showLoader = false; 537 this.showLoader = false;
535 }) 538 if (error.response.status === 401) {
536 .catch((error) => { 539 this.$router.replace({ path: "/" });
537 this.showLoader = false; 540 this.$store.dispatch("setToken", null);
538 if (error.response.status === 401) { 541 this.$store.dispatch("Id", null);
539 this.$router.replace({ path: "/" }); 542 }
540 this.$store.dispatch("setToken", null); 543 });
541 this.$store.dispatch("Id", null); 544 },
542 } 545 editItem(item) {
543 }); 546 this.files = [];
544 }, 547 this.editedIndex = this.desserts.indexOf(item);
545 editItem(item) { 548 this.editedItem = Object.assign({}, item);
546 this.files = []; 549 this.editNewsDialog = true;
547 this.editedIndex = this.desserts.indexOf(item); 550 },
548 this.editedItem = Object.assign({}, item); 551 profile(item) {
549 this.editNewsDialog = true; 552 this.editedIndex = this.desserts.indexOf(item);
550 }, 553 this.editedItem = Object.assign({}, item);
551 profile(item) { 554 this.dialog1 = true;
552 this.editedIndex = this.desserts.indexOf(item); 555 },
553 this.editedItem = Object.assign({}, item); 556 deleteItem(item) {
554 this.dialog1 = true; 557 let deleteNews = {
555 }, 558 newsId: item._id,
556 deleteItem(item) { 559 };
557 let deleteNews = { 560 http()
558 newsId: item._id, 561 .delete(
559 }; 562 "/deleteNews",
560 http() 563 confirm("Are you sure you want to delete this?") && {
561 .delete( 564 params: deleteNews,
562 "/deleteNews", 565 }
563 confirm("Are you sure you want to delete this?") && { 566 )
564 params: deleteNews, 567 .then((response) => {
565 } 568 this.snackbar = true;
566 ) 569 this.text = response.data.message;
567 .then((response) => { 570 this.color = "green";
568 this.snackbar = true; 571 this.getNewsList();
569 this.text = response.data.message; 572 })
570 this.color = "green"; 573 .catch((error) => {
571 this.getNewsList(); 574 this.snackbar = true;
572 }) 575 this.color = "error";
573 .catch((error) => { 576 this.text = error.response.data.message;
574 this.snackbar = true; 577 });
575 this.color = "error"; 578 },
576 this.text = error.response.data.message; 579 deleteImage(imageId, newsId) {
577 }); 580 let deleteImages = {
578 }, 581 newsId: newsId,
579 deleteImage(imageId, newsId) { 582 imageId: imageId,
580 let deleteImages = { 583 };
581 newsId: newsId, 584 http()
582 imageId: imageId, 585 .put("/deleteImages", deleteImages)
583 }; 586 .then((response) => {
584 http() 587 this.snackbar = true;
585 .put("/deleteImages", deleteImages) 588 this.text = response.data.message;
586 .then((response) => { 589 this.color = "green";
587 this.snackbar = true; 590 this.close();
588 this.text = response.data.message; 591 })
589 this.color = "green"; 592 .catch((error) => {
590 this.close(); 593 this.snackbar = true;
591 }) 594 this.color = "error";
592 .catch((error) => { 595 this.text = error.response.data.message;
593 this.snackbar = true; 596 });
594 this.color = "error"; 597 },
595 this.text = error.response.data.message; 598 close() {
596 }); 599 this.dialog = false;
597 }, 600 },
598 close() { 601 close1() {
599 this.dialog = false; 602 this.dialog1 = false;
600 }, 603 },
601 close1() { 604 closeAddNewsModel() {
602 this.dialog1 = false; 605 this.addNewsDialog = false;
603 }, 606 this.addNews = [];
604 closeAddNewsModel() { 607 this.imageName = "";
605 this.addNewsDialog = false; 608 this.imageFile = "";
606 this.addNews = []; 609 this.imageUrl = "";
607 this.imageName = ""; 610 this.files = [];
608 this.imageFile = ""; 611 },
609 this.imageUrl = ""; 612 submit() {
610 this.files = []; 613 if (this.$refs.form.validate()) {
611 }, 614 let newsData = {
612 submit() { 615 title: this.addNews.title,
613 if (this.$refs.form.validate()) { 616 description: this.addNews.description,
614 let newsData = { 617 };
615 title: this.addNews.title, 618 if (this.files) {
616 description: this.addNews.description, 619 var ary = [];
617 }; 620 var imageData = [];
618 if (this.files) { 621 ary = this.files;
619 var ary = []; 622 for (let i = 0; i < ary.length; i++) {
620 var imageData = []; 623 const [baseUrl, imageUrl] = ary[i].split(/,/);
621 ary = this.files; 624 imageData.push(imageUrl);
622 for (let i = 0; i < ary.length; i++) { 625 newsData.upload = imageData;
623 const [baseUrl, imageUrl] = ary[i].split(/,/); 626 }
624 imageData.push(imageUrl); 627 }
625 newsData.upload = imageData; 628 this.loading = true;
626 } 629 http()
627 } 630 .post("/createNews", newsData)
628 this.loading = true; 631 .then((response) => {
629 http() 632 this.files = [];
630 .post("/createNews", newsData) 633 this.snackbar = true;
631 .then((response) => { 634 this.text = response.data.message;
632 this.files = []; 635 this.getNewsList();
633 this.snackbar = true; 636 this.color = "green";
634 this.text = response.data.message; 637 this.addNewsDialog = false;
635 this.getNewsList(); 638 this.loading = false;
636 this.color = "green"; 639 this.clear();
637 this.addNewsDialog = false; 640 })
638 this.loading = false; 641 .catch((error) => {
639 this.clear(); 642 this.snackbar = true;
640 }) 643 this.text = error.response.data.message;
641 .catch((error) => { 644 this.color = "error";
642 this.snackbar = true; 645 });
643 this.text = error.response.data.message; 646 }
644 this.color = "error"; 647 },
645 }); 648 clear() {
646 } 649 this.$refs.form.reset();
647 }, 650 this.files = [];
648 clear() { 651 },
649 this.$refs.form.reset(); 652 save() {
650 this.files = []; 653 let editNews = {
651 }, 654 title: this.editedItem.title,
652 save() { 655 description: this.editedItem.description,
653 let editNews = { 656 newsId: this.editedItem._id,
654 title: this.editedItem.title, 657 };
655 description: this.editedItem.description, 658 if (this.files) {
656 newsId: this.editedItem._id, 659 var ary = [];
657 }; 660 var imageData = [];
658 if (this.files) { 661 ary = this.files;
659 var ary = []; 662 for (let i = 0; i < ary.length; i++) {
660 var imageData = []; 663 const [baseUrl, imageUrl] = ary[i].split(/,/);
661 ary = this.files; 664 imageData.push(imageUrl);
662 for (let i = 0; i < ary.length; i++) { 665 editNews.upload = imageData;
663 const [baseUrl, imageUrl] = ary[i].split(/,/); 666 }
664 imageData.push(imageUrl); 667 }
665 editNews.upload = imageData; 668 http()
666 } 669 .put("/updateNews", editNews)
667 } 670 .then((response) => {
668 http() 671 this.snackbar = true;
669 .put("/updateNews", editNews) 672 this.text = "Successfully updated News";
670 .then((response) => { 673 this.color = "green";
671 this.snackbar = true; 674 this.editNewsDialog = false;
672 this.text = "Successfully updated News"; 675 this.getNewsList();
673 this.color = "green"; 676 this.close();
674 this.editNewsDialog = false; 677 })
675 this.getNewsList(); 678 .catch((error) => {
676 this.close(); 679 this.snackbar = true;
677 }) 680 this.color = "error";
678 .catch((error) => { 681 this.text = error.response.data.message;
679 this.snackbar = true; 682 });
680 this.color = "error"; 683 },
681 this.text = error.response.data.message; 684 displaySearch() {
682 }); 685 (this.show = false), (this.showSearch = true);
683 }, 686 },
684 displaySearch() { 687 closeSearch() {
685 (this.show = false), (this.showSearch = true); 688 this.showSearch = false;
686 }, 689 this.show = true;
687 closeSearch() { 690 this.search = "";
688 this.showSearch = false; 691 },
689 this.show = true; 692 },
690 this.search = ""; 693 mounted() {
691 }, 694 this.getNewsList();
692 }, 695 this.editItem;
693 mounted() { 696 },
694 this.getNewsList(); 697 };
695 this.editItem; 698 </script>
src/pages/NoticeBoard/noticeBoard.vue
Diff comments   View file @8b7976c
1 <template> 1 <template>
2 <v-container fluid class="body-color"> 2 <v-container fluid class="body-color">
3 <!-- ****** Edit Notice Board ****** --> 3 <!-- ****** Edit Notice Board ****** -->
4 <v-dialog v-model="editNoticeBoardDialog" max-width="500px" scrollable persistent> 4 <v-dialog v-model="editNoticeBoardDialog" max-width="500px" scrollable persistent>
5 <v-card flat class="card-style pa-2" dark> 5 <v-card flat class="card-style pa-2" dark>
6 <v-layout> 6 <v-layout>
7 <v-flex xs12> 7 <v-flex xs12>
8 <label class="title text-xs-center">Edit Notice Board</label> 8 <label class="title text-xs-center">Edit Notice Board</label>
9 <v-icon size="24" class="right" @click="editNoticeBoardDialog = false">cancel</v-icon> 9 <v-icon size="24" class="right" @click="editNoticeBoardDialog = false">cancel</v-icon>
10 </v-flex> 10 </v-flex>
11 </v-layout> 11 </v-layout>
12 <v-card-text> 12 <v-card-text>
13 <v-layout> 13 <v-layout>
14 <v-flex xs12 class="text-xs-center text-sm-center text-md-center text-lg-center"> 14 <v-flex xs12 class="text-xs-center text-sm-center text-md-center text-lg-center">
15 <img 15 <img
16 src="/static/icon/user.png" 16 src="/static/icon/user.png"
17 v-if="!editedItem.eventImageUrl && !imageUrl" 17 v-if="!editedItem.eventImageUrl && !imageUrl"
18 width="100px" 18 width="100px"
19 /> 19 />
20 <img 20 <img
21 :src="editedItem.eventImageUrl" 21 :src="editedItem.eventImageUrl"
22 height="150" 22 height="150"
23 v-else-if="editedItem.eventImageUrl && !imageUrl" 23 v-else-if="editedItem.eventImageUrl && !imageUrl"
24 width="150px" 24 width="150px"
25 /> 25 />
26 <img 26 <img
27 v-if="imageUrl" 27 v-if="imageUrl"
28 :src="imageUrl" 28 :src="imageUrl"
29 height="150" 29 height="150"
30 style="border-radius:50%; width:150px" 30 style="border-radius:50%; width:150px"
31 /> 31 />
32 <input 32 <input
33 type="file" 33 type="file"
34 style="display: none" 34 style="display: none"
35 ref="image" 35 ref="image"
36 accept="image/*" 36 accept="image/*"
37 @change="onFilePicked" 37 @change="onFilePicked"
38 /> 38 />
39 </v-flex> 39 </v-flex>
40 </v-layout> 40 </v-layout>
41 <v-layout wrap> 41 <v-layout wrap>
42 <v-flex xs12> 42 <v-flex xs12>
43 <v-layout> 43 <v-layout>
44 <v-flex xs4 class="pt-4 subheading"> 44 <v-flex xs4 class="pt-4 subheading">
45 <label class="right">Title:</label> 45 <label class="right">Title:</label>
46 </v-flex> 46 </v-flex>
47 <v-flex xs8 class="ml-3"> 47 <v-flex xs8 class="ml-3">
48 <v-text-field 48 <v-text-field
49 v-model="editedItem.title" 49 v-model="editedItem.title"
50 placeholder="fill your Title" 50 placeholder="fill your Title"
51 name="name" 51 name="name"
52 type="text" 52 type="text"
53 required 53 required
54 ></v-text-field> 54 ></v-text-field>
55 </v-flex> 55 </v-flex>
56 </v-layout> 56 </v-layout>
57 </v-flex> 57 </v-flex>
58 <v-flex xs12> 58 <v-flex xs12>
59 <v-layout> 59 <v-layout>
60 <v-flex xs4 class="pt-4 subheading"> 60 <v-flex xs4 class="pt-4 subheading">
61 <label class="right">Description:</label> 61 <label class="right">Description:</label>
62 </v-flex> 62 </v-flex>
63 <v-flex xs7 class="ml-3"> 63 <v-flex xs7 class="ml-3">
64 <v-text-field 64 <v-text-field
65 placeholder="fill your Description" 65 placeholder="fill your Description"
66 v-model="editedItem.description" 66 v-model="editedItem.description"
67 type="text" 67 type="text"
68 name="email" 68 name="email"
69 required 69 required
70 ></v-text-field> 70 ></v-text-field>
71 </v-flex> 71 </v-flex>
72 </v-layout> 72 </v-layout>
73 </v-flex> 73 </v-flex>
74 <v-flex xs12> 74 <v-flex xs12>
75 <v-layout> 75 <v-layout>
76 <v-flex xs4 class="pt-4 subheading"> 76 <v-flex xs4 class="pt-4 subheading">
77 <label class="right hidden-xs-only hidden-sm-only">Uplaod Image:</label> 77 <label class="right hidden-xs-only hidden-sm-only">Uplaod Image:</label>
78 <label class="right hidden-lg-only hidden-md-only hidden-xl-only">Uplaod :</label> 78 <label class="right hidden-lg-only hidden-md-only hidden-xl-only">Uplaod :</label>
79 </v-flex> 79 </v-flex>
80 <v-flex xs7 class="ml-3"> 80 <v-flex xs7 class="ml-3">
81 <v-text-field 81 <v-text-field
82 label="Select Image" 82 label="Select Image"
83 @click="pickFile" 83 @click="pickFile"
84 v-model="imageName" 84 v-model="imageName"
85 append-icon="attach_file" 85 append-icon="attach_file"
86 ></v-text-field> 86 ></v-text-field>
87 <input 87 <input
88 type="file" 88 type="file"
89 style="display: none" 89 style="display: none"
90 ref="image" 90 ref="image"
91 accept="image/*" 91 accept="image/*"
92 @change="onFilePicked" 92 @change="onFilePicked"
93 /> 93 />
94 </v-flex> 94 </v-flex>
95 </v-layout> 95 </v-layout>
96 </v-flex> 96 </v-flex>
97 <v-flex xs12> 97 <v-flex xs12>
98 <v-card-actions> 98 <v-card-actions>
99 <v-spacer></v-spacer> 99 <v-spacer></v-spacer>
100 <v-btn round dark @click="save" class="add-button">Save</v-btn> 100 <v-btn round dark @click="save" class="add-button">Save</v-btn>
101 </v-card-actions> 101 </v-card-actions>
102 </v-flex> 102 </v-flex>
103 </v-layout> 103 </v-layout>
104 </v-card-text> 104 </v-card-text>
105 </v-card> 105 </v-card>
106 </v-dialog> 106 </v-dialog>
107 107
108 <!-- ****** VIEW PROFIL NOTICE BOARD ****** --> 108 <!-- ****** VIEW PROFIL NOTICE BOARD ****** -->
109 109
110 <v-dialog v-model="viewNoticeBoardDialog" max-width="600px" scrollable persistent> 110 <v-dialog v-model="viewNoticeBoardDialog" max-width="600px" scrollable persistent>
111 <v-card flat class="card-style pa-3" dark> 111 <v-card flat class="card-style pa-3" dark>
112 <v-layout> 112 <v-layout>
113 <v-flex xs12> 113 <v-flex xs12>
114 <label class="title text-xs-center">View Notice Board</label> 114 <label class="title text-xs-center">View Notice Board</label>
115 <v-icon size="24" class="right" @click="viewNoticeBoardDialog = false">cancel</v-icon> 115 <v-icon size="24" class="right" @click="viewNoticeBoardDialog = false">cancel</v-icon>
116 </v-flex> 116 </v-flex>
117 </v-layout> 117 </v-layout>
118 <v-card-text> 118 <v-card-text>
119 <v-layout> 119 <v-layout>
120 <v-flex align-center justify-center layout text-xs-center> 120 <v-flex align-center justify-center layout text-xs-center>
121 <img src="/static/icon/user.png" v-if="!editedItem.eventImageUrl" width="80" /> 121 <img src="/static/icon/user.png" v-if="!editedItem.eventImageUrl" width="80" />
122 <img 122 <img
123 :src="editedItem.eventImageUrl" 123 :src="editedItem.eventImageUrl"
124 v-else-if="editedItem.eventImageUrl" 124 v-else-if="editedItem.eventImageUrl"
125 class="img" 125 class="img"
126 width="200" 126 width="200"
127 /> 127 />
128 </v-flex> 128 </v-flex>
129 </v-layout> 129 </v-layout>
130 <v-container grid-list-md> 130 <v-container grid-list-md>
131 <v-layout wrap> 131 <v-layout wrap>
132 <v-flex> 132 <v-flex>
133 <v-layout> 133 <v-layout>
134 <v-flex xs5 sm6> 134 <v-flex xs5 sm6>
135 <h5 class="right my-1"> 135 <h5 class="right my-1">
136 <b>Title:</b> 136 <b>Title:</b>
137 </h5> 137 </h5>
138 </v-flex> 138 </v-flex>
139 <v-flex sm6 xs8> 139 <v-flex sm6 xs8>
140 <h5 class="my-1">{{ editedItem.title }}</h5> 140 <h5 class="my-1">{{ editedItem.title }}</h5>
141 </v-flex> 141 </v-flex>
142 </v-layout> 142 </v-layout>
143 <v-layout> 143 <v-layout>
144 <v-flex xs5 sm6> 144 <v-flex xs5 sm6>
145 <h5 class="right my-1"> 145 <h5 class="right my-1">
146 <b>Description:</b> 146 <b>Description:</b>
147 </h5> 147 </h5>
148 </v-flex> 148 </v-flex>
149 <v-flex sm6 xs8> 149 <v-flex sm6 xs8>
150 <h5 class="my-1">{{ editedItem.description }}</h5> 150 <h5 class="my-1">{{ editedItem.description }}</h5>
151 </v-flex> 151 </v-flex>
152 </v-layout> 152 </v-layout>
153 </v-flex> 153 </v-flex>
154 </v-layout> 154 </v-layout>
155 </v-container> 155 </v-container>
156 </v-card-text> 156 </v-card-text>
157 </v-card> 157 </v-card>
158 </v-dialog> 158 </v-dialog>
159 <!-- ****** EXISTING Notice Board TABLE ****** --> 159 <!-- ****** EXISTING Notice Board TABLE ****** -->
160 <v-toolbar color="transparent" flat> 160 <v-toolbar color="transparent" flat>
161 <v-btn 161 <v-btn
162 fab 162 fab
163 dark 163 dark
164 class="open-dialog-button hidden-xl-only hidden-md-only hidden-lg-only" 164 class="open-dialog-button hidden-xl-only hidden-md-only hidden-lg-only"
165 small 165 small
166 @click="addNoticeBoardDialog = true" 166 @click="addNoticeBoardDialog = true"
167 > 167 >
168 <v-icon dark>add</v-icon> 168 <v-icon dark>add</v-icon>
169 </v-btn> 169 </v-btn>
170 <v-btn 170 <v-btn
171 round 171 round
172 class="open-dialog-button hidden-sm-only hidden-xs-only" 172 class="open-dialog-button hidden-sm-only hidden-xs-only"
173 dark 173 dark
174 @click="addNoticeBoardDialog = true" 174 @click="addNoticeBoardDialog = true"
175 > 175 >
176 <v-icon class="white--text pr-1" size="20">add</v-icon>Add Notice Board 176 <v-icon class="white--text pr-1" size="20">add</v-icon>Add Notice Board
177 </v-btn> 177 </v-btn>
178 <v-spacer></v-spacer> 178 <v-spacer></v-spacer>
179 <v-card-title class="body-1" v-show="show"> 179 <v-card-title class="body-1" v-show="show">
180 <v-btn icon large flat @click="displaySearch"> 180 <v-btn icon large flat @click="displaySearch">
181 <v-avatar size="27"> 181 <v-avatar size="27">
182 <img src="/static/icon/search.png" alt="icon" /> 182 <img src="/static/icon/search.png" alt="icon" />
183 </v-avatar> 183 </v-avatar>
184 </v-btn> 184 </v-btn>
185 </v-card-title> 185 </v-card-title>
186 <v-flex xs8 sm8 md3 lg2 v-if="showSearch"> 186 <v-flex xs8 sm8 md3 lg2 v-if="showSearch">
187 <v-layout> 187 <v-layout>
188 <v-text-field 188 <v-text-field
189 autofocus 189 autofocus
190 v-model="search" 190 v-model="search"
191 label="Search" 191 label="Search"
192 prepend-inner-icon="search" 192 prepend-inner-icon="search"
193 color="primary" 193 color="primary"
194 ></v-text-field> 194 ></v-text-field>
195 <v-icon @click="closeSearch" color="error">close</v-icon> 195 <v-icon @click="closeSearch" color="error">close</v-icon>
196 </v-layout> 196 </v-layout>
197 </v-flex> 197 </v-flex>
198 </v-toolbar> 198 </v-toolbar>
199 <v-data-table 199 <v-data-table
200 :headers="headers" 200 :headers="headers"
201 :items="notices" 201 :items="notices"
202 :pagination.sync="pagination" 202 :pagination.sync="pagination"
203 :search="search" 203 :search="search"
204 > 204 >
205 <template slot="items" slot-scope="props"> 205 <template slot="items" slot-scope="props">
206 <tr class="tr"> 206 <tr class="tr">
207 <td class="td td-row">{{ props.index + 1}}</td> 207 <td class="td td-row">{{ props.index + 1}}</td>
208 <td class="td td-row text-xs-center"> 208 <td class="td td-row text-xs-center">
209 <v-avatar size="40"> 209 <v-avatar size="40">
210 <img :src="props.item.eventImageUrl" v-if="props.item.eventImageUrl" /> 210 <img :src="props.item.eventImageUrl" v-if="props.item.eventImageUrl" />
211 <img src="/static/icon/user.png" v-else-if="!props.item.eventImageUrl" /> 211 <img src="/static/icon/user.png" v-else-if="!props.item.eventImageUrl" />
212 </v-avatar> 212 </v-avatar>
213 </td> 213 </td>
214 <td class="text-xs-center td td-row">{{ props.item.title}}</td> 214 <td class="text-xs-center td td-row">{{ props.item.title}}</td>
215 <td class="text-xs-center td td-row"> 215 <td class="text-xs-center td td-row">
216 <!-- <v-btn 216 <!-- <v-btn
217 class="add-button" 217 class="add-button"
218 @click="generatePDF2Canvas(props.item)" 218 @click="generatePDF2Canvas(props.item)"
219 :loading="loadingPdf" 219 :loading="loadingPdf"
220 dark 220 dark
221 >{{ props.item.fileType }}</v-btn>--> 221 >{{ props.item.fileType }}</v-btn>-->
222 <a
223 class="hover"
224 :href="props.item.eventImageUrl"
225 target="_blank"
226 style="text-decoration: none!important; color: grey"
227 >
228 <h5>{{props.item.fileName}}</h5>
229 </a>
222 <a 230 </td>
223 class="hover" 231 <td class="text-xs-center td td-row">
224 :href="props.item.eventImageUrl" 232 <span>
225 target="_blank" 233 <v-tooltip top>
226 style="text-decoration: none!important; color: grey" 234 <img
227 > 235 slot="activator"
228 <h5>{{props.item.fileName}}</h5> 236 style="cursor:pointer; width:25px; height:25px; "
229 </a> 237 class="mr-3"
230 </td> 238 @click="profile(props.item)"
231 <td class="text-xs-center td td-row"> 239 src="/static/icon/view.png"
232 <span> 240 />
233 <v-tooltip top> 241 <span>View</span>
234 <img 242 </v-tooltip>
235 slot="activator" 243 <v-tooltip top>
236 style="cursor:pointer; width:25px; height:25px; " 244 <img
237 class="mr-3" 245 slot="activator"
238 @click="profile(props.item)" 246 style="cursor:pointer; width:20px; height:18px; "
239 src="/static/icon/view.png" 247 class="mr-3"
240 /> 248 @click="editItem(props.item)"
241 <span>View</span> 249 src="/static/icon/edit.png"
242 </v-tooltip> 250 />
243 <v-tooltip top> 251 <span>Edit</span>
244 <img 252 </v-tooltip>
245 slot="activator" 253 <v-tooltip top>
246 style="cursor:pointer; width:20px; height:18px; " 254 <img
247 class="mr-3" 255 slot="activator"
248 @click="editItem(props.item)" 256 style="cursor:pointer; width:20px; height:20px; "
249 src="/static/icon/edit.png" 257 @click="deleteItem(props.item)"
250 /> 258 src="/static/icon/delete.png"
251 <span>Edit</span> 259 />
252 </v-tooltip> 260 <span>Delete</span>
253 <v-tooltip top> 261 </v-tooltip>
254 <img 262 </span>
255 slot="activator" 263 </td>
256 style="cursor:pointer; width:20px; height:20px; " 264 </tr>
257 @click="deleteItem(props.item)" 265 </template>
258 src="/static/icon/delete.png" 266 <v-alert
259 /> 267 slot="no-results"
260 <span>Delete</span> 268 :value="true"
261 </v-tooltip> 269 color="error"
262 </span> 270 icon="warning"
263 </td> 271 >Your search for "{{ search }}" found no results.</v-alert>
264 </tr> 272 </v-data-table>
265 </template> 273 <!-- ****** ADD Notice Board ****** -->
266 <v-alert 274 <v-dialog
275 v-model="addNoticeBoardDialog"
276 max-width="600px"
277 v-if="addNoticeBoardDialog"
278 persistent
279 >
267 slot="no-results" 280 <v-card flat class="card-style pa-2" dark>
268 :value="true" 281 <v-layout>
269 color="error" 282 <v-flex xs12>
270 icon="warning" 283 <label class="title text-xs-center">Add Notice Board</label>
271 >Your search for "{{ search }}" found no results.</v-alert> 284 <v-icon size="24" class="right" @click="closeNoticeBoardModel">cancel</v-icon>
272 </v-data-table> 285 </v-flex>
273 <!-- ****** ADD Notice Board ****** --> 286 </v-layout>
274 <v-dialog 287 <v-container fluid fill-height>
275 v-model="addNoticeBoardDialog" 288 <v-layout align-center>
276 max-width="600px" 289 <v-flex xs12>
277 v-if="addNoticeBoardDialog" 290 <v-form ref="form" v-model="valid" lazy-validation>
278 persistent 291 <v-layout>
279 > 292 <v-flex xs12 class="text-xs-center text-sm-center text-md-center text-lg-center">
280 <v-card flat class="card-style pa-2" dark> 293 <v-avatar size="80px" v-if="!imageUrl">
281 <v-layout> 294 <img src="/static/icon/user.png" />
282 <v-flex xs12> 295 </v-avatar>
283 <label class="title text-xs-center">Add Notice Board</label> 296 <input
284 <v-icon size="24" class="right" @click="closeNoticeBoardModel">cancel</v-icon> 297 type="file"
285 </v-flex> 298 style="display: none"
286 </v-layout> 299 ref="image"
287 <v-container fluid fill-height> 300 accept="image/*"
288 <v-layout align-center> 301 @change="onFilePicked"
289 <v-flex xs12> 302 />
290 <v-form ref="form" v-model="valid" lazy-validation> 303
291 <v-layout> 304 <v-avatar size="150px" v-if="imageUrl">
292 <v-flex xs12 class="text-xs-center text-sm-center text-md-center text-lg-center"> 305 <img :src="imageUrl" height="150" />
293 <v-avatar size="80px" v-if="!imageUrl"> 306 </v-avatar>
294 <img src="/static/icon/user.png" /> 307 </v-flex>
295 </v-avatar> 308 </v-layout>
296 <input 309 <v-layout>
297 type="file" 310 <v-flex xs4 class="pt-4 subheading">
298 style="display: none" 311 <label class="right">Title:</label>
299 ref="image" 312 </v-flex>
300 accept="image/*" 313 <v-flex xs7 class="ml-3">
301 @change="onFilePicked" 314 <v-text-field
302 /> 315 v-model="addNoticeBoard.title"
303 316 placeholder="fill your Title"
304 <v-avatar size="150px" v-if="imageUrl"> 317 name="name"
305 <img :src="imageUrl" height="150" /> 318 type="text"
306 </v-avatar> 319 :rules="titleRules"
307 </v-flex> 320 required
308 </v-layout> 321 ></v-text-field>
309 <v-layout> 322 </v-flex>
310 <v-flex xs4 class="pt-4 subheading"> 323 </v-layout>
311 <label class="right">Title:</label> 324 <v-layout>
312 </v-flex> 325 <v-flex xs4 class="pt-4 subheading">
313 <v-flex xs7 class="ml-3"> 326 <label class="right">Description:</label>
314 <v-text-field 327 </v-flex>
315 v-model="addNoticeBoard.title" 328 <v-flex xs7 class="ml-3">
316 placeholder="fill your Title" 329 <v-text-field
317 name="name" 330 v-model="addNoticeBoard.description"
318 type="text" 331 placeholder="fill your Description"
319 :rules="titleRules" 332 name="name"
320 required 333 type="text"
321 ></v-text-field> 334 :rules="descriptionRules"
322 </v-flex> 335 required
323 </v-layout> 336 ></v-text-field>
324 <v-layout> 337 </v-flex>
325 <v-flex xs4 class="pt-4 subheading"> 338 </v-layout>
326 <label class="right">Description:</label> 339 <v-layout>
327 </v-flex> 340 <v-flex xs4 class="pt-4 subheading">
328 <v-flex xs7 class="ml-3"> 341 <label class="right hidden-xs-only hidden-sm-only">Uplaod Image:</label>
329 <v-text-field 342 <label class="right hidden-lg-only hidden-md-only hidden-xl-only">Uplaod :</label>
330 v-model="addNoticeBoard.description" 343 </v-flex>
331 placeholder="fill your Description" 344 <v-flex xs7 class="ml-3">
332 name="name" 345 <v-text-field
333 type="text" 346 label="Select Image"
334 :rules="descriptionRules" 347 @click="pickFile"
335 required 348 v-model="imageName"
336 ></v-text-field> 349 append-icon="attach_file"
337 </v-flex> 350 ></v-text-field>
338 </v-layout> 351 <input
339 <v-layout> 352 type="file"
340 <v-flex xs4 class="pt-4 subheading"> 353 style="display:none"
341 <label class="right hidden-xs-only hidden-sm-only">Uplaod Image:</label> 354 ref="image"
342 <label class="right hidden-lg-only hidden-md-only hidden-xl-only">Uplaod :</label> 355 accept="image/*"
343 </v-flex> 356 @change="onFilePicked"
344 <v-flex xs7 class="ml-3"> 357 />
345 <v-text-field 358 </v-flex>
346 label="Select Image" 359 </v-layout>
347 @click="pickFile" 360 <v-layout>
348 v-model="imageName" 361 <v-flex xs12>
349 append-icon="attach_file" 362 <v-card-actions>
350 ></v-text-field> 363 <v-spacer></v-spacer>
351 <input 364 <v-btn @click="clear" round dark class="clear-button">clear</v-btn>
352 type="file" 365 <v-btn @click="submit" round dark :loading="loading" class="add-button">Add</v-btn>
353 style="display:none" 366 </v-card-actions>
354 ref="image" 367 </v-flex>
355 accept="image/*" 368 </v-layout>
356 @change="onFilePicked" 369 </v-form>
357 /> 370 </v-flex>
358 </v-flex> 371 </v-layout>
359 </v-layout> 372 </v-container>
360 <v-layout> 373 </v-card>
361 <v-flex xs12> 374 </v-dialog>
362 <v-card-actions> 375 <v-snackbar
363 <v-spacer></v-spacer> 376 :timeout="timeout"
364 <v-btn @click="clear" round dark class="clear-button">clear</v-btn> 377 :top="y === 'top'"
365 <v-btn @click="submit" round dark :loading="loading" class="add-button">Add</v-btn> 378 :right="x === 'right'"
366 </v-card-actions> 379 :vertical="mode === 'vertical'"
367 </v-flex> 380 v-model="snackbar"
368 </v-layout> 381 :color="color"
369 </v-form> 382 >{{ text }}</v-snackbar>
370 </v-flex> 383 <div class="loader" v-if="showLoader">
371 </v-layout> 384 <v-progress-circular indeterminate color="white"></v-progress-circular>
372 </v-container> 385 </div>
373 </v-card> 386 </v-container>
374 </v-dialog> 387 </template>
375 <v-snackbar 388
376 :timeout="timeout" 389 <script>
377 :top="y === 'top'" 390 import http from "@/Services/http.js";
378 :right="x === 'right'" 391
379 :vertical="mode === 'vertical'" 392 export default {
380 v-model="snackbar" 393 data: () => ({
381 :color="color" 394 snackbar: false,
382 >{{ text }}</v-snackbar> 395 y: "top",
383 <div class="loader" v-if="showLoader"> 396 x: "right",
384 <v-progress-circular indeterminate color="white"></v-progress-circular> 397 mode: "",
385 </div> 398 timeout: 3000,
386 </v-container> 399 text: "",
387 </template> 400 color: "",
388 401 show: true,
389 <script> 402 showSearch: false,
390 import http from "@/Services/http.js"; 403 showLoader: false,
391 404 loading: false,
392 export default { 405 date: null,
393 data: () => ({ 406 search: "",
394 snackbar: false, 407 addNoticeBoardDialog: false,
395 y: "top", 408 editNoticeBoardDialog: false,
396 x: "right", 409 viewNoticeBoardDialog: false,
397 mode: "", 410 valid: true,
398 timeout: 3000, 411 addclass: [],
399 text: "", 412 addSection: [],
400 color: "", 413 gender: ["Male", "Female"],
401 show: true, 414 pagination: {
402 showSearch: false, 415 rowsPerPage: 10,
403 showLoader: false, 416 },
417 imageData: {},
404 loading: false, 418 imageName: "",
405 date: null, 419 imageUrl: "",
406 search: "", 420 imageFile: "",
407 addNoticeBoardDialog: false, 421 upload: "",
408 editNoticeBoardDialog: false, 422 loadingPdf: false,
409 viewNoticeBoardDialog: false, 423
410 valid: true, 424 titleRules: [(v) => !!v || " Title is required"],
411 addclass: [], 425 descriptionRules: [(v) => !!v || " Description is required"],
412 addSection: [], 426 headers: [
413 gender: ["Male", "Female"], 427 {
414 pagination: { 428 text: "No",
415 rowsPerPage: 10, 429 align: "",
416 }, 430 sortable: false,
417 imageData: {}, 431 value: "No",
418 imageName: "", 432 },
419 imageUrl: "", 433 {
420 imageFile: "", 434 text: "Event Image",
421 upload: "", 435 align: "center",
422 loadingPdf: false, 436 sortable: false,
423 437 value: "eventImageUrl",
424 titleRules: [(v) => !!v || " Title is required"], 438 },
425 descriptionRules: [(v) => !!v || " Description is required"], 439 { text: "Title", value: "title", sortable: false, align: "center" },
426 headers: [ 440 {
427 { 441 text: "File",
428 text: "No", 442 value: "eventImageUrl",
429 align: "", 443 sortable: false,
430 sortable: false, 444 align: "center",
431 value: "No", 445 },
432 }, 446 { text: "Action", value: "", sortable: false, align: "center" },
433 { 447 ],
434 text: "Event Image", 448 notices: [],
435 align: "center", 449 editedIndex: -1,
436 sortable: false, 450 addNoticeBoard: {},
437 value: "eventImageUrl", 451 editedItem: {
438 }, 452 title: "",
439 { text: "Title", value: "title", sortable: false, align: "center" }, 453 description: "",
440 { 454 },
441 text: "File", 455 }),
442 value: "eventImageUrl", 456 watch: {
443 sortable: false, 457 // addNoticeBoardDialog: function (val) {
444 align: "center", 458 // if (!val) {
445 }, 459 // this.addNoticeBoard = [];
446 { text: "Action", value: "", sortable: false, align: "center" }, 460 // this.imageName = "";
447 ], 461 // this.imageFile = "";
448 notices: [], 462 // this.imageUrl = "";
449 editedIndex: -1, 463 // }
450 addNoticeBoard: {}, 464 // },
451 editedItem: { 465 },
452 title: "", 466 methods: {
453 description: "", 467 pickFile() {
454 }, 468 this.$refs.image.click();
455 }), 469 },
456 watch: { 470 getNoticeDataList() {
457 // addNoticeBoardDialog: function (val) { 471 this.showLoader = true;
458 // if (!val) { 472 var token = this.$store.state.token;
459 // this.addNoticeBoard = []; 473 http()
460 // this.imageName = ""; 474 .get("/getEventsList", {
461 // this.imageFile = ""; 475 headers: { Authorization: "Bearer " + token },
462 // this.imageUrl = ""; 476 })
463 // } 477 .then((response) => {
464 // }, 478 this.notices = response.data.data;
465 }, 479 this.showLoader = false;
466 methods: { 480 })
467 pickFile() { 481 .catch((error) => {
468 this.$refs.image.click(); 482 this.showLoader = false;
469 }, 483 if (error.response.status === 401) {
470 getNoticeDataList() { 484 this.$router.replace({ path: "/" });
471 this.showLoader = true; 485 this.$store.dispatch("setToken", null);
472 var token = this.$store.state.token; 486 this.$store.dispatch("Id", null);
473 http() 487 }
474 .get("/getEventsList", { 488 });
475 headers: { Authorization: "Bearer " + token }, 489 },
476 }) 490 editItem(item) {
477 .then((response) => { 491 this.editedIndex = this.notices.indexOf(item);
478 this.notices = response.data.data; 492 this.editedItem = Object.assign({}, item);
479 this.showLoader = false; 493 this.editNoticeBoardDialog = true;
480 }) 494 },
481 .catch((error) => { 495 profile(item) {
482 this.showLoader = false; 496 this.editedIndex = this.notices.indexOf(item);
483 if (error.response.status === 401) { 497 this.editedItem = Object.assign({}, item);
484 this.$router.replace({ path: "/" }); 498 this.viewNoticeBoardDialog = true;
485 this.$store.dispatch("setToken", null); 499 },
486 this.$store.dispatch("Id", null); 500 deleteItem(item) {
487 } 501 let deleteEvent = {
488 }); 502 eventId: item._id,
489 }, 503 };
490 editItem(item) { 504 http()
491 this.editedIndex = this.notices.indexOf(item); 505 .delete(
492 this.editedItem = Object.assign({}, item); 506 "/deleteEvent",
493 this.editNoticeBoardDialog = true; 507 confirm("Are you sure you want to delete this?") && {
494 }, 508 params: deleteEvent,
495 profile(item) { 509 }
496 this.editedIndex = this.notices.indexOf(item); 510 )
497 this.editedItem = Object.assign({}, item); 511 .then((response) => {
498 this.viewNoticeBoardDialog = true; 512 // console.log("deleteUers",deleteEvent)
499 }, 513 if ((this.snackbar = true)) {
500 deleteItem(item) { 514 this.text = "Successfully delete Existing Notice Data";
501 let deleteEvent = { 515 }
502 eventId: item._id, 516 this.snackbar = true;
503 }; 517 this.color = "green";
504 http() 518 this.getNoticeDataList();
505 .delete( 519 })
506 "/deleteEvent", 520 .catch((error) => {
507 confirm("Are you sure you want to delete this?") && { 521 // console.log(error);
508 params: deleteEvent, 522 this.snackbar = true;
509 } 523 this.text = error.response.data.message;
510 ) 524 this.color = "error";
511 .then((response) => { 525 });
512 // console.log("deleteUers",deleteEvent) 526 },
513 if ((this.snackbar = true)) { 527 close() {
514 this.text = "Successfully delete Existing Notice Data"; 528 this.editNoticeBoardDialog = false;
515 } 529 },
516 this.snackbar = true; 530 closeNoticeBoardModel() {
517 this.color = "green"; 531 this.addNoticeBoardDialog = false;
518 this.getNoticeDataList(); 532 this.addNoticeBoard = [];
519 }) 533 this.imageName = "";
520 .catch((error) => { 534 this.imageFile = "";
521 // console.log(error); 535 this.imageUrl = "";
522 this.snackbar = true; 536 },
523 this.text = error.response.data.message; 537 submit() {
524 this.color = "error"; 538 var signatures = {
525 }); 539 // JVBERi0: "other",
526 }, 540 // iVBORw0KGgo: "image",
527 close() { 541 // UEsDBBQ: "other",
528 this.editNoticeBoardDialog = false; 542 // "/": "image",
529 }, 543 // AAABAA: "image",
530 closeNoticeBoardModel() { 544 // IywiV2hhdC: "other",
531 this.addNoticeBoardDialog = false; 545 // bmFtZSxl: "other",
532 this.addNoticeBoard = []; 546 };
533 this.imageName = ""; 547 function detectMimeType(b64) {
534 this.imageFile = ""; 548 for (var s in signatures) {
535 this.imageUrl = ""; 549 if (b64.indexOf(s) === 0) {
536 }, 550 return signatures[s];
537 submit() { 551 }
538 var signatures = { 552 }
539 // JVBERi0: "other", 553 }
540 // iVBORw0KGgo: "image", 554 if (this.$refs.form.validate()) {
541 // UEsDBBQ: "other", 555 if (this.imageUrl) {
542 // "/": "image", 556 var str = this.imageUrl;
543 // AAABAA: "image", 557 const [baseUrl, imageUrl] = str.split(/,/);
544 // IywiV2hhdC: "other", 558 this.addNoticeBoard.upload = imageUrl;
545 // bmFtZSxl: "other", 559 this.addNoticeBoard.fileType = detectMimeType(imageUrl);
546 }; 560 this.addNoticeBoard.fileName = this.imageName;
547 function detectMimeType(b64) { 561 }
548 for (var s in signatures) { 562 http()
549 if (b64.indexOf(s) === 0) { 563 .post("/createEvent", this.addNoticeBoard)
550 return signatures[s]; 564 .then((response) => {
551 } 565 this.imageUrl = "";
552 } 566 this.snackbar = true;
553 } 567 this.color = "green";
554 if (this.$refs.form.validate()) { 568 this.text = response.data.message;
555 if (this.imageUrl) { 569 this.getNoticeDataList();
556 var str = this.imageUrl; 570 this.addNoticeBoardDialog = false;
557 const [baseUrl, imageUrl] = str.split(/,/); 571 this.clear();
558 this.addNoticeBoard.upload = imageUrl; 572 })
559 this.addNoticeBoard.fileType = detectMimeType(imageUrl); 573 .catch((error) => {
560 this.addNoticeBoard.fileName = this.imageName; 574 this.snackbar = true;
561 } 575 this.text = error.response.data.message;
562 http() 576 this.color = "error";
563 .post("/createEvent", this.addNoticeBoard) 577 });
564 .then((response) => { 578 }
565 this.imageUrl = ""; 579 },
566 this.snackbar = true; 580 onFilePicked(e) {
567 this.color = "green"; 581 const files = e.target.files;
568 this.text = response.data.message; 582 this.upload = e.target.files[0];
569 this.getNoticeDataList(); 583 if (files[0] !== undefined) {
570 this.addNoticeBoardDialog = false; 584 this.imageName = files[0].name;
571 this.clear(); 585 if (this.imageName.lastIndexOf(".") <= 0) {
572 }) 586 return;
573 .catch((error) => { 587 }
574 this.snackbar = true; 588 const fr = new FileReader();
575 this.text = error.response.data.message; 589 fr.readAsDataURL(files[0]);
576 this.color = "error"; 590 fr.addEventListener("load", () => {
577 }); 591 this.imageUrl = fr.result;
578 } 592 this.imageFile = files[0]; // this is an image file that can be sent to server...
579 }, 593 this.imageData.imageUrl = URL.createObjectURL(this.imageFile);
580 onFilePicked(e) { 594 });
581 const files = e.target.files; 595 } else {
582 this.upload = e.target.files[0]; 596 this.imageName = "";
583 if (files[0] !== undefined) { 597 this.imageFile = "";
584 this.imageName = files[0].name; 598 this.imageUrl = "";
585 if (this.imageName.lastIndexOf(".") <= 0) { 599 }
586 return; 600 },
587 } 601 clear() {
588 const fr = new FileReader(); 602 this.$refs.form.reset();
589 fr.readAsDataURL(files[0]); 603 this.imageUrl = "";
590 fr.addEventListener("load", () => { 604 },
591 this.imageUrl = fr.result; 605 save() {
592 this.imageFile = files[0]; // this is an image file that can be sent to server... 606 let editNoticeBoard = {
593 this.imageData.imageUrl = URL.createObjectURL(this.imageFile); 607 eventId: this.editedItem._id,
594 }); 608 title: this.editedItem.title,
595 } else { 609 description: this.editedItem.description,
596 this.imageName = ""; 610 fileName: this.imageName,
597 this.imageFile = ""; 611 };
598 this.imageUrl = ""; 612 var signatures = {
599 } 613 // JVBERi0: "other",
600 }, 614 // iVBORw0KGgo: "image",
601 clear() { 615 // UEsDBBQ: "other",
602 this.$refs.form.reset(); 616 // "/": "image",
603 this.imageUrl = ""; 617 // AAABAA: "image",
604 }, 618 // IywiV2hhdC: "other",
605 save() { 619 };
606 let editNoticeBoard = { 620 function detectMimeType(b64) {
607 eventId: this.editedItem._id, 621 for (var s in signatures) {
608 title: this.editedItem.title, 622 if (b64.indexOf(s) === 0) {
609 description: this.editedItem.description, 623 return signatures[s];
610 fileName: this.imageName, 624 }
611 }; 625 }
612 var signatures = { 626 }
613 // JVBERi0: "other", 627 if (this.imageUrl) {
614 // iVBORw0KGgo: "image", 628 var str = this.imageUrl;
615 // UEsDBBQ: "other", 629 const [baseUrl, imageUrl] = str.split(/,/);
616 // "/": "image", 630 editNoticeBoard.upload = imageUrl;
617 // AAABAA: "image", 631 editNoticeBoard.fileType = detectMimeType(imageUrl);
618 // IywiV2hhdC: "other", 632 }
619 }; 633 http()
620 function detectMimeType(b64) { 634 .put("/updateEvent", editNoticeBoard)
621 for (var s in signatures) { 635 .then((response) => {
622 if (b64.indexOf(s) === 0) { 636 if ((this.snackbar = true)) {
623 return signatures[s]; 637 this.text = "Successfully Edit Existing Notice Data";
624 } 638 }
625 } 639 this.color = "green";
626 } 640 this.snackbar = true;
627 if (this.imageUrl) { 641 this.getNoticeDataList();
628 var str = this.imageUrl; 642 this.close();
629 const [baseUrl, imageUrl] = str.split(/,/); 643 })
630 editNoticeBoard.upload = imageUrl; 644 .catch((error) => {
631 editNoticeBoard.fileType = detectMimeType(imageUrl); 645 // console.log(error);
632 } 646 this.snackbar = true;
633 http() 647 this.text = error.response.data.message;
634 .put("/updateEvent", editNoticeBoard) 648 this.color = "red";
635 .then((response) => { 649 });
636 if ((this.snackbar = true)) { 650 },
637 this.text = "Successfully Edit Existing Notice Data"; 651 displaySearch() {
638 } 652 (this.show = false), (this.showSearch = true);
639 this.color = "green"; 653 },
640 this.snackbar = true; 654 closeSearch() {
641 this.getNoticeDataList(); 655 this.showSearch = false;
642 this.close(); 656 this.show = true;
643 }) 657 this.search = "";
644 .catch((error) => { 658 },
645 // console.log(error); 659 async generatePDF2Canvas(item) {
646 this.snackbar = true; 660 var dataType = "";
647 this.text = error.response.data.message; 661 var type = "";
648 this.color = "red"; 662 if (item.fileType == "image") {
649 }); 663 dataType = "file.jpg";
650 }, 664 } else if (item.fileType == "other") {
651 displaySearch() { 665 dataType = "file.pdf";
652 (this.show = false), (this.showSearch = true); 666 type = "application/pdf";
653 }, 667 }
654 closeSearch() { 668 var FileSaver = require("file-saver");
655 this.showSearch = false; 669 FileSaver.saveAs(item.eventImageUrl, "image.jpg");
656 this.show = true; 670 },
657 this.search = ""; 671 },
658 }, 672 mounted() {
659 async generatePDF2Canvas(item) { 673 this.getNoticeDataList();
660 var dataType = ""; 674 },
661 var type = ""; 675 };
662 if (item.fileType == "image") {
663 dataType = "file.jpg"; 676 </script>
677
678 <style scoped>
679 a:hover :hover {
680 text-decoration: underline !important;
681 color: blue;
682 }
src/pages/Parent/parents.vue
Diff comments   View file @8b7976c
1 <template> 1 <template>
2 <v-container fluid class="body-color"> 2 <v-container fluid class="body-color">
3 <v-dialog v-model="editParentDilaog" max-width="600px" scrollable persistent> 3 <v-dialog v-model="editParentDilaog" max-width="600px" scrollable persistent>
4 <v-card flat class="card-style pa-2" dark> 4 <v-card flat class="card-style pa-2" dark>
5 <v-layout> 5 <v-layout>
6 <v-flex xs12> 6 <v-flex xs12>
7 <label class="title text-xs-center">Edit Parents Details</label> 7 <label class="title text-xs-center">Edit Parents Details</label>
8 <v-icon size="24" class="right" @click="editParentDilaog = false">cancel</v-icon> 8 <v-icon size="24" class="right" @click="editParentDilaog = false">cancel</v-icon>
9 </v-flex> 9 </v-flex>
10 </v-layout> 10 </v-layout>
11 <v-card-text class="hidden-xs-only hidden-sm-only"> 11 <v-card-text class="hidden-xs-only hidden-sm-only">
12 <v-form ref="editParentForm" v-model="validEditParent" lazy-validation> 12 <v-form ref="editParentForm" v-model="validEditParent" lazy-validation>
13 <v-flex xs12> 13 <v-flex xs12>
14 <v-layout> 14 <v-layout>
15 <v-flex xs3 sm4 class="pt-4 subheading"> 15 <v-flex xs3 sm4 class="pt-4 subheading">
16 <label class="right">Email ID:</label> 16 <label class="right">Email ID:</label>
17 </v-flex> 17 </v-flex>
18 <v-flex xs8 sm6 class="ml-3"> 18 <v-flex xs8 sm6 class="ml-3">
19 <v-text-field 19 <v-text-field
20 placeholder="fill your email" 20 placeholder="fill your email"
21 v-model="editedItem.email" 21 v-model="editedItem.email"
22 type="text" 22 type="text"
23 name="email" 23 name="email"
24 required 24 required
25 ></v-text-field> 25 ></v-text-field>
26 </v-flex> 26 </v-flex>
27 </v-layout> 27 </v-layout>
28 </v-flex> 28 </v-flex>
29 <v-flex xs12> 29 <v-flex xs12>
30 <v-layout> 30 <v-layout>
31 <v-flex xs3 sm4 class="pt-4 subheading"> 31 <v-flex xs3 sm4 class="pt-4 subheading">
32 <label class="right">Father Name:</label> 32 <label class="right">Father Name:</label>
33 </v-flex> 33 </v-flex>
34 <v-flex xs8 sm6 class="ml-3"> 34 <v-flex xs8 sm6 class="ml-3">
35 <v-text-field 35 <v-text-field
36 v-model="editedItem.fatherName" 36 v-model="editedItem.fatherName"
37 placeholder="fill your father Name" 37 placeholder="fill your father Name"
38 required 38 required
39 ></v-text-field> 39 ></v-text-field>
40 </v-flex> 40 </v-flex>
41 </v-layout> 41 </v-layout>
42 </v-flex> 42 </v-flex>
43 <v-flex xs12> 43 <v-flex xs12>
44 <v-layout> 44 <v-layout>
45 <v-flex xs3 sm4 class="pt-4 subheading"> 45 <v-flex xs3 sm4 class="pt-4 subheading">
46 <label class="right">Father Cell No:</label> 46 <label class="right">Father Cell No:</label>
47 </v-flex> 47 </v-flex>
48 <v-flex xs8 sm6 class="ml-3"> 48 <v-flex xs8 sm6 class="ml-3">
49 <v-text-field 49 <v-text-field
50 v-model="editedItem.fatherCellNo" 50 v-model="editedItem.fatherCellNo"
51 placeholder="fill your father Cell Number" 51 placeholder="fill your father Cell Number"
52 :rules="editFatherNoRule" 52 :rules="editFatherNoRule"
53 type="number" 53 type="number"
54 required 54 required
55 ></v-text-field> 55 ></v-text-field>
56 </v-flex> 56 </v-flex>
57 </v-layout> 57 </v-layout>
58 </v-flex> 58 </v-flex>
59 <v-flex xs12> 59 <v-flex xs12>
60 <v-layout> 60 <v-layout>
61 <v-flex xs3 sm4 class="pt-4 subheading"> 61 <v-flex xs3 sm4 class="pt-4 subheading">
62 <label class="right">Father Profession:</label> 62 <label class="right">Father Profession:</label>
63 </v-flex> 63 </v-flex>
64 <v-flex xs8 sm6 class="ml-3"> 64 <v-flex xs8 sm6 class="ml-3">
65 <v-text-field 65 <v-text-field
66 v-model="editedItem.fatherProfession" 66 v-model="editedItem.fatherProfession"
67 placeholder="fill your father Profession" 67 placeholder="fill your father Profession"
68 required 68 required
69 ></v-text-field> 69 ></v-text-field>
70 </v-flex> 70 </v-flex>
71 </v-layout> 71 </v-layout>
72 </v-flex> 72 </v-flex>
73 <v-flex xs12> 73 <v-flex xs12>
74 <v-layout> 74 <v-layout>
75 <v-flex xs3 sm4 class="pt-4 subheading"> 75 <v-flex xs3 sm4 class="pt-4 subheading">
76 <label class="right">Mother Name:</label> 76 <label class="right">Mother Name:</label>
77 </v-flex> 77 </v-flex>
78 <v-flex xs8 sm6 class="ml-3"> 78 <v-flex xs8 sm6 class="ml-3">
79 <v-text-field 79 <v-text-field
80 v-model="editedItem.motherName" 80 v-model="editedItem.motherName"
81 placeholder="fill your Mother Name" 81 placeholder="fill your Mother Name"
82 type="text" 82 type="text"
83 required 83 required
84 ></v-text-field> 84 ></v-text-field>
85 </v-flex> 85 </v-flex>
86 </v-layout> 86 </v-layout>
87 </v-flex> 87 </v-flex>
88 <v-flex xs12> 88 <v-flex xs12>
89 <v-layout> 89 <v-layout>
90 <v-flex xs3 sm4 class="pt-4 subheading"> 90 <v-flex xs3 sm4 class="pt-4 subheading">
91 <label class="right">Mother Cell No:</label> 91 <label class="right">Mother Cell No:</label>
92 </v-flex> 92 </v-flex>
93 <v-flex xs8 sm6 class="ml-3"> 93 <v-flex xs8 sm6 class="ml-3">
94 <v-text-field 94 <v-text-field
95 v-model="editedItem.motherCellNo" 95 v-model="editedItem.motherCellNo"
96 placeholder="fill your Mother Cell Number" 96 placeholder="fill your Mother Cell Number"
97 type="number" 97 type="number"
98 required 98 required
99 ></v-text-field> 99 ></v-text-field>
100 </v-flex> 100 </v-flex>
101 </v-layout> 101 </v-layout>
102 </v-flex> 102 </v-flex>
103 <v-flex xs12> 103 <v-flex xs12>
104 <v-layout> 104 <v-layout>
105 <v-flex xs3 sm4 class="pt-4 subheading"> 105 <v-flex xs3 sm4 class="pt-4 subheading">
106 <label class="right">Mother Profession:</label> 106 <label class="right">Mother Profession:</label>
107 </v-flex> 107 </v-flex>
108 <v-flex xs8 sm6 class="ml-3"> 108 <v-flex xs8 sm6 class="ml-3">
109 <v-text-field 109 <v-text-field
110 v-model="editedItem.motherProfession" 110 v-model="editedItem.motherProfession"
111 placeholder="fill your Mother Profession" 111 placeholder="fill your Mother Profession"
112 type="text" 112 type="text"
113 required 113 required
114 ></v-text-field> 114 ></v-text-field>
115 </v-flex> 115 </v-flex>
116 </v-layout> 116 </v-layout>
117 <v-layout> 117 <v-layout>
118 <v-flex xs4 class="pt-4 subheading"> 118 <v-flex xs4 class="pt-4 subheading">
119 <label class="right">Password:</label> 119 <label class="right">Password:</label>
120 </v-flex> 120 </v-flex>
121 <v-flex xs8 class="ml-3"> 121 <v-flex xs8 class="ml-3">
122 <v-text-field 122 <v-text-field
123 v-model="editedItem.password" 123 v-model="editedItem.password"
124 placeholder="Enter Password" 124 placeholder="Enter Password"
125 type="text" 125 type="text"
126 required 126 required
127 ></v-text-field> 127 ></v-text-field>
128 </v-flex> 128 </v-flex>
129 </v-layout> 129 </v-layout>
130 </v-flex> 130 </v-flex>
131 <v-layout> 131 <v-layout>
132 <v-flex xs12 sm12> 132 <v-flex xs12 sm12>
133 <v-card-actions> 133 <v-card-actions>
134 <v-spacer></v-spacer> 134 <v-spacer></v-spacer>
135 <v-btn round dark @click="save" class="add-button">Save</v-btn> 135 <v-btn round dark @click="save" class="add-button">Save</v-btn>
136 <v-spacer></v-spacer> 136 <v-spacer></v-spacer>
137 </v-card-actions> 137 </v-card-actions>
138 </v-flex> 138 </v-flex>
139 </v-layout> 139 </v-layout>
140 </v-form> 140 </v-form>
141 </v-card-text> 141 </v-card-text>
142 <v-card-text style="height: 600px;" class="hidden-lg-only hidden-xl-only hidden-md-only"> 142 <v-card-text style="height: 600px;" class="hidden-lg-only hidden-xl-only hidden-md-only">
143 <v-flex xs12> 143 <v-flex xs12>
144 <v-layout wrap> 144 <v-layout wrap>
145 <v-flex xs12 class="pt-4 subheading"> 145 <v-flex xs12 class="pt-4 subheading">
146 <label>Email ID:</label> 146 <label>Email ID:</label>
147 </v-flex> 147 </v-flex>
148 <v-flex xs12> 148 <v-flex xs12>
149 <v-text-field 149 <v-text-field
150 placeholder="fill your email" 150 placeholder="fill your email"
151 v-model="editedItem.email" 151 v-model="editedItem.email"
152 type="text" 152 type="text"
153 name="email" 153 name="email"
154 required 154 required
155 ></v-text-field> 155 ></v-text-field>
156 </v-flex> 156 </v-flex>
157 </v-layout> 157 </v-layout>
158 </v-flex> 158 </v-flex>
159 <v-flex xs12> 159 <v-flex xs12>
160 <v-layout wrap> 160 <v-layout wrap>
161 <v-flex xs12 class="pt-4 subheading"> 161 <v-flex xs12 class="pt-4 subheading">
162 <label>Father Name:</label> 162 <label>Father Name:</label>
163 </v-flex> 163 </v-flex>
164 <v-flex xs12> 164 <v-flex xs12>
165 <v-text-field 165 <v-text-field
166 v-model="editedItem.fatherName" 166 v-model="editedItem.fatherName"
167 placeholder="fill your father Name" 167 placeholder="fill your father Name"
168 required 168 required
169 ></v-text-field> 169 ></v-text-field>
170 </v-flex> 170 </v-flex>
171 </v-layout> 171 </v-layout>
172 </v-flex> 172 </v-flex>
173 <v-flex xs12> 173 <v-flex xs12>
174 <v-layout wrap> 174 <v-layout wrap>
175 <v-flex xs12 class="pt-4 subheading"> 175 <v-flex xs12 class="pt-4 subheading">
176 <label>Father Cell No:</label> 176 <label>Father Cell No:</label>
177 </v-flex> 177 </v-flex>
178 <v-flex xs12> 178 <v-flex xs12>
179 <v-text-field 179 <v-text-field
180 v-model="editedItem.fatherCellNo" 180 v-model="editedItem.fatherCellNo"
181 placeholder="fill your father Cell Number" 181 placeholder="fill your father Cell Number"
182 type="number" 182 type="number"
183 required 183 required
184 ></v-text-field> 184 ></v-text-field>
185 </v-flex> 185 </v-flex>
186 </v-layout> 186 </v-layout>
187 </v-flex> 187 </v-flex>
188 <v-flex xs12> 188 <v-flex xs12>
189 <v-layout wrap> 189 <v-layout wrap>
190 <v-flex xs12 class="pt-4 subheading"> 190 <v-flex xs12 class="pt-4 subheading">
191 <label>Father Profession:</label> 191 <label>Father Profession:</label>
192 </v-flex> 192 </v-flex>
193 <v-flex xs12> 193 <v-flex xs12>
194 <v-text-field 194 <v-text-field
195 v-model="editedItem.fatherProfession" 195 v-model="editedItem.fatherProfession"
196 placeholder="fill your father Profession" 196 placeholder="fill your father Profession"
197 required 197 required
198 ></v-text-field> 198 ></v-text-field>
199 </v-flex> 199 </v-flex>
200 </v-layout> 200 </v-layout>
201 </v-flex> 201 </v-flex>
202 <v-flex xs12> 202 <v-flex xs12>
203 <v-layout wrap> 203 <v-layout wrap>
204 <v-flex xs12 class="pt-4 subheading"> 204 <v-flex xs12 class="pt-4 subheading">
205 <label>Mother Name:</label> 205 <label>Mother Name:</label>
206 </v-flex> 206 </v-flex>
207 <v-flex xs12> 207 <v-flex xs12>
208 <v-text-field 208 <v-text-field
209 v-model="editedItem.motherName" 209 v-model="editedItem.motherName"
210 placeholder="fill your Mother Name" 210 placeholder="fill your Mother Name"
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> 217 <v-flex xs12>
218 <v-layout wrap> 218 <v-layout wrap>
219 <v-flex xs12 class="pt-4 subheading"> 219 <v-flex xs12 class="pt-4 subheading">
220 <label>Mother Cell No:</label> 220 <label>Mother Cell No:</label>
221 </v-flex> 221 </v-flex>
222 <v-flex xs12> 222 <v-flex xs12>
223 <v-text-field 223 <v-text-field
224 v-model="editedItem.motherCellNo" 224 v-model="editedItem.motherCellNo"
225 placeholder="fill your Mother Cell Number" 225 placeholder="fill your Mother Cell Number"
226 type="number" 226 type="number"
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> 232 <v-flex xs12>
233 <v-layout wrap> 233 <v-layout wrap>
234 <v-flex xs12 class="pt-4 subheading"> 234 <v-flex xs12 class="pt-4 subheading">
235 <label>Mother Profession:</label> 235 <label>Mother Profession:</label>
236 </v-flex> 236 </v-flex>
237 <v-flex xs12> 237 <v-flex xs12>
238 <v-text-field 238 <v-text-field
239 v-model="editedItem.motherProfession" 239 v-model="editedItem.motherProfession"
240 placeholder="fill your Mother Profession" 240 placeholder="fill your Mother Profession"
241 type="text" 241 type="text"
242 required 242 required
243 ></v-text-field> 243 ></v-text-field>
244 </v-flex> 244 </v-flex>
245 <v-flex xs12 class="pt-4 subheading"> 245 <v-flex xs12 class="pt-4 subheading">
246 <label>Password:</label> 246 <label>Password:</label>
247 </v-flex> 247 </v-flex>
248 <v-flex xs12> 248 <v-flex xs12>
249 <v-text-field 249 <v-text-field
250 v-model="editedItem.password" 250 v-model="editedItem.password"
251 placeholder="Enter Password" 251 placeholder="Enter Password"
252 type="text" 252 type="text"
253 required 253 required
254 ></v-text-field> 254 ></v-text-field>
255 </v-flex> 255 </v-flex>
256 </v-layout> 256 </v-layout>
257 </v-flex> 257 </v-flex>
258 <v-layout> 258 <v-layout>
259 <v-flex xs12 sm12> 259 <v-flex xs12 sm12>
260 <v-card-actions> 260 <v-card-actions>
261 <v-spacer></v-spacer> 261 <v-spacer></v-spacer>
262 <v-btn round dark @click="save" class="add-button">Save</v-btn> 262 <v-btn round dark @click="save" class="add-button">Save</v-btn>
263 <v-spacer></v-spacer> 263 <v-spacer></v-spacer>
264 </v-card-actions> 264 </v-card-actions>
265 </v-flex> 265 </v-flex>
266 </v-layout> 266 </v-layout>
267 </v-card-text> 267 </v-card-text>
268 </v-card> 268 </v-card>
269 </v-dialog> 269 </v-dialog>
270 270
271 <!-- ****** RESET Parents MPIN ****** --> 271 <!-- ****** RESET Parents MPIN ****** -->
272 <v-dialog v-model="resetParentMpin" max-width="500px" scrollable persistent> 272 <v-dialog v-model="resetParentMpin" max-width="500px" scrollable persistent>
273 <v-card class="card-style pa-2" dark> 273 <v-card class="card-style pa-2" dark>
274 <v-layout> 274 <v-layout>
275 <v-flex xs12> 275 <v-flex xs12>
276 <label class="title text-xs-center">Reset Mpin</label> 276 <label class="title text-xs-center">Reset Mpin</label>
277 <v-icon size="24" class="right" @click="resetParentMpin = false">cancel</v-icon> 277 <v-icon size="24" class="right" @click="resetParentMpin = false">cancel</v-icon>
278 </v-flex> 278 </v-flex>
279 </v-layout> 279 </v-layout>
280 <v-card-text class="hidden-xs-only hidden-sm-only"> 280 <v-card-text class="hidden-xs-only hidden-sm-only">
281 <v-form ref="resetParentMpinForm" v-model="validParentMpin" lazy-validation> 281 <v-form ref="resetParentMpinForm" v-model="validParentMpin" lazy-validation>
282 <v-flex xs12> 282 <v-flex xs12>
283 <v-layout> 283 <v-layout>
284 <v-flex xs3 sm4 class="pt-4 subheading"> 284 <v-flex xs3 sm4 class="pt-4 subheading">
285 <label class="right">Change Mpin:</label> 285 <label class="right">Change Mpin:</label>
286 </v-flex> 286 </v-flex>
287 <v-flex xs8 sm6 class="ml-3"> 287 <v-flex xs8 sm6 class="ml-3">
288 <v-text-field 288 <v-text-field
289 placeholder="change mpin" 289 placeholder="change mpin"
290 :rules="mPinRules" 290 :rules="mPinRules"
291 v-model="editMpin.mPin" 291 v-model="editMpin.mPin"
292 type="number" 292 type="number"
293 counter="4" 293 counter="4"
294 required 294 required
295 ></v-text-field> 295 ></v-text-field>
296 </v-flex> 296 </v-flex>
297 </v-layout> 297 </v-layout>
298 </v-flex> 298 </v-flex>
299 </v-form> 299 </v-form>
300 <v-layout> 300 <v-layout>
301 <v-flex xs12 sm12> 301 <v-flex xs12 sm12>
302 <v-card-actions> 302 <v-card-actions>
303 <v-spacer></v-spacer> 303 <v-spacer></v-spacer>
304 <v-btn round dark @click="resetMpin" class="add-button">Reset</v-btn> 304 <v-btn round dark @click="resetMpin" class="add-button">Reset</v-btn>
305 <v-spacer></v-spacer> 305 <v-spacer></v-spacer>
306 </v-card-actions> 306 </v-card-actions>
307 </v-flex> 307 </v-flex>
308 </v-layout> 308 </v-layout>
309 </v-card-text> 309 </v-card-text>
310 </v-card> 310 </v-card>
311 </v-dialog> 311 </v-dialog>
312 312
313 <!-- ****** PROFILE VIEW Parents DEATILS ****** --> 313 <!-- ****** PROFILE VIEW Parents DEATILS ****** -->
314 314
315 <v-dialog v-model="profileParentDialog" max-width="700px" persistent> 315 <v-dialog v-model="profileParentDialog" max-width="700px" persistent>
316 <v-card class="card-style pa-2" dark> 316 <v-card class="card-style pa-2" dark>
317 <v-layout> 317 <v-layout>
318 <v-flex xs12> 318 <v-flex xs12>
319 <label class="title text-xs-center">View Parent Details</label> 319 <label class="title text-xs-center">View Parent Details</label>
320 <v-icon size="24" class="right" @click="profileParentDialog = false">cancel</v-icon> 320 <v-icon size="24" class="right" @click="profileParentDialog = false">cancel</v-icon>
321 </v-flex> 321 </v-flex>
322 </v-layout> 322 </v-layout>
323 <v-flex align-center justify-center layout text-xs-center class="mt-3"> 323 <v-flex align-center justify-center layout text-xs-center class="mt-3">
324 <v-avatar size="100px"> 324 <v-avatar size="100px">
325 <img src="/static/icon/user.png" v-if="!editedItem.profilePicUrl" /> 325 <img src="/static/icon/user.png" v-if="!editedItem.profilePicUrl" />
326 <img :src="editedItem.profilePicUrl" v-else-if="editedItem.profilePicUrl" /> 326 <img :src="editedItem.profilePicUrl" v-else-if="editedItem.profilePicUrl" />
327 </v-avatar> 327 </v-avatar>
328 </v-flex> 328 </v-flex>
329 <v-container grid-list-md> 329 <v-container grid-list-md>
330 <v-layout wrap> 330 <v-layout wrap>
331 <v-flex xs12> 331 <v-flex xs12>
332 <v-layout> 332 <v-layout>
333 <v-flex xs12 sm12> 333 <v-flex xs12 sm12>
334 <v-layout> 334 <v-layout>
335 <v-flex xs6> 335 <v-flex xs6>
336 <h5 class="right my-1"> 336 <h5 class="right my-1">
337 <b>Email:</b> 337 <b>Email:</b>
338 </h5> 338 </h5>
339 </v-flex> 339 </v-flex>
340 <v-flex xs6> 340 <v-flex xs6>
341 <h5 class="my-1">{{ editedItem.email }}</h5> 341 <h5 class="my-1">{{ editedItem.email }}</h5>
342 </v-flex> 342 </v-flex>
343 </v-layout> 343 </v-layout>
344 </v-flex> 344 </v-flex>
345 </v-layout> 345 </v-layout>
346 <v-layout> 346 <v-layout>
347 <v-flex xs12> 347 <v-flex xs12>
348 <v-layout> 348 <v-layout>
349 <v-flex xs6> 349 <v-flex xs6>
350 <b> 350 <b>
351 <h5 class="right my-1"> 351 <h5 class="right my-1">
352 <b>Fahter Name:</b> 352 <b>Fahter Name:</b>
353 </h5> 353 </h5>
354 </b> 354 </b>
355 </v-flex> 355 </v-flex>
356 <v-flex xs6> 356 <v-flex xs6>
357 <h5 class="my-1">{{ editedItem.fatherName }}</h5> 357 <h5 class="my-1">{{ editedItem.fatherName }}</h5>
358 </v-flex> 358 </v-flex>
359 </v-layout> 359 </v-layout>
360 </v-flex> 360 </v-flex>
361 </v-layout> 361 </v-layout>
362 <v-layout> 362 <v-layout>
363 <v-flex xs12> 363 <v-flex xs12>
364 <v-layout> 364 <v-layout>
365 <v-flex xs6> 365 <v-flex xs6>
366 <b> 366 <b>
367 <h5 class="right my-1"> 367 <h5 class="right my-1">
368 <b>Mother Name:</b> 368 <b>Mother Name:</b>
369 </h5> 369 </h5>
370 </b> 370 </b>
371 </v-flex> 371 </v-flex>
372 <v-flex xs6> 372 <v-flex xs6>
373 <h5 class="my-1">{{ editedItem.motherName }}</h5> 373 <h5 class="my-1">{{ editedItem.motherName }}</h5>
374 </v-flex> 374 </v-flex>
375 </v-layout> 375 </v-layout>
376 </v-flex> 376 </v-flex>
377 </v-layout> 377 </v-layout>
378 <v-layout> 378 <v-layout>
379 <v-flex xs12> 379 <v-flex xs12>
380 <v-layout> 380 <v-layout>
381 <v-flex sm6 xs6> 381 <v-flex sm6 xs6>
382 <b> 382 <b>
383 <h5 class="right my-1"> 383 <h5 class="right my-1">
384 <b>Father Cell No:</b> 384 <b>Father Cell No:</b>
385 </h5> 385 </h5>
386 </b> 386 </b>
387 </v-flex> 387 </v-flex>
388 <v-flex sm6 xs6> 388 <v-flex sm6 xs6>
389 <h5 class="my-1">{{ editedItem.fatherCellNo }}</h5> 389 <h5 class="my-1">{{ editedItem.fatherCellNo }}</h5>
390 </v-flex> 390 </v-flex>
391 </v-layout> 391 </v-layout>
392 </v-flex> 392 </v-flex>
393 </v-layout> 393 </v-layout>
394 <v-layout> 394 <v-layout>
395 <v-flex xs12> 395 <v-flex xs12>
396 <v-layout> 396 <v-layout>
397 <v-flex xs6> 397 <v-flex xs6>
398 <b> 398 <b>
399 <h5 class="right my-1"> 399 <h5 class="right my-1">
400 <b>Mother Cell No:</b> 400 <b>Mother Cell No:</b>
401 </h5> 401 </h5>
402 </b> 402 </b>
403 </v-flex> 403 </v-flex>
404 <v-flex xs6> 404 <v-flex xs6>
405 <h5 class="my-1">{{ editedItem.motherCellNo }}</h5> 405 <h5 class="my-1">{{ editedItem.motherCellNo }}</h5>
406 </v-flex> 406 </v-flex>
407 </v-layout> 407 </v-layout>
408 </v-flex> 408 </v-flex>
409 </v-layout> 409 </v-layout>
410 <v-layout> 410 <v-layout>
411 <v-flex xs12> 411 <v-flex xs12>
412 <v-layout> 412 <v-layout>
413 <v-flex xs6> 413 <v-flex xs6>
414 <b> 414 <b>
415 <h5 class="right my-1 hidden-lg-only hidden-xl-only hidden-md-only"> 415 <h5 class="right my-1 hidden-lg-only hidden-xl-only hidden-md-only">
416 <b>FatherProfession:</b> 416 <b>FatherProfession:</b>
417 </h5> 417 </h5>
418 <h5 class="right my-1 hidden-sm-only hidden-xs-only"> 418 <h5 class="right my-1 hidden-sm-only hidden-xs-only">
419 <b>Father Profession:</b> 419 <b>Father Profession:</b>
420 </h5> 420 </h5>
421 </b> 421 </b>
422 </v-flex> 422 </v-flex>
423 <v-flex xs6> 423 <v-flex xs6>
424 <h5 class="my-1">{{ editedItem.fatherProfession }}</h5> 424 <h5 class="my-1">{{ editedItem.fatherProfession }}</h5>
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> 429 <v-layout>
430 <v-flex xs12> 430 <v-flex xs12>
431 <v-layout> 431 <v-layout>
432 <v-flex xs6> 432 <v-flex xs6>
433 <b> 433 <b>
434 <h5 class="right my-1 hidden-lg-only hidden-xl-only hidden-md-only"> 434 <h5 class="right my-1 hidden-lg-only hidden-xl-only hidden-md-only">
435 <b>MotherProfession:</b> 435 <b>MotherProfession:</b>
436 </h5> 436 </h5>
437 <h5 class="right my-1 hidden-sm-only hidden-xs-only"> 437 <h5 class="right my-1 hidden-sm-only hidden-xs-only">
438 <b>Mother Profession:</b> 438 <b>Mother Profession:</b>
439 </h5> 439 </h5>
440 </b> 440 </b>
441 </v-flex> 441 </v-flex>
442 <v-flex xs6> 442 <v-flex xs6>
443 <h5 class="my-1">{{ editedItem.motherProfession }}</h5> 443 <h5 class="my-1">{{ editedItem.motherProfession }}</h5>
444 </v-flex> 444 </v-flex>
445 </v-layout> 445 </v-layout>
446 <!-- <v-layout> 446 <!-- <v-layout>
447 <v-flex xs6> 447 <v-flex xs6>
448 <b> 448 <b>
449 <h5 class="right my-1 hidden-lg-only hidden-xl-only hidden-md-only"> 449 <h5 class="right my-1 hidden-lg-only hidden-xl-only hidden-md-only">
450 <b>Password:</b> 450 <b>Password:</b>
451 </h5> 451 </h5>
452 <h5 class="right my-1 hidden-sm-only hidden-xs-only"> 452 <h5 class="right my-1 hidden-sm-only hidden-xs-only">
453 <b>Password:</b> 453 <b>Password:</b>
454 </h5> 454 </h5>
455 </b> 455 </b>
456 </v-flex> 456 </v-flex>
457 <v-flex xs6> 457 <v-flex xs6>
458 <h5 class="my-1">{{ editedItem.password }}</h5> 458 <h5 class="my-1">{{ editedItem.password }}</h5>
459 </v-flex> 459 </v-flex>
460 </v-layout>--> 460 </v-layout>-->
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-container> 465 </v-container>
466 </v-card> 466 </v-card>
467 </v-dialog> 467 </v-dialog>
468 <!-- ****** EXISTING-USERS Parents TABLE ****** --> 468 <!-- ****** EXISTING-USERS Parents TABLE ****** -->
469 <v-toolbar color="transparent" flat> 469 <v-toolbar color="transparent" flat>
470 <v-btn 470 <v-btn
471 fab 471 fab
472 dark 472 dark
473 class="open-dialog-button hidden-xl-only hidden-md-only hidden-lg-only" 473 class="open-dialog-button hidden-xl-only hidden-md-only hidden-lg-only"
474 small 474 small
475 @click="addParentDialog = true" 475 @click="addParentDialog = true"
476 > 476 >
477 <v-icon dark>add</v-icon> 477 <v-icon dark>add</v-icon>
478 </v-btn> 478 </v-btn>
479 <v-btn 479 <v-btn
480 v-if="role != 'TEACHER' " 480 v-if="role != 'TEACHER' "
481 round 481 round
482 class="open-dialog-button hidden-sm-only hidden-xs-only" 482 class="open-dialog-button hidden-sm-only hidden-xs-only"
483 dark 483 dark
484 @click="addParentDialog = true" 484 @click="addParentDialog = true"
485 > 485 >
486 <v-icon class="white--text pr-1" size="20">add</v-icon>Add Parent 486 <v-icon class="white--text pr-1" size="20">add</v-icon>Add Parent
487 </v-btn> 487 </v-btn>
488 <v-spacer></v-spacer> 488 <v-spacer></v-spacer>
489 <v-card-title class="body-1" v-show="show"> 489 <v-card-title class="body-1" v-show="show">
490 <v-btn icon large flat @click="displaySearch"> 490 <v-btn icon large flat @click="displaySearch">
491 <v-avatar size="27"> 491 <v-avatar size="27">
492 <img src="/static/icon/search.png" alt="icon" /> 492 <img src="/static/icon/search.png" alt="icon" />
493 </v-avatar> 493 </v-avatar>
494 </v-btn> 494 </v-btn>
495 </v-card-title> 495 </v-card-title>
496 <v-flex xs8 sm8 md2 lg2 v-if="showSearch"> 496 <v-flex xs8 sm8 md2 lg2 v-if="showSearch">
497 <v-layout> 497 <v-layout>
498 <v-text-field 498 <v-text-field
499 v-model="search" 499 v-model="search"
500 label="Search" 500 label="Search"
501 prepend-inner-icon="search" 501 prepend-inner-icon="search"
502 color="primary" 502 color="primary"
503 ref="searchField" 503 ref="searchField"
504 autofocus 504 autofocus
505 style="transition: 0.8s cubic-bezier(0.25, 0.8, 0.25, 1); !important" 505 style="transition: 0.8s cubic-bezier(0.25, 0.8, 0.25, 1); !important"
506 ></v-text-field> 506 ></v-text-field>
507 <v-icon @click="closeSearch" color="error">close</v-icon> 507 <v-icon @click="closeSearch" color="error">close</v-icon>
508 </v-layout> 508 </v-layout>
509 </v-flex> 509 </v-flex>
510 </v-toolbar> 510 </v-toolbar>
511 <v-data-table 511 <v-data-table
512 :headers="headers" 512 :headers="headers"
513 :items="parentsList" 513 :items="parentsList"
514 :pagination.sync="pagination" 514 :pagination.sync="pagination"
515 :search="search" 515 :search="search"
516 > 516 >
517 <template slot="items" slot-scope="props"> 517 <template slot="items" slot-scope="props">
518 <tr class="tr"> 518 <tr class="tr">
519 <td class="text-xs-center td td-row">{{ props.index + 1}}</td> 519 <td class="text-xs-center td td-row">{{ props.index + 1}}</td>
520 <td class="text-xs-center td td-row">{{ props.item.email }}</td> 520 <td class="text-xs-center td td-row">{{ props.item.email }}</td>
521 <td class="text-xs-center td td-row">{{ props.item.fatherName }}</td> 521 <td class="text-xs-center td td-row">{{ props.item.fatherName }}</td>
522 <td class="text-xs-center td td-row">{{ props.item.fatherCellNo }}</td> 522 <td class="text-xs-center td td-row">{{ props.item.fatherCellNo }}</td>
523 <td class="text-xs-center td td-row">{{ props.item.motherName }}</td> 523 <td class="text-xs-center td td-row">{{ props.item.motherName }}</td>
524 <td class="text-xs-center td td-row">{{ props.item.motherCellNo }}</td> 524 <td class="text-xs-center td td-row">{{ props.item.motherCellNo }}</td>
525 <td class="text-xs-center td td-row"> 525 <td class="text-xs-center td td-row">
526 <span> 526 <span>
527 <v-tooltip top> 527 <v-tooltip top>
528 <img 528 <img
529 slot="activator" 529 slot="activator"
530 style="cursor:pointer; width:25px; height:25px; " 530 style="cursor:pointer; width:25px; height:25px; "
531 class="mr-3" 531 class="mr-3"
532 @click="profile(props.item)" 532 @click="profile(props.item)"
533 src="/static/icon/view.png" 533 src="/static/icon/view.png"
534 /> 534 />
535 <span>View</span> 535 <span>View</span>
536 </v-tooltip> 536 </v-tooltip>
537 <v-tooltip top v-if="role != 'TEACHER' "> 537 <v-tooltip top v-if="role != 'TEACHER' ">
538 <img 538 <img
539 slot="activator" 539 slot="activator"
540 style="cursor:pointer; width:20px; height:18px; " 540 style="cursor:pointer; width:20px; height:18px; "
541 @click="editItem(props.item)" 541 @click="editItem(props.item)"
542 src="/static/icon/edit.png" 542 src="/static/icon/edit.png"
543 class="mr-3" 543 class="mr-3"
544 /> 544 />
545 <span>Edit</span> 545 <span>Edit</span>
546 </v-tooltip> 546 </v-tooltip>
547 <span v-if="role === 'ADMIN' "> 547 <span v-if="role === 'ADMIN' ">
548 <i 548 <i
549 class="material-icons md-18" 549 class="material-icons md-18"
550 style="cursor:pointer; width:20px; height:18px;" 550 style="cursor:pointer; width:20px; height:18px;"
551 @click="resetParentMPIN(props.item)" 551 @click="resetParentMPIN(props.item)"
552 >vpn_key</i> 552 >vpn_key</i>
553 </span> 553 </span>
554 </span> 554 </span>
555 </td> 555 </td>
556 </tr> 556 </tr>
557 </template> 557 </template>
558 <v-alert 558 <v-alert
559 slot="no-results" 559 slot="no-results"
560 :value="true" 560 :value="true"
561 color="error" 561 color="error"
562 icon="warning" 562 icon="warning"
563 >Your search for "{{ search }}" found no results.</v-alert> 563 >Your search for "{{ search }}" found no results.</v-alert>
564 </v-data-table> 564 </v-data-table>
565 565
566 <!-- ******DIALOG BOX - ADD PARENTS DETAILS****** --> 566 <!-- ******DIALOG BOX - ADD PARENTS DETAILS****** -->
567 <v-dialog v-model="addParentDialog" max-width="1100px" v-if="addParentDialog" persistent> 567 <v-dialog v-model="addParentDialog" max-width="1100px" v-if="addParentDialog" persistent>
568 <v-card flat class="card-style pa-2" dark> 568 <v-card flat class="card-style pa-2" dark>
569 <v-layout> 569 <v-layout>
570 <v-flex xs12> 570 <v-flex xs12>
571 <label class="title text-xs-center">Add Parent</label> 571 <label class="title text-xs-center">Add Parent</label>
572 <v-icon 572 <v-icon
573 size="24" 573 size="24"
574 class="right" 574 class="right"
575 @click="$refs.parentForm.reset();addParentDialog = false" 575 @click="$refs.parentForm.reset();addParentDialog = false"
576 >cancel</v-icon> 576 >cancel</v-icon>
577 </v-flex> 577 </v-flex>
578 </v-layout> 578 </v-layout>
579 <v-container fluid fill-height> 579 <v-container fluid fill-height>
580 <v-layout align-center> 580 <v-layout align-center>
581 <v-flex xs12 sm12> 581 <v-flex xs12 sm12>
582 <v-form ref="parentForm" v-model="valid" lazy-validation> 582 <v-form ref="parentForm" v-model="valid" lazy-validation>
583 <v-container fluid class="hidden-xs-only hidden-sm-only"> 583 <v-container fluid class="hidden-xs-only hidden-sm-only">
584 <v-layout> 584 <v-layout>
585 <v-flex xs12 sm6> 585 <v-flex xs12 sm6>
586 <v-layout> 586 <v-layout>
587 <v-flex xs4 class="pt-4 subheading"> 587 <v-flex xs4 class="pt-4 subheading">
588 <label class="right">Father Cell No:</label> 588 <label class="right">Father Cell No:</label>
589 </v-flex> 589 </v-flex>
590 <v-flex xs8 class="ml-3"> 590 <v-flex xs8 class="ml-3">
591 <v-text-field 591 <v-text-field
592 v-model="parentData.fatherCellNo" 592 v-model="parentData.fatherCellNo"
593 placeholder="fill your father Cell Number" 593 placeholder="fill your father Cell Number"
594 type="number" 594 type="number"
595 :rules="fatheCellNoRules" 595 :rules="fatheCellNoRules"
596 counter="10" 596 counter="10"
597 required 597 required
598 ></v-text-field> 598 ></v-text-field>
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 xs4 class="pt-4 subheading"> 604 <v-flex xs4 class="pt-4 subheading">
605 <label class="right">Parent Email Id:</label> 605 <label class="right">Parent Email Id:</label>
606 </v-flex> 606 </v-flex>
607 <v-flex xs8 class="ml-3"> 607 <v-flex xs8 class="ml-3">
608 <v-text-field 608 <v-text-field
609 placeholder="fill Parent email" 609 placeholder="fill Parent email"
610 v-model="parentData.email" 610 v-model="parentData.email"
611 type="text" 611 type="text"
612 required 612 required
613 ></v-text-field> 613 ></v-text-field>
614 </v-flex> 614 </v-flex>
615 </v-layout> 615 </v-layout>
616 </v-flex> 616 </v-flex>
617 </v-layout> 617 </v-layout>
618 <v-layout> 618 <v-layout>
619 <v-flex xs12 sm6> 619 <v-flex xs12 sm6>
620 <v-layout> 620 <v-layout>
621 <v-flex xs4 class="pt-4 subheading"> 621 <v-flex xs4 class="pt-4 subheading">
622 <label class="right">Father Name:</label> 622 <label class="right">Father Name:</label>
623 </v-flex> 623 </v-flex>
624 <v-flex xs8 class="ml-3"> 624 <v-flex xs8 class="ml-3">
625 <v-text-field 625 <v-text-field
626 v-model="parentData.fatherName" 626 v-model="parentData.fatherName"
627 placeholder="Fill your father Name" 627 placeholder="Fill your father Name"
628 required 628 required
629 ></v-text-field> 629 ></v-text-field>
630 </v-flex> 630 </v-flex>
631 </v-layout> 631 </v-layout>
632 </v-flex> 632 </v-flex>
633 <v-flex xs12 sm6> 633 <v-flex xs12 sm6>
634 <v-layout> 634 <v-layout>
635 <v-flex xs4 class="pt-4 subheading"> 635 <v-flex xs4 class="pt-4 subheading">
636 <label class="right">Father Profession:</label> 636 <label class="right">Father Profession:</label>
637 </v-flex> 637 </v-flex>
638 <v-flex xs8 class="ml-3"> 638 <v-flex xs8 class="ml-3">
639 <v-text-field 639 <v-text-field
640 v-model="parentData.fatherProfession" 640 v-model="parentData.fatherProfession"
641 placeholder="fill your father Profession" 641 placeholder="fill your father Profession"
642 required 642 required
643 ></v-text-field> 643 ></v-text-field>
644 </v-flex> 644 </v-flex>
645 </v-layout> 645 </v-layout>
646 </v-flex> 646 </v-flex>
647 </v-layout> 647 </v-layout>
648 <v-layout> 648 <v-layout>
649 <v-flex xs12 sm6> 649 <v-flex xs12 sm6>
650 <v-layout> 650 <v-layout>
651 <v-flex xs4 class="pt-4 subheading"> 651 <v-flex xs4 class="pt-4 subheading">
652 <label class="right">Mother Name:</label> 652 <label class="right">Mother Name:</label>
653 </v-flex> 653 </v-flex>
654 <v-flex xs8 class="ml-3"> 654 <v-flex xs8 class="ml-3">
655 <v-text-field 655 <v-text-field
656 v-model="parentData.motherName" 656 v-model="parentData.motherName"
657 placeholder="fill your Mother Name" 657 placeholder="fill your Mother Name"
658 type="text" 658 type="text"
659 required 659 required
660 ></v-text-field> 660 ></v-text-field>
661 </v-flex> 661 </v-flex>
662 </v-layout> 662 </v-layout>
663 </v-flex> 663 </v-flex>
664 <v-flex xs12 sm6> 664 <v-flex xs12 sm6>
665 <v-layout> 665 <v-layout>
666 <v-flex xs4 class="pt-4 subheading"> 666 <v-flex xs4 class="pt-4 subheading">
667 <label class="right">Mother Cell No:</label> 667 <label class="right">Mother Cell No:</label>
668 </v-flex> 668 </v-flex>
669 <v-flex xs8 class="ml-3"> 669 <v-flex xs8 class="ml-3">
670 <v-text-field 670 <v-text-field
671 v-model="parentData.motherCellNo" 671 v-model="parentData.motherCellNo"
672 placeholder="fill your Mother Cell Number" 672 placeholder="fill your Mother Cell Number"
673 counter="10" 673 counter="10"
674 type="number" 674 type="number"
675 required 675 required
676 ></v-text-field> 676 ></v-text-field>
677 </v-flex> 677 </v-flex>
678 </v-layout> 678 </v-layout>
679 </v-flex> 679 </v-flex>
680 </v-layout> 680 </v-layout>
681 <v-layout> 681 <v-layout>
682 <v-flex xs12 sm6> 682 <v-flex xs12 sm6>
683 <v-layout> 683 <v-layout>
684 <v-flex xs4 class="pt-4 subheading"> 684 <v-flex xs4 class="pt-4 subheading">
685 <label class="right">Mother Profession:</label> 685 <label class="right">Mother Profession:</label>
686 </v-flex> 686 </v-flex>
687 <v-flex xs8 class="ml-3"> 687 <v-flex xs8 class="ml-3">
688 <v-text-field 688 <v-text-field
689 v-model="parentData.motherProfession" 689 v-model="parentData.motherProfession"
690 placeholder="fill your Mother Profession" 690 placeholder="fill your Mother Profession"
691 type="text" 691 type="text"
692 required 692 required
693 ></v-text-field> 693 ></v-text-field>
694 </v-flex> 694 </v-flex>
695 </v-layout> 695 </v-layout>
696 </v-flex> 696 </v-flex>
697 <v-flex xs12 sm6> 697 <v-flex xs12 sm6>
698 <v-layout> 698 <v-layout>
699 <v-flex xs4 class="pt-4 subheading"> 699 <v-flex xs4 class="pt-4 subheading">
700 <label class="right">Password:</label> 700 <label class="right">Password:</label>
701 </v-flex> 701 </v-flex>
702 <v-flex xs8 class="ml-3"> 702 <v-flex xs8 class="ml-3">
703 <v-text-field 703 <v-text-field
704 v-model="parentData.password" 704 v-model="parentData.password"
705 :append-icon="e1 ? 'visibility_off' : 'visibility'" 705 :append-icon="e1 ? 'visibility_off' : 'visibility'"
706 :append-icon-cb="() => (e1 = !e1)" 706 :append-icon-cb="() => (e1 = !e1)"
707 :type="e1 ? 'password' : 'text'" 707 :type="e1 ? 'password' : 'text'"
708 :rules="password" 708 :rules="password"
709 placeholder="Enter Your Password" 709 placeholder="Enter Your Password"
710 :disabled="isFatherCellExists" 710 :disabled="isFatherCellExists"
711 required 711 required
712 ></v-text-field> 712 ></v-text-field>
713 </v-flex> 713 </v-flex>
714 </v-layout> 714 </v-layout>
715 </v-flex> 715 </v-flex>
716 </v-layout> 716 </v-layout>
717 <v-flex xs12 sm12> 717 <v-flex xs12 sm12>
718 <v-layout> 718 <v-layout>
719 <v-flex xs12 sm12> 719 <v-flex xs12 sm12>
720 <v-btn 720 <v-btn
721 class="right add-button" 721 class="right add-button"
722 @click="submitParentDetails" 722 @click="submitParentDetails"
723 round 723 round
724 dark 724 dark
725 :loading="loading" 725 :loading="loading"
726 v-show="showParent" 726 v-show="showParent"
727 >Add</v-btn> 727 >Add</v-btn>
728 <v-btn @click="clear" round dark class="clear-button right">Clear</v-btn> 728 <v-btn @click="clear" round dark class="clear-button right">Clear</v-btn>
729 </v-flex> 729 </v-flex>
730 </v-layout> 730 </v-layout>
731 </v-flex> 731 </v-flex>
732 </v-container> 732 </v-container>
733 <v-container fluid class="hidden-lg-only hidden-xl-only hidden-md-only"> 733 <v-container fluid class="hidden-lg-only hidden-xl-only hidden-md-only">
734 <v-layout wrap> 734 <v-layout wrap>
735 <v-flex xs12 sm6> 735 <v-flex xs12 sm6>
736 <v-layout wrap> 736 <v-layout wrap>
737 <v-flex xs12 class="pt-4 subheading"> 737 <v-flex xs12 class="pt-4 subheading">
738 <label>Father Cell No:</label> 738 <label>Father Cell No:</label>
739 </v-flex> 739 </v-flex>
740 <v-flex xs12> 740 <v-flex xs12>
741 <v-text-field 741 <v-text-field
742 v-model="parentData.fatherCellNo" 742 v-model="parentData.fatherCellNo"
743 :rules="fatheCellNoRules" 743 :rules="fatheCellNoRules"
744 counter="10" 744 counter="10"
745 placeholder="fill your father Cell Number" 745 placeholder="fill your father Cell Number"
746 type="number" 746 type="number"
747 required 747 required
748 ></v-text-field> 748 ></v-text-field>
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 wrap> 753 <v-layout wrap>
754 <v-flex xs12 class="pt-4 subheading"> 754 <v-flex xs12 class="pt-4 subheading">
755 <label>Parent Email Id:</label> 755 <label>Parent Email Id:</label>
756 </v-flex> 756 </v-flex>
757 <v-flex xs12> 757 <v-flex xs12>
758 <v-text-field 758 <v-text-field
759 placeholder="fill Parent email" 759 placeholder="fill Parent email"
760 v-model="parentData.email" 760 v-model="parentData.email"
761 type="text" 761 type="text"
762 required 762 required
763 ></v-text-field> 763 ></v-text-field>
764 </v-flex> 764 </v-flex>
765 </v-layout> 765 </v-layout>
766 </v-flex> 766 </v-flex>
767 </v-layout> 767 </v-layout>
768 <v-layout wrap> 768 <v-layout wrap>
769 <v-flex xs12 sm6> 769 <v-flex xs12 sm6>
770 <v-layout wrap> 770 <v-layout wrap>
771 <v-flex xs12 class="pt-4 subheading"> 771 <v-flex xs12 class="pt-4 subheading">
772 <label>Father Name:</label> 772 <label>Father Name:</label>
773 </v-flex> 773 </v-flex>
774 <v-flex xs12> 774 <v-flex xs12>
775 <v-text-field 775 <v-text-field
776 v-model="parentData.fatherName" 776 v-model="parentData.fatherName"
777 placeholder="Fill your father Name" 777 placeholder="Fill your father Name"
778 required 778 required
779 ></v-text-field> 779 ></v-text-field>
780 </v-flex> 780 </v-flex>
781 </v-layout> 781 </v-layout>
782 </v-flex> 782 </v-flex>
783 <v-flex xs12 sm6> 783 <v-flex xs12 sm6>
784 <v-layout wrap> 784 <v-layout wrap>
785 <v-flex xs12 class="pt-4 subheading"> 785 <v-flex xs12 class="pt-4 subheading">
786 <label>Father Profession:</label> 786 <label>Father Profession:</label>
787 </v-flex> 787 </v-flex>
788 <v-flex xs12> 788 <v-flex xs12>
789 <v-text-field 789 <v-text-field
790 v-model="parentData.fatherProfession" 790 v-model="parentData.fatherProfession"
791 placeholder="fill your father Profession" 791 placeholder="fill your father Profession"
792 required 792 required
793 ></v-text-field> 793 ></v-text-field>
794 </v-flex> 794 </v-flex>
795 </v-layout> 795 </v-layout>
796 </v-flex> 796 </v-flex>
797 </v-layout> 797 </v-layout>
798 <v-layout wrap> 798 <v-layout wrap>
799 <v-flex xs12 sm6> 799 <v-flex xs12 sm6>
800 <v-layout wrap> 800 <v-layout wrap>
801 <v-flex xs12 class="pt-4 subheading"> 801 <v-flex xs12 class="pt-4 subheading">
802 <label>Mother Name:</label> 802 <label>Mother Name:</label>
803 </v-flex> 803 </v-flex>
804 <v-flex xs12> 804 <v-flex xs12>
805 <v-text-field 805 <v-text-field
806 v-model="parentData.motherName" 806 v-model="parentData.motherName"
807 placeholder="fill your Mother Name" 807 placeholder="fill your Mother Name"
808 type="text" 808 type="text"
809 required 809 required
810 ></v-text-field> 810 ></v-text-field>
811 </v-flex> 811 </v-flex>
812 </v-layout> 812 </v-layout>
813 </v-flex> 813 </v-flex>
814 <v-flex xs12 sm6> 814 <v-flex xs12 sm6>
815 <v-layout wrap> 815 <v-layout wrap>
816 <v-flex xs42 class="pt-4 subheading"> 816 <v-flex xs42 class="pt-4 subheading">
817 <label>Mother Cell No:</label> 817 <label>Mother Cell No:</label>
818 </v-flex> 818 </v-flex>
819 <v-flex xs12> 819 <v-flex xs12>
820 <v-text-field 820 <v-text-field
821 v-model="parentData.motherCellNo" 821 v-model="parentData.motherCellNo"
822 placeholder="fill your Mother Cell Number" 822 placeholder="fill your Mother Cell Number"
823 type="number" 823 type="number"
824 required 824 required
825 ></v-text-field> 825 ></v-text-field>
826 </v-flex> 826 </v-flex>
827 </v-layout> 827 </v-layout>
828 </v-flex> 828 </v-flex>
829 </v-layout> 829 </v-layout>
830 <v-layout wrap> 830 <v-layout wrap>
831 <v-flex xs12 sm6> 831 <v-flex xs12 sm6>
832 <v-layout wrap> 832 <v-layout wrap>
833 <v-flex xs12 class="pt-4 subheading"> 833 <v-flex xs12 class="pt-4 subheading">
834 <label>Mother Profession:</label> 834 <label>Mother Profession:</label>
835 </v-flex> 835 </v-flex>
836 <v-flex xs12> 836 <v-flex xs12>
837 <v-text-field 837 <v-text-field
838 v-model="parentData.motherProfession" 838 v-model="parentData.motherProfession"
839 placeholder="fill your Mother Profession" 839 placeholder="fill your Mother Profession"
840 type="text" 840 type="text"
841 required 841 required
842 ></v-text-field> 842 ></v-text-field>
843 </v-flex> 843 </v-flex>
844 </v-layout> 844 </v-layout>
845 </v-flex> 845 </v-flex>
846 </v-layout> 846 </v-layout>
847 <v-flex xs12 sm12> 847 <v-flex xs12 sm12>
848 <v-layout> 848 <v-layout>
849 <v-flex xs6 sm6 offset-sm1> 849 <v-flex xs6 sm6 offset-sm1>
850 <v-btn @click="clear" class="clear-button" round dark>clear</v-btn> 850 <v-btn @click="clear" class="clear-button" round dark>clear</v-btn>
851 </v-flex> 851 </v-flex>
852 <v-flex xs6 sm6> 852 <v-flex xs6 sm6>
853 <v-btn 853 <v-btn
854 class="add-button" 854 class="add-button"
855 @click="submitParentDetails" 855 @click="submitParentDetails"
856 round 856 round
857 dark 857 dark
858 :loading="loading" 858 :loading="loading"
859 v-show="showParent" 859 v-show="showParent"
860 >Add</v-btn> 860 >Add</v-btn>
861 </v-flex> 861 </v-flex>
862 </v-layout> 862 </v-layout>
863 </v-flex> 863 </v-flex>
864 </v-container> 864 </v-container>
865 </v-form> 865 </v-form>
866 </v-flex> 866 </v-flex>
867 </v-layout> 867 </v-layout>
868 </v-container> 868 </v-container>
869 </v-card> 869 </v-card>
870 </v-dialog> 870 </v-dialog>
871 <div class="loader" v-if="showLoader"> 871 <div class="loader" v-if="showLoader">
872 <v-progress-circular indeterminate color="white"></v-progress-circular> 872 <v-progress-circular indeterminate color="white"></v-progress-circular>
873 </div> 873 </div>
874 <v-snackbar 874 <v-snackbar
875 :timeout="timeout" 875 :timeout="timeout"
876 :top="y === 'top'" 876 :top="y === 'top'"
877 :right="x === 'right'" 877 :right="x === 'right'"
878 :vertical="mode === 'vertical'" 878 :vertical="mode === 'vertical'"
879 v-model="snackbar" 879 v-model="snackbar"
880 color="success" 880 color="success"
881 >{{ text }}</v-snackbar> 881 >{{ text }}</v-snackbar>
882 </v-container> 882 </v-container>
883 </template> 883 </template>
884 884
885 <script> 885 <script>
886 import http from "@/Services/http.js"; 886 import http from "@/Services/http.js";
887 import Util from "@/util"; 887 import Util from "@/util";
888 import moment from "moment"; 888 import moment from "moment";
889 889
890 export default { 890 export default {
891 data: () => ({ 891 data: () => ({
892 e1: true, 892 e1: true,
893 showParent: true, 893 showParent: true,
894 snackbar: false, 894 snackbar: false,
895 role: "", 895 role: "",
896 // TEACHER: "", 896 // TEACHER: "",
897 y: "top", 897 y: "top",
898 x: "right", 898 x: "right",
899 color: "", 899 color: "",
900 mode: "", 900 mode: "",
901 timeout: 3000, 901 timeout: 3000,
902 text: "", 902 text: "",
903 show: true, 903 show: true,
904 showSearch: false, 904 showSearch: false,
905 showLoader: false, 905 showLoader: false,
906 loading: false, 906 loading: false,
907 date: null, 907 date: null,
908 search: "", 908 search: "",
909 password: "", 909 password: "",
910 addParentDialog: false, 910 addParentDialog: false,
911 menu: false, 911 menu: false,
912 menu1: false, 912 menu1: false,
913 editParentDilaog: false, 913 editParentDilaog: false,
914 profileParentDialog: false, 914 profileParentDialog: false,
915 resetParentMpin: false, 915 resetParentMpin: false,
916 viewProfileParentDialog: false, 916 viewProfileParentDialog: false,
917 valid: true, 917 valid: true,
918 validEditParent: true, 918 validEditParent: true,
919 validParentMpin: true, 919 validParentMpin: true,
920 pagination: { 920 pagination: {
921 rowsPerPage: 10, 921 rowsPerPage: 10,
922 }, 922 },
923 fatherNameRules: [(v) => !!v || " Father Name is required"], 923 fatherNameRules: [(v) => !!v || " Father Name is required"],
924 fatheCellNoRules: [ 924 fatheCellNoRules: [
925 (v) => !!v || " father Cell Number is required", 925 (v) => !!v || " father Cell Number is required",
926 (v) => v <= 10000000000 || "Max 10 characters is required", 926 (v) => v <= 10000000000 || "Max 10 characters is required",
927 ], 927 ],
928 password: [ 928 password: [
929 (v) => !!v || "Password field is Required.", 929 (v) => !!v || "Password field is Required.",
930 // v => (/^(?=.*[a-z])(?=.*[0-9])(?=.*[!@#$%^&*])(?=.{8,})/).test(v) && v.length >= 8 || 'Min 8 characters lower case symbol required' 930 // v => (/^(?=.*[a-z])(?=.*[0-9])(?=.*[!@#$%^&*])(?=.{8,})/).test(v) && v.length >= 8 || 'Min 8 characters lower case symbol required'
931 ], 931 ],
932 editFatherNoRule: [ 932 editFatherNoRule: [
933 (v) => !!v || " father Cell Number is required", 933 (v) => !!v || " father Cell Number is required",
934 (v) => v <= 10000000000 || "Max 10 characters is required", 934 (v) => v <= 10000000000 || "Max 10 characters is required",
935 ], 935 ],
936 936
937 editfatherCellNo: [(v) => !!v || " Father Name is required"], 937 editfatherCellNo: [(v) => !!v || " Father Name is required"],
938 errorMessages: "", 938 errorMessages: "",
939 emailRules: [ 939 emailRules: [
940 (v) => !!v || "E-mail is required", 940 (v) => !!v || "E-mail is required",
941 (v) => 941 (v) =>
942 /^\w+([.-]?\w+)*@\w+([.-]?\w+)*(\.\w{2,3})+$/.test(v) || 942 /^\w+([.-]?\w+)*@\w+([.-]?\w+)*(\.\w{2,3})+$/.test(v) ||
943 "E-mail must be valid", 943 "E-mail must be valid",
944 ], 944 ],
945 mPinRules: [ 945 mPinRules: [
946 (v) => !!v || "MPIN is required", 946 (v) => !!v || "MPIN is required",
947 (v) => v <= 10000 || "Max 4 numbers are required", 947 (v) => v <= 10000 || "Max 4 numbers are required",
948 ], 948 ],
949 headers: [ 949 headers: [
950 { 950 {
951 text: "No", 951 text: "No",
952 align: "center", 952 align: "center",
953 sortable: false, 953 sortable: false,
954 value: "No", 954 value: "No",
955 }, 955 },
956 { text: "Email", value: "email", sortable: false, align: "center" }, 956 { text: "Email", value: "email", sortable: false, align: "center" },
957 { 957 {
958 text: "Father Name", 958 text: "Father Name",
959 value: "fatherName", 959 value: "fatherName",
960 sortable: false, 960 sortable: false,
961 align: "center", 961 align: "center",
962 }, 962 },
963 { 963 {
964 text: "Father Cell No", 964 text: "Father Cell No",
965 value: "fatherName", 965 value: "fatherName",
966 sortable: false, 966 sortable: false,
967 align: "center", 967 align: "center",
968 }, 968 },
969 { 969 {
970 text: "Mother Name", 970 text: "Mother Name",
971 value: "motherName", 971 value: "motherName",
972 sortable: false, 972 sortable: false,
973 align: "center", 973 align: "center",
974 }, 974 },
975 { 975 {
976 text: "Mother Cell No", 976 text: "Mother Cell No",
977 value: "motherCellNo", 977 value: "motherCellNo",
978 sortable: false, 978 sortable: false,
979 align: "center", 979 align: "center",
980 }, 980 },
981 { text: "Action", value: "", sortable: false, align: "center" }, 981 { text: "Action", value: "", sortable: false, align: "center" },
982 ], 982 ],
983 parentsList: [], 983 parentsList: [],
984 editedIndex: -1, 984 editedIndex: -1,
985 parentData: {}, 985 parentData: {},
986 max: 10, 986 max: 10,
987 editedItem: { 987 editedItem: {
988 fatherName: "", 988 fatherName: "",
989 fatherCellNo: "", 989 fatherCellNo: "",
990 motherName: "", 990 motherName: "",
991 motherCellNo: "", 991 motherCellNo: "",
992 email: "", 992 email: "",
993 password: "", 993 password: "",
994 }, 994 },
995 editMpin: { 995 editMpin: {
996 mPin: "", 996 mPin: "",
997 }, 997 },
998 isFatherCellExists: false, 998 isFatherCellExists: false,
999 }), 999 }),
1000 watch: { 1000 watch: {
1001 menu(val) { 1001 menu(val) {
1002 val && this.$nextTick(() => (this.$refs.picker.activePicker = "YEAR")); 1002 val && this.$nextTick(() => (this.$refs.picker.activePicker = "YEAR"));
1003 }, 1003 },
1004 menu1(val) { 1004 menu1(val) {
1005 val && this.$nextTick(() => (this.$refs.picker.activePicker = "YEAR")); 1005 val && this.$nextTick(() => (this.$refs.picker.activePicker = "YEAR"));
1006 }, 1006 },
1007 addParentDialog: function (val) { 1007 addParentDialog: function (val) {
1008 if (!val) { 1008 if (!val) {
1009 this.parentData = []; 1009 this.parentData = [];
1010 } 1010 }
1011 }, 1011 },
1012 }, 1012 },
1013 methods: { 1013 methods: {
1014 editItem(item) { 1014 editItem(item) {
1015 this.editedIndex = this.parentsList.indexOf(item); 1015 this.editedIndex = this.parentsList.indexOf(item);
1016 this.editedItem = Object.assign({}, item); 1016 this.editedItem = Object.assign({}, item);
1017 this.editParentDilaog = true; 1017 this.editParentDilaog = true;
1018 }, 1018 },
1019 profile(item) { 1019 profile(item) {
1020 this.editedIndex = this.parentsList.indexOf(item); 1020 this.editedIndex = this.parentsList.indexOf(item);
1021 this.editedItem = Object.assign({}, item); 1021 this.editedItem = Object.assign({}, item);
1022 this.profileParentDialog = true; 1022 this.profileParentDialog = true;
1023 }, 1023 },
1024 resetParentMPIN(item) { 1024 resetParentMPIN(item) {
1025 this.editMpin = Object.assign({}, item); 1025 this.editMpin = Object.assign({}, item);
1026 this.resetParentMpin = true; 1026 this.resetParentMpin = true;
1027 }, 1027 },
1028 close() { 1028 close() {
1029 this.editParentDilaog = false; 1029 this.editParentDilaog = false;
1030 }, 1030 },
1031 closeProfile() { 1031 closeProfile() {
1032 this.profileParentDialog = false; 1032 this.profileParentDialog = false;
1033 }, 1033 },
1034 closeReset() { 1034 closeReset() {
1035 this.resetParentMpin = false; 1035 this.resetParentMpin = false;
1036 }, 1036 },
1037 clear() { 1037 clear() {
1038 this.$refs.parentForm.reset(); 1038 this.$refs.parentForm.reset();
1039 }, 1039 },
1040 save() { 1040 save() {
1041 if (this.$refs.editParentForm.validate()) { 1041 if (this.$refs.editParentForm.validate()) {
1042 this.editedItem.parentId = this.editedItem._id; 1042 this.editedItem.parentId = this.editedItem._id;
1043 http() 1043 http()
1044 .put("/updateParent", this.editedItem) 1044 .put("/updateParent", this.editedItem)
1045 .then((response) => { 1045 .then((response) => {
1046 this.snackbar = true; 1046 this.snackbar = true;
1047 this.color = "green"; 1047 this.color = "green";
1048 this.text = response.data.message; 1048 this.text = response.data.message;
1049 this.getParentDetails(); 1049 this.getParentDetails();
1050 this.close(); 1050 this.close();
1051 }) 1051 })
1052 .catch((error) => { 1052 .catch((error) => {
1053 this.snackbar = true; 1053 this.snackbar = true;
1054 this.color = "error"; 1054 this.color = "error";
1055 this.text = error.response.data.message; 1055 this.text = error.response.data.message;
1056 if (error.response.data.statusText) { 1056 if (error.response.data.statusText) {
1057 this.text = error.response.data.statusText; 1057 this.text = error.response.data.statusText;
1058 } 1058 }
1059 }); 1059 });
1060 } 1060 }
1061 }, 1061 },
1062 resetMpin() { 1062 resetMpin() {
1063 if (this.$refs.resetParentMpinForm.validate()) { 1063 if (this.$refs.resetParentMpinForm.validate()) {
1064 var changeMpin = { 1064 var changeMpin = {
1065 parentId: this.editMpin._id, 1065 parentId: this.editMpin._id,
1066 mPin: this.editMpin.mPin, 1066 mPin: this.editMpin.mPin,
1067 }; 1067 };
1068 http() 1068 http()
1069 .put("/resetMPin", changeMpin) 1069 .put("/resetMPin", changeMpin)
1070 .then((response) => { 1070 .then((response) => {
1071 this.snackbar = true; 1071 this.snackbar = true;
1072 this.color = "green"; 1072 this.color = "green";
1073 this.text = response.data.message; 1073 this.text = response.data.message;
1074 this.getParentDetails(); 1074 this.getParentDetails();
1075 this.resetParentMpin = false; 1075 this.resetParentMpin = false;
1076 this.closeReset(); 1076 this.closeReset();
1077 }) 1077 })
1078 .catch((error) => { 1078 .catch((error) => {
1079 this.snackbar = true; 1079 this.snackbar = true;
1080 this.color = "error"; 1080 this.color = "error";
1081 this.text = error.response.data.message; 1081 this.text = error.response.data.message;
1082 if (error.response.data.statusText) { 1082 if (error.response.data.statusText) {
1083 this.text = error.response.data.statusText; 1083 this.text = error.response.data.statusText;
1084 } 1084 }
1085 }); 1085 });
1086 } 1086 }
1087 }, 1087 },
1088 async submitParentDetails() { 1088 async submitParentDetails() {
1089 if (this.$refs.parentForm.validate()) { 1089 if (this.$refs.parentForm.validate()) {
1090 this.parentData.role = "PARENT"; 1090 this.parentData.role = "PARENT";
1091 this.loading = true; 1091 this.loading = true;
1092 await http() 1092 await http()
1093 .post("/createParent", this.parentData) 1093 .post("/createParent", this.parentData)
1094 .then((response) => { 1094 .then((response) => {
1095 this.parentId = response.data.data.id; 1095 this.parentId = response.data.data.id;
1096 this.snackbar = true; 1096 this.snackbar = true;
1097 this.color = "green"; 1097 this.color = "green";
1098 this.text = response.data.message; 1098 this.text = response.data.message;
1099 this.getParentDetails(); 1099 this.getParentDetails();
1100 this.clear(); 1100 this.clear();
1101 this.loading = false; 1101 this.loading = false;
1102 this.isFatherCellExists = true; 1102 this.isFatherCellExists = true;
1103 this.addParentDialog = false; 1103 this.addParentDialog = false;
1104 }) 1104 })
1105 .catch((error) => { 1105 .catch((error) => {
1106 this.snackbar = true; 1106 this.snackbar = true;
1107 this.color = "error"; 1107 this.color = "error";
1108 this.text = error.response.data.message; 1108 this.text = error.response.data.message;
1109 if (error.response.data.statusText) { 1109 if (error.response.data.statusText) {
1110 this.text = error.response.data.statusText; 1110 this.text = error.response.data.statusText;
1111 } 1111 }
1112 this.loading = false; 1112 this.loading = false;
1113 }); 1113 });
1114 } 1114 }
1115 }, 1115 },
1116 getParentDetails() { 1116 getParentDetails() {
1117 http() 1117 http()
1118 .get("getParentsList", { 1118 .get("getParentsList", {
1119 headers: { 1119 headers: {
1120 Authorization: "Bearer " + this.$store.state.token, 1120 Authorization: "Bearer " + this.$store.state.token,
1121 }, 1121 },
1122 }) 1122 })
1123 .then((response) => { 1123 .then((response) => {
1124 this.parentsList = response.data.data; 1124 this.parentsList = response.data.data;
1125 }) 1125 })
1126 .catch((error) => { 1126 .catch((error) => {
1127 // console.log("err====>", error.response.data.message); 1127 // console.log("err====>", error.response.data.message);
1128 this.showLoader = false; 1128 this.showLoader = false;
1129 if (error.response.status === 401) { 1129 if (error.response.status === 401) {
1130 this.$router.replace({ path: "/" }); 1130 this.$router.replace({ path: "/" });
1131 this.$store.dispatch("setToken", null); 1131 this.$store.dispatch("setToken", null);
1132 this.$store.dispatch("Id", null); 1132 this.$store.dispatch("Id", null);
1133 this.$store.dispatch("Role", null); 1133 this.$store.dispatch("Role", null);
1134 } 1134 }
1135 }); 1135 });
1136 }, 1136 },
1137 displaySearch() { 1137 displaySearch() {
1138 this.show = false; 1138 this.show = false;
1139 this.showSearch = true; 1139 this.showSearch = true;
1140 // this.$refs.searchField.focus() 1140 // this.$refs.searchField.focus()
1141 }, 1141 },
1142 closeSearch() { 1142 closeSearch() {
1143 this.showSearch = false; 1143 this.showSearch = false;
1144 this.show = true; 1144 this.show = true;
1145 this.search = ""; 1145 this.search = "";
1146 }, 1146 },
1147 }, 1147 },
1148 mounted() { 1148 mounted() {
1149 this.getParentDetails(); 1149 this.getParentDetails();
1150 // console.log("role", this.$store.state.role); 1150 // console.log("role", this.$store.state.role);
1151 this.role = this.$store.state.role; 1151 this.role = this.$store.state.role;
1152 }, 1152 },
1153 }; 1153 };
1154 </script> 1154 </script>
src/pages/Payroll/hourlyTemplate.vue
Diff comments   View file @8b7976c
1 <template> 1 <template>
2 <v-container fluid class="body-color"> 2 <v-container fluid class="body-color">
3 <!-- ****** Edit Hourly Template ****** --> 3 <!-- ****** Edit Hourly Template ****** -->
4 <v-dialog v-model="editHourDialog" max-width="400px" persistent> 4 <v-dialog v-model="editHourDialog" max-width="400px" persistent>
5 <v-card flat class="card-style pa-2" dark> 5 <v-card flat class="card-style pa-2" dark>
6 <v-layout> 6 <v-layout>
7 <v-flex xs12> 7 <v-flex xs12>
8 <label class="title text-xs-center">Edit Hourly Template</label> 8 <label class="title text-xs-center">Edit Hourly Template</label>
9 <v-icon size="24" class="right" @click="editHourDialog = false">cancel</v-icon> 9 <v-icon size="24" class="right" @click="editHourDialog = false">cancel</v-icon>
10 </v-flex> 10 </v-flex>
11 </v-layout> 11 </v-layout>
12 <v-form ref="form"> 12 <v-form ref="form">
13 <v-container fluid> 13 <v-container fluid>
14 <v-flex xs12 sm12> 14 <v-flex xs12 sm12>
15 <v-layout> 15 <v-layout>
16 <v-flex xs3 class="pt-4 subheading"> 16 <v-flex xs3 class="pt-4 subheading">
17 <label class="right">Hourly Grades:</label> 17 <label class="right">Hourly Grades:</label>
18 </v-flex> 18 </v-flex>
19 <v-flex xs8 sm7 class="ml-3"> 19 <v-flex xs8 sm7 class="ml-3">
20 <v-text-field 20 <v-text-field
21 v-model="editedItem.hourlyGrades" 21 v-model="editedItem.hourlyGrades"
22 placeholder="please fill this field" 22 placeholder="please fill this field"
23 ></v-text-field> 23 ></v-text-field>
24 </v-flex> 24 </v-flex>
25 </v-layout> 25 </v-layout>
26 </v-flex> 26 </v-flex>
27 <v-flex xs12 sm12> 27 <v-flex xs12 sm12>
28 <v-layout> 28 <v-layout>
29 <v-flex xs3 class="pt-4 subheading"> 29 <v-flex xs3 class="pt-4 subheading">
30 <label class="right">Hourly Reates:</label> 30 <label class="right">Hourly Reates:</label>
31 </v-flex> 31 </v-flex>
32 <v-flex xs8 sm7 class="ml-3"> 32 <v-flex xs8 sm7 class="ml-3">
33 <v-text-field 33 <v-text-field
34 v-model="editedItem.hourlyRate" 34 v-model="editedItem.hourlyRate"
35 placeholder="please fill this field" 35 placeholder="please fill this field"
36 ></v-text-field> 36 ></v-text-field>
37 </v-flex> 37 </v-flex>
38 </v-layout> 38 </v-layout>
39 </v-flex> 39 </v-flex>
40 <v-layout> 40 <v-layout>
41 <v-flex xs12> 41 <v-flex xs12>
42 <v-layout> 42 <v-layout>
43 <v-spacer></v-spacer> 43 <v-spacer></v-spacer>
44 <v-btn round dark @click="save" class="add-button">Update Hourly Template</v-btn> 44 <v-btn round dark @click="save" class="add-button">Update Hourly Template</v-btn>
45 <v-spacer></v-spacer> 45 <v-spacer></v-spacer>
46 </v-layout> 46 </v-layout>
47 </v-flex> 47 </v-flex>
48 </v-layout> 48 </v-layout>
49 </v-container> 49 </v-container>
50 </v-form> 50 </v-form>
51 </v-card> 51 </v-card>
52 </v-dialog> 52 </v-dialog>
53 53
54 <!-- **** HOURLY TEMPLATE **** --> 54 <!-- **** HOURLY TEMPLATE **** -->
55 <v-toolbar color="transparent" flat> 55 <v-toolbar color="transparent" flat>
56 <v-btn 56 <v-btn
57 fab 57 fab
58 dark 58 dark
59 class="open-dialog-button hidden-xl-only hidden-md-only hidden-lg-only" 59 class="open-dialog-button hidden-xl-only hidden-md-only hidden-lg-only"
60 small 60 small
61 @click="addHourDialog = true" 61 @click="addHourDialog = true"
62 > 62 >
63 <v-icon dark>add</v-icon> 63 <v-icon dark>add</v-icon>
64 </v-btn> 64 </v-btn>
65 <v-btn 65 <v-btn
66 round 66 round
67 class="open-dialog-button hidden-sm-only hidden-xs-only" 67 class="open-dialog-button hidden-sm-only hidden-xs-only"
68 dark 68 dark
69 @click="addHourDialog = true" 69 @click="addHourDialog = true"
70 > 70 >
71 <v-icon class="white--text pr-1" size="20">add</v-icon>Add Hourly Template 71 <v-icon class="white--text pr-1" size="20">add</v-icon>Add Hourly Template
72 </v-btn> 72 </v-btn>
73 <v-spacer></v-spacer> 73 <v-spacer></v-spacer>
74 <v-card-title class="body-1" v-show="show"> 74 <v-card-title class="body-1" v-show="show">
75 <v-btn icon large flat @click="displaySearch"> 75 <v-btn icon large flat @click="displaySearch">
76 <v-avatar size="27"> 76 <v-avatar size="27">
77 <img src="/static/icon/search.png" alt="icon" /> 77 <img src="/static/icon/search.png" alt="icon" />
78 </v-avatar> 78 </v-avatar>
79 </v-btn> 79 </v-btn>
80 </v-card-title> 80 </v-card-title>
81 <v-flex xs8 sm8 md3 lg2 v-if="showSearch"> 81 <v-flex xs8 sm8 md3 lg2 v-if="showSearch">
82 <v-layout> 82 <v-layout>
83 <v-text-field 83 <v-text-field
84 autofocus 84 autofocus
85 v-model="search" 85 v-model="search"
86 label="Search" 86 label="Search"
87 prepend-inner-icon="search" 87 prepend-inner-icon="search"
88 color="primary" 88 color="primary"
89 ></v-text-field> 89 ></v-text-field>
90 <v-icon @click="closeSearch" color="error">close</v-icon> 90 <v-icon @click="closeSearch" color="error">close</v-icon>
91 </v-layout> 91 </v-layout>
92 </v-flex> 92 </v-flex>
93 </v-toolbar> 93 </v-toolbar>
94 94
95 <v-data-table 95 <v-data-table
96 :headers="headers" 96 :headers="headers"
97 :items="hourlyData" 97 :items="hourlyData"
98 :pagination.sync="pagination" 98 :pagination.sync="pagination"
99 :search="search" 99 :search="search"
100 > 100 >
101 <template slot="items" slot-scope="props"> 101 <template slot="items" slot-scope="props">
102 <tr class="tr"> 102 <tr class="tr">
103 <td class="td td-row">{{ props.index + 1}}</td> 103 <td class="td td-row">{{ props.index + 1}}</td>
104 <td class="td td-row text-xs-center">{{ props.item.hourlyGrades}}</td> 104 <td class="td td-row text-xs-center">{{ props.item.hourlyGrades}}</td>
105 <td class="td td-row text-xs-center">{{ props.item.hourlyRate}}</td> 105 <td class="td td-row text-xs-center">{{ props.item.hourlyRate}}</td>
106 <!-- <td class="td td-row text-xs-center">{{ props.item.overtimeRate}}</td> --> 106 <!-- <td class="td td-row text-xs-center">{{ props.item.overtimeRate}}</td> -->
107 <td class="td td-row text-xs-center"> 107 <td class="td td-row text-xs-center">
108 <span> 108 <span>
109 <v-tooltip top> 109 <v-tooltip top>
110 <img 110 <img
111 slot="activator" 111 slot="activator"
112 style="cursor:pointer; width:20px; height:18px; " 112 style="cursor:pointer; width:20px; height:18px; "
113 class="mr-3" 113 class="mr-3"
114 @click="editItem(props.item)" 114 @click="editItem(props.item)"
115 src="/static/icon/edit.png" 115 src="/static/icon/edit.png"
116 /> 116 />
117 <span>Edit</span> 117 <span>Edit</span>
118 </v-tooltip> 118 </v-tooltip>
119 <v-tooltip top> 119 <v-tooltip top>
120 <img 120 <img
121 slot="activator" 121 slot="activator"
122 style="cursor:pointer; width:20px; height:20px; " 122 style="cursor:pointer; width:20px; height:20px; "
123 class="mr-3" 123 class="mr-3"
124 @click="deleteItem(props.item)" 124 @click="deleteItem(props.item)"
125 src="/static/icon/delete.png" 125 src="/static/icon/delete.png"
126 /> 126 />
127 <span>Delete</span> 127 <span>Delete</span>
128 </v-tooltip> 128 </v-tooltip>
129 </span> 129 </span>
130 </td> 130 </td>
131 </tr> 131 </tr>
132 </template> 132 </template>
133 <v-alert 133 <v-alert
134 slot="no-results" 134 slot="no-results"
135 :value="true" 135 :value="true"
136 color="error" 136 color="error"
137 icon="warning" 137 icon="warning"
138 >Your search for "{{ search }}" found no results.</v-alert> 138 >Your search for "{{ search }}" found no results.</v-alert>
139 </v-data-table> 139 </v-data-table>
140 140
141 <!-- **** Add Hourly Template **** --> 141 <!-- **** Add Hourly Template **** -->
142 <v-dialog v-model="addHourDialog" max-width="400px" v-if="addHourDialog" persistent> 142 <v-dialog v-model="addHourDialog" max-width="400px" v-if="addHourDialog" persistent>
143 <v-card flat class="card-style pa-2" dark> 143 <v-card flat class="card-style pa-2" dark>
144 <v-layout> 144 <v-layout>
145 <v-flex xs12> 145 <v-flex xs12>
146 <label class="title text-xs-center">Add Hourly Template</label> 146 <label class="title text-xs-center">Add Hourly Template</label>
147 <v-icon size="24" class="right" @click="closeAddHourModel">cancel</v-icon> 147 <v-icon size="24" class="right" @click="closeAddHourModel">cancel</v-icon>
148 </v-flex> 148 </v-flex>
149 </v-layout> 149 </v-layout>
150 <v-form ref="form" v-model="valid" lazy-validation> 150 <v-form ref="form" v-model="valid" lazy-validation>
151 <v-container fluid> 151 <v-container fluid>
152 <v-flex xs12> 152 <v-flex xs12>
153 <v-layout> 153 <v-layout>
154 <v-flex xs4 class="pt-4 subheading"> 154 <v-flex xs4 class="pt-4 subheading">
155 <label class="right">Hourly Grades:</label> 155 <label class="right">Hourly Grades:</label>
156 </v-flex> 156 </v-flex>
157 <v-flex xs8 sm7 class="ml-3"> 157 <v-flex xs8 sm7 class="ml-3">
158 <v-text-field 158 <v-text-field
159 placeholder="Please fill this field" 159 placeholder="Please fill this field"
160 :rules="hourRules" 160 :rules="hourRules"
161 v-model="hourlyTypes.hourlyGrades" 161 v-model="hourlyTypes.hourlyGrades"
162 ></v-text-field> 162 ></v-text-field>
163 </v-flex> 163 </v-flex>
164 </v-layout> 164 </v-layout>
165 </v-flex> 165 </v-flex>
166 <v-flex xs12> 166 <v-flex xs12>
167 <v-layout> 167 <v-layout>
168 <v-flex xs4 class="pt-4 subheading"> 168 <v-flex xs4 class="pt-4 subheading">
169 <label class="right">Hourly Rate:</label> 169 <label class="right">Hourly Rate:</label>
170 </v-flex> 170 </v-flex>
171 <v-flex xs8 sm7 class="ml-3"> 171 <v-flex xs8 sm7 class="ml-3">
172 <v-text-field 172 <v-text-field
173 placeholder="Please fill this field" 173 placeholder="Please fill this field"
174 :rules="hourRules" 174 :rules="hourRules"
175 v-model="hourlyTypes.hourlyRate" 175 v-model="hourlyTypes.hourlyRate"
176 ></v-text-field> 176 ></v-text-field>
177 </v-flex> 177 </v-flex>
178 </v-layout> 178 </v-layout>
179 </v-flex> 179 </v-flex>
180 <v-layout> 180 <v-layout>
181 <v-flex xs12 sm12> 181 <v-flex xs12 sm12>
182 <v-layout> 182 <v-layout>
183 <v-spacer></v-spacer> 183 <v-spacer></v-spacer>
184 <!-- <v-btn @click="clear" round class="add-button" dark>clear</v-btn> --> 184 <!-- <v-btn @click="clear" round class="add-button" dark>clear</v-btn> -->
185 <v-btn 185 <v-btn
186 @click="submit" 186 @click="submit"
187 round 187 round
188 dark 188 dark
189 :loading="loading" 189 :loading="loading"
190 class="add-button" 190 class="add-button"
191 >Add Hourly Template</v-btn> 191 >Add Hourly Template</v-btn>
192 <v-spacer></v-spacer> 192 <v-spacer></v-spacer>
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-form> 197 </v-form>
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="color" 207 :color="color"
208 >{{ text }}</v-snackbar> 208 >{{ text }}</v-snackbar>
209 <div class="loader" v-if="showLoader"> 209 <div class="loader" v-if="showLoader">
210 <v-progress-circular indeterminate color="white"></v-progress-circular> 210 <v-progress-circular indeterminate color="white"></v-progress-circular>
211 </div> 211 </div>
212 </v-container> 212 </v-container>
213 </template> 213 </template>
214 214
215 <script> 215 <script>
216 import http from "@/Services/http.js"; 216 import http from "@/Services/http.js";
217 import moment from "moment"; 217 import moment from "moment";
218 218
219 export default { 219 export default {
220 data: () => ({ 220 data: () => ({
221 snackbar: false, 221 snackbar: false,
222 date: null, 222 date: null,
223 color: "", 223 color: "",
224 y: "top", 224 y: "top",
225 x: "right", 225 x: "right",
226 mode: "", 226 mode: "",
227 timeout: 10000, 227 timeout: 10000,
228 text: "", 228 text: "",
229 show: true, 229 show: true,
230 showSearch: false, 230 showSearch: false,
231 addHourDialog: false, 231 addHourDialog: false,
232 loading: false, 232 loading: false,
233 loadingSearch: false, 233 loadingSearch: false,
234 search: "", 234 search: "",
235 showLoader: false, 235 showLoader: false,
236 editHourDialog: false, 236 editHourDialog: false,
237 valid: true, 237 valid: true,
238 disabled: true, 238 disabled: true,
239 pagination: { 239 pagination: {
240 rowsPerPage: 10, 240 rowsPerPage: 10,
241 }, 241 },
242 hourRules: [(v) => !!v || "Field is required"], 242 hourRules: [(v) => !!v || "Field is required"],
243 243
244 headers: [ 244 headers: [
245 { 245 {
246 align: "", 246 align: "",
247 text: "No", 247 text: "No",
248 sortable: false, 248 sortable: false,
249 value: "No", 249 value: "No",
250 }, 250 },
251 { 251 {
252 text: "Hourly Grades", 252 text: "Hourly Grades",
253 value: "hourlyGrades", 253 value: "hourlyGrades",
254 sortable: false, 254 sortable: false,
255 align: "center", 255 align: "center",
256 }, 256 },
257 { 257 {
258 text: "Hourly Rate", 258 text: "Hourly Rate",
259 value: "hourlyRate", 259 value: "hourlyRate",
260 sortable: false, 260 sortable: false,
261 align: "center", 261 align: "center",
262 }, 262 },
263 { text: "Action", value: "", sortable: false, align: "center" }, 263 { text: "Action", value: "", sortable: false, align: "center" },
264 ], 264 ],
265 hourlyTypes: [], 265 hourlyTypes: [],
266 hourlyData: [], 266 hourlyData: [],
267 editedItem: {}, 267 editedItem: {},
268 }), 268 }),
269 watch: { 269 watch: {
270 addHourDialog: function (val) { 270 addHourDialog: function (val) {
271 if (!val) { 271 if (!val) {
272 this.hourlyTypes = []; 272 this.hourlyTypes = [];
273 } 273 }
274 }, 274 },
275 }, 275 },
276 methods: { 276 methods: {
277 close() { 277 close() {
278 this.editHourDialog = false; 278 this.editHourDialog = false;
279 }, 279 },
280 closeAddHourModel() { 280 closeAddHourModel() {
281 this.addHourDialog = false; 281 this.addHourDialog = false;
282 // this.hourlyData = []; 282 // this.hourlyData = [];
283 this.hourlyTypes = []; 283 this.hourlyTypes = [];
284 }, 284 },
285 submit() { 285 submit() {
286 var Hour = { 286 var Hour = {
287 hourlyGrades: this.hourlyTypes.hourlyGrades, 287 hourlyGrades: this.hourlyTypes.hourlyGrades,
288 hourlyRate: this.hourlyTypes.hourlyRate, 288 hourlyRate: this.hourlyTypes.hourlyRate,
289 }; 289 };
290 if (this.$refs.form.validate()) { 290 if (this.$refs.form.validate()) {
291 this.loading = true; 291 this.loading = true;
292 http() 292 http()
293 .post("/createHourly", Hour, { 293 .post("/createHourly", Hour, {
294 headers: { Authorization: "Bearer " + this.token }, 294 headers: { Authorization: "Bearer " + this.token },
295 }) 295 })
296 .then((response) => { 296 .then((response) => {
297 this.snackbar = true; 297 this.snackbar = true;
298 this.text = response.data.message; 298 this.text = response.data.message;
299 this.getHourlyList(); 299 this.getHourlyList();
300 this.color = "green"; 300 this.color = "green";
301 this.addHourDialog = false; 301 this.addHourDialog = false;
302 // this.color = "success"; 302 // this.color = "success";
303 this.clear(); 303 this.clear();
304 this.loading = false; 304 this.loading = false;
305 }) 305 })
306 .catch((error) => { 306 .catch((error) => {
307 // console.log("error", error); 307 // console.log("error", error);
308 this.snackbar = true; 308 this.snackbar = true;
309 this.color = "red"; 309 this.color = "red";
310 // this.text = error.response.data.message; 310 // this.text = error.response.data.message;
311 this.loading = false; 311 this.loading = false;
312 }); 312 });
313 } 313 }
314 }, 314 },
315 getHourlyList() { 315 getHourlyList() {
316 this.showLoader = true; 316 this.showLoader = true;
317 this.loadingSearch = true; 317 this.loadingSearch = true;
318 http() 318 http()
319 .get("/getHourlyList", { 319 .get("/getHourlyList", {
320 headers: { Authorization: "Bearer " + this.token }, 320 headers: { Authorization: "Bearer " + this.token },
321 }) 321 })
322 .then((response) => { 322 .then((response) => {
323 this.hourlyData = response.data.data; 323 this.hourlyData = response.data.data;
324 this.showLoader = false; 324 this.showLoader = false;
325 this.loadingSearch = false; 325 this.loadingSearch = false;
326 }) 326 })
327 .catch((error) => { 327 .catch((error) => {
328 // console.log("err====>", err); 328 // console.log("err====>", err);
329 this.showLoader = false; 329 this.showLoader = false;
330 this.loadingSearch = false; 330 this.loadingSearch = false;
331 this.snackbar = true; 331 this.snackbar = true;
332 this.text = error.response.data.message; 332 this.text = error.response.data.message;
333 if (error.response.status === 401) { 333 if (error.response.status === 401) {
334 this.$router.replace({ path: "/" }); 334 this.$router.replace({ path: "/" });
335 this.$store.dispatch("setToken", null); 335 this.$store.dispatch("setToken", null);
336 this.$store.dispatch("Id", null); 336 this.$store.dispatch("Id", null);
337 } 337 }
338 }); 338 });
339 }, 339 },
340 340
341 editItem(item) { 341 editItem(item) {
342 this.editedIndex = this.hourlyData.indexOf(item); 342 this.editedIndex = this.hourlyData.indexOf(item);
343 this.editedItem = Object.assign({}, item); 343 this.editedItem = Object.assign({}, item);
344 this.editHourDialog = true; 344 this.editHourDialog = true;
345 }, 345 },
346 deleteItem(item) { 346 deleteItem(item) {
347 let deleteGrade = { 347 let deleteGrade = {
348 hourlyId: item._id, 348 hourlyId: item._id,
349 }; 349 };
350 http() 350 http()
351 .delete( 351 .delete(
352 "/deleteHourly", 352 "/deleteHourly",
353 confirm("Are you sure you want to delete this?") && { 353 confirm("Are you sure you want to delete this?") && {
354 params: deleteGrade, 354 params: deleteGrade,
355 }, 355 },
356 { 356 {
357 headers: { 357 headers: {
358 Authorization: "Bearer " + this.token, 358 Authorization: "Bearer " + this.token,
359 }, 359 },
360 } 360 }
361 ) 361 )
362 .then((response) => { 362 .then((response) => {
363 this.snackbar = true; 363 this.snackbar = true;
364 // this.text = "Successfully Delete Salary "; 364 // this.text = "Successfully Delete Salary ";
365 this.text = response.data.message; 365 this.text = response.data.message;
366 this.color = "green"; 366 this.color = "green";
367 this.getHourlyList(); 367 this.getHourlyList();
368 }) 368 })
369 .catch((error) => { 369 .catch((error) => {
370 // console.log("error", error); 370 // console.log("error", error);
371 this.snackbar = true; 371 this.snackbar = true;
372 this.text = error.response.data.message; 372 this.text = error.response.data.message;
373 this.color = "red"; 373 this.color = "red";
374 }); 374 });
375 }, 375 },
376 376
377 save() { 377 save() {
378 var updateHourly = { 378 var updateHourly = {
379 hourlyId: this.editedItem._id, 379 hourlyId: this.editedItem._id,
380 hourlyGrades: this.editedItem.hourlyGrades, 380 hourlyGrades: this.editedItem.hourlyGrades,
381 hourlyRate: this.editedItem.hourlyRate, 381 hourlyRate: this.editedItem.hourlyRate,
382 }; 382 };
383 http() 383 http()
384 .put("/updateHourly", updateHourly, { 384 .put("/updateHourly", updateHourly, {
385 headers: { 385 headers: {
386 Authorization: "Bearer " + this.token, 386 Authorization: "Bearer " + this.token,
387 }, 387 },
388 }) 388 })
389 .then((response) => { 389 .then((response) => {
390 // this.text = "Successfully Edit Notification"; 390 // this.text = "Successfully Edit Notification";
391 this.getHourlyList(); 391 this.getHourlyList();
392 this.close(); 392 this.close();
393 this.snackbar = true; 393 this.snackbar = true;
394 this.text = response.data.message; 394 this.text = response.data.message;
395 this.color = "green"; 395 this.color = "green";
396 this.editHourDialog = false; 396 this.editHourDialog = false;
397 }) 397 })
398 .catch((error) => { 398 .catch((error) => {
399 // console.log("error", error); 399 // console.log("error", error);
400 this.snackbar = true; 400 this.snackbar = true;
401 // this.text = error.response.data.message; 401 // this.text = error.response.data.message;
402 this.snackbar = true; 402 this.snackbar = true;
403 this.color = "error";
404 this.text = error.response.data.message;
403 this.color = "error"; 405 });
404 this.text = error.response.data.message; 406 },
405 }); 407
406 }, 408 displaySearch() {
407 409 (this.show = false), (this.showSearch = true);
408 displaySearch() { 410 },
409 (this.show = false), (this.showSearch = true); 411 closeSearch() {
410 }, 412 this.showSearch = false;
411 closeSearch() { 413 this.show = true;
412 this.showSearch = false; 414 this.search = "";
413 this.show = true; 415 },
414 this.search = ""; 416 clear() {
415 }, 417 this.$refs.form.reset();
416 clear() { 418 },
417 this.$refs.form.reset(); 419 },
418 }, 420 mounted() {
419 }, 421 this.token = this.$store.state.token;
420 mounted() { 422 this.getHourlyList();
421 this.token = this.$store.state.token; 423 },
422 this.getHourlyList(); 424 };
423 }, 425 </script>
424 }; 426
425 </script> 427 <style scoped>
426 428 </style>
src/pages/Payroll/manageSalary.vue
Diff comments   View file @8b7976c
1 <template> 1 <template>
2 <v-container fluid class="body-color"> 2 <v-container fluid class="body-color">
3 <v-layout wrap> 3 <v-layout wrap>
4 <v-flex xs12 sm6> 4 <v-flex xs12 sm6>
5 <v-layout> 5 <v-layout>
6 <v-flex xs4 class="pt-4 subheading"> 6 <v-flex xs4 class="pt-4 subheading">
7 <label class="right hidden-sm-only hidden-xs-only">Role:</label> 7 <label class="right hidden-sm-only hidden-xs-only">Role:</label>
8 <label class="right hidden-lg-only hidden-xl-only hidden-md-only">Role:</label> 8 <label class="right hidden-lg-only hidden-xl-only hidden-md-only">Role:</label>
9 </v-flex> 9 </v-flex>
10 <v-flex xs8 class="ml-3"> 10 <v-flex xs8 class="ml-3">
11 <v-autocomplete 11 <v-autocomplete
12 v-model="getReport.role" 12 v-model="getReport.role"
13 :rules="role" 13 :rules="role"
14 :items="getRoles" 14 :items="getRoles"
15 item-text="name" 15 item-text="name"
16 item-value="role" 16 item-value="role"
17 placeholder="Select Role" 17 placeholder="Select Role"
18 @change="getUserDetailWithRoles" 18 @change="getUserDetailWithRoles"
19 required 19 required
20 ></v-autocomplete> 20 ></v-autocomplete>
21 </v-flex> 21 </v-flex>
22 </v-layout> 22 </v-layout>
23 </v-flex> 23 </v-flex>
24 </v-layout> 24 </v-layout>
25 25
26 <!-- *** Salary Data *** --> 26 <!-- *** Salary Data *** -->
27 <v-data-table 27 <v-data-table
28 :headers="headers" 28 :headers="headers"
29 :items="roleList" 29 :items="roleList"
30 :pagination.sync="pagination" 30 :pagination.sync="pagination"
31 :search="search" 31 :search="search"
32 > 32 >
33 <template slot="items" slot-scope="props"> 33 <template slot="items" slot-scope="props">
34 <tr class="tr"> 34 <tr class="tr">
35 <td class="td td-row">{{ props.index + 1}}</td> 35 <td class="td td-row">{{ props.index + 1}}</td>
36 <td class="td td-row text-xs-center"> 36 <td class="td td-row text-xs-center">
37 <v-avatar size="40"> 37 <v-avatar size="40">
38 <img :src="props.item.profilePicUrl" v-if="props.item.profilePicUrl" /> 38 <img :src="props.item.profilePicUrl" v-if="props.item.profilePicUrl" />
39 <img src="/static/icon/user.png" v-else-if="!props.item.profilePicUrl" /> 39 <img src="/static/icon/user.png" v-else-if="!props.item.profilePicUrl" />
40 </v-avatar> 40 </v-avatar>
41 </td> 41 </td>
42 <td class="td td-row text-xs-center">{{ props.item.name}}</td> 42 <td class="td td-row text-xs-center">{{ props.item.name}}</td>
43 <td class="td td-row text-xs-center">{{ dates(props.item.joinDate)}}</td> 43 <td class="td td-row text-xs-center">{{ dates(props.item.joinDate)}}</td>
44 <td class="text-xs-center td td-row"> 44 <td class="text-xs-center td td-row">
45 <span> 45 <span>
46 <v-tooltip top> 46 <v-tooltip top>
47 <img 47 <img
48 slot="activator" 48 slot="activator"
49 style="cursor:pointer; width:25px; height:25px; " 49 style="cursor:pointer; width:25px; height:25px; "
50 class="mr-3" 50 class="mr-3"
51 @click="profile(props.item)" 51 @click="profile(props.item)"
52 src="/static/icon/view.png" 52 src="/static/icon/view.png"
53 /> 53 />
54 <span>View</span> 54 <span>View</span>
55 </v-tooltip> 55 </v-tooltip>
56 <v-tooltip top> 56 <v-tooltip top>
57 <img 57 <img
58 slot="activator" 58 slot="activator"
59 style="cursor:pointer; width:20px; height:18px; " 59 style="cursor:pointer; width:20px; height:18px; "
60 class="mr-3" 60 class="mr-3"
61 @click="editItem(props.item)" 61 @click="editItem(props.item)"
62 src="/static/icon/edit.png" 62 src="/static/icon/edit.png"
63 /> 63 />
64 <span>Edit</span> 64 <span>Edit</span>
65 </v-tooltip> 65 </v-tooltip>
66 <v-tooltip top> 66 <v-tooltip top>
67 <img 67 <img
68 slot="activator" 68 slot="activator"
69 style="cursor:pointer; width:20px; height:20px; " 69 style="cursor:pointer; width:20px; height:20px; "
70 @click="deleteItem(props.item)" 70 @click="deleteItem(props.item)"
71 src="/static/icon/delete.png" 71 src="/static/icon/delete.png"
72 class="mr-3" 72 class="mr-3"
73 /> 73 />
74 <span>Delete</span> 74 <span>Delete</span>
75 </v-tooltip> 75 </v-tooltip>
76 </span> 76 </span>
77 </td> 77 </td>
78 </tr> 78 </tr>
79 </template> 79 </template>
80 <v-alert 80 <v-alert
81 slot="no-results" 81 slot="no-results"
82 :value="true" 82 :value="true"
83 color="error" 83 color="error"
84 icon="warning" 84 icon="warning"
85 >Your search for "{{ search }}" found no results.</v-alert> 85 >Your search for "{{ search }}" found no results.</v-alert>
86 </v-data-table> 86 </v-data-table>
87 87
88 <!-- ****** PROFILE VIEW ****** --> 88 <!-- ****** PROFILE VIEW ****** -->
89 89
90 <v-dialog v-model="profileSalaryDialog" persistent> 90 <v-dialog v-model="profileSalaryDialog" persistent>
91 <v-card flat class="text-xs-center white--text"> 91 <v-card flat class="text-xs-center white--text">
92 <v-layout> 92 <v-layout>
93 <v-flex xs12 class="card-style pa-2"> 93 <v-flex xs12 class="card-style pa-2">
94 <label class="title text-xs-center">View Manage Salary</label> 94 <label class="title text-xs-center">View Manage Salary</label>
95 <v-icon 95 <v-icon
96 size="24" 96 size="24"
97 color="white" 97 color="white"
98 class="right" 98 class="right"
99 @click="profileSalaryDialog = false" 99 @click="profileSalaryDialog = false"
100 >cancel</v-icon> 100 >cancel</v-icon>
101 </v-flex> 101 </v-flex>
102 </v-layout> 102 </v-layout>
103 <v-layout wrap> 103 <v-layout wrap>
104 <v-flex xs12 sm12 md4> 104 <v-flex xs12 sm12 md4>
105 <v-card flat> 105 <v-card flat>
106 <h3 class="py-2 text-xs-center card-style white--text">Profile</h3> 106 <h3 class="py-2 text-xs-center card-style white--text">Profile</h3>
107 <v-card-text> 107 <v-card-text>
108 <v-container> 108 <v-container>
109 <v-layout wrap> 109 <v-layout wrap>
110 <v-flex xs12> 110 <v-flex xs12>
111 <v-layout> 111 <v-layout>
112 <v-flex 112 <v-flex
113 xs12 113 xs12
114 class="text-xs-center text-sm-center text-md-center text-lg-center" 114 class="text-xs-center text-sm-center text-md-center text-lg-center"
115 > 115 >
116 <v-avatar size="80px"> 116 <v-avatar size="80px">
117 <img src="/static/icon/user.png" v-if="!editedItem.profilePicUrl" /> 117 <img src="/static/icon/user.png" v-if="!editedItem.profilePicUrl" />
118 <img 118 <img
119 :src="editedItem.profilePicUrl" 119 :src="editedItem.profilePicUrl"
120 v-else-if="editedItem.profilePicUrl" 120 v-else-if="editedItem.profilePicUrl"
121 /> 121 />
122 </v-avatar> 122 </v-avatar>
123 </v-flex> 123 </v-flex>
124 </v-layout> 124 </v-layout>
125 <v-layout> 125 <v-layout>
126 <v-flex xs12 sm12> 126 <v-flex xs12 sm12>
127 <h3 class="text-xs-center"> 127 <h3 class="text-xs-center">
128 <b>{{ editedItem.name }}</b> 128 <b>{{ editedItem.name }}</b>
129 </h3> 129 </h3>
130 <p class="text-xs-center grey--text">{{ editedItem.roleName }}</p> 130 <p class="text-xs-center grey--text">{{ editedItem.roleName }}</p>
131 </v-flex> 131 </v-flex>
132 </v-layout> 132 </v-layout>
133 <v-layout style="border: 1px solid lightgrey;"> 133 <v-layout style="border: 1px solid lightgrey;">
134 <v-flex xs6 sm6 class="pa-0"> 134 <v-flex xs6 sm6 class="pa-0">
135 <h4 class="right"> 135 <h4 class="right">
136 <b>Join Date :</b> 136 <b>Join Date :</b>
137 </h4> 137 </h4>
138 </v-flex> 138 </v-flex>
139 <v-flex sm6 xs6 class="pa-0"> 139 <v-flex sm6 xs6 class="pa-0">
140 <h4>{{ editedItem.joinDate }}</h4> 140 <h4>{{ editedItem.joinDate }}</h4>
141 </v-flex> 141 </v-flex>
142 </v-layout> 142 </v-layout>
143 <v-layout style="border: 1px solid lightgrey;"> 143 <v-layout style="border: 1px solid lightgrey;">
144 <v-flex xs6 sm6 class="pa-0"> 144 <v-flex xs6 sm6 class="pa-0">
145 <h4 class="right"> 145 <h4 class="right">
146 <b>Date of Birth :</b> 146 <b>Date of Birth :</b>
147 </h4> 147 </h4>
148 </v-flex> 148 </v-flex>
149 <v-flex sm6 xs6 class="pa-0"> 149 <v-flex sm6 xs6 class="pa-0">
150 <h4>{{ editedItem.dob }}</h4> 150 <h4>{{ editedItem.dob }}</h4>
151 </v-flex> 151 </v-flex>
152 </v-layout> 152 </v-layout>
153 <v-layout style="border: 1px solid lightgrey;"> 153 <v-layout style="border: 1px solid lightgrey;">
154 <v-flex xs6 sm6 class="pa-0"> 154 <v-flex xs6 sm6 class="pa-0">
155 <h4 class="right"> 155 <h4 class="right">
156 <b>Phone No :</b> 156 <b>Phone No :</b>
157 </h4> 157 </h4>
158 </v-flex> 158 </v-flex>
159 <v-flex sm6 xs6 class="pa-0"> 159 <v-flex sm6 xs6 class="pa-0">
160 <h4>{{ editedItem.mobileNo }}</h4> 160 <h4>{{ editedItem.mobileNo }}</h4>
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-flex> 168 </v-flex>
169 <v-flex xs12 sm12 md8 v-if="viewSalary"> 169 <v-flex xs12 sm12 md8 v-if="viewSalary">
170 <v-card flat> 170 <v-card flat>
171 <v-flex xs12 sm12> 171 <v-flex xs12 sm12>
172 <v-container fluid grid-list-md> 172 <v-container fluid grid-list-md>
173 <v-layout wrap> 173 <v-layout wrap>
174 <v-flex xs12 sm12 md6> 174 <v-flex xs12 sm12 md6>
175 <v-card flat> 175 <v-card flat>
176 <v-form ref="form" lazy-validation class="py-4"> 176 <v-form ref="form" lazy-validation class="py-4">
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 hidden-xs-only">Salary Grades :</label> 179 <label class="right hidden-xs-only">Salary Grades :</label>
180 </v-flex> 180 </v-flex>
181 <v-flex xs8 sm7 class="ml-3"> 181 <v-flex xs8 sm7 class="ml-3">
182 <v-flex xs8 sm7 class="ml-3"> 182 <v-flex xs8 sm7 class="ml-3">
183 <v-text-field 183 <v-text-field
184 solo 184 solo
185 v-model="editedItem.salaryTemplate.salaryGrades" 185 v-model="editedItem.salaryTemplate.salaryGrades"
186 readonly 186 readonly
187 ></v-text-field> 187 ></v-text-field>
188 </v-flex> 188 </v-flex>
189 </v-flex> 189 </v-flex>
190 </v-layout> 190 </v-layout>
191 <v-layout> 191 <v-layout>
192 <v-flex xs4 class="pt-4 subheading"> 192 <v-flex xs4 class="pt-4 subheading">
193 <label class="right">Basic Salary :</label> 193 <label class="right">Basic Salary :</label>
194 </v-flex> 194 </v-flex>
195 <v-flex xs8 sm7 class="ml-3"> 195 <v-flex xs8 sm7 class="ml-3">
196 <v-flex xs8 sm7 class="ml-3"> 196 <v-flex xs8 sm7 class="ml-3">
197 <v-text-field 197 <v-text-field
198 solo 198 solo
199 v-model="editedItem.salaryTemplate.basicSalary" 199 v-model="editedItem.salaryTemplate.basicSalary"
200 readonly 200 readonly
201 ></v-text-field> 201 ></v-text-field>
202 </v-flex> 202 </v-flex>
203 </v-flex> 203 </v-flex>
204 </v-layout> 204 </v-layout>
205 </v-form> 205 </v-form>
206 </v-card> 206 </v-card>
207 </v-flex> 207 </v-flex>
208 <v-flex xs12 sm12 md5></v-flex> 208 <v-flex xs12 sm12 md5></v-flex>
209 <v-flex xs12 sm12 md6> 209 <v-flex xs12 sm12 md6>
210 <v-card flat> 210 <v-card flat>
211 <v-toolbar> 211 <v-toolbar>
212 <h3>Allowances</h3> 212 <h3>Allowances</h3>
213 </v-toolbar> 213 </v-toolbar>
214 <v-layout 214 <v-layout
215 v-for="(editedItem,salaryTemplate,index) in editedItem.salaryTemplate.allowances" 215 v-for="(editedItem,salaryTemplate,index) in editedItem.salaryTemplate.allowances"
216 :key="index" 216 :key="index"
217 > 217 >
218 <v-flex xs4 class="mt-4 hidden-xs-only hidden-sm-only"> 218 <v-flex xs4 class="mt-4 hidden-xs-only hidden-sm-only">
219 <v-text-field 219 <v-text-field
220 readonly 220 readonly
221 solo 221 solo
222 label="Enter Allowances Label" 222 label="Enter Allowances Label"
223 v-model="editedItem.allowancesName" 223 v-model="editedItem.allowancesName"
224 ></v-text-field> 224 ></v-text-field>
225 </v-flex> 225 </v-flex>
226 <v-flex xs8 sm4 class="mt-4 hidden-xs-only hidden-sm-only"> 226 <v-flex xs8 sm4 class="mt-4 hidden-xs-only hidden-sm-only">
227 <v-text-field 227 <v-text-field
228 readonly 228 readonly
229 solo 229 solo
230 v-model="editedItem.allowancesValue" 230 v-model="editedItem.allowancesValue"
231 label="Enter Allowances Value" 231 label="Enter Allowances Value"
232 ></v-text-field> 232 ></v-text-field>
233 </v-flex> 233 </v-flex>
234 </v-layout> 234 </v-layout>
235 </v-card> 235 </v-card>
236 </v-flex> 236 </v-flex>
237 <v-flex xs12 sm12 md6> 237 <v-flex xs12 sm12 md6>
238 <v-card flat> 238 <v-card flat>
239 <v-toolbar> 239 <v-toolbar>
240 <h3>Deduction</h3> 240 <h3>Deduction</h3>
241 </v-toolbar> 241 </v-toolbar>
242 <v-layout 242 <v-layout
243 v-for="(editedItem,salaryTemplate,index) in editedItem.salaryTemplate.deduction" 243 v-for="(editedItem,salaryTemplate,index) in editedItem.salaryTemplate.deduction"
244 :key="index" 244 :key="index"
245 > 245 >
246 <v-flex xs4 class="mt-4 hidden-xs-only hidden-sm-only"> 246 <v-flex xs4 class="mt-4 hidden-xs-only hidden-sm-only">
247 <v-text-field 247 <v-text-field
248 readonly 248 readonly
249 solo 249 solo
250 label="Enter Deduction Label" 250 label="Enter Deduction Label"
251 v-model="editedItem.deductionName" 251 v-model="editedItem.deductionName"
252 ></v-text-field> 252 ></v-text-field>
253 </v-flex> 253 </v-flex>
254 <v-flex xs8 sm4 class="mt-4 hidden-xs-only hidden-sm-only"> 254 <v-flex xs8 sm4 class="mt-4 hidden-xs-only hidden-sm-only">
255 <v-text-field 255 <v-text-field
256 readonly 256 readonly
257 solo 257 solo
258 label="Enter Deduction Value" 258 label="Enter Deduction Value"
259 v-model="editedItem.deductionValue" 259 v-model="editedItem.deductionValue"
260 ></v-text-field> 260 ></v-text-field>
261 </v-flex> 261 </v-flex>
262 </v-layout> 262 </v-layout>
263 <!-- <v-layout> 263 <!-- <v-layout>
264 <v-flex xs4 class="pt-4 subheading"> 264 <v-flex xs4 class="pt-4 subheading">
265 <v-text-field 265 <v-text-field
266 v-model="editedItem.salaryTemplate.deduction.deductionName" 266 v-model="editedItem.salaryTemplate.deduction.deductionName"
267 readonly 267 readonly
268 ></v-text-field> 268 ></v-text-field>
269 </v-flex> 269 </v-flex>
270 <v-flex xs8 sm7 class="ml-3"> 270 <v-flex xs8 sm7 class="ml-3">
271 <v-flex xs8 sm7 class="ml-3"> 271 <v-flex xs8 sm7 class="ml-3">
272 <v-text-field 272 <v-text-field
273 v-model="editedItem.salaryTemplate.deduction.deductionValue" 273 v-model="editedItem.salaryTemplate.deduction.deductionValue"
274 readonly 274 readonly
275 ></v-text-field> 275 ></v-text-field>
276 </v-flex> 276 </v-flex>
277 </v-flex> 277 </v-flex>
278 </v-layout>--> 278 </v-layout>-->
279 </v-card> 279 </v-card>
280 </v-flex> 280 </v-flex>
281 <v-flex xs12 sm12 md12 style="padding-top: 1%;"> 281 <v-flex xs12 sm12 md12 style="padding-top: 1%;">
282 <v-card> 282 <v-card>
283 <v-toolbar> 283 <v-toolbar>
284 <h3>Total Salary Details</h3> 284 <h3>Total Salary Details</h3>
285 </v-toolbar> 285 </v-toolbar>
286 <v-layout> 286 <v-layout>
287 <v-flex xs4 class="mt-4 hidden-xs-only hidden-sm-only"> 287 <v-flex xs4 class="mt-4 hidden-xs-only hidden-sm-only">
288 <v-text-field solo value="Gross Salary"></v-text-field> 288 <v-text-field solo value="Gross Salary"></v-text-field>
289 </v-flex> 289 </v-flex>
290 <v-flex xs8 sm7 class="mt-4 hidden-xs-only hidden-sm-only"> 290 <v-flex xs8 sm7 class="mt-4 hidden-xs-only hidden-sm-only">
291 <v-flex xs8 sm7 class="ml-3"> 291 <v-flex xs8 sm7 class="ml-3">
292 <v-text-field 292 <v-text-field
293 v-model="editedItem.salaryTemplate.grossSalary" 293 v-model="editedItem.salaryTemplate.grossSalary"
294 solo 294 solo
295 readonly 295 readonly
296 ></v-text-field> 296 ></v-text-field>
297 </v-flex> 297 </v-flex>
298 </v-flex> 298 </v-flex>
299 </v-layout> 299 </v-layout>
300 <v-layout> 300 <v-layout>
301 <v-flex xs4 class="mt-4 hidden-xs-only hidden-sm-only"> 301 <v-flex xs4 class="mt-4 hidden-xs-only hidden-sm-only">
302 <v-text-field solo value="Total Deduction"></v-text-field> 302 <v-text-field solo value="Total Deduction"></v-text-field>
303 </v-flex> 303 </v-flex>
304 <v-flex xs8 sm7 class="mt-4 hidden-xs-only hidden-sm-only"> 304 <v-flex xs8 sm7 class="mt-4 hidden-xs-only hidden-sm-only">
305 <v-flex xs8 sm7 class="ml-3"> 305 <v-flex xs8 sm7 class="ml-3">
306 <v-text-field 306 <v-text-field
307 v-model="editedItem.salaryTemplate.totalDeduction" 307 v-model="editedItem.salaryTemplate.totalDeduction"
308 solo 308 solo
309 readonly 309 readonly
310 ></v-text-field> 310 ></v-text-field>
311 </v-flex> 311 </v-flex>
312 </v-flex> 312 </v-flex>
313 </v-layout> 313 </v-layout>
314 <v-layout> 314 <v-layout>
315 <v-flex xs4 class="mt-4 hidden-xs-only hidden-sm-only"> 315 <v-flex xs4 class="mt-4 hidden-xs-only hidden-sm-only">
316 <v-text-field solo value="Net Salary"></v-text-field> 316 <v-text-field solo value="Net Salary"></v-text-field>
317 </v-flex> 317 </v-flex>
318 <v-flex xs8 sm7 class="mt-4 hidden-xs-only hidden-sm-only"> 318 <v-flex xs8 sm7 class="mt-4 hidden-xs-only hidden-sm-only">
319 <v-flex xs8 sm7 class="ml-3"> 319 <v-flex xs8 sm7 class="ml-3">
320 <v-text-field 320 <v-text-field
321 v-model="editedItem.salaryTemplate.netSalary" 321 v-model="editedItem.salaryTemplate.netSalary"
322 solo 322 solo
323 readonly 323 readonly
324 ></v-text-field> 324 ></v-text-field>
325 </v-flex> 325 </v-flex>
326 </v-flex> 326 </v-flex>
327 </v-layout> 327 </v-layout>
328 </v-card> 328 </v-card>
329 </v-flex> 329 </v-flex>
330 </v-layout> 330 </v-layout>
331 </v-container> 331 </v-container>
332 </v-flex> 332 </v-flex>
333 </v-card> 333 </v-card>
334 </v-flex> 334 </v-flex>
335 <v-flex xs12 sm12 md8 v-if="viewHourly"> 335 <v-flex xs12 sm12 md8 v-if="viewHourly">
336 <v-card flat> 336 <v-card flat>
337 <v-flex xs12 sm12> 337 <v-flex xs12 sm12>
338 <v-container fluid grid-list-md> 338 <v-container fluid grid-list-md>
339 <v-layout wrap> 339 <v-layout wrap>
340 <v-flex xs12 sm12 md6> 340 <v-flex xs12 sm12 md6>
341 <v-card flat> 341 <v-card flat>
342 <v-form ref="form" lazy-validation class="py-4"> 342 <v-form ref="form" lazy-validation class="py-4">
343 <v-layout> 343 <v-layout>
344 <v-flex xs4 class="pt-4 subheading"> 344 <v-flex xs4 class="pt-4 subheading">
345 <label class="right hidden-xs-only">Hourly Grades :</label> 345 <label class="right hidden-xs-only">Hourly Grades :</label>
346 </v-flex> 346 </v-flex>
347 <v-flex xs8 sm7 class="ml-3"> 347 <v-flex xs8 sm7 class="ml-3">
348 <v-flex xs8 sm7 class="ml-3"> 348 <v-flex xs8 sm7 class="ml-3">
349 <v-text-field 349 <v-text-field
350 solo 350 solo
351 v-model="editedItem.hourlyTemplate.hourlyGrades" 351 v-model="editedItem.hourlyTemplate.hourlyGrades"
352 readonly 352 readonly
353 ></v-text-field> 353 ></v-text-field>
354 </v-flex> 354 </v-flex>
355 </v-flex> 355 </v-flex>
356 </v-layout> 356 </v-layout>
357 <v-layout> 357 <v-layout>
358 <v-flex xs4 class="pt-4 subheading"> 358 <v-flex xs4 class="pt-4 subheading">
359 <label class="right">Hourly Rate :</label> 359 <label class="right">Hourly Rate :</label>
360 </v-flex> 360 </v-flex>
361 <v-flex xs8 sm7 class="ml-3"> 361 <v-flex xs8 sm7 class="ml-3">
362 <v-flex xs8 sm7 class="ml-3"> 362 <v-flex xs8 sm7 class="ml-3">
363 <v-text-field 363 <v-text-field
364 solo 364 solo
365 v-model="editedItem.hourlyTemplate.hourlyRate" 365 v-model="editedItem.hourlyTemplate.hourlyRate"
366 readonly 366 readonly
367 ></v-text-field> 367 ></v-text-field>
368 </v-flex> 368 </v-flex>
369 </v-flex> 369 </v-flex>
370 </v-layout> 370 </v-layout>
371 </v-form> 371 </v-form>
372 </v-card> 372 </v-card>
373 </v-flex> 373 </v-flex>
374 <v-flex xs12 sm12 md12 style="padding-top: 1%;"> 374 <v-flex xs12 sm12 md12 style="padding-top: 1%;">
375 <v-card> 375 <v-card>
376 <v-toolbar> 376 <v-toolbar>
377 <h3>Total Salary Details</h3> 377 <h3>Total Salary Details</h3>
378 </v-toolbar> 378 </v-toolbar>
379 <v-layout> 379 <v-layout>
380 <v-flex xs4 class="mt-4 hidden-xs-only hidden-sm-only"> 380 <v-flex xs4 class="mt-4 hidden-xs-only hidden-sm-only">
381 <v-text-field solo value="Gross Salary"></v-text-field> 381 <v-text-field solo value="Gross Salary"></v-text-field>
382 </v-flex> 382 </v-flex>
383 <v-flex xs8 sm7 class="mt-4 hidden-xs-only hidden-sm-only"> 383 <v-flex xs8 sm7 class="mt-4 hidden-xs-only hidden-sm-only">
384 <v-flex xs8 sm7 class="ml-3"> 384 <v-flex xs8 sm7 class="ml-3">
385 <v-text-field 385 <v-text-field
386 v-model="editedItem.hourlyTemplate.grossSalary" 386 v-model="editedItem.hourlyTemplate.grossSalary"
387 solo 387 solo
388 readonly 388 readonly
389 ></v-text-field> 389 ></v-text-field>
390 </v-flex> 390 </v-flex>
391 </v-flex> 391 </v-flex>
392 </v-layout> 392 </v-layout>
393 <v-layout> 393 <v-layout>
394 <v-flex xs4 class="mt-4 hidden-xs-only hidden-sm-only"> 394 <v-flex xs4 class="mt-4 hidden-xs-only hidden-sm-only">
395 <v-text-field solo value="Total Deduction"></v-text-field> 395 <v-text-field solo value="Total Deduction"></v-text-field>
396 </v-flex> 396 </v-flex>
397 <v-flex xs8 sm7 class="mt-4 hidden-xs-only hidden-sm-only"> 397 <v-flex xs8 sm7 class="mt-4 hidden-xs-only hidden-sm-only">
398 <v-flex xs8 sm7 class="ml-3"> 398 <v-flex xs8 sm7 class="ml-3">
399 <v-text-field 399 <v-text-field
400 v-model="editedItem.hourlyTemplate.totalDeduction" 400 v-model="editedItem.hourlyTemplate.totalDeduction"
401 solo 401 solo
402 readonly 402 readonly
403 ></v-text-field> 403 ></v-text-field>
404 </v-flex> 404 </v-flex>
405 </v-flex> 405 </v-flex>
406 </v-layout> 406 </v-layout>
407 <v-layout> 407 <v-layout>
408 <v-flex xs4 class="mt-4 hidden-xs-only hidden-sm-only"> 408 <v-flex xs4 class="mt-4 hidden-xs-only hidden-sm-only">
409 <v-text-field solo value="Net Hourly Rate"></v-text-field> 409 <v-text-field solo value="Net Hourly Rate"></v-text-field>
410 </v-flex> 410 </v-flex>
411 <v-flex xs8 sm7 class="mt-4 hidden-xs-only hidden-sm-only"> 411 <v-flex xs8 sm7 class="mt-4 hidden-xs-only hidden-sm-only">
412 <v-flex xs8 sm7 class="ml-3"> 412 <v-flex xs8 sm7 class="ml-3">
413 <v-text-field 413 <v-text-field
414 v-model="editedItem.hourlyTemplate.netSalary" 414 v-model="editedItem.hourlyTemplate.netSalary"
415 solo 415 solo
416 readonly 416 readonly
417 ></v-text-field> 417 ></v-text-field>
418 </v-flex> 418 </v-flex>
419 </v-flex> 419 </v-flex>
420 </v-layout> 420 </v-layout>
421 </v-card> 421 </v-card>
422 </v-flex> 422 </v-flex>
423 </v-layout> 423 </v-layout>
424 </v-container> 424 </v-container>
425 </v-flex> 425 </v-flex>
426 </v-card> 426 </v-card>
427 </v-flex> 427 </v-flex>
428 </v-layout> 428 </v-layout>
429 </v-card> 429 </v-card>
430 </v-dialog> 430 </v-dialog>
431 431
432 <!-- ****** Edit Hourly Template ****** --> 432 <!-- ****** Edit Hourly Template ****** -->
433 <v-dialog v-model="editSalaryDialog" max-width="400px" persistent> 433 <v-dialog v-model="editSalaryDialog" max-width="400px" persistent>
434 <v-card flat class="card-style pa-2" dark> 434 <v-card flat class="card-style pa-2" dark>
435 <v-layout> 435 <v-layout>
436 <v-flex xs12> 436 <v-flex xs12>
437 <label class="title text-xs-center">Edit Manage Salary</label> 437 <label class="title text-xs-center">Edit Manage Salary</label>
438 <v-icon size="24" class="right" @click="editSalaryDialog = false">cancel</v-icon> 438 <v-icon size="24" class="right" @click="editSalaryDialog = false">cancel</v-icon>
439 </v-flex> 439 </v-flex>
440 </v-layout> 440 </v-layout>
441 <v-form ref="form"> 441 <v-form ref="form">
442 <v-container fluid> 442 <v-container fluid>
443 <v-flex xs12 sm12> 443 <v-flex xs12 sm12>
444 <v-layout> 444 <v-layout>
445 <v-flex xs3 class="pt-4 subheading"> 445 <v-flex xs3 class="pt-4 subheading">
446 <label class="right">Salary:</label> 446 <label class="right">Salary:</label>
447 </v-flex> 447 </v-flex>
448 <v-flex xs8 sm7 class="ml-3"> 448 <v-flex xs8 sm7 class="ml-3">
449 <v-select 449 <v-select
450 :items="salary" 450 :items="salary"
451 v-model="editedItem.salary" 451 v-model="editedItem.salary"
452 placeholder="please fill this field" 452 placeholder="please fill this field"
453 @change="selectSalary()" 453 @change="selectSalary()"
454 ></v-select> 454 ></v-select>
455 </v-flex> 455 </v-flex>
456 </v-layout> 456 </v-layout>
457 </v-flex> 457 </v-flex>
458 <v-flex xs12 sm12> 458 <v-flex xs12 sm12>
459 <v-layout> 459 <v-layout>
460 <v-flex xs3 class="pt-4 subheading"> 460 <v-flex xs3 class="pt-4 subheading">
461 <label class="right">Template:</label> 461 <label class="right">Template:</label>
462 </v-flex> 462 </v-flex>
463 <v-flex xs8 sm7 class="ml-3" v-if="monthlyGrade"> 463 <v-flex xs8 sm7 class="ml-3" v-if="monthlyGrade">
464 <v-autocomplete 464 <v-autocomplete
465 v-model="editedItem.salaryId" 465 v-model="editedItem.salaryId"
466 :items="salaryData" 466 :items="salaryData"
467 item-text="salaryGrades" 467 item-text="salaryGrades"
468 item-value="_id" 468 item-value="_id"
469 placeholder="please fill this field" 469 placeholder="please fill this field"
470 @change="selectGrade()" 470 @change="selectGrade()"
471 required 471 required
472 ></v-autocomplete> 472 ></v-autocomplete>
473 </v-flex> 473 </v-flex>
474 <v-flex xs8 sm7 class="ml-3" v-if="hourlyGrades"> 474 <v-flex xs8 sm7 class="ml-3" v-if="hourlyGrades">
475 <v-autocomplete 475 <v-autocomplete
476 v-model="editedItem.salaryId" 476 v-model="editedItem.salaryId"
477 :items="hourlyData" 477 :items="hourlyData"
478 item-text="hourlyGrades" 478 item-text="hourlyGrades"
479 item-value="_id" 479 item-value="_id"
480 placeholder="please fill this field" 480 placeholder="please fill this field"
481 @change="selectGrade()" 481 @change="selectGrade()"
482 required 482 required
483 ></v-autocomplete> 483 ></v-autocomplete>
484 </v-flex> 484 </v-flex>
485 </v-layout> 485 </v-layout>
486 </v-flex> 486 </v-flex>
487 <v-layout> 487 <v-layout>
488 <v-flex xs12> 488 <v-flex xs12>
489 <v-layout> 489 <v-layout>
490 <v-spacer></v-spacer> 490 <v-spacer></v-spacer>
491 <v-btn round dark @click="save" class="add-button">Update Salary Template</v-btn> 491 <v-btn round dark @click="save" class="add-button">Update Salary Template</v-btn>
492 <v-spacer></v-spacer> 492 <v-spacer></v-spacer>
493 </v-layout> 493 </v-layout>
494 </v-flex> 494 </v-flex>
495 </v-layout> 495 </v-layout>
496 </v-container> 496 </v-container>
497 </v-form> 497 </v-form>
498 </v-card> 498 </v-card>
499 </v-dialog> 499 </v-dialog>
500 </v-container> 500 </v-container>
501 </template> 501 </template>
502 502
503 <script> 503 <script>
504 import http from "@/Services/http.js"; 504 import http from "@/Services/http.js";
505 import Util from "@/util"; 505 import Util from "@/util";
506 import moment from "moment"; 506 import moment from "moment";
507 export default { 507 export default {
508 data: () => ({ 508 data: () => ({
509 search: "", 509 search: "",
510 pagination: { 510 pagination: {
511 rowsPerPage: 10, 511 rowsPerPage: 10,
512 }, 512 },
513 513
514 role: [(v) => !!v || "Role Name is required"], 514 role: [(v) => !!v || "Role Name is required"],
515 getRoles: [], 515 getRoles: [],
516 teacherList: [], 516 teacherList: [],
517 roleList: [], 517 roleList: [],
518 salaryData: [], 518 salaryData: [],
519 hourlyData: [], 519 hourlyData: [],
520 salary: ["Monthly", "Hourly"], 520 salary: ["Monthly", "Hourly"],
521 521
522 salaryItem: "", 522 salaryItem: "",
523 523
524 getReport: { 524 getReport: {
525 role: "", 525 role: "",
526 }, 526 },
527 527
528 showTeacher: false, 528 showTeacher: false,
529 editSalaryDialog: false, 529 editSalaryDialog: false,
530 profileSalaryDialog: false, 530 profileSalaryDialog: false,
531 monthlyGrade: false, 531 monthlyGrade: false,
532 hourlyGrades: false, 532 hourlyGrades: false,
533 viewSalary: false, 533 viewSalary: false,
534 viewHourly: false, 534 viewHourly: false,
535 535
536 editedItem: { 536 editedItem: {
537 salaryTemplate: { 537 salaryTemplate: {
538 allowances: {}, 538 allowances: {},
539 deduction: {}, 539 deduction: {},
540 }, 540 },
541 hourlyTemplate: {}, 541 hourlyTemplate: {},
542 }, 542 },
543 543
544 // salaryGrades: {}, 544 // salaryGrades: {},
545 // salaryTemplate: { 545 // salaryTemplate: {
546 // salaryGrades: "" 546 // salaryGrades: ""
547 // }, 547 // },
548 // salaryTemplate :{ 548 // salaryTemplate :{
549 // allowances: { 549 // allowances: {
550 // allowancesName: "", 550 // allowancesName: "",
551 // allowancesValue: "" 551 // allowancesValue: ""
552 // }, 552 // },
553 // deduction: { 553 // deduction: {
554 // deductionName: "", 554 // deductionName: "",
555 // deductionValue: "" 555 // deductionValue: ""
556 // } 556 // }
557 // }, 557 // },
558 558
559 headers: [ 559 headers: [
560 { 560 {
561 text: "No", 561 text: "No",
562 align: "", 562 align: "",
563 sortable: false, 563 sortable: false,
564 value: "No", 564 value: "No",
565 }, 565 },
566 { 566 {
567 text: "Profile Pic", 567 text: "Profile Pic",
568 value: "profilePicUrl", 568 value: "profilePicUrl",
569 sortable: false, 569 sortable: false,
570 align: "center", 570 align: "center",
571 }, 571 },
572 { text: "Name", value: "name", sortable: false, align: "center" }, 572 { text: "Name", value: "name", sortable: false, align: "center" },
573 { 573 {
574 text: "Join Date", 574 text: "Join Date",
575 value: "joinDate", 575 value: "joinDate",
576 sortable: false, 576 sortable: false,
577 align: "center", 577 align: "center",
578 }, 578 },
579 { text: "Action", value: "", sortable: false, align: "center" }, 579 { text: "Action", value: "", sortable: false, align: "center" },
580 ], 580 ],
581 desserts: [], 581 desserts: [],
582 }), 582 }),
583 583
584 methods: { 584 methods: {
585 close() { 585 close() {
586 this.editHourDialog = false; 586 this.editHourDialog = false;
587 }, 587 },
588 dates: function (date) { 588 dates: function (date) {
589 return moment(date).format("MMMM DD, YYYY"); 589 return moment(date).format("MMMM DD, YYYY");
590 }, 590 },
591 editItem(item) { 591 editItem(item) {
592 this.editedIndex = this.roleList.indexOf(item); 592 this.editedIndex = this.roleList.indexOf(item);
593 this.editedItem = Object.assign({}, item); 593 this.editedItem = Object.assign({}, item);
594 this.editSalaryDialog = true; 594 this.editSalaryDialog = true;
595 }, 595 },
596 profile(item) { 596 profile(item) {
597 this.editedIndex = this.roleList.indexOf(item); 597 this.editedIndex = this.roleList.indexOf(item);
598 this.editedItem = Object.assign({}, item); 598 this.editedItem = Object.assign({}, item);
599 this.profileSalaryDialog = true; 599 this.profileSalaryDialog = true;
600 // console.log("item", item); 600 // console.log("item", item);
601 if (item.salaryTemplate) { 601 if (item.salaryTemplate) {
602 this.viewSalary = true; 602 this.viewSalary = true;
603 this.viewHourly = false; 603 this.viewHourly = false;
604 } else { 604 } else {
605 this.viewHourly = true; 605 this.viewHourly = true;
606 this.viewSalary = false; 606 this.viewSalary = false;
607 } 607 }
608 }, 608 },
609 getRole() { 609 getRole() {
610 this.showLoader = true; 610 this.showLoader = true;
611 var token = this.$store.state.token; 611 var token = this.$store.state.token;
612 http() 612 http()
613 .get("/getRolesList", { 613 .get("/getRolesList", {
614 headers: { Authorization: "Bearer " + token }, 614 headers: { Authorization: "Bearer " + token },
615 }) 615 })
616 .then((response) => { 616 .then((response) => {
617 this.getRoles = response.data.data; 617 this.getRoles = response.data.data;
618 // if (this.getRoles[2].role !== 3) { 618 // if (this.getRoles[2].role !== 3) {
619 // this.getRoles = response.data.data; 619 // this.getRoles = response.data.data;
620 // console.log("roles", this.getRoles[2].role); 620 // console.log("roles", this.getRoles[2].role);
621 // } 621 // }
622 622
623 // var removedRoles = _.remove(this.getRoles, function (c) { 623 // var removedRoles = _.remove(this.getRoles, function (c) {
624 // //remove if color is green or yellow 624 // //remove if color is green or yellow
625 // return c.role === 1 || c.role === 4 || c.role === 5; 625 // return c.role === 1 || c.role === 4 || c.role === 5;
626 // // console.log(c); 626 // // console.log(c);
627 // }); 627 // });
628 this.showLoader = false; 628 this.showLoader = false;
629 }) 629 })
630 .catch((error) => { 630 .catch((error) => {
631 this.showLoader = false; 631 this.showLoader = false;
632 });
633 },
634
635 getRoleInputs(role) {
636 // console.log("role", role);
637 if (role === 3) { 632 });
638 this.showTeacher = true; 633 },
639 this.getTeacherList(); 634
640 } 635 getRoleInputs(role) {
641 }, 636 // console.log("role", role);
642 637 if (role === 3) {
643 getTeacherList() { 638 this.showTeacher = true;
644 this.showLoader = true; 639 this.getTeacherList();
645 var token = this.$store.state.token; 640 }
646 http() 641 },
647 .get("/getTeachersList", { 642
648 headers: { Authorization: "Bearer " + token }, 643 getTeacherList() {
649 }) 644 this.showLoader = true;
650 .then((response) => { 645 var token = this.$store.state.token;
651 this.teacherList = response.data.data; 646 http()
652 this.showTeacher = true; 647 .get("/getTeachersList", {
653 this.showLoader = false; 648 headers: { Authorization: "Bearer " + token },
654 }) 649 })
655 .catch((error) => { 650 .then((response) => {
656 this.showLoader = false; 651 this.teacherList = response.data.data;
657 if (error.response.status === 401) { 652 this.showTeacher = true;
658 this.$router.replace({ path: "/" }); 653 this.showLoader = false;
659 this.$store.dispatch("setToken", null); 654 })
660 this.$store.dispatch("Id", null); 655 .catch((error) => {
661 } 656 this.showLoader = false;
662 }); 657 if (error.response.status === 401) {
663 }, 658 this.$router.replace({ path: "/" });
664 659 this.$store.dispatch("setToken", null);
665 getUserDetailWithRoles() { 660 this.$store.dispatch("Id", null);
666 this.showLoader = true; 661 }
667 http() 662 });
668 .get( 663 },
669 "/getUserDetailWithRoles", 664
670 { params: { role: this.getReport.role } }, 665 getUserDetailWithRoles() {
671 { 666 this.showLoader = true;
672 headers: { Authorization: "Bearer " + this.token }, 667 http()
673 } 668 .get(
674 ) 669 "/getUserDetailWithRoles",
675 .then((response) => { 670 { params: { role: this.getReport.role } },
676 this.roleList = response.data.data; 671 {
677 this.showLoader = false; 672 headers: { Authorization: "Bearer " + this.token },
678 }) 673 }
679 .catch((err) => { 674 )
680 this.showLoader = false; 675 .then((response) => {
681 }); 676 this.roleList = response.data.data;
682 }, 677 this.showLoader = false;
683 getSalaryList() { 678 })
684 this.showLoader = true; 679 .catch((err) => {
685 this.loadingSearch = true; 680 this.showLoader = false;
686 http() 681 });
687 .get("/getSalaryList", { 682 },
688 headers: { Authorization: "Bearer " + this.token }, 683 getSalaryList() {
689 }) 684 this.showLoader = true;
690 .then((response) => { 685 this.loadingSearch = true;
691 this.salaryData = response.data.data; 686 http()
692 this.showLoader = false; 687 .get("/getSalaryList", {
693 this.loadingSearch = false; 688 headers: { Authorization: "Bearer " + this.token },
694 }) 689 })
695 .catch((error) => { 690 .then((response) => {
696 // console.log("err====>", err); 691 this.salaryData = response.data.data;
697 this.showLoader = false; 692 this.showLoader = false;
698 this.loadingSearch = false; 693 this.loadingSearch = false;
699 this.snackbar = true; 694 })
700 this.text = error.response.data.message; 695 .catch((error) => {
701 if (error.response.status === 401) { 696 // console.log("err====>", err);
702 this.$router.replace({ path: "/" }); 697 this.showLoader = false;
703 this.$store.dispatch("setToken", null); 698 this.loadingSearch = false;
704 this.$store.dispatch("Id", null); 699 this.snackbar = true;
705 } 700 this.text = error.response.data.message;
706 }); 701 if (error.response.status === 401) {
707 }, 702 this.$router.replace({ path: "/" });
708 getHourlyList() { 703 this.$store.dispatch("setToken", null);
709 this.showLoader = true; 704 this.$store.dispatch("Id", null);
710 this.loadingSearch = true; 705 }
711 http() 706 });
712 .get("/getHourlyList", { 707 },
713 headers: { Authorization: "Bearer " + this.token }, 708 getHourlyList() {
714 }) 709 this.showLoader = true;
715 .then((response) => { 710 this.loadingSearch = true;
716 this.hourlyData = response.data.data; 711 http()
717 this.showLoader = false; 712 .get("/getHourlyList", {
718 this.loadingSearch = false; 713 headers: { Authorization: "Bearer " + this.token },
719 }) 714 })
720 .catch((error) => { 715 .then((response) => {
721 // console.log("err====>", err); 716 this.hourlyData = response.data.data;
722 this.showLoader = false; 717 this.showLoader = false;
723 this.loadingSearch = false; 718 this.loadingSearch = false;
724 this.snackbar = true; 719 })
725 this.text = error.response.data.message; 720 .catch((error) => {
726 if (error.response.status === 401) { 721 // console.log("err====>", err);
727 this.$router.replace({ path: "/" }); 722 this.showLoader = false;
728 this.$store.dispatch("setToken", null); 723 this.loadingSearch = false;
729 this.$store.dispatch("Id", null); 724 this.snackbar = true;
730 } 725 this.text = error.response.data.message;
731 }); 726 if (error.response.status === 401) {
732 }, 727 this.$router.replace({ path: "/" });
733 editItem(item) { 728 this.$store.dispatch("setToken", null);
734 this.editedIndex = this.salaryData.indexOf(item); 729 this.$store.dispatch("Id", null);
735 this.editedIndex = this.hourlyData.indexOf(item); 730 }
736 this.editedItem = Object.assign({}, item); 731 });
737 this.editedItem.date = 732 },
738 this.editedItem.date != undefined 733 editItem(item) {
739 ? (this.editedItem.date = this.editedItem.date.substring(0, 10)) 734 this.editedIndex = this.salaryData.indexOf(item);
740 : (this.editedItem.date = ""); 735 this.editedIndex = this.hourlyData.indexOf(item);
741 this.editSalaryDialog = true; 736 this.editedItem = Object.assign({}, item);
742 }, 737 this.editedItem.date =
743 selectSalary() { 738 this.editedItem.date != undefined
744 if (this.editedItem.salary === "Monthly") { 739 ? (this.editedItem.date = this.editedItem.date.substring(0, 10))
745 this.monthlyGrade = true; 740 : (this.editedItem.date = "");
746 this.hourlyGrades = false; 741 this.editSalaryDialog = true;
747 } else { 742 },
748 this.monthlyGrade = false; 743 selectSalary() {
749 this.hourlyGrades = true; 744 if (this.editedItem.salary === "Monthly") {
750 } 745 this.monthlyGrade = true;
751 }, 746 this.hourlyGrades = false;
752 selectGrade() { 747 } else {
753 // console.log("this.editedItem", this.editedItem); 748 this.monthlyGrade = false;
754 }, 749 this.hourlyGrades = true;
755 selectView() { 750 }
756 if (this.editedItem.view.png === "Monthly") { 751 },
757 this.viewSalary = true; 752 selectGrade() {
758 this.viewHourly = false; 753 // console.log("this.editedItem", this.editedItem);
759 } else { 754 },
760 this.viewSalary = false; 755 selectView() {
761 this.viewHourly = true; 756 if (this.editedItem.view.png === "Monthly") {
762 } 757 this.viewSalary = true;
763 }, 758 this.viewHourly = false;
764 759 } else {
765 save() { 760 this.viewSalary = false;
766 var updateSalary = { 761 this.viewHourly = true;
767 role: this.editedItem.role, 762 }
768 userId: this.editedItem._id, 763 },
769 templateName: this.editedItem.salary, 764
770 templateId: this.editedItem.salaryId, 765 save() {
771 }; 766 var updateSalary = {
772 http() 767 role: this.editedItem.role,
773 .put("/updateUserSalary", updateSalary, { 768 userId: this.editedItem._id,
774 headers: { 769 templateName: this.editedItem.salary,
775 Authorization: "Bearer " + this.token, 770 templateId: this.editedItem.salaryId,
776 }, 771 };
777 }) 772 http()
778 .then((response) => { 773 .put("/updateUserSalary", updateSalary, {
779 this.getUserDetailWithRoles(); 774 headers: {
780 this.close(); 775 Authorization: "Bearer " + this.token,
781 this.snackbar = true; 776 },
782 this.text = response.data.message; 777 })
783 this.color = "green"; 778 .then((response) => {
784 this.editSalaryDialog = false; 779 this.getUserDetailWithRoles();
785 }) 780 this.close();
786 .catch((error) => { 781 this.snackbar = true;
787 // console.log("error", error); 782 this.text = response.data.message;
788 this.snackbar = true; 783 this.color = "green";
789 this.snackbar = true; 784 this.editSalaryDialog = false;
790 this.color = "error"; 785 })
791 this.text = error.response.data.message; 786 .catch((error) => {
792 }); 787 // console.log("error", error);
788 this.snackbar = true;
793 }, 789 this.snackbar = true;
794 790 this.color = "error";
791 this.text = error.response.data.message;
795 deleteItem(item) { 792 });
796 // let deleteGrade = { 793 },
797 // hourlyId: item._id 794
798 // }; 795 deleteItem(item) {
799 // http() 796 // let deleteGrade = {
800 // .delete( 797 // hourlyId: item._id
801 // "/deleteHourly", 798 // };
802 // confirm("Are you sure you want to delete this?") && { 799 // http()
803 // params: deleteGrade 800 // .delete(
804 // }, 801 // "/deleteHourly",
805 // { 802 // confirm("Are you sure you want to delete this?") && {
806 // headers: { 803 // params: deleteGrade
807 // Authorization: "Bearer " + this.token 804 // },
808 // } 805 // {
809 // } 806 // headers: {
810 // ) 807 // Authorization: "Bearer " + this.token
811 // .then(response => { 808 // }
812 // this.snackbar = true; 809 // }
813 // // this.text = "Successfully Delete Salary "; 810 // )
814 // this.text = response.data.message; 811 // .then(response => {
815 // this.color = "green"; 812 // this.snackbar = true;
816 // this.getUserDetailWithRoles(); 813 // // this.text = "Successfully Delete Salary ";
817 // }) 814 // this.text = response.data.message;
818 // .catch(error => { 815 // this.color = "green";
819 // console.log("error", error); 816 // this.getUserDetailWithRoles();
820 // this.snackbar = true; 817 // })
821 // this.text = error.response.data.message; 818 // .catch(error => {
822 // this.color = "red"; 819 // console.log("error", error);
823 // }); 820 // this.snackbar = true;
824 }, 821 // this.text = error.response.data.message;
825 822 // this.color = "red";
826 // selectAllowances() { 823 // });
827 // this.salaryTypeData.push({ 824 },
828 // allowancesValue: (this.salaryType.allowancesValue = "") 825
829 // }); 826 // selectAllowances() {
830 // // console.log("this.salaryTypeData", this.salaryTypeData); 827 // this.salaryTypeData.push({
831 // var totalAllowances = ""; 828 // allowancesValue: (this.salaryType.allowancesValue = "")
832 // this.salaryTypeData.forEach(allowancesValue_ => { 829 // });
833 // if (allowancesValue_.allowancesValue != "") { 830 // // console.log("this.salaryTypeData", this.salaryTypeData);
834 // // console.log("allowances", allowancesValue_.allowancesValue); 831 // var totalAllowances = "";
835 // totalAllowances = 832 // this.salaryTypeData.forEach(allowancesValue_ => {
836 // Number(totalAllowances) + Number(allowancesValue_.allowancesValue); 833 // if (allowancesValue_.allowancesValue != "") {
837 // } 834 // // console.log("allowances", allowancesValue_.allowancesValue);
838 // this.grossSalary = 835 // totalAllowances =
839 // totalAllowances + Number(this.salaryType.basicSalary); 836 // Number(totalAllowances) + Number(allowancesValue_.allowancesValue);
840 // }); 837 // }
841 // }, 838 // this.grossSalary =
842 // allowancesAdd() { 839 // totalAllowances + Number(this.salaryType.basicSalary);
843 // this.editedItem.allowances.push({ 840 // });
844 // allowancesValue: (this.salaryType.allowancesValue = "") 841 // },
845 // }); 842 // allowancesAdd() {
846 // var totalAllowances = ""; 843 // this.editedItem.allowances.push({
847 // this.editedItem.allowances.forEach(allowancesValue_ => { 844 // allowancesValue: (this.salaryType.allowancesValue = "")
848 // if (allowancesValue_.allowancesValue != "") { 845 // });
849 // // console.log("allowances", allowancesValue_.allowancesValue); 846 // var totalAllowances = "";
850 // totalAllowances = 847 // this.editedItem.allowances.forEach(allowancesValue_ => {
851 // Number(totalAllowances) + Number(allowancesValue_.allowancesValue); 848 // if (allowancesValue_.allowancesValue != "") {
852 // console.log("totalAllowances", totalAllowances); 849 // // console.log("allowances", allowancesValue_.allowancesValue);
853 // } 850 // totalAllowances =
854 // this.editedItem.grossSalary = 851 // Number(totalAllowances) + Number(allowancesValue_.allowancesValue);
855 // totalAllowances + Number(this.editedItem.basicSalary); 852 // console.log("totalAllowances", totalAllowances);
856 // console.log("this.editedItem.grossSalary", this.editedItem.grossSalary); 853 // }
857 // }); 854 // this.editedItem.grossSalary =
858 // }, 855 // totalAllowances + Number(this.editedItem.basicSalary);
859 // selectDeduction() { 856 // console.log("this.editedItem.grossSalary", this.editedItem.grossSalary);
860 // this.salaryTypeDeductionData.push({ 857 // });
861 // deductionValue: (this.salaryType.deductionValue = "") 858 // },
862 // }); 859 // selectDeduction() {
863 // var totalDeductions = ""; 860 // this.salaryTypeDeductionData.push({
864 // this.salaryTypeDeductionData.forEach(deductionValue_ => { 861 // deductionValue: (this.salaryType.deductionValue = "")
865 // if (deductionValue_.deductionValue != "") { 862 // });
866 // // console.log("deduction", deductionValue_.deductionValue); 863 // var totalDeductions = "";
867 // totalDeductions = 864 // this.salaryTypeDeductionData.forEach(deductionValue_ => {
868 // Number(totalDeductions) + Number(deductionValue_.deductionValue); 865 // if (deductionValue_.deductionValue != "") {
869 // } 866 // // console.log("deduction", deductionValue_.deductionValue);
870 // }); 867 // totalDeductions =
871 // }, 868 // Number(totalDeductions) + Number(deductionValue_.deductionValue);
872 // deductionAdd() { 869 // }
873 // this.editedItem.deduction.push({ 870 // });
874 // deductionValue: (this.salaryType.deductionValue = "") 871 // },
875 // }); 872 // deductionAdd() {
876 // var totalDeductions = ""; 873 // this.editedItem.deduction.push({
877 // this.editedItem.deduction.forEach(deductionValue_ => { 874 // deductionValue: (this.salaryType.deductionValue = "")
878 // if (deductionValue_.deductionValue != "") { 875 // });
879 // // console.log("deduction", deductionValue_.deductionValue); 876 // var totalDeductions = "";
880 // totalDeductions = 877 // this.editedItem.deduction.forEach(deductionValue_ => {
881 // Number(totalDeductions) + Number(deductionValue_.deductionValue); 878 // if (deductionValue_.deductionValue != "") {
882 // console.log("this.totalDeductions", totalDeductions); 879 // // console.log("deduction", deductionValue_.deductionValue);
883 // } 880 // totalDeductions =
884 // // this.editedItem.totalDeduction = totalDeductions; 881 // Number(totalDeductions) + Number(deductionValue_.deductionValue);
885 // // console.log("this.totalDeduction", this.editedItem.totalDeduction); 882 // console.log("this.totalDeductions", totalDeductions);
886 // }); 883 // }
887 // }, 884 // // this.editedItem.totalDeduction = totalDeductions;
888 // deleteSelectAllowances: function(index) { 885 // // console.log("this.totalDeduction", this.editedItem.totalDeduction);
889 // this.salaryTypeData.splice(index, 1); 886 // });
890 // }, 887 // },
891 // deleteallowancesAdd: function(index) { 888 // deleteSelectAllowances: function(index) {
892 // this.editedItem.allowances.splice(index, 1); 889 // this.salaryTypeData.splice(index, 1);
893 // }, 890 // },
894 // deleteSelectDeduction: function(index) { 891 // deleteallowancesAdd: function(index) {
895 // this.salaryTypeDeductionData.splice(index, 1); 892 // this.editedItem.allowances.splice(index, 1);
896 // }, 893 // },
897 // deletedeductionAdd: function(index) { 894 // deleteSelectDeduction: function(index) {
898 // this.editedItem.deduction.splice(index, 1); 895 // this.salaryTypeDeductionData.splice(index, 1);
899 // }, 896 // },
900 // clear() { 897 // deletedeductionAdd: function(index) {
901 // this.$refs.form.reset(); 898 // this.editedItem.deduction.splice(index, 1);
902 // this.disable = false; 899 // },
903 // } 900 // clear() {
904 }, 901 // this.$refs.form.reset();
905 902 // this.disable = false;
906 mounted() { 903 // }
907 this.token = this.$store.state.token; 904 },
908 this.getRole(); 905
909 this.getSalaryList(); 906 mounted() {
910 this.getHourlyList(); 907 this.token = this.$store.state.token;
911 }, 908 this.getRole();
src/pages/Payroll/salaryTemplate.vue
Diff comments   View file @8b7976c
1 <template> 1 <template>
2 <v-container fluid class="body-color" style="box-sizing: border-box;"> 2 <v-container fluid class="body-color" style="box-sizing: border-box;">
3 <!-- ****** EDIT SALARY ****** --> 3 <!-- ****** EDIT SALARY ****** -->
4 <v-dialog v-model="editSalaryDialog" persistent> 4 <v-dialog v-model="editSalaryDialog" persistent>
5 <v-card flat class="text-xs-center white--text"> 5 <v-card flat class="text-xs-center white--text">
6 <v-layout> 6 <v-layout>
7 <v-flex xs12 class="card-style pa-2"> 7 <v-flex xs12 class="card-style pa-2">
8 <label class="title text-xs-center">Edit Salary</label> 8 <label class="title text-xs-center">Edit Salary</label>
9 <v-icon size="24" color="white" class="right" @click="editSalaryDialog = false">cancel</v-icon> 9 <v-icon size="24" color="white" class="right" @click="editSalaryDialog = false">cancel</v-icon>
10 </v-flex> 10 </v-flex>
11 </v-layout> 11 </v-layout>
12 12
13 <v-flex xs12 sm12> 13 <v-flex xs12 sm12>
14 <v-container fluid grid-list-md> 14 <v-container fluid grid-list-md>
15 <v-layout wrap> 15 <v-layout wrap>
16 <v-flex xs12 sm12 md6> 16 <v-flex xs12 sm12 md6>
17 <v-card flat> 17 <v-card flat>
18 <v-toolbar dark class="card-styles" flat> 18 <v-toolbar dark class="card-styles" flat>
19 <v-spacer></v-spacer> 19 <v-spacer></v-spacer>
20 <h3>Salary Template</h3> 20 <h3>Salary Template</h3>
21 <v-spacer></v-spacer> 21 <v-spacer></v-spacer>
22 </v-toolbar> 22 </v-toolbar>
23 <v-form ref="form" v-model="valid" lazy-validation class="py-4"> 23 <v-form ref="form" v-model="valid" lazy-validation class="py-4">
24 <v-layout> 24 <v-layout>
25 <v-flex xs4 class="pt-4 subheading"> 25 <v-flex xs4 class="pt-4 subheading">
26 <label class="right hidden-xs-only">Salary Grades :</label> 26 <label class="right hidden-xs-only">Salary Grades :</label>
27 </v-flex> 27 </v-flex>
28 <v-flex xs8 sm7 class="ml-3"> 28 <v-flex xs8 sm7 class="ml-3">
29 <v-flex xs8 sm7 class="ml-3"> 29 <v-flex xs8 sm7 class="ml-3">
30 <v-text-field :rules="salaryRules" v-model="editedItem.salaryGrades"></v-text-field> 30 <v-text-field :rules="salaryRules" v-model="editedItem.salaryGrades"></v-text-field>
31 </v-flex> 31 </v-flex>
32 </v-flex> 32 </v-flex>
33 </v-layout> 33 </v-layout>
34 <v-layout> 34 <v-layout>
35 <v-flex xs4 class="pt-4 subheading"> 35 <v-flex xs4 class="pt-4 subheading">
36 <label class="right">Basic Salary :</label> 36 <label class="right">Basic Salary :</label>
37 </v-flex> 37 </v-flex>
38 <v-flex xs8 sm7 class="ml-3"> 38 <v-flex xs8 sm7 class="ml-3">
39 <v-flex xs8 sm7 class="ml-3"> 39 <v-flex xs8 sm7 class="ml-3">
40 <v-text-field :rules="basicRules" v-model="editedItem.basicSalary"></v-text-field> 40 <v-text-field :rules="basicRules" v-model="editedItem.basicSalary"></v-text-field>
41 </v-flex> 41 </v-flex>
42 </v-flex> 42 </v-flex>
43 </v-layout> 43 </v-layout>
44 <v-layout> 44 <v-layout>
45 <v-flex xs4 class="pt-4 subheading"> 45 <v-flex xs4 class="pt-4 subheading">
46 <label class="right">Overtime Rate (Per Hour) :</label> 46 <label class="right">Overtime Rate (Per Hour) :</label>
47 </v-flex> 47 </v-flex>
48 <v-flex xs8 sm7 class="ml-3"> 48 <v-flex xs8 sm7 class="ml-3">
49 <v-flex xs8 sm7 class="ml-3"> 49 <v-flex xs8 sm7 class="ml-3">
50 <v-text-field :rules="overtimeRules" v-model="editedItem.overtimeRate"></v-text-field> 50 <v-text-field :rules="overtimeRules" v-model="editedItem.overtimeRate"></v-text-field>
51 </v-flex> 51 </v-flex>
52 </v-flex> 52 </v-flex>
53 </v-layout> 53 </v-layout>
54 </v-form> 54 </v-form>
55 </v-card> 55 </v-card>
56 </v-flex> 56 </v-flex>
57 <!-- <v-flex xs12 sm12 md5></v-flex> --> 57 <!-- <v-flex xs12 sm12 md5></v-flex> -->
58 <v-flex xs12 sm12 md6> 58 <v-flex xs12 sm12 md6>
59 <v-card flat> 59 <v-card flat>
60 <v-toolbar dark class="card-styles" flat> 60 <v-toolbar dark class="card-styles" flat>
61 <v-spacer></v-spacer> 61 <v-spacer></v-spacer>
62 <h3>Allowances</h3> 62 <h3>Allowances</h3>
63 <v-spacer></v-spacer> 63 <v-spacer></v-spacer>
64 </v-toolbar> 64 </v-toolbar>
65 <v-layout v-for="(editedItem,index) in editedItem.allowances" :key="index"> 65 <v-layout v-for="(editedItem,index) in editedItem.allowances" :key="index">
66 <v-flex xs4 class="mt-4 hidden-xs-only hidden-sm-only"> 66 <v-flex xs4 class="mt-4 hidden-xs-only hidden-sm-only">
67 <v-text-field 67 <v-text-field
68 solo 68 solo
69 label="Enter Allowances Label" 69 label="Enter Allowances Label"
70 v-model="editedItem.allowancesName" 70 v-model="editedItem.allowancesName"
71 ></v-text-field> 71 ></v-text-field>
72 </v-flex> 72 </v-flex>
73 <v-flex xs8 sm4 class="mt-4 hidden-xs-only hidden-sm-only"> 73 <v-flex xs8 sm4 class="mt-4 hidden-xs-only hidden-sm-only">
74 <v-text-field 74 <v-text-field
75 solo 75 solo
76 v-model="editedItem.allowancesValue" 76 v-model="editedItem.allowancesValue"
77 label="Enter Allowances Value" 77 label="Enter Allowances Value"
78 v-on:keyup="addAllowancesValue" 78 v-on:keyup="addAllowancesValue"
79 ></v-text-field> 79 ></v-text-field>
80 </v-flex> 80 </v-flex>
81 <v-flex xs4 sm6 class="mt-4 hidden-xs-only hidden-sm-only"> 81 <v-flex xs4 sm6 class="mt-4 hidden-xs-only hidden-sm-only">
82 <v-btn 82 <v-btn
83 color="white" 83 color="white"
84 round 84 round
85 class="right mt-3" 85 class="right mt-3"
86 @click="deleteallowancesAdd(index)" 86 @click="deleteallowancesAdd(index)"
87 v-if="index != 0" 87 v-if="index != 0"
88 > 88 >
89 <img src="/static/icon/delete1.png" style="width: 30px; height: 30px;" /> 89 <img src="/static/icon/delete1.png" style="width: 30px; height: 30px;" />
90 </v-btn> 90 </v-btn>
91 <v-btn color="white" round class="right mt-3" @click="allowancesAdd"> 91 <v-btn color="white" round class="right mt-3" @click="allowancesAdd">
92 <img src="/static/icon/add1.png" style="width: 30px; height: 30px;" /> 92 <img src="/static/icon/add1.png" style="width: 30px; height: 30px;" />
93 </v-btn> 93 </v-btn>
94 </v-flex> 94 </v-flex>
95 </v-layout> 95 </v-layout>
96 <!-- <v-flex xs12 sm12 md6> --> 96 <!-- <v-flex xs12 sm12 md6> -->
97 <v-card flat> 97 <v-card flat>
98 <v-toolbar dark class="card-styles" flat> 98 <v-toolbar dark class="card-styles" flat>
99 <v-spacer></v-spacer> 99 <v-spacer></v-spacer>
100 <h3>Deduction</h3> 100 <h3>Deduction</h3>
101 <v-spacer></v-spacer> 101 <v-spacer></v-spacer>
102 </v-toolbar> 102 </v-toolbar>
103 <v-layout v-for="(editedItem,index) in editedItem.deduction" :key="index"> 103 <v-layout v-for="(editedItem,index) in editedItem.deduction" :key="index">
104 <v-flex xs4 class="mt-4 hidden-xs-only hidden-sm-only"> 104 <v-flex xs4 class="mt-4 hidden-xs-only hidden-sm-only">
105 <v-text-field 105 <v-text-field
106 solo 106 solo
107 label="Enter Deduction Label" 107 label="Enter Deduction Label"
108 v-model="editedItem.deductionName" 108 v-model="editedItem.deductionName"
109 ></v-text-field> 109 ></v-text-field>
110 </v-flex> 110 </v-flex>
111 <v-flex xs8 sm4 class="mt-4 hidden-xs-only hidden-sm-only"> 111 <v-flex xs8 sm4 class="mt-4 hidden-xs-only hidden-sm-only">
112 <v-text-field 112 <v-text-field
113 solo 113 solo
114 label="Enter Deduction Value" 114 label="Enter Deduction Value"
115 v-model="editedItem.deductionValue" 115 v-model="editedItem.deductionValue"
116 v-on:keyup="addDeductionValue" 116 v-on:keyup="addDeductionValue"
117 ></v-text-field> 117 ></v-text-field>
118 </v-flex> 118 </v-flex>
119 <v-flex xs4 sm6 class="mt-4 hidden-xs-only hidden-sm-only"> 119 <v-flex xs4 sm6 class="mt-4 hidden-xs-only hidden-sm-only">
120 <v-btn 120 <v-btn
121 color="white" 121 color="white"
122 round 122 round
123 class="right mt-3" 123 class="right mt-3"
124 @click="deletedeductionAdd(index)" 124 @click="deletedeductionAdd(index)"
125 v-if="index != 0" 125 v-if="index != 0"
126 > 126 >
127 <img src="/static/icon/delete1.png" style="width: 30px; height: 30px;" /> 127 <img src="/static/icon/delete1.png" style="width: 30px; height: 30px;" />
128 </v-btn> 128 </v-btn>
129 <v-btn color="white" round class="right mt-3" @click="deductionAdd"> 129 <v-btn color="white" round class="right mt-3" @click="deductionAdd">
130 <img src="/static/icon/add1.png" style="width: 30px; height: 30px;" /> 130 <img src="/static/icon/add1.png" style="width: 30px; height: 30px;" />
131 </v-btn> 131 </v-btn>
132 </v-flex> 132 </v-flex>
133 </v-layout> 133 </v-layout>
134 </v-card> 134 </v-card>
135 <!-- </v-flex> --> 135 <!-- </v-flex> -->
136 </v-card> 136 </v-card>
137 </v-flex> 137 </v-flex>
138 <!-- <v-flex xs12 sm12 md6> 138 <!-- <v-flex xs12 sm12 md6>
139 <v-card flat> 139 <v-card flat>
140 <v-toolbar dark class="card-styles" flat> 140 <v-toolbar dark class="card-styles" flat>
141 <v-spacer></v-spacer> 141 <v-spacer></v-spacer>
142 <h3>Deduction</h3> 142 <h3>Deduction</h3>
143 <v-spacer></v-spacer> 143 <v-spacer></v-spacer>
144 </v-toolbar> 144 </v-toolbar>
145 <v-layout v-for="(editedItem,index) in editedItem.deduction" :key="index"> 145 <v-layout v-for="(editedItem,index) in editedItem.deduction" :key="index">
146 <v-flex xs4 class="mt-4 hidden-xs-only hidden-sm-only"> 146 <v-flex xs4 class="mt-4 hidden-xs-only hidden-sm-only">
147 <v-text-field 147 <v-text-field
148 solo 148 solo
149 label="Enter Deduction Label" 149 label="Enter Deduction Label"
150 v-model="editedItem.deductionName" 150 v-model="editedItem.deductionName"
151 ></v-text-field> 151 ></v-text-field>
152 </v-flex> 152 </v-flex>
153 <v-flex xs8 sm4 class="mt-4 hidden-xs-only hidden-sm-only"> 153 <v-flex xs8 sm4 class="mt-4 hidden-xs-only hidden-sm-only">
154 <v-text-field 154 <v-text-field
155 solo 155 solo
156 label="Enter Deduction Value" 156 label="Enter Deduction Value"
157 v-model="editedItem.deductionValue" 157 v-model="editedItem.deductionValue"
158 v-on:keyup="addDeductionValue" 158 v-on:keyup="addDeductionValue"
159 ></v-text-field> 159 ></v-text-field>
160 </v-flex> 160 </v-flex>
161 <v-flex xs4 sm6 class="mt-4 hidden-xs-only hidden-sm-only"> 161 <v-flex xs4 sm6 class="mt-4 hidden-xs-only hidden-sm-only">
162 <v-btn 162 <v-btn
163 color="white" 163 color="white"
164 round 164 round
165 class="right mt-3" 165 class="right mt-3"
166 @click="deletedeductionAdd(index)" 166 @click="deletedeductionAdd(index)"
167 v-if="index != 0" 167 v-if="index != 0"
168 > 168 >
169 <img src="/static/icon/delete1.png" style="width: 30px; height: 30px;" /> 169 <img src="/static/icon/delete1.png" style="width: 30px; height: 30px;" />
170 </v-btn> 170 </v-btn>
171 <v-btn color="white" round class="right mt-3" @click="deductionAdd"> 171 <v-btn color="white" round class="right mt-3" @click="deductionAdd">
172 <img src="/static/icon/add1.png" style="width: 30px; height: 30px;" /> 172 <img src="/static/icon/add1.png" style="width: 30px; height: 30px;" />
173 </v-btn> 173 </v-btn>
174 </v-flex> 174 </v-flex>
175 </v-layout> 175 </v-layout>
176 </v-card> 176 </v-card>
177 </v-flex>--> 177 </v-flex>-->
178 <!-- <v-flex xs12 sm12 md4></v-flex> --> 178 <!-- <v-flex xs12 sm12 md4></v-flex> -->
179 <v-flex xs12 sm12 md12 style="padding-top: 1%;"> 179 <v-flex xs12 sm12 md12 style="padding-top: 1%;">
180 <v-card flat> 180 <v-card flat>
181 <v-toolbar dark class="card-styles" flat> 181 <v-toolbar dark class="card-styles" flat>
182 <v-spacer></v-spacer> 182 <v-spacer></v-spacer>
183 <h3>Total Salary Details</h3> 183 <h3>Total Salary Details</h3>
184 <v-spacer></v-spacer> 184 <v-spacer></v-spacer>
185 </v-toolbar> 185 </v-toolbar>
186 <v-layout> 186 <v-layout>
187 <v-flex xs4 class="mt-4 hidden-xs-only hidden-sm-only"> 187 <v-flex xs4 class="mt-4 hidden-xs-only hidden-sm-only">
188 <v-text-field solo value="Gross Salary"></v-text-field> 188 <v-text-field solo value="Gross Salary"></v-text-field>
189 </v-flex> 189 </v-flex>
190 <v-flex xs8 sm7 class="mt-4 hidden-xs-only hidden-sm-only"> 190 <v-flex xs8 sm7 class="mt-4 hidden-xs-only hidden-sm-only">
191 <v-flex xs8 sm7 class="ml-3"> 191 <v-flex xs8 sm7 class="ml-3">
192 <v-text-field v-model="editedItem.grossSalary" box readonly></v-text-field> 192 <v-text-field v-model="editedItem.grossSalary" box readonly></v-text-field>
193 </v-flex> 193 </v-flex>
194 </v-flex> 194 </v-flex>
195 </v-layout> 195 </v-layout>
196 <v-layout> 196 <v-layout>
197 <v-flex xs4 class="mt-4 hidden-xs-only hidden-sm-only"> 197 <v-flex xs4 class="mt-4 hidden-xs-only hidden-sm-only">
198 <v-text-field solo value="Total Deduction"></v-text-field> 198 <v-text-field solo value="Total Deduction"></v-text-field>
199 </v-flex> 199 </v-flex>
200 <v-flex xs8 sm7 class="mt-4 hidden-xs-only hidden-sm-only"> 200 <v-flex xs8 sm7 class="mt-4 hidden-xs-only hidden-sm-only">
201 <v-flex xs8 sm7 class="ml-3"> 201 <v-flex xs8 sm7 class="ml-3">
202 <v-text-field v-model="editedItem.totalDeduction" box readonly></v-text-field> 202 <v-text-field v-model="editedItem.totalDeduction" box readonly></v-text-field>
203 </v-flex> 203 </v-flex>
204 </v-flex> 204 </v-flex>
205 </v-layout> 205 </v-layout>
206 <v-layout> 206 <v-layout>
207 <v-flex xs4 class="mt-4 hidden-xs-only hidden-sm-only"> 207 <v-flex xs4 class="mt-4 hidden-xs-only hidden-sm-only">
208 <v-text-field solo value="Net Salary"></v-text-field> 208 <v-text-field solo value="Net Salary"></v-text-field>
209 </v-flex> 209 </v-flex>
210 <v-flex xs8 sm7 class="mt-4 hidden-xs-only hidden-sm-only"> 210 <v-flex xs8 sm7 class="mt-4 hidden-xs-only hidden-sm-only">
211 <v-flex xs8 sm7 class="ml-3"> 211 <v-flex xs8 sm7 class="ml-3">
212 <v-text-field v-model="editedItem.netSalary" box readonly></v-text-field> 212 <v-text-field v-model="editedItem.netSalary" box readonly></v-text-field>
213 </v-flex> 213 </v-flex>
214 </v-flex> 214 </v-flex>
215 </v-layout> 215 </v-layout>
216 </v-card> 216 </v-card>
217 <v-layout> 217 <v-layout>
218 <v-flex xs12> 218 <v-flex xs12>
219 <v-card-actions> 219 <v-card-actions>
220 <v-spacer class="hidden-xs-only"></v-spacer> 220 <v-spacer class="hidden-xs-only"></v-spacer>
221 <v-btn 221 <v-btn
222 color="open-dialog-button" 222 color="open-dialog-button"
223 dark 223 dark
224 class="right add-button" 224 class="right add-button"
225 @click="save" 225 @click="save"
226 >Update Salary Template</v-btn> 226 >Update Salary Template</v-btn>
227 </v-card-actions> 227 </v-card-actions>
228 </v-flex> 228 </v-flex>
229 </v-layout> 229 </v-layout>
230 </v-flex> 230 </v-flex>
231 </v-layout> 231 </v-layout>
232 </v-container> 232 </v-container>
233 </v-flex> 233 </v-flex>
234 </v-card> 234 </v-card>
235 </v-dialog> 235 </v-dialog>
236 236
237 <!-- ****** PROFILE VIEW ****** --> 237 <!-- ****** PROFILE VIEW ****** -->
238 238
239 <v-dialog v-model="profileSalaryDialog" persistent> 239 <v-dialog v-model="profileSalaryDialog" persistent>
240 <v-card flat class="text-xs-center white--text"> 240 <v-card flat class="text-xs-center white--text">
241 <v-layout> 241 <v-layout>
242 <v-flex xs12 class="card-style pa-2"> 242 <v-flex xs12 class="card-style pa-2">
243 <label class="title text-xs-center">View Salary</label> 243 <label class="title text-xs-center">View Salary</label>
244 <v-icon 244 <v-icon
245 size="24" 245 size="24"
246 color="white" 246 color="white"
247 class="right" 247 class="right"
248 @click="profileSalaryDialog = false" 248 @click="profileSalaryDialog = false"
249 >cancel</v-icon> 249 >cancel</v-icon>
250 </v-flex> 250 </v-flex>
251 </v-layout> 251 </v-layout>
252 252
253 <v-flex xs12 sm12> 253 <v-flex xs12 sm12>
254 <v-container fluid grid-list-md> 254 <v-container fluid grid-list-md>
255 <v-layout wrap> 255 <v-layout wrap>
256 <v-flex xs12 sm12 md6> 256 <v-flex xs12 sm12 md6>
257 <v-card flat> 257 <v-card flat>
258 <v-toolbar dark class="card-styles" flat> 258 <v-toolbar dark class="card-styles" flat>
259 <v-spacer></v-spacer> 259 <v-spacer></v-spacer>
260 <h3>Salary Template</h3> 260 <h3>Salary Template</h3>
261 <v-spacer></v-spacer> 261 <v-spacer></v-spacer>
262 </v-toolbar> 262 </v-toolbar>
263 <v-form ref="form" v-model="valid" lazy-validation class="py-4"> 263 <v-form ref="form" v-model="valid" lazy-validation class="py-4">
264 <v-layout> 264 <v-layout>
265 <v-flex xs4 class="pt-4 subheading"> 265 <v-flex xs4 class="pt-4 subheading">
266 <label class="right hidden-xs-only">Salary Grades :</label> 266 <label class="right hidden-xs-only">Salary Grades :</label>
267 </v-flex> 267 </v-flex>
268 <v-flex xs8 sm7 class="ml-3"> 268 <v-flex xs8 sm7 class="ml-3">
269 <v-flex xs8 sm7 class="ml-3"> 269 <v-flex xs8 sm7 class="ml-3">
270 <v-text-field 270 <v-text-field
271 :rules="salaryRules" 271 :rules="salaryRules"
272 v-model="editedItem.salaryGrades" 272 v-model="editedItem.salaryGrades"
273 readonly 273 readonly
274 ></v-text-field> 274 ></v-text-field>
275 </v-flex> 275 </v-flex>
276 </v-flex> 276 </v-flex>
277 </v-layout> 277 </v-layout>
278 <v-layout> 278 <v-layout>
279 <v-flex xs4 class="pt-4 subheading"> 279 <v-flex xs4 class="pt-4 subheading">
280 <label class="right">Basic Salary :</label> 280 <label class="right">Basic Salary :</label>
281 </v-flex> 281 </v-flex>
282 <v-flex xs8 sm7 class="ml-3"> 282 <v-flex xs8 sm7 class="ml-3">
283 <v-flex xs8 sm7 class="ml-3"> 283 <v-flex xs8 sm7 class="ml-3">
284 <v-text-field 284 <v-text-field
285 :rules="basicRules" 285 :rules="basicRules"
286 v-model="editedItem.basicSalary" 286 v-model="editedItem.basicSalary"
287 readonly 287 readonly
288 ></v-text-field> 288 ></v-text-field>
289 </v-flex> 289 </v-flex>
290 </v-flex> 290 </v-flex>
291 </v-layout> 291 </v-layout>
292 <v-layout> 292 <v-layout>
293 <v-flex xs4 class="pt-4 subheading"> 293 <v-flex xs4 class="pt-4 subheading">
294 <label class="right">Overtime Rate (Per Hour) :</label> 294 <label class="right">Overtime Rate (Per Hour) :</label>
295 </v-flex> 295 </v-flex>
296 <v-flex xs8 sm7 class="ml-3"> 296 <v-flex xs8 sm7 class="ml-3">
297 <v-flex xs8 sm7 class="ml-3"> 297 <v-flex xs8 sm7 class="ml-3">
298 <v-text-field 298 <v-text-field
299 :rules="overtimeRules" 299 :rules="overtimeRules"
300 v-model="editedItem.overtimeRate" 300 v-model="editedItem.overtimeRate"
301 readonly 301 readonly
302 ></v-text-field> 302 ></v-text-field>
303 </v-flex> 303 </v-flex>
304 </v-flex> 304 </v-flex>
305 </v-layout> 305 </v-layout>
306 </v-form> 306 </v-form>
307 </v-card> 307 </v-card>
308 </v-flex> 308 </v-flex>
309 <!-- <v-flex xs12 sm12 md5></v-flex> --> 309 <!-- <v-flex xs12 sm12 md5></v-flex> -->
310 <v-flex xs12 sm12 md6> 310 <v-flex xs12 sm12 md6>
311 <v-card flat> 311 <v-card flat>
312 <v-toolbar dark class="card-styles" flat> 312 <v-toolbar dark class="card-styles" flat>
313 <v-spacer></v-spacer> 313 <v-spacer></v-spacer>
314 <h3>Allowances</h3> 314 <h3>Allowances</h3>
315 <v-spacer></v-spacer> 315 <v-spacer></v-spacer>
316 </v-toolbar> 316 </v-toolbar>
317 <v-layout v-for="(editedItem,index) in editedItem.allowances" :key="index"> 317 <v-layout v-for="(editedItem,index) in editedItem.allowances" :key="index">
318 <v-flex xs4 class="mt-4 hidden-xs-only hidden-sm-only"> 318 <v-flex xs4 class="mt-4 hidden-xs-only hidden-sm-only">
319 <v-text-field 319 <v-text-field
320 solo 320 solo
321 readonly 321 readonly
322 label="Enter Allowances Label" 322 label="Enter Allowances Label"
323 v-model="editedItem.allowancesName" 323 v-model="editedItem.allowancesName"
324 ></v-text-field> 324 ></v-text-field>
325 </v-flex> 325 </v-flex>
326 <v-flex xs8 sm4 class="mt-4 hidden-xs-only hidden-sm-only"> 326 <v-flex xs8 sm4 class="mt-4 hidden-xs-only hidden-sm-only">
327 <v-text-field 327 <v-text-field
328 solo 328 solo
329 readonly 329 readonly
330 v-model="editedItem.allowancesValue" 330 v-model="editedItem.allowancesValue"
331 label="Enter Allowances Value" 331 label="Enter Allowances Value"
332 ></v-text-field> 332 ></v-text-field>
333 </v-flex> 333 </v-flex>
334 </v-layout> 334 </v-layout>
335 <!-- <v-flex xs12 sm12 md6> --> 335 <!-- <v-flex xs12 sm12 md6> -->
336 <v-card flat> 336 <v-card flat>
337 <v-toolbar dark class="card-styles" flat> 337 <v-toolbar dark class="card-styles" flat>
338 <v-spacer></v-spacer> 338 <v-spacer></v-spacer>
339 <h3>Deduction</h3> 339 <h3>Deduction</h3>
340 <v-spacer></v-spacer> 340 <v-spacer></v-spacer>
341 </v-toolbar> 341 </v-toolbar>
342 <v-layout v-for="(editedItem,index) in editedItem.deduction" :key="index"> 342 <v-layout v-for="(editedItem,index) in editedItem.deduction" :key="index">
343 <v-flex xs4 class="mt-4 hidden-xs-only hidden-sm-only"> 343 <v-flex xs4 class="mt-4 hidden-xs-only hidden-sm-only">
344 <v-text-field 344 <v-text-field
345 solo 345 solo
346 readonly 346 readonly
347 label="Enter Deduction Label" 347 label="Enter Deduction Label"
348 v-model="editedItem.deductionName" 348 v-model="editedItem.deductionName"
349 ></v-text-field> 349 ></v-text-field>
350 </v-flex> 350 </v-flex>
351 <v-flex xs8 sm4 class="mt-4 hidden-xs-only hidden-sm-only"> 351 <v-flex xs8 sm4 class="mt-4 hidden-xs-only hidden-sm-only">
352 <v-text-field 352 <v-text-field
353 solo 353 solo
354 readonly 354 readonly
355 label="Enter Deduction Value" 355 label="Enter Deduction Value"
356 v-model="editedItem.deductionValue" 356 v-model="editedItem.deductionValue"
357 ></v-text-field> 357 ></v-text-field>
358 </v-flex> 358 </v-flex>
359 </v-layout> 359 </v-layout>
360 </v-card> 360 </v-card>
361 <!-- </v-flex> --> 361 <!-- </v-flex> -->
362 </v-card> 362 </v-card>
363 </v-flex> 363 </v-flex>
364 <!-- <v-flex xs12 sm12 md6> 364 <!-- <v-flex xs12 sm12 md6>
365 <v-card flat> 365 <v-card flat>
366 <v-toolbar dark class="card-styles" flat> 366 <v-toolbar dark class="card-styles" flat>
367 <v-spacer></v-spacer> 367 <v-spacer></v-spacer>
368 <h3>Deduction</h3> 368 <h3>Deduction</h3>
369 <v-spacer></v-spacer> 369 <v-spacer></v-spacer>
370 </v-toolbar> 370 </v-toolbar>
371 <v-layout v-for="(editedItem,index) in editedItem.deduction" :key="index"> 371 <v-layout v-for="(editedItem,index) in editedItem.deduction" :key="index">
372 <v-flex xs4 class="mt-4 hidden-xs-only hidden-sm-only"> 372 <v-flex xs4 class="mt-4 hidden-xs-only hidden-sm-only">
373 <v-text-field 373 <v-text-field
374 solo 374 solo
375 label="Enter Deduction Label" 375 label="Enter Deduction Label"
376 v-model="editedItem.deductionName" 376 v-model="editedItem.deductionName"
377 ></v-text-field> 377 ></v-text-field>
378 </v-flex> 378 </v-flex>
379 <v-flex xs8 sm4 class="mt-4 hidden-xs-only hidden-sm-only"> 379 <v-flex xs8 sm4 class="mt-4 hidden-xs-only hidden-sm-only">
380 <v-text-field 380 <v-text-field
381 solo 381 solo
382 label="Enter Deduction Value" 382 label="Enter Deduction Value"
383 v-model="editedItem.deductionValue" 383 v-model="editedItem.deductionValue"
384 ></v-text-field> 384 ></v-text-field>
385 </v-flex> 385 </v-flex>
386 </v-layout> 386 </v-layout>
387 </v-card> 387 </v-card>
388 </v-flex>--> 388 </v-flex>-->
389 <v-flex xs12 sm12 md4></v-flex> 389 <v-flex xs12 sm12 md4></v-flex>
390 <v-flex xs12 sm12 md12 style="padding-top: 1%;"> 390 <v-flex xs12 sm12 md12 style="padding-top: 1%;">
391 <v-card flat> 391 <v-card flat>
392 <v-toolbar dark class="card-styles" flat> 392 <v-toolbar dark class="card-styles" flat>
393 <v-spacer></v-spacer> 393 <v-spacer></v-spacer>
394 <h3>Total Salary Details</h3> 394 <h3>Total Salary Details</h3>
395 <v-spacer></v-spacer> 395 <v-spacer></v-spacer>
396 </v-toolbar> 396 </v-toolbar>
397 <v-layout> 397 <v-layout>
398 <v-flex xs4 class="mt-4 hidden-xs-only hidden-sm-only"> 398 <v-flex xs4 class="mt-4 hidden-xs-only hidden-sm-only">
399 <v-text-field solo value="Gross Salary"></v-text-field> 399 <v-text-field solo value="Gross Salary"></v-text-field>
400 </v-flex> 400 </v-flex>
401 <v-flex xs8 sm7 class="mt-4 hidden-xs-only hidden-sm-only"> 401 <v-flex xs8 sm7 class="mt-4 hidden-xs-only hidden-sm-only">
402 <v-flex xs8 sm7 class="ml-3"> 402 <v-flex xs8 sm7 class="ml-3">
403 <v-text-field v-model="editedItem.grossSalary" solo readonly></v-text-field> 403 <v-text-field v-model="editedItem.grossSalary" solo readonly></v-text-field>
404 </v-flex> 404 </v-flex>
405 </v-flex> 405 </v-flex>
406 </v-layout> 406 </v-layout>
407 <v-layout> 407 <v-layout>
408 <v-flex xs4 class="mt-4 hidden-xs-only hidden-sm-only"> 408 <v-flex xs4 class="mt-4 hidden-xs-only hidden-sm-only">
409 <v-text-field solo value="Total Deduction"></v-text-field> 409 <v-text-field solo value="Total Deduction"></v-text-field>
410 </v-flex> 410 </v-flex>
411 <v-flex xs8 sm7 class="mt-4 hidden-xs-only hidden-sm-only"> 411 <v-flex xs8 sm7 class="mt-4 hidden-xs-only hidden-sm-only">
412 <v-flex xs8 sm7 class="ml-3"> 412 <v-flex xs8 sm7 class="ml-3">
413 <v-text-field v-model="editedItem.totalDeduction" solo readonly></v-text-field> 413 <v-text-field v-model="editedItem.totalDeduction" solo readonly></v-text-field>
414 </v-flex> 414 </v-flex>
415 </v-flex> 415 </v-flex>
416 </v-layout> 416 </v-layout>
417 <v-layout> 417 <v-layout>
418 <v-flex xs4 class="mt-4 hidden-xs-only hidden-sm-only"> 418 <v-flex xs4 class="mt-4 hidden-xs-only hidden-sm-only">
419 <v-text-field solo value="Net Salary"></v-text-field> 419 <v-text-field solo value="Net Salary"></v-text-field>
420 </v-flex> 420 </v-flex>
421 <v-flex xs8 sm7 class="mt-4 hidden-xs-only hidden-sm-only"> 421 <v-flex xs8 sm7 class="mt-4 hidden-xs-only hidden-sm-only">
422 <v-flex xs8 sm7 class="ml-3"> 422 <v-flex xs8 sm7 class="ml-3">
423 <b> 423 <b>
424 <v-text-field v-model="editedItem.netSalary" solo readonly></v-text-field> 424 <v-text-field v-model="editedItem.netSalary" solo readonly></v-text-field>
425 </b> 425 </b>
426 </v-flex> 426 </v-flex>
427 </v-flex> 427 </v-flex>
428 </v-layout> 428 </v-layout>
429 </v-card> 429 </v-card>
430 </v-flex> 430 </v-flex>
431 </v-layout> 431 </v-layout>
432 </v-container> 432 </v-container>
433 </v-flex> 433 </v-flex>
434 </v-card> 434 </v-card>
435 </v-dialog> 435 </v-dialog>
436 <!-- ****** EXAM TABLE****** --> 436 <!-- ****** EXAM TABLE****** -->
437 437
438 <v-toolbar color="transparent" flat> 438 <v-toolbar color="transparent" flat>
439 <v-btn 439 <v-btn
440 fab 440 fab
441 dark 441 dark
442 class="open-dialog-button hidden-xl-only hidden-md-only hidden-lg-only" 442 class="open-dialog-button hidden-xl-only hidden-md-only hidden-lg-only"
443 small 443 small
444 @click="addSalaryDialog = true" 444 @click="addSalaryDialog = true"
445 > 445 >
446 <v-icon dark>add</v-icon> 446 <v-icon dark>add</v-icon>
447 </v-btn> 447 </v-btn>
448 <v-btn 448 <v-btn
449 round 449 round
450 class="open-dialog-button hidden-sm-only hidden-xs-only" 450 class="open-dialog-button hidden-sm-only hidden-xs-only"
451 dark 451 dark
452 @click="addSalaryDialog = true" 452 @click="addSalaryDialog = true"
453 > 453 >
454 <v-icon class="white--text pr-1" size="20">add</v-icon>Add Salary 454 <v-icon class="white--text pr-1" size="20">add</v-icon>Add Salary
455 </v-btn> 455 </v-btn>
456 <v-spacer></v-spacer> 456 <v-spacer></v-spacer>
457 <v-card-title class="body-1" v-show="show"> 457 <v-card-title class="body-1" v-show="show">
458 <v-btn icon large flat @click="displaySearch"> 458 <v-btn icon large flat @click="displaySearch">
459 <v-avatar size="27"> 459 <v-avatar size="27">
460 <img src="/static/icon/search.png" alt="icon" /> 460 <img src="/static/icon/search.png" alt="icon" />
461 </v-avatar> 461 </v-avatar>
462 </v-btn> 462 </v-btn>
463 </v-card-title> 463 </v-card-title>
464 <v-flex xs8 sm8 md3 lg2 v-if="showSearch"> 464 <v-flex xs8 sm8 md3 lg2 v-if="showSearch">
465 <v-layout> 465 <v-layout>
466 <v-text-field 466 <v-text-field
467 autofocus 467 autofocus
468 v-model="search" 468 v-model="search"
469 label="Search" 469 label="Search"
470 prepend-inner-icon="search" 470 prepend-inner-icon="search"
471 color="primary" 471 color="primary"
472 ></v-text-field> 472 ></v-text-field>
473 <v-icon @click="closeSearch" color="error">close</v-icon> 473 <v-icon @click="closeSearch" color="error">close</v-icon>
474 </v-layout> 474 </v-layout>
475 </v-flex> 475 </v-flex>
476 </v-toolbar> 476 </v-toolbar>
477 <v-data-table 477 <v-data-table
478 :headers="headers" 478 :headers="headers"
479 :items="salaryData" 479 :items="salaryData"
480 :pagination.sync="pagination" 480 :pagination.sync="pagination"
481 :search="search" 481 :search="search"
482 > 482 >
483 <template slot="items" slot-scope="props"> 483 <template slot="items" slot-scope="props">
484 <tr class="tr"> 484 <tr class="tr">
485 <td class="td td-row">{{ props.index + 1}}</td> 485 <td class="td td-row">{{ props.index + 1}}</td>
486 <td class="td td-row text-xs-center">{{ props.item.salaryGrades}}</td> 486 <td class="td td-row text-xs-center">{{ props.item.salaryGrades}}</td>
487 <td class="td td-row text-xs-center">{{ props.item.basicSalary}}</td> 487 <td class="td td-row text-xs-center">{{ props.item.basicSalary}}</td>
488 <td class="td td-row text-xs-center">{{ props.item.overtimeRate}}</td> 488 <td class="td td-row text-xs-center">{{ props.item.overtimeRate}}</td>
489 <td class="td td-row text-xs-center"> 489 <td class="td td-row text-xs-center">
490 <span> 490 <span>
491 <v-tooltip top> 491 <v-tooltip top>
492 <img 492 <img
493 slot="activator" 493 slot="activator"
494 style="cursor:pointer; width:25px; height:25px; " 494 style="cursor:pointer; width:25px; height:25px; "
495 class="mr-3" 495 class="mr-3"
496 @click="profile(props.item)" 496 @click="profile(props.item)"
497 src="/static/icon/view.png" 497 src="/static/icon/view.png"
498 /> 498 />
499 <span>View</span> 499 <span>View</span>
500 </v-tooltip> 500 </v-tooltip>
501 <v-tooltip top> 501 <v-tooltip top>
502 <img 502 <img
503 slot="activator" 503 slot="activator"
504 style="cursor:pointer; width:20px; height:18px; " 504 style="cursor:pointer; width:20px; height:18px; "
505 class="mr-3" 505 class="mr-3"
506 @click="editItem(props.item)" 506 @click="editItem(props.item)"
507 src="/static/icon/edit.png" 507 src="/static/icon/edit.png"
508 /> 508 />
509 <span>Edit</span> 509 <span>Edit</span>
510 </v-tooltip> 510 </v-tooltip>
511 <v-tooltip top> 511 <v-tooltip top>
512 <img 512 <img
513 slot="activator" 513 slot="activator"
514 style="cursor:pointer; width:20px; height:20px; " 514 style="cursor:pointer; width:20px; height:20px; "
515 class="mr-3" 515 class="mr-3"
516 @click="deleteItem(props.item)" 516 @click="deleteItem(props.item)"
517 src="/static/icon/delete.png" 517 src="/static/icon/delete.png"
518 /> 518 />
519 <span>Delete</span> 519 <span>Delete</span>
520 </v-tooltip> 520 </v-tooltip>
521 </span> 521 </span>
522 </td> 522 </td>
523 </tr> 523 </tr>
524 </template> 524 </template>
525 <v-alert 525 <v-alert
526 slot="no-results" 526 slot="no-results"
527 :value="true" 527 :value="true"
528 color="error" 528 color="error"
529 icon="warning" 529 icon="warning"
530 >Your search for "{{ search }}" found no results.</v-alert> 530 >Your search for "{{ search }}" found no results.</v-alert>
531 </v-data-table> 531 </v-data-table>
532 532
533 <!-- ****** ADD SALARY ****** --> 533 <!-- ****** ADD SALARY ****** -->
534 <v-dialog v-model="addSalaryDialog" v-if="addSalaryDialog" persistent> 534 <v-dialog v-model="addSalaryDialog" v-if="addSalaryDialog" persistent>
535 <v-card flat class="text-xs-center white--text"> 535 <v-card flat class="text-xs-center white--text">
536 <v-layout> 536 <v-layout>
537 <v-flex xs12 class="card-style pa-2"> 537 <v-flex xs12 class="card-style pa-2">
538 <label class="title text-xs-center">Add Salary</label> 538 <label class="title text-xs-center">Add Salary</label>
539 <v-icon size="24" color="white" class="right" @click="closeAddSalaryModel">cancel</v-icon> 539 <v-icon size="24" color="white" class="right" @click="closeAddSalaryModel">cancel</v-icon>
540 </v-flex> 540 </v-flex>
541 </v-layout> 541 </v-layout>
542 542
543 <v-flex xs12 sm12> 543 <v-flex xs12 sm12>
544 <v-container fluid grid-list-md> 544 <v-container fluid grid-list-md>
545 <v-layout wrap> 545 <v-layout wrap>
546 <v-flex xs12 sm12 md6> 546 <v-flex xs12 sm12 md6>
547 <v-card flat> 547 <v-card flat>
548 <v-toolbar dark class="card-styles" flat> 548 <v-toolbar dark class="card-styles" flat>
549 <v-spacer></v-spacer> 549 <v-spacer></v-spacer>
550 <h3>Salary Template</h3> 550 <h3>Salary Template</h3>
551 <v-spacer></v-spacer> 551 <v-spacer></v-spacer>
552 </v-toolbar> 552 </v-toolbar>
553 <v-form ref="form" v-model="valid" lazy-validation class="py-4"> 553 <v-form ref="form" v-model="valid" lazy-validation class="py-4">
554 <v-layout> 554 <v-layout>
555 <v-flex xs4 class="pt-4 subheading"> 555 <v-flex xs4 class="pt-4 subheading">
556 <label class="right hidden-xs-only">Salary Grades :</label> 556 <label class="right hidden-xs-only">Salary Grades :</label>
557 </v-flex> 557 </v-flex>
558 <v-flex xs8 sm7 class="ml-3"> 558 <v-flex xs8 sm7 class="ml-3">
559 <v-flex xs8 sm7 class="ml-3"> 559 <v-flex xs8 sm7 class="ml-3">
560 <v-text-field :rules="salaryRules" v-model="salaryType.salaryGrades"></v-text-field> 560 <v-text-field :rules="salaryRules" v-model="salaryType.salaryGrades"></v-text-field>
561 </v-flex> 561 </v-flex>
562 </v-flex> 562 </v-flex>
563 </v-layout> 563 </v-layout>
564 <v-layout> 564 <v-layout>
565 <v-flex xs4 class="pt-4 subheading"> 565 <v-flex xs4 class="pt-4 subheading">
566 <label class="right">Basic Salary :</label> 566 <label class="right">Basic Salary :</label>
567 </v-flex> 567 </v-flex>
568 <v-flex xs8 sm7 class="ml-3"> 568 <v-flex xs8 sm7 class="ml-3">
569 <v-flex xs8 sm7 class="ml-3"> 569 <v-flex xs8 sm7 class="ml-3">
570 <v-text-field 570 <v-text-field
571 :rules="basicRules" 571 :rules="basicRules"
572 v-on:keyup="addSalary" 572 v-on:keyup="addSalary"
573 v-model="salaryType.basicSalary" 573 v-model="salaryType.basicSalary"
574 ></v-text-field> 574 ></v-text-field>
575 </v-flex> 575 </v-flex>
576 </v-flex> 576 </v-flex>
577 </v-layout> 577 </v-layout>
578 <v-layout> 578 <v-layout>
579 <v-flex xs4 class="pt-4 subheading"> 579 <v-flex xs4 class="pt-4 subheading">
580 <label class="right">Overtime Rate (Per Hour) :</label> 580 <label class="right">Overtime Rate (Per Hour) :</label>
581 </v-flex> 581 </v-flex>
582 <v-flex xs8 sm7 class="ml-3"> 582 <v-flex xs8 sm7 class="ml-3">
583 <v-flex xs8 sm7 class="ml-3"> 583 <v-flex xs8 sm7 class="ml-3">
584 <v-text-field :rules="overtimeRules" v-model="salaryType.overtimeRate"></v-text-field> 584 <v-text-field :rules="overtimeRules" v-model="salaryType.overtimeRate"></v-text-field>
585 </v-flex> 585 </v-flex>
586 </v-flex> 586 </v-flex>
587 </v-layout> 587 </v-layout>
588 </v-form> 588 </v-form>
589 </v-card> 589 </v-card>
590 </v-flex> 590 </v-flex>
591 <!-- <v-flex xs12 sm12 md5></v-flex> --> 591 <!-- <v-flex xs12 sm12 md5></v-flex> -->
592 <v-flex xs12 sm12 md6> 592 <v-flex xs12 sm12 md6>
593 <v-card flat> 593 <v-card flat>
594 <v-toolbar dark class="card-styles" flat> 594 <v-toolbar dark class="card-styles" flat>
595 <v-spacer></v-spacer> 595 <v-spacer></v-spacer>
596 <h3>Allowances</h3> 596 <h3>Allowances</h3>
597 <v-spacer></v-spacer> 597 <v-spacer></v-spacer>
598 </v-toolbar> 598 </v-toolbar>
599 <v-layout v-for="(salaryType,index) in salaryTypeData" :key="index"> 599 <v-layout v-for="(salaryType,index) in salaryTypeData" :key="index">
600 <v-flex xs4 class="mt-4 hidden-xs-only hidden-sm-only"> 600 <v-flex xs4 class="mt-4 hidden-xs-only hidden-sm-only">
601 <v-text-field 601 <v-text-field
602 solo 602 solo
603 label="Enter Allowances Label" 603 label="Enter Allowances Label"
604 v-model="salaryType.allowancesName" 604 v-model="salaryType.allowancesName"
605 ></v-text-field> 605 ></v-text-field>
606 </v-flex> 606 </v-flex>
607 <v-flex xs8 sm4 class="mt-4 hidden-xs-only hidden-sm-only"> 607 <v-flex xs8 sm4 class="mt-4 hidden-xs-only hidden-sm-only">
608 <v-text-field 608 <v-text-field
609 solo 609 solo
610 v-model="salaryType.allowancesValue" 610 v-model="salaryType.allowancesValue"
611 label="Enter Allowances Value" 611 label="Enter Allowances Value"
612 v-on:keyup="addAllowances" 612 v-on:keyup="addAllowances"
613 ></v-text-field> 613 ></v-text-field>
614 </v-flex> 614 </v-flex>
615 <v-flex xs4 sm6 class="mt-4 hidden-xs-only hidden-sm-only"> 615 <v-flex xs4 sm6 class="mt-4 hidden-xs-only hidden-sm-only">
616 <v-btn 616 <v-btn
617 color="white" 617 color="white"
618 round 618 round
619 class="right mt-3" 619 class="right mt-3"
620 @click="deleteSelectAllowances(index)" 620 @click="deleteSelectAllowances(index)"
621 v-if="index != 0" 621 v-if="index != 0"
622 > 622 >
623 <img src="/static/icon/delete1.png" style="width: 30px; height: 30px;" /> 623 <img src="/static/icon/delete1.png" style="width: 30px; height: 30px;" />
624 </v-btn> 624 </v-btn>
625 <v-btn color="white" round class="right mt-3" @click="selectAllowances"> 625 <v-btn color="white" round class="right mt-3" @click="selectAllowances">
626 <img src="/static/icon/add1.png" style="width: 30px; height: 30px;" /> 626 <img src="/static/icon/add1.png" style="width: 30px; height: 30px;" />
627 </v-btn> 627 </v-btn>
628 </v-flex> 628 </v-flex>
629 </v-layout> 629 </v-layout>
630 <!-- <v-flex xs12 sm12 md6> --> 630 <!-- <v-flex xs12 sm12 md6> -->
631 <v-card flat> 631 <v-card flat>
632 <v-toolbar dark class="card-styles" flat> 632 <v-toolbar dark class="card-styles" flat>
633 <v-spacer></v-spacer> 633 <v-spacer></v-spacer>
634 <h3>Deduction</h3> 634 <h3>Deduction</h3>
635 <v-spacer></v-spacer> 635 <v-spacer></v-spacer>
636 </v-toolbar> 636 </v-toolbar>
637 <v-layout v-for="(salaryType,index) in salaryTypeDeductionData" :key="index"> 637 <v-layout v-for="(salaryType,index) in salaryTypeDeductionData" :key="index">
638 <v-flex xs4 class="mt-4 hidden-xs-only hidden-sm-only"> 638 <v-flex xs4 class="mt-4 hidden-xs-only hidden-sm-only">
639 <v-text-field 639 <v-text-field
640 solo 640 solo
641 label="Enter Deduction Label" 641 label="Enter Deduction Label"
642 v-model="salaryType.deductionName" 642 v-model="salaryType.deductionName"
643 ></v-text-field> 643 ></v-text-field>
644 </v-flex> 644 </v-flex>
645 <v-flex xs8 sm4 class="mt-4 hidden-xs-only hidden-sm-only"> 645 <v-flex xs8 sm4 class="mt-4 hidden-xs-only hidden-sm-only">
646 <v-text-field 646 <v-text-field
647 solo 647 solo
648 label="Enter Deduction Value" 648 label="Enter Deduction Value"
649 v-model="salaryType.deductionValue" 649 v-model="salaryType.deductionValue"
650 v-on:keyup="addDeduction" 650 v-on:keyup="addDeduction"
651 ></v-text-field> 651 ></v-text-field>
652 </v-flex> 652 </v-flex>
653 <v-flex xs4 sm6 class="mt-4 hidden-xs-only hidden-sm-only"> 653 <v-flex xs4 sm6 class="mt-4 hidden-xs-only hidden-sm-only">
654 <v-btn 654 <v-btn
655 color="white" 655 color="white"
656 round 656 round
657 class="right mt-3" 657 class="right mt-3"
658 @click="deleteSelectDeduction(index)" 658 @click="deleteSelectDeduction(index)"
659 v-if="index != 0" 659 v-if="index != 0"
660 > 660 >
661 <img src="/static/icon/delete1.png" style="width: 30px; height: 30px;" /> 661 <img src="/static/icon/delete1.png" style="width: 30px; height: 30px;" />
662 </v-btn> 662 </v-btn>
663 <v-btn color="white" round class="right mt-3" @click="selectDeduction"> 663 <v-btn color="white" round class="right mt-3" @click="selectDeduction">
664 <img src="/static/icon/add1.png" style="width: 30px; height: 30px;" /> 664 <img src="/static/icon/add1.png" style="width: 30px; height: 30px;" />
665 </v-btn> 665 </v-btn>
666 </v-flex> 666 </v-flex>
667 </v-layout> 667 </v-layout>
668 </v-card> 668 </v-card>
669 <!-- </v-flex> --> 669 <!-- </v-flex> -->
670 </v-card> 670 </v-card>
671 </v-flex> 671 </v-flex>
672 <!-- <v-flex xs12 sm12 md6> 672 <!-- <v-flex xs12 sm12 md6>
673 <v-card flat> 673 <v-card flat>
674 <v-toolbar dark class="card-styles" flat> 674 <v-toolbar dark class="card-styles" flat>
675 <v-spacer></v-spacer> 675 <v-spacer></v-spacer>
676 <h3>Deduction</h3> 676 <h3>Deduction</h3>
677 <v-spacer></v-spacer> 677 <v-spacer></v-spacer>
678 </v-toolbar> 678 </v-toolbar>
679 <v-layout v-for="(salaryType,index) in salaryTypeDeductionData" :key="index"> 679 <v-layout v-for="(salaryType,index) in salaryTypeDeductionData" :key="index">
680 <v-flex xs4 class="mt-4 hidden-xs-only hidden-sm-only"> 680 <v-flex xs4 class="mt-4 hidden-xs-only hidden-sm-only">
681 <v-text-field 681 <v-text-field
682 solo 682 solo
683 label="Enter Deduction Label" 683 label="Enter Deduction Label"
684 v-model="salaryType.deductionName" 684 v-model="salaryType.deductionName"
685 ></v-text-field> 685 ></v-text-field>
686 </v-flex> 686 </v-flex>
687 <v-flex xs8 sm4 class="mt-4 hidden-xs-only hidden-sm-only"> 687 <v-flex xs8 sm4 class="mt-4 hidden-xs-only hidden-sm-only">
688 <v-text-field 688 <v-text-field
689 solo 689 solo
690 label="Enter Deduction Value" 690 label="Enter Deduction Value"
691 v-model="salaryType.deductionValue" 691 v-model="salaryType.deductionValue"
692 v-on:keyup="addDeduction" 692 v-on:keyup="addDeduction"
693 ></v-text-field> 693 ></v-text-field>
694 </v-flex> 694 </v-flex>
695 <v-flex xs4 sm6 class="mt-4 hidden-xs-only hidden-sm-only"> 695 <v-flex xs4 sm6 class="mt-4 hidden-xs-only hidden-sm-only">
696 <v-btn 696 <v-btn
697 color="white" 697 color="white"
698 round 698 round
699 class="right mt-3" 699 class="right mt-3"
700 @click="deleteSelectDeduction(index)" 700 @click="deleteSelectDeduction(index)"
701 v-if="index != 0" 701 v-if="index != 0"
702 > 702 >
703 <img src="/static/icon/delete1.png" style="width: 30px; height: 30px;" /> 703 <img src="/static/icon/delete1.png" style="width: 30px; height: 30px;" />
704 </v-btn> 704 </v-btn>
705 <v-btn color="white" round class="right mt-3" @click="selectDeduction"> 705 <v-btn color="white" round class="right mt-3" @click="selectDeduction">
706 <img src="/static/icon/add1.png" style="width: 30px; height: 30px;" /> 706 <img src="/static/icon/add1.png" style="width: 30px; height: 30px;" />
707 </v-btn> 707 </v-btn>
708 </v-flex> 708 </v-flex>
709 </v-layout> 709 </v-layout>
710 </v-card> 710 </v-card>
711 </v-flex>--> 711 </v-flex>-->
712 <!-- <v-flex xs12 sm12 md4></v-flex> --> 712 <!-- <v-flex xs12 sm12 md4></v-flex> -->
713 <v-flex xs12 sm12 md12 style="padding-top: 1%;"> 713 <v-flex xs12 sm12 md12 style="padding-top: 1%;">
714 <v-card flat> 714 <v-card flat>
715 <v-toolbar dark class="card-styles" flat> 715 <v-toolbar dark class="card-styles" flat>
716 <v-spacer></v-spacer> 716 <v-spacer></v-spacer>
717 <h3>Total Salary Details</h3> 717 <h3>Total Salary Details</h3>
718 <v-spacer></v-spacer> 718 <v-spacer></v-spacer>
719 </v-toolbar> 719 </v-toolbar>
720 <v-layout> 720 <v-layout>
721 <v-flex xs4 class="pt-4 subheading"> 721 <v-flex xs4 class="pt-4 subheading">
722 <v-text-field solo value="Gross Salary"></v-text-field> 722 <v-text-field solo value="Gross Salary"></v-text-field>
723 </v-flex> 723 </v-flex>
724 <v-flex xs8 sm7 class="ml-3"> 724 <v-flex xs8 sm7 class="ml-3">
725 <v-flex xs8 sm7 class="ml-3"> 725 <v-flex xs8 sm7 class="ml-3">
726 <v-text-field v-model="grossSalary" box readonly></v-text-field> 726 <v-text-field v-model="grossSalary" box readonly></v-text-field>
727 </v-flex> 727 </v-flex>
728 </v-flex> 728 </v-flex>
729 </v-layout> 729 </v-layout>
730 <v-layout> 730 <v-layout>
731 <v-flex xs4 class="pt-4 subheading"> 731 <v-flex xs4 class="pt-4 subheading">
732 <v-text-field solo value="Total Deduction"></v-text-field> 732 <v-text-field solo value="Total Deduction"></v-text-field>
733 </v-flex> 733 </v-flex>
734 <v-flex xs8 sm7 class="ml-3"> 734 <v-flex xs8 sm7 class="ml-3">
735 <v-flex xs8 sm7 class="ml-3"> 735 <v-flex xs8 sm7 class="ml-3">
736 <v-text-field v-model="totalDeduction" box readonly></v-text-field> 736 <v-text-field v-model="totalDeduction" box readonly></v-text-field>
737 </v-flex> 737 </v-flex>
738 </v-flex> 738 </v-flex>
739 </v-layout> 739 </v-layout>
740 <v-layout> 740 <v-layout>
741 <v-flex xs4 class="pt-4 subheading"> 741 <v-flex xs4 class="pt-4 subheading">
742 <v-text-field solo value="Net Salary"></v-text-field> 742 <v-text-field solo value="Net Salary"></v-text-field>
743 </v-flex> 743 </v-flex>
744 <v-flex xs8 sm7 class="ml-3"> 744 <v-flex xs8 sm7 class="ml-3">
745 <v-flex xs8 sm7 class="ml-3"> 745 <v-flex xs8 sm7 class="ml-3">
746 <v-text-field v-model="salaryType.netSalary" box readonly></v-text-field> 746 <v-text-field v-model="salaryType.netSalary" box readonly></v-text-field>
747 </v-flex> 747 </v-flex>
748 </v-flex> 748 </v-flex>
749 </v-layout> 749 </v-layout>
750 </v-card> 750 </v-card>
751 <v-layout> 751 <v-layout>
752 <v-flex xs12> 752 <v-flex xs12>
753 <v-card-actions> 753 <v-card-actions>
754 <v-spacer class="hidden-xs-only"></v-spacer> 754 <v-spacer class="hidden-xs-only"></v-spacer>
755 <v-btn 755 <v-btn
756 color="open-dialog-button" 756 color="open-dialog-button"
757 dark 757 dark
758 class="right add-button" 758 class="right add-button"
759 @click="submit" 759 @click="submit"
760 >Add Salary Template</v-btn> 760 >Add Salary Template</v-btn>
761 </v-card-actions> 761 </v-card-actions>
762 </v-flex> 762 </v-flex>
763 </v-layout> 763 </v-layout>
764 </v-flex> 764 </v-flex>
765 </v-layout> 765 </v-layout>
766 </v-container> 766 </v-container>
767 </v-flex> 767 </v-flex>
768 </v-card> 768 </v-card>
769 </v-dialog> 769 </v-dialog>
770 <v-snackbar 770 <v-snackbar
771 :timeout="timeout" 771 :timeout="timeout"
772 :top="y === 'top'" 772 :top="y === 'top'"
773 :right="x === 'right'" 773 :right="x === 'right'"
774 :vertical="mode === 'vertical'" 774 :vertical="mode === 'vertical'"
775 v-model="snackbar" 775 v-model="snackbar"
776 :color="color" 776 :color="color"
777 >{{ text }}</v-snackbar> 777 >{{ text }}</v-snackbar>
778 <div class="loader" v-if="showLoader"> 778 <div class="loader" v-if="showLoader">
779 <v-progress-circular indeterminate color="white"></v-progress-circular> 779 <v-progress-circular indeterminate color="white"></v-progress-circular>
780 </div> 780 </div>
781 </v-container> 781 </v-container>
782 </template> 782 </template>
783 783
784 <script> 784 <script>
785 import http from "@/Services/http.js"; 785 import http from "@/Services/http.js";
786 import moment from "moment"; 786 import moment from "moment";
787 787
788 export default { 788 export default {
789 data: () => ({ 789 data: () => ({
790 snackbar: false, 790 snackbar: false,
791 date: null, 791 date: null,
792 color: "", 792 color: "",
793 y: "top", 793 y: "top",
794 x: "right", 794 x: "right",
795 mode: "", 795 mode: "",
796 timeout: 10000, 796 timeout: 10000,
797 text: "", 797 text: "",
798 show: true, 798 show: true,
799 showSearch: false, 799 showSearch: false,
800 addSalaryDialog: false, 800 addSalaryDialog: false,
801 loading: false, 801 loading: false,
802 loadingSearch: false, 802 loadingSearch: false,
803 search: "", 803 search: "",
804 showLoader: false, 804 showLoader: false,
805 editSalaryDialog: false, 805 editSalaryDialog: false,
806 profileSalaryDialog: false, 806 profileSalaryDialog: false,
807 valid: true, 807 valid: true,
808 disabled: true, 808 disabled: true,
809 showAllowances: false, 809 showAllowances: false,
810 showDeduction: false, 810 showDeduction: false,
811 pagination: { 811 pagination: {
812 rowsPerPage: 10, 812 rowsPerPage: 10,
813 }, 813 },
814 salaryTypes: [], 814 salaryTypes: [],
815 salaryTypeData: [ 815 salaryTypeData: [
816 { 816 {
817 allowancesValue: "", 817 allowancesValue: "",
818 allowancesName: "House Rent", 818 allowancesName: "House Rent",
819 totalAllowances: 0, 819 totalAllowances: 0,
820 }, 820 },
821 ], 821 ],
822 salaryTypeDeductionData: [ 822 salaryTypeDeductionData: [
823 { 823 {
824 deductionValue: "", 824 deductionValue: "",
825 deductionName: "Provident fund", 825 deductionName: "Provident fund",
826 totalDeductions: 0, 826 totalDeductions: 0,
827 }, 827 },
828 ], 828 ],
829 grossSalary: 0, 829 grossSalary: 0,
830 totalDeduction: 0, 830 totalDeduction: 0,
831 salaryType: { 831 salaryType: {
832 netSalary: 0, 832 netSalary: 0,
833 salaryGrades: "", 833 salaryGrades: "",
834 allowancesValue: "", 834 allowancesValue: "",
835 deductionValue: "", 835 deductionValue: "",
836 overtimeRate: "", 836 overtimeRate: "",
837 }, 837 },
838 838
839 basicRules: [(v) => !!v || " Basic Salary is required"], 839 basicRules: [(v) => !!v || " Basic Salary is required"],
840 salaryRules: [(v) => !!v || "Salary Grades is required"], 840 salaryRules: [(v) => !!v || "Salary Grades is required"],
841 overtimeRules: [(v) => !!v || "Overtime Rate is required"], 841 overtimeRules: [(v) => !!v || "Overtime Rate is required"],
842 842
843 headers: [ 843 headers: [
844 { 844 {
845 align: "", 845 align: "",
846 text: "No", 846 text: "No",
847 sortable: false, 847 sortable: false,
848 value: "No", 848 value: "No",
849 }, 849 },
850 { 850 {
851 text: "Salary Grades", 851 text: "Salary Grades",
852 value: "salaryGrades", 852 value: "salaryGrades",
853 sortable: false, 853 sortable: false,
854 align: "center", 854 align: "center",
855 }, 855 },
856 { 856 {
857 text: "Basic Salary", 857 text: "Basic Salary",
858 value: "basicSalary", 858 value: "basicSalary",
859 sortable: false, 859 sortable: false,
860 align: "center", 860 align: "center",
861 }, 861 },
862 { 862 {
863 text: "Overtime Rate", 863 text: "Overtime Rate",
864 value: "overtimeRate", 864 value: "overtimeRate",
865 sortable: false, 865 sortable: false,
866 align: "center", 866 align: "center",
867 }, 867 },
868 { text: "Action", value: "", sortable: false, align: "center" }, 868 { text: "Action", value: "", sortable: false, align: "center" },
869 ], 869 ],
870 salaryData: [], 870 salaryData: [],
871 editedItem: {}, 871 editedItem: {},
872 token: "", 872 token: "",
873 }), 873 }),
874 watch: { 874 watch: {
875 addSalaryDialog: function (val) { 875 addSalaryDialog: function (val) {
876 if (!val) { 876 if (!val) {
877 this.salaryType = []; 877 this.salaryType = [];
878 this.grossSalary = 0; 878 this.grossSalary = 0;
879 this.totalDeduction = 0; 879 this.totalDeduction = 0;
880 (this.salaryTypeData = [ 880 (this.salaryTypeData = [
881 { 881 {
882 allowancesValue: "", 882 allowancesValue: "",
883 allowancesName: "", 883 allowancesName: "",
884 totalAllowances: 0, 884 totalAllowances: 0,
885 }, 885 },
886 ]), 886 ]),
887 (this.salaryTypeDeductionData = [ 887 (this.salaryTypeDeductionData = [
888 { 888 {
889 deductionValue: "", 889 deductionValue: "",
890 deductionName: "", 890 deductionName: "",
891 totalDeductions: 0, 891 totalDeductions: 0,
892 }, 892 },
893 ]); 893 ]);
894 } 894 }
895 }, 895 },
896 }, 896 },
897 methods: { 897 methods: {
898 getSalaryList() { 898 getSalaryList() {
899 this.showLoader = true; 899 this.showLoader = true;
900 this.loadingSearch = true; 900 this.loadingSearch = true;
901 http() 901 http()
902 .get("/getSalaryList", { 902 .get("/getSalaryList", {
903 headers: { Authorization: "Bearer " + this.token }, 903 headers: { Authorization: "Bearer " + this.token },
904 }) 904 })
905 .then((response) => { 905 .then((response) => {
906 this.salaryData = response.data.data; 906 this.salaryData = response.data.data;
907 this.showLoader = false; 907 this.showLoader = false;
908 this.loadingSearch = false; 908 this.loadingSearch = false;
909 }) 909 })
910 .catch((error) => { 910 .catch((error) => {
911 // console.log("err====>", err); 911 // console.log("err====>", err);
912 this.showLoader = false; 912 this.showLoader = false;
913 this.loadingSearch = false; 913 this.loadingSearch = false;
914 this.snackbar = true; 914 this.snackbar = true;
915 this.text = error.response.data.message; 915 this.text = error.response.data.message;
916 if (error.response.status === 401) { 916 if (error.response.status === 401) {
917 this.$router.replace({ path: "/" }); 917 this.$router.replace({ path: "/" });
918 this.$store.dispatch("setToken", null); 918 this.$store.dispatch("setToken", null);
919 this.$store.dispatch("Id", null); 919 this.$store.dispatch("Id", null);
920 } 920 }
921 }); 921 });
922 }, 922 },
923 editItem(item) { 923 editItem(item) {
924 this.editedIndex = this.salaryData.indexOf(item); 924 this.editedIndex = this.salaryData.indexOf(item);
925 this.editedItem = Object.assign({}, item); 925 this.editedItem = Object.assign({}, item);
926 this.editedItem.date = 926 this.editedItem.date =
927 this.editedItem.date != undefined 927 this.editedItem.date != undefined
928 ? (this.editedItem.date = this.editedItem.date.substring(0, 10)) 928 ? (this.editedItem.date = this.editedItem.date.substring(0, 10))
929 : (this.editedItem.date = ""); 929 : (this.editedItem.date = "");
930 this.editSalaryDialog = true; 930 this.editSalaryDialog = true;
931 }, 931 },
932 profile(item) { 932 profile(item) {
933 this.editedIndex = this.salaryData.indexOf(item); 933 this.editedIndex = this.salaryData.indexOf(item);
934 this.editedItem = Object.assign({}, item); 934 this.editedItem = Object.assign({}, item);
935 this.profileSalaryDialog = true; 935 this.profileSalaryDialog = true;
936 }, 936 },
937 deleteItem(item) { 937 deleteItem(item) {
938 let Salary = { 938 let Salary = {
939 salaryId: item._id, 939 salaryId: item._id,
940 }; 940 };
941 http() 941 http()
942 .delete( 942 .delete(
943 "/deleteSalary", 943 "/deleteSalary",
944 confirm("Are you sure you want to Delete this?") && { 944 confirm("Are you sure you want to Delete this?") && {
945 params: Salary, 945 params: Salary,
946 }, 946 },
947 { 947 {
948 headers: { Authorization: "Bearer " + this.token }, 948 headers: { Authorization: "Bearer " + this.token },
949 } 949 }
950 ) 950 )
951 .then((response) => { 951 .then((response) => {
952 this.snackbar = true; 952 this.snackbar = true;
953 this.text = "Successfully Delete Salary "; 953 this.text = "Successfully Delete Salary ";
954 this.text = response.data.message; 954 this.text = response.data.message;
955 this.color = "green"; 955 this.color = "green";
956 this.getSalaryList(); 956 this.getSalaryList();
957 }) 957 })
958 .catch((error) => { 958 .catch((error) => {
959 this.snackbar = true; 959 this.snackbar = true;
960 this.text = error.response.data.message; 960 this.text = error.response.data.message;
961 this.color = "red"; 961 this.color = "red";
962 }); 962 });
963 }, 963 },
964 close() { 964 close() {
965 this.editSalaryDialog = false; 965 this.editSalaryDialog = false;
966 }, 966 },
967 closeAddSalaryModel() { 967 closeAddSalaryModel() {
968 this.addSalaryDialog = false; 968 this.addSalaryDialog = false;
969 // this.salaryData = []; 969 // this.salaryData = [];
970 this.salaryType = []; 970 this.salaryType = [];
971 this.grossSalary = 0; 971 this.grossSalary = 0;
972 this.totalDeduction = 0; 972 this.totalDeduction = 0;
973 (this.salaryTypeData = [ 973 (this.salaryTypeData = [
974 { 974 {
975 allowancesValue: "", 975 allowancesValue: "",
976 allowancesName: "", 976 allowancesName: "",
977 totalAllowances: 0, 977 totalAllowances: 0,
978 }, 978 },
979 ]), 979 ]),
980 (this.salaryTypeDeductionData = [ 980 (this.salaryTypeDeductionData = [
981 { 981 {
982 deductionValue: "", 982 deductionValue: "",
983 deductionName: "", 983 deductionName: "",
984 totalDeductions: 0, 984 totalDeductions: 0,
985 }, 985 },
986 ]); 986 ]);
987 }, 987 },
988 submit() { 988 submit() {
989 var salary = { 989 var salary = {
990 salaryGrades: this.salaryType.salaryGrades, 990 salaryGrades: this.salaryType.salaryGrades,
991 basicSalary: this.salaryType.basicSalary, 991 basicSalary: this.salaryType.basicSalary,
992 overtimeRate: this.salaryType.overtimeRate, 992 overtimeRate: this.salaryType.overtimeRate,
993 allowances: this.salaryTypeData, 993 allowances: this.salaryTypeData,
994 deduction: this.salaryTypeDeductionData, 994 deduction: this.salaryTypeDeductionData,
995 grossSalary: this.grossSalary, 995 grossSalary: this.grossSalary,
996 totalDeduction: this.totalDeduction, 996 totalDeduction: this.totalDeduction,
997 netSalary: this.salaryType.netSalary, 997 netSalary: this.salaryType.netSalary,
998 }; 998 };
999 if (this.$refs.form.validate()) { 999 if (this.$refs.form.validate()) {
1000 this.loading = true; 1000 this.loading = true;
1001 // console.log("api data", this.salaryType); 1001 // console.log("api data", this.salaryType);
1002 http() 1002 http()
1003 .post("/createSalary", salary) 1003 .post("/createSalary", salary)
1004 .then((response) => { 1004 .then((response) => {
1005 // console.log("response", response); 1005 // console.log("response", response);
1006 this.snackbar = true; 1006 this.snackbar = true;
1007 this.text = "Successfully Created Salary "; 1007 this.text = "Successfully Created Salary ";
1008 this.text = response.data.message; 1008 this.text = response.data.message;
1009 this.color = "green"; 1009 this.color = "green";
1010 this.addSalaryDialog = false; 1010 this.addSalaryDialog = false;
1011 this.getSalaryList(); 1011 this.getSalaryList();
1012 this.color = "success"; 1012 this.color = "success";
1013 this.salaryTypeData = []; 1013 this.salaryTypeData = [];
1014 this.salaryTypeDeductionData = []; 1014 this.salaryTypeDeductionData = [];
1015 this.salaryType = ""; 1015 this.salaryType = "";
1016 this.grossSalary = ""; 1016 this.grossSalary = "";
1017 this.totalDeduction = ""; 1017 this.totalDeduction = "";
1018 this.loading = false; 1018 this.loading = false;
1019 this.clear(); 1019 this.clear();
1020 }) 1020 })
1021 .catch((error) => { 1021 .catch((error) => {
1022 // console.log("error", error); 1022 // console.log("error", error);
1023 this.snackbar = true; 1023 this.snackbar = true;
1024 this.text = error.response.data.message; 1024 this.text = error.response.data.message;
1025 this.color = "red"; 1025 this.color = "red";
1026 this.loading = false; 1026 this.loading = false;
1027 }); 1027 });
1028 } 1028 }
1029 }, 1029 },
1030 selectAllowances() { 1030 selectAllowances() {
1031 this.salaryTypeData.push({ 1031 this.salaryTypeData.push({
1032 allowancesValue: (this.salaryType.allowancesValue = ""), 1032 allowancesValue: (this.salaryType.allowancesValue = ""),
1033 }); 1033 });
1034 // console.log("this.salaryTypeData", this.salaryTypeData); 1034 // console.log("this.salaryTypeData", this.salaryTypeData);
1035 var totalAllowances = ""; 1035 var totalAllowances = "";
1036 this.salaryTypeData.forEach((allowancesValue_) => { 1036 this.salaryTypeData.forEach((allowancesValue_) => {
1037 if (allowancesValue_.allowancesValue != "") { 1037 if (allowancesValue_.allowancesValue != "") {
1038 // console.log("allowances", allowancesValue_.allowancesValue); 1038 // console.log("allowances", allowancesValue_.allowancesValue);
1039 totalAllowances = 1039 totalAllowances =
1040 Number(totalAllowances) + Number(allowancesValue_.allowancesValue); 1040 Number(totalAllowances) + Number(allowancesValue_.allowancesValue);
1041 } 1041 }
1042 this.grossSalary = 1042 this.grossSalary =
1043 totalAllowances + Number(this.salaryType.basicSalary); 1043 totalAllowances + Number(this.salaryType.basicSalary);
1044 }); 1044 });
1045 }, 1045 },
1046 allowancesAdd() { 1046 allowancesAdd() {
1047 this.editedItem.allowances.push({ 1047 this.editedItem.allowances.push({
1048 allowancesValue: (this.salaryType.allowancesValue = ""), 1048 allowancesValue: (this.salaryType.allowancesValue = ""),
1049 }); 1049 });
1050 var totalAllowances = ""; 1050 var totalAllowances = "";
1051 this.editedItem.allowances.forEach((allowancesValue_) => { 1051 this.editedItem.allowances.forEach((allowancesValue_) => {
1052 if (allowancesValue_.allowancesValue != "") { 1052 if (allowancesValue_.allowancesValue != "") {
1053 // console.log("allowances", allowancesValue_.allowancesValue); 1053 // console.log("allowances", allowancesValue_.allowancesValue);
1054 totalAllowances = 1054 totalAllowances =
1055 Number(totalAllowances) + Number(allowancesValue_.allowancesValue); 1055 Number(totalAllowances) + Number(allowancesValue_.allowancesValue);
1056 // console.log("totalAllowances", totalAllowances); 1056 // console.log("totalAllowances", totalAllowances);
1057 } 1057 }
1058 this.editedItem.grossSalary = 1058 this.editedItem.grossSalary =
1059 totalAllowances + Number(this.editedItem.basicSalary); 1059 totalAllowances + Number(this.editedItem.basicSalary);
1060 // console.log("this.editedItem.grossSalary", this.editedItem.grossSalary); 1060 // console.log("this.editedItem.grossSalary", this.editedItem.grossSalary);
1061 }); 1061 });
1062 }, 1062 },
1063 selectDeduction() { 1063 selectDeduction() {
1064 this.salaryTypeDeductionData.push({ 1064 this.salaryTypeDeductionData.push({
1065 deductionValue: (this.salaryType.deductionValue = ""), 1065 deductionValue: (this.salaryType.deductionValue = ""),
1066 }); 1066 });
1067 var totalDeductions = ""; 1067 var totalDeductions = "";
1068 this.salaryTypeDeductionData.forEach((deductionValue_) => { 1068 this.salaryTypeDeductionData.forEach((deductionValue_) => {
1069 if (deductionValue_.deductionValue != "") { 1069 if (deductionValue_.deductionValue != "") {
1070 // console.log("deduction", deductionValue_.deductionValue); 1070 // console.log("deduction", deductionValue_.deductionValue);
1071 totalDeductions = 1071 totalDeductions =
1072 Number(totalDeductions) + Number(deductionValue_.deductionValue); 1072 Number(totalDeductions) + Number(deductionValue_.deductionValue);
1073 } 1073 }
1074 }); 1074 });
1075 }, 1075 },
1076 deductionAdd() { 1076 deductionAdd() {
1077 this.editedItem.deduction.push({ 1077 this.editedItem.deduction.push({
1078 deductionValue: (this.salaryType.deductionValue = ""), 1078 deductionValue: (this.salaryType.deductionValue = ""),
1079 }); 1079 });
1080 var totalDeductions = ""; 1080 var totalDeductions = "";
1081 this.editedItem.deduction.forEach((deductionValue_) => { 1081 this.editedItem.deduction.forEach((deductionValue_) => {
1082 if (deductionValue_.deductionValue != "") { 1082 if (deductionValue_.deductionValue != "") {
1083 // console.log("deduction", deductionValue_.deductionValue); 1083 // console.log("deduction", deductionValue_.deductionValue);
1084 totalDeductions = 1084 totalDeductions =
1085 Number(totalDeductions) + Number(deductionValue_.deductionValue); 1085 Number(totalDeductions) + Number(deductionValue_.deductionValue);
1086 // console.log("this.totalDeductions", totalDeductions); 1086 // console.log("this.totalDeductions", totalDeductions);
1087 } 1087 }
1088 // this.editedItem.totalDeduction = totalDeductions; 1088 // this.editedItem.totalDeduction = totalDeductions;
1089 // console.log("this.totalDeduction", this.editedItem.totalDeduction); 1089 // console.log("this.totalDeduction", this.editedItem.totalDeduction);
1090 }); 1090 });
1091 }, 1091 },
1092 deleteSelectAllowances: function (index) { 1092 deleteSelectAllowances: function (index) {
1093 this.salaryTypeData.splice(index, 1); 1093 this.salaryTypeData.splice(index, 1);
1094 }, 1094 },
1095 deleteallowancesAdd: function (index) { 1095 deleteallowancesAdd: function (index) {
1096 this.editedItem.allowances.splice(index, 1); 1096 this.editedItem.allowances.splice(index, 1);
1097 }, 1097 },
1098 deleteSelectDeduction: function (index) { 1098 deleteSelectDeduction: function (index) {
1099 this.salaryTypeDeductionData.splice(index, 1); 1099 this.salaryTypeDeductionData.splice(index, 1);
1100 }, 1100 },
1101 deletedeductionAdd: function (index) { 1101 deletedeductionAdd: function (index) {
1102 this.editedItem.deduction.splice(index, 1); 1102 this.editedItem.deduction.splice(index, 1);
1103 }, 1103 },
1104 clear() { 1104 clear() {
1105 this.$refs.form.reset(); 1105 this.$refs.form.reset();
1106 this.disable = false; 1106 this.disable = false;
1107 }, 1107 },
1108 save() { 1108 save() {
1109 var updateSalary = { 1109 var updateSalary = {
1110 salaryId: this.editedItem._id, 1110 salaryId: this.editedItem._id,
1111 salaryGrades: this.editedItem.salaryGrades, 1111 salaryGrades: this.editedItem.salaryGrades,
1112 basicSalary: this.editedItem.basicSalary, 1112 basicSalary: this.editedItem.basicSalary,
1113 overtimeRate: this.editedItem.overtimeRate, 1113 overtimeRate: this.editedItem.overtimeRate,
1114 allowances: this.salaryTypeData, 1114 allowances: this.salaryTypeData,
1115 deduction: this.salaryTypeDeductionData, 1115 deduction: this.salaryTypeDeductionData,
1116 grossSalary: this.editedItem.grossSalary, 1116 grossSalary: this.editedItem.grossSalary,
1117 totalDeduction: this.editedItem.totalDeduction, 1117 totalDeduction: this.editedItem.totalDeduction,
1118 netSalary: this.editedItem.netSalary, 1118 netSalary: this.editedItem.netSalary,
1119 }; 1119 };
1120 http() 1120 http()
1121 .put("/updateSalary", updateSalary) 1121 .put("/updateSalary", updateSalary)
1122 .then((response) => { 1122 .then((response) => {
1123 this.snackbar = true; 1123 this.snackbar = true;
1124 this.text = response.data.message; 1124 this.text = response.data.message;
1125 this.color = "green"; 1125 this.color = "green";
1126 this.getSalaryList(); 1126 this.getSalaryList();
1127 this.close(); 1127 this.close();
1128 }) 1128 })
1129 .catch((error) => { 1129 .catch((error) => {
1130 this.snackbar = true; 1130 this.snackbar = true;
1131 this.text = error.response.data.message; 1131 this.text = error.response.data.message;
1132 this.color = "red"; 1132 this.color = "red";
1133 }); 1133 });
1134 }, 1134 },
1135 displaySearch() { 1135 displaySearch() {
1136 (this.show = false), (this.showSearch = true); 1136 (this.show = false), (this.showSearch = true);
1137 }, 1137 },
1138 closeSearch() { 1138 closeSearch() {
1139 this.showSearch = false; 1139 this.showSearch = false;
1140 this.show = true; 1140 this.show = true;
1141 this.search = ""; 1141 this.search = "";
1142 }, 1142 },
1143 addSalary: function () { 1143 addSalary: function () {
1144 var showSalary = this.salaryType.basicSalary; 1144 var showSalary = this.salaryType.basicSalary;
1145 this.grossSalary = showSalary; 1145 this.grossSalary = showSalary;
1146 // console.log("salary", this.grossSalary); 1146 // console.log("salary", this.grossSalary);
1147 }, 1147 },
1148 addAllowances: function () { 1148 addAllowances: function () {
1149 var totalAllowances = ""; 1149 var totalAllowances = "";
1150 this.salaryTypeData.forEach((allowancesValue_) => { 1150 this.salaryTypeData.forEach((allowancesValue_) => {
1151 if (allowancesValue_.allowancesValue != "") { 1151 if (allowancesValue_.allowancesValue != "") {
1152 totalAllowances = 1152 totalAllowances =
1153 Number(totalAllowances) + Number(allowancesValue_.allowancesValue); 1153 Number(totalAllowances) + Number(allowancesValue_.allowancesValue);
1154 } 1154 }
1155 this.grossSalary = 1155 this.grossSalary =
1156 totalAllowances + 1156 totalAllowances +
1157 Number(this.salaryType.basicSalary) + 1157 Number(this.salaryType.basicSalary) +
1158 Number(this.salaryType.allowancesValue); 1158 Number(this.salaryType.allowancesValue);
1159 }); 1159 });
1160 }, 1160 },
1161 addAllowancesValue: function () { 1161 addAllowancesValue: function () {
1162 var totalAllowances = ""; 1162 var totalAllowances = "";
1163 this.editedItem.allowances.forEach((allowancesValue_) => { 1163 this.editedItem.allowances.forEach((allowancesValue_) => {
1164 if (allowancesValue_.allowancesValue != "") { 1164 if (allowancesValue_.allowancesValue != "") {
1165 totalAllowances = 1165 totalAllowances =
1166 Number(totalAllowances) + Number(allowancesValue_.allowancesValue); 1166 Number(totalAllowances) + Number(allowancesValue_.allowancesValue);
1167 } 1167 }
1168 this.grossSalary = 1168 this.grossSalary =
1169 totalAllowances + 1169 totalAllowances +
1170 Number(this.editedItem.basicSalary) + 1170 Number(this.editedItem.basicSalary) +
1171 Number(this.editedItem.allowancesValue); 1171 Number(this.editedItem.allowancesValue);
1172 }); 1172 });
1173 }, 1173 },
1174 addDeduction: function () { 1174 addDeduction: function () {
1175 // console.log( 1175 // console.log(
1176 // "this.salaryType.deductionValue", 1176 // "this.salaryType.deductionValue",
1177 // this.salaryType.deductionValue 1177 // this.salaryType.deductionValue
1178 // ); 1178 // );
1179 var totalDeductions = ""; 1179 var totalDeductions = "";
1180 this.salaryTypeDeductionData.forEach((deductionValue_) => { 1180 this.salaryTypeDeductionData.forEach((deductionValue_) => {
1181 if (deductionValue_.deductionValue != "") { 1181 if (deductionValue_.deductionValue != "") {
1182 totalDeductions = 1182 totalDeductions =
1183 Number(totalDeductions) + Number(deductionValue_.deductionValue); 1183 Number(totalDeductions) + Number(deductionValue_.deductionValue);
1184 } 1184 }
1185 }); 1185 });
1186 // console.log("deduction", totalDeductions); 1186 // console.log("deduction", totalDeductions);
1187 this.totalDeduction = totalDeductions; 1187 this.totalDeduction = totalDeductions;
1188 this.salaryType.netSalary = this.grossSalary - this.totalDeduction; 1188 this.salaryType.netSalary = this.grossSalary - this.totalDeduction;
1189 }, 1189 },
1190 addDeductionValue: function () { 1190 addDeductionValue: function () {
1191 var totalDeductions = ""; 1191 var totalDeductions = "";
1192 this.editedItem.deduction.forEach((deductionValue_) => { 1192 this.editedItem.deduction.forEach((deductionValue_) => {
1193 if (deductionValue_.deductionValue != "") { 1193 if (deductionValue_.deductionValue != "") {
1194 totalDeductions = 1194 totalDeductions =
1195 Number(totalDeductions) + Number(deductionValue_.deductionValue); 1195 Number(totalDeductions) + Number(deductionValue_.deductionValue);
1196 } 1196 }
1197 // this.totalDeduction = totalDeductions; 1197 // this.totalDeduction = totalDeductions;
1198 // console.log("this.totalDeductions", this.totalDeduction); 1198 // console.log("this.totalDeductions", this.totalDeduction);
1199 }); 1199 });
1200 this.editedItem.totalDeduction = totalDeductions; 1200 this.editedItem.totalDeduction = totalDeductions;
1201 this.editedItem.netSalary = 1201 this.editedItem.netSalary =
1202 this.editedItem.grossSalary - this.editedItem.totalDeduction; 1202 this.editedItem.grossSalary - this.editedItem.totalDeduction;
1203 }, 1203 },
1204 }, 1204 },
1205 1205
1206 mounted() { 1206 mounted() {
1207 this.token = this.$store.state.token; 1207 this.token = this.$store.state.token;
1208 this.getSalaryList(); 1208 this.getSalaryList();
1209 }, 1209 },
1210 }; 1210 };
1211 </script> 1211 </script>
1212 1212
1213 <style scoped> 1213 <style scoped>
1214 </style> 1214 </style>
src/pages/Reminder/reminder.vue
Diff comments   View file @8b7976c
1 <template> 1 <template>
2 <v-app id="pages-dasboard"> 2 <v-app id="pages-dasboard">
3 <v-toolbar class="fixcolors" fixed app> 3 <v-toolbar class="fixcolors" fixed app>
4 <v-toolbar-title class="ml-0 pl-3"> 4 <v-toolbar-title class="ml-0 pl-3">
5 <v-toolbar-side-icon @click.stop="handleDrawerToggle" class="hide"></v-toolbar-side-icon> 5 <v-toolbar-side-icon @click.stop="handleDrawerToggle" class="hide"></v-toolbar-side-icon>
6 </v-toolbar-title> 6 </v-toolbar-title>
7 <!-- ****** SEARCH ALL EXISTING REMINDER ****** --> 7 <!-- ****** SEARCH ALL EXISTING REMINDER ****** -->
8 <v-flex xs7 sm3 class="userSearch"> 8 <v-flex xs7 sm3 class="userSearch">
9 <v-text-field 9 <v-text-field
10 flat 10 flat
11 append-icon="search" 11 append-icon="search"
12 label="Find your Reminder Data" 12 label="Find your Reminder Data"
13 v-model="search" 13 v-model="search"
14 color="white" 14 color="white"
15 dark 15 dark
16 ></v-text-field> 16 ></v-text-field>
17 </v-flex> 17 </v-flex>
18 <v-spacer></v-spacer> 18 <v-spacer></v-spacer>
19 <v-menu offset-y origin="center center" :nudge-bottom="10" transition="scale-transition"> 19 <v-menu offset-y origin="center center" :nudge-bottom="10" transition="scale-transition">
20 <v-btn icon large flat slot="activator"> 20 <v-btn icon large flat slot="activator">
21 <v-avatar size="40px"> 21 <v-avatar size="40px">
22 <img src="/static/icon/user.png" /> 22 <img src="/static/icon/user.png" />
23 </v-avatar> 23 </v-avatar>
24 </v-btn> 24 </v-btn>
25 <v-list class="pa-0"> 25 <v-list class="pa-0">
26 <v-list-tile 26 <v-list-tile
27 v-for="(item,index) in items" 27 v-for="(item,index) in items"
28 :to="!item.href ? { name: item.name } : null" 28 :to="!item.href ? { name: item.name } : null"
29 :href="item.href" 29 :href="item.href"
30 @click="item.click" 30 @click="item.click"
31 ripple="ripple" 31 ripple="ripple"
32 :disabled="item.disabled" 32 :disabled="item.disabled"
33 :target="item.target" 33 :target="item.target"
34 rel="noopener" 34 rel="noopener"
35 :key="index" 35 :key="index"
36 > 36 >
37 <v-list-tile-action v-if="item.icon"> 37 <v-list-tile-action v-if="item.icon">
38 <v-icon>{{ item.icon }}</v-icon> 38 <v-icon>{{ item.icon }}</v-icon>
39 </v-list-tile-action> 39 </v-list-tile-action>
40 <v-list-tile-content> 40 <v-list-tile-content>
41 <v-list-tile-title>{{ item.title }}</v-list-tile-title> 41 <v-list-tile-title>{{ item.title }}</v-list-tile-title>
42 </v-list-tile-content> 42 </v-list-tile-content>
43 </v-list-tile> 43 </v-list-tile>
44 </v-list> 44 </v-list>
45 </v-menu> 45 </v-menu>
46 </v-toolbar> 46 </v-toolbar>
47 <v-tabs grow slider-color="gray"> 47 <v-tabs grow slider-color="gray">
48 <v-tab 48 <v-tab
49 ripple 49 ripple
50 @click="activeTab('existing')" 50 @click="activeTab('existing')"
51 v-bind:class="{ active: isActive }" 51 v-bind:class="{ active: isActive }"
52 id="tab" 52 id="tab"
53 class="subheading" 53 class="subheading"
54 >Existing Reminder</v-tab> 54 >Existing Reminder</v-tab>
55 <v-tab 55 <v-tab
56 ripple 56 ripple
57 @click="activeTab('new')" 57 @click="activeTab('new')"
58 v-bind:class="{ active: newActive }" 58 v-bind:class="{ active: newActive }"
59 id="tab1" 59 id="tab1"
60 User 60 User
61 class="subheading" 61 class="subheading"
62 >Add New Reminder</v-tab> 62 >Add New Reminder</v-tab>
63 63
64 <!-- ****** EDITS REMINDER DETAILS ****** --> 64 <!-- ****** EDITS REMINDER DETAILS ****** -->
65 65
66 <v-tab-item> 66 <v-tab-item>
67 <v-snackbar 67 <v-snackbar
68 :timeout="timeout" 68 :timeout="timeout"
69 :top="y === 'top'" 69 :top="y === 'top'"
70 :right="x === 'right'" 70 :right="x === 'right'"
71 :vertical="mode === 'vertical'" 71 :vertical="mode === 'vertical'"
72 v-model="snackbar" 72 v-model="snackbar"
73 color="success" 73 color="success"
74 >{{ text }}</v-snackbar> 74 >{{ text }}</v-snackbar>
75 <v-dialog v-model="dialog" max-width="600px" persistent> 75 <v-dialog v-model="dialog" max-width="600px" persistent>
76 <v-flex xs12 sm12 class> 76 <v-flex xs12 sm12 class>
77 <v-toolbar color="white"> 77 <v-toolbar color="white">
78 <v-spacer></v-spacer> 78 <v-spacer></v-spacer>
79 <v-toolbar-title>Edit Reminder</v-toolbar-title> 79 <v-toolbar-title>Edit Reminder</v-toolbar-title>
80 <v-spacer></v-spacer> 80 <v-spacer></v-spacer>
81 </v-toolbar> 81 </v-toolbar>
82 <v-card flat> 82 <v-card flat>
83 <v-form ref="form"> 83 <v-form ref="form">
84 <v-container fluid> 84 <v-container fluid>
85 <v-layout> 85 <v-layout>
86 <v-flex 86 <v-flex
87 xs12 87 xs12
88 class="text-xs-center text-sm-center text-md-center text-lg-center mr-4" 88 class="text-xs-center text-sm-center text-md-center text-lg-center mr-4"
89 > 89 >
90 <v-avatar size="100px"> 90 <v-avatar size="100px">
91 <img src="/static/icon/user.png" v-if="!imageUrl" /> 91 <img src="/static/icon/user.png" v-if="!imageUrl" />
92 </v-avatar> 92 </v-avatar>
93 <input 93 <input
94 type="file" 94 type="file"
95 style="display: none" 95 style="display: none"
96 ref="image" 96 ref="image"
97 accept="image/*" 97 accept="image/*"
98 @change="onFilePicked" 98 @change="onFilePicked"
99 /> 99 />
100 <img 100 <img
101 :src="imageData.imageUrl" 101 :src="imageData.imageUrl"
102 height="150" 102 height="150"
103 v-if="imageUrl" 103 v-if="imageUrl"
104 style="border-radius:50%; width:200px" 104 style="border-radius:50%; width:200px"
105 /> 105 />
106 </v-flex> 106 </v-flex>
107 </v-layout> 107 </v-layout>
108 <v-flex xs12 sm12> 108 <v-flex xs12 sm12>
109 <v-layout> 109 <v-layout>
110 <v-flex xs4 class="pt-4 subheading"> 110 <v-flex xs4 class="pt-4 subheading">
111 <label class="right">Title:</label> 111 <label class="right">Title:</label>
112 </v-flex> 112 </v-flex>
113 <v-flex xs5 class="ml-3"> 113 <v-flex xs5 class="ml-3">
114 <v-text-field 114 <v-text-field
115 v-model="editedItem.title" 115 v-model="editedItem.title"
116 placeholder="fill your Title" 116 placeholder="fill your Title"
117 name="name" 117 name="name"
118 type="text" 118 type="text"
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-flex xs12 sm12> 123 <v-flex xs12 sm12>
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">Description:</label> 126 <label class="right">Description:</label>
127 </v-flex> 127 </v-flex>
128 <v-flex xs5 class="ml-3"> 128 <v-flex xs5 class="ml-3">
129 <v-text-field 129 <v-text-field
130 placeholder="fill your Description" 130 placeholder="fill your Description"
131 v-model="editedItem.description" 131 v-model="editedItem.description"
132 type="text" 132 type="text"
133 ></v-text-field> 133 ></v-text-field>
134 </v-flex> 134 </v-flex>
135 </v-layout> 135 </v-layout>
136 </v-flex> 136 </v-flex>
137 <v-layout> 137 <v-layout>
138 <v-flex xs12 sm10 offset-sm1> 138 <v-flex xs12 sm10 offset-sm1>
139 <v-card-actions> 139 <v-card-actions>
140 <v-btn round dark @click.native="close">Cancel</v-btn> 140 <v-btn round dark @click.native="close">Cancel</v-btn>
141 <v-spacer></v-spacer> 141 <v-spacer></v-spacer>
142 <v-btn round dark @click="save">Save</v-btn> 142 <v-btn round dark @click="save">Save</v-btn>
143 </v-card-actions> 143 </v-card-actions>
144 </v-flex> 144 </v-flex>
145 </v-layout> 145 </v-layout>
146 </v-container> 146 </v-container>
147 </v-form> 147 </v-form>
148 </v-card> 148 </v-card>
149 </v-flex> 149 </v-flex>
150 </v-dialog> 150 </v-dialog>
151 151
152 <!-- ****** PROFILE VIEW REMINDER DEATILS ****** --> 152 <!-- ****** PROFILE VIEW REMINDER DEATILS ****** -->
153 <v-dialog v-model="dialog1" max-width="600px" persistent> 153 <v-dialog v-model="dialog1" max-width="600px" persistent>
154 <v-toolbar color="white"> 154 <v-toolbar color="white">
155 <v-spacer></v-spacer> 155 <v-spacer></v-spacer>
156 <v-toolbar-title>Profile</v-toolbar-title> 156 <v-toolbar-title>Profile</v-toolbar-title>
157 <v-spacer></v-spacer> 157 <v-spacer></v-spacer>
158 <v-icon @click="close1">close</v-icon> 158 <v-icon @click="close1">close</v-icon>
159 </v-toolbar> 159 </v-toolbar>
160 <v-card> 160 <v-card>
161 <v-flex align-center justify-center layout text-xs-center> 161 <v-flex align-center justify-center layout text-xs-center>
162 <v-avatar size="50px" style="position:absolute; top:20px;"> 162 <v-avatar size="50px" style="position:absolute; top:20px;">
163 <img src="/static/icon/user.png" /> 163 <img src="/static/icon/user.png" />
164 </v-avatar> 164 </v-avatar>
165 </v-flex> 165 </v-flex>
166 <v-card-text> 166 <v-card-text>
167 <v-container grid-list-md> 167 <v-container grid-list-md>
168 <v-layout wrap> 168 <v-layout wrap>
169 <v-flex> 169 <v-flex>
170 <br /> 170 <br />
171 <br /> 171 <br />
172 <v-layout> 172 <v-layout>
173 <v-flex xs5 sm6> 173 <v-flex xs5 sm6>
174 <h5 class="right my-1">Title:</h5> 174 <h5 class="right my-1">Title:</h5>
175 </v-flex> 175 </v-flex>
176 <v-flex sm6 xs8> 176 <v-flex sm6 xs8>
177 <h5 class="my-1">{{ editedItem.title }}</h5> 177 <h5 class="my-1">{{ editedItem.title }}</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">Description:</h5> 182 <h5 class="right my-1">Description:</h5>
183 </v-flex> 183 </v-flex>
184 <v-flex sm6 xs8> 184 <v-flex sm6 xs8>
185 <h5 class="my-1">{{ editedItem.description }}</h5> 185 <h5 class="my-1">{{ editedItem.description }}</h5>
186 </v-flex> 186 </v-flex>
187 </v-layout> 187 </v-layout>
188 </v-flex> 188 </v-flex>
189 </v-layout> 189 </v-layout>
190 </v-container> 190 </v-container>
191 </v-card-text> 191 </v-card-text>
192 </v-card> 192 </v-card>
193 </v-dialog> 193 </v-dialog>
194 194
195 <v-snackbar 195 <v-snackbar
196 :timeout="timeout" 196 :timeout="timeout"
197 :top="y === 'top'" 197 :top="y === 'top'"
198 :right="x === 'right'" 198 :right="x === 'right'"
199 :vertical="mode === 'vertical'" 199 :vertical="mode === 'vertical'"
200 v-model="snackbar" 200 v-model="snackbar"
201 color="success" 201 color="success"
202 >{{ text }}</v-snackbar> 202 >{{ text }}</v-snackbar>
203 203
204 <!-- ****** EXISTING-USERS REMINDER TABLE ****** --> 204 <!-- ****** EXISTING-USERS REMINDER TABLE ****** -->
205 <v-data-table 205 <v-data-table
206 :headers="headers" 206 :headers="headers"
207 :items="desserts" 207 :items="desserts"
208 :pagination.sync="pagination" 208 :pagination.sync="pagination"
209 :search="search" 209 :search="search"
210 > 210 >
211 <template slot="items" slot-scope="props"> 211 <template slot="items" slot-scope="props">
212 <td id="td" class="text-xs-center">{{ props.index + 1}}</td> 212 <td id="td" class="text-xs-center">{{ props.index + 1}}</td>
213 <td id="td" class="text-xs-center">{{ props.item.title}}</td> 213 <td id="td" class="text-xs-center">{{ props.item.title}}</td>
214 <td id="td" class="text-xs-center">{{ props.item.description}}</td> 214 <td id="td" class="text-xs-center">{{ props.item.description}}</td>
215 215
216 <td class="text-xs-center"> 216 <td class="text-xs-center">
217 <span> 217 <span>
218 <img 218 <img
219 style="cursor:pointer; width:25px; height:18px; " 219 style="cursor:pointer; width:25px; height:18px; "
220 class="mr-5" 220 class="mr-5"
221 @click="profile(props.item)" 221 @click="profile(props.item)"
222 src="/static/icon/eye1.png" 222 src="/static/icon/eye1.png"
223 /> 223 />
224 <img 224 <img
225 style="cursor:pointer; width:20px; height:18px; " 225 style="cursor:pointer; width:20px; height:18px; "
226 class="mr-5" 226 class="mr-5"
227 @click="editItem(props.item)" 227 @click="editItem(props.item)"
228 src="/static/icon/edit1.png" 228 src="/static/icon/edit1.png"
229 /> 229 />
230 <img 230 <img
231 style="cursor:pointer; width:20px;height:20px; " 231 style="cursor:pointer; width:20px;height:20px; "
232 class="mr-5" 232 class="mr-5"
233 @click="deleteItem(props.item)" 233 @click="deleteItem(props.item)"
234 src="/static/icon/delete1.png" 234 src="/static/icon/delete1.png"
235 /> 235 />
236 </span> 236 </span>
237 </td> 237 </td>
238 </template> 238 </template>
239 <v-alert 239 <v-alert
240 slot="no-results" 240 slot="no-results"
241 :value="true" 241 :value="true"
242 color="error" 242 color="error"
243 icon="warning" 243 icon="warning"
244 >Your search for "{{ search }}" found no results.</v-alert> 244 >Your search for "{{ search }}" found no results.</v-alert>
245 </v-data-table> 245 </v-data-table>
246 </v-tab-item> 246 </v-tab-item>
247 247
248 <!-- ****** ADD MULTIPLE REMINDER ****** --> 248 <!-- ****** ADD MULTIPLE REMINDER ****** -->
249 249
250 <v-tab-item> 250 <v-tab-item>
251 <v-container> 251 <v-container>
252 <v-snackbar 252 <v-snackbar
253 :timeout="timeout" 253 :timeout="timeout"
254 :top="y === 'top'" 254 :top="y === 'top'"
255 :right="x === 'right'" 255 :right="x === 'right'"
256 :vertical="mode === 'vertical'" 256 :vertical="mode === 'vertical'"
257 v-model="snackbar" 257 v-model="snackbar"
258 color="success" 258 color="success"
259 >{{ text }}</v-snackbar> 259 >{{ text }}</v-snackbar>
260 <v-flex xs12 sm12 class="my-4"> 260 <v-flex xs12 sm12 class="my-4">
261 <v-card flat> 261 <v-card flat>
262 <v-form ref="form" v-model="valid" lazy-validation> 262 <v-form ref="form" v-model="valid" lazy-validation>
263 <v-container fluid> 263 <v-container fluid>
264 <v-layout> 264 <v-layout>
265 <v-flex 265 <v-flex
266 xs12 266 xs12
267 class="text-xs-center text-sm-center text-md-center text-lg-center my-4 mr-4" 267 class="text-xs-center text-sm-center text-md-center text-lg-center my-4 mr-4"
268 > 268 >
269 <v-avatar size="100px"> 269 <v-avatar size="100px">
270 <img src="/static/icon/user.png" v-if="!imageUrl" /> 270 <img src="/static/icon/user.png" v-if="!imageUrl" />
271 </v-avatar> 271 </v-avatar>
272 <input 272 <input
273 type="file" 273 type="file"
274 style="display: none" 274 style="display: none"
275 ref="image" 275 ref="image"
276 accept="image/*" 276 accept="image/*"
277 @change="onFilePicked" 277 @change="onFilePicked"
278 /> 278 />
279 <img 279 <img
280 :src="imageData.imageUrl" 280 :src="imageData.imageUrl"
281 height="150" 281 height="150"
282 v-if="imageUrl" 282 v-if="imageUrl"
283 style="border-radius:50%; width:200px" 283 style="border-radius:50%; width:200px"
284 /> 284 />
285 </v-flex> 285 </v-flex>
286 </v-layout> 286 </v-layout>
287 <v-flex xs12> 287 <v-flex xs12>
288 <v-layout> 288 <v-layout>
289 <v-flex xs4 class="pt-4 subheading"> 289 <v-flex xs4 class="pt-4 subheading">
290 <label class="right">Title:</label> 290 <label class="right">Title:</label>
291 </v-flex> 291 </v-flex>
292 <v-flex xs4 class="ml-3"> 292 <v-flex xs4 class="ml-3">
293 <v-text-field 293 <v-text-field
294 v-model="addRemind.title" 294 v-model="addRemind.title"
295 placeholder="fill your Title" 295 placeholder="fill your Title"
296 type="text" 296 type="text"
297 :rules="titleRules" 297 :rules="titleRules"
298 required 298 required
299 ></v-text-field> 299 ></v-text-field>
300 </v-flex> 300 </v-flex>
301 </v-layout> 301 </v-layout>
302 </v-flex> 302 </v-flex>
303 <v-flex xs12> 303 <v-flex xs12>
304 <v-layout> 304 <v-layout>
305 <v-flex xs4 class="pt-4 subheading"> 305 <v-flex xs4 class="pt-4 subheading">
306 <label class="right">Description:</label> 306 <label class="right">Description:</label>
307 </v-flex> 307 </v-flex>
308 <v-flex xs4 class="ml-3"> 308 <v-flex xs4 class="ml-3">
309 <v-text-field 309 <v-text-field
310 placeholder="fill your Description" 310 placeholder="fill your Description"
311 :rules="descriptionRules" 311 :rules="descriptionRules"
312 v-model="addRemind.description" 312 v-model="addRemind.description"
313 type="text" 313 type="text"
314 required 314 required
315 ></v-text-field> 315 ></v-text-field>
316 </v-flex> 316 </v-flex>
317 </v-layout> 317 </v-layout>
318 </v-flex> 318 </v-flex>
319 <v-layout> 319 <v-layout>
320 <v-flex xs12 sm6 offset-sm3> 320 <v-flex xs12 sm6 offset-sm3>
321 <v-card-actions> 321 <v-card-actions>
322 <v-btn @click="clear" round dark>clear</v-btn> 322 <v-btn @click="clear" round dark>clear</v-btn>
323 <v-spacer></v-spacer> 323 <v-spacer></v-spacer>
324 <v-btn @click="submit" round dark :loading="loading">Add</v-btn> 324 <v-btn @click="submit" round dark :loading="loading">Add</v-btn>
325 </v-card-actions> 325 </v-card-actions>
326 </v-flex> 326 </v-flex>
327 </v-layout> 327 </v-layout>
328 </v-container> 328 </v-container>
329 </v-form> 329 </v-form>
330 </v-card> 330 </v-card>
331 </v-flex> 331 </v-flex>
332 </v-container> 332 </v-container>
333 </v-tab-item> 333 </v-tab-item>
334 </v-tabs> 334 </v-tabs>
335 <div class="loader" v-if="showLoader"> 335 <div class="loader" v-if="showLoader">
336 <v-progress-circular indeterminate color="white"></v-progress-circular> 336 <v-progress-circular indeterminate color="white"></v-progress-circular>
337 </div> 337 </div>
338 </v-app> 338 </v-app>
339 </template> 339 </template>
340 340
341 <script> 341 <script>
342 import http from "@/Services/http.js"; 342 import http from "@/Services/http.js";
343 import Util from "@/util"; 343 import Util from "@/util";
344 344
345 export default { 345 export default {
346 data: () => ({ 346 data: () => ({
347 snackbar: false, 347 snackbar: false,
348 y: "top", 348 y: "top",
349 x: "right", 349 x: "right",
350 mode: "", 350 mode: "",
351 timeout: 3000, 351 timeout: 3000,
352 text: "", 352 text: "",
353 loading: false, 353 loading: false,
354 date: null, 354 date: null,
355 search: "", 355 search: "",
356 showLoader: false, 356 showLoader: false,
357 dialog: false, 357 dialog: false,
358 dialog1: false, 358 dialog1: false,
359 valid: true, 359 valid: true,
360 isActive: true, 360 isActive: true,
361 newActive: false, 361 newActive: false,
362 AddUsercredentials: {}, 362 AddUsercredentials: {},
363 pagination: { 363 pagination: {
364 rowsPerPage: 15, 364 rowsPerPage: 15,
365 }, 365 },
366 imageData: {}, 366 imageData: {},
367 imageName: "", 367 imageName: "",
368 imageUrl: "", 368 imageUrl: "",
369 imageFile: "", 369 imageFile: "",
370 titleRules: [(v) => !!v || " Tilte is required"], 370 titleRules: [(v) => !!v || " Tilte is required"],
371 descriptionRules: [(v) => !!v || " Description is required"], 371 descriptionRules: [(v) => !!v || " Description is required"],
372 headers: [ 372 headers: [
373 { 373 {
374 text: "No", 374 text: "No",
375 align: "center", 375 align: "center",
376 sortable: false, 376 sortable: false,
377 value: "No", 377 value: "No",
378 }, 378 },
379 { text: "Title", value: "title", sortable: false, align: "center" }, 379 { text: "Title", value: "title", sortable: false, align: "center" },
380 { 380 {
381 text: "Description", 381 text: "Description",
382 value: "description",
383 sortable: false,
384 align: "center",
385 },
386 { text: "Action", value: "", sortable: false, align: "center" },
382 value: "description", 387 ],
383 sortable: false, 388 desserts: [],
384 align: "center", 389 editedIndex: -1,
385 }, 390 addRemind: {
386 { text: "Action", value: "", sortable: false, align: "center" }, 391 title: "",
387 ], 392 description: "",
388 desserts: [], 393 },
389 editedIndex: -1, 394 editedItem: {
390 addRemind: { 395 title: "",
391 title: "", 396 description: "",
392 description: "", 397 },
393 }, 398 defaultItem: {
394 editedItem: { 399 title: "",
395 title: "", 400 description: "",
396 description: "", 401 },
397 }, 402 userName: "",
398 defaultItem: { 403 items: [
399 title: "", 404 {
400 description: "", 405 href: "/changepassword",
401 }, 406 title: "Change Password",
402 userName: "", 407 click: (e) => {
403 items: [ 408 // console.log(e);
404 { 409 },
405 href: "/changepassword", 410 },
406 title: "Change Password", 411 {
407 click: (e) => { 412 href: "#",
408 // console.log(e); 413 title: "Logout",
409 }, 414 click: (e) => {
410 }, 415 window.getApp.$emit("APP_LOGOUT");
411 { 416 },
412 href: "#", 417 },
413 title: "Logout", 418 ],
414 click: (e) => { 419 }),
415 window.getApp.$emit("APP_LOGOUT"); 420 methods: {
416 }, 421 pickFile() {
417 }, 422 this.$refs.image.click();
418 ], 423 },
419 }), 424
420 methods: { 425 onFilePicked(e) {
421 pickFile() { 426 // console.log(e)
422 this.$refs.image.click(); 427 const files = e.target.files;
423 }, 428 this.imageData.upload = e.target.files[0];
424 429 if (files[0] !== undefined) {
425 onFilePicked(e) { 430 this.imageName = files[0].name;
426 // console.log(e) 431 if (this.imageName.lastIndexOf(".") <= 0) {
427 const files = e.target.files; 432 return;
428 this.imageData.upload = e.target.files[0]; 433 }
429 if (files[0] !== undefined) { 434 const fr = new FileReader();
430 this.imageName = files[0].name; 435 fr.readAsDataURL(files[0]);
431 if (this.imageName.lastIndexOf(".") <= 0) { 436 fr.addEventListener("load", () => {
432 return; 437 this.imageUrl = fr.result;
433 } 438 this.imageFile = files[0]; // this is an image file that can be sent to server...
434 const fr = new FileReader(); 439 this.imageData.imageUrl = URL.createObjectURL(this.imageFile);
435 fr.readAsDataURL(files[0]); 440 // console.log("upload=======>", this.imageData.imageUrl);
436 fr.addEventListener("load", () => { 441 // console.log("imageFile", this.imageFile);
437 this.imageUrl = fr.result; 442 });
438 this.imageFile = files[0]; // this is an image file that can be sent to server... 443 } else {
439 this.imageData.imageUrl = URL.createObjectURL(this.imageFile); 444 this.imageName = "";
440 // console.log("upload=======>", this.imageData.imageUrl); 445 this.imageFile = "";
441 // console.log("imageFile", this.imageFile); 446 this.imageUrl = "";
442 }); 447 }
443 } else { 448 },
444 this.imageName = ""; 449 getReminderList() {
445 this.imageFile = ""; 450 this.showLoader = true;
446 this.imageUrl = ""; 451 var token = this.$store.state.token;
447 } 452 http()
448 }, 453 .get("/getRemindersList", {
449 getReminderList() { 454 headers: { Authorization: "Bearer " + token },
450 this.showLoader = true; 455 })
451 var token = this.$store.state.token; 456 .then((response) => {
452 http() 457 this.desserts = response.data.data;
453 .get("/getRemindersList", { 458 this.showLoader = false;
454 headers: { Authorization: "Bearer " + token }, 459 // console.log("getRemindersList=====>",this.desserts)
455 }) 460 })
456 .then((response) => { 461 .catch((error) => {
457 this.desserts = response.data.data; 462 // console.log("err====>", err);
458 this.showLoader = false; 463 this.showLoader = false;
459 // console.log("getRemindersList=====>",this.desserts) 464 if (error.response.status === 401) {
460 }) 465 this.$router.replace({ path: "/" });
461 .catch((error) => { 466 this.$store.dispatch("setToken", null);
462 // console.log("err====>", err); 467 this.$store.dispatch("Id", null);
463 this.showLoader = false; 468 }
464 if (error.response.status === 401) { 469 });
465 this.$router.replace({ path: "/" }); 470 },
466 this.$store.dispatch("setToken", null); 471 editItem(item) {
467 this.$store.dispatch("Id", null); 472 this.editedIndex = this.desserts.indexOf(item);
468 } 473 this.editedItem = Object.assign({}, item);
469 }); 474 this.dialog = true;
470 }, 475 },
471 editItem(item) { 476 profile(item) {
472 this.editedIndex = this.desserts.indexOf(item); 477 this.editedIndex = this.desserts.indexOf(item);
473 this.editedItem = Object.assign({}, item); 478 this.editedItem = Object.assign({}, item);
474 this.dialog = true; 479 this.dialog1 = true;
475 }, 480 },
476 profile(item) { 481
477 this.editedIndex = this.desserts.indexOf(item); 482 deleteItem(item) {
478 this.editedItem = Object.assign({}, item); 483 let deleteReminder = {
479 this.dialog1 = true; 484 reminderId: item._id,
480 }, 485 };
481 486 http()
482 deleteItem(item) { 487 .delete(
483 let deleteReminder = { 488 "/deleteReminder",
484 reminderId: item._id, 489 confirm("Are you sure you want to delete this?") && {
485 }; 490 params: deleteReminder,
486 http() 491 }
487 .delete( 492 )
488 "/deleteReminder", 493 .then((response) => {
489 confirm("Are you sure you want to delete this?") && { 494 // console.log("deleteReminder",deleteReminder)
490 params: deleteReminder, 495 if ((this.snackbar = true)) {
491 } 496 this.text = "Successfully delete Existing User";
492 ) 497 }
493 .then((response) => { 498 this.getReminderList();
494 // console.log("deleteReminder",deleteReminder) 499 })
495 if ((this.snackbar = true)) { 500 .catch((error) => {
496 this.text = "Successfully delete Existing User"; 501 // console.log(error);
497 } 502 });
498 this.getReminderList(); 503 },
499 }) 504 activeTab(type) {
500 .catch((error) => { 505 switch (type) {
501 // console.log(error); 506 case "existing":
502 }); 507 this.newActive = false;
503 }, 508 this.isActive = true;
504 activeTab(type) { 509 break;
505 switch (type) { 510
506 case "existing": 511 default:
507 this.newActive = false; 512 this.newActive = true;
508 this.isActive = true; 513 this.isActive = false;
509 break; 514 break;
510 515 }
511 default: 516 },
512 this.newActive = true; 517 close() {
513 this.isActive = false; 518 this.dialog = false;
514 break; 519 setTimeout(() => {
515 } 520 this.editedItem = Object.assign({}, this.defaultItem);
516 }, 521 this.editedIndex = -1;
517 close() { 522 }, 300);
518 this.dialog = false; 523 },
519 setTimeout(() => { 524 close1() {
520 this.editedItem = Object.assign({}, this.defaultItem); 525 this.dialog1 = false;
521 this.editedIndex = -1; 526 },
522 }, 300); 527 submit() {
523 }, 528 if (this.$refs.form.validate()) {
524 close1() { 529 let imageData = new FormData();
525 this.dialog1 = false; 530 imageData.append("upload", this.imageFile);
526 }, 531 // console.log(imageData);
527 submit() { 532 let addReminds = {
528 if (this.$refs.form.validate()) { 533 title: this.addRemind.title,
529 let imageData = new FormData(); 534 description: this.addRemind.description,
530 imageData.append("upload", this.imageFile); 535 // imageData
531 // console.log(imageData); 536 };
532 let addReminds = { 537 http()
533 title: this.addRemind.title, 538 .post("/createReminder", addReminds)
534 description: this.addRemind.description, 539 .then((response) => {
535 // imageData 540 // console.log(addReminds)
536 }; 541 if ((this.snackbar = true)) {
537 http() 542 this.text = "New user added successfully";
538 .post("/createReminder", addReminds) 543 }
539 .then((response) => { 544 this.getReminderList();
540 // console.log(addReminds) 545 this.clear();
541 if ((this.snackbar = true)) { 546 })
542 this.text = "New user added successfully"; 547 .catch((error) => {
543 } 548 // console.log(error);
544 this.getReminderList(); 549 if ((this.snackbar = true)) {
545 this.clear(); 550 this.text = error.response.data.message;
546 }) 551 }
547 .catch((error) => { 552 });
548 // console.log(error); 553 }
549 if ((this.snackbar = true)) { 554 },
550 this.text = error.response.data.message; 555 mail() {},
551 } 556 download() {},
552 }); 557 clear() {
553 } 558 this.$refs.form.reset();
554 }, 559 },
555 mail() {}, 560 save() {
556 download() {}, 561 let imageData = new FormData();
557 clear() { 562 imageData.append("upload", this.imageFile);
558 this.$refs.form.reset(); 563 // console.log(imageData);
559 }, 564 let editReminder = {
560 save() { 565 reminderId: this.editedItem._id,
561 let imageData = new FormData(); 566 title: this.editedItem.title,
562 imageData.append("upload", this.imageFile); 567 description: this.editedItem.description,
563 // console.log(imageData); 568 // imageData
564 let editReminder = { 569 };
565 reminderId: this.editedItem._id, 570 http()
566 title: this.editedItem.title, 571 .put("/updateReminder", editReminder)
567 description: this.editedItem.description, 572 .then((response) => {
568 // imageData 573 // console.log("updateReminder",updateReminder);
569 }; 574 if ((this.snackbar = true)) {
570 http() 575 this.text = "Successfully Edit Existing User";
571 .put("/updateReminder", editReminder) 576 }
572 .then((response) => { 577 this.getReminderList();
573 // console.log("updateReminder",updateReminder); 578 })
574 if ((this.snackbar = true)) { 579 .catch((error) => {
575 this.text = "Successfully Edit Existing User"; 580 // console.log(error);
576 } 581 });
577 this.getReminderList(); 582 this.close();
578 }) 583 },
579 .catch((error) => { 584 handleDrawerToggle() {
580 // console.log(error); 585 window.getApp.$emit("APP_DRAWER_TOGGLED");
581 }); 586 },
582 this.close(); 587 handleFullScreen() {
583 }, 588 Util.toggleFullScreen();
584 handleDrawerToggle() { 589 },
585 window.getApp.$emit("APP_DRAWER_TOGGLED"); 590 },
586 }, 591 mounted() {
587 handleFullScreen() { 592 this.getReminderList();
588 Util.toggleFullScreen(); 593 },
589 }, 594 computed: {
590 }, 595 toolbarColor() {
591 mounted() { 596 return this.$vuetify.options.extra.mainNav;
592 this.getReminderList(); 597 },
593 }, 598 },
594 computed: { 599 };
595 toolbarColor() { 600 </script>
596 return this.$vuetify.options.extra.mainNav; 601 <style scoped>
597 }, 602 .v-tabs__div {
598 }, 603 text-transform: none;
599 }; 604 }
600 </script> 605 .v-input__prepend-outer {
601 <style scoped> 606 margin-right: 0px !important;
602 .v-tabs__div { 607 }
603 text-transform: none; 608 .v-card__actions .v-btn {
604 } 609 margin: 0 15px;
605 .v-input__prepend-outer { 610 min-width: 120px;
606 margin-right: 0px !important; 611 }
607 } 612 .primary {
608 .v-card__actions .v-btn { 613 background-color: #aaa !important;
609 margin: 0 15px; 614 border-color: #aaa !important;
610 min-width: 120px; 615 }
611 } 616 h4 {
612 .primary { 617 background-repeat: no-repeat;
613 background-color: #aaa !important; 618 padding: 8px;
614 border-color: #aaa !important; 619 margin: auto;
615 } 620 font-size: 25px;
616 h4 { 621 }
617 background-repeat: no-repeat; 622 #name {
618 padding: 8px; 623 position: absolute;
619 margin: auto; 624 left: 100px;
620 font-size: 25px; 625 top: 17px;
621 } 626 }
622 #name { 627 #icon {
623 position: absolute; 628 position: absolute;
624 left: 100px; 629 right: 8px;
625 top: 17px; 630 top: 8px;
626 } 631 }
627 #icon { 632 #m {
628 position: absolute; 633 position: relative;
629 right: 8px; 634 left: 135px;
630 top: 8px; 635 top: -15px;
631 } 636 }
632 #m { 637 #G {
633 position: relative; 638 position: absolute;
634 left: 135px; 639 top: 38px;
635 top: -15px; 640 color: white;
636 } 641 }
637 #G { 642 #bt {
638 position: absolute; 643 position: relative;
639 top: 38px; 644 top: -20px;
640 color: white; 645 left: 115px;
641 } 646 }
642 #bt { 647 #e {
643 position: relative; 648 position: relative;
644 top: -20px; 649 top: 5px;
645 left: 115px; 650 right: -30px;
646 } 651 height: 17px;
647 #e { 652 cursor: pointer;
648 position: relative; 653 }
649 top: 5px; 654 #d {
650 right: -30px; 655 position: relative;
651 height: 17px; 656 top: 5px;
652 cursor: pointer; 657 right: -70px;
653 } 658 height: 17px;
654 #d { 659 cursor: pointer;
655 position: relative; 660 }
656 top: 5px; 661 #td {
657 right: -70px; 662 border: 1px solid #dddddd;
658 height: 17px; 663 text-align: left;
659 cursor: pointer; 664 padding: 8px;
660 } 665 }
661 #td { 666 #dialog {
662 border: 1px solid #dddddd; 667 height: 550px;
663 text-align: left; 668 }
664 padding: 8px; 669 .active {
665 } 670 background-color: gray;
666 #dialog { 671 color: white !important;
667 height: 550px; 672 }
668 } 673 .activebtn {
669 .active { 674 color: black !important;
670 background-color: gray; 675 }
671 color: white !important; 676 #flex {
672 } 677 height: 300px;
673 .activebtn { 678 }
674 color: black !important; 679 .top {
675 } 680 margin-top: 100px;
676 #flex { 681 }
677 height: 300px; 682 .v-tabs__item a {
678 } 683 font-size: 16px !important;
679 .top { 684 }
680 margin-top: 100px; 685 @media screen and (max-width: 769px) {
681 } 686 .top {
682 .v-tabs__item a { 687 margin-top: 0 !important;
683 font-size: 16px !important; 688 }
684 } 689 .userSearch .v-icon {
685 @media screen and (max-width: 769px) { 690 font-size: 20px !important;
686 .top { 691 margin-left: 20px;
687 margin-top: 0 !important; 692 }
688 } 693 }
689 .userSearch .v-icon { 694 @media screen and (max-width: 380px) {
690 font-size: 20px !important; 695 .pl-3 {
691 margin-left: 20px; 696 padding-left: 0px !important;
692 } 697 }
693 } 698 .right {
694 @media screen and (max-width: 380px) { 699 float: none !important;
695 .pl-3 { 700 }
696 padding-left: 0px !important; 701 .subheading {
697 } 702 font-size: 14px !important;
698 .right { 703 }
699 float: none !important; 704 .v-card__actions .v-btn {
700 } 705 margin: 0 0px;
701 .subheading { 706 min-width: 100px;
702 font-size: 14px !important; 707 }
703 } 708 /* .searchIcon .v-icon {
704 .v-card__actions .v-btn { 709 font-size: 20px;
705 margin: 0 0px; 710 margin-left: 20px;
706 min-width: 100px; 711 } */
707 } 712 .subheading {
708 /* .searchIcon .v-icon { 713 font-size: 12px !important;
709 font-size: 20px; 714 }
710 margin-left: 20px; 715 h5 {
711 } */ 716 font-size: 13px;
712 .subheading { 717 }
713 font-size: 12px !important; 718 }
714 } 719 .v-icon {
715 h5 { 720 font-size: 30px;
716 font-size: 13px; 721 }
717 } 722 @media screen and (min-width: 1270px) {
718 } 723 .hide {
719 .v-icon { 724 display: none;
720 font-size: 30px; 725 }
721 } 726 /* }
722 @media screen and (min-width: 1270px) { 727 @media screen and (max-width: 962px) {
723 .hide { 728 .imglogo{
724 display: none; 729 position: absolute;
725 } 730 top: 13px;
726 /* } 731 left: 13px !important;
727 @media screen and (max-width: 962px) { 732 width: 70px;
728 .imglogo{ 733 height: 24px;
729 position: absolute; 734 } */
730 top: 13px; 735 }
731 left: 13px !important; 736 @media screen and (max-width: 420px) {
732 width: 70px; 737 .userSearch .v-text-field .v-label {
733 height: 24px; 738 line-height: 24px !important;
734 } */ 739 }
735 } 740 .userSearch .v-label {
736 @media screen and (max-width: 420px) { 741 font-size: 13px !important;
737 .userSearch .v-text-field .v-label { 742 }
738 line-height: 24px !important; 743 .v-list__tile {
739 } 744 font-size: 14px;
740 .userSearch .v-label { 745 padding: 0 10px;
741 font-size: 13px !important; 746 }
742 } 747 .name {
743 .v-list__tile { 748 font-size: 15px;
744 font-size: 14px; 749 }
745 padding: 0 10px; 750 }
746 } 751 </style>
src/pages/Report/admitCard.vue
Diff comments   View file @8b7976c
1 <template> 1 <template>
2 <v-container fluid class="body-color"> 2 <v-container fluid class="body-color">
3 <!-- **** Admit Card Table **** --> 3 <!-- **** Admit Card Table **** -->
4 <v-card flat class="elevation-0 transparent"> 4 <v-card flat class="elevation-0 transparent">
5 <v-form ref="form" v-model="valid" lazy-validation> 5 <v-form ref="form" v-model="valid" lazy-validation>
6 <v-flex xs12 sm12 lg12> 6 <v-flex xs12 sm12 lg12>
7 <v-layout wrap> 7 <v-layout wrap>
8 <v-flex xs12 sm12 lg3> 8 <v-flex xs12 sm12 lg3>
9 <v-layout> 9 <v-layout>
10 <v-flex xs12 sm12 lg10 class="ml-2"> 10 <v-flex xs12 sm12 lg10 class="ml-2">
11 <v-autocomplete 11 <v-autocomplete
12 v-model="getReport.examId" 12 v-model="getReport.examId"
13 label="Please Select Exam" 13 label="Please Select Exam"
14 :items="examData" 14 :items="examData"
15 item-text="examName" 15 item-text="examName"
16 item-value="_id" 16 item-value="_id"
17 :rules="examRules" 17 :rules="examRules"
18 @change="getExamList" 18 @change="getExamList"
19 required 19 required
20 ></v-autocomplete> 20 ></v-autocomplete>
21 </v-flex> 21 </v-flex>
22 </v-layout> 22 </v-layout>
23 </v-flex> 23 </v-flex>
24 24
25 <v-flex xs12 sm12 lg3 v-if="getReport.examId"> 25 <v-flex xs12 sm12 lg3 v-if="getReport.examId">
26 <v-layout> 26 <v-layout>
27 <v-flex xs12 sm12 lg10 class="ml-2"> 27 <v-flex xs12 sm12 lg10 class="ml-2">
28 <v-select 28 <v-select
29 v-model="getReport.classId" 29 v-model="getReport.classId"
30 label="Select your class" 30 label="Select your class"
31 type="text" 31 type="text"
32 :items="classList" 32 :items="classList"
33 item-text="classNum" 33 item-text="classNum"
34 item-value="_id" 34 item-value="_id"
35 :rules="classRules" 35 :rules="classRules"
36 @change="getSections(getReport.classId)" 36 @change="getSections(getReport.classId)"
37 required 37 required
38 ></v-select> 38 ></v-select>
39 </v-flex> 39 </v-flex>
40 </v-layout> 40 </v-layout>
41 </v-flex> 41 </v-flex>
42 <v-flex xs12 sm12 lg3 v-if="getReport.classId"> 42 <v-flex xs12 sm12 lg3 v-if="getReport.classId">
43 <v-layout> 43 <v-layout>
44 <v-flex xs12 sm12 lg10 class="ml-2"> 44 <v-flex xs12 sm12 lg10 class="ml-2">
45 <v-select 45 <v-select
46 :items="addSection" 46 :items="addSection"
47 label="Select your Section" 47 label="Select your Section"
48 v-model="getReport.sectionId" 48 v-model="getReport.sectionId"
49 item-text="name" 49 item-text="name"
50 item-value="_id" 50 item-value="_id"
51 name="Select Section" 51 name="Select Section"
52 @change="getStudents" 52 @change="getStudents"
53 :rules="sectionRules" 53 :rules="sectionRules"
54 required 54 required
55 ></v-select> 55 ></v-select>
56 </v-flex> 56 </v-flex>
57 </v-layout> 57 </v-layout>
58 </v-flex> 58 </v-flex>
59 <v-flex xs12 sm12 lg3 v-if="getReport.sectionId"> 59 <v-flex xs12 sm12 lg3 v-if="getReport.sectionId">
60 <v-layout> 60 <v-layout>
61 <v-flex xs12 sm12 lg10 class="ml-2"> 61 <v-flex xs12 sm12 lg10 class="ml-2">
62 <v-select 62 <v-select
63 :items="getStudentsList" 63 :items="getStudentsList"
64 label="Select your student" 64 label="Select your student"
65 v-model="getReport.studentId" 65 v-model="getReport.studentId"
66 item-text="name" 66 item-text="name"
67 item-value="_id" 67 item-value="_id"
68 :rules="studentRules" 68 :rules="studentRules"
69 required 69 required
70 ></v-select> 70 ></v-select>
71 </v-flex> 71 </v-flex>
72 </v-layout> 72 </v-layout>
73 </v-flex> 73 </v-flex>
74 74
75 <v-flex xs12 sm12 lg3> 75 <v-flex xs12 sm12 lg3>
76 <v-layout> 76 <v-layout>
77 <v-flex xs12 sm12 lg10 class="ml-2"> 77 <v-flex xs12 sm12 lg10 class="ml-2">
78 <v-autocomplete 78 <v-autocomplete
79 label="Please Select View Type" 79 label="Please Select View Type"
80 type="text" 80 type="text"
81 :rules="typeRules" 81 :rules="typeRules"
82 :items="typeList" 82 :items="typeList"
83 v-model="getReport.form" 83 v-model="getReport.form"
84 item-text="name" 84 item-text="name"
85 item-value="value" 85 item-value="value"
86 required 86 required
87 ></v-autocomplete> 87 ></v-autocomplete>
88 </v-flex> 88 </v-flex>
89 </v-layout> 89 </v-layout>
90 </v-flex> 90 </v-flex>
91 <v-flex xs12 sm12 lg3> 91 <v-flex xs12 sm12 lg3>
92 <v-btn 92 <v-btn
93 @click="getSchedule" 93 @click="getSchedule"
94 round 94 round
95 dark 95 dark
96 :loading="loading" 96 :loading="loading"
97 class="open-dialog-button mt-3" 97 class="open-dialog-button mt-3"
98 >Get Report</v-btn> 98 >Get Report</v-btn>
99 </v-flex> 99 </v-flex>
100 </v-layout> 100 </v-layout>
101 </v-flex> 101 </v-flex>
102 </v-form> 102 </v-form>
103 </v-card> 103 </v-card>
104 <div v-show="showTable"> 104 <div v-show="showTable">
105 <v-flex xs12 sm12 md10 style="margin:auto"> 105 <v-flex xs12 sm12 md10 style="margin:auto">
106 <v-layout> 106 <v-layout>
107 <v-flex xs12> 107 <v-flex xs12>
108 <v-btn class="open-dialog-button right" round dark @click="printAdmitReport()"> 108 <v-btn class="open-dialog-button right" round dark @click="printAdmitReport()">
109 Print 109 Print
110 <v-icon right dark>print</v-icon> 110 <v-icon right dark>print</v-icon>
111 </v-btn> 111 </v-btn>
112 </v-flex> 112 </v-flex>
113 </v-layout> 113 </v-layout>
114 <!-- ADMIT CARDS --> 114 <!-- ADMIT CARDS -->
115 <div id="printMe" v-if="frontPart"> 115 <div id="printMe" v-if="frontPart">
116 <v-card 116 <v-card
117 v-for="(student,index) in getScheduleList.studentData" 117 v-for="(student,index) in getScheduleList.studentData"
118 :key="index" 118 :key="index"
119 class="mt-3" 119 class="mt-3"
120 style=" 120 style="
121 page-break-after: always; 121 page-break-after: always;
122 background-color: #fff; 122 background-color: #fff;
123 border: 1px solid #ddd; 123 border: 1px solid #ddd;
124 color: rgba(0,0,0,0.87); 124 color: rgba(0,0,0,0.87);
125 overflow-x: auto; 125 overflow-x: auto;
126 display: block; 126 display: block;
127 padding:14px !important; 127 padding:14px !important;
128 webkit-box-shadow: 0px 0px 0px 0px rgba(0,0,0,0.2), 0px 0px 0px 0px rgba(0,0,0,0.14), 0px 0px 0px 0px rgba(0,0,0,0.12) !important; 128 webkit-box-shadow: 0px 0px 0px 0px rgba(0,0,0,0.2), 0px 0px 0px 0px rgba(0,0,0,0.14), 0px 0px 0px 0px rgba(0,0,0,0.12) !important;
129 box-shadow: 0px 0px 0px 0px rgba(0,0,0,0.2), 0px 0px 0px 0px rgba(0,0,0,0.14), 0px 0px 0px 0px rgba(0,0,0,0.12) !important;" 129 box-shadow: 0px 0px 0px 0px rgba(0,0,0,0.2), 0px 0px 0px 0px rgba(0,0,0,0.14), 0px 0px 0px 0px rgba(0,0,0,0.12) !important;"
130 > 130 >
131 <v-layout style="border-bottom: 1px solid #ddd;margin: 8px; auto"> 131 <v-layout style="border-bottom: 1px solid #ddd;margin: 8px; auto">
132 <v-flex xs3 style="margin-bottom:0px"> 132 <v-flex xs3 style="margin-bottom:0px">
133 <img 133 <img
134 :src="userData.schoolLogoUrl" 134 :src="userData.schoolLogoUrl"
135 style="widht:80px;height:80px;" 135 style="widht:80px;height:80px;"
136 alt="logo" 136 alt="logo"
137 v-if="userData.schoolLogoUrl" 137 v-if="userData.schoolLogoUrl"
138 /> 138 />
139 <img 139 <img
140 src="/static/default_thumb.png" 140 src="/static/default_thumb.png"
141 style="widht:80px;height:80px;" 141 style="widht:80px;height:80px;"
142 v-else-if="!userData.schoolLogoUrl" 142 v-else-if="!userData.schoolLogoUrl"
143 /> 143 />
144 <div class="school-name"> 144 <div class="school-name">
145 <div class="body-1">{{ student.schoolId.address }}</div> 145 <div class="body-1">{{ student.schoolId.address }}</div>
146 <div class="body-1">{{ student.schoolId.mobile }}</div> 146 <div class="body-1">{{ student.schoolId.mobile }}</div>
147 </div> 147 </div>
148 </v-flex> 148 </v-flex>
149 <v-flex xs5 style="text-align:center;margin-bottom:0px"> 149 <v-flex xs5 style="text-align:center;margin-bottom:0px">
150 <p 150 <p
151 style="font-size:24px;color: #700CE8;letter-spacing:1px;margin-bottom: 4px" 151 style="font-size:24px;color: #700CE8;letter-spacing:1px;margin-bottom: 4px"
152 >{{ student.schoolId.name }}</p> 152 >{{ student.schoolId.name }}</p>
153 <p>{{ student.schoolId.email }}</p> 153 <p>{{ student.schoolId.email }}</p>
154 154
155 <div> 155 <div>
156 <h4>{{ getScheduleList.scheduleData[0].examId.examName }} Exam Admit Card</h4> 156 <h4>{{ getScheduleList.scheduleData[0].examId.examName }} Exam Admit Card</h4>
157 </div> 157 </div>
158 </v-flex> 158 </v-flex>
159 <v-flex xs4 style="text-align:center;margin-bottom:0px"> 159 <v-flex xs4 style="text-align:center;margin-bottom:0px">
160 <img src="/static/icon/user.png" v-if="!student.profilePicUrl" width="80" /> 160 <img src="/static/icon/user.png" v-if="!student.profilePicUrl" width="80" />
161 <img 161 <img
162 :src="student.profilePicUrl" 162 :src="student.profilePicUrl"
163 onerror="this.src='/static/icon/user.png';" 163 onerror="this.src='/static/icon/user.png';"
164 v-if="student.profilePicUrl" 164 v-if="student.profilePicUrl"
165 width="80" 165 width="80"
166 /> 166 />
167 </v-flex> 167 </v-flex>
168 </v-layout> 168 </v-layout>
169 <v-layout> 169 <v-layout>
170 <v-flex xs5 style="margin-bottom:10px"> 170 <v-flex xs5 style="margin-bottom:10px">
171 <p style="font-size: 16px;margin:0px;margin-bottom:8px;"> 171 <p style="font-size: 16px;margin:0px;margin-bottom:8px;">
172 <b>Name :</b> 172 <b>Name :</b>
173 <span>{{student.name}}</span> 173 <span>{{student.name}}</span>
174 </p> 174 </p>
175 <p style="font-size: 16px;margin:0px;margin-bottom:8px;"> 175 <p style="font-size: 16px;margin:0px;margin-bottom:8px;">
176 <b>Class :</b> 176 <b>Class :</b>
177 <span>{{student.classId.classNum}}</span> 177 <span>{{student.classId.classNum}}</span>
178 </p> 178 </p>
179 <p style="font-size: 16px;margin:0px;margin-bottom:8px;"> 179 <p style="font-size: 16px;margin:0px;margin-bottom:8px;">
180 <b>Roll :</b> 180 <b>Roll :</b>
181 <span>{{student.rollNo}}</span> 181 <span>{{student.rollNo}}</span>
182 </p> 182 </p>
183 </v-flex> 183 </v-flex>
184 <v-flex xs5 style="margin-bottom:10px"> 184 <v-flex xs5 style="margin-bottom:10px">
185 <p style="font-size: 16px;margin:0px;margin-bottom:8px;"> 185 <p style="font-size: 16px;margin:0px;margin-bottom:8px;">
186 <b>Section :</b> 186 <b>Section :</b>
187 <span>{{student.sectionId.name }}</span> 187 <span>{{student.sectionId.name }}</span>
188 </p> 188 </p>
189 <p style="font-size: 16px;margin:0px;margin-bottom:8px;"> 189 <p style="font-size: 16px;margin:0px;margin-bottom:8px;">
190 <b>Blood Group :</b> 190 <b>Blood Group :</b>
191 <span style="color: #707478">{{student.bloodGroup }}</span> 191 <span style="color: #707478">{{student.bloodGroup }}</span>
192 </p> 192 </p>
193 <p style="font-size: 16px;margin:0px;margin-bottom:8px;">Subject in which Appearing</p> 193 <p style="font-size: 16px;margin:0px;margin-bottom:8px;">Subject in which Appearing</p>
194 </v-flex> 194 </v-flex>
195 </v-layout> 195 </v-layout>
196 <table 196 <table
197 class="mb-5 tableRsponsive feeTypeTable" 197 class="mb-5 tableRsponsive feeTypeTable"
198 style="border: 1px solid lightgrey; 198 style="border: 1px solid lightgrey;
199 border-collapse: collapse;!important 199 border-collapse: collapse;!important
200 table-layout: auto !important; 200 table-layout: auto !important;
201 width: 100% !important;" 201 width: 100% !important;"
202 > 202 >
203 <thead style="border: 1px solid lightgrey !important;"> 203 <thead style="border: 1px solid lightgrey !important;">
204 <tr style="border: 1px solid lightgrey !important;padding:4px;"> 204 <tr style="border: 1px solid lightgrey !important;padding:4px;">
205 <td style="border: 1px solid lightgrey !important;padding: 6px;">No</td> 205 <td style="border: 1px solid lightgrey !important;padding: 6px;">No</td>
206 <td style="border: 1px solid lightgrey !important;padding: 6px;">Exam Date</td> 206 <td style="border: 1px solid lightgrey !important;padding: 6px;">Exam Date</td>
207 <td style="border: 1px solid lightgrey !important;padding: 6px;">Start Time</td> 207 <td style="border: 1px solid lightgrey !important;padding: 6px;">Start Time</td>
208 <td style="border: 1px solid lightgrey !important;padding: 6px;">End Time</td> 208 <td style="border: 1px solid lightgrey !important;padding: 6px;">End Time</td>
209 <td style="border: 1px solid lightgrey !important;padding: 6px;">Subject Name</td> 209 <td style="border: 1px solid lightgrey !important;padding: 6px;">Subject Name</td>
210 </tr> 210 </tr>
211 </thead> 211 </thead>
212 <tbody style="border: 1px solid lightgrey !important;"> 212 <tbody style="border: 1px solid lightgrey !important;">
213 <tr v-for="(scheduleData,i) in getScheduleList.scheduleData" :key="i"> 213 <tr v-for="(scheduleData,i) in getScheduleList.scheduleData" :key="i">
214 <td style="border:1px solid lightgrey !important; padding:6px;">{{ i + 1 }}</td> 214 <td style="border:1px solid lightgrey !important; padding:6px;">{{ i + 1 }}</td>
215 <td 215 <td
216 style="border: 1px solid lightgrey !important;padding: 6px;" 216 style="border: 1px solid lightgrey !important;padding: 6px;"
217 >{{ scheduleData.date ? scheduleData.date : '-' }}</td> 217 >{{ scheduleData.date ? scheduleData.date : '-' }}</td>
218 <td 218 <td
219 style="border: 1px solid lightgrey !important;padding: 6px;" 219 style="border: 1px solid lightgrey !important;padding: 6px;"
220 >{{ scheduleData.timeFrom ? scheduleData.timeFrom : "-" }}</td> 220 >{{ scheduleData.timeFrom ? scheduleData.timeFrom : "-" }}</td>
221 <td 221 <td
222 style="border: 1px solid lightgrey !important;padding: 6px;" 222 style="border: 1px solid lightgrey !important;padding: 6px;"
223 >{{ scheduleData.timeTo ? scheduleData.timeTo : "-"}}</td> 223 >{{ scheduleData.timeTo ? scheduleData.timeTo : "-"}}</td>
224 <td 224 <td
225 style="border: 1px solid lightgrey !important;padding: 6px;" 225 style="border: 1px solid lightgrey !important;padding: 6px;"
226 >{{ scheduleData.subjectName ? scheduleData.subjectName : "-" }}</td> 226 >{{ scheduleData.subjectName ? scheduleData.subjectName : "-" }}</td>
227 </tr> 227 </tr>
228 <tr v-if="getScheduleList.scheduleData.length === 0"> 228 <tr v-if="getScheduleList.scheduleData.length === 0">
229 <td style="border: 1px soild lightgrey !importand;padding:6px;">-</td> 229 <td style="border: 1px soild lightgrey !importand;padding:6px;">-</td>
230 <td style="border: 1px solid lightgrey !important;padding: 6px;">-</td> 230 <td style="border: 1px solid lightgrey !important;padding: 6px;">-</td>
231 <td style="border: 1px solid lightgrey !important;padding: 6px;">-</td> 231 <td style="border: 1px solid lightgrey !important;padding: 6px;">-</td>
232 <td style="border: 1px solid lightgrey !important;padding: 6px;">-</td> 232 <td style="border: 1px solid lightgrey !important;padding: 6px;">-</td>
233 <td style="border: 1px solid lightgrey !important;padding: 6px;">-</td> 233 <td style="border: 1px solid lightgrey !important;padding: 6px;">-</td>
234 </tr> 234 </tr>
235 </tbody> 235 </tbody>
236 </table> 236 </table>
237 </v-card> 237 </v-card>
238 </div> 238 </div>
239 <div id="printMe" v-if="backPart"> 239 <div id="printMe" v-if="backPart">
240 <v-card 240 <v-card
241 style=" 241 style="
242 text-align:center 242 text-align:center
243 background-color: #fff; 243 background-color: #fff;
244 border: 1px solid #ddd; 244 border: 1px solid #ddd;
245 color: rgba(0,0,0,0.87); 245 color: rgba(0,0,0,0.87);
246 overflow-x: auto; 246 overflow-x: auto;
247 display: block; 247 display: block;
248 padding:14px !important; 248 padding:14px !important;
249 webkit-box-shadow: 0px 0px 0px 0px rgba(0,0,0,0.2), 0px 0px 0px 0px rgba(0,0,0,0.14), 0px 0px 0px 0px rgba(0,0,0,0.12) !important; 249 webkit-box-shadow: 0px 0px 0px 0px rgba(0,0,0,0.2), 0px 0px 0px 0px rgba(0,0,0,0.14), 0px 0px 0px 0px rgba(0,0,0,0.12) !important;
250 box-shadow: 0px 0px 0px 0px rgba(0,0,0,0.2), 0px 0px 0px 0px rgba(0,0,0,0.14), 0px 0px 0px 0px rgba(0,0,0,0.12) !important;" 250 box-shadow: 0px 0px 0px 0px rgba(0,0,0,0.2), 0px 0px 0px 0px rgba(0,0,0,0.14), 0px 0px 0px 0px rgba(0,0,0,0.12) !important;"
251 > 251 >
252 <div 252 <div
253 style=" 253 style="
254 margin-bottom: 16px; 254 margin-bottom: 16px;
255 overflow: hidden; 255 overflow: hidden;
256 padding: 50px 90px;" 256 padding: 50px 90px;"
257 > 257 >
258 <ol style=" 258 <ol style="
259 margin: 0; 259 margin: 0;
260 margin-bottom: 10px;"> 260 margin-bottom: 10px;">
261 <p 261 <p
262 style=" 262 style="
263 margin-bottom: 16px; 263 margin-bottom: 16px;
264 line-height: 20px; 264 line-height: 20px;
265 text-align: left;" 265 text-align: left;"
266 > 266 >
267 <b>1. Do not Carry these Electronic Gadgets:</b> 267 <b>1. Do not Carry these Electronic Gadgets:</b>
268 Electronic gadgets(Bluetooth devices,head phones,pen/buttonhole cameras,scanner,calculator,storage devices etc) 268 Electronic gadgets(Bluetooth devices,head phones,pen/buttonhole cameras,scanner,calculator,storage devices etc)
269 in the examination lab. These items are strictly prohibited from examination lab. 269 in the examination lab. These items are strictly prohibited from examination lab.
270 </p> 270 </p>
271 <p 271 <p
272 style=" 272 style="
273 margin-bottom: 16px; 273 margin-bottom: 16px;
274 line-height: 20px; 274 line-height: 20px;
275 text-align: left;" 275 text-align: left;"
276 > 276 >
277 <b>2. Do not Carry these Ornaments:</b> 277 <b>2. Do not Carry these Ornaments:</b>
278 Candidates should also not wear charms,veil,items containing such as rings,bracelet,earings,nose-pin,chains, 278 Candidates should also not wear charms,veil,items containing such as rings,bracelet,earings,nose-pin,chains,
279 necklace,pendants,badge,broach,hair-pin,hair-band. 279 necklace,pendants,badge,broach,hair-pin,hair-band.
280 </p> 280 </p>
281 <p 281 <p
282 style=" 282 style="
283 margin-bottom: 16px; 283 margin-bottom: 16px;
284 line-height: 20px; 284 line-height: 20px;
285 text-align: left;" 285 text-align: left;"
286 > 286 >
287 <b>3. What Candidates wear to Examination hall:</b> 287 <b>3. What Candidates wear to Examination hall:</b>
288 Candidates should not wear clothes with full sleeves or big button,etc. Candidates are adviced to wear open footwear 288 Candidates should not wear clothes with full sleeves or big button,etc. Candidates are adviced to wear open footwear
289 like slippers,sandals instead of shoes as the candidates could be asked to remove shoes by the frisking staff. 289 like slippers,sandals instead of shoes as the candidates could be asked to remove shoes by the frisking staff.
290 </p> 290 </p>
291 <p 291 <p
292 style=" 292 style="
293 margin-bottom: 16px; 293 margin-bottom: 16px;
294 line-height: 20px; 294 line-height: 20px;
295 text-align: left;" 295 text-align: left;"
296 > 296 >
297 <b>4. Do not carry Stationary:</b> 297 <b>4. Do not carry Stationary:</b>
298 Pen/pencil and paper for rough work would be provided in examination lab. Electronic watch (timer)will be available 298 Pen/pencil and paper for rough work would be provided in examination lab. Electronic watch (timer)will be available
299 on the computer screen alloted to the candidates. 299 on the computer screen alloted to the candidates.
300 </p> 300 </p>
301 <p 301 <p
302 style=" 302 style="
303 margin-bottom: 16px; 303 margin-bottom: 16px;
304 line-height: 20px; 304 line-height: 20px;
305 text-align: left;" 305 text-align: left;"
306 > 306 >
307 <b>5. Do not Carry Bags:</b> 307 <b>5. Do not Carry Bags:</b>
308 Don not Carry back pack, College bag or any other bag like hand bag. If candidates brings any bag, they must make a 308 Don not Carry back pack, College bag or any other bag like hand bag. If candidates brings any bag, they must make a
309 arrangement for safe custody of these items.The Commission shall not make any arrangement nor be responsible for the 309 arrangement for safe custody of these items.The Commission shall not make any arrangement nor be responsible for the
310 safe custody of such items. 310 safe custody of such items.
311 </p> 311 </p>
312 <p 312 <p
313 style=" 313 style="
314 margin-bottom: 16px; 314 margin-bottom: 16px;
315 line-height: 20px; 315 line-height: 20px;
316 text-align: left;" 316 text-align: left;"
317 > 317 >
318 <b>6. What will Happen if you carry Prohibited items to Exam Hall:</b> 318 <b>6. What will Happen if you carry Prohibited items to Exam Hall:</b>
319 If any such prohibited item is found in the possession of a candidate in examination lab, his/her candidature is liable 319 If any such prohibited item is found in the possession of a candidate in examination lab, his/her candidature is liable
320 to be canceled and legal/criminal proceedings could be initiated against him/her. He/she would also liable to be debarred 320 to be canceled and legal/criminal proceedings could be initiated against him/her. He/she would also liable to be debarred
321 from appearing in future examinations of the Commission for a period of 3 years. 321 from appearing in future examinations of the Commission for a period of 3 years.
322 </p> 322 </p>
323 <p 323 <p
324 style=" 324 style="
325 margin-bottom: 16px; 325 margin-bottom: 16px;
326 line-height: 20px; 326 line-height: 20px;
327 text-align: left; 327 text-align: left;
328 " 328 "
329 > 329 >
330 <b>7. Candidate should not create Disturbance in Exam Hall:</b> 330 <b>7. Candidate should not create Disturbance in Exam Hall:</b>
331 If any candidate is found obstructing the conduct of examination or creating disturbances at the examination venue, 331 If any candidate is found obstructing the conduct of examination or creating disturbances at the examination venue,
332 his/her candidature shall be summarily canceled. 332 his/her candidature shall be summarily canceled.
333 </p> 333 </p>
334 </ol> 334 </ol>
335 </div> 335 </div>
336 </v-card> 336 </v-card>
337 </div> 337 </div>
338 </v-flex> 338 </v-flex>
339 </div> 339 </div>
340 <v-snackbar 340 <v-snackbar
341 :timeout="timeout" 341 :timeout="timeout"
342 :top="y === 'top'" 342 :top="y === 'top'"
343 :right="x === 'right'" 343 :right="x === 'right'"
344 :vertical="mode === 'vertical'" 344 :vertical="mode === 'vertical'"
345 v-model="snackbar" 345 v-model="snackbar"
346 :color="color" 346 :color="color"
347 >{{ text }}</v-snackbar> 347 >{{ text }}</v-snackbar>
348 <div class="loader" v-if="showLoader"> 348 <div class="loader" v-if="showLoader">
349 <v-progress-circular indeterminate color="white"></v-progress-circular> 349 <v-progress-circular indeterminate color="white"></v-progress-circular>
350 </div> 350 </div>
351 </v-container> 351 </v-container>
352 </template> 352 </template>
353 <script> 353 <script>
354 import http from "@/Services/http.js"; 354 import http from "@/Services/http.js";
355 import moment from "moment"; 355 import moment from "moment";
356 import _ from "underscore"; 356 import _ from "underscore";
357 var qs = require("qs"); 357 var qs = require("qs");
358 358
359 export default { 359 export default {
360 data: () => ({ 360 data: () => ({
361 snackbar: false, 361 snackbar: false,
362 color: "", 362 color: "",
363 y: "top", 363 y: "top",
364 x: "right", 364 x: "right",
365 mode: "", 365 mode: "",
366 timeout: 10000, 366 timeout: 10000,
367 text: "", 367 text: "",
368 showLoader: false, 368 showLoader: false,
369 valid: true, 369 valid: true,
370 userData: {}, 370 userData: {},
371 frontPart: false, 371 frontPart: false,
372 backPart: false, 372 backPart: false,
373 loading: false, 373 loading: false,
374 showTable: false, 374 showTable: false,
375 showData: false, 375 showData: false,
376 hideprintAdmitReport: false, 376 hideprintAdmitReport: false,
377 examRules: [(v) => !!v || "Exam Field is required"], 377 examRules: [(v) => !!v || "Exam Field is required"],
378 classRules: [(v) => !!v || "Class Field Required"], 378 classRules: [(v) => !!v || "Class Field Required"],
379 sectionRules: [(v) => !!v || "Section Field is required"], 379 sectionRules: [(v) => !!v || "Section Field is required"],
380 studentRules: [(v) => !!v || "Student Field is required"], 380 studentRules: [(v) => !!v || "Student Field is required"],
381 typeRules: [(v) => !!v || "Type Field is required"], 381 typeRules: [(v) => !!v || "Type Field is required"],
382 backgroundRules: [(v) => !!v || "Background Field is required"], 382 backgroundRules: [(v) => !!v || "Background Field is required"],
383 383
384 pagination: { 384 pagination: {
385 rowsPerPage: 10, 385 rowsPerPage: 10,
386 }, 386 },
387 search: "", 387 search: "",
388 388
389 classList: [], 389 classList: [],
390 studentData: {}, 390 studentData: {},
391 scheduleData: {}, 391 scheduleData: {},
392 examData: [], 392 examData: [],
393 addSection: [], 393 addSection: [],
394 getStudentsList: [{ name: "Select All", _id: "selectAll" }], 394 getStudentsList: [{ name: "Select All", _id: "selectAll" }],
395 getScheduleList: [], 395 getScheduleList: [],
396 getScheduleListArray: [], 396 getScheduleListArray: [],
397 getReport: {}, 397 getReport: {},
398 examName: [], 398 examName: [],
399 typeList: [ 399 typeList: [
400 { 400 {
401 name: "Front Part", 401 name: "Front Part",
402 value: "frontPart", 402 value: "frontPart",
403 }, 403 },
404 { 404 {
405 name: "Back Part", 405 name: "Back Part",
406 value: "backPart", 406 value: "backPart",
407 }, 407 },
408 ], 408 ],
409 backgroundList: ["Yes", "No"], 409 backgroundList: ["Yes", "No"],
410 headers: [ 410 headers: [
411 { 411 {
412 text: "No", 412 text: "No",
413 align: "", 413 align: "",
414 sortable: false, 414 sortable: false,
415 value: "No", 415 value: "No",
416 }, 416 },
417 { 417 {
418 text: "Exam Date", 418 text: "Exam Date",
419 align: "center", 419 align: "center",
420 sortable: false, 420 sortable: false,
421 value: "date", 421 value: "date",
422 }, 422 },
423 { 423 {
424 text: "Start Time", 424 text: "Start Time",
425 align: "center", 425 align: "center",
426 sortable: false, 426 sortable: false,
427 value: "timeFrom", 427 value: "timeFrom",
428 }, 428 },
429 { 429 {
430 text: "End Time", 430 text: "End Time",
431 align: "center", 431 align: "center",
432 sortable: false, 432 sortable: false,
433 value: "timeTo", 433 value: "timeTo",
434 }, 434 },
435 { 435 {
436 text: "Subject Name", 436 text: "Subject Name",
437 align: "center", 437 align: "center",
438 sortable: false, 438 sortable: false,
439 value: "subjectName", 439 value: "subjectName",
440 }, 440 },
441 ], 441 ],
442 }), 442 }),
443 443
444 mounted() { 444 mounted() {
445 this.token = this.$store.state.token; 445 this.token = this.$store.state.token;
446 this.getClass(); 446 this.getClass();
447 this.getExamList(); 447 this.getExamList();
448 this.getUserData(); 448 this.getUserData();
449 }, 449 },
450 450
451 methods: { 451 methods: {
452 getExamList() { 452 getExamList() {
453 this.showLoader = true; 453 this.showLoader = true;
454 this.loadingSearch = true; 454 this.loadingSearch = true;
455 http() 455 http()
456 .get("/getExamsList", { 456 .get("/getExamsList", {
457 headers: { Authorization: "Bearer " + this.token }, 457 headers: { Authorization: "Bearer " + this.token },
458 }) 458 })
459 .then((response) => { 459 .then((response) => {
460 this.examData = response.data.data; 460 this.examData = response.data.data;
461 this.showLoader = false; 461 this.showLoader = false;
462 this.loadingSearch = false; 462 this.loadingSearch = false;
463 }) 463 })
464 .catch((error) => { 464 .catch((error) => {
465 this.showLoader = false; 465 this.showLoader = false;
466 this.loadingSearch = false; 466 this.loadingSearch = false;
467 this.snackbar = true; 467 this.snackbar = true;
468 this.text = error.response.data.message; 468 this.text = error.response.data.message;
469 if (error.response.status === 401) { 469 if (error.response.status === 401) {
470 this.$router.replace({ path: "/" }); 470 this.$router.replace({ path: "/" });
471 this.$store.dispatch("setToken", null); 471 this.$store.dispatch("setToken", null);
472 this.$store.dispatch("Id", null); 472 this.$store.dispatch("Id", null);
473 } 473 }
474 }); 474 });
475 }, 475 },
476 getClass() { 476 getClass() {
477 this.showLoader = true; 477 this.showLoader = true;
478 http() 478 http()
479 .get("/getClassesList", { 479 .get("/getClassesList", {
480 headers: { Authorization: "Bearer " + this.token }, 480 headers: { Authorization: "Bearer " + this.token },
481 }) 481 })
482 .then((response) => { 482 .then((response) => {
483 this.classList = response.data.data; 483 this.classList = response.data.data;
484 this.showLoader = false; 484 this.showLoader = false;
485 }) 485 })
486 .catch((error) => { 486 .catch((error) => {
487 this.showLoader = false; 487 this.showLoader = false;
488 // console.log("err====>", err); 488 // console.log("err====>", err);
489 }); 489 });
490 }, 490 },
491 getSections(_id) { 491 getSections(_id) {
492 this.showLoader = true; 492 this.showLoader = true;
493 http() 493 http()
494 .get( 494 .get(
495 "/getSectionsList", 495 "/getSectionsList",
496 { params: { classId: _id } }, 496 { params: { classId: _id } },
497 { 497 {
498 headers: { Authorization: "Bearer " + this.token }, 498 headers: { Authorization: "Bearer " + this.token },
499 } 499 }
500 ) 500 )
501 .then((response) => { 501 .then((response) => {
502 this.addSection = response.data.data; 502 this.addSection = response.data.data;
503 this.showLoader = false; 503 this.showLoader = false;
504 }) 504 })
505 .catch((err) => { 505 .catch((err) => {
506 this.showLoader = false; 506 this.showLoader = false;
507 // console.log("err====>", err); 507 // console.log("err====>", err);
508 }); 508 });
509 }, 509 },
510 getStudents() { 510 getStudents() {
511 this.showLoader = true; 511 this.showLoader = true;
512 http() 512 http()
513 .get("/getStudentWithClass", { 513 .get("/getStudentWithClass", {
514 params: { 514 params: {
515 classId: this.getReport.classId, 515 classId: this.getReport.classId,
516 sectionId: this.getReport.sectionId, 516 sectionId: this.getReport.sectionId,
517 }, 517 },
518 }) 518 })
519 .then((response) => { 519 .then((response) => {
520 for (var i = 0; i < response.data.data.length; i++) { 520 for (var i = 0; i < response.data.data.length; i++) {
521 this.getStudentsList.push(response.data.data[i]); 521 this.getStudentsList.push(response.data.data[i]);
522 } 522 }
523 523
524 this.showLoader = false; 524 this.showLoader = false;
525 }) 525 })
526 .catch((error) => { 526 .catch((error) => {
527 // console.log("err====>", error); 527 // console.log("err====>", error);
528 this.showLoader = false; 528 this.showLoader = false;
529 this.snackbar = true;
530 this.color = "error";
531 this.text = error.response.data.message;
529 this.snackbar = true; 532 });
530 this.color = "error"; 533 },
531 this.text = error.response.data.message; 534 getSchedule() {
532 }); 535 if (this.$refs.form.validate()) {
533 }, 536 this.showLoader = true;
534 getSchedule() { 537 let studentId = [];
535 if (this.$refs.form.validate()) { 538 if (this.getReport.studentId == "selectAll") {
536 this.showLoader = true; 539 studentId = [];
537 let studentId = []; 540 for (var i = 1; i < this.getStudentsList.length; i++) {
538 if (this.getReport.studentId == "selectAll") { 541 studentId.push(this.getStudentsList[i]._id);
539 studentId = []; 542 }
540 for (var i = 1; i < this.getStudentsList.length; i++) { 543 } else {
541 studentId.push(this.getStudentsList[i]._id); 544 studentId.push(this.getReport.studentId);
542 } 545 }
543 } else { 546 // console.log("this.getReport.studentId - ", studentId);
544 studentId.push(this.getReport.studentId); 547 var admitPayload = {
545 } 548 examId: this.getReport.examId,
546 // console.log("this.getReport.studentId - ", studentId); 549 classId: this.getReport.classId,
547 var admitPayload = { 550 sectionId: this.getReport.sectionId,
548 examId: this.getReport.examId, 551 studentId: studentId,
549 classId: this.getReport.classId, 552 };
550 sectionId: this.getReport.sectionId, 553 http()
551 studentId: studentId, 554 .put("/getScheduleForParticularStudent", admitPayload, {
552 }; 555 paramsSerializer: (params) => {
553 http() 556 return qs.stringify(params);
554 .put("/getScheduleForParticularStudent", admitPayload, { 557 },
555 paramsSerializer: (params) => { 558 })
556 return qs.stringify(params); 559 .then((response) => {
557 }, 560 this.showTable = true;
558 }) 561 this.getScheduleList = response.data.data;
559 .then((response) => { 562 // console.log(" getScheduleList - ", this.getScheduleList);
560 this.showTable = true; 563 // this.schoolData = response.data.data.studentData.schoolId;
561 this.getScheduleList = response.data.data; 564 if (response.data.data.scheduleData.length === 0) {
562 // console.log(" getScheduleList - ", this.getScheduleList); 565 this.showLoader = false;
563 // this.schoolData = response.data.data.studentData.schoolId; 566 this.snackbar = true;
564 if (response.data.data.scheduleData.length === 0) { 567 this.text = "Data not found!";
565 this.showLoader = false; 568 this.color = "error";
566 this.snackbar = true; 569 return;
567 this.text = "Data not found!"; 570 }
568 this.color = "error"; 571 this.showData = true;
569 return; 572 if (this.getReport.form === "frontPart") {
570 } 573 this.frontPart = true;
571 this.showData = true; 574 this.backPart = false;
572 if (this.getReport.form === "frontPart") { 575 }
573 this.frontPart = true; 576 if (this.getReport.form === "backPart") {
574 this.backPart = false; 577 this.frontPart = false;
575 } 578 this.backPart = true;
576 if (this.getReport.form === "backPart") { 579 }
577 this.frontPart = false; 580 this.showLoader = false;
578 this.backPart = true; 581 })
579 } 582 .catch((error) => {
580 this.showLoader = false; 583 this.showLoader = false;
581 }) 584 });
582 .catch((error) => { 585 }
583 this.showLoader = false; 586 },
584 }); 587
585 } 588 printAdmitReport() {
586 }, 589 // Pass the element id here
587 590 this.$htmlToPaper("printMe");
588 printAdmitReport() { 591 },
589 // Pass the element id here 592 getUserData() {
590 this.$htmlToPaper("printMe"); 593 http()
591 }, 594 .get("/getParticularUserDetail")
592 getUserData() { 595 .then((response) => {
593 http() 596 this.userData = response.data.data;
594 .get("/getParticularUserDetail") 597 })
595 .then((response) => { 598 .catch((error) => {
596 this.userData = response.data.data; 599 if (error.response.status === 401) {
597 }) 600 this.$router.replace({ path: "/" });
598 .catch((error) => { 601 this.$store.dispatch("setToken", null);
599 if (error.response.status === 401) { 602 this.$store.dispatch("Id", null);
600 this.$router.replace({ path: "/" }); 603 }
601 this.$store.dispatch("setToken", null); 604 });
602 this.$store.dispatch("Id", null); 605 },
603 } 606 // created() {
604 }); 607 // this.$root.$on("app:search", search => {
605 }, 608 // this.search = search;
606 // created() { 609 // });
607 // this.$root.$on("app:search", search => { 610 // },
608 // this.search = search; 611 // beforeDestroy() {
609 // }); 612 // // dont forget to remove the listener
610 // }, 613 // this.$root.$off("app:search");
611 // beforeDestroy() { 614 // }
612 // // dont forget to remove the listener 615 },
613 // this.$root.$off("app:search"); 616 };
614 // } 617 </script>
615 }, 618 <style>
616 }; 619 .admincardreport {
617 </script> 620 border: 1px solid #ddd;
618 <style> 621 overflow: hidden;
619 .admincardreport { 622 padding: 20px 50px;
620 border: 1px solid #ddd; 623 /* margin-bottom: 10px;
621 overflow: hidden; 624 min-height: 443px; */
622 padding: 20px 50px; 625 }
623 /* margin-bottom: 10px; 626 .line {
624 min-height: 443px; */ 627 border-bottom: 1px solid #ddd;
625 } 628 overflow: hidden;
626 .line { 629 padding-bottom: 10px;
627 border-bottom: 1px solid #ddd; 630 vertical-align: middle;
628 overflow: hidden; 631 /* margin-bottom: 4px; */
629 padding-bottom: 10px; 632 }
630 vertical-align: middle; 633 .school-logo {
631 /* margin-bottom: 4px; */ 634 float: left;
632 } 635 }
633 .school-logo { 636 .student-logo {
634 float: left; 637 position: absolute;
635 } 638 top: 221px;
636 .student-logo { 639 right: 221px;
637 position: absolute; 640 }
638 top: 221px; 641 .school-name {
639 right: 221px; 642 box-sizing: border-box;
640 } 643 align-items: center;
641 .school-name { 644 }
642 box-sizing: border-box; 645 /* .student-info {
643 align-items: center; 646 float: left;
644 } 647 width: max-content;
645 /* .student-info { 648 text-align: initial;
646 float: left; 649 } */
647 width: max-content; 650 .student-info {
648 text-align: initial; 651 width: 50%;
649 } */ 652 float: left;
650 .student-info { 653 text-align: initial;
651 width: 50%; 654 }
652 float: left; 655 .student-info p {
653 text-align: initial; 656 width: 50%;
654 } 657 float: left;
655 .student-info p { 658 margin-bottom: 1px;
656 width: 50%; 659 padding: 0 0px;
657 float: left; 660 font-size: 12px;
658 margin-bottom: 1px; 661 }
659 padding: 0 0px; 662 .admitcardreportbackend ol {
660 font-size: 12px; 663 margin: 0;
661 } 664 margin-bottom: 10px;
662 .admitcardreportbackend ol { 665 }
663 margin: 0; 666 .admitcardreportbackend p {
664 margin-bottom: 10px; 667 line-height: 20px;
665 } 668 text-align: left;
666 .admitcardreportbackend p { 669 }
667 line-height: 20px; 670 </style>
src/pages/Report/idCard.vue
Diff comments   View file @8b7976c
1 <template> 1 <template>
2 <v-container fluid class="body-color"> 2 <v-container fluid class="body-color">
3 <!-- **** Id Card Select options **** --> 3 <!-- **** Id Card Select options **** -->
4 <v-card flat class="elevation-0 transparent"> 4 <v-card flat class="elevation-0 transparent">
5 <v-form ref="form" v-model="valid" lazy-validation> 5 <v-form ref="form" v-model="valid" lazy-validation>
6 <v-flex xs12 sm12 lg12> 6 <v-flex xs12 sm12 lg12>
7 <v-layout wrap> 7 <v-layout wrap>
8 <v-flex xs12 sm12 lg4> 8 <v-flex xs12 sm12 lg4>
9 <v-layout> 9 <v-layout>
10 <v-flex xs12 sm12 lg10 class="ml-2"> 10 <v-flex xs12 sm12 lg10 class="ml-2">
11 <v-autocomplete 11 <v-autocomplete
12 v-model="getReport.role" 12 v-model="getReport.role"
13 label="Select Type" 13 label="Select Type"
14 :items="getRoles" 14 :items="getRoles"
15 item-text="name" 15 item-text="name"
16 return-object 16 return-object
17 @change="getRoleInputs(getReport.role)" 17 @change="getRoleInputs(getReport.role)"
18 required 18 required
19 ></v-autocomplete> 19 ></v-autocomplete>
20 </v-flex> 20 </v-flex>
21 </v-layout> 21 </v-layout>
22 </v-flex> 22 </v-flex>
23 <!-- SELECT CLASS --> 23 <!-- SELECT CLASS -->
24 <v-flex xs12 sm12 lg4 v-if="showClass"> 24 <v-flex xs12 sm12 lg4 v-if="showClass">
25 <v-layout> 25 <v-layout>
26 <v-flex xs12 sm12 lg10 class="ml-2"> 26 <v-flex xs12 sm12 lg10 class="ml-2">
27 <v-select 27 <v-select
28 v-model="getReport.classId" 28 v-model="getReport.classId"
29 label="Select Class" 29 label="Select Class"
30 :items="classList" 30 :items="classList"
31 item-text="classNum" 31 item-text="classNum"
32 item-value="_id" 32 item-value="_id"
33 @change="getSections(getReport.classId)" 33 @change="getSections(getReport.classId)"
34 required 34 required
35 ></v-select> 35 ></v-select>
36 </v-flex> 36 </v-flex>
37 </v-layout> 37 </v-layout>
38 </v-flex> 38 </v-flex>
39 <!-- SELECT SECTION --> 39 <!-- SELECT SECTION -->
40 <v-flex xs12 sm12 lg4 v-if="showSections"> 40 <v-flex xs12 sm12 lg4 v-if="showSections">
41 <v-layout> 41 <v-layout>
42 <v-flex xs12 sm12 lg10 class="ml-2"> 42 <v-flex xs12 sm12 lg10 class="ml-2">
43 <v-select 43 <v-select
44 :items="addSection" 44 :items="addSection"
45 label="Select Section" 45 label="Select Section"
46 v-model="getReport.sectionId" 46 v-model="getReport.sectionId"
47 item-text="name" 47 item-text="name"
48 item-value="_id" 48 item-value="_id"
49 name="Select Section" 49 name="Select Section"
50 @change="getStudents" 50 @change="getStudents"
51 required 51 required
52 ></v-select> 52 ></v-select>
53 </v-flex> 53 </v-flex>
54 </v-layout> 54 </v-layout>
55 </v-flex> 55 </v-flex>
56 <!-- SELECT STUDENT --> 56 <!-- SELECT STUDENT -->
57 <v-flex xs12 sm12 lg4 v-if="showStudents"> 57 <v-flex xs12 sm12 lg4 v-if="showStudents">
58 <v-layout> 58 <v-layout>
59 <v-flex xs12 sm12 lg10 class="ml-2"> 59 <v-flex xs12 sm12 lg10 class="ml-2">
60 <v-select 60 <v-select
61 :items="getSelectUserData" 61 :items="getSelectUserData"
62 label="Select Student" 62 label="Select Student"
63 v-model="getReport._id" 63 v-model="getReport._id"
64 item-text="name" 64 item-text="name"
65 item-value="_id" 65 item-value="_id"
66 required 66 required
67 ></v-select> 67 ></v-select>
68 </v-flex> 68 </v-flex>
69 </v-layout> 69 </v-layout>
70 </v-flex> 70 </v-flex>
71 <v-flex xs12 sm12 lg4 v-if="showTeacher"> 71 <v-flex xs12 sm12 lg4 v-if="showTeacher">
72 <v-layout> 72 <v-layout>
73 <v-flex xs12 sm12 lg10 class="ml-2"> 73 <v-flex xs12 sm12 lg10 class="ml-2">
74 <v-select 74 <v-select
75 v-model="getReport._id" 75 v-model="getReport._id"
76 label="Select Teacher" 76 label="Select Teacher"
77 :items="getSelectUserData" 77 :items="getSelectUserData"
78 item-text="name" 78 item-text="name"
79 item-value="_id" 79 item-value="_id"
80 required 80 required
81 ></v-select> 81 ></v-select>
82 </v-flex> 82 </v-flex>
83 </v-layout> 83 </v-layout>
84 </v-flex> 84 </v-flex>
85 <v-flex xs12 sm12 lg4 v-if="showAdmin"> 85 <v-flex xs12 sm12 lg4 v-if="showAdmin">
86 <v-layout> 86 <v-layout>
87 <v-flex xs12 sm12 lg10 class="ml-2"> 87 <v-flex xs12 sm12 lg10 class="ml-2">
88 <v-select 88 <v-select
89 v-model="getReport._id" 89 v-model="getReport._id"
90 label="Select Admin" 90 label="Select Admin"
91 :items="getSelectUserData" 91 :items="getSelectUserData"
92 item-text="name" 92 item-text="name"
93 item-value="_id" 93 item-value="_id"
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 lg4 v-if="showAccountant"> 99 <v-flex xs12 sm12 lg4 v-if="showAccountant">
100 <v-layout> 100 <v-layout>
101 <v-flex xs12 sm12 lg10 class="ml-2"> 101 <v-flex xs12 sm12 lg10 class="ml-2">
102 <v-select 102 <v-select
103 v-model="getReport._id" 103 v-model="getReport._id"
104 label="Select Accountant" 104 label="Select Accountant"
105 :items="getSelectUserData" 105 :items="getSelectUserData"
106 item-text="name" 106 item-text="name"
107 item-value="_id" 107 item-value="_id"
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 sm12 lg4 v-if="showLibrarian"> 113 <v-flex xs12 sm12 lg4 v-if="showLibrarian">
114 <v-layout> 114 <v-layout>
115 <v-flex xs12 sm12 lg10 class="ml-2"> 115 <v-flex xs12 sm12 lg10 class="ml-2">
116 <v-select 116 <v-select
117 v-model="getReport._id" 117 v-model="getReport._id"
118 label="Select Librarian" 118 label="Select Librarian"
119 :items="getSelectUserData " 119 :items="getSelectUserData "
120 item-text="name" 120 item-text="name"
121 item-value="_id" 121 item-value="_id"
122 required 122 required
123 ></v-select> 123 ></v-select>
124 </v-flex> 124 </v-flex>
125 </v-layout> 125 </v-layout>
126 </v-flex> 126 </v-flex>
127 <v-flex xs12 sm12 lg4> 127 <v-flex xs12 sm12 lg4>
128 <v-layout> 128 <v-layout>
129 <v-flex xs12 sm12 lg10 class="ml-2"> 129 <v-flex xs12 sm12 lg10 class="ml-2">
130 <v-autocomplete 130 <v-autocomplete
131 label="Select View Type" 131 label="Select View Type"
132 type="text" 132 type="text"
133 :items="typeList" 133 :items="typeList"
134 v-model="getReport.viewType" 134 v-model="getReport.viewType"
135 item-text="name" 135 item-text="name"
136 item-value="value" 136 item-value="value"
137 :rules="typeRules" 137 :rules="typeRules"
138 @change="getReportType(getReport.viewType)" 138 @change="getReportType(getReport.viewType)"
139 required 139 required
140 ></v-autocomplete> 140 ></v-autocomplete>
141 </v-flex> 141 </v-flex>
142 </v-layout> 142 </v-layout>
143 </v-flex> 143 </v-flex>
144 <v-flex xs12 sm12 lg4> 144 <v-flex xs12 sm12 lg4>
145 <v-btn 145 <v-btn
146 @click="getCards" 146 @click="getCards"
147 round 147 round
148 dark 148 dark
149 :loading="loading" 149 :loading="loading"
150 class="open-dialog-button mt-3" 150 class="open-dialog-button mt-3"
151 >Get Report</v-btn> 151 >Get Report</v-btn>
152 </v-flex> 152 </v-flex>
153 </v-layout> 153 </v-layout>
154 </v-flex> 154 </v-flex>
155 </v-form> 155 </v-form>
156 </v-card> 156 </v-card>
157 <div> 157 <div>
158 <v-layout v-show="showReport"> 158 <v-layout v-show="showReport">
159 <v-flex xs12> 159 <v-flex xs12>
160 <v-card class="transparent elevation-0"> 160 <v-card class="transparent elevation-0">
161 <!-- print button --> 161 <!-- print button -->
162 <v-layout> 162 <v-layout>
163 <v-flex xs12> 163 <v-flex xs12>
164 <v-btn class="open-dialog-button right" round dark @click="prindIDCardReport()"> 164 <v-btn class="open-dialog-button right" round dark @click="prindIDCardReport()">
165 Print 165 Print
166 <v-icon right dark>print</v-icon> 166 <v-icon right dark>print</v-icon>
167 </v-btn> 167 </v-btn>
168 </v-flex> 168 </v-flex>
169 </v-layout> 169 </v-layout>
170 </v-card> 170 </v-card>
171 <v-layout row wrap id="printMe" justify-center> 171 <v-layout row wrap id="printMe" justify-center>
172 <div 172 <div
173 v-for="(getCard,index) in getCard" 173 v-for="(getCard,index) in getCard"
174 :key="index" 174 :key="index"
175 style="page-break-after: always; width:100%;margin:14px auto;background:transparent;" 175 style="page-break-after: always; width:100%;margin:14px auto;background:transparent;"
176 > 176 >
177 <v-container grid-list-md> 177 <v-container grid-list-md>
178 <v-layout class="col-sm-12"> 178 <v-layout class="col-sm-12">
179 <div 179 <div
180 style="font-family: arial; 180 style="font-family: arial;
181 max-width: 794px; 181 max-width: 794px;
182 max-height: 1123px; 182 max-height: 1123px;
183 margin-left: auto; 183 margin-left: auto;
184 margin-right: auto; 184 margin-right: auto;
185 -webkit-print-color-adjust: exact;" 185 -webkit-print-color-adjust: exact;"
186 > 186 >
187 <div 187 <div
188 style=" 188 style="
189 float: left; 189 float: left;
190 190
191 width: 520px; 191 width: 520px;
192 background: #fff; 192 background: #fff;
193 border: 1px solid lightgray; 193 border: 1px solid lightgray;
194 position:relative;" 194 position:relative;"
195 > 195 >
196 <!-- bottom-right-side-image --> 196 <!-- bottom-right-side-image -->
197 <img 197 <img
198 src="/static/icon/shape1.png" 198 src="/static/icon/shape1.png"
199 alt="shape" 199 alt="shape"
200 style="position:absolute;width: 90px;" 200 style="position:absolute;width: 90px;"
201 /> 201 />
202 <!-- Front Side --> 202 <!-- Front Side -->
203 <v-layout 203 <v-layout
204 style=" 204 style="
205 text-align: center; 205 text-align: center;
206 " 206 "
207 v-if="frontPart" 207 v-if="frontPart"
208 > 208 >
209 <v-flex xs12> 209 <v-flex xs12>
210 <!-- school Logo Url --> 210 <!-- school Logo Url -->
211 <img 211 <img
212 v-if="getCard.schoolLogoUrl" 212 v-if="getCard.schoolLogoUrl"
213 :src="getCard.schoolLogoUrl" 213 :src="getCard.schoolLogoUrl"
214 alt="schoollogo" 214 alt="schoollogo"
215 style=" 215 style="
216 width: 110px; 216 width: 110px;
217 margin-top:10px; 217 margin-top:10px;
218 overflow:hidden" 218 overflow:hidden"
219 /> 219 />
220 <img 220 <img
221 src="/static/default_thumb.png" 221 src="/static/default_thumb.png"
222 v-if="!getCard.schoolLogoUrl" 222 v-if="!getCard.schoolLogoUrl"
223 alt="schoollogo" 223 alt="schoollogo"
224 style=" 224 style="
225 width: 110px; 225 width: 110px;
226 margin-top:10px; 226 margin-top:10px;
227 overflow:hidden" 227 overflow:hidden"
228 /> 228 />
229 <v-layout style="margin:auto"> 229 <v-layout style="margin:auto">
230 <!-- profile url --> 230 <!-- profile url -->
231 <img 231 <img
232 v-if="getCard.profilePicUrl" 232 v-if="getCard.profilePicUrl"
233 :src="getCard.profilePicUrl" 233 :src="getCard.profilePicUrl"
234 alt="profileImage" 234 alt="profileImage"
235 style="; 235 style=";
236 width: 110px; 236 width: 110px;
237 margin:10px auto; 237 margin:10px auto;
238 width: 110px; 238 width: 110px;
239 margin: 10px auto; 239 margin: 10px auto;
240 border: 3px solid #323232; 240 border: 3px solid #323232;
241 border-radius: 12px;" 241 border-radius: 12px;"
242 /> 242 />
243 <img 243 <img
244 style=" 244 style="
245 width: 110px; 245 width: 110px;
246 margin:10px auto; 246 margin:10px auto;
247 width: 110px; 247 width: 110px;
248 margin: 10px auto;" 248 margin: 10px auto;"
249 alt="dummy" 249 alt="dummy"
250 src="/static/icon/user.png" 250 src="/static/icon/user.png"
251 v-if="!getCard.profilePicUrl && getCard.role != '2'" 251 v-if="!getCard.profilePicUrl && getCard.role != '2'"
252 /> 252 />
253 </v-layout> 253 </v-layout>
254 254
255 <p 255 <p
256 style="color: #302653;font-size:24px; 256 style="color: #302653;font-size:24px;
257 letter-spacing: 4px; 257 letter-spacing: 4px;
258 margin-bottom:14px;" 258 margin-bottom:14px;"
259 > 259 >
260 <b>{{ getCard.name}}</b> 260 <b>{{ getCard.name}}</b>
261 </p> 261 </p>
262 <p 262 <p
263 style="color: #302653; 263 style="color: #302653;
264 font-size:14px; 264 font-size:14px;
265 letter-spacing: 4px; 265 letter-spacing: 4px;
266 margin-bottom:14px;" 266 margin-bottom:14px;"
267 > 267 >
268 <b>{{ getCard.gender}}</b> 268 <b>{{ getCard.gender}}</b>
269 </p> 269 </p>
270 <p 270 <p
271 v-if="getCard.classId" 271 v-if="getCard.classId"
272 style="color: #302653; 272 style="color: #302653;
273 font-size:24px; 273 font-size:24px;
274 letter-spacing: 4px; 274 letter-spacing: 4px;
275 margin-bottom:14px;" 275 margin-bottom:14px;"
276 >{{ getCard.classId.classNum }}</p> 276 >{{ getCard.classId.classNum }}</p>
277 <p 277 <p
278 v-if="getCard.classId" 278 v-if="getCard.classId"
279 style="color: #302653; 279 style="color: #302653;
280 font-size:24px; 280 font-size:24px;
281 letter-spacing: 4px; 281 letter-spacing: 4px;
282 margin-bottom:14px;" 282 margin-bottom:14px;"
283 >{{ getCard.sectionId.name }}</p> 283 >{{ getCard.sectionId.name }}</p>
284 <p 284 <p
285 v-if="getCard.rollNo" 285 v-if="getCard.rollNo"
286 style="color: #302653; 286 style="color: #302653;
287 font-size:24px; 287 font-size:24px;
288 letter-spacing: 2px; 288 letter-spacing: 2px;
289 margin-bottom:10px;" 289 margin-bottom:10px;"
290 >Roll: {{ getCard.rollNo }}</p> 290 >Roll: {{ getCard.rollNo }}</p>
291 <p 291 <p
292 v-if="getCard.joinDate" 292 v-if="getCard.joinDate"
293 style="color: #302653; 293 style="color: #302653;
294 margin-bottom:10px; 294 margin-bottom:10px;
295 font-size:16px; 295 font-size:16px;
296 letter-spacing: 2px;" 296 letter-spacing: 2px;"
297 >{{ dates(getCard.joinDate) }}</p> 297 >{{ dates(getCard.joinDate) }}</p>
298 <p 298 <p
299 v-if="getCard.joiningDate" 299 v-if="getCard.joiningDate"
300 style="color: #302653; 300 style="color: #302653;
301 margin-bottom:10px; 301 margin-bottom:10px;
302 font-size:16px; 302 font-size:16px;
303 letter-spacing: 2px;" 303 letter-spacing: 2px;"
304 >{{ dates(getCard.joiningDate) }}</p> 304 >{{ dates(getCard.joiningDate) }}</p>
305 <p 305 <p
306 v-if="getCard.phone" 306 v-if="getCard.phone"
307 style="color: #302653; 307 style="color: #302653;
308 margin-bottom:10px; 308 margin-bottom:10px;
309 font-size:16px; 309 font-size:16px;
310 letter-spacing: 2px;" 310 letter-spacing: 2px;"
311 >{{ getCard.phone }}</p> 311 >{{ getCard.phone }}</p>
312 <p 312 <p
313 style=" 313 style="
314 font-size: 19px; 314 font-size: 19px;
315 font-weight: 100; 315 font-weight: 100;
316 color: rgb(48, 38, 83); 316 color: rgb(48, 38, 83);
317 letter-spacing: 5px; 317 letter-spacing: 5px;
318 margin-bottom:10px;" 318 margin-bottom:10px;"
319 > 319 >
320 <span v-if="getCard.mobile">{{ getCard.mobile}}</span> 320 <span v-if="getCard.mobile">{{ getCard.mobile}}</span>
321 <span v-if="getCard.mobileNo">{{ getCard.mobileNo }}</span> 321 <span v-if="getCard.mobileNo">{{ getCard.mobileNo }}</span>
322 </p> 322 </p>
323 <p 323 <p
324 style=" 324 style="
325 font-size: 17px; 325 font-size: 17px;
326 font-weight: 100; 326 font-weight: 100;
327 color: rgb(48, 38, 83); 327 color: rgb(48, 38, 83);
328 letter-spacing: 4px; 328 letter-spacing: 4px;
329 margin-bottom:14px;" 329 margin-bottom:14px;"
330 >{{ getCard.email}}</p> 330 >{{ getCard.email}}</p>
331 </v-flex> 331 </v-flex>
332 </v-layout> 332 </v-layout>
333 <!-- back side --> 333 <!-- back side -->
334 <v-layout style=" 334 <v-layout style="
335 text-align: center;" v-if="backPart"> 335 text-align: center;" v-if="backPart">
336 <v-flex xs12> 336 <v-flex xs12>
337 <!-- school Logo Url --> 337 <!-- school Logo Url -->
338 <img 338 <img
339 v-if="getCard.schoolLogoUrl" 339 v-if="getCard.schoolLogoUrl"
340 :src="getCard.schoolLogoUrl" 340 :src="getCard.schoolLogoUrl"
341 alt="schoollogo" 341 alt="schoollogo"
342 style=" 342 style="
343 width: 110px; 343 width: 110px;
344 margin-top:10px; 344 margin-top:10px;
345 overflow:hidden" 345 overflow:hidden"
346 /> 346 />
347 <img 347 <img
348 v-if="getCard.schoolId" 348 v-if="getCard.schoolId"
349 :src="getCard.schoolId.schoolLogoUrl" 349 :src="getCard.schoolId.schoolLogoUrl"
350 alt="schoollogo" 350 alt="schoollogo"
351 style=" 351 style="
352 width: 110px; 352 width: 110px;
353 margin-top:10px; 353 margin-top:10px;
354 overflow:hidden" 354 overflow:hidden"
355 /> 355 />
356 <p 356 <p
357 v-if="getCard.schoolLogoUrl" 357 v-if="getCard.schoolLogoUrl"
358 style="color: #302653; 358 style="color: #302653;
359 font-size:24px; 359 font-size:24px;
360 letter-spacing: 4px; 360 letter-spacing: 4px;
361 margin-bottom:14px;" 361 margin-bottom:14px;"
362 > 362 >
363 <b>{{ getCard.name}}</b> 363 <b>{{ getCard.name}}</b>
364 </p> 364 </p>
365 365
366 <p 366 <p
367 v-if="getCard.city" 367 v-if="getCard.city"
368 style=" 368 style="
369 font-size: 17px; 369 font-size: 17px;
370 font-weight: 100; 370 font-weight: 100;
371 color: rgb(48, 38, 83); 371 color: rgb(48, 38, 83);
372 letter-spacing: 4px; 372 letter-spacing: 4px;
373 margin-bottom:14px;" 373 margin-bottom:14px;"
374 >{{ getCard.city}}</p> 374 >{{ getCard.city}}</p>
375 <p 375 <p
376 style=" 376 style="
377 font-size: 17px; 377 font-size: 17px;
378 font-weight: 100; 378 font-weight: 100;
379 color: rgb(48, 38, 83); 379 color: rgb(48, 38, 83);
380 letter-spacing: 4px; 380 letter-spacing: 4px;
381 margin-bottom:14px;" 381 margin-bottom:14px;"
382 > 382 >
383 {{ getCard.address }} 383 {{ getCard.address }}
384 {{ getCard.presentAddress }} 384 {{ getCard.presentAddress }}
385 <span 385 <span
386 v-if="getCard.state" 386 v-if="getCard.state"
387 >({{ getCard.state }})</span> 387 >({{ getCard.state }})</span>
388 </p> 388 </p>
389 <p 389 <p
390 v-if="getCard.establishmentYear" 390 v-if="getCard.establishmentYear"
391 style=" 391 style="
392 font-size: 17px; 392 font-size: 17px;
393 font-weight: 100; 393 font-weight: 100;
394 color: rgb(48, 38, 83); 394 color: rgb(48, 38, 83);
395 letter-spacing: 4px; 395 letter-spacing: 4px;
396 margin-bottom:14px;" 396 margin-bottom:14px;"
397 >{{ getCard.establishmentYear }}</p> 397 >{{ getCard.establishmentYear }}</p>
398 </v-flex> 398 </v-flex>
399 </v-layout> 399 </v-layout>
400 <!-- bottom-right-side-image --> 400 <!-- bottom-right-side-image -->
401 <img 401 <img
402 src="static/icon/shape2.png" 402 src="static/icon/shape2.png"
403 alt="shape2" 403 alt="shape2"
404 style="bottom: 0; 404 style="bottom: 0;
405 position: absolute; 405 position: absolute;
406 right: 0; 406 right: 0;
407 width: 110px;" 407 width: 110px;"
408 /> 408 />
409 </div> 409 </div>
410 </div> 410 </div>
411 </v-layout> 411 </v-layout>
412 </v-container> 412 </v-container>
413 </div> 413 </div>
414 </v-layout> 414 </v-layout>
415 </v-flex> 415 </v-flex>
416 </v-layout> 416 </v-layout>
417 </div> 417 </div>
418 <v-snackbar 418 <v-snackbar
419 :timeout="timeout" 419 :timeout="timeout"
420 :top="y === 'top'" 420 :top="y === 'top'"
421 :right="x === 'right'" 421 :right="x === 'right'"
422 :vertical="mode === 'vertical'" 422 :vertical="mode === 'vertical'"
423 v-model="snackbar" 423 v-model="snackbar"
424 :color="color" 424 :color="color"
425 >{{ text }}</v-snackbar> 425 >{{ text }}</v-snackbar>
426 <div class="loader" v-if="showLoader"> 426 <div class="loader" v-if="showLoader">
427 <v-progress-circular indeterminate color="white"></v-progress-circular> 427 <v-progress-circular indeterminate color="white"></v-progress-circular>
428 </div> 428 </div>
429 </v-container> 429 </v-container>
430 </template> 430 </template>
431 431
432 <script> 432 <script>
433 import http from "@/Services/http.js"; 433 import http from "@/Services/http.js";
434 import moment from "moment"; 434 import moment from "moment";
435 var qs = require("qs"); 435 var qs = require("qs");
436 436
437 export default { 437 export default {
438 data: () => ({ 438 data: () => ({
439 showLoader: false, 439 showLoader: false,
440 valid: true, 440 valid: true,
441 report: {}, 441 report: {},
442 userData: {}, 442 userData: {},
443 snackbar: false, 443 snackbar: false,
444 color: "", 444 color: "",
445 y: "top", 445 y: "top",
446 x: "right", 446 x: "right",
447 mode: "", 447 mode: "",
448 timeout: 10000, 448 timeout: 10000,
449 text: "", 449 text: "",
450 loading: false, 450 loading: false,
451 showReport: false, 451 showReport: false,
452 frontPart: false, 452 frontPart: false,
453 backPart: false, 453 backPart: false,
454 showClass: false, 454 showClass: false,
455 showTeacher: false, 455 showTeacher: false,
456 showAdmin: false, 456 showAdmin: false,
457 showAccountant: false, 457 showAccountant: false,
458 showLibrarian: false, 458 showLibrarian: false,
459 hideprintIdCard: false, 459 hideprintIdCard: false,
460 hidebackprintIdCard: false, 460 hidebackprintIdCard: false,
461 showStudents: false, 461 showStudents: false,
462 showSections: false, 462 showSections: false,
463 getRoles: [], 463 getRoles: [],
464 classList: [], 464 classList: [],
465 getCard: [], 465 getCard: [],
466 addSection: [], 466 addSection: [],
467 // getStudentsList: 467 // getStudentsList:
468 // teacherList: [], 468 // teacherList: [],
469 getSelectUserData: [], 469 getSelectUserData: [],
470 // Users: [], 470 // Users: [],
471 getReport: {}, 471 getReport: {},
472 typeRules: [(v) => !!v || "Type is required"], 472 typeRules: [(v) => !!v || "Type is required"],
473 typeList: [ 473 typeList: [
474 { 474 {
475 name: "Front Part", 475 name: "Front Part",
476 value: "frontPart", 476 value: "frontPart",
477 }, 477 },
478 { 478 {
479 name: "Back Part", 479 name: "Back Part",
480 value: "backPart", 480 value: "backPart",
481 }, 481 },
482 ], 482 ],
483 backgroundList: ["Yes", "No"], 483 backgroundList: ["Yes", "No"],
484 }), 484 }),
485 485
486 mounted() { 486 mounted() {
487 this.token = this.$store.state.token; 487 this.token = this.$store.state.token;
488 this.getUserData(); 488 this.getUserData();
489 this.getRole(); 489 this.getRole();
490 }, 490 },
491 491
492 methods: { 492 methods: {
493 dates: function (date) { 493 dates: function (date) {
494 return moment(date).format("MMMM DD, YYYY"); 494 return moment(date).format("MMMM DD, YYYY");
495 return date; 495 return date;
496 }, 496 },
497 getReportType() { 497 getReportType() {
498 if (this.getReport.viewType === "frontPart") { 498 if (this.getReport.viewType === "frontPart") {
499 this.frontPart = true; 499 this.frontPart = true;
500 this.backPart = false; 500 this.backPart = false;
501 } 501 }
502 if (this.getReport.viewType === "backPart") { 502 if (this.getReport.viewType === "backPart") {
503 this.frontPart = false; 503 this.frontPart = false;
504 this.backPart = true; 504 this.backPart = true;
505 } 505 }
506 }, 506 },
507 getRoleInputs(role) { 507 getRoleInputs(role) {
508 // console.log("role", role); 508 // console.log("role", role);
509 this.showReport = false; 509 this.showReport = false;
510 this.getReport._id = ""; 510 this.getReport._id = "";
511 this.getCard = ""; 511 this.getCard = "";
512 this.classList = []; 512 this.classList = [];
513 this.addSection = []; 513 this.addSection = [];
514 this.getReport.classId = ""; 514 this.getReport.classId = "";
515 this.getReport.sectionId = ""; 515 this.getReport.sectionId = "";
516 this.getReport._id = ""; 516 this.getReport._id = "";
517 this.getSelectUserData = []; 517 this.getSelectUserData = [];
518 if (role.name === "STUDENT") { 518 if (role.name === "STUDENT") {
519 // console.log("role", role); 519 // console.log("role", role);
520 this.showClass = true; 520 this.showClass = true;
521 this.showTeacher = false; 521 this.showTeacher = false;
522 this.showAdmin = false; 522 this.showAdmin = false;
523 this.showAccountant = false; 523 this.showAccountant = false;
524 this.showLibrarian = false; 524 this.showLibrarian = false;
525 this.showStudents = false; 525 this.showStudents = false;
526 this.showSections = false; 526 this.showSections = false;
527 this.getClass(); 527 this.getClass();
528 } 528 }
529 if (role.name === "TEACHER") { 529 if (role.name === "TEACHER") {
530 this.showTeacher = true; 530 this.showTeacher = true;
531 this.showClass = false; 531 this.showClass = false;
532 this.showAdmin = false; 532 this.showAdmin = false;
533 this.showAccountant = false; 533 this.showAccountant = false;
534 this.showLibrarian = false; 534 this.showLibrarian = false;
535 this.showStudents = false; 535 this.showStudents = false;
536 this.showSections = false; 536 this.showSections = false;
537 this.getTeacherList(); 537 this.getTeacherList();
538 } 538 }
539 if (role.name === "ADMIN") { 539 if (role.name === "ADMIN") {
540 this.showAdmin = true; 540 this.showAdmin = true;
541 this.showTeacher = false; 541 this.showTeacher = false;
542 this.showClass = false; 542 this.showClass = false;
543 this.showAccountant = false; 543 this.showAccountant = false;
544 this.showLibrarian = false; 544 this.showLibrarian = false;
545 this.showStudents = false; 545 this.showStudents = false;
546 this.showSections = false; 546 this.showSections = false;
547 this.getUsersList(role.role); 547 this.getUsersList(role.role);
548 } 548 }
549 if (role.name === "ACCOUNTANT") { 549 if (role.name === "ACCOUNTANT") {
550 this.showAccountant = true; 550 this.showAccountant = true;
551 this.showAdmin = false; 551 this.showAdmin = false;
552 this.showTeacher = false; 552 this.showTeacher = false;
553 this.showClass = false; 553 this.showClass = false;
554 this.showLibrarian = false; 554 this.showLibrarian = false;
555 this.showStudents = false; 555 this.showStudents = false;
556 this.showSections = false; 556 this.showSections = false;
557 this.getUsersList(role.role); 557 this.getUsersList(role.role);
558 } 558 }
559 if (role.name === "LIBRARIAN") { 559 if (role.name === "LIBRARIAN") {
560 this.showLibrarian = true; 560 this.showLibrarian = true;
561 this.showAccountant = false; 561 this.showAccountant = false;
562 this.showAdmin = false; 562 this.showAdmin = false;
563 this.showTeacher = false; 563 this.showTeacher = false;
564 this.showClass = false; 564 this.showClass = false;
565 this.showStudents = false; 565 this.showStudents = false;
566 this.showSections = false; 566 this.showSections = false;
567 this.getUsersList(role.role); 567 this.getUsersList(role.role);
568 } 568 }
569 }, 569 },
570 570
571 prindIDCardReport() { 571 prindIDCardReport() {
572 // Pass the element id here 572 // Pass the element id here
573 this.$htmlToPaper("printMe"); 573 this.$htmlToPaper("printMe");
574 }, 574 },
575 getUserData() { 575 getUserData() {
576 this.getSelectUserData = []; 576 this.getSelectUserData = [];
577 this.showLoader = true; 577 this.showLoader = true;
578 http() 578 http()
579 .get("/getParticularUserDetail") 579 .get("/getParticularUserDetail")
580 .then((response) => { 580 .then((response) => {
581 let mergeObj = { 581 let mergeObj = {
582 name: "Select All", 582 name: "Select All",
583 id: "Select All", 583 id: "Select All",
584 }; 584 };
585 this.getSelectUserData.push(mergeObj); 585 this.getSelectUserData.push(mergeObj);
586 let getUserDetails = response.data.data; 586 let getUserDetails = response.data.data;
587 this.getSelectUserData.push(getUserDetails); 587 this.getSelectUserData.push(getUserDetails);
588 this.showLoader = false; 588 this.showLoader = false;
589 // this.adminList = response.data.data; 589 // this.adminList = response.data.data;
590 }) 590 })
591 .catch((error) => { 591 .catch((error) => {
592 this.showLoader = false; 592 this.showLoader = false;
593 if (error.response.status === 401) { 593 if (error.response.status === 401) {
594 this.$router.replace({ path: "/" }); 594 this.$router.replace({ path: "/" });
595 this.$store.dispatch("setToken", null); 595 this.$store.dispatch("setToken", null);
596 this.$store.dispatch("Id", null); 596 this.$store.dispatch("Id", null);
597 } 597 }
598 }); 598 });
599 }, 599 },
600 getRole() { 600 getRole() {
601 this.showLoader = true; 601 this.showLoader = true;
602 http() 602 http()
603 .get("/getRolesList", { 603 .get("/getRolesList", {
604 headers: { Authorization: "Bearer " + this.token }, 604 headers: { Authorization: "Bearer " + this.token },
605 }) 605 })
606 .then((response) => { 606 .then((response) => {
607 var getRoles = []; 607 var getRoles = [];
608 getRoles = response.data.data; 608 getRoles = response.data.data;
609 for (let i = 0; i < getRoles.length; i++) { 609 for (let i = 0; i < getRoles.length; i++) {
610 if ( 610 if (
611 getRoles[i].name != "SUPERADMIN" && 611 getRoles[i].name != "SUPERADMIN" &&
612 getRoles[i].name != "PARENT" 612 getRoles[i].name != "PARENT"
613 ) { 613 ) {
614 this.getRoles.push(getRoles[i]); 614 this.getRoles.push(getRoles[i]);
615 } 615 }
616 } 616 }
617 this.showLoader = false; 617 this.showLoader = false;
618 }) 618 })
619 .catch((error) => { 619 .catch((error) => {
620 this.showLoader = false; 620 this.showLoader = false;
621 if (error.response.status === 401) { 621 if (error.response.status === 401) {
622 this.$router.replace({ path: "/" }); 622 this.$router.replace({ path: "/" });
623 this.$store.dispatch("setToken", null); 623 this.$store.dispatch("setToken", null);
624 this.$store.dispatch("Id", null); 624 this.$store.dispatch("Id", null);
625 this.$store.dispatch("Role", null); 625 this.$store.dispatch("Role", null);
626 } 626 }
627 }); 627 });
628 }, 628 },
629 getClass() { 629 getClass() {
630 // console.log("get classes"); 630 // console.log("get classes");
631 this.showLoader = true; 631 this.showLoader = true;
632 http() 632 http()
633 .get("/getClassesList", { 633 .get("/getClassesList", {
634 headers: { Authorization: "Bearer " + this.token }, 634 headers: { Authorization: "Bearer " + this.token },
635 }) 635 })
636 .then((response) => { 636 .then((response) => {
637 this.classList = response.data.data; 637 this.classList = response.data.data;
638 this.showLoader = false; 638 this.showLoader = false;
639 }) 639 })
640 .catch((error) => { 640 .catch((error) => {
641 this.showLoader = false; 641 this.showLoader = false;
642 // console.log("err====>", err); 642 // console.log("err====>", err);
643 }); 643 });
644 }, 644 },
645 getSections(_id) { 645 getSections(_id) {
646 this.showLoader = true; 646 this.showLoader = true;
647 http() 647 http()
648 .get( 648 .get(
649 "/getSectionsList", 649 "/getSectionsList",
650 { params: { classId: _id } }, 650 { params: { classId: _id } },
651 { 651 {
652 headers: { Authorization: "Bearer " + this.token }, 652 headers: { Authorization: "Bearer " + this.token },
653 } 653 }
654 ) 654 )
655 .then((response) => { 655 .then((response) => {
656 this.addSection = response.data.data; 656 this.addSection = response.data.data;
657 this.showSections = true; 657 this.showSections = true;
658 this.showLoader = false; 658 this.showLoader = false;
659 }) 659 })
660 .catch((err) => { 660 .catch((err) => {
661 this.showLoader = false; 661 this.showLoader = false;
662 // console.log("err====>", err); 662 // console.log("err====>", err);
663 }); 663 });
664 }, 664 },
665 getStudents() { 665 getStudents() {
666 this.getSelectUserData = []; 666 this.getSelectUserData = [];
667 this.showLoader = true; 667 this.showLoader = true;
668 http() 668 http()
669 .get("/getStudentWithClass", { 669 .get("/getStudentWithClass", {
670 params: { 670 params: {
671 classId: this.getReport.classId, 671 classId: this.getReport.classId,
672 sectionId: this.getReport.sectionId, 672 sectionId: this.getReport.sectionId,
673 }, 673 },
674 }) 674 })
675 .then((response) => { 675 .then((response) => {
676 response.data.data.unshift({ 676 response.data.data.unshift({
677 name: "Select All", 677 name: "Select All",
678 _id: "Select All", 678 _id: "Select All",
679 }); 679 });
680 this.getSelectUserData = response.data.data; 680 this.getSelectUserData = response.data.data;
681 this.showStudents = true; 681 this.showStudents = true;
682 this.showLoader = false; 682 this.showLoader = false;
683 }) 683 })
684 .catch((error) => { 684 .catch((error) => {
685 // console.log("err====>", error); 685 // console.log("err====>", error);
686 this.showLoader = false; 686 this.showLoader = false;
687 this.snackbar = true;
688 this.color = "error";
689 this.text = error.response.data.message;
687 this.snackbar = true; 690 });
688 this.color = "error"; 691 },
689 this.text = error.response.data.message; 692 getCards() {
690 }); 693 var getSelectUserId = [];
691 }, 694 for (let i = 0; i < this.getSelectUserData.length; i++) {
692 getCards() { 695 /* if the selected user id mathches any id in the original user data then push it in
693 var getSelectUserId = []; 696 array, this way only one id will be pushed */
694 for (let i = 0; i < this.getSelectUserData.length; i++) { 697 if (this.getReport._id === this.getSelectUserData[i]._id) {
695 /* if the selected user id mathches any id in the original user data then push it in 698 getSelectUserId.push(this.getSelectUserData[i]._id);
696 array, this way only one id will be pushed */ 699 } /* else if select all option is selected then all ids will be pushed */ else if (
697 if (this.getReport._id === this.getSelectUserData[i]._id) { 700 this.getReport._id == "Select All"
698 getSelectUserId.push(this.getSelectUserData[i]._id); 701 ) {
699 } /* else if select all option is selected then all ids will be pushed */ else if ( 702 getSelectUserId.push(this.getSelectUserData[i]._id);
700 this.getReport._id == "Select All" 703 if (
701 ) { 704 getSelectUserId[0] == undefined ||
702 getSelectUserId.push(this.getSelectUserData[i]._id); 705 getSelectUserId[0] == "Select All"
703 if ( 706 ) {
704 getSelectUserId[0] == undefined || 707 getSelectUserId.shift();
705 getSelectUserId[0] == "Select All" 708 }
706 ) { 709 }
707 getSelectUserId.shift(); 710 }
708 } 711
709 } 712 if (this.$refs.form.validate()) {
710 } 713 this.showLoader = true;
711 714 // var strigified = JSON.stringify(getSelectUserId)
712 if (this.$refs.form.validate()) { 715 // var profileId = [];
713 this.showLoader = true; 716 // profileId = getSelectUserId;
714 // var strigified = JSON.stringify(getSelectUserId) 717 var idcardPayload = {
715 // var profileId = []; 718 profileId: getSelectUserId,
716 // profileId = getSelectUserId; 719 role: this.getReport.role.role,
717 var idcardPayload = { 720 };
718 profileId: getSelectUserId, 721 http()
719 role: this.getReport.role.role, 722 .put("/getIdCardDetail", idcardPayload, {
720 }; 723 headers: {
721 http() 724 Authorization: "Bearer " + this.token,
722 .put("/getIdCardDetail", idcardPayload, { 725 },
723 headers: { 726 paramsSerializer: (params) => {
724 Authorization: "Bearer " + this.token, 727 return qs.stringify(params);
725 }, 728 },
726 paramsSerializer: (params) => { 729 // params: {
727 return qs.stringify(params); 730 // profileId: strigified,
728 }, 731 // role: this.getReport.role.role,
729 // params: { 732 // },
730 // profileId: strigified, 733 })
731 // role: this.getReport.role.role, 734 .then((response) => {
732 // }, 735 this.getCard = "";
733 }) 736
734 .then((response) => { 737 var data = response.data.data;
735 this.getCard = ""; 738
736 739 if (data.adminData && data.adminData.length != 0) {
737 var data = response.data.data; 740 this.getCard = response.data.data.adminData;
738 741 // console.log("this.getCard ", this.getCard);
739 if (data.adminData && data.adminData.length != 0) { 742 }
740 this.getCard = response.data.data.adminData; 743 if (data.teachersData && data.teachersData.length != 0) {
741 // console.log("this.getCard ", this.getCard); 744 this.getCard = response.data.data.teachersData;
742 } 745 }
743 if (data.teachersData && data.teachersData.length != 0) { 746 if (data.studentData && data.studentData.length != 0) {
744 this.getCard = response.data.data.teachersData; 747 this.getCard = response.data.data.studentData;
745 } 748 // console.log("this.getCard--studentData ", this.getCard);
746 if (data.studentData && data.studentData.length != 0) { 749 }
747 this.getCard = response.data.data.studentData; 750 if (data.usersData && data.usersData.length != 0) {
748 // console.log("this.getCard--studentData ", this.getCard); 751 this.getCard = response.data.data.usersData;
749 } 752 // console.log("this.getCard--usersData ", this.getCard);
750 if (data.usersData && data.usersData.length != 0) { 753 }
751 this.getCard = response.data.data.usersData; 754 // console.log("this.getCard--all ", response.data.data);
752 // console.log("this.getCard--usersData ", this.getCard); 755 this.showLoader = false;
753 } 756 this.showReport = true;
754 // console.log("this.getCard--all ", response.data.data); 757 })
755 this.showLoader = false; 758 .catch((error) => {
756 this.showReport = true; 759 this.showLoader = false;
757 }) 760 // console.log("error", error.response.data.errors);
758 .catch((error) => { 761 // if (error.response.data.errors) {
759 this.showLoader = false; 762 // this.snackbar = true;
760 // console.log("error", error.response.data.errors); 763 // this.text = " Field is required";
761 // if (error.response.data.errors) { 764 // this.color = "error";
762 // this.snackbar = true; 765 // }
763 // this.text = " Field is required"; 766 });
764 // this.color = "error"; 767 }
765 // } 768 },
766 }); 769 getTeacherList() {
767 } 770 this.getSelectUserData = [];
768 }, 771 this.showLoader = true;
769 getTeacherList() { 772 var token = this.$store.state.token;
770 this.getSelectUserData = []; 773 http()
771 this.showLoader = true; 774 .get("/getTeachersList", {
772 var token = this.$store.state.token; 775 headers: { Authorization: "Bearer " + token },
773 http() 776 })
774 .get("/getTeachersList", { 777 .then((response) => {
775 headers: { Authorization: "Bearer " + token }, 778 response.data.data.unshift({
776 }) 779 name: "Select All",
777 .then((response) => { 780 _id: "Select All",
778 response.data.data.unshift({ 781 });
779 name: "Select All", 782 this.getSelectUserData = response.data.data;
780 _id: "Select All", 783 this.showLoader = false;
781 }); 784 })
782 this.getSelectUserData = response.data.data; 785 .catch((error) => {
783 this.showLoader = false; 786 this.showLoader = false;
784 }) 787 if (error.response.status === 401) {
785 .catch((error) => { 788 this.$router.replace({ path: "/" });
786 this.showLoader = false; 789 this.$store.dispatch("setToken", null);
787 if (error.response.status === 401) { 790 this.$store.dispatch("Id", null);
788 this.$router.replace({ path: "/" }); 791 }
789 this.$store.dispatch("setToken", null); 792 });
790 this.$store.dispatch("Id", null); 793 },
791 } 794 getUsersList(role) {
792 }); 795 this.getSelectUserData = [];
793 }, 796 this.showLoader = true;
794 getUsersList(role) { 797 var token = this.$store.state.token;
795 this.getSelectUserData = []; 798 http()
796 this.showLoader = true; 799 .get("/getUsersList?role=" + role, {
797 var token = this.$store.state.token; 800 headers: { Authorization: "Bearer " + token },
798 http() 801 })
799 .get("/getUsersList?role=" + role, { 802 .then((response) => {
800 headers: { Authorization: "Bearer " + token }, 803 response.data.data.unshift({
801 }) 804 name: "Select All",
802 .then((response) => { 805 _id: "Select All",
803 response.data.data.unshift({ 806 });
804 name: "Select All", 807 this.getSelectUserData = response.data.data;
805 _id: "Select All", 808 this.showLoader = false;
806 }); 809 })
807 this.getSelectUserData = response.data.data; 810 .catch((error) => {
808 this.showLoader = false; 811 this.showLoader = false;
809 }) 812 if (error.response.status === 401) {
810 .catch((error) => { 813 this.$router.replace({ path: "/" });
811 this.showLoader = false; 814 this.$store.dispatch("setToken", null);
812 if (error.response.status === 401) { 815 this.$store.dispatch("Id", null);
813 this.$router.replace({ path: "/" }); 816 }
814 this.$store.dispatch("setToken", null); 817 });
815 this.$store.dispatch("Id", null); 818 },
816 } 819 getParentDetails() {
817 }); 820 http()
818 }, 821 .get("getParentsList", {
819 getParentDetails() { 822 headers: {
820 http() 823 Authorization: "Bearer " + this.$store.state.token,
821 .get("getParentsList", { 824 },
822 headers: { 825 })
823 Authorization: "Bearer " + this.$store.state.token, 826 .then((response) => {
824 }, 827 this.parentsList = response.data.data;
825 }) 828 })
826 .then((response) => { 829 .catch((error) => {
827 this.parentsList = response.data.data; 830 // console.log("err====>", error.response.data.message);
828 }) 831 this.showLoader = false;
829 .catch((error) => { 832 if (error.response.status === 401) {
830 // console.log("err====>", error.response.data.message); 833 this.$router.replace({ path: "/" });
831 this.showLoader = false; 834 this.$store.dispatch("setToken", null);
832 if (error.response.status === 401) { 835 this.$store.dispatch("Id", null);
833 this.$router.replace({ path: "/" }); 836 this.$store.dispatch("Role", null);
834 this.$store.dispatch("setToken", null); 837 }
835 this.$store.dispatch("Id", null); 838 });
836 this.$store.dispatch("Role", null); 839 },
837 } 840 },
838 }); 841 };
839 }, 842 </script>
840 }, 843
841 }; 844 <style scoped>
842 </script> 845 .Data {
843 846 width: 100%;
844 <style scoped> 847 float: left;
845 .Data { 848 margin-bottom: 0px;
846 width: 100%; 849 padding: 0 15px;
847 float: left; 850 font-size: 14px;
848 margin-bottom: 0px; 851 margin-top: 5px;
849 padding: 0 15px; 852 text-align: justify;
850 font-size: 14px; 853 }
851 margin-top: 5px; 854 .idcardreport {
852 text-align: justify; 855 font-family: arial;
853 } 856 max-width: 794px;
854 .idcardreport { 857 max-height: 1123px;
855 font-family: arial; 858 margin-left: auto;
856 max-width: 794px; 859 margin-right: auto;
857 max-height: 1123px; 860 -webkit-print-color-adjust: exact;
858 margin-left: auto; 861 }
859 margin-right: auto; 862 .idcardreport1 {
860 -webkit-print-color-adjust: exact; 863 text-align: center;
861 } 864 margin-left: 35%;
862 .idcardreport1 { 865 }
863 text-align: center; 866 .icard-front {
864 margin-left: 35%; 867 margin: 3px;
865 } 868 float: left;
866 .icard-front { 869 padding: 10px;
867 margin: 3px; 870 text-align: center;
868 float: left; 871 /* height: 520px; */
869 padding: 10px; 872 width: 520px;
870 text-align: center; 873 background: #fff;
871 /* height: 520px; */ 874 border: 1px solid lightgray;
872 width: 520px; 875 }
873 background: #fff; 876 .print-data {
874 border: 1px solid lightgray; 877 margin: 3px;
875 } 878 float: left;
876 .print-data { 879 /* border: 1px solid #000; */
877 margin: 3px; 880 padding: 10px;
878 float: left; 881 /* width: 55%; */
879 /* border: 1px solid #000; */ 882 text-align: center;
880 padding: 10px; 883 height: 95%;
881 /* width: 55%; */ 884 }
882 text-align: center; 885 .rightside {
883 height: 95%; 886 float: right !important;
884 } 887 }
885 .rightside { 888 .icard-front h2 {
886 float: right !important; 889 font-size: 30px;
887 } 890 }
888 .icard-front h2 { 891 .icard-back h2 {
889 font-size: 30px; 892 font-size: 30px;
890 } 893 }
891 .icard-back h2 { 894 .print-data h2 {
892 font-size: 30px; 895 font-size: 30px;
893 } 896 text-align: center;
894 .print-data h2 { 897 }
895 font-size: 30px; 898 .print-data img {
896 text-align: center; 899 width: 70px;
897 } 900 height: 70px;
898 .print-data img { 901 margin-bottom: 5px;
899 width: 70px; 902 }
900 height: 70px; 903 .icard-front img {
901 margin-bottom: 5px; 904 width: 70px;
902 } 905 height: 70px;
903 .icard-front img { 906 margin-bottom: 5px;
904 width: 70px; 907 }
905 height: 70px; 908 .icard-back img {
906 margin-bottom: 5px; 909 width: 50px;
907 } 910 height: 50px;
908 .icard-back img { 911 margin-bottom: 5px;
909 width: 50px; 912 }
910 height: 50px; 913 .icard-img {
911 margin-bottom: 5px; 914 width: 50px;
912 } 915 height: 50px;
913 .icard-img { 916 margin-bottom: 5px;
914 width: 50px; 917 margin-top: 5px;
915 height: 50px; 918 border: 1px solid #ddd;
916 margin-bottom: 5px; 919 }
917 margin-top: 5px; 920 .icard-data {
918 border: 1px solid #ddd; 921 /* font-family: Arial; */
919 } 922 max-width: 794px;
920 .icard-data { 923 max-height: 1123px;
921 /* font-family: Arial; */ 924 margin-left: auto;
922 max-width: 794px; 925 margin-right: auto;
923 max-height: 1123px; 926 -webkit-print-color-adjust: exact;
924 margin-left: auto; 927 }
925 margin-right: auto; 928 .icard-back {
926 -webkit-print-color-adjust: exact; 929 margin: 3px;
927 } 930 /* float: left; */
928 .icard-back { 931 /* border: 1px solid #000; */
929 margin: 3px; 932 padding: 10px;
930 /* float: left; */ 933 /* width: 55%; */
931 /* border: 1px solid #000; */ 934 text-align: center;
932 padding: 10px; 935 /* height: 95%; */
933 /* width: 55%; */ 936 /* margin-top: 35%; */
934 text-align: center; 937 }
935 /* height: 95%; */ 938 .back-icard {
936 /* margin-top: 35%; */ 939 margin: 3px;
937 } 940 padding: 10px;
938 .back-icard { 941 }
939 margin: 3px; 942 .icard-back h3 {
940 padding: 10px; 943 background-color: #000;
941 } 944 color: #fff;
942 .icard-back h3 { 945 font-size: 13px;
943 background-color: #000; 946 padding: 5px 0px;
944 color: #fff; 947 margin: 5px;
945 font-size: 13px; 948 margin-top: 13px;
946 padding: 5px 0px; 949 }
947 margin: 5px; 950 .icard-back h5 {
948 margin-top: 13px; 951 font-size: 11px;
949 } 952 color: #000;
950 .icard-back h5 { 953 font-weight: bold;
951 font-size: 11px; 954 padding: 5px 0px;
952 color: #000; 955 }
953 font-weight: bold; 956 /* .icard-back p {
954 padding: 5px 0px; 957 font-size: 15px;
955 } 958 color: #000;
956 /* .icard-back p { 959 font-weight: 500px;
957 font-size: 15px; 960 line-height: 17px;
958 color: #000; 961 } */
959 font-weight: 500px; 962 .school-address {
960 line-height: 17px; 963 /* width: 40%; */
961 } */ 964 font-weight: 500px;
962 .school-address { 965 color: #000;
963 /* width: 40%; */ 966 }
964 font-weight: 500px; 967 .address {
965 color: #000; 968 font-weight: 500px;
966 } 969 color: #000;
967 .address { 970 text-align: center;
968 font-weight: 500px; 971 }
969 color: #000; 972 .icard-bottom {
970 text-align: center; 973 padding-top: 5px;
971 } 974 text-align: center;
972 .icard-bottom { 975 }
973 padding-top: 5px; 976 .qrcode {
974 text-align: center; 977 float: left;
975 } 978 width: 50%;
976 .qrcode { 979 }
977 float: left; 980 .qrcode img {
978 width: 50%; 981 width: 60px;
979 } 982 height: 60px;
980 .qrcode img { 983 margin-top: 15px;
981 width: 60px; 984 }
982 height: 60px; 985 .session {
983 margin-top: 15px; 986 float: right;
984 } 987 width: 70%;
985 .session { 988 margin-top: 15px;
986 float: right; 989 }
987 width: 70%; 990
988 margin-top: 15px; 991 @media screen and (max-width: 360px) {
989 } 992 .icard-front {
990 993 width: 316px;
991 @media screen and (max-width: 360px) { 994 height: 418px;
992 .icard-front { 995 float: inherit;
993 width: 316px; 996 }
994 height: 418px; 997 .icard-back {
995 float: inherit; 998 float: left;
996 } 999 }
997 .icard-back { 1000 }
998 float: left; 1001 </style>
src/pages/Report/progressCardReport.vue
Diff comments   View file @8b7976c
1 <template> 1 <template>
2 <v-container fluid class="body-color"> 2 <v-container fluid class="body-color">
3 <!-- ****** Progress Card Report Table****** --> 3 <!-- ****** Progress Card Report Table****** -->
4 <v-card flat class="elevation-0 transparent"> 4 <v-card flat class="elevation-0 transparent">
5 <v-form ref="form" v-model="valid" lazy-validation> 5 <v-form ref="form" v-model="valid" lazy-validation>
6 <v-flex xs12 sm12 lg12> 6 <v-flex xs12 sm12 lg12>
7 <v-layout wrap> 7 <v-layout wrap>
8 <v-flex xs12 sm12 lg3> 8 <v-flex xs12 sm12 lg3>
9 <v-layout> 9 <v-layout>
10 <v-flex xs3 sm3 lg2 class="subheading mt-4"> 10 <v-flex xs3 sm3 lg2 class="subheading mt-4">
11 <label class="right">Class:</label> 11 <label class="right">Class:</label>
12 </v-flex> 12 </v-flex>
13 <v-flex xs9 sm6 lg8 class="ml-2"> 13 <v-flex xs9 sm6 lg8 class="ml-2">
14 <v-select 14 <v-select
15 v-model="getReport.classId" 15 v-model="getReport.classId"
16 label="Select your class" 16 label="Select your class"
17 type="text" 17 type="text"
18 :items="classList" 18 :items="classList"
19 item-text="classNum" 19 item-text="classNum"
20 item-value="_id" 20 item-value="_id"
21 :rules="classRules" 21 :rules="classRules"
22 @change="getSections(getReport.classId)" 22 @change="getSections(getReport.classId)"
23 required 23 required
24 ></v-select> 24 ></v-select>
25 </v-flex> 25 </v-flex>
26 </v-layout> 26 </v-layout>
27 </v-flex> 27 </v-flex>
28 <v-flex xs12 sm12 lg3> 28 <v-flex xs12 sm12 lg3>
29 <v-layout> 29 <v-layout>
30 <v-flex xs3 sm3 lg2 class="subheading mt-4"> 30 <v-flex xs3 sm3 lg2 class="subheading mt-4">
31 <label class="right">Section:</label> 31 <label class="right">Section:</label>
32 </v-flex> 32 </v-flex>
33 <v-flex xs9 sm6 lg8 class="ml-2"> 33 <v-flex xs9 sm6 lg8 class="ml-2">
34 <v-select 34 <v-select
35 :items="addSection" 35 :items="addSection"
36 label="Select your Section" 36 label="Select your Section"
37 v-model="getReport.sectionId" 37 v-model="getReport.sectionId"
38 item-text="name" 38 item-text="name"
39 item-value="_id" 39 item-value="_id"
40 name="Select Section" 40 name="Select Section"
41 @change="getStudents" 41 @change="getStudents"
42 :rules="sectionRules" 42 :rules="sectionRules"
43 required 43 required
44 ></v-select> 44 ></v-select>
45 </v-flex> 45 </v-flex>
46 </v-layout> 46 </v-layout>
47 </v-flex> 47 </v-flex>
48 <v-flex xs12 sm12 lg3> 48 <v-flex xs12 sm12 lg3>
49 <v-layout> 49 <v-layout>
50 <v-flex xs3 sm3 lg2 class="subheading mt-4"> 50 <v-flex xs3 sm3 lg2 class="subheading mt-4">
51 <label class="right">Student:</label> 51 <label class="right">Student:</label>
52 </v-flex> 52 </v-flex>
53 <v-flex xs9 sm6 lg8 class="ml-2"> 53 <v-flex xs9 sm6 lg8 class="ml-2">
54 <v-select 54 <v-select
55 :items="getStudentsList" 55 :items="getStudentsList"
56 label="Select your student" 56 label="Select your student"
57 v-model="getReport.studentId" 57 v-model="getReport.studentId"
58 item-text="name" 58 item-text="name"
59 item-value="_id" 59 item-value="_id"
60 :rules="studentRules" 60 :rules="studentRules"
61 required 61 required
62 ></v-select> 62 ></v-select>
63 </v-flex> 63 </v-flex>
64 </v-layout> 64 </v-layout>
65 </v-flex> 65 </v-flex>
66 <v-flex xs12 sm12 lg3> 66 <v-flex xs12 sm12 lg3>
67 <v-btn 67 <v-btn
68 style="margin: auto; 68 style="margin: auto;
69 display: block;" 69 display: block;"
70 @click="getMarkReportList" 70 @click="getMarkReportList"
71 round 71 round
72 dark 72 dark
73 :loading="loading" 73 :loading="loading"
74 class="open-dialog-button mt-3" 74 class="open-dialog-button mt-3"
75 >Get Report</v-btn> 75 >Get Report</v-btn>
76 </v-flex> 76 </v-flex>
77 </v-layout> 77 </v-layout>
78 </v-flex> 78 </v-flex>
79 </v-form> 79 </v-form>
80 </v-card> 80 </v-card>
81 81
82 <v-layout v-show="showReport"> 82 <v-layout v-show="showReport">
83 <v-flex xs12> 83 <v-flex xs12>
84 <v-card class="transparent elevation-0"> 84 <v-card class="transparent elevation-0">
85 <v-container grid-list-md class="report"> 85 <v-container grid-list-md class="report">
86 <v-flex xs12 sm12> 86 <v-flex xs12 sm12>
87 <v-layout wrap> 87 <v-layout wrap>
88 <!-- ****** TABLE DATA MARK ****** --> 88 <!-- ****** TABLE DATA MARK ****** -->
89 <v-flex xs12 sm12 md12> 89 <v-flex xs12 sm12 md12>
90 <v-layout> 90 <v-layout>
91 <v-flex xs12> 91 <v-flex xs12>
92 <v-btn 92 <v-btn
93 class="open-dialog-button" 93 class="open-dialog-button"
94 :loading="printLoader" 94 :loading="printLoader"
95 round 95 round
96 dark 96 dark
97 @click="printProgressReport()" 97 @click="printProgressReport()"
98 > 98 >
99 Print 99 Print
100 <v-icon right dark>print</v-icon> 100 <v-icon right dark>print</v-icon>
101 </v-btn> 101 </v-btn>
102 </v-flex> 102 </v-flex>
103 </v-layout> 103 </v-layout>
104 <div id="printMe"> 104 <div id="printMe">
105 <card class="elevation-0" v-for="(value, id, Index) in filterData" :key="Index"> 105 <card class="elevation-0" v-for="(value, id, Index) in filterData" :key="Index">
106 <v-card 106 <v-card
107 class="ma-3" 107 class="ma-3"
108 style=" 108 style="
109 border: 1px solid lightgrey; 109 border: 1px solid lightgrey;
110 margin-bottom:0px; 110 margin-bottom:0px;
111 padding: 0px" 111 padding: 0px"
112 > 112 >
113 <div style="border: 1px solid lightgray;"> 113 <div style="border: 1px solid lightgray;">
114 <v-layout> 114 <v-layout>
115 <v-flex xs12 sm12 md12> 115 <v-flex xs12 sm12 md12>
116 <div 116 <div
117 style=" 117 style="
118 border-bottom: 1px solid #ddd; 118 border-bottom: 1px solid #ddd;
119 overflow: hidden; 119 overflow: hidden;
120 vertical-align: middle; 120 vertical-align: middle;
121 margin: 10px; 121 margin: 10px;
122 padding-bottom: 0px;" 122 padding-bottom: 0px;"
123 > 123 >
124 <!-- <v-flex xs12 sm12 md12> --> 124 <!-- <v-flex xs12 sm12 md12> -->
125 <v-layout> 125 <v-layout>
126 <div class="school-logo"> 126 <div class="school-logo">
127 <img 127 <img
128 :src="userData.schoolLogoUrl" 128 :src="userData.schoolLogoUrl"
129 v-if="userData.schoolLogoUrl" 129 v-if="userData.schoolLogoUrl"
130 style="width:40px !important;height:40px !important; float: left;" 130 style="width:40px !important;height:40px !important; float: left;"
131 /> 131 />
132 <img 132 <img
133 src="/static/schoolIcons/INTRACK_White.png" 133 src="/static/schoolIcons/INTRACK_White.png"
134 v-else-if="!userData.schoolLogoUrl" 134 v-else-if="!userData.schoolLogoUrl"
135 style="width:40px !important;height:40px !important; float: left;" 135 style="width:40px !important;height:40px !important; float: left;"
136 /> 136 />
137 </div> 137 </div>
138 <div class="school-name"> 138 <div class="school-name">
139 <h3>{{ schoolData.name }}</h3> 139 <h3>{{ schoolData.name }}</h3>
140 </div> 140 </div>
141 </v-layout> 141 </v-layout>
142 <!-- </v-flex> --> 142 <!-- </v-flex> -->
143 </div> 143 </div>
144 <!-- Profile School --> 144 <!-- Profile School -->
145 <v-flex xs12 sm12 md12 lg12 style="margin:0px 0px; "> 145 <v-flex xs12 sm12 md12 lg12 style="margin:0px 0px; ">
146 <v-layout> 146 <v-layout>
147 <div 147 <div
148 style="flex-basis: 40%; 148 style="flex-basis: 40%;
149 -webkit-box-flex: 0; 149 -webkit-box-flex: 0;
150 -ms-flex-positive: 0; 150 -ms-flex-positive: 0;
151 flex-grow: 0; 151 flex-grow: 0;
152 max-width: 40%;" 152 max-width: 40%;"
153 > 153 >
154 <div 154 <div
155 style="padding: 4px; 155 style="padding: 4px;
156 padding-left: 16px !important;" 156 padding-left: 16px !important;"
157 > 157 >
158 <p 158 <p
159 style="font-size:20px;margin-bottom: 0px;" 159 style="font-size:20px;margin-bottom: 0px;"
160 >{{ schoolData.name }}</p> 160 >{{ schoolData.name }}</p>
161 <p 161 <p
162 style="font-size: 15px;color: #707478;margin:0px;margin-bottom:8px;" 162 style="font-size: 15px;color: #707478;margin:0px;margin-bottom:8px;"
163 >{{ schoolData.address }}</p> 163 >{{ schoolData.address }}</p>
164 <p 164 <p
165 style="font-size: 15px;color: #707478;margin:0px;margin-bottom:8px;" 165 style="font-size: 15px;color: #707478;margin:0px;margin-bottom:8px;"
166 >Phone : {{ schoolData.mobile }}</p> 166 >Phone : {{ schoolData.mobile }}</p>
167 <p 167 <p
168 style="font-size: 15px;color: #707478;margin:0px;margin-bottom:8px;" 168 style="font-size: 15px;color: #707478;margin:0px;margin-bottom:8px;"
169 >Email : {{ schoolData.email }}</p> 169 >Email : {{ schoolData.email }}</p>
170 </div> 170 </div>
171 </div> 171 </div>
172 <!-- Profile Student Report Card--> 172 <!-- Profile Student Report Card-->
173 <div 173 <div
174 style="flex-basis: 40%; 174 style="flex-basis: 40%;
175 -webkit-box-flex: 0; 175 -webkit-box-flex: 0;
176 -ms-flex-positive: 0; 176 -ms-flex-positive: 0;
177 flex-grow: 0; 177 flex-grow: 0;
178 max-width: 40%;" 178 max-width: 40%;"
179 > 179 >
180 <div v-for="(studentMark,i,index) in value" :key="index"> 180 <div v-for="(studentMark,i,index) in value" :key="index">
181 <p 181 <p
182 v-if="index == 0" 182 v-if="index == 0"
183 style="font-size:20px;margin-bottom: 0px;" 183 style="font-size:20px;margin-bottom: 0px;"
184 >{{ studentMark[0].studentId.name }}</p> 184 >{{ studentMark[0].studentId.name }}</p>
185 <p 185 <p
186 v-if="index == 0" 186 v-if="index == 0"
187 style="font-size: 15px;color: #707478;margin:0px;margin-bottom:8px;" 187 style="font-size: 15px;color: #707478;margin:0px;margin-bottom:8px;"
188 > 188 >
189 Class : 189 Class :
190 <b>{{ studentMark[0].classId.classNum }}</b> 190 <b>{{ studentMark[0].classId.classNum }}</b>
191 </p> 191 </p>
192 <p 192 <p
193 v-if="index == 0" 193 v-if="index == 0"
194 style="font-size: 15px;color: #707478;margin:0px;margin-bottom:8px;" 194 style="font-size: 15px;color: #707478;margin:0px;margin-bottom:8px;"
195 > 195 >
196 Section : 196 Section :
197 <b>{{ studentMark[0].sectionId.name }}</b> 197 <b>{{ studentMark[0].sectionId.name }}</b>
198 </p> 198 </p>
199 <p 199 <p
200 v-if="index == 0" 200 v-if="index == 0"
201 style="font-size: 15px;color: #707478;margin:0px;margin-bottom:8px;" 201 style="font-size: 15px;color: #707478;margin:0px;margin-bottom:8px;"
202 > 202 >
203 Roll NO : 203 Roll NO :
204 <b>{{ studentMark[0].studentId.rollNo }}</b> 204 <b>{{ studentMark[0].studentId.rollNo }}</b>
205 </p> 205 </p>
206 </div> 206 </div>
207 </div> 207 </div>
208 <div 208 <div
209 style=" 209 style="
210 -ms-flex-preferred-size: 20%; 210 -ms-flex-preferred-size: 20%;
211 flex-basis: 20%; 211 flex-basis: 20%;
212 -webkit-box-flex: 0; 212 -webkit-box-flex: 0;
213 -ms-flex-positive: 0; 213 -ms-flex-positive: 0;
214 flex-grow: 0; 214 flex-grow: 0;
215 max-width: 20%;" 215 max-width: 20%;"
216 > 216 >
217 <div v-for="(studentMark,i,index) in value" :key="index"> 217 <div v-for="(studentMark,i,index) in value" :key="index">
218 <div 218 <div
219 style="padding-top:16px" 219 style="padding-top:16px"
220 v-if="index == 0" 220 v-if="index == 0"
221 class="hidden-sm-only hidden-xs-only" 221 class="hidden-sm-only hidden-xs-only"
222 > 222 >
223 <img 223 <img
224 src="/static/icon/user.png" 224 src="/static/icon/user.png"
225 v-if="!studentMark[0].studentId.profilePicUrl" 225 v-if="!studentMark[0].studentId.profilePicUrl"
226 style="width:60px;height:60px;" 226 style="width:60px;height:60px;"
227 /> 227 />
228 <img 228 <img
229 :src="studentMark[0].studentId.profilePicUrl" 229 :src="studentMark[0].studentId.profilePicUrl"
230 v-else-if="studentMark[0].studentId.profilePicUrl" 230 v-else-if="studentMark[0].studentId.profilePicUrl"
231 style="width:60px;height:60px;" 231 style="width:60px;height:60px;"
232 /> 232 />
233 </div> 233 </div>
234 </div> 234 </div>
235 </div> 235 </div>
236 </v-layout> 236 </v-layout>
237 </v-flex> 237 </v-flex>
238 </v-flex> 238 </v-flex>
239 </v-layout> 239 </v-layout>
240 <v-card 240 <v-card
241 v-for="studentMarks in value" 241 v-for="studentMarks in value"
242 :key="studentMarks" 242 :key="studentMarks"
243 style=" 243 style="
244 background-color: #fff; 244 background-color: #fff;
245 border-color: #fff; 245 border-color: #fff;
246 color: rgba(0,0,0,0.87); 246 color: rgba(0,0,0,0.87);
247 overflow-x: auto; 247 overflow-x: auto;
248 display: block; 248 display: block;
249 webkit-box-shadow: 0px 0px 0px 0px rgba(0,0,0,0.2), 0px 0px 0px 0px rgba(0,0,0,0.14), 0px 0px 0px 0px rgba(0,0,0,0.12) !important; 249 webkit-box-shadow: 0px 0px 0px 0px rgba(0,0,0,0.2), 0px 0px 0px 0px rgba(0,0,0,0.14), 0px 0px 0px 0px rgba(0,0,0,0.12) !important;
250 box-shadow: 0px 0px 0px 0px rgba(0,0,0,0.2), 0px 0px 0px 0px rgba(0,0,0,0.14), 0px 0px 0px 0px rgba(0,0,0,0.12) !important;" 250 box-shadow: 0px 0px 0px 0px rgba(0,0,0,0.2), 0px 0px 0px 0px rgba(0,0,0,0.14), 0px 0px 0px 0px rgba(0,0,0,0.12) !important;"
251 > 251 >
252 <table 252 <table
253 v-for="(studentMark,key) in studentMarks" 253 v-for="(studentMark,key) in studentMarks"
254 :key="key" 254 :key="key"
255 class="tableRsponsive feeTypeTable subheading" 255 class="tableRsponsive feeTypeTable subheading"
256 style="border: 1px solid black; 256 style="border: 1px solid black;
257 border-collapse: collapse;!important 257 border-collapse: collapse;!important
258 table-layout: auto !important; 258 table-layout: auto !important;
259 width: 100% !important; 259 width: 100% !important;
260 overflow: hidden;" 260 overflow: hidden;"
261 > 261 >
262 <thead 262 <thead
263 style="border: 1px solid transparent !important" 263 style="border: 1px solid transparent !important"
264 v-if="key == 0" 264 v-if="key == 0"
265 > 265 >
266 <tr style="border: 1px solid transparent !important"> 266 <tr style="border: 1px solid transparent !important">
267 <td 267 <td
268 colspan="4" 268 colspan="4"
269 style="text-align: inherit !important; 269 style="text-align: inherit !important;
270 border-right: inherit; 270 border-right: inherit;
271 border-top: inherit; 271 border-top: inherit;
272 padding:14px;" 272 padding:14px;"
273 >{{studentMark.examId.examName}}</td> 273 >{{studentMark.examId.examName}}</td>
274 </tr> 274 </tr>
275 <tr style="border: 1px solid lightgrey !important;padding:4px;"> 275 <tr style="border: 1px solid lightgrey !important;padding:4px;">
276 <td 276 <td
277 rowspan="2" 277 rowspan="2"
278 style="border: 1px solid lightgrey !important;padding: 0px;" 278 style="border: 1px solid lightgrey !important;padding: 0px;"
279 >Subject</td> 279 >Subject</td>
280 <template> 280 <template>
281 <td 281 <td
282 v-for="(studentMarkData,i) in studentMark.studentsMarks" 282 v-for="(studentMarkData,i) in studentMark.studentsMarks"
283 :key="i" 283 :key="i"
284 colspan="2" 284 colspan="2"
285 style="border: 1px solid lightgrey !important;padding: 0px;" 285 style="border: 1px solid lightgrey !important;padding: 0px;"
286 >{{studentMarkData.markDistributionId.distributionType}}</td> 286 >{{studentMarkData.markDistributionId.distributionType}}</td>
287 <td 287 <td
288 style="border: 1px solid lightgrey !important;padding: 0px;" 288 style="border: 1px solid lightgrey !important;padding: 0px;"
289 >Total Marks</td> 289 >Total Marks</td>
290 </template> 290 </template>
291 </tr> 291 </tr>
292 <tr style="border: 1px solid lightgrey !important;"> 292 <tr style="border: 1px solid lightgrey !important;">
293 <template v-for="(exam, ind) in studentMark.studentsMarks"> 293 <template v-for="(exam, ind) in studentMark.studentsMarks">
294 <td 294 <td
295 :key="ind" 295 :key="ind"
296 style="border: 1px solid lightgrey !important;padding: 0px;" 296 style="border: 1px solid lightgrey !important;padding: 0px;"
297 >Marks</td> 297 >Marks</td>
298 <td 298 <td
299 :key="ind" 299 :key="ind"
300 style="border: 1px solid lightgrey !important;padding: 0px;" 300 style="border: 1px solid lightgrey !important;padding: 0px;"
301 >Highest Marks</td> 301 >Highest Marks</td>
302 </template> 302 </template>
303 </tr> 303 </tr>
304 </thead> 304 </thead>
305 <tbody 305 <tbody
306 style="border: 1px solid lightgrey !important;" 306 style="border: 1px solid lightgrey !important;"
307 v-if="key == 0" 307 v-if="key == 0"
308 > 308 >
309 <tr v-for="studentMark in studentMarks" :key="studentMark"> 309 <tr v-for="studentMark in studentMarks" :key="studentMark">
310 <td 310 <td
311 style="border: 1px solid lightgrey !important;padding: 0px;" 311 style="border: 1px solid lightgrey !important;padding: 0px;"
312 >{{studentMark.subjectName}}</td> 312 >{{studentMark.subjectName}}</td>
313 <template v-for="(exam, index) in studentMark.studentsMarks"> 313 <template v-for="(exam, index) in studentMark.studentsMarks">
314 <td 314 <td
315 :key="index" 315 :key="index"
316 style="border: 1px solid lightgrey !important;padding: 0px;" 316 style="border: 1px solid lightgrey !important;padding: 0px;"
317 >{{exam.marksScored}}</td> 317 >{{exam.marksScored}}</td>
318 <td 318 <td
319 :key="index" 319 :key="index"
320 style="border: 1px solid lightgrey !important;padding: 0px;" 320 style="border: 1px solid lightgrey !important;padding: 0px;"
321 >{{exam.markDistributionId.markValue}}</td> 321 >{{exam.markDistributionId.markValue}}</td>
322 </template> 322 </template>
323 <td 323 <td
324 style="border: 1px solid lightgrey !important;padding: 0px;" 324 style="border: 1px solid lightgrey !important;padding: 0px;"
325 >{{studentMark.totalMarks}}</td> 325 >{{studentMark.totalMarks}}</td>
326 </tr> 326 </tr>
327 </tbody> 327 </tbody>
328 <tfoot v-if="key == studentMarks.length - 1"> 328 <tfoot v-if="key == studentMarks.length - 1">
329 <tr style="border: 1px solid lightgrey !important;"> 329 <tr style="border: 1px solid lightgrey !important;">
330 <td 330 <td
331 colspan="5" 331 colspan="5"
332 class="subheding" 332 class="subheding"
333 style=" 333 style="
334 border: 1px solid #e2e7eb; 334 border: 1px solid #e2e7eb;
335 text-align:center 335 text-align:center
336 padding: 0px;" 336 padding: 0px;"
337 >Total Marks</td> 337 >Total Marks</td>
338 <td 338 <td
339 colspan="7" 339 colspan="7"
340 style="border: 1px solid lightgrey !important;padding: 0px;" 340 style="border: 1px solid lightgrey !important;padding: 0px;"
341 >{{ studentMark.allSubjectTotalMarks }}</td> 341 >{{ studentMark.allSubjectTotalMarks }}</td>
342 </tr> 342 </tr>
343 <tr> 343 <tr>
344 <td 344 <td
345 colspan="5" 345 colspan="5"
346 class="subheding" 346 class="subheding"
347 style=" 347 style="
348 border: 1px solid #e2e7eb; 348 border: 1px solid #e2e7eb;
349 text-align:center 349 text-align:center
350 padding: 0px;" 350 padding: 0px;"
351 >Grade</td> 351 >Grade</td>
352 <td 352 <td
353 colspan="7" 353 colspan="7"
354 style="border: 1px solid lightgrey !important;padding: 0px;" 354 style="border: 1px solid lightgrey !important;padding: 0px;"
355 >{{ studentMark.grade ? studentMark.grade : "-" }}</td> 355 >{{ studentMark.grade ? studentMark.grade : "-" }}</td>
356 </tr> 356 </tr>
357 <tr> 357 <tr>
358 <td 358 <td
359 colspan="5" 359 colspan="5"
360 style=" 360 style="
361 border: 1px solid #e2e7eb; 361 border: 1px solid #e2e7eb;
362 text-align:center 362 text-align:center
363 padding: 0px;" 363 padding: 0px;"
364 class="subheding" 364 class="subheding"
365 >Average Mark</td> 365 >Average Mark</td>
366 <td 366 <td
367 colspan="7" 367 colspan="7"
368 style="border: 1px solid lightgrey !important;padding: 0px;" 368 style="border: 1px solid lightgrey !important;padding: 0px;"
369 >-</td> 369 >-</td>
370 </tr> 370 </tr>
371 <tr> 371 <tr>
372 <td 372 <td
373 colspan="5" 373 colspan="5"
374 style=" 374 style="
375 border: 1px solid #e2e7eb; 375 border: 1px solid #e2e7eb;
376 text-align:center 376 text-align:center
377 padding: 0px; !important; 377 padding: 0px; !important;
378 font-size: 16px !important;" 378 font-size: 16px !important;"
379 class="subheding" 379 class="subheding"
380 >GPA</td> 380 >GPA</td>
381 <td 381 <td
382 colspan="7" 382 colspan="7"
383 style="border: 1px solid lightgrey !important;padding: 0px !important;font-size: 16px !important;" 383 style="border: 1px solid lightgrey !important;padding: 0px !important;font-size: 16px !important;"
384 >-</td> 384 >-</td>
385 </tr> 385 </tr>
386 </tfoot> 386 </tfoot>
387 </table> 387 </table>
388 </v-card> 388 </v-card>
389 </div> 389 </div>
390 </v-card> 390 </v-card>
391 <p style="page-break-after: always;">&nbsp;</p> 391 <p style="page-break-after: always;">&nbsp;</p>
392 </card> 392 </card>
393 </div> 393 </div>
394 </v-flex> 394 </v-flex>
395 </v-layout> 395 </v-layout>
396 </v-flex> 396 </v-flex>
397 </v-container> 397 </v-container>
398 </v-card> 398 </v-card>
399 </v-flex> 399 </v-flex>
400 </v-layout> 400 </v-layout>
401 <div class="loader" v-if="showLoader"> 401 <div class="loader" v-if="showLoader">
402 <v-progress-circular indeterminate color="white"></v-progress-circular> 402 <v-progress-circular indeterminate color="white"></v-progress-circular>
403 </div> 403 </div>
404 </v-container> 404 </v-container>
405 </template> 405 </template>
406 406
407 <script> 407 <script>
408 import http from "@/Services/http.js"; 408 import http from "@/Services/http.js";
409 import moment from "moment"; 409 import moment from "moment";
410 import _ from "underscore"; 410 import _ from "underscore";
411 411
412 export default { 412 export default {
413 data: () => ({ 413 data: () => ({
414 showLoader: false, 414 showLoader: false,
415 cardData: [], 415 cardData: [],
416 token: "", 416 token: "",
417 markDistributions: [], 417 markDistributions: [],
418 markParticularDistributionData: [], 418 markParticularDistributionData: [],
419 loading: false, 419 loading: false,
420 valid: true, 420 valid: true,
421 loading: false, 421 loading: false,
422 showReport: false, 422 showReport: false,
423 printLoader: false, 423 printLoader: false,
424 addSection: [], 424 addSection: [],
425 filterData: [], 425 filterData: [],
426 getStudentsList: [], 426 getStudentsList: [],
427 classRules: [(v) => !!v || "Class is required"], 427 classRules: [(v) => !!v || "Class is required"],
428 sectionRules: [(v) => !!v || "Class is required"], 428 sectionRules: [(v) => !!v || "Class is required"],
429 studentRules: [(v) => !!v || "Student is required"], 429 studentRules: [(v) => !!v || "Student is required"],
430 getReport: {}, 430 getReport: {},
431 classList: [], 431 classList: [],
432 output: null, 432 output: null,
433 userData: {}, 433 userData: {},
434 newData: [], 434 newData: [],
435 gradeAPlus: "A+", 435 gradeAPlus: "A+",
436 gradeA: "A", 436 gradeA: "A",
437 gradeBPlus: "B+", 437 gradeBPlus: "B+",
438 gradeB: "B", 438 gradeB: "B",
439 gradeCPlus: "C+", 439 gradeCPlus: "C+",
440 gradeC: "C", 440 gradeC: "C",
441 totalMarks: "", 441 totalMarks: "",
442 }), 442 }),
443 mounted() { 443 mounted() {
444 this.token = this.$store.state.token; 444 this.token = this.$store.state.token;
445 this.getClass(); 445 this.getClass();
446 this.getUserData(); 446 this.getUserData();
447 }, 447 },
448 methods: { 448 methods: {
449 clear() { 449 clear() {
450 this.$refs.form.reset(); 450 this.$refs.form.reset();
451 }, 451 },
452 getClass() { 452 getClass() {
453 this.showLoader = true; 453 this.showLoader = true;
454 http() 454 http()
455 .get("/getClassesList", { 455 .get("/getClassesList", {
456 headers: { Authorization: "Bearer " + this.token }, 456 headers: { Authorization: "Bearer " + this.token },
457 }) 457 })
458 .then((response) => { 458 .then((response) => {
459 this.classList = response.data.data; 459 this.classList = response.data.data;
460 this.showLoader = false; 460 this.showLoader = false;
461 }) 461 })
462 .catch((error) => { 462 .catch((error) => {
463 this.showLoader = false; 463 this.showLoader = false;
464 // console.log("err====>", err); 464 // console.log("err====>", err);
465 }); 465 });
466 }, 466 },
467 getSections(_id) { 467 getSections(_id) {
468 this.showLoader = true; 468 this.showLoader = true;
469 http() 469 http()
470 .get( 470 .get(
471 "/getSectionsList", 471 "/getSectionsList",
472 { params: { classId: _id } }, 472 { params: { classId: _id } },
473 { 473 {
474 headers: { Authorization: "Bearer " + this.token }, 474 headers: { Authorization: "Bearer " + this.token },
475 } 475 }
476 ) 476 )
477 .then((response) => { 477 .then((response) => {
478 this.addSection = response.data.data; 478 this.addSection = response.data.data;
479 this.showLoader = false; 479 this.showLoader = false;
480 }) 480 })
481 .catch((err) => { 481 .catch((err) => {
482 this.showLoader = false; 482 this.showLoader = false;
483 // console.log("err====>", err); 483 // console.log("err====>", err);
484 }); 484 });
485 }, 485 },
486 getStudents() { 486 getStudents() {
487 this.showLoader = true; 487 this.showLoader = true;
488 http() 488 http()
489 .get("/getStudentWithClass", { 489 .get("/getStudentWithClass", {
490 params: { 490 params: {
491 classId: this.getReport.classId, 491 classId: this.getReport.classId,
492 sectionId: this.getReport.sectionId, 492 sectionId: this.getReport.sectionId,
493 }, 493 },
494 }) 494 })
495 .then((response) => { 495 .then((response) => {
496 response.data.data.unshift({ 496 response.data.data.unshift({
497 name: "Select All", 497 name: "Select All",
498 _id: "Select All", 498 _id: "Select All",
499 }); 499 });
500 this.getStudentsList = response.data.data; 500 this.getStudentsList = response.data.data;
501 this.showLoader = false; 501 this.showLoader = false;
502 }) 502 })
503 .catch((error) => { 503 .catch((error) => {
504 // console.log("err====>", error); 504 // console.log("err====>", error);
505 this.showLoader = false; 505 this.showLoader = false;
506 this.snackbar = true;
507 this.color = "error";
508 this.text = error.response.data.message;
506 this.snackbar = true; 509 });
507 this.color = "error"; 510 },
508 this.text = error.response.data.message; 511 getMarkReportList() {
509 }); 512 this.showLoader = true;
510 }, 513 this.showReport = true;
511 getMarkReportList() { 514 var getSelectMarks = {};
512 this.showLoader = true; 515 if (this.getReport.studentId == "Select All") {
513 this.showReport = true; 516 getSelectMarks = {
514 var getSelectMarks = {}; 517 classId: this.getReport.classId,
515 if (this.getReport.studentId == "Select All") { 518 sectionId: this.getReport.sectionId,
516 getSelectMarks = { 519 };
517 classId: this.getReport.classId, 520 } else if (this.getReport.studentId != "Select All") {
518 sectionId: this.getReport.sectionId, 521 getSelectMarks = {
519 }; 522 classId: this.getReport.classId,
520 } else if (this.getReport.studentId != "Select All") { 523 sectionId: this.getReport.sectionId,
521 getSelectMarks = { 524 studentId: this.getReport.studentId,
522 classId: this.getReport.classId, 525 };
523 sectionId: this.getReport.sectionId, 526 }
524 studentId: this.getReport.studentId, 527 http()
525 }; 528 .get("/getParticularMark", {
526 } 529 params: getSelectMarks,
527 http() 530 headers: { Authorization: "Bearer " + this.token },
528 .get("/getParticularMark", { 531 })
529 params: getSelectMarks, 532 .then((response) => {
530 headers: { Authorization: "Bearer " + this.token }, 533 // console.log("===response===", response.data.data[0].schoolId);
531 }) 534 this.cardData = response.data.data;
532 .then((response) => { 535 this.schoolData = response.data.data[0].schoolId;
533 // console.log("===response===", response.data.data[0].schoolId); 536 let newData = response.data.data;
534 this.cardData = response.data.data; 537 for (var i = 0; i < newData.length; i++) {
535 this.schoolData = response.data.data[0].schoolId; 538 newData[i].examination = newData[i].examId._id;
536 let newData = response.data.data; 539 newData[i].studentsId = newData[i].studentId._id;
537 for (var i = 0; i < newData.length; i++) { 540 }
538 newData[i].examination = newData[i].examId._id; 541 var studentMarkArray = [];
539 newData[i].studentsId = newData[i].studentId._id; 542 studentMarkArray = _.groupBy(newData, ["studentsId"]);
540 } 543 for (let data in studentMarkArray) {
541 var studentMarkArray = []; 544 studentMarkArray[data] = _.groupBy(studentMarkArray[data], [
542 studentMarkArray = _.groupBy(newData, ["studentsId"]); 545 "examination",
543 for (let data in studentMarkArray) { 546 ]);
544 studentMarkArray[data] = _.groupBy(studentMarkArray[data], [ 547 }
545 "examination", 548 this.filterData = studentMarkArray;
546 ]); 549 for (let data in this.filterData) {
547 } 550 for (let item in this.filterData[data]) {
548 this.filterData = studentMarkArray; 551 var allSubjectTotalMarks = 0;
549 for (let data in this.filterData) { 552 for (let i = 0; i < this.filterData[data][item].length; i++) {
550 for (let item in this.filterData[data]) { 553 var totalMarks = 0;
551 var allSubjectTotalMarks = 0; 554 for (
552 for (let i = 0; i < this.filterData[data][item].length; i++) { 555 let j = 0;
553 var totalMarks = 0; 556 j < studentMarkArray[data][item][i].studentsMarks.length;
554 for ( 557 j++
555 let j = 0; 558 ) {
556 j < studentMarkArray[data][item][i].studentsMarks.length; 559 totalMarks +=
557 j++ 560 studentMarkArray[data][item][i].studentsMarks[j]
558 ) { 561 .marksScored;
559 totalMarks += 562 }
560 studentMarkArray[data][item][i].studentsMarks[j] 563 this.filterData[data][item][i].totalMarks = totalMarks;
561 .marksScored; 564
562 } 565 allSubjectTotalMarks += this.filterData[data][item][i]
563 this.filterData[data][item][i].totalMarks = totalMarks; 566 .totalMarks;
564 567 this.filterData[data][item][
565 allSubjectTotalMarks += this.filterData[data][item][i] 568 i
566 .totalMarks; 569 ].allSubjectTotalMarks = allSubjectTotalMarks;
567 this.filterData[data][item][ 570 }
568 i 571
569 ].allSubjectTotalMarks = allSubjectTotalMarks; 572 // this.totalMarks = totalMarks;
570 } 573 if (totalMarks > 90) {
571 574 this.filterData[data][item].grade = this.gradeAPlus;
572 // this.totalMarks = totalMarks; 575 } else if (totalMarks > 80 && totalMarks < 90) {
573 if (totalMarks > 90) { 576 this.filterData[data][item].grade = this.gradeA;
574 this.filterData[data][item].grade = this.gradeAPlus; 577 } else if (totalMarks > 70 && totalMarks < 80) {
575 } else if (totalMarks > 80 && totalMarks < 90) { 578 this.filterData[data][item].grade = this.gradeBPlus;
576 this.filterData[data][item].grade = this.gradeA; 579 } else if (totalMarks > 60 && totalMarks < 70) {
577 } else if (totalMarks > 70 && totalMarks < 80) { 580 this.filterData[data][item].grade = this.gradeB;
578 this.filterData[data][item].grade = this.gradeBPlus; 581 } else if (totalMarks > 50 && totalMarks < 60) {
579 } else if (totalMarks > 60 && totalMarks < 70) { 582 this.filterData[data][item].grade = this.gradeCPlus;
580 this.filterData[data][item].grade = this.gradeB; 583 } else if (totalMarks > 40 && totalMarks < 50) {
581 } else if (totalMarks > 50 && totalMarks < 60) { 584 this.filterData[data][item].grade = this.gradeC;
582 this.filterData[data][item].grade = this.gradeCPlus; 585 }
583 } else if (totalMarks > 40 && totalMarks < 50) { 586 }
584 this.filterData[data][item].grade = this.gradeC; 587 }
585 } 588 // console.log("this.filterData-----------last", this.filterData);
586 } 589
587 } 590 this.showLoader = false;
588 // console.log("this.filterData-----------last", this.filterData); 591 })
589 592 .catch((error) => {
590 this.showLoader = false; 593 // console.log("err====>", err);
591 }) 594 this.showLoader = false;
592 .catch((error) => { 595 this.snackbar = true;
593 // console.log("err====>", err); 596 // this.text = error.response.data.message;
594 this.showLoader = false; 597 // if (error.response.status === 401) {
595 this.snackbar = true; 598 // this.$router.replace({ path: "/" });
596 // this.text = error.response.data.message; 599 // this.$store.dispatch("setToken", null);
597 // if (error.response.status === 401) { 600 // this.$store.dispatch("Id", null);
598 // this.$router.replace({ path: "/" }); 601 // }
599 // this.$store.dispatch("setToken", null); 602 });
600 // this.$store.dispatch("Id", null); 603 },
601 // } 604 printProgressReport() {
602 }); 605 this.printLoader = true;
603 }, 606 setTimeout(() => {
604 printProgressReport() { 607 // Pass the element id here
605 this.printLoader = true; 608 this.$htmlToPaper("printMe");
606 setTimeout(() => { 609 this.printLoader = false;
607 // Pass the element id here 610 }, 4000);
608 this.$htmlToPaper("printMe"); 611 },
609 this.printLoader = false; 612 getUserData() {
610 }, 4000); 613 http()
611 }, 614 .get("/getParticularUserDetail")
612 getUserData() { 615 .then((response) => {
613 http() 616 this.userData = response.data.data;
614 .get("/getParticularUserDetail") 617 })
615 .then((response) => { 618 .catch((error) => {
616 this.userData = response.data.data; 619 if (error.response.status === 401) {
617 }) 620 this.$router.replace({ path: "/" });
618 .catch((error) => { 621 this.$store.dispatch("setToken", null);
619 if (error.response.status === 401) { 622 this.$store.dispatch("Id", null);
620 this.$router.replace({ path: "/" }); 623 }
621 this.$store.dispatch("setToken", null); 624 });
622 this.$store.dispatch("Id", null); 625 },
623 } 626 },
624 }); 627 };
625 }, 628 </script>
626 }, 629
627 }; 630 <style scoped>
628 </script> 631 table {
629 632 border-collapse: collapse;
630 <style scoped> 633 border: 1px solid #e2e7eb;
631 table { 634 }
632 border-collapse: collapse; 635
633 border: 1px solid #e2e7eb; 636 th,
634 } 637 td {
635 638 border: 1px solid #e2e7eb;
636 th, 639 padding: 0px;
637 td { 640 text-align: center;
638 border: 1px solid #e2e7eb; 641 }
639 padding: 0px; 642 table.feeTypeTable {
640 text-align: center; 643 table-layout: auto !important;
641 } 644 width: 100% !important;
642 table.feeTypeTable { 645 }
643 table-layout: auto !important; 646 .bg-sky {
644 width: 100% !important; 647 background-color: #98b2cc !important;
645 } 648 }
646 .bg-sky { 649 .bg-sky-light {
647 background-color: #98b2cc !important; 650 background-color: #89a0b8;
648 } 651 }
649 .bg-sky-light { 652 .bg-purple {
650 background-color: #89a0b8; 653 background-color: #9583ac;
651 } 654 }
652 .bg-purple { 655 .bg-skyDark {
653 background-color: #9583ac; 656 background-color: #956785;
654 } 657 }
655 .bg-skyDark { 658
656 background-color: #956785; 659 /* .report {
657 } 660 overflow: hidden;
658 661 max-width: 794px;
659 /* .report { 662 margin: 0px auto;
660 overflow: hidden; 663 margin-bottom: 10px;
661 max-width: 794px; 664 padding: 30px;
662 margin: 0px auto; 665 } */
663 margin-bottom: 10px; 666 .line {
664 padding: 30px; 667 border-bottom: 1px solid #ddd;
665 } */ 668 overflow: hidden;
666 .line { 669 padding-bottom: 10px;
667 border-bottom: 1px solid #ddd; 670 vertical-align: middle;
668 overflow: hidden; 671 margin-bottom: 4px;
669 padding-bottom: 10px; 672 }
670 vertical-align: middle; 673 .school-logo {
671 margin-bottom: 4px; 674 float: left;
672 } 675 }
673 .school-logo { 676 .school-name {
674 float: left; 677 box-sizing: border-box;
675 } 678 }
676 .school-name { 679 .school-info {
677 box-sizing: border-box; 680 width: 100%;
678 } 681 overflow: hidden;
679 .school-info { 682 }
680 width: 100%; 683 .school-address {
681 overflow: hidden; 684 float: left;
682 } 685 width: 40%;
683 .school-address { 686 }
684 float: left; 687 .student-data {
685 width: 40%; 688 float: right;
686 } 689 width: 40%;
687 .student-data { 690 }
688 float: right; 691 .student-info {
689 width: 40%; 692 float: left;
690 } 693 }
691 .student-info { 694 @media screen and (max-width: 380px) {
692 float: left; 695 .tableRsponsive {
693 } 696 /* display: block; */
694 @media screen and (max-width: 380px) { 697 position: relative;
695 .tableRsponsive { 698 overflow: scroll;
696 /* display: block; */ 699 }
697 position: relative; 700 }
698 overflow: scroll; 701 </style> s
src/pages/Report/studentReport.vue
Diff comments   View file @8b7976c
1 <template> 1 <template>
2 <v-container fluid class="body-color"> 2 <v-container fluid class="body-color">
3 <!-- ****** Student Report TABLE****** --> 3 <!-- ****** Student Report TABLE****** -->
4 <v-card flat class="elevation-0 transparent"> 4 <v-card flat class="elevation-0 transparent">
5 <v-form ref="form" v-model="valid" lazy-validation> 5 <v-form ref="form" v-model="valid" lazy-validation>
6 <v-flex xs12 sm12 lg12> 6 <v-flex xs12 sm12 lg12>
7 <v-layout wrap> 7 <v-layout wrap>
8 <v-flex xs12 sm12 lg4> 8 <v-flex xs12 sm12 lg4>
9 <v-layout> 9 <v-layout>
10 <v-flex xs4 sm4 lg3 class="subheading mt-4"> 10 <v-flex xs4 sm4 lg3 class="subheading mt-4">
11 <label class="right">Report For :</label> 11 <label class="right">Report For :</label>
12 </v-flex> 12 </v-flex>
13 <v-flex xs7 sm6 lg8 class="ml-2"> 13 <v-flex xs7 sm6 lg8 class="ml-2">
14 <v-autocomplete 14 <v-autocomplete
15 v-model="report.form" 15 v-model="report.form"
16 label="Select your report for" 16 label="Select your report for"
17 :items="formList" 17 :items="formList"
18 item-text="name" 18 item-text="name"
19 item-value="value" 19 item-value="value"
20 @change="getReport(report.form)" 20 @change="getReport(report.form)"
21 :rules="formRules" 21 :rules="formRules"
22 required 22 required
23 ></v-autocomplete> 23 ></v-autocomplete>
24 </v-flex> 24 </v-flex>
25 </v-layout> 25 </v-layout>
26 </v-flex> 26 </v-flex>
27 <v-flex xs12 sm12 lg4 v-if="bloodGroup"> 27 <v-flex xs12 sm12 lg4 v-if="bloodGroup">
28 <v-layout> 28 <v-layout>
29 <v-flex xs4 sm4 lg4 class="subheading mt-4"> 29 <v-flex xs4 sm4 lg4 class="subheading mt-4">
30 <label class="right">Blood Group :</label> 30 <label class="right">Blood Group :</label>
31 </v-flex> 31 </v-flex>
32 <v-flex xs7 sm6 lg8 class="ml-2"> 32 <v-flex xs7 sm6 lg8 class="ml-2">
33 <v-autocomplete 33 <v-autocomplete
34 v-model="report.bloodGroup" 34 v-model="report.bloodGroup"
35 label="Select your Blood Group " 35 label="Select your Blood Group "
36 :items="bloodGroupList" 36 :items="bloodGroupList"
37 :rules="bloodGroupRules" 37 :rules="bloodGroupRules"
38 required 38 required
39 ></v-autocomplete> 39 ></v-autocomplete>
40 </v-flex> 40 </v-flex>
41 </v-layout> 41 </v-layout>
42 </v-flex> 42 </v-flex>
43 <v-flex xs12 sm12 lg4 v-if="genderShow"> 43 <v-flex xs12 sm12 lg4 v-if="genderShow">
44 <v-layout> 44 <v-layout>
45 <v-flex xs4 sm4 lg4 class="subheading mt-4"> 45 <v-flex xs4 sm4 lg4 class="subheading mt-4">
46 <label class="right">Gender:</label> 46 <label class="right">Gender:</label>
47 </v-flex> 47 </v-flex>
48 <v-flex xs7 sm6 lg8 class="ml-2"> 48 <v-flex xs7 sm6 lg8 class="ml-2">
49 <v-autocomplete 49 <v-autocomplete
50 v-model="report.gender" 50 v-model="report.gender"
51 label="Select your gender " 51 label="Select your gender "
52 :items="gender" 52 :items="gender"
53 :rules="genderRules" 53 :rules="genderRules"
54 required 54 required
55 ></v-autocomplete> 55 ></v-autocomplete>
56 </v-flex> 56 </v-flex>
57 </v-layout> 57 </v-layout>
58 </v-flex> 58 </v-flex>
59 <v-flex xs12 sm12 lg4 v-if="TransportShow"> 59 <v-flex xs12 sm12 lg4 v-if="TransportShow">
60 <v-layout> 60 <v-layout>
61 <v-flex xs4 sm4 lg4 class="subheading mt-4"> 61 <v-flex xs4 sm4 lg4 class="subheading mt-4">
62 <label class="right">Route:</label> 62 <label class="right">Route:</label>
63 </v-flex> 63 </v-flex>
64 <v-flex xs7 sm6 lg8 class="ml-2"> 64 <v-flex xs7 sm6 lg8 class="ml-2">
65 <v-autocomplete 65 <v-autocomplete
66 v-model="report.route" 66 v-model="report.route"
67 label="Select your gender " 67 label="Select your gender "
68 :items="route" 68 :items="route"
69 :rules="routeRules" 69 :rules="routeRules"
70 required 70 required
71 ></v-autocomplete> 71 ></v-autocomplete>
72 </v-flex> 72 </v-flex>
73 </v-layout> 73 </v-layout>
74 </v-flex> 74 </v-flex>
75 <v-flex xs12 sm12 lg4 v-if="HostelShow"> 75 <v-flex xs12 sm12 lg4 v-if="HostelShow">
76 <v-layout> 76 <v-layout>
77 <v-flex xs4 sm4 lg4 class="subheading mt-4"> 77 <v-flex xs4 sm4 lg4 class="subheading mt-4">
78 <label class="right">Hostel:</label> 78 <label class="right">Hostel:</label>
79 </v-flex> 79 </v-flex>
80 <v-flex xs7 sm6 lg8 class="ml-2"> 80 <v-flex xs7 sm6 lg8 class="ml-2">
81 <v-autocomplete 81 <v-autocomplete
82 v-model="report.route" 82 v-model="report.route"
83 label="Select your hostel " 83 label="Select your hostel "
84 :items="hostelList" 84 :items="hostelList"
85 :rules="hostelRules" 85 :rules="hostelRules"
86 required 86 required
87 ></v-autocomplete> 87 ></v-autocomplete>
88 </v-flex> 88 </v-flex>
89 </v-layout> 89 </v-layout>
90 </v-flex> 90 </v-flex>
91 <v-flex xs12 sm12 lg4 v-if="countryShow"> 91 <v-flex xs12 sm12 lg4 v-if="countryShow">
92 <v-layout> 92 <v-layout>
93 <v-flex xs4 sm4 lg4 class="subheading mt-4"> 93 <v-flex xs4 sm4 lg4 class="subheading mt-4">
94 <label class="right">Country :</label> 94 <label class="right">Country :</label>
95 </v-flex> 95 </v-flex>
96 <v-flex xs7 sm6 lg8 class="ml-2"> 96 <v-flex xs7 sm6 lg8 class="ml-2">
97 <v-autocomplete 97 <v-autocomplete
98 v-model="report.country" 98 v-model="report.country"
99 label="Select your Country " 99 label="Select your Country "
100 :items="countryList" 100 :items="countryList"
101 :rules="countryRules" 101 :rules="countryRules"
102 required 102 required
103 ></v-autocomplete> 103 ></v-autocomplete>
104 </v-flex> 104 </v-flex>
105 </v-layout> 105 </v-layout>
106 </v-flex> 106 </v-flex>
107 <!-- <v-flex xs12 sm12 lg4 v-show="BirthdayShow"> 107 <!-- <v-flex xs12 sm12 lg4 v-show="BirthdayShow">
108 <v-layout> 108 <v-layout>
109 <v-flex xs3 sm6 lg4 class="subheading mt-4"> 109 <v-flex xs3 sm6 lg4 class="subheading mt-4">
110 <label class="right">Country :</label> 110 <label class="right">Country :</label>
111 </v-flex> 111 </v-flex>
112 <v-flex xs12 sm12 lg8 class="ml-2"> 112 <v-flex xs12 sm12 lg8 class="ml-2">
113 <v-select 113 <v-select
114 v-model="report.country" 114 v-model="report.country"
115 label="Select your Country " 115 label="Select your Country "
116 :items="countryList" 116 :items="countryList"
117 required 117 required
118 ></v-select> 118 ></v-select>
119 </v-flex> 119 </v-flex>
120 </v-layout> 120 </v-layout>
121 </v-flex>--> 121 </v-flex>-->
122 <v-flex xs12 sm12 lg4 v-if="classShow"> 122 <v-flex xs12 sm12 lg4 v-if="classShow">
123 <v-layout> 123 <v-layout>
124 <v-flex xs4 sm4 lg3 class="subheading mt-4"> 124 <v-flex xs4 sm4 lg3 class="subheading mt-4">
125 <label class="right">Class:</label> 125 <label class="right">Class:</label>
126 </v-flex> 126 </v-flex>
127 <v-flex xs7 sm6 lg8 class="ml-2"> 127 <v-flex xs7 sm6 lg8 class="ml-2">
128 <v-autocomplete 128 <v-autocomplete
129 v-model="report.classId" 129 v-model="report.classId"
130 label="Select your class" 130 label="Select your class"
131 type="text" 131 type="text"
132 :rules="classRules" 132 :rules="classRules"
133 :items="classList" 133 :items="classList"
134 item-text="classNum" 134 item-text="classNum"
135 item-value="_id" 135 item-value="_id"
136 @change="getSections(report.classId)" 136 @change="getSections(report.classId)"
137 required 137 required
138 ></v-autocomplete> 138 ></v-autocomplete>
139 </v-flex> 139 </v-flex>
140 </v-layout> 140 </v-layout>
141 </v-flex> 141 </v-flex>
142 <v-flex xs12 sm12 lg4 v-if="sectionShow"> 142 <v-flex xs12 sm12 lg4 v-if="sectionShow">
143 <v-layout> 143 <v-layout>
144 <v-flex xs4 sm4 lg3 class="subheading mt-4"> 144 <v-flex xs4 sm4 lg3 class="subheading mt-4">
145 <label class="right">Section:</label> 145 <label class="right">Section:</label>
146 </v-flex> 146 </v-flex>
147 <v-flex xs7 sm6 lg8 class="ml-2"> 147 <v-flex xs7 sm6 lg8 class="ml-2">
148 <v-autocomplete 148 <v-autocomplete
149 :items="addSection" 149 :items="addSection"
150 label="Select your Section" 150 label="Select your Section"
151 v-model="report.sectionId" 151 v-model="report.sectionId"
152 :rules="sectionRules" 152 :rules="sectionRules"
153 item-text="name" 153 item-text="name"
154 item-value="_id" 154 item-value="_id"
155 name="Select Section" 155 name="Select Section"
156 required 156 required
157 ></v-autocomplete> 157 ></v-autocomplete>
158 </v-flex> 158 </v-flex>
159 </v-layout> 159 </v-layout>
160 </v-flex> 160 </v-flex>
161 <v-flex xs12 sm12 lg4 class="hidden-xs-only hidden-sm-only pl-5"> 161 <v-flex xs12 sm12 lg4 class="hidden-xs-only hidden-sm-only pl-5">
162 <v-btn 162 <v-btn
163 @click="getStudents" 163 @click="getStudents"
164 round 164 round
165 dark 165 dark
166 :loading="loading" 166 :loading="loading"
167 class="open-dialog-button mt-3 ml-5" 167 class="open-dialog-button mt-3 ml-5"
168 >Get Report</v-btn> 168 >Get Report</v-btn>
169 </v-flex> 169 </v-flex>
170 <v-flex xs12 sm12 lg4 class="hidden-lg-only hidden-md-only hidden-xl-only"> 170 <v-flex xs12 sm12 lg4 class="hidden-lg-only hidden-md-only hidden-xl-only">
171 <v-btn 171 <v-btn
172 @click="getStudents" 172 @click="getStudents"
173 round 173 round
174 dark 174 dark
175 :loading="loading" 175 :loading="loading"
176 class="mt-3 right" 176 class="mt-3 right"
177 >Get Report</v-btn> 177 >Get Report</v-btn>
178 </v-flex> 178 </v-flex>
179 </v-layout> 179 </v-layout>
180 </v-flex> 180 </v-flex>
181 </v-form> 181 </v-form>
182 </v-card> 182 </v-card>
183 <v-layout v-show="showTable"> 183 <v-layout v-show="showTable">
184 <v-flex xs12> 184 <v-flex xs12>
185 <v-card class="transparent elevation-0"> 185 <v-card class="transparent elevation-0">
186 <v-layout> 186 <v-layout>
187 <v-flex xs12> 187 <v-flex xs12>
188 <v-btn class="open-dialog-button right" round dark @click="printStudentReport()"> 188 <v-btn class="open-dialog-button right" round dark @click="printStudentReport()">
189 Print 189 Print
190 <v-icon right dark>print</v-icon> 190 <v-icon right dark>print</v-icon>
191 </v-btn> 191 </v-btn>
192 </v-flex> 192 </v-flex>
193 </v-layout> 193 </v-layout>
194 <v-layout> 194 <v-layout>
195 <v-flex xs12 sm12 md12 class="text-xs-center"> 195 <v-flex xs12 sm12 md12 class="text-xs-center">
196 <!-- <img :src="userData.schoolLogoUrl" width="140" alt="logo" /> --> 196 <!-- <img :src="userData.schoolLogoUrl" width="140" alt="logo" /> -->
197 <v-avatar> 197 <v-avatar>
198 <img :src="userData.schoolLogoUrl" v-if="userData.schoolLogoUrl" /> 198 <img :src="userData.schoolLogoUrl" v-if="userData.schoolLogoUrl" />
199 <img 199 <img
200 src="/static/schoolIcons/INTRACK_White.png" 200 src="/static/schoolIcons/INTRACK_White.png"
201 v-else-if="!userData.schoolLogoUrl" 201 v-else-if="!userData.schoolLogoUrl"
202 /> 202 />
203 </v-avatar> 203 </v-avatar>
204 <p class="title">{{ userData.name }}</p> 204 <p class="title">{{ userData.name }}</p>
205 <p>{{ userData.address }}</p> 205 <p>{{ userData.address }}</p>
206 </v-flex> 206 </v-flex>
207 </v-layout> 207 </v-layout>
208 <v-data-table 208 <v-data-table
209 :headers="headers" 209 :headers="headers"
210 :items="getStudentsReportList" 210 :items="getStudentsReportList"
211 :pagination.sync="pagination" 211 :pagination.sync="pagination"
212 :search="search" 212 :search="search"
213 > 213 >
214 <template slot="items" slot-scope="props"> 214 <template slot="items" slot-scope="props">
215 <tr class="tr"> 215 <tr class="tr">
216 <td class="td td-row">{{ props.index + 1}}</td> 216 <td class="td td-row">{{ props.index + 1}}</td>
217 <td class="td td-row" style="text-align:center"> 217 <td class="td td-row" style="text-align:center">
218 <v-avatar> 218 <v-avatar>
219 <img :src="props.item.profilePicUrl" v-if="props.item.profilePicUrl" /> 219 <img :src="props.item.profilePicUrl" v-if="props.item.profilePicUrl" />
220 <img src="/static/icon/user.png" v-else-if="!props.item.profilePicUrl" /> 220 <img src="/static/icon/user.png" v-else-if="!props.item.profilePicUrl" />
221 </v-avatar> 221 </v-avatar>
222 </td> 222 </td>
223 <td class="td td-row text-xs-center">{{ props.item.name}}</td> 223 <td class="td td-row text-xs-center">{{ props.item.name}}</td>
224 <td class="td td-row text-xs-center">{{ props.item.rollNo }}</td> 224 <td class="td td-row text-xs-center">{{ props.item.rollNo }}</td>
225 <td class="td td-row text-xs-center">{{ props.item.email }}</td> 225 <td class="td td-row text-xs-center">{{ props.item.email }}</td>
226 <td class="td td-row text-xs-center">{{ props.item.classId.classNum }}</td> 226 <td class="td td-row text-xs-center">{{ props.item.classId.classNum }}</td>
227 <td 227 <td
228 class="td td-row text-xs-center"
229 >{{ props.item.sectionId ? props.item.sectionId.name: '-' }}</td>
228 class="td td-row text-xs-center" 230 </tr>
229 >{{ props.item.sectionId ? props.item.sectionId.name: '-' }}</td> 231 </template>
230 </tr> 232 <v-alert
231 </template> 233 slot="no-results"
232 <v-alert 234 :value="true"
233 slot="no-results" 235 color="error"
234 :value="true" 236 icon="warning"
235 color="error" 237 >Your search for "{{ search }}" found no results.</v-alert>
236 icon="warning" 238 </v-data-table>
237 >Your search for "{{ search }}" found no results.</v-alert> 239 </v-card>
238 </v-data-table> 240 <v-flex xs12 id="printMe" v-show="hidePrintStudentReport">
239 </v-card> 241 <v-layout>
240 <v-flex xs12 id="printMe" v-show="hidePrintStudentReport"> 242 <v-flex xs12 style="text-align:center;margin-bottom:10px">
241 <v-layout> 243 <!-- <img :src="userData.schoolLogoUrl" width="80" alt="logo" /> -->
244 <v-avatar>
245 <img :src="userData.schoolLogoUrl" v-if="userData.schoolLogoUrl" />
246 <img
247 src="/static/schoolIcons/INTRACK_White.png"
248 v-else-if="!userData.schoolLogoUrl"
249 />
250 </v-avatar>
242 <v-flex xs12 style="text-align:center;margin-bottom:10px"> 251 <p class="title">{{ userData.name }}</p>
243 <!-- <img :src="userData.schoolLogoUrl" width="80" alt="logo" /> --> 252 <p>{{ userData.address }}</p>
244 <v-avatar> 253 </v-flex>
245 <img :src="userData.schoolLogoUrl" v-if="userData.schoolLogoUrl" /> 254 </v-layout>
246 <img 255 <table
247 src="/static/schoolIcons/INTRACK_White.png" 256 class="mb-5 tableRsponsive feeTypeTable"
248 v-else-if="!userData.schoolLogoUrl" 257 style="border: 1px solid lightgrey;
249 /> 258 border-collapse: collapse;!important
250 </v-avatar> 259 table-layout: auto !important;
251 <p class="title">{{ userData.name }}</p> 260 width: 100% !important;"
252 <p>{{ userData.address }}</p> 261 >
253 </v-flex> 262 <thead style="border: 1px solid lightgrey !important;">
254 </v-layout> 263 <tr style="border: 1px solid lightgrey !important;padding:4px;">
255 <table 264 <td style="border: 1px solid lightgrey !important;padding: 4px;">Profile Pic</td>
256 class="mb-5 tableRsponsive feeTypeTable" 265 <td style="border: 1px solid lightgrey !important;padding: 4px;">Name</td>
257 style="border: 1px solid lightgrey; 266 <td style="border: 1px solid lightgrey !important;padding: 4px;">Roll No</td>
258 border-collapse: collapse;!important 267 <td style="border: 1px solid lightgrey !important;padding: 4px;">Email</td>
259 table-layout: auto !important; 268 <td style="border: 1px solid lightgrey !important;padding: 4px;">Class</td>
260 width: 100% !important;" 269 <td style="border: 1px solid lightgrey !important;padding: 4px;">Section</td>
261 > 270 </tr>
262 <thead style="border: 1px solid lightgrey !important;"> 271 </thead>
263 <tr style="border: 1px solid lightgrey !important;padding:4px;"> 272 <tbody style="border: 1px solid lightgrey !important;">
264 <td style="border: 1px solid lightgrey !important;padding: 4px;">Profile Pic</td> 273 <tr v-for="(studentReport,i) in getStudentsReportList" :key="i">
265 <td style="border: 1px solid lightgrey !important;padding: 4px;">Name</td> 274 <td style="border: 1px solid lightgrey !important;padding: 4px;text-align:center">
266 <td style="border: 1px solid lightgrey !important;padding: 4px;">Roll No</td> 275 <v-avatar>
267 <td style="border: 1px solid lightgrey !important;padding: 4px;">Email</td> 276 <img :src="studentReport.profilePicUrl" v-if="studentReport.profilePicUrl" />
268 <td style="border: 1px solid lightgrey !important;padding: 4px;">Class</td> 277 <img src="/static/icon/user.png" v-else-if="!studentReport.profilePicUrl" />
269 <td style="border: 1px solid lightgrey !important;padding: 4px;">Section</td> 278 </v-avatar>
270 </tr> 279 </td>
271 </thead> 280 <td
272 <tbody style="border: 1px solid lightgrey !important;"> 281 style="border: 1px solid lightgrey !important;padding: 4px;"
273 <tr v-for="(studentReport,i) in getStudentsReportList" :key="i"> 282 >{{ studentReport.name }}</td>
274 <td style="border: 1px solid lightgrey !important;padding: 4px;text-align:center"> 283 <td
275 <v-avatar> 284 style="border: 1px solid lightgrey !important;padding: 4px;"
276 <img :src="studentReport.profilePicUrl" v-if="studentReport.profilePicUrl" /> 285 >{{ studentReport.rollNo }}</td>
277 <img src="/static/icon/user.png" v-else-if="!studentReport.profilePicUrl" /> 286 <td
278 </v-avatar> 287 style="border: 1px solid lightgrey !important;padding: 4px;"
279 </td> 288 >{{ studentReport.email }}</td>
280 <td 289 <td
281 style="border: 1px solid lightgrey !important;padding: 4px;" 290 style="border: 1px solid lightgrey !important;padding: 4px;"
282 >{{ studentReport.name }}</td> 291 >{{ studentReport.classId.classNum }}</td>
283 <td 292 <td style="border: 1px solid lightgrey !important;padding: 4px;">
284 style="border: 1px solid lightgrey !important;padding: 4px;" 293 {{ studentReport.sectionId ? studentReport.sectionId.name: '-'
285 >{{ studentReport.rollNo }}</td> 294 }}
295 </td>
286 <td 296 </tr>
287 style="border: 1px solid lightgrey !important;padding: 4px;" 297 </tbody>
288 >{{ studentReport.email }}</td> 298 </table>
289 <td 299 </v-flex>
290 style="border: 1px solid lightgrey !important;padding: 4px;" 300 </v-flex>
291 >{{ studentReport.classId.classNum }}</td> 301 </v-layout>
292 <td style="border: 1px solid lightgrey !important;padding: 4px;"> 302 <div class="loader" v-if="showLoader">
293 {{ studentReport.sectionId ? studentReport.sectionId.name: '-' 303 <v-progress-circular indeterminate color="white"></v-progress-circular>
294 }} 304 </div>
295 </td> 305 </v-container>
296 </tr> 306 </template>
297 </tbody> 307
298 </table> 308 <script>
299 </v-flex> 309 import http from "@/Services/http.js";
300 </v-flex> 310 import countryList from "@/script/country.js";
301 </v-layout> 311
302 <div class="loader" v-if="showLoader"> 312 import moment from "moment";
303 <v-progress-circular indeterminate color="white"></v-progress-circular> 313
304 </div> 314 export default {
305 </v-container> 315 data: () => ({
306 </template> 316 snackbar: false,
307 317 color: "",
308 <script> 318 y: "top",
309 import http from "@/Services/http.js"; 319 x: "right",
310 import countryList from "@/script/country.js"; 320 mode: "",
311 321 timeout: 10000,
312 import moment from "moment"; 322 text: "",
313 323 loading: false,
314 export default { 324 valid: true,
315 data: () => ({ 325 search: "",
316 snackbar: false, 326 showLoader: false,
317 color: "", 327 bloodGroup: false,
318 y: "top", 328 genderShow: false,
319 x: "right", 329 countryShow: false,
320 mode: "", 330 TransportShow: false,
321 timeout: 10000, 331 HostelShow: false,
322 text: "", 332 BirthdayShow: false,
323 loading: false, 333 sectionShow: false,
324 valid: true, 334 showTable: false,
325 search: "", 335 classShow: true,
326 showLoader: false, 336 hidePrintStudentReport: false,
327 bloodGroup: false, 337 addSection: [],
328 genderShow: false, 338 pagination: {
329 countryShow: false, 339 rowsPerPage: 10,
330 TransportShow: false, 340 },
331 HostelShow: false, 341 formRules: [(v) => !!v || "Form For is required"],
332 BirthdayShow: false, 342 bloodGroupRules: [(v) => !!v || "Blood group is required"],
333 sectionShow: false, 343 classRules: [(v) => !!v || "Class is required"],
334 showTable: false, 344 sectionRules: [(v) => !!v || "Class is required"],
335 classShow: true, 345 genderRules: [(v) => !!v || "Gender is required"],
336 hidePrintStudentReport: false, 346 routeRules: [(v) => !!v || "RouteI is required"],
337 addSection: [], 347 hostelRules: [(v) => !!v || "Hostel is required"],
338 pagination: { 348 countryRules: [(v) => !!v || "Country is required"],
339 rowsPerPage: 10, 349 headers: [
340 }, 350 {
341 formRules: [(v) => !!v || "Form For is required"], 351 align: "",
342 bloodGroupRules: [(v) => !!v || "Blood group is required"], 352 text: "No",
343 classRules: [(v) => !!v || "Class is required"], 353 sortable: false,
344 sectionRules: [(v) => !!v || "Class is required"], 354 value: "No",
345 genderRules: [(v) => !!v || "Gender is required"], 355 },
346 routeRules: [(v) => !!v || "RouteI is required"], 356 {
347 hostelRules: [(v) => !!v || "Hostel is required"], 357 text: "Profile Pic",
348 countryRules: [(v) => !!v || "Country is required"], 358 vaue: "profilePicUrl",
349 headers: [ 359 sortable: false,
350 { 360 align: "center",
351 align: "", 361 },
352 text: "No", 362 {
353 sortable: false, 363 text: "Name",
354 value: "No", 364 vaue: "name",
355 }, 365 sortable: false,
356 { 366 align: "center",
357 text: "Profile Pic", 367 },
358 vaue: "profilePicUrl", 368 {
359 sortable: false, 369 text: "Roll No.",
360 align: "center", 370 value: "rollNo",
361 }, 371 sortable: false,
362 { 372 align: "center",
363 text: "Name", 373 },
364 vaue: "name", 374 {
365 sortable: false, 375 text: "Email",
366 align: "center", 376 value: "email",
367 }, 377 sortable: false,
368 { 378 align: "center",
369 text: "Roll No.", 379 },
370 value: "rollNo", 380 {
371 sortable: false, 381 text: "Class",
372 align: "center", 382 value: "classId",
373 }, 383 sortable: false,
374 { 384 align: "center",
375 text: "Email", 385 },
376 value: "email", 386 {
377 sortable: false, 387 text: "Section",
378 align: "center", 388 value: "sectionId",
379 }, 389 sortable: false,
380 { 390 align: "center",
381 text: "Class", 391 },
382 value: "classId", 392 ],
383 sortable: false, 393 classList: [],
384 align: "center", 394 report: {},
385 }, 395 userData: {},
386 { 396 markData: [],
387 text: "Section", 397 formList: [
388 value: "sectionId", 398 {
389 sortable: false, 399 name: "Blood Group",
390 align: "center", 400 value: "bloodGroup",
391 }, 401 },
392 ], 402 "Country",
393 classList: [], 403 "Gender",
394 report: {}, 404 "Transport",
395 userData: {}, 405 "Hostel",
396 markData: [], 406 // "Birthday"
397 formList: [ 407 ],
398 { 408 bloodGroupList: ["A+", "A-", "B+", "B-", "O+", "O-", "AB+", "AB-"],
399 name: "Blood Group", 409 gender: ["Male", "female"],
400 value: "bloodGroup", 410 getStudentsReportList: [],
401 }, 411 studentReort: "",
402 "Country", 412 countryList: [],
403 "Gender", 413 route: [],
404 "Transport", 414 Hostel: [],
405 "Hostel", 415 hostelList: [],
406 // "Birthday" 416 token: "",
407 ], 417 }),
408 bloodGroupList: ["A+", "A-", "B+", "B-", "O+", "O-", "AB+", "AB-"], 418 methods: {
409 gender: ["Male", "female"], 419 clear() {
410 getStudentsReportList: [], 420 this.$refs.form.reset();
411 studentReort: "", 421 },
412 countryList: [], 422 getClass() {
413 route: [], 423 this.showLoader = true;
414 Hostel: [], 424 http()
415 hostelList: [], 425 .get("/getClassesList", {
416 token: "", 426 headers: { Authorization: "Bearer " + this.token },
417 }), 427 })
418 methods: { 428 .then((response) => {
419 clear() { 429 this.classList = response.data.data;
420 this.$refs.form.reset(); 430 this.showLoader = false;
421 }, 431 })
422 getClass() { 432 .catch((err) => {
423 this.showLoader = true; 433 this.showLoader = false;
424 http() 434 if (error.response.status === 401) {
425 .get("/getClassesList", { 435 this.$router.replace({ path: "/" });
426 headers: { Authorization: "Bearer " + this.token }, 436 this.$store.dispatch("setToken", null);
427 }) 437 this.$store.dispatch("Id", null);
428 .then((response) => { 438 this.$store.dispatch("Role", null);
429 this.classList = response.data.data; 439 }
430 this.showLoader = false; 440 });
431 }) 441 },
432 .catch((err) => { 442 getReport() {
433 this.showLoader = false; 443 if (this.report.form === "bloodGroup") {
434 if (error.response.status === 401) { 444 this.bloodGroup = true;
435 this.$router.replace({ path: "/" }); 445 this.genderShow = false;
436 this.$store.dispatch("setToken", null); 446 this.TransportShow = false;
437 this.$store.dispatch("Id", null); 447 this.countryShow = false;
438 this.$store.dispatch("Role", null); 448 this.BirthdayShow = false;
439 } 449 this.HostelShow = false;
440 }); 450 this.classShow = false;
441 }, 451 this.sectionShow = false;
442 getReport() { 452 }
443 if (this.report.form === "bloodGroup") { 453 if (this.report.form === "Gender") {
444 this.bloodGroup = true; 454 this.genderShow = true;
445 this.genderShow = false; 455 this.bloodGroup = false;
446 this.TransportShow = false; 456 this.TransportShow = false;
447 this.countryShow = false; 457 this.BirthdayShow = false;
448 this.BirthdayShow = false; 458 this.countryShow = false;
449 this.HostelShow = false; 459 this.HostelShow = false;
450 this.classShow = false; 460 this.classShow = true;
451 this.sectionShow = false; 461 }
452 } 462 if (this.report.form === "Transport") {
453 if (this.report.form === "Gender") { 463 this.TransportShow = true;
454 this.genderShow = true; 464 this.genderShow = false;
455 this.bloodGroup = false; 465 this.bloodGroup = false;
456 this.TransportShow = false; 466 this.BirthdayShow = false;
457 this.BirthdayShow = false; 467 this.countryShow = false;
458 this.countryShow = false; 468 this.HostelShow = false;
459 this.HostelShow = false; 469 this.classShow = true;
460 this.classShow = true; 470 }
461 } 471 if (this.report.form === "Country") {
462 if (this.report.form === "Transport") { 472 this.countryShow = true;
463 this.TransportShow = true; 473 this.TransportShow = false;
464 this.genderShow = false; 474 this.genderShow = false;
465 this.bloodGroup = false; 475 this.bloodGroup = false;
466 this.BirthdayShow = false; 476 this.BirthdayShow = false;
467 this.countryShow = false; 477 this.HostelShow = false;
468 this.HostelShow = false; 478 this.classShow = true;
469 this.classShow = true; 479 }
470 } 480 if (this.report.form === "Hostel") {
471 if (this.report.form === "Country") { 481 this.HostelShow = true;
472 this.countryShow = true; 482 this.TransportShow = false;
473 this.TransportShow = false; 483 this.genderShow = false;
474 this.genderShow = false; 484 this.bloodGroup = false;
475 this.bloodGroup = false; 485 this.countryShow = false;
476 this.BirthdayShow = false; 486 this.BirthdayShow = false;
477 this.HostelShow = false; 487 this.classShow = true;
478 this.classShow = true; 488 }
479 } 489 if (this.report.form === "Birthday") {
480 if (this.report.form === "Hostel") { 490 this.BirthdayShow = true;
481 this.HostelShow = true; 491 this.TransportShow = false;
482 this.TransportShow = false; 492 this.genderShow = false;
483 this.genderShow = false; 493 this.HostelShow = false;
484 this.bloodGroup = false; 494 this.bloodGroup = false;
485 this.countryShow = false; 495 this.countryShow = false;
486 this.BirthdayShow = false; 496 this.classShow = true;
487 this.classShow = true; 497 }
488 } 498 },
489 if (this.report.form === "Birthday") { 499 getStudents() {
490 this.BirthdayShow = true; 500 if (this.$refs.form.validate()) {
491 this.TransportShow = false; 501 this.showLoader = true;
492 this.genderShow = false; 502 http()
493 this.HostelShow = false; 503 .get("/getStudentReport", {
494 this.bloodGroup = false; 504 params: {
495 this.countryShow = false; 505 bloodGroup: this.report.bloodGroup,
496 this.classShow = true; 506 country: this.report.country,
497 } 507 gender: this.report.gender,
498 }, 508 classId: this.report.classId,
499 getStudents() { 509 sectionId: this.report.sectionId,
500 if (this.$refs.form.validate()) { 510 },
501 this.showLoader = true; 511 headers: { Authorization: "Bearer " + this.token },
502 http() 512 })
503 .get("/getStudentReport", { 513 .then((response) => {
504 params: { 514 this.getStudentsReportList = response.data.data;
505 bloodGroup: this.report.bloodGroup, 515 this.showTable = true;
506 country: this.report.country, 516 this.showLoader = false;
507 gender: this.report.gender, 517 this.clear();
508 classId: this.report.classId, 518 // console.log("getSectionsList=====>", response.data.data);
509 sectionId: this.report.sectionId, 519 })
510 }, 520 .catch((error) => {
511 headers: { Authorization: "Bearer " + this.token }, 521 // console.log("err====>", error);
512 }) 522 this.showLoader = false;
523 this.snackbar = true;
524 this.color = "error";
525 this.text = error.response.data.message;
513 .then((response) => { 526 });
514 this.getStudentsReportList = response.data.data; 527 }
515 this.showTable = true; 528 },
516 this.showLoader = false; 529 getSections() {
517 this.clear(); 530 this.sectionShow = true;
518 // console.log("getSectionsList=====>", response.data.data); 531 this.showLoader = true;
519 }) 532 http()
520 .catch((error) => { 533 .get(
521 // console.log("err====>", error); 534 "/getSectionsList",
522 this.showLoader = false; 535 { params: { classId: this.report.classId } },
523 this.snackbar = true; 536 {
524 this.color = "error"; 537 headers: { Authorization: "Bearer " + this.token },
525 this.text = error.response.data.message; 538 }
526 }); 539 )
527 } 540 .then((response) => {
528 }, 541 this.addSection = response.data.data;
529 getSections() { 542 this.showLoader = false;
530 this.sectionShow = true; 543 })
531 this.showLoader = true; 544 .catch((error) => {
532 http() 545 // console.log("err====>", error);
533 .get( 546 this.showLoader = false;
547 this.snackbar = true;
548 this.color = "error";
549 this.text = error.response.data.message;
534 "/getSectionsList", 550 });
535 { params: { classId: this.report.classId } }, 551 },
536 { 552 // getFormList() {
537 headers: { Authorization: "Bearer " + this.token }, 553 // this.showLoader = true;
538 } 554 // http()
539 ) 555 // .get("/getExamsList", {
540 .then((response) => { 556 // headers: { Authorization: "Bearer " + this.token }
541 this.addSection = response.data.data; 557 // })
542 this.showLoader = false; 558 // .then(response => {
543 }) 559 // this.formList = response.data.data;
544 .catch((error) => { 560 // this.showLoader = false;
545 // console.log("err====>", error); 561 // })
546 this.showLoader = false; 562 // .catch(error => {
547 this.snackbar = true; 563 // // console.log("err====>", err);
548 this.color = "error"; 564 // this.showLoader = false;
549 this.text = error.response.data.message; 565 // this.snackbar = true;
550 }); 566 // this.text = error.response.data.message;
551 }, 567 // if (error.response.status === 401) {
552 // getFormList() { 568 // this.$router.replace({ path: "/" });
553 // this.showLoader = true; 569 // this.$store.dispatch("setToken", null);
554 // http() 570 // this.$store.dispatch("Id", null);
555 // .get("/getExamsList", { 571 // }
556 // headers: { Authorization: "Bearer " + this.token } 572 // });
557 // }) 573 // }
558 // .then(response => { 574 printStudentReport() {
559 // this.formList = response.data.data; 575 this.$htmlToPaper("printMe");
560 // this.showLoader = false; 576 },
561 // }) 577 getUserData() {
562 // .catch(error => { 578 http()
563 // // console.log("err====>", err); 579 .get("/getParticularUserDetail")
564 // this.showLoader = false; 580 .then((response) => {
565 // this.snackbar = true; 581 this.userData = response.data.data;
566 // this.text = error.response.data.message; 582 })
567 // if (error.response.status === 401) { 583 .catch((error) => {
568 // this.$router.replace({ path: "/" }); 584 // if (error.response.status === 401) {
569 // this.$store.dispatch("setToken", null); 585 // this.$router.replace({ path: "/" });
570 // this.$store.dispatch("Id", null); 586 // this.$store.dispatch("setToken", null);
571 // } 587 // this.$store.dispatch("Id", null);
572 // }); 588 // }
573 // } 589 });
574 printStudentReport() { 590 },
575 this.$htmlToPaper("printMe"); 591 },
576 }, 592 mounted() {
577 getUserData() { 593 this.token = this.$store.state.token;
578 http() 594 const getCountryList = countryList();
579 .get("/getParticularUserDetail") 595 this.countryList = getCountryList;
580 .then((response) => { 596 this.getUserData();
581 this.userData = response.data.data; 597 // console.log("getindustryList", this.countryList);
582 }) 598 // this.getExamList();
583 .catch((error) => { 599 this.getClass();
584 // if (error.response.status === 401) { 600 },
585 // this.$router.replace({ path: "/" }); 601 created() {
586 // this.$store.dispatch("setToken", null); 602 this.$root.$on("app:search", (search) => {
587 // this.$store.dispatch("Id", null); 603 this.search = search;
588 // } 604 });
589 }); 605 },
590 }, 606 beforeDestroy() {
591 }, 607 // dont forget to remove the listener
592 mounted() { 608 this.$root.$off("app:search");
593 this.token = this.$store.state.token; 609 },
594 const getCountryList = countryList(); 610 };
595 this.countryList = getCountryList; 611 </script>
596 this.getUserData(); 612 <style scoped>
597 // console.log("getindustryList", this.countryList); 613 .active {
598 // this.getExamList(); 614 background-color: gray;
599 this.getClass(); 615 color: white !important;
600 }, 616 }
601 created() { 617 .activebtn {
602 this.$root.$on("app:search", (search) => { 618 color: black !important;
603 this.search = search; 619 }
604 }); 620 </style>
src/pages/School/viewSchoolDashboard.vue
Diff comments   View file @8b7976c
1 <template> 1 <template>
2 <v-app id="pages-dasboard"> 2 <v-app id="pages-dasboard">
3 <!-- ****** VIEW PROFIL NOTICE BOARD ****** --> 3 <!-- ****** VIEW PROFIL NOTICE BOARD ****** -->
4 <!-- <v-dialog v-model="dialogNotice" max-width="940px" scrollable> 4 <!-- <v-dialog v-model="dialogNotice" max-width="940px" scrollable>
5 <v-card> 5 <v-card>
6 <v-toolbar color="grey lighten-2" flat> 6 <v-toolbar color="grey lighten-2" flat>
7 <v-spacer></v-spacer> 7 <v-spacer></v-spacer>
8 <v-toolbar-title> 8 <v-toolbar-title>
9 <h3>Notice Board</h3> 9 <h3>Notice Board</h3>
10 </v-toolbar-title> 10 </v-toolbar-title>
11 <v-spacer></v-spacer> 11 <v-spacer></v-spacer>
12 <v-icon @click="closeNotice">close</v-icon> 12 <v-icon @click="closeNotice">close</v-icon>
13 </v-toolbar> 13 </v-toolbar>
14 <v-card-text> 14 <v-card-text>
15 <v-layout> 15 <v-layout>
16 <v-flex align-center justify-center layout text-xs-center class="mt-2"> 16 <v-flex align-center justify-center layout text-xs-center class="mt-2">
17 <img src="/static/icon/user.png" width="70px" v-if="!notice.eventImageUrl" /> 17 <img src="/static/icon/user.png" width="70px" v-if="!notice.eventImageUrl" />
18 <img :src="notice.eventImageUrl" width="280px" v-else-if="notice.eventImageUrl" /> 18 <img :src="notice.eventImageUrl" width="280px" v-else-if="notice.eventImageUrl" />
19 </v-flex> 19 </v-flex>
20 </v-layout> 20 </v-layout>
21 <v-container grid-list-md> 21 <v-container grid-list-md>
22 <v-layout wrap> 22 <v-layout wrap>
23 <v-flex> 23 <v-flex>
24 <v-layout> 24 <v-layout>
25 <v-flex xs5 sm6> 25 <v-flex xs5 sm6>
26 <h5 class="right my-1"> 26 <h5 class="right my-1">
27 <b>Title:</b> 27 <b>Title:</b>
28 </h5> 28 </h5>
29 </v-flex> 29 </v-flex>
30 <v-flex sm6 xs8> 30 <v-flex sm6 xs8>
31 <h5 class="my-1">{{ notice.title }}</h5> 31 <h5 class="my-1">{{ notice.title }}</h5>
32 </v-flex> 32 </v-flex>
33 </v-layout> 33 </v-layout>
34 <v-layout> 34 <v-layout>
35 <v-flex xs5 sm6> 35 <v-flex xs5 sm6>
36 <h5 class="right my-1"> 36 <h5 class="right my-1">
37 <b>Description:</b> 37 <b>Description:</b>
38 </h5> 38 </h5>
39 </v-flex> 39 </v-flex>
40 <v-flex sm6 xs8> 40 <v-flex sm6 xs8>
41 <h5 class="my-1">{{ notice.description }}</h5> 41 <h5 class="my-1">{{ notice.description }}</h5>
42 </v-flex> 42 </v-flex>
43 </v-layout> 43 </v-layout>
44 </v-flex> 44 </v-flex>
45 </v-layout> 45 </v-layout>
46 </v-container> 46 </v-container>
47 </v-card-text> 47 </v-card-text>
48 </v-card> 48 </v-card>
49 </v-dialog>--> 49 </v-dialog>-->
50 <!-- <v-container fluid grid-list-xl> --> 50 <!-- <v-container fluid grid-list-xl> -->
51 <v-layout wrap> 51 <v-layout wrap>
52 <v-flex xs12> 52 <v-flex xs12>
53 <v-layout wrap row> 53 <v-layout wrap row>
54 <!-- ***** Total Students ***** --> 54 <!-- ***** Total Students ***** -->
55 <v-flex xs12 sm12 md9> 55 <v-flex xs12 sm12 md9>
56 <v-container fluid grid-list-xl> 56 <v-container fluid grid-list-xl>
57 <v-flex xs12 sm12 md12> 57 <v-flex xs12 sm12 md12>
58 <v-layout wrap class> 58 <v-layout wrap class>
59 <v-flex xs12 sm12 md3> 59 <v-flex xs12 sm12 md3>
60 <router-link :to="{ name:'Students' }"> 60 <router-link :to="{ name:'Students' }">
61 <v-card class="card pink-bgcolor"> 61 <v-card class="card pink-bgcolor">
62 <v-card-title primary-title class="titleCard white--text py-3">Students</v-card-title> 62 <v-card-title primary-title class="titleCard white--text py-3">Students</v-card-title>
63 <img src="/static/icon/student.png" class="ml-2" width="40" alt="icons" /> 63 <img src="/static/icon/student.png" class="ml-2" width="40" alt="icons" />
64 <v-card-title class="headline py-1 white--text">{{ students.length }}</v-card-title> 64 <v-card-title class="headline py-1 white--text">{{ students.length }}</v-card-title>
65 </v-card> 65 </v-card>
66 </router-link> 66 </router-link>
67 </v-flex> 67 </v-flex>
68 <!-- ***** Total Teachers***** --> 68 <!-- ***** Total Teachers***** -->
69 <v-flex xs12 sm12 md3> 69 <v-flex xs12 sm12 md3>
70 <router-link :to="{ name:'Teachers' }"> 70 <router-link :to="{ name:'Teachers' }">
71 <v-card flat class="card elevation-2 firozi-bgcolor"> 71 <v-card flat class="card elevation-2 firozi-bgcolor">
72 <v-card-title primary-title class="titleCard white--text py-3">Teachers</v-card-title> 72 <v-card-title primary-title class="titleCard white--text py-3">Teachers</v-card-title>
73 <img src="/static/icon/teacher.png" class="ml-2" width="40" alt="icons" /> 73 <img src="/static/icon/teacher.png" class="ml-2" width="40" alt="icons" />
74 74
75 <v-card-title class="headline py-1 white--text">{{ teachers.length }}</v-card-title> 75 <v-card-title class="headline py-1 white--text">{{ teachers.length }}</v-card-title>
76 </v-card> 76 </v-card>
77 </router-link> 77 </router-link>
78 </v-flex> 78 </v-flex>
79 <!-- ***** Total Parents ***** --> 79 <!-- ***** Total Parents ***** -->
80 <v-flex xs12 sm12 md3> 80 <v-flex xs12 sm12 md3>
81 <router-link :to="{ name:'Parents' }"> 81 <router-link :to="{ name:'Parents' }">
82 <v-card flat class="card yellow darken-3"> 82 <v-card flat class="card yellow darken-3">
83 <v-card-title primary-title class="titleCard white--text py-3">Parents</v-card-title> 83 <v-card-title primary-title class="titleCard white--text py-3">Parents</v-card-title>
84 <img src="/static/icon/parents.png" class="ml-3" width="40px" alt="icons" /> 84 <img src="/static/icon/parents.png" class="ml-3" width="40px" alt="icons" />
85 <v-card-title class="headline py-1 white--text">{{ parents.length }}</v-card-title> 85 <v-card-title class="headline py-1 white--text">{{ parents.length }}</v-card-title>
86 </v-card> 86 </v-card>
87 </router-link> 87 </router-link>
88 </v-flex> 88 </v-flex>
89 <!-- ***** Total Class***** --> 89 <!-- ***** Total Class***** -->
90 <v-flex xs12 sm12 md3> 90 <v-flex xs12 sm12 md3>
91 <router-link :to="{ name:'Class' }"> 91 <router-link :to="{ name:'Class' }">
92 <v-card flat class="card darkBlue-bgcolor"> 92 <v-card flat class="card darkBlue-bgcolor">
93 <v-card-title primary-title class="titleCard white--text py-3">Class</v-card-title> 93 <v-card-title primary-title class="titleCard white--text py-3">Class</v-card-title>
94 <img src="/static/icon/class.png" width="40" alt="icons" class="ml-2" /> 94 <img src="/static/icon/class.png" width="40" alt="icons" class="ml-2" />
95 <v-card-title class="headline py-1 white--text">{{ classes.length }}</v-card-title> 95 <v-card-title class="headline py-1 white--text">{{ classes.length }}</v-card-title>
96 </v-card> 96 </v-card>
97 </router-link> 97 </router-link>
98 </v-flex> 98 </v-flex>
99 </v-layout> 99 </v-layout>
100 </v-flex> 100 </v-flex>
101 <v-layout> 101 <v-layout>
102 <v-flex xs12> 102 <v-flex xs12>
103 <v-card class="card mt-2 account-Card"> 103 <v-card class="card mt-2 account-Card">
104 <h4> 104 <h4>
105 <b>Account</b> 105 <b>Account</b>
106 </h4> 106 </h4>
107 <v-layout wrap> 107 <v-layout wrap>
108 <v-flex xs12 sm12 md3> 108 <v-flex xs12 sm12 md3>
109 <v-list two-line> 109 <v-list two-line>
110 <template> 110 <template>
111 <v-list-tile> 111 <v-list-tile>
112 <v-list-tile-avatar> 112 <v-list-tile-avatar>
113 <v-icon class="account-circle darkBlue-color">panorama_fish_eye</v-icon> 113 <v-icon class="account-circle darkBlue-color">panorama_fish_eye</v-icon>
114 </v-list-tile-avatar> 114 </v-list-tile-avatar>
115 <v-list-tile-content> 115 <v-list-tile-content>
116 <v-list-tile-title class="mt-2"> 116 <v-list-tile-title class="mt-2">
117 <p class="subheading font-color">Fees</p> 117 <p class="subheading font-color">Fees</p>
118 </v-list-tile-title> 118 </v-list-tile-title>
119 <v-list-tile-title>Rs 1000</v-list-tile-title> 119 <v-list-tile-title>Rs 1000</v-list-tile-title>
120 </v-list-tile-content> 120 </v-list-tile-content>
121 </v-list-tile> 121 </v-list-tile>
122 <v-list-tile> 122 <v-list-tile>
123 <v-list-tile-avatar> 123 <v-list-tile-avatar>
124 <v-icon class="account-circle yellowDark-color">panorama_fish_eye</v-icon> 124 <v-icon class="account-circle yellowDark-color">panorama_fish_eye</v-icon>
125 </v-list-tile-avatar> 125 </v-list-tile-avatar>
126 <v-list-tile-content> 126 <v-list-tile-content>
127 <v-list-tile-title class="mt-2"> 127 <v-list-tile-title class="mt-2">
128 <p class="subheading font-color">Collection</p> 128 <p class="subheading font-color">Collection</p>
129 </v-list-tile-title> 129 </v-list-tile-title>
130 <v-list-tile-title>Rs 2000</v-list-tile-title> 130 <v-list-tile-title>Rs 2000</v-list-tile-title>
131 </v-list-tile-content> 131 </v-list-tile-content>
132 </v-list-tile> 132 </v-list-tile>
133 <v-list-tile> 133 <v-list-tile>
134 <v-list-tile-avatar> 134 <v-list-tile-avatar>
135 <v-icon class="account-circle pink-color">panorama_fish_eye</v-icon> 135 <v-icon class="account-circle pink-color">panorama_fish_eye</v-icon>
136 </v-list-tile-avatar> 136 </v-list-tile-avatar>
137 <v-list-tile-content> 137 <v-list-tile-content>
138 <v-list-tile-title class="mt-2"> 138 <v-list-tile-title class="mt-2">
139 <p class="subheading font-color">Expences</p> 139 <p class="subheading font-color">Expences</p>
140 </v-list-tile-title> 140 </v-list-tile-title>
141 <v-list-tile-title>Rs 3000</v-list-tile-title> 141 <v-list-tile-title>Rs 3000</v-list-tile-title>
142 </v-list-tile-content> 142 </v-list-tile-content>
143 </v-list-tile> 143 </v-list-tile>
144 </template> 144 </template>
145 </v-list> 145 </v-list>
146 </v-flex> 146 </v-flex>
147 <v-flex xs12 sm12 md9 lg9> 147 <v-flex xs12 sm12 md9 lg9>
148 <!-- <div id="chart"> --> 148 <!-- <div id="chart"> -->
149 <apexchart 149 <apexchart
150 type="bar"
151 height="250"
152 style="max-width:800px !important"
153 :options="chartOptions"
154 :series="series"
155 ></apexchart>
150 type="bar" 156 <!-- </div> -->
151 height="250" 157 </v-flex>
152 style="max-width:800px !important" 158 </v-layout>
153 :options="chartOptions" 159 </v-card>
154 :series="series" 160 </v-flex>
155 ></apexchart> 161 </v-layout>
156 <!-- </div> --> 162 <v-card class="mt-2 card">
157 </v-flex> 163 <!-- <full-calendar
158 </v-layout> 164 ref="calendar"
159 </v-card> 165 defaultView="month"
160 </v-flex> 166 droppable="false"
161 </v-layout> 167 :events="events"
162 <v-card class="mt-2 card"> 168 :config="config"
163 <!-- <full-calendar 169 ></full-calendar>-->
164 ref="calendar" 170 <h4 class="pa-3">
165 defaultView="month" 171 <b>Notice</b>
166 droppable="false" 172 </h4>
167 :events="events" 173
168 :config="config" 174 <v-data-table
169 ></full-calendar>--> 175 :items="noticeData"
170 <h4 class="pa-3"> 176 class="elevation-0"
171 <b>Notice</b> 177 flat
172 </h4> 178 hide-actions
173 179 hide-headers
174 <v-data-table 180 style="border-spacing: 0 !important;"
175 :items="noticeData" 181 >
176 class="elevation-0" 182 <template
177 flat 183 slot="items"
178 hide-actions 184 slot-scope="props"
179 hide-headers 185 v-if="props.index < 5"
180 style="border-spacing: 0 !important;" 186 style="border-spacing: 0 !important;"
181 > 187 >
182 <template 188 <tr class="td-notice">
183 slot="items" 189 <td class="grey--text" style="width:18px">{{ props.index + 1}}</td>
184 slot-scope="props" 190 <td>
185 v-if="props.index < 5" 191 <span class="grey--text caption">{{ date(props.item.created) }}</span>
186 style="border-spacing: 0 !important;" 192 <br />
187 > 193 <span class="body-2">{{ props.item.title}}</span>
188 <tr class="td-notice"> 194 </td>
189 <td class="grey--text" style="width:18px">{{ props.index + 1}}</td> 195 <td class="noticeDecritpion grey--text mt-2">{{ props.item.description}}</td>
190 <td> 196
191 <span class="grey--text caption">{{ date(props.item.created) }}</span> 197 <td class="text-xs-center">
192 <br /> 198 <span>
193 <span class="body-2">{{ props.item.title}}</span> 199 <v-tooltip top>
194 </td> 200 <img
195 <td class="noticeDecritpion grey--text mt-2">{{ props.item.description}}</td> 201 slot="activator"
196 202 style="cursor:pointer; width:25px; height:25px; "
197 <td class="text-xs-center"> 203 @click="profile"
198 <span> 204 src="/static/icon/view.png"
199 <v-tooltip top> 205 />
200 <img 206 <span>View</span>
201 slot="activator" 207 </v-tooltip>
202 style="cursor:pointer; width:25px; height:25px; " 208 </span>
203 @click="profile" 209 </td>
204 src="/static/icon/view.png" 210 </tr>
205 /> 211 </template>
206 <span>View</span> 212 </v-data-table>
207 </v-tooltip> 213 </v-card>
208 </span> 214 </v-container>
209 </td> 215 </v-flex>
210 </tr> 216 <v-flex xs12 sm12 md3>
211 </template> 217 <v-card height="100%" class="elevation-0 mt-3 profileDasboard">
212 </v-data-table> 218 <v-card-text>
213 </v-card> 219 <h4 class="text-xs-center py-3">
214 </v-container> 220 <b>Profile</b>
215 </v-flex> 221 </h4>
216 <v-flex xs12 sm12 md3> 222 <v-flex xs12 class="py-3">
217 <v-card height="100%" class="elevation-0 mt-3 profileDasboard"> 223 <v-layout wrap>
218 <v-card-text> 224 <v-flex xs12 sm12 md4>
219 <h4 class="text-xs-center py-3"> 225 <img src="/static/icon/user.png" v-if="!userData.schoolLogoUrl" width="80" />
220 <b>Profile</b> 226 <img
221 </h4> 227 :src="userData.schoolLogoUrl"
222 <v-flex xs12 class="py-3"> 228 v-else-if="userData.schoolLogoUrl"
223 <v-layout wrap> 229 width="80"
224 <v-flex xs12 sm12 md4> 230 />
225 <img src="/static/icon/user.png" v-if="!userData.schoolLogoUrl" width="80" /> 231 </v-flex>
226 <img 232 <v-flex xs12 sm12 md6>
227 :src="userData.schoolLogoUrl" 233 <p class="mb-0 body-1">
228 v-else-if="userData.schoolLogoUrl" 234 <i>{{ userData.name }}</i>
229 width="80" 235 </p>
230 /> 236 <p class="mb-0 caption grey--text">{{ userData.email }}</p>
231 </v-flex> 237 <p class="mb-0 caption grey--text">{{ userData.mobile }}</p>
232 <v-flex xs12 sm12 md6> 238 <address class="caption grey--text mb-3">{{ userData.address }}</address>
233 <p class="mb-0 body-1"> 239 </v-flex>
234 <i>{{ userData.name }}</i> 240 </v-layout>
235 </p> 241 </v-flex>
236 <p class="mb-0 caption grey--text">{{ userData.email }}</p> 242 <hr />
237 <p class="mb-0 caption grey--text">{{ userData.mobile }}</p> 243 <h4 class="text-xs-center py-3">
238 <address class="caption grey--text mb-3">{{ userData.address }}</address> 244 <b>Calender</b>
239 </v-flex> 245 </h4>
240 </v-layout> 246 <vue-event-calendar :events="demoEvents"></vue-event-calendar>
241 </v-flex> 247 </v-card-text>
242 <hr /> 248 </v-card>
243 <h4 class="text-xs-center py-3"> 249 </v-flex>
244 <b>Calender</b> 250 </v-layout>
245 </h4> 251 </v-flex>
246 <vue-event-calendar :events="demoEvents"></vue-event-calendar> 252 </v-layout>
247 </v-card-text> 253 <v-dialog v-model="dialog" max-width="500" persistent>
248 </v-card> 254 <v-card color="grey lighten-4" flat>
249 </v-flex> 255 <v-toolbar dark color="fixcolors">
250 </v-layout> 256 <v-spacer></v-spacer>
251 </v-flex> 257 <v-btn icon @click="dialog= false">
252 </v-layout> 258 <v-icon>close</v-icon>
253 <v-dialog v-model="dialog" max-width="500" persistent> 259 </v-btn>
254 <v-card color="grey lighten-4" flat> 260 </v-toolbar>
255 <v-toolbar dark color="fixcolors"> 261 <v-flex class="py-4">
256 <v-spacer></v-spacer> 262 <v-list-tile>
257 <v-btn icon @click="dialog= false"> 263 <v-list-tile-action>
258 <v-icon>close</v-icon> 264 <v-icon>edit</v-icon>
259 </v-btn> 265 </v-list-tile-action>
260 </v-toolbar> 266 <v-list-tile-content>
261 <v-flex class="py-4"> 267 <v-list-tile-title>{{ selected.title }}</v-list-tile-title>
262 <v-list-tile> 268 </v-list-tile-content>
263 <v-list-tile-action> 269 </v-list-tile>
264 <v-icon>edit</v-icon> 270 <v-list-tile>
265 </v-list-tile-action> 271 <v-list-tile-action>
266 <v-list-tile-content> 272 <v-icon>access_time</v-icon>
267 <v-list-tile-title>{{ selected.title }}</v-list-tile-title> 273 </v-list-tile-action>
268 </v-list-tile-content> 274 <v-list-tile-content>
269 </v-list-tile> 275 <v-list-tile-title>{{ date(selected.start)}}</v-list-tile-title>
270 <v-list-tile> 276 </v-list-tile-content>
271 <v-list-tile-action> 277 </v-list-tile>
272 <v-icon>access_time</v-icon> 278 </v-flex>
273 </v-list-tile-action> 279 </v-card>
274 <v-list-tile-content> 280 </v-dialog>
275 <v-list-tile-title>{{ date(selected.start)}}</v-list-tile-title> 281 <div class="loader" v-if="showLoader">
276 </v-list-tile-content> 282 <v-progress-circular indeterminate color="white"></v-progress-circular>
277 </v-list-tile> 283 </div>
278 </v-flex> 284 </v-app>
279 </v-card> 285 </template>
280 </v-dialog> 286
281 <div class="loader" v-if="showLoader"> 287 <script>
282 <v-progress-circular indeterminate color="white"></v-progress-circular> 288 import http from "@/Services/http.js";
283 </div> 289 import moment from "moment";
284 </v-app> 290 // import { FunctionalCalendar } from "vue-functional-calendar";
285 </template> 291
286 292 export default {
287 <script> 293 components: {
288 import http from "@/Services/http.js"; 294 // FunctionalCalendar
289 import moment from "moment"; 295 },
290 // import { FunctionalCalendar } from "vue-functional-calendar"; 296 data() {
291 297 return {
292 export default { 298 // data: {
293 components: { 299 // clieckedToday: false
294 // FunctionalCalendar 300 // },
295 }, 301 // markedDates: ["16/4/2019", "18/4/2019", "20/4/2019", "21/4/2019"],
296 data() { 302 // calendarData: {},
297 return { 303 // calendar: {},
298 // data: { 304 demoEvents: [
299 // clieckedToday: false 305 {
300 // }, 306 date: "2020/01/10", // Required
301 // markedDates: ["16/4/2019", "18/4/2019", "20/4/2019", "21/4/2019"], 307 title: "Foo", // Required
302 // calendarData: {}, 308 },
303 // calendar: {}, 309 {
304 demoEvents: [ 310 date: "2020/01/12",
305 { 311 title: "Bar",
306 date: "2020/01/10", // Required 312 desc: "description",
307 title: "Foo", // Required 313 customClass: "disabled highlight", // Custom classes to an calendar cell
308 }, 314 },
309 { 315 ],
310 date: "2020/01/12", 316
311 title: "Bar", 317 showLoader: false,
312 desc: "description", 318 calendarData: {},
313 customClass: "disabled highlight", // Custom classes to an calendar cell 319 dialog: false,
314 }, 320 dialogNotice: false,
315 ], 321 HolidaysList: [],
316 322 EventsList: [],
317 showLoader: false, 323 events: [],
318 calendarData: {}, 324 config: {
319 dialog: false, 325 eventClick: (event) => {
320 dialogNotice: false, 326 this.selected = event;
321 HolidaysList: [], 327 this.dialog = true;
322 EventsList: [], 328 },
323 events: [], 329 },
324 config: { 330 selected: {},
325 eventClick: (event) => { 331 // notice: {},
326 this.selected = event; 332 userData: {},
327 this.dialog = true; 333 dated: new Date(2018, 0, 9),
328 }, 334 userList: [],
329 }, 335 sectionList: [],
330 selected: {}, 336 students: "",
331 // notice: {}, 337 parents: "",
332 userData: {}, 338 teachers: "",
333 dated: new Date(2018, 0, 9), 339 classes: "",
334 userList: [], 340 noticeData: [],
335 sectionList: [], 341 attrs: [
336 students: "", 342 {
337 parents: "", 343 key: "today",
338 teachers: "", 344 highlight: true,
339 classes: "", 345 dates: new Date(),
340 noticeData: [], 346 },
341 attrs: [ 347 ],
342 { 348 drawer: true,
343 key: "today", 349 items: [
344 highlight: true, 350 { title: "Home", icon: "dashboard" },
345 dates: new Date(), 351 { title: "About", icon: "question_answer" },
346 }, 352 ],
347 ], 353 right: null,
348 drawer: true, 354
349 items: [ 355 series: [
350 { title: "Home", icon: "dashboard" }, 356 {
351 { title: "About", icon: "question_answer" }, 357 name: "Total",
352 ], 358 data: [66, 44, 33],
353 right: null, 359 },
354 360 ],
355 series: [ 361 chartOptions: {
356 { 362 chart: {
357 name: "Total", 363 // type: "bar",
358 data: [66, 44, 33], 364 height: 150,
359 }, 365 stacked: true,
360 ], 366
361 chartOptions: { 367 // animations: {
362 chart: { 368 // enabled: true,
363 // type: "bar", 369 // easing: "easeinout",
364 height: 150, 370 // speed: 1200,
365 stacked: true, 371 // animateGradually: {
366 372 // enabled: true,
367 // animations: { 373 // delay: 450
368 // enabled: true, 374 // },
369 // easing: "easeinout", 375 // dynamicAnimation: {
370 // speed: 1200, 376 // enabled: true,
371 // animateGradually: { 377 // speed: 450
372 // enabled: true, 378 // }
373 // delay: 450 379 // }
374 // }, 380 },
375 // dynamicAnimation: { 381 plotOptions: {
376 // enabled: true, 382 bar: {
377 // speed: 450 383 horizontal: false,
378 // } 384 columnWidth: "25%",
379 // } 385 // endingShape: "rounded",
380 }, 386 distributed: true,
381 plotOptions: { 387 },
382 bar: { 388 },
383 horizontal: false, 389 responsive: [
384 columnWidth: "25%", 390 {
385 // endingShape: "rounded", 391 breakpoint: 480,
386 distributed: true, 392 options: {
387 }, 393 legend: {
388 }, 394 position: "bottom",
389 responsive: [ 395 offsetX: -10,
390 { 396 offsetY: 0,
391 breakpoint: 480, 397 },
392 options: { 398 },
393 legend: { 399 },
394 position: "bottom", 400 ],
395 offsetX: -10, 401
396 offsetY: 0, 402 legend: {
397 }, 403 position: "right",
398 }, 404 offsetY: 40,
399 }, 405 },
400 ], 406 colors: ["#7852cc", "#f9a825", "#ff8a89"],
401 407 dataLabels: {
402 legend: { 408 enabled: false,
403 position: "right", 409 },
404 offsetY: 40, 410 stroke: {
405 }, 411 show: true,
406 colors: ["#7852cc", "#f9a825", "#ff8a89"], 412 width: 2,
407 dataLabels: { 413 colors: ["transparent"],
408 enabled: false, 414 },
409 }, 415 xaxis: {
410 stroke: { 416 categories: ["Fee", "Collections", "Expences"],
411 show: true, 417 },
412 width: 2, 418 yaxis: {
413 colors: ["transparent"], 419 title: {
414 }, 420 text: "",
415 xaxis: { 421 },
416 categories: ["Fee", "Collections", "Expences"], 422 },
417 }, 423 fill: {
418 yaxis: { 424 opacity: 1,
419 title: { 425 },
420 text: "", 426 tooltip: {
421 }, 427 y: {
422 }, 428 formatter: function (val, opts) {
423 fill: { 429 // console.log("opts",opts.w.config.xaxis.categories)
424 opacity: 1, 430 return "" + val + " ";
425 }, 431 },
426 tooltip: { 432 },
427 y: { 433 },
428 formatter: function (val, opts) { 434 },
429 // console.log("opts",opts.w.config.xaxis.categories) 435 };
430 return "" + val + " "; 436 },
431 }, 437 mounted() {
432 }, 438 // = this.$store.state.schoolToken;
433 }, 439 // console.log("this.$store.state.role", this.token);
434 }, 440 if (this.$store.state.role === "ADMIN") {
435 }; 441 this.token = this.$store.state.token;
436 }, 442 } else if (this.$store.state.schoolRole === "SUPERADMIN") {
437 mounted() { 443 this.token = this.$store.state.schoolToken;
438 // = this.$store.state.schoolToken; 444 }
439 // console.log("this.$store.state.role", this.token); 445 // console.log("role", this.$store.state.schoolRole,"tt",this.$store.state.schoolToken);
440 if (this.$store.state.role === "ADMIN") { 446 // this.getData();
441 this.token = this.$store.state.token; 447 this.getStudents();
442 } else if (this.$store.state.schoolRole === "SUPERADMIN") { 448 this.getTeachers();
443 this.token = this.$store.state.schoolToken; 449 this.getParents();
444 } 450 this.getClasses();
445 // console.log("role", this.$store.state.schoolRole,"tt",this.$store.state.schoolToken); 451 this.getNoticeData();
446 // this.getData(); 452 this.getUserData();
447 this.getStudents(); 453 // this.getUsersList();
448 this.getTeachers(); 454 },
449 this.getParents(); 455 methods: {
450 this.getClasses(); 456 closeNotice() {
451 this.getNoticeData(); 457 this.dialogNotice = false;
452 this.getUserData(); 458 },
453 // this.getUsersList(); 459 profile() {
454 }, 460 // this.editedIndex = this.desserts.indexOf(item);
455 methods: { 461 // this.notice = Object.assign({}, item);
456 closeNotice() { 462 // this.dialogNotice = true;
457 this.dialogNotice = false; 463 this.$router.push({ name: "NoticeBoard" });
458 }, 464 },
459 profile() { 465 date: function (date) {
460 // this.editedIndex = this.desserts.indexOf(item); 466 return moment(date).format("MMMM DD, YYYY HH:mm");
461 // this.notice = Object.assign({}, item); 467 },
462 // this.dialogNotice = true; 468 refreshEvents() {
463 this.$router.push({ name: "NoticeBoard" }); 469 this.$refs.calendar.$emit("refetch-events");
464 }, 470 },
465 date: function (date) { 471 removeEvent() {
466 return moment(date).format("MMMM DD, YYYY HH:mm"); 472 this.$refs.calendar.$emit("remove-event", this.selected);
467 }, 473 this.selected = {};
468 refreshEvents() { 474 },
469 this.$refs.calendar.$emit("refetch-events"); 475 eventSelected(event) {
470 }, 476 this.selected = event;
471 removeEvent() { 477 // console.log("this.selected", this.selected);
472 this.$refs.calendar.$emit("remove-event", this.selected); 478 },
473 this.selected = {}; 479 // eventDropStart: function(event) {
474 }, 480 // event.editable = false;
475 eventSelected(event) { 481 // },
476 this.selected = event; 482 eventCreated(...test) {
477 // console.log("this.selected", this.selected); 483 // console.log(test);
478 }, 484 },
479 // eventDropStart: function(event) { 485 getStudents() {
480 // event.editable = false; 486 http()
481 // }, 487 .get("/getStudentsList", {
482 eventCreated(...test) { 488 headers: {
483 // console.log(test); 489 Authorization: "Bearer " + this.token,
484 }, 490 },
485 getStudents() { 491 })
486 http() 492 .then((response) => {
487 .get("/getStudentsList", { 493 this.students = response.data.data;
488 headers: { 494 this.showLoader = false;
489 Authorization: "Bearer " + this.token, 495 })
490 }, 496 .catch((error) => {
491 }) 497 // console.log("err====>", err);
492 .then((response) => { 498 this.showLoader = false;
493 this.students = response.data.data; 499 // if (error.response.status === 401) {
494 this.showLoader = false; 500 // this.$router.replace({ path: "/" });
495 }) 501 // this.$store.dispatch("setToken", null);
496 .catch((error) => { 502 // this.$store.dispatch("Id", null);
497 // console.log("err====>", err); 503 // }
498 this.showLoader = false; 504 });
499 // if (error.response.status === 401) { 505 },
500 // this.$router.replace({ path: "/" }); 506 getParents() {
501 // this.$store.dispatch("setToken", null); 507 http()
502 // this.$store.dispatch("Id", null); 508 .get("/getParentsList", {
503 // } 509 headers: {
504 }); 510 Authorization: "Bearer " + this.token,
505 }, 511 },
506 getParents() { 512 })
507 http() 513 .then((response) => {
508 .get("/getParentsList", { 514 this.parents = response.data.data;
509 headers: { 515 this.showLoader = false;
510 Authorization: "Bearer " + this.token, 516 })
511 }, 517 .catch((error) => {
512 }) 518 // console.log("err====>", err);
513 .then((response) => { 519 this.showLoader = false;
514 this.parents = response.data.data; 520 // if (error.response.status === 401) {
515 this.showLoader = false; 521 // this.$router.replace({ path: "/" });
516 }) 522 // this.$store.dispatch("setToken", null);
517 .catch((error) => { 523 // this.$store.dispatch("Id", null);
518 // console.log("err====>", err); 524 // }
519 this.showLoader = false; 525 });
520 // if (error.response.status === 401) { 526 },
521 // this.$router.replace({ path: "/" }); 527 getTeachers() {
522 // this.$store.dispatch("setToken", null); 528 http()
523 // this.$store.dispatch("Id", null); 529 .get("/getTeachersList", {
524 // } 530 headers: {
525 }); 531 Authorization: "Bearer " + this.token,
526 }, 532 },
527 getTeachers() { 533 })
528 http() 534 .then((response) => {
529 .get("/getTeachersList", { 535 this.teachers = response.data.data;
530 headers: { 536 this.showLoader = false;
531 Authorization: "Bearer " + this.token, 537 })
532 }, 538 .catch((error) => {
533 }) 539 // console.log("err====>", err);
534 .then((response) => { 540 this.showLoader = false;
535 this.teachers = response.data.data; 541 // if (error.response.status === 401) {
536 this.showLoader = false; 542 // this.$router.replace({ path: "/" });
537 }) 543 // this.$store.dispatch("setToken", null);
538 .catch((error) => { 544 // this.$store.dispatch("Id", null);
539 // console.log("err====>", err); 545 // }
540 this.showLoader = false; 546 });
541 // if (error.response.status === 401) { 547 },
542 // this.$router.replace({ path: "/" }); 548 getClasses() {
543 // this.$store.dispatch("setToken", null); 549 http()
544 // this.$store.dispatch("Id", null); 550 .get("/getClassesList", {
545 // } 551 headers: {
546 }); 552 Authorization: "Bearer " + this.token,
547 }, 553 },
548 getClasses() { 554 })
549 http() 555 .then((response) => {
550 .get("/getClassesList", { 556 this.classes = response.data.data;
551 headers: { 557 this.showLoader = false;
552 Authorization: "Bearer " + this.token, 558 })
553 }, 559 .catch((error) => {
554 }) 560 this.showLoader = false;
555 .then((response) => { 561 // if (error.response.status === 401) {
556 this.classes = response.data.data; 562 // this.$router.replace({ path: "/" });
557 this.showLoader = false; 563 // this.$store.dispatch("setToken", null);
558 }) 564 // this.$store.dispatch("Id", null);
559 .catch((error) => { 565 // this.$store.dispatch("Role", null);
560 this.showLoader = false; 566 // }
561 // if (error.response.status === 401) { 567 });
562 // this.$router.replace({ path: "/" }); 568 },
563 // this.$store.dispatch("setToken", null); 569 getNoticeData() {
564 // this.$store.dispatch("Id", null); 570 this.showLoader = true;
565 // this.$store.dispatch("Role", null); 571 http()
566 // } 572 .get("/getEventsList", {
567 }); 573 headers: {
568 }, 574 Authorization: "Bearer " + this.token,
569 getNoticeData() { 575 },
570 this.showLoader = true; 576 })
571 http() 577 .then((response) => {
572 .get("/getEventsList", { 578 this.noticeData = response.data.data;
573 headers: { 579 this.showLoader = false;
574 Authorization: "Bearer " + this.token, 580 })
575 }, 581 .catch((error) => {
576 }) 582 this.showLoader = false;
577 .then((response) => { 583 // if (error.response.status === 401) {
578 this.noticeData = response.data.data; 584 // this.$router.replace({ path: "/" });
579 this.showLoader = false; 585 // this.$store.dispatch("setToken", null);
580 }) 586 // this.$store.dispatch("Id", null);
581 .catch((error) => { 587 // }
582 this.showLoader = false; 588 });
583 // if (error.response.status === 401) { 589 },
584 // this.$router.replace({ path: "/" }); 590 getUserData() {
585 // this.$store.dispatch("setToken", null); 591 // this.showLoader = true;
586 // this.$store.dispatch("Id", null); 592 http()
587 // } 593 .get("/getParticularUserDetail", {
588 }); 594 headers: {
589 }, 595 Authorization: "Bearer " + this.token,
590 getUserData() { 596 },
591 // this.showLoader = true; 597 })
592 http() 598 .then((response) => {
593 .get("/getParticularUserDetail", { 599 this.userData = response.data.data;
594 headers: { 600 this.showLoader = false;
595 Authorization: "Bearer " + this.token, 601 })
596 }, 602 .catch((error) => {
597 }) 603 this.showLoader = false;
598 .then((response) => { 604 // if (error.response.status === 401) {
599 this.userData = response.data.data; 605 // this.$router.replace({ path: "/" });
600 this.showLoader = false; 606 // this.$store.dispatch("setToken", null);
601 }) 607 // this.$store.dispatch("Id", null);
602 .catch((error) => { 608 // }
603 this.showLoader = false; 609 });
604 // if (error.response.status === 401) { 610 },
605 // this.$router.replace({ path: "/" }); 611 },
606 // this.$store.dispatch("setToken", null); 612 };
607 // this.$store.dispatch("Id", null); 613 </script>
608 // } 614
609 }); 615 <style scoped>
610 }, 616 @import "fullcalendar/dist/fullcalendar.css";
611 }, 617 </style>
src/pages/Students/students.vue
Diff comments   View file @8b7976c
1 <template> 1 <template>
2 <v-container fluid class="body-color"> 2 <v-container fluid class="body-color">
3 <!-- ****** EDITS STUDENTS DETAILS ****** --> 3 <!-- ****** EDITS STUDENTS DETAILS ****** -->
4 <v-dialog v-model="editStudentDialog" max-width="1700px" scrollable persistent> 4 <v-dialog v-model="editStudentDialog" max-width="1700px" scrollable persistent>
5 <v-card flat class="card-style pa-2" dark> 5 <v-card flat class="card-style pa-2" dark>
6 <v-layout> 6 <v-layout>
7 <v-flex xs12> 7 <v-flex xs12>
8 <label class="title text-xs-center">Edit Student Details</label> 8 <label class="title text-xs-center">Edit Student Details</label>
9 <v-icon size="24" class="right" @click="editStudentDialog = false">cancel</v-icon> 9 <v-icon size="24" class="right" @click="editStudentDialog = false">cancel</v-icon>
10 </v-flex> 10 </v-flex>
11 </v-layout> 11 </v-layout>
12 <v-card-text> 12 <v-card-text>
13 <v-form ref="form"> 13 <v-form ref="form">
14 <v-container fluid> 14 <v-container fluid>
15 <v-layout> 15 <v-layout>
16 <v-flex xs12 class="text-xs-center text-sm-center text-md-center text-lg-center"> 16 <v-flex xs12 class="text-xs-center text-sm-center text-md-center text-lg-center">
17 <v-avatar size="100px" v-if="!editedItem.profilePicUrl && !editImageUrl"> 17 <v-avatar size="100px" v-if="!editedItem.profilePicUrl && !editImageUrl">
18 <img src="/static/icon/user.png" /> 18 <img src="/static/icon/user.png" />
19 </v-avatar> 19 </v-avatar>
20 <img 20 <img
21 :src="editedItem.profilePicUrl" 21 :src="editedItem.profilePicUrl"
22 v-else-if="editedItem.profilePicUrl && !editImageUrl" 22 v-else-if="editedItem.profilePicUrl && !editImageUrl"
23 height="150" 23 height="150"
24 style="border-radius:50%; width:150px" 24 style="border-radius:50%; width:150px"
25 /> 25 />
26 <img 26 <img
27 v-if="editImageUrl" 27 v-if="editImageUrl"
28 :src="editImageUrl" 28 :src="editImageUrl"
29 style="border-radius:50%; width:150px;height:150px" 29 style="border-radius:50%; width:150px;height:150px"
30 /> 30 />
31 <input 31 <input
32 type="file" 32 type="file"
33 style="display: none" 33 style="display: none"
34 ref="editDataImage" 34 ref="editDataImage"
35 accept="image/*" 35 accept="image/*"
36 @change="onEditFilePicked" 36 @change="onEditFilePicked"
37 /> 37 />
38 </v-flex> 38 </v-flex>
39 </v-layout> 39 </v-layout>
40 <v-layout wrap> 40 <v-layout wrap>
41 <v-flex xs12 sm4> 41 <v-flex xs12 sm4>
42 <v-layout> 42 <v-layout>
43 <v-flex xs4 class="pt-4 subheading"> 43 <v-flex xs4 class="pt-4 subheading">
44 <label class="right hidden-xs-only hidden-sm-only">Select Class:</label> 44 <label class="right hidden-xs-only hidden-sm-only">Select Class:</label>
45 <label class="right hidden-lg-only hidden-md-only hidden-xl-only">Class:</label> 45 <label class="right hidden-lg-only hidden-md-only hidden-xl-only">Class:</label>
46 </v-flex> 46 </v-flex>
47 <v-flex xs8 class="ml-3"> 47 <v-flex xs8 class="ml-3">
48 <v-select 48 <v-select
49 :items="addclass" 49 :items="addclass"
50 label="Select Class" 50 label="Select Class"
51 v-model="editedItem.select" 51 v-model="editedItem.select"
52 item-text="classNum" 52 item-text="classNum"
53 item-value="_id" 53 item-value="_id"
54 name="Select Class" 54 name="Select Class"
55 @change="getSections(editedItem.select)" 55 @change="getSections(editedItem.select)"
56 required 56 required
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 sm4> 61 <v-flex xs12 sm4>
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 hidden-xs-only hidden-sm-only">Select Section:</label> 64 <label class="right hidden-xs-only hidden-sm-only">Select Section:</label>
65 <label class="right hidden-lg-only hidden-md-only hidden-xl-only">Section:</label> 65 <label class="right hidden-lg-only hidden-md-only hidden-xl-only">Section:</label>
66 </v-flex> 66 </v-flex>
67 <v-flex xs8 class="ml-3"> 67 <v-flex xs8 class="ml-3">
68 <v-select 68 <v-select
69 :items="addSection" 69 :items="addSection"
70 label="Select Section" 70 label="Select Section"
71 v-model="editedItem.selectSection" 71 v-model="editedItem.selectSection"
72 item-text="name" 72 item-text="name"
73 item-value="_id" 73 item-value="_id"
74 name="Select Section" 74 name="Select Section"
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 sm4> 80 <v-flex xs12 sm4>
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 hidden-xs-only hidden-sm-only">Full Name:</label> 83 <label class="right hidden-xs-only hidden-sm-only">Full Name:</label>
84 <label class="right hidden-lg-only hidden-md-only hidden-xl-only">Name:</label> 84 <label class="right hidden-lg-only hidden-md-only hidden-xl-only">Name:</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 v-model="editedItem.name" 88 v-model="editedItem.name"
89 placeholder="fill your full Name" 89 placeholder="fill your full Name"
90 name="name" 90 name="name"
91 type="text" 91 type="text"
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 sm4> 99 <v-flex xs12 sm4>
100 <v-layout> 100 <v-layout>
101 <v-flex xs4 class="pt-4 subheading"> 101 <v-flex xs4 class="pt-4 subheading">
102 <label class="right hidden-xs-only hidden-sm-only">Email Id:</label> 102 <label class="right hidden-xs-only hidden-sm-only">Email Id:</label>
103 <label class="right hidden-lg-only hidden-md-only hidden-xl-only">Email:</label> 103 <label class="right hidden-lg-only hidden-md-only hidden-xl-only">Email:</label>
104 </v-flex> 104 </v-flex>
105 <v-flex xs8 class="ml-3"> 105 <v-flex xs8 class="ml-3">
106 <v-text-field 106 <v-text-field
107 placeholder="fill your email" 107 placeholder="fill your email"
108 v-model="editedItem.email" 108 v-model="editedItem.email"
109 type="text" 109 type="text"
110 name="email" 110 name="email"
111 required 111 required
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 sm4> 116 <v-flex xs12 sm4>
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 hidden-sm-only hidden-xs-only">Date of Birth:</label> 119 <label class="right hidden-sm-only hidden-xs-only">Date of Birth:</label>
120 <label class="right hidden-lg-only hidden-xl-only hidden-md-only">D.O.B:</label> 120 <label class="right hidden-lg-only hidden-xl-only hidden-md-only">D.O.B:</label>
121 </v-flex> 121 </v-flex>
122 <v-flex xs8 class="ml-3"> 122 <v-flex xs8 class="ml-3">
123 <v-menu 123 <v-menu
124 ref="menu" 124 ref="menu"
125 :close-on-content-click="false" 125 :close-on-content-click="false"
126 v-model="menu1" 126 v-model="menu1"
127 :nudge-right="40" 127 :nudge-right="40"
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.dob" 136 v-model="editedItem.dob"
137 placeholder="Select Dob" 137 placeholder="Select Dob"
138 ></v-text-field> 138 ></v-text-field>
139 <v-date-picker 139 <v-date-picker
140 ref="picker" 140 ref="picker"
141 v-model="editedItem.dob" 141 v-model="editedItem.dob"
142 :max="new Date().toISOString().substr(0, 10)" 142 :max="new Date().toISOString().substr(0, 10)"
143 min="1950-01-01" 143 min="1950-01-01"
144 @input="menu1 = false" 144 @input="menu1 = false"
145 ></v-date-picker> 145 ></v-date-picker>
146 </v-menu> 146 </v-menu>
147 </v-flex> 147 </v-flex>
148 </v-layout> 148 </v-layout>
149 </v-flex> 149 </v-flex>
150 <v-flex xs12 sm4> 150 <v-flex xs12 sm4>
151 <v-layout> 151 <v-layout>
152 <v-flex xs4 class="pt-4 subheading"> 152 <v-flex xs4 class="pt-4 subheading">
153 <label class="right">City:</label> 153 <label class="right">City:</label>
154 </v-flex> 154 </v-flex>
155 <v-flex xs8 class="ml-3"> 155 <v-flex xs8 class="ml-3">
156 <v-text-field 156 <v-text-field
157 v-model="editedItem.city" 157 v-model="editedItem.city"
158 placeholder="fill your City Name" 158 placeholder="fill your City Name"
159 name="City" 159 name="City"
160 type="text" 160 type="text"
161 required 161 required
162 ></v-text-field> 162 ></v-text-field>
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 wrap> 167 <v-layout wrap>
168 <v-flex xs12 sm4> 168 <v-flex xs12 sm4>
169 <v-layout> 169 <v-layout>
170 <v-flex xs4 class="pt-4 subheading"> 170 <v-flex xs4 class="pt-4 subheading">
171 <label class="right hidden-xs-only hidden-sm-only">Blood Group:</label> 171 <label class="right hidden-xs-only hidden-sm-only">Blood Group:</label>
172 <label class="right hidden-lg-only hidden-md-only hidden-xl-only">Blood:</label> 172 <label class="right hidden-lg-only hidden-md-only hidden-xl-only">Blood:</label>
173 </v-flex> 173 </v-flex>
174 <v-flex xs8 class="ml-3"> 174 <v-flex xs8 class="ml-3">
175 <v-text-field 175 <v-text-field
176 v-model="editedItem.bloodGroup" 176 v-model="editedItem.bloodGroup"
177 placeholder="fill your BloodGroup" 177 placeholder="fill your BloodGroup"
178 name="state" 178 name="state"
179 type="text" 179 type="text"
180 required 180 required
181 ></v-text-field> 181 ></v-text-field>
182 </v-flex> 182 </v-flex>
183 </v-layout> 183 </v-layout>
184 </v-flex> 184 </v-flex>
185 <v-flex xs12 sm4> 185 <v-flex xs12 sm4>
186 <v-layout> 186 <v-layout>
187 <v-flex xs4 class="pt-4 subheading"> 187 <v-flex xs4 class="pt-4 subheading">
188 <label class="right">Gender:</label> 188 <label class="right">Gender:</label>
189 </v-flex> 189 </v-flex>
190 <v-flex xs8 class="ml-3"> 190 <v-flex xs8 class="ml-3">
191 <v-select 191 <v-select
192 :items="gender" 192 :items="gender"
193 v-model="editedItem.gender" 193 v-model="editedItem.gender"
194 placeholder="Select Gender" 194 placeholder="Select Gender"
195 required 195 required
196 ></v-select> 196 ></v-select>
197 </v-flex> 197 </v-flex>
198 </v-layout> 198 </v-layout>
199 </v-flex> 199 </v-flex>
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">Medical Notes:</label> 203 <label class="right">Medical Notes:</label>
204 </v-flex> 204 </v-flex>
205 <v-flex xs8 class="ml-3"> 205 <v-flex xs8 class="ml-3">
206 <v-text-field 206 <v-text-field
207 v-model="editedItem.medicalNotes" 207 v-model="editedItem.medicalNotes"
208 placeholder="fill your medicalNotes" 208 placeholder="fill your medicalNotes"
209 required 209 required
210 ></v-text-field> 210 ></v-text-field>
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 wrap> 215 <v-layout wrap>
216 <v-flex xs12 sm4> 216 <v-flex xs12 sm4>
217 <v-layout> 217 <v-layout>
218 <v-flex xs4 class="pt-4 subheading"> 218 <v-flex xs4 class="pt-4 subheading">
219 <label class="right">Height:</label> 219 <label class="right">Height:</label>
220 </v-flex> 220 </v-flex>
221 <v-flex xs8 class="ml-3"> 221 <v-flex xs8 class="ml-3">
222 <v-text-field 222 <v-text-field
223 v-model="editedItem.height" 223 v-model="editedItem.height"
224 placeholder="fill your Height" 224 placeholder="fill your Height"
225 name="state" 225 name="state"
226 type="text" 226 type="text"
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">Weight:</label> 235 <label class="right">Weight:</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.weight" 239 v-model="editedItem.weight"
240 placeholder="fill your Weight" 240 placeholder="fill your Weight"
241 name="pincode" 241 name="pincode"
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-flex xs12 sm4> 247 <v-flex xs12 sm4>
248 <v-layout> 248 <v-layout>
249 <v-flex xs4 class="pt-4 subheading"> 249 <v-flex xs4 class="pt-4 subheading">
250 <label class="right hidden-xs-only hidden-sm-only">Uplaod Image:</label> 250 <label class="right hidden-xs-only hidden-sm-only">Uplaod Image:</label>
251 <label class="right hidden-lg-only hidden-md-only hidden-xl-only">Uplaod:</label> 251 <label class="right hidden-lg-only hidden-md-only hidden-xl-only">Uplaod:</label>
252 </v-flex> 252 </v-flex>
253 <v-flex xs8 class="ml-3"> 253 <v-flex xs8 class="ml-3">
254 <v-text-field 254 <v-text-field
255 label="Select Image" 255 label="Select Image"
256 @click="pickEditFile" 256 @click="pickEditFile"
257 v-model="editImageName" 257 v-model="editImageName"
258 append-icon="attach_file" 258 append-icon="attach_file"
259 ></v-text-field> 259 ></v-text-field>
260 </v-flex> 260 </v-flex>
261 </v-layout> 261 </v-layout>
262 </v-flex> 262 </v-flex>
263 </v-layout> 263 </v-layout>
264 <v-layout wrap> 264 <v-layout wrap>
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">State:</label> 268 <label class="right">State:</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.state" 272 v-model="editedItem.state"
273 placeholder="fill your State Name" 273 placeholder="fill your State Name"
274 name="state" 274 name="state"
275 type="text" 275 type="text"
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 sm4> 281 <v-flex xs12 sm4>
282 <v-layout> 282 <v-layout>
283 <v-flex xs4 class="pt-4 subheading"> 283 <v-flex xs4 class="pt-4 subheading">
284 <label class="right">Pincode:</label> 284 <label class="right">Pincode:</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 v-model="editedItem.pincode" 288 v-model="editedItem.pincode"
289 placeholder="fill your pincode" 289 placeholder="fill your pincode"
290 name="pincode" 290 name="pincode"
291 type="number" 291 type="number"
292 required 292 required
293 ></v-text-field> 293 ></v-text-field>
294 </v-flex> 294 </v-flex>
295 </v-layout> 295 </v-layout>
296 </v-flex> 296 </v-flex>
297 <v-flex xs12 sm4> 297 <v-flex xs12 sm4>
298 <v-layout> 298 <v-layout>
299 <v-flex xs4 class="pt-4 subheading"> 299 <v-flex xs4 class="pt-4 subheading">
300 <label class="right hidden-xs-only hidden-sm-only">Mobile No:</label> 300 <label class="right hidden-xs-only hidden-sm-only">Mobile No:</label>
301 <label class="right hidden-lg-only hidden-md-only hidden-xl-only">Mobile:</label> 301 <label class="right hidden-lg-only hidden-md-only hidden-xl-only">Mobile:</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.mobile" 305 v-model="editedItem.mobile"
306 placeholder="fill your MobileNo" 306 placeholder="fill your MobileNo"
307 name="mobileNo" 307 name="mobileNo"
308 type="number" 308 type="number"
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-layout> 314 </v-layout>
315 <v-layout wrap> 315 <v-layout wrap>
316 <v-flex xs12 sm4> 316 <v-flex xs12 sm4>
317 <v-layout> 317 <v-layout>
318 <v-flex xs4 class="pt-4 subheading"> 318 <v-flex xs4 class="pt-4 subheading">
319 <label class="right hidden-xs-only hidden-sm-only">Select Country:</label> 319 <label class="right hidden-xs-only hidden-sm-only">Select Country:</label>
320 <label class="right hidden-lg-only hidden-md-only hidden-xl-only">Country:</label> 320 <label class="right hidden-lg-only hidden-md-only hidden-xl-only">Country:</label>
321 </v-flex> 321 </v-flex>
322 <v-flex xs8 class="ml-3"> 322 <v-flex xs8 class="ml-3">
323 <v-autocomplete 323 <v-autocomplete
324 v-model="editedItem.country" 324 v-model="editedItem.country"
325 :items="countries" 325 :items="countries"
326 placeholder="Select Country Name" 326 placeholder="Select Country Name"
327 required 327 required
328 ></v-autocomplete> 328 ></v-autocomplete>
329 </v-flex> 329 </v-flex>
330 </v-layout> 330 </v-layout>
331 </v-flex> 331 </v-flex>
332 <v-flex xs12 sm4 class="hidden-xs-only hidden-sm-only"> 332 <v-flex xs12 sm4 class="hidden-xs-only hidden-sm-only">
333 <v-layout> 333 <v-layout>
334 <v-flex xs4 class="pt-4 subheading"> 334 <v-flex xs4 class="pt-4 subheading">
335 <label class="right hidden-xs-only hidden-sm-only">Roll Number:</label> 335 <label class="right hidden-xs-only hidden-sm-only">Roll Number:</label>
336 <label class="right hidden-lg-only hidden-md-only hidden-xl-only">Roll No:</label> 336 <label class="right hidden-lg-only hidden-md-only hidden-xl-only">Roll No:</label>
337 </v-flex> 337 </v-flex>
338 <v-flex xs8 class="ml-3"> 338 <v-flex xs8 class="ml-3">
339 <v-text-field 339 <v-text-field
340 v-model="editedItem.rollNo" 340 v-model="editedItem.rollNo"
341 placeholder="fill roll number" 341 placeholder="fill roll 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-flex xs12 sm4 class="hidden-xs-only hidden-sm-only"> 347 <v-flex xs12 sm4 class="hidden-xs-only hidden-sm-only">
348 <v-layout> 348 <v-layout>
349 <v-flex xs4 sm4 class="pt-4 subheading"> 349 <v-flex xs4 sm4 class="pt-4 subheading">
350 <label class="right hidden-xs-only hidden-sm-only">Permanent Address:</label> 350 <label class="right hidden-xs-only hidden-sm-only">Permanent Address:</label>
351 <label 351 <label
352 class="right hidden-lg-only hidden-md-only hidden-xl-only" 352 class="right hidden-lg-only hidden-md-only hidden-xl-only"
353 >Permanent Address:</label> 353 >Permanent Address:</label>
354 </v-flex> 354 </v-flex>
355 <v-flex xs12 sm8 class="ml-3"> 355 <v-flex xs12 sm8 class="ml-3">
356 <v-text-field 356 <v-text-field
357 v-model="editedItem.permanentAddress" 357 v-model="editedItem.permanentAddress"
358 placeholder="fill Your Permanent Address" 358 placeholder="fill Your Permanent Address"
359 required 359 required
360 ></v-text-field> 360 ></v-text-field>
361 </v-flex> 361 </v-flex>
362 </v-layout> 362 </v-layout>
363 </v-flex> 363 </v-flex>
364 </v-layout> 364 </v-layout>
365 <v-layout class="hidden-xs-only hidden-sm-only"> 365 <v-layout class="hidden-xs-only hidden-sm-only">
366 <v-flex xs12 sm4> 366 <v-flex xs12 sm4>
367 <v-layout> 367 <v-layout>
368 <v-flex xs4 class="pt-4 subheading"> 368 <v-flex xs4 class="pt-4 subheading">
369 <label class="right hidden-xs-only hidden-sm-only">Present Address:</label> 369 <label class="right hidden-xs-only hidden-sm-only">Present Address:</label>
370 <label 370 <label
371 class="right hidden-lg-only hidden-md-only hidden-xl-only" 371 class="right hidden-lg-only hidden-md-only hidden-xl-only"
372 >Present Address:</label> 372 >Present Address:</label>
373 </v-flex> 373 </v-flex>
374 <v-flex xs8 class="ml-3"> 374 <v-flex xs8 class="ml-3">
375 <v-text-field 375 <v-text-field
376 v-model="editedItem.presentAddress" 376 v-model="editedItem.presentAddress"
377 placeholder="Select Country Name" 377 placeholder="Select Country Name"
378 required 378 required
379 ></v-text-field> 379 ></v-text-field>
380 </v-flex> 380 </v-flex>
381 </v-layout> 381 </v-layout>
382 </v-flex> 382 </v-flex>
383 </v-layout> 383 </v-layout>
384 <v-layout class="hidden-lg-only hidden-md-only hidden-xl-only" wrap> 384 <v-layout class="hidden-lg-only hidden-md-only hidden-xl-only" wrap>
385 <v-flex xs12 sm12> 385 <v-flex xs12 sm12>
386 <v-layout> 386 <v-layout>
387 <v-flex xs4 class="pt-4 subheading"> 387 <v-flex xs4 class="pt-4 subheading">
388 <label class="right hidden-xs-only hidden-sm-only">Roll Number:</label> 388 <label class="right hidden-xs-only hidden-sm-only">Roll Number:</label>
389 <label class="right hidden-lg-only hidden-md-only hidden-xl-only">Roll No:</label> 389 <label class="right hidden-lg-only hidden-md-only hidden-xl-only">Roll No:</label>
390 </v-flex> 390 </v-flex>
391 <v-flex xs8 class="ml-3"> 391 <v-flex xs8 class="ml-3">
392 <v-text-field 392 <v-text-field
393 v-model="editedItem.rollNo" 393 v-model="editedItem.rollNo"
394 placeholder="fill roll number" 394 placeholder="fill roll number"
395 required 395 required
396 ></v-text-field> 396 ></v-text-field>
397 </v-flex> 397 </v-flex>
398 </v-layout> 398 </v-layout>
399 </v-flex> 399 </v-flex>
400 </v-layout> 400 </v-layout>
401 <v-layout class="hidden-lg-only hidden-md-only hidden-xl-only" wrap> 401 <v-layout class="hidden-lg-only hidden-md-only hidden-xl-only" wrap>
402 <v-flex xs12 sm12> 402 <v-flex xs12 sm12>
403 <v-layout> 403 <v-layout>
404 <v-flex xs12 sm3 class="pt-4 subheading text-xs-center"> 404 <v-flex xs12 sm3 class="pt-4 subheading text-xs-center">
405 <label class>Present Address :</label> 405 <label class>Present Address :</label>
406 </v-flex> 406 </v-flex>
407 </v-layout> 407 </v-layout>
408 <v-layout> 408 <v-layout>
409 <v-flex xs12 sm12> 409 <v-flex xs12 sm12>
410 <v-textarea 410 <v-textarea
411 v-model="editedItem.presentAddress" 411 v-model="editedItem.presentAddress"
412 placeholder="fill Your present Address" 412 placeholder="fill Your present Address"
413 required 413 required
414 ></v-textarea> 414 ></v-textarea>
415 </v-flex> 415 </v-flex>
416 </v-layout> 416 </v-layout>
417 </v-flex> 417 </v-flex>
418 <v-flex xs12 sm12> 418 <v-flex xs12 sm12>
419 <v-layout> 419 <v-layout>
420 <v-flex xs12 sm3 class="pt-4 pr-4 subheading text-xs-center addressForm"> 420 <v-flex xs12 sm3 class="pt-4 pr-4 subheading text-xs-center addressForm">
421 <label>Permanent addr:</label> 421 <label>Permanent addr:</label>
422 </v-flex> 422 </v-flex>
423 </v-layout> 423 </v-layout>
424 <v-layout> 424 <v-layout>
425 <v-flex xs12 sm12> 425 <v-flex xs12 sm12>
426 <v-textarea 426 <v-textarea
427 name="input-4-3" 427 name="input-4-3"
428 v-model="editedItem.permanentAddress" 428 v-model="editedItem.permanentAddress"
429 placeholder="fill Your Permanent Address" 429 placeholder="fill Your Permanent Address"
430 required 430 required
431 ></v-textarea> 431 ></v-textarea>
432 </v-flex> 432 </v-flex>
433 </v-layout> 433 </v-layout>
434 </v-flex> 434 </v-flex>
435 </v-layout> 435 </v-layout>
436 <v-layout> 436 <v-layout>
437 <v-flex xs12 sm12> 437 <v-flex xs12 sm12>
438 <v-layout class="right"> 438 <v-layout class="right">
439 <v-btn @click="save" round dark :loading="editLoading" class="add-button">Save</v-btn> 439 <v-btn @click="save" round dark :loading="editLoading" class="add-button">Save</v-btn>
440 </v-layout> 440 </v-layout>
441 </v-flex> 441 </v-flex>
442 </v-layout> 442 </v-layout>
443 </v-container> 443 </v-container>
444 </v-form> 444 </v-form>
445 </v-card-text> 445 </v-card-text>
446 </v-card> 446 </v-card>
447 </v-dialog> 447 </v-dialog>
448 448
449 <!-- ****** PROFILE VIEW STUDENTS DEATILS ****** --> 449 <!-- ****** PROFILE VIEW STUDENTS DEATILS ****** -->
450 450
451 <v-dialog v-model="profileStudentDialog" max-width="1000px" scrollable persistent> 451 <v-dialog v-model="profileStudentDialog" max-width="1000px" scrollable persistent>
452 <v-card flat class="card-style pa-3" dark> 452 <v-card flat class="card-style pa-3" dark>
453 <v-layout> 453 <v-layout>
454 <v-flex xs12> 454 <v-flex xs12>
455 <label class="title text-xs-center">View Student Details</label> 455 <label class="title text-xs-center">View Student Details</label>
456 <v-icon size="24" class="right" @click="profileStudentDialog = false">cancel</v-icon> 456 <v-icon size="24" class="right" @click="profileStudentDialog = false">cancel</v-icon>
457 </v-flex> 457 </v-flex>
458 </v-layout> 458 </v-layout>
459 <v-card-text> 459 <v-card-text>
460 <v-flex align-center justify-center layout text-xs-center class="mt-3"> 460 <v-flex align-center justify-center layout text-xs-center class="mt-3">
461 <v-avatar size="100px"> 461 <v-avatar size="100px">
462 <img src="/static/icon/user.png" v-if="!editedItem.profilePicUrl" /> 462 <img src="/static/icon/user.png" v-if="!editedItem.profilePicUrl" />
463 <img :src="editedItem.profilePicUrl" v-else-if="editedItem.profilePicUrl" /> 463 <img :src="editedItem.profilePicUrl" v-else-if="editedItem.profilePicUrl" />
464 </v-avatar> 464 </v-avatar>
465 </v-flex> 465 </v-flex>
466 <v-container grid-list-md> 466 <v-container grid-list-md>
467 <v-layout wrap> 467 <v-layout wrap>
468 <v-flex xs12 sm5> 468 <v-flex xs12 sm5>
469 <v-layout> 469 <v-layout>
470 <v-flex xs6 sm6> 470 <v-flex xs6 sm6>
471 <h5 class="right my-1"> 471 <h5 class="right my-1">
472 <b>Full Name:</b> 472 <b>Full Name:</b>
473 </h5> 473 </h5>
474 </v-flex> 474 </v-flex>
475 <v-flex sm6 xs6> 475 <v-flex sm6 xs6>
476 <h5 class="my-1 left">{{ editedItem.name }}</h5> 476 <h5 class="my-1 left">{{ editedItem.name }}</h5>
477 </v-flex> 477 </v-flex>
478 </v-layout> 478 </v-layout>
479 </v-flex> 479 </v-flex>
480 <v-flex xs12 sm7> 480 <v-flex xs12 sm7>
481 <v-layout> 481 <v-layout>
482 <v-flex xs6 sm4> 482 <v-flex xs6 sm4>
483 <h5 class="right my-1"> 483 <h5 class="right my-1">
484 <b>Email:</b> 484 <b>Email:</b>
485 </h5> 485 </h5>
486 </v-flex> 486 </v-flex>
487 <v-flex sm8 xs6> 487 <v-flex sm8 xs6>
488 <h5 class="my-1 left">{{ editedItem.email }}</h5> 488 <h5 class="my-1 left">{{ editedItem.email }}</h5>
489 </v-flex> 489 </v-flex>
490 </v-layout> 490 </v-layout>
491 </v-flex> 491 </v-flex>
492 </v-layout> 492 </v-layout>
493 <v-layout wrap> 493 <v-layout wrap>
494 <v-flex xs12 sm5> 494 <v-flex xs12 sm5>
495 <v-layout> 495 <v-layout>
496 <v-flex xs6 sm6> 496 <v-flex xs6 sm6>
497 <b> 497 <b>
498 <h5 class="right my-1"> 498 <h5 class="right my-1">
499 <b>Gender:</b> 499 <b>Gender:</b>
500 </h5> 500 </h5>
501 </b> 501 </b>
502 </v-flex> 502 </v-flex>
503 <v-flex sm6 xs6> 503 <v-flex sm6 xs6>
504 <h5 class="my-1 left">{{ editedItem.gender }}</h5> 504 <h5 class="my-1 left">{{ editedItem.gender }}</h5>
505 </v-flex> 505 </v-flex>
506 </v-layout> 506 </v-layout>
507 </v-flex> 507 </v-flex>
508 <v-flex xs12 sm7> 508 <v-flex xs12 sm7>
509 <v-layout> 509 <v-layout>
510 <v-flex xs6 sm4> 510 <v-flex xs6 sm4>
511 <b> 511 <b>
512 <h5 class="right my-1"> 512 <h5 class="right my-1">
513 <b>D.O.B:</b> 513 <b>D.O.B:</b>
514 </h5> 514 </h5>
515 </b> 515 </b>
516 </v-flex> 516 </v-flex>
517 <v-flex sm8 xs6> 517 <v-flex sm8 xs6>
518 <h5 class="my-1">{{ dates(editedItem.dob) }}</h5> 518 <h5 class="my-1">{{ dates(editedItem.dob) }}</h5>
519 </v-flex> 519 </v-flex>
520 </v-layout> 520 </v-layout>
521 </v-flex> 521 </v-flex>
522 </v-layout> 522 </v-layout>
523 <v-layout wrap> 523 <v-layout wrap>
524 <v-flex xs12 sm5> 524 <v-flex xs12 sm5>
525 <v-layout> 525 <v-layout>
526 <v-flex xs6 sm6> 526 <v-flex xs6 sm6>
527 <b> 527 <b>
528 <h5 class="right my-1"> 528 <h5 class="right my-1">
529 <b>BloodGroup:</b> 529 <b>BloodGroup:</b>
530 </h5> 530 </h5>
531 </b> 531 </b>
532 </v-flex> 532 </v-flex>
533 <v-flex sm6 xs6> 533 <v-flex sm6 xs6>
534 <h5 class="my-1 left">{{ editedItem.bloodGroup }}</h5> 534 <h5 class="my-1 left">{{ editedItem.bloodGroup }}</h5>
535 </v-flex> 535 </v-flex>
536 </v-layout> 536 </v-layout>
537 </v-flex> 537 </v-flex>
538 <v-flex xs12 sm7> 538 <v-flex xs12 sm7>
539 <v-layout> 539 <v-layout>
540 <v-flex xs6 sm4> 540 <v-flex xs6 sm4>
541 <b> 541 <b>
542 <h5 class="right my-1"> 542 <h5 class="right my-1">
543 <b>Roll No. :</b> 543 <b>Roll No. :</b>
544 </h5> 544 </h5>
545 </b> 545 </b>
546 </v-flex> 546 </v-flex>
547 <v-flex sm8 xs6> 547 <v-flex sm8 xs6>
548 <h5 class="my-1">{{ editedItem.rollNo }}</h5> 548 <h5 class="my-1">{{ editedItem.rollNo }}</h5>
549 </v-flex> 549 </v-flex>
550 </v-layout> 550 </v-layout>
551 </v-flex> 551 </v-flex>
552 </v-layout> 552 </v-layout>
553 <v-layout wrap> 553 <v-layout wrap>
554 <v-flex xs12 sm5> 554 <v-flex xs12 sm5>
555 <v-layout> 555 <v-layout>
556 <v-flex xs6 sm6> 556 <v-flex xs6 sm6>
557 <b> 557 <b>
558 <h5 class="right my-1"> 558 <h5 class="right my-1">
559 <b>Height:</b> 559 <b>Height:</b>
560 </h5> 560 </h5>
561 </b> 561 </b>
562 </v-flex> 562 </v-flex>
563 <v-flex sm6 xs6> 563 <v-flex sm6 xs6>
564 <h5 class="my-1 left">{{ editedItem.height }}</h5> 564 <h5 class="my-1 left">{{ editedItem.height }}</h5>
565 </v-flex> 565 </v-flex>
566 </v-layout> 566 </v-layout>
567 </v-flex> 567 </v-flex>
568 <v-flex xs12 sm7> 568 <v-flex xs12 sm7>
569 <v-layout> 569 <v-layout>
570 <v-flex xs6 sm4> 570 <v-flex xs6 sm4>
571 <b> 571 <b>
572 <h5 class="right my-1"> 572 <h5 class="right my-1">
573 <b>Weight:</b> 573 <b>Weight:</b>
574 </h5> 574 </h5>
575 </b> 575 </b>
576 </v-flex> 576 </v-flex>
577 <v-flex sm8 xs6> 577 <v-flex sm8 xs6>
578 <h5 class="my-1">{{ editedItem.weight }}</h5> 578 <h5 class="my-1">{{ editedItem.weight }}</h5>
579 </v-flex> 579 </v-flex>
580 </v-layout> 580 </v-layout>
581 </v-flex> 581 </v-flex>
582 </v-layout> 582 </v-layout>
583 <v-layout wrap> 583 <v-layout wrap>
584 <v-flex xs12 sm5> 584 <v-flex xs12 sm5>
585 <v-layout> 585 <v-layout>
586 <v-flex xs6 sm6> 586 <v-flex xs6 sm6>
587 <b> 587 <b>
588 <h5 class="right my-1"> 588 <h5 class="right my-1">
589 <b>City:</b> 589 <b>City:</b>
590 </h5> 590 </h5>
591 </b> 591 </b>
592 </v-flex> 592 </v-flex>
593 <v-flex sm6 xs6> 593 <v-flex sm6 xs6>
594 <h5 class="my-1 left">{{ editedItem.city }}</h5> 594 <h5 class="my-1 left">{{ editedItem.city }}</h5>
595 </v-flex> 595 </v-flex>
596 </v-layout> 596 </v-layout>
597 </v-flex> 597 </v-flex>
598 <v-flex xs12 sm7> 598 <v-flex xs12 sm7>
599 <v-layout> 599 <v-layout>
600 <v-flex xs6 sm4> 600 <v-flex xs6 sm4>
601 <b> 601 <b>
602 <h5 class="right my-1"> 602 <h5 class="right my-1">
603 <b>State:</b> 603 <b>State:</b>
604 </h5> 604 </h5>
605 </b> 605 </b>
606 </v-flex> 606 </v-flex>
607 <v-flex sm8 xs6> 607 <v-flex sm8 xs6>
608 <h5 class="my-1">{{ editedItem.state }}</h5> 608 <h5 class="my-1">{{ editedItem.state }}</h5>
609 </v-flex> 609 </v-flex>
610 </v-layout> 610 </v-layout>
611 </v-flex> 611 </v-flex>
612 </v-layout> 612 </v-layout>
613 <v-layout wrap> 613 <v-layout wrap>
614 <v-flex xs12 sm5> 614 <v-flex xs12 sm5>
615 <v-layout> 615 <v-layout>
616 <v-flex xs6 sm6> 616 <v-flex xs6 sm6>
617 <b> 617 <b>
618 <h5 class="right my-1"> 618 <h5 class="right my-1">
619 <b>Pincode:</b> 619 <b>Pincode:</b>
620 </h5> 620 </h5>
621 </b> 621 </b>
622 </v-flex> 622 </v-flex>
623 <v-flex sm6 xs6> 623 <v-flex sm6 xs6>
624 <h5 class="my-1">{{ editedItem.pincode }}</h5> 624 <h5 class="my-1">{{ editedItem.pincode }}</h5>
625 </v-flex> 625 </v-flex>
626 </v-layout> 626 </v-layout>
627 </v-flex> 627 </v-flex>
628 <v-flex xs12 sm7> 628 <v-flex xs12 sm7>
629 <v-layout> 629 <v-layout>
630 <v-flex xs6 sm4> 630 <v-flex xs6 sm4>
631 <b> 631 <b>
632 <h5 class="right my-1"> 632 <h5 class="right my-1">
633 <b>Country:</b> 633 <b>Country:</b>
634 </h5> 634 </h5>
635 </b> 635 </b>
636 </v-flex> 636 </v-flex>
637 <v-flex sm7 xs6> 637 <v-flex sm7 xs6>
638 <h5 class="my-1">{{ editedItem.country }}</h5> 638 <h5 class="my-1">{{ editedItem.country }}</h5>
639 </v-flex> 639 </v-flex>
640 </v-layout> 640 </v-layout>
641 </v-flex> 641 </v-flex>
642 </v-layout> 642 </v-layout>
643 <v-layout wrap> 643 <v-layout wrap>
644 <v-flex xs12 sm5> 644 <v-flex xs12 sm5>
645 <v-layout> 645 <v-layout>
646 <v-flex sm6 xs6> 646 <v-flex sm6 xs6>
647 <b> 647 <b>
648 <h5 class="right my-1"> 648 <h5 class="right my-1">
649 <b>Mobile No:</b> 649 <b>Mobile No:</b>
650 </h5> 650 </h5>
651 </b> 651 </b>
652 </v-flex> 652 </v-flex>
653 <v-flex sm6 xs6> 653 <v-flex sm6 xs6>
654 <h5 class="my-1">{{ editedItem.mobile }}</h5> 654 <h5 class="my-1">{{ editedItem.mobile }}</h5>
655 </v-flex> 655 </v-flex>
656 </v-layout> 656 </v-layout>
657 </v-flex> 657 </v-flex>
658 <v-flex xs12 sm7> 658 <v-flex xs12 sm7>
659 <v-layout> 659 <v-layout>
660 <v-flex xs6 sm4> 660 <v-flex xs6 sm4>
661 <b> 661 <b>
662 <h5 class="right my-1"> 662 <h5 class="right my-1">
663 <b>FahterName:</b> 663 <b>FahterName:</b>
664 </h5> 664 </h5>
665 </b> 665 </b>
666 </v-flex> 666 </v-flex>
667 <v-flex sm8 xs6> 667 <v-flex sm8 xs6>
668 <h5 class="my-1">{{ editedItem.fatherName }}</h5> 668 <h5 class="my-1">{{ editedItem.fatherName }}</h5>
669 </v-flex> 669 </v-flex>
670 </v-layout> 670 </v-layout>
671 </v-flex> 671 </v-flex>
672 </v-layout> 672 </v-layout>
673 <v-layout wrap> 673 <v-layout wrap>
674 <v-flex xs12 sm5> 674 <v-flex xs12 sm5>
675 <v-layout> 675 <v-layout>
676 <v-flex xs6 sm6> 676 <v-flex xs6 sm6>
677 <b> 677 <b>
678 <h5 class="right my-1"> 678 <h5 class="right my-1">
679 <b>MotherName:</b> 679 <b>MotherName:</b>
680 </h5> 680 </h5>
681 </b> 681 </b>
682 </v-flex> 682 </v-flex>
683 <v-flex sm6 xs6> 683 <v-flex sm6 xs6>
684 <h5 class="my-1">{{ editedItem.motherName }}</h5> 684 <h5 class="my-1">{{ editedItem.motherName }}</h5>
685 </v-flex> 685 </v-flex>
686 </v-layout> 686 </v-layout>
687 </v-flex> 687 </v-flex>
688 <v-flex xs12 sm7> 688 <v-flex xs12 sm7>
689 <v-layout> 689 <v-layout>
690 <v-flex xs6 sm4> 690 <v-flex xs6 sm4>
691 <b> 691 <b>
692 <h5 class="right my-1"> 692 <h5 class="right my-1">
693 <b>FatherCellNo:</b> 693 <b>FatherCellNo:</b>
694 </h5> 694 </h5>
695 </b> 695 </b>
696 </v-flex> 696 </v-flex>
697 <v-flex sm6 xs6> 697 <v-flex sm6 xs6>
698 <h5 class="my-1">{{ editedItem.fatherCellNo }}</h5> 698 <h5 class="my-1">{{ editedItem.fatherCellNo }}</h5>
699 </v-flex> 699 </v-flex>
700 </v-layout> 700 </v-layout>
701 </v-flex> 701 </v-flex>
702 </v-layout> 702 </v-layout>
703 <v-layout wrap> 703 <v-layout wrap>
704 <v-flex xs12 sm5> 704 <v-flex xs12 sm5>
705 <v-layout> 705 <v-layout>
706 <v-flex xs6 sm6> 706 <v-flex xs6 sm6>
707 <b> 707 <b>
708 <h5 class="right my-1"> 708 <h5 class="right my-1">
709 <b>MotherCellNo:</b> 709 <b>MotherCellNo:</b>
710 </h5> 710 </h5>
711 </b> 711 </b>
712 </v-flex> 712 </v-flex>
713 <v-flex sm6 xs6> 713 <v-flex sm6 xs6>
714 <h5 class="my-1">{{ editedItem.motherCellNo }}</h5> 714 <h5 class="my-1">{{ editedItem.motherCellNo }}</h5>
715 </v-flex> 715 </v-flex>
716 </v-layout> 716 </v-layout>
717 </v-flex> 717 </v-flex>
718 <v-flex xs12 sm7> 718 <v-flex xs12 sm7>
719 <v-layout> 719 <v-layout>
720 <v-flex xs6 sm4> 720 <v-flex xs6 sm4>
721 <b> 721 <b>
722 <h5 class="my-1 right"> 722 <h5 class="my-1 right">
723 <b>AcademicYear:</b> 723 <b>AcademicYear:</b>
724 </h5> 724 </h5>
725 </b> 725 </b>
726 </v-flex> 726 </v-flex>
727 <v-flex sm5 xs8> 727 <v-flex sm5 xs8>
728 <h5 class="my-1">{{ editedItem.establishmentYear }}</h5> 728 <h5 class="my-1">{{ editedItem.establishmentYear }}</h5>
729 </v-flex> 729 </v-flex>
730 </v-layout> 730 </v-layout>
731 </v-flex> 731 </v-flex>
732 </v-layout> 732 </v-layout>
733 <v-layout wrap> 733 <v-layout wrap>
734 <v-flex xs12 sm5> 734 <v-flex xs12 sm5>
735 <v-layout> 735 <v-layout>
736 <v-flex xs6 sm6> 736 <v-flex xs6 sm6>
737 <b> 737 <b>
738 <h5 class="my-1 right"> 738 <h5 class="my-1 right">
739 <b>MedicalNotes:</b> 739 <b>MedicalNotes:</b>
740 </h5> 740 </h5>
741 </b> 741 </b>
742 </v-flex> 742 </v-flex>
743 <v-flex sm5 xs6> 743 <v-flex sm5 xs6>
744 <h5 class="my-1">{{ editedItem.medicalNotes }}</h5> 744 <h5 class="my-1">{{ editedItem.medicalNotes }}</h5>
745 </v-flex> 745 </v-flex>
746 </v-layout> 746 </v-layout>
747 </v-flex> 747 </v-flex>
748 <v-flex xs12 sm7 class="hidden-xs-only"> 748 <v-flex xs12 sm7 class="hidden-xs-only">
749 <v-layout wrap> 749 <v-layout wrap>
750 <v-flex sm4> 750 <v-flex sm4>
751 <b> 751 <b>
752 <h5 class="my-1 right"> 752 <h5 class="my-1 right">
753 <b>present Address:</b> 753 <b>present Address:</b>
754 </h5> 754 </h5>
755 </b> 755 </b>
756 </v-flex> 756 </v-flex>
757 <v-flex sm8> 757 <v-flex sm8>
758 <h5 class="my-1">{{ editedItem.presentAddress }}</h5> 758 <h5 class="my-1">{{ editedItem.presentAddress }}</h5>
759 </v-flex> 759 </v-flex>
760 </v-layout> 760 </v-layout>
761 </v-flex> 761 </v-flex>
762 <v-flex sm6 class="hidden-xs-only"> 762 <v-flex sm6 class="hidden-xs-only">
763 <v-layout wrap> 763 <v-layout wrap>
764 <v-flex sm5> 764 <v-flex sm5>
765 <b> 765 <b>
766 <h5 class="my-1 right"> 766 <h5 class="my-1 right">
767 <b>Permanent Address:</b> 767 <b>Permanent Address:</b>
768 </h5> 768 </h5>
769 </b> 769 </b>
770 </v-flex> 770 </v-flex>
771 <v-flex sm7> 771 <v-flex sm7>
772 <h5 class="my-1">{{ editedItem.permanentAddress }}</h5> 772 <h5 class="my-1">{{ editedItem.permanentAddress }}</h5>
773 </v-flex> 773 </v-flex>
774 </v-layout> 774 </v-layout>
775 </v-flex> 775 </v-flex>
776 </v-layout> 776 </v-layout>
777 <v-layout wrap class="hidden-sm-only hidden-md-only hidden-lg-only hidden-xl-only"> 777 <v-layout wrap class="hidden-sm-only hidden-md-only hidden-lg-only hidden-xl-only">
778 <v-flex xs12 sm5> 778 <v-flex xs12 sm5>
779 <v-layout wrap> 779 <v-layout wrap>
780 <v-flex xs12 sm6> 780 <v-flex xs12 sm6>
781 <b> 781 <b>
782 <h5 class="my-1"> 782 <h5 class="my-1">
783 <b>present Address:-</b> 783 <b>present Address:-</b>
784 </h5> 784 </h5>
785 </b> 785 </b>
786 </v-flex> 786 </v-flex>
787 <v-flex sm5 xs12> 787 <v-flex sm5 xs12>
788 <h5 class="my-1">{{ editedItem.presentAddress }}</h5> 788 <h5 class="my-1">{{ editedItem.presentAddress }}</h5>
789 </v-flex> 789 </v-flex>
790 </v-layout> 790 </v-layout>
791 </v-flex> 791 </v-flex>
792 <v-flex xs12 sm6> 792 <v-flex xs12 sm6>
793 <v-layout wrap> 793 <v-layout wrap>
794 <v-flex xs12 sm6> 794 <v-flex xs12 sm6>
795 <b> 795 <b>
796 <h5 class="my-1"> 796 <h5 class="my-1">
797 <b>Permanent Address:-</b> 797 <b>Permanent Address:-</b>
798 </h5> 798 </h5>
799 </b> 799 </b>
800 </v-flex> 800 </v-flex>
801 <v-flex sm6 xs12> 801 <v-flex sm6 xs12>
802 <h5 class="my-1">{{ editedItem.permanentAddress }}</h5> 802 <h5 class="my-1">{{ editedItem.permanentAddress }}</h5>
803 </v-flex> 803 </v-flex>
804 </v-layout> 804 </v-layout>
805 </v-flex> 805 </v-flex>
806 </v-layout> 806 </v-layout>
807 </v-container> 807 </v-container>
808 </v-card-text> 808 </v-card-text>
809 </v-card> 809 </v-card>
810 </v-dialog> 810 </v-dialog>
811 811
812 <!-- ****** STUDENTS TABLE ****** --> 812 <!-- ****** STUDENTS TABLE ****** -->
813 <v-toolbar color="transparent" flat> 813 <v-toolbar color="transparent" flat>
814 <v-btn 814 <v-btn
815 fab 815 fab
816 dark 816 dark
817 class="open-dialog-button hidden-xl-only hidden-md-only hidden-lg-only" 817 class="open-dialog-button hidden-xl-only hidden-md-only hidden-lg-only"
818 small 818 small
819 @click="addStudentDialog = true" 819 @click="addStudentDialog = true"
820 > 820 >
821 <v-icon dark>add</v-icon> 821 <v-icon dark>add</v-icon>
822 </v-btn> 822 </v-btn>
823 <v-btn 823 <v-btn
824 v-if="role != 'TEACHER' " 824 v-if="role != 'TEACHER' "
825 round 825 round
826 class="open-dialog-button hidden-sm-only hidden-xs-only" 826 class="open-dialog-button hidden-sm-only hidden-xs-only"
827 dark 827 dark
828 @click="addStudentDialog = true" 828 @click="addStudentDialog = true"
829 > 829 >
830 <v-icon class="white--text pr-1" size="20">add</v-icon>Add Student 830 <v-icon class="white--text pr-1" size="20">add</v-icon>Add Student
831 </v-btn> 831 </v-btn>
832 <v-card-actions class="hidden-xs-only hidden-sm-only"> 832 <v-card-actions class="hidden-xs-only hidden-sm-only">
833 <v-flex md13 lg12> 833 <v-flex md13 lg12>
834 <v-layout> 834 <v-layout>
835 <v-flex lg3 md4> 835 <v-flex lg3 md4>
836 <v-select 836 <v-select
837 :items="addclass" 837 :items="addclass"
838 label="Select Class" 838 label="Select Class"
839 v-model="selectStudents.select" 839 v-model="selectStudents.select"
840 item-text="classNum" 840 item-text="classNum"
841 item-value="_id" 841 item-value="_id"
842 name="Select Class" 842 name="Select Class"
843 :rules="classRules" 843 :rules="classRules"
844 @change="getSections(selectStudents.select)" 844 @change="getSections(selectStudents.select)"
845 required 845 required
846 class="ml-2" 846 class="ml-2"
847 ></v-select> 847 ></v-select>
848 </v-flex> 848 </v-flex>
849 <v-flex lg3 md4 class="ml-2"> 849 <v-flex lg3 md4 class="ml-2">
850 <v-layout> 850 <v-layout>
851 <v-select 851 <v-select
852 :items="addSection" 852 :items="addSection"
853 label="Select Section" 853 label="Select Section"
854 v-model="selectStudents.selectSection" 854 v-model="selectStudents.selectSection"
855 item-text="name" 855 item-text="name"
856 item-value="_id" 856 item-value="_id"
857 name="Select Section" 857 name="Select Section"
858 :rules="sectionRules" 858 :rules="sectionRules"
859 required 859 required
860 ></v-select> 860 ></v-select>
861 </v-layout> 861 </v-layout>
862 </v-flex> 862 </v-flex>
863 </v-layout> 863 </v-layout>
864 </v-flex> 864 </v-flex>
865 </v-card-actions> 865 </v-card-actions>
866 <v-spacer></v-spacer> 866 <v-spacer></v-spacer>
867 <v-btn 867 <v-btn
868 @click="findStudents()" 868 @click="findStudents()"
869 round 869 round
870 dark 870 dark
871 :loading="loading" 871 :loading="loading"
872 class="open-dialog-button hidden-xs-only hidden-sm-only" 872 class="open-dialog-button hidden-xs-only hidden-sm-only"
873 >Find</v-btn> 873 >Find</v-btn>
874 <v-card-title class="body-1" v-show="show"> 874 <v-card-title class="body-1" v-show="show">
875 <v-btn icon large flat @click="displaySearch"> 875 <v-btn icon large flat @click="displaySearch">
876 <v-avatar size="27"> 876 <v-avatar size="27">
877 <img src="/static/icon/search.png" alt="icon" /> 877 <img src="/static/icon/search.png" alt="icon" />
878 </v-avatar> 878 </v-avatar>
879 </v-btn> 879 </v-btn>
880 </v-card-title> 880 </v-card-title>
881 <v-flex xs8 sm7 lg2 md3 v-if="showSearch"> 881 <v-flex xs8 sm7 lg2 md3 v-if="showSearch">
882 <v-layout> 882 <v-layout>
883 <v-text-field 883 <v-text-field
884 autofocus 884 autofocus
885 v-model="search" 885 v-model="search"
886 label="Search" 886 label="Search"
887 prepend-inner-icon="search" 887 prepend-inner-icon="search"
888 color="primary" 888 color="primary"
889 ></v-text-field> 889 ></v-text-field>
890 <v-icon @click="closeSearch" color="error">close</v-icon> 890 <v-icon @click="closeSearch" color="error">close</v-icon>
891 </v-layout> 891 </v-layout>
892 </v-flex> 892 </v-flex>
893 </v-toolbar> 893 </v-toolbar>
894 <v-card flat class="elevation-0 transparent"> 894 <v-card flat class="elevation-0 transparent">
895 <v-flex class="hidden-xl-only hidden-lg-only hidden-md-only"> 895 <v-flex class="hidden-xl-only hidden-lg-only hidden-md-only">
896 <v-layout> 896 <v-layout>
897 <v-flex xs4> 897 <v-flex xs4>
898 <label class="right mt-4">Select Class:</label> 898 <label class="right mt-4">Select Class:</label>
899 </v-flex> 899 </v-flex>
900 <v-flex xs8> 900 <v-flex xs8>
901 <v-select 901 <v-select
902 :items="addclass" 902 :items="addclass"
903 label="Select Class" 903 label="Select Class"
904 v-model="selectStudents.select" 904 v-model="selectStudents.select"
905 item-text="classNum" 905 item-text="classNum"
906 item-value="_id" 906 item-value="_id"
907 name="Select Class" 907 name="Select Class"
908 :rules="classRules" 908 :rules="classRules"
909 @change="getSections(selectStudents.select)" 909 @change="getSections(selectStudents.select)"
910 class="px-2" 910 class="px-2"
911 ></v-select> 911 ></v-select>
912 </v-flex> 912 </v-flex>
913 </v-layout> 913 </v-layout>
914 <v-layout> 914 <v-layout>
915 <v-flex xs4> 915 <v-flex xs4>
916 <label class="right mt-4">Select Section:</label> 916 <label class="right mt-4">Select Section:</label>
917 </v-flex> 917 </v-flex>
918 <v-flex xs8> 918 <v-flex xs8>
919 <v-select 919 <v-select
920 :items="addSection" 920 :items="addSection"
921 label="Select Section" 921 label="Select Section"
922 v-model="selectStudents.selectSection" 922 v-model="selectStudents.selectSection"
923 item-text="name" 923 item-text="name"
924 item-value="_id" 924 item-value="_id"
925 name="Select Section" 925 name="Select Section"
926 :rules="sectionRules" 926 :rules="sectionRules"
927 class="px-2" 927 class="px-2"
928 required 928 required
929 ></v-select> 929 ></v-select>
930 </v-flex> 930 </v-flex>
931 </v-layout> 931 </v-layout>
932 <v-layout> 932 <v-layout>
933 <v-flex xs5 class="mx-auto mb-2"> 933 <v-flex xs5 class="mx-auto mb-2">
934 <v-btn 934 <v-btn
935 @click="findStudents()" 935 @click="findStudents()"
936 block 936 block
937 round 937 round
938 dark 938 dark
939 :loading="loading" 939 :loading="loading"
940 class="add-button" 940 class="add-button"
941 >Find</v-btn> 941 >Find</v-btn>
942 </v-flex> 942 </v-flex>
943 </v-layout> 943 </v-layout>
944 </v-flex> 944 </v-flex>
945 </v-card> 945 </v-card>
946 <v-data-table 946 <v-data-table
947 :headers="headers" 947 :headers="headers"
948 :items="studentsData" 948 :items="studentsData"
949 :pagination.sync="pagination" 949 :pagination.sync="pagination"
950 :search="search" 950 :search="search"
951 > 951 >
952 <template slot="items" slot-scope="props"> 952 <template slot="items" slot-scope="props">
953 <tr class="tr"> 953 <tr class="tr">
954 <td class="text-xs-center td td-row">{{ props.item.rollNo}}</td> 954 <td class="text-xs-center td td-row">{{ props.item.rollNo}}</td>
955 <td class="text-xs-center td td-row"> 955 <td class="text-xs-center td td-row">
956 <v-avatar size="40"> 956 <v-avatar size="40">
957 <img :src="props.item.profilePicUrl" v-if="props.item.profilePicUrl" /> 957 <img :src="props.item.profilePicUrl" v-if="props.item.profilePicUrl" />
958 <img src="/static/icon/user.png" v-else-if="!props.item.profilePicUrl" /> 958 <img src="/static/icon/user.png" v-else-if="!props.item.profilePicUrl" />
959 </v-avatar> 959 </v-avatar>
960 </td> 960 </td>
961 <td class="text-xs-center td td-row">{{ props.item.name}}</td> 961 <td class="text-xs-center td td-row">{{ props.item.name}}</td>
962 <td class="text-xs-center td td-row">{{ props.item.gender }}</td> 962 <td class="text-xs-center td td-row">{{ props.item.gender }}</td>
963 <td class="text-xs-center td td-row">{{ props.item.parentId.fatherName }}</td> 963 <td class="text-xs-center td td-row">{{ props.item.parentId.fatherName }}</td>
964 <td class="text-xs-center td td-row">{{ props.item.parentId.motherName }}</td> 964 <td class="text-xs-center td td-row">{{ props.item.parentId.motherName }}</td>
965 <td class="text-xs-center td td-row">{{ props.item.establishmentYear }}</td> 965 <td class="text-xs-center td td-row">{{ props.item.establishmentYear }}</td>
966 <!-- <td class="text-xs-center td td-row">{{ props.item.mobile}}</td> --> 966 <!-- <td class="text-xs-center td td-row">{{ props.item.mobile}}</td> -->
967 <td class="text-xs-center td td-row"> 967 <td class="text-xs-center td td-row">
968 <v-switch 968 <v-switch
969 class="pl-3" 969 class="pl-3"
970 :disabled="role === 'TEACHER'" 970 :disabled="role === 'TEACHER'"
971 v-model="props.item.status" 971 v-model="props.item.status"
972 @change="suspendStudentStatus(props.item.status,props.item._id)" 972 @change="suspendStudentStatus(props.item.status,props.item._id)"
973 ></v-switch> 973 ></v-switch>
974 </td> 974 </td>
975 <td class="text-xs-center td td-row"> 975 <td class="text-xs-center td td-row">
976 <span> 976 <span>
977 <v-tooltip top> 977 <v-tooltip top>
978 <img 978 <img
979 slot="activator" 979 slot="activator"
980 style="cursor:pointer; width:25px; height:25px; " 980 style="cursor:pointer; width:25px; height:25px; "
981 class="mr-3" 981 class="mr-3"
982 @click="profile(props.item)" 982 @click="profile(props.item)"
983 src="/static/icon/view.png" 983 src="/static/icon/view.png"
984 /> 984 />
985 <span>View</span> 985 <span>View</span>
986 </v-tooltip> 986 </v-tooltip>
987 <v-tooltip top v-if="role != 'TEACHER' "> 987 <v-tooltip top v-if="role != 'TEACHER' ">
988 <img 988 <img
989 slot="activator" 989 slot="activator"
990 style="cursor:pointer; width:20px; height:18px; " 990 style="cursor:pointer; width:20px; height:18px; "
991 class="mr-3" 991 class="mr-3"
992 @click="editItem(props.item)" 992 @click="editItem(props.item)"
993 src="/static/icon/edit.png" 993 src="/static/icon/edit.png"
994 /> 994 />
995 <span>Edit</span> 995 <span>Edit</span>
996 </v-tooltip> 996 </v-tooltip>
997 <v-tooltip top v-if="role != 'TEACHER' "> 997 <v-tooltip top v-if="role != 'TEACHER' ">
998 <img 998 <img
999 slot="activator" 999 slot="activator"
1000 style="cursor:pointer; width:20px; height:20px; " 1000 style="cursor:pointer; width:20px; height:20px; "
1001 class="mr-3" 1001 class="mr-3"
1002 @click="deleteItem(props.item)" 1002 @click="deleteItem(props.item)"
1003 src="/static/icon/delete.png" 1003 src="/static/icon/delete.png"
1004 /> 1004 />
1005 <span>Delete</span> 1005 <span>Delete</span>
1006 </v-tooltip> 1006 </v-tooltip>
1007 </span> 1007 </span>
1008 </td> 1008 </td>
1009 </tr> 1009 </tr>
1010 </template> 1010 </template>
1011 <v-alert 1011 <v-alert
1012 slot="no-results" 1012 slot="no-results"
1013 :value="true" 1013 :value="true"
1014 color="error" 1014 color="error"
1015 icon="warning" 1015 icon="warning"
1016 >Your search for "{{ search }}" found no results.</v-alert> 1016 >Your search for "{{ search }}" found no results.</v-alert>
1017 </v-data-table> 1017 </v-data-table>
1018 <!-- DIALOG -- ADD STUDENTS DETAILS --> 1018 <!-- DIALOG -- ADD STUDENTS DETAILS -->
1019 <v-dialog v-model="addStudentDialog" max-width="1280" v-if="addStudentDialog" persistent> 1019 <v-dialog v-model="addStudentDialog" max-width="1280" v-if="addStudentDialog" persistent>
1020 <v-card flat class="card-style pa-2" dark> 1020 <v-card flat class="card-style pa-2" dark>
1021 <v-layout> 1021 <v-layout>
1022 <v-flex xs12> 1022 <v-flex xs12>
1023 <label class="title text-xs-center">Add Student</label> 1023 <label class="title text-xs-center">Add Student</label>
1024 <v-icon 1024 <v-icon
1025 size="24" 1025 size="24"
1026 class="right" 1026 class="right"
1027 @click="$refs.parentForm.reset();$refs.parentFormLgScr.reset();$refs.form.reset();e2 = 1;addStudentDialog = false" 1027 @click="$refs.parentForm.reset();$refs.parentFormLgScr.reset();$refs.form.reset();e2 = 1;addStudentDialog = false"
1028 >cancel</v-icon> 1028 >cancel</v-icon>
1029 </v-flex> 1029 </v-flex>
1030 </v-layout> 1030 </v-layout>
1031 <v-container fluid> 1031 <v-container fluid>
1032 <v-layout align-center> 1032 <v-layout align-center>
1033 <v-flex xs12> 1033 <v-flex xs12>
1034 <v-stepper v-model="e2" flat class="card-style elevation-0" dark> 1034 <v-stepper v-model="e2" flat class="card-style elevation-0" dark>
1035 <v-stepper-header> 1035 <v-stepper-header>
1036 <v-stepper-step :complete="e2 > 1" step="1">Fill parent Details</v-stepper-step> 1036 <v-stepper-step :complete="e2 > 1" step="1">Fill parent Details</v-stepper-step>
1037 <v-divider></v-divider> 1037 <v-divider></v-divider>
1038 <v-stepper-step step="2">Fill Student Details</v-stepper-step> 1038 <v-stepper-step step="2">Fill Student Details</v-stepper-step>
1039 </v-stepper-header> 1039 </v-stepper-header>
1040 <v-stepper-items> 1040 <v-stepper-items>
1041 <v-stepper-content step="1"> 1041 <v-stepper-content step="1">
1042 <v-container fluid class> 1042 <v-container fluid class>
1043 <v-flex xs12 sm12 class="hidden-md-only hidden-lg-only hidden-xl-only"> 1043 <v-flex xs12 sm12 class="hidden-md-only hidden-lg-only hidden-xl-only">
1044 <v-form ref="parentForm" v-model="valid" lazy-validation> 1044 <v-form ref="parentForm" v-model="valid" lazy-validation>
1045 <v-layout wrap> 1045 <v-layout wrap>
1046 <v-flex xs12 sm6> 1046 <v-flex xs12 sm6>
1047 <v-layout wrap> 1047 <v-layout wrap>
1048 <v-flex xs12 class="pt-4 subheading"> 1048 <v-flex xs12 class="pt-4 subheading">
1049 <label>Father Cell No:</label> 1049 <label>Father Cell No:</label>
1050 </v-flex> 1050 </v-flex>
1051 <v-flex xs12> 1051 <v-flex xs12>
1052 <v-text-field 1052 <v-text-field
1053 v-model.trim="parentData.fatherCellNo" 1053 v-model.trim="parentData.fatherCellNo"
1054 placeholder="fill your father Cell Number" 1054 placeholder="fill your father Cell Number"
1055 type="number" 1055 type="number"
1056 :rules="fatheCellNoRules" 1056 :rules="fatheCellNoRules"
1057 counter="10" 1057 counter="10"
1058 v-on:keyup="getParentDetails()" 1058 v-on:keyup="getParentDetails()"
1059 required 1059 required
1060 ></v-text-field> 1060 ></v-text-field>
1061 </v-flex> 1061 </v-flex>
1062 </v-layout> 1062 </v-layout>
1063 </v-flex> 1063 </v-flex>
1064 <v-flex xs12 sm6> 1064 <v-flex xs12 sm6>
1065 <v-layout wrap> 1065 <v-layout wrap>
1066 <v-flex xs12 class="pt-4 subheading"> 1066 <v-flex xs12 class="pt-4 subheading">
1067 <label>Parent Email Id:</label> 1067 <label>Parent Email Id:</label>
1068 </v-flex> 1068 </v-flex>
1069 <v-flex xs12> 1069 <v-flex xs12>
1070 <v-text-field 1070 <v-text-field
1071 placeholder="fill Parent email" 1071 placeholder="fill Parent email"
1072 v-model="parentData.email" 1072 v-model="parentData.email"
1073 type="text" 1073 type="text"
1074 required 1074 required
1075 ></v-text-field> 1075 ></v-text-field>
1076 </v-flex> 1076 </v-flex>
1077 </v-layout> 1077 </v-layout>
1078 </v-flex> 1078 </v-flex>
1079 </v-layout> 1079 </v-layout>
1080 <v-layout wrap> 1080 <v-layout wrap>
1081 <v-flex xs12 sm6> 1081 <v-flex xs12 sm6>
1082 <v-layout wrap> 1082 <v-layout wrap>
1083 <v-flex xs12 class="pt-4 subheading"> 1083 <v-flex xs12 class="pt-4 subheading">
1084 <label>Father Name:</label> 1084 <label>Father Name:</label>
1085 </v-flex> 1085 </v-flex>
1086 <v-flex xs12> 1086 <v-flex xs12>
1087 <v-text-field 1087 <v-text-field
1088 v-model="parentData.fatherName" 1088 v-model="parentData.fatherName"
1089 placeholder="Fill your father Name" 1089 placeholder="Fill your father Name"
1090 required 1090 required
1091 ></v-text-field> 1091 ></v-text-field>
1092 </v-flex> 1092 </v-flex>
1093 </v-layout> 1093 </v-layout>
1094 </v-flex> 1094 </v-flex>
1095 <v-flex xs12 sm6> 1095 <v-flex xs12 sm6>
1096 <v-layout wrap> 1096 <v-layout wrap>
1097 <v-flex xs12 class="pt-4 subheading"> 1097 <v-flex xs12 class="pt-4 subheading">
1098 <label>Mother Name:</label> 1098 <label>Mother Name:</label>
1099 </v-flex> 1099 </v-flex>
1100 <v-flex xs12> 1100 <v-flex xs12>
1101 <v-text-field 1101 <v-text-field
1102 v-model="parentData.motherName" 1102 v-model="parentData.motherName"
1103 placeholder="fill your Mother Name" 1103 placeholder="fill your Mother Name"
1104 type="text" 1104 type="text"
1105 required 1105 required
1106 ></v-text-field> 1106 ></v-text-field>
1107 </v-flex> 1107 </v-flex>
1108 </v-layout> 1108 </v-layout>
1109 </v-flex> 1109 </v-flex>
1110 </v-layout> 1110 </v-layout>
1111 <v-layout wrap> 1111 <v-layout wrap>
1112 <v-flex xs12 sm6> 1112 <v-flex xs12 sm6>
1113 <v-layout wrap> 1113 <v-layout wrap>
1114 <v-flex xs12 class="pt-4 subheading"> 1114 <v-flex xs12 class="pt-4 subheading">
1115 <label>Mother Cell No:</label> 1115 <label>Mother Cell No:</label>
1116 </v-flex> 1116 </v-flex>
1117 <v-flex xs12> 1117 <v-flex xs12>
1118 <v-text-field 1118 <v-text-field
1119 v-model="parentData.motherCellNo" 1119 v-model="parentData.motherCellNo"
1120 placeholder="fill your Mother Cell Number" 1120 placeholder="fill your Mother Cell Number"
1121 type="number" 1121 type="number"
1122 required 1122 required
1123 ></v-text-field> 1123 ></v-text-field>
1124 </v-flex> 1124 </v-flex>
1125 </v-layout> 1125 </v-layout>
1126 </v-flex> 1126 </v-flex>
1127 <v-flex xs12 sm6> 1127 <v-flex xs12 sm6>
1128 <v-layout wrap> 1128 <v-layout wrap>
1129 <v-flex xs12 class="pt-4 subheading"> 1129 <v-flex xs12 class="pt-4 subheading">
1130 <label>Father Profession:</label> 1130 <label>Father Profession:</label>
1131 </v-flex> 1131 </v-flex>
1132 <v-flex xs12> 1132 <v-flex xs12>
1133 <v-text-field 1133 <v-text-field
1134 v-model="parentData.fatherProfession" 1134 v-model="parentData.fatherProfession"
1135 placeholder="fill your father profession" 1135 placeholder="fill your father profession"
1136 ></v-text-field> 1136 ></v-text-field>
1137 </v-flex> 1137 </v-flex>
1138 </v-layout> 1138 </v-layout>
1139 </v-flex> 1139 </v-flex>
1140 </v-layout> 1140 </v-layout>
1141 <v-layout wrap> 1141 <v-layout wrap>
1142 <v-flex xs12 sm6> 1142 <v-flex xs12 sm6>
1143 <v-layout wrap> 1143 <v-layout wrap>
1144 <v-flex xs12 class="pt-4 subheading"> 1144 <v-flex xs12 class="pt-4 subheading">
1145 <label>Mother Profession:</label> 1145 <label>Mother Profession:</label>
1146 </v-flex> 1146 </v-flex>
1147 <v-flex xs12> 1147 <v-flex xs12>
1148 <v-text-field 1148 <v-text-field
1149 v-model="parentData.motherProfession" 1149 v-model="parentData.motherProfession"
1150 placeholder="fill your mother profession" 1150 placeholder="fill your mother profession"
1151 ></v-text-field> 1151 ></v-text-field>
1152 </v-flex> 1152 </v-flex>
1153 </v-layout> 1153 </v-layout>
1154 </v-flex> 1154 </v-flex>
1155 <v-flex xs12 sm6> 1155 <v-flex xs12 sm6>
1156 <v-layout wrap> 1156 <v-layout wrap>
1157 <v-flex xs12 class="pt-4 subheading"> 1157 <v-flex xs12 class="pt-4 subheading">
1158 <label>Password:</label> 1158 <label>Password:</label>
1159 </v-flex> 1159 </v-flex>
1160 <v-flex xs12> 1160 <v-flex xs12>
1161 <v-text-field 1161 <v-text-field
1162 v-model="parentData.password" 1162 v-model="parentData.password"
1163 placeholder="Enter Your Password" 1163 placeholder="Enter Your Password"
1164 ></v-text-field> 1164 ></v-text-field>
1165 </v-flex> 1165 </v-flex>
1166 </v-layout> 1166 </v-layout>
1167 </v-flex> 1167 </v-flex>
1168 </v-layout> 1168 </v-layout>
1169 <v-flex sm12 class="hidden-xs-only"> 1169 <v-flex sm12 class="hidden-xs-only">
1170 <v-card-actions> 1170 <v-card-actions>
1171 <v-spacer></v-spacer> 1171 <v-spacer></v-spacer>
1172 <v-btn 1172 <v-btn
1173 @click="submitParentDetails" 1173 @click="submitParentDetails"
1174 round 1174 round
1175 dark 1175 dark
1176 :loading="loading" 1176 :loading="loading"
1177 v-show="showParent" 1177 v-show="showParent"
1178 class="add-button" 1178 class="add-button"
1179 >Add</v-btn> 1179 >Add</v-btn>
1180 <v-btn 1180 <v-btn
1181 v-show="showNext" 1181 v-show="showNext"
1182 @click="e2 = 2" 1182 @click="e2 = 2"
1183 round 1183 round
1184 dark 1184 dark
1185 class="add-button" 1185 class="add-button"
1186 >Next</v-btn> 1186 >Next</v-btn>
1187 </v-card-actions> 1187 </v-card-actions>
1188 </v-flex> 1188 </v-flex>
1189 <v-flex 1189 <v-flex
1190 xs6 1190 xs6
1191 class="hidden-md-only hidden-sm-only hidden-lg-only hidden-xl-only mx-auto mt-2" 1191 class="hidden-md-only hidden-sm-only hidden-lg-only hidden-xl-only mx-auto mt-2"
1192 > 1192 >
1193 <v-btn 1193 <v-btn
1194 @click="submitParentDetails" 1194 @click="submitParentDetails"
1195 round 1195 round
1196 dark 1196 dark
1197 :loading="loading" 1197 :loading="loading"
1198 v-show="showParent" 1198 v-show="showParent"
1199 class="add-button" 1199 class="add-button"
1200 >Add</v-btn> 1200 >Add</v-btn>
1201 <v-btn 1201 <v-btn
1202 v-show="showNext" 1202 v-show="showNext"
1203 @click="e2 = 2" 1203 @click="e2 = 2"
1204 round 1204 round
1205 dark 1205 dark
1206 class="add-button" 1206 class="add-button"
1207 >Next</v-btn> 1207 >Next</v-btn>
1208 </v-flex> 1208 </v-flex>
1209 </v-form> 1209 </v-form>
1210 </v-flex> 1210 </v-flex>
1211 <v-flex xs12 sm12 class="hidden-xs-only hidden-sm-only"> 1211 <v-flex xs12 sm12 class="hidden-xs-only hidden-sm-only">
1212 <v-form ref="parentFormLgScr" v-model="valid" lazy-validation> 1212 <v-form ref="parentFormLgScr" v-model="valid" lazy-validation>
1213 <v-layout wrap> 1213 <v-layout wrap>
1214 <v-flex xs12 sm6> 1214 <v-flex xs12 sm6>
1215 <v-layout> 1215 <v-layout>
1216 <v-flex xs4 class="pt-4 subheading"> 1216 <v-flex xs4 class="pt-4 subheading">
1217 <label class="right">Father Cell No:</label> 1217 <label class="right">Father Cell No:</label>
1218 </v-flex> 1218 </v-flex>
1219 <v-flex xs8 class="ml-3"> 1219 <v-flex xs8 class="ml-3">
1220 <v-text-field 1220 <v-text-field
1221 v-model.trim="parentData.fatherCellNo" 1221 v-model.trim="parentData.fatherCellNo"
1222 placeholder="fill your father Cell Number" 1222 placeholder="fill your father Cell Number"
1223 type="number" 1223 type="number"
1224 :rules="fatheCellNoRules" 1224 :rules="fatheCellNoRules"
1225 counter="10" 1225 counter="10"
1226 required 1226 required
1227 v-on:keyup="getParentDetails()" 1227 v-on:keyup="getParentDetails()"
1228 ></v-text-field> 1228 ></v-text-field>
1229 </v-flex> 1229 </v-flex>
1230 </v-layout> 1230 </v-layout>
1231 </v-flex> 1231 </v-flex>
1232 <v-flex xs12 sm6> 1232 <v-flex xs12 sm6>
1233 <v-layout> 1233 <v-layout>
1234 <v-flex xs4 class="pt-4 subheading"> 1234 <v-flex xs4 class="pt-4 subheading">
1235 <label class="right">Parent Email Id:</label> 1235 <label class="right">Parent Email Id:</label>
1236 </v-flex> 1236 </v-flex>
1237 <v-flex xs8 class="ml-3"> 1237 <v-flex xs8 class="ml-3">
1238 <v-text-field 1238 <v-text-field
1239 placeholder="fill Parent email" 1239 placeholder="fill Parent email"
1240 v-model="parentData.email" 1240 v-model="parentData.email"
1241 type="text" 1241 type="text"
1242 required 1242 required
1243 ></v-text-field> 1243 ></v-text-field>
1244 </v-flex> 1244 </v-flex>
1245 </v-layout> 1245 </v-layout>
1246 </v-flex> 1246 </v-flex>
1247 </v-layout> 1247 </v-layout>
1248 <v-layout wrap> 1248 <v-layout wrap>
1249 <v-flex xs12 sm6> 1249 <v-flex xs12 sm6>
1250 <v-layout> 1250 <v-layout>
1251 <v-flex xs4 class="pt-4 subheading"> 1251 <v-flex xs4 class="pt-4 subheading">
1252 <label class="right">Father Name:</label> 1252 <label class="right">Father Name:</label>
1253 </v-flex> 1253 </v-flex>
1254 <v-flex xs8 class="ml-3"> 1254 <v-flex xs8 class="ml-3">
1255 <v-text-field 1255 <v-text-field
1256 v-model="parentData.fatherName" 1256 v-model="parentData.fatherName"
1257 placeholder="Fill your father Name" 1257 placeholder="Fill your father Name"
1258 required 1258 required
1259 ></v-text-field> 1259 ></v-text-field>
1260 </v-flex> 1260 </v-flex>
1261 </v-layout> 1261 </v-layout>
1262 </v-flex> 1262 </v-flex>
1263 <v-flex xs12 sm6> 1263 <v-flex xs12 sm6>
1264 <v-layout> 1264 <v-layout>
1265 <v-flex xs4 class="pt-4 subheading"> 1265 <v-flex xs4 class="pt-4 subheading">
1266 <label class="right">Mother Name:</label> 1266 <label class="right">Mother Name:</label>
1267 </v-flex> 1267 </v-flex>
1268 <v-flex xs8 class="ml-3"> 1268 <v-flex xs8 class="ml-3">
1269 <v-text-field 1269 <v-text-field
1270 v-model="parentData.motherName" 1270 v-model="parentData.motherName"
1271 placeholder="fill your Mother Name" 1271 placeholder="fill your Mother Name"
1272 type="text" 1272 type="text"
1273 required 1273 required
1274 ></v-text-field> 1274 ></v-text-field>
1275 </v-flex> 1275 </v-flex>
1276 </v-layout> 1276 </v-layout>
1277 </v-flex> 1277 </v-flex>
1278 </v-layout> 1278 </v-layout>
1279 <v-layout wrap> 1279 <v-layout wrap>
1280 <v-flex xs12 sm6> 1280 <v-flex xs12 sm6>
1281 <v-layout> 1281 <v-layout>
1282 <v-flex xs4 class="pt-4 subheading"> 1282 <v-flex xs4 class="pt-4 subheading">
1283 <label class="right">Mother Cell No:</label> 1283 <label class="right">Mother Cell No:</label>
1284 </v-flex> 1284 </v-flex>
1285 <v-flex xs8 class="ml-3"> 1285 <v-flex xs8 class="ml-3">
1286 <v-text-field 1286 <v-text-field
1287 v-model="parentData.motherCellNo" 1287 v-model="parentData.motherCellNo"
1288 placeholder="fill your Mother Cell Number" 1288 placeholder="fill your Mother Cell Number"
1289 type="number" 1289 type="number"
1290 required 1290 required
1291 ></v-text-field> 1291 ></v-text-field>
1292 </v-flex> 1292 </v-flex>
1293 </v-layout> 1293 </v-layout>
1294 </v-flex> 1294 </v-flex>
1295 <v-flex xs12 sm6> 1295 <v-flex xs12 sm6>
1296 <v-layout> 1296 <v-layout>
1297 <v-flex xs4 class="pt-4 subheading"> 1297 <v-flex xs4 class="pt-4 subheading">
1298 <label class="right">Father Profession:</label> 1298 <label class="right">Father Profession:</label>
1299 </v-flex> 1299 </v-flex>
1300 <v-flex xs8 class="ml-3"> 1300 <v-flex xs8 class="ml-3">
1301 <v-text-field 1301 <v-text-field
1302 v-model="parentData.fatherProfession" 1302 v-model="parentData.fatherProfession"
1303 placeholder="fill your father profession" 1303 placeholder="fill your father profession"
1304 ></v-text-field> 1304 ></v-text-field>
1305 </v-flex> 1305 </v-flex>
1306 </v-layout> 1306 </v-layout>
1307 </v-flex> 1307 </v-flex>
1308 </v-layout> 1308 </v-layout>
1309 <v-layout wrap> 1309 <v-layout wrap>
1310 <v-flex xs12 sm6> 1310 <v-flex xs12 sm6>
1311 <v-layout> 1311 <v-layout>
1312 <v-flex xs4 class="pt-4 subheading"> 1312 <v-flex xs4 class="pt-4 subheading">
1313 <label class="right">Mother Profession:</label> 1313 <label class="right">Mother Profession:</label>
1314 </v-flex> 1314 </v-flex>
1315 <v-flex xs8 class="ml-3"> 1315 <v-flex xs8 class="ml-3">
1316 <v-text-field 1316 <v-text-field
1317 v-model="parentData.motherProfession" 1317 v-model="parentData.motherProfession"
1318 placeholder="fill your mother profession" 1318 placeholder="fill your mother profession"
1319 ></v-text-field> 1319 ></v-text-field>
1320 </v-flex> 1320 </v-flex>
1321 </v-layout> 1321 </v-layout>
1322 </v-flex> 1322 </v-flex>
1323 <v-flex xs12 sm6> 1323 <v-flex xs12 sm6>
1324 <v-layout> 1324 <v-layout>
1325 <v-flex xs4 class="pt-4 subheading"> 1325 <v-flex xs4 class="pt-4 subheading">
1326 <label class="right">Password:</label> 1326 <label class="right">Password:</label>
1327 </v-flex> 1327 </v-flex>
1328 <v-flex xs8 class="ml-3"> 1328 <v-flex xs8 class="ml-3">
1329 <v-text-field 1329 <v-text-field
1330 :append-icon="e1 ? 'visibility_off' : 'visibility'" 1330 :append-icon="e1 ? 'visibility_off' : 'visibility'"
1331 :append-icon-cb="() => (e1 = !e1)" 1331 :append-icon-cb="() => (e1 = !e1)"
1332 :type="e1 ? 'password' : 'text'" 1332 :type="e1 ? 'password' : 'text'"
1333 :rules="password" 1333 :rules="password"
1334 v-model="parentData.password" 1334 v-model="parentData.password"
1335 placeholder="Enter Your Password" 1335 placeholder="Enter Your Password"
1336 :disabled="isFatherCellExists" 1336 :disabled="isFatherCellExists"
1337 required 1337 required
1338 ></v-text-field> 1338 ></v-text-field>
1339 </v-flex> 1339 </v-flex>
1340 </v-layout> 1340 </v-layout>
1341 </v-flex> 1341 </v-flex>
1342 </v-layout> 1342 </v-layout>
1343 <v-flex sm12 class="hidden-xs-only"> 1343 <v-flex sm12 class="hidden-xs-only">
1344 <v-card-actions> 1344 <v-card-actions>
1345 <v-spacer></v-spacer> 1345 <v-spacer></v-spacer>
1346 <v-btn 1346 <v-btn
1347 @click="submitParentDetails" 1347 @click="submitParentDetails"
1348 round 1348 round
1349 dark 1349 dark
1350 :loading="loading" 1350 :loading="loading"
1351 v-show="showParent" 1351 v-show="showParent"
1352 class="add-button" 1352 class="add-button"
1353 >Add</v-btn> 1353 >Add</v-btn>
1354 <v-btn 1354 <v-btn
1355 v-show="showNext" 1355 v-show="showNext"
1356 @click="e2 = 2" 1356 @click="e2 = 2"
1357 round 1357 round
1358 dark 1358 dark
1359 class="add-button" 1359 class="add-button"
1360 >Next</v-btn> 1360 >Next</v-btn>
1361 </v-card-actions> 1361 </v-card-actions>
1362 </v-flex> 1362 </v-flex>
1363 <v-flex 1363 <v-flex
1364 xs6 1364 xs6
1365 class="hidden-md-only hidden-sm-only hidden-lg-only hidden-xl-only mx-auto mt-2" 1365 class="hidden-md-only hidden-sm-only hidden-lg-only hidden-xl-only mx-auto mt-2"
1366 > 1366 >
1367 <v-btn 1367 <v-btn
1368 @click="submitParentDetails" 1368 @click="submitParentDetails"
1369 round 1369 round
1370 dark 1370 dark
1371 :loading="loading" 1371 :loading="loading"
1372 v-show="showParent" 1372 v-show="showParent"
1373 class="add-button" 1373 class="add-button"
1374 >Add</v-btn> 1374 >Add</v-btn>
1375 <v-btn 1375 <v-btn
1376 v-show="showNext" 1376 v-show="showNext"
1377 @click="e2 = 2" 1377 @click="e2 = 2"
1378 round 1378 round
1379 dark 1379 dark
1380 class="add-button" 1380 class="add-button"
1381 >Next</v-btn> 1381 >Next</v-btn>
1382 </v-flex> 1382 </v-flex>
1383 </v-form> 1383 </v-form>
1384 </v-flex> 1384 </v-flex>
1385 </v-container> 1385 </v-container>
1386 </v-stepper-content> 1386 </v-stepper-content>
1387 <v-stepper-content step="2"> 1387 <v-stepper-content step="2">
1388 <v-flex xs12 sm12> 1388 <v-flex xs12 sm12>
1389 <v-form ref="form" v-model="valid" lazy-validation> 1389 <v-form ref="form" v-model="valid" lazy-validation>
1390 <v-layout> 1390 <v-layout>
1391 <v-flex 1391 <v-flex
1392 xs12 1392 xs12
1393 class="text-xs-center text-sm-center text-md-center text-lg-center" 1393 class="text-xs-center text-sm-center text-md-center text-lg-center"
1394 > 1394 >
1395 <v-avatar size="100px"> 1395 <v-avatar size="100px">
1396 <img src="/static/icon/user.png" v-if="!imageUrl" /> 1396 <img src="/static/icon/user.png" v-if="!imageUrl" />
1397 </v-avatar> 1397 </v-avatar>
1398 <input 1398 <input
1399 type="file" 1399 type="file"
1400 style="display: none" 1400 style="display: none"
1401 ref="image" 1401 ref="image"
1402 accept="image/*" 1402 accept="image/*"
1403 @change="onFilePicked" 1403 @change="onFilePicked"
1404 /> 1404 />
1405 <img 1405 <img
1406 :src="imageData.imageUrl" 1406 :src="imageData.imageUrl"
1407 height="150" 1407 height="150"
1408 v-if="imageUrl" 1408 v-if="imageUrl"
1409 style="border-radius:50%; width:200px" 1409 style="border-radius:50%; width:200px"
1410 /> 1410 />
1411 </v-flex> 1411 </v-flex>
1412 </v-layout> 1412 </v-layout>
1413 <v-layout wrap> 1413 <v-layout wrap>
1414 <v-flex xs12 sm6> 1414 <v-flex xs12 sm6>
1415 <v-layout> 1415 <v-layout>
1416 <v-flex x4 sm4 class="pt-4 subheading"> 1416 <v-flex x4 sm4 class="pt-4 subheading">
1417 <label class="right hidden-xs-only hidden-sm-only">Select Class:</label> 1417 <label class="right hidden-xs-only hidden-sm-only">Select Class:</label>
1418 <label 1418 <label
1419 class="right hidden-lg-only hidden-md-only hidden-xl-only" 1419 class="right hidden-lg-only hidden-md-only hidden-xl-only"
1420 >Class:</label> 1420 >Class:</label>
1421 </v-flex> 1421 </v-flex>
1422 <v-flex xs8 sm8 class="ml-3"> 1422 <v-flex xs8 sm8 class="ml-3">
1423 <v-select 1423 <v-select
1424 :items="addclass" 1424 :items="addclass"
1425 label="Select Class" 1425 label="Select Class"
1426 v-model="addStudents.select" 1426 v-model="addStudents.select"
1427 item-text="classNum" 1427 item-text="classNum"
1428 item-value="_id" 1428 item-value="_id"
1429 name="Select Class" 1429 name="Select Class"
1430 :rules="classRules" 1430 :rules="classRules"
1431 @change="getSection(addStudents.select)" 1431 @change="getSection(addStudents.select)"
1432 required 1432 required
1433 ></v-select> 1433 ></v-select>
1434 </v-flex> 1434 </v-flex>
1435 </v-layout> 1435 </v-layout>
1436 </v-flex> 1436 </v-flex>
1437 <v-flex xs12 sm6> 1437 <v-flex xs12 sm6>
1438 <v-layout> 1438 <v-layout>
1439 <v-flex xs4 class="pt-4 subheading"> 1439 <v-flex xs4 class="pt-4 subheading">
1440 <label class="right hidden-xs-only hidden-sm-only">Select Section:</label> 1440 <label class="right hidden-xs-only hidden-sm-only">Select Section:</label>
1441 <label 1441 <label
1442 class="right hidden-lg-only hidden-md-only hidden-xl-only" 1442 class="right hidden-lg-only hidden-md-only hidden-xl-only"
1443 >Section:</label> 1443 >Section:</label>
1444 </v-flex> 1444 </v-flex>
1445 <v-flex xs8 class="ml-3"> 1445 <v-flex xs8 class="ml-3">
1446 <v-select 1446 <v-select
1447 :items="addSection" 1447 :items="addSection"
1448 label="Select Section" 1448 label="Select Section"
1449 v-model="addStudents.selectSection" 1449 v-model="addStudents.selectSection"
1450 item-text="name" 1450 item-text="name"
1451 item-value="_id" 1451 item-value="_id"
1452 name="Select Section" 1452 name="Select Section"
1453 :rules="sectionRules" 1453 :rules="sectionRules"
1454 required 1454 required
1455 ></v-select> 1455 ></v-select>
1456 </v-flex> 1456 </v-flex>
1457 </v-layout> 1457 </v-layout>
1458 </v-flex> 1458 </v-flex>
1459 </v-layout> 1459 </v-layout>
1460 <v-layout wrap> 1460 <v-layout wrap>
1461 <v-flex xs12 sm6> 1461 <v-flex xs12 sm6>
1462 <v-layout> 1462 <v-layout>
1463 <v-flex xs4 sm4 class="pt-4 subheading"> 1463 <v-flex xs4 sm4 class="pt-4 subheading">
1464 <label class="right hidden-xs-only hidden-sm-only">Full Name:</label> 1464 <label class="right hidden-xs-only hidden-sm-only">Full Name:</label>
1465 <label 1465 <label
1466 class="right hidden-lg-only hidden-md-only hidden-xl-only" 1466 class="right hidden-lg-only hidden-md-only hidden-xl-only"
1467 >Name:</label> 1467 >Name:</label>
1468 </v-flex> 1468 </v-flex>
1469 <v-flex xs8 sm8 class="ml-3"> 1469 <v-flex xs8 sm8 class="ml-3">
1470 <v-text-field 1470 <v-text-field
1471 v-model="addStudents.name" 1471 v-model="addStudents.name"
1472 placeholder="fill your full Name" 1472 placeholder="fill your full Name"
1473 name="name" 1473 name="name"
1474 type="text" 1474 type="text"
1475 :rules="nameRules" 1475 :rules="nameRules"
1476 required 1476 required
1477 ></v-text-field> 1477 ></v-text-field>
1478 </v-flex> 1478 </v-flex>
1479 </v-layout> 1479 </v-layout>
1480 </v-flex> 1480 </v-flex>
1481 <v-flex xs12 sm6> 1481 <v-flex xs12 sm6>
1482 <v-layout> 1482 <v-layout>
1483 <v-flex xs4 sm4 class="pt-4 subheading"> 1483 <v-flex xs4 sm4 class="pt-4 subheading">
1484 <label class="right">Email:</label> 1484 <label class="right">Email:</label>
1485 </v-flex> 1485 </v-flex>
1486 <v-flex xs8 sm8 class="ml-3"> 1486 <v-flex xs8 sm8 class="ml-3">
1487 <v-text-field 1487 <v-text-field
1488 placeholder="fill your email" 1488 placeholder="fill your email"
1489 v-model="addStudents.email" 1489 v-model="addStudents.email"
1490 type="text" 1490 type="text"
1491 name="email" 1491 name="email"
1492 required 1492 required
1493 ></v-text-field> 1493 ></v-text-field>
1494 </v-flex> 1494 </v-flex>
1495 </v-layout> 1495 </v-layout>
1496 </v-flex> 1496 </v-flex>
1497 </v-layout> 1497 </v-layout>
1498 <v-layout wrap> 1498 <v-layout wrap>
1499 <v-flex xs12 sm6> 1499 <v-flex xs12 sm6>
1500 <v-layout> 1500 <v-layout>
1501 <v-flex xs4 sm4 class="pt-4 subheading"> 1501 <v-flex xs4 sm4 class="pt-4 subheading">
1502 <label class="right hidden-sm-only hidden-xs-only">Date of Birth:</label> 1502 <label class="right hidden-sm-only hidden-xs-only">Date of Birth:</label>
1503 <label 1503 <label
1504 class="right hidden-lg-only hidden-xl-only hidden-md-only" 1504 class="right hidden-lg-only hidden-xl-only hidden-md-only"
1505 >D.O.B:</label> 1505 >D.O.B:</label>
1506 </v-flex> 1506 </v-flex>
1507 <v-flex xs8 sm8 class="ml-3"> 1507 <v-flex xs8 sm8 class="ml-3">
1508 <v-menu 1508 <v-menu
1509 ref="menu" 1509 ref="menu"
1510 :close-on-content-click="false" 1510 :close-on-content-click="false"
1511 v-model="menu" 1511 v-model="menu"
1512 :nudge-right="40" 1512 :nudge-right="40"
1513 lazy 1513 lazy
1514 transition="scale-transition" 1514 transition="scale-transition"
1515 offset-y 1515 offset-y
1516 full-width 1516 full-width
1517 min-width="290px" 1517 min-width="290px"
1518 > 1518 >
1519 <v-text-field 1519 <v-text-field
1520 slot="activator" 1520 slot="activator"
1521 :rules="dateRules" 1521 :rules="dateRules"
1522 v-model="addStudents.date" 1522 v-model="addStudents.date"
1523 placeholder="Select date" 1523 placeholder="Select date"
1524 ></v-text-field> 1524 ></v-text-field>
1525 <v-date-picker 1525 <v-date-picker
1526 ref="picker" 1526 ref="picker"
1527 v-model="addStudents.date" 1527 v-model="addStudents.date"
1528 :max="new Date().toISOString().substr(0, 10)" 1528 :max="new Date().toISOString().substr(0, 10)"
1529 min="1950-01-01" 1529 min="1950-01-01"
1530 @input="menu = false" 1530 @input="menu = false"
1531 ></v-date-picker> 1531 ></v-date-picker>
1532 </v-menu> 1532 </v-menu>
1533 </v-flex> 1533 </v-flex>
1534 </v-layout> 1534 </v-layout>
1535 </v-flex> 1535 </v-flex>
1536 <v-flex xs12 sm6> 1536 <v-flex xs12 sm6>
1537 <v-layout> 1537 <v-layout>
1538 <v-flex xs4 class="pt-4 subheading"> 1538 <v-flex xs4 class="pt-4 subheading">
1539 <label class="right">City:</label> 1539 <label class="right">City:</label>
1540 </v-flex> 1540 </v-flex>
1541 <v-flex xs8 class="ml-3"> 1541 <v-flex xs8 class="ml-3">
1542 <v-text-field 1542 <v-text-field
1543 v-model="addStudents.city" 1543 v-model="addStudents.city"
1544 placeholder="fill your City Name" 1544 placeholder="fill your City Name"
1545 name="City" 1545 name="City"
1546 type="text" 1546 type="text"
1547 :rules="cityRules" 1547 :rules="cityRules"
1548 required 1548 required
1549 ></v-text-field> 1549 ></v-text-field>
1550 </v-flex> 1550 </v-flex>
1551 </v-layout> 1551 </v-layout>
1552 </v-flex> 1552 </v-flex>
1553 </v-layout> 1553 </v-layout>
1554 <v-layout wrap> 1554 <v-layout wrap>
1555 <v-flex xs12 sm6> 1555 <v-flex xs12 sm6>
1556 <v-layout> 1556 <v-layout>
1557 <v-flex xs4 class="pt-4 subheading"> 1557 <v-flex xs4 class="pt-4 subheading">
1558 <label class="right">State:</label> 1558 <label class="right">State:</label>
1559 </v-flex> 1559 </v-flex>
1560 <v-flex xs8 class="ml-3"> 1560 <v-flex xs8 class="ml-3">
1561 <v-text-field 1561 <v-text-field
1562 v-model="addStudents.state" 1562 v-model="addStudents.state"
1563 placeholder="fill your State Name" 1563 placeholder="fill your State Name"
1564 name="state" 1564 name="state"
1565 type="text" 1565 type="text"
1566 :rules="stateRules" 1566 :rules="stateRules"
1567 required 1567 required
1568 ></v-text-field> 1568 ></v-text-field>
1569 </v-flex> 1569 </v-flex>
1570 </v-layout> 1570 </v-layout>
1571 </v-flex> 1571 </v-flex>
1572 <v-flex xs12 sm6> 1572 <v-flex xs12 sm6>
1573 <v-layout> 1573 <v-layout>
1574 <v-flex xs4 class="pt-4 subheading"> 1574 <v-flex xs4 class="pt-4 subheading">
1575 <label class="right">Pincode:</label> 1575 <label class="right">Pincode:</label>
1576 </v-flex> 1576 </v-flex>
1577 <v-flex xs8 class="ml-3"> 1577 <v-flex xs8 class="ml-3">
1578 <v-text-field 1578 <v-text-field
1579 v-model="addStudents.pincode" 1579 v-model="addStudents.pincode"
1580 placeholder="fill your pincode" 1580 placeholder="fill your pincode"
1581 name="pincode" 1581 name="pincode"
1582 type="number" 1582 type="number"
1583 :rules="pincode" 1583 :rules="pincode"
1584 required 1584 required
1585 ></v-text-field> 1585 ></v-text-field>
1586 </v-flex> 1586 </v-flex>
1587 </v-layout> 1587 </v-layout>
1588 </v-flex> 1588 </v-flex>
1589 </v-layout> 1589 </v-layout>
1590 <v-layout wrap> 1590 <v-layout wrap>
1591 <v-flex xs12 sm6> 1591 <v-flex xs12 sm6>
1592 <v-layout> 1592 <v-layout>
1593 <v-flex xs4 class="pt-4 subheading"> 1593 <v-flex xs4 class="pt-4 subheading">
1594 <label class="right hidden-xs-only hidden-sm-only">Mobile No:</label> 1594 <label class="right hidden-xs-only hidden-sm-only">Mobile No:</label>
1595 <label 1595 <label
1596 class="right hidden-lg-only hidden-md-only hidden-xl-only" 1596 class="right hidden-lg-only hidden-md-only hidden-xl-only"
1597 >Mobile:</label> 1597 >Mobile:</label>
1598 </v-flex> 1598 </v-flex>
1599 <v-flex xs8 class="ml-3"> 1599 <v-flex xs8 class="ml-3">
1600 <v-text-field 1600 <v-text-field
1601 v-model="addStudents.mobile" 1601 v-model="addStudents.mobile"
1602 placeholder="fill your MobileNo" 1602 placeholder="fill your MobileNo"
1603 name="mobileNo" 1603 name="mobileNo"
1604 type="number" 1604 type="number"
1605 ></v-text-field> 1605 ></v-text-field>
1606 </v-flex> 1606 </v-flex>
1607 </v-layout> 1607 </v-layout>
1608 </v-flex> 1608 </v-flex>
1609 <v-flex xs12 sm6> 1609 <v-flex xs12 sm6>
1610 <v-layout> 1610 <v-layout>
1611 <v-flex xs4 class="pt-4 subheading"> 1611 <v-flex xs4 class="pt-4 subheading">
1612 <label class="right hidden-xs-only hidden-sm-only">Select Country:</label> 1612 <label class="right hidden-xs-only hidden-sm-only">Select Country:</label>
1613 <label 1613 <label
1614 class="right hidden-lg-only hidden-md-only hidden-xl-only" 1614 class="right hidden-lg-only hidden-md-only hidden-xl-only"
1615 >Country:</label> 1615 >Country:</label>
1616 </v-flex> 1616 </v-flex>
1617 <v-flex xs8 class="ml-3"> 1617 <v-flex xs8 class="ml-3">
1618 <v-autocomplete 1618 <v-autocomplete
1619 v-model="addStudents.country" 1619 v-model="addStudents.country"
1620 :rules="country" 1620 :rules="country"
1621 :items="countries" 1621 :items="countries"
1622 placeholder="Select Country Name" 1622 placeholder="Select Country Name"
1623 required 1623 required
1624 ></v-autocomplete> 1624 ></v-autocomplete>
1625 </v-flex> 1625 </v-flex>
1626 </v-layout> 1626 </v-layout>
1627 </v-flex> 1627 </v-flex>
1628 </v-layout> 1628 </v-layout>
1629 <v-layout wrap> 1629 <v-layout wrap>
1630 <v-flex xs12 sm6> 1630 <v-flex xs12 sm6>
1631 <v-layout> 1631 <v-layout>
1632 <v-flex xs4 class="pt-4 subheading"> 1632 <v-flex xs4 class="pt-4 subheading">
1633 <label class="right">Gender:</label> 1633 <label class="right">Gender:</label>
1634 </v-flex> 1634 </v-flex>
1635 <v-flex xs8 class="ml-3"> 1635 <v-flex xs8 class="ml-3">
1636 <v-select 1636 <v-select
1637 :items="gender" 1637 :items="gender"
1638 v-model="addStudents.gender" 1638 v-model="addStudents.gender"
1639 :rules="genderRules" 1639 :rules="genderRules"
1640 label="Select Gender" 1640 label="Select Gender"
1641 required 1641 required
1642 ></v-select> 1642 ></v-select>
1643 </v-flex> 1643 </v-flex>
1644 </v-layout> 1644 </v-layout>
1645 </v-flex> 1645 </v-flex>
1646 <v-flex xs12 sm6> 1646 <v-flex xs12 sm6>
1647 <v-layout> 1647 <v-layout>
1648 <v-flex xs4 class="pt-4 subheading"> 1648 <v-flex xs4 class="pt-4 subheading">
1649 <label class="right hidden-xs-only hidden-sm-only">Blood Group:</label> 1649 <label class="right hidden-xs-only hidden-sm-only">Blood Group:</label>
1650 <label 1650 <label
1651 class="right hidden-lg-only hidden-md-only hidden-xl-only" 1651 class="right hidden-lg-only hidden-md-only hidden-xl-only"
1652 >Blood:</label> 1652 >Blood:</label>
1653 </v-flex> 1653 </v-flex>
1654 <v-flex xs8 class="ml-3"> 1654 <v-flex xs8 class="ml-3">
1655 <v-text-field 1655 <v-text-field
1656 v-model="addStudents.bloodGroup" 1656 v-model="addStudents.bloodGroup"
1657 placeholder="Fill your Blood Group" 1657 placeholder="Fill your Blood Group"
1658 required 1658 required
1659 ></v-text-field> 1659 ></v-text-field>
1660 </v-flex> 1660 </v-flex>
1661 </v-layout> 1661 </v-layout>
1662 </v-flex> 1662 </v-flex>
1663 </v-layout> 1663 </v-layout>
1664 <v-layout wrap> 1664 <v-layout wrap>
1665 <v-flex xs12 sm6> 1665 <v-flex xs12 sm6>
1666 <v-layout> 1666 <v-layout>
1667 <v-flex xs4 class="pt-4 subheading"> 1667 <v-flex xs4 class="pt-4 subheading">
1668 <label class="right hidden-xs-only hidden-sm-only">Roll Number:</label> 1668 <label class="right hidden-xs-only hidden-sm-only">Roll Number:</label>
1669 <label 1669 <label
1670 class="right hidden-lg-only hidden-md-only hidden-xl-only" 1670 class="right hidden-lg-only hidden-md-only hidden-xl-only"
1671 >Roll No:</label> 1671 >Roll No:</label>
1672 </v-flex> 1672 </v-flex>
1673 <v-flex xs8 class="ml-3"> 1673 <v-flex xs8 class="ml-3">
1674 <v-text-field 1674 <v-text-field
1675 v-model="addStudents.rollNo" 1675 v-model="addStudents.rollNo"
1676 placeholder="Fill your Roll Number" 1676 placeholder="Fill your Roll Number"
1677 :rules="rollNo" 1677 :rules="rollNo"
1678 required 1678 required
1679 ></v-text-field> 1679 ></v-text-field>
1680 </v-flex> 1680 </v-flex>
1681 </v-layout> 1681 </v-layout>
1682 </v-flex> 1682 </v-flex>
1683 <v-flex xs12 sm6> 1683 <v-flex xs12 sm6>
1684 <v-layout> 1684 <v-layout>
1685 <v-flex xs4 class="pt-4 subheading"> 1685 <v-flex xs4 class="pt-4 subheading">
1686 <label class="right hidden-xs-only hidden-sm-only">Medical Notes:</label> 1686 <label class="right hidden-xs-only hidden-sm-only">Medical Notes:</label>
1687 <label 1687 <label
1688 class="right hidden-lg-only hidden-md-only hidden-xl-only" 1688 class="right hidden-lg-only hidden-md-only hidden-xl-only"
1689 >Medical:</label> 1689 >Medical:</label>
1690 </v-flex> 1690 </v-flex>
1691 <v-flex xs8 class="ml-3"> 1691 <v-flex xs8 class="ml-3">
1692 <v-text-field 1692 <v-text-field
1693 v-model="addStudents.medicalNotes" 1693 v-model="addStudents.medicalNotes"
1694 placeholder="Fill your Medical Notes" 1694 placeholder="Fill your Medical Notes"
1695 required 1695 required
1696 ></v-text-field> 1696 ></v-text-field>
1697 </v-flex> 1697 </v-flex>
1698 </v-layout> 1698 </v-layout>
1699 </v-flex> 1699 </v-flex>
1700 </v-layout> 1700 </v-layout>
1701 <v-layout wrap> 1701 <v-layout wrap>
1702 <v-flex xs12 sm6> 1702 <v-flex xs12 sm6>
1703 <v-layout> 1703 <v-layout>
1704 <v-flex xs4 class="pt-4 subheading"> 1704 <v-flex xs4 class="pt-4 subheading">
1705 <label class="right">Height:</label> 1705 <label class="right">Height:</label>
1706 </v-flex> 1706 </v-flex>
1707 <v-flex xs8 class="ml-3"> 1707 <v-flex xs8 class="ml-3">
1708 <v-text-field 1708 <v-text-field
1709 v-model="addStudents.height" 1709 v-model="addStudents.height"
1710 placeholder="Fill your Height" 1710 placeholder="Fill your Height"
1711 required 1711 required
1712 ></v-text-field> 1712 ></v-text-field>
1713 </v-flex> 1713 </v-flex>
1714 </v-layout> 1714 </v-layout>
1715 </v-flex> 1715 </v-flex>
1716 <v-flex xs12 sm6> 1716 <v-flex xs12 sm6>
1717 <v-layout> 1717 <v-layout>
1718 <v-flex xs4 class="pt-4 subheading"> 1718 <v-flex xs4 class="pt-4 subheading">
1719 <label class="right">Weight:</label> 1719 <label class="right">Weight:</label>
1720 </v-flex> 1720 </v-flex>
1721 <v-flex xs8 class="ml-3"> 1721 <v-flex xs8 class="ml-3">
1722 <v-text-field 1722 <v-text-field
1723 v-model="addStudents.weight" 1723 v-model="addStudents.weight"
1724 placeholder="Fill your Weight" 1724 placeholder="Fill your Weight"
1725 required 1725 required
1726 ></v-text-field> 1726 ></v-text-field>
1727 </v-flex> 1727 </v-flex>
1728 </v-layout> 1728 </v-layout>
1729 </v-flex> 1729 </v-flex>
1730 </v-layout> 1730 </v-layout>
1731 <v-layout wrap> 1731 <v-layout wrap>
1732 <v-flex xs12 sm6> 1732 <v-flex xs12 sm6>
1733 <v-layout> 1733 <v-layout>
1734 <v-flex xs4 class="pt-4 subheading"> 1734 <v-flex xs4 class="pt-4 subheading">
1735 <label class="right hidden-xs-only hidden-sm-only">Uplaod Image:</label> 1735 <label class="right hidden-xs-only hidden-sm-only">Uplaod Image:</label>
1736 <label 1736 <label
1737 class="right hidden-lg-only hidden-md-only hidden-xl-only" 1737 class="right hidden-lg-only hidden-md-only hidden-xl-only"
1738 >Uplaod :</label> 1738 >Uplaod :</label>
1739 </v-flex> 1739 </v-flex>
1740 <v-flex xs8 class="ml-3"> 1740 <v-flex xs8 class="ml-3">
1741 <v-text-field 1741 <v-text-field
1742 label="Select Image" 1742 label="Select Image"
1743 @click="pickFile" 1743 @click="pickFile"
1744 v-model="imageName" 1744 v-model="imageName"
1745 append-icon="attach_file" 1745 append-icon="attach_file"
1746 ></v-text-field> 1746 ></v-text-field>
1747 </v-flex> 1747 </v-flex>
1748 </v-layout> 1748 </v-layout>
1749 </v-flex> 1749 </v-flex>
1750 <v-flex xs12 sm6> 1750 <v-flex xs12 sm6>
1751 <v-layout> 1751 <v-layout>
1752 <v-flex xs4 class="pt-4 subheading"> 1752 <v-flex xs4 class="pt-4 subheading">
1753 <label class="right hidden-xs-only hidden-sm-only">Academic Year:</label> 1753 <label class="right hidden-xs-only hidden-sm-only">Academic Year:</label>
1754 <label 1754 <label
1755 class="right hidden-lg-only hidden-md-only hidden-xl-only" 1755 class="right hidden-lg-only hidden-md-only hidden-xl-only"
1756 >Year:</label> 1756 >Year:</label>
1757 </v-flex> 1757 </v-flex>
1758 <v-flex xs8 class="ml-3"> 1758 <v-flex xs8 class="ml-3">
1759 <v-text-field 1759 <v-text-field
1760 v-model="addStudents.establishmentYear" 1760 v-model="addStudents.establishmentYear"
1761 placeholder="fill your Academic Year" 1761 placeholder="fill your Academic Year"
1762 name="state" 1762 name="state"
1763 type="number" 1763 type="number"
1764 :rules="establishmentYearRules" 1764 :rules="establishmentYearRules"
1765 required 1765 required
1766 ></v-text-field> 1766 ></v-text-field>
1767 </v-flex> 1767 </v-flex>
1768 </v-layout> 1768 </v-layout>
1769 </v-flex> 1769 </v-flex>
1770 </v-layout> 1770 </v-layout>
1771 <v-layout wrap class="hidden-xs-only hidden-sm-only"> 1771 <v-layout wrap class="hidden-xs-only hidden-sm-only">
1772 <v-flex xs12 sm6> 1772 <v-flex xs12 sm6>
1773 <v-layout> 1773 <v-layout>
1774 <v-flex xs4 sm4 class="pt-4 subheading"> 1774 <v-flex xs4 sm4 class="pt-4 subheading">
1775 <label class="right">Present Address:</label> 1775 <label class="right">Present Address:</label>
1776 </v-flex> 1776 </v-flex>
1777 <v-flex xs8 sm8 class="ml-3"> 1777 <v-flex xs8 sm8 class="ml-3">
1778 <v-text-field 1778 <v-text-field
1779 v-model="addStudents.presentAddress" 1779 v-model="addStudents.presentAddress"
1780 :rules="presentAddress" 1780 :rules="presentAddress"
1781 placeholder="fill Your present Address" 1781 placeholder="fill Your present Address"
1782 @keyup="copyData" 1782 @keyup="copyData"
1783 ></v-text-field> 1783 ></v-text-field>
1784 </v-flex> 1784 </v-flex>
1785 </v-layout> 1785 </v-layout>
1786 </v-flex> 1786 </v-flex>
1787 <v-flex xs12 sm6> 1787 <v-flex xs12 sm6>
1788 <v-layout> 1788 <v-layout>
1789 <v-flex xs4 sm4 class="pt-4 subheading addressForm"> 1789 <v-flex xs4 sm4 class="pt-4 subheading addressForm">
1790 <label class="right">Permanent Address:</label> 1790 <label class="right">Permanent Address:</label>
1791 </v-flex> 1791 </v-flex>
1792 <v-flex xs12 sm8 class="ml-3"> 1792 <v-flex xs12 sm8 class="ml-3">
1793 <v-switch 1793 <v-switch
1794 v-model="addStudents.permanentAddress" 1794 v-model="addStudents.permanentAddress"
1795 label="Select Permanent Address" 1795 label="Select Permanent Address"
1796 :value="addStudents.presentAddress" 1796 :value="addStudents.presentAddress"
1797 ></v-switch> 1797 ></v-switch>
1798 </v-flex> 1798 </v-flex>
1799 </v-layout> 1799 </v-layout>
1800 </v-flex> 1800 </v-flex>
1801 </v-layout> 1801 </v-layout>
1802 <v-layout class="hidden-xs-only hidden-sm-only"> 1802 <v-layout class="hidden-xs-only hidden-sm-only">
1803 <v-flex xs12 sm6> 1803 <v-flex xs12 sm6>
1804 <v-layout> 1804 <v-layout>
1805 <v-flex xs4 sm4 class="pt-4 subheading addressForm"> 1805 <v-flex xs4 sm4 class="pt-4 subheading addressForm">
1806 <label class="right">Permanent Address:</label> 1806 <label class="right">Permanent Address:</label>
1807 </v-flex> 1807 </v-flex>
1808 <v-flex xs12 sm8 class="ml-3"> 1808 <v-flex xs12 sm8 class="ml-3">
1809 <v-text-field 1809 <v-text-field
1810 v-model="addStudents.permanentAddress" 1810 v-model="addStudents.permanentAddress"
1811 :rules="permanentAddress" 1811 :rules="permanentAddress"
1812 placeholder="fill Your Permanent Address" 1812 placeholder="fill Your Permanent Address"
1813 ></v-text-field> 1813 ></v-text-field>
1814 </v-flex> 1814 </v-flex>
1815 </v-layout> 1815 </v-layout>
1816 </v-flex> 1816 </v-flex>
1817 </v-layout> 1817 </v-layout>
1818 <v-layout class="hidden-lg-only hidden-md-only hidden-xl-only" wrap> 1818 <v-layout class="hidden-lg-only hidden-md-only hidden-xl-only" wrap>
1819 <v-flex xs12 sm12> 1819 <v-flex xs12 sm12>
1820 <v-layout> 1820 <v-layout>
1821 <v-flex xs12 sm12 class="pt-4 subheading text-xs-center"> 1821 <v-flex xs12 sm12 class="pt-4 subheading text-xs-center">
1822 <label class>Present Address:</label> 1822 <label class>Present Address:</label>
1823 </v-flex> 1823 </v-flex>
1824 </v-layout> 1824 </v-layout>
1825 <v-layout> 1825 <v-layout>
1826 <v-flex xs12 sm12> 1826 <v-flex xs12 sm12>
1827 <v-textarea 1827 <v-textarea
1828 name="input-4-3" 1828 name="input-4-3"
1829 v-model="addStudents.presentAddress" 1829 v-model="addStudents.presentAddress"
1830 :rules="presentAddress" 1830 :rules="presentAddress"
1831 placeholder="fill Your present Address" 1831 placeholder="fill Your present Address"
1832 required 1832 required
1833 ></v-textarea> 1833 ></v-textarea>
1834 </v-flex> 1834 </v-flex>
1835 </v-layout> 1835 </v-layout>
1836 </v-flex> 1836 </v-flex>
1837 <v-flex xs12 sm12> 1837 <v-flex xs12 sm12>
1838 <v-layout> 1838 <v-layout>
1839 <v-flex 1839 <v-flex
1840 xs12 1840 xs12
1841 sm12 1841 sm12
1842 class="pt-4 pr-4 subheading text-xs-center addressForm" 1842 class="pt-4 pr-4 subheading text-xs-center addressForm"
1843 > 1843 >
1844 <label>Permanent Address:</label> 1844 <label>Permanent Address:</label>
1845 </v-flex> 1845 </v-flex>
1846 </v-layout> 1846 </v-layout>
1847 <v-layout> 1847 <v-layout>
1848 <v-flex xs12 sm12> 1848 <v-flex xs12 sm12>
1849 <v-textarea 1849 <v-textarea
1850 name="input-4-3" 1850 name="input-4-3"
1851 v-model="addStudents.permanentAddress" 1851 v-model="addStudents.permanentAddress"
1852 :rules="permanentAddress" 1852 :rules="permanentAddress"
1853 placeholder="fill Your Permanent Address" 1853 placeholder="fill Your Permanent Address"
1854 required 1854 required
1855 ></v-textarea> 1855 ></v-textarea>
1856 </v-flex> 1856 </v-flex>
1857 </v-layout> 1857 </v-layout>
1858 </v-flex> 1858 </v-flex>
1859 </v-layout> 1859 </v-layout>
1860 <v-layout> 1860 <v-layout>
1861 <v-flex xs12 sm12> 1861 <v-flex xs12 sm12>
1862 <v-layout class="right"> 1862 <v-layout class="right">
1863 <!-- <v-flex xs6> --> 1863 <!-- <v-flex xs6> -->
1864 <v-btn round dark @click="e2 = 1" class="clear-button">Back</v-btn> 1864 <v-btn round dark @click="e2 = 1" class="clear-button">Back</v-btn>
1865 <!-- </v-flex> 1865 <!-- </v-flex>
1866 <v-flex xs6>--> 1866 <v-flex xs6>-->
1867 <v-btn 1867 <v-btn
1868 @click="submit" 1868 @click="submit"
1869 round 1869 round
1870 dark 1870 dark
1871 :loading="loading" 1871 :loading="loading"
1872 class="add-button" 1872 class="add-button"
1873 >Add</v-btn> 1873 >Add</v-btn>
1874 <!-- </v-flex> --> 1874 <!-- </v-flex> -->
1875 </v-layout> 1875 </v-layout>
1876 </v-flex> 1876 </v-flex>
1877 </v-layout> 1877 </v-layout>
1878 </v-form> 1878 </v-form>
1879 </v-flex> 1879 </v-flex>
1880 </v-stepper-content> 1880 </v-stepper-content>
1881 </v-stepper-items> 1881 </v-stepper-items>
1882 </v-stepper> 1882 </v-stepper>
1883 </v-flex> 1883 </v-flex>
1884 </v-layout> 1884 </v-layout>
1885 </v-container> 1885 </v-container>
1886 </v-card> 1886 </v-card>
1887 </v-dialog> 1887 </v-dialog>
1888 <v-snackbar 1888 <v-snackbar
1889 :timeout="timeout" 1889 :timeout="timeout"
1890 :top="y === 'top'" 1890 :top="y === 'top'"
1891 :right="x === 'right'" 1891 :right="x === 'right'"
1892 :vertical="mode === 'vertical'" 1892 :vertical="mode === 'vertical'"
1893 v-model="snackbar" 1893 v-model="snackbar"
1894 :color="color" 1894 :color="color"
1895 >{{ text }}</v-snackbar> 1895 >{{ text }}</v-snackbar>
1896 <div class="loader" v-if="showLoader"> 1896 <div class="loader" v-if="showLoader">
1897 <v-progress-circular indeterminate color="white"></v-progress-circular> 1897 <v-progress-circular indeterminate color="white"></v-progress-circular>
1898 </div> 1898 </div>
1899 </v-container> 1899 </v-container>
1900 </template> 1900 </template>
1901 1901
1902 <script> 1902 <script>
1903 import http from "@/Services/http.js"; 1903 import http from "@/Services/http.js";
1904 import moment from "moment"; 1904 import moment from "moment";
1905 import countryList from "@/script/country.js"; 1905 import countryList from "@/script/country.js";
1906 import parent from "@/script/parents.js"; 1906 import parent from "@/script/parents.js";
1907 1907
1908 export default { 1908 export default {
1909 data: () => ({ 1909 data: () => ({
1910 e1: true, 1910 e1: true,
1911 e2: 0, 1911 e2: 0,
1912 showParent: true, 1912 showParent: true,
1913 showNext: false, 1913 showNext: false,
1914 snackbar: false, 1914 snackbar: false,
1915 y: "top", 1915 y: "top",
1916 x: "right", 1916 x: "right",
1917 role: "", 1917 role: "",
1918 mode: "", 1918 mode: "",
1919 append: "", 1919 append: "",
1920 timeout: 3000, 1920 timeout: 3000,
1921 text: "", 1921 text: "",
1922 show: true, 1922 show: true,
1923 color: "", 1923 color: "",
1924 showSearch: false, 1924 showSearch: false,
1925 showLoader: false, 1925 showLoader: false,
1926 loading: false, 1926 loading: false,
1927 editLoading: false, 1927 editLoading: false,
1928 date: null, 1928 date: null,
1929 search: "", 1929 search: "",
1930 password: "", 1930 password: "",
1931 menu: false, 1931 menu: false,
1932 menu1: false, 1932 menu1: false,
1933 editStudentDialog: false, 1933 editStudentDialog: false,
1934 profileStudentDialog: false, 1934 profileStudentDialog: false,
1935 addStudentDialog: false, 1935 addStudentDialog: false,
1936 valid: true, 1936 valid: true,
1937 addclass: [], 1937 addclass: [],
1938 addSection: [], 1938 addSection: [],
1939 gender: ["Male", "Female"], 1939 gender: ["Male", "Female"],
1940 pagination: { 1940 pagination: {
1941 rowsPerPage: 10, 1941 rowsPerPage: 10,
1942 }, 1942 },
1943 imageData: {}, 1943 imageData: {},
1944 imageName: "", 1944 imageName: "",
1945 imageUrl: "", 1945 imageUrl: "",
1946 imageFile: "", 1946 imageFile: "",
1947 editImageName: "", 1947 editImageName: "",
1948 editImageUrl: "", 1948 editImageUrl: "",
1949 nameRules: [(v) => !!v || " Full Name is required"], 1949 nameRules: [(v) => !!v || " Full Name is required"],
1950 dateRules: [(v) => !!v || " DOB is required"], 1950 dateRules: [(v) => !!v || " DOB is required"],
1951 cityRules: [(v) => !!v || " City Name is required"], 1951 cityRules: [(v) => !!v || " City Name is required"],
1952 pincode: [(v) => !!v || " Pincode is required"], 1952 pincode: [(v) => !!v || " Pincode is required"],
1953 country: [(v) => !!v || " Country Name is required"], 1953 country: [(v) => !!v || " Country Name is required"],
1954 rollNo: [(v) => !!v || "Roll No is required"], 1954 rollNo: [(v) => !!v || "Roll No is required"],
1955 permanentAddress: [(v) => !!v || " Permanent Address is required"], 1955 permanentAddress: [(v) => !!v || " Permanent Address is required"],
1956 presentAddress: [(v) => !!v || " Present Address is required"], 1956 presentAddress: [(v) => !!v || " Present Address is required"],
1957 stateRules: [(v) => !!v || "State Name is required"], 1957 stateRules: [(v) => !!v || "State Name is required"],
1958 classRules: [(v) => !!v || " Class Name is required"], 1958 classRules: [(v) => !!v || " Class Name is required"],
1959 sectionRules: [(v) => !!v || " Section Name is required"], 1959 sectionRules: [(v) => !!v || " Section Name is required"],
1960 genderRules: [(v) => !!v || " Select Gender is required"], 1960 genderRules: [(v) => !!v || " Select Gender is required"],
1961 fatheCellNoRules: [ 1961 fatheCellNoRules: [
1962 (v) => !!v || " father Cell Number is required", 1962 (v) => !!v || " father Cell Number is required",
1963 (v) => v <= 10000000000 || "Max 10 characters is required", 1963 (v) => v <= 10000000000 || "Max 10 characters is required",
1964 ], 1964 ],
1965 password: [ 1965 password: [
1966 (v) => !!v || "Password field is Required.", 1966 (v) => !!v || "Password field is Required.",
1967 // v => (/^(?=.*[a-z])(?=.*[0-9])(?=.*[!@#$%^&*])(?=.{8,})/).test(v) && v.length >= 8 1967 // v => (/^(?=.*[a-z])(?=.*[0-9])(?=.*[!@#$%^&*])(?=.{8,})/).test(v) && v.length >= 8
1968 ], 1968 ],
1969 mobileNoRule: [(v) => !!v || " Mobile Number is required"], 1969 mobileNoRule: [(v) => !!v || " Mobile Number is required"],
1970 establishmentYearRules: [(v) => !!v || " Academic Year is required"], 1970 establishmentYearRules: [(v) => !!v || " Academic Year is required"],
1971 errorMessages: "", 1971 errorMessages: "",
1972 countries: [], 1972 countries: [],
1973 headers: [ 1973 headers: [
1974 { 1974 {
1975 text: "Roll No.", 1975 text: "Roll No.",
1976 align: "center", 1976 align: "center",
1977 sortable: false, 1977 sortable: false,
1978 value: "rollNo", 1978 value: "rollNo",
1979 }, 1979 },
1980 { 1980 {
1981 text: "Profile Pic", 1981 text: "Profile Pic",
1982 value: "profilePicUrl", 1982 value: "profilePicUrl",
1983 sortable: false, 1983 sortable: false,
1984 align: "center", 1984 align: "center",
1985 }, 1985 },
1986 { text: "Name", value: "name", sortable: false, align: "center" }, 1986 { text: "Name", value: "name", sortable: false, align: "center" },
1987 { text: "Gender", value: "gender", sortable: false, align: "center" }, 1987 { text: "Gender", value: "gender", sortable: false, align: "center" },
1988 { 1988 {
1989 text: "Father Name", 1989 text: "Father Name",
1990 value: "fatherName", 1990 value: "fatherName",
1991 sortable: false, 1991 sortable: false,
1992 align: "center", 1992 align: "center",
1993 }, 1993 },
1994 { 1994 {
1995 text: "Mother Name", 1995 text: "Mother Name",
1996 value: "motherName", 1996 value: "motherName",
1997 sortable: false, 1997 sortable: false,
1998 align: "center", 1998 align: "center",
1999 }, 1999 },
2000 { 2000 {
2001 text: "Academic Year", 2001 text: "Academic Year",
2002 value: "establishmentYear", 2002 value: "establishmentYear",
2003 sortable: false, 2003 sortable: false,
2004 align: "center", 2004 align: "center",
2005 }, 2005 },
2006 // { text: "Mobile No", value: "mobile", sortable: false, align: "center" }, 2006 // { text: "Mobile No", value: "mobile", sortable: false, align: "center" },
2007 { 2007 {
2008 text: "Status", 2008 text: "Status",
2009 value: "status", 2009 value: "status",
2010 sortable: false, 2010 sortable: false,
2011 align: "center", 2011 align: "center",
2012 }, 2012 },
2013 { text: "Action", value: "", sortable: false, align: "center" }, 2013 { text: "Action", value: "", sortable: false, align: "center" },
2014 ], 2014 ],
2015 studentsData: [], 2015 studentsData: [],
2016 parentId: "", 2016 parentId: "",
2017 editedIndex: -1, 2017 editedIndex: -1,
2018 parentData: {}, 2018 parentData: {},
2019 addStudents: { 2019 addStudents: {
2020 role: "STUDENT", 2020 role: "STUDENT",
2021 name: "", 2021 name: "",
2022 email: "", 2022 email: "",
2023 date: "", 2023 date: "",
2024 city: "", 2024 city: "",
2025 pincode: "", 2025 pincode: "",
2026 country: "", 2026 country: "",
2027 permanentAddress: "", 2027 permanentAddress: "",
2028 presentAddress: "", 2028 presentAddress: "",
2029 mobile: "", 2029 mobile: "",
2030 state: "", 2030 state: "",
2031 gender: "", 2031 gender: "",
2032 select: "", 2032 select: "",
2033 selectSection: "", 2033 selectSection: "",
2034 bloodGroup: "", 2034 bloodGroup: "",
2035 allergies: "", 2035 allergies: "",
2036 medicalNotes: "", 2036 medicalNotes: "",
2037 height: "", 2037 height: "",
2038 weight: "", 2038 weight: "",
2039 rollNo: "", 2039 rollNo: "",
2040 establishmentYear: new Date().getFullYear(), 2040 establishmentYear: new Date().getFullYear(),
2041 }, 2041 },
2042 selectStudents: { 2042 selectStudents: {
2043 select: "", 2043 select: "",
2044 selectSection: "", 2044 selectSection: "",
2045 }, 2045 },
2046 editedItem: { 2046 editedItem: {
2047 role: "STUDENT", 2047 role: "STUDENT",
2048 name: "", 2048 name: "",
2049 email: "", 2049 email: "",
2050 dob: "", 2050 dob: "",
2051 city: "", 2051 city: "",
2052 pincode: "", 2052 pincode: "",
2053 country: "", 2053 country: "",
2054 permanentAddress: "", 2054 permanentAddress: "",
2055 presentAddress: "", 2055 presentAddress: "",
2056 mobile: "", 2056 mobile: "",
2057 state: "", 2057 state: "",
2058 gender: "", 2058 gender: "",
2059 select: "", 2059 select: "",
2060 selectSection: "", 2060 selectSection: "",
2061 bloodGroup: "", 2061 bloodGroup: "",
2062 allergies: "", 2062 allergies: "",
2063 medicalNotes: "", 2063 medicalNotes: "",
2064 height: "", 2064 height: "",
2065 weight: "", 2065 weight: "",
2066 rollNo: "", 2066 rollNo: "",
2067 establishmentYear: new Date().getFullYear(), 2067 establishmentYear: new Date().getFullYear(),
2068 }, 2068 },
2069 isFatherCellExists: false, 2069 isFatherCellExists: false,
2070 }), 2070 }),
2071 watch: { 2071 watch: {
2072 menu(val) { 2072 menu(val) {
2073 val && this.$nextTick(() => (this.$refs.picker.activePicker = "YEAR")); 2073 val && this.$nextTick(() => (this.$refs.picker.activePicker = "YEAR"));
2074 }, 2074 },
2075 menu1(val) { 2075 menu1(val) {
2076 val && this.$nextTick(() => (this.$refs.picker.activePicker = "YEAR")); 2076 val && this.$nextTick(() => (this.$refs.picker.activePicker = "YEAR"));
2077 }, 2077 },
2078 addStudentDialog: function (val) { 2078 addStudentDialog: function (val) {
2079 if (!val) { 2079 if (!val) {
2080 this.parentData = []; 2080 this.parentData = [];
2081 this.addStudents = []; 2081 this.addStudents = [];
2082 this.imageName = ""; 2082 this.imageName = "";
2083 this.imageFile = ""; 2083 this.imageFile = "";
2084 this.imageUrl = ""; 2084 this.imageUrl = "";
2085 this.e2 = 1; 2085 this.e2 = 1;
2086 } 2086 }
2087 }, 2087 },
2088 }, 2088 },
2089 methods: { 2089 methods: {
2090 findStudents() { 2090 findStudents() {
2091 this.showLoader = true; 2091 this.showLoader = true;
2092 http() 2092 http()
2093 .get("/getStudentWithClass", { 2093 .get("/getStudentWithClass", {
2094 params: { 2094 params: {
2095 classId: this.selectStudents.select, 2095 classId: this.selectStudents.select,
2096 sectionId: this.selectStudents.selectSection, 2096 sectionId: this.selectStudents.selectSection,
2097 }, 2097 },
2098 }) 2098 })
2099 .then((response) => { 2099 .then((response) => {
2100 this.studentsData = response.data.data; 2100 this.studentsData = response.data.data;
2101 this.showLoader = false; 2101 this.showLoader = false;
2102 }) 2102 })
2103 .catch((err) => { 2103 .catch((err) => {
2104 // console.log("err====>", err); 2104 // console.log("err====>", err);
2105 this.showLoader = false; 2105 this.showLoader = false;
2106 this.snackbar = true;
2107 this.color = "error";
2108 this.text = error.response.data.message;
2106 this.snackbar = true; 2109 });
2107 this.color = "error"; 2110 },
2108 this.text = error.response.data.message; 2111 getSections(_id) {
2109 }); 2112 var token = this.$store.state.token;
2110 }, 2113 this.showLoader = true;
2111 getSections(_id) { 2114 http()
2112 var token = this.$store.state.token; 2115 .get(
2113 this.showLoader = true; 2116 "/getSectionsList",
2114 http() 2117 { params: { classId: _id } },
2115 .get( 2118 {
2116 "/getSectionsList", 2119 headers: { Authorization: "Bearer " + token },
2117 { params: { classId: _id } }, 2120 }
2118 { 2121 )
2119 headers: { Authorization: "Bearer " + token }, 2122 .then((response) => {
2120 } 2123 this.addSection = response.data.data;
2121 ) 2124 this.showLoader = false;
2122 .then((response) => { 2125 })
2123 this.addSection = response.data.data; 2126 .catch((err) => {
2124 this.showLoader = false; 2127 this.showLoader = false;
2125 }) 2128 });
2126 .catch((err) => { 2129 },
2127 this.showLoader = false; 2130 getSection(_id) {
2128 }); 2131 var token = this.$store.state.token;
2129 }, 2132 this.showLoader = true;
2130 getSection(_id) { 2133 http()
2131 var token = this.$store.state.token; 2134 .get(
2132 this.showLoader = true; 2135 "/getSectionsList",
2133 http() 2136 { params: { classId: _id } },
2134 .get( 2137 {
2135 "/getSectionsList", 2138 headers: { Authorization: "Bearer " + token },
2136 { params: { classId: _id } }, 2139 }
2137 { 2140 )
2138 headers: { Authorization: "Bearer " + token }, 2141 .then((response) => {
2139 } 2142 this.addSection = response.data.data;
2140 ) 2143 this.showLoader = false;
2141 .then((response) => { 2144 })
2142 this.addSection = response.data.data; 2145 .catch((err) => {
2143 this.showLoader = false; 2146 this.showLoader = false;
2144 }) 2147 });
2145 .catch((err) => { 2148 },
2146 this.showLoader = false; 2149 pickFile() {
2147 }); 2150 this.$refs.image.click();
2148 }, 2151 },
2149 pickFile() { 2152 pickEditFile() {
2150 this.$refs.image.click(); 2153 this.$refs.editDataImage.click();
2151 }, 2154 },
2152 pickEditFile() { 2155 dates: function (date) {
2153 this.$refs.editDataImage.click(); 2156 return moment(date).format("MMMM DD, YYYY");
2154 }, 2157 return date;
2155 dates: function (date) { 2158 },
2156 return moment(date).format("MMMM DD, YYYY"); 2159 onFilePicked(e) {
2157 return date; 2160 // console.log(e)
2158 }, 2161 const files = e.target.files;
2159 onFilePicked(e) { 2162 this.imageData.upload = e.target.files[0];
2160 // console.log(e) 2163 if (files[0] !== undefined) {
2161 const files = e.target.files; 2164 this.imageName = files[0].name;
2162 this.imageData.upload = e.target.files[0]; 2165 if (this.imageName.lastIndexOf(".") <= 0) {
2163 if (files[0] !== undefined) { 2166 return;
2164 this.imageName = files[0].name; 2167 }
2165 if (this.imageName.lastIndexOf(".") <= 0) { 2168 const fr = new FileReader();
2166 return; 2169 fr.readAsDataURL(files[0]);
2167 } 2170 fr.addEventListener("load", () => {
2168 const fr = new FileReader(); 2171 this.imageUrl = fr.result;
2169 fr.readAsDataURL(files[0]); 2172 this.imageFile = files[0]; // this is an image file that can be sent to server...
2170 fr.addEventListener("load", () => { 2173 this.imageData.imageUrl = URL.createObjectURL(this.imageFile);
2171 this.imageUrl = fr.result; 2174 });
2172 this.imageFile = files[0]; // this is an image file that can be sent to server... 2175 } else {
2173 this.imageData.imageUrl = URL.createObjectURL(this.imageFile); 2176 this.imageName = "";
2174 }); 2177 this.imageFile = "";
2175 } else { 2178 this.imageUrl = "";
2176 this.imageName = ""; 2179 }
2177 this.imageFile = ""; 2180 },
2178 this.imageUrl = ""; 2181 onEditFilePicked(e) {
2179 } 2182 // console.log(e);
2180 }, 2183 const files = e.target.files;
2181 onEditFilePicked(e) { 2184 if (files[0] !== undefined) {
2182 // console.log(e); 2185 this.editImageName = files[0].name;
2183 const files = e.target.files; 2186 // console.log("this.editImageName", this.editImageName);
2184 if (files[0] !== undefined) { 2187
2185 this.editImageName = files[0].name; 2188 if (this.editImageName.lastIndexOf(".") <= 0) {
2186 // console.log("this.editImageName", this.editImageName); 2189 return;
2187 2190 }
2188 if (this.editImageName.lastIndexOf(".") <= 0) { 2191 const fr = new FileReader();
2189 return; 2192 fr.readAsDataURL(files[0]);
2190 } 2193 fr.addEventListener("load", () => {
2191 const fr = new FileReader(); 2194 this.editImageUrl = fr.result;
2192 fr.readAsDataURL(files[0]); 2195 this.editiImageFile = files[0]; // this is an image file that can be sent to server...
2193 fr.addEventListener("load", () => { 2196 });
2194 this.editImageUrl = fr.result; 2197 } else {
2195 this.editiImageFile = files[0]; // this is an image file that can be sent to server... 2198 this.editImageName = "";
2196 }); 2199 this.editiImageFile = "";
2197 } else { 2200 }
2198 this.editImageName = ""; 2201 },
2199 this.editiImageFile = ""; 2202 editItem(item) {
2200 } 2203 this.editedIndex = this.studentsData.indexOf(item);
2201 }, 2204 this.editedItem = Object.assign({}, item);
2202 editItem(item) { 2205 this.editedItem.fatherName = item.parentId.fatherName;
2203 this.editedIndex = this.studentsData.indexOf(item); 2206 this.editedItem.fatherCellNo = item.parentId.fatherCellNo;
2204 this.editedItem = Object.assign({}, item); 2207 this.editedItem.motherName = item.parentId.motherName;
2205 this.editedItem.fatherName = item.parentId.fatherName; 2208 this.editedItem.motherCellNo = item.parentId.motherCellNo;
2206 this.editedItem.fatherCellNo = item.parentId.fatherCellNo; 2209 this.editedItem.dob =
2207 this.editedItem.motherName = item.parentId.motherName; 2210 this.editedItem.dob != undefined
2208 this.editedItem.motherCellNo = item.parentId.motherCellNo; 2211 ? (this.editedItem.dob = this.editedItem.dob.substring(0, 10))
2209 this.editedItem.dob = 2212 : (this.editedItem.dob = "");
2210 this.editedItem.dob != undefined 2213 this.editStudentDialog = true;
2211 ? (this.editedItem.dob = this.editedItem.dob.substring(0, 10)) 2214 },
2212 : (this.editedItem.dob = ""); 2215 profile(item) {
2213 this.editStudentDialog = true; 2216 this.editedIndex = this.studentsData.indexOf(item);
2214 }, 2217 this.editedItem = Object.assign({}, item);
2215 profile(item) { 2218 this.editedItem.fatherName = item.parentId.fatherName;
2216 this.editedIndex = this.studentsData.indexOf(item); 2219 this.editedItem.fatherCellNo = item.parentId.fatherCellNo;
2217 this.editedItem = Object.assign({}, item); 2220 this.editedItem.motherName = item.parentId.motherName;
2218 this.editedItem.fatherName = item.parentId.fatherName; 2221 this.editedItem.motherCellNo = item.parentId.motherCellNo;
2219 this.editedItem.fatherCellNo = item.parentId.fatherCellNo; 2222
2220 this.editedItem.motherName = item.parentId.motherName; 2223 this.profileStudentDialog = true;
2221 this.editedItem.motherCellNo = item.parentId.motherCellNo; 2224 },
2222 2225 deleteItem(item) {
2223 this.profileStudentDialog = true; 2226 let deleteStudent = {
2224 }, 2227 studentId: item._id,
2225 deleteItem(item) { 2228 };
2226 let deleteStudent = { 2229 http()
2227 studentId: item._id, 2230 .delete(
2228 }; 2231 "/deleteStudent",
2229 http() 2232 confirm("Are you sure you want to delete this?") && {
2230 .delete( 2233 params: deleteStudent,
2231 "/deleteStudent", 2234 }
2232 confirm("Are you sure you want to delete this?") && { 2235 )
2233 params: deleteStudent, 2236 .then((response) => {
2234 } 2237 this.snackbar = true;
2235 ) 2238 this.text = response.data.message;
2236 .then((response) => { 2239 this.color = "green";
2237 this.snackbar = true; 2240 this.findStudents();
2238 this.text = response.data.message; 2241 })
2239 this.color = "green"; 2242 .catch((error) => {
2240 this.findStudents(); 2243 this.snackbar = true;
2241 }) 2244 this.text = error.response.data.message;
2242 .catch((error) => { 2245 this.color = "error";
2243 this.snackbar = true; 2246 });
2244 this.text = error.response.data.message; 2247 },
2245 this.color = "error"; 2248 close() {
2246 }); 2249 this.editStudentDialog = false;
2247 }, 2250 },
2248 close() { 2251 closeStudentProfile() {
2249 this.editStudentDialog = false; 2252 this.profileStudentDialog = false;
2250 }, 2253 },
2251 closeStudentProfile() { 2254 copyData() {
2252 this.profileStudentDialog = false; 2255 this.addStudents.permanentAddress = this.addStudents.presentAddress;
2253 }, 2256 },
2254 copyData() { 2257 submit() {
2255 this.addStudents.permanentAddress = this.addStudents.presentAddress; 2258 if (this.$refs.form.validate()) {
2256 }, 2259 let addStudent = {
2257 submit() { 2260 parentId: this.parentId,
2258 if (this.$refs.form.validate()) { 2261 name: this.addStudents.name,
2259 let addStudent = { 2262 email: this.addStudents.email,
2260 parentId: this.parentId, 2263 role: this.addStudents.role,
2261 name: this.addStudents.name, 2264 dob: this.addStudents.date,
2262 email: this.addStudents.email, 2265 city: this.addStudents.city,
2263 role: this.addStudents.role, 2266 pincode: this.addStudents.pincode,
2264 dob: this.addStudents.date, 2267 country: this.addStudents.country,
2265 city: this.addStudents.city, 2268 permanentAddress: this.addStudents.permanentAddress,
2266 pincode: this.addStudents.pincode, 2269 presentAddress: this.addStudents.presentAddress,
2267 country: this.addStudents.country, 2270 mobile: this.addStudents.mobile,
2268 permanentAddress: this.addStudents.permanentAddress, 2271 state: this.addStudents.state,
2269 presentAddress: this.addStudents.presentAddress, 2272 gender: this.addStudents.gender,
2270 mobile: this.addStudents.mobile, 2273 establishmentYear: this.addStudents.establishmentYear,
2271 state: this.addStudents.state, 2274 classId: this.addStudents.select,
2272 gender: this.addStudents.gender, 2275 sectionId: this.addStudents.selectSection,
2273 establishmentYear: this.addStudents.establishmentYear, 2276 bloodGroup: this.addStudents.bloodGroup,
2274 classId: this.addStudents.select, 2277 medicalNotes: this.addStudents.medicalNotes,
2275 sectionId: this.addStudents.selectSection, 2278 height: this.addStudents.height,
2276 bloodGroup: this.addStudents.bloodGroup, 2279 weight: this.addStudents.weight,
2277 medicalNotes: this.addStudents.medicalNotes, 2280 rollNo: this.addStudents.rollNo,
2278 height: this.addStudents.height, 2281 };
2279 weight: this.addStudents.weight, 2282 if (this.imageUrl) {
2280 rollNo: this.addStudents.rollNo, 2283 var str = this.imageUrl;
2281 }; 2284 const [baseUrl, imageUrl] = str.split(/,/);
2282 if (this.imageUrl) { 2285 addStudent.upload = imageUrl;
2283 var str = this.imageUrl; 2286 }
2284 const [baseUrl, imageUrl] = str.split(/,/); 2287 this.loading = true;
2285 addStudent.upload = imageUrl; 2288 http()
2286 } 2289 .post("/createStudent", addStudent)
2287 this.loading = true; 2290 .then((response) => {
2288 http() 2291 this.snackbar = true;
2289 .post("/createStudent", addStudent) 2292 this.text = "New Student added successfully";
2290 .then((response) => { 2293 this.color = "green";
2291 this.snackbar = true; 2294 this.addStudentDialog = false;
2292 this.text = "New Student added successfully"; 2295 this.$refs.parentForm.reset();
2293 this.color = "green"; 2296 this.$refs.parentFormLgScr.reset();
2294 this.addStudentDialog = false; 2297 this.$refs.form.reset();
2295 this.$refs.parentForm.reset(); 2298 this.e2 = 1;
2296 this.$refs.parentFormLgScr.reset(); 2299 // this.clear();
2297 this.$refs.form.reset(); 2300 // this.clearParents();
2298 this.e2 = 1; 2301 this.loading = false;
2299 // this.clear(); 2302 })
2300 // this.clearParents(); 2303 .catch((error) => {
2301 this.loading = false; 2304 this.snackbar = true;
2302 }) 2305 this.text = error.response.data.message;
2303 .catch((error) => { 2306 this.color = "error";
2304 this.snackbar = true; 2307 this.loading = false;
2305 this.text = error.response.data.message; 2308 });
2306 this.color = "error"; 2309 }
2307 this.loading = false; 2310 },
2308 }); 2311 clear() {
2309 } 2312 this.$refs.form.reset();
2310 }, 2313 this.imageUrl = "";
2311 clear() { 2314 },
2312 this.$refs.form.reset(); 2315 clearParents() {
2313 this.imageUrl = ""; 2316 this.$refs.parentForm.reset();
2314 }, 2317 },
2315 clearParents() { 2318 save() {
2316 this.$refs.parentForm.reset(); 2319 let editStudent = {
2317 }, 2320 studentId: this.editedItem._id,
2318 save() { 2321 name: this.editedItem.name,
2319 let editStudent = { 2322 email: this.editedItem.email,
2320 studentId: this.editedItem._id, 2323 role: this.editedItem.role,
2321 name: this.editedItem.name, 2324 dob: this.editedItem.dob,
2322 email: this.editedItem.email, 2325 city: this.editedItem.city,
2323 role: this.editedItem.role, 2326 pincode: this.editedItem.pincode,
2324 dob: this.editedItem.dob, 2327 country: this.editedItem.country,
2325 city: this.editedItem.city, 2328 permanentAddress: this.editedItem.permanentAddress,
2326 pincode: this.editedItem.pincode, 2329 presentAddress: this.editedItem.presentAddress,
2327 country: this.editedItem.country, 2330 mobile: this.editedItem.mobile,
2328 permanentAddress: this.editedItem.permanentAddress, 2331 state: this.editedItem.state,
2329 presentAddress: this.editedItem.presentAddress, 2332 gender: this.editedItem.gender,
2330 mobile: this.editedItem.mobile, 2333 establishmentYear: this.editedItem.establishmentYear,
2331 state: this.editedItem.state, 2334 classId: this.editedItem.select,
2332 gender: this.editedItem.gender, 2335 sectionId: this.editedItem.selectSection,
2333 establishmentYear: this.editedItem.establishmentYear, 2336 bloodGroup: this.editedItem.bloodGroup,
2334 classId: this.editedItem.select, 2337 medicalNotes: this.editedItem.medicalNotes,
2335 sectionId: this.editedItem.selectSection, 2338 height: this.editedItem.height,
2336 bloodGroup: this.editedItem.bloodGroup, 2339 weight: this.editedItem.weight,
2337 medicalNotes: this.editedItem.medicalNotes, 2340 rollNo: this.editedItem.rollNo,
2338 height: this.editedItem.height, 2341 };
2339 weight: this.editedItem.weight, 2342 if (this.editImageUrl) {
2340 rollNo: this.editedItem.rollNo, 2343 var str = this.editImageUrl;
2341 }; 2344 const [baseUrl, editImageUrl] = str.split(/,/);
2342 if (this.editImageUrl) { 2345 editStudent.upload = editImageUrl;
2343 var str = this.editImageUrl; 2346 }
2344 const [baseUrl, editImageUrl] = str.split(/,/); 2347 this.editLoading = true;
2345 editStudent.upload = editImageUrl; 2348 http()
2346 } 2349 .put("/updateStudent", editStudent)
2347 this.editLoading = true; 2350 .then((response) => {
2348 http() 2351 this.snackbar = true;
2349 .put("/updateStudent", editStudent) 2352 this.text = response.data.message;
2350 .then((response) => { 2353 this.color = "green";
2351 this.snackbar = true; 2354 this.imageUrl = "";
2352 this.text = response.data.message; 2355 this.findStudents();
2353 this.color = "green"; 2356 this.close();
2354 this.imageUrl = ""; 2357 this.editLoading = false;
2355 this.findStudents(); 2358 })
2356 this.close(); 2359 .catch((error) => {
2357 this.editLoading = false; 2360 this.snackbar = true;
2358 }) 2361 this.text = error.response.data.statusText;
2359 .catch((error) => { 2362 this.color = "error";
2360 this.snackbar = true; 2363 this.editLoading = false;
2361 this.text = error.response.data.statusText; 2364 });
2362 this.color = "error"; 2365 },
2363 this.editLoading = false; 2366 submitParentDetails() {
2364 }); 2367 if (this.$refs.parentForm.validate()) {
2365 }, 2368 this.parentData.fatherCellNo = this.parentData.fatherCellNo;
2366 submitParentDetails() { 2369 this.parentData.motherCellNo = this.parentData.motherCellNo;
2367 if (this.$refs.parentForm.validate()) { 2370 let addparentDetails = {
2368 this.parentData.fatherCellNo = this.parentData.fatherCellNo; 2371 email: this.parentData.email,
2369 this.parentData.motherCellNo = this.parentData.motherCellNo; 2372 fatherName: this.parentData.fatherName,
2370 let addparentDetails = { 2373 fatherCellNo: this.parentData.fatherCellNo,
2371 email: this.parentData.email, 2374 motherName: this.parentData.motherName,
2372 fatherName: this.parentData.fatherName, 2375 motherCellNo: this.parentData.motherCellNo,
2373 fatherCellNo: this.parentData.fatherCellNo, 2376 fatherProfession: this.parentData.fatherProfession,
2374 motherName: this.parentData.motherName, 2377 motherProfession: this.parentData.motherProfession,
2375 motherCellNo: this.parentData.motherCellNo, 2378 password: this.parentData.password,
2376 fatherProfession: this.parentData.fatherProfession, 2379 role: "PARENT",
2377 motherProfession: this.parentData.motherProfession, 2380 };
2378 password: this.parentData.password, 2381 this.loading = true;
2379 role: "PARENT", 2382 http()
2380 }; 2383 .post("/createParent", addparentDetails)
2381 this.loading = true; 2384 .then((response) => {
2382 http() 2385 this.parentId = response.data.data.id;
2383 .post("/createParent", addparentDetails) 2386 this.e2 = 2;
2384 .then((response) => { 2387 this.snackbar = true;
2385 this.parentId = response.data.data.id; 2388 this.text = response.data.message;
2386 this.e2 = 2; 2389 this.color = "green";
2387 this.snackbar = true; 2390 // this.getStudentList();
2388 this.text = response.data.message; 2391 this.clear();
2389 this.color = "green"; 2392 this.loading = false;
2390 // this.getStudentList(); 2393 })
2391 this.clear(); 2394 .catch((error) => {
2392 this.loading = false; 2395 this.snackbar = true;
2393 }) 2396 this.text = error.response.data.message;
2394 .catch((error) => { 2397 this.color = "error";
2395 this.snackbar = true; 2398 if (error.response.data.statusText) {
2396 this.text = error.response.data.message; 2399 this.text = error.response.data.statusText;
2397 this.color = "error"; 2400 }
2398 if (error.response.data.statusText) { 2401 this.loading = false;
2399 this.text = error.response.data.statusText; 2402 });
2400 } 2403 }
2401 this.loading = false; 2404 },
2402 }); 2405 getParentDetails() {
2403 } 2406 if (this.parentData.fatherCellNo.length > 9) {
2404 }, 2407 this.showLoader = true;
2405 getParentDetails() { 2408 this.isFatherCellExists = false;
2406 if (this.parentData.fatherCellNo.length > 9) { 2409 http()
2407 this.showLoader = true; 2410 .get("getParticularParent", {
2408 this.isFatherCellExists = false; 2411 params: { fatherCellNo: this.parentData.fatherCellNo },
2409 http() 2412 headers: {
2410 .get("getParticularParent", { 2413 Authorization: "Bearer " + this.$store.state.token,
2411 params: { fatherCellNo: this.parentData.fatherCellNo }, 2414 },
2412 headers: { 2415 })
2413 Authorization: "Bearer " + this.$store.state.token, 2416 .then((response) => {
2414 }, 2417 this.showNext = true;
2415 }) 2418 this.showParent = false;
2416 .then((response) => { 2419 this.parentData = response.data.data;
2417 this.showNext = true; 2420 this.parentId = response.data.data._id;
2418 this.showParent = false; 2421 this.showLoader = false;
2419 this.parentData = response.data.data; 2422 this.isFatherCellExists = true;
2420 this.parentId = response.data.data._id; 2423 })
2421 this.showLoader = false; 2424 .catch((error) => {
2422 this.isFatherCellExists = true; 2425 // console.log("err====>", error.response.data.message);
2423 }) 2426 this.text = error.response.data.message;
2424 .catch((error) => { 2427 this.snackbar = true;
2425 // console.log("err====>", error.response.data.message); 2428 this.color = "error";
2426 this.text = error.response.data.message; 2429 if (this.text === "Data not found!") {
2427 this.snackbar = true; 2430 this.showNext = false;
2428 this.color = "error"; 2431 this.showParent = true;
2429 if (this.text === "Data not found!") { 2432 this.parentData.email = "";
2430 this.showNext = false; 2433 this.parentData.fatherName = "";
2431 this.showParent = true; 2434 this.parentData.motherName = "";
2432 this.parentData.email = ""; 2435 this.parentData.motherCellNo = "";
2433 this.parentData.fatherName = ""; 2436 this.parentData.fatherProfession = "";
2434 this.parentData.motherName = ""; 2437 this.parentData.motherProfession = "";
2435 this.parentData.motherCellNo = ""; 2438 this.parentData.password = "";
2436 this.parentData.fatherProfession = ""; 2439 }
2437 this.parentData.motherProfession = ""; 2440 this.showLoader = false;
2438 this.parentData.password = ""; 2441 });
2439 } 2442 }
2440 this.showLoader = false; 2443 },
2441 }); 2444 suspendStudentStatus(status, id) {
2442 } 2445 let suspendStudentData = {
2443 }, 2446 studentId: id,
2444 suspendStudentStatus(status, id) { 2447 status: status,
2445 let suspendStudentData = { 2448 };
2446 studentId: id, 2449 http()
2447 status: status, 2450 .put("/suspendStudentAccount", suspendStudentData)
2448 }; 2451 .then((response) => {
2449 http() 2452 this.findStudents();
2450 .put("/suspendStudentAccount", suspendStudentData) 2453 this.text = response.data.message;
2451 .then((response) => { 2454 this.color = "green";
2452 this.findStudents(); 2455 this.snackbar = true;
2453 this.text = response.data.message; 2456 })
2454 this.color = "green"; 2457 .catch((error) => {
2455 this.snackbar = true; 2458 this.snackbar = true;
2456 }) 2459 this.color = "error";
2457 .catch((error) => { 2460 this.text = error.response.data.message;
2458 this.snackbar = true; 2461 });
2459 this.color = "error"; 2462 },
2460 this.text = error.response.data.message; 2463 displaySearch() {
2461 }); 2464 (this.show = false), (this.showSearch = true);
2462 }, 2465 },
2463 displaySearch() { 2466 closeSearch() {
2464 (this.show = false), (this.showSearch = true); 2467 this.showSearch = false;
2465 }, 2468 this.show = true;
2466 closeSearch() { 2469 this.search = "";
2467 this.showSearch = false; 2470 },
2468 this.show = true; 2471 },
2469 this.search = ""; 2472 mounted() {
2470 }, 2473 const getCountryList = countryList();
2471 }, 2474 this.role = this.$store.state.role;
2472 mounted() { 2475 this.countries = getCountryList;
2473 const getCountryList = countryList(); 2476 var token = this.$store.state.token;
2474 this.role = this.$store.state.role; 2477 http()
2475 this.countries = getCountryList; 2478 .get("/getClassesList", {
2476 var token = this.$store.state.token; 2479 headers: { Authorization: "Bearer " + token },
2477 http() 2480 })
2478 .get("/getClassesList", { 2481 .then((response) => {
2479 headers: { Authorization: "Bearer " + token }, 2482 this.addclass = response.data.data;
2480 }) 2483 })
2481 .then((response) => { 2484 .catch((error) => {
2482 this.addclass = response.data.data; 2485 this.showLoader = false;
2483 }) 2486 if (error.response.status === 401) {
2484 .catch((error) => { 2487 this.$router.replace({ path: "/" });
2485 this.showLoader = false; 2488 this.$store.dispatch("setToken", null);
2486 if (error.response.status === 401) { 2489 this.$store.dispatch("Id", null);
2487 this.$router.replace({ path: "/" }); 2490 this.$store.dispatch("Role", null);
2488 this.$store.dispatch("setToken", null); 2491 }
2489 this.$store.dispatch("Id", null); 2492 });
2490 this.$store.dispatch("Role", null); 2493 },
2491 } 2494 };
2492 }); 2495 </script>
2493 }, 2496 <style scoped>
2494 }; 2497 .active {
2495 </script> 2498 background-color: gray;
2496 <style scoped> 2499 color: white !important;
2497 .active { 2500 }
2498 background-color: gray; 2501 .activebtn {
2499 color: white !important; 2502 color: black !important;
2500 } 2503 }
2501 .activebtn { 2504 </style>
src/pages/Subjects/subjects.vue
Diff comments   View file @8b7976c
1 <template> 1 <template>
2 <v-container fluid class="body-color"> 2 <v-container fluid class="body-color">
3 <!-- ****** EDIT Subject ****** --> 3 <!-- ****** EDIT Subject ****** -->
4 <v-dialog v-model="editSubjectDialog" max-width="600px" persistent> 4 <v-dialog v-model="editSubjectDialog" max-width="600px" persistent>
5 <v-card flat class="card-style pa-2" dark> 5 <v-card flat class="card-style pa-2" dark>
6 <v-layout> 6 <v-layout>
7 <v-flex xs12> 7 <v-flex xs12>
8 <label class="title text-xs-center">Edit Subject</label> 8 <label class="title text-xs-center">Edit Subject</label>
9 <v-icon size="24" class="right" @click="editSubjectDialog = false">cancel</v-icon> 9 <v-icon size="24" class="right" @click="editSubjectDialog = false">cancel</v-icon>
10 </v-flex> 10 </v-flex>
11 </v-layout> 11 </v-layout>
12 <v-container fluid> 12 <v-container fluid>
13 <v-form ref="formEditSubject" v-model="validEditSubject" lazy-validation> 13 <v-form ref="formEditSubject" v-model="validEditSubject" lazy-validation>
14 <v-layout> 14 <v-layout>
15 <v-flex xs4 class="pt-4 subheading"> 15 <v-flex xs4 class="pt-4 subheading">
16 <label class="right">Class:</label> 16 <label class="right">Class:</label>
17 </v-flex> 17 </v-flex>
18 <v-flex xs8 class="ml-3"> 18 <v-flex xs8 class="ml-3">
19 <v-select 19 <v-select
20 v-model="editedItem.classId" 20 v-model="editedItem.classId"
21 label="Select your class" 21 label="Select your class"
22 type="text" 22 type="text"
23 :items="classList" 23 :items="classList"
24 item-text="classNum" 24 item-text="classNum"
25 item-value="_id" 25 item-value="_id"
26 :rules="classRules" 26 :rules="classRules"
27 required 27 required
28 ></v-select> 28 ></v-select>
29 </v-flex> 29 </v-flex>
30 </v-layout> 30 </v-layout>
31 <v-layout> 31 <v-layout>
32 <v-flex xs4 sm4 class="pt-4 subheading"> 32 <v-flex xs4 sm4 class="pt-4 subheading">
33 <label class="right">Teacher Name :</label> 33 <label class="right">Teacher Name :</label>
34 </v-flex> 34 </v-flex>
35 <v-flex xs8 sm8 class="ml-3"> 35 <v-flex xs8 sm8 class="ml-3">
36 <v-select 36 <v-select
37 v-model="editedItem.teacherId" 37 v-model="editedItem.teacherId"
38 label="Select your teacher" 38 label="Select your teacher"
39 type="text" 39 type="text"
40 :items="teacherList" 40 :items="teacherList"
41 item-text="name" 41 item-text="name"
42 item-value="_id" 42 item-value="_id"
43 :rules="teacherRules" 43 :rules="teacherRules"
44 required 44 required
45 ></v-select> 45 ></v-select>
46 </v-flex> 46 </v-flex>
47 </v-layout> 47 </v-layout>
48 <v-layout> 48 <v-layout>
49 <v-flex xs4 sm4 class="pt-4 sybheading"> 49 <v-flex xs4 sm4 class="pt-4 sybheading">
50 <label class="right">Type :</label> 50 <label class="right">Type :</label>
51 </v-flex> 51 </v-flex>
52 <v-flex xs8 sm8 class="ml-3"> 52 <v-flex xs8 sm8 class="ml-3">
53 <v-select 53 <v-select
54 v-model="editedItem.type" 54 v-model="editedItem.type"
55 :items="type" 55 :items="type"
56 label="Select your Type" 56 label="Select your Type"
57 :rules="typeRules" 57 :rules="typeRules"
58 required 58 required
59 ></v-select> 59 ></v-select>
60 </v-flex> 60 </v-flex>
61 </v-layout> 61 </v-layout>
62 <v-layout> 62 <v-layout>
63 <v-flex xs4 sm4 class="pt-4 subheading"> 63 <v-flex xs4 sm4 class="pt-4 subheading">
64 <label class="right">Pass Mark :</label> 64 <label class="right">Pass Mark :</label>
65 </v-flex> 65 </v-flex>
66 <v-flex xs8 sm8 class="ml-3"> 66 <v-flex xs8 sm8 class="ml-3">
67 <v-text-field 67 <v-text-field
68 label="Fill your Pass Mark" 68 label="Fill your Pass Mark"
69 name="name" 69 name="name"
70 type="text" 70 type="text"
71 :rules="markRules" 71 :rules="markRules"
72 v-model="editedItem.passMarks" 72 v-model="editedItem.passMarks"
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-layout> 77 <v-layout>
78 <v-flex xs4 sm4 class="pt-4 subheading"> 78 <v-flex xs4 sm4 class="pt-4 subheading">
79 <label class="right">Final Mark :</label> 79 <label class="right">Final Mark :</label>
80 </v-flex> 80 </v-flex>
81 <v-flex xs8 sm8 class="ml-3"> 81 <v-flex xs8 sm8 class="ml-3">
82 <v-text-field 82 <v-text-field
83 label="Fill your final mark" 83 label="Fill your final mark"
84 name="name" 84 name="name"
85 type="text" 85 type="text"
86 :rules="finalRules" 86 :rules="finalRules"
87 v-model="editedItem.finalMarks" 87 v-model="editedItem.finalMarks"
88 required 88 required
89 ></v-text-field> 89 ></v-text-field>
90 </v-flex> 90 </v-flex>
91 </v-layout> 91 </v-layout>
92 <v-layout> 92 <v-layout>
93 <v-flex xs4 class="pt-4 subheading"> 93 <v-flex xs4 class="pt-4 subheading">
94 <label class="right">Subject:</label> 94 <label class="right">Subject:</label>
95 </v-flex> 95 </v-flex>
96 <v-flex xs8 class="ml-3"> 96 <v-flex xs8 class="ml-3">
97 <v-text-field 97 <v-text-field
98 placeholder="fill your Subject" 98 placeholder="fill your Subject"
99 v-model="editedItem.subjectName" 99 v-model="editedItem.subjectName"
100 :rules="subjectRules" 100 :rules="subjectRules"
101 type="text" 101 type="text"
102 name="email" 102 name="email"
103 required 103 required
104 ></v-text-field> 104 ></v-text-field>
105 </v-flex> 105 </v-flex>
106 </v-layout> 106 </v-layout>
107 <v-layout> 107 <v-layout>
108 <v-flex xs4 sm4 class="pt-4 subheading"> 108 <v-flex xs4 sm4 class="pt-4 subheading">
109 <label class="right">Subject Author :</label> 109 <label class="right">Subject Author :</label>
110 </v-flex> 110 </v-flex>
111 <v-flex xs8 sm8 class="ml-3"> 111 <v-flex xs8 sm8 class="ml-3">
112 <v-text-field 112 <v-text-field
113 v-model="editedItem.subjectAuthor" 113 v-model="editedItem.subjectAuthor"
114 placeholder="fill your Subject Author" 114 placeholder="fill your Subject Author"
115 name="name" 115 name="name"
116 type="text" 116 type="text"
117 ></v-text-field> 117 ></v-text-field>
118 </v-flex> 118 </v-flex>
119 </v-layout> 119 </v-layout>
120 <v-layout> 120 <v-layout>
121 <v-flex xs4 sm4 class="pt-4 subheading"> 121 <v-flex xs4 sm4 class="pt-4 subheading">
122 <label class="right">Subject Code:</label> 122 <label class="right">Subject Code:</label>
123 </v-flex> 123 </v-flex>
124 <v-flex xs8 sm8 class="ml-3"> 124 <v-flex xs8 sm8 class="ml-3">
125 <v-text-field 125 <v-text-field
126 v-model="editedItem.subjectCode" 126 v-model="editedItem.subjectCode"
127 placeholder="fill your Subject Code" 127 placeholder="fill your Subject Code"
128 name="name" 128 name="name"
129 type="text" 129 type="text"
130 ></v-text-field> 130 ></v-text-field>
131 </v-flex> 131 </v-flex>
132 </v-layout> 132 </v-layout>
133 <v-flex xs12 sm12> 133 <v-flex xs12 sm12>
134 <v-card-actions> 134 <v-card-actions>
135 <v-spacer></v-spacer> 135 <v-spacer></v-spacer>
136 <v-btn 136 <v-btn
137 round
138 dark
139 @click="save"
140 :loading="editLoading"
141 class="add-button"
142 >Update Subject</v-btn>
137 round 143 </v-card-actions>
138 dark 144 </v-flex>
139 @click="save" 145 </v-form>
140 :loading="editLoading" 146 </v-container>
141 class="add-button" 147 </v-card>
142 >Update Subject</v-btn> 148 </v-dialog>
143 </v-card-actions> 149
144 </v-flex> 150 <!-- ****** VIEW PROFIL NOTICE BOARD ****** -->
145 </v-form> 151
146 </v-container> 152 <v-dialog v-model="viewSubjectDialog" max-width="500px" persistent>
147 </v-card> 153 <v-card flat class="card-style pa-3" dark>
148 </v-dialog> 154 <v-layout>
149 155 <v-flex xs12>
150 <!-- ****** VIEW PROFIL NOTICE BOARD ****** --> 156 <label class="title text-xs-center">View Subject</label>
151 157 <v-icon size="24" class="right" @click="viewSubjectDialog = false">cancel</v-icon>
152 <v-dialog v-model="viewSubjectDialog" max-width="500px" persistent> 158 </v-flex>
153 <v-card flat class="card-style pa-3" dark> 159 </v-layout>
154 <v-layout> 160 <v-card-text>
155 <v-flex xs12> 161 <v-container grid-list-md>
156 <label class="title text-xs-center">View Subject</label> 162 <v-layout wrap>
157 <v-icon size="24" class="right" @click="viewSubjectDialog = false">cancel</v-icon> 163 <v-flex>
158 </v-flex> 164 <v-layout>
159 </v-layout> 165 <v-flex xs6 sm4>
160 <v-card-text> 166 <h5 class="right my-1">
161 <v-container grid-list-md> 167 <b>Subject Name:</b>
162 <v-layout wrap> 168 </h5>
163 <v-flex> 169 </v-flex>
164 <v-layout> 170 <v-flex sm8 xs6>
165 <v-flex xs6 sm4> 171 <h5 class="my-1">{{ editedItem.subjectName }}</h5>
166 <h5 class="right my-1"> 172 </v-flex>
167 <b>Subject Name:</b> 173 </v-layout>
168 </h5> 174 <v-layout>
169 </v-flex> 175 <v-flex xs6 sm4>
170 <v-flex sm8 xs6> 176 <h5 class="right my-1">
171 <h5 class="my-1">{{ editedItem.subjectName }}</h5> 177 <b>Subject Author:</b>
172 </v-flex> 178 </h5>
173 </v-layout> 179 </v-flex>
174 <v-layout> 180 <v-flex sm8 xs6>
175 <v-flex xs6 sm4> 181 <h5 class="my-1">{{ editedItem.subjectAuthor }}</h5>
176 <h5 class="right my-1"> 182 </v-flex>
177 <b>Subject Author:</b> 183 </v-layout>
178 </h5> 184 <v-layout>
179 </v-flex> 185 <v-flex xs6 sm4>
180 <v-flex sm8 xs6> 186 <h5 class="right my-1">
181 <h5 class="my-1">{{ editedItem.subjectAuthor }}</h5> 187 <b>Subject :</b>
182 </v-flex> 188 </h5>
183 </v-layout> 189 </v-flex>
184 <v-layout> 190 <v-flex sm8 xs6>
185 <v-flex xs6 sm4> 191 <h5 class="my-1">{{ editedItem.subjectCode }}</h5>
186 <h5 class="right my-1"> 192 </v-flex>
187 <b>Subject :</b> 193 </v-layout>
188 </h5> 194 <!-- <v-layout>
189 </v-flex> 195 <v-flex xs6 sm4>
190 <v-flex sm8 xs6> 196 <h5 class="right my-1">
191 <h5 class="my-1">{{ editedItem.subjectCode }}</h5> 197 <b>Teacher :</b>
192 </v-flex> 198 </h5>
193 </v-layout> 199 </v-flex>
194 <!-- <v-layout> 200 <v-flex sm8 xs6>
195 <v-flex xs6 sm4> 201 <h5 class="my-1">{{ editedItem.teacherId }}</h5>
196 <h5 class="right my-1"> 202 </v-flex>
197 <b>Teacher :</b> 203 </v-layout>-->
198 </h5> 204 <v-layout>
199 </v-flex> 205 <v-flex xs6 sm4>
200 <v-flex sm8 xs6> 206 <h5 class="right my-1">
201 <h5 class="my-1">{{ editedItem.teacherId }}</h5> 207 <b>Pass Marks :</b>
202 </v-flex> 208 </h5>
203 </v-layout>--> 209 </v-flex>
204 <v-layout> 210 <v-flex sm8 xs6>
205 <v-flex xs6 sm4> 211 <h5 class="my-1">{{ editedItem.passMarks }}</h5>
206 <h5 class="right my-1"> 212 </v-flex>
207 <b>Pass Marks :</b> 213 </v-layout>
208 </h5> 214 <v-layout>
209 </v-flex> 215 <v-flex xs6 sm4>
210 <v-flex sm8 xs6> 216 <h5 class="right my-1">
211 <h5 class="my-1">{{ editedItem.passMarks }}</h5> 217 <b>Final Marks :</b>
212 </v-flex> 218 </h5>
213 </v-layout> 219 </v-flex>
214 <v-layout> 220 <v-flex sm8 xs6>
215 <v-flex xs6 sm4> 221 <h5 class="my-1">{{ editedItem.finalMarks }}</h5>
216 <h5 class="right my-1"> 222 </v-flex>
217 <b>Final Marks :</b> 223 </v-layout>
218 </h5> 224 <v-layout>
219 </v-flex> 225 <v-flex xs6 sm4>
220 <v-flex sm8 xs6> 226 <h5 class="right my-1">
221 <h5 class="my-1">{{ editedItem.finalMarks }}</h5> 227 <b>Type :</b>
222 </v-flex> 228 </h5>
223 </v-layout> 229 </v-flex>
224 <v-layout> 230 <v-flex sm8 xs6>
225 <v-flex xs6 sm4> 231 <h5 class="my-1">{{ editedItem.type }}</h5>
226 <h5 class="right my-1"> 232 </v-flex>
227 <b>Type :</b> 233 </v-layout>
228 </h5> 234 </v-flex>
229 </v-flex> 235 </v-layout>
230 <v-flex sm8 xs6> 236 </v-container>
231 <h5 class="my-1">{{ editedItem.type }}</h5> 237 </v-card-text>
232 </v-flex> 238 </v-card>
233 </v-layout> 239 </v-dialog>
234 </v-flex> 240
235 </v-layout> 241 <!-- ****** EXISTING SUBJECTS TABLE ****** -->
236 </v-container> 242 <v-toolbar color="transparent" flat>
237 </v-card-text> 243 <v-btn
238 </v-card> 244 fab
239 </v-dialog> 245 dark
240 246 class="open-dialog-button hidden-xl-only hidden-md-only hidden-lg-only"
241 <!-- ****** EXISTING SUBJECTS TABLE ****** --> 247 small
242 <v-toolbar color="transparent" flat> 248 @click="addSubjectDialog = true"
243 <v-btn 249 >
244 fab 250 <v-icon dark>add</v-icon>
245 dark 251 </v-btn>
246 class="open-dialog-button hidden-xl-only hidden-md-only hidden-lg-only" 252 <v-flex xs1 class="hidden-sm-only hidden-xs-only">
247 small 253 <v-btn
248 @click="addSubjectDialog = true" 254 round
249 > 255 class="open-dialog-button"
250 <v-icon dark>add</v-icon> 256 dark
251 </v-btn> 257 @click="addSubjectDialog = true"
252 <v-flex xs1 class="hidden-sm-only hidden-xs-only"> 258 v-if="role != 'TEACHER' "
253 <v-btn 259 >
254 round 260 <v-icon class="white--text pr-1" size="20">add</v-icon>Add Subject
255 class="open-dialog-button" 261 </v-btn>
256 dark 262 </v-flex>
257 @click="addSubjectDialog = true" 263 <v-spacer></v-spacer>
258 v-if="role != 'TEACHER' " 264 <v-flex lg2 md2 xs12 v-show="show">
259 > 265 <v-select
260 <v-icon class="white--text pr-1" size="20">add</v-icon>Add Subject 266 :items="classList"
261 </v-btn> 267 label="Select Your Class"
262 </v-flex> 268 v-model="addSubject.classId"
263 <v-spacer></v-spacer> 269 item-text="classNum"
264 <v-flex lg2 md2 xs12 v-show="show"> 270 item-value="_id"
265 <v-select 271 name="Select Class"
266 :items="classList" 272 :rules="classRules"
267 label="Select Your Class" 273 @change="getClassSubject"
268 v-model="addSubject.classId" 274 class="pl-2"
269 item-text="classNum" 275 required
270 item-value="_id" 276 ></v-select>
271 name="Select Class" 277 </v-flex>
272 :rules="classRules" 278 <v-card-title class="body-1" v-show="show">
273 @change="getClassSubject" 279 <v-btn icon flat @click="displaySearch">
274 class="pl-2" 280 <v-avatar size="27">
275 required 281 <img src="/static/icon/search.png" alt="icon" />
276 ></v-select> 282 </v-avatar>
277 </v-flex> 283 </v-btn>
278 <v-card-title class="body-1" v-show="show"> 284 </v-card-title>
279 <v-btn icon flat @click="displaySearch"> 285 <v-flex xs9 sm9 md2 lg2 xl2 v-if="showSearch">
280 <v-avatar size="27"> 286 <v-layout>
281 <img src="/static/icon/search.png" alt="icon" /> 287 <v-text-field
282 </v-avatar> 288 autofocus
283 </v-btn> 289 v-model="search"
284 </v-card-title> 290 label="Search"
285 <v-flex xs9 sm9 md2 lg2 xl2 v-if="showSearch"> 291 prepend-inner-icon="search"
286 <v-layout> 292 color="primary"
287 <v-text-field 293 style="transition: 0.8s cubic-bezier(0.25, 0.8, 0.25, 1); !important"
288 autofocus 294 ></v-text-field>
289 v-model="search" 295 <v-icon @click="closeSearch" color="error">close</v-icon>
290 label="Search" 296 </v-layout>
291 prepend-inner-icon="search" 297 </v-flex>
292 color="primary" 298 </v-toolbar>
293 style="transition: 0.8s cubic-bezier(0.25, 0.8, 0.25, 1); !important" 299 <v-data-table
294 ></v-text-field> 300 :headers="headers"
295 <v-icon @click="closeSearch" color="error">close</v-icon> 301 :items="subjectList.subjects"
296 </v-layout> 302 :pagination.sync="pagination"
297 </v-flex> 303 :search="search"
298 </v-toolbar> 304 >
299 <v-data-table 305 <template slot="items" slot-scope="props">
300 :headers="headers" 306 <tr class="tr">
301 :items="subjectList.subjects" 307 <td class="td-row td">{{ props.index + 1 }}</td>
302 :pagination.sync="pagination" 308 <td class="text-xs-center td td-row">{{ props.item.subjectName }}</td>
303 :search="search" 309 <td class="text-xs-center td td-row">{{ props.item.subjectAuthor }}</td>
304 > 310 <td class="text-xs-center td td-row">{{ props.item.subjectCode }}</td>
305 <template slot="items" slot-scope="props"> 311 <!-- <td class="text-xs-center td td-row">{{ props.item.teacherId }}</td> -->
306 <tr class="tr"> 312 <td class="text-xs-center td td-row">{{ props.item.passMarks }}</td>
307 <td class="td-row td">{{ props.index + 1 }}</td> 313 <td class="text-xs-center td td-row">{{ props.item.finalMarks }}</td>
308 <td class="text-xs-center td td-row">{{ props.item.subjectName }}</td> 314 <td class="text-xs-center td td-row">{{ props.item.type }}</td>
309 <td class="text-xs-center td td-row">{{ props.item.subjectAuthor }}</td> 315
310 <td class="text-xs-center td td-row">{{ props.item.subjectCode }}</td> 316 <td class="text-xs-center td td-row">
311 <!-- <td class="text-xs-center td td-row">{{ props.item.teacherId }}</td> --> 317 <span>
312 <td class="text-xs-center td td-row">{{ props.item.passMarks }}</td> 318 <!-- <v-tooltip top>
313 <td class="text-xs-center td td-row">{{ props.item.finalMarks }}</td> 319 <img
314 <td class="text-xs-center td td-row">{{ props.item.type }}</td> 320 slot="activator"
315 321 style="cursor:pointer; width:25px; height:25px; "
316 <td class="text-xs-center td td-row"> 322 class="mr-3"
317 <span> 323 @click="profile(props.item)"
318 <!-- <v-tooltip top> 324 src="/static/icon/view.png"
319 <img 325 />
320 slot="activator" 326 <span>View</span>
321 style="cursor:pointer; width:25px; height:25px; " 327 </v-tooltip>-->
322 class="mr-3" 328 <v-tooltip top>
323 @click="profile(props.item)" 329 <img
324 src="/static/icon/view.png" 330 slot="activator"
325 /> 331 style="cursor:pointer; width:20px; height:18px; "
326 <span>View</span> 332 class="mr-3"
327 </v-tooltip>--> 333 @click="editItem(props.item)"
328 <v-tooltip top> 334 src="/static/icon/edit.png"
329 <img 335 />
330 slot="activator" 336 <span>Edit</span>
331 style="cursor:pointer; width:20px; height:18px; " 337 </v-tooltip>
332 class="mr-3" 338 <v-tooltip top>
333 @click="editItem(props.item)" 339 <img
334 src="/static/icon/edit.png" 340 slot="activator"
335 /> 341 style="cursor:pointer; width:20px; height:20px; "
336 <span>Edit</span> 342 class="mr-3"
337 </v-tooltip> 343 @click="deleteItem(props.item)"
338 <v-tooltip top> 344 src="/static/icon/delete.png"
339 <img 345 />
340 slot="activator" 346 <span>Delete</span>
341 style="cursor:pointer; width:20px; height:20px; " 347 </v-tooltip>
342 class="mr-3" 348 </span>
343 @click="deleteItem(props.item)" 349 </td>
344 src="/static/icon/delete.png" 350 </tr>
345 /> 351 </template>
346 <span>Delete</span> 352 <v-alert
347 </v-tooltip> 353 slot="no-results"
348 </span> 354 :value="true"
349 </td> 355 color="error"
350 </tr> 356 icon="warning"
351 </template> 357 >Your search for "{{ search }}" found no results.</v-alert>
352 <v-alert 358 </v-data-table>
353 slot="no-results" 359 <!-- ****** ADD MULTIPLE Subject ****** -->
354 :value="true" 360 <v-snackbar
355 color="error" 361 :timeout="timeout"
356 icon="warning" 362 :top="y === 'top'"
357 >Your search for "{{ search }}" found no results.</v-alert> 363 :right="x === 'right'"
358 </v-data-table> 364 :vertical="mode === 'vertical'"
359 <!-- ****** ADD MULTIPLE Subject ****** --> 365 v-model="snackbar"
360 <v-snackbar 366 :color="color"
361 :timeout="timeout" 367 >{{ text }}</v-snackbar>
362 :top="y === 'top'" 368 <v-dialog v-model="addSubjectDialog" max-width="600px" persistent>
363 :right="x === 'right'" 369 <v-card flat class="card-style pa-2" dark>
364 :vertical="mode === 'vertical'" 370 <v-layout>
365 v-model="snackbar" 371 <v-flex xs12>
366 :color="color" 372 <label class="title text-xs-center">Add Subject</label>
367 >{{ text }}</v-snackbar> 373 <v-icon size="24" class="right" @click="addSubjectDialog = false">cancel</v-icon>
368 <v-dialog v-model="addSubjectDialog" max-width="600px" persistent> 374 </v-flex>
369 <v-card flat class="card-style pa-2" dark> 375 </v-layout>
370 <v-layout> 376 <v-container fluid fill-height>
371 <v-flex xs12> 377 <v-layout align-center>
372 <label class="title text-xs-center">Add Subject</label> 378 <v-flex xs12>
373 <v-icon size="24" class="right" @click="addSubjectDialog = false">cancel</v-icon> 379 <v-form ref="form" v-model="valid" lazy-validation>
374 </v-flex> 380 <v-layout>
375 </v-layout> 381 <v-flex xs4 sm4 class="pt-4 subheading">
376 <v-container fluid fill-height> 382 <label class="right">Class Name :</label>
377 <v-layout align-center> 383 </v-flex>
378 <v-flex xs12> 384 <v-flex xs8 sm8 class="ml-3">
379 <v-form ref="form" v-model="valid" lazy-validation> 385 <v-select
380 <v-layout> 386 v-model="addSubject.classId"
381 <v-flex xs4 sm4 class="pt-4 subheading"> 387 label="Select your class"
382 <label class="right">Class Name :</label> 388 type="text"
383 </v-flex> 389 :items="classList"
384 <v-flex xs8 sm8 class="ml-3"> 390 item-text="classNum"
385 <v-select 391 item-value="_id"
386 v-model="addSubject.classId" 392 :rules="classRules"
387 label="Select your class" 393 required
388 type="text" 394 ></v-select>
389 :items="classList" 395 </v-flex>
390 item-text="classNum" 396 </v-layout>
391 item-value="_id" 397 <v-layout>
392 :rules="classRules" 398 <v-flex xs4 sm4 class="pt-4 subheading">
393 required 399 <label class="right">Teacher Name :</label>
394 ></v-select> 400 </v-flex>
395 </v-flex> 401 <v-flex xs8 sm8 class="ml-3">
396 </v-layout> 402 <v-select
397 <v-layout> 403 v-model="addSubject.teacherId"
398 <v-flex xs4 sm4 class="pt-4 subheading"> 404 label="Select your teacher"
399 <label class="right">Teacher Name :</label> 405 type="text"
400 </v-flex> 406 :items="teacherList"
401 <v-flex xs8 sm8 class="ml-3"> 407 item-text="name"
402 <v-select 408 item-value="_id"
403 v-model="addSubject.teacherId" 409 :rules="teacherRules"
404 label="Select your teacher" 410 required
405 type="text" 411 ></v-select>
406 :items="teacherList" 412 </v-flex>
407 item-text="name" 413 </v-layout>
408 item-value="_id" 414 <v-layout>
409 :rules="teacherRules" 415 <v-flex xs4 sm4 class="pt-4 sybheading">
410 required 416 <label class="right">Type :</label>
411 ></v-select> 417 </v-flex>
412 </v-flex> 418 <v-flex xs8 sm8 class="ml-3">
413 </v-layout> 419 <v-select
414 <v-layout> 420 v-model="addSubject.type"
415 <v-flex xs4 sm4 class="pt-4 sybheading"> 421 :items="type"
416 <label class="right">Type :</label> 422 label="Select your Type"
417 </v-flex> 423 :rules="typeRules"
418 <v-flex xs8 sm8 class="ml-3"> 424 required
419 <v-select 425 ></v-select>
420 v-model="addSubject.type" 426 </v-flex>
421 :items="type" 427 </v-layout>
422 label="Select your Type" 428 <v-layout>
423 :rules="typeRules" 429 <v-flex xs4 sm4 class="pt-4 subheading">
424 required 430 <label class="right">Pass Mark :</label>
425 ></v-select> 431 </v-flex>
426 </v-flex> 432 <v-flex xs8 sm8 class="ml-3">
427 </v-layout> 433 <v-text-field
428 <v-layout> 434 label="Fill your Pass Mark"
429 <v-flex xs4 sm4 class="pt-4 subheading"> 435 name="name"
430 <label class="right">Pass Mark :</label> 436 type="text"
431 </v-flex> 437 :rules="markRules"
432 <v-flex xs8 sm8 class="ml-3"> 438 v-model="addSubject.passMarks"
433 <v-text-field 439 required
434 label="Fill your Pass Mark" 440 ></v-text-field>
435 name="name" 441 </v-flex>
436 type="text" 442 </v-layout>
437 :rules="markRules" 443 <v-layout>
438 v-model="addSubject.passMarks" 444 <v-flex xs4 sm4 class="pt-4 subheading">
439 required 445 <label class="right">Final Mark :</label>
440 ></v-text-field> 446 </v-flex>
441 </v-flex> 447 <v-flex xs8 sm8 class="ml-3">
442 </v-layout> 448 <v-text-field
443 <v-layout> 449 label="Fill your final mark"
444 <v-flex xs4 sm4 class="pt-4 subheading"> 450 name="name"
445 <label class="right">Final Mark :</label> 451 type="text"
446 </v-flex> 452 :rules="finalRules"
447 <v-flex xs8 sm8 class="ml-3"> 453 v-model="addSubject.finalMarks"
448 <v-text-field 454 required
449 label="Fill your final mark" 455 ></v-text-field>
450 name="name" 456 </v-flex>
451 type="text" 457 </v-layout>
452 :rules="finalRules" 458 <v-layout>
453 v-model="addSubject.finalMarks" 459 <v-flex xs4 sm4 class="pt-4 subheading">
454 required 460 <label class="right">Subject :</label>
455 ></v-text-field> 461 </v-flex>
456 </v-flex> 462 <v-flex xs8 sm8 class="ml-3">
457 </v-layout> 463 <v-text-field
458 <v-layout> 464 v-model="addSubject.subjectName"
459 <v-flex xs4 sm4 class="pt-4 subheading"> 465 placeholder="fill your Subject Name"
460 <label class="right">Subject :</label> 466 name="name"
461 </v-flex> 467 type="text"
462 <v-flex xs8 sm8 class="ml-3"> 468 :rules="subjectRules"
463 <v-text-field 469 required
464 v-model="addSubject.subjectName" 470 ></v-text-field>
465 placeholder="fill your Subject Name" 471 </v-flex>
466 name="name" 472 </v-layout>
467 type="text" 473 <v-layout>
468 :rules="subjectRules" 474 <v-flex xs4 sm4 class="pt-4 subheading">
469 required 475 <label class="right">Subject Author :</label>
470 ></v-text-field> 476 </v-flex>
471 </v-flex> 477 <v-flex xs8 sm8 class="ml-3">
472 </v-layout> 478 <v-text-field
473 <v-layout> 479 v-model="addSubject.subjectAuthor"
474 <v-flex xs4 sm4 class="pt-4 subheading"> 480 placeholder="fill your Subject Author"
475 <label class="right">Subject Author :</label> 481 name="name"
476 </v-flex> 482 type="text"
477 <v-flex xs8 sm8 class="ml-3"> 483 ></v-text-field>
478 <v-text-field 484 </v-flex>
479 v-model="addSubject.subjectAuthor" 485 </v-layout>
480 placeholder="fill your Subject Author" 486 <v-layout>
481 name="name" 487 <v-flex xs4 sm4 class="pt-4 subheading">
482 type="text" 488 <label class="right">Subject Code:</label>
483 ></v-text-field> 489 </v-flex>
484 </v-flex> 490 <v-flex xs8 sm8 class="ml-3">
485 </v-layout> 491 <v-text-field
486 <v-layout> 492 v-model="addSubject.subjectCode"
487 <v-flex xs4 sm4 class="pt-4 subheading"> 493 placeholder="fill your Subject Code"
488 <label class="right">Subject Code:</label> 494 name="name"
489 </v-flex> 495 type="text"
490 <v-flex xs8 sm8 class="ml-3"> 496 ></v-text-field>
491 <v-text-field 497 </v-flex>
492 v-model="addSubject.subjectCode" 498 </v-layout>
493 placeholder="fill your Subject Code" 499 <v-layout>
494 name="name" 500 <v-flex xs12 sm12>
495 type="text" 501 <v-card-actions>
496 ></v-text-field> 502 <v-spacer></v-spacer>
497 </v-flex> 503 <v-btn
498 </v-layout> 504 @click="submit"
499 <v-layout> 505 round
500 <v-flex xs12 sm12> 506 dark
501 <v-card-actions> 507 :loading="loading"
502 <v-spacer></v-spacer> 508 class="add-button"
503 <v-btn 509 >Add Subject</v-btn>
504 @click="submit" 510 </v-card-actions>
505 round 511 </v-flex>
506 dark 512 </v-layout>
507 :loading="loading" 513 </v-form>
508 class="add-button" 514 </v-flex>
509 >Add Subject</v-btn> 515 </v-layout>
510 </v-card-actions> 516 </v-container>
511 </v-flex> 517 </v-card>
512 </v-layout> 518 </v-dialog>
513 </v-form> 519 <div class="loader" v-if="showLoader">
514 </v-flex> 520 <v-progress-circular indeterminate color="white"></v-progress-circular>
515 </v-layout> 521 </div>
516 </v-container> 522 </v-container>
517 </v-card> 523 </template>
518 </v-dialog> 524
519 <div class="loader" v-if="showLoader"> 525 <script>
520 <v-progress-circular indeterminate color="white"></v-progress-circular> 526 import http from "@/Services/http.js";
521 </div> 527 import Util from "@/util";
522 </v-container> 528
523 </template> 529 export default {
524 530 data: () => ({
525 <script> 531 snackbar: false,
526 import http from "@/Services/http.js"; 532 y: "top",
527 import Util from "@/util"; 533 x: "right",
528 534 role: "",
529 export default { 535 mode: "",
530 data: () => ({ 536 timeout: 3000,
531 snackbar: false, 537 text: "",
532 y: "top", 538 color: "",
533 x: "right", 539 show: true,
534 role: "", 540 showSearch: false,
535 mode: "", 541 showLoader: false,
536 timeout: 3000, 542 loading: false,
537 text: "", 543 editLoading: false,
538 color: "", 544 date: null,
539 show: true, 545 search: "",
540 showSearch: false, 546 viewSubjectDialog: false,
541 showLoader: false, 547 editSubjectDialog: false,
542 loading: false, 548 valid: true,
543 editLoading: false, 549 validEditSubject: true,
544 date: null, 550 addSubjectDialog: false,
545 search: "", 551 // isActive: true,
546 viewSubjectDialog: false, 552 // newActive: false,
547 editSubjectDialog: false, 553 type: ["Optional", "Mandatory"],
548 valid: true, 554 pagination: {
549 validEditSubject: true, 555 rowsPerPage: 10,
550 addSubjectDialog: false, 556 },
551 // isActive: true, 557 token: "",
552 // newActive: false, 558 classRules: [(v) => !!v || " Class Name is required"],
553 type: ["Optional", "Mandatory"], 559 teacherRules: [(v) => !!v || " Teacher Name is required"],
554 pagination: { 560 typeRules: [(v) => !!v || "Type is required"],
555 rowsPerPage: 10, 561 markRules: [(v) => !!v || " Pass Mark is required"],
556 }, 562 finalRules: [(v) => !!v || "Final MArk is required"],
557 token: "", 563 subjectRules: [(v) => !!v || " Subject Name is required"],
558 classRules: [(v) => !!v || " Class Name is required"], 564 headers: [
559 teacherRules: [(v) => !!v || " Teacher Name is required"], 565 {
560 typeRules: [(v) => !!v || "Type is required"], 566 text: "No",
561 markRules: [(v) => !!v || " Pass Mark is required"], 567 align: "",
562 finalRules: [(v) => !!v || "Final MArk is required"], 568 sortable: false,
563 subjectRules: [(v) => !!v || " Subject Name is required"], 569 value: "No",
564 headers: [ 570 },
565 { 571 {
566 text: "No", 572 text: "Subject Name",
567 align: "", 573 value: "subjectName",
568 sortable: false, 574 sortable: false,
569 value: "No", 575 align: "center",
570 }, 576 },
571 { 577 {
572 text: "Subject Name", 578 text: "Subject Author",
573 value: "subjectName", 579 value: "subjectAuthor",
574 sortable: false, 580 sortable: false,
575 align: "center", 581 align: "center",
576 }, 582 },
577 { 583 {
578 text: "Subject Author", 584 text: "Subject Code",
579 value: "subjectAuthor", 585 value: "subjectCode",
580 sortable: false, 586 sortable: false,
581 align: "center", 587 align: "center",
582 }, 588 },
583 { 589 // {
584 text: "Subject Code", 590 // text: "Teacher",
585 value: "subjectCode", 591 // value: "teacherId",
586 sortable: false, 592 // sortable: false,
587 align: "center", 593 // align: "center"
588 }, 594 // },
589 // { 595 {
590 // text: "Teacher", 596 text: "Pass Marks",
591 // value: "teacherId", 597 value: "passMarks",
592 // sortable: false, 598 sortable: false,
593 // align: "center" 599 align: "center",
594 // }, 600 },
595 { 601 {
596 text: "Pass Marks", 602 text: "Final Marks",
597 value: "passMarks", 603 value: "finalMarks",
598 sortable: false, 604 sortable: false,
599 align: "center", 605 align: "center",
600 }, 606 },
601 { 607 {
602 text: "Final Marks", 608 text: "Type",
603 value: "finalMarks", 609 value: "type",
604 sortable: false, 610 sortable: false,
605 align: "center", 611 align: "center",
606 }, 612 },
607 { 613 { text: "Action", value: "", sortable: false, align: "center" },
608 text: "Type", 614 ],
609 value: "type", 615 subjectList: [],
610 sortable: false, 616 classList: [],
611 align: "center", 617 teacherList: [],
612 }, 618 editedIndex: -1,
613 { text: "Action", value: "", sortable: false, align: "center" }, 619 addSubject: {},
614 ], 620
615 subjectList: [], 621 editedItem: {
616 classList: [], 622 // subjectName: "",
617 teacherList: [], 623 // subjectAuthor: ""
618 editedIndex: -1, 624 },
619 addSubject: {}, 625 }),
620 626 methods: {
621 editedItem: { 627 pickFile() {
622 // subjectName: "", 628 this.$refs.image.click();
623 // subjectAuthor: "" 629 },
624 }, 630 editItem(item) {
625 }), 631 this.editedIndex = this.subjectList.subjects;
626 methods: { 632 this.editedItem = Object.assign({}, item);
627 pickFile() { 633 this.dialog = true;
628 this.$refs.image.click(); 634 this.editSubjectDialog = true;
629 }, 635 },
630 editItem(item) { 636 profile(item) {
631 this.editedIndex = this.subjectList.subjects; 637 this.editedIndex = this.subjectList.subjects;
632 this.editedItem = Object.assign({}, item); 638 this.editedItem = Object.assign({}, item);
633 this.dialog = true; 639 this.dialog1 = true;
634 this.editSubjectDialog = true; 640 this.viewSubjectDialog = true;
635 }, 641 },
636 profile(item) { 642 deleteItem(item) {
637 this.editedIndex = this.subjectList.subjects; 643 let deleteSubject = {
638 this.editedItem = Object.assign({}, item); 644 classId: this.addSubject.classId,
639 this.dialog1 = true; 645 subjectId: item._id,
640 this.viewSubjectDialog = true; 646 };
641 }, 647 http()
642 deleteItem(item) { 648 .delete(
643 let deleteSubject = { 649 "/deleteSubject",
644 classId: this.addSubject.classId, 650 confirm("Are you sure you want to delete this?") && {
645 subjectId: item._id, 651 params: deleteSubject,
646 }; 652 }
647 http() 653 )
648 .delete( 654 .then((response) => {
649 "/deleteSubject", 655 this.getClassSubject(_id);
650 confirm("Are you sure you want to delete this?") && { 656 this.snackbar = true;
651 params: deleteSubject, 657 this.text = "Successfully delete Existing Subject";
652 } 658 this.color = "green";
653 ) 659 })
654 .then((response) => { 660 .catch((error) => {
655 this.getClassSubject(_id); 661 this.snackbar = true;
656 this.snackbar = true; 662 this.text = error.response.data.message;
657 this.text = "Successfully delete Existing Subject"; 663 this.color = "error";
658 this.color = "green"; 664 });
659 }) 665 },
660 .catch((error) => { 666 close() {
661 this.snackbar = true; 667 this.editSubjectDialog = false;
662 this.text = error.response.data.message; 668 },
663 this.color = "error"; 669 close1() {
664 }); 670 this.viewSubjectDialog = false;
665 }, 671 },
666 close() { 672 submit() {
667 this.editSubjectDialog = false; 673 if (this.$refs.form.validate()) {
668 }, 674 http()
669 close1() { 675 .post("/addSubject", this.addSubject)
670 this.viewSubjectDialog = false; 676 .then((response) => {
671 }, 677 this.getClassSubject(_id);
672 submit() { 678 this.snackbar = true;
673 if (this.$refs.form.validate()) { 679 this.text = "New Subject added successfully";
674 http() 680 this.clear();
675 .post("/addSubject", this.addSubject) 681 this.color = "green";
676 .then((response) => { 682 this.addSubjectDialog = false;
677 this.getClassSubject(_id); 683 })
678 this.snackbar = true; 684 .catch((error) => {
679 this.text = "New Subject added successfully"; 685 // console.log(error);
680 this.clear(); 686 this.snackbar = true;
681 this.color = "green"; 687 this.text = error.response.data.message;
682 this.addSubjectDialog = false; 688 this.color = "error";
683 }) 689 });
684 .catch((error) => { 690 }
685 // console.log(error); 691 },
686 this.snackbar = true; 692 clear() {
687 this.text = error.response.data.message; 693 this.$refs.form.reset();
688 this.color = "error"; 694 },
689 }); 695 save() {
690 } 696 if (this.$refs.formEditSubject.validate()) {
691 }, 697 let editSubject = {
692 clear() { 698 classId: this.editedItem.classId,
693 this.$refs.form.reset(); 699 subjectId: this.editedItem._id,
694 }, 700 teacherId: this.editedItem.teacherId,
695 save() { 701 type: this.editedItem.type,
696 if (this.$refs.formEditSubject.validate()) { 702 passMarks: this.editedItem.passMarks,
697 let editSubject = { 703 finalMarks: this.editedItem.finalMarks,
698 classId: this.editedItem.classId, 704 subjectAuthor: this.editedItem.subjectAuthor,
699 subjectId: this.editedItem._id, 705 subjectCode: this.editedItem.subjectCode,
700 teacherId: this.editedItem.teacherId, 706 subjectName: this.editedItem.subjectName,
701 type: this.editedItem.type, 707 };
702 passMarks: this.editedItem.passMarks, 708 this.editLoading = true;
703 finalMarks: this.editedItem.finalMarks, 709 http()
704 subjectAuthor: this.editedItem.subjectAuthor, 710 .put("/updateSubject", editSubject)
705 subjectCode: this.editedItem.subjectCode, 711 .then((response) => {
706 subjectName: this.editedItem.subjectName, 712 this.snackbar = true;
707 }; 713 this.text = "Successfully Edit Existing Subject";
708 this.editLoading = true; 714 this.color = "green";
709 http() 715 this.editLoading = false;
710 .put("/updateSubject", editSubject) 716 this.editSubjectDialog = false;
711 .then((response) => { 717 http()
712 this.snackbar = true; 718 .get(
713 this.text = "Successfully Edit Existing Subject"; 719 "/getParticularClass",
714 this.color = "green"; 720 { params: { classId: _id } },
715 this.editLoading = false; 721 {
716 this.editSubjectDialog = false; 722 headers: { Authorization: "Bearer " + this.token },
717 http() 723 }
718 .get( 724 )
719 "/getParticularClass", 725 .then((response) => {
720 { params: { classId: _id } }, 726 this.subjectList = response.data.data;
721 { 727 this.snackbar = true;
722 headers: { Authorization: "Bearer " + this.token }, 728 this.color = "green";
723 } 729 this.text = response.data.message;
724 ) 730 this.close();
725 .then((response) => { 731 })
726 this.subjectList = response.data.data; 732 .catch((err) => {
727 this.snackbar = true; 733 // console.log("err====>", err);
734 this.snackbar = true;
735 this.color = "error";
736 this.text = error.response.data.message;
728 this.color = "green"; 737 });
729 this.text = response.data.message; 738 })
730 this.close(); 739 .catch((error) => {
731 }) 740 this.editLoading = false;
732 .catch((err) => { 741
733 // console.log("err====>", err); 742 // console.log(error);
734 this.snackbar = true; 743 });
735 this.color = "error"; 744 }
736 this.text = error.response.data.message; 745 },
737 }); 746 getClassSubject(_id) {
738 }) 747 this.showLoader = true;
739 .catch((error) => { 748 // this.classId = this.classId;
740 this.editLoading = false; 749 http()
741 750 .get(
742 // console.log(error); 751 "/getParticularClass",
743 }); 752 { params: { classId: _id } },
744 } 753 {
745 }, 754 headers: { Authorization: "Bearer " + this.token },
746 getClassSubject(_id) { 755 }
747 this.showLoader = true; 756 )
748 // this.classId = this.classId; 757 .then((response) => {
749 http() 758 this.subjectList = response.data.data;
750 .get( 759 this.showLoader = false;
751 "/getParticularClass", 760 })
752 { params: { classId: _id } }, 761 .catch((err) => {
753 { 762 this.showLoader = false;
754 headers: { Authorization: "Bearer " + this.token }, 763 });
755 } 764 },
756 ) 765 getClass() {
757 .then((response) => { 766 http()
758 this.subjectList = response.data.data; 767 .get("/getClassesList", {
759 this.showLoader = false; 768 headers: { Authorization: "Bearer " + this.token },
760 }) 769 })
761 .catch((err) => { 770 .then((response) => {
762 this.showLoader = false; 771 this.classList = response.data.data;
763 }); 772 })
764 }, 773 .catch((error) => {
765 getClass() { 774 if (error.response.status === 401) {
766 http() 775 this.$router.replace({ path: "/" });
767 .get("/getClassesList", { 776 this.$store.dispatch("setToken", null);
768 headers: { Authorization: "Bearer " + this.token }, 777 this.$store.dispatch("Id", null);
769 }) 778 }
770 .then((response) => { 779 });
771 this.classList = response.data.data; 780 },
772 }) 781 getTeacherList() {
773 .catch((error) => { 782 this.showLoader = true;
774 if (error.response.status === 401) { 783 var token = this.$store.state.token;
775 this.$router.replace({ path: "/" }); 784 http()
776 this.$store.dispatch("setToken", null); 785 .get("/getTeachersList", {
777 this.$store.dispatch("Id", null); 786 headers: { Authorization: "Bearer " + token },
778 } 787 })
779 }); 788 .then((response) => {
780 }, 789 this.teacherList = response.data.data;
781 getTeacherList() { 790 this.showLoader = false;
782 this.showLoader = true; 791 // console.log("getTeacherList=====>",this.desserts)
783 var token = this.$store.state.token; 792 })
784 http() 793 .catch((error) => {
785 .get("/getTeachersList", { 794 this.showLoader = false;
786 headers: { Authorization: "Bearer " + token }, 795 if (error.response.status === 401) {
787 }) 796 this.$router.replace({ path: "/" });
788 .then((response) => { 797 this.$store.dispatch("setToken", null);
789 this.teacherList = response.data.data; 798 this.$store.dispatch("Id", null);
790 this.showLoader = false; 799 }
791 // console.log("getTeacherList=====>",this.desserts) 800 });
792 }) 801 },
793 .catch((error) => { 802 displaySearch() {
794 this.showLoader = false; 803 (this.show = false), (this.showSearch = true);
795 if (error.response.status === 401) { 804 },
796 this.$router.replace({ path: "/" }); 805 closeSearch() {
797 this.$store.dispatch("setToken", null); 806 this.showSearch = false;
798 this.$store.dispatch("Id", null); 807 this.show = true;
799 } 808 this.search = "";
800 }); 809 },
801 }, 810 },
802 displaySearch() { 811 mounted() {
803 (this.show = false), (this.showSearch = true); 812 this.token = this.$store.state.token;
804 }, 813 // this.getNoticeDataList();
805 closeSearch() { 814 this.getClass();
806 this.showSearch = false; 815 this.getTeacherList();
807 this.show = true; 816 this.role = this.$store.state.role;
808 this.search = ""; 817 },
809 }, 818 };
810 }, 819 </script>
src/pages/Teachers/teachers.vue
Diff comments   View file @8b7976c
1 <template> 1 <template>
2 <v-container fluid class="body-color"> 2 <v-container fluid class="body-color">
3 <!-- ****** EDIT TEACHERS DETAILS ****** --> 3 <!-- ****** EDIT TEACHERS DETAILS ****** -->
4 <v-dialog v-model="editTeacherDialog" max-width="1160px" scrollable persistent> 4 <v-dialog v-model="editTeacherDialog" max-width="1160px" scrollable persistent>
5 <v-card flat class="card-style" dark> 5 <v-card flat class="card-style" dark>
6 <v-card-text> 6 <v-card-text>
7 <v-layout> 7 <v-layout>
8 <v-flex xs12> 8 <v-flex xs12>
9 <label class="title text-xs-center">Edit Teacher Details</label> 9 <label class="title text-xs-center">Edit Teacher Details</label>
10 <v-icon size="24" class="right" @click="editTeacherDialog = false">cancel</v-icon> 10 <v-icon size="24" class="right" @click="editTeacherDialog = false">cancel</v-icon>
11 </v-flex> 11 </v-flex>
12 </v-layout> 12 </v-layout>
13 <v-container fluid> 13 <v-container fluid>
14 <v-layout> 14 <v-layout>
15 <v-flex xs12 class="text-xs-center text-sm-center text-md-center text-lg-center my-4"> 15 <v-flex xs12 class="text-xs-center text-sm-center text-md-center text-lg-center my-4">
16 <v-avatar size="100px" v-if="!editedItem.profilePicUrl && !imageUrl"> 16 <v-avatar size="100px" v-if="!editedItem.profilePicUrl && !imageUrl">
17 <img src="/static/icon/user.png" /> 17 <img src="/static/icon/user.png" />
18 </v-avatar> 18 </v-avatar>
19 <img 19 <img
20 :src="editedItem.profilePicUrl" 20 :src="editedItem.profilePicUrl"
21 v-else-if="editedItem.profilePicUrl && !imageUrl" 21 v-else-if="editedItem.profilePicUrl && !imageUrl"
22 height="150" 22 height="150"
23 style="border-radius:50%; width:150px" 23 style="border-radius:50%; width:150px"
24 /> 24 />
25 <img 25 <img
26 v-if="imageUrl" 26 v-if="imageUrl"
27 :src="imageUrl" 27 :src="imageUrl"
28 height="150" 28 height="150"
29 style="border-radius:50%; width:150px" 29 style="border-radius:50%; width:150px"
30 /> 30 />
31 <input 31 <input
32 type="file" 32 type="file"
33 style="display:none" 33 style="display:none"
34 ref="image" 34 ref="image"
35 accept="image/*" 35 accept="image/*"
36 @change="onFilePicked" 36 @change="onFilePicked"
37 /> 37 />
38 </v-flex> 38 </v-flex>
39 </v-layout> 39 </v-layout>
40 <v-layout wrap> 40 <v-layout wrap>
41 <v-flex xs12 sm6> 41 <v-flex xs12 sm6>
42 <v-layout> 42 <v-layout>
43 <v-flex xs4 class="pt-4 subheading"> 43 <v-flex xs4 class="pt-4 subheading">
44 <label class="right hidden-xs-only hidden-sm-only">Full Name:</label> 44 <label class="right hidden-xs-only hidden-sm-only">Full Name:</label>
45 <label class="right hidden-lg-only hidden-md-only hidden-xl-only">Name:</label> 45 <label class="right hidden-lg-only hidden-md-only hidden-xl-only">Name:</label>
46 </v-flex> 46 </v-flex>
47 <v-flex xs8 class="ml-3"> 47 <v-flex xs8 class="ml-3">
48 <v-text-field 48 <v-text-field
49 v-model="editedItem.name" 49 v-model="editedItem.name"
50 placeholder="fill your full Name" 50 placeholder="fill your full Name"
51 type="text" 51 type="text"
52 required 52 required
53 ></v-text-field> 53 ></v-text-field>
54 </v-flex> 54 </v-flex>
55 </v-layout> 55 </v-layout>
56 </v-flex> 56 </v-flex>
57 <v-flex xs12 sm6> 57 <v-flex xs12 sm6>
58 <v-layout> 58 <v-layout>
59 <v-flex xs4 sm4 class="pt-4 subheading"> 59 <v-flex xs4 sm4 class="pt-4 subheading">
60 <label class="right">Email ID:</label> 60 <label class="right">Email ID:</label>
61 </v-flex> 61 </v-flex>
62 <v-flex xs8 sm8 class="ml-3"> 62 <v-flex xs8 sm8 class="ml-3">
63 <v-text-field 63 <v-text-field
64 placeholder="fill your email" 64 placeholder="fill your email"
65 v-model="editedItem.email" 65 v-model="editedItem.email"
66 type="text" 66 type="text"
67 required 67 required
68 ></v-text-field> 68 ></v-text-field>
69 </v-flex> 69 </v-flex>
70 </v-layout> 70 </v-layout>
71 </v-flex> 71 </v-flex>
72 </v-layout> 72 </v-layout>
73 <v-layout wrap> 73 <v-layout wrap>
74 <v-flex xs12 sm6> 74 <v-flex xs12 sm6>
75 <v-layout> 75 <v-layout>
76 <v-flex xs4 class="pt-4 subheading"> 76 <v-flex xs4 class="pt-4 subheading">
77 <label class="right hidden-sm-only hidden-xs-only">Date of Birth:</label> 77 <label class="right hidden-sm-only hidden-xs-only">Date of Birth:</label>
78 <label class="right hidden-lg-only hidden-xl-only hidden-md-only">D.O.B:</label> 78 <label class="right hidden-lg-only hidden-xl-only hidden-md-only">D.O.B:</label>
79 </v-flex> 79 </v-flex>
80 <v-flex xs8 class="ml-3"> 80 <v-flex xs8 class="ml-3">
81 <v-menu 81 <v-menu
82 ref="menu" 82 ref="menu"
83 :close-on-content-click="false" 83 :close-on-content-click="false"
84 v-model="menu2" 84 v-model="menu2"
85 :nudge-right="40" 85 :nudge-right="40"
86 lazy 86 lazy
87 transition="scale-transition" 87 transition="scale-transition"
88 offset-y 88 offset-y
89 full-width 89 full-width
90 min-width="290px" 90 min-width="290px"
91 > 91 >
92 <v-text-field 92 <v-text-field
93 slot="activator" 93 slot="activator"
94 v-model="editedItem.dob" 94 v-model="editedItem.dob"
95 placeholder="Select date" 95 placeholder="Select date"
96 ></v-text-field> 96 ></v-text-field>
97 <v-date-picker 97 <v-date-picker
98 ref="picker" 98 ref="picker"
99 v-model="editedItem.dob" 99 v-model="editedItem.dob"
100 :max="new Date().toISOString().substr(0, 10)" 100 :max="new Date().toISOString().substr(0, 10)"
101 min="1950-01-01" 101 min="1950-01-01"
102 @input="menu2 = false" 102 @input="menu2 = false"
103 ></v-date-picker> 103 ></v-date-picker>
104 </v-menu> 104 </v-menu>
105 </v-flex> 105 </v-flex>
106 </v-layout> 106 </v-layout>
107 </v-flex> 107 </v-flex>
108 <v-flex xs12 sm6> 108 <v-flex xs12 sm6>
109 <v-layout> 109 <v-layout>
110 <v-flex xs4 class="pt-4 subheading"> 110 <v-flex xs4 class="pt-4 subheading">
111 <label class="right">City:</label> 111 <label class="right">City:</label>
112 </v-flex> 112 </v-flex>
113 <v-flex xs8 class="ml-3"> 113 <v-flex xs8 class="ml-3">
114 <v-text-field 114 <v-text-field
115 v-model="editedItem.city" 115 v-model="editedItem.city"
116 placeholder="fill your City Name" 116 placeholder="fill your City Name"
117 type="text" 117 type="text"
118 required 118 required
119 ></v-text-field> 119 ></v-text-field>
120 </v-flex> 120 </v-flex>
121 </v-layout> 121 </v-layout>
122 </v-flex> 122 </v-flex>
123 </v-layout> 123 </v-layout>
124 <v-layout wrap> 124 <v-layout wrap>
125 <v-flex xs12 sm6> 125 <v-flex xs12 sm6>
126 <v-layout> 126 <v-layout>
127 <v-flex xs4 class="pt-4 subheading"> 127 <v-flex xs4 class="pt-4 subheading">
128 <label class="right">State:</label> 128 <label class="right">State:</label>
129 </v-flex> 129 </v-flex>
130 <v-flex xs8 class="ml-3"> 130 <v-flex xs8 class="ml-3">
131 <v-text-field 131 <v-text-field
132 v-model="editedItem.state" 132 v-model="editedItem.state"
133 placeholder="fill your State Name" 133 placeholder="fill your State Name"
134 type="text" 134 type="text"
135 required 135 required
136 ></v-text-field> 136 ></v-text-field>
137 </v-flex> 137 </v-flex>
138 </v-layout> 138 </v-layout>
139 </v-flex> 139 </v-flex>
140 <v-flex xs12 sm6> 140 <v-flex xs12 sm6>
141 <v-layout> 141 <v-layout>
142 <v-flex xs4 class="pt-4 subheading"> 142 <v-flex xs4 class="pt-4 subheading">
143 <label class="right">PinCode:</label> 143 <label class="right">PinCode:</label>
144 </v-flex> 144 </v-flex>
145 <v-flex xs8 class="ml-3"> 145 <v-flex xs8 class="ml-3">
146 <v-text-field 146 <v-text-field
147 v-model="editedItem.pincode" 147 v-model="editedItem.pincode"
148 placeholder="fill your pincode" 148 placeholder="fill your pincode"
149 type="number" 149 type="number"
150 required 150 required
151 ></v-text-field> 151 ></v-text-field>
152 </v-flex> 152 </v-flex>
153 </v-layout> 153 </v-layout>
154 </v-flex> 154 </v-flex>
155 </v-layout> 155 </v-layout>
156 <v-layout wrap> 156 <v-layout wrap>
157 <v-flex xs12 sm6> 157 <v-flex xs12 sm6>
158 <v-layout> 158 <v-layout>
159 <v-flex xs4 class="pt-4 subheading"> 159 <v-flex xs4 class="pt-4 subheading">
160 <label class="right hidden-xs-only hidden-sm-only">Mobile No:</label> 160 <label class="right hidden-xs-only hidden-sm-only">Mobile No:</label>
161 <label class="right hidden-lg-only hidden-md-only hidden-xl-only">Mobile:</label> 161 <label class="right hidden-lg-only hidden-md-only hidden-xl-only">Mobile:</label>
162 </v-flex> 162 </v-flex>
163 <v-flex xs8 class="ml-3"> 163 <v-flex xs8 class="ml-3">
164 <v-text-field 164 <v-text-field
165 v-model="editedItem.mobileNo" 165 v-model="editedItem.mobileNo"
166 placeholder="fill your MobileNo" 166 placeholder="fill your MobileNo"
167 type="number" 167 type="number"
168 required 168 required
169 ></v-text-field> 169 ></v-text-field>
170 </v-flex> 170 </v-flex>
171 </v-layout> 171 </v-layout>
172 </v-flex> 172 </v-flex>
173 <v-flex xs12 sm6> 173 <v-flex xs12 sm6>
174 <v-layout> 174 <v-layout>
175 <v-flex xs4 class="pt-4 subheading"> 175 <v-flex xs4 class="pt-4 subheading">
176 <label class="right hidden-xs-only hidden-sm-only">Select Country:</label> 176 <label class="right hidden-xs-only hidden-sm-only">Select Country:</label>
177 <label class="right hidden-lg-only hidden-md-only hidden-xl-only">Country:</label> 177 <label class="right hidden-lg-only hidden-md-only hidden-xl-only">Country:</label>
178 </v-flex> 178 </v-flex>
179 <v-flex xs8 sm8 class="ml-3"> 179 <v-flex xs8 sm8 class="ml-3">
180 <v-autocomplete 180 <v-autocomplete
181 v-model="editedItem.country" 181 v-model="editedItem.country"
182 :items="countries" 182 :items="countries"
183 placeholder="Select Country Name" 183 placeholder="Select Country Name"
184 required 184 required
185 ></v-autocomplete> 185 ></v-autocomplete>
186 </v-flex> 186 </v-flex>
187 </v-layout> 187 </v-layout>
188 </v-flex> 188 </v-flex>
189 </v-layout> 189 </v-layout>
190 <v-layout wrap> 190 <v-layout wrap>
191 <v-flex xs12 sm6> 191 <v-flex xs12 sm6>
192 <v-layout> 192 <v-layout>
193 <v-flex xs4 class="pt-4 subheading"> 193 <v-flex xs4 class="pt-4 subheading">
194 <label class="right">Join Date:</label> 194 <label class="right">Join Date:</label>
195 </v-flex> 195 </v-flex>
196 <v-flex xs8 sm8 class="ml-3"> 196 <v-flex xs8 sm8 class="ml-3">
197 <v-menu 197 <v-menu
198 ref="menu" 198 ref="menu"
199 :close-on-content-click="false" 199 :close-on-content-click="false"
200 v-model="menu3" 200 v-model="menu3"
201 :nudge-right="40" 201 :nudge-right="40"
202 lazy 202 lazy
203 transition="scale-transition" 203 transition="scale-transition"
204 offset-y 204 offset-y
205 full-width 205 full-width
206 min-width="290px" 206 min-width="290px"
207 > 207 >
208 <v-text-field 208 <v-text-field
209 slot="activator" 209 slot="activator"
210 v-model="editedItem.joinDate" 210 v-model="editedItem.joinDate"
211 placeholder="Select date" 211 placeholder="Select date"
212 ></v-text-field> 212 ></v-text-field>
213 <v-date-picker 213 <v-date-picker
214 ref="picker" 214 ref="picker"
215 v-model="editedItem.joinDate" 215 v-model="editedItem.joinDate"
216 :max="new Date().toISOString().substr(0, 10)" 216 :max="new Date().toISOString().substr(0, 10)"
217 min="1950-01-01" 217 min="1950-01-01"
218 @input="menu3 = false" 218 @input="menu3 = false"
219 ></v-date-picker> 219 ></v-date-picker>
220 </v-menu> 220 </v-menu>
221 </v-flex> 221 </v-flex>
222 </v-layout> 222 </v-layout>
223 </v-flex> 223 </v-flex>
224 <v-flex xs12 sm6> 224 <v-flex xs12 sm6>
225 <v-layout> 225 <v-layout>
226 <v-flex xs4 class="pt-4 subheading"> 226 <v-flex xs4 class="pt-4 subheading">
227 <label class="right hidden-xs-only hidden-sm-only">Uplaod Image:</label> 227 <label class="right hidden-xs-only hidden-sm-only">Uplaod Image:</label>
228 <label class="right hidden-lg-only hidden-md-only hidden-xl-only">Uplaod :</label> 228 <label class="right hidden-lg-only hidden-md-only hidden-xl-only">Uplaod :</label>
229 </v-flex> 229 </v-flex>
230 <v-flex xs8 sm8 class="ml-3"> 230 <v-flex xs8 sm8 class="ml-3">
231 <v-text-field 231 <v-text-field
232 label="Select Image" 232 label="Select Image"
233 @click="pickFile" 233 @click="pickFile"
234 v-model="imageName" 234 v-model="imageName"
235 append-icon="attach_file" 235 append-icon="attach_file"
236 ></v-text-field> 236 ></v-text-field>
237 </v-flex> 237 </v-flex>
238 </v-layout> 238 </v-layout>
239 </v-flex> 239 </v-flex>
240 </v-layout> 240 </v-layout>
241 <v-layout class="hidden-xs-only hidden-sm-only" wrap> 241 <v-layout class="hidden-xs-only hidden-sm-only" wrap>
242 <v-flex xs12 sm6> 242 <v-flex xs12 sm6>
243 <v-layout> 243 <v-layout>
244 <v-flex xs4 sm4 class="pt-4 subheading"> 244 <v-flex xs4 sm4 class="pt-4 subheading">
245 <label class="right">Present Address:</label> 245 <label class="right">Present Address:</label>
246 </v-flex> 246 </v-flex>
247 <v-flex xs8 sm8 class="ml-3"> 247 <v-flex xs8 sm8 class="ml-3">
248 <v-text-field 248 <v-text-field
249 name="input-4-3" 249 name="input-4-3"
250 v-model="editedItem.presentAddress" 250 v-model="editedItem.presentAddress"
251 placeholder="fill Your present Address" 251 placeholder="fill Your present Address"
252 required 252 required
253 ></v-text-field> 253 ></v-text-field>
254 </v-flex> 254 </v-flex>
255 </v-layout> 255 </v-layout>
256 </v-flex> 256 </v-flex>
257 <v-flex xs12 sm6> 257 <v-flex xs12 sm6>
258 <v-layout> 258 <v-layout>
259 <v-flex xs4 sm4 class="pt-4 subheading"> 259 <v-flex xs4 sm4 class="pt-4 subheading">
260 <label class="right">Permanent Address:</label> 260 <label class="right">Permanent Address:</label>
261 </v-flex> 261 </v-flex>
262 <v-flex xs12 sm8 class="ml-3"> 262 <v-flex xs12 sm8 class="ml-3">
263 <v-text-field 263 <v-text-field
264 name="input-4-3" 264 name="input-4-3"
265 v-model="editedItem.permanentAddress" 265 v-model="editedItem.permanentAddress"
266 placeholder="fill Your Permanent Address" 266 placeholder="fill Your Permanent Address"
267 required 267 required
268 ></v-text-field> 268 ></v-text-field>
269 </v-flex> 269 </v-flex>
270 </v-layout> 270 </v-layout>
271 </v-flex> 271 </v-flex>
272 </v-layout> 272 </v-layout>
273 <v-layout class="hidden-lg-only hidden-md-only hidden-xl-only" wrap> 273 <v-layout class="hidden-lg-only hidden-md-only hidden-xl-only" wrap>
274 <v-flex xs12 sm12> 274 <v-flex xs12 sm12>
275 <v-layout> 275 <v-layout>
276 <v-flex xs12 sm3 class="pt-4 subheading text-xs-center"> 276 <v-flex xs12 sm3 class="pt-4 subheading text-xs-center">
277 <label class>Present Address:</label> 277 <label class>Present Address:</label>
278 </v-flex> 278 </v-flex>
279 </v-layout> 279 </v-layout>
280 <v-layout> 280 <v-layout>
281 <v-flex xs12 sm12> 281 <v-flex xs12 sm12>
282 <v-textarea 282 <v-textarea
283 name="input-4-3" 283 name="input-4-3"
284 v-model="editedItem.presentAddress" 284 v-model="editedItem.presentAddress"
285 placeholder="fill Your present Address" 285 placeholder="fill Your present Address"
286 required 286 required
287 ></v-textarea> 287 ></v-textarea>
288 </v-flex> 288 </v-flex>
289 </v-layout> 289 </v-layout>
290 </v-flex> 290 </v-flex>
291 <v-flex xs12 sm12> 291 <v-flex xs12 sm12>
292 <v-layout> 292 <v-layout>
293 <v-flex xs12 sm3 class="pt-4 pr-4 subheading text-xs-center addressForm"> 293 <v-flex xs12 sm3 class="pt-4 pr-4 subheading text-xs-center addressForm">
294 <label>Permanent Address:</label> 294 <label>Permanent Address:</label>
295 </v-flex> 295 </v-flex>
296 </v-layout> 296 </v-layout>
297 <v-layout> 297 <v-layout>
298 <v-flex xs12 sm12> 298 <v-flex xs12 sm12>
299 <v-textarea 299 <v-textarea
300 name="input-4-3" 300 name="input-4-3"
301 v-model="editedItem.permanentAddress" 301 v-model="editedItem.permanentAddress"
302 placeholder="fill Your Permanent Address" 302 placeholder="fill Your Permanent Address"
303 required 303 required
304 ></v-textarea> 304 ></v-textarea>
305 </v-flex> 305 </v-flex>
306 </v-layout> 306 </v-layout>
307 </v-flex> 307 </v-flex>
308 </v-layout> 308 </v-layout>
309 <v-layout> 309 <v-layout>
310 <v-flex xs12 sm12> 310 <v-flex xs12 sm12>
311 <v-flex xs12 sm12> 311 <v-flex xs12 sm12>
312 <v-layout class="right"> 312 <v-layout class="right">
313 <v-btn @click="save" round dark :loading="loading" class="add-button">Save</v-btn> 313 <v-btn @click="save" round dark :loading="loading" class="add-button">Save</v-btn>
314 </v-layout> 314 </v-layout>
315 </v-flex> 315 </v-flex>
316 </v-flex> 316 </v-flex>
317 </v-layout> 317 </v-layout>
318 </v-container> 318 </v-container>
319 </v-card-text> 319 </v-card-text>
320 </v-card> 320 </v-card>
321 </v-dialog> 321 </v-dialog>
322 322
323 <!-- ****** PROFILE VIEW TEACHERS DETAILS ****** --> 323 <!-- ****** PROFILE VIEW TEACHERS DETAILS ****** -->
324 324
325 <v-dialog v-model="viewTeacherProfileDialog" max-width="500px" persistent> 325 <v-dialog v-model="viewTeacherProfileDialog" max-width="500px" persistent>
326 <v-card flat class="card-style pa-3" dark> 326 <v-card flat class="card-style pa-3" dark>
327 <v-layout> 327 <v-layout>
328 <v-flex xs12> 328 <v-flex xs12>
329 <label class="title text-xs-center">View Teacher</label> 329 <label class="title text-xs-center">View Teacher</label>
330 <v-icon size="24" class="right" @click="viewTeacherProfileDialog = false">cancel</v-icon> 330 <v-icon size="24" class="right" @click="viewTeacherProfileDialog = false">cancel</v-icon>
331 </v-flex> 331 </v-flex>
332 </v-layout> 332 </v-layout>
333 <v-card-text> 333 <v-card-text>
334 <v-container grid-list-md> 334 <v-container grid-list-md>
335 <v-layout wrap> 335 <v-layout wrap>
336 <v-flex> 336 <v-flex>
337 <v-flex align-center justify-center layout text-xs-center> 337 <v-flex align-center justify-center layout text-xs-center>
338 <v-avatar size="80"> 338 <v-avatar size="80">
339 <img src="/static/icon/user.png" v-if="!editedItem.profilePicUrl" /> 339 <img src="/static/icon/user.png" v-if="!editedItem.profilePicUrl" />
340 <img :src="editedItem.profilePicUrl" v-else-if="editedItem.profilePicUrl" /> 340 <img :src="editedItem.profilePicUrl" v-else-if="editedItem.profilePicUrl" />
341 </v-avatar> 341 </v-avatar>
342 </v-flex> 342 </v-flex>
343 <v-layout> 343 <v-layout>
344 <v-flex xs5 sm6> 344 <v-flex xs5 sm6>
345 <h5 class="right my-1"> 345 <h5 class="right my-1">
346 <b>Full Name:</b> 346 <b>Full Name:</b>
347 </h5> 347 </h5>
348 </v-flex> 348 </v-flex>
349 <v-flex sm6 xs8> 349 <v-flex sm6 xs8>
350 <h5 class="my-1">{{ editedItem.name }}</h5> 350 <h5 class="my-1">{{ editedItem.name }}</h5>
351 </v-flex> 351 </v-flex>
352 </v-layout> 352 </v-layout>
353 <v-layout> 353 <v-layout>
354 <v-flex xs5 sm6> 354 <v-flex xs5 sm6>
355 <h5 class="right my-1"> 355 <h5 class="right my-1">
356 <b>Email:</b> 356 <b>Email:</b>
357 </h5> 357 </h5>
358 </v-flex> 358 </v-flex>
359 <v-flex sm6 xs8> 359 <v-flex sm6 xs8>
360 <h5 class="my-1">{{ editedItem.email }}</h5> 360 <h5 class="my-1">{{ editedItem.email }}</h5>
361 </v-flex> 361 </v-flex>
362 </v-layout> 362 </v-layout>
363 <v-layout> 363 <v-layout>
364 <v-flex xs5 sm6> 364 <v-flex xs5 sm6>
365 <h5 class="right my-1"> 365 <h5 class="right my-1">
366 <b>City:</b> 366 <b>City:</b>
367 </h5> 367 </h5>
368 </v-flex> 368 </v-flex>
369 <v-flex sm6 xs8> 369 <v-flex sm6 xs8>
370 <h5 class="my-1">{{ editedItem.city }}</h5> 370 <h5 class="my-1">{{ editedItem.city }}</h5>
371 </v-flex> 371 </v-flex>
372 </v-layout> 372 </v-layout>
373 <v-layout> 373 <v-layout>
374 <v-flex xs5 sm6> 374 <v-flex xs5 sm6>
375 <h5 class="right my-1"> 375 <h5 class="right my-1">
376 <b>State:</b> 376 <b>State:</b>
377 </h5> 377 </h5>
378 </v-flex> 378 </v-flex>
379 <v-flex sm6 xs8> 379 <v-flex sm6 xs8>
380 <h5 class="my-1">{{ editedItem.state }}</h5> 380 <h5 class="my-1">{{ editedItem.state }}</h5>
381 </v-flex> 381 </v-flex>
382 </v-layout> 382 </v-layout>
383 <v-layout> 383 <v-layout>
384 <v-flex xs5 sm6> 384 <v-flex xs5 sm6>
385 <h5 class="right my-1"> 385 <h5 class="right my-1">
386 <b>Country:</b> 386 <b>Country:</b>
387 </h5> 387 </h5>
388 </v-flex> 388 </v-flex>
389 <v-flex sm6 xs8> 389 <v-flex sm6 xs8>
390 <h5 class="my-1">{{ editedItem.country }}</h5> 390 <h5 class="my-1">{{ editedItem.country }}</h5>
391 </v-flex> 391 </v-flex>
392 </v-layout> 392 </v-layout>
393 <v-layout> 393 <v-layout>
394 <v-flex xs5 sm6> 394 <v-flex xs5 sm6>
395 <h5 class="right my-1"> 395 <h5 class="right my-1">
396 <b>Pincode:</b> 396 <b>Pincode:</b>
397 </h5> 397 </h5>
398 </v-flex> 398 </v-flex>
399 <v-flex sm6 xs8> 399 <v-flex sm6 xs8>
400 <h5 class="my-1">{{ editedItem.pincode }}</h5> 400 <h5 class="my-1">{{ editedItem.pincode }}</h5>
401 </v-flex> 401 </v-flex>
402 </v-layout> 402 </v-layout>
403 <v-layout> 403 <v-layout>
404 <v-flex xs5 sm6> 404 <v-flex xs5 sm6>
405 <h5 class="right my-1"> 405 <h5 class="right my-1">
406 <b>Mobile No:</b> 406 <b>Mobile No:</b>
407 </h5> 407 </h5>
408 </v-flex> 408 </v-flex>
409 <v-flex sm6 xs8> 409 <v-flex sm6 xs8>
410 <h5 class="my-1">{{ editedItem.mobileNo }}</h5> 410 <h5 class="my-1">{{ editedItem.mobileNo }}</h5>
411 </v-flex> 411 </v-flex>
412 </v-layout> 412 </v-layout>
413 <v-layout> 413 <v-layout>
414 <v-flex xs5 sm6> 414 <v-flex xs5 sm6>
415 <h5 class="right my-1"> 415 <h5 class="right my-1">
416 <b>Join Date:</b> 416 <b>Join Date:</b>
417 </h5> 417 </h5>
418 </v-flex> 418 </v-flex>
419 <v-flex sm6 xs8> 419 <v-flex sm6 xs8>
420 <h5 class="my-1">{{ dates(editedItem.joinDate) }}</h5> 420 <h5 class="my-1">{{ dates(editedItem.joinDate) }}</h5>
421 </v-flex> 421 </v-flex>
422 </v-layout> 422 </v-layout>
423 <v-layout> 423 <v-layout>
424 <v-flex xs5 sm6> 424 <v-flex xs5 sm6>
425 <h5 class="right my-1"> 425 <h5 class="right my-1">
426 <b>D.O.B :</b> 426 <b>D.O.B :</b>
427 </h5> 427 </h5>
428 </v-flex> 428 </v-flex>
429 <v-flex sm6 xs8> 429 <v-flex sm6 xs8>
430 <h5 class="my-1">{{ dates(editedItem.dob) }}</h5> 430 <h5 class="my-1">{{ dates(editedItem.dob) }}</h5>
431 </v-flex> 431 </v-flex>
432 </v-layout> 432 </v-layout>
433 <v-layout> 433 <v-layout>
434 <v-flex xs6 sm6> 434 <v-flex xs6 sm6>
435 <h5 class="right my-1"> 435 <h5 class="right my-1">
436 <b>Permanent Address:</b> 436 <b>Permanent Address:</b>
437 </h5> 437 </h5>
438 </v-flex> 438 </v-flex>
439 <v-flex sm6 xs8> 439 <v-flex sm6 xs8>
440 <h5 class="my-1">{{ editedItem.permanentAddress }}</h5> 440 <h5 class="my-1">{{ editedItem.permanentAddress }}</h5>
441 </v-flex> 441 </v-flex>
442 </v-layout> 442 </v-layout>
443 <v-layout> 443 <v-layout>
444 <v-flex xs6 sm6> 444 <v-flex xs6 sm6>
445 <h5 class="right my-1"> 445 <h5 class="right my-1">
446 <b>present Address:</b> 446 <b>present Address:</b>
447 </h5> 447 </h5>
448 </v-flex> 448 </v-flex>
449 <v-flex sm6 xs8> 449 <v-flex sm6 xs8>
450 <h5 class="my-1">{{ editedItem.presentAddress }}</h5> 450 <h5 class="my-1">{{ editedItem.presentAddress }}</h5>
451 </v-flex> 451 </v-flex>
452 </v-layout> 452 </v-layout>
453 </v-flex> 453 </v-flex>
454 </v-layout> 454 </v-layout>
455 </v-container> 455 </v-container>
456 </v-card-text> 456 </v-card-text>
457 </v-card> 457 </v-card>
458 </v-dialog> 458 </v-dialog>
459 <!-- ****** EXISTING-Teachers TABLE DATA****** --> 459 <!-- ****** EXISTING-Teachers TABLE DATA****** -->
460 <v-toolbar color="transparent" flat> 460 <v-toolbar color="transparent" flat>
461 <v-btn 461 <v-btn
462 fab 462 fab
463 dark 463 dark
464 class="open-dialog-button hidden-xl-only hidden-md-only hidden-lg-only" 464 class="open-dialog-button hidden-xl-only hidden-md-only hidden-lg-only"
465 small 465 small
466 @click="addTeacherDialog = true" 466 @click="addTeacherDialog = true"
467 > 467 >
468 <v-icon dark>add</v-icon> 468 <v-icon dark>add</v-icon>
469 </v-btn> 469 </v-btn>
470 <v-btn 470 <v-btn
471 v-if="role != 'TEACHER' " 471 v-if="role != 'TEACHER' "
472 round 472 round
473 class="open-dialog-button hidden-sm-only hidden-xs-only" 473 class="open-dialog-button hidden-sm-only hidden-xs-only"
474 dark 474 dark
475 @click="addTeacherDialog = true" 475 @click="addTeacherDialog = true"
476 > 476 >
477 <v-icon class="white--text pr-1" size="20">add</v-icon>Add Teacher 477 <v-icon class="white--text pr-1" size="20">add</v-icon>Add Teacher
478 </v-btn> 478 </v-btn>
479 <v-spacer></v-spacer> 479 <v-spacer></v-spacer>
480 <v-card-title class="body-1" v-show="show"> 480 <v-card-title class="body-1" v-show="show">
481 <v-btn icon large flat @click="displaySearch"> 481 <v-btn icon large flat @click="displaySearch">
482 <v-avatar size="27"> 482 <v-avatar size="27">
483 <img src="/static/icon/search.png" alt="icon" /> 483 <img src="/static/icon/search.png" alt="icon" />
484 </v-avatar> 484 </v-avatar>
485 </v-btn> 485 </v-btn>
486 </v-card-title> 486 </v-card-title>
487 <v-flex md2 lg2 sm6 xs8 v-if="showSearch"> 487 <v-flex md2 lg2 sm6 xs8 v-if="showSearch">
488 <v-layout> 488 <v-layout>
489 <v-text-field 489 <v-text-field
490 autofocus 490 autofocus
491 v-model="search" 491 v-model="search"
492 label="Search" 492 label="Search"
493 prepend-inner-icon="search" 493 prepend-inner-icon="search"
494 color="primary" 494 color="primary"
495 ></v-text-field> 495 ></v-text-field>
496 <v-icon @click="closeSearch" color="error">close</v-icon> 496 <v-icon @click="closeSearch" color="error">close</v-icon>
497 </v-layout> 497 </v-layout>
498 </v-flex> 498 </v-flex>
499 </v-toolbar> 499 </v-toolbar>
500 <v-data-table 500 <v-data-table
501 :headers="headers" 501 :headers="headers"
502 :items="desserts" 502 :items="desserts"
503 :pagination.sync="pagination" 503 :pagination.sync="pagination"
504 :search="search" 504 :search="search"
505 > 505 >
506 <template slot="items" slot-scope="props"> 506 <template slot="items" slot-scope="props">
507 <tr class="tr"> 507 <tr class="tr">
508 <td class="td td-row">{{ props.index + 1}}</td> 508 <td class="td td-row">{{ props.index + 1}}</td>
509 <td class="td td-row text-xs-center"> 509 <td class="td td-row text-xs-center">
510 <v-avatar size="40"> 510 <v-avatar size="40">
511 <img :src="props.item.profilePicUrl" v-if="props.item.profilePicUrl" /> 511 <img :src="props.item.profilePicUrl" v-if="props.item.profilePicUrl" />
512 <img src="/static/icon/user.png" v-else-if="!props.item.profilePicUrl" /> 512 <img src="/static/icon/user.png" v-else-if="!props.item.profilePicUrl" />
513 </v-avatar> 513 </v-avatar>
514 </td> 514 </td>
515 <td class="td td-row text-xs-center">{{ props.item.name}}</td> 515 <td class="td td-row text-xs-center">{{ props.item.name}}</td>
516 <td class="td td-row text-xs-center">{{ props.item.email }}</td> 516 <td class="td td-row text-xs-center">{{ props.item.email }}</td>
517 <td class="td td-row text-xs-center">{{ dates(props.item.dob) }}</td> 517 <td class="td td-row text-xs-center">{{ dates(props.item.dob) }}</td>
518 <td class="td td-row text-xs-center">{{ dates(props.item.joinDate)}}</td> 518 <td class="td td-row text-xs-center">{{ dates(props.item.joinDate)}}</td>
519 <td class="td td-row text-xs-center">{{ props.item.mobileNo }}</td> 519 <td class="td td-row text-xs-center">{{ props.item.mobileNo }}</td>
520 <td class="td td-row text-xs-center"> 520 <td class="td td-row text-xs-center">
521 <v-switch 521 <v-switch
522 class="pl-3" 522 class="pl-3"
523 v-model="props.item.status" 523 v-model="props.item.status"
524 @change="suspendStatus(props.item.status,props.item._id)" 524 @change="suspendStatus(props.item.status,props.item._id)"
525 ></v-switch> 525 ></v-switch>
526 </td> 526 </td>
527 <td class="text-xs-center td td-row"> 527 <td class="text-xs-center td td-row">
528 <span> 528 <span>
529 <v-tooltip top> 529 <v-tooltip top>
530 <img 530 <img
531 slot="activator" 531 slot="activator"
532 style="cursor:pointer; width:25px; height:25px; " 532 style="cursor:pointer; width:25px; height:25px; "
533 class="mr-3" 533 class="mr-3"
534 @click="profile(props.item)" 534 @click="profile(props.item)"
535 src="/static/icon/view.png" 535 src="/static/icon/view.png"
536 /> 536 />
537 <span>View</span> 537 <span>View</span>
538 </v-tooltip> 538 </v-tooltip>
539 <v-tooltip top v-if="role != 'TEACHER' "> 539 <v-tooltip top v-if="role != 'TEACHER' ">
540 <img 540 <img
541 slot="activator" 541 slot="activator"
542 style="cursor:pointer; width:20px; height:18px; " 542 style="cursor:pointer; width:20px; height:18px; "
543 class="mr-3" 543 class="mr-3"
544 @click="editItem(props.item)" 544 @click="editItem(props.item)"
545 src="/static/icon/edit.png" 545 src="/static/icon/edit.png"
546 /> 546 />
547 <span>Edit</span> 547 <span>Edit</span>
548 </v-tooltip> 548 </v-tooltip>
549 <!-- <v-tooltip top v-if="role != 'TEACHER' "> 549 <!-- <v-tooltip top v-if="role != 'TEACHER' ">
550 <img 550 <img
551 slot="activator" 551 slot="activator"
552 style="cursor:pointer; width:20px; height:20px; " 552 style="cursor:pointer; width:20px; height:20px; "
553 @click="deleteItem(props.item)" 553 @click="deleteItem(props.item)"
554 src="/static/icon/delete.png" 554 src="/static/icon/delete.png"
555 class="mr-3" 555 class="mr-3"
556 /> 556 />
557 <span>Delete</span> 557 <span>Delete</span>
558 </v-tooltip>--> 558 </v-tooltip>-->
559 </span> 559 </span>
560 </td> 560 </td>
561 </tr> 561 </tr>
562 </template> 562 </template>
563 <v-alert 563 <v-alert
564 slot="no-results" 564 slot="no-results"
565 :value="true" 565 :value="true"
566 color="error" 566 color="error"
567 icon="warning" 567 icon="warning"
568 >Your search for "{{ search }}" found no results.</v-alert> 568 >Your search for "{{ search }}" found no results.</v-alert>
569 </v-data-table> 569 </v-data-table>
570 570
571 <!-- ****** DIALOG BOX - Add Teachers Data****** --> 571 <!-- ****** DIALOG BOX - Add Teachers Data****** -->
572 <v-dialog v-model="addTeacherDialog" max-width="1160" v-if="addTeacherDialog" persistent> 572 <v-dialog v-model="addTeacherDialog" max-width="1160" v-if="addTeacherDialog" persistent>
573 <v-card flat class="card-style pa-2" dark> 573 <v-card flat class="card-style pa-2" dark>
574 <v-layout> 574 <v-layout>
575 <v-flex xs12 class="pa-0"> 575 <v-flex xs12 class="pa-0">
576 <label class="title text-xs-center">Add Teacher</label> 576 <label class="title text-xs-center">Add Teacher</label>
577 <v-icon 577 <v-icon
578 size="24" 578 size="24"
579 class="right" 579 class="right"
580 @click="$refs.form.reset();addTeacherDialog = false" 580 @click="$refs.form.reset();addTeacherDialog = false"
581 >cancel</v-icon> 581 >cancel</v-icon>
582 </v-flex> 582 </v-flex>
583 </v-layout> 583 </v-layout>
584 <v-form ref="form" v-model="valid" lazy-validation> 584 <v-form ref="form" v-model="valid" lazy-validation>
585 <v-container fluid> 585 <v-container fluid>
586 <v-layout> 586 <v-layout>
587 <v-flex xs12 class="text-xs-center text-sm-center text-md-center text-lg-center my-4"> 587 <v-flex xs12 class="text-xs-center text-sm-center text-md-center text-lg-center my-4">
588 <v-avatar size="120px"> 588 <v-avatar size="120px">
589 <img src="/static/icon/user.png" v-if="!imageUrl" /> 589 <img src="/static/icon/user.png" v-if="!imageUrl" />
590 </v-avatar> 590 </v-avatar>
591 <img 591 <img
592 :src="imageUrl" 592 :src="imageUrl"
593 height="150" 593 height="150"
594 v-if="imageUrl" 594 v-if="imageUrl"
595 style="border-radius:50%; width:150px" 595 style="border-radius:50%; width:150px"
596 /> 596 />
597 </v-flex> 597 </v-flex>
598 </v-layout> 598 </v-layout>
599 <v-layout wrap> 599 <v-layout wrap>
600 <v-flex xs12 sm6> 600 <v-flex xs12 sm6>
601 <v-layout> 601 <v-layout>
602 <v-flex xs4 class="pt-4 subheading"> 602 <v-flex xs4 class="pt-4 subheading">
603 <label class="right hidden-sm-only hidden-xs-only">Full Name:</label> 603 <label class="right hidden-sm-only hidden-xs-only">Full Name:</label>
604 <label class="right hidden-lg-only hidden-xl-only hidden-md-only">Full Name</label> 604 <label class="right hidden-lg-only hidden-xl-only hidden-md-only">Full Name</label>
605 </v-flex> 605 </v-flex>
606 <v-flex xs8 class="ml-3"> 606 <v-flex xs8 class="ml-3">
607 <v-text-field 607 <v-text-field
608 v-model="addTeachers.name" 608 v-model="addTeachers.name"
609 placeholder="fill your full Name" 609 placeholder="fill your full Name"
610 name="name" 610 name="name"
611 type="text" 611 type="text"
612 :rules="nameRules" 612 :rules="nameRules"
613 required 613 required
614 ></v-text-field> 614 ></v-text-field>
615 </v-flex> 615 </v-flex>
616 </v-layout> 616 </v-layout>
617 </v-flex> 617 </v-flex>
618 <v-flex xs12 sm6> 618 <v-flex xs12 sm6>
619 <v-layout> 619 <v-layout>
620 <v-flex xs4 class="pt-4 subheading"> 620 <v-flex xs4 class="pt-4 subheading">
621 <label class="right">Email ID:</label> 621 <label class="right">Email ID:</label>
622 </v-flex> 622 </v-flex>
623 <v-flex xs8 class="ml-3"> 623 <v-flex xs8 class="ml-3">
624 <v-text-field 624 <v-text-field
625 placeholder="fill your email" 625 placeholder="fill your email"
626 v-model="addTeachers.email" 626 v-model="addTeachers.email"
627 type="text" 627 type="text"
628 name="email" 628 name="email"
629 required 629 required
630 ></v-text-field> 630 ></v-text-field>
631 </v-flex> 631 </v-flex>
632 </v-layout> 632 </v-layout>
633 </v-flex> 633 </v-flex>
634 </v-layout> 634 </v-layout>
635 <v-layout wrap> 635 <v-layout wrap>
636 <v-flex xs12 sm6> 636 <v-flex xs12 sm6>
637 <v-layout> 637 <v-layout>
638 <v-flex xs4 sm4 class="pt-4 subheading"> 638 <v-flex xs4 sm4 class="pt-4 subheading">
639 <label class="right hidden-sm-only hidden-xs-only">Date of Birth:</label> 639 <label class="right hidden-sm-only hidden-xs-only">Date of Birth:</label>
640 <label class="right hidden-lg-only hidden-xl-only hidden-md-only">D.O.B:</label> 640 <label class="right hidden-lg-only hidden-xl-only hidden-md-only">D.O.B:</label>
641 </v-flex> 641 </v-flex>
642 <v-flex xs8 class="ml-3"> 642 <v-flex xs8 class="ml-3">
643 <v-menu 643 <v-menu
644 ref="menu" 644 ref="menu"
645 :close-on-content-click="false" 645 :close-on-content-click="false"
646 v-model="menu" 646 v-model="menu"
647 :nudge-right="40" 647 :nudge-right="40"
648 lazy 648 lazy
649 transition="scale-transition" 649 transition="scale-transition"
650 offset-y 650 offset-y
651 full-width 651 full-width
652 min-width="290px" 652 min-width="290px"
653 > 653 >
654 <v-text-field 654 <v-text-field
655 slot="activator" 655 slot="activator"
656 :rules="dateRules" 656 :rules="dateRules"
657 v-model="addTeachers.date" 657 v-model="addTeachers.date"
658 placeholder="Select date" 658 placeholder="Select date"
659 ></v-text-field> 659 ></v-text-field>
660 <v-date-picker 660 <v-date-picker
661 ref="picker" 661 ref="picker"
662 v-model="addTeachers.date" 662 v-model="addTeachers.date"
663 :max="new Date().toISOString().substr(0, 10)" 663 :max="new Date().toISOString().substr(0, 10)"
664 min="1950-01-01" 664 min="1950-01-01"
665 @input="menu = false" 665 @input="menu = false"
666 ></v-date-picker> 666 ></v-date-picker>
667 </v-menu> 667 </v-menu>
668 </v-flex> 668 </v-flex>
669 </v-layout> 669 </v-layout>
670 </v-flex> 670 </v-flex>
671 <v-flex xs12 sm6> 671 <v-flex xs12 sm6>
672 <v-layout> 672 <v-layout>
673 <v-flex xs4 class="pt-4 subheading"> 673 <v-flex xs4 class="pt-4 subheading">
674 <label class="right">City:</label> 674 <label class="right">City:</label>
675 </v-flex> 675 </v-flex>
676 <v-flex xs8 class="ml-3"> 676 <v-flex xs8 class="ml-3">
677 <v-text-field 677 <v-text-field
678 v-model="addTeachers.city" 678 v-model="addTeachers.city"
679 placeholder="fill your City Name" 679 placeholder="fill your City Name"
680 name="City" 680 name="City"
681 type="text" 681 type="text"
682 :rules="cityRules" 682 :rules="cityRules"
683 required 683 required
684 ></v-text-field> 684 ></v-text-field>
685 </v-flex> 685 </v-flex>
686 </v-layout> 686 </v-layout>
687 </v-flex> 687 </v-flex>
688 </v-layout> 688 </v-layout>
689 <v-layout wrap> 689 <v-layout wrap>
690 <v-flex xs12 sm6> 690 <v-flex xs12 sm6>
691 <v-layout> 691 <v-layout>
692 <v-flex xs4 class="pt-4 subheading"> 692 <v-flex xs4 class="pt-4 subheading">
693 <label class="right">State:</label> 693 <label class="right">State:</label>
694 </v-flex> 694 </v-flex>
695 <v-flex xs8 class="ml-3"> 695 <v-flex xs8 class="ml-3">
696 <v-text-field 696 <v-text-field
697 v-model="addTeachers.state" 697 v-model="addTeachers.state"
698 placeholder="fill your State Name" 698 placeholder="fill your State Name"
699 name="state" 699 name="state"
700 type="text" 700 type="text"
701 :rules="stateRules" 701 :rules="stateRules"
702 required 702 required
703 ></v-text-field> 703 ></v-text-field>
704 </v-flex> 704 </v-flex>
705 </v-layout> 705 </v-layout>
706 </v-flex> 706 </v-flex>
707 <v-flex xs12 sm6> 707 <v-flex xs12 sm6>
708 <v-layout> 708 <v-layout>
709 <v-flex xs4 class="pt-4 subheading"> 709 <v-flex xs4 class="pt-4 subheading">
710 <label class="right">PinCode:</label> 710 <label class="right">PinCode:</label>
711 </v-flex> 711 </v-flex>
712 <v-flex xs8 class="ml-3"> 712 <v-flex xs8 class="ml-3">
713 <v-text-field 713 <v-text-field
714 v-model="addTeachers.pincode" 714 v-model="addTeachers.pincode"
715 placeholder="fill your pincode" 715 placeholder="fill your pincode"
716 name="pincode" 716 name="pincode"
717 type="number" 717 type="number"
718 :rules="pincode" 718 :rules="pincode"
719 required 719 required
720 ></v-text-field> 720 ></v-text-field>
721 </v-flex> 721 </v-flex>
722 </v-layout> 722 </v-layout>
723 </v-flex> 723 </v-flex>
724 </v-layout> 724 </v-layout>
725 <v-layout wrap> 725 <v-layout wrap>
726 <v-flex xs12 sm6> 726 <v-flex xs12 sm6>
727 <v-layout> 727 <v-layout>
728 <v-flex xs4 class="pt-4 subheading"> 728 <v-flex xs4 class="pt-4 subheading">
729 <label class="right hidden-xs-only hidden-sm-only">Mobile No:</label> 729 <label class="right hidden-xs-only hidden-sm-only">Mobile No:</label>
730 <label class="right hidden-lg-only hidden-md-only hidden-xl-only">Mobile:</label> 730 <label class="right hidden-lg-only hidden-md-only hidden-xl-only">Mobile:</label>
731 </v-flex> 731 </v-flex>
732 <v-flex xs8 class="ml-3"> 732 <v-flex xs8 class="ml-3">
733 <v-text-field 733 <v-text-field
734 v-model="addTeachers.mobileNo" 734 v-model="addTeachers.mobileNo"
735 placeholder="fill your Mobile No." 735 placeholder="fill your Mobile No."
736 name="mobileNo" 736 name="mobileNo"
737 type="number" 737 type="number"
738 :rules="mobileNoRules" 738 :rules="mobileNoRules"
739 required 739 required
740 ></v-text-field> 740 ></v-text-field>
741 </v-flex> 741 </v-flex>
742 </v-layout> 742 </v-layout>
743 </v-flex> 743 </v-flex>
744 <v-flex xs12 sm6> 744 <v-flex xs12 sm6>
745 <v-layout> 745 <v-layout>
746 <v-flex xs4 class="pt-4 subheading"> 746 <v-flex xs4 class="pt-4 subheading">
747 <label class="right hidden-xs-only hidden-sm-only">Select Country:</label> 747 <label class="right hidden-xs-only hidden-sm-only">Select Country:</label>
748 <label class="right hidden-lg-only hidden-md-only hidden-xl-only">Country:</label> 748 <label class="right hidden-lg-only hidden-md-only hidden-xl-only">Country:</label>
749 </v-flex> 749 </v-flex>
750 <v-flex xs8 class="ml-3"> 750 <v-flex xs8 class="ml-3">
751 <v-autocomplete 751 <v-autocomplete
752 v-model="addTeachers.country" 752 v-model="addTeachers.country"
753 :rules="country" 753 :rules="country"
754 :items="countries" 754 :items="countries"
755 placeholder="Select Country Name" 755 placeholder="Select Country Name"
756 required 756 required
757 ></v-autocomplete> 757 ></v-autocomplete>
758 </v-flex> 758 </v-flex>
759 </v-layout> 759 </v-layout>
760 </v-flex> 760 </v-flex>
761 </v-layout> 761 </v-layout>
762 <v-layout wrap> 762 <v-layout wrap>
763 <v-flex xs12 sm6> 763 <v-flex xs12 sm6>
764 <v-layout> 764 <v-layout>
765 <v-flex xs4 class="pt-4 subheading"> 765 <v-flex xs4 class="pt-4 subheading">
766 <label class="right">Join Date:</label> 766 <label class="right">Join Date:</label>
767 </v-flex> 767 </v-flex>
768 <v-flex xs8 class="ml-3"> 768 <v-flex xs8 class="ml-3">
769 <v-menu 769 <v-menu
770 ref="menu1" 770 ref="menu1"
771 :close-on-content-click="false" 771 :close-on-content-click="false"
772 v-model="menu1" 772 v-model="menu1"
773 :nudge-right="40" 773 :nudge-right="40"
774 lazy 774 lazy
775 transition="scale-transition" 775 transition="scale-transition"
776 offset-y 776 offset-y
777 full-width 777 full-width
778 min-width="290px" 778 min-width="290px"
779 > 779 >
780 <v-text-field 780 <v-text-field
781 slot="activator" 781 slot="activator"
782 :rules="joinDateRules" 782 :rules="joinDateRules"
783 v-model="addTeachers.joinDate" 783 v-model="addTeachers.joinDate"
784 placeholder="Select date" 784 placeholder="Select date"
785 ></v-text-field> 785 ></v-text-field>
786 <v-date-picker 786 <v-date-picker
787 ref="picker" 787 ref="picker"
788 v-model="addTeachers.joinDate" 788 v-model="addTeachers.joinDate"
789 :max="new Date().toISOString().substr(0, 10)" 789 :max="new Date().toISOString().substr(0, 10)"
790 min="1950-01-01" 790 min="1950-01-01"
791 @input="menu1 = false" 791 @input="menu1 = false"
792 ></v-date-picker> 792 ></v-date-picker>
793 </v-menu> 793 </v-menu>
794 </v-flex> 794 </v-flex>
795 </v-layout> 795 </v-layout>
796 </v-flex> 796 </v-flex>
797 <v-flex xs12 sm6> 797 <v-flex xs12 sm6>
798 <v-layout> 798 <v-layout>
799 <v-flex xs4 class="pt-4 subheading"> 799 <v-flex xs4 class="pt-4 subheading">
800 <label class="right hidden-xs-only hidden-sm-only">Uplaod Image:</label> 800 <label class="right hidden-xs-only hidden-sm-only">Uplaod Image:</label>
801 <label class="right hidden-lg-only hidden-md-only hidden-xl-only">Uplaod:</label> 801 <label class="right hidden-lg-only hidden-md-only hidden-xl-only">Uplaod:</label>
802 </v-flex> 802 </v-flex>
803 <v-flex xs8 class="ml-3"> 803 <v-flex xs8 class="ml-3">
804 <v-text-field 804 <v-text-field
805 label="Select Image" 805 label="Select Image"
806 @click="pickFile" 806 @click="pickFile"
807 v-model="imageName" 807 v-model="imageName"
808 append-icon="attach_file" 808 append-icon="attach_file"
809 ></v-text-field> 809 ></v-text-field>
810 <input 810 <input
811 type="file" 811 type="file"
812 style="display:none" 812 style="display:none"
813 ref="image" 813 ref="image"
814 accept="image/*" 814 accept="image/*"
815 @change="onFilePicked" 815 @change="onFilePicked"
816 /> 816 />
817 </v-flex> 817 </v-flex>
818 </v-layout> 818 </v-layout>
819 </v-flex> 819 </v-flex>
820 </v-layout> 820 </v-layout>
821 <v-layout class="hidden-xs-only hidden-sm-only"> 821 <v-layout class="hidden-xs-only hidden-sm-only">
822 <v-flex xs12 sm6> 822 <v-flex xs12 sm6>
823 <v-layout> 823 <v-layout>
824 <v-flex xs4 md4 class="pt-4 subheading"> 824 <v-flex xs4 md4 class="pt-4 subheading">
825 <label class="right">Present Address:</label> 825 <label class="right">Present Address:</label>
826 </v-flex> 826 </v-flex>
827 <v-flex xs8 md8 class="ml-3"> 827 <v-flex xs8 md8 class="ml-3">
828 <v-text-field 828 <v-text-field
829 name="input-4-3" 829 name="input-4-3"
830 v-model="addTeachers.presentAddress" 830 v-model="addTeachers.presentAddress"
831 :rules="presentAddress" 831 :rules="presentAddress"
832 placeholder="fill Your present Address" 832 placeholder="fill Your present Address"
833 @keyup="copyData" 833 @keyup="copyData"
834 ></v-text-field> 834 ></v-text-field>
835 </v-flex> 835 </v-flex>
836 </v-layout> 836 </v-layout>
837 </v-flex> 837 </v-flex>
838 <v-flex xs12 sm6> 838 <v-flex xs12 sm6>
839 <v-layout> 839 <v-layout>
840 <v-flex xs4 md4 class="pt-4 subheading addressForm"> 840 <v-flex xs4 md4 class="pt-4 subheading addressForm">
841 <label class="right">Permanent Address:</label> 841 <label class="right">Permanent Address:</label>
842 </v-flex> 842 </v-flex>
843 <v-flex xs12 md8 class="ml-3"> 843 <v-flex xs12 md8 class="ml-3">
844 <v-switch 844 <v-switch
845 v-model="addTeachers.permanentAddress" 845 v-model="addTeachers.permanentAddress"
846 label="Select Permanent Address" 846 label="Select Permanent Address"
847 :value="addTeachers.presentAddress" 847 :value="addTeachers.presentAddress"
848 ></v-switch> 848 ></v-switch>
849 </v-flex> 849 </v-flex>
850 </v-layout> 850 </v-layout>
851 </v-flex> 851 </v-flex>
852 </v-layout> 852 </v-layout>
853 <v-layout class="hidden-xs-only hidden-sm-only"> 853 <v-layout class="hidden-xs-only hidden-sm-only">
854 <v-flex xs12 sm6> 854 <v-flex xs12 sm6>
855 <v-layout> 855 <v-layout>
856 <v-flex xs4 md4 class="pt-4 subheading addressForm"> 856 <v-flex xs4 md4 class="pt-4 subheading addressForm">
857 <label class="right">Permanent Address:</label> 857 <label class="right">Permanent Address:</label>
858 </v-flex> 858 </v-flex>
859 <v-flex xs12 md8 class="ml-3"> 859 <v-flex xs12 md8 class="ml-3">
860 <v-text-field 860 <v-text-field
861 name="input-4-3" 861 name="input-4-3"
862 v-model="addTeachers.permanentAddress" 862 v-model="addTeachers.permanentAddress"
863 :rules="permanentAddress" 863 :rules="permanentAddress"
864 placeholder="fill Your Permanent Address" 864 placeholder="fill Your Permanent Address"
865 required 865 required
866 ></v-text-field> 866 ></v-text-field>
867 </v-flex> 867 </v-flex>
868 </v-layout> 868 </v-layout>
869 </v-flex> 869 </v-flex>
870 </v-layout> 870 </v-layout>
871 <v-layout class="hidden-lg-only hidden-md-only hidden-xl-only" wrap> 871 <v-layout class="hidden-lg-only hidden-md-only hidden-xl-only" wrap>
872 <v-flex xs12 sm12> 872 <v-flex xs12 sm12>
873 <v-layout> 873 <v-layout>
874 <v-flex xs12 sm12 class="pt-4 subheading text-xs-center"> 874 <v-flex xs12 sm12 class="pt-4 subheading text-xs-center">
875 <label class>Present Addres:</label> 875 <label class>Present Addres:</label>
876 </v-flex> 876 </v-flex>
877 </v-layout> 877 </v-layout>
878 <v-layout> 878 <v-layout>
879 <v-flex xs12 sm12> 879 <v-flex xs12 sm12>
880 <v-textarea 880 <v-textarea
881 name="input-4-3" 881 name="input-4-3"
882 v-model="addTeachers.presentAddress" 882 v-model="addTeachers.presentAddress"
883 :rules="presentAddress" 883 :rules="presentAddress"
884 placeholder="fill Your present Address" 884 placeholder="fill Your present Address"
885 required 885 required
886 ></v-textarea> 886 ></v-textarea>
887 </v-flex> 887 </v-flex>
888 </v-layout> 888 </v-layout>
889 </v-flex> 889 </v-flex>
890 <v-flex xs12 sm12> 890 <v-flex xs12 sm12>
891 <v-layout> 891 <v-layout>
892 <v-flex xs12 sm12 class="pt-4 pr-4 subheading text-xs-center addressForm"> 892 <v-flex xs12 sm12 class="pt-4 pr-4 subheading text-xs-center addressForm">
893 <label>Permanent Address:</label> 893 <label>Permanent Address:</label>
894 </v-flex> 894 </v-flex>
895 </v-layout> 895 </v-layout>
896 <v-layout> 896 <v-layout>
897 <v-flex xs12 sm12> 897 <v-flex xs12 sm12>
898 <v-textarea 898 <v-textarea
899 name="input-4-3" 899 name="input-4-3"
900 v-model="addTeachers.permanentAddress" 900 v-model="addTeachers.permanentAddress"
901 :rules="permanentAddress" 901 :rules="permanentAddress"
902 placeholder="fill Your Permanent Address" 902 placeholder="fill Your Permanent Address"
903 required 903 required
904 ></v-textarea> 904 ></v-textarea>
905 </v-flex> 905 </v-flex>
906 </v-layout> 906 </v-layout>
907 </v-flex> 907 </v-flex>
908 </v-layout> 908 </v-layout>
909 <v-layout> 909 <v-layout>
910 <v-flex xs12 sm12> 910 <v-flex xs12 sm12>
911 <v-layout class="right"> 911 <v-layout class="right">
912 <v-btn @click="clear" round dark class="clear-button">Clear</v-btn> 912 <v-btn @click="clear" round dark class="clear-button">Clear</v-btn>
913 <v-btn @click="submit" round dark :loading="loading" class="add-button">Add</v-btn> 913 <v-btn @click="submit" round dark :loading="loading" class="add-button">Add</v-btn>
914 </v-layout> 914 </v-layout>
915 </v-flex> 915 </v-flex>
916 </v-layout> 916 </v-layout>
917 </v-container> 917 </v-container>
918 </v-form> 918 </v-form>
919 </v-card> 919 </v-card>
920 </v-dialog> 920 </v-dialog>
921 <div class="loader" v-if="showLoader"> 921 <div class="loader" v-if="showLoader">
922 <v-progress-circular indeterminate color="white"></v-progress-circular> 922 <v-progress-circular indeterminate color="white"></v-progress-circular>
923 </div> 923 </div>
924 </v-container> 924 </v-container>
925 </template> 925 </template>
926 926
927 <script> 927 <script>
928 import http from "@/Services/http.js"; 928 import http from "@/Services/http.js";
929 import moment from "moment"; 929 import moment from "moment";
930 import countryList from "@/script/country.js"; 930 import countryList from "@/script/country.js";
931 931
932 export default { 932 export default {
933 data: () => ({ 933 data: () => ({
934 component: "report-generate", 934 component: "report-generate",
935 snackbar: false, 935 snackbar: false,
936 y: "top", 936 y: "top",
937 x: "right", 937 x: "right",
938 role: "", 938 role: "",
939 mode: "", 939 mode: "",
940 timeout: 3000, 940 timeout: 3000,
941 text: "", 941 text: "",
942 color: "", 942 color: "",
943 showLoader: false, 943 showLoader: false,
944 loading: false, 944 loading: false,
945 date: null, 945 date: null,
946 search: "", 946 search: "",
947 show: true, 947 show: true,
948 showSearch: false, 948 showSearch: false,
949 menu: false, 949 menu: false,
950 menu1: false, 950 menu1: false,
951 menu2: false, 951 menu2: false,
952 menu3: false, 952 menu3: false,
953 editTeacherDialog: false, 953 editTeacherDialog: false,
954 viewTeacherProfileDialog: false, 954 viewTeacherProfileDialog: false,
955 addTeacherDialog: false, 955 addTeacherDialog: false,
956 valid: true, 956 valid: true,
957 pagination: { 957 pagination: {
958 rowsPerPage: 10, 958 rowsPerPage: 10,
959 }, 959 },
960 imageData: {}, 960 imageData: {},
961 imageName: "", 961 imageName: "",
962 imageUrl: "", 962 imageUrl: "",
963 imageFile: "", 963 imageFile: "",
964 nameRules: [(v) => !!v || " Full Name is required"], 964 nameRules: [(v) => !!v || " Full Name is required"],
965 dateRules: [(v) => !!v || " DOB is required"], 965 dateRules: [(v) => !!v || " DOB is required"],
966 cityRules: [(v) => !!v || " City Name is required"], 966 cityRules: [(v) => !!v || " City Name is required"],
967 pincode: [(v) => !!v || " Pincode is required"], 967 pincode: [(v) => !!v || " Pincode is required"],
968 country: [(v) => !!v || " Country Name is required"], 968 country: [(v) => !!v || " Country Name is required"],
969 permanentAddress: [(v) => !!v || " Permanent Address is required"], 969 permanentAddress: [(v) => !!v || " Permanent Address is required"],
970 presentAddress: [(v) => !!v || " Present Address is required"], 970 presentAddress: [(v) => !!v || " Present Address is required"],
971 mobileNoRules: [(v) => !!v || "Mobile Number is required"], 971 mobileNoRules: [(v) => !!v || "Mobile Number is required"],
972 stateRules: [(v) => !!v || "State Name is required"], 972 stateRules: [(v) => !!v || "State Name is required"],
973 joinDateRules: [(v) => !!v || " Join Date is required"], 973 joinDateRules: [(v) => !!v || " Join Date is required"],
974 errorMessages: "", 974 errorMessages: "",
975 switch1: true, 975 switch1: true,
976 countries: [], 976 countries: [],
977 headers: [ 977 headers: [
978 { 978 {
979 text: "No", 979 text: "No",
980 align: "", 980 align: "",
981 sortable: false, 981 sortable: false,
982 value: "No", 982 value: "No",
983 }, 983 },
984 { 984 {
985 text: "Profile Pic", 985 text: "Profile Pic",
986 value: "profilePicUrl", 986 value: "profilePicUrl",
987 sortable: false, 987 sortable: false,
988 align: "center", 988 align: "center",
989 }, 989 },
990 { text: "Name", value: "name", sortable: false, align: "center" }, 990 { text: "Name", value: "name", sortable: false, align: "center" },
991 { text: "Email", value: "email", sortable: false, align: "center" }, 991 { text: "Email", value: "email", sortable: false, align: "center" },
992 { text: "DOB", value: "dob", sortable: false, align: "center" }, 992 { text: "DOB", value: "dob", sortable: false, align: "center" },
993 { 993 {
994 text: "Join Date", 994 text: "Join Date",
995 value: "joinDate", 995 value: "joinDate",
996 sortable: false, 996 sortable: false,
997 align: "center", 997 align: "center",
998 }, 998 },
999 { 999 {
1000 text: "Mobile No", 1000 text: "Mobile No",
1001 value: "mobileNo", 1001 value: "mobileNo",
1002 sortable: false, 1002 sortable: false,
1003 align: "center", 1003 align: "center",
1004 }, 1004 },
1005 { 1005 {
1006 text: "Status", 1006 text: "Status",
1007 value: "status", 1007 value: "status",
1008 sortable: false, 1008 sortable: false,
1009 align: "center", 1009 align: "center",
1010 }, 1010 },
1011 { text: "Action", value: "", sortable: false, align: "center" }, 1011 { text: "Action", value: "", sortable: false, align: "center" },
1012 ], 1012 ],
1013 desserts: [], 1013 desserts: [],
1014 editedIndex: -1, 1014 editedIndex: -1,
1015 upload: "", 1015 upload: "",
1016 editedItem: { 1016 editedItem: {
1017 role: "TEACHER", 1017 role: "TEACHER",
1018 name: "", 1018 name: "",
1019 email: "", 1019 email: "",
1020 date: null, 1020 date: null,
1021 city: "", 1021 city: "",
1022 pincode: "", 1022 pincode: "",
1023 country: "", 1023 country: "",
1024 permanentAddress: "", 1024 permanentAddress: "",
1025 presentAddress: "", 1025 presentAddress: "",
1026 mobileNo: "", 1026 mobileNo: "",
1027 state: "", 1027 state: "",
1028 joinDate: null, 1028 joinDate: null,
1029 }, 1029 },
1030 addTeachers: { 1030 addTeachers: {
1031 role: "TEACHER", 1031 role: "TEACHER",
1032 name: "", 1032 name: "",
1033 email: "", 1033 email: "",
1034 date: null, 1034 date: null,
1035 city: "", 1035 city: "",
1036 pincode: "", 1036 pincode: "",
1037 country: "", 1037 country: "",
1038 permanentAddress: "", 1038 permanentAddress: "",
1039 presentAddress: "", 1039 presentAddress: "",
1040 mobileNo: "", 1040 mobileNo: "",
1041 state: "", 1041 state: "",
1042 joinDate: null, 1042 joinDate: null,
1043 }, 1043 },
1044 status: "", 1044 status: "",
1045 }), 1045 }),
1046 watch: { 1046 watch: {
1047 menu(val) { 1047 menu(val) {
1048 val && this.$nextTick(() => (this.$refs.picker.activePicker = "YEAR")); 1048 val && this.$nextTick(() => (this.$refs.picker.activePicker = "YEAR"));
1049 }, 1049 },
1050 menu1(val) { 1050 menu1(val) {
1051 val && this.$nextTick(() => (this.$refs.picker.activePicker = "YEAR")); 1051 val && this.$nextTick(() => (this.$refs.picker.activePicker = "YEAR"));
1052 }, 1052 },
1053 addTeacherDialog: function (val) { 1053 addTeacherDialog: function (val) {
1054 if (!val) { 1054 if (!val) {
1055 this.addTeachers = { 1055 this.addTeachers = {
1056 role: "TEACHER", 1056 role: "TEACHER",
1057 }; 1057 };
1058 this.imageName = ""; 1058 this.imageName = "";
1059 this.imageFile = ""; 1059 this.imageFile = "";
1060 this.imageUrl = ""; 1060 this.imageUrl = "";
1061 } 1061 }
1062 }, 1062 },
1063 }, 1063 },
1064 methods: { 1064 methods: {
1065 save(date) { 1065 save(date) {
1066 this.$refs.menu.save(date); 1066 this.$refs.menu.save(date);
1067 }, 1067 },
1068 save(date) { 1068 save(date) {
1069 this.$refs.menu1.save(date); 1069 this.$refs.menu1.save(date);
1070 }, 1070 },
1071 pickFile() { 1071 pickFile() {
1072 this.$refs.image.click(); 1072 this.$refs.image.click();
1073 }, 1073 },
1074 onFilePicked(e) { 1074 onFilePicked(e) {
1075 const files = e.target.files; 1075 const files = e.target.files;
1076 this.upload = e.target.files[0]; 1076 this.upload = e.target.files[0];
1077 if (files[0] !== undefined) { 1077 if (files[0] !== undefined) {
1078 this.imageName = files[0].name; 1078 this.imageName = files[0].name;
1079 if (this.imageName.lastIndexOf(".") <= 0) { 1079 if (this.imageName.lastIndexOf(".") <= 0) {
1080 return; 1080 return;
1081 } 1081 }
1082 const fr = new FileReader(); 1082 const fr = new FileReader();
1083 fr.readAsDataURL(files[0]); 1083 fr.readAsDataURL(files[0]);
1084 fr.addEventListener("load", () => { 1084 fr.addEventListener("load", () => {
1085 this.imageUrl = fr.result; 1085 this.imageUrl = fr.result;
1086 this.imageFile = files[0]; // this is an image file that can be sent to server... 1086 this.imageFile = files[0]; // this is an image file that can be sent to server...
1087 }); 1087 });
1088 } else { 1088 } else {
1089 this.imageName = ""; 1089 this.imageName = "";
1090 this.imageFile = ""; 1090 this.imageFile = "";
1091 this.imageUrl = ""; 1091 this.imageUrl = "";
1092 } 1092 }
1093 }, 1093 },
1094 dates: function (date) { 1094 dates: function (date) {
1095 return moment(date).format("MMMM DD, YYYY"); 1095 return moment(date).format("MMMM DD, YYYY");
1096 }, 1096 },
1097 getTeacherList() { 1097 getTeacherList() {
1098 this.showLoader = true; 1098 this.showLoader = true;
1099 var token = this.$store.state.token; 1099 var token = this.$store.state.token;
1100 http() 1100 http()
1101 .get("/getTeachersList", { 1101 .get("/getTeachersList", {
1102 headers: { Authorization: "Bearer " + token }, 1102 headers: { Authorization: "Bearer " + token },
1103 }) 1103 })
1104 .then((response) => { 1104 .then((response) => {
1105 this.desserts = response.data.data; 1105 this.desserts = response.data.data;
1106 this.showLoader = false; 1106 this.showLoader = false;
1107 // console.log("getTeacherList=====>",this.desserts) 1107 // console.log("getTeacherList=====>",this.desserts)
1108 }) 1108 })
1109 .catch((error) => { 1109 .catch((error) => {
1110 this.showLoader = false; 1110 this.showLoader = false;
1111 if (error.response.status === 401) { 1111 if (error.response.status === 401) {
1112 this.$router.replace({ path: "/" }); 1112 this.$router.replace({ path: "/" });
1113 this.$store.dispatch("setToken", null); 1113 this.$store.dispatch("setToken", null);
1114 this.$store.dispatch("Id", null); 1114 this.$store.dispatch("Id", null);
1115 } 1115 }
1116 }); 1116 });
1117 }, 1117 },
1118 editItem(item) { 1118 editItem(item) {
1119 this.editedIndex = this.desserts.indexOf(item); 1119 this.editedIndex = this.desserts.indexOf(item);
1120 this.editedItem = Object.assign({}, item); 1120 this.editedItem = Object.assign({}, item);
1121 this.editedItem.dob = 1121 this.editedItem.dob =
1122 this.editedItem.dob != undefined 1122 this.editedItem.dob != undefined
1123 ? (this.editedItem.dob = this.editedItem.dob.substring(0, 10)) 1123 ? (this.editedItem.dob = this.editedItem.dob.substring(0, 10))
1124 : (this.editedItem.dob = ""); 1124 : (this.editedItem.dob = "");
1125 this.editedItem.joinDate = 1125 this.editedItem.joinDate =
1126 this.editedItem.joinDate != undefined 1126 this.editedItem.joinDate != undefined
1127 ? (this.editedItem.joinDate = this.editedItem.joinDate.substring( 1127 ? (this.editedItem.joinDate = this.editedItem.joinDate.substring(
1128 0, 1128 0,
1129 10 1129 10
1130 )) 1130 ))
1131 : (this.editedItem.joinDate = ""); 1131 : (this.editedItem.joinDate = "");
1132 1132
1133 this.editTeacherDialog = true; 1133 this.editTeacherDialog = true;
1134 }, 1134 },
1135 profile(item) { 1135 profile(item) {
1136 this.editedIndex = this.desserts.indexOf(item); 1136 this.editedIndex = this.desserts.indexOf(item);
1137 this.editedItem = Object.assign({}, item); 1137 this.editedItem = Object.assign({}, item);
1138 this.viewTeacherProfileDialog = true; 1138 this.viewTeacherProfileDialog = true;
1139 }, 1139 },
1140 deleteItem(item) { 1140 deleteItem(item) {
1141 let deleteTeachers = { 1141 let deleteTeachers = {
1142 teacherId: item._id, 1142 teacherId: item._id,
1143 }; 1143 };
1144 http() 1144 http()
1145 .delete( 1145 .delete(
1146 "/deleteTeacher", 1146 "/deleteTeacher",
1147 confirm("Are you sure you want to delete this?") && { 1147 confirm("Are you sure you want to delete this?") && {
1148 params: deleteTeachers, 1148 params: deleteTeachers,
1149 } 1149 }
1150 ) 1150 )
1151 .then((response) => { 1151 .then((response) => {
1152 this.snackbar = true; 1152 this.snackbar = true;
1153 this.text = "Successfully delete Existing Teacher"; 1153 this.text = "Successfully delete Existing Teacher";
1154 this.color = "green"; 1154 this.color = "green";
1155 this.getTeacherList(); 1155 this.getTeacherList();
1156 }) 1156 })
1157 .catch((error) => { 1157 .catch((error) => {
1158 this.snackbar = true; 1158 this.snackbar = true;
1159 this.text = error.response.data.message; 1159 this.text = error.response.data.message;
1160 this.color = "error"; 1160 this.color = "error";
1161 }); 1161 });
1162 }, 1162 },
1163 closeEditTeacherDialog() { 1163 closeEditTeacherDialog() {
1164 this.editTeacherDialog = false; 1164 this.editTeacherDialog = false;
1165 }, 1165 },
1166 close1() { 1166 close1() {
1167 this.viewTeacherProfileDialog = false; 1167 this.viewTeacherProfileDialog = false;
1168 }, 1168 },
1169 copyData() { 1169 copyData() {
1170 this.addTeachers.permanentAddress = this.addTeachers.presentAddress; 1170 this.addTeachers.permanentAddress = this.addTeachers.presentAddress;
1171 }, 1171 },
1172 submit() { 1172 submit() {
1173 if (this.$refs.form.validate()) { 1173 if (this.$refs.form.validate()) {
1174 let addTeacher = { 1174 let addTeacher = {
1175 name: this.addTeachers.name, 1175 name: this.addTeachers.name,
1176 email: this.addTeachers.email, 1176 email: this.addTeachers.email,
1177 role: this.addTeachers.role, 1177 role: this.addTeachers.role,
1178 dob: this.addTeachers.date, 1178 dob: this.addTeachers.date,
1179 city: this.addTeachers.city, 1179 city: this.addTeachers.city,
1180 pincode: this.addTeachers.pincode, 1180 pincode: this.addTeachers.pincode,
1181 country: this.addTeachers.country, 1181 country: this.addTeachers.country,
1182 permanentAddress: this.addTeachers.permanentAddress, 1182 permanentAddress: this.addTeachers.permanentAddress,
1183 presentAddress: this.addTeachers.presentAddress, 1183 presentAddress: this.addTeachers.presentAddress,
1184 mobileNo: this.addTeachers.mobileNo, 1184 mobileNo: this.addTeachers.mobileNo,
1185 state: this.addTeachers.state, 1185 state: this.addTeachers.state,
1186 joinDate: this.addTeachers.joinDate, 1186 joinDate: this.addTeachers.joinDate,
1187 }; 1187 };
1188 if (this.imageUrl) { 1188 if (this.imageUrl) {
1189 var str = this.imageUrl; 1189 var str = this.imageUrl;
1190 const [baseUrl, imageUrl] = str.split(/,/); 1190 const [baseUrl, imageUrl] = str.split(/,/);
1191 addTeacher.upload = imageUrl; 1191 addTeacher.upload = imageUrl;
1192 } 1192 }
1193 this.loading = true; 1193 this.loading = true;
1194 http() 1194 http()
1195 .post("/createTeacher", addTeacher) 1195 .post("/createTeacher", addTeacher)
1196 .then((response) => { 1196 .then((response) => {
1197 this.imageUrl = ""; 1197 this.imageUrl = "";
1198 this.getTeacherList(); 1198 this.getTeacherList();
1199 this.snackbar = true; 1199 this.snackbar = true;
1200 this.text = "New Teacher added successfully"; 1200 this.text = "New Teacher added successfully";
1201 this.color = "green"; 1201 this.color = "green";
1202 this.clear(); 1202 this.clear();
1203 this.loading = false; 1203 this.loading = false;
1204 this.addTeacherDialog = false; 1204 this.addTeacherDialog = false;
1205 }) 1205 })
1206 .catch((error) => { 1206 .catch((error) => {
1207 this.snackbar = true; 1207 this.snackbar = true;
1208 this.text = error.response.data.message; 1208 this.text = error.response.data.message;
1209 this.color = "error"; 1209 this.color = "error";
1210 this.loading = false; 1210 this.loading = false;
1211 }); 1211 });
1212 } 1212 }
1213 }, 1213 },
1214 clear() { 1214 clear() {
1215 this.$refs.form.reset(); 1215 this.$refs.form.reset();
1216 this.imageUrl = ""; 1216 this.imageUrl = "";
1217 }, 1217 },
1218 save() { 1218 save() {
1219 this.loading = true; 1219 this.loading = true;
1220 let editTeacher = { 1220 let editTeacher = {
1221 teacherId: this.editedItem._id, 1221 teacherId: this.editedItem._id,
1222 name: this.editedItem.name, 1222 name: this.editedItem.name,
1223 email: this.editedItem.email, 1223 email: this.editedItem.email,
1224 role: this.editedItem.role, 1224 role: this.editedItem.role,
1225 dob: this.editedItem.dob, 1225 dob: this.editedItem.dob,
1226 city: this.editedItem.city, 1226 city: this.editedItem.city,
1227 pincode: this.editedItem.pincode, 1227 pincode: this.editedItem.pincode,
1228 country: this.editedItem.country, 1228 country: this.editedItem.country,
1229 permanentAddress: this.editedItem.permanentAddress, 1229 permanentAddress: this.editedItem.permanentAddress,
1230 presentAddress: this.editedItem.presentAddress, 1230 presentAddress: this.editedItem.presentAddress,
1231 mobileNo: this.editedItem.mobileNo, 1231 mobileNo: this.editedItem.mobileNo,
1232 state: this.editedItem.state, 1232 state: this.editedItem.state,
1233 joinDate: this.editedItem.joinDate, 1233 joinDate: this.editedItem.joinDate,
1234 }; 1234 };
1235 if (this.imageUrl) { 1235 if (this.imageUrl) {
1236 var str = this.imageUrl; 1236 var str = this.imageUrl;
1237 const [baseUrl, imageUrl] = str.split(/,/); 1237 const [baseUrl, imageUrl] = str.split(/,/);
1238 editTeacher.upload = imageUrl; 1238 editTeacher.upload = imageUrl;
1239 } 1239 }
1240 http() 1240 http()
1241 .put("/updateTeacher", editTeacher) 1241 .put("/updateTeacher", editTeacher)
1242 .then((response) => { 1242 .then((response) => {
1243 this.snackbar = true; 1243 this.snackbar = true;
1244 this.text = "Successfully Edit Existing Teacher"; 1244 this.text = "Successfully Edit Existing Teacher";
1245 this.color = "green"; 1245 this.color = "green";
1246 this.loading = false; 1246 this.loading = false;
1247 this.getTeacherList(); 1247 this.getTeacherList();
1248 this.closeEditTeacherDialog(); 1248 this.closeEditTeacherDialog();
1249 }) 1249 })
1250 .catch((error) => { 1250 .catch((error) => {
1251 this.snackbar = true; 1251 this.snackbar = true;
1252 this.text = error.response.data.message; 1252 this.text = error.response.data.message;
1253 this.color = "error"; 1253 this.color = "error";
1254 this.loading = false; 1254 this.loading = false;
1255 }); 1255 });
1256 }, 1256 },
1257 suspendStatus(suspendStatus, id) { 1257 suspendStatus(suspendStatus, id) {
1258 let suspendStatusData = { 1258 let suspendStatusData = {
1259 teacherId: id, 1259 teacherId: id,
1260 status: suspendStatus, 1260 status: suspendStatus,
1261 }; 1261 };
1262 this.showLoader = true; 1262 this.showLoader = true;
1263 http() 1263 http()
1264 .put("/suspendAccount", suspendStatusData) 1264 .put("/suspendAccount", suspendStatusData)
1265 .then((response) => { 1265 .then((response) => {
1266 this.getTeacherList(); 1266 this.getTeacherList();
1267 this.text = response.data.message; 1267 this.text = response.data.message;
1268 this.color = "green"; 1268 this.color = "green";
1269 this.snackbar = true; 1269 this.snackbar = true;
1270 this.showLoader = false; 1270 this.showLoader = false;
1271 }) 1271 })
1272 .catch((error) => { 1272 .catch((error) => {
1273 this.snackbar = true; 1273 this.snackbar = true;
1274 this.color = "error"; 1274 this.color = "error";
1275 this.text = error.response.data.message; 1275 this.text = error.response.data.message;
1276 this.showLoader = false; 1276 this.showLoader = false;
1277 }); 1277 });
1278 }, 1278 },
1279 displaySearch() { 1279 displaySearch() {
1280 (this.show = false), (this.showSearch = true); 1280 (this.show = false), (this.showSearch = true);
1281 }, 1281 },
1282 closeSearch() { 1282 closeSearch() {
1283 this.showSearch = false; 1283 this.showSearch = false;
1284 this.show = true; 1284 this.show = true;
1285 this.search = ""; 1285 this.search = "";
1286 }, 1286 },
1287 }, 1287 },
1288 mounted() { 1288 mounted() {
1289 const getCountryList = countryList(); 1289 const getCountryList = countryList();
1290 this.countries = getCountryList; 1290 this.countries = getCountryList;
1291 this.getTeacherList(); 1291 this.getTeacherList();
1292 this.role = this.$store.state.role; 1292 this.role = this.$store.state.role;
1293 }, 1293 },
1294 }; 1294 };
1295 </script> 1295 </script>
1296 <style scoped> 1296 <style scoped>
1297 .active { 1297 .active {
1298 background-color: gray; 1298 background-color: gray;
1299 color: white !important; 1299 color: white !important;
1300 } 1300 }
1301 .activebtn { 1301 .activebtn {
1302 color: black !important; 1302 color: black !important;
1303 } 1303 }
1304 </style> 1304 </style>
src/pages/TimeTable/timeTable.vue
Diff comments   View file @8b7976c
1 <template> 1 <template>
2 <v-container fluid class="body-color"> 2 <v-container fluid class="body-color">
3 <!-- ****** EDIT TIME-TABLE****** --> 3 <!-- ****** EDIT TIME-TABLE****** -->
4 <v-dialog v-model="dialog" max-width="600px" persistent> 4 <v-dialog v-model="dialog" max-width="600px" persistent>
5 <v-flex xs12 sm12> 5 <v-flex xs12 sm12>
6 <v-card flat class="card-style pa-2" dark> 6 <v-card flat class="card-style pa-2" dark>
7 <v-layout> 7 <v-layout>
8 <v-flex xs12> 8 <v-flex xs12>
9 <label class="title text-xs-center">Edit Time Table</label> 9 <label class="title text-xs-center">Edit Time Table</label>
10 <v-icon size="24" class="right" @click="dialog = false">cancel</v-icon> 10 <v-icon size="24" class="right" @click="dialog = false">cancel</v-icon>
11 </v-flex> 11 </v-flex>
12 </v-layout> 12 </v-layout>
13 <!-- <v-layout> 13 <!-- <v-layout>
14 <v-flex 14 <v-flex
15 xs12 15 xs12
16 class="text-xs-center text-sm-center text-md-center text-lg-center" 16 class="text-xs-center text-sm-center text-md-center text-lg-center"
17 > 17 >
18 <v-avatar size="100px"> 18 <v-avatar size="100px">
19 <img src="/static/icon/user.png" v-if="!imageUrl" /> 19 <img src="/static/icon/user.png" v-if="!imageUrl" />
20 </v-avatar> 20 </v-avatar>
21 <input 21 <input
22 type="file" 22 type="file"
23 style="display: none" 23 style="display: none"
24 ref="image" 24 ref="image"
25 accept="image/*" 25 accept="image/*"
26 @change="onFilePicked" 26 @change="onFilePicked"
27 /> 27 />
28 <img 28 <img
29 :src="imageData.imageUrl" 29 :src="imageData.imageUrl"
30 height="150" 30 height="150"
31 v-if="imageUrl" 31 v-if="imageUrl"
32 style="border-radius:50%; width:200px" 32 style="border-radius:50%; width:200px"
33 /> 33 />
34 </v-flex> 34 </v-flex>
35 </v-layout>--> 35 </v-layout>-->
36 <v-flex xs12 sm12> 36 <v-flex xs12 sm12>
37 <v-layout> 37 <v-layout>
38 <v-flex xs4 class="pt-4 subheading"> 38 <v-flex xs4 class="pt-4 subheading">
39 <label class="right hidden-xs-only hidden-sm-only">Select Class:</label> 39 <label class="right hidden-xs-only hidden-sm-only">Select Class:</label>
40 <label class="right hidden-lg-only hidden-md-only hidden-xl-only">Class:</label> 40 <label class="right hidden-lg-only hidden-md-only hidden-xl-only">Class:</label>
41 </v-flex> 41 </v-flex>
42 <v-flex xs8 sm5 class="ml-3"> 42 <v-flex xs8 sm5 class="ml-3">
43 <v-select 43 <v-select
44 :items="addclass" 44 :items="addclass"
45 label="Select Class" 45 label="Select Class"
46 v-model="editedItem.classNum" 46 v-model="editedItem.classNum"
47 item-text="classNum" 47 item-text="classNum"
48 item-value="_id" 48 item-value="_id"
49 @change="getSections(editedItem.classNum)" 49 @change="getSections(editedItem.classNum)"
50 ></v-select> 50 ></v-select>
51 </v-flex> 51 </v-flex>
52 </v-layout> 52 </v-layout>
53 </v-flex> 53 </v-flex>
54 <v-flex xs12 sm12> 54 <v-flex xs12 sm12>
55 <v-layout> 55 <v-layout>
56 <v-flex xs4 class="pt-4 subheading"> 56 <v-flex xs4 class="pt-4 subheading">
57 <label class="right hidden-xs-only hidden-sm-only">Section Name:</label> 57 <label class="right hidden-xs-only hidden-sm-only">Section Name:</label>
58 <label class="right hidden-lg-only hidden-md-only hidden-xl-only">Section:</label> 58 <label class="right hidden-lg-only hidden-md-only hidden-xl-only">Section:</label>
59 </v-flex> 59 </v-flex>
60 <v-flex xs8 sm5 class="ml-3"> 60 <v-flex xs8 sm5 class="ml-3">
61 <v-select 61 <v-select
62 :items="addSection" 62 :items="addSection"
63 label="Select Section" 63 label="Select Section"
64 v-model="editedItem.selectSection" 64 v-model="editedItem.selectSection"
65 item-text="name" 65 item-text="name"
66 item-value="_id" 66 item-value="_id"
67 ></v-select> 67 ></v-select>
68 </v-flex> 68 </v-flex>
69 </v-layout> 69 </v-layout>
70 </v-flex> 70 </v-flex>
71 <v-layout> 71 <v-layout>
72 <v-flex xs12 sm9 offset-sm1> 72 <v-flex xs12 sm9 offset-sm1>
73 <v-card-actions> 73 <v-card-actions>
74 <v-spacer></v-spacer> 74 <v-spacer></v-spacer>
75 <v-btn round dark @click.native="close" class="clear-button">Cancel</v-btn> 75 <v-btn round dark @click.native="close" class="clear-button">Cancel</v-btn>
76 <v-btn round dark @click="save" class="add-button">Save</v-btn> 76 <v-btn round dark @click="save" class="add-button">Save</v-btn>
77 </v-card-actions> 77 </v-card-actions>
78 </v-flex> 78 </v-flex>
79 </v-layout> 79 </v-layout>
80 </v-card> 80 </v-card>
81 </v-flex> 81 </v-flex>
82 </v-dialog> 82 </v-dialog>
83 83
84 <!-- ****** ADD Dialog Schedule IN TIME-TABLE ****** --> 84 <!-- ****** ADD Dialog Schedule IN TIME-TABLE ****** -->
85 85
86 <v-dialog v-model="dialogSchedule" max-width="600px" persistent> 86 <v-dialog v-model="dialogSchedule" max-width="600px" persistent>
87 <v-flex xs12 sm12> 87 <v-flex xs12 sm12>
88 <v-card flat class="card-style pa-2" dark> 88 <v-card flat class="card-style pa-2" dark>
89 <v-layout> 89 <v-layout>
90 <v-flex xs12> 90 <v-flex xs12>
91 <label class="title text-xs-center">Add Schedule</label> 91 <label class="title text-xs-center">Add Schedule</label>
92 <v-icon size="24" class="right" @click="dialogSchedule = false">cancel</v-icon> 92 <v-icon size="24" class="right" @click="dialogSchedule = false">cancel</v-icon>
93 </v-flex> 93 </v-flex>
94 </v-layout> 94 </v-layout>
95 <v-form ref="formAddDay" v-model="validAddDay" lazy-validation> 95 <v-form ref="formAddDay" v-model="validAddDay" lazy-validation>
96 <v-container fluid> 96 <v-container fluid>
97 <v-flex xs12 sm12 class="py-3"> 97 <v-flex xs12 sm12 class="py-3">
98 <v-layout> 98 <v-layout>
99 <v-flex xs4 class="pt-4 subheading"> 99 <v-flex xs4 class="pt-4 subheading">
100 <label class="right hidden-xs-only hidden-sm-only">Select Day:</label> 100 <label class="right hidden-xs-only hidden-sm-only">Select Day:</label>
101 <label class="right hidden-lg-only hidden-md-only hidden-xl-only">Day:</label> 101 <label class="right hidden-lg-only hidden-md-only hidden-xl-only">Day:</label>
102 </v-flex> 102 </v-flex>
103 <v-flex xs12 sm5 class="pl-3"> 103 <v-flex xs12 sm5 class="pl-3">
104 <v-select 104 <v-select
105 :items="addOneDay" 105 :items="addOneDay"
106 label="Select Day" 106 label="Select Day"
107 v-model="schedule.selectDay" 107 v-model="schedule.selectDay"
108 :rules="selecDayRule" 108 :rules="selecDayRule"
109 ></v-select> 109 ></v-select>
110 </v-flex> 110 </v-flex>
111 </v-layout> 111 </v-layout>
112 </v-flex> 112 </v-flex>
113 <v-layout> 113 <v-layout>
114 <v-flex xs12 sm8 offset-sm2> 114 <v-flex xs12 sm8 offset-sm2>
115 <v-card-actions> 115 <v-card-actions>
116 <v-spacer></v-spacer> 116 <v-spacer></v-spacer>
117 <v-btn round dark @click="submitSchedule" class="add-button">Save</v-btn> 117 <v-btn round dark @click="submitSchedule" class="add-button">Save</v-btn>
118 <v-spacer></v-spacer> 118 <v-spacer></v-spacer>
119 </v-card-actions> 119 </v-card-actions>
120 </v-flex> 120 </v-flex>
121 </v-layout> 121 </v-layout>
122 </v-container> 122 </v-container>
123 </v-form> 123 </v-form>
124 </v-card> 124 </v-card>
125 </v-flex> 125 </v-flex>
126 </v-dialog> 126 </v-dialog>
127 127
128 <!-- ****** ADD LECTURES IN TIME-TABLE ****** --> 128 <!-- ****** ADD LECTURES IN TIME-TABLE ****** -->
129 129
130 <v-dialog v-model="dialogAddLecture" max-width="600px" persistent> 130 <v-dialog v-model="dialogAddLecture" max-width="600px" persistent>
131 <v-flex xs12 sm12> 131 <v-flex xs12 sm12>
132 <v-card flat class="card-style pa-2" dark> 132 <v-card flat class="card-style pa-2" dark>
133 <v-layout> 133 <v-layout>
134 <v-flex xs12> 134 <v-flex xs12>
135 <label class="title text-xs-center">Add Lecture</label> 135 <label class="title text-xs-center">Add Lecture</label>
136 <v-icon size="24" class="right" @click="dialogAddLecture = false">cancel</v-icon> 136 <v-icon size="24" class="right" @click="dialogAddLecture = false">cancel</v-icon>
137 </v-flex> 137 </v-flex>
138 </v-layout> 138 </v-layout>
139 <v-form ref="lectureForm" v-model="valid" lazy-validation> 139 <v-form ref="lectureForm" v-model="valid" lazy-validation>
140 <v-container fluid> 140 <v-container fluid>
141 <v-flex xs12 sm12> 141 <v-flex xs12 sm12>
142 <v-layout> 142 <v-layout>
143 <v-flex xs4 class="pt-4 subheading"> 143 <v-flex xs4 class="pt-4 subheading">
144 <label class="right hidden-xs-only hidden-sm-only">Select Class:</label> 144 <label class="right hidden-xs-only hidden-sm-only">Select Class:</label>
145 <label class="right hidden-lg-only hidden-md-only hidden-xl-only">Class:</label> 145 <label class="right hidden-lg-only hidden-md-only hidden-xl-only">Class:</label>
146 </v-flex> 146 </v-flex>
147 <v-flex xs5 class="ml-3"> 147 <v-flex xs5 class="ml-3">
148 <v-select 148 <v-select
149 :items="addclass" 149 :items="addclass"
150 label="Select Class" 150 label="Select Class"
151 v-model="timeTable.select" 151 v-model="timeTable.select"
152 item-text="classNum" 152 item-text="classNum"
153 item-value="_id" 153 item-value="_id"
154 @change="getClassSubject(timeTable.select)" 154 @change="getClassSubject(timeTable.select)"
155 :rules="classRules" 155 :rules="classRules"
156 required 156 required
157 ></v-select> 157 ></v-select>
158 </v-flex> 158 </v-flex>
159 </v-layout> 159 </v-layout>
160 </v-flex> 160 </v-flex>
161 <v-flex xs12 sm12> 161 <v-flex xs12 sm12>
162 <v-layout> 162 <v-layout>
163 <v-flex xs4 class="pt-4 subheading"> 163 <v-flex xs4 class="pt-4 subheading">
164 <label class="right">Subject Name:</label> 164 <label class="right">Subject Name:</label>
165 </v-flex> 165 </v-flex>
166 <v-flex xs5 class="ml-3"> 166 <v-flex xs5 class="ml-3">
167 <v-select 167 <v-select
168 :items="subjectList.subjects" 168 :items="subjectList.subjects"
169 label="Select Subject" 169 label="Select Subject"
170 v-model="addlectures.subjectName" 170 v-model="addlectures.subjectName"
171 item-text="subjectName" 171 item-text="subjectName"
172 item-value="subjectName" 172 item-value="subjectName"
173 :rules="subjectNameRules" 173 :rules="subjectNameRules"
174 required 174 required
175 ></v-select> 175 ></v-select>
176 <!-- <v-text-field 176 <!-- <v-text-field
177 v-model="addlectures.subjectName" 177 v-model="addlectures.subjectName"
178 :rules="subjectNameRules" 178 :rules="subjectNameRules"
179 placeholder="fill your Subject Name" 179 placeholder="fill your Subject Name"
180 type="text" 180 type="text"
181 ></v-text-field>--> 181 ></v-text-field>-->
182 </v-flex> 182 </v-flex>
183 </v-layout> 183 </v-layout>
184 </v-flex> 184 </v-flex>
185 <v-flex xs12 sm12> 185 <v-flex xs12 sm12>
186 <v-layout> 186 <v-layout>
187 <v-flex xs4 class="pt-4 subheading"> 187 <v-flex xs4 class="pt-4 subheading">
188 <label class="right">Time In:</label> 188 <label class="right">Time In:</label>
189 </v-flex> 189 </v-flex>
190 <v-flex xs5 class="ml-3"> 190 <v-flex xs5 class="ml-3">
191 <v-menu 191 <v-menu
192 ref="menuD" 192 ref="menuD"
193 :close-on-content-click="false" 193 :close-on-content-click="false"
194 v-model="menu5" 194 v-model="menu5"
195 :nudge-right="40" 195 :nudge-right="40"
196 lazy 196 lazy
197 transition="scale-transition" 197 transition="scale-transition"
198 offset-y 198 offset-y
199 full-width 199 full-width
200 max-width="290px" 200 max-width="290px"
201 min-width="290px" 201 min-width="290px"
202 > 202 >
203 <v-text-field 203 <v-text-field
204 slot="activator" 204 slot="activator"
205 v-model="addlectures.timeIn" 205 v-model="addlectures.timeIn"
206 label="Select your Time In" 206 label="Select your Time In"
207 append-icon="access_time" 207 append-icon="access_time"
208 :rules="timeInRules" 208 :rules="timeInRules"
209 readonly 209 readonly
210 ></v-text-field> 210 ></v-text-field>
211 <v-time-picker v-model="addlectures.timeIn" @change="menu5 = false"></v-time-picker> 211 <v-time-picker v-model="addlectures.timeIn" @change="menu5 = false"></v-time-picker>
212 </v-menu> 212 </v-menu>
213 </v-flex> 213 </v-flex>
214 </v-layout> 214 </v-layout>
215 </v-flex> 215 </v-flex>
216 <v-flex xs12 sm12> 216 <v-flex xs12 sm12>
217 <v-layout> 217 <v-layout>
218 <v-flex xs4 class="pt-4 subheading"> 218 <v-flex xs4 class="pt-4 subheading">
219 <label class="right">Time Out:</label> 219 <label class="right">Time Out:</label>
220 </v-flex> 220 </v-flex>
221 <v-flex xs5 class="ml-3"> 221 <v-flex xs5 class="ml-3">
222 <v-menu 222 <v-menu
223 ref="menuE" 223 ref="menuE"
224 :close-on-content-click="false" 224 :close-on-content-click="false"
225 v-model="menu6" 225 v-model="menu6"
226 :nudge-right="40" 226 :nudge-right="40"
227 lazy 227 lazy
228 transition="scale-transition" 228 transition="scale-transition"
229 offset-y 229 offset-y
230 full-width 230 full-width
231 max-width="290px" 231 max-width="290px"
232 min-width="290px" 232 min-width="290px"
233 > 233 >
234 <v-text-field 234 <v-text-field
235 slot="activator" 235 slot="activator"
236 :rules="timeOutRules" 236 :rules="timeOutRules"
237 v-model="addlectures.timeOut" 237 v-model="addlectures.timeOut"
238 label="Select your Time Out" 238 label="Select your Time Out"
239 append-icon="access_time" 239 append-icon="access_time"
240 readonly 240 readonly
241 ></v-text-field> 241 ></v-text-field>
242 <v-time-picker v-model="addlectures.timeOut" @change="menu6 = false"></v-time-picker> 242 <v-time-picker v-model="addlectures.timeOut" @change="menu6 = false"></v-time-picker>
243 </v-menu> 243 </v-menu>
244 </v-flex> 244 </v-flex>
245 </v-layout> 245 </v-layout>
246 </v-flex> 246 </v-flex>
247 <v-flex xs12 sm12> 247 <v-flex xs12 sm12>
248 <v-layout> 248 <v-layout>
249 <v-flex xs4 class="pt-4 subheading"> 249 <v-flex xs4 class="pt-4 subheading">
250 <label class="right">Select Teacher:</label> 250 <label class="right">Select Teacher:</label>
251 </v-flex> 251 </v-flex>
252 <v-flex xs5 class="ml-3"> 252 <v-flex xs5 class="ml-3">
253 <v-select 253 <v-select
254 :items="addTeachers" 254 :items="addTeachers"
255 label="Select Teacher" 255 label="Select Teacher"
256 v-model="addlectures.teacherId" 256 v-model="addlectures.teacherId"
257 :rules="teacherRules" 257 :rules="teacherRules"
258 item-text="name" 258 item-text="name"
259 item-value="_id" 259 item-value="_id"
260 required 260 required
261 ></v-select> 261 ></v-select>
262 </v-flex> 262 </v-flex>
263 </v-layout> 263 </v-layout>
264 </v-flex> 264 </v-flex>
265 <v-layout> 265 <v-layout>
266 <v-flex xs12 sm8 offset-sm2> 266 <v-flex xs12 sm8 offset-sm2>
267 <v-card-actions> 267 <v-card-actions>
268 <v-spacer></v-spacer> 268 <v-spacer></v-spacer>
269 <v-btn round dark @click="AddLecture" class="add-button">Save</v-btn> 269 <v-btn round dark @click="AddLecture" class="add-button">Save</v-btn>
270 </v-card-actions> 270 </v-card-actions>
271 </v-flex> 271 </v-flex>
272 </v-layout> 272 </v-layout>
273 </v-container> 273 </v-container>
274 </v-form> 274 </v-form>
275 </v-card> 275 </v-card>
276 </v-flex> 276 </v-flex>
277 </v-dialog> 277 </v-dialog>
278 278
279 <!-- ****** EDIT PARTICULAR LECTURES TIME-TABLE ****** --> 279 <!-- ****** EDIT PARTICULAR LECTURES TIME-TABLE ****** -->
280 280
281 <v-dialog v-model="dialogUpdateLectures" max-width="600px" persistent> 281 <v-dialog v-model="dialogUpdateLectures" max-width="600px" persistent>
282 <v-flex xs12 sm12 class> 282 <v-flex xs12 sm12 class>
283 <v-card flat class="card-style pa-2" dark> 283 <v-card flat class="card-style pa-2" dark>
284 <v-layout> 284 <v-layout>
285 <v-flex xs12> 285 <v-flex xs12>
286 <label class="title text-xs-center">Edit Lecture</label> 286 <label class="title text-xs-center">Edit Lecture</label>
287 <v-icon size="24" class="right" @click="dialogUpdateLectures = false">cancel</v-icon> 287 <v-icon size="24" class="right" @click="dialogUpdateLectures = false">cancel</v-icon>
288 </v-flex> 288 </v-flex>
289 </v-layout> 289 </v-layout>
290 <v-flex xs12 sm12> 290 <v-flex xs12 sm12>
291 <v-layout> 291 <v-layout>
292 <v-flex xs4 class="pt-4 subheading"> 292 <v-flex xs4 class="pt-4 subheading">
293 <label class="right hidden-xs-only hidden-sm-only">Select Class:</label> 293 <label class="right hidden-xs-only hidden-sm-only">Select Class:</label>
294 <label class="right hidden-lg-only hidden-md-only hidden-xl-only">Class:</label> 294 <label class="right hidden-lg-only hidden-md-only hidden-xl-only">Class:</label>
295 </v-flex> 295 </v-flex>
296 <v-flex xs7 sm6 class="ml-3"> 296 <v-flex xs7 sm6 class="ml-3">
297 <v-select 297 <v-select
298 :items="addclass" 298 :items="addclass"
299 label="Select Class" 299 label="Select Class"
300 v-model="updateLectures.select" 300 v-model="updateLectures.select"
301 item-text="classNum" 301 item-text="classNum"
302 item-value="_id" 302 item-value="_id"
303 @change="getClassSubject(updateLectures.select)" 303 @change="getClassSubject(updateLectures.select)"
304 required 304 required
305 ></v-select> 305 ></v-select>
306 </v-flex> 306 </v-flex>
307 </v-layout> 307 </v-layout>
308 </v-flex> 308 </v-flex>
309 <v-flex xs12 sm12> 309 <v-flex xs12 sm12>
310 <v-layout> 310 <v-layout>
311 <v-flex xs4 class="pt-4 subheading"> 311 <v-flex xs4 class="pt-4 subheading">
312 <label class="right hidden-xs-only hidden-sm-only">Select Subject:</label> 312 <label class="right hidden-xs-only hidden-sm-only">Select Subject:</label>
313 <label class="right hidden-lg-only hidden-md-only hidden-xl-only">Subject:</label> 313 <label class="right hidden-lg-only hidden-md-only hidden-xl-only">Subject:</label>
314 </v-flex> 314 </v-flex>
315 <v-flex xs7 sm6 class="ml-3"> 315 <v-flex xs7 sm6 class="ml-3">
316 <v-select 316 <v-select
317 :items="subjectList.subjects" 317 :items="subjectList.subjects"
318 label="Select Subject" 318 label="Select Subject"
319 v-model="updateLectures.subjectName" 319 v-model="updateLectures.subjectName"
320 item-text="subjectName" 320 item-text="subjectName"
321 item-value="subjectName" 321 item-value="subjectName"
322 required 322 required
323 ></v-select> 323 ></v-select>
324 <!-- <v-text-field 324 <!-- <v-text-field
325 v-model="updateLectures.subjectName" 325 v-model="updateLectures.subjectName"
326 placeholder="fill your Subject Name" 326 placeholder="fill your Subject Name"
327 type="text" 327 type="text"
328 ></v-text-field>--> 328 ></v-text-field>-->
329 </v-flex> 329 </v-flex>
330 </v-layout> 330 </v-layout>
331 </v-flex> 331 </v-flex>
332 <v-flex xs12 sm12> 332 <v-flex xs12 sm12>
333 <v-layout> 333 <v-layout>
334 <v-flex xs5 sm4 class="pt-4 subheading"> 334 <v-flex xs5 sm4 class="pt-4 subheading">
335 <label class="right">Time In:</label> 335 <label class="right">Time In:</label>
336 </v-flex> 336 </v-flex>
337 <v-flex xs7 sm6 class="ml-3"> 337 <v-flex xs7 sm6 class="ml-3">
338 <v-menu 338 <v-menu
339 ref="menuC" 339 ref="menuC"
340 :close-on-content-click="false" 340 :close-on-content-click="false"
341 v-model="menu4" 341 v-model="menu4"
342 :nudge-right="40" 342 :nudge-right="40"
343 lazy 343 lazy
344 transition="scale-transition" 344 transition="scale-transition"
345 offset-y 345 offset-y
346 full-width 346 full-width
347 max-width="290px" 347 max-width="290px"
348 min-width="290px" 348 min-width="290px"
349 > 349 >
350 <v-text-field 350 <v-text-field
351 slot="activator" 351 slot="activator"
352 v-model="updateLectures.timeIn" 352 v-model="updateLectures.timeIn"
353 placeholder="Select your Time In" 353 placeholder="Select your Time In"
354 append-icon="access_time" 354 append-icon="access_time"
355 readonly 355 readonly
356 ></v-text-field> 356 ></v-text-field>
357 <v-time-picker v-model="updateLectures.timeIn" @change="menu4= false"></v-time-picker> 357 <v-time-picker v-model="updateLectures.timeIn" @change="menu4= false"></v-time-picker>
358 </v-menu> 358 </v-menu>
359 </v-flex> 359 </v-flex>
360 </v-layout> 360 </v-layout>
361 </v-flex> 361 </v-flex>
362 <v-flex xs12 sm12> 362 <v-flex xs12 sm12>
363 <v-layout> 363 <v-layout>
364 <v-flex xs5 sm4 class="pt-4 subheading"> 364 <v-flex xs5 sm4 class="pt-4 subheading">
365 <label class="right">Time Out:</label> 365 <label class="right">Time Out:</label>
366 </v-flex> 366 </v-flex>
367 <v-flex xs7 sm6 class="ml-3"> 367 <v-flex xs7 sm6 class="ml-3">
368 <v-menu 368 <v-menu
369 ref="menuB" 369 ref="menuB"
370 :close-on-content-click="false" 370 :close-on-content-click="false"
371 v-model="menu3" 371 v-model="menu3"
372 :nudge-right="40" 372 :nudge-right="40"
373 lazy 373 lazy
374 transition="scale-transition" 374 transition="scale-transition"
375 offset-y 375 offset-y
376 full-width 376 full-width
377 max-width="290px" 377 max-width="290px"
378 min-width="290px" 378 min-width="290px"
379 > 379 >
380 <v-text-field 380 <v-text-field
381 slot="activator" 381 slot="activator"
382 v-model="updateLectures.timeOut" 382 v-model="updateLectures.timeOut"
383 placeholder="Select your Time Out" 383 placeholder="Select your Time Out"
384 append-icon="access_time" 384 append-icon="access_time"
385 readonly 385 readonly
386 ></v-text-field> 386 ></v-text-field>
387 <v-time-picker v-model="updateLectures.timeOut" @change="menu3 = false"></v-time-picker> 387 <v-time-picker v-model="updateLectures.timeOut" @change="menu3 = false"></v-time-picker>
388 </v-menu> 388 </v-menu>
389 </v-flex> 389 </v-flex>
390 </v-layout> 390 </v-layout>
391 </v-flex> 391 </v-flex>
392 <v-flex xs12 sm12> 392 <v-flex xs12 sm12>
393 <v-layout> 393 <v-layout>
394 <v-flex xs5 sm4 class="pt-4 subheading"> 394 <v-flex xs5 sm4 class="pt-4 subheading">
395 <label class="right">Select Teacher:</label> 395 <label class="right">Select Teacher:</label>
396 </v-flex> 396 </v-flex>
397 <v-flex xs7 sm6 class="ml-3"> 397 <v-flex xs7 sm6 class="ml-3">
398 <v-select 398 <v-select
399 :items="addTeachers" 399 :items="addTeachers"
400 label="Select Teacher" 400 label="Select Teacher"
401 v-model="updateLectures.teacherId" 401 v-model="updateLectures.teacherId"
402 item-text="name" 402 item-text="name"
403 item-value="_id" 403 item-value="_id"
404 required 404 required
405 ></v-select> 405 ></v-select>
406 </v-flex> 406 </v-flex>
407 </v-layout> 407 </v-layout>
408 </v-flex> 408 </v-flex>
409 <v-layout> 409 <v-layout>
410 <v-flex xs12 sm10 offset-sm1> 410 <v-flex xs12 sm10 offset-sm1>
411 <v-card-actions> 411 <v-card-actions>
412 <!-- <v-btn round dark @click.native="closeUpdateLectures">Cancel</v-btn> --> 412 <!-- <v-btn round dark @click.native="closeUpdateLectures">Cancel</v-btn> -->
413 <v-spacer></v-spacer> 413 <v-spacer></v-spacer>
414 <v-btn 414 <v-btn
415 round 415 round
416 dark 416 dark
417 class="add-button" 417 class="add-button"
418 @click="updateParticularTable(updateLectures.timeIn,updateLectures.timeOut)" 418 @click="updateParticularTable(updateLectures.timeIn,updateLectures.timeOut)"
419 >Save</v-btn> 419 >Save</v-btn>
420 </v-card-actions> 420 </v-card-actions>
421 </v-flex> 421 </v-flex>
422 </v-layout> 422 </v-layout>
423 </v-card> 423 </v-card>
424 </v-flex> 424 </v-flex>
425 </v-dialog> 425 </v-dialog>
426 <!-- ****** EXISTING-USERS TIME-TABLE ****** --> 426 <!-- ****** EXISTING-USERS TIME-TABLE ****** -->
427 427
428 <!-- <v-card flat> 428 <!-- <v-card flat>
429 <v-card-actions class="hidden-xs-only hidden-sm-only"> 429 <v-card-actions class="hidden-xs-only hidden-sm-only">
430 <v-layout> 430 <v-layout>
431 <label class="right mt-4 ml-5">Select Class:</label> 431 <label class="right mt-4 ml-5">Select Class:</label>
432 <v-select 432 <v-select
433 :items="addclass" 433 :items="addclass"
434 label="Select Class" 434 label="Select Class"
435 v-model="selectTimeTable.select" 435 v-model="selectTimeTable.select"
436 item-text="classNum" 436 item-text="classNum"
437 item-value="_id" 437 item-value="_id"
438 name="Select Class" 438 name="Select Class"
439 @change="getSections(selectTimeTable.select)" 439 @change="getSections(selectTimeTable.select)"
440 class="px-4" 440 class="px-4"
441 required 441 required
442 ></v-select> 442 ></v-select>
443 <label class="right mt-4">Select Section:</label> 443 <label class="right mt-4">Select Section:</label>
444 <v-select 444 <v-select
445 :items="addSection" 445 :items="addSection"
446 label="Select Section" 446 label="Select Section"
447 v-model="selectTimeTable.selectSection" 447 v-model="selectTimeTable.selectSection"
448 item-text="name" 448 item-text="name"
449 item-value="_id" 449 item-value="_id"
450 name="Select Section" 450 name="Select Section"
451 class="pl-3" 451 class="pl-3"
452 required 452 required
453 ></v-select> 453 ></v-select>
454 </v-layout> 454 </v-layout>
455 <v-spacer></v-spacer> 455 <v-spacer></v-spacer>
456 <v-btn @click="findTimeTable()" round dark :loading="loadingFindData" class="left">Find</v-btn> 456 <v-btn @click="findTimeTable()" round dark :loading="loadingFindData" class="left">Find</v-btn>
457 </v-card-actions> 457 </v-card-actions>
458 <v-layout class="hidden-xl-only hidden-lg-only hidden-md-only"> 458 <v-layout class="hidden-xl-only hidden-lg-only hidden-md-only">
459 <v-flex xs4 sm2 class="mt-4 ml-2"> 459 <v-flex xs4 sm2 class="mt-4 ml-2">
460 <label>Select Class:</label> 460 <label>Select Class:</label>
461 </v-flex> 461 </v-flex>
462 <v-flex xs6 sm9> 462 <v-flex xs6 sm9>
463 <v-select 463 <v-select
464 :items="addclass" 464 :items="addclass"
465 label="Select Class" 465 label="Select Class"
466 v-model="selectTimeTable.select" 466 v-model="selectTimeTable.select"
467 item-text="classNum" 467 item-text="classNum"
468 item-value="_id" 468 item-value="_id"
469 name="Select Class" 469 name="Select Class"
470 @change="getSections(selectTimeTable.select)" 470 @change="getSections(selectTimeTable.select)"
471 required 471 required
472 ></v-select> 472 ></v-select>
473 </v-flex> 473 </v-flex>
474 </v-layout> 474 </v-layout>
475 <v-layout class="hidden-xl-only hidden-lg-only hidden-md-only"> 475 <v-layout class="hidden-xl-only hidden-lg-only hidden-md-only">
476 <v-flex xs4 sm2 class="mt-4 ml-2"> 476 <v-flex xs4 sm2 class="mt-4 ml-2">
477 <label>Select Section:</label> 477 <label>Select Section:</label>
478 </v-flex> 478 </v-flex>
479 <v-flex xs6 sm9> 479 <v-flex xs6 sm9>
480 <v-select 480 <v-select
481 :items="addSection" 481 :items="addSection"
482 label="Select Section" 482 label="Select Section"
483 v-model="selectTimeTable.selectSection" 483 v-model="selectTimeTable.selectSection"
484 item-text="name" 484 item-text="name"
485 item-value="_id" 485 item-value="_id"
486 name="Select Section" 486 name="Select Section"
487 required 487 required
488 ></v-select> 488 ></v-select>
489 </v-flex> 489 </v-flex>
490 </v-layout> 490 </v-layout>
491 <v-layout class="hidden-xl-only hidden-lg-only hidden-md-only"> 491 <v-layout class="hidden-xl-only hidden-lg-only hidden-md-only">
492 <v-flex xs12> 492 <v-flex xs12>
493 <v-btn @click="findTimeTable()" round dark :loading="loading" class="right mr-4 mb-2">Find</v-btn> 493 <v-btn @click="findTimeTable()" round dark :loading="loading" class="right mr-4 mb-2">Find</v-btn>
494 </v-flex> 494 </v-flex>
495 </v-layout> 495 </v-layout>
496 </v-card>--> 496 </v-card>-->
497 <v-flex xs12> 497 <v-flex xs12>
498 <v-toolbar color="transparent" flat> 498 <v-toolbar color="transparent" flat>
499 <v-btn 499 <v-btn
500 fab 500 fab
501 dark 501 dark
502 class="open-dialog-button hidden-xl-only hidden-md-only hidden-lg-only" 502 class="open-dialog-button hidden-xl-only hidden-md-only hidden-lg-only"
503 small 503 small
504 @click="addTimeTableDialog = true" 504 @click="addTimeTableDialog = true"
505 > 505 >
506 <v-icon dark>add</v-icon> 506 <v-icon dark>add</v-icon>
507 </v-btn> 507 </v-btn>
508 <v-btn 508 <v-btn
509 round 509 round
510 class="open-dialog-button hidden-sm-only hidden-xs-only" 510 class="open-dialog-button hidden-sm-only hidden-xs-only"
511 dark 511 dark
512 @click="addTimeTableDialog = true" 512 @click="addTimeTableDialog = true"
513 > 513 >
514 <v-icon class="white--text pr-1" size="20">add</v-icon>Add Time Table 514 <v-icon class="white--text pr-1" size="20">add</v-icon>Add Time Table
515 </v-btn> 515 </v-btn>
516 <v-flex xs4 md2> 516 <v-flex xs4 md2>
517 <v-select 517 <v-select
518 :items="addclass" 518 :items="addclass"
519 label="Select Class" 519 label="Select Class"
520 v-model="selectTimeTable.select" 520 v-model="selectTimeTable.select"
521 item-text="classNum" 521 item-text="classNum"
522 item-value="_id" 522 item-value="_id"
523 name="Select Class" 523 name="Select Class"
524 @change="getSections(selectTimeTable.select)" 524 @change="getSections(selectTimeTable.select)"
525 required 525 required
526 ></v-select> 526 ></v-select>
527 </v-flex> 527 </v-flex>
528 <v-flex xs4 md2 class="ml-4"> 528 <v-flex xs4 md2 class="ml-4">
529 <v-select 529 <v-select
530 :items="addSection" 530 :items="addSection"
531 label="Select Section" 531 label="Select Section"
532 v-model="selectTimeTable.selectSection" 532 v-model="selectTimeTable.selectSection"
533 item-text="name" 533 item-text="name"
534 item-value="_id" 534 item-value="_id"
535 name="Select Section" 535 name="Select Section"
536 required 536 required
537 ></v-select> 537 ></v-select>
538 </v-flex> 538 </v-flex>
539 <v-spacer></v-spacer> 539 <v-spacer></v-spacer>
540 <v-btn 540 <v-btn
541 @click="findTimeTable()" 541 @click="findTimeTable()"
542 round 542 round
543 dark 543 dark
544 :loading="loading" 544 :loading="loading"
545 class="right mb-2 open-dialog-button" 545 class="right mb-2 open-dialog-button"
546 >Find</v-btn> 546 >Find</v-btn>
547 <v-card-title class="body-1" v-show="show"> 547 <v-card-title class="body-1" v-show="show">
548 <v-btn icon large flat @click="displaySearch"> 548 <v-btn icon large flat @click="displaySearch">
549 <v-avatar size="27"> 549 <v-avatar size="27">
550 <img src="/static/icon/search.png" alt="icon" /> 550 <img src="/static/icon/search.png" alt="icon" />
551 </v-avatar> 551 </v-avatar>
552 </v-btn> 552 </v-btn>
553 </v-card-title> 553 </v-card-title>
554 <v-flex xs8 sm8 md3 lg2 v-if="showSearch"> 554 <v-flex xs8 sm8 md3 lg2 v-if="showSearch">
555 <v-layout> 555 <v-layout>
556 <v-text-field 556 <v-text-field
557 autofocus 557 autofocus
558 v-model="search" 558 v-model="search"
559 label="Search" 559 label="Search"
560 prepend-inner-icon="search" 560 prepend-inner-icon="search"
561 color="primary" 561 color="primary"
562 ></v-text-field> 562 ></v-text-field>
563 <v-icon @click="closeSearch" color="error">close</v-icon> 563 <v-icon @click="closeSearch" color="error">close</v-icon>
564 </v-layout> 564 </v-layout>
565 </v-flex> 565 </v-flex>
566 </v-toolbar> 566 </v-toolbar>
567 <v-data-table 567 <v-data-table
568 :headers="headers" 568 :headers="headers"
569 :items="desserts" 569 :items="desserts"
570 :pagination.sync="pagination" 570 :pagination.sync="pagination"
571 :search="search" 571 :search="search"
572 item-key="_id" 572 item-key="_id"
573 > 573 >
574 <template slot="items" slot-scope="props"> 574 <template slot="items" slot-scope="props">
575 <tr 575 <tr
576 style="cursor: pointer;" 576 style="cursor: pointer;"
577 class="tr" 577 class="tr"
578 @click="getTimeTable(props.item), props.expanded = !props.expanded" 578 @click="getTimeTable(props.item), props.expanded = !props.expanded"
579 > 579 >
580 <td class="td td-row">{{ props.index + 1}}</td> 580 <td class="td td-row">{{ props.index + 1}}</td>
581 <td class="text-xs-center td td-row">{{ props.item.classData.classNum}}</td> 581 <td class="text-xs-center td td-row">{{ props.item.classData.classNum}}</td>
582 <td class="text-xs-center td td-row">{{ props.item.sectionData.name }}</td> 582 <td class="text-xs-center td td-row">{{ props.item.sectionData.name }}</td>
583 <td class="text-xs-center td td-row"> 583 <td class="text-xs-center td td-row">
584 <span> 584 <span>
585 <v-tooltip top> 585 <v-tooltip top>
586 <img 586 <img
587 slot="activator" 587 slot="activator"
588 style="cursor:pointer; width:20px; height:20px; " 588 style="cursor:pointer; width:20px; height:20px; "
589 class="mr-3" 589 class="mr-3"
590 @click="editItem(props.item)" 590 @click="editItem(props.item)"
591 src="/static/icon/edit.png" 591 src="/static/icon/edit.png"
592 /> 592 />
593 <span>Edit</span> 593 <span>Edit</span>
594 </v-tooltip> 594 </v-tooltip>
595 <v-tooltip top> 595 <v-tooltip top>
596 <img 596 <img
597 slot="activator" 597 slot="activator"
598 style="cursor:pointer; width:20px; height:20px; " 598 style="cursor:pointer; width:20px; height:20px; "
599 class="mr-3" 599 class="mr-3"
600 @click="deleteItem(props.item)" 600 @click="deleteItem(props.item)"
601 src="/static/icon/delete.png" 601 src="/static/icon/delete.png"
602 /> 602 />
603 <span>Delete</span> 603 <span>Delete</span>
604 </v-tooltip> 604 </v-tooltip>
605 <v-tooltip top> 605 <v-tooltip top>
606 <img 606 <img
607 slot="activator" 607 slot="activator"
608 style="cursor:pointer; width:20px; height:20px; " 608 style="cursor:pointer; width:20px; height:20px; "
609 class="mr-3" 609 class="mr-3"
610 src="/static/icon/add1.png" 610 src="/static/icon/add1.png"
611 @click="addSchedule(props.item._id)" 611 @click="addSchedule(props.item._id)"
612 /> 612 />
613 <span>Add</span> 613 <span>Add</span>
614 </v-tooltip> 614 </v-tooltip>
615 </span> 615 </span>
616 </td> 616 </td>
617 </tr> 617 </tr>
618 </template> 618 </template>
619 <template slot="expand" slot-scope="props"> 619 <template slot="expand" slot-scope="props">
620 <v-data-table 620 <v-data-table
621 :items="timeTableList.schedule" 621 :items="timeTableList.schedule"
622 hide-actions 622 hide-actions
623 item-key="title" 623 item-key="title"
624 style="width: auto;" 624 style="width: auto;"
625 > 625 >
626 <template slot="items" slot-scope="props"> 626 <template slot="items" slot-scope="props">
627 <tr class="tr"> 627 <tr class="tr">
628 <td class="text-xs-left subheading table-td td td-row"> 628 <td class="text-xs-left subheading table-td td td-row">
629 <b>{{ props.item.day }}</b> 629 <b>{{ props.item.day }}</b>
630 </td> 630 </td>
631 <td class="table-td td td-row"> 631 <td class="table-td td td-row">
632 <b>Subject</b> 632 <b>Subject</b>
633 <br /> 633 <br />
634 <b>Time In</b> 634 <b>Time In</b>
635 <br /> 635 <br />
636 <b>Time Out</b> 636 <b>Time Out</b>
637 </td> 637 </td>
638 <td v-for="list in props.item.lectures" class="table-td td td-row"> 638 <td v-for="list in props.item.lectures" class="table-td td td-row">
639 <b>{{ list.subjectName }}</b> 639 <b>{{ list.subjectName }}</b>
640 <img 640 <img
641 style="cursor:pointer; width:20px; height:18px; " 641 style="cursor:pointer; width:20px; height:18px; "
642 class="mr-2 ml-2" 642 class="mr-2 ml-2"
643 src="/static/icon/edit1.png" 643 src="/static/icon/edit1.png"
644 @click="updateTimeTable(list, timeTableList,props.item._id)" 644 @click="updateTimeTable(list, timeTableList,props.item._id)"
645 /> 645 />
646 <img 646 <img
647 style="cursor:pointer; width:20px; height:20px; " 647 style="cursor:pointer; width:20px; height:20px; "
648 src="/static/icon/delete1.png" 648 src="/static/icon/delete1.png"
649 @click="deleteTimeTable(list,props.item.lectures)" 649 @click="deleteTimeTable(list,props.item.lectures)"
650 /> 650 />
651 <br /> 651 <br />
652 {{list.timeIn}} 652 {{list.timeIn}}
653 <br /> 653 <br />
654 {{list.timeOut}} 654 {{list.timeOut}}
655 </td> 655 </td>
656 <td class="td td-row"> 656 <td class="td td-row">
657 <v-tooltip top> 657 <v-tooltip top>
658 <v-icon 658 <v-icon
659 slot="activator" 659 slot="activator"
660 color="black" 660 color="black"
661 @click="addLecture(props.item._id, timeTableList._id)" 661 @click="addLecture(props.item._id, timeTableList._id)"
662 >add_circle_outline</v-icon> 662 >add_circle_outline</v-icon>
663 <span>Add</span> 663 <span>Add</span>
664 </v-tooltip> 664 </v-tooltip>
665 </td> 665 </td>
666 </tr> 666 </tr>
667 </template> 667 </template>
668 </v-data-table> 668 </v-data-table>
669 </template> 669 </template>
670 <v-alert 670 <v-alert
671 slot="no-results" 671 slot="no-results"
672 :value="true" 672 :value="true"
673 color="error" 673 color="error"
674 icon="warning" 674 icon="warning"
675 >Your search for "{{ search }}" found no results.</v-alert> 675 >Your search for "{{ search }}" found no results.</v-alert>
676 </v-data-table> 676 </v-data-table>
677 <br /> 677 <br />
678 <br /> 678 <br />
679 </v-flex> 679 </v-flex>
680 680
681 <!-- ****** ADD TIME-TABLE ****** --> 681 <!-- ****** ADD TIME-TABLE ****** -->
682 <v-dialog v-model="addTimeTableDialog" max-width="600px" v-if="addTimeTableDialog" persistent> 682 <v-dialog v-model="addTimeTableDialog" max-width="600px" v-if="addTimeTableDialog" persistent>
683 <v-card flat class="card-style pa-2" dark> 683 <v-card flat class="card-style pa-2" dark>
684 <v-layout> 684 <v-layout>
685 <v-flex xs12> 685 <v-flex xs12>
686 <label class="title text-xs-center">Add Time Table</label> 686 <label class="title text-xs-center">Add Time Table</label>
687 <v-icon size="24" class="right" @click="closeAddTimeTableModel">cancel</v-icon> 687 <v-icon size="24" class="right" @click="closeAddTimeTableModel">cancel</v-icon>
688 </v-flex> 688 </v-flex>
689 </v-layout> 689 </v-layout>
690 <v-form ref="form" v-model="valid" lazy-validation> 690 <v-form ref="form" v-model="valid" lazy-validation>
691 <v-container fluid class="pt-3"> 691 <v-container fluid class="pt-3">
692 <v-flex xs12> 692 <v-flex xs12>
693 <v-layout> 693 <v-layout>
694 <v-flex xs4 class="pt-4 subheading"> 694 <v-flex xs4 class="pt-4 subheading">
695 <label class="right hidden-xs-only hidden-sm-only">Select Class:</label> 695 <label class="right hidden-xs-only hidden-sm-only">Select Class:</label>
696 <label class="right hidden-lg-only hidden-md-only hidden-xl-only">Class:</label> 696 <label class="right hidden-lg-only hidden-md-only hidden-xl-only">Class:</label>
697 </v-flex> 697 </v-flex>
698 <v-flex xs8 sm6 class="ml-3"> 698 <v-flex xs8 sm6 class="ml-3">
699 <v-select 699 <v-select
700 :items="addclass" 700 :items="addclass"
701 label="Select Class" 701 label="Select Class"
702 v-model="timeTable.select" 702 v-model="timeTable.select"
703 item-text="classNum" 703 item-text="classNum"
704 item-value="_id" 704 item-value="_id"
705 @change="getSections(timeTable.select)" 705 @change="getSections(timeTable.select)"
706 :rules="classRules" 706 :rules="classRules"
707 required 707 required
708 ></v-select> 708 ></v-select>
709 </v-flex> 709 </v-flex>
710 </v-layout> 710 </v-layout>
711 </v-flex> 711 </v-flex>
712 <v-flex xs12> 712 <v-flex xs12>
713 <v-layout> 713 <v-layout>
714 <v-flex xs4 class="pt-4 subheading"> 714 <v-flex xs4 class="pt-4 subheading">
715 <label class="right hidden-xs-only hidden-sm-only">Select Section:</label> 715 <label class="right hidden-xs-only hidden-sm-only">Select Section:</label>
716 <label class="right hidden-lg-only hidden-md-only hidden-xl-only">Section:</label> 716 <label class="right hidden-lg-only hidden-md-only hidden-xl-only">Section:</label>
717 </v-flex> 717 </v-flex>
718 <v-flex sm6 xs8 class="ml-3"> 718 <v-flex sm6 xs8 class="ml-3">
719 <v-select 719 <v-select
720 :items="addSection" 720 :items="addSection"
721 label="Select Section" 721 label="Select Section"
722 v-model="timeTable.selectSection" 722 v-model="timeTable.selectSection"
723 item-text="name" 723 item-text="name"
724 item-value="_id" 724 item-value="_id"
725 :rules="sectionRules" 725 :rules="sectionRules"
726 @change="getClassSubject(timeTable.select)" 726 @change="getClassSubject(timeTable.select)"
727 required 727 required
728 ></v-select> 728 ></v-select>
729 </v-flex> 729 </v-flex>
730 </v-layout> 730 </v-layout>
731 <v-layout> 731 <v-layout>
732 <v-flex xs4 class="pt-4 subheading"> 732 <v-flex xs4 class="pt-4 subheading">
733 <label class="right hidden-xs-only hidden-sm-only">Subject Name:</label> 733 <label class="right hidden-xs-only hidden-sm-only">Subject Name:</label>
734 <label class="right hidden-lg-only hidden-md-only hidden-xl-only">Subject:</label> 734 <label class="right hidden-lg-only hidden-md-only hidden-xl-only">Subject:</label>
735 </v-flex> 735 </v-flex>
736 <v-flex xs8 sm6 class="ml-3"> 736 <v-flex xs8 sm6 class="ml-3">
737 <v-select 737 <v-select
738 :items="subjectList.subjects" 738 :items="subjectList.subjects"
739 label="Select Subject" 739 label="Select Subject"
740 v-model="timeTable.subjectName" 740 v-model="timeTable.subjectName"
741 item-text="subjectName" 741 item-text="subjectName"
742 item-value="subjectName" 742 item-value="subjectName"
743 :rules="subjectNameRules" 743 :rules="subjectNameRules"
744 required 744 required
745 ></v-select> 745 ></v-select>
746 </v-flex> 746 </v-flex>
747 </v-layout> 747 </v-layout>
748 </v-flex> 748 </v-flex>
749 <v-flex xs12> 749 <v-flex xs12>
750 <v-layout> 750 <v-layout>
751 <v-flex xs4 class="pt-4 subheading"> 751 <v-flex xs4 class="pt-4 subheading">
752 <label class="right hidden-xs-only hidden-sm-only">Select Teacher:</label> 752 <label class="right hidden-xs-only hidden-sm-only">Select Teacher:</label>
753 <label class="right hidden-lg-only hidden-md-only hidden-xl-only">Teacher:</label> 753 <label class="right hidden-lg-only hidden-md-only hidden-xl-only">Teacher:</label>
754 </v-flex> 754 </v-flex>
755 <v-flex xs8 sm6 class="ml-3"> 755 <v-flex xs8 sm6 class="ml-3">
756 <v-select 756 <v-select
757 :items="addTeachers" 757 :items="addTeachers"
758 label="Select Teacher" 758 label="Select Teacher"
759 v-model="timeTable.selectTeacher" 759 v-model="timeTable.selectTeacher"
760 item-text="name" 760 item-text="name"
761 item-value="_id" 761 item-value="_id"
762 :rules="teacherRules" 762 :rules="teacherRules"
763 required 763 required
764 ></v-select> 764 ></v-select>
765 </v-flex> 765 </v-flex>
766 </v-layout> 766 </v-layout>
767 </v-flex> 767 </v-flex>
768 <v-flex xs12> 768 <v-flex xs12>
769 <v-layout> 769 <v-layout>
770 <v-flex xs4 class="pt-4 subheading"> 770 <v-flex xs4 class="pt-4 subheading">
771 <label class="right">Select Day:</label> 771 <label class="right">Select Day:</label>
772 </v-flex> 772 </v-flex>
773 <v-flex xs8 sm6 class="ml-3"> 773 <v-flex xs8 sm6 class="ml-3">
774 <v-select 774 <v-select
775 :items="addOneDay" 775 :items="addOneDay"
776 label="Select Day" 776 label="Select Day"
777 v-model="timeTable.selectDay" 777 v-model="timeTable.selectDay"
778 :rules="dayRules" 778 :rules="dayRules"
779 item-text="name" 779 item-text="name"
780 item-value="_id" 780 item-value="_id"
781 required 781 required
782 ></v-select> 782 ></v-select>
783 </v-flex> 783 </v-flex>
784 </v-layout> 784 </v-layout>
785 </v-flex> 785 </v-flex>
786 <!-- <v-flex xs12> 786 <!-- <v-flex xs12>
787 <v-layout> 787 <v-layout>
788 <v-flex xs4 class="pt-4 subheading"> 788 <v-flex xs4 class="pt-4 subheading">
789 <label class="right hidden-xs-only hidden-sm-only">Subject Name:</label> 789 <label class="right hidden-xs-only hidden-sm-only">Subject Name:</label>
790 <label class="right hidden-lg-only hidden-md-only hidden-xl-only">Subject:</label> 790 <label class="right hidden-lg-only hidden-md-only hidden-xl-only">Subject:</label>
791 </v-flex> 791 </v-flex>
792 <v-flex xs8 sm6 class="ml-3"> 792 <v-flex xs8 sm6 class="ml-3">
793 <v-text-field 793 <v-text-field
794 placeholder="fill your Subject Name" 794 placeholder="fill your Subject Name"
795 :rules="subjectNameRules" 795 :rules="subjectNameRules"
796 v-model="timeTable.subjectName" 796 v-model="timeTable.subjectName"
797 type="text" 797 type="text"
798 required 798 required
799 ></v-text-field> 799 ></v-text-field>
800 </v-flex> 800 </v-flex>
801 </v-layout> 801 </v-layout>
802 </v-flex>--> 802 </v-flex>-->
803 <v-flex xs12> 803 <v-flex xs12>
804 <v-layout> 804 <v-layout>
805 <v-flex xs4 class="pt-4 subheading"> 805 <v-flex xs4 class="pt-4 subheading">
806 <label class="right">Time In:</label> 806 <label class="right">Time In:</label>
807 </v-flex> 807 </v-flex>
808 <v-flex xs8 sm6 class="ml-3"> 808 <v-flex xs8 sm6 class="ml-3">
809 <v-menu 809 <v-menu
810 ref="menuA" 810 ref="menuA"
811 :close-on-content-click="false" 811 :close-on-content-click="false"
812 v-model="menu2" 812 v-model="menu2"
813 :nudge-right="40" 813 :nudge-right="40"
814 :return-value.sync="timeTable.timeIn" 814 :return-value.sync="timeTable.timeIn"
815 lazy 815 lazy
816 transition="scale-transition" 816 transition="scale-transition"
817 offset-y 817 offset-y
818 full-width 818 full-width
819 max-width="290px" 819 max-width="290px"
820 min-width="290px" 820 min-width="290px"
821 > 821 >
822 <v-text-field 822 <v-text-field
823 slot="activator" 823 slot="activator"
824 v-model="timeTable.timeIn" 824 v-model="timeTable.timeIn"
825 label="Select your timeIn" 825 label="Select your timeIn"
826 append-icon="access_time" 826 append-icon="access_time"
827 :rules="timeInRules" 827 :rules="timeInRules"
828 readonly 828 readonly
829 ></v-text-field> 829 ></v-text-field>
830 <v-time-picker 830 <v-time-picker
831 v-model="timeTable.timeIn" 831 v-model="timeTable.timeIn"
832 @change="$refs.menuA.save(timeTable.timeIn)" 832 @change="$refs.menuA.save(timeTable.timeIn)"
833 ></v-time-picker> 833 ></v-time-picker>
834 </v-menu> 834 </v-menu>
835 </v-flex> 835 </v-flex>
836 </v-layout> 836 </v-layout>
837 </v-flex> 837 </v-flex>
838 <v-flex xs12> 838 <v-flex xs12>
839 <v-layout> 839 <v-layout>
840 <v-flex xs4 class="pt-4 subheading"> 840 <v-flex xs4 class="pt-4 subheading">
841 <label class="right">Time Out:</label> 841 <label class="right">Time Out:</label>
842 </v-flex> 842 </v-flex>
843 <v-flex xs8 sm6 class="ml-3"> 843 <v-flex xs8 sm6 class="ml-3">
844 <v-menu 844 <v-menu
845 ref="menu" 845 ref="menu"
846 :close-on-content-click="false" 846 :close-on-content-click="false"
847 v-model="menu1" 847 v-model="menu1"
848 :nudge-right="40" 848 :nudge-right="40"
849 :return-value.sync="timeTable.timeOut" 849 :return-value.sync="timeTable.timeOut"
850 lazy 850 lazy
851 transition="scale-transition" 851 transition="scale-transition"
852 offset-y 852 offset-y
853 full-width 853 full-width
854 max-width="290px" 854 max-width="290px"
855 min-width="290px" 855 min-width="290px"
856 > 856 >
857 <v-text-field 857 <v-text-field
858 slot="activator" 858 slot="activator"
859 v-model="timeTable.timeOut" 859 v-model="timeTable.timeOut"
860 label="Select your Time Out" 860 label="Select your Time Out"
861 append-icon="access_time" 861 append-icon="access_time"
862 :rules="timeOutRules" 862 :rules="timeOutRules"
863 readonly 863 readonly
864 ></v-text-field> 864 ></v-text-field>
865 <v-time-picker 865 <v-time-picker
866 v-model="timeTable.timeOut" 866 v-model="timeTable.timeOut"
867 @change="$refs.menu.save(timeTable.timeOut)" 867 @change="$refs.menu.save(timeTable.timeOut)"
868 ></v-time-picker> 868 ></v-time-picker>
869 </v-menu> 869 </v-menu>
870 </v-flex> 870 </v-flex>
871 </v-layout> 871 </v-layout>
872 </v-flex> 872 </v-flex>
873 <v-layout> 873 <v-layout>
874 <v-flex xs12 sm11> 874 <v-flex xs12 sm11>
875 <v-layout> 875 <v-layout>
876 <v-spacer></v-spacer> 876 <v-spacer></v-spacer>
877 <v-btn @click="clear" round class="clear-button" dark>clear</v-btn> 877 <v-btn @click="clear" round class="clear-button" dark>clear</v-btn>
878 <v-btn @click="submit" round dark :loading="loading" class="add-button">Add</v-btn> 878 <v-btn @click="submit" round dark :loading="loading" class="add-button">Add</v-btn>
879 </v-layout> 879 </v-layout>
880 </v-flex> 880 </v-flex>
881 </v-layout> 881 </v-layout>
882 </v-container> 882 </v-container>
883 </v-form> 883 </v-form>
884 </v-card> 884 </v-card>
885 </v-dialog> 885 </v-dialog>
886 <div class="loader" v-if="showLoader"> 886 <div class="loader" v-if="showLoader">
887 <v-progress-circular indeterminate color="white"></v-progress-circular> 887 <v-progress-circular indeterminate color="white"></v-progress-circular>
888 </div> 888 </div>
889 <v-snackbar 889 <v-snackbar
890 :timeout="timeout" 890 :timeout="timeout"
891 :top="y === 'top'" 891 :top="y === 'top'"
892 :right="x === 'right'" 892 :right="x === 'right'"
893 :vertical="mode === 'vertical'" 893 :vertical="mode === 'vertical'"
894 v-model="snackbar" 894 v-model="snackbar"
895 :color="color" 895 :color="color"
896 >{{ text }}</v-snackbar> 896 >{{ text }}</v-snackbar>
897 </v-container> 897 </v-container>
898 </template> 898 </template>
899 <script> 899 <script>
900 import http from "@/Services/http.js"; 900 import http from "@/Services/http.js";
901 import Util from "@/util"; 901 import Util from "@/util";
902 902
903 export default { 903 export default {
904 data: () => ({ 904 data: () => ({
905 y: "top", 905 y: "top",
906 x: "right", 906 x: "right",
907 mode: "", 907 mode: "",
908 timeout: 3000, 908 timeout: 3000,
909 text: "", 909 text: "",
910 search: "", 910 search: "",
911 color: "", 911 color: "",
912 snackbar: false, 912 snackbar: false,
913 loading: false, 913 loading: false,
914 showLoader: false, 914 showLoader: false,
915 dialog: false, 915 dialog: false,
916 show: true, 916 show: true,
917 showSearch: false, 917 showSearch: false,
918 dialogAddLecture: false, 918 dialogAddLecture: false,
919 dialogUpdateLectures: false, 919 dialogUpdateLectures: false,
920 dialogSchedule: false, 920 dialogSchedule: false,
921 dialog1: false, 921 dialog1: false,
922 valid: true, 922 valid: true,
923 addTimeTableDialog: false, 923 addTimeTableDialog: false,
924 validAddDay: true, 924 validAddDay: true,
925 loadingFindData: false, 925 loadingFindData: false,
926 addclass: [], 926 addclass: [],
927 addSection: [], 927 addSection: [],
928 subjectList: [], 928 subjectList: [],
929 addTeachers: [], 929 addTeachers: [],
930 gender: ["Male", "Female"], 930 gender: ["Male", "Female"],
931 pagination: { 931 pagination: {
932 rowsPerPage: 15, 932 rowsPerPage: 15,
933 }, 933 },
934 imageData: {}, 934 imageData: {},
935 imageName: "", 935 imageName: "",
936 imageUrl: "", 936 imageUrl: "",
937 imageFile: "", 937 imageFile: "",
938 timeInRules: [(v) => !!v || "Time In is required"], 938 timeInRules: [(v) => !!v || "Time In is required"],
939 timeOutRules: [(v) => !!v || "Time Out is required"], 939 timeOutRules: [(v) => !!v || "Time Out is required"],
940 lectureRules: [(v) => !!v || "Lecture No is required"], 940 lectureRules: [(v) => !!v || "Lecture No is required"],
941 subjectNameRules: [(v) => !!v || "Subject Name is required"], 941 subjectNameRules: [(v) => !!v || "Subject Name is required"],
942 classRules: [(v) => !!v || "Class Name is required"], 942 classRules: [(v) => !!v || "Class Name is required"],
943 sectionRules: [(v) => !!v || "Section Name is required"], 943 sectionRules: [(v) => !!v || "Section Name is required"],
944 sectionRules: [(v) => !!v || "Section Name is required"], 944 sectionRules: [(v) => !!v || "Section Name is required"],
945 teacherRules: [(v) => !!v || "Teacher Name is required"], 945 teacherRules: [(v) => !!v || "Teacher Name is required"],
946 selecDayRule: [(v) => !!v || "Day is required"], 946 selecDayRule: [(v) => !!v || "Day is required"],
947 dayRules: [(v) => !!v || "Day is required"], 947 dayRules: [(v) => !!v || "Day is required"],
948 getParticulerLecture: "", 948 getParticulerLecture: "",
949 headers: [ 949 headers: [
950 { 950 {
951 text: "No", 951 text: "No",
952 align: "", 952 align: "",
953 sortable: false, 953 sortable: false,
954 value: "No", 954 value: "No",
955 }, 955 },
956 { 956 {
957 text: "Class Name", 957 text: "Class Name",
958 value: "classData.classNum", 958 value: "classData.classNum",
959 sortable: false, 959 sortable: false,
960 align: "center", 960 align: "center",
961 }, 961 },
962 { 962 {
963 text: "Section Name", 963 text: "Section Name",
964 value: "sectionData.name", 964 value: "sectionData.name",
965 sortable: false, 965 sortable: false,
966 align: "center", 966 align: "center",
967 }, 967 },
968 { text: "Action", value: "", sortable: false, align: "center" }, 968 { text: "Action", value: "", sortable: false, align: "center" },
969 ], 969 ],
970 daysHeaders: [ 970 daysHeaders: [
971 { text: "Day", value: "dayday", sortable: false, align: "center" }, 971 { text: "Day", value: "dayday", sortable: false, align: "center" },
972 { 972 {
973 text: "Subject Name", 973 text: "Subject Name",
974 value: "subjectName", 974 value: "subjectName",
975 sortable: false, 975 sortable: false,
976 align: "center", 976 align: "center",
977 }, 977 },
978 { text: "Time In", value: "timeIn", sortable: false, align: "center" }, 978 { text: "Time In", value: "timeIn", sortable: false, align: "center" },
979 { text: "Time Out", value: "timeOut", sortable: false, align: "center" }, 979 { text: "Time Out", value: "timeOut", sortable: false, align: "center" },
980 ], 980 ],
981 addOneDay: [ 981 addOneDay: [
982 "Monday", 982 "Monday",
983 "Tuesday", 983 "Tuesday",
984 "Wednesday", 984 "Wednesday",
985 "Thursday", 985 "Thursday",
986 "Friday", 986 "Friday",
987 "Saturday", 987 "Saturday",
988 "Sunday", 988 "Sunday",
989 ], 989 ],
990 schedule: { 990 schedule: {
991 selectDay: "", 991 selectDay: "",
992 }, 992 },
993 desserts: [], 993 desserts: [],
994 timeTableList: [], 994 timeTableList: [],
995 editedIndex: -1, 995 editedIndex: -1,
996 selectTimeTable: { 996 selectTimeTable: {
997 select: "", 997 select: "",
998 selectSection: "", 998 selectSection: "",
999 }, 999 },
1000 timeTable: { 1000 timeTable: {
1001 select: "", 1001 select: "",
1002 selectSection: "", 1002 selectSection: "",
1003 selectDay: "", 1003 selectDay: "",
1004 timeIn: null, 1004 timeIn: null,
1005 timeOut: null, 1005 timeOut: null,
1006 subjectName: "", 1006 subjectName: "",
1007 selectTeacher: "", 1007 selectTeacher: "",
1008 }, 1008 },
1009 editedItem: { 1009 editedItem: {
1010 classNum: "", 1010 classNum: "",
1011 selectSection: "", 1011 selectSection: "",
1012 }, 1012 },
1013 addlectures: { 1013 addlectures: {
1014 timeIn: null, 1014 timeIn: null,
1015 timeOut: null, 1015 timeOut: null,
1016 subjectName: "", 1016 subjectName: "",
1017 teacherId: "", 1017 teacherId: "",
1018 scheduleId: "", 1018 scheduleId: "",
1019 timeTableId: "", 1019 timeTableId: "",
1020 select: "", 1020 select: "",
1021 }, 1021 },
1022 updateLectures: { 1022 updateLectures: {
1023 timeIn: null, 1023 timeIn: null,
1024 timeOut: null, 1024 timeOut: null,
1025 subjectName: "", 1025 subjectName: "",
1026 teacherId: "", 1026 teacherId: "",
1027 select: "", 1027 select: "",
1028 }, 1028 },
1029 updateLecturesId: { 1029 updateLecturesId: {
1030 lectureId: "", 1030 lectureId: "",
1031 scheduleId: "", 1031 scheduleId: "",
1032 }, 1032 },
1033 menu1: false, 1033 menu1: false,
1034 menu2: false, 1034 menu2: false,
1035 menu3: false, 1035 menu3: false,
1036 menu4: false, 1036 menu4: false,
1037 menu5: false, 1037 menu5: false,
1038 menu6: false, 1038 menu6: false,
1039 scheduleDayId: "", 1039 scheduleDayId: "",
1040 showData: false, 1040 showData: false,
1041 }), 1041 }),
1042 watch: { 1042 watch: {
1043 addTimeTableDialog: function (val) { 1043 addTimeTableDialog: function (val) {
1044 if (!val) { 1044 if (!val) {
1045 this.timeTable = []; 1045 this.timeTable = [];
1046 } 1046 }
1047 }, 1047 },
1048 }, 1048 },
1049 methods: { 1049 methods: {
1050 findTimeTable() { 1050 findTimeTable() {
1051 this.loadingFindData = true; 1051 this.loadingFindData = true;
1052 http() 1052 http()
1053 .get("/getParticularClassTimeTable", { 1053 .get("/getParticularClassTimeTable", {
1054 params: { 1054 params: {
1055 sectionId: this.selectTimeTable.selectSection, 1055 sectionId: this.selectTimeTable.selectSection,
1056 classId: this.selectTimeTable.select, 1056 classId: this.selectTimeTable.select,
1057 }, 1057 },
1058 }) 1058 })
1059 .then((response) => { 1059 .then((response) => {
1060 this.desserts = response.data.data; 1060 this.desserts = response.data.data;
1061 if (this.desserts.length === 0) { 1061 if (this.desserts.length === 0) {
1062 this.showLoader = false; 1062 this.showLoader = false;
1063 this.snackbar = true; 1063 this.snackbar = true;
1064 this.text = "Data not found!"; 1064 this.text = "Data not found!";
1065 this.color = "error"; 1065 this.color = "error";
1066 return; 1066 return;
1067 } 1067 }
1068 this.showData = true; 1068 this.showData = true;
1069 this.loadingFindData = false; 1069 this.loadingFindData = false;
1070 }) 1070 })
1071 .catch((error) => { 1071 .catch((error) => {
1072 this.loadingFindData = false; 1072 this.loadingFindData = false;
1073 this.snackbar = true; 1073 this.snackbar = true;
1074 this.text = error.response.data.message; 1074 this.text = error.response.data.message;
1075 this.text = error.response.data.statusText; 1075 this.text = error.response.data.statusText;
1076 }); 1076 });
1077 }, 1077 },
1078 getSections(_id) { 1078 getSections(_id) {
1079 var token = this.$store.state.token; 1079 var token = this.$store.state.token;
1080 http() 1080 http()
1081 .get( 1081 .get(
1082 "/getSectionsList", 1082 "/getSectionsList",
1083 { params: { classId: _id } }, 1083 { params: { classId: _id } },
1084 { 1084 {
1085 headers: { Authorization: "Bearer " + token }, 1085 headers: { Authorization: "Bearer " + token },
1086 } 1086 }
1087 ) 1087 )
1088 .then((response) => { 1088 .then((response) => {
1089 this.addSection = response.data.data; 1089 this.addSection = response.data.data;
1090 }) 1090 })
1091 .catch((err) => { 1091 .catch((err) => {
1092 // console.log("err====>", err); 1092 // console.log("err====>", err);
1093 }); 1093 });
1094 }, 1094 },
1095 getClassSubject(_id) { 1095 getClassSubject(_id) {
1096 this.showLoader = true; 1096 this.showLoader = true;
1097 // this.classId = this.classId; 1097 // this.classId = this.classId;
1098 http() 1098 http()
1099 .get( 1099 .get(
1100 "/getParticularClass", 1100 "/getParticularClass",
1101 { params: { classId: _id } }, 1101 { params: { classId: _id } },
1102 { 1102 {
1103 headers: { Authorization: "Bearer " + this.token }, 1103 headers: { Authorization: "Bearer " + this.token },
1104 } 1104 }
1105 ) 1105 )
1106 .then((response) => { 1106 .then((response) => {
1107 this.subjectList = response.data.data; 1107 this.subjectList = response.data.data;
1108 this.showLoader = false; 1108 this.showLoader = false;
1109 }) 1109 })
1110 .catch((err) => { 1110 .catch((err) => {
1111 this.showLoader = false; 1111 this.showLoader = false;
1112 }); 1112 });
1113 }, 1113 },
1114 getTimeTable(item) { 1114 getTimeTable(item) {
1115 this.showLoader = true; 1115 this.showLoader = true;
1116 this.getParticulerLecture = item._id; 1116 this.getParticulerLecture = item._id;
1117 this.getTimeTableDayData(); 1117 this.getTimeTableDayData();
1118 }, 1118 },
1119 getTimeTableDayData() { 1119 getTimeTableDayData() {
1120 var token = this.$store.state.token; 1120 var token = this.$store.state.token;
1121 http() 1121 http()
1122 .get( 1122 .get(
1123 "/getParticularTimeTable", 1123 "/getParticularTimeTable",
1124 { params: { timeTableId: this.getParticulerLecture } }, 1124 { params: { timeTableId: this.getParticulerLecture } },
1125 { 1125 {
1126 headers: { Authorization: "Bearer " + token }, 1126 headers: { Authorization: "Bearer " + token },
1127 } 1127 }
1128 ) 1128 )
1129 .then((response) => { 1129 .then((response) => {
1130 this.timeTableList = response.data.data; 1130 this.timeTableList = response.data.data;
1131 this.showLoader = false; 1131 this.showLoader = false;
1132 }) 1132 })
1133 .catch((err) => { 1133 .catch((err) => {
1134 this.showLoader = false; 1134 this.showLoader = false;
1135 // console.log("err====>", err); 1135 // console.log("err====>", err);
1136 }); 1136 });
1137 }, 1137 },
1138 pickFile() { 1138 pickFile() {
1139 this.$refs.image.click(); 1139 this.$refs.image.click();
1140 }, 1140 },
1141 1141
1142 onFilePicked(e) { 1142 onFilePicked(e) {
1143 const files = e.target.files; 1143 const files = e.target.files;
1144 this.imageData.upload = e.target.files[0]; 1144 this.imageData.upload = e.target.files[0];
1145 if (files[0] !== undefined) { 1145 if (files[0] !== undefined) {
1146 this.imageName = files[0].name; 1146 this.imageName = files[0].name;
1147 if (this.imageName.lastIndexOf(".") <= 0) { 1147 if (this.imageName.lastIndexOf(".") <= 0) {
1148 return; 1148 return;
1149 } 1149 }
1150 const fr = new FileReader(); 1150 const fr = new FileReader();
1151 fr.readAsDataURL(files[0]); 1151 fr.readAsDataURL(files[0]);
1152 fr.addEventListener("load", () => { 1152 fr.addEventListener("load", () => {
1153 this.imageUrl = fr.result; 1153 this.imageUrl = fr.result;
1154 this.imageFile = files[0]; // this is an image file that can be sent to server... 1154 this.imageFile = files[0]; // this is an image file that can be sent to server...
1155 this.imageData.imageUrl = URL.createObjectURL(this.imageFile); 1155 this.imageData.imageUrl = URL.createObjectURL(this.imageFile);
1156 }); 1156 });
1157 } else { 1157 } else {
1158 this.imageName = ""; 1158 this.imageName = "";
1159 this.imageFile = ""; 1159 this.imageFile = "";
1160 this.imageUrl = ""; 1160 this.imageUrl = "";
1161 } 1161 }
1162 }, 1162 },
1163 // getTimeTableList() { 1163 // getTimeTableList() {
1164 // this.showLoader = true; 1164 // this.showLoader = true;
1165 // var token = this.$store.state.token; 1165 // var token = this.$store.state.token;
1166 // http() 1166 // http()
1167 // .get("/getTimeTablesList", { 1167 // .get("/getTimeTablesList", {
1168 // headers: { Authorization: "Bearer " + token } 1168 // headers: { Authorization: "Bearer " + token }
1169 // }) 1169 // })
1170 // .then(response => { 1170 // .then(response => {
1171 // this.desserts = response.data.data; 1171 // this.desserts = response.data.data;
1172 // this.showLoader = false; 1172 // this.showLoader = false;
1173 // // console.log("getTimeTableList=====>", response.data.data); 1173 // // console.log("getTimeTableList=====>", response.data.data);
1174 // }) 1174 // })
1175 // .catch(err => { 1175 // .catch(err => {
1176 // // console.log("err====>", err); 1176 // // console.log("err====>", err);
1177 // this.showLoader = false; 1177 // this.showLoader = false;
1178 // this.$router.replace({ path: "/" }); 1178 // this.$router.replace({ path: "/" });
1179 // }); 1179 // });
1180 // }, 1180 // },
1181 editItem(item) { 1181 editItem(item) {
1182 this.editedIndex = this.desserts.indexOf(item); 1182 this.editedIndex = this.desserts.indexOf(item);
1183 this.editedItem = Object.assign({}, item); 1183 this.editedItem = Object.assign({}, item);
1184 this.dialog = true; 1184 this.dialog = true;
1185 }, 1185 },
1186 updateTimeTable(timeToUpdate, classToUpdate, scheduleId) { 1186 updateTimeTable(timeToUpdate, classToUpdate, scheduleId) {
1187 this.updateLecturesId.scheduleId = scheduleId; 1187 this.updateLecturesId.scheduleId = scheduleId;
1188 this.updateLecturesId.lectureId = timeToUpdate._id; 1188 this.updateLecturesId.lectureId = timeToUpdate._id;
1189 this.updateLectures = timeToUpdate; 1189 this.updateLectures = timeToUpdate;
1190 this.dialogUpdateLectures = true; 1190 this.dialogUpdateLectures = true;
1191 }, 1191 },
1192 addLecture(scheduleId, timeTableId) { 1192 addLecture(scheduleId, timeTableId) {
1193 this.addlectures.scheduleId = scheduleId; 1193 this.addlectures.scheduleId = scheduleId;
1194 this.addlectures.timeTableId = timeTableId; 1194 this.addlectures.timeTableId = timeTableId;
1195 this.dialogAddLecture = true; 1195 this.dialogAddLecture = true;
1196 }, 1196 },
1197 AddLecture() { 1197 AddLecture() {
1198 if (this.$refs.lectureForm.validate()) { 1198 if (this.$refs.lectureForm.validate()) {
1199 http() 1199 http()
1200 .post("/addLecture", this.addlectures) 1200 .post("/addLecture", this.addlectures)
1201 .then((response) => { 1201 .then((response) => {
1202 this.snackbar = true; 1202 this.snackbar = true;
1203 this.text = "New Add Lecture successfully"; 1203 this.text = "New Add Lecture successfully";
1204 var token = this.$store.state.token; 1204 var token = this.$store.state.token;
1205 http() 1205 http()
1206 .get( 1206 .get(
1207 "/getParticularTimeTable", 1207 "/getParticularTimeTable",
1208 { params: { timeTableId: this.getParticulerLecture } }, 1208 { params: { timeTableId: this.getParticulerLecture } },
1209 { 1209 {
1210 headers: { Authorization: "Bearer " + token }, 1210 headers: { Authorization: "Bearer " + token },
1211 } 1211 }
1212 ) 1212 )
1213 .then((response) => { 1213 .then((response) => {
1214 this.timeTableList = response.data.data; 1214 this.timeTableList = response.data.data;
1215 this.snackbar = true; 1215 this.snackbar = true;
1216 this.text = response.data.message; 1216 this.text = response.data.message;
1217 this.color = "green"; 1217 this.color = "green";
1218 this.showLoader = false; 1218 this.showLoader = false;
1219 }) 1219 })
1220 .catch((err) => { 1220 .catch((err) => {
1221 this.showLoader = false; 1221 this.showLoader = false;
1222 // console.log("err====>", err); 1222 // console.log("err====>", err);
1223 this.snackbar = true; 1223 this.snackbar = true;
1224 this.color = "error"; 1224 this.color = "error";
1225 this.text = error.response.data.message; 1225 this.text = error.response.data.message;
1226 }); 1226 });
1227 this.closedialogLecture(); 1227 this.closedialogLecture();
1228 this.clearLeactureData(); 1228 this.clearLeactureData();
1229 }) 1229 })
1230 .catch((error) => { 1230 .catch((error) => {
1231 this.snackbar = true; 1231 this.snackbar = true;
1232 this.text = error.response.data.message; 1232 this.text = error.response.data.message;
1233 this.text = error.response.data.statusText; 1233 this.text = error.response.data.statusText;
1234 }); 1234 });
1235 } 1235 }
1236 }, 1236 },
1237 updateParticularTable() { 1237 updateParticularTable() {
1238 let EditLecture = { 1238 let EditLecture = {
1239 lectureId: this.updateLecturesId.lectureId, 1239 lectureId: this.updateLecturesId.lectureId,
1240 scheduleId: this.updateLecturesId.scheduleId, 1240 scheduleId: this.updateLecturesId.scheduleId,
1241 updatedLecture: { 1241 updatedLecture: {
1242 timeIn: this.updateLectures.timeIn, 1242 timeIn: this.updateLectures.timeIn,
1243 timeOut: this.updateLectures.timeOut, 1243 timeOut: this.updateLectures.timeOut,
1244 subjectName: this.updateLectures.subjectName, 1244 subjectName: this.updateLectures.subjectName,
1245 teacherId: this.updateLectures.teacherId, 1245 teacherId: this.updateLectures.teacherId,
1246 }, 1246 },
1247 }; 1247 };
1248 http() 1248 http()
1249 .put("/updateLecture", EditLecture) 1249 .put("/updateLecture", EditLecture)
1250 .then((response) => { 1250 .then((response) => {
1251 // console.log("updateLecture", EditLecture); 1251 // console.log("updateLecture", EditLecture);
1252 this.snackbar = true; 1252 this.snackbar = true;
1253 this.text = response.data.message; 1253 this.text = response.data.message;
1254 this.color = "green"; 1254 this.color = "green";
1255 this.closeUpdateLectures(); 1255 this.closeUpdateLectures();
1256 }) 1256 })
1257 .catch((error) => { 1257 .catch((error) => {
1258 // console.log(error); 1258 // console.log(error);
1259 1259
1260 this.snackbar = true; 1260 this.snackbar = true;
1261 this.color = "error"; 1261 this.color = "error";
1262 this.text = error.response.data.message; 1262 this.text = error.response.data.message;
1263 if (error.response.data.statusText) { 1263 if (error.response.data.statusText) {
1264 this.text = error.response.data.statusText; 1264 this.text = error.response.data.statusText;
1265 } 1265 }
1266 }); 1266 });
1267 }, 1267 },
1268 deleteItem(item) { 1268 deleteItem(item) {
1269 let deleteTimeTable = { 1269 let deleteTimeTable = {
1270 timeTableId: item._id, 1270 timeTableId: item._id,
1271 }; 1271 };
1272 http() 1272 http()
1273 .delete( 1273 .delete(
1274 "/deleteTimeTable", 1274 "/deleteTimeTable",
1275 confirm("Are you sure you want to delete this?") && { 1275 confirm("Are you sure you want to delete this?") && {
1276 params: deleteTimeTable, 1276 params: deleteTimeTable,
1277 } 1277 }
1278 ) 1278 )
1279 .then((response) => { 1279 .then((response) => {
1280 // console.log("deleteUers",deleteTimeTable) 1280 // console.log("deleteUers",deleteTimeTable)
1281 this.snackbar = true; 1281 this.snackbar = true;
1282 this.text = response.data.message; 1282 this.text = response.data.message;
1283 this.color = "green"; 1283 this.color = "green";
1284 this.findTimeTable(); 1284 this.findTimeTable();
1285 }) 1285 })
1286 .catch((error) => { 1286 .catch((error) => {
1287 // console.log(error); 1287 // console.log(error);
1288 }); 1288 });
1289 }, 1289 },
1290 close() { 1290 close() {
1291 this.dialog = false; 1291 this.dialog = false;
1292 }, 1292 },
1293 close1() { 1293 close1() {
1294 this.dialog1 = false; 1294 this.dialog1 = false;
1295 }, 1295 },
1296 closedialogLecture() { 1296 closedialogLecture() {
1297 this.dialogAddLecture = false; 1297 this.dialogAddLecture = false;
1298 }, 1298 },
1299 closeUpdateLectures() { 1299 closeUpdateLectures() {
1300 this.dialogUpdateLectures = false; 1300 this.dialogUpdateLectures = false;
1301 }, 1301 },
1302 closeAddTimeTableModel() { 1302 closeAddTimeTableModel() {
1303 this.addTimeTableDialog = false; 1303 this.addTimeTableDialog = false;
1304 this.timeTableList = []; 1304 this.timeTableList = [];
1305 this.timeTable = []; 1305 this.timeTable = [];
1306 }, 1306 },
1307 submit() { 1307 submit() {
1308 if (this.$refs.form.validate()) { 1308 if (this.$refs.form.validate()) {
1309 let imageData = new FormData(); 1309 let imageData = new FormData();
1310 imageData.append("upload", this.imageFile); 1310 imageData.append("upload", this.imageFile);
1311 let addTimeTable = { 1311 let addTimeTable = {
1312 sectionId: this.timeTable.selectSection, 1312 sectionId: this.timeTable.selectSection,
1313 classId: this.timeTable.select, 1313 classId: this.timeTable.select,
1314 schedule: [ 1314 schedule: [
1315 { 1315 {
1316 day: this.timeTable.selectDay, 1316 day: this.timeTable.selectDay,
1317 lectures: [ 1317 lectures: [
1318 { 1318 {
1319 timeIn: this.timeTable.timeIn, 1319 timeIn: this.timeTable.timeIn,
1320 timeOut: this.timeTable.timeOut, 1320 timeOut: this.timeTable.timeOut,
1321 subjectName: this.timeTable.subjectName, 1321 subjectName: this.timeTable.subjectName,
1322 teacherId: this.timeTable.selectTeacher, 1322 teacherId: this.timeTable.selectTeacher,
1323 }, 1323 },
1324 ], 1324 ],
1325 }, 1325 },
1326 ], 1326 ],
1327 }; 1327 };
1328 this.loading = true; 1328 this.loading = true;
1329 http() 1329 http()
1330 .post("/createTimeTable", addTimeTable) 1330 .post("/createTimeTable", addTimeTable)
1331 .then((response) => { 1331 .then((response) => {
1332 // console.log("addTimeTable=====>", addTimeTable); 1332 // console.log("addTimeTable=====>", addTimeTable);
1333 if ((this.snackbar = true)) { 1333 if ((this.snackbar = true)) {
1334 this.text = "New Time Table added successfully"; 1334 this.text = "New Time Table added successfully";
1335 } 1335 }
1336 this.color = "green"; 1336 this.color = "green";
1337 // this.clear(); 1337 // this.clear();
1338 http() 1338 http()
1339 .get("/getParticularClassTimeTable", { 1339 .get("/getParticularClassTimeTable", {
1340 params: { 1340 params: {
1341 classId: this.timeTable.select, 1341 classId: this.timeTable.select,
1342 sectionId: this.timeTable.selectSection, 1342 sectionId: this.timeTable.selectSection,
1343 }, 1343 },
1344 }) 1344 })
1345 .then((response) => { 1345 .then((response) => {
1346 this.desserts = response.data.data; 1346 this.desserts = response.data.data;
1347 this.showData = true; 1347 this.showData = true;
1348 this.loadingFindData = false; 1348 this.loadingFindData = false;
1349 }) 1349 })
1350 .catch((error) => { 1350 .catch((error) => {
1351 this.loadingFindData = false; 1351 this.loadingFindData = false;
1352 this.snackbar = true; 1352 this.snackbar = true;
1353 this.text = error.response.data.message; 1353 this.text = error.response.data.message;
1354 this.text = error.response.data.statusText; 1354 this.text = error.response.data.statusText;
1355 }); 1355 });
1356 this.addTimeTableDialog = false; 1356 this.addTimeTableDialog = false;
1357 this.loading = false; 1357 this.loading = false;
1358 }) 1358 })
1359 .catch((error) => { 1359 .catch((error) => {
1360 // console.log(error); 1360 // console.log(error);
1361 if ((this.snackbar = true)) { 1361 if ((this.snackbar = true)) {
1362 this.text = error.response.data.message; 1362 this.text = error.response.data.message;
1363 } 1363 }
1364 this.loading = false; 1364 this.loading = false;
1365 }); 1365 });
1366 } 1366 }
1367 }, 1367 },
1368 clear() { 1368 clear() {
1369 this.$refs.form.reset(); 1369 this.$refs.form.reset();
1370 }, 1370 },
1371 clearLeactureData() { 1371 clearLeactureData() {
1372 this.$refs.lectureForm.reset(); 1372 this.$refs.lectureForm.reset();
1373 }, 1373 },
1374 save() { 1374 save() {
1375 let imageData = new FormData(); 1375 let imageData = new FormData();
1376 imageData.append("upload", this.imageFile); 1376 imageData.append("upload", this.imageFile);
1377 // console.log(imageData); 1377 // console.log(imageData);
1378 let editTimeTable = { 1378 let editTimeTable = {
1379 timeTableId: this.editedItem._id, 1379 timeTableId: this.editedItem._id,
1380 classId: this.editedItem.classNum, 1380 classId: this.editedItem.classNum,
1381 sectionId: this.editedItem.selectSection, 1381 sectionId: this.editedItem.selectSection,
1382 // imageData 1382 // imageData
1383 }; 1383 };
1384 http() 1384 http()
1385 .put("/updateTimeTable", editTimeTable) 1385 .put("/updateTimeTable", editTimeTable)
1386 .then((response) => { 1386 .then((response) => {
1387 // console.log("editTimeTable", editTimeTable); 1387 // console.log("editTimeTable", editTimeTable);
1388 if ((this.snackbar = true)) { 1388 if ((this.snackbar = true)) {
1389 this.text = "Successfully Edit Existing Time Table"; 1389 this.text = "Successfully Edit Existing Time Table";
1390 this.color = "success"; 1390 this.color = "success";
1391 } 1391 }
1392 http() 1392 http()
1393 .get("/getParticularClassTimeTable", { 1393 .get("/getParticularClassTimeTable", {
1394 params: { 1394 params: {
1395 classId: this.editedItem.classNum, 1395 classId: this.editedItem.classNum,
1396 sectionId: this.editedItem.selectSection, 1396 sectionId: this.editedItem.selectSection,
1397 }, 1397 },
1398 }) 1398 })
1399 .then((response) => { 1399 .then((response) => {
1400 this.desserts = response.data.data; 1400 this.desserts = response.data.data;
1401 this.showData = true; 1401 this.showData = true;
1402 this.loadingFindData = false; 1402 this.loadingFindData = false;
1403 }) 1403 })
1404 .catch((error) => { 1404 .catch((error) => {
1405 this.loadingFindData = false; 1405 this.loadingFindData = false;
1406 this.snackbar = true; 1406 this.snackbar = true;
1407 this.text = error.response.data.message; 1407 this.text = error.response.data.message;
1408 this.text = error.response.data.statusText; 1408 this.text = error.response.data.statusText;
1409 }); 1409 });
1410 }) 1410 })
1411 .catch((error) => { 1411 .catch((error) => {
1412 // console.log(error); 1412 // console.log(error);
1413 if ((this.snackbar = true)) { 1413 if ((this.snackbar = true)) {
1414 this.text = error.response.data.message; 1414 this.text = error.response.data.message;
1415 } 1415 }
1416 }); 1416 });
1417 this.close(); 1417 this.close();
1418 }, 1418 },
1419 deleteTimeTable(timeToDelete, deleteLectures) { 1419 deleteTimeTable(timeToDelete, deleteLectures) {
1420 let deleteLecture = { 1420 let deleteLecture = {
1421 lectureId: timeToDelete._id, 1421 lectureId: timeToDelete._id,
1422 }; 1422 };
1423 http() 1423 http()
1424 .delete( 1424 .delete(
1425 "/deleteLecture", 1425 "/deleteLecture",
1426 confirm("Are you sure you want to delete this?") && { 1426 confirm("Are you sure you want to delete this?") && {
1427 params: deleteLecture, 1427 params: deleteLecture,
1428 } 1428 }
1429 ) 1429 )
1430 .then((response) => { 1430 .then((response) => {
1431 if ((this.snackbar = true)) { 1431 if ((this.snackbar = true)) {
1432 this.text = "Successfully delete Existing Time Table"; 1432 this.text = "Successfully delete Existing Time Table";
1433 } 1433 }
1434 const index = this.timeTableList.schedule.indexOf(deleteLectures); 1434 const index = this.timeTableList.schedule.indexOf(deleteLectures);
1435 for (let i = 0; i < this.timeTableList.schedule.length; i++) { 1435 for (let i = 0; i < this.timeTableList.schedule.length; i++) {
1436 this.timeTableList.schedule[i].lectures.splice(index, 1); 1436 this.timeTableList.schedule[i].lectures.splice(index, 1);
1437 } 1437 }
1438 }) 1438 })
1439 .catch((error) => { 1439 .catch((error) => {
1440 // console.log(error); 1440 // console.log(error);
1441 this.snackbar = true;
1442 this.color = "error";
1443 this.text = error.response.data.message;
1441 this.snackbar = true; 1444 });
1442 this.color = "error"; 1445 },
1443 this.text = error.response.data.message; 1446 addSchedule(id) {
1444 }); 1447 this.scheduleDayId = id;
1445 }, 1448 this.dialogSchedule = true;
1446 addSchedule(id) { 1449 },
1447 this.scheduleDayId = id; 1450 submitSchedule() {
1448 this.dialogSchedule = true; 1451 if (this.$refs.formAddDay.validate()) {
1449 }, 1452 let scheduleDayData = {
1450 submitSchedule() { 1453 timeTableId: this.scheduleDayId,
1451 if (this.$refs.formAddDay.validate()) { 1454 day: this.schedule.selectDay,
1452 let scheduleDayData = { 1455 };
1453 timeTableId: this.scheduleDayId, 1456 http()
1454 day: this.schedule.selectDay, 1457 .post("/addSchedule", scheduleDayData)
1455 }; 1458 .then((response) => {
1456 http() 1459 this.snackbar = true;
1457 .post("/addSchedule", scheduleDayData) 1460 this.text = "New Schedule Day added successfully";
1458 .then((response) => { 1461 this.dialogSchedule = false;
1459 this.snackbar = true; 1462 this.loading = false;
1460 this.text = "New Schedule Day added successfully"; 1463 this.getTimeTableDayData();
1461 this.dialogSchedule = false; 1464 })
1462 this.loading = false; 1465 .catch((error) => {
1463 this.getTimeTableDayData(); 1466 // console.log(error);
1464 }) 1467 this.snackbar = true;
1465 .catch((error) => { 1468 this.text = error.response.data.message;
1466 // console.log(error); 1469 this.loading = false;
1467 this.snackbar = true; 1470 });
1468 this.text = error.response.data.message; 1471 }
1469 this.loading = false; 1472 },
1470 }); 1473 displaySearch() {
1471 } 1474 (this.show = false), (this.showSearch = true);
1472 }, 1475 },
1473 displaySearch() { 1476 closeSearch() {
1474 (this.show = false), (this.showSearch = true); 1477 this.showSearch = false;
1475 }, 1478 this.show = true;
1476 closeSearch() { 1479 this.search = "";
1477 this.showSearch = false; 1480 },
1478 this.show = true; 1481 },
1479 this.search = ""; 1482 mounted() {
1480 }, 1483 // this.getTimeTableList();
1481 }, 1484 var token = this.$store.state.token;
1482 mounted() { 1485 http()
1483 // this.getTimeTableList(); 1486 .get("/getClassesList", {
1484 var token = this.$store.state.token; 1487 headers: { Authorization: "Bearer " + token },
1485 http() 1488 })
1486 .get("/getClassesList", { 1489 .then((response) => {
1487 headers: { Authorization: "Bearer " + token }, 1490 this.addclass = response.data.data;
1488 }) 1491 // console.log("getClassesList=====>",this.addclass)
1489 .then((response) => { 1492 })
1490 this.addclass = response.data.data; 1493 .catch((error) => {
1491 // console.log("getClassesList=====>",this.addclass) 1494 this.showLoader = false;
1492 }) 1495 if (error.response.status === 401) {
1493 .catch((error) => { 1496 this.$router.replace({ path: "/" });
1494 this.showLoader = false; 1497 this.$store.dispatch("setToken", null);
1495 if (error.response.status === 401) { 1498 this.$store.dispatch("Id", null);
1496 this.$router.replace({ path: "/" }); 1499 this.$store.dispatch("Role", null);
1497 this.$store.dispatch("setToken", null); 1500 }
1498 this.$store.dispatch("Id", null); 1501 });
1499 this.$store.dispatch("Role", null); 1502
1500 } 1503 http()
1501 }); 1504 .get("/getTeachersList", {
1502 1505 headers: { Authorization: "Bearer " + token },
1503 http() 1506 })
1504 .get("/getTeachersList", { 1507 .then((response) => {
1505 headers: { Authorization: "Bearer " + token }, 1508 this.addTeachers = response.data.data;
1506 }) 1509 // console.log("getClassesList=====>",this.addTeachers)
1507 .then((response) => { 1510 })
1508 this.addTeachers = response.data.data; 1511 .catch((error) => {
1509 // console.log("getClassesList=====>",this.addTeachers) 1512 this.showLoader = false;
1510 }) 1513 if (error.response.status === 401) {
1511 .catch((error) => { 1514 this.$router.replace({ path: "/" });
1512 this.showLoader = false; 1515 this.$store.dispatch("setToken", null);
1513 if (error.response.status === 401) { 1516 this.$store.dispatch("Id", null);
1514 this.$router.replace({ path: "/" }); 1517 this.$store.dispatch("Role", null);
1515 this.$store.dispatch("setToken", null); 1518 }
1516 this.$store.dispatch("Id", null); 1519 });
1517 this.$store.dispatch("Role", null); 1520 },
1518 } 1521 };
1519 }); 1522 </script>
src/pages/User/user.vue
Diff comments   View file @8b7976c
1 <template> 1 <template>
2 <v-container fluid class="body-color"> 2 <v-container fluid class="body-color">
3 <!-- ****** EDIT USERS DETAILS ****** --> 3 <!-- ****** EDIT USERS DETAILS ****** -->
4 <v-dialog v-model="editUserDialog" max-width="1100px" scrollable persistent> 4 <v-dialog v-model="editUserDialog" max-width="1100px" scrollable persistent>
5 <v-card flat class="card-style pa-2" dark> 5 <v-card flat class="card-style pa-2" dark>
6 <v-layout> 6 <v-layout>
7 <v-flex xs12> 7 <v-flex xs12>
8 <label class="title text-xs-center">Edit User</label> 8 <label class="title text-xs-center">Edit User</label>
9 <v-icon size="24" class="right" @click="editUserDialog = false">cancel</v-icon> 9 <v-icon size="24" class="right" @click="editUserDialog = false">cancel</v-icon>
10 </v-flex> 10 </v-flex>
11 </v-layout> 11 </v-layout>
12 <v-card-text> 12 <v-card-text>
13 <v-layout> 13 <v-layout>
14 <v-flex xs12 class="text-xs-center text-sm-center text-md-center text-lg-center my-4"> 14 <v-flex xs12 class="text-xs-center text-sm-center text-md-center text-lg-center my-4">
15 <v-avatar size="120px"> 15 <v-avatar size="120px">
16 <img src="/static/icon/user.png" v-if="!editedItem.profilePicUrl && !imageUrl" /> 16 <img src="/static/icon/user.png" v-if="!editedItem.profilePicUrl && !imageUrl" />
17 <img 17 <img
18 :src="editedItem.profilePicUrl" 18 :src="editedItem.profilePicUrl"
19 v-else-if="editedItem.profilePicUrl && !imageUrl" 19 v-else-if="editedItem.profilePicUrl && !imageUrl"
20 /> 20 />
21 <img 21 <img
22 v-if="imageUrl" 22 v-if="imageUrl"
23 :src="imageUrl" 23 :src="imageUrl"
24 height="150" 24 height="150"
25 style="border-radius:50%; width:150px" 25 style="border-radius:50%; width:150px"
26 /> 26 />
27 </v-avatar> 27 </v-avatar>
28 <input 28 <input
29 type="file" 29 type="file"
30 style="display:none" 30 style="display:none"
31 ref="image" 31 ref="image"
32 accept="image/*" 32 accept="image/*"
33 @change="onFilePicked" 33 @change="onFilePicked"
34 /> 34 />
35 </v-flex> 35 </v-flex>
36 </v-layout> 36 </v-layout>
37 <v-layout wrap> 37 <v-layout wrap>
38 <v-flex xs12 sm6> 38 <v-flex xs12 sm6>
39 <v-layout> 39 <v-layout>
40 <v-flex xs4 class="pt-4 subheading"> 40 <v-flex xs4 class="pt-4 subheading">
41 <label class="right">Name:</label> 41 <label class="right">Name:</label>
42 </v-flex> 42 </v-flex>
43 <v-flex xs8 class="ml-3"> 43 <v-flex xs8 class="ml-3">
44 <v-text-field 44 <v-text-field
45 v-model="editedItem.name" 45 v-model="editedItem.name"
46 placeholder="fill your Name" 46 placeholder="fill your Name"
47 name="name" 47 name="name"
48 type="text" 48 type="text"
49 required 49 required
50 ></v-text-field> 50 ></v-text-field>
51 </v-flex> 51 </v-flex>
52 </v-layout> 52 </v-layout>
53 </v-flex> 53 </v-flex>
54 <v-flex xs12 sm6> 54 <v-flex xs12 sm6>
55 <v-layout> 55 <v-layout>
56 <v-flex xs4 class="pt-4 subheading"> 56 <v-flex xs4 class="pt-4 subheading">
57 <label class="right">Email ID:</label> 57 <label class="right">Email ID:</label>
58 </v-flex> 58 </v-flex>
59 <v-flex xs8 class="ml-3"> 59 <v-flex xs8 class="ml-3">
60 <v-text-field 60 <v-text-field
61 placeholder="fill your email" 61 placeholder="fill your email"
62 v-model="editedItem.email" 62 v-model="editedItem.email"
63 type="text" 63 type="text"
64 name="email" 64 name="email"
65 required 65 required
66 ></v-text-field> 66 ></v-text-field>
67 </v-flex> 67 </v-flex>
68 </v-layout> 68 </v-layout>
69 </v-flex> 69 </v-flex>
70 </v-layout> 70 </v-layout>
71 <v-layout wrap> 71 <v-layout wrap>
72 <v-flex xs12 sm6> 72 <v-flex xs12 sm6>
73 <v-layout> 73 <v-layout>
74 <v-flex xs4 class="pt-4 subheading"> 74 <v-flex xs4 class="pt-4 subheading">
75 <label class="right hidden-sm-only hidden-xs-only">Date of Birth:</label> 75 <label class="right hidden-sm-only hidden-xs-only">Date of Birth:</label>
76 <label class="right hidden-lg-only hidden-xl-only hidden-md-only">D.O.B:</label> 76 <label class="right hidden-lg-only hidden-xl-only hidden-md-only">D.O.B:</label>
77 </v-flex> 77 </v-flex>
78 <v-flex xs8 class="ml-3"> 78 <v-flex xs8 class="ml-3">
79 <v-menu 79 <v-menu
80 ref="menu" 80 ref="menu"
81 :close-on-content-click="false" 81 :close-on-content-click="false"
82 v-model="menu2" 82 v-model="menu2"
83 :nudge-right="40" 83 :nudge-right="40"
84 lazy 84 lazy
85 transition="scale-transition" 85 transition="scale-transition"
86 offset-y 86 offset-y
87 full-width 87 full-width
88 min-width="290px" 88 min-width="290px"
89 > 89 >
90 <v-text-field 90 <v-text-field
91 slot="activator" 91 slot="activator"
92 v-model="editedItem.dob" 92 v-model="editedItem.dob"
93 placeholder="Select date" 93 placeholder="Select date"
94 ></v-text-field> 94 ></v-text-field>
95 <v-date-picker 95 <v-date-picker
96 ref="picker" 96 ref="picker"
97 v-model="editedItem.dob" 97 v-model="editedItem.dob"
98 :max="new Date().toISOString().substr(0, 10)" 98 :max="new Date().toISOString().substr(0, 10)"
99 min="1950-01-01" 99 min="1950-01-01"
100 @input="menu2 = false" 100 @input="menu2 = false"
101 ></v-date-picker> 101 ></v-date-picker>
102 </v-menu> 102 </v-menu>
103 </v-flex> 103 </v-flex>
104 </v-layout> 104 </v-layout>
105 </v-flex> 105 </v-flex>
106 <v-flex xs12 sm6> 106 <v-flex xs12 sm6>
107 <v-layout> 107 <v-layout>
108 <v-flex xs4 class="pt-4 subheading"> 108 <v-flex xs4 class="pt-4 subheading">
109 <label class="right">Gender:</label> 109 <label class="right">Gender:</label>
110 </v-flex> 110 </v-flex>
111 <v-flex xs8 class="ml-3"> 111 <v-flex xs8 class="ml-3">
112 <v-select 112 <v-select
113 :items="gender" 113 :items="gender"
114 v-model="editedItem.gender" 114 v-model="editedItem.gender"
115 label="Select gender" 115 label="Select gender"
116 name="gender" 116 name="gender"
117 required 117 required
118 ></v-select> 118 ></v-select>
119 </v-flex> 119 </v-flex>
120 </v-layout> 120 </v-layout>
121 </v-flex> 121 </v-flex>
122 </v-layout> 122 </v-layout>
123 <v-layout wrap> 123 <v-layout wrap>
124 <v-flex xs12 sm6> 124 <v-flex xs12 sm6>
125 <v-layout> 125 <v-layout>
126 <v-flex xs4 class="pt-4 subheading"> 126 <v-flex xs4 class="pt-4 subheading">
127 <label class="right">Religion:</label> 127 <label class="right">Religion:</label>
128 </v-flex> 128 </v-flex>
129 <v-flex xs8 class="ml-3"> 129 <v-flex xs8 class="ml-3">
130 <v-text-field 130 <v-text-field
131 v-model="editedItem.religion" 131 v-model="editedItem.religion"
132 placeholder="fill your Religion" 132 placeholder="fill your Religion"
133 name="religion" 133 name="religion"
134 type="text" 134 type="text"
135 required 135 required
136 ></v-text-field> 136 ></v-text-field>
137 </v-flex> 137 </v-flex>
138 </v-layout> 138 </v-layout>
139 </v-flex> 139 </v-flex>
140 <v-flex xs12 sm6> 140 <v-flex xs12 sm6>
141 <v-layout> 141 <v-layout>
142 <v-flex xs4 class="pt-4 subheading"> 142 <v-flex xs4 class="pt-4 subheading">
143 <label class="right">JoiningDate:</label> 143 <label class="right">JoiningDate:</label>
144 </v-flex> 144 </v-flex>
145 <v-flex xs8 class="ml-3"> 145 <v-flex xs8 class="ml-3">
146 <v-menu 146 <v-menu
147 ref="menu" 147 ref="menu"
148 :close-on-content-click="false" 148 :close-on-content-click="false"
149 v-model="menu3" 149 v-model="menu3"
150 :nudge-right="40" 150 :nudge-right="40"
151 lazy 151 lazy
152 transition="scale-transition" 152 transition="scale-transition"
153 offset-y 153 offset-y
154 full-width 154 full-width
155 min-width="290px" 155 min-width="290px"
156 > 156 >
157 <v-text-field 157 <v-text-field
158 slot="activator" 158 slot="activator"
159 v-model="editedItem.joiningDate" 159 v-model="editedItem.joiningDate"
160 placeholder="Select date" 160 placeholder="Select date"
161 ></v-text-field> 161 ></v-text-field>
162 <v-date-picker 162 <v-date-picker
163 ref="picker" 163 ref="picker"
164 v-model="editedItem.joiningDate" 164 v-model="editedItem.joiningDate"
165 :max="new Date().toISOString().substr(0, 10)" 165 :max="new Date().toISOString().substr(0, 10)"
166 min="1950-01-01" 166 min="1950-01-01"
167 @input="menu3 = false" 167 @input="menu3 = false"
168 ></v-date-picker> 168 ></v-date-picker>
169 </v-menu> 169 </v-menu>
170 </v-flex> 170 </v-flex>
171 </v-layout> 171 </v-layout>
172 </v-flex> 172 </v-flex>
173 </v-layout> 173 </v-layout>
174 <v-layout wrap> 174 <v-layout wrap>
175 <v-flex xs12 sm6> 175 <v-flex xs12 sm6>
176 <v-layout> 176 <v-layout>
177 <v-flex xs4 class="pt-4 subheading"> 177 <v-flex xs4 class="pt-4 subheading">
178 <label class="right">Phone:</label> 178 <label class="right">Phone:</label>
179 </v-flex> 179 </v-flex>
180 <v-flex xs8 class="ml-3"> 180 <v-flex xs8 class="ml-3">
181 <v-text-field 181 <v-text-field
182 v-model="editedItem.phone" 182 v-model="editedItem.phone"
183 placeholder="fill your MobileNo" 183 placeholder="fill your MobileNo"
184 name="mobileNo" 184 name="mobileNo"
185 type="number" 185 type="number"
186 required 186 required
187 ></v-text-field> 187 ></v-text-field>
188 </v-flex> 188 </v-flex>
189 </v-layout> 189 </v-layout>
190 </v-flex> 190 </v-flex>
191 <v-flex xs12 sm6> 191 <v-flex xs12 sm6>
192 <v-layout> 192 <v-layout>
193 <v-flex xs4 class="pt-4 subheading"> 193 <v-flex xs4 class="pt-4 subheading">
194 <label class="right hidden-sm-only hidden-xs-only">Select Role:</label> 194 <label class="right hidden-sm-only hidden-xs-only">Select Role:</label>
195 <label class="right hidden-lg-only hidden-xl-only hidden-md-only">Role:</label> 195 <label class="right hidden-lg-only hidden-xl-only hidden-md-only">Role:</label>
196 </v-flex> 196 </v-flex>
197 <v-flex xs8 class="ml-3"> 197 <v-flex xs8 class="ml-3">
198 <v-autocomplete 198 <v-autocomplete
199 v-model="editedItem.role" 199 v-model="editedItem.role"
200 :label="editedItem.role" 200 :label="editedItem.role"
201 :items="userRole" 201 :items="userRole"
202 item-text="name" 202 item-text="name"
203 item-value="role" 203 item-value="role"
204 required 204 required
205 ></v-autocomplete> 205 ></v-autocomplete>
206 </v-flex> 206 </v-flex>
207 </v-layout> 207 </v-layout>
208 </v-flex> 208 </v-flex>
209 </v-layout> 209 </v-layout>
210 <v-layout wrap> 210 <v-layout wrap>
211 <v-flex xs12 sm6> 211 <v-flex xs12 sm6>
212 <v-layout> 212 <v-layout>
213 <v-flex xs4 class="pt-4 subheading"> 213 <v-flex xs4 class="pt-4 subheading">
214 <label class="right hidden-sm-only hidden-xs-only">Uplaod Image:</label> 214 <label class="right hidden-sm-only hidden-xs-only">Uplaod Image:</label>
215 <label class="right hidden-lg-only hidden-xl-only hidden-md-only">Uplaod:</label> 215 <label class="right hidden-lg-only hidden-xl-only hidden-md-only">Uplaod:</label>
216 </v-flex> 216 </v-flex>
217 <v-flex xs8 class="ml-3"> 217 <v-flex xs8 class="ml-3">
218 <v-text-field 218 <v-text-field
219 label="Select Image" 219 label="Select Image"
220 @click="pickFile" 220 @click="pickFile"
221 v-model="imageName" 221 v-model="imageName"
222 append-icon="attach_file" 222 append-icon="attach_file"
223 ></v-text-field> 223 ></v-text-field>
224 </v-flex> 224 </v-flex>
225 </v-layout> 225 </v-layout>
226 </v-flex> 226 </v-flex>
227 <v-flex xs12 sm6> 227 <v-flex xs12 sm6>
228 <v-layout> 228 <v-layout>
229 <v-flex xs4 class="pt-4 subheading"> 229 <v-flex xs4 class="pt-4 subheading">
230 <label class="right">Address:</label> 230 <label class="right">Address:</label>
231 </v-flex> 231 </v-flex>
232 <v-flex xs8 class="ml-3"> 232 <v-flex xs8 class="ml-3">
233 <v-text-field 233 <v-text-field
234 name="input-4-3" 234 name="input-4-3"
235 v-model="editedItem.address" 235 v-model="editedItem.address"
236 placeholder="fill Your Address" 236 placeholder="fill Your Address"
237 required 237 required
238 ></v-text-field> 238 ></v-text-field>
239 </v-flex> 239 </v-flex>
240 </v-layout> 240 </v-layout>
241 </v-flex> 241 </v-flex>
242 </v-layout> 242 </v-layout>
243 <v-layout> 243 <v-layout>
244 <v-flex xs12 sm12> 244 <v-flex xs12 sm12>
245 <v-card-actions class="hidden-sm-only hidden-xs-only"> 245 <v-card-actions class="hidden-sm-only hidden-xs-only">
246 <v-spacer></v-spacer> 246 <v-spacer></v-spacer>
247 <v-btn round dark :loading="loading" @click="save" class="add-button">Save</v-btn> 247 <v-btn round dark :loading="loading" @click="save" class="add-button">Save</v-btn>
248 </v-card-actions> 248 </v-card-actions>
249 <v-card-actions class="hidden-lg-only hidden-xl-only hidden-md-only"> 249 <v-card-actions class="hidden-lg-only hidden-xl-only hidden-md-only">
250 <v-spacer></v-spacer> 250 <v-spacer></v-spacer>
251 <v-btn round dark :loading="loading" @click="save" class="add-button">Save</v-btn> 251 <v-btn round dark :loading="loading" @click="save" class="add-button">Save</v-btn>
252 <v-spacer></v-spacer> 252 <v-spacer></v-spacer>
253 </v-card-actions> 253 </v-card-actions>
254 </v-flex> 254 </v-flex>
255 </v-layout> 255 </v-layout>
256 </v-card-text> 256 </v-card-text>
257 </v-card> 257 </v-card>
258 </v-dialog> 258 </v-dialog>
259 <!-- ****** PROFILE User DETAILS ****** --> 259 <!-- ****** PROFILE User DETAILS ****** -->
260 <v-dialog v-model="viewUserDialog" max-width="560px" scrollable persistent> 260 <v-dialog v-model="viewUserDialog" max-width="560px" scrollable persistent>
261 <v-card flat class="card-style pa-3" dark> 261 <v-card flat class="card-style pa-3" dark>
262 <v-layout> 262 <v-layout>
263 <v-flex xs12> 263 <v-flex xs12>
264 <label class="title text-xs-center">View User</label> 264 <label class="title text-xs-center">View User</label>
265 <v-icon size="24" class="right" @click="viewUserDialog = false">cancel</v-icon> 265 <v-icon size="24" class="right" @click="viewUserDialog = false">cancel</v-icon>
266 </v-flex> 266 </v-flex>
267 </v-layout> 267 </v-layout>
268 <v-card-text> 268 <v-card-text>
269 <v-container grid-list-md> 269 <v-container grid-list-md>
270 <v-layout wrap> 270 <v-layout wrap>
271 <v-flex> 271 <v-flex>
272 <v-flex align-center justify-center layout text-xs-center> 272 <v-flex align-center justify-center layout text-xs-center>
273 <v-avatar size="100px"> 273 <v-avatar size="100px">
274 <img src="/static/icon/user.png" v-if="!editedItem.profilePicUrl" /> 274 <img src="/static/icon/user.png" v-if="!editedItem.profilePicUrl" />
275 <img :src="editedItem.profilePicUrl" v-else-if="editedItem.profilePicUrl" /> 275 <img :src="editedItem.profilePicUrl" v-else-if="editedItem.profilePicUrl" />
276 </v-avatar> 276 </v-avatar>
277 </v-flex> 277 </v-flex>
278 <v-layout> 278 <v-layout>
279 <v-flex xs4 sm6> 279 <v-flex xs4 sm6>
280 <h5 class="right my-1"> 280 <h5 class="right my-1">
281 <b>Name:</b> 281 <b>Name:</b>
282 </h5> 282 </h5>
283 </v-flex> 283 </v-flex>
284 <v-flex sm6 xs8> 284 <v-flex sm6 xs8>
285 <h5 class="my-1">{{ editedItem.name }}</h5> 285 <h5 class="my-1">{{ editedItem.name }}</h5>
286 </v-flex> 286 </v-flex>
287 </v-layout> 287 </v-layout>
288 <v-layout> 288 <v-layout>
289 <v-flex xs4 sm6> 289 <v-flex xs4 sm6>
290 <h5 class="right my-1"> 290 <h5 class="right my-1">
291 <b>Email:</b> 291 <b>Email:</b>
292 </h5> 292 </h5>
293 </v-flex> 293 </v-flex>
294 <v-flex sm6 xs8> 294 <v-flex sm6 xs8>
295 <h5 class="my-1">{{ editedItem.email }}</h5> 295 <h5 class="my-1">{{ editedItem.email }}</h5>
296 </v-flex> 296 </v-flex>
297 </v-layout> 297 </v-layout>
298 <v-layout> 298 <v-layout>
299 <v-flex xs4 sm6> 299 <v-flex xs4 sm6>
300 <h5 class="right my-1"> 300 <h5 class="right my-1">
301 <b>Gender:</b> 301 <b>Gender:</b>
302 </h5> 302 </h5>
303 </v-flex> 303 </v-flex>
304 <v-flex sm6 xs8> 304 <v-flex sm6 xs8>
305 <h5 class="my-1">{{ editedItem.gender }}</h5> 305 <h5 class="my-1">{{ editedItem.gender }}</h5>
306 </v-flex> 306 </v-flex>
307 </v-layout> 307 </v-layout>
308 <v-layout> 308 <v-layout>
309 <v-flex xs4 sm6> 309 <v-flex xs4 sm6>
310 <h5 class="right my-1"> 310 <h5 class="right my-1">
311 <b>Religion:</b> 311 <b>Religion:</b>
312 </h5> 312 </h5>
313 </v-flex> 313 </v-flex>
314 <v-flex sm6 xs8> 314 <v-flex sm6 xs8>
315 <h5 class="my-1">{{ editedItem.religion }}</h5> 315 <h5 class="my-1">{{ editedItem.religion }}</h5>
316 </v-flex> 316 </v-flex>
317 </v-layout> 317 </v-layout>
318 <v-layout> 318 <v-layout>
319 <v-flex xs4 sm6> 319 <v-flex xs4 sm6>
320 <h5 class="right my-1"> 320 <h5 class="right my-1">
321 <b>Role:</b> 321 <b>Role:</b>
322 </h5> 322 </h5>
323 </v-flex> 323 </v-flex>
324 <v-flex sm6 xs8> 324 <v-flex sm6 xs8>
325 <h5 class="my-1">{{ editedItem.role }}</h5> 325 <h5 class="my-1">{{ editedItem.role }}</h5>
326 </v-flex> 326 </v-flex>
327 </v-layout> 327 </v-layout>
328 <v-layout> 328 <v-layout>
329 <v-flex xs4 sm6> 329 <v-flex xs4 sm6>
330 <h5 class="right my-1"> 330 <h5 class="right my-1">
331 <b>Phone:</b> 331 <b>Phone:</b>
332 </h5> 332 </h5>
333 </v-flex> 333 </v-flex>
334 <v-flex sm6 xs8> 334 <v-flex sm6 xs8>
335 <h5 class="my-1">{{ editedItem.phone }}</h5> 335 <h5 class="my-1">{{ editedItem.phone }}</h5>
336 </v-flex> 336 </v-flex>
337 </v-layout> 337 </v-layout>
338 <v-layout> 338 <v-layout>
339 <v-flex xs4 sm6> 339 <v-flex xs4 sm6>
340 <h5 class="right my-1"> 340 <h5 class="right my-1">
341 <b>JoiningDate:</b> 341 <b>JoiningDate:</b>
342 </h5> 342 </h5>
343 </v-flex> 343 </v-flex>
344 <v-flex sm6 xs8> 344 <v-flex sm6 xs8>
345 <h5 class="my-1">{{ dates(editedItem.joiningDate) }}</h5> 345 <h5 class="my-1">{{ dates(editedItem.joiningDate) }}</h5>
346 </v-flex> 346 </v-flex>
347 </v-layout> 347 </v-layout>
348 <v-layout> 348 <v-layout>
349 <v-flex xs4 sm6> 349 <v-flex xs4 sm6>
350 <h5 class="right my-1"> 350 <h5 class="right my-1">
351 <label class="right hidden-sm-only hidden-xs-only"> 351 <label class="right hidden-sm-only hidden-xs-only">
352 <b>Date of Birth:</b> 352 <b>Date of Birth:</b>
353 </label> 353 </label>
354 <label class="right hidden-lg-only hidden-xl-only hidden-md-only"> 354 <label class="right hidden-lg-only hidden-xl-only hidden-md-only">
355 <b>D.O.B:</b> 355 <b>D.O.B:</b>
356 </label> 356 </label>
357 </h5> 357 </h5>
358 </v-flex> 358 </v-flex>
359 <v-flex sm6 xs8> 359 <v-flex sm6 xs8>
360 <h5 class="my-1">{{ dates(editedItem.dob) }}</h5> 360 <h5 class="my-1">{{ dates(editedItem.dob) }}</h5>
361 </v-flex> 361 </v-flex>
362 </v-layout> 362 </v-layout>
363 <v-layout> 363 <v-layout>
364 <v-flex xs4 sm6> 364 <v-flex xs4 sm6>
365 <h5 class="right my-1"> 365 <h5 class="right my-1">
366 <b>Address:</b> 366 <b>Address:</b>
367 </h5> 367 </h5>
368 </v-flex> 368 </v-flex>
369 <v-flex sm6 xs8> 369 <v-flex sm6 xs8>
370 <h5 class="my-1">{{ editedItem.address }}</h5> 370 <h5 class="my-1">{{ editedItem.address }}</h5>
371 </v-flex> 371 </v-flex>
372 </v-layout> 372 </v-layout>
373 </v-flex> 373 </v-flex>
374 </v-layout> 374 </v-layout>
375 </v-container> 375 </v-container>
376 </v-card-text> 376 </v-card-text>
377 </v-card> 377 </v-card>
378 </v-dialog> 378 </v-dialog>
379 379
380 <!-- ****** EXISTING-USER TABLE DATA****** --> 380 <!-- ****** EXISTING-USER TABLE DATA****** -->
381 <v-toolbar color="transparent" flat> 381 <v-toolbar color="transparent" flat>
382 <v-btn 382 <v-btn
383 fab 383 fab
384 dark 384 dark
385 class="open-dialog-button hidden-xl-only hidden-md-only hidden-lg-only" 385 class="open-dialog-button hidden-xl-only hidden-md-only hidden-lg-only"
386 small 386 small
387 @click="addUserDialog = true" 387 @click="addUserDialog = true"
388 > 388 >
389 <v-icon dark>add</v-icon> 389 <v-icon dark>add</v-icon>
390 </v-btn> 390 </v-btn>
391 <v-btn 391 <v-btn
392 round 392 round
393 class="open-dialog-button hidden-sm-only hidden-xs-only" 393 class="open-dialog-button hidden-sm-only hidden-xs-only"
394 dark 394 dark
395 @click="addUserDialog = true" 395 @click="addUserDialog = true"
396 > 396 >
397 <v-icon class="white--text pr-1" size="20">add</v-icon>Add User 397 <v-icon class="white--text pr-1" size="20">add</v-icon>Add User
398 </v-btn> 398 </v-btn>
399 <v-spacer></v-spacer> 399 <v-spacer></v-spacer>
400 <v-card-title class="body-1" v-show="show"> 400 <v-card-title class="body-1" v-show="show">
401 <v-btn icon large flat @click="displaySearch"> 401 <v-btn icon large flat @click="displaySearch">
402 <v-avatar size="27"> 402 <v-avatar size="27">
403 <img src="/static/icon/search.png" alt="icon" /> 403 <img src="/static/icon/search.png" alt="icon" />
404 </v-avatar> 404 </v-avatar>
405 </v-btn> 405 </v-btn>
406 </v-card-title> 406 </v-card-title>
407 <v-flex xs8 sm8 lg2 md3 v-if="showSearch"> 407 <v-flex xs8 sm8 lg2 md3 v-if="showSearch">
408 <v-layout> 408 <v-layout>
409 <v-text-field 409 <v-text-field
410 autofocus 410 autofocus
411 v-model="search" 411 v-model="search"
412 label="Search" 412 label="Search"
413 prepend-inner-icon="search" 413 prepend-inner-icon="search"
414 color="primary" 414 color="primary"
415 ></v-text-field> 415 ></v-text-field>
416 <v-icon @click="closeSearch" color="error">close</v-icon> 416 <v-icon @click="closeSearch" color="error">close</v-icon>
417 </v-layout> 417 </v-layout>
418 </v-flex> 418 </v-flex>
419 </v-toolbar> 419 </v-toolbar>
420 <v-data-table :headers="headers" :items="Users" :pagination.sync="pagination" :search="search"> 420 <v-data-table :headers="headers" :items="Users" :pagination.sync="pagination" :search="search">
421 <template slot="items" slot-scope="props"> 421 <template slot="items" slot-scope="props">
422 <td class="td td-row">{{ props.index + 1 }}</td> 422 <td class="td td-row">{{ props.index + 1 }}</td>
423 <td class="td td-row text-xs-center"> 423 <td class="td td-row text-xs-center">
424 <v-avatar size="40"> 424 <v-avatar size="40">
425 <img :src="props.item.profilePicUrl" v-if="props.item.profilePicUrl" /> 425 <img :src="props.item.profilePicUrl" v-if="props.item.profilePicUrl" />
426 <img src="/static/icon/user.png" v-else-if="!props.item.profilePicUrl" /> 426 <img src="/static/icon/user.png" v-else-if="!props.item.profilePicUrl" />
427 </v-avatar> 427 </v-avatar>
428 </td> 428 </td>
429 <td class="text-xs-center td td-row">{{ props.item.name}}</td> 429 <td class="text-xs-center td td-row">{{ props.item.name}}</td>
430 <td class="text-xs-center td td-row">{{ props.item.email }}</td> 430 <td class="text-xs-center td td-row">{{ props.item.email }}</td>
431 <td class="text-xs-center td td-row">{{ dates(props.item.dob) }}</td> 431 <td class="text-xs-center td td-row">{{ dates(props.item.dob) }}</td>
432 <td class="text-xs-center td td-row">{{ dates(props.item.joiningDate)}}</td> 432 <td class="text-xs-center td td-row">{{ dates(props.item.joiningDate)}}</td>
433 <td class="text-xs-center td td-row">{{ props.item.phone }}</td> 433 <td class="text-xs-center td td-row">{{ props.item.phone }}</td>
434 <td class="text-xs-center td td-row"> 434 <td class="text-xs-center td td-row">
435 <v-switch 435 <v-switch
436 class="pl-3" 436 class="pl-3"
437 v-model="props.item.status" 437 v-model="props.item.status"
438 @change="suspendStatus(props.item.status,props.item._id)" 438 @change="suspendStatus(props.item.status,props.item._id)"
439 ></v-switch> 439 ></v-switch>
440 </td> 440 </td>
441 <td class="text-xs-center td td-row"> 441 <td class="text-xs-center td td-row">
442 <span> 442 <span>
443 <v-tooltip top> 443 <v-tooltip top>
444 <img 444 <img
445 slot="activator" 445 slot="activator"
446 style="cursor:pointer; width:25px; height:25px; " 446 style="cursor:pointer; width:25px; height:25px; "
447 class="mr-3" 447 class="mr-3"
448 @click="profile(props.item)" 448 @click="profile(props.item)"
449 src="/static/icon/view.png" 449 src="/static/icon/view.png"
450 /> 450 />
451 <span>View</span> 451 <span>View</span>
452 </v-tooltip> 452 </v-tooltip>
453 <v-tooltip top> 453 <v-tooltip top>
454 <img 454 <img
455 slot="activator" 455 slot="activator"
456 style="cursor:pointer; width:20px; height:18px; " 456 style="cursor:pointer; width:20px; height:18px; "
457 class="mr-3" 457 class="mr-3"
458 @click="editItem(props.item)" 458 @click="editItem(props.item)"
459 src="/static/icon/edit.png" 459 src="/static/icon/edit.png"
460 /> 460 />
461 <span>Edit</span> 461 <span>Edit</span>
462 </v-tooltip> 462 </v-tooltip>
463 <!-- <v-tooltip top> 463 <!-- <v-tooltip top>
464 <img 464 <img
465 slot="activator" 465 slot="activator"
466 style="cursor:pointer; width:20px; height:20px; " 466 style="cursor:pointer; width:20px; height:20px; "
467 class="mr-3" 467 class="mr-3"
468 @click="deleteItem(props.item)" 468 @click="deleteItem(props.item)"
469 src="/static/icon/delete.png" 469 src="/static/icon/delete.png"
470 /> 470 />
471 <span>Delete</span> 471 <span>Delete</span>
472 </v-tooltip>--> 472 </v-tooltip>-->
473 </span> 473 </span>
474 </td> 474 </td>
475 </template> 475 </template>
476 <v-alert 476 <v-alert
477 slot="no-results" 477 slot="no-results"
478 :value="true" 478 :value="true"
479 color="error" 479 color="error"
480 icon="warning" 480 icon="warning"
481 >Your search for "{{ search }}" found no results.</v-alert> 481 >Your search for "{{ search }}" found no results.</v-alert>
482 </v-data-table> 482 </v-data-table>
483 <!-- DIALOG BOX - Add User Data --> 483 <!-- DIALOG BOX - Add User Data -->
484 <v-dialog v-model="addUserDialog" max-width="900px" v-if="addUserDialog" persistent> 484 <v-dialog v-model="addUserDialog" max-width="900px" v-if="addUserDialog" persistent>
485 <v-card flat class="card-style pa-2" dark> 485 <v-card flat class="card-style pa-2" dark>
486 <v-layout> 486 <v-layout>
487 <v-flex xs12> 487 <v-flex xs12>
488 <label class="title text-xs-center">Add User</label> 488 <label class="title text-xs-center">Add User</label>
489 <v-icon size="24" class="right" @click="$refs.form.reset();addUserDialog = false">cancel</v-icon> 489 <v-icon size="24" class="right" @click="$refs.form.reset();addUserDialog = false">cancel</v-icon>
490 </v-flex> 490 </v-flex>
491 </v-layout> 491 </v-layout>
492 <v-form ref="form" v-model="valid" lazy-validation> 492 <v-form ref="form" v-model="valid" lazy-validation>
493 <v-container fluid> 493 <v-container fluid>
494 <v-layout> 494 <v-layout>
495 <v-flex 495 <v-flex
496 xs12 496 xs12
497 class="text-xs-center text-sm-center text-md-center text-lg-center my-4 mr-4" 497 class="text-xs-center text-sm-center text-md-center text-lg-center my-4 mr-4"
498 > 498 >
499 <v-avatar size="80px"> 499 <v-avatar size="80px">
500 <img src="/static/icon/user.png" v-if="!imageUrl" /> 500 <img src="/static/icon/user.png" v-if="!imageUrl" />
501 </v-avatar> 501 </v-avatar>
502 <img 502 <img
503 :src="imageUrl" 503 :src="imageUrl"
504 height="150" 504 height="150"
505 v-if="imageUrl" 505 v-if="imageUrl"
506 style="border-radius:50%; width:150px" 506 style="border-radius:50%; width:150px"
507 /> 507 />
508 </v-flex> 508 </v-flex>
509 </v-layout> 509 </v-layout>
510 <v-layout> 510 <v-layout>
511 <v-flex xs12 sm6> 511 <v-flex xs12 sm6>
512 <v-layout> 512 <v-layout>
513 <v-flex xs4 class="pt-4 subheading"> 513 <v-flex xs4 class="pt-4 subheading">
514 <label class="right">Name:</label> 514 <label class="right">Name:</label>
515 </v-flex> 515 </v-flex>
516 <v-flex xs8 class="ml-3"> 516 <v-flex xs8 class="ml-3">
517 <v-text-field 517 <v-text-field
518 v-model="addUser.name" 518 v-model="addUser.name"
519 placeholder="fill your Name" 519 placeholder="fill your Name"
520 name="name" 520 name="name"
521 type="text" 521 type="text"
522 :rules="nameRules" 522 :rules="nameRules"
523 required 523 required
524 ></v-text-field> 524 ></v-text-field>
525 </v-flex> 525 </v-flex>
526 </v-layout> 526 </v-layout>
527 </v-flex> 527 </v-flex>
528 <v-flex xs12 sm6> 528 <v-flex xs12 sm6>
529 <v-layout> 529 <v-layout>
530 <v-flex xs4 class="pt-4 subheading"> 530 <v-flex xs4 class="pt-4 subheading">
531 <label class="right">Email ID:</label> 531 <label class="right">Email ID:</label>
532 </v-flex> 532 </v-flex>
533 <v-flex xs8 class="ml-3"> 533 <v-flex xs8 class="ml-3">
534 <v-text-field 534 <v-text-field
535 placeholder="fill your email" 535 placeholder="fill your email"
536 :rules="emailRules" 536 :rules="emailRules"
537 v-model="addUser.email" 537 v-model="addUser.email"
538 type="text" 538 type="text"
539 name="email" 539 name="email"
540 required 540 required
541 ></v-text-field> 541 ></v-text-field>
542 </v-flex> 542 </v-flex>
543 </v-layout> 543 </v-layout>
544 </v-flex> 544 </v-flex>
545 </v-layout> 545 </v-layout>
546 <v-layout> 546 <v-layout>
547 <v-flex xs12 sm6> 547 <v-flex xs12 sm6>
548 <v-layout> 548 <v-layout>
549 <v-flex xs4 class="pt-4 subheading"> 549 <v-flex xs4 class="pt-4 subheading">
550 <label class="right hidden-sm-only hidden-xs-only">Date of Birth:</label> 550 <label class="right hidden-sm-only hidden-xs-only">Date of Birth:</label>
551 <label class="right hidden-lg-only hidden-xl-only hidden-md-only">D.O.B:</label> 551 <label class="right hidden-lg-only hidden-xl-only hidden-md-only">D.O.B:</label>
552 </v-flex> 552 </v-flex>
553 <v-flex xs8 class="ml-3"> 553 <v-flex xs8 class="ml-3">
554 <v-menu 554 <v-menu
555 ref="menu" 555 ref="menu"
556 :close-on-content-click="false" 556 :close-on-content-click="false"
557 v-model="menu" 557 v-model="menu"
558 :nudge-right="40" 558 :nudge-right="40"
559 lazy 559 lazy
560 transition="scale-transition" 560 transition="scale-transition"
561 offset-y 561 offset-y
562 full-width 562 full-width
563 min-width="290px" 563 min-width="290px"
564 > 564 >
565 <v-text-field 565 <v-text-field
566 slot="activator" 566 slot="activator"
567 :rules="dateRules" 567 :rules="dateRules"
568 v-model="addUser.dob" 568 v-model="addUser.dob"
569 placeholder="Select DOB" 569 placeholder="Select DOB"
570 ></v-text-field> 570 ></v-text-field>
571 <v-date-picker 571 <v-date-picker
572 ref="picker" 572 ref="picker"
573 v-model="addUser.dob" 573 v-model="addUser.dob"
574 :max="new Date().toISOString().substr(0, 10)" 574 :max="new Date().toISOString().substr(0, 10)"
575 min="1950-01-01" 575 min="1950-01-01"
576 @input="menu = false" 576 @input="menu = false"
577 ></v-date-picker> 577 ></v-date-picker>
578 </v-menu> 578 </v-menu>
579 </v-flex> 579 </v-flex>
580 </v-layout> 580 </v-layout>
581 </v-flex> 581 </v-flex>
582 <v-flex xs12 sm6> 582 <v-flex xs12 sm6>
583 <v-layout> 583 <v-layout>
584 <v-flex xs4 class="pt-4 subheading"> 584 <v-flex xs4 class="pt-4 subheading">
585 <label class="right">Gender:</label> 585 <label class="right">Gender:</label>
586 </v-flex> 586 </v-flex>
587 <v-flex xs8 class="ml-3"> 587 <v-flex xs8 class="ml-3">
588 <v-select 588 <v-select
589 v-model="addUser.gender" 589 v-model="addUser.gender"
590 :items="gender" 590 :items="gender"
591 label="Selct Gender " 591 label="Selct Gender "
592 :rules="genderRules" 592 :rules="genderRules"
593 required 593 required
594 ></v-select> 594 ></v-select>
595 </v-flex> 595 </v-flex>
596 </v-layout> 596 </v-layout>
597 </v-flex> 597 </v-flex>
598 </v-layout> 598 </v-layout>
599 <v-layout> 599 <v-layout>
600 <v-flex xs12 sm6> 600 <v-flex xs12 sm6>
601 <v-layout> 601 <v-layout>
602 <v-flex xs4 class="pt-4 subheading"> 602 <v-flex xs4 class="pt-4 subheading">
603 <label class="right">Religion:</label> 603 <label class="right">Religion:</label>
604 </v-flex> 604 </v-flex>
605 <v-flex xs8 class="ml-3"> 605 <v-flex xs8 class="ml-3">
606 <v-text-field 606 <v-text-field
607 v-model="addUser.religion" 607 v-model="addUser.religion"
608 placeholder="fill your Religion" 608 placeholder="fill your Religion"
609 name="Religion" 609 name="Religion"
610 type="text" 610 type="text"
611 :rules="religionRules" 611 :rules="religionRules"
612 required 612 required
613 ></v-text-field> 613 ></v-text-field>
614 </v-flex> 614 </v-flex>
615 </v-layout> 615 </v-layout>
616 </v-flex> 616 </v-flex>
617 <v-flex xs12 sm6> 617 <v-flex xs12 sm6>
618 <v-layout> 618 <v-layout>
619 <v-flex xs4 class="pt-4 subheading"> 619 <v-flex xs4 class="pt-4 subheading">
620 <label class="right">JoiningDate:</label> 620 <label class="right">JoiningDate:</label>
621 </v-flex> 621 </v-flex>
622 <v-flex xs8 class="ml-3"> 622 <v-flex xs8 class="ml-3">
623 <v-menu 623 <v-menu
624 ref="menu1" 624 ref="menu1"
625 :close-on-content-click="false" 625 :close-on-content-click="false"
626 v-model="menu1" 626 v-model="menu1"
627 :nudge-right="40" 627 :nudge-right="40"
628 lazy 628 lazy
629 transition="scale-transition" 629 transition="scale-transition"
630 offset-y 630 offset-y
631 full-width 631 full-width
632 min-width="290px" 632 min-width="290px"
633 > 633 >
634 <v-text-field 634 <v-text-field
635 slot="activator" 635 slot="activator"
636 :rules="joinDateRules" 636 :rules="joinDateRules"
637 v-model="addUser.joinDate" 637 v-model="addUser.joinDate"
638 placeholder="Select date" 638 placeholder="Select date"
639 ></v-text-field> 639 ></v-text-field>
640 <v-date-picker 640 <v-date-picker
641 ref="picker" 641 ref="picker"
642 v-model="addUser.joinDate" 642 v-model="addUser.joinDate"
643 :max="new Date().toISOString().substr(0, 10)" 643 :max="new Date().toISOString().substr(0, 10)"
644 min="1950-01-01" 644 min="1950-01-01"
645 @input="menu1 = false" 645 @input="menu1 = false"
646 ></v-date-picker> 646 ></v-date-picker>
647 </v-menu> 647 </v-menu>
648 </v-flex> 648 </v-flex>
649 </v-layout> 649 </v-layout>
650 </v-flex> 650 </v-flex>
651 </v-layout> 651 </v-layout>
652 <v-layout> 652 <v-layout>
653 <v-flex xs12 sm6> 653 <v-flex xs12 sm6>
654 <v-layout> 654 <v-layout>
655 <v-flex xs4 class="pt-4 subheading"> 655 <v-flex xs4 class="pt-4 subheading">
656 <label class="right">Phone :</label> 656 <label class="right">Phone :</label>
657 </v-flex> 657 </v-flex>
658 <v-flex xs8 class="ml-3"> 658 <v-flex xs8 class="ml-3">
659 <v-text-field 659 <v-text-field
660 v-model="addUser.mobileNo" 660 v-model="addUser.mobileNo"
661 placeholder="fill your Phone Number" 661 placeholder="fill your Phone Number"
662 name="mobileNo" 662 name="mobileNo"
663 type="number" 663 type="number"
664 :rules="mobileNoRules" 664 :rules="mobileNoRules"
665 required 665 required
666 ></v-text-field> 666 ></v-text-field>
667 </v-flex> 667 </v-flex>
668 </v-layout> 668 </v-layout>
669 </v-flex> 669 </v-flex>
670 <v-flex xs12 sm6> 670 <v-flex xs12 sm6>
671 <v-layout> 671 <v-layout>
672 <v-flex xs4 class="pt-4 subheading"> 672 <v-flex xs4 class="pt-4 subheading">
673 <label class="right hidden-sm-only hidden-xs-only">Select Role:</label> 673 <label class="right hidden-sm-only hidden-xs-only">Select Role:</label>
674 <label class="right hidden-lg-only hidden-xl-only hidden-md-only">Role:</label> 674 <label class="right hidden-lg-only hidden-xl-only hidden-md-only">Role:</label>
675 </v-flex> 675 </v-flex>
676 <v-flex xs8 class="ml-3"> 676 <v-flex xs8 class="ml-3">
677 <v-autocomplete 677 <v-autocomplete
678 v-model="addUser.role" 678 v-model="addUser.role"
679 :rules="role" 679 :rules="role"
680 :items="userRole" 680 :items="userRole"
681 item-text="name" 681 item-text="name"
682 item-value="name" 682 item-value="name"
683 placeholder="Select Role Name" 683 placeholder="Select Role Name"
684 required 684 required
685 ></v-autocomplete> 685 ></v-autocomplete>
686 </v-flex> 686 </v-flex>
687 </v-layout> 687 </v-layout>
688 </v-flex> 688 </v-flex>
689 </v-layout> 689 </v-layout>
690 <v-layout wrap> 690 <v-layout wrap>
691 <!-- <v-flex xs12 sm6> 691 <!-- <v-flex xs12 sm6>
692 <v-layout> 692 <v-layout>
693 <v-flex xs4 class="pt-4 subheading"> 693 <v-flex xs4 class="pt-4 subheading">
694 <label class="right">Username:</label> 694 <label class="right">Username:</label>
695 </v-flex> 695 </v-flex>
696 <v-flex xs8 class="ml-3"> 696 <v-flex xs8 class="ml-3">
697 <v-text-field 697 <v-text-field
698 v-model="addUser.userName" 698 v-model="addUser.userName"
699 placeholder="fill your User Name" 699 placeholder="fill your User Name"
700 type="text" 700 type="text"
701 :rules="userNameRules" 701 :rules="userNameRules"
702 required 702 required
703 ></v-text-field> 703 ></v-text-field>
704 </v-flex> 704 </v-flex>
705 </v-layout> 705 </v-layout>
706 </v-flex>--> 706 </v-flex>-->
707 <v-flex xs12 sm6> 707 <v-flex xs12 sm6>
708 <v-layout> 708 <v-layout>
709 <v-flex xs4 class="pt-4 subheading"> 709 <v-flex xs4 class="pt-4 subheading">
710 <label class="right hidden-sm-only hidden-xs-only">Uplaod Image:</label> 710 <label class="right hidden-sm-only hidden-xs-only">Uplaod Image:</label>
711 <label class="right hidden-lg-only hidden-xl-only hidden-md-only">Image:</label> 711 <label class="right hidden-lg-only hidden-xl-only hidden-md-only">Image:</label>
712 </v-flex> 712 </v-flex>
713 <v-flex xs8 class="ml-3"> 713 <v-flex xs8 class="ml-3">
714 <v-text-field 714 <v-text-field
715 label="Select Image" 715 label="Select Image"
716 @click="pickFile" 716 @click="pickFile"
717 v-model="imageName" 717 v-model="imageName"
718 append-icon="attach_file" 718 append-icon="attach_file"
719 ></v-text-field> 719 ></v-text-field>
720 <input 720 <input
721 type="file" 721 type="file"
722 style="display:none" 722 style="display:none"
723 ref="image" 723 ref="image"
724 accept="image/*" 724 accept="image/*"
725 @change="onFilePicked" 725 @change="onFilePicked"
726 /> 726 />
727 </v-flex> 727 </v-flex>
728 </v-layout> 728 </v-layout>
729 </v-flex> 729 </v-flex>
730 <v-flex xs12 sm6> 730 <v-flex xs12 sm6>
731 <v-layout> 731 <v-layout>
732 <v-flex xs4 class="pt-4 subheading"> 732 <v-flex xs4 class="pt-4 subheading">
733 <label class="right">Address:</label> 733 <label class="right">Address:</label>
734 </v-flex> 734 </v-flex>
735 <v-flex xs8 class="ml-3"> 735 <v-flex xs8 class="ml-3">
736 <v-text-field 736 <v-text-field
737 name="input-4-3" 737 name="input-4-3"
738 v-model="addUser.presentAddress" 738 v-model="addUser.presentAddress"
739 :rules="presentAddress" 739 :rules="presentAddress"
740 placeholder="fill Your present Address" 740 placeholder="fill Your present Address"
741 required 741 required
742 ></v-text-field> 742 ></v-text-field>
743 </v-flex> 743 </v-flex>
744 </v-layout> 744 </v-layout>
745 </v-flex> 745 </v-flex>
746 </v-layout> 746 </v-layout>
747 <v-layout> 747 <v-layout>
748 <v-flex xs12 sm12> 748 <v-flex xs12 sm12>
749 <v-layout class="right"> 749 <v-layout class="right">
750 <v-btn @click="clear" round dark class="clear-button">Clear</v-btn> 750 <v-btn @click="clear" round dark class="clear-button">Clear</v-btn>
751 <v-btn @click="submit" round dark :loading="loading" class="add-button">Add</v-btn> 751 <v-btn @click="submit" round dark :loading="loading" class="add-button">Add</v-btn>
752 </v-layout> 752 </v-layout>
753 </v-flex> 753 </v-flex>
754 </v-layout> 754 </v-layout>
755 </v-container> 755 </v-container>
756 </v-form> 756 </v-form>
757 </v-card> 757 </v-card>
758 </v-dialog> 758 </v-dialog>
759 <div class="loader" v-if="showLoader"> 759 <div class="loader" v-if="showLoader">
760 <v-progress-circular indeterminate color="white"></v-progress-circular> 760 <v-progress-circular indeterminate color="white"></v-progress-circular>
761 </div> 761 </div>
762 <v-snackbar 762 <v-snackbar
763 :timeout="timeout" 763 :timeout="timeout"
764 :top="y === 'top'" 764 :top="y === 'top'"
765 :right="x === 'right'" 765 :right="x === 'right'"
766 :vertical="mode === 'vertical'" 766 :vertical="mode === 'vertical'"
767 v-model="snackbar" 767 v-model="snackbar"
768 :color="color" 768 :color="color"
769 >{{ text }}</v-snackbar> 769 >{{ text }}</v-snackbar>
770 </v-container> 770 </v-container>
771 </template> 771 </template>
772 772
773 <script> 773 <script>
774 import http from "@/Services/http.js"; 774 import http from "@/Services/http.js";
775 import Util from "@/util"; 775 import Util from "@/util";
776 import moment from "moment"; 776 import moment from "moment";
777 import _ from "lodash"; 777 import _ from "lodash";
778 778
779 export default { 779 export default {
780 data: () => ({ 780 data: () => ({
781 component: "report-generate", 781 component: "report-generate",
782 snackbar: false, 782 snackbar: false,
783 y: "top", 783 y: "top",
784 x: "right", 784 x: "right",
785 mode: "", 785 mode: "",
786 timeout: 3000, 786 timeout: 3000,
787 color: "", 787 color: "",
788 text: "", 788 text: "",
789 show: true, 789 show: true,
790 showSearch: false, 790 showSearch: false,
791 showLoader: false, 791 showLoader: false,
792 loading: false, 792 loading: false,
793 addUserDialog: false, 793 addUserDialog: false,
794 date: null, 794 date: null,
795 search: "", 795 search: "",
796 menu: false, 796 menu: false,
797 menu1: false, 797 menu1: false,
798 menu2: false, 798 menu2: false,
799 menu3: false, 799 menu3: false,
800 viewUserDialog: false, 800 viewUserDialog: false,
801 editUserDialog: false, 801 editUserDialog: false,
802 valid: true, 802 valid: true,
803 isActive: true, 803 isActive: true,
804 newActive: false, 804 newActive: false,
805 pagination: { 805 pagination: {
806 rowsPerPage: 10, 806 rowsPerPage: 10,
807 }, 807 },
808 imageData: {}, 808 imageData: {},
809 imageName: "", 809 imageName: "",
810 imageUrl: "", 810 imageUrl: "",
811 imageFile: "", 811 imageFile: "",
812 nameRules: [(v) => !!v || "Name is required"], 812 nameRules: [(v) => !!v || "Name is required"],
813 dateRules: [(v) => !!v || " DOB is required"], 813 dateRules: [(v) => !!v || " DOB is required"],
814 genderRules: [(v) => !!v || " Gender Name is required"], 814 genderRules: [(v) => !!v || " Gender Name is required"],
815 pincode: [(v) => !!v || " Pincode is required"], 815 pincode: [(v) => !!v || " Pincode is required"],
816 role: [(v) => !!v || "Role Name is required"], 816 role: [(v) => !!v || "Role Name is required"],
817 permanentAddress: [(v) => !!v || " Permanent Address is required"], 817 permanentAddress: [(v) => !!v || " Permanent Address is required"],
818 presentAddress: [(v) => !!v || " Present Address is required"], 818 presentAddress: [(v) => !!v || " Present Address is required"],
819 mobileNoRules: [(v) => !!v || "Phone Number is required"], 819 mobileNoRules: [(v) => !!v || "Phone Number is required"],
820 religionRules: [(v) => !!v || "Religion Name is required"], 820 religionRules: [(v) => !!v || "Religion Name is required"],
821 joinDateRules: [(v) => !!v || " Join Date is required"], 821 joinDateRules: [(v) => !!v || " Join Date is required"],
822 userNameRules: [(v) => !!v || " User Name is required"], 822 userNameRules: [(v) => !!v || " User Name is required"],
823 passwordRules: [(v) => !!v || " Password is required"], 823 passwordRules: [(v) => !!v || " Password is required"],
824 errorMessages: "", 824 errorMessages: "",
825 userRole: [], 825 userRole: [],
826 emailRules: [ 826 emailRules: [
827 (v) => !!v || "E-mail is required", 827 (v) => !!v || "E-mail is required",
828 (v) => 828 (v) =>
829 /^\w+([.-]?\w+)*@\w+([.-]?\w+)*(\.\w{2,3})+$/.test(v) || 829 /^\w+([.-]?\w+)*@\w+([.-]?\w+)*(\.\w{2,3})+$/.test(v) ||
830 "E-mail must be valid", 830 "E-mail must be valid",
831 ], 831 ],
832 gender: ["Male", "Female"], 832 gender: ["Male", "Female"],
833 headers: [ 833 headers: [
834 { 834 {
835 text: "No", 835 text: "No",
836 align: "", 836 align: "",
837 sortable: false, 837 sortable: false,
838 value: "No", 838 value: "No",
839 }, 839 },
840 { 840 {
841 text: "Profile Pic", 841 text: "Profile Pic",
842 value: "profilePicUrl", 842 value: "profilePicUrl",
843 sortable: false, 843 sortable: false,
844 align: "center", 844 align: "center",
845 }, 845 },
846 { text: "Name", value: "name", sortable: false, align: "center" }, 846 { text: "Name", value: "name", sortable: false, align: "center" },
847 { text: "Email", value: "email", sortable: false, align: "center" }, 847 { text: "Email", value: "email", sortable: false, align: "center" },
848 { text: "DOB", value: "dob", sortable: false, align: "center" }, 848 { text: "DOB", value: "dob", sortable: false, align: "center" },
849 { 849 {
850 text: "Joining Date", 850 text: "Joining Date",
851 value: "joiningDate", 851 value: "joiningDate",
852 sortable: false, 852 sortable: false,
853 align: "center", 853 align: "center",
854 }, 854 },
855 { 855 {
856 text: "Phone", 856 text: "Phone",
857 value: "phone", 857 value: "phone",
858 sortable: false, 858 sortable: false,
859 align: "center", 859 align: "center",
860 }, 860 },
861 { 861 {
862 text: "Status", 862 text: "Status",
863 value: "status", 863 value: "status",
864 sortable: false, 864 sortable: false,
865 align: "center", 865 align: "center",
866 }, 866 },
867 { text: "Action", value: "", sortable: false, align: "center" }, 867 { text: "Action", value: "", sortable: false, align: "center" },
868 ], 868 ],
869 Users: [], 869 Users: [],
870 editedIndex: -1, 870 editedIndex: -1,
871 upload: "", 871 upload: "",
872 editedItem: { 872 editedItem: {
873 role: "", 873 role: "",
874 name: "", 874 name: "",
875 email: "", 875 email: "",
876 dob: null, 876 dob: null,
877 gender: "", 877 gender: "",
878 role: "", 878 role: "",
879 address: "", 879 address: "",
880 phone: "", 880 phone: "",
881 religion: "", 881 religion: "",
882 joiningDate: null, 882 joiningDate: null,
883 }, 883 },
884 addUser: { 884 addUser: {
885 role: "", 885 role: "",
886 name: "", 886 name: "",
887 email: "", 887 email: "",
888 dob: null, 888 dob: null,
889 gender: "", 889 gender: "",
890 pincode: "", 890 pincode: "",
891 role: "", 891 role: "",
892 permanentAddress: "", 892 permanentAddress: "",
893 presentAddress: "", 893 presentAddress: "",
894 mobileNo: "", 894 mobileNo: "",
895 religion: "", 895 religion: "",
896 joiningDate: null, 896 joiningDate: null,
897 }, 897 },
898 }), 898 }),
899 watch: { 899 watch: {
900 menu(val) { 900 menu(val) {
901 val && this.$nextTick(() => (this.$refs.picker.activePicker = "YEAR")); 901 val && this.$nextTick(() => (this.$refs.picker.activePicker = "YEAR"));
902 }, 902 },
903 menu1(val) { 903 menu1(val) {
904 val && this.$nextTick(() => (this.$refs.picker.activePicker = "YEAR")); 904 val && this.$nextTick(() => (this.$refs.picker.activePicker = "YEAR"));
905 }, 905 },
906 addUserDialog: function (val) { 906 addUserDialog: function (val) {
907 if (!val) { 907 if (!val) {
908 this.addUser = []; 908 this.addUser = [];
909 this.imageName = ""; 909 this.imageName = "";
910 this.imageFile = ""; 910 this.imageFile = "";
911 this.imageUrl = ""; 911 this.imageUrl = "";
912 } 912 }
913 }, 913 },
914 }, 914 },
915 methods: { 915 methods: {
916 save(date) { 916 save(date) {
917 this.$refs.menu.save(date); 917 this.$refs.menu.save(date);
918 }, 918 },
919 save(date) { 919 save(date) {
920 this.$refs.menu1.save(date); 920 this.$refs.menu1.save(date);
921 }, 921 },
922 pickFile() { 922 pickFile() {
923 this.$refs.image.click(); 923 this.$refs.image.click();
924 }, 924 },
925 onFilePicked(e) { 925 onFilePicked(e) {
926 // console.log(e) 926 // console.log(e)
927 const files = e.target.files; 927 const files = e.target.files;
928 this.upload = e.target.files[0]; 928 this.upload = e.target.files[0];
929 // console.log("imageData-upload========>", this.upload); 929 // console.log("imageData-upload========>", this.upload);
930 if (files[0] !== undefined) { 930 if (files[0] !== undefined) {
931 this.imageName = files[0].name; 931 this.imageName = files[0].name;
932 if (this.imageName.lastIndexOf(".") <= 0) { 932 if (this.imageName.lastIndexOf(".") <= 0) {
933 return; 933 return;
934 } 934 }
935 const fr = new FileReader(); 935 const fr = new FileReader();
936 fr.readAsDataURL(files[0]); 936 fr.readAsDataURL(files[0]);
937 fr.addEventListener("load", () => { 937 fr.addEventListener("load", () => {
938 this.imageUrl = fr.result; 938 this.imageUrl = fr.result;
939 this.imageFile = files[0]; // this is an image file that can be sent to server... 939 this.imageFile = files[0]; // this is an image file that can be sent to server...
940 // this.imageData.imageUrl = URL.createObjectURL(this.imageFile); 940 // this.imageData.imageUrl = URL.createObjectURL(this.imageFile);
941 // console.log("upload=======>", this.imageData.imageUrl); 941 // console.log("upload=======>", this.imageData.imageUrl);
942 // console.log("imageFile", this.imageUrl); 942 // console.log("imageFile", this.imageUrl);
943 }); 943 });
944 } else { 944 } else {
945 this.imageName = ""; 945 this.imageName = "";
946 this.imageFile = ""; 946 this.imageFile = "";
947 this.imageUrl = ""; 947 this.imageUrl = "";
948 } 948 }
949 }, 949 },
950 dates: function (date) { 950 dates: function (date) {
951 return moment(date).format("MMMM DD, YYYY"); 951 return moment(date).format("MMMM DD, YYYY");
952 }, 952 },
953 getUsersList() { 953 getUsersList() {
954 this.showLoader = true; 954 this.showLoader = true;
955 var token = this.$store.state.token; 955 var token = this.$store.state.token;
956 http() 956 http()
957 .get("/getUsersList", { 957 .get("/getUsersList", {
958 headers: { Authorization: "Bearer " + token }, 958 headers: { Authorization: "Bearer " + token },
959 }) 959 })
960 .then((response) => { 960 .then((response) => {
961 // this.snackbar = true; 961 // this.snackbar = true;
962 this.color = "success"; 962 this.color = "success";
963 this.Users = response.data.data; 963 this.Users = response.data.data;
964 this.showLoader = false; 964 this.showLoader = false;
965 }) 965 })
966 .catch((error) => { 966 .catch((error) => {
967 this.showLoader = false; 967 this.showLoader = false;
968 if (error.response.status === 401) { 968 if (error.response.status === 401) {
969 this.$router.replace({ path: "/" }); 969 this.$router.replace({ path: "/" });
970 this.$store.dispatch("setToken", null); 970 this.$store.dispatch("setToken", null);
971 this.$store.dispatch("Id", null); 971 this.$store.dispatch("Id", null);
972 } 972 }
973 }); 973 });
974 }, 974 },
975 editItem(item) { 975 editItem(item) {
976 this.editedIndex = this.Users.indexOf(item); 976 this.editedIndex = this.Users.indexOf(item);
977 this.editedItem = Object.assign({}, item); 977 this.editedItem = Object.assign({}, item);
978 this.editedItem.dob = 978 this.editedItem.dob =
979 this.editedItem.dob != undefined 979 this.editedItem.dob != undefined
980 ? (this.editedItem.dob = this.editedItem.dob.substring(0, 10)) 980 ? (this.editedItem.dob = this.editedItem.dob.substring(0, 10))
981 : (this.editedItem.dob = ""); 981 : (this.editedItem.dob = "");
982 for (let i = 0; i < this.userRole.length; i++) { 982 for (let i = 0; i < this.userRole.length; i++) {
983 if (this.userRole[i].role === this.editedItem.role) { 983 if (this.userRole[i].role === this.editedItem.role) {
984 this.editedItem.role = this.userRole[i].name; 984 this.editedItem.role = this.userRole[i].name;
985 } 985 }
986 } 986 }
987 this.editUserDialog = true; 987 this.editUserDialog = true;
988 }, 988 },
989 profile(item) { 989 profile(item) {
990 this.editedIndex = this.Users.indexOf(item); 990 this.editedIndex = this.Users.indexOf(item);
991 this.editedItem = Object.assign({}, item); 991 this.editedItem = Object.assign({}, item);
992 this.viewUserDialog = true; 992 this.viewUserDialog = true;
993 for (let i = 0; i < this.userRole.length; i++) { 993 for (let i = 0; i < this.userRole.length; i++) {
994 if (this.userRole[i].role === this.editedItem.role) { 994 if (this.userRole[i].role === this.editedItem.role) {
995 this.editedItem.role = this.userRole[i].name; 995 this.editedItem.role = this.userRole[i].name;
996 } 996 }
997 } 997 }
998 }, 998 },
999 deleteItem(item) { 999 deleteItem(item) {
1000 let deleteUser = { 1000 let deleteUser = {
1001 userId: item._id, 1001 userId: item._id,
1002 }; 1002 };
1003 http() 1003 http()
1004 .delete( 1004 .delete(
1005 "/deleteUser", 1005 "/deleteUser",
1006 confirm("Are you sure you want to delete this?") && { 1006 confirm("Are you sure you want to delete this?") && {
1007 params: deleteUser, 1007 params: deleteUser,
1008 } 1008 }
1009 ) 1009 )
1010 .then((response) => { 1010 .then((response) => {
1011 this.snackbar = true; 1011 this.snackbar = true;
1012 this.text = response.data.message; 1012 this.text = response.data.message;
1013 this.color = "green"; 1013 this.color = "green";
1014 this.getUsersList(); 1014 this.getUsersList();
1015 }) 1015 })
1016 .catch((error) => { 1016 .catch((error) => {
1017 this.snackbar = true; 1017 this.snackbar = true;
1018 this.color = "error"; 1018 this.color = "error";
1019 this.text = error.response.data.message; 1019 this.text = error.response.data.message;
1020 }); 1020 });
1021 }, 1021 },
1022 close() { 1022 close() {
1023 this.editUserDialog = false; 1023 this.editUserDialog = false;
1024 }, 1024 },
1025 closeProfileDialog() { 1025 closeProfileDialog() {
1026 this.viewUserDialog = false; 1026 this.viewUserDialog = false;
1027 }, 1027 },
1028 submit() { 1028 submit() {
1029 if (this.$refs.form.validate()) { 1029 if (this.$refs.form.validate()) {
1030 let addUserData = { 1030 let addUserData = {
1031 name: this.addUser.name, 1031 name: this.addUser.name,
1032 email: this.addUser.email, 1032 email: this.addUser.email,
1033 dob: this.addUser.dob, 1033 dob: this.addUser.dob,
1034 gender: this.addUser.gender, 1034 gender: this.addUser.gender,
1035 religion: this.addUser.religion, 1035 religion: this.addUser.religion,
1036 role: this.addUser.role, 1036 role: this.addUser.role,
1037 address: this.addUser.presentAddress, 1037 address: this.addUser.presentAddress,
1038 phone: this.addUser.mobileNo, 1038 phone: this.addUser.mobileNo,
1039 religion: this.addUser.religion, 1039 religion: this.addUser.religion,
1040 joiningDate: this.addUser.joinDate, 1040 joiningDate: this.addUser.joinDate,
1041 }; 1041 };
1042 if (this.imageUrl) { 1042 if (this.imageUrl) {
1043 var str = this.imageUrl; 1043 var str = this.imageUrl;
1044 const [baseUrl, imageUrl] = str.split(/,/); 1044 const [baseUrl, imageUrl] = str.split(/,/);
1045 addUserData.profilePicUrl = imageUrl; 1045 addUserData.profilePicUrl = imageUrl;
1046 } 1046 }
1047 this.loading = true; 1047 this.loading = true;
1048 http() 1048 http()
1049 .post("/createUser", addUserData) 1049 .post("/createUser", addUserData)
1050 .then((response) => { 1050 .then((response) => {
1051 this.imageUrl = ""; 1051 this.imageUrl = "";
1052 this.getUsersList(); 1052 this.getUsersList();
1053 this.snackbar = true; 1053 this.snackbar = true;
1054 this.addUserDialog = false; 1054 this.addUserDialog = false;
1055 this.text = response.data.message; 1055 this.text = response.data.message;
1056 this.color = "green"; 1056 this.color = "green";
1057 this.clear(); 1057 this.clear();
1058 this.loading = false; 1058 this.loading = false;
1059 }) 1059 })
1060 .catch((error) => { 1060 .catch((error) => {
1061 this.loading = false; 1061 this.loading = false;
1062 this.snackbar = true; 1062 this.snackbar = true;
1063 this.color = "error"; 1063 this.color = "error";
1064 this.text = error.response.data.message; 1064 this.text = error.response.data.message;
1065 }); 1065 });
1066 } 1066 }
1067 }, 1067 },
1068 clear() { 1068 clear() {
1069 this.$refs.form.reset(); 1069 this.$refs.form.reset();
1070 this.imageUrl = ""; 1070 this.imageUrl = "";
1071 }, 1071 },
1072 save() { 1072 save() {
1073 this.loading = true; 1073 this.loading = true;
1074 for (let i = 0; i < this.userRole.length; i++) { 1074 for (let i = 0; i < this.userRole.length; i++) {
1075 if (this.userRole[i].name === this.editedItem.role) { 1075 if (this.userRole[i].name === this.editedItem.role) {
1076 this.editedItem.role = this.userRole[i].role; 1076 this.editedItem.role = this.userRole[i].role;
1077 } 1077 }
1078 } 1078 }
1079 this.editedItem.userId = this.editedItem._id; 1079 this.editedItem.userId = this.editedItem._id;
1080 if (this.imageUrl) { 1080 if (this.imageUrl) {
1081 var str = this.imageUrl; 1081 var str = this.imageUrl;
1082 const [baseUrl, imageUrl] = str.split(/,/); 1082 const [baseUrl, imageUrl] = str.split(/,/);
1083 this.editedItem.upload = imageUrl; 1083 this.editedItem.upload = imageUrl;
1084 } 1084 }
1085 http() 1085 http()
1086 .put("/updateUser", this.editedItem) 1086 .put("/updateUser", this.editedItem)
1087 .then((response) => { 1087 .then((response) => {
1088 this.snackbar = true; 1088 this.snackbar = true;
1089 this.text = response.data.message; 1089 this.text = response.data.message;
1090 this.color = "green"; 1090 this.color = "green";
1091 this.loading = false; 1091 this.loading = false;
1092 this.getUsersList(); 1092 this.getUsersList();
1093 this.close(); 1093 this.close();
1094 }) 1094 })
1095 .catch((error) => { 1095 .catch((error) => {
1096 this.loading = false; 1096 this.loading = false;
1097 this.snackbar = true; 1097 this.snackbar = true;
1098 this.text = error.response.data.message; 1098 this.text = error.response.data.message;
1099 this.color = "error"; 1099 this.color = "error";
1100 }); 1100 });
1101 }, 1101 },
1102 getRole() { 1102 getRole() {
1103 this.showLoader = true; 1103 this.showLoader = true;
1104 var token = this.$store.state.token; 1104 var token = this.$store.state.token;
1105 http() 1105 http()
1106 .get("/getRolesList", { 1106 .get("/getRolesList", {
1107 headers: { Authorization: "Bearer " + token }, 1107 headers: { Authorization: "Bearer " + token },
1108 }) 1108 })
1109 .then((response) => { 1109 .then((response) => {
1110 this.userRole = response.data.data; 1110 this.userRole = response.data.data;
1111 this.showLoader = false; 1111 this.showLoader = false;
1112 this.userRole = response.data.data; 1112 this.userRole = response.data.data;
1113 var removedRoles = _.remove(this.userRole, function (c) { 1113 var removedRoles = _.remove(this.userRole, function (c) {
1114 //remove if color is green or yellow 1114 //remove if color is green or yellow
1115 return ( 1115 return (
1116 c.name === "ADMIN" || 1116 c.name === "ADMIN" ||
1117 c.name === "SUPERADMIN" || 1117 c.name === "SUPERADMIN" ||
1118 c.name === "TEACHER" || 1118 c.name === "TEACHER" ||
1119 c.name === "STUDENT" || 1119 c.name === "STUDENT" ||
1120 c.name === "PARENT" 1120 c.name === "PARENT"
1121 ); 1121 );
1122 }); 1122 });
1123 }) 1123 })
1124 .catch((error) => { 1124 .catch((error) => {
1125 this.showLoader = false; 1125 this.showLoader = false;
1126 }); 1126 });
1127 }, 1127 },
1128 suspendStatus(suspendStatus, id) { 1128 suspendStatus(suspendStatus, id) {
1129 let suspendStatusData = { 1129 let suspendStatusData = {
1130 userId: id, 1130 userId: id,
1131 status: suspendStatus, 1131 status: suspendStatus,
1132 }; 1132 };
1133 this.showLoader = true; 1133 this.showLoader = true;
1134 http() 1134 http()
1135 .put("/suspendUserAccount", suspendStatusData) 1135 .put("/suspendUserAccount", suspendStatusData)
1136 .then((response) => { 1136 .then((response) => {
1137 this.getUsersList(); 1137 this.getUsersList();
1138 this.text = response.data.message; 1138 this.text = response.data.message;
1139 this.snackbar = true; 1139 this.snackbar = true;
1140 this.showLoader = false; 1140 this.showLoader = false;
1141 }) 1141 })
1142 .catch((error) => { 1142 .catch((error) => {
1143 // console.log(error.response.data.data); 1143 // console.log(error.response.data.data);
1144 this.snackbar = true; 1144 this.snackbar = true;
1145 this.color = "success"; 1145 this.color = "success";
1146 this.text = error.response.data.message; 1146 this.text = error.response.data.message;
1147 this.showLoader = false; 1147 this.showLoader = false;
1148 }); 1148 });
1149 }, 1149 },
1150 displaySearch() { 1150 displaySearch() {
1151 (this.show = false), (this.showSearch = true); 1151 (this.show = false), (this.showSearch = true);
1152 }, 1152 },
1153 closeSearch() { 1153 closeSearch() {
1154 this.showSearch = false; 1154 this.showSearch = false;
1155 this.show = true; 1155 this.show = true;
1156 this.search = ""; 1156 this.search = "";
1157 }, 1157 },
1158 }, 1158 },
1159 mounted() { 1159 mounted() {
1160 this.getUsersList(); 1160 this.getUsersList();
1161 this.getRole(); 1161 this.getRole();
1162 }, 1162 },
1163 }; 1163 };
1164 </script> 1164 </script>
src/pages/changeStudents/changeStudents.vue
Diff comments   View file @8b7976c
1 <template> 1 <template>
2 <v-app id="login"> 2 <v-app id="login">
3 <!-- LOADER --> 3 <!-- LOADER -->
4 <div class="loader" v-if="showLoader"> 4 <div class="loader" v-if="showLoader">
5 <v-progress-circular indeterminate color="white"></v-progress-circular> 5 <v-progress-circular indeterminate color="white"></v-progress-circular>
6 </div> 6 </div>
7 7
8 <!-- SNACKBAR --> 8 <!-- SNACKBAR -->
9 <v-snackbar 9 <v-snackbar
10 :timeout="timeout" 10 :timeout="timeout"
11 :top="y === 'top'" 11 :top="y === 'top'"
12 :right="x === 'right'" 12 :right="x === 'right'"
13 :vertical="mode === 'vertical'" 13 :vertical="mode === 'vertical'"
14 v-model="snackbar" 14 v-model="snackbar"
15 :color="snackbarColor" 15 :color="snackbarColor"
16 > 16 >
17 {{ text }} 17 {{ text }}
18 <v-spacer></v-spacer> 18 <v-spacer></v-spacer>
19 <v-btn flat text @click="snackbar = false">X</v-btn> 19 <v-btn flat text @click="snackbar = false">X</v-btn>
20 </v-snackbar> 20 </v-snackbar>
21 <v-container fluid fill-height> 21 <v-container fluid fill-height>
22 <v-layout> 22 <v-layout>
23 <v-flex xs12 sm8 md8 lg5 offset-sm2 offset-lg3 class="mt-5"> 23 <v-flex xs12 sm8 md8 lg5 offset-sm2 offset-lg3 class="mt-5">
24 <v-card flat class="card-style pa-2" dark id="form"> 24 <v-card flat class="card-style pa-2" dark id="form">
25 <v-layout> 25 <v-layout>
26 <v-flex xs12> 26 <v-flex xs12>
27 <label class="title text-xs-center">Change Student</label> 27 <label class="title text-xs-center">Change Student</label>
28 </v-flex> 28 </v-flex>
29 </v-layout> 29 </v-layout>
30 <v-card-text> 30 <v-card-text>
31 <v-flex xs12 sm8 md8 lg8 offset-sm2> 31 <v-flex xs12 sm8 md8 lg8 offset-sm2>
32 <v-form class="mt-3"> 32 <v-form class="mt-3">
33 <v-select 33 <v-select
34 :items="studentsData" 34 :items="studentsData"
35 item-text="name" 35 item-text="name"
36 item-value="_id" 36 item-value="_id"
37 v-model="changeStudent" 37 v-model="changeStudent"
38 label="Students" 38 label="Students"
39 ></v-select> 39 ></v-select>
40 </v-form> 40 </v-form>
41 </v-flex> 41 </v-flex>
42 </v-card-text> 42 </v-card-text>
43 <v-card-actions> 43 <v-card-actions>
44 <v-flex text-xs-center> 44 <v-flex text-xs-center>
45 <v-btn round dark :loading="loading" @click="change" class="add-button">Change</v-btn> 45 <v-btn round dark :loading="loading" @click="change" class="add-button">Change</v-btn>
46 </v-flex> 46 </v-flex>
47 </v-card-actions> 47 </v-card-actions>
48 </v-card> 48 </v-card>
49 </v-flex> 49 </v-flex>
50 </v-layout> 50 </v-layout>
51 </v-container> 51 </v-container>
52 </v-app> 52 </v-app>
53 </template> 53 </template>
54 <script> 54 <script>
55 import http from "@/Services/http.js"; 55 import http from "@/Services/http.js";
56 import AllApiCalls from "@/Services/AllApiCalls.js"; 56 import AllApiCalls from "@/Services/AllApiCalls.js";
57 57
58 export default { 58 export default {
59 mixins: [AllApiCalls], 59 mixins: [AllApiCalls],
60 data() { 60 data() {
61 return { 61 return {
62 snackbar: false, 62 snackbar: false,
63 y: "top", 63 y: "top",
64 x: "right", 64 x: "right",
65 mode: "", 65 mode: "",
66 timeout: 4000, 66 timeout: 4000,
67 text: "", 67 text: "",
68 loading: false, 68 loading: false,
69 valid: false, 69 valid: false,
70 changeStudent: "", 70 changeStudent: "",
71 studentsData: [], 71 studentsData: [],
72 }; 72 };
73 }, 73 },
74 mounted() { 74 mounted() {
75 this.getparentStudents(); 75 this.getparentStudents();
76 }, 76 },
77 methods: { 77 methods: {
78 change() { 78 change() {
79 localStorage.setItem("parentStudentId", this.changeStudent); 79 localStorage.setItem("parentStudentId", this.changeStudent);
80 this.$router.replace({ path: "/" }); 80 this.$router.replace({ path: "/" });
81 }, 81 },
82 getparentStudents() { 82 getparentStudents() {
83 this.showLoader = true; 83 this.showLoader = true;
84 http() 84 http()
85 .get("/parentStudentsList") 85 .get("/parentStudentsList")
86 .then((response) => { 86 .then((response) => {
87 // console.log("students - ", response.data.data.students); 87 // console.log("students - ", response.data.data.students);
88 /* prepare an array of false status students */ 88 /* prepare an array of false status students */
89 var indexStatusFalse = []; 89 var indexStatusFalse = [];
90 for (var i = 0; i < response.data.data.students.length; i++) { 90 for (var i = 0; i < response.data.data.students.length; i++) {
91 if (response.data.data.students[i].status == false) { 91 if (response.data.data.students[i].status == false) {
92 indexStatusFalse.push(i); 92 indexStatusFalse.push(i);
93 } 93 }
94 } 94 }
95 /* introduce a property named disabled in response to make false staus students disbled */ 95 /* introduce a property named disabled in response to make false staus students disbled */
96 for (var i = 0; i < indexStatusFalse.length; i++) { 96 for (var i = 0; i < indexStatusFalse.length; i++) {
97 response.data.data.students[indexStatusFalse[i]].disabled = true; 97 response.data.data.students[indexStatusFalse[i]].disabled = true;
98 } 98 }
99 /* make an array of students to be displayed in select box */ 99 /* make an array of students to be displayed in select box */
100 this.studentsData = response.data.data.students; 100 this.studentsData = response.data.data.students;
101 /* counter to keep a track of number of students that are disabled or false */ 101 /* counter to keep a track of number of students that are disabled or false */
102 var counter = 0; 102 var counter = 0;
103 /* if zero element of false students list is > 0 then make first student as defalut selected */ 103 /* if zero element of false students list is > 0 then make first student as defalut selected */
104 if (indexStatusFalse[0] > 0) { 104 if (indexStatusFalse[0] > 0) {
105 this.changeStudent = response.data.data.students[0]._id; 105 this.changeStudent = response.data.data.students[0]._id;
106 } 106 }
107 // console.log("indexStatusFalse - ", indexStatusFalse); 107 // console.log("indexStatusFalse - ", indexStatusFalse);
108 /* if false student is the first one in the list then see if the next is also false */ 108 /* if false student is the first one in the list then see if the next is also false */
109 if (indexStatusFalse[0] == 0) { 109 if (indexStatusFalse[0] == 0) {
110 if (indexStatusFalse.length > 1) { 110 if (indexStatusFalse.length > 1) {
111 for (var i = 1; i < indexStatusFalse.length; i++) { 111 for (var i = 1; i < indexStatusFalse.length; i++) {
112 if (indexStatusFalse[i] == i) { 112 if (indexStatusFalse[i] == i) {
113 if (indexStatusFalse[i - 1] == i - 1) { 113 if (indexStatusFalse[i - 1] == i - 1) {
114 counter = i + 1; 114 counter = i + 1;
115 continue; 115 continue;
116 } 116 }
117 } else { 117 } else {
118 counter = i; 118 counter = i;
119 break; 119 break;
120 } 120 }
121 } 121 }
122 } else { 122 } else {
123 counter = 1; 123 counter = 1;
124 } 124 }
125 } 125 }
126 // console.log("counter - ", counter); 126 // console.log("counter - ", counter);
127 if (counter == response.data.data.students.length) { 127 if (counter == response.data.data.students.length) {
128 this.seeSnackbar( 128 this.seeSnackbar(
129 "Your wards have been removed you will be logged out", 129 "Your wards have been removed you will be logged out",
130 "warning" 130 "warning"
131 ); 131 );
132 setTimeout(() => { 132 setTimeout(() => {
133 this.$store.dispatch("setToken", null); 133 this.$store.dispatch("setToken", null);
134 this.$router.replace({ path: "/" }); 134 this.$router.replace({ path: "/" });
135 this.$store.dispatch("Id", null); 135 this.$store.dispatch("Id", null);
136 }, 3000); 136 }, 3000);
137 } else { 137 } else {
138 this.changeStudent = response.data.data.students[counter]._id; 138 this.changeStudent = response.data.data.students[counter]._id;
139 } 139 }
140 140
141 localStorage.setItem("parentStudentId", this.changeStudent); 141 localStorage.setItem("parentStudentId", this.changeStudent);
142 localStorage.setItem( 142 localStorage.setItem(
143 "parentClassId", 143 "parentClassId",
144 response.data.data.students[0].classId 144 response.data.data.students[0].classId
145 ); 145 );
146 this.showLoader = false; 146 this.showLoader = false;
147 }) 147 })
148 .catch((err) => { 148 .catch((err) => {
149 // console.log("err====>", err); 149 // console.log("err====>", err);
150 this.showLoader = false; 150 this.showLoader = false;
151 this.snackbar = true;
152 this.color = "error";
153 this.text = error.response.data.message;
151 this.snackbar = true; 154 });
152 this.color = "error"; 155 },
153 this.text = error.response.data.message; 156 },
154 }); 157 computed: {
155 }, 158 color() {
156 }, 159 return this.loading ? "success" : "error";
157 computed: { 160 },
158 color() { 161 },
159 return this.loading ? "success" : "error"; 162 };
160 }, 163 </script>
161 }, 164 <style scoped>
162 }; 165 img {
163 </script> 166 position: absolute;
164 <style scoped> 167 top: 13px;
165 img { 168 left: 50px;
166 position: absolute; 169 }
167 top: 13px; 170 .v-btn--large {
168 left: 50px; 171 padding: 0px 74px;
169 } 172 }
170 .v-btn--large { 173 @media screen and (max-width: 769px) {
171 padding: 0px 74px; 174 .v-btn--large {
172 } 175 font-size: 14px;
173 @media screen and (max-width: 769px) { 176 height: 44px;
174 .v-btn--large { 177 padding: 0 32px;
175 font-size: 14px; 178 }
176 height: 44px; 179 }
177 padding: 0 32px; 180 </style>
178 } 181
src/pages/meetingEvent/meetingEvent.vue
Diff comments   View file @8b7976c
1 <template> 1 <template>
2 <v-container fluid class="body-color"> 2 <v-container fluid class="body-color">
3 <!-- ****** EDITS EVENT ****** --> 3 <!-- ****** EDITS EVENT ****** -->
4 <v-dialog v-model="editEventdialog" max-width="500px" persistent> 4 <v-dialog v-model="editEventdialog" max-width="500px" persistent>
5 <v-card flat class="card-style pa-2" dark> 5 <v-card flat class="card-style pa-2" dark>
6 <v-layout> 6 <v-layout>
7 <v-flex xs12> 7 <v-flex xs12>
8 <label class="title text-xs-center">Edit Meeting Event</label> 8 <label class="title text-xs-center">Edit Meeting Event</label>
9 <v-icon size="24" class="right" @click="editEventdialog = false">cancel</v-icon> 9 <v-icon size="24" class="right" @click="editEventdialog = false">cancel</v-icon>
10 </v-flex> 10 </v-flex>
11 </v-layout> 11 </v-layout>
12 <v-container fluid> 12 <v-container fluid>
13 <v-flex xs12 sm12> 13 <v-flex xs12 sm12>
14 <v-layout> 14 <v-layout>
15 <v-flex xs4 class="pt-4 subheading"> 15 <v-flex xs4 class="pt-4 subheading">
16 <label class="right">Title:</label> 16 <label class="right">Title:</label>
17 </v-flex> 17 </v-flex>
18 <v-flex xs7 class="ml-3"> 18 <v-flex xs7 class="ml-3">
19 <v-text-field v-model="editedItem.title" type="text"></v-text-field> 19 <v-text-field v-model="editedItem.title" type="text"></v-text-field>
20 </v-flex> 20 </v-flex>
21 </v-layout> 21 </v-layout>
22 </v-flex> 22 </v-flex>
23 <v-flex xs12 sm12> 23 <v-flex xs12 sm12>
24 <v-layout> 24 <v-layout>
25 <v-flex xs4 class="pt-4 subheading"> 25 <v-flex xs4 class="pt-4 subheading">
26 <label class="right">Date:</label> 26 <label class="right">Date:</label>
27 </v-flex> 27 </v-flex>
28 <v-flex xs7 class="ml-3"> 28 <v-flex xs7 class="ml-3">
29 <v-menu 29 <v-menu
30 ref="menu" 30 ref="menu"
31 :close-on-content-click="false" 31 :close-on-content-click="false"
32 v-model="menuEditDate" 32 v-model="menuEditDate"
33 :nudge-right="40" 33 :nudge-right="40"
34 lazy 34 lazy
35 transition="scale-transition" 35 transition="scale-transition"
36 offset-y 36 offset-y
37 full-width 37 full-width
38 min-width="290px" 38 min-width="290px"
39 > 39 >
40 <v-text-field 40 <v-text-field
41 slot="activator" 41 slot="activator"
42 v-model="editedItem.dateOfEvent" 42 v-model="editedItem.dateOfEvent"
43 placeholder="Select date" 43 placeholder="Select date"
44 ></v-text-field> 44 ></v-text-field>
45 <v-date-picker 45 <v-date-picker
46 color="info" 46 color="info"
47 ref="picker" 47 ref="picker"
48 v-model="editedItem.dateOfEvent" 48 v-model="editedItem.dateOfEvent"
49 @input="$refs.menu.save(editedItem.dateOfEvent)" 49 @input="$refs.menu.save(editedItem.dateOfEvent)"
50 ></v-date-picker> 50 ></v-date-picker>
51 </v-menu> 51 </v-menu>
52 </v-flex> 52 </v-flex>
53 </v-layout> 53 </v-layout>
54 </v-flex> 54 </v-flex>
55 <v-flex xs12 sm12> 55 <v-flex xs12 sm12>
56 <v-layout> 56 <v-layout>
57 <v-flex xs4 class="pt-4 subheading"> 57 <v-flex xs4 class="pt-4 subheading">
58 <label class="right">Start Time:</label> 58 <label class="right">Start Time:</label>
59 </v-flex> 59 </v-flex>
60 <v-flex xs7 class="ml-3"> 60 <v-flex xs7 class="ml-3">
61 <v-menu 61 <v-menu
62 ref="menuEdit" 62 ref="menuEdit"
63 :close-on-content-click="false" 63 :close-on-content-click="false"
64 v-model="menuEditTime" 64 v-model="menuEditTime"
65 :nudge-right="40" 65 :nudge-right="40"
66 :return-value.sync="editedItem.startTime" 66 :return-value.sync="editedItem.startTime"
67 lazy 67 lazy
68 transition="scale-transition" 68 transition="scale-transition"
69 offset-y 69 offset-y
70 full-width 70 full-width
71 max-width="290px" 71 max-width="290px"
72 min-width="290px" 72 min-width="290px"
73 > 73 >
74 <v-text-field 74 <v-text-field
75 slot="activator" 75 slot="activator"
76 v-model="editedItem.startTime" 76 v-model="editedItem.startTime"
77 append-icon="access_time" 77 append-icon="access_time"
78 readonly 78 readonly
79 ></v-text-field> 79 ></v-text-field>
80 <v-time-picker 80 <v-time-picker
81 v-model="editedItem.startTime" 81 v-model="editedItem.startTime"
82 format="24hr" 82 format="24hr"
83 @change="$refs.menuEdit.save(editedItem.startTime)" 83 @change="$refs.menuEdit.save(editedItem.startTime)"
84 ></v-time-picker> 84 ></v-time-picker>
85 </v-menu> 85 </v-menu>
86 </v-flex> 86 </v-flex>
87 </v-layout> 87 </v-layout>
88 </v-flex> 88 </v-flex>
89 <v-flex xs12 sm12> 89 <v-flex xs12 sm12>
90 <v-layout> 90 <v-layout>
91 <v-flex xs4 class="pt-4 subheading"> 91 <v-flex xs4 class="pt-4 subheading">
92 <label class="right">Duration:</label> 92 <label class="right">Duration:</label>
93 </v-flex> 93 </v-flex>
94 <v-flex xs7 class="ml-3"> 94 <v-flex xs7 class="ml-3">
95 <v-text-field v-model="editedItem.duration" type="text"></v-text-field> 95 <v-text-field v-model="editedItem.duration" type="text"></v-text-field>
96 </v-flex> 96 </v-flex>
97 </v-layout> 97 </v-layout>
98 </v-flex> 98 </v-flex>
99 <v-layout> 99 <v-layout>
100 <v-flex xs12> 100 <v-flex xs12>
101 <v-card-actions class="hidden-xs-only hidden-sm-only"> 101 <v-card-actions class="hidden-xs-only hidden-sm-only">
102 <v-spacer></v-spacer> 102 <v-spacer></v-spacer>
103 <v-btn round dark @click="save" class="add-button">Save</v-btn> 103 <v-btn round dark @click="save" class="add-button">Save</v-btn>
104 </v-card-actions> 104 </v-card-actions>
105 <v-card-actions class="hidden-md-only hidden-lg-only hidden-xl-only"> 105 <v-card-actions class="hidden-md-only hidden-lg-only hidden-xl-only">
106 <v-spacer></v-spacer> 106 <v-spacer></v-spacer>
107 <v-btn round dark @click="save" class="add-button">Save</v-btn> 107 <v-btn round dark @click="save" class="add-button">Save</v-btn>
108 <v-spacer></v-spacer> 108 <v-spacer></v-spacer>
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-card> 113 </v-card>
114 </v-dialog> 114 </v-dialog>
115 <!-- ****** PROFILE VIEW EVENT ****** --> 115 <!-- ****** PROFILE VIEW EVENT ****** -->
116 <v-dialog v-model="viewEventdialog" max-width="500px" persistent> 116 <v-dialog v-model="viewEventdialog" max-width="500px" persistent>
117 <v-card flat class="card-style pa-3" dark> 117 <v-card flat class="card-style pa-3" dark>
118 <v-layout> 118 <v-layout>
119 <v-flex xs12> 119 <v-flex xs12>
120 <label class="title text-xs-center">View Meeting Event</label> 120 <label class="title text-xs-center">View Meeting Event</label>
121 <v-icon size="24" class="right" @click="viewEventdialog = false">cancel</v-icon> 121 <v-icon size="24" class="right" @click="viewEventdialog = false">cancel</v-icon>
122 </v-flex> 122 </v-flex>
123 </v-layout> 123 </v-layout>
124 <v-card-text> 124 <v-card-text>
125 <v-container grid-list-md> 125 <v-container grid-list-md>
126 <v-layout wrap> 126 <v-layout wrap>
127 <v-flex> 127 <v-flex>
128 <v-layout> 128 <v-layout>
129 <v-flex xs4 sm6> 129 <v-flex xs4 sm6>
130 <h5 class="right my-1"> 130 <h5 class="right my-1">
131 <b>Title:</b> 131 <b>Title:</b>
132 </h5> 132 </h5>
133 </v-flex> 133 </v-flex>
134 <v-flex sm6 xs8> 134 <v-flex sm6 xs8>
135 <h5 class="my-1">{{ editedItem.title }}</h5> 135 <h5 class="my-1">{{ editedItem.title }}</h5>
136 </v-flex> 136 </v-flex>
137 </v-layout> 137 </v-layout>
138 <v-layout> 138 <v-layout>
139 <v-flex xs4 sm6> 139 <v-flex xs4 sm6>
140 <h5 class="right my-1"> 140 <h5 class="right my-1">
141 <b>Date:</b> 141 <b>Date:</b>
142 </h5> 142 </h5>
143 </v-flex> 143 </v-flex>
144 <v-flex sm6 xs8> 144 <v-flex sm6 xs8>
145 <h5 class="my-1">{{ dates(editedItem.dateOfEvent) }}</h5> 145 <h5 class="my-1">{{ dates(editedItem.dateOfEvent) }}</h5>
146 </v-flex> 146 </v-flex>
147 </v-layout> 147 </v-layout>
148 <v-layout> 148 <v-layout>
149 <v-flex xs4 sm6> 149 <v-flex xs4 sm6>
150 <h5 class="right my-1"> 150 <h5 class="right my-1">
151 <b>Start Time:</b> 151 <b>Start Time:</b>
152 </h5> 152 </h5>
153 </v-flex> 153 </v-flex>
154 <v-flex sm6 xs8> 154 <v-flex sm6 xs8>
155 <h5 class="my-1">{{ editedItem.startTime }}</h5> 155 <h5 class="my-1">{{ editedItem.startTime }}</h5>
156 </v-flex> 156 </v-flex>
157 </v-layout> 157 </v-layout>
158 <v-layout> 158 <v-layout>
159 <v-flex xs4 sm6> 159 <v-flex xs4 sm6>
160 <h5 class="right my-1"> 160 <h5 class="right my-1">
161 <b>Type Of Event:</b> 161 <b>Type Of Event:</b>
162 </h5> 162 </h5>
163 </v-flex> 163 </v-flex>
164 <v-flex sm6 xs8> 164 <v-flex sm6 xs8>
165 <h5 class="my-1">{{ editedItem.typeOfEvent }}</h5> 165 <h5 class="my-1">{{ editedItem.typeOfEvent }}</h5>
166 </v-flex> 166 </v-flex>
167 </v-layout> 167 </v-layout>
168 <v-layout v-if="editedItem.courseId"> 168 <v-layout v-if="editedItem.courseId">
169 <v-flex xs4 sm6> 169 <v-flex xs4 sm6>
170 <h5 class="right my-1"> 170 <h5 class="right my-1">
171 <b>Course Name:</b> 171 <b>Course Name:</b>
172 </h5> 172 </h5>
173 </v-flex> 173 </v-flex>
174 <v-flex sm6 xs8> 174 <v-flex sm6 xs8>
175 <h5 class="my-1">{{ editedItem.courseId.courseName }}</h5> 175 <h5 class="my-1">{{ editedItem.courseId.courseName }}</h5>
176 </v-flex> 176 </v-flex>
177 </v-layout> 177 </v-layout>
178 <v-layout v-if="editedItem.classId"> 178 <v-layout v-if="editedItem.classId">
179 <v-flex xs4 sm6> 179 <v-flex xs4 sm6>
180 <h5 class="right my-1"> 180 <h5 class="right my-1">
181 <b>Class:</b> 181 <b>Class:</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.classId.classNum }}</h5> 185 <h5 class="my-1">{{ editedItem.classId.classNum }}</h5>
186 </v-flex> 186 </v-flex>
187 </v-layout> 187 </v-layout>
188 <v-layout> 188 <v-layout>
189 <v-flex xs4 sm6> 189 <v-flex xs4 sm6>
190 <h5 class="right my-1"> 190 <h5 class="right my-1">
191 <b>Duration:</b> 191 <b>Duration:</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.duration }}</h5> 195 <h5 class="my-1">{{ editedItem.duration }}</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 <!-- ****** EVENT TABLE ****** --> 205 <!-- ****** EVENT TABLE ****** -->
206 206
207 <v-toolbar color="transparent" flat> 207 <v-toolbar color="transparent" flat>
208 <v-btn 208 <v-btn
209 fab 209 fab
210 dark 210 dark
211 class="open-dialog-button hidden-xl-only hidden-md-only hidden-lg-only" 211 class="open-dialog-button hidden-xl-only hidden-md-only hidden-lg-only"
212 small 212 small
213 @click="meetEventDialog = true" 213 @click="meetEventDialog = true"
214 > 214 >
215 <v-icon dark>add</v-icon> 215 <v-icon dark>add</v-icon>
216 </v-btn> 216 </v-btn>
217 <v-btn 217 <v-btn
218 round 218 round
219 class="open-dialog-button hidden-sm-only hidden-xs-only" 219 class="open-dialog-button hidden-sm-only hidden-xs-only"
220 dark 220 dark
221 @click="meetEventDialog = true" 221 @click="meetEventDialog = true"
222 > 222 >
223 <v-icon class="white--text pr-1" size="20">add</v-icon>Add Event 223 <v-icon class="white--text pr-1" size="20">add</v-icon>Add Event
224 </v-btn> 224 </v-btn>
225 <v-spacer></v-spacer> 225 <v-spacer></v-spacer>
226 <v-card-title class="body-1" v-show="show"> 226 <v-card-title class="body-1" v-show="show">
227 <v-btn icon large flat @click="displaySearch"> 227 <v-btn icon large flat @click="displaySearch">
228 <v-avatar size="27"> 228 <v-avatar size="27">
229 <img src="/static/icon/search.png" alt="icon" /> 229 <img src="/static/icon/search.png" alt="icon" />
230 </v-avatar> 230 </v-avatar>
231 </v-btn> 231 </v-btn>
232 </v-card-title> 232 </v-card-title>
233 <v-flex xs8 sm8 md3 lg2 v-if="showSearch"> 233 <v-flex xs8 sm8 md3 lg2 v-if="showSearch">
234 <v-layout> 234 <v-layout>
235 <v-text-field 235 <v-text-field
236 autofocus 236 autofocus
237 v-model="search" 237 v-model="search"
238 label="Search" 238 label="Search"
239 prepend-inner-icon="search" 239 prepend-inner-icon="search"
240 color="primary" 240 color="primary"
241 ></v-text-field> 241 ></v-text-field>
242 <v-icon @click="closeSearch" color="error">close</v-icon> 242 <v-icon @click="closeSearch" color="error">close</v-icon>
243 </v-layout> 243 </v-layout>
244 </v-flex> 244 </v-flex>
245 </v-toolbar> 245 </v-toolbar>
246 <v-data-table :headers="headers" :items="events" :pagination.sync="pagination" :search="search"> 246 <v-data-table :headers="headers" :items="events" :pagination.sync="pagination" :search="search">
247 <template slot="items" slot-scope="props"> 247 <template slot="items" slot-scope="props">
248 <tr class="tr"> 248 <tr class="tr">
249 <td class="td td-row">{{ props.index + 1}}</td> 249 <td class="td td-row">{{ props.index + 1}}</td>
250 <td 250 <td
251 class="td td-row text-xs-center" 251 class="td td-row text-xs-center"
252 >{{ props.item.classId ? props.item.classId.classNum : "-" }}</td> 252 >{{ props.item.classId ? props.item.classId.classNum : "-" }}</td>
253 <td class="td td-row text-xs-center">{{ props.item.title }}</td> 253 <td class="td td-row text-xs-center">{{ props.item.title }}</td>
254 <td class="td td-row text-xs-center">{{ dates(props.item.dateOfEvent) }}</td> 254 <td class="td td-row text-xs-center">{{ dates(props.item.dateOfEvent) }}</td>
255 <td class="td td-row text-xs-center">{{ props.item.startTime }}</td> 255 <td class="td td-row text-xs-center">{{ props.item.startTime }}</td>
256 <td class="td td-row text-xs-center"> 256 <td class="td td-row text-xs-center">
257 <span> 257 <span>
258 <v-tooltip top> 258 <v-tooltip top>
259 <img 259 <img
260 slot="activator" 260 slot="activator"
261 style="cursor:pointer; width:25px; height:25px; " 261 style="cursor:pointer; width:25px; height:25px; "
262 class="mr-3" 262 class="mr-3"
263 @click="profile(props.item)" 263 @click="profile(props.item)"
264 src="/static/icon/view.png" 264 src="/static/icon/view.png"
265 /> 265 />
266 <span>View</span> 266 <span>View</span>
267 </v-tooltip> 267 </v-tooltip>
268 <v-tooltip top> 268 <v-tooltip top>
269 <img 269 <img
270 slot="activator" 270 slot="activator"
271 style="cursor:pointer; width:20px; height:18px; " 271 style="cursor:pointer; width:20px; height:18px; "
272 class="mr-3" 272 class="mr-3"
273 @click="editItem(props.item)" 273 @click="editItem(props.item)"
274 src="/static/icon/edit.png" 274 src="/static/icon/edit.png"
275 /> 275 />
276 <span>Edit</span> 276 <span>Edit</span>
277 </v-tooltip> 277 </v-tooltip>
278 <v-tooltip top> 278 <v-tooltip top>
279 <img 279 <img
280 slot="activator" 280 slot="activator"
281 style="cursor:pointer; width:20px; height:20px; " 281 style="cursor:pointer; width:20px; height:20px; "
282 class="mr-3" 282 class="mr-3"
283 @click="deleteItem(props.item)" 283 @click="deleteItem(props.item)"
284 src="/static/icon/delete.png" 284 src="/static/icon/delete.png"
285 /> 285 />
286 <span>Delete</span> 286 <span>Delete</span>
287 </v-tooltip> 287 </v-tooltip>
288 </span> 288 </span>
289 </td> 289 </td>
290 </tr> 290 </tr>
291 </template> 291 </template>
292 <v-alert 292 <v-alert
293 slot="no-results" 293 slot="no-results"
294 :value="true" 294 :value="true"
295 color="error" 295 color="error"
296 icon="warning" 296 icon="warning"
297 >Your search for "{{ search }}" found no results.</v-alert> 297 >Your search for "{{ search }}" found no results.</v-alert>
298 </v-data-table> 298 </v-data-table>
299 <!-- ****** ADD MULTIPLE EVENT ****** --> 299 <!-- ****** ADD MULTIPLE EVENT ****** -->
300 <v-dialog v-model="meetEventDialog" max-width="500px" persistent v-if="meetEventDialog"> 300 <v-dialog v-model="meetEventDialog" max-width="500px" persistent v-if="meetEventDialog">
301 <v-card flat class="card-style pa-2" dark> 301 <v-card flat class="card-style pa-2" dark>
302 <v-layout> 302 <v-layout>
303 <v-flex xs12> 303 <v-flex xs12>
304 <label class="title text-xs-center">Add Meeting Event</label> 304 <label class="title text-xs-center">Add Meeting Event</label>
305 <v-icon 305 <v-icon
306 size="24" 306 size="24"
307 class="right" 307 class="right"
308 @click="meetEventDialog = false; $refs.form.reset()" 308 @click="meetEventDialog = false; $refs.form.reset()"
309 >cancel</v-icon> 309 >cancel</v-icon>
310 </v-flex> 310 </v-flex>
311 </v-layout> 311 </v-layout>
312 <v-form ref="form" v-model="valid" lazy-validation> 312 <v-form ref="form" v-model="valid" lazy-validation>
313 <v-container fluid> 313 <v-container fluid>
314 <v-flex xs12> 314 <v-flex xs12>
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">Title:</label> 317 <label class="right">Title:</label>
318 </v-flex> 318 </v-flex>
319 <v-flex xs8 sm8 class="ml-3"> 319 <v-flex xs8 sm8 class="ml-3">
320 <v-text-field 320 <v-text-field
321 v-model="meetEvent.title" 321 v-model="meetEvent.title"
322 placeholder="fill your Title" 322 placeholder="fill your Title"
323 type="text" 323 type="text"
324 :rules="titleRules" 324 :rules="titleRules"
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> 330 <v-flex xs12>
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">Date:</label> 333 <label class="right">Date:</label>
334 </v-flex> 334 </v-flex>
335 <v-flex xs8 sm8 class="ml-3"> 335 <v-flex xs8 sm8 class="ml-3">
336 <v-menu 336 <v-menu
337 ref="menu1" 337 ref="menu1"
338 :close-on-content-click="false" 338 :close-on-content-click="false"
339 v-model="menu1" 339 v-model="menu1"
340 :nudge-right="40" 340 :nudge-right="40"
341 :return-value.sync="meetEvent.dateOfEvent" 341 :return-value.sync="meetEvent.dateOfEvent"
342 app 342 app
343 lazy 343 lazy
344 transition="scale-transition" 344 transition="scale-transition"
345 offset-y 345 offset-y
346 full-width 346 full-width
347 min-width="290px" 347 min-width="290px"
348 > 348 >
349 <v-text-field 349 <v-text-field
350 slot="activator" 350 slot="activator"
351 :rules="dateRules" 351 :rules="dateRules"
352 v-model="meetEvent.dateOfEvent" 352 v-model="meetEvent.dateOfEvent"
353 append-icon="event" 353 append-icon="event"
354 placeholder="Select date" 354 placeholder="Select date"
355 ></v-text-field> 355 ></v-text-field>
356 <v-date-picker 356 <v-date-picker
357 color="info" 357 color="info"
358 v-model="meetEvent.dateOfEvent" 358 v-model="meetEvent.dateOfEvent"
359 @input="$refs.menu1.save(meetEvent.dateOfEvent)" 359 @input="$refs.menu1.save(meetEvent.dateOfEvent)"
360 ></v-date-picker> 360 ></v-date-picker>
361 </v-menu> 361 </v-menu>
362 </v-flex> 362 </v-flex>
363 </v-layout> 363 </v-layout>
364 </v-flex> 364 </v-flex>
365 <v-flex xs12> 365 <v-flex xs12>
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">Start Time:</label> 368 <label class="right">Start Time:</label>
369 </v-flex> 369 </v-flex>
370 <v-flex xs8 sm8 class="ml-3"> 370 <v-flex xs8 sm8 class="ml-3">
371 <v-menu 371 <v-menu
372 ref="menuA" 372 ref="menuA"
373 :close-on-content-click="false" 373 :close-on-content-click="false"
374 v-model="menu2" 374 v-model="menu2"
375 :nudge-right="40" 375 :nudge-right="40"
376 :return-value.sync="meetEvent.startTime" 376 :return-value.sync="meetEvent.startTime"
377 lazy 377 lazy
378 transition="scale-transition" 378 transition="scale-transition"
379 offset-y 379 offset-y
380 full-width 380 full-width
381 max-width="290px" 381 max-width="290px"
382 min-width="290px" 382 min-width="290px"
383 > 383 >
384 <v-text-field 384 <v-text-field
385 slot="activator" 385 slot="activator"
386 v-model="meetEvent.startTime" 386 v-model="meetEvent.startTime"
387 placeholder="Select Start time" 387 placeholder="Select Start time"
388 append-icon="access_time" 388 append-icon="access_time"
389 :rules="startTimeRules" 389 :rules="startTimeRules"
390 readonly 390 readonly
391 ></v-text-field> 391 ></v-text-field>
392 <v-time-picker 392 <v-time-picker
393 v-model="meetEvent.startTime" 393 v-model="meetEvent.startTime"
394 format="24hr" 394 format="24hr"
395 @change="$refs.menuA.save(meetEvent.startTime)" 395 @change="$refs.menuA.save(meetEvent.startTime)"
396 ></v-time-picker> 396 ></v-time-picker>
397 </v-menu> 397 </v-menu>
398 </v-flex> 398 </v-flex>
399 </v-layout> 399 </v-layout>
400 </v-flex> 400 </v-flex>
401 <v-flex xs12> 401 <v-flex xs12>
402 <v-layout> 402 <v-layout>
403 <v-flex xs4 class="pt-4 subheading"> 403 <v-flex xs4 class="pt-4 subheading">
404 <label class="right">Type Of Event:</label> 404 <label class="right">Type Of Event:</label>
405 </v-flex> 405 </v-flex>
406 <v-flex xs8 sm8 class="ml-3"> 406 <v-flex xs8 sm8 class="ml-3">
407 <v-select 407 <v-select
408 :items="typeOfEvent" 408 :items="typeOfEvent"
409 label="Select Type Of Event" 409 label="Select Type Of Event"
410 v-model="meetEvent.typeOfEvent" 410 v-model="meetEvent.typeOfEvent"
411 :rules="typeOfEventRules" 411 :rules="typeOfEventRules"
412 ></v-select> 412 ></v-select>
413 </v-flex> 413 </v-flex>
414 </v-layout> 414 </v-layout>
415 </v-flex> 415 </v-flex>
416 <v-flex xs12 v-show="meetEvent.typeOfEvent"> 416 <v-flex xs12 v-show="meetEvent.typeOfEvent">
417 <v-layout> 417 <v-layout>
418 <v-flex xs4 class="pt-4 subheading"> 418 <v-flex xs4 class="pt-4 subheading">
419 <label class="right">Class:</label> 419 <label class="right">Class:</label>
420 </v-flex> 420 </v-flex>
421 <v-flex xs8 sm8 class="ml-3"> 421 <v-flex xs8 sm8 class="ml-3">
422 <v-select 422 <v-select
423 :items="addclass" 423 :items="addclass"
424 label="Select Class" 424 label="Select Class"
425 v-model="meetEvent.classId" 425 v-model="meetEvent.classId"
426 item-text="classNum" 426 item-text="classNum"
427 item-value="_id" 427 item-value="_id"
428 @change="getCourses(meetEvent.classId)" 428 @change="getCourses(meetEvent.classId)"
429 ></v-select> 429 ></v-select>
430 </v-flex> 430 </v-flex>
431 </v-layout> 431 </v-layout>
432 </v-flex> 432 </v-flex>
433 <v-flex xs12 v-show="meetEvent.typeOfEvent === 'Course'"> 433 <v-flex xs12 v-show="meetEvent.typeOfEvent === 'Course'">
434 <v-layout> 434 <v-layout>
435 <v-flex xs4 class="pt-4 subheading"> 435 <v-flex xs4 class="pt-4 subheading">
436 <label class="right">Courses:</label> 436 <label class="right">Courses:</label>
437 </v-flex> 437 </v-flex>
438 <v-flex xs8 sm8 class="ml-3"> 438 <v-flex xs8 sm8 class="ml-3">
439 <v-select 439 <v-select
440 :items="courseData" 440 :items="courseData"
441 label="Select Course" 441 label="Select Course"
442 v-model="meetEvent.courseId" 442 v-model="meetEvent.courseId"
443 item-text="courseName" 443 item-text="courseName"
444 item-value="_id" 444 item-value="_id"
445 required 445 required
446 ></v-select> 446 ></v-select>
447 </v-flex> 447 </v-flex>
448 </v-layout> 448 </v-layout>
449 </v-flex> 449 </v-flex>
450 <v-flex xs12> 450 <v-flex xs12>
451 <v-layout> 451 <v-layout>
452 <v-flex xs4 class="pt-4 subheading"> 452 <v-flex xs4 class="pt-4 subheading">
453 <label class="right">Duration</label> 453 <label class="right">Duration</label>
454 </v-flex> 454 </v-flex>
455 <v-flex xs8 sm8 class="ml-3"> 455 <v-flex xs8 sm8 class="ml-3">
456 <v-text-field 456 <v-text-field
457 placeholder="fill your Description" 457 placeholder="fill your Description"
458 :rules="descriptionRules" 458 :rules="descriptionRules"
459 v-model="meetEvent.duration" 459 v-model="meetEvent.duration"
460 type="text" 460 type="text"
461 required 461 required
462 ></v-text-field> 462 ></v-text-field>
463 </v-flex> 463 </v-flex>
464 </v-layout> 464 </v-layout>
465 </v-flex> 465 </v-flex>
466 <v-layout> 466 <v-layout>
467 <v-flex xs12> 467 <v-flex xs12>
468 <v-layout class="right"> 468 <v-layout class="right">
469 <v-btn @click="clear" round class="clear-button" dark>clear</v-btn> 469 <v-btn @click="clear" round class="clear-button" dark>clear</v-btn>
470 <v-btn @click="submit" round dark :loading="loading" class="add-button">Add</v-btn> 470 <v-btn @click="submit" round dark :loading="loading" class="add-button">Add</v-btn>
471 </v-layout> 471 </v-layout>
472 </v-flex> 472 </v-flex>
473 </v-layout> 473 </v-layout>
474 </v-container> 474 </v-container>
475 </v-form> 475 </v-form>
476 </v-card> 476 </v-card>
477 </v-dialog> 477 </v-dialog>
478 <v-snackbar 478 <v-snackbar
479 :timeout="timeout" 479 :timeout="timeout"
480 :top="y === 'top'" 480 :top="y === 'top'"
481 :right="x === 'right'" 481 :right="x === 'right'"
482 :vertical="mode === 'vertical'" 482 :vertical="mode === 'vertical'"
483 v-model="snackbar" 483 v-model="snackbar"
484 :color="color" 484 :color="color"
485 >{{ text }}</v-snackbar> 485 >{{ text }}</v-snackbar>
486 <div class="loader" v-if="showLoader"> 486 <div class="loader" v-if="showLoader">
487 <v-progress-circular indeterminate color="white"></v-progress-circular> 487 <v-progress-circular indeterminate color="white"></v-progress-circular>
488 </div> 488 </div>
489 </v-container> 489 </v-container>
490 </template> 490 </template>
491 491
492 <script> 492 <script>
493 import http from "@/Services/http.js"; 493 import http from "@/Services/http.js";
494 import moment from "moment"; 494 import moment from "moment";
495 495
496 export default { 496 export default {
497 data: () => ({ 497 data: () => ({
498 snackbar: false, 498 snackbar: false,
499 y: "top", 499 y: "top",
500 x: "right", 500 x: "right",
501 mode: "", 501 mode: "",
502 timeout: 5000, 502 timeout: 5000,
503 text: "", 503 text: "",
504 color: "", 504 color: "",
505 loading: false, 505 loading: false,
506 date: null, 506 date: null,
507 search: "", 507 search: "",
508 color: "", 508 color: "",
509 show: true, 509 show: true,
510 meetEventDialog: false, 510 meetEventDialog: false,
511 showSearch: false, 511 showSearch: false,
512 showLoader: false, 512 showLoader: false,
513 editEventdialog: false, 513 editEventdialog: false,
514 viewEventdialog: false, 514 viewEventdialog: false,
515 valid: true, 515 valid: true,
516 addclass: [], 516 addclass: [],
517 courseData: [], 517 courseData: [],
518 pagination: { 518 pagination: {
519 rowsPerPage: 10, 519 rowsPerPage: 10,
520 }, 520 },
521 date: null, 521 date: null,
522 menu1: false, 522 menu1: false,
523 menu: false, 523 menu: false,
524 menuEditTime: false, 524 menuEditTime: false,
525 menuEditDate: false, 525 menuEditDate: false,
526 titleRules: [(v) => !!v || " Tilte is required"], 526 titleRules: [(v) => !!v || " Tilte is required"],
527 descriptionRules: [(v) => !!v || " Discription is required"], 527 descriptionRules: [(v) => !!v || " Discription is required"],
528 dateRules: [(v) => !!v || "Date of event is required"], 528 dateRules: [(v) => !!v || "Date of event is required"],
529 startTimeRules: [(v) => !!v || "Start Time is required"], 529 startTimeRules: [(v) => !!v || "Start Time is required"],
530 typeOfEventRules: [(v) => !!v || "Type of event is required"], 530 typeOfEventRules: [(v) => !!v || "Type of event is required"],
531 headers: [ 531 headers: [
532 { 532 {
533 text: "No", 533 text: "No",
534 align: "", 534 align: "",
535 sortable: false, 535 sortable: false,
536 value: "No", 536 value: "No",
537 }, 537 },
538 { 538 {
539 text: "Class", 539 text: "Class",
540 value: "classNum", 540 value: "classNum",
541 sortable: false, 541 sortable: false,
542 align: "center", 542 align: "center",
543 }, 543 },
544 { text: "Title", value: "title", sortable: false, align: "center" }, 544 { text: "Title", value: "title", sortable: false, align: "center" },
545 { 545 {
546 text: "Date Of Event", 546 text: "Date Of Event",
547 value: "dateOfEvent", 547 value: "dateOfEvent",
548 sortable: false, 548 sortable: false,
549 align: "center", 549 align: "center",
550 }, 550 },
551 { 551 {
552 text: "Start Time", 552 text: "Start Time",
553 value: "startTime", 553 value: "startTime",
554 sortable: false, 554 sortable: false,
555 align: "center", 555 align: "center",
556 }, 556 },
557 { text: "Action", value: "", sortable: false, align: "center" }, 557 { text: "Action", value: "", sortable: false, align: "center" },
558 ], 558 ],
559 events: [], 559 events: [],
560 typeOfEvent: ["Class", "Course"], 560 typeOfEvent: ["Class", "Course"],
561 editedIndex: -1, 561 editedIndex: -1,
562 meetEvent: { 562 meetEvent: {
563 startTime: null, 563 startTime: null,
564 }, 564 },
565 editedItem: {}, 565 editedItem: {},
566 menu1: false, 566 menu1: false,
567 menu2: false, 567 menu2: false,
568 loginId: "", 568 loginId: "",
569 }), 569 }),
570 watch: { 570 watch: {
571 meetEventDialog: function (val) { 571 meetEventDialog: function (val) {
572 if (!val) { 572 if (!val) {
573 this.meetEvent = []; 573 this.meetEvent = [];
574 } 574 }
575 }, 575 },
576 }, 576 },
577 methods: { 577 methods: {
578 dates: function (date) { 578 dates: function (date) {
579 return moment(date).format("MMMM DD, YYYY"); 579 return moment(date).format("MMMM DD, YYYY");
580 }, 580 },
581 getEvents() { 581 getEvents() {
582 this.showLoader = true; 582 this.showLoader = true;
583 var token = this.$store.state.token; 583 var token = this.$store.state.token;
584 http() 584 http()
585 .get("/getMeetingEventesList", { 585 .get("/getMeetingEventesList", {
586 params: { teacherId: this.loginId }, 586 params: { teacherId: this.loginId },
587 headers: { Authorization: "Bearer " + token }, 587 headers: { Authorization: "Bearer " + token },
588 }) 588 })
589 .then((response) => { 589 .then((response) => {
590 this.events = response.data.data; 590 this.events = response.data.data;
591 this.showLoader = false; 591 this.showLoader = false;
592 }) 592 })
593 .catch((error) => { 593 .catch((error) => {
594 // console.log("err====>", err); 594 // console.log("err====>", err);
595 this.showLoader = false; 595 this.showLoader = false;
596 if (error.response.status === 401) { 596 if (error.response.status === 401) {
597 this.$router.replace({ path: "/" }); 597 this.$router.replace({ path: "/" });
598 this.$store.dispatch("setToken", null); 598 this.$store.dispatch("setToken", null);
599 this.$store.dispatch("Id", null); 599 this.$store.dispatch("Id", null);
600 } 600 }
601 }); 601 });
602 }, 602 },
603 editItem(item) { 603 editItem(item) {
604 this.editedIndex = this.events.indexOf(item); 604 this.editedIndex = this.events.indexOf(item);
605 this.editedItem = Object.assign({}, item); 605 this.editedItem = Object.assign({}, item);
606 this.editedItem.meetingEventId = item._id; 606 this.editedItem.meetingEventId = item._id;
607 this.editedItem.startTime = moment(this.editedItem.startTime, [ 607 this.editedItem.startTime = moment(this.editedItem.startTime, [
608 "h:mm A", 608 "h:mm A",
609 ]).format("HH:mm"); 609 ]).format("HH:mm");
610 this.editEventdialog = true; 610 this.editEventdialog = true;
611 }, 611 },
612 profile(item) { 612 profile(item) {
613 this.editedIndex = this.events.indexOf(item); 613 this.editedIndex = this.events.indexOf(item);
614 this.editedItem = Object.assign({}, item); 614 this.editedItem = Object.assign({}, item);
615 this.viewEventdialog = true; 615 this.viewEventdialog = true;
616 }, 616 },
617 617
618 deleteItem(item) { 618 deleteItem(item) {
619 let deleteEvent = { 619 let deleteEvent = {
620 meetingEventId: item._id, 620 meetingEventId: item._id,
621 }; 621 };
622 http() 622 http()
623 .delete( 623 .delete(
624 "/deleteMeetingEvent", 624 "/deleteMeetingEvent",
625 confirm("Are you sure you want to delete this?") && { 625 confirm("Are you sure you want to delete this?") && {
626 params: deleteEvent, 626 params: deleteEvent,
627 } 627 }
628 ) 628 )
629 .then((response) => { 629 .then((response) => {
630 this.snackbar = true; 630 this.snackbar = true;
631 this.text = response.data.message; 631 this.text = response.data.message;
632 this.getEvents(); 632 this.getEvents();
633 this.snackbar = true; 633 this.snackbar = true;
634 this.color = "green"; 634 this.color = "green";
635 this.text = response.data.message; 635 this.text = response.data.message;
636 }) 636 })
637 .catch((error) => { 637 .catch((error) => {
638 this.snackbar = true; 638 this.snackbar = true;
639 this.text = error.response.data.message; 639 this.text = error.response.data.message;
640 this.color = "error"; 640 this.color = "error";
641 this.loading = false; 641 this.loading = false;
642 }); 642 });
643 }, 643 },
644 getAllClass() { 644 getAllClass() {
645 http() 645 http()
646 .get("/getClassesList") 646 .get("/getClassesList")
647 .then((response) => { 647 .then((response) => {
648 this.addclass = response.data.data; 648 this.addclass = response.data.data;
649 }) 649 })
650 .catch((error) => { 650 .catch((error) => {
651 // console.log("err====>", err); 651 // console.log("err====>", err);
652 // this.$router.replace({ path: "/" }); 652 // this.$router.replace({ path: "/" });
653 }); 653 });
654 }, 654 },
655 getCourses(classId) { 655 getCourses(classId) {
656 this.showLoader = true; 656 this.showLoader = true;
657 http() 657 http()
658 .get("/getCourseesList", { 658 .get("/getCourseesList", {
659 params: { 659 params: {
660 classId: classId, 660 classId: classId,
661 }, 661 },
662 }) 662 })
663 .then((response) => { 663 .then((response) => {
664 this.courseData = response.data.data; 664 this.courseData = response.data.data;
665 this.showLoader = false; 665 this.showLoader = false;
666 }) 666 })
667 .catch((err) => { 667 .catch((err) => {
668 // console.log("err====>", err); 668 // console.log("err====>", err);
669 this.showLoader = false; 669 this.showLoader = false;
670 this.snackbar = true;
671 this.color = "error";
672 this.text = error.response.data.message;
670 this.snackbar = true; 673 });
671 this.color = "error"; 674 },
672 this.text = error.response.data.message; 675 close() {
673 }); 676 this.editEventdialog = false;
674 }, 677 },
675 close() { 678 submit() {
676 this.editEventdialog = false; 679 if (this.$refs.form.validate()) {
677 }, 680 this.loading = true;
678 submit() { 681 this.meetEvent.startTime = moment(
679 if (this.$refs.form.validate()) { 682 this.meetEvent.startTime,
680 this.loading = true; 683 "hh:mm"
681 this.meetEvent.startTime = moment( 684 ).format("LT");
682 this.meetEvent.startTime, 685 http()
683 "hh:mm" 686 .post("/createMeetingEvent", this.meetEvent)
684 ).format("LT"); 687 .then((response) => {
685 http() 688 this.snackbar = true;
686 .post("/createMeetingEvent", this.meetEvent) 689 this.text = response.data.message;
687 .then((response) => { 690 this.color = "green";
688 this.snackbar = true; 691 this.getEvents();
689 this.text = response.data.message; 692 this.clear();
690 this.color = "green"; 693 this.loading = false;
691 this.getEvents(); 694 this.meetEventDialog = false;
692 this.clear(); 695 })
693 this.loading = false; 696 .catch((error) => {
694 this.meetEventDialog = false; 697 this.snackbar = true;
695 }) 698 this.text = error.response.data.message;
696 .catch((error) => { 699 this.color = "error";
697 this.snackbar = true; 700 this.loading = false;
698 this.text = error.response.data.message; 701 });
699 this.color = "error"; 702 }
700 this.loading = false; 703 },
701 }); 704 clear() {
702 } 705 this.$refs.form.reset();
703 }, 706 },
704 clear() { 707 save() {
705 this.$refs.form.reset(); 708 // console.log("=======this.editedItem=====", this.editedItem);
706 }, 709 if (this.editedItem.courseId) {
707 save() { 710 this.editedItem.courseId = this.editedItem.courseId._id;
708 // console.log("=======this.editedItem=====", this.editedItem); 711 }
709 if (this.editedItem.courseId) { 712 delete this.editedItem.classId;
710 this.editedItem.courseId = this.editedItem.courseId._id; 713
711 } 714 this.editedItem.startTime = moment(
712 delete this.editedItem.classId; 715 this.editedItem.startTime,
713 716 "hh:mm"
714 this.editedItem.startTime = moment( 717 ).format("LT");
715 this.editedItem.startTime, 718 http()
716 "hh:mm" 719 .put("/updateMeetingEvent", this.editedItem)
717 ).format("LT"); 720 .then((response) => {
718 http() 721 this.snackbar = true;
719 .put("/updateMeetingEvent", this.editedItem) 722 this.text = response.data.message;
720 .then((response) => { 723 this.color = "green";
721 this.snackbar = true; 724 this.getEvents();
722 this.text = response.data.message; 725 this.close();
723 this.color = "green"; 726 })
724 this.getEvents(); 727 .catch((error) => {
725 this.close(); 728 this.snackbar = true;
726 }) 729 this.text = error.response.data.message;
727 .catch((error) => { 730 this.color = "error";
728 this.snackbar = true; 731 });
729 this.text = error.response.data.message; 732 },
730 this.color = "error"; 733 displaySearch() {
731 }); 734 (this.show = false), (this.showSearch = true);
732 }, 735 },
733 displaySearch() { 736 closeSearch() {
734 (this.show = false), (this.showSearch = true); 737 this.showSearch = false;
735 }, 738 this.show = true;
736 closeSearch() { 739 this.search = "";
737 this.showSearch = false; 740 },
738 this.show = true; 741 },
739 this.search = ""; 742 mounted() {
740 }, 743 this.loginId = this.$store.state.id;
741 }, 744 this.getEvents();
742 mounted() { 745 this.getAllClass();
743 this.loginId = this.$store.state.id; 746 },
744 this.getEvents(); 747 };
745 this.getAllClass(); 748 </script>
src/router/paths.js
Diff comments   View file @8b7976c
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: '*', 24 path: '*',
25 meta: {}, 25 meta: {},
26 name: 'dashboardAdmin', 26 name: 'dashboardAdmin',
27 props: (route) => ({ 27 props: (route) => ({
28 type: route.query.type 28 type: route.query.type
29 }), 29 }),
30 component: () => 30 component: () =>
31 import( 31 import(
32 /* webpackChunkName: "routes" */ 32 /* webpackChunkName: "routes" */
33 /* webpackMode: "lazy-once" */ 33 /* webpackMode: "lazy-once" */
34 `@/pages/Dashboard/dashboard.vue` 34 `@/pages/Dashboard/dashboard.vue`
35 ) 35 )
36 }, 36 },
37 { 37 {
38 path: '/500', 38 path: '/500',
39 meta: { 39 meta: {
40 public: true, 40 public: true,
41 }, 41 },
42 name: 'ServerError', 42 name: 'ServerError',
43 component: () => 43 component: () =>
44 import( 44 import(
45 /* webpackChunkName: "routes" */ 45 /* webpackChunkName: "routes" */
46 /* webpackMode: "lazy-once" */ 46 /* webpackMode: "lazy-once" */
47 `@/pages/NotFound/Error.vue` 47 `@/pages/NotFound/Error.vue`
48 ) 48 )
49 }, 49 },
50 { 50 {
51 path: '/Refresh', 51 path: '/Refresh',
52 meta: { 52 meta: {
53 public: true, 53 public: true,
54 }, 54 },
55 name: 'Refresh', 55 name: 'Refresh',
56 component: () => 56 component: () =>
57 import( 57 import(
58 /* webpackChunkName: "routes" */ 58 /* webpackChunkName: "routes" */
59 /* webpackMode: "lazy-once" */ 59 /* webpackMode: "lazy-once" */
60 `@/pages/Common/Refresh.vue` 60 `@/pages/Common/Refresh.vue`
61 ) 61 )
62 }, 62 },
63 { 63 {
64 path: '/changepassword', 64 path: '/changepassword',
65 meta: {}, 65 meta: {},
66 name: 'changepassword', 66 name: 'changepassword',
67 props: (route) => ({ 67 props: (route) => ({
68 type: route.query.type 68 type: route.query.type
69 }), 69 }),
70 component: () => 70 component: () =>
71 import( 71 import(
72 /* webpackChunkName: "routes" */ 72 /* webpackChunkName: "routes" */
73 /* webpackMode: "lazy-once" */ 73 /* webpackMode: "lazy-once" */
74 `@/pages/Authentication/changepassword.vue` 74 `@/pages/Authentication/changepassword.vue`
75 ) 75 )
76 }, 76 },
77 { 77 {
78 path: '/teachers', 78 path: '/teachers',
79 meta: { 79 meta: {
80 breadcrumb: false 80 breadcrumb: false
81 }, 81 },
82 name: 'Teachers', 82 name: 'Teachers',
83 component: () => 83 component: () =>
84 import( 84 import(
85 /* webpackChunkName: "routes" */ 85 /* webpackChunkName: "routes" */
86 /* webpackMode: "lazy-once" */ 86 /* webpackMode: "lazy-once" */
87 `@/pages/Teachers/teachers.vue` 87 `@/pages/Teachers/teachers.vue`
88 ) 88 )
89 }, 89 },
90 { 90 {
91 path: '/AssignTeachers', 91 path: '/AssignTeachers',
92 meta: { 92 meta: {
93 breadcrumb: false 93 breadcrumb: false
94 }, 94 },
95 name: 'AssignTeachers', 95 name: 'AssignTeachers',
96 component: () => 96 component: () =>
97 import( 97 import(
98 /* webpackChunkName: "routes" */ 98 /* webpackChunkName: "routes" */
99 /* webpackMode: "lazy-once" */ 99 /* webpackMode: "lazy-once" */
100 `@/pages/AssignTeachers.vue` 100 `@/pages/AssignTeachers.vue`
101 ) 101 )
102 }, 102 },
103 { 103 {
104 path: '/', 104 path: '/',
105 meta: { 105 meta: {
106 public: true, 106 public: true,
107 }, 107 },
108 name: 'Login', 108 name: 'Login',
109 component: () => 109 component: () =>
110 import( 110 import(
111 /* webpackChunkName: "routes" */ 111 /* webpackChunkName: "routes" */
112 /* webpackMode: "lazy-once" */ 112 /* webpackMode: "lazy-once" */
113 `@/pages/Authentication/Login.vue` 113 `@/pages/Authentication/Login.vue`
114 ) 114 )
115 }, 115 },
116 { 116 {
117 path: '/forgetpassword', 117 path: '/forgetpassword',
118 meta: { 118 meta: {
119 public: true, 119 public: true,
120 }, 120 },
121 name: 'forgetpassword', 121 name: 'forgetpassword',
122 component: () => 122 component: () =>
123 import( 123 import(
124 /* webpackChunkName: "routes" */ 124 /* webpackChunkName: "routes" */
125 /* webpackMode: "lazy-once" */ 125 /* webpackMode: "lazy-once" */
126 `@/pages/Authentication/forgetpassword.vue` 126 `@/pages/Authentication/forgetpassword.vue`
127 ) 127 )
128 }, 128 },
129 { 129 {
130 path: '/students', 130 path: '/students',
131 meta: {}, 131 meta: {},
132 name: 'Students', 132 name: 'Students',
133 props: (route) => ({ 133 props: (route) => ({
134 type: route.query.type 134 type: route.query.type
135 }), 135 }),
136 component: () => 136 component: () =>
137 import( 137 import(
138 /* webpackChunkName: "routes" */ 138 /* webpackChunkName: "routes" */
139 /* webpackMode: "lazy-once" */ 139 /* webpackMode: "lazy-once" */
140 `@/pages/Students/students.vue` 140 `@/pages/Students/students.vue`
141 ) 141 )
142 }, 142 },
143 { 143 {
144 path: '/class', 144 path: '/class',
145 meta: {}, 145 meta: {},
146 name: 'Class', 146 name: 'Class',
147 props: (route) => ({ 147 props: (route) => ({
148 type: route.query.type 148 type: route.query.type
149 }), 149 }),
150 component: () => 150 component: () =>
151 import( 151 import(
152 /* webpackChunkName: "routes" */ 152 /* webpackChunkName: "routes" */
153 /* webpackMode: "lazy-once" */ 153 /* webpackMode: "lazy-once" */
154 `@/pages/Class/addclass.vue` 154 `@/pages/Class/addclass.vue`
155 ) 155 )
156 }, 156 },
157 { 157 {
158 path: '/section', 158 path: '/section',
159 meta: {}, 159 meta: {},
160 name: 'Section', 160 name: 'Section',
161 props: (route) => ({ 161 props: (route) => ({
162 type: route.query.type 162 type: route.query.type
163 }), 163 }),
164 component: () => 164 component: () =>
165 import( 165 import(
166 /* webpackChunkName: "routes" */ 166 /* webpackChunkName: "routes" */
167 /* webpackMode: "lazy-once" */ 167 /* webpackMode: "lazy-once" */
168 `@/pages/Section/section.vue` 168 `@/pages/Section/section.vue`
169 ) 169 )
170 }, 170 },
171 { 171 {
172 path: '/noticeBoard', 172 path: '/noticeBoard',
173 meta: {}, 173 meta: {},
174 name: 'Notice Board', 174 name: 'Notice Board',
175 props: (route) => ({ 175 props: (route) => ({
176 type: route.query.type 176 type: route.query.type
177 }), 177 }),
178 component: () => 178 component: () =>
179 import( 179 import(
180 /* webpackChunkName: "routes" */ 180 /* webpackChunkName: "routes" */
181 /* webpackMode: "lazy-once" */ 181 /* webpackMode: "lazy-once" */
182 `@/pages/NoticeBoard/noticeBoard.vue` 182 `@/pages/NoticeBoard/noticeBoard.vue`
183 ) 183 )
184 }, 184 },
185 { 185 {
186 path: '/news', 186 path: '/news',
187 meta: {}, 187 meta: {},
188 name: 'News', 188 name: 'News',
189 props: (route) => ({ 189 props: (route) => ({
190 type: route.query.type 190 type: route.query.type
191 }), 191 }),
192 component: () => 192 component: () =>
193 import( 193 import(
194 /* webpackChunkName: "routes" */ 194 /* webpackChunkName: "routes" */
195 /* webpackMode: "lazy-once" */ 195 /* webpackMode: "lazy-once" */
196 `@/pages/News/news.vue` 196 `@/pages/News/news.vue`
197 ) 197 )
198 }, 198 },
199 // { 199 // {
200 // path: '/reminder', 200 // path: '/reminder',
201 // meta: { }, 201 // meta: { },
202 // name: 'reminder', 202 // name: 'reminder',
203 // props: (route) => ({ type: route.query.type }), 203 // props: (route) => ({ type: route.query.type }),
204 // component: () => import( 204 // component: () => import(
205 // /* webpackChunkName: "routes" */ 205 // /* webpackChunkName: "routes" */
206 // /* webpackMode: "lazy-once" */ 206 // /* webpackMode: "lazy-once" */
207 // `@/pages/Reminder/reminder.vue` 207 // `@/pages/Reminder/reminder.vue`
208 // ) 208 // )
209 // }, 209 // },
210 { 210 {
211 path: '/timeTable', 211 path: '/timeTable',
212 meta: {}, 212 meta: {},
213 name: 'Time Table', 213 name: 'Time Table',
214 props: (route) => ({ 214 props: (route) => ({
215 type: route.query.type 215 type: route.query.type
216 }), 216 }),
217 component: () => 217 component: () =>
218 import( 218 import(
219 /* webpackChunkName: "routes" */ 219 /* webpackChunkName: "routes" */
220 /* webpackMode: "lazy-once" */ 220 /* webpackMode: "lazy-once" */
221 `@/pages/TimeTable/timeTable.vue` 221 `@/pages/TimeTable/timeTable.vue`
222 ) 222 )
223 }, 223 },
224 { 224 {
225 path: '/notification', 225 path: '/notification',
226 meta: {}, 226 meta: {},
227 name: 'Notification', 227 name: 'Notification',
228 props: (route) => ({ 228 props: (route) => ({
229 type: route.query.type 229 type: route.query.type
230 }), 230 }),
231 component: () => 231 component: () =>
232 import( 232 import(
233 /* webpackChunkName: "routes" */ 233 /* webpackChunkName: "routes" */
234 /* webpackMode: "lazy-once" */ 234 /* webpackMode: "lazy-once" */
235 `@/pages/Notification/notification.vue` 235 `@/pages/Notification/notification.vue`
236 ) 236 )
237 }, 237 },
238 { 238 {
239 path: '/parents', 239 path: '/parents',
240 meta: {}, 240 meta: {},
241 name: 'Parents', 241 name: 'Parents',
242 props: (route) => ({ 242 props: (route) => ({
243 type: route.query.type 243 type: route.query.type
244 }), 244 }),
245 component: () => 245 component: () =>
246 import( 246 import(
247 /* webpackChunkName: "routes" */ 247 /* webpackChunkName: "routes" */
248 /* webpackMode: "lazy-once" */ 248 /* webpackMode: "lazy-once" */
249 `@/pages/Parent/parents.vue` 249 `@/pages/Parent/parents.vue`
250 ) 250 )
251 }, 251 },
252 // { 252 // {
253 // path: '/subject', 253 // path: '/subject',
254 // meta: {}, 254 // meta: {},
255 // name: 'Subject', 255 // name: 'Subject',
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/Subjects/subjects.vue` 261 // `@/pages/Subjects/subjects.vue`
262 // ) 262 // )
263 // }, 263 // },
264 { 264 {
265 path: '/dashboard', 265 path: '/dashboard',
266 meta: {}, 266 meta: {},
267 name: 'Dashboard', 267 name: 'Dashboard',
268 props: (route) => ({ 268 props: (route) => ({
269 type: route.query.type 269 type: route.query.type
270 }), 270 }),
271 component: () => 271 component: () =>
272 import( 272 import(
273 /* webpackChunkName: "routes" */ 273 /* webpackChunkName: "routes" */
274 /* webpackMode: "lazy-once" */ 274 /* webpackMode: "lazy-once" */
275 `@/pages/Dashboard/dashboard.vue` 275 `@/pages/Dashboard/dashboard.vue`
276 ) 276 )
277 }, 277 },
278 { 278 {
279 path: '/CourseDetails', 279 path: '/CourseDetails',
280 meta: {}, 280 meta: {},
281 name: 'Course Details', 281 name: 'Course Details',
282 props: (route) => ({ 282 props: (route) => ({
283 type: route.query.type 283 type: route.query.type
284 }), 284 }),
285 component: () => 285 component: () =>
286 import( 286 import(
287 /* webpackChunkName: "routes" */ 287 /* webpackChunkName: "routes" */
288 /* webpackMode: "lazy-once" */ 288 /* webpackMode: "lazy-once" */
289 `@/pages/Dashboard/CourseDetails.vue` 289 `@/pages/Dashboard/CourseDetails.vue`
290 ) 290 )
291 }, 291 },
292 { 292 {
293 path: '/ChapterInfo', 293 path: '/ChapterInfo',
294 meta: {}, 294 meta: {},
295 name: 'Chapter Info', 295 name: 'Chapter Info',
296 props: (route) => ({ 296 props: (route) => ({
297 type: route.query.type 297 type: route.query.type
298 }), 298 }),
299 component: () => 299 component: () =>
300 import( 300 import(
301 /* webpackChunkName: "routes" */ 301 /* webpackChunkName: "routes" */
302 /* webpackMode: "lazy-once" */ 302 /* webpackMode: "lazy-once" */
303 `@/pages/Dashboard/ChapterInfo.vue` 303 `@/pages/Dashboard/ChapterInfo.vue`
304 ) 304 )
305 }, 305 },
306 { 306 {
307 path: '/LiveOnlineClass', 307 path: '/LiveOnlineClass',
308 meta: {}, 308 meta: {},
309 name: 'Live Online Class', 309 name: 'Live Online Class',
310 props: (route) => ({ 310 props: (route) => ({
311 type: route.query.type 311 type: route.query.type
312 }), 312 }),
313 component: () => 313 component: () =>
314 import( 314 import(
315 /* webpackChunkName: "routes" */ 315 /* webpackChunkName: "routes" */
316 /* webpackMode: "lazy-once" */ 316 /* webpackMode: "lazy-once" */
317 `@/pages/Dashboard/LiveOnlineClass.vue` 317 `@/pages/Dashboard/LiveOnlineClass.vue`
318 ) 318 )
319 }, 319 },
320 { 320 {
321 path: '/CourseDiscussionForum', 321 path: '/CourseDiscussionForum',
322 meta: {}, 322 meta: {},
323 name: 'Course Discussion Forum', 323 name: 'Course Discussion Forum',
324 props: (route) => ({ 324 props: (route) => ({
325 type: route.query.type 325 type: route.query.type
326 }), 326 }),
327 component: () => 327 component: () =>
328 import( 328 import(
329 /* webpackChunkName: "routes" */ 329 /* webpackChunkName: "routes" */
330 /* webpackMode: "lazy-once" */ 330 /* webpackMode: "lazy-once" */
331 `@/pages/Dashboard/CourseDiscussionForum.vue` 331 `@/pages/Dashboard/CourseDiscussionForum.vue`
332 ) 332 )
333 }, 333 },
334 { 334 {
335 path: '/courseDiscussion', 335 path: '/courseDiscussion',
336 meta: {}, 336 meta: {},
337 name: 'Course Discussion', 337 name: 'Course Discussion',
338 props: (route) => ({ 338 props: (route) => ({
339 type: route.query.type 339 type: route.query.type
340 }), 340 }),
341 component: () => 341 component: () =>
342 import( 342 import(
343 /* webpackChunkName: "routes" */ 343 /* webpackChunkName: "routes" */
344 /* webpackMode: "lazy-once" */ 344 /* webpackMode: "lazy-once" */
345 `@/pages/Course/courseDiscussion.vue` 345 `@/pages/Course/courseDiscussion.vue`
346 ) 346 )
347 }, 347 },
348 { 348 {
349 path: '/courseDiscussionesForm/:discussionId', 349 path: '/courseDiscussionesForm/:discussionId',
350 meta: {}, 350 meta: {},
351 name: 'Course Discussiones Fourm', 351 name: 'Course Discussiones Fourm',
352 props: (route) => ({ 352 props: (route) => ({
353 type: route.query.type 353 type: route.query.type
354 }), 354 }),
355 component: () => 355 component: () =>
356 import( 356 import(
357 /* webpackChunkName: "routes" */ 357 /* webpackChunkName: "routes" */
358 /* webpackMode: "lazy-once" */ 358 /* webpackMode: "lazy-once" */
359 `@/pages/Course/discussion.vue` 359 `@/pages/Course/discussion.vue`
360 ) 360 )
361 }, 361 },
362 { 362 {
363 path: '/Announcement', 363 path: '/Announcement',
364 meta: {}, 364 meta: {},
365 name: 'Announcement', 365 name: 'Announcement',
366 props: (route) => ({ 366 props: (route) => ({
367 type: route.query.type 367 type: route.query.type
368 }), 368 }),
369 component: () => 369 component: () =>
370 import( 370 import(
371 /* webpackChunkName: "routes" */ 371 /* webpackChunkName: "routes" */
372 /* webpackMode: "lazy-once" */ 372 /* webpackMode: "lazy-once" */
373 `@/pages/Dashboard/Announcement.vue` 373 `@/pages/Dashboard/Announcement.vue`
374 ) 374 )
375 }, 375 },
376 { 376 {
377 path: '/annoucementForum/:annoucementId', 377 path: '/annoucementForum/:annoucementId',
378 meta: {}, 378 meta: {},
379 name: 'Annoucement Forum', 379 name: 'Annoucement Forum',
380 props: (route) => ({ 380 props: (route) => ({
381 type: route.query.type 381 type: route.query.type
382 }), 382 }),
383 component: () => 383 component: () =>
384 import( 384 import(
385 /* webpackChunkName: "routes" */ 385 /* webpackChunkName: "routes" */
386 /* webpackMode: "lazy-once" */ 386 /* webpackMode: "lazy-once" */
387 `@/pages/Annoucement/annoucementForum.vue` 387 `@/pages/Annoucement/annoucementForum.vue`
388 ) 388 )
389 }, 389 },
390 { 390 {
391 path: '/socialMedia', 391 path: '/socialMedia',
392 meta: {}, 392 meta: {},
393 name: 'Social Media', 393 name: 'Social Media',
394 props: (route) => ({ 394 props: (route) => ({
395 type: route.query.type 395 type: route.query.type
396 }), 396 }),
397 component: () => 397 component: () =>
398 import( 398 import(
399 /* webpackChunkName: "routes" */ 399 /* webpackChunkName: "routes" */
400 /* webpackMode: "lazy-once" */ 400 /* webpackMode: "lazy-once" */
401 `@/pages/socialMedia/socialMedia.vue` 401 `@/pages/socialMedia/socialMedia.vue`
402 ) 402 )
403 }, 403 },
404 { 404 {
405 path: '/gallery', 405 path: '/gallery',
406 meta: {}, 406 meta: {},
407 name: 'Gallery', 407 name: 'Gallery',
408 props: (route) => ({ 408 props: (route) => ({
409 type: route.query.type 409 type: route.query.type
410 }), 410 }),
411 component: () => 411 component: () =>
412 import( 412 import(
413 /* webpackChunkName: "routes" */ 413 /* webpackChunkName: "routes" */
414 /* webpackMode: "lazy-once" */ 414 /* webpackMode: "lazy-once" */
415 `@/pages/Gallery/gallery.vue` 415 `@/pages/Gallery/gallery.vue`
416 ) 416 )
417 }, 417 },
418 { 418 {
419 path: '/event', 419 path: '/event',
420 meta: {}, 420 meta: {},
421 name: 'Event', 421 name: 'Event',
422 props: (route) => ({ 422 props: (route) => ({
423 type: route.query.type 423 type: route.query.type
424 }), 424 }),
425 component: () => 425 component: () =>
426 import( 426 import(
427 /* webpackChunkName: "routes" */ 427 /* webpackChunkName: "routes" */
428 /* webpackMode: "lazy-once" */ 428 /* webpackMode: "lazy-once" */
429 `@/pages/Event/event.vue` 429 `@/pages/Event/event.vue`
430 ) 430 )
431 }, 431 },
432 { 432 {
433 path: '/holiday', 433 path: '/holiday',
434 meta: {}, 434 meta: {},
435 name: 'Holiday', 435 name: 'Holiday',
436 props: (route) => ({ 436 props: (route) => ({
437 type: route.query.type 437 type: route.query.type
438 }), 438 }),
439 component: () => 439 component: () =>
440 import( 440 import(
441 /* webpackChunkName: "routes" */ 441 /* webpackChunkName: "routes" */
442 /* webpackMode: "lazy-once" */ 442 /* webpackMode: "lazy-once" */
443 `@/pages/Holiday/holiday.vue` 443 `@/pages/Holiday/holiday.vue`
444 ) 444 )
445 }, 445 },
446 { 446 {
447 path: '/user', 447 path: '/user',
448 meta: {}, 448 meta: {},
449 name: 'User', 449 name: 'User',
450 props: (route) => ({ 450 props: (route) => ({
451 type: route.query.type 451 type: route.query.type
452 }), 452 }),
453 component: () => 453 component: () =>
454 import( 454 import(
455 /* webpackChunkName: "routes" */ 455 /* webpackChunkName: "routes" */
456 /* webpackMode: "lazy-once" */ 456 /* webpackMode: "lazy-once" */
457 `@/pages/User/user.vue` 457 `@/pages/User/user.vue`
458 ) 458 )
459 }, 459 },
460 { 460 {
461 path: '/AttendenceStudent', 461 path: '/AttendenceStudent',
462 meta: {}, 462 meta: {},
463 name: 'Student Attendence', 463 name: 'Student Attendence',
464 props: (route) => ({ 464 props: (route) => ({
465 type: route.query.type 465 type: route.query.type
466 }), 466 }),
467 component: () => 467 component: () =>
468 import( 468 import(
469 /* webpackChunkName: "routes" */ 469 /* webpackChunkName: "routes" */
470 /* webpackMode: "lazy-once" */ 470 /* webpackMode: "lazy-once" */
471 `@/pages/Attendence/studentAttendence.vue` 471 `@/pages/Attendence/studentAttendence.vue`
472 ) 472 )
473 }, 473 },
474 { 474 {
475 path: '/AttendenceTeacher', 475 path: '/AttendenceTeacher',
476 meta: {}, 476 meta: {},
477 name: 'Teacher Attendence', 477 name: 'Teacher Attendence',
478 props: (route) => ({ 478 props: (route) => ({
479 type: route.query.type 479 type: route.query.type
480 }), 480 }),
481 component: () => 481 component: () =>
482 import( 482 import(
483 /* webpackChunkName: "routes" */ 483 /* webpackChunkName: "routes" */
484 /* webpackMode: "lazy-once" */ 484 /* webpackMode: "lazy-once" */
485 `@/pages/Attendence/teacherAttendence.vue` 485 `@/pages/Attendence/teacherAttendence.vue`
486 ) 486 )
487 }, 487 },
488 { 488 {
489 path: '/salaryTemplate', 489 path: '/salaryTemplate',
490 meta: {}, 490 meta: {},
491 name: 'Salary Template', 491 name: 'Salary Template',
492 props: (route) => ({ 492 props: (route) => ({
493 type: route.query.type 493 type: route.query.type
494 }), 494 }),
495 component: () => 495 component: () =>
496 import( 496 import(
497 `@/pages/Payroll/salaryTemplate.vue` 497 `@/pages/Payroll/salaryTemplate.vue`
498 ) 498 )
499 }, 499 },
500 { 500 {
501 path: '/hourlyTemplate', 501 path: '/hourlyTemplate',
502 meta: {}, 502 meta: {},
503 name: 'Hourly Template', 503 name: 'Hourly Template',
504 props: (route) => ({ 504 props: (route) => ({
505 type: route.query.type 505 type: route.query.type
506 }), 506 }),
507 component: () => 507 component: () =>
508 import( 508 import(
509 `@/pages/Payroll/hourlyTemplate.vue` 509 `@/pages/Payroll/hourlyTemplate.vue`
510 ) 510 )
511 }, 511 },
512 { 512 {
513 path: '/manageSalary', 513 path: '/manageSalary',
514 meta: {}, 514 meta: {},
515 name: 'Manage Salary', 515 name: 'Manage Salary',
516 props: (route) => ({ 516 props: (route) => ({
517 type: route.query.type 517 type: route.query.type
518 }), 518 }),
519 component: () => 519 component: () =>
520 import( 520 import(
521 `@/pages/Payroll/manageSalary.vue` 521 `@/pages/Payroll/manageSalary.vue`
522 ) 522 )
523 }, 523 },
524 // { 524 // {
525 // path: '/makePayment', 525 // path: '/makePayment',
526 // meta: {}, 526 // meta: {},
527 // name: 'Make Payment', 527 // name: 'Make Payment',
528 // props: (route) => ({ type: route.query.type }), 528 // props: (route) => ({ type: route.query.type }),
529 // component: () => 529 // component: () =>
530 // import ( 530 // import (
531 // `@/pages/Payroll/makePayment.vue` 531 // `@/pages/Payroll/makePayment.vue`
532 // ) 532 // )
533 // }, 533 // },
534 { 534 {
535 path: '/AttendenceUser', 535 path: '/AttendenceUser',
536 meta: {}, 536 meta: {},
537 name: 'User Attendence', 537 name: 'User Attendence',
538 props: (route) => ({ 538 props: (route) => ({
539 type: route.query.type 539 type: route.query.type
540 }), 540 }),
541 component: () => 541 component: () =>
542 import( 542 import(
543 /* webpackChunkName: "routes" */ 543 /* webpackChunkName: "routes" */
544 /* webpackMode: "lazy-once" */ 544 /* webpackMode: "lazy-once" */
545 `@/pages/Attendence/userAttendence.vue` 545 `@/pages/Attendence/userAttendence.vue`
546 ) 546 )
547 }, 547 },
548 { 548 {
549 path: '/feeTypes', 549 path: '/feeTypes',
550 meta: {}, 550 meta: {},
551 name: 'Fee Types', 551 name: 'Fee Types',
552 props: (route) => ({ 552 props: (route) => ({
553 type: route.query.type 553 type: route.query.type
554 }), 554 }),
555 component: () => 555 component: () =>
556 import( 556 import(
557 /* webpackChunkName: "routes" */ 557 /* webpackChunkName: "routes" */
558 /* webpackMode: "lazy-once" */ 558 /* webpackMode: "lazy-once" */
559 `@/pages/Account/feeTypes.vue` 559 `@/pages/Account/feeTypes.vue`
560 ) 560 )
561 }, 561 },
562 { 562 {
563 path: '/invoice', 563 path: '/invoice',
564 meta: {}, 564 meta: {},
565 name: 'Invoice', 565 name: 'Invoice',
566 props: (route) => ({ 566 props: (route) => ({
567 type: route.query.type 567 type: route.query.type
568 }), 568 }),
569 component: () => 569 component: () =>
570 import( 570 import(
571 /* webpackChunkName: "routes" */ 571 /* webpackChunkName: "routes" */
572 /* webpackMode: "lazy-once" */ 572 /* webpackMode: "lazy-once" */
573 `@/pages/Account/invoice.vue` 573 `@/pages/Account/invoice.vue`
574 ) 574 )
575 }, 575 },
576 { 576 {
577 path: '/paymentHistory', 577 path: '/paymentHistory',
578 meta: {}, 578 meta: {},
579 name: 'Payment History', 579 name: 'Payment History',
580 props: (route) => ({ 580 props: (route) => ({
581 type: route.query.type 581 type: route.query.type
582 }), 582 }),
583 component: () => 583 component: () =>
584 import( 584 import(
585 /* webpackChunkName: "routes" */ 585 /* webpackChunkName: "routes" */
586 /* webpackMode: "lazy-once" */ 586 /* webpackMode: "lazy-once" */
587 `@/pages/Account/paymentHistory.vue` 587 `@/pages/Account/paymentHistory.vue`
588 ) 588 )
589 }, 589 },
590 { 590 {
591 path: '/expense', 591 path: '/expense',
592 meta: {}, 592 meta: {},
593 name: 'Expense', 593 name: 'Expense',
594 props: (route) => ({ 594 props: (route) => ({
595 type: route.query.type 595 type: route.query.type
596 }), 596 }),
597 component: () => 597 component: () =>
598 import( 598 import(
599 /* webpackChunkName: "routes" */ 599 /* webpackChunkName: "routes" */
600 /* webpackMode: "lazy-once" */ 600 /* webpackMode: "lazy-once" */
601 `@/pages/Account/expense.vue` 601 `@/pages/Account/expense.vue`
602 ) 602 )
603 }, 603 },
604 { 604 {
605 path: '/income', 605 path: '/income',
606 meta: {}, 606 meta: {},
607 name: 'Income', 607 name: 'Income',
608 props: (route) => ({ 608 props: (route) => ({
609 type: route.query.type 609 type: route.query.type
610 }), 610 }),
611 component: () => 611 component: () =>
612 import( 612 import(
613 /* webpackChunkName: "routes" */ 613 /* webpackChunkName: "routes" */
614 /* webpackMode: "lazy-once" */ 614 /* webpackMode: "lazy-once" */
615 `@/pages/Account/income.vue` 615 `@/pages/Account/income.vue`
616 ) 616 )
617 }, 617 },
618 { 618 {
619 path: '/libraryMember', 619 path: '/libraryMember',
620 meta: {}, 620 meta: {},
621 name: 'Library Member', 621 name: 'Library Member',
622 props: (route) => ({ 622 props: (route) => ({
623 type: route.query.type 623 type: route.query.type
624 }), 624 }),
625 component: () => 625 component: () =>
626 import( 626 import(
627 /* webpackChunkName: "routes" */ 627 /* webpackChunkName: "routes" */
628 /* webpackMode: "lazy-once" */ 628 /* webpackMode: "lazy-once" */
629 `@/pages/Library/member.vue` 629 `@/pages/Library/member.vue`
630 ) 630 )
631 }, 631 },
632 { 632 {
633 path: '/books', 633 path: '/books',
634 meta: {}, 634 meta: {},
635 name: 'Books', 635 name: 'Books',
636 props: (route) => ({ 636 props: (route) => ({
637 type: route.query.type 637 type: route.query.type
638 }), 638 }),
639 component: () => 639 component: () =>
640 import( 640 import(
641 /* webpackChunkName: "routes" */ 641 /* webpackChunkName: "routes" */
642 /* webpackMode: "lazy-once" */ 642 /* webpackMode: "lazy-once" */
643 `@/pages/Library/books.vue` 643 `@/pages/Library/books.vue`
644 ) 644 )
645 }, 645 },
646 { 646 {
647 path: '/issue', 647 path: '/issue',
648 meta: {}, 648 meta: {},
649 name: 'Issue', 649 name: 'Issue',
650 props: (route) => ({ 650 props: (route) => ({
651 type: route.query.type 651 type: route.query.type
652 }), 652 }),
653 component: () => 653 component: () =>
654 import( 654 import(
655 /* webpackChunkName: "routes" */ 655 /* webpackChunkName: "routes" */
656 /* webpackMode: "lazy-once" */ 656 /* webpackMode: "lazy-once" */
657 `@/pages/Library/issue.vue` 657 `@/pages/Library/issue.vue`
658 ) 658 )
659 }, 659 },
660 { 660 {
661 path: '/e-books', 661 path: '/e-books',
662 meta: {}, 662 meta: {},
663 name: 'E-Books', 663 name: 'E-Books',
664 props: (route) => ({ 664 props: (route) => ({
665 type: route.query.type 665 type: route.query.type
666 }), 666 }),
667 component: () => 667 component: () =>
668 import( 668 import(
669 /* webpackChunkName: "routes" */ 669 /* webpackChunkName: "routes" */
670 /* webpackMode: "lazy-once" */ 670 /* webpackMode: "lazy-once" */
671 `@/pages/Library/eBook.vue` 671 `@/pages/Library/eBook.vue`
672 ) 672 )
673 }, 673 },
674 { 674 {
675 path: '/editInvoice/:invoiceid', 675 path: '/editInvoice/:invoiceid',
676 meta: {}, 676 meta: {},
677 name: 'Edit Invoice', 677 name: 'Edit Invoice',
678 // props: (route) => ({ type: route.query.type }), 678 // props: (route) => ({ type: route.query.type }),
679 component: () => 679 component: () =>
680 import( 680 import(
681 /* webpackChunkName: "routes" */ 681 /* webpackChunkName: "routes" */
682 /* webpackMode: "lazy-once" */ 682 /* webpackMode: "lazy-once" */
683 `@/pages/Account/editInvoice.vue` 683 `@/pages/Account/editInvoice.vue`
684 ) 684 )
685 }, 685 },
686 { 686 {
687 path: '/StudentsAttendence/:id', 687 path: '/StudentsAttendence/:id',
688 meta: {}, 688 meta: {},
689 name: 'View Students Attendence', 689 name: 'View Students Attendence',
690 props: (route) => ({ 690 props: (route) => ({
691 type: route.query.type 691 type: route.query.type
692 }), 692 }),
693 component: () => 693 component: () =>
694 import( 694 import(
695 /* webpackChunkName: "routes" */ 695 /* webpackChunkName: "routes" */
696 /* webpackMode: "lazy-once" */ 696 /* webpackMode: "lazy-once" */
697 `@/pages/Attendence/viewStudentsAttendence.vue` 697 `@/pages/Attendence/viewStudentsAttendence.vue`
698 ) 698 )
699 }, 699 },
700 { 700 {
701 path: '/TeacherAttendence/:teacherId', 701 path: '/TeacherAttendence/:teacherId',
702 meta: {}, 702 meta: {},
703 name: 'View Teacher Attendence', 703 name: 'View Teacher Attendence',
704 props: (route) => ({ 704 props: (route) => ({
705 type: route.query.type 705 type: route.query.type
706 }), 706 }),
707 component: () => 707 component: () =>
708 import( 708 import(
709 /* webpackChunkName: "routes" */ 709 /* webpackChunkName: "routes" */
710 /* webpackMode: "lazy-once" */ 710 /* webpackMode: "lazy-once" */
711 `@/pages/Attendence/viewTeacherAttendence.vue` 711 `@/pages/Attendence/viewTeacherAttendence.vue`
712 ) 712 )
713 }, 713 },
714 { 714 {
715 path: '/viewInvoice/:viewInvoiceId', 715 path: '/viewInvoice/:viewInvoiceId',
716 meta: {}, 716 meta: {},
717 name: 'View Invoice', 717 name: 'View Invoice',
718 props: (route) => ({ 718 props: (route) => ({
719 type: route.query.type 719 type: route.query.type
720 }), 720 }),
721 component: () => 721 component: () =>
722 import( 722 import(
723 /* webpackChunkName: "routes" */ 723 /* webpackChunkName: "routes" */
724 /* webpackMode: "lazy-once" */ 724 /* webpackMode: "lazy-once" */
725 `@/pages/Account/viewInvoice.vue` 725 `@/pages/Account/viewInvoice.vue`
726 ) 726 )
727 }, 727 },
728 { 728 {
729 path: '/viewPaymentInvoice/:viewPaymentInvoiceId', 729 path: '/viewPaymentInvoice/:viewPaymentInvoiceId',
730 meta: {}, 730 meta: {},
731 name: 'View Payment Invoice', 731 name: 'View Payment Invoice',
732 props: (route) => ({ 732 props: (route) => ({
733 type: route.query.type 733 type: route.query.type
734 }), 734 }),
735 component: () => 735 component: () =>
736 import( 736 import(
737 /* webpackChunkName: "routes" */ 737 /* webpackChunkName: "routes" */
738 /* webpackMode: "lazy-once" */ 738 /* webpackMode: "lazy-once" */
739 `@/pages/Account/viewPaymentInvoice.vue` 739 `@/pages/Account/viewPaymentInvoice.vue`
740 ) 740 )
741 }, 741 },
742 { 742 {
743 path: '/globalPayment', 743 path: '/globalPayment',
744 meta: {}, 744 meta: {},
745 name: 'Global Payment', 745 name: 'Global Payment',
746 props: (route) => ({ 746 props: (route) => ({
747 type: route.query.type 747 type: route.query.type
748 }), 748 }),
749 component: () => 749 component: () =>
750 import( 750 import(
751 /* webpackChunkName: "routes" */ 751 /* webpackChunkName: "routes" */
752 /* webpackMode: "lazy-once" */ 752 /* webpackMode: "lazy-once" */
753 `@/pages/Account/globalPayment.vue` 753 `@/pages/Account/globalPayment.vue`
754 ) 754 )
755 }, 755 },
756 { 756 {
757 path: '/exam', 757 path: '/exam',
758 meta: {}, 758 meta: {},
759 name: 'Exam', 759 name: 'Exam',
760 props: (route) => ({ 760 props: (route) => ({
761 type: route.query.type 761 type: route.query.type
762 }), 762 }),
763 component: () => 763 component: () =>
764 import( 764 import(
765 /* webpackChunkName: "routes" */ 765 /* webpackChunkName: "routes" */
766 /* webpackMode: "lazy-once" */ 766 /* webpackMode: "lazy-once" */
767 `@/pages/Exam/exam.vue` 767 `@/pages/Exam/exam.vue`
768 ) 768 )
769 }, 769 },
770 { 770 {
771 path: '/grade', 771 path: '/grade',
772 meta: {}, 772 meta: {},
773 name: 'Grade', 773 name: 'Grade',
774 props: (route) => ({ 774 props: (route) => ({
775 type: route.query.type 775 type: route.query.type
776 }), 776 }),
777 component: () => 777 component: () =>
778 import( 778 import(
779 /* webpackChunkName: "routes" */ 779 /* webpackChunkName: "routes" */
780 /* webpackMode: "lazy-once" */ 780 /* webpackMode: "lazy-once" */
781 `@/pages/Exam/grade.vue` 781 `@/pages/Exam/grade.vue`
782 ) 782 )
783 }, 783 },
784 { 784 {
785 path: '/examSchedule', 785 path: '/examSchedule',
786 meta: {}, 786 meta: {},
787 name: 'Exam Schedule', 787 name: 'Exam Schedule',
788 props: (route) => ({ 788 props: (route) => ({
789 type: route.query.type 789 type: route.query.type
790 }), 790 }),
791 component: () => 791 component: () =>
792 import( 792 import(
793 /* webpackChunkName: "routes" */ 793 /* webpackChunkName: "routes" */
794 /* webpackMode: "lazy-once" */ 794 /* webpackMode: "lazy-once" */
795 `@/pages/Exam/examSchedule.vue` 795 `@/pages/Exam/examSchedule.vue`
796 ) 796 )
797 }, 797 },
798 { 798 {
799 path: '/examAttendence', 799 path: '/examAttendence',
800 meta: {}, 800 meta: {},
801 name: 'Exam Attendence', 801 name: 'Exam Attendence',
802 props: (route) => ({ 802 props: (route) => ({
803 type: route.query.type 803 type: route.query.type
804 }), 804 }),
805 component: () => 805 component: () =>
806 import( 806 import(
807 /* webpackChunkName: "routes" */ 807 /* webpackChunkName: "routes" */
808 /* webpackMode: "lazy-once" */ 808 /* webpackMode: "lazy-once" */
809 `@/pages/Exam/examAttendence.vue` 809 `@/pages/Exam/examAttendence.vue`
810 ) 810 )
811 }, 811 },
812 { 812 {
813 path: '/mark', 813 path: '/mark',
814 meta: {}, 814 meta: {},
815 name: 'Mark', 815 name: 'Mark',
816 props: (route) => ({ 816 props: (route) => ({
817 type: route.query.type 817 type: route.query.type
818 }), 818 }),
819 component: () => 819 component: () =>
820 import( 820 import(
821 /* webpackChunkName: "routes" */ 821 /* webpackChunkName: "routes" */
822 /* webpackMode: "lazy-once" */ 822 /* webpackMode: "lazy-once" */
823 `@/pages/Mark/mark.vue` 823 `@/pages/Mark/mark.vue`
824 ) 824 )
825 }, 825 },
826 { 826 {
827 path: '/viewMark/:markId', 827 path: '/viewMark/:markId',
828 meta: {}, 828 meta: {},
829 name: 'view Mark', 829 name: 'view Mark',
830 props: (route) => ({ 830 props: (route) => ({
831 type: route.query.type 831 type: route.query.type
832 }), 832 }),
833 component: () => 833 component: () =>
834 import( 834 import(
835 /* webpackChunkName: "routes" */ 835 /* webpackChunkName: "routes" */
836 /* webpackMode: "lazy-once" */ 836 /* webpackMode: "lazy-once" */
837 `@/pages/Mark/viewMark.vue` 837 `@/pages/Mark/viewMark.vue`
838 ) 838 )
839 }, 839 },
840 { 840 {
841 path: '/markDistribution', 841 path: '/markDistribution',
842 meta: {}, 842 meta: {},
843 name: 'Mark Distribution', 843 name: 'Mark Distribution',
844 props: (route) => ({ 844 props: (route) => ({
845 type: route.query.type 845 type: route.query.type
846 }), 846 }),
847 component: () => 847 component: () =>
848 import( 848 import(
849 /* webpackChunkName: "routes" */ 849 /* webpackChunkName: "routes" */
850 /* webpackMode: "lazy-once" */ 850 /* webpackMode: "lazy-once" */
851 `@/pages/Mark/markDistribution.vue` 851 `@/pages/Mark/markDistribution.vue`
852 ) 852 )
853 }, 853 },
854 // { 854 // {
855 // path: '/meet', 855 // path: '/meet',
856 // meta: {}, 856 // meta: {},
857 // name: 'Meet', 857 // name: 'Meet',
858 // props: (route) => ({ 858 // props: (route) => ({
859 // type: route.query.type 859 // type: route.query.type
860 // }), 860 // }),
861 // component: () => 861 // component: () =>
862 // import( 862 // import(
863 // /* webpackChunkName: "routes" */ 863 // /* webpackChunkName: "routes" */
864 // /* webpackMode: "lazy-once" */ 864 // /* webpackMode: "lazy-once" */
865 // `@/pages/Meet/meet.vue` 865 // `@/pages/Meet/meet.vue`
866 // ) 866 // )
867 // }, 867 // },
868 { 868 {
869 path: '/academicYear', 869 path: '/academicYear',
870 meta: {}, 870 meta: {},
871 name: 'Academic Year', 871 name: 'Academic Year',
872 props: (route) => ({ 872 props: (route) => ({
873 type: route.query.type 873 type: route.query.type
874 }), 874 }),
875 component: () => 875 component: () =>
876 import( 876 import(
877 /* webpackChunkName: "routes" */ 877 /* webpackChunkName: "routes" */
878 /* webpackMode: "lazy-once" */ 878 /* webpackMode: "lazy-once" */
879 `@/pages/Administrator/academicYear.vue` 879 `@/pages/Administrator/academicYear.vue`
880 ) 880 )
881 }, 881 },
882 { 882 {
883 path: '/systemAdmin', 883 path: '/systemAdmin',
884 meta: {}, 884 meta: {},
885 name: 'System Admin', 885 name: 'System Admin',
886 props: (route) => ({ 886 props: (route) => ({
887 type: route.query.type 887 type: route.query.type
888 }), 888 }),
889 component: () => 889 component: () =>
890 import( 890 import(
891 /* webpackChunkName: "routes" */ 891 /* webpackChunkName: "routes" */
892 /* webpackMode: "lazy-once" */ 892 /* webpackMode: "lazy-once" */
893 `@/pages/Administrator/systemAdmin.vue` 893 `@/pages/Administrator/systemAdmin.vue`
894 ) 894 )
895 }, 895 },
896 { 896 {
897 path: '/resetPassword', 897 path: '/resetPassword',
898 meta: {}, 898 meta: {},
899 name: 'Change Password', 899 name: 'Change Password',
900 props: (route) => ({ 900 props: (route) => ({
901 type: route.query.type 901 type: route.query.type
902 }), 902 }),
903 component: () => 903 component: () =>
904 import( 904 import(
905 /* webpackChunkName: "routes" */ 905 /* webpackChunkName: "routes" */
906 /* webpackMode: "lazy-once" */ 906 /* webpackMode: "lazy-once" */
907 `@/pages/Administrator/resetPassword.vue` 907 `@/pages/Administrator/resetPassword.vue`
908 ) 908 )
909 }, 909 },
910 { 910 {
911 path: '/role', 911 path: '/role',
912 meta: {}, 912 meta: {},
913 name: 'Role', 913 name: 'Role',
914 props: (route) => ({ 914 props: (route) => ({
915 type: route.query.type 915 type: route.query.type
916 }), 916 }),
917 component: () => 917 component: () =>
918 import( 918 import(
919 /* webpackChunkName: "routes" */ 919 /* webpackChunkName: "routes" */
920 /* webpackMode: "lazy-once" */ 920 /* webpackMode: "lazy-once" */
921 `@/pages/Administrator/role.vue` 921 `@/pages/Administrator/role.vue`
922 ) 922 )
923 }, 923 },
924 { 924 {
925 path: '/bulkImport', 925 path: '/bulkImport',
926 meta: {}, 926 meta: {},
927 name: 'Bulk Import', 927 name: 'Bulk Import',
928 props: (route) => ({ 928 props: (route) => ({
929 type: route.query.type 929 type: route.query.type
930 }), 930 }),
931 component: () => 931 component: () =>
932 import( 932 import(
933 /* webpackChunkName: "routes" */ 933 /* webpackChunkName: "routes" */
934 /* webpackMode: "lazy-once" */ 934 /* webpackMode: "lazy-once" */
935 `@/pages/Administrator/bulkImport.vue` 935 `@/pages/Administrator/bulkImport.vue`
936 ) 936 )
937 }, 937 },
938 { 938 {
939 path: '/studentReport', 939 path: '/studentReport',
940 meta: {}, 940 meta: {},
941 name: 'Student Report', 941 name: 'Student Report',
942 props: (route) => ({ 942 props: (route) => ({
943 type: route.query.type 943 type: route.query.type
944 }), 944 }),
945 component: () => 945 component: () =>
946 import( 946 import(
947 /* webpackChunkName: "routes" */ 947 /* webpackChunkName: "routes" */
948 /* webpackMode: "lazy-once" */ 948 /* webpackMode: "lazy-once" */
949 `@/pages/Report/studentReport.vue` 949 `@/pages/Report/studentReport.vue`
950 ) 950 )
951 }, 951 },
952 { 952 {
953 path: '/progressCardReport', 953 path: '/progressCardReport',
954 meta: {}, 954 meta: {},
955 name: 'Progress Card Report', 955 name: 'Progress Card Report',
956 props: (route) => ({ 956 props: (route) => ({
957 type: route.query.type 957 type: route.query.type
958 }), 958 }),
959 component: () => 959 component: () =>
960 import( 960 import(
961 /* webpackChunkName: "routes" */ 961 /* webpackChunkName: "routes" */
962 /* webpackMode: "lazy-once" */ 962 /* webpackMode: "lazy-once" */
963 `@/pages/Report/progressCardReport.vue` 963 `@/pages/Report/progressCardReport.vue`
964 ) 964 )
965 }, 965 },
966 { 966 {
967 path: '/idCard', 967 path: '/idCard',
968 meta: {}, 968 meta: {},
969 name: 'Id Card Report', 969 name: 'Id Card Report',
970 props: (route) => ({ 970 props: (route) => ({
971 type: route.query.type 971 type: route.query.type
972 }), 972 }),
973 component: () => 973 component: () =>
974 import( 974 import(
975 `@/pages/Report/idCard.vue` 975 `@/pages/Report/idCard.vue`
976 ) 976 )
977 }, 977 },
978 { 978 {
979 path: '/admitCard', 979 path: '/admitCard',
980 meta: {}, 980 meta: {},
981 name: 'Admit Card Report', 981 name: 'Admit Card Report',
982 props: (route) => ({ 982 props: (route) => ({
983 type: route.query.type 983 type: route.query.type
984 }), 984 }),
985 component: () => 985 component: () =>
986 import( 986 import(
987 `@/pages/Report/admitCard.vue` 987 `@/pages/Report/admitCard.vue`
988 ) 988 )
989 }, 989 },
990 { 990 {
991 path: '/generalSetting', 991 path: '/generalSetting',
992 meta: {}, 992 meta: {},
993 name: 'General Setting', 993 name: 'General Setting',
994 props: (route) => ({ 994 props: (route) => ({
995 type: route.query.type 995 type: route.query.type
996 }), 996 }),
997 component: () => 997 component: () =>
998 import( 998 import(
999 /* webpackChunkName: "routes" */ 999 /* webpackChunkName: "routes" */
1000 /* webpackMode: "lazy-once" */ 1000 /* webpackMode: "lazy-once" */
1001 `@/pages/generalSetting/generalSetting.vue` 1001 `@/pages/generalSetting/generalSetting.vue`
1002 ) 1002 )
1003 }, 1003 },
1004 { 1004 {
1005 path: '/assignment', 1005 path: '/assignment',
1006 meta: {}, 1006 meta: {},
1007 name: 'Assignment', 1007 name: 'Assignment',
1008 props: (route) => ({ 1008 props: (route) => ({
1009 type: route.query.type 1009 type: route.query.type
1010 }), 1010 }),
1011 component: () => 1011 component: () =>
1012 import( 1012 import(
1013 `@/pages/Academic/assignment.vue` 1013 `@/pages/Academic/assignment.vue`
1014 ) 1014 )
1015 }, 1015 },
1016 { 1016 {
1017 path: '/routine', 1017 path: '/routine',
1018 meta: {}, 1018 meta: {},
1019 name: 'Routine', 1019 name: 'Routine',
1020 props: (route) => ({ 1020 props: (route) => ({
1021 type: route.query.type 1021 type: route.query.type
1022 }), 1022 }),
1023 component: () => 1023 component: () =>
1024 import( 1024 import(
1025 `@/pages/Academic/routine.vue` 1025 `@/pages/Academic/routine.vue`
1026 ) 1026 )
1027 }, 1027 },
1028 { 1028 {
1029 path: '/subject', 1029 path: '/subject',
1030 meta: {}, 1030 meta: {},
1031 name: 'Subject', 1031 name: 'Subject',
1032 props: (route) => ({ 1032 props: (route) => ({
1033 type: route.query.type 1033 type: route.query.type
1034 }), 1034 }),
1035 component: () => 1035 component: () =>
1036 import( 1036 import(
1037 `@/pages/Academic/subject.vue` 1037 `@/pages/Academic/subject.vue`
1038 ) 1038 )
1039 }, 1039 },
1040 { 1040 {
1041 path: '/syllabus', 1041 path: '/syllabus',
1042 meta: {}, 1042 meta: {},
1043 name: 'Syllabus', 1043 name: 'Syllabus',
1044 props: (route) => ({ 1044 props: (route) => ({
1045 type: route.query.type 1045 type: route.query.type
1046 }), 1046 }),
1047 component: () => 1047 component: () =>
1048 import( 1048 import(
1049 `@/pages/Academic/syllabus.vue` 1049 `@/pages/Academic/syllabus.vue`
1050 ) 1050 )
1051 }, 1051 },
1052 { 1052 {
1053 path: '/course', 1053 path: '/course',
1054 meta: {}, 1054 meta: {},
1055 name: 'Course', 1055 name: 'Course',
1056 props: (route) => ({ 1056 props: (route) => ({
1057 type: route.query.type 1057 type: route.query.type
1058 }), 1058 }),
1059 component: () => 1059 component: () =>
1060 import( 1060 import(
1061 /* webpackChunkName: "routes" */ 1061 /* webpackChunkName: "routes" */
1062 /* webpackMode: "lazy-once" */ 1062 /* webpackMode: "lazy-once" */
1063 `@/pages/Course/course.vue` 1063 `@/pages/Course/course.vue`
1064 ) 1064 )
1065 }, 1065 },
1066 { 1066 {
1067 path: '/courseDetail', 1067 path: '/courseDetail',
1068 meta: {}, 1068 meta: {},
1069 name: 'Course Detail', 1069 name: 'Course Detail',
1070 props: (route) => ({ 1070 props: (route) => ({
1071 type: route.query.type 1071 type: route.query.type
1072 }), 1072 }),
1073 component: () => 1073 component: () =>
1074 import( 1074 import(
1075 /* webpackChunkName: "routes" */ 1075 /* webpackChunkName: "routes" */
1076 /* webpackMode: "lazy-once" */ 1076 /* webpackMode: "lazy-once" */
1077 `@/pages/Course/courseDetail.vue` 1077 `@/pages/Course/courseDetail.vue`
1078 ) 1078 )
1079 }, 1079 },
1080 { 1080 {
1081 path: '/enrollStudents', 1081 path: '/enrollStudents',
1082 meta: {}, 1082 meta: {},
1083 name: 'Enroll Students', 1083 name: 'Enroll Students',
1084 props: (route) => ({ 1084 props: (route) => ({
1085 type: route.query.type 1085 type: route.query.type
1086 }), 1086 }),
1087 component: () => 1087 component: () =>
1088 import( 1088 import(
1089 /* webpackChunkName: "routes" */ 1089 /* webpackChunkName: "routes" */
1090 /* webpackMode: "lazy-once" */ 1090 /* webpackMode: "lazy-once" */
1091 `@/pages/Course/enrollStudents.vue` 1091 `@/pages/Course/enrollStudents.vue`
1092 ) 1092 )
1093 }, 1093 },
1094 { 1094 {
1095 path: '/changeStudents', 1095 path: '/changeStudents',
1096 meta: {}, 1096 meta: {},
1097 name: 'Change Students', 1097 name: 'Change Students',
1098 props: (route) => ({ 1098 props: (route) => ({
1099 type: route.query.type 1099 type: route.query.type
1100 }), 1100 }),
1101 component: () => 1101 component: () =>
1102 import( 1102 import(
1103 /* webpackChunkName: "routes" */ 1103 /* webpackChunkName: "routes" */
1104 /* webpackMode: "lazy-once" */ 1104 /* webpackMode: "lazy-once" */
1105 `@/pages/changeStudents/changeStudents.vue` 1105 `@/pages/changeStudents/changeStudents.vue`
1106 ) 1106 )
1107 }, 1107 },
1108 { 1108 {
1109 path: '/annoucement', 1109 path: '/annoucement',
1110 meta: {}, 1110 meta: {},
1111 name: 'Annoucement', 1111 name: 'Annoucement',
1112 props: (route) => ({ 1112 props: (route) => ({
1113 type: route.query.type 1113 type: route.query.type
1114 }), 1114 }),
1115 component: () => 1115 component: () =>
1116 import( 1116 import(
1117 /* webpackChunkName: "routes" */ 1117 /* webpackChunkName: "routes" */
1118 /* webpackMode: "lazy-once" */ 1118 /* webpackMode: "lazy-once" */
1119 `@/pages/Annoucement/annoucement.vue` 1119 `@/pages/Annoucement/annoucement.vue`
1120 ) 1120 )
1121 }, 1121 },
1122 { 1122 {
1123 path: '/meetingEvent', 1123 path: '/meetingEvent',
1124 meta: {}, 1124 meta: {},
1125 name: 'Meeting Event', 1125 name: 'Meeting Event',
1126 props: (route) => ({ 1126 props: (route) => ({
1127 type: route.query.type 1127 type: route.query.type
1128 }), 1128 }),
1129 component: () => 1129 component: () =>
1130 import( 1130 import(
1131 /* webpackChunkName: "routes" */ 1131 /* webpackChunkName: "routes" */
1132 /* webpackMode: "lazy-once" */ 1132 /* webpackMode: "lazy-once" */
1133 `@/pages/meetingEvent/meetingEvent.vue` 1133 `@/pages/meetingEvent/meetingEvent.vue`
1134 ) 1134 )
1135 }, 1135 },
1136 //////SCHOOL 1136 //////SCHOOL
1137 1137
1138 { 1138 {
1139 path: '/school', 1139 path: '/school',
1140 meta: {}, 1140 meta: {},
1141 name: 'School', 1141 name: 'School',
1142 props: (route) => ({ 1142 props: (route) => ({
1143 type: route.query.type 1143 type: route.query.type
1144 }), 1144 }),
1145 component: () => 1145 component: () =>
1146 import( 1146 import(
1147 /* webpackChunkName: "routes" */ 1147 /* webpackChunkName: "routes" */
1148 /* webpackMode: "lazy-once" */ 1148 /* webpackMode: "lazy-once" */
1149 `@/pages/School/school.vue` 1149 `@/pages/School/school.vue`
1150 ) 1150 )
1151 }, 1151 },
1152 { 1152 {
1153 path: '/appVersion', 1153 path: '/appVersion',
1154 meta: {}, 1154 meta: {},
1155 name: 'App Version', 1155 name: 'App Version',
1156 props: (route) => ({ 1156 props: (route) => ({
1157 type: route.query.type 1157 type: route.query.type
1158 }), 1158 }),
1159 component: () => 1159 component: () =>
1160 import( 1160 import(
1161 /* webpackChunkName: "routes" */ 1161 /* webpackChunkName: "routes" */
1162 /* webpackMode: "lazy-once" */ 1162 /* webpackMode: "lazy-once" */
1163 `@/pages/School/appVersion.vue` 1163 `@/pages/School/appVersion.vue`
1164 ) 1164 )
1165 }, 1165 },
1166 { 1166 {
1167 path: '/schooldashboard', 1167 path: '/schooldashboard',
1168 meta: {}, 1168 meta: {},
1169 name: 'View School Dashboard', 1169 name: 'View School Dashboard',
1170 props: (route) => ({ 1170 props: (route) => ({
1171 type: route.query.type 1171 type: route.query.type
1172 }), 1172 }),
1173 component: () => 1173 component: () =>
1174 import( 1174 import(
1175 /* webpackChunkName: "routes" */ 1175 /* webpackChunkName: "routes" */
1176 /* webpackMode: "lazy-once" */ 1176 /* webpackMode: "lazy-once" */
1177 `@/pages/School/viewSchoolDashboard.vue` 1177 `@/pages/School/viewSchoolDashboard.vue`
1178 ) 1178 )
1179 } 1179 }
1180 ]; 1180 ];
static/css/custom.css
Diff comments   View file @8b7976c
1 .custom-input-align .v-label { 1 .custom-input-align .v-label {
2 text-align: center !important; 2 text-align: center !important;
3 width: 100% !important; 3 width: 100% !important;
4 } 4 }
5 5
6 .custom-input-align input { 6 .custom-input-align input {
7 text-align: center !important; 7 text-align: center !important;
8 } 8 }
9 9
10 .fixcolor { 10 .fixcolor {
11 background: linear-gradient(90deg, #f58753 30%, #f15e5f 110%) 11 background: linear-gradient(90deg, #f58753 30%, #f15e5f 110%)
12 } 12 }
13 13
14 .fixcolors { 14 .fixcolors {
15 background: #444B54 !important; 15 background: #444B54 !important;
16 } 16 }
17 17
18 .fc-toolbar .fc-state-active, 18 .fc-toolbar .fc-state-active,
19 .fc-toolbar .ui-state-active { 19 .fc-toolbar .ui-state-active {
20 z-index: 0 !important; 20 z-index: 0 !important;
21 } 21 }
22 22
23 .loader { 23 .loader {
24 width: 100%; 24 width: 100%;
25 height: 100%; 25 height: 100%;
26 position: fixed; 26 position: fixed;
27 top: 0; 27 top: 0;
28 left: 0; 28 left: 0;
29 text-align: center; 29 text-align: center;
30 background-color: rgba(0, 0, 0, 0.5); 30 background-color: rgba(0, 0, 0, 0.5);
31 z-index: 999; 31 z-index: 999;
32 } 32 }
33 33
34 .profile-image-wrapper { 34 .profile-image-wrapper {
35 position: relative; 35 position: relative;
36 } 36 }
37 37
38 .edit-profile-icon { 38 .edit-profile-icon {
39 position: absolute; 39 position: absolute;
40 right: 15px; 40 right: 15px;
41 top: 15px; 41 top: 15px;
42 cursor: pointer; 42 cursor: pointer;
43 } 43 }
44 44
45 .profile-image-wrapper>.edit-profile-icon { 45 .profile-image-wrapper>.edit-profile-icon {
46 right: 10%; 46 right: 10%;
47 top: 0%; 47 top: 0%;
48 margin-top: 8px; 48 margin-top: 8px;
49 border-radius: 50%; 49 border-radius: 50%;
50 padding: 7px; 50 padding: 7px;
51 font-size: 20px; 51 font-size: 20px;
52 } 52 }
53 53
54 .loader>div { 54 .loader>div {
55 position: relative; 55 position: relative;
56 top: calc(50% - 16px); 56 top: calc(50% - 16px);
57 } 57 }
58 58
59 .v-tabs__div { 59 .v-tabs__div {
60 text-transform: none !important; 60 text-transform: none !important;
61 } 61 }
62 62
63 .v-input__prepend-outer { 63 .v-input__prepend-outer {
64 margin-right: 0px !important; 64 margin-right: 0px !important;
65 } 65 }
66 66
67 .v-card__actions .v-btn { 67 .v-card__actions .v-btn {
68 margin: 0 15px !important; 68 margin: 0 15px !important;
69 min-width: 96px !important; 69 min-width: 96px !important;
70 } 70 }
71 71
72 .paymentStatus { 72 .paymentStatus {
73 border-radius: 4px; 73 border-radius: 4px;
74 } 74 }
75 75
76 .linkCover { 76 .linkCover {
77 overflow: auto !important; 77 overflow: auto !important;
78 } 78 }
79 79
80 .primary { 80 .primary {
81 background-color: #aaa !important; 81 background-color: #aaa !important;
82 border-color: #aaa !important; 82 border-color: #aaa !important;
83 } 83 }
84 84
85 h4 { 85 h4 {
86 background-repeat: no-repeat; 86 background-repeat: no-repeat;
87 padding: 8px; 87 padding: 8px;
88 margin: auto; 88 margin: auto;
89 font-size: 25px; 89 font-size: 25px;
90 } 90 }
91 91
92 #name { 92 #name {
93 position: absolute; 93 position: absolute;
94 left: 100px; 94 left: 100px;
95 top: 17px; 95 top: 17px;
96 } 96 }
97 97
98 #icon { 98 #icon {
99 position: absolute; 99 position: absolute;
100 right: 8px; 100 right: 8px;
101 top: 8px; 101 top: 8px;
102 } 102 }
103 103
104 #m { 104 #m {
105 position: relative; 105 position: relative;
106 left: 135px; 106 left: 135px;
107 top: -15px; 107 top: -15px;
108 } 108 }
109 109
110 #G { 110 #G {
111 position: absolute; 111 position: absolute;
112 top: 38px; 112 top: 38px;
113 color: white; 113 color: white;
114 } 114 }
115 115
116 #bt { 116 #bt {
117 position: relative; 117 position: relative;
118 top: -20px; 118 top: -20px;
119 left: 115px; 119 left: 115px;
120 } 120 }
121 121
122 #e { 122 #e {
123 position: relative; 123 position: relative;
124 top: 5px; 124 top: 5px;
125 right: -30px; 125 right: -30px;
126 height: 17px; 126 height: 17px;
127 cursor: pointer; 127 cursor: pointer;
128 } 128 }
129 129
130 #d { 130 #d {
131 position: relative; 131 position: relative;
132 top: 5px; 132 top: 5px;
133 right: -70px; 133 right: -70px;
134 height: 17px; 134 height: 17px;
135 cursor: pointer; 135 cursor: pointer;
136 } 136 }
137 137
138 #indexId { 138 #indexId {
139 padding: 0 0px !important; 139 padding: 0 0px !important;
140 } 140 }
141 141
142 #td { 142 #td {
143 border: 1px solid #dddddd; 143 border: 1px solid #dddddd;
144 text-align: left; 144 text-align: left;
145 padding: 8px; 145 padding: 8px;
146 } 146 }
147 147
148 148
149 /* .apexcharts-canvas { 149 /* .apexcharts-canvas {
150 width: 100% !important; 150 width: 100% !important;
151 } 151 }
152 .apexcharts-canvas > svg{ 152 .apexcharts-canvas > svg{
153 width: 100% !important; 153 width: 100% !important;
154 } 154 }
155 .apexcharts-canvas > svg > apexcharts-inner > apexcharts-graphical { 155 .apexcharts-canvas > svg > apexcharts-inner > apexcharts-graphical {
156 transform: translate(0); 156 transform: translate(0);
157 } */ 157 } */
158 158
159 #dialog { 159 #dialog {
160 height: 550px; 160 height: 550px;
161 } 161 }
162 162
163 #flex { 163 #flex {
164 height: 300px; 164 height: 300px;
165 } 165 }
166 166
167 .top { 167 .top {
168 margin-top: 100px; 168 margin-top: 100px;
169 } 169 }
170 170
171 .v-tabs__item a { 171 .v-tabs__item a {
172 font-size: 16px !important; 172 font-size: 16px !important;
173 } 173 }
174 174
175 .iconSize { 175 .iconSize {
176 font-size: 22px !important; 176 font-size: 22px !important;
177 } 177 }
178 178
179 .mr5 { 179 .mr5 {
180 margin-right: 48px !important; 180 margin-right: 48px !important;
181 } 181 }
182 182
183 .addressForm { 183 .addressForm {
184 max-width: 17%; 184 max-width: 17%;
185 } 185 }
186 186
187 .noticeDecritpion { 187 .noticeDecritpion {
188 white-space: nowrap; 188 white-space: nowrap;
189 width: 250px; 189 width: 250px;
190 overflow: hidden; 190 overflow: hidden;
191 text-overflow: ellipsis; 191 text-overflow: ellipsis;
192 display: block; 192 display: block;
193 } 193 }
194 194
195 .header-icon { 195 .header-icon {
196 color: #5f2171 !important; 196 color: #5f2171 !important;
197 } 197 }
198 198
199 .pink-bgcolor { 199 .pink-bgcolor {
200 background: #ff8a89 !important 200 background: #ff8a89 !important
201 } 201 }
202 202
203 .firozi-bgcolor { 203 .firozi-bgcolor {
204 background: #71d9ea !important 204 background: #71d9ea !important
205 } 205 }
206 206
207 .darkBlue-bgcolor { 207 .darkBlue-bgcolor {
208 background: #7852cc !important 208 background: #7852cc !important
209 } 209 }
210 210
211 .darkBlue-color { 211 .darkBlue-color {
212 color: #7852cc !important 212 color: #7852cc !important
213 } 213 }
214 214
215 .yellowDark-color { 215 .yellowDark-color {
216 color: #f9a825 !important; 216 color: #f9a825 !important;
217 } 217 }
218 218
219 .account-Card { 219 .account-Card {
220 border: 2px solid #71d9ea !important 220 border: 2px solid #71d9ea !important
221 } 221 }
222 222
223 .pink-color { 223 .pink-color {
224 color: #ff8a89 !important 224 color: #ff8a89 !important
225 } 225 }
226 226
227 .account-circle { 227 .account-circle {
228 font-size: 27px !important; 228 font-size: 27px !important;
229 font-weight: 900 !important 229 font-weight: 900 !important
230 } 230 }
231 231
232 .font-color { 232 .font-color {
233 color: #9ba0c0 !important 233 color: #9ba0c0 !important
234 } 234 }
235 235
236 .profileDasboard { 236 .profileDasboard {
237 background: #f6f9ff !important; 237 background: #f6f9ff !important;
238 border-top-left-radius: 78px; 238 border-top-left-radius: 78px;
239 } 239 }
240 240
241 a { 241 a {
242 text-decoration: none !important; 242 text-decoration: none !important;
243 } 243 }
244 244
245 .td { 245 .td {
246 background-color: #fefeff; 246 background-color: #fefeff;
247 padding: 5px; 247 padding: 5px;
248 color: #142453; 248 color: #142453;
249 } 249 }
250 250
251 .td-notice { 251 .td-notice {
252 border-bottom: inherit !important; 252 border-bottom: inherit !important;
253 } 253 }
254 254
255 .td-notice:nth-child(even) { 255 .td-notice:nth-child(even) {
256 color: rgb(120, 82, 204) !important; 256 color: rgb(120, 82, 204) !important;
257 } 257 }
258 258
259 .td-notice:nth-child(odd) { 259 .td-notice:nth-child(odd) {
260 color: #f9a825 !important; 260 color: #f9a825 !important;
261 } 261 }
262 262
263 .td-notice { 263 .td-notice {
264 border-bottom: inherit !important; 264 border-bottom: inherit !important;
265 } 265 }
266 266
267 .td-notice:nth-child(even) { 267 .td-notice:nth-child(even) {
268 color: rgb(120, 82, 204); 268 color: rgb(120, 82, 204);
269 } 269 }
270 270
271 .td-notice:nth-child(odd) { 271 .td-notice:nth-child(odd) {
272 color: #f9a825; 272 color: #f9a825;
273 } 273 }
274 274
275 .card { 275 .card {
276 border-radius: 6px !important; 276 border-radius: 6px !important;
277 } 277 }
278 278
279 .card:hover { 279 .card:hover {
280 -webkit-box-shadow: 0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12) !important; 280 -webkit-box-shadow: 0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12) !important;
281 box-shadow: 0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12) !important; 281 box-shadow: 0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12) !important;
282 } 282 }
283 283
284 .td-row { 284 .td-row {
285 border-right: hidden; 285 border-right: hidden;
286 } 286 }
287 287
288 table.v-table { 288 table.v-table {
289 border-radius: 2px; 289 border-radius: 2px;
290 border-collapse: separate !important; 290 border-collapse: separate !important;
291 border-spacing: 0 15px !important; 291 border-spacing: 0 15px !important;
292 width: 100%; 292 width: 100%;
293 max-width: 100%; 293 max-width: 100%;
294 } 294 }
295 295
296 .gfg { 296 .gfg {
297 border-collapse: separate; 297 border-collapse: separate;
298 border-spacing: 0 15px; 298 border-spacing: 0 15px;
299 } 299 }
300 300
301 .theme--light.v-table { 301 .theme--light.v-table {
302 background-color: transparent !important; 302 background-color: transparent !important;
303 color: rgba(0, 0, 0, 0.87); 303 color: rgba(0, 0, 0, 0.87);
304 } 304 }
305 305
306 .open-dialog-button { 306 .open-dialog-button {
307 background: #827bfa !important; 307 background: #827bfa !important;
308 border-color: #827bfa !important; 308 border-color: #827bfa !important;
309 text-transform: none !important; 309 text-transform: none !important;
310 } 310 }
311 311
312 .add-button { 312 .add-button {
313 background: #feb83c !important; 313 background: #feb83c !important;
314 border-color: #feb83c !important; 314 border-color: #feb83c !important;
315 text-transform: none !important; 315 text-transform: none !important;
316 -webkit-box-shadow: none !important; 316 -webkit-box-shadow: none !important;
317 box-shadow: none !important; 317 box-shadow: none !important;
318 } 318 }
319 319
320 table.v-table thead th { 320 table.v-table thead th {
321 font-size: 14px !important; 321 font-size: 14px !important;
322 } 322 }
323 323
324 .titleCard { 324 .titleCard {
325 font-size: 20px !important; 325 font-size: 20px !important;
326 font-weight: 500; 326 font-weight: 500;
327 line-height: 1 !important; 327 line-height: 1 !important;
328 letter-spacing: 0.02em !important; 328 letter-spacing: 0.02em !important;
329 font-family: 'Roboto', sans-serif !important; 329 font-family: 'Roboto', sans-serif !important;
330 } 330 }
331 331
332 332
333 /* .v-text-field input { 333 /* .v-text-field input {
334 text-align: center; 334 text-align: center;
335 } */ 335 } */
336 336
337 .card-style { 337 .card-style {
338 background: #7f62f8 !important; 338 background: #7f62f8 !important;
339 border-color: #7f62f8 !important; 339 border-color: #7f62f8 !important;
340 border-radius: 12px; 340 border-radius: 12px;
341 text-align: center !important; 341 text-align: center !important;
342 padding-top: 10px !important; 342 padding-top: 10px !important;
343 } 343 }
344 344
345 .title { 345 .title {
346 line-height: 2 !important; 346 line-height: 2 !important;
347 } 347 }
348 348
349 .v-dialog { 349 .v-dialog {
350 -webkit-box-shadow: none !important; 350 -webkit-box-shadow: none !important;
351 box-shadow: none !important; 351 box-shadow: none !important;
352 } 352 }
353 353
354 .tr { 354 .tr {
355 border-radius: 6px !important; 355 border-radius: 6px !important;
356 } 356 }
357 357
358 .tr:hover { 358 .tr:hover {
359 -webkit-box-shadow: 0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12) !important; 359 -webkit-box-shadow: 0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12) !important;
360 box-shadow: 0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12) !important; 360 box-shadow: 0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12) !important;
361 } 361 }
362 362
363 .__vev_calendar-wrapper .events-wrapper { 363 .__vev_calendar-wrapper .events-wrapper {
364 display: none; 364 display: none;
365 } 365 }
366 366
367 .__vev_calendar-wrapper .cal-wrapper { 367 .__vev_calendar-wrapper .cal-wrapper {
368 width: 100% !important; 368 width: 100% !important;
369 padding: 0 !important; 369 padding: 0 !important;
370 background: white; 370 background: white;
371 border-radius: 8px; 371 border-radius: 8px;
372 } 372 }
373 373
374 .body-color { 374 .body-color {
375 background: #f6f9ff 375 background: #f6f9ff
376 } 376 }
377 377
378 .clear-button { 378 .clear-button {
379 background: #fa7676 !important; 379 background: #fa7676 !important;
380 border-color: #fa7676 !important; 380 border-color: #fa7676 !important;
381 text-transform: none !important; 381 text-transform: none !important;
382 -webkit-box-shadow: none !important; 382 -webkit-box-shadow: none !important;
383 box-shadow: none !important; 383 box-shadow: none !important;
384 } 384 }
385 385
386 .card-styles { 386 .card-styles {
387 background: #7f62f8 !important; 387 background: #7f62f8 !important;
388 border-color: #7f62f8 !important; 388 border-color: #7f62f8 !important;
389 } 389 }
390 390
391 391
392 /* Side Scroll Bar */ 392 /* Side Scroll Bar */
393 393
394 ::-webkit-scrollbar { 394 ::-webkit-scrollbar {
395 width: 6px; 395 width: 6px;
396 height: 3px; 396 height: 3px;
397 } 397 }
398 398
399 399
400 /* Track */ 400 /* Track */
401 401
402 ::-webkit-scrollbar-track { 402 ::-webkit-scrollbar-track {
403 -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3); 403 -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
404 -webkit-border-radius: 10px; 404 -webkit-border-radius: 10px;
405 border-radius: 10px; 405 border-radius: 10px;
406 background-color: #f5f5f5; 406 background-color: #f5f5f5;
407 } 407 }
408 408
409 409
410 /* Handle */ 410 /* Handle */
411 411
412 ::-webkit-scrollbar-thumb { 412 ::-webkit-scrollbar-thumb {
413 -webkit-border-radius: 10px; 413 -webkit-border-radius: 10px;
414 border-radius: 10px; 414 border-radius: 10px;
415 background: rgba(255, 0, 0, 0.8); 415 background: rgba(255, 0, 0, 0.8);
416 -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.5); 416 -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.5);
417 background-color: #f5f5f5; 417 background-color: #f5f5f5;
418 background-image: -webkit-gradient( linear, left bottom, left top, color-stop(0.44, rgb(122, 153, 217)), color-stop(0.72, rgb(73, 125, 189)), color-stop(0.86, rgb(28, 58, 148))); 418 background-image: -webkit-gradient( linear, left bottom, left top, color-stop(0.44, rgb(122, 153, 217)), color-stop(0.72, rgb(73, 125, 189)), color-stop(0.86, rgb(28, 58, 148)));
419 } 419 }
420 420
421 ::-webkit-scrollbar-thumb:window-inactive { 421 ::-webkit-scrollbar-thumb:window-inactive {
422 background: rgba(255, 0, 0, 0.4); 422 background: rgba(255, 0, 0, 0.4);
423 background-image: -webkit-gradient( linear, left bottom, left top, color-stop(0.44, rgb(122, 153, 217)), color-stop(0.72, rgb(73, 125, 189)), color-stop(0.86, rgb(28, 58, 148))); 423 background-image: -webkit-gradient( linear, left bottom, left top, color-stop(0.44, rgb(122, 153, 217)), color-stop(0.72, rgb(73, 125, 189)), color-stop(0.86, rgb(28, 58, 148)));
424 } 424 }
425 425
426 @media screen and (max-width: 769px) { 426 @media screen and (max-width: 769px) {
427 .top { 427 .top {
428 margin-top: 0 !important; 428 margin-top: 0 !important;
429 } 429 }
430 .userSearch .v-icon { 430 .userSearch .v-icon {
431 font-size: 20px !important; 431 font-size: 20px !important;
432 margin-left: 20px; 432 margin-left: 20px;
433 } 433 }
434 } 434 }
435 435
436 @media screen and (max-width: 380px) { 436 @media screen and (max-width: 380px) {
437 .pl-3 { 437 .pl-3 {
438 padding-left: 0px !important; 438 padding-left: 0px !important;
439 } 439 }
440 .right { 440 .right {
441 float: none !important; 441 float: none !important;
442 } 442 }
443 .subheading { 443 .subheading {
444 font-size: 14px !important; 444 font-size: 14px !important;
445 } 445 }
446 .v-card__actions .v-btn { 446 .v-card__actions .v-btn {
447 margin: 0 0px; 447 margin: 0 0px;
448 min-width: 100px; 448 min-width: 100px;
449 } 449 }
450 .subheading { 450 .subheading {
451 font-size: 12px !important; 451 font-size: 12px !important;
452 } 452 }
453 h5 { 453 h5 {
454 font-size: 13px; 454 font-size: 13px;
455 } 455 }
456 } 456 }
457 457
458 .v-icon { 458 .v-icon {
459 font-size: 30px; 459 font-size: 30px;
460 } 460 }
461 461
462 @media screen and (min-width: 1270px) { 462 @media screen and (min-width: 1270px) {
463 .hide { 463 .hide {
464 display: none; 464 display: none;
465 } 465 }
466 } 466 }
467 467
468 @media screen and (max-width: 420px) { 468 @media screen and (max-width: 420px) {
469 .userSearch .v-text-field .v-label { 469 .userSearch .v-text-field .v-label {
470 line-height: 24px !important; 470 line-height: 24px !important;
471 } 471 }
472 .userSearch .v-label { 472 .userSearch .v-label {
473 font-size: 13px !important; 473 font-size: 13px !important;
474 } 474 }
475 .v-list__tile { 475 .v-list__tile {
476 font-size: 14px !important; 476 font-size: 14px !important;
477 padding: 0 10px !important; 477 padding: 0 10px !important;
478 } 478 }
479 .name { 479 .name {
480 font-size: 15px !important; 480 font-size: 15px !important;
481 } 481 }
482 .mr5 { 482 .mr5 {
483 margin-right: 14px !important; 483 margin-right: 14px !important;
484 } 484 }
485 .addressForm { 485 .addressForm {
486 max-width: 0; 486 max-width: 0;
487 } 487 }
488 .tableRsponsive { 488 .tableRsponsive {
489 display: block; 489 display: block;
490 position: relative; 490 position: relative;
491 overflow: scroll; 491 overflow: scroll;
492 } 492 }
493 } 493 }
494 494
495 @media screen and (max-width: 600px) { 495 @media screen and (max-width: 600px) {
496 img { 496 img {
497 /* position: absolute; */ 497 /* position: absolute; */
498 top: 13px; 498 top: 13px;
499 left: 10px; 499 left: 10px;
500 height: 28px; 500 height: 28px;
501 width: 28px; 501 width: 28px;
502 margin-top: 5px; 502 margin-top: 5px;
503 } 503 }
504 .iconOfDashboard { 504 .iconOfDashboard {
505 top: 0px !important; 505 top: 0px !important;
506 left: 0px !important; 506 left: 0px !important;
507 height: 80px !important; 507 height: 80px !important;
508 width: 80px !important; 508 width: 80px !important;
509 margin-top: 0px !important; 509 margin-top: 0px !important;
510 } 510 }
511 .v-list__tile__title { 511 .v-list__tile__title {
512 padding-left: 12px !important; 512 padding-left: 12px !important;
513 } 513 }
514 } 514 }
515 515
516 .img { 516 .img {
517 height: 200px; 517 height: 200px;
518 width: auto; 518 width: auto;
519 } 519 }
520 520
521 .imgNews { 521 .imgNews {
522 height: auto; 522 height: auto;
523 width: 100px !important; 523 width: 100px !important;
524 } 524 }
525 525
526 .text-center { 526 .text-center {
527 text-align: center !important; 527 text-align: center !important;
528 } 528 }